/* ona-beauty.fr: Condensation, in the colours and letters of the packs. Tokens, type and layout: 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: "Gloock"; src: url("fonts/gloock-latin.woff2") format("woff2");
  font-weight: 400; 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: "Gloock"; src: url("fonts/gloock-latin-ext.woff2") format("woff2");
  font-weight: 400; 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;
}
@font-face {
  font-family: "Mulish"; src: url("fonts/mulish-latin.woff2") format("woff2");
  font-weight: 200 1000; 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: "Mulish"; src: url("fonts/mulish-latin-ext.woff2") format("woff2");
  font-weight: 200 1000; 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 names of products and phases, set like the product names on the packs */
@font-face {
  font-family: "Barlow Condensed"; src: url("fonts/barlow-condensed-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+0152-0153, U+2013-2014, U+2018-2019, U+201C-201D, U+2026, U+202F, U+20AC;
}
/* metric twins, so the swap moves nothing (measured: DESIGN.md) */
@font-face { font-family: "Gloock Fallback"; src: local("Georgia"); size-adjust: 102.8%; ascent-override: 95.3%; descent-override: 22.4%; line-gap-override: 0%; }
@font-face { font-family: "Mulish Fallback"; src: local("Helvetica Neue"), local("HelveticaNeue"), local("Arial"), local("ArialMT"); size-adjust: 103.5%; ascent-override: 97.8%; descent-override: 24.2%; line-gap-override: 0%; }

/* ── tokens ────────────────────────────────────────────────────────────── */
:root {
  --ground: #2c1536;   /* oklch(0.245 0.068 315) aubergine */
  --deep:   #210e28;   /* oklch(0.205 0.056 315) */
  --raise:  #391f44;   /* oklch(0.29 0.072 315) */
  --blush:  #fadcd7;   /* text: the pale pink of the packs' ground, 12.9:1 */
  --mauve:  #dbb1bb;   /* second text, 8.7:1 */
  --peach:  #f5b0ab;   /* the pouch: phase names, focus, hover, 9.2:1 */
  --rasp:   #f75b6d;   /* the raspberry of the wordmark, lifted for the deep ground, 5.3:1 */
  --edge:   #a57590;   /* field borders, 4.4:1 */
  --line:   #644261;   /* hairlines */
  --display: "Fine", "Gloock", "Gloock Fallback", Georgia, serif;
  --text: "Fine", "Mulish", "Mulish Fallback", "Helvetica Neue", Arial, sans-serif;
  --name: "Fine", "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif-condensed, sans-serif;
  --m: clamp(24px, 5.6vw, 88px);
  --col: min(34rem, 42vw);
  --line-at: 58vh;
  color-scheme: dark;
}
@supports (height: 1svh) { :root { --line-at: 58svh; } }

/* ── base ──────────────────────────────────────────────────────────────── */
html {
  background: var(--ground); color: var(--blush);
  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.125rem); line-height: 1.6; font-weight: 400;
  font-kerning: normal; font-variant-ligatures: common-ligatures;
  -webkit-tap-highlight-color: transparent;
  overflow-wrap: break-word;
}
h1, h2, h3 { font-family: var(--display); font-weight: 400; 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(--peach) 60%, transparent); }
a:hover { color: var(--peach); text-decoration-color: currentColor; }
::selection { background: color-mix(in oklab, var(--rasp) 42%, var(--ground)); color: var(--blush); }
:focus-visible { outline: 2px solid var(--peach); 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(--blush); color: var(--ground); text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus, .skip:focus-visible { transform: none; }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ── 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));
}
/* the wordmark of the packs: "Ona" over "Beauty", one width, in raspberry (inline SVG, currentColor) */
.mark { display: inline-flex; align-items: center; min-height: 44px; margin-right: auto; color: var(--rasp); text-decoration: none; }
.mark svg { display: block; width: auto; height: clamp(44px, 2.4rem + 1.3vw, 62px); fill: currentColor; transition: color 0.2s; }
.mark:hover { color: var(--peach); }
.top .site { display: flex; align-items: center; gap: 0 1.5rem; }
.write, .lang {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px;
  font-size: 0.9375rem; white-space: nowrap; text-decoration: none; color: var(--blush);
}
.write:hover, .write:focus-visible, .lang:hover, .lang:focus-visible { color: var(--blush); text-decoration: underline; text-decoration-color: var(--peach); }
.lang.offer { animation: offer 2.6s ease-in-out 1.4s 1 both; }
@keyframes offer {
  0%, 100% { text-shadow: none; color: var(--blush); }
  45% { text-shadow: 0 0 0.9em color-mix(in oklab, var(--peach) 75%, transparent); color: var(--peach); }
}
.home .top { position: absolute; inset: 0 0 auto 0; }

