/* wellfinity.fr: the devices' own materials, espresso leather, camel mesh, the cinnamon
   box and its gold type, and on that ground one oscilloscope beam drawing the ∞ of the
   name, in gold, its amber afterglow fading. The beam is computed (assets/scope.js,
   figures.js, main.js) on one layer fixed behind the whole page and follows the reading;
   still.webp stands in for it where nothing moves. DESIGN.md explains the tokens. */

/* 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: "Red Hat Display";
  src: url(fonts/red-hat-display-latin.woff2) format("woff2");
  font-weight: 300 900; 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: "Red Hat Display";
  src: url(fonts/red-hat-display-latin-ext.woff2) format("woff2");
  font-weight: 300 900; 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 fallback takes Red Hat Display's measure, so the swap moves nothing:
   ascent 1.018 em, descent 0.305 em, divided by the width ratio */
@font-face {
  font-family: "Wellfinity Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 98.2%;
  ascent-override: 103.67%; descent-override: 31.06%; line-gap-override: 0%;
}


/* ── tokens ────────────────────────────────────────────────────────────── */
:root {
  --ground: #1f140f;   /* espresso: the leather of the devices, the box in shade */
  --deep:   #160e0a;   /* fields, the pause button */
  --ink:    #f6eadb;   /* cream, the label's white: text, 15.2:1 on the ground */
  --dim:    #cdb497;   /* sand: second text, 9.1:1 */
  --gold:   #e3b45e;   /* the box's gold type: headings, accents, focus, 9.4:1 */
  --camel:  #c79f72;   /* the mesh and the stitched patch: rules, 7.4:1 */
  --terra:  #b8694b;   /* the box's cinnamon: selection */
  --edge:   #8d705b;   /* field borders, 4:1 */
  --line:   #45322a;   /* hairlines */
  --text: "Fine", "Red Hat Display", "Wellfinity Fallback", Arial, sans-serif;
  --m: clamp(24px, 5.6vw, 88px);
  --ml: calc(var(--m) + env(safe-area-inset-left, 0px));
  --mr: calc(var(--m) + env(safe-area-inset-right, 0px));
  --col: min(34rem, 42vw);
  color-scheme: dark;
}

/* ── base ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
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.0625rem, 1rem + 0.2vw, 1.1875rem); line-height: 1.6; font-weight: 400;
  font-kerning: normal;
  -webkit-tap-highlight-color: transparent;
  overflow-wrap: break-word;
}
h1, h2, h3 { margin: 0; font-weight: 500; 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(--gold) 60%, transparent); transition: color 0.2s, text-decoration-color 0.2s; }
a:hover { color: var(--gold); text-decoration-color: currentColor; }
::selection { background: color-mix(in oklab, var(--terra) 55%, var(--ground)); color: var(--ink); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }
:lang(fr) main p:not(.lead):not(.open), :lang(fr) main li, :lang(fr) main dd { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 10 4 4; }
.nw { white-space: nowrap; }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

.skip {
  position: absolute; z-index: 10; left: var(--ml); 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: the wordmark of the devices, redrawn (lowercase, round strokes) ── */
.top {
  position: relative; z-index: 3;
  display: flex; align-items: center; flex-wrap: wrap; gap: 0 1.5rem;
  min-height: 104px;
  padding: env(safe-area-inset-top, 0px) var(--mr) 0 var(--ml);
}
.top nav { display: flex; align-items: center; gap: 0 1.5rem; }
.mark {
  display: inline-flex; align-items: center; min-height: 44px; margin-right: auto;
  color: var(--ink); text-decoration: none;
}
.mark svg { display: block; width: clamp(108px, 92px + 2.6vw, 146px); height: auto; overflow: visible; }
.mark:hover { color: var(--ink); }
.write, .lang {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px;
  font-size: 0.9375rem; font-weight: 500; 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(--gold); }
.home .top { position: absolute; inset: 0 0 auto 0; }

