/* Tokens, from the draft. v1 is light only: the films exist only in the light finish. */
:root{
  color-scheme: light;
  --ground:#F1F2F1;      /* the stage colour of the design renders */
  --surface:#E4E6E5;     /* light aluminium, a step lighter than the panel */
  --ink:#1E2022;
  --ink-2:#55595C;
  --rule:#D3D5D5;        /* panel grey */
  --lit:#FF8E29;         /* the brand orange: the slash in feed/back, and the dot row's hits */
  --screen:#090B0A;
  --screen-ink:#F4F4F0;
  --hair: rgba(30,32,34,.13); /* the instrument's column lines */
  --ink-light:#F4F4F0;   /* type on the portrait hero's darker grey */
  --landscape-band:#8B8A85; /* the landscape hero's top band: its ground until the poster arrives */
  --portrait-band:#67655F; /* the portrait hero's top band: its ground until the poster arrives */
  --ease-return: cubic-bezier(0.2, 0.75, 0.25, 1); /* "key return": long deceleration, no overshoot */
  --sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --lcd: "Barlow Semi Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --wrap: 1320px;
  --gut: clamp(20px, 4vw, 48px);
  --h2: clamp(40px, 5.6vw, 82px);
}
/* v2, dark finish: these values come back with the charcoal films.
  color-scheme: dark;
  --ground:#161718;
  --surface:#222426;
  --ink:#ECEDE9;
  --ink-2:#A3A7A9;
  --rule:#2C2E30;
*/

/* The films run full bleed under the status bar and the home indicator; safe areas are handled per element. */
:root{
  box-sizing: border-box;
  background: var(--ground);
  --safe-l: max(var(--gut), env(safe-area-inset-left, 0px));
  --safe-r: max(var(--gut), env(safe-area-inset-right, 0px));
}
html{ scroll-padding-top: env(safe-area-inset-top, 0px); scrollbar-gutter: stable; } /* no shift when a film holds the page */
*,*::before,*::after{ box-sizing: inherit; }
body{
  margin:0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; }
:focus-visible{ outline: 2px solid var(--ink); outline-offset: 3px; }
.vh{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.wrap{ max-width: var(--wrap); margin: 0 auto; padding: 0 var(--safe-r) 0 var(--safe-l); }
button{ touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* Type */
h1,h2,h3,p{ margin:0; }
h2{
  font-weight: 600;
  font-size: var(--h2);
  line-height: 0.98;
  letter-spacing: -0.032em;
  max-width: 12ch;
  text-wrap: balance;
}
h3{ font-size: 18px; font-weight: 600; letter-spacing: -0.005em; }
.copy p{ color: var(--ink-2); max-width: 34em; }
.copy p + p{ margin-top: 16px; }

/* Set as the instrument's printed legends: Archivo Medium, caps, +0.06em */
.legend{
  font-family: var(--sans);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* Track label beside a section: the track this part of the page records */
.part{
  display:flex; align-items:center; gap:10px;
  font-size: 15px; color: var(--ink-2);
  margin-bottom: 28px;
}
.trk{
  display:inline-grid; place-items:center;
  min-width: 26px; height: 26px; padding: 0 6px;
  border-radius: 4px;
  background: var(--screen); color: var(--screen-ink);
  font-family: var(--lcd); font-weight: 600; font-size: 17px; line-height: 1;
}
.trk + .trk{ margin-left: 12px; }

/* The name is written feed/back; in the mark, the slash is the brand orange */
.slash{ color: var(--lit); }