/* ── the run: the stage 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; pointer-events: none; }
.stage canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
/* without the light (no script, no WebGL, reduced motion, a lost context): a frame of it */
.stage { background: var(--ground); }
html.no-gl .stage, html.still .stage, html.lost .stage { background: var(--ground) url("still.webp") 54% 50% / contain no-repeat; }
@media (scripting: none) { .stage { background: var(--ground) url("still.webp") 54% 50% / contain no-repeat; } }
html:not(.gl) .stage canvas, html.lost .stage canvas { display: none; }

.hero, .model { 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 72px;
}
.hero h1 {
  max-width: var(--col);
  font-size: clamp(2.625rem, 1.55rem + 3.2vw, 4.5rem); line-height: 1.04; letter-spacing: -0.012em;
  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; color: var(--blush); margin: 0; hyphens: manual; -webkit-hyphens: manual; }

.model { padding-bottom: 18vh; }
.model h2, .sec h2 { font-size: clamp(2rem, 1.45rem + 1.7vw, 3rem); line-height: 1.08; letter-spacing: -0.008em; }
.model h2 { max-width: var(--col); margin-bottom: 1.4rem; }
.phases { list-style: none; margin: 0; padding: 0; 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 and product names: condensed capitals, as the product names are set on the packs */
.phase h3, .goods h3 { font-family: var(--name); font-weight: 600; text-transform: uppercase; line-height: 1; }
.phase h3 { font-size: clamp(1.625rem, 1.35rem + 0.8vw, 2.125rem); color: var(--peach); margin-bottom: 0.55rem; }
.phase p { margin: 0; max-width: 30em; }

/* with the light (JavaScript, WebGL, motion allowed): the stage stays while the text passes */
/* the stage keeps its place in the flow, so it leaves with the last block; the text slides back over it */
html.gl .stage { position: sticky; top: 0; width: 100%; }
html.gl .hero { margin-top: -100vh; margin-top: -100svh; }
html.gl .model h2 { padding-top: 12vh; }
html.gl .phase { display: flex; flex-direction: column; justify-content: center; min-height: 78vh; min-height: 78svh; box-sizing: border-box; border: 0; }
html.gl .phase:last-child { min-height: 92vh; min-height: 92svh; border: 0; }
html.gl .phase h3 { font-size: clamp(1.875rem, 1.45rem + 1.2vw, 2.75rem); }

.pause {
  position: fixed; z-index: 4;
  right: calc(var(--m) + env(safe-area-inset-right, 0px)); bottom: calc(20px + 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(--mauve) 45%, transparent); border-radius: 50%;
  background: color-mix(in oklab, var(--deep) 60%, transparent); color: var(--mauve); cursor: pointer;
  transition: color 0.2s, border-color 0.2s, opacity 0.35s, visibility 0.35s;
}
.pause.away { opacity: 0; visibility: hidden; }
.pause:hover { color: var(--rasp); 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.1875rem, 1.05rem + 0.45vw, 1.4375rem); line-height: 1.5; margin-bottom: 1.1em; }
.principle > p:last-child { margin-bottom: 0; color: var(--mauve); }

.goods { list-style: none; margin: 0; padding: 0; max-width: 64rem; }
.goods li { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 0.4rem 2.5rem; align-items: baseline; padding-block: 1.5rem; border-top: 1px solid var(--line); }
.goods li:last-child { border-bottom: 1px solid var(--line); }
.goods h3 { font-size: clamp(1.75rem, 1.4rem + 1vw, 2.5rem); color: var(--blush); }
.goods p { margin: 0; color: var(--mauve); }

.company { padding-bottom: clamp(3rem, 2rem + 4vw, 6rem); }
.company p { max-width: 34em; }
.company .identity { font-size: clamp(1.1875rem, 1.05rem + 0.45vw, 1.4375rem); 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.5rem, 1.5rem + 3vw, 4rem); line-height: 1.04; letter-spacing: -0.012em; margin-bottom: 0.6em; }
.doc h2 { font-size: clamp(1.4375rem, 1.2rem + 0.6vw, 1.75rem); line-height: 1.2; margin: 2.3em 0 0.6em; }
.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(--peach); }
.doc strong { font-weight: 700; color: var(--blush); }
.doc .updated, .doc p.updated { margin: 3rem 0 0; font-size: 0.9375rem; color: var(--mauve); }
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.35rem 1.75rem; margin: 0.4rem 0 0; font-size: 1rem; line-height: 1.5; font-variant-numeric: lining-nums tabular-nums; }
.facts dt { color: var(--mauve); }
.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: 0.9375rem; color: var(--mauve); }
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: 1rem; line-height: 1.5; color: var(--blush);
  background: var(--deep); 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(--mauve); }
form.contact input:focus-visible, form.contact textarea:focus-visible { outline: 2px solid var(--peach); outline-offset: 2px; border-color: var(--mauve); }
form.contact [aria-invalid="true"] { border-color: var(--peach); }
.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(--mauve); }
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(--blush); border: 0; border-radius: 3px; cursor: pointer; transition: background-color 0.2s;
}
form.contact button:hover { background: var(--peach); }
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(--peach); }
form.contact .contact-status:empty { margin: 0; }

