/* innerflo.com: inner and flow.
   One calm ground of dusk mauve for the whole page. On the home page a ribbon of pearl
   satin crosses the first screen (assets/silk.js draws it: a flow field, combed into
   threads, lit like woven silk). It keeps to its side of the words and changes with each
   part of the name as the reading goes on; the rest of the page is type on the ground.
   Spectral for display, Alegreya Sans for the text. Colours and measures: DESIGN.md. */

/* ── faces ─────────────────────────────────────────────────────────────── */
/* French narrow no-break space (U+202F) only; heads every stack */
@font-face { font-family: "Fine"; src: url("fonts/fine.woff2") format("woff2"); unicode-range: U+202F; font-display: swap; }
@font-face { font-family: "Spectral"; font-weight: 300; font-display: swap; src: url("fonts/spectral-300-latin.woff2") format("woff2");
  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: "Spectral"; font-weight: 300; font-display: swap; src: url("fonts/spectral-300-latin-ext.woff2") format("woff2");
  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; }
@font-face { font-family: "Spectral"; font-weight: 400; font-display: swap; src: url("fonts/spectral-400-latin.woff2") format("woff2");
  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: "Spectral"; font-weight: 400; font-display: swap; src: url("fonts/spectral-400-latin-ext.woff2") format("woff2");
  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; }
@font-face { font-family: "Alegreya Sans"; font-weight: 400; font-display: swap; src: url("fonts/alegreya-sans-400-latin.woff2") format("woff2");
  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: "Alegreya Sans"; font-weight: 400; font-display: swap; src: url("fonts/alegreya-sans-400-latin-ext.woff2") format("woff2");
  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; }
