/* 1108-brands.com: from signal to brand.
   A deep wine night. Fine threads of light, loose and far apart, are drawn in
   one after another and come to lie side by side as one silk ribbon, which
   turns once in the light and undulates slowly; the word "signal" in the
   headline rides the same wave (assets/ribbon.js draws the ribbon and the
   ground on a canvas fixed behind the page). The page scrolls over it, in one
   centred column; the ribbon recedes and dims under the words. Everything
   else is type: one family, Albert Sans. Red appears once, as the wordmark's dot.
   Colours and measures: DESIGN.md §3–4. */

@font-face { font-family: "Fine"; src: url("fonts/fine.woff2") format("woff2"); unicode-range: U+202F; font-display: swap; }
@font-face { font-family: "Albert Sans"; src: url("fonts/albert-sans-latin.woff2") format("woff2"); font-weight: 300 700; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Albert Sans"; src: url("fonts/albert-sans-latin-ext.woff2") format("woff2"); font-weight: 300 700; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* metric-matched fallback, so the swap does not move the page */
@font-face { font-family: "Albert fallback"; src: local("Helvetica Neue"), local("Arial"); size-adjust: 97%; ascent-override: 98%; descent-override: 26%; line-gap-override: 0%; }

:root {
  --night: #28111a;        --night: oklch(0.215 0.042 355);   /* the ground */
  --ground-rgb: 40 17 26;                                    /* the same, for the canvas */
  --glow-rgb: 78 30 46;                                      /* the light behind the figure, for the canvas */
  --deep: #1f0b13;         --deep: oklch(0.180 0.036 355);    /* the footer */
  --field: #36171f;        --field: oklch(0.255 0.048 358);   /* form fields */
  --pearl: #f8e9e4;        --pearl: oklch(0.945 0.016 35);    /* text: 15:1 on the night */
  --mist: #d4b5b4;         --mist: oklch(0.800 0.034 15);     /* secondary text: 9.4:1 */
  --rose: #eba0a2;         --rose: oklch(0.780 0.085 15);     /* numbers and years: 7.9:1 */
  --rule: #8b666e;         --rule: oklch(0.560 0.045 5);      /* field borders: 3.6:1 */
  --hair: #5c3e47;         --hair: oklch(0.410 0.045 360);    /* hairlines, decorative */
  --red: #f45249;          --red: oklch(0.660 0.200 27);      /* the wordmark's dot, nothing else */

  --text: "Fine", "Albert Sans", "Albert fallback", "Helvetica Neue", Arial, sans-serif;
  --m: max(24px, min(5vw, 4.5rem));   /* side margin: 24 px on phones (20 px under 400 px), 5vw on wider screens */
  --ml: calc(var(--m) + env(safe-area-inset-left, 0px));    /* the same, clear of a notch */
  --mr: calc(var(--m) + env(safe-area-inset-right, 0px));
  --head: 6.875rem;                  /* the header's height, so the first screen is exactly one screen */
  --col: 43rem;                       /* the column the page reads in */
  --wide: 76rem;                      /* sequences open out to this width */
  --veil: 0 0 0.9em var(--night), 0 0 0.3em var(--night);   /* keeps words clear of the light behind them */

  color-scheme: dark;
  background: var(--night);
  color: var(--pearl);
  font: 400 1.0625rem/1.65 var(--text);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-synthesis: none;
  font-kerning: normal;
  hanging-punctuation: first;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }
h1, h2, h3, h4 { font-weight: 400; margin: 0; text-wrap: balance; }
p, dl, dd, ul, ol, address { margin: 0; }
p, li, dd { text-wrap: pretty; }
address { font-style: normal; }
::selection { background: var(--pearl); color: var(--night); text-shadow: none; }

a { color: var(--pearl); text-decoration: underline; text-decoration-color: var(--rule); text-decoration-thickness: 1px; text-underline-offset: 0.24em; transition: text-decoration-color 0.2s; }
a:hover { text-decoration-color: var(--pearl); }
:focus-visible { outline: 2px solid var(--pearl); outline-offset: 3px; border-radius: 1px; }

.skip { position: absolute; left: var(--ml); top: -4rem; z-index: 3; padding: 0.7rem 1rem; background: var(--pearl); color: var(--night); text-decoration: none; }
.skip:focus-visible { top: 0.75rem; outline-color: var(--pearl); }

/* ── the header: the name, set like a company's name ───────── */
.top { display: flex; justify-content: space-between; align-items: baseline; align-content: center; flex-wrap: wrap; gap: 0.5rem 2rem; min-height: calc(var(--head) + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) var(--mr) 0 var(--ml); }
.mark { font-weight: 600; font-size: 2rem; line-height: 1; letter-spacing: 0.05em; text-decoration: none; white-space: nowrap; font-feature-settings: "lnum", "tnum" 0; }
.mark::after { content: ""; display: inline-block; width: 0.2em; height: 0.2em; margin-left: 0.1em; border-radius: 50%; background: var(--red); }
.top ul { list-style: none; padding: 0; display: flex; gap: 0.25rem 2rem; }
.top ul a { display: inline-block; font-size: 0.9375rem; font-weight: 450; letter-spacing: 0.01em; padding-block: 0.6rem; margin-block: -0.6rem; color: var(--mist); text-decoration-color: transparent; }
.top ul a[aria-current="page"] { color: var(--pearl); }
.top ul a:hover, .top ul a:focus-visible { color: var(--pearl); text-decoration-color: var(--pearl); }

/* ── the figure: fixed behind the whole page ───────────────── */
.study { position: fixed; inset: 0 0 auto 0; height: 100vh; height: 100lvh; z-index: -1; }
.study canvas { display: block; width: 100%; height: 100%; }
html:not(.gl) .study canvas { visibility: hidden; }
.study canvas[hidden] { display: none; }
/* without WebGL, or without scripts: the settled figure, as a picture, on the first screen only */
html:not(.js) .study, html.nogl .study { position: absolute; height: 100vh; height: 100svh; background: url("figure.webp") 50% 50% / cover no-repeat, var(--night); -webkit-mask-image: linear-gradient(var(--night) 78%, transparent); mask-image: linear-gradient(var(--night) 78%, transparent); }
html.nogl .study canvas { display: none; }
@media (max-aspect-ratio: 3/4) { html:not(.js) .study, html.nogl .study { background-position: 60% 50%; } }   /* upright screens: the ribbon's turn in view */
/* for reduced motion the figure is drawn once and stays on the first screen */
@media (prefers-reduced-motion: reduce) {
  .study { position: absolute; height: 100vh; height: 100svh; -webkit-mask-image: linear-gradient(var(--night) 78%, transparent); mask-image: linear-gradient(var(--night) 78%, transparent); }
}

/* ── the first screen: one sentence over the figure ────────── */
.intro { position: relative; min-height: calc(100vh - var(--head) - env(safe-area-inset-top, 0px)); min-height: calc(100svh - var(--head) - env(safe-area-inset-top, 0px)); display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(0.5rem, 4.5svh, 3.5rem) var(--mr) calc(5rem + env(safe-area-inset-bottom, 0px)) var(--ml); }
.say { max-width: 60rem; text-shadow: var(--veil); }
/* the motto is the display line; the H1 is the plain sentence under it, set as the lede */
h1, .motto { font-size: clamp(2.625rem, 1rem + 4.6vw, 5.5rem); line-height: 1.02; font-weight: 300; letter-spacing: -0.032em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.nw { white-space: nowrap; }
.lede { margin: 1.25rem auto 0; max-width: 31ch; font-size: clamp(1.125rem, 0.98rem + 0.45vw, 1.4375rem); line-height: 1.45; font-weight: 350; color: var(--mist); }
.motto { text-wrap: balance; }
h1.lede { letter-spacing: normal; -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; text-wrap: pretty; }

/* the word "signal" rides the ribbon's slow wave (assets/ribbon.js): the real word keeps
   its place, for reading and selecting; a copy of its letters, hidden from assistive
   technology, moves over it, one letter a little behind the next */
.sig { position: relative; }
.sig-wave { position: absolute; inset: 0; visibility: hidden; pointer-events: none; -webkit-user-select: none; user-select: none; white-space: nowrap; }
.sig-wave > span { position: absolute; line-height: normal; }
.sig-wave > span::before { content: attr(data-c); }
@media screen and (prefers-reduced-motion: no-preference) {
  .gl .sig.set:not(.picked) { color: transparent; text-shadow: none; }
  .gl .sig.set:not(.picked) .sig-wave { visibility: visible; color: var(--pearl); text-shadow: var(--veil); }
  .gl .sig.set .sig-wave > span { animation: sig 3s cubic-bezier(0.37, 0, 0.63, 1) infinite alternate both; }
  .gl.paused .sig.set .sig-wave > span { animation-play-state: paused; }
}
@keyframes sig { from { transform: translateY(-0.032em); } to { transform: translateY(0.032em); } }

/* the one control: a round icon in the first screen's bottom-right corner, the same on every screen */
.pause { position: absolute; right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; color: var(--mist); background: rgb(var(--ground-rgb) / 0.84); box-shadow: 0 0 1rem 0.25rem rgb(var(--ground-rgb) / 0.6); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pause[hidden] { display: none; }
.pause svg { display: block; }
.pause[aria-pressed="true"] .i-bars, .pause[aria-pressed="false"] .i-play { display: none; }
.pause:hover { color: var(--pearl); }
.pause:focus-visible { border-radius: 50%; }

/* ── the rest of the home page: one column on one axis ─────── */
.about, .how, .brands, .milestones, .reach { padding: clamp(5.5rem, 4rem + 6vw, 10rem) var(--mr) 0 var(--ml); text-shadow: var(--veil); }
.about > *, .how > *, .brands > *, .milestones > *, .reach > *, .case > * { width: min(100%, var(--col)); margin-inline: auto; }
.milestones > .years { width: min(100%, var(--wide)); }

h2 { font-size: clamp(2.125rem, 1.35rem + 2.5vw, 3.625rem); line-height: 1.06; font-weight: 300; letter-spacing: -0.024em; margin-bottom: clamp(1.75rem, 1.2rem + 1.5vw, 2.75rem); }
.big { font-size: clamp(1.25rem, 1.08rem + 0.55vw, 1.5625rem); line-height: 1.48; font-weight: 350; letter-spacing: -0.004em; }
.about .big + p { margin-top: 1.4rem; color: var(--mist); font-size: 1.125rem; }

/* how it works: three calm lines, not a sequence of tasks */
.ways { list-style: none; padding: 0; }
.ways li { font-size: clamp(1.3125rem, 1.1rem + 0.7vw, 1.75rem); line-height: 1.38; font-weight: 300; letter-spacing: -0.008em; }
.ways li + li { margin-top: clamp(1.1rem, 0.8rem + 1vw, 1.75rem); }

/* the brands, one under the other */
.entry + .entry { margin-top: 3rem; }
.entry h3 { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.625rem); line-height: 1.1; font-weight: 300; letter-spacing: -0.02em; margin-bottom: 0.9rem; }
.entry p { color: var(--mist); }
.entry p + p { margin-top: 0.7rem; }

/* one brand, from signal to brand, in a few lines */
.case { margin-top: clamp(4rem, 3rem + 3vw, 6rem); }
.case h3 { font-size: clamp(1.375rem, 1.2rem + 0.5vw, 1.75rem); font-weight: 350; line-height: 1.25; letter-spacing: -0.01em; margin-bottom: 1rem; }
.case > p { color: var(--mist); font-size: 1.125rem; }

/* milestones: the year, then what happened */
.years { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.25rem clamp(1.5rem, 2.5vw, 2.75rem); }
.years li { border-top: 1px solid var(--hair); padding-top: 1rem; }
.years time { display: block; margin-bottom: 0.9rem; font-size: 1.75rem; line-height: 1; font-weight: 300; letter-spacing: -0.01em; color: var(--rose); font-variant-numeric: lining-nums; }
.years h3 { font-size: 1.0625rem; font-weight: 500; line-height: 1.35; }
.years p { margin-top: 0.35rem; font-size: 0.9375rem; line-height: 1.55; color: var(--mist); }

/* contact, the customer passage, the group */
.reach { padding-bottom: clamp(6rem, 5rem + 4vw, 9rem); }
.reach .write { font-size: clamp(1.5rem, 1.25rem + 0.8vw, 2rem); line-height: 1.25; font-weight: 300; letter-spacing: -0.01em; }
.reach .customer { margin-top: 3rem; }
.customer h3, .page .customer h2 { font-size: 1.1875rem; font-weight: 500; line-height: 1.3; margin: 0 0 0.35rem; }
.customer p { color: var(--mist); }
.customer p + p { margin-top: 0.5rem; }
.reach .group { margin-top: 3rem; color: var(--mist); font-size: 0.9375rem; }

.foot { background: var(--deep); padding-inline: var(--ml) var(--mr); padding-bottom: max(1.5rem, env(safe-area-inset-bottom)); --family-ink: var(--pearl); --family-dim: var(--mist); --family-line: var(--hair); --family-ground: var(--deep); }
.legal-line { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-size: 0.8125rem; color: var(--mist); padding-block: 0.5rem 1rem; }
.legal-line a { color: var(--mist); display: inline-block; padding-block: 0.6rem; margin-block: -0.6rem; }
.legal-line a:hover { color: var(--pearl); }

/* ── text pages: legal notice, contact, 404 ─────────────────── */
body:not(:has(.study)) { background: radial-gradient(ellipse 70% 28rem at 50% 0, rgb(var(--glow-rgb) / 0.75), transparent) no-repeat, var(--night); }
.page { padding: 2.5rem var(--mr) 6rem var(--ml); }
.page > * { max-width: 44rem; }
.page h1 { font-size: clamp(2.25rem, 1.3rem + 2.8vw, 3.75rem); line-height: 1.04; font-weight: 300; letter-spacing: -0.026em; margin-bottom: 2rem; }
.page h2 { font-size: 1.5rem; font-weight: 400; line-height: 1.25; margin: 2.8rem 0 0.8rem; }
.page p + p, .page p + dl, .page dl + p { margin-top: 0.9rem; }
.page dl { display: grid; grid-template-columns: minmax(9rem, max-content) 1fr; gap: 0.4rem 1.5rem; margin-top: 0.9rem; }
.page dt { color: var(--mist); }
.page .lede { margin: 0 0 1.2rem; max-width: 40ch; }
.page .customer { margin-top: 2.4rem; }
.page .customer h2 { margin: 0 0 0.35rem; }
.lost-home { margin-top: 1.4rem; color: var(--mist); }
.page .updated { margin-top: 2.8rem; color: var(--mist); }

/* contact, wide screens: the form on the left; the customer passage on the right */
@media (min-width: 1001px) {
  .write.page { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto auto 1fr; column-gap: 4.5rem; max-width: 76rem; }
  .write.page > * { max-width: none; }
  .write > h1, .write > .lede { grid-column: 1 / -1; }
  .write > form.contact { grid-column: 1; grid-row: 3 / 5; }
  .write > .customer { grid-column: 2; grid-row: 3; margin-top: 2.4rem; }
}

/* the contact form (markup fixed by the brief; the look is ours) */
form.contact { margin-top: 2.4rem; display: grid; gap: 1.2rem; max-width: 36rem; position: relative; }
form.contact p { margin: 0; }
form.contact label { display: block; font-size: 0.875rem; font-weight: 500; color: var(--mist); margin-bottom: 0.4rem; }
form.contact input, form.contact textarea { display: block; width: 100%; font: 400 1.0625rem/1.5 var(--text); color: var(--pearl); background: var(--field); border: 1px solid var(--rule); border-radius: 3px; padding: 0.75rem 0.9rem; }
form.contact textarea { resize: vertical; min-height: 10rem; }
form.contact input:focus-visible, form.contact textarea:focus-visible { outline: 2px solid var(--pearl); outline-offset: 1px; border-color: var(--pearl); }
form.contact input:user-invalid, form.contact textarea:user-invalid { border-color: var(--rose); border-width: 2px; }
.contact-trap { position: absolute; left: -100vw; width: 1px; height: 1px; overflow: hidden; }
.contact-note { font-size: 0.875rem; color: var(--mist); max-width: 52ch; }
.contact-note a { color: var(--mist); }
form.contact button { justify-self: start; font: 500 1.0625rem/1 var(--text); letter-spacing: 0.01em; color: var(--night); background: var(--pearl); border: 0; border-radius: 3px; padding: 0 2rem; min-height: 3rem; cursor: pointer; }
form.contact button:hover { background: #fff5f1; }
form.contact button:disabled { opacity: 0.6; cursor: progress; }
.contact-status { min-height: 1.6em; color: var(--pearl); }

/* ── narrower screens ───────────────────────────────────────── */
@media (max-width: 1100px) {
  .years { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .milestones > .years { width: min(100%, var(--col)); }
}
@media (max-width: 640px), (max-height: 500px) {
  :root { --head: 4.625rem; }
  .top { gap: 0.5rem 1.25rem; }
  .mark { font-size: 1.34375rem; letter-spacing: 0.04em; }
  .top ul { gap: 0.25rem 1.2rem; }
  .intro { padding-top: 1.25rem; }
  .lede { margin-top: 1rem; }
  .ways li { line-height: 1.46; }
  .years p, .reach .group, .contact-note { font-size: 1rem; }
  form.contact label { font-size: 0.9412rem; }
}
@media (max-width: 399.98px) {
  :root { --m: 20px; }
}
@media (max-width: 359.98px) {
  .top { column-gap: 0.5rem; }
  .mark { font-size: 1.125rem; letter-spacing: 0.03em; }
  .top ul { column-gap: 0.75rem; }
}
@media (max-width: 640px) {
  .years { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .years li { display: grid; grid-template-columns: 3.75rem minmax(0, 1fr); padding-top: 0.9rem; }
  .years li > * { grid-column: 2; }
  .years time { grid-column: 1; grid-row: 1 / span 2; margin: 0; font-size: 1.1875rem; line-height: 1.35; }
  .entry + .entry { margin-top: 2.5rem; }
  .page { padding-top: 1.5rem; }
  .page dl { grid-template-columns: 1fr; gap: 0; }
  .page dd + dt { margin-top: 0.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  a { transition: none; }
}
@media (prefers-contrast: more) {
  :root { --mist: var(--pearl); --rule: var(--pearl); --hair: var(--mist); --rose: var(--pearl); }
  a { text-decoration-color: currentColor; }
  .study { opacity: 0.55; }
}
@media (forced-colors: active) {
  .study, .pause, .sig-wave { display: none; }
  .mark::after { forced-color-adjust: none; background: CanvasText; }
  .years li { border-top-color: CanvasText; }
  form.contact button { border: 1px solid ButtonText; }
}
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.2s; }

@media print {
  :root { --night: #fff; --deep: #fff; --pearl: #000; --mist: #333; --rose: #000; --rule: #999; --hair: #999; --field: #fff; --veil: none; color-scheme: light; background: none; color: #000; font-size: 11pt; }
  body, body:not(:has(.study)) { background: none; }
  .top { padding-inline: 0; padding-block: 0 1rem; min-height: 0; }
  .study, .pause, .skip, .top nav, .family, form.contact { display: none !important; }
  .intro { min-height: 0; text-align: start; align-items: start; padding: 0 0 2rem; }
  .foot { background: none; }
  a { color: inherit; text-decoration: none; }
  .page, .foot, .about, .how, .brands, .milestones, .reach, .intro { padding-inline: 0; }
  .about, .how, .brands, .milestones, .reach { padding-top: 2rem; }
  .years li, .entry, .ways li { break-inside: avoid; }
  h1, h2 { break-after: avoid; }
}