/* Double Down RP: the one stylesheet every page shares.

   The look is a street sign: heavy capitals for names and headings, plain type for reading, thick rules between
   sections, and everything hung from the left edge.

   There are no brand colours yet. The site is white by day and black by night, and the visitor can switch
   between the two. When the logo's colours arrive, change the tokens in the first block below. Each page's
   <head> also names the two ground colours in its theme-color lines, for the browser's own bars. */

@font-face {
  font-family: "Big Shoulders Display";
  src: url("/fonts/big-shoulders-display-latin-900-normal.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("/fonts/public-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("/fonts/public-sans-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */

:root {
  /* Colours: the day set and the night set. */
  --day-ground: #ffffff;
  --day-ink: #000000;
  --day-quiet: #595959;
  --night-ground: #000000;
  --night-ink: #ffffff;
  --night-quiet: #a6a6a6;

  /* What the page wears right now. It starts as day; the night blocks below swap these. */
  --ground: var(--day-ground);
  --ink: var(--day-ink);
  --quiet: var(--day-quiet);
  /* The two lines under the name: the one that matches the time of day is the strong one. */
  --day-voice: var(--ink);
  --night-voice: var(--quiet);
  --day-voice-weight: 600;
  --night-voice-weight: 400;
  /* The switch: the side that matches the time of day is the filled one. */
  --day-side: var(--ink);
  --day-side-text: var(--ground);
  --night-side: transparent;
  --night-side-text: var(--ink);

  /* Type */
  --display: "Big Shoulders Display", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --text: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Space */
  --gutter: clamp(20px, 4vw, 56px);
  --pad-l: max(var(--gutter), env(safe-area-inset-left, 0px));
  --pad-r: max(var(--gutter), env(safe-area-inset-right, 0px));
  --rule: 4px;
  --head-h: 72px;
  /* How much of the next section shows under the home page's first screen. */
  --peek: clamp(40px, 9vh, 96px);

  color-scheme: light;
}
/* Night. The two blocks below must stay the same: the first follows the device when the visitor has not chosen,
   the second is the visitor's own choice. */
@media (prefers-color-scheme: dark) {
  :root:not([data-time="day"]) {
    --ground: var(--night-ground);
    --ink: var(--night-ink);
    --quiet: var(--night-quiet);
    --day-voice: var(--quiet);
    --night-voice: var(--ink);
    --day-voice-weight: 400;
    --night-voice-weight: 600;
    --day-side: transparent;
    --day-side-text: var(--ink);
    --night-side: var(--ink);
    --night-side-text: var(--ground);
    color-scheme: dark;
  }
}
:root[data-time="night"] {
  --ground: var(--night-ground);
  --ink: var(--night-ink);
  --quiet: var(--night-quiet);
  --day-voice: var(--quiet);
  --night-voice: var(--ink);
  --day-voice-weight: 400;
  --night-voice-weight: 600;
  --day-side: transparent;
  --day-side-text: var(--ink);
  --night-side: var(--ink);
  --night-side-text: var(--ground);
  color-scheme: dark;
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 clamp(1rem, 0.96rem + 0.2vw, 1.125rem)/1.55 var(--text);
}
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p, dd { text-wrap: pretty; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.skip {
  position: absolute;
  top: 8px;
  left: var(--pad-l);
  z-index: 10;
  padding: 12px 16px;
  background: var(--ink);
  color: var(--ground);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-300%);
}
.skip:focus { transform: none; }

.page {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding-left: var(--pad-l);
  padding-right: var(--pad-r);
}
main { min-width: 0; }

/* ---------- Header: the name, the pages, the day and night switch ---------- */

.head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px clamp(12px, 3vw, 40px);
  min-height: var(--head-h);
  padding-block: max(14px, env(safe-area-inset-top, 0px)) 14px;
}
.brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font: 900 1.75rem/1 var(--display);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
/* The home page already carries the name at full size, so the small one is left out there. */
.home .brand { display: none; }

.nav ul { display: flex; gap: 2px; margin-left: -10px; }
.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 3px 10px 0;
  border-bottom: 3px solid transparent;
  color: var(--quiet);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }

/* The switch needs the script, so it only shows once the script has run. Which side is filled comes from the
   tokens, not from the script, so it is right from the first moment the page is drawn. */
.switch { display: none; margin-left: auto; border: 2px solid var(--ink); }
.js .switch { display: inline-flex; }
.switch button {
  appearance: none;
  min-width: 52px;
  min-height: 40px;
  padding: 0 10px;
  border: 0;
  font: 600 0.9375rem/1 var(--text);
  cursor: pointer;
}
.switch button[value="day"] { background: var(--day-side); color: var(--day-side-text); }
.switch button[value="night"] { background: var(--night-side); color: var(--night-side-text); }

/* ---------- Shared pieces ---------- */

/* A sign plate: says what state something is in. Not a button. */
.plate {
  display: inline-block;
  padding: 0.42em 0.6em 0.34em;
  background: var(--ink);
  color: var(--ground);
  font: 900 clamp(1.125rem, 1.7vw, 1.5rem)/1 var(--display);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* A link that leads to the next step. */
.go {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 20px;
  border: 2px solid var(--ink);
  font-weight: 600;
  text-decoration: none;
}
.go:hover { background: var(--ink); color: var(--ground); }

.lead {
  max-width: 38rem;
  text-wrap: balance;
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  line-height: 1.45;
}

/* ---------- Home: the first screen ---------- */

.hero {
  display: grid;
  gap: clamp(18px, min(3.5vw, 4.5vh), 40px);
  padding-block: clamp(8px, 3vh, 64px) clamp(20px, 4vh, 56px);
  min-width: 0;
}
/* On a wide screen the name sits at the bottom of the first screen like a sign, and the top of the next section
   shows under it. On a tall, narrow screen the page simply starts at the top. */
@media (min-aspect-ratio: 5/4) and (min-width: 800px) {
  .hero {
    min-height: calc(100vh - var(--head-h) - var(--peek));
    min-height: calc(100svh - var(--head-h) - var(--peek));
    align-content: end;
  }
}
.name {
  font-family: var(--display);
  font-weight: 900;
  /* As big as the screen allows. Across: the longer line, DOWN RP, comes out 3.53 times as wide as the type
     size and has to fit between the gutters. Down: on a wide screen the name's two lines (1.68 times the type
     size) get what is left of the first screen after the header, the lines under the name and the peek of the
     next section. On a short screen those shrink along with it, on a tall one they stop growing, hence the two
     sums; the larger one is the one that fits. */
  font-size: clamp(
    4rem,
    min(
      (100vw - 2 * var(--gutter)) / 3.6,
      max(20vh, (65vh - 10.5rem) / 1.68, (100vh - 25.5rem - var(--peek)) / 1.68)
    ),
    24rem
  );
  line-height: 0.84;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}
.name span { display: block; }
.lines {
  display: grid;
  gap: 0.15em;
  font-size: clamp(1.375rem, min(2.6vw, 4.4vh), 2.25rem);
  line-height: 1.2;
}
.by-day { color: var(--day-voice); font-weight: var(--day-voice-weight); }
.by-night { color: var(--night-voice); font-weight: var(--night-voice-weight); }
.hero-foot { display: grid; justify-items: start; gap: 14px; }
.about { max-width: 34rem; color: var(--quiet); }

/* ---------- Home: the two lives ---------- */

/* The one place both sets of colours show at once: the day half is always white, the night half always black. */
.lives {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-left: calc(-1 * var(--pad-l));
  margin-right: calc(-1 * var(--pad-r));
  border-block: var(--rule) solid var(--ink);
}
.life {
  min-width: 0;
  padding: clamp(36px, 6vw, 88px) var(--pad-r) clamp(36px, 6vw, 88px) var(--pad-l);
  background: var(--ground);
  color: var(--ink);
  font: 900 clamp(3.5rem, 10vw, 9rem)/0.84 var(--display);
  text-transform: uppercase;
}
.life-day { --ground: var(--day-ground); --ink: var(--day-ink); --quiet: var(--day-quiet); }
.life-night { --ground: var(--night-ground); --ink: var(--night-ink); --quiet: var(--night-quiet); }
@media (max-width: 700px) {
  .lives { grid-template-columns: 1fr; }
}
/* The two halves close with their own rule, edge to edge, so the section after them does not draw a second one. */
.lives + .band { border-top: 0; }

/* ---------- Sections: a heading on the left, what it holds on the right ---------- */

.band {
  display: grid;
  gap: clamp(20px, 3vw, 32px) clamp(24px, 4vw, 64px);
  padding-block: clamp(36px, 6vw, 80px) clamp(44px, 7vw, 96px);
  border-top: var(--rule) solid var(--ink);
}
@media (min-width: 860px) {
  .band { grid-template-columns: minmax(0, 20rem) minmax(0, 44rem); }
}
.band > h2 {
  font: 900 clamp(2.25rem, 4.4vw, 3.5rem)/0.9 var(--display);
  text-transform: uppercase;
}
.band-body { display: grid; justify-items: start; gap: clamp(16px, 2vw, 24px); min-width: 0; }
.band-body > p { max-width: 38rem; }

/* ---------- Inner pages: the title block ---------- */

.title {
  display: grid;
  justify-items: start;
  gap: clamp(16px, 2.4vw, 28px);
  padding-block: clamp(32px, 7vh, 96px) clamp(36px, 5vw, 72px);
}
/* Big, but the name on the home page stays the biggest thing on the site. */
.title h1 {
  font: 900 clamp(4rem, 11vw, 9.5rem)/0.84 var(--display);
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

/* ---------- Footer ---------- */

.foot {
  display: grid;
  gap: 2px;
  padding-block: 14px max(20px, env(safe-area-inset-bottom, 0px));
  border-top: var(--rule) solid var(--ink);
  color: var(--quiet);
  font-size: 0.875rem;
  line-height: 1.45;
}
.foot p { max-width: 46rem; overflow-wrap: anywhere; }
.foot a:hover { color: var(--ink); }

/* ---------- Windows high-contrast mode ---------- */

/* That mode replaces every background with its own, which would hide which side of the switch is on and turn
   the sign plates into plain words. */
@media (forced-colors: active) {
  .switch button[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .plate { border: 2px solid CanvasText; }
}

/* ---------- Motion: only for visitors who have not asked for less of it ---------- */

@media (prefers-reduced-motion: no-preference) {
  /* Moving between pages: the header holds still and the page changes under it. */
  @view-transition { navigation: auto; }
  .head { view-transition-name: head; }

  /* Browsers that cannot wipe get a short fade between day and night instead. */
  body { transition: background-color 0.25s ease, color 0.25s ease; }
  .lines span, .nav a, .switch button, .go { transition: color 0.25s ease, background-color 0.25s ease; }

  /* Switching the time of day: night falls from the top of the screen, day comes up from the bottom.
     The script puts "flip" on the page for as long as the wipe runs. */
  .flip, .flip *, .flip *::before, .flip *::after { transition: none !important; }
  .flip .head { view-transition-name: none; }
  .flip::view-transition-old(root),
  .flip::view-transition-new(root) { mix-blend-mode: normal; }
  .flip::view-transition-old(root) { animation: none; }
  .flip::view-transition-new(root) { animation: night-falls 0.55s cubic-bezier(0.7, 0, 0.2, 1) both; }
  .flip[data-time="day"]::view-transition-new(root) { animation-name: day-breaks; }
}
@keyframes night-falls {
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0 0 0 0); }
}
@keyframes day-breaks {
  from { clip-path: inset(100% 0 0 0); }
  to { clip-path: inset(0 0 0 0); }
}