@font-face { font-family: "Alegreya Sans"; font-weight: 500; font-display: swap; src: url("fonts/alegreya-sans-500-latin.woff2") format("woff2");
  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: "Alegreya Sans"; font-weight: 500; font-display: swap; src: url("fonts/alegreya-sans-500-latin-ext.woff2") format("woff2");
  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 twins, so the swap moves nothing (measured: DESIGN.md) */
@font-face { font-family: "Spectral Fallback"; src: local("Georgia"); size-adjust: 99.8%; ascent-override: 106.1%; descent-override: 46.4%; line-gap-override: 0%; }
@font-face { font-family: "Alegreya Sans Fallback"; src: local("Helvetica Neue"), local("HelveticaNeue"), local("Arial"), local("ArialMT"); size-adjust: 86.3%; ascent-override: 104.2%; descent-override: 34.8%; line-gap-override: 0%; }

/* ── tokens ────────────────────────────────────────────────────────────── */
:root {
  --ground: #d7bfcf;   /* oklch(0.83 0.034 338) dusk mauve: the page, everywhere */
  --field: #e1cedb;    /* oklch(0.87 0.028 338) form fields */
  --ink: #3a192f;      /* oklch(0.27 0.06 342) text, 9.0:1 */
  --dim: #57344a;      /* oklch(0.375 0.06 342) second text, 6.1:1 */
  --accent: #833156;   /* oklch(0.44 0.12 355) links' line, hover, focus, 4.8:1 */
  --edge: #7c5e73;     /* field borders, 3.3:1 */
  --line: #ac8ea2;     /* hairlines */
  /* the ribbon's colours, read by the canvas (r g b) */
  --ground-rgb: 215 191 207;
  --satin-rgb: 248 223 224;   /* its face: pearl satin */
  --back-rgb: 180 128 157;    /* its back, where it turns over */
  --deep-rgb: 147 94 124;     /* the hollows of its folds */
  --pearl-rgb: 255 244 241;   /* the sheen */
  --warm-rgb: 249 205 181;    /* apricot light */
  --cool-rgb: 225 217 242;    /* lilac light */
  --shade-rgb: 157 121 149;   /* its shadow on the ground */
  --display: "Fine", "Spectral", "Spectral Fallback", Georgia, serif;
  --text: "Fine", "Alegreya Sans", "Alegreya Sans Fallback", "Helvetica Neue", Arial, sans-serif;
  --m: clamp(24px, 5.6vw, 88px);
  --col: min(34rem, 42vw);
  /* the still settles into the ground at its foot and beside the words */
  --settle: linear-gradient(rgb(0 0 0) 58%, rgb(0 0 0 / 0.78) 71%, rgb(0 0 0 / 0.42) 84%, rgb(0 0 0 / 0.12) 94%, transparent);
  --settle-x: linear-gradient(to right, transparent, rgb(0 0 0) 10%);
  color-scheme: light;
}

/* ── base ──────────────────────────────────────────────────────────────── */
html {
  background: var(--ground); color: var(--ink);
  font-family: var(--text);
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
body {
  margin: 0; min-height: 100vh;
  background: var(--ground);
  font-size: clamp(1.125rem, 1.07rem + 0.2vw, 1.25rem); line-height: 1.55; font-weight: 400;
  font-kerning: normal; font-variant-ligatures: common-ligatures; font-variant-numeric: lining-nums;
  -webkit-tap-highlight-color: transparent;
  overflow-wrap: break-word;
}
h1, h2, h3 { font-family: var(--display); font-weight: 300; margin: 0; text-wrap: balance; hyphens: manual; -webkit-hyphens: manual; }
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: color-mix(in oklab, var(--accent) 70%, transparent); }
a:hover { color: var(--accent); text-decoration-color: currentColor; }
strong { font-weight: 500; }
::selection { background: color-mix(in oklab, var(--accent) 30%, var(--ground)); color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
:lang(fr) main p:not(.lead), :lang(fr) main li, :lang(fr) main dd { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 10 4 4; }

.skip {
  position: absolute; z-index: 10; left: var(--m); top: calc(0.5rem + env(safe-area-inset-top, 0px));
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem;
  background: var(--ink); color: var(--ground); text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus, .skip:focus-visible { transform: none; }

/* ── header ────────────────────────────────────────────────────────────── */
.top {
  position: relative; z-index: 3;
  display: flex; align-items: center; flex-wrap: wrap; gap: 0 1.5rem;
  min-height: 104px; box-sizing: border-box;
  padding: env(safe-area-inset-top, 0px) calc(var(--m) + env(safe-area-inset-right, 0px)) 0 calc(var(--m) + env(safe-area-inset-left, 0px));
}
.mark {
  font-family: var(--display); font-weight: 400; font-size: clamp(1.5rem, 1.04rem + 1.9vw, 2.25rem); line-height: 1;
  letter-spacing: 0.002em; white-space: nowrap; color: var(--ink); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px; margin-right: auto;
}
.mark:hover { color: var(--ink); }
.top .site { display: flex; align-items: center; gap: inherit; }
.write, .lang {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px;
  font-size: 1rem; white-space: nowrap; text-decoration: none; color: var(--ink);
}
.write:hover, .write:focus-visible, .lang:hover, .lang:focus-visible { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); }
.home .top { position: absolute; inset: 0 0 auto 0; }

/* ── the run: the ribbon and the reading it follows ────────────────────── */
.run { position: relative; }
.stage { position: absolute; z-index: 0; top: 0; right: 0; width: 62%; height: 100vh; height: 100svh; touch-action: pan-y pinch-zoom; background: var(--ground); }
.stage canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
/* without the moving ribbon (no script, no WebGL, a lost context): one frame of it */
html.no-gl .stage, html.lost .stage {
  background: var(--ground) url("still.webp") 50% 50% / cover no-repeat;
  -webkit-mask-image: var(--settle-x), var(--settle); -webkit-mask-composite: source-in; mask-image: var(--settle-x), var(--settle); mask-composite: intersect;
}
@media (scripting: none) { .stage {
  background: var(--ground) url("still.webp") 50% 50% / cover no-repeat;
  -webkit-mask-image: var(--settle-x), var(--settle); -webkit-mask-composite: source-in; mask-image: var(--settle-x), var(--settle); mask-composite: intersect;
} }
html:not(.gl) .stage canvas, html.lost .stage canvas { display: none; }

.hero, .name { position: relative; z-index: 1; padding-inline: calc(var(--m) + env(safe-area-inset-left, 0px)) var(--m); }
.hero {
  display: flex; flex-direction: column; justify-content: center;
  min-height: 100vh; min-height: 100svh; box-sizing: border-box; padding-block: 136px 80px;
}
.hero h1 {
  max-width: var(--col);
  font-size: clamp(2.75rem, 1.6rem + 3.4vw, 4.75rem); line-height: 1.05; letter-spacing: -0.012em;
  margin-bottom: 0.5em;
}
.lead { max-width: min(30rem, var(--col)); font-size: clamp(1.25rem, 1.1rem + 0.45vw, 1.5rem); line-height: 1.5; margin: 0; hyphens: manual; -webkit-hyphens: manual; }

.name { padding-bottom: 16vh; }
.name h2, .sec h2 { font-size: clamp(2.125rem, 1.5rem + 1.8vw, 3.25rem); line-height: 1.08; letter-spacing: -0.008em; }
.name h2 { max-width: var(--col); margin-bottom: 1.4rem; }
.phases { max-width: var(--col); }
.phase { padding-block: 1.6rem; border-top: 1px solid var(--line); }
.phase:last-child { border-bottom: 1px solid var(--line); }
.phase h3 { font-size: clamp(1.625rem, 1.35rem + 0.8vw, 2.125rem); line-height: 1.15; font-weight: 400; color: var(--accent); margin-bottom: 0.45rem; }
.phase p { margin: 0; max-width: 30em; }

/* with the ribbon (JavaScript, WebGL): the stage stays while the words pass */
/* it keeps its place in the flow, so it leaves with the last part; the words slide back over it */
html.gl .stage { position: sticky; top: 0; width: 100%; }
html.gl .hero { margin-top: -100vh; margin-top: -100svh; }
html.gl .name h2 { padding-top: 12vh; }
html.gl .phase { display: flex; flex-direction: column; justify-content: center; min-height: 76vh; min-height: 76svh; box-sizing: border-box; border: 0; }
html.gl .phase:last-child { min-height: 90vh; min-height: 90svh; border: 0; }
html.gl .phase h3 { font-size: clamp(1.875rem, 1.45rem + 1.2vw, 2.625rem); }

.pause {
  position: absolute; z-index: 2;
  right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin: 0; padding: 0;
  border: 1px solid color-mix(in oklab, var(--dim) 45%, transparent); border-radius: 50%;
  background: color-mix(in oklab, var(--ground) 72%, transparent); color: var(--dim); cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.pause:hover { color: var(--accent); border-color: currentColor; }
.pause svg { display: block; width: 20px; height: 20px; fill: currentColor; }
.pause[aria-pressed="true"] .i-pause, .pause:not([aria-pressed="true"]) .i-play { display: none; }
.pause[hidden], html:not(.gl) .pause, html.lost .pause { display: none; }

/* ── the calm sections ─────────────────────────────────────────────────── */
.sec { position: relative; z-index: 1; padding: clamp(4.5rem, 3rem + 6vw, 9rem) calc(var(--m) + env(safe-area-inset-right, 0px)) 0 calc(var(--m) + env(safe-area-inset-left, 0px)); }
.sec h2 { max-width: 18em; margin-bottom: 2.2rem; }
.sec > p { max-width: 34em; }
.sec .open { max-width: 30em; font-size: clamp(1.25rem, 1.1rem + 0.45vw, 1.5rem); line-height: 1.5; margin-bottom: 1.1em; }

.goods { list-style: none; margin: 0; padding: 0; max-width: 64rem; }
.goods li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 0.4rem 2.5rem; align-items: baseline; padding-block: 1.6rem; border-top: 1px solid var(--line); }
.goods li:last-child { border-bottom: 1px solid var(--line); }
.goods h3 { font-size: clamp(1.625rem, 1.3rem + 1vw, 2.25rem); line-height: 1.12; }
.goods p { margin: 0; color: var(--dim); }

.company { padding-bottom: clamp(3rem, 2rem + 4vw, 6rem); }
.company p { max-width: 34em; }
.company .identity { font-size: clamp(1.25rem, 1.1rem + 0.45vw, 1.5rem); line-height: 1.5; }

/* ── inner pages: contact, legal notice, privacy policy, 404 ───────────── */
.page { padding: clamp(2rem, 1rem + 4vw, 5rem) calc(var(--m) + env(safe-area-inset-right, 0px)) clamp(3rem, 2rem + 4vw, 6rem) calc(var(--m) + env(safe-area-inset-left, 0px)); }
.doc { max-width: 40em; }
.doc h1 { font-size: clamp(2.625rem, 1.6rem + 3vw, 4.25rem); line-height: 1.05; letter-spacing: -0.012em; margin-bottom: 0.55em; }
.doc h2 { font-size: clamp(1.5rem, 1.25rem + 0.7vw, 1.875rem); line-height: 1.2; font-weight: 400; margin: 2.2em 0 0.6em; }
.doc .lead { font-size: clamp(1.25rem, 1.1rem + 0.45vw, 1.5rem); margin-bottom: 1em; }
.doc ul { margin: 0 0 1em; padding-left: 1.2em; }
.doc li { margin-bottom: 0.4em; }
.doc li::marker { color: var(--accent); }
.doc .updated, .doc p.updated { margin: 3rem 0 0; font-size: 1rem; color: var(--dim); }
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.35rem 1.75rem; margin: 0.4rem 0 1em; line-height: 1.5; font-variant-numeric: lining-nums tabular-nums; }
.facts dt { color: var(--dim); }
.facts dd { margin: 0; }

form.contact { margin-top: 2.2rem; max-width: 34rem; }
form.contact p { margin: 0 0 1.15rem; }
form.contact label { display: block; margin-bottom: 0.3rem; font-size: 1rem; color: var(--dim); }
form.contact input, form.contact textarea {
  display: block; box-sizing: border-box; width: 100%; min-height: 44px; margin: 0; padding: 0.55rem 0.75rem;
  font: inherit; font-size: 1.0625rem; line-height: 1.5; color: var(--ink);
  background: var(--field); border: 1px solid var(--edge); border-radius: 3px;
  transition: border-color 0.2s;
}
form.contact textarea { resize: vertical; min-height: 10em; }
form.contact input:hover, form.contact textarea:hover { border-color: var(--dim); }
form.contact input:focus-visible, form.contact textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--dim); }
form.contact [aria-invalid="true"] { border-color: var(--accent); }
.contact-trap { position: absolute; left: -100vw; width: 1px; height: 1px; overflow: hidden; }
form.contact .contact-note { font-size: 1rem; line-height: 1.5; color: var(--dim); }
form.contact button {
  min-height: 48px; padding: 0 1.9rem; margin-top: 0.3rem;
  font: inherit; font-size: 1.0625rem; font-weight: 500; color: var(--ground);
  background: var(--ink); border: 0; border-radius: 3px; cursor: pointer; transition: background-color 0.2s;
}
form.contact button:hover { background: var(--accent); }
form.contact button[aria-disabled="true"] { cursor: progress; opacity: 0.7; }
form.contact .contact-status { min-height: 1.6em; margin: 1rem 0 0; color: var(--accent); }
form.contact .contact-status:empty { margin: 0; }