.astray { text-align: center; }
.astray .doc { margin-inline: auto; }
.astray .still { width: min(30rem, 80vw); aspect-ratio: 4 / 3; margin: 0 auto 1.5rem; background: url("still.webp") 50% 50% / contain no-repeat; }
.astray .h1 { font-family: var(--display); font-size: clamp(2.5rem, 1.5rem + 3vw, 4rem); line-height: 1.04; 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 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(--blush); --family-dim: var(--mauve); --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(--mauve); }
.legal-line a { display: inline-flex; align-items: center; min-height: 44px; }
.page + .foot .legal-line, .astray + .foot .legal-line { border-top: 1px solid var(--line); padding-top: 0.5rem; }

/* ── phones and tablets: one scene. The light is a fixed layer behind the whole page, on the
   same ground; the form lives where the text is not and recedes under it (main.js, gl.js) ── */
@media (max-width: 900px) {
  :root { --m: 24px; --col: 100%; }
  .top { min-height: 72px; gap: 0 1.25rem; }
  .mark svg { height: 46px; }
  .top .site { gap: 0 1.25rem; }
  /* without the light: a frame of it in the upper part of the first screen, its edges melting into the ground */
  .stage, html.no-gl .stage, html.still .stage, html.lost .stage {
    inset: 0 0 auto 0; width: 100%; height: 62vh; height: 62svh;
    background-color: transparent; background-position: 50% 62%; background-size: auto 78%;
    -webkit-mask-image: radial-gradient(closest-side, black 72%, transparent); mask-image: radial-gradient(closest-side, black 72%, transparent);
  }
  /* with the light: one full-bleed layer, sized to the large viewport so the toolbars never move it */
  html.gl .stage { position: fixed; inset: 0 0 auto 0; width: 100%; height: 100vh; height: 100lvh; background: var(--ground); -webkit-mask-image: none; mask-image: none; }
  html.gl .hero { margin-top: 0; }
  .hero { justify-content: flex-end; padding-block: 96px calc(76px + env(safe-area-inset-bottom, 0px)); }
  .hero h1 { font-size: clamp(2.125rem, 1.2rem + 4.2vw, 2.875rem); }
  .lead { max-width: 34rem; }
  .model { padding-bottom: 3rem; }
  .pause { right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  html.gl .home .foot { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .goods li { grid-template-columns: minmax(0, 1fr); }
}
/* upright: the reading sits on a line in the lower part, the form above it */
@media (max-width: 900px) and (orientation: portrait) {
  html.gl .model { padding-top: 14vh; padding-top: 14svh; }
  html.gl .model h2 { padding-top: 0; margin-bottom: 0; }
  html.gl .phase, html.gl .phase:last-child { display: block; min-height: 100vh; min-height: 100svh; }
  html.gl .phase-in { position: sticky; top: var(--line-at); padding-top: 0.25rem; }
  html.gl .phase:last-child { min-height: 112vh; min-height: 112svh; }
}
@media (min-width: 600px) and (max-width: 900px) and (orientation: portrait) {
  .hero h1 { font-size: clamp(2.875rem, 1.5rem + 3.6vw, 3.5rem); max-width: 16em; }
  .lead { font-size: 1.375rem; }
  html.gl .phase-in { max-width: 34rem; }
}
/* on its side: the reading on the left, the form on the right */
@media (max-width: 900px) and (orientation: landscape) {
  :root { --col: min(30rem, 52vw); }
  .hero { justify-content: center; padding-block: 88px 2rem; }
  .hero h1 { font-size: clamp(1.875rem, 1rem + 2.6vw, 2.5rem); max-width: var(--col); }
  .lead { max-width: var(--col); }
  .model h2, .phases { max-width: var(--col); }
  html.gl .phase, html.gl .phase:last-child { min-height: 100vh; min-height: 100svh; }
}
@media (max-width: 600px) {
  .facts { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .facts 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 { --mauve: var(--blush); --edge: var(--blush); --line: var(--mauve); } }
@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 .model h2 { padding-top: 0; }
  html.gl .phase, html.gl .phase:last-child { display: block; min-height: 0; border-top: 1px solid CanvasText; }
  html.gl .phase-in { position: static; }
  :focus-visible { outline: 2px solid Highlight; }
  .pause { display: none; }
}
@media print {
  @page { margin: 18mm 16mm; }
  :root { --blush: #000; --mauve: #333; --peach: #000; --rasp: #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, .phase h3, .doc .updated, .facts dt, .legal-line, .goods p, .principle p { color: black; }
  .hero, html.gl .hero { min-height: 0; margin-top: 0; padding: 0; }
  html.gl .model h2 { padding-top: 0; }
  html.gl .phase, html.gl .phase:last-child { display: block; min-height: 0; }
  html.gl .phase-in { position: static; }
  .model { padding-block: 8mm 0; }
  .sec, .page, .model, .hero { padding-inline: 0; }
  .sec { padding-top: 10mm; }
  a { color: black; }
  .phase, .goods li { border-color: #999; break-inside: avoid; }
}