/* ── the scene: one layer behind the whole page ────────────────────────── */
.run { position: relative; }
.stage { position: absolute; z-index: 0; inset: 0 0 auto 0; height: 100vh; height: 100svh; pointer-events: none; }
.stage canvas { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
/* with the beam: fixed, as tall as the large viewport, so a phone's toolbar never moves it */
html.gl .stage { position: fixed; height: 100vh; height: 100lvh; }
html:not(.gl) .stage canvas, html.lost .stage canvas { display: none; }
/* without it (no script, no WebGL, reduced motion, a lost context): its still, on the
   same ground and in the same place, leaving with the first screen */
html.no-gl .stage::before, html.still .stage::before, html.lost .stage::before {
  content: ""; position: absolute; inset: 0 0 0 calc(var(--m) + var(--col));
  background: url("still.webp") 50% 50% / contain no-repeat;
}
@media (scripting: none) {
  .stage::before { content: ""; position: absolute; inset: 0 0 0 calc(var(--m) + var(--col)); background: url("still.webp") 50% 50% / contain no-repeat; }
}

.hero, .sec { position: relative; z-index: 1; padding-inline: var(--ml) var(--mr); }
.hero {
  display: flex; flex-direction: column; justify-content: center;
  min-height: 100vh; min-height: 100svh; padding-block: 136px 72px;
}
.hero h1 {
  max-width: var(--col);
  font-size: clamp(2.5rem, 1.4rem + 2.6vw, 3.875rem); line-height: 1.05; letter-spacing: -0.024em;
  margin-bottom: 0.55em;
}
.lead { max-width: min(31rem, var(--col)); font-size: clamp(1.1875rem, 1.05rem + 0.45vw, 1.4375rem); line-height: 1.5; margin: 0; color: var(--ink); hyphens: manual; -webkit-hyphens: manual; }

.sec { padding-block: clamp(4.5rem, 3rem + 6vw, 9rem) 0; }
.sec > * { max-width: var(--col); }
.sec h2 { font-size: clamp(2rem, 1.45rem + 1.7vw, 3rem); line-height: 1.08; letter-spacing: -0.018em; margin-bottom: 1.6rem; color: var(--gold); }
.sec .open { font-size: clamp(1.1875rem, 1.05rem + 0.45vw, 1.4375rem); line-height: 1.5; margin-bottom: 1.1em; }
.sec > p:last-child { margin-bottom: 0; }
.principle > p:last-child, .idea > p:last-child { color: var(--dim); }

/* the five uses, between stitched rules, as on the devices' leather patch */
.uses { list-style: none; margin: 0; padding: 0; }
.uses li { position: relative; display: grid; grid-template-columns: minmax(7.5rem, 0.8fr) minmax(0, 1.4fr); gap: 0.2rem 1.75rem; align-items: baseline; padding-block: 1rem; }
.uses li::before, .uses li:last-child::after {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; border-radius: 1px;
  background: repeating-linear-gradient(90deg, color-mix(in oklab, var(--camel) 62%, transparent) 0 7px, transparent 7px 12px);
}
.uses li:last-child::after { top: auto; bottom: -1px; }
.uses h3 { font-size: clamp(1.1875rem, 1.05rem + 0.45vw, 1.4375rem); line-height: 1.25; color: var(--ink); }
.uses p { margin: 0; color: var(--dim); }
.range .open { margin-bottom: 1.6rem; }

.company { padding-bottom: clamp(3rem, 2rem + 4vw, 6rem); }
.company .identity { font-size: clamp(1.1875rem, 1.05rem + 0.45vw, 1.4375rem); line-height: 1.5; }

/* with the beam: each part holds the screen while the figure turns into the next */
html.gl .sec { display: flex; flex-direction: column; justify-content: center; min-height: 92vh; min-height: 92svh; padding-block: 4rem; }
html.gl .sec.company { min-height: 100vh; min-height: 100svh; }

/* the round pause button, bottom right of the screen while the beam runs */
.pause {
  position: fixed; z-index: 5;
  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(--camel) 50%, transparent); border-radius: 50%;
  background: color-mix(in oklab, var(--deep) 70%, transparent); color: var(--dim); cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.pause:hover { color: var(--gold); 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; }

/* ── inner pages: contact, legal notice, privacy policy, 404 ───────────── */
.page { padding: clamp(2rem, 1rem + 4vw, 5rem) var(--mr) clamp(3rem, 2rem + 4vw, 6rem) var(--ml); }
.doc { max-width: 40em; }
.doc h1 { font-size: clamp(2.5rem, 1.5rem + 3vw, 4rem); line-height: 1.04; letter-spacing: -0.024em; margin-bottom: 0.6em; }
.doc h2 { font-size: clamp(1.4375rem, 1.2rem + 0.6vw, 1.75rem); line-height: 1.2; letter-spacing: -0.01em; margin: 2.3em 0 0.6em; color: var(--gold); }
.doc h2[id] { scroll-margin-top: 1.5rem; }
.doc h3 { font-size: 1.1875rem; margin: 1.6em 0 0.4em; }
.doc .intro, .doc .lead { font-size: 1.1875rem; }
.doc ul { margin: 0 0 1em; padding-left: 1.2em; }
.doc li { margin-bottom: 0.4em; }
.doc li::marker { color: var(--gold); }
.doc strong { font-weight: 620; color: var(--ink); }
.doc .updated, .doc p.updated { margin: 3rem 0 0; font-size: 0.9375rem; color: var(--dim); }
.facts, .doc dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.35rem 1.75rem; margin: 0.4rem 0 1em; font-size: 1rem; line-height: 1.5; font-variant-numeric: lining-nums tabular-nums; }
.facts dt, .doc dt { color: var(--dim); }
.facts dd, .doc 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: 0.9375rem; color: var(--dim); }
form.contact input, form.contact textarea {
  display: block; width: 100%; min-height: 44px; margin: 0; padding: 0.55rem 0.75rem;
  font: inherit; font-size: 1rem; line-height: 1.5; color: var(--ink);
  background: var(--deep); border: 1px solid var(--edge); border-radius: 6px;
  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(--gold); outline-offset: 2px; border-color: var(--dim); }