.astray { text-align: center; }
.astray .doc { margin-inline: auto; }
/* a length of the ribbon drifting across, its ends dissolving into the ground */
.astray .still {
  width: min(30rem, 84vw); aspect-ratio: 960 / 839; margin: 0 auto 1rem; background: url("still-astray.webp") 50% 50% / contain no-repeat;
  --drift: linear-gradient(to right, transparent, rgb(0 0 0 / 0.3) 13%, rgb(0 0 0 / 0.78) 27%, rgb(0 0 0) 40%, rgb(0 0 0) 64%, rgb(0 0 0 / 0.78) 77%, rgb(0 0 0 / 0.3) 89%, transparent);
  -webkit-mask-image: var(--drift); mask-image: var(--drift);
}
.astray h1 { margin: 1rem 0 0.3em; }
.astray .h1 { font-family: var(--display); font-weight: 300; font-size: clamp(2.625rem, 1.6rem + 3vw, 4.25rem); line-height: 1.05; letter-spacing: -0.012em; text-wrap: balance; margin: 2.5rem 0 0.3em; color: var(--ink); }
.astray .back { margin: 0; }
.astray .back a { display: inline-flex; align-items: center; min-height: 44px; }

/* ── footer: the same ground, behind a hairline ────────────────────────── */
.foot { position: relative; z-index: 1; padding: 0 calc(var(--m) + env(safe-area-inset-right, 0px)) calc(1.5rem + env(safe-area-inset-bottom, 0px)) calc(var(--m) + env(safe-area-inset-left, 0px)); }
.foot .family { --family-ink: var(--ink); --family-dim: var(--dim); --family-line: var(--line); --family-ground: transparent; border-top: 1px solid var(--line); }
.legal-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.75rem; margin: 0; font-size: 0.9375rem; color: var(--dim); }
.legal-line a { display: inline-flex; align-items: center; min-height: 44px; }
.page + .foot .legal-line { border-top: 1px solid var(--line); padding-top: 0.5rem; }

