/* Y · Handheld. Tokens, reset and type. One colour world, the way the scrolltide sites hold one: bone paper, ink, and a
   single signal vermilion. The phone in the middle of the page is the only object; everything else is type and photo. */
:root {
  --bone: #F0EBE3;               /* the page */
  --paper: #F8F5F0;              /* a sheet on the page: cards, fields */
  --ink: #131115;
  --slate: #5A544E;              /* quiet text on bone, 6.4:1 */
  --hair: #D8D0C4;
  --signal: #E8461E;             /* vermilion: big type, fields, the one filled button. Never small text on bone. */
  --signal-ink: #C2381A;         /* vermilion for small text and links on bone: 4.57:1 (4.98 on paper). Brighter than a
                                    brick shade on purpose: colour research (18 Oct) found browns the least liked */
  --signal-lit: #F0643C;         /* vermilion for small text on the night's sheets (#1D1A1E): 5.41:1 */
  --signal-soft: #F6C9B8;        /* vermilion as a tint, with ink on it */
  --night: #131115;              /* the evening band and the footer */
  --night-2: #1D1A1E;            /* a sheet on the night */
  --on-dark: #F0EBE3;
  --on-dark-soft: #B8AFA5;       /* 8.6:1 on night */
  --hair-dark: #34302F;

  --display: 'Sofia Sans Extra Condensed', 'Arial Narrow', 'Helvetica Neue', sans-serif;
  --text: 'Sofia Sans', 'Helvetica Neue', system-ui, sans-serif;

  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 40px; --s5: 64px; --s6: 112px;
  --gutter: clamp(20px, 3.6vw, 56px);
  --wrap: 1360px;
  --head: 68px;
  --r: 14px;                     /* cards: the phone's own corner, scaled down */
  --r-btn: 999px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--head) + 24px); }
body {
  margin: 0; background: var(--bone); color: var(--ink);
  font: 400 18px/1.5 var(--text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }

/* The display face is set big, upper case and tight; it is never used below 28px. */
.display, h1, h2 { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; line-height: .86; text-wrap: balance; }
h2 { font-size: clamp(44px, 5.4vw, 84px); }
h3 { font: 700 clamp(21px, 1.6vw, 24px)/1.2 var(--text); letter-spacing: -0.01em; text-wrap: balance; }
.num { font-variant-numeric: lining-nums tabular-nums; }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.on-dark :focus-visible, .on-signal :focus-visible { outline-color: currentColor; }

.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 100; padding: 12px 16px; background: var(--ink); color: var(--on-dark); border-radius: 8px; }
.skip:focus { top: 12px; }

/* Buttons: one filled (vermilion on bone and night, ink on vermilion), one outlined. 48px tall, never smaller. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px;
  border: 0; border-radius: var(--r-btn); background: var(--signal); color: var(--ink);
  font: 700 17px/1 var(--text); text-decoration: none; cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.btn:hover { background: var(--ink); color: var(--on-dark); }
.btn:active { transform: translateY(1px); }
.btn--line { background: transparent; box-shadow: inset 0 0 0 2px currentColor; color: inherit; }
.btn--line:hover { background: var(--ink); color: var(--on-dark); box-shadow: none; }
.on-dark .btn:hover, .on-dark .btn--line:hover { background: var(--on-dark); color: var(--ink); }
.on-signal .btn { background: var(--ink); color: var(--on-dark); }
.on-signal .btn:hover { background: var(--bone); color: var(--ink); }
.on-signal .btn--line { background: transparent; color: var(--ink); }
.on-signal .btn--line:hover { background: var(--ink); color: var(--on-dark); }

/* A door: the one link at the end of a band, naming where it goes. */
.door {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 4px 0;
  color: var(--signal-ink); font: 700 18px/1.2 var(--text); text-decoration: none;
  border-bottom: 2px solid currentColor; transition: gap .25s var(--ease), color .2s var(--ease);
}
.door::after { content: ''; width: 18px; height: 12px; background: currentColor; clip-path: polygon(0 42%, 70% 42%, 70% 0, 100% 50%, 70% 100%, 70% 58%, 0 58%); }
.door:hover { gap: 18px; color: var(--ink); }
.on-dark .door { color: var(--on-dark); }
.on-dark .door:hover { color: var(--signal); }
.on-signal .door { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
}