/* iliona.com: one light over the world. Night haze, a slab of crown glass, five rays,
   an engraved globe that the light crosses like a dawn, all on a deep ink ground. */

/* French sets a narrow no-break space (U+202F) before ; : ! ? and inside « ». Most faces
   lack that glyph and Chrome then draws half a word space, which reads as none: "Fine" holds
   only U+202F, 1/8 em wide, and every stack starts with it (shared/fonts, tools/fine.py). */
@font-face { font-family: "Fine"; src: url("fonts/fine.woff2") format("woff2"); unicode-range: U+202F; font-display: swap; }

@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/instrument-sans-normal-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-style: normal;
  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: "Instrument Sans";
  src: url("/assets/fonts/instrument-sans-normal-latin-ext.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-style: normal;
  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;
}
/* the system face, reshaped to Instrument Sans's metrics while the font loads: no shift */
@font-face {
  font-family: "Instrument Sans Fallback";
  src: local("Helvetica Neue"), local("HelveticaNeue"), local("Arial"), local("ArialMT");
  ascent-override: 97%;
  descent-override: 25%;
  line-gap-override: 0%;
  size-adjust: 96%;
}

:root {
  color-scheme: dark;
  --night: #171338;
  --haze: #332e5c;
  --smoke: #54566c;
  --moon: #efeff8;
  --lilac: #bbbbd4;
  --sans: "Fine", "Instrument Sans", "Instrument Sans Fallback", "Helvetica Neue", Arial, sans-serif;
  /* the gutters keep clear of a notch or a rounded corner (landscape phones) */
  --safe-x: max(env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --edge: calc(5vw + var(--safe-x));          /* the source line */
  --land: 61.8%;        /* the landing line */
  --name-size: clamp(1.3rem, 2.15vw, 2.05rem);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}
@supports (color: oklch(0.5 0.1 280)) {
  :root {
    --night: oklch(0.215 0.07 284);
    --haze: oklch(0.33 0.08 286);
    --smoke: oklch(0.46 0.035 280);
    --moon: oklch(0.955 0.012 285);
    --lilac: oklch(0.80 0.035 285);
  }
}
/* wide-gamut screens: the haze may be a little more violet than sRGB allows */
@media (color-gamut: p3) {
  @supports (color: oklch(0.5 0.1 280)) {
    :root { --night: oklch(0.215 0.078 284); --haze: oklch(0.33 0.09 286); }
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--night); }
body {
  margin: 0;
  background: var(--night);
  color: var(--moon);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.62;
  font-stretch: 100%;
  font-optical-sizing: auto;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
h1, h2, h3 { font-weight: 500; margin: 0; text-wrap: balance; }
p, li, dd { text-wrap: pretty; hyphens: manual; }
:lang(fr) .copy .co p, :lang(fr) .legal p, :lang(fr) .recombine p { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 10 4 4; }
p { margin: 0; }
a { color: inherit; text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: color-mix(in oklab, currentColor 45%, transparent); transition: text-decoration-color 0.2s, color 0.2s; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--moon); outline-offset: 3px; border-radius: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.skip {
  position: absolute; z-index: 10; left: var(--edge); top: 0.75rem;
  padding: 0.6rem 1rem; background: var(--moon); color: var(--night);
  transform: translateY(-200%); text-decoration: none;
}
.skip:focus { transform: none; }

/* ── the world behind the page ─────────────────────────────────────────── */
canvas.world {
  position: fixed; inset: 0 0 auto 0; z-index: 0;
  display: block; width: 100%; height: 100lvh;
  opacity: 0; pointer-events: none;
  transition: opacity 1.4s var(--ease);
}
.gl canvas.world { opacity: 1; }
.nogl canvas.world { display: none; }
.top, main, .foot { position: relative; z-index: 1; }

/* ── header ─────────────────────────────────────────────────────────────── */
/* the wordmark is the house's name, sized like a corporate logo (BRIEF §0.4): its
   capitals stand 16 px tall on a phone and 24 px from 1024 px wide (cap height = 0.72 em
   in this face), tracked open for capitals; the nav sits on its baseline, at 15 px */
.top { position: absolute; inset: 0 0 auto 0; z-index: 3; padding: calc(1.875rem + env(safe-area-inset-top, 0px)) var(--edge) 1.875rem; }
.bar { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; min-height: 3rem; }
.mark {
  font-stretch: 78%; font-weight: 600; font-size: clamp(1.4rem, 0.95rem + 1.85vw, 2.1rem); line-height: 1; letter-spacing: 0.07em;
  text-decoration: none; min-height: 48px; display: inline-flex; align-items: center; white-space: nowrap;
}
.bar-end { display: flex; align-items: baseline; gap: clamp(1rem, 2.4vw, 2.25rem); font-size: 0.9375rem; }
.bar-end a { text-decoration-color: transparent; min-height: 44px; display: inline-flex; align-items: center; color: var(--lilac); }
.bar-end a:hover, .bar-end a:focus-visible { color: var(--moon); text-decoration-color: currentColor; }
.lang { view-transition-name: lang; }
/* the narrowest phones: the wordmark and both links stay on one line */
@media (max-width: 359.98px) { .mark { font-size: 1.25rem; letter-spacing: 0.06em; } .bar-end { gap: 0.875rem; } }

/* ── hero: the bench, the names on the landing line, the headline ─────────── */
.hero {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 7rem var(--edge) max(calc(72px + env(safe-area-inset-bottom, 0px)), 9svh);
  touch-action: pan-y;
}
.hero .lead { position: relative; z-index: 1; max-width: min(50%, 44rem); }
h1 {
  font-stretch: 78%; font-weight: 500;
  font-size: clamp(2.5rem, 5.4vw, 5.25rem); line-height: 1; letter-spacing: -0.012em;
  margin-bottom: clamp(1.1rem, 2.2vw, 1.75rem);
}
.hero .lead p { max-width: 34em; color: var(--moon); }
.hero .lead p + p { margin-top: 0.45em; }

.landing {
  position: absolute; z-index: 1;
  left: var(--land); right: var(--edge); top: max(8.5rem, 16svh);
  display: grid; grid-template-columns: minmax(0, 1fr);
}
.names, .fallback.rays { grid-area: 1 / 1 / 2 / 2; }
.names { margin: 0; padding: 0; list-style: none; }
.names li { --lit: 0; --ray: var(--ray-group); position: relative; padding-bottom: 0.9rem; }
.names li[data-ray="1108"] { --ray: var(--ray-1108); }
.names li[data-ray="priam"] { --ray: var(--ray-priam); }
.names li[data-ray="tdp5m"] { --ray: var(--ray-tdp5m); }
.names li[data-ray="net"] { --ray: var(--ray-net); }
.names li[data-ray="kyrena"] { --ray: var(--ray-kyrena); }
.name {
  display: inline-block; white-space: nowrap;
  font-stretch: 75%; font-weight: 560; font-size: var(--name-size); line-height: 1.1; letter-spacing: 0.03em;
  padding-block: 0.12em;
  text-decoration: none;
  color: var(--moon);
  transition: color 0.5s;
}
/* a name is lit by its ray as the light lands: it brightens, it never glows */
.gl .name { color: color-mix(in oklab, var(--moon) calc(var(--lit) * 100%), var(--lilac)); }
.name:hover, .name:focus-visible { text-decoration-line: underline; text-decoration-color: var(--ray); text-decoration-thickness: 2px; }
.role {
  display: block; font-size: 0.875rem; line-height: 1.45; color: var(--lilac);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
.role .dom { display: block; color: color-mix(in oklab, var(--lilac) 78%, var(--night)); }
.gl .names .role { opacity: 0; transform: translateY(-0.25em); }
.gl .names li.is-aligned .role, .gl .names li:hover .role, .gl .names li:focus-within .role { opacity: 1; transform: none; }
.gl .names li.is-aligned .name { text-decoration-line: underline; text-decoration-color: color-mix(in oklab, var(--ray) 72%, var(--lilac)); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

/* the still picture, for browsers without WebGL2 or without JavaScript */
.fallback { display: none; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.nogl .fallback.wide { display: block; }
.fallback * { vector-effect: non-scaling-stroke; }
/* the engraved globe, without WebGL: the same place and size as the live one, larger
   than the screen and cropped; the lines keep their hairline weight at any size */
.fallback.globe {
  --gx: 100vw; --gy: 78svh; --gr: 64vw;
  position: absolute; inset: auto; left: calc(var(--gx) - 1.2 * var(--gr)); top: calc(var(--gy) - 1.2 * var(--gr));
  width: calc(2.4 * var(--gr)); height: calc(2.4 * var(--gr)); z-index: -1;
}
.nogl .fallback.globe { display: block; }
/* without the canvas there is no picture between the blocks of copy: the room closes up */
.nogl .layer, .nogl .layer.band, .nogl .layer.diagram { padding-block: 14svh; }
.nogl .recombine { min-height: 0; padding-block: 16svh 12svh; }
.nogl .dawn-rise { height: 12svh; }
.hero { overflow-x: clip; }
/* the drawn rays run from the page's edge to the names' left edge */
.fallback.rays { inset: auto; top: 0; right: 100%; z-index: -1; width: calc((100% + var(--edge)) * 1.618); height: 100%; }
/* each drawn ray is its company's band from family.css (.ray-* sets --ray), at 45 % of its
   chroma, as the canvas draws it: no colour is written twice */
.fallback.rays [class^="ray-"] { stroke: color-mix(in oklab, var(--ray) 45%, var(--lilac)); stroke-opacity: 0.8; }
@supports (color: oklch(from red l c h)) {
  .fallback.rays [class^="ray-"] { stroke: oklch(from var(--ray) l calc(c * 0.45) h); }
}

/* ── the layers: copy on the landing line, where the rays arrive ───────────── */
.layer {
  display: grid; grid-template-columns: var(--land) minmax(0, 1fr);
  align-items: center;
  padding-block: 16svh;
}
.layer .copy { grid-column: 2; padding-right: var(--edge); padding-left: clamp(0.75rem, 2vw, 2rem); max-width: 38rem; }
h2 {
  font-stretch: 82%; font-weight: 500;
  font-size: clamp(1.9rem, 3.2vw, 3rem); line-height: 1.08; letter-spacing: -0.006em;
  margin-bottom: 1.5rem;
}
h3, .co-name {
  font-stretch: 75%; font-weight: 560; font-size: clamp(1.25rem, 1.7vw, 1.6rem); line-height: 1.15; letter-spacing: 0.03em;
}
.co { margin-top: 2.25rem; }
.co + .co { margin-top: 1.9rem; }
.co h3 { margin-bottom: 0.5rem; }
.co h3::before, .dir li::before {
  content: ""; display: block; width: 2.25rem; height: 2px; margin-bottom: 0.7rem;
  background: color-mix(in oklab, var(--ray, var(--ray-group)) 72%, var(--lilac));
}
[data-co="kyrena"] { --ray: var(--ray-kyrena); }
[data-co="1108"] { --ray: var(--ray-1108); }
[data-co="tdp5m"] { --ray: var(--ray-tdp5m); }
[data-co="priam"] { --ray: var(--ray-priam); }
[data-co="net"] { --ray: var(--ray-net); }
[data-co="group"] { --ray: var(--ray-group); }
.copy p + p { margin-top: 0.9rem; }
/* the copy keeps a little night around its letters, so the engraving never runs through them */
.hero .lead, .names .role, .copy { text-shadow: 0 0 0.7em var(--night), 0 0 0.25em var(--night); }
/* PRIAM: the light passes above; the heading on the source line, the text on the landing line */
.layer.band { padding-block: 50svh 12svh; }
.band .copy { grid-column: 1 / -1; max-width: none; padding: 0; display: grid; grid-template-columns: var(--land) minmax(0, 1fr); align-items: start; }
.band h2 { grid-column: 1; max-width: 12em; padding: 0 2rem 0 var(--edge); }
.band .co { grid-column: 2; margin-top: 0; padding: 0 var(--edge) 0 clamp(0.75rem, 2vw, 2rem); max-width: 38rem; }
.doors { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; margin-top: 0.9rem; }
.doors a { display: inline-flex; align-items: center; min-height: 44px; }

/* the directory: the legend under the circuit seen from above */
.layer.diagram { padding-block: 60svh 12svh; }
.diagram .copy { grid-column: 1 / -1; max-width: none; padding-left: var(--edge); }
.dir { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem clamp(1.5rem, 4vw, 4rem); }
.dir li { display: grid; gap: 0.1rem; align-content: start; }
.dir li::before { margin-bottom: 0.45rem; width: 1.75rem; }
.dir .co-name { font-size: clamp(1.1rem, 1.45vw, 1.35rem); }
.dir .role { font-size: 0.9375rem; color: var(--lilac); }
.dir a { font-size: 0.9375rem; justify-self: start; padding-block: 0.3rem; margin-block: -0.3rem; }

/* ── dawn: the rays recombine, the page turns to day ──────────────────────── */
.recombine { min-height: 125svh; padding: 20svh var(--edge) 0; }
.recombine .copy { max-width: 40rem; }
/* the line of light stands large; the heading says it plainly below it */
.recombine p.motto { -webkit-hyphens: manual; hyphens: manual; font-stretch: 78%; font-weight: 500; font-size: clamp(2.5rem, 5.4vw, 5.25rem); line-height: 1; letter-spacing: -0.012em; margin-bottom: 1.25rem; text-wrap: balance; }
.recombine h2 { font: inherit; letter-spacing: normal; margin: 0; max-width: 30em; text-wrap: pretty; }
.recombine p { max-width: 30em; }
.dawn-rise { height: 40svh; background: linear-gradient(to bottom, transparent, var(--night)); }
/* with the canvas, the recombined beam and the lit globe hold the screen over a longer run
   of scroll; the ink ground only closes over them in the last fifth */
.js:not(.nogl) .dawn-rise { height: 110svh; background: linear-gradient(to bottom, transparent 70%, var(--night)); }
.dawn-solid, .foot { background: var(--night); color: var(--moon); color-scheme: dark; }
/* the ink ground reads in two columns: on the left what the group does, who does it and
   the brands; on the right the story, step by step, then the contact, so the two columns
   end together. One column on a phone, in the order of the page: capabilities, chain,
   story, brands, contact */
.dawn-solid {
  padding: 4rem var(--edge) 5rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 4vw; row-gap: 3rem;
  grid-template-areas: "areas built" "chain built" "finder built" "finder contact"; align-items: start;
}
.finder { grid-area: finder; max-width: 36rem; }
.group-id { grid-area: contact; max-width: 34rem; }
/* the chain: one line through the steps, coloured by the company that carries each one,
   so the light's bands read from the idea down to the customer */
.chain { grid-area: chain; max-width: 36rem; }
.chain > p { color: var(--lilac); max-width: 30em; }
.steps { list-style: none; margin: 0; padding: 0; }
.steps { margin-top: 1.4rem; }
.steps li { padding: 0.5rem 0 0.5rem 1.25rem; border-left: 2px solid color-mix(in oklab, var(--ray) 72%, var(--lilac)); }
.steps .who { font-stretch: 75%; font-weight: 560; letter-spacing: 0.03em; }
.steps .who { font-size: 1.125rem; }
.steps a { display: inline-block; padding-block: 0.3rem; margin-block: -0.3rem; text-decoration-color: color-mix(in oklab, var(--ray) 80%, transparent); }
.steps a:hover { text-decoration-color: var(--ray); }
/* the story's dated steps and the four areas share the same ruled rows, the figures in
   columns, so the ink ground reads as one register */
.dated li, .areas dl > div { padding-block: 0.5rem; border-top: 1px solid color-mix(in oklab, var(--lilac) 24%, transparent); }
.dated li { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); column-gap: 1rem; }
.dated li:last-child, .areas dl > div:last-child { border-bottom: 1px solid color-mix(in oklab, var(--lilac) 24%, transparent); }
.dated time { font-size: 1.125rem; font-variant-numeric: tabular-nums; }
/* how the group was built: each step is a fact, then (in lilac, on its own line) what followed */
.built { grid-area: built; max-width: 36rem; }
.areas { grid-area: areas; max-width: 36rem; }
.built .line { color: var(--lilac); max-width: 32em; }
.dated, .areas dl { list-style: none; margin: 1.4rem 0 0; padding: 0; }
.dated li { padding-block: 0.7rem; }
.dated time { line-height: 1.45; }
.dated span { display: block; margin-top: 0.2rem; color: var(--lilac); }
.built .close, .areas .close { margin-top: 1.4rem; max-width: 32em; }
.areas dl { margin-top: 0; }
.areas dl > div { padding-block: 0.8rem; }
.areas dt, .dated time { font-stretch: 75%; font-weight: 560; letter-spacing: 0.03em; }
.areas dt { font-size: 1.125rem; line-height: 1.4; }
.areas dd { margin: 0.15rem 0 0; }
/* PRIAM's supply-chain practices, under the company they belong to */
.dawn-solid h2 { font-size: clamp(1.7rem, 2.6vw, 2.5rem); margin-bottom: 1.25rem; }
.brand { margin-top: 1.6rem; }
.brand h3 { font-stretch: 82%; font-weight: 560; font-size: 1.3rem; letter-spacing: 0; margin-bottom: 0.3rem; }
.brand h3::before { display: none; }
.brand p { color: var(--moon); }
.brand .of { color: var(--lilac); }
.brand a, .group-id a { text-decoration-color: color-mix(in oklab, var(--ray, var(--moon)) 80%, transparent); }
.brand a:hover, .group-id a:hover { text-decoration-color: var(--ray, var(--moon)); }
.brand a, .group-id a, .legal-line a, .legal dd a { display: inline-block; padding-block: 0.3rem; margin-block: -0.3rem; }
.group-id p + p { margin-top: 0.8rem; }
.group-id { --ray: var(--ray-group); }
.group-id .dim { color: var(--lilac); }
.dir .here { font-size: 0.9375rem; color: var(--lilac); }
/* each company's registry line, written by tools/family.mjs */
.dir .facts { font-size: 0.8125rem; line-height: 1.45; color: var(--lilac); font-variant-numeric: tabular-nums; margin-block: 0.15rem 0.2rem; max-width: 30em; }


/* ── footer, on the ink ─────────────────────────────────────────────────── */
.foot { padding: 0 var(--edge) 2.5rem; --family-ink: var(--moon); --family-dim: var(--lilac); --family-line: color-mix(in oklab, var(--moon) 16%, transparent); --family-ground: var(--night); }
.legal-line { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; font-size: 0.875rem; color: var(--lilac); border-top: 1px solid color-mix(in oklab, var(--moon) 14%, transparent); padding-top: 1.25rem; }


/* ── the legal pages: the same ink, plain, printable ──────────────────────── */
.legal { max-width: 44rem; padding: 9.5rem var(--edge) 5rem; margin-left: calc(var(--land) - 22rem); }
.legal h1 { font-size: clamp(2.3rem, 4.4vw, 4rem); margin-bottom: 2.5rem; }
.legal h2 { font-size: clamp(1.35rem, 2vw, 1.75rem); margin: 2.75rem 0 0.9rem; }
.legal p + p { margin-top: 0.7rem; }
.legal dl { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.35rem 1.5rem; }
.legal dt { color: var(--lilac); }
.legal dd { margin: 0; }
.registry, .legal dd { font-variant-numeric: tabular-nums; }
.legal .note { color: var(--lilac); font-size: 0.9375rem; margin-top: 2.5rem; }
.bar-end a[aria-current="page"] { color: var(--moon); }

/* ── the contact pages: one beam, then the form ─────────────────────────── */
.write { max-width: 44rem; padding: 9.5rem var(--edge) 5rem; margin-left: calc(var(--land) - 22rem); }
.write h1 { font-size: clamp(2.3rem, 4.4vw, 4rem); margin-bottom: 1.5rem; }
/* the white beam comes in from the page's edge and stops at the column's right edge
   (the column's margin is a share of the page, so the ray's is written in vw) */
.write-ray { --in: calc(var(--edge) + 61.8vw - 22rem); display: block; width: calc(100% + var(--in)); height: 40px; margin: 0 0 2.5rem calc(-1 * var(--in)); }
.write-lead { font-size: 1.1875rem; }
.write .dim { color: var(--lilac); margin-top: 0.8rem; }
.write .dim a { display: inline-block; padding-block: 0.3rem; margin-block: -0.3rem; }
form.contact { position: relative; margin-top: 2.75rem; display: grid; gap: 1.25rem; }
form.contact p { display: grid; gap: 0.4rem; }
form.contact label { font-size: 0.9375rem; color: var(--lilac); }
form.contact input, form.contact textarea {
  font: inherit; color: var(--moon); width: 100%;
  background: color-mix(in oklab, var(--haze) 38%, var(--night));
  border: 1px solid color-mix(in oklab, var(--lilac) 38%, transparent); border-radius: 3px;
  padding: 0.7rem 0.85rem; min-height: 48px;
  transition: border-color 0.2s, background-color 0.2s;
}
form.contact textarea { resize: vertical; min-height: 10rem; line-height: 1.5; }
form.contact input:hover, form.contact textarea:hover { border-color: color-mix(in oklab, var(--lilac) 65%, transparent); }
form.contact input:focus-visible, form.contact textarea:focus-visible { outline: 2px solid var(--moon); outline-offset: 2px; border-color: var(--moon); }
form.contact .contact-trap { position: absolute; left: -100vw; width: 1px; overflow: hidden; }
form.contact .contact-note { display: block; font-size: 0.875rem; color: var(--lilac); max-width: 36em; }
form.contact button {
  justify-self: start; font: inherit; font-weight: 560; letter-spacing: 0.02em;
  color: var(--night); background: var(--moon); border: 0; border-radius: 3px;
  min-height: 48px; padding: 0.7rem 1.6rem; cursor: pointer;
  box-shadow: 0 0 0 1px var(--moon);
  transition: box-shadow 0.25s, opacity 0.2s;
}
form.contact button:hover { box-shadow: 0 0 0 1px var(--moon), 0 0 0 5px color-mix(in oklab, var(--moon) 12%, transparent); }
form.contact button:focus-visible { outline: 2px solid var(--moon); outline-offset: 3px; }
form.contact button:disabled { opacity: 0.6; cursor: progress; }
/* the answer takes the place of the button, where it was pressed; the button steps down */
form.contact > button { order: 1; }
form.contact > .contact-status { display: block; margin: 0; color: var(--moon); line-height: 1.45; }
form.contact > .contact-status:empty { display: none; }

/* ── the pause control: one round icon at the foot of the hero, only while something moves ── */
.pause {
  position: absolute; z-index: 2;
  right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: 44px; height: 44px; margin: 0; padding: 0; border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--lilac) 38%, transparent);
  background: color-mix(in oklab, var(--night) 62%, transparent);
  color: var(--lilac); cursor: pointer;
  display: grid; place-items: center;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}
.pause[hidden] { display: none; }
.pause svg { display: block; width: 20px; height: 20px; fill: currentColor; }
.pause .play, .pause[aria-pressed="true"] .bars { display: none; }
.pause[aria-pressed="true"] .play { display: inline; }
.pause:hover, .pause:focus-visible { color: var(--moon); border-color: color-mix(in oklab, var(--moon) 70%, transparent); }
.pause:focus-visible { outline: 2px solid var(--moon); outline-offset: 2px; }

/* ── the 404 ───────────────────────────────────────────────────────────── */
.lost { min-height: 100svh; display: grid; align-content: center; padding: 6rem var(--edge); }
.lost h1 { max-width: 16ch; }
.lost p { margin-top: 1rem; font-size: 1.125rem; }
.lost p a { display: inline-flex; min-height: 44px; align-items: center; }
.lost-ray { display: block; width: calc(100% + 2 * var(--edge)); height: 40px; margin: 0 calc(-1 * var(--edge)) 2.5rem; }
.lost .lost-en { color: var(--lilac); margin-top: 2.5rem; }

/* ── a wide screen: the type grows with it, so the names still hold the light ── */
@media (min-width: 1920px) {
  :root { --name-size: clamp(2.05rem, 1.85vw, 3rem); }
  h1 { font-size: clamp(5.25rem, 4.6vw, 7.5rem); }
  .hero .lead { max-width: min(50%, 60rem); }
  .hero .lead p { font-size: clamp(1rem, 0.72vw, 1.1875rem); }
  .names .role { font-size: clamp(0.875rem, 0.62vw, 1.0625rem); }
}

/* ── touch: every link at least 44 px tall. The names keep their places (the padding
   is taken back by the margin); the stacked links below get the room they need ── */
@media (pointer: coarse) {
  .name { padding-block: 0.6em; margin-block: -0.48em; }
  .dir a, .brand a, .group-id a, .legal-line a, .legal dd a { padding-block: 0.6875rem; margin-block: 0; }
  .steps a { padding-block: 0.6875rem; margin-block: -0.6875rem; }
}

/* ── phone and portrait: the world keeps the upper part, the copy runs below ── */
@media (min-width: 720px) and (max-width: 1100px) and (min-aspect-ratio: 4/5) {
  .dir { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 719.98px), (max-aspect-ratio: 4/5) {
  :root { --edge: calc(20px + var(--safe-x)); --name-size: clamp(1.12rem, 5vw, 1.4rem); }
  .top { padding-block: calc(0.875rem + env(safe-area-inset-top, 0px)) 0.875rem; }
  .hero { justify-content: flex-start; padding: 0 var(--edge) calc(70px + env(safe-area-inset-bottom, 0px)); }
  .landing { position: relative; left: auto; right: auto; top: auto; margin: max(6rem, 15svh) 0 0 23%; }
  /* the names step down towards the page's edge, so the fan opens: each indent is a
     share of the distance from the page's edge to the landing (the tall still's width) */
  .names li { padding-bottom: 0.35rem; --step: 0; margin-left: calc(var(--step) * (0.54rem + 23vw)); }
  .names li:nth-child(1) { --step: 0.56; }
  .names li:nth-child(2) { --step: 0.42; }
  .names li:nth-child(3) { --step: 0.335; }
  .names li:nth-child(4) { --step: 0.2; }
  .name { min-height: 0; padding-block: 0.12em; white-space: normal; }
  @media (pointer: coarse) { .name { padding-block: 0.62em; margin-block: -0.5em; } }
  .role { font-size: 0.875rem; font-stretch: 80%; }
  .role .dom { display: none; }
  /* the headline and its two sentences stand at the foot of the first screen, clear of the pause control */
  .hero .lead { order: 2; max-width: none; margin-top: auto; padding-top: max(1rem, 2.5svh); }
  .hero .lead p { font-size: 1rem; line-height: 1.5; }
  h1 { font-size: clamp(2rem, 9vw, 3rem); }
  .fallback.globe { --gx: 112vw; --gy: 42svh; --gr: 90vw; }
  .layer, .layer.band, .layer.diagram, .recombine { display: block; min-height: 0; padding-block: 46svh 8svh; }
  .layer .copy, .recombine .copy { padding: 0 var(--edge); max-width: 36rem; }
  .band .copy { display: block; }
  .band h2 { padding: 0; }
  .band .co { padding: 0; margin-top: 1.5rem; }
  .dir { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  /* the copy at the top, the rays closing into the second glass below it; then the ink rises
     within half a screen */
  .recombine { min-height: 80svh; padding: 12svh 0 0; }
  .js:not(.nogl) .dawn-rise { height: 45svh; background: linear-gradient(to bottom, transparent 25%, var(--night)); }
  .dawn-solid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "areas" "chain" "built" "finder" "contact"; padding-block: 3rem 3.5rem; }
  .legal, .write { margin-left: 0; padding-top: 6rem; }
  .write-ray { width: calc(100% + 2 * var(--edge)); margin-left: calc(-1 * var(--edge)); }
  .legal dl { grid-template-columns: minmax(0, 1fr); gap: 0 0; }
  .legal dd + dt { margin-top: 0.6rem; }
  form.contact .contact-note, .legal .note { font-size: 1rem; }
  .nogl .fallback.wide { display: none; }
  .nogl .fallback.tall { display: block; }
  .fallback.rays { top: -6rem; width: calc(var(--edge) + 100% * 23 / 77); height: calc(100% + 6rem); overflow: visible; }
}

@media (min-width: 400px) and (max-width: 719.98px) { :root { --edge: calc(24px + var(--safe-x)); } }
@media (min-width: 720px) and (max-aspect-ratio: 4/5) { :root { --edge: calc(5vw + var(--safe-x)); } }
/* a phone on its side: the hero keeps close to the height of the screen */
@media (min-width: 720px) and (max-height: 540px) and (min-aspect-ratio: 4/5) {
  /* the pause stands under the names, beside the copy, so the copy may reach lower */
  .hero { padding-top: 5.5rem; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
  h1 { font-size: clamp(2rem, min(5.4vw, 10svh), 5.25rem); }
  .hero .lead { max-width: 56%; }
  .landing { top: 5.25rem; }
  .names li { padding-bottom: 0; }
  .role .dom { display: none; }
  form.contact .contact-note, .legal .note { font-size: 1rem; }
}
/* phones, and screens short of height: with the light the five names close up, and the
   role of the lit name is read in one place under the list */
@media (max-width: 719.98px), (max-aspect-ratio: 4/5), (max-height: 540px) {
  .js:not(.nogl) .names { position: relative; padding-bottom: 2.75rem; }
  .js:not(.nogl) .names li { position: static; padding-bottom: 0.1rem; }
  .js:not(.nogl) .names .role { position: absolute; left: 0; right: 0; top: calc(100% - 2.6rem); opacity: 0; }
  .js:not(.nogl) .names li.is-aligned .role, .js:not(.nogl) .names li:focus-within .role { opacity: 1; }
}

/* ── motion ─────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.22s; }
  ::view-transition-group(lang) { animation-duration: 0.22s; }
  @supports (animation-timeline: scroll()) {
    .names .role { animation: fade-away linear both; animation-timeline: scroll(root); animation-range: 0 45svh; }
  }
}
@keyframes fade-away { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; transition-delay: 0s !important; animation: none !important; }
}

/* ── contrast and forced colours ────────────────────────────────────────── */
@media (prefers-contrast: more) {
  :root { --lilac: var(--moon); }
  a { text-decoration-color: currentColor; text-decoration-thickness: 2px; }
  .gl .name { color: var(--moon); }
  .gl .names .role, .js:not(.nogl) .names .role { position: static; opacity: 1; transform: none; }
  .js:not(.nogl) .names { padding-bottom: 0; }
  canvas.world { filter: brightness(0.7); }
}
@media (forced-colors: active) {
  canvas.world, .fallback, .dawn-rise { display: none !important; }
  body, .dawn-solid, .foot { background: Canvas; color: CanvasText; }
  form.contact input, form.contact textarea { border-color: CanvasText; background: Canvas; color: CanvasText; }
  form.contact button { background: ButtonFace; color: ButtonText; border: 1px solid ButtonText; box-shadow: none; }
  .pause { display: none !important; } /* the canvas is not drawn: nothing moves */
  a, .name { color: LinkText; text-shadow: none; }
  .gl .names .role, .js:not(.nogl) .names .role { position: static; opacity: 1; transform: none; }
  .js:not(.nogl) .names { padding-bottom: 0; }
  :focus-visible { outline: 3px solid Highlight; outline-offset: 3px; }
  .co h3::before, .dir li::before { background: CanvasText; box-shadow: none; }
}

/* ── print ──────────────────────────────────────────────────────────────── */
@media print {
  @page { margin: 16mm 18mm; }
  :root { color-scheme: light; }
  html, body, .dawn-solid, .foot { background: white !important; color: black !important; }
  canvas.world, .fallback, .skip, .dawn-rise, .bar-end, .pause, form.contact button, .write-ray, .lost-ray { display: none !important; }
  .hero, .layer, .layer.band, .layer.diagram, .recombine, .lost { min-height: 0; padding-block: 1.5rem; display: block; }
  .band .copy, .dir { display: block; }
  .landing { position: static; margin: 1rem 0; }
  .gl .names .role, .js:not(.nogl) .names .role { position: static; opacity: 1; transform: none; }
  .js:not(.nogl) .names { padding-bottom: 0; }
  .name, .gl .name, .hero .lead, .names .role, .copy { color: black; text-shadow: none; }
  .layer .copy, .recombine .copy { padding: 0; }
  /* one left margin for everything: the page's own */
  .hero, .layer, .recombine, .dawn-solid, .foot, .lost, .band h2, .band .co, .diagram .copy { padding-inline: 0 !important; }
  .band .co, .dawn-solid { margin-top: 1rem; }
  .role, .role .dom, .dir .role, .dir .here, .dir .facts, .write .dim, form.contact label, form.contact .contact-note, .brand .of, .group-id .dim, .chain > p, .built .line, .dated span, .legal-line, .legal dt, .legal .note { color: #333 !important; }
  .top { position: static; padding: 0 0 1rem; }
  .legal, .write { margin: 0; padding: 0; max-width: none; }
  form.contact input, form.contact textarea { border-color: #999; background: white; }
  a { color: black; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
  .family-rays a[href^="http"]::after { content: none; }
  tr, dt, dd, li { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
}