/* ── phones and narrow windows: one scene ──────────────────────────────── */
/* the ribbon lies behind the whole page, full-bleed and sized to the large viewport, so the
   phone's bars never move it; the words pass over the same ground, and wherever they are
   the ribbon narrows and fades into it (silk.js). Each part of the run is a screen: the
   ribbon in the upper part, its words in the lower part. */
@media (max-width: 900px) {
  :root { --m: 24px; --col: 100%; }
  .top { min-height: 72px; gap: 0 1.25rem; }
  .stage { left: 0; right: auto; width: 100%; }
  html.gl .stage { position: fixed; height: 100vh; height: 100lvh; }
  html.gl .hero { margin-top: 0; }
  .pause { position: fixed; }
  /* without the moving ribbon: one frame of it over the upper part of the first screen, its
     ends dissolving into the ground (an image with alpha: no edge can show) */
  html.no-gl .stage, html.lost .stage { height: min(138.5vw, 64vh); height: min(138.5vw, 64svh); background: url("still-phone.webp") 50% 0 / contain no-repeat; -webkit-mask-image: none; mask-image: none; }
  @media (scripting: none) { .stage { height: min(138.5vw, 64vh); height: min(138.5vw, 64svh); background: url("still-phone.webp") 50% 0 / contain no-repeat; -webkit-mask-image: none; mask-image: none; } }
  .hero { min-height: 100vh; min-height: 100svh; justify-content: flex-end; padding-block: 96px calc(2.75rem + env(safe-area-inset-bottom, 0px)); }
  .hero h1 { font-size: clamp(2.25rem, 1.3rem + 4.2vw, 3rem); }
  .lead { max-width: 34rem; }
  .name { padding-bottom: 3rem; }
  html.gl .name h2 { padding-top: 2rem; }
  html.gl .phase, html.gl .phase:last-child { min-height: 100vh; min-height: 100svh; justify-content: flex-end; padding-block: 0 calc(2.75rem + env(safe-area-inset-bottom, 0px)); }
  .goods li { grid-template-columns: minmax(0, 1fr); }
  /* the last line stays clear of the pause button */
  html.gl .foot { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}
/* held sideways: the words on the left, the ribbon down the free side, as on a wide screen */
@media (max-width: 900px) and (orientation: landscape) {
  :root { --col: min(30rem, 54vw); }
  .hero { justify-content: center; padding-block: 80px 28px; }
  .hero h1 { font-size: clamp(2rem, 1.1rem + 2.6vw, 2.625rem); }
  .lead { max-width: var(--col); font-size: 1.25rem; }
  html.gl .phase, html.gl .phase:last-child { justify-content: center; padding-block: 1.5rem; }
  html.no-gl .stage, html.lost .stage { left: auto; right: 0; width: 62%; height: 100vh; height: 100svh; background: var(--ground) url("still.webp") 50% 50% / cover no-repeat;
    -webkit-mask-image: var(--settle-x), var(--settle); -webkit-mask-composite: source-in; mask-image: var(--settle-x), var(--settle); mask-composite: intersect; }
  @media (scripting: none) { .stage { left: auto; right: 0; width: 62%; height: 100vh; height: 100svh; background: var(--ground) url("still.webp") 50% 50% / cover no-repeat;
    -webkit-mask-image: var(--settle-x), var(--settle); -webkit-mask-composite: source-in; mask-image: var(--settle-x), var(--settle); mask-composite: intersect; } }
}
/* nothing moves: the ribbon is drawn once over the first screen and leaves with it, and the
   parts of the name are rows between hairlines, as without the ribbon */
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  html.gl .stage { position: absolute; height: 100vh; height: 100svh; }
  html.gl .name h2 { padding-top: 0; }
  html.gl .phase, html.gl .phase:last-child { display: block; min-height: 0; padding-block: 1.6rem; border-top: 1px solid var(--line); }
  html.gl .phase:last-child { border-bottom: 1px solid var(--line); }
  html.gl .foot { padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 600px) {
  .facts { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .facts dd { margin-bottom: 0.6rem; }
  .legal-line { gap: 0 1.5rem; }
}
@media (max-width: 399px) { :root { --m: 20px; } .top { gap: 0 1rem; } }
@media (pointer: coarse) { main p a, main dd a { padding-block: 0.6em; margin-block: -0.6em; } }

/* ── preferences ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }
@media (prefers-contrast: more) { :root { --dim: var(--ink); --edge: var(--ink); --line: var(--dim); --accent: var(--ink); } }
@media (forced-colors: active) {
  .stage, .astray .still { display: none; }
  .home .top { position: relative; }
  .hero, html.gl .hero { min-height: 0; margin-top: 0; }
  html.gl .name h2 { padding-top: 0; }
  html.gl .phase, html.gl .phase:last-child { display: block; min-height: 0; border-top: 1px solid CanvasText; }
  :focus-visible { outline: 2px solid Highlight; }
  .pause { display: none; }
}
@media print {
  @page { margin: 18mm 16mm; }
  :root { --ink: #000; --dim: #333; --accent: #000; --line: #999; }
  html, body { background: white; color: black; font-size: 11pt; }
  .skip, .stage, .pause, .lang, .write, .family, .astray .still { display: none !important; }
  .top, .home .top { position: static; min-height: 0; padding: 0 0 6mm; }
  .hero, html.gl .hero { min-height: 0; margin-top: 0; padding: 0; }
  html.gl .name h2 { padding-top: 0; }
  html.gl .phase, html.gl .phase:last-child { display: block; min-height: 0; }
  .name { padding-block: 8mm 0; }
  .sec, .page, .name, .hero { padding-inline: 0; }
  .sec { padding-top: 10mm; }
  a { color: black; }
  .phase, .goods li { border-color: #999; break-inside: avoid; }
}