/* ===========================================================================
   One site.

   Every page used to set its own sizes. Home's title was 79px and Songs' was
   40px; About's sections were 67px and Songs' were 40px; Home had its own
   buttons at three different sizes. Moving between tabs felt like moving
   between sites. This file is loaded last and holds the few decisions every
   page shares, so a page can differ in what it shows and never in how it
   speaks.

   The scale, in one place:
     page title    --lwp-title    one per page, in the dark room at the top
     section head  --lwp-section  every band's heading, light or dark
     lead          --lwp-lead     the line under a page title
   =========================================================================== */
:root{
  --lwp-night:#090e12;
  --lwp-panel:#11191a;
  --lwp-cream:#f3ead8;
  --lwp-paper:#ece1cb;
  --lwp-ink:#19222e;
  --lwp-forest:#2c3a2c;
  --lwp-muted:#52606a;

  --lwp-title:clamp(56px,7vw,104px);
  --lwp-section:clamp(40px,4.4vw,64px);
  --lwp-lead:clamp(16px,1.3vw,19px);
  --lwp-cream-soft:rgba(243,234,216,.78);
}

/* The two page-scoped colour sets were always the same values under two
   names. They now both point at the one set. */
.sgpage,.hp-home{
  --sg-night:var(--lwp-night);--sg-panel:var(--lwp-panel);--sg-cream:var(--lwp-cream);
  --sg-ink:var(--lwp-ink);--sg-forest:var(--lwp-forest);--sg-muted:var(--lwp-muted);
  --hp-night:var(--lwp-night);--hp-panel:var(--lwp-panel);--hp-cream:var(--lwp-cream);
  --hp-ink:var(--lwp-ink);--hp-forest:var(--lwp-forest);--hp-muted:var(--lwp-muted);
}

/* ---------- page titles: one size, one shape ---------- */
.hp-copy h1,
.about-v3-copy h1,
.sgpage h1.song-title,
.profile-v3-hero h1,
.sgpage .room-title{
  font-family:var(--anton);
  font-weight:400;
  font-size:var(--lwp-title);
  line-height:.9;
  letter-spacing:-.028em;
  text-transform:uppercase;
  color:var(--lwp-cream);
  text-wrap:balance;
}
/* The second line is the turn, and it is always ochre. */
.sgpage .room-title em{display:block;font-style:normal;color:var(--ochre)}

/* Songs and Community used to set a 40px heading beside a paragraph. They now
   open like every other page: the title, then the line under it. */
.sgpage .library-hero,.sgpage .community-hero{min-height:0;padding-top:88px}
.sgpage .library-hero .band-head,.sgpage .community-hero .band-head{
  display:block;max-width:none;margin-bottom:0;
}
.sgpage .library-hero .band-head .room-title,
.sgpage .community-hero .band-head .room-title{max-width:14ch;margin:0 0 22px;padding:0}

/* ---------- the line under a title ---------- */
.hp-subline,
.about-v3-copy>p,
.sgpage .library-hero .band-head p,
.sgpage .community-hero .band-head p{
  font-size:var(--lwp-lead);
  line-height:1.55;
  color:var(--lwp-cream-soft);
  max-width:56ch;
}
.hp-subline{color:var(--lwp-cream)}

/* ---------- section heads ---------- */
.sgpage .band-head h2,
.hp-set-intro h2,.hp-artists h2,
.hp-close h2,
.about-v3-heading h2,.about-v3-model h2,.about-ground-story h2,
.artist-campaign-story h2{
  font-family:var(--anton);
  font-weight:400;
  font-size:var(--lwp-section);
  line-height:.92;
  letter-spacing:-.018em;
  text-transform:uppercase;
  text-wrap:balance;
}

/* ---------- buttons: Home's now match every other page's ---------- */
.hp-set-intro .btn,
.hp-close-actions .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:50px;padding:0 22px;border-radius:0;
  font-family:var(--anton);font-size:14px;letter-spacing:.06em;text-transform:uppercase;
  transition:transform .16s var(--ease-out),background .16s,border-color .16s,box-shadow .16s;
}
.hp-set-intro .btn:hover,.hp-close-actions .btn:hover{transform:translateY(-2px)}
.hp-close-actions .btn:first-child{box-shadow:8px 8px 0 rgba(5,8,10,.34)}
.hp-close-actions .btn:first-child:hover{background:var(--terra-d);box-shadow:10px 10px 0 rgba(5,8,10,.4)}

/* The one big button a page opens with. Home's play button and About's
   first button were two different sizes of the same idea. */
.hp-playcta,
.about-v3-hero .sgbtn,
.profile-v3-hero .sgbtn{
  height:56px;padding:0 26px;
  font-family:var(--anton);font-size:15px;letter-spacing:.06em;text-transform:uppercase;
  border-radius:0;
}
.hp-playcta,.about-v3-hero .sgbtn.solid,.profile-v3-hero .sgbtn.solid{box-shadow:8px 8px 0 rgba(5,8,10,.34)}
.hp-playcta:hover,.about-v3-hero .sgbtn.solid:hover,.profile-v3-hero .sgbtn.solid:hover{box-shadow:10px 10px 0 rgba(5,8,10,.4)}

/* Every other button on the site: the sign-in forms, the dialogs, the
   church's board. They were rounded pills in a different typeface, a leftover
   from the first design, and they now speak the same squared, Anton voice as
   the buttons on the pages behind them. */
.btn{
  min-height:46px;border-radius:0;padding:0 20px;justify-content:center;
  font-family:var(--anton);font-weight:400;font-size:14px;letter-spacing:.06em;text-transform:uppercase;
}
.btn.solid{box-shadow:6px 6px 0 rgba(5,8,10,.26)}
.btn.solid:hover{box-shadow:8px 8px 0 rgba(5,8,10,.32)}
.modal{border-radius:0}
/* The form helpers write their corners inline, so only !important reaches them. */
.modal input,.modal textarea,.modal select{border-radius:0!important}
.modal h3{font-family:var(--anton);font-weight:400!important;text-transform:uppercase;letter-spacing:.005em;font-size:30px!important;line-height:1}

/* The church's board keeps its paper slips pinned at an angle. A slip of
   paper has a barely-there corner, not an app card's rounded one. */
.chboard{--r-sm:2px;--r-md:2px;--r-lg:3px}
.chplate{background:var(--lwp-night)}
.chplate-name{font-size:clamp(48px,6vw,88px);line-height:.9;letter-spacing:-.028em;text-transform:uppercase}

/* The map's dark field runs straight on from the page title. A strip of the
   page's cream showed between them, as if the page had come apart. */
.sgpage.commpage{background:var(--lwp-night)}

/* ---------- the parts nobody draws ---------- */
::selection{background:rgba(224,169,78,.42);color:inherit}
:focus-visible{outline-color:var(--terracotta)}
input,textarea{caret-color:var(--terracotta)}

@media (max-width:820px){
  :root{--lwp-title:clamp(48px,13vw,72px);--lwp-section:clamp(34px,9vw,48px)}
  .sgpage .library-hero,.sgpage .community-hero{padding-top:56px}
  /* On a phone the menu drops to its own row. It sat under a tall empty band,
     so the header took a sixth of the screen before any content. */
  :root body .topbar .row{row-gap:0;padding:6px 0 0}
  :root body .navlinks a{padding:10px 8px 14px;font-size:12px}
  :root body .navlinks a.active::after{bottom:6px;left:8px;right:8px}
}