form.contact [aria-invalid="true"] { border-color: var(--gold); }
.contact-trap { position: absolute; left: -100vw; width: 1px; height: 1px; overflow: hidden; }
form.contact .contact-note { font-size: 0.9375rem; line-height: 1.5; color: var(--dim); }
form.contact button {
  min-height: 44px; padding: 0 1.75rem; margin-top: 0.3rem;
  font: inherit; font-size: 1rem; font-weight: 600; color: var(--ground);
  background: var(--gold); border: 0; border-radius: 999px; cursor: pointer; transition: background-color 0.2s;
}
form.contact button:hover { background: var(--ink); }
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(--gold); }
form.contact .contact-status:empty { margin: 0; }

/* the 404: two loops that come close and never join */
.astray { text-align: center; }
.astray .doc { margin-inline: auto; }
.astray .still { width: min(30rem, 80vw); aspect-ratio: 8 / 5; margin: 0 auto 1.5rem; background: url("still-lost.webp") 50% 50% / contain no-repeat; }
.astray .h1 { font-size: clamp(2.5rem, 1.5rem + 3vw, 4rem); font-weight: 500; line-height: 1.04; letter-spacing: -0.024em; margin: 2.5rem 0 0.6em; }
.astray .back { margin: 0; }
.astray .back a { display: inline-flex; align-items: center; min-height: 44px; }

/* ── footer ────────────────────────────────────────────────────────────── */
.foot { position: relative; z-index: 1; padding: 0 var(--mr) calc(1.5rem + env(safe-area-inset-bottom, 0px)) var(--ml); }
.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.875rem; color: var(--dim); }
.legal-line a { display: inline-flex; align-items: center; min-height: 44px; }
.foot > .legal-line:first-child { border-top: 1px solid var(--line); padding-top: 0.5rem; }

/* ── phones and tablets upright: one scene; the figure above, the words below ── */
@media (max-width: 900px) {
  :root { --m: 24px; --col: 100%; }
  .top { min-height: 72px; gap: 0 1.25rem; }
  .top nav { gap: 0 1.25rem; }
  .hero { justify-content: flex-end; padding-block: 96px clamp(2.75rem, 9svh, 5.5rem); }
  .hero h1 { max-width: 34rem; font-size: clamp(2.125rem, 1.2rem + 4.2vw, 2.875rem); }
  .lead { max-width: 34rem; }
  .sec { padding-top: 3.5rem; }
  .sec > * { max-width: 34rem; }
  html.gl .sec, html.gl .sec.company { justify-content: flex-end; min-height: 100vh; min-height: 100svh; padding-block: 22svh clamp(2.75rem, 9svh, 5.5rem); }
  html.no-gl .stage::before, html.still .stage::before, html.lost .stage::before { inset: 72px 0 auto 0; height: 46svh; background-size: min(90vw, 36rem) auto; }
  @media (scripting: none) { .stage::before { inset: 72px 0 auto 0; height: 46svh; background-size: min(90vw, 36rem) auto; } }
}
/* a phone held sideways: the words keep the left, the figure the ground to their right */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 560px) {
  :root { --col: min(30rem, 56vw); }
  .hero { justify-content: center; padding-block: 88px 2.5rem; }
  .hero h1 { max-width: var(--col); font-size: clamp(1.875rem, 1rem + 2.6vw, 2.5rem); }
  .lead, .sec > * { max-width: var(--col); }
  html.gl .sec, html.gl .sec.company { justify-content: center; padding-block: 3rem; }
  html.no-gl .stage::before, html.still .stage::before, html.lost .stage::before { inset: 0 0 0 calc(var(--m) + var(--col)); height: auto; background-size: contain; }
  @media (scripting: none) { .stage::before { inset: 0 0 0 calc(var(--m) + var(--col)); height: auto; background-size: contain; } }
}
/* the footer has come and the beam has gone: so has its button */
.pause { transition: color 0.2s, border-color 0.2s, opacity 0.4s, visibility 0s; }
html.rest .pause { opacity: 0; visibility: hidden; transition: opacity 0.4s, visibility 0s 0.4s; }
@media (max-width: 600px) {
  .uses li { grid-template-columns: minmax(0, 1fr); padding-block: 0.9rem; }
  .facts, .doc dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .facts dd, .doc dd { margin-bottom: 0.6rem; }
  form.contact label, form.contact .contact-note { font-size: 1rem; }
  .legal-line { font-size: 0.9375rem; 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); } }
@media (forced-colors: active) {
  .stage, .astray .still, .pause { display: none; }
  .home .top { position: relative; }
  .hero { min-height: 0; }
  html.gl .sec { display: block; min-height: 0; }
  .uses li::before, .uses li:last-child::after { background: CanvasText; height: 1px; }
  :focus-visible { outline: 2px solid Highlight; }
}
@media print {
  @page { margin: 18mm 16mm; }
  :root { --ink: #000; --dim: #333; --gold: #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; }
  .mark, .sec h2, .uses h3, .uses p, .doc .updated, .facts dt, .legal-line, .principle p, .idea p { color: black; }
  .hero { min-height: 0; padding: 0; }
  html.gl .sec { display: block; min-height: 0; }
  .sec, .page, .hero { padding-inline: 0; }
  .sec { padding-top: 10mm; }
  a { color: black; }
  .uses li { break-inside: avoid; }
  .uses li::before, .uses li:last-child::after { background: #999; height: 1px; }
}