/* haora.com: the packs' identity. Raspberry wordmark on warm sand stone, a drop of golden plant
   oil in daylight, botanical line drawings, product kinds in a monospaced face. Tokens, type and
   layout: DESIGN.md. The oil is computed (assets/oil.js); assets/still.webp stands in when it is not. */

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

@font-face {
  font-family: "Jost";
  src: url(fonts/jost-latin.woff2) format("woff2");
  font-weight: 300 600; 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: "Jost";
  src: url(fonts/jost-latin-ext.woff2) format("woff2");
  font-weight: 300 600; 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: "Space Mono";
  src: url(fonts/space-mono-700-latin.woff2) format("woff2");
  font-weight: 700; 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: "Space Mono";
  src: url(fonts/space-mono-700-latin-ext.woff2) format("woff2");
  font-weight: 700; 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 fallbacks take each face's measure, so the swap moves nothing: Jost sets 0.967 x Arial's
   width, ascent 1.07 em, descent 0.375 em; Space Mono 1.02 x Courier New's, 1.12 / 0.361 */
@font-face {
  font-family: "Jost Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 96.7%; ascent-override: 110.6%; descent-override: 38.8%; line-gap-override: 0%;
}
@font-face {
  font-family: "Space Mono Fallback";
  src: local("Courier New Bold"), local("Courier New"), local("Courier");
  size-adjust: 102%; ascent-override: 109.8%; descent-override: 35.4%; line-gap-override: 0%;
}

/* ── tokens ────────────────────────────────────────────────────────────── */
:root {
  --ground: #ebdcc9;   /* warm sand stone, the packs' photographs */
  --field:  #f5ece1;   /* form fields and the pause button's disc, one step lighter */
  --ink:    #4a1624;   /* deep wine: text and headings, 10.9:1 */
  --rasp:   #9a1c38;   /* the wordmark's raspberry: accents, links, the send button, 6.0:1 */
  --wine:   #74424a;   /* second text, 6.0:1 */
  --rose:   #d9667c;   /* the label's raspberry rose: never text */
  --edge:   #94735f;   /* the 1 px border of a form field, 3.2:1 */
  --line:   #cdb497;   /* hairlines */
  --sans: "Fine", "Jost", "Jost Fallback", Arial, sans-serif;
  --mono: "Fine", "Space Mono", "Space Mono Fallback", "Courier New", monospace;
  --m: clamp(24px, 5.6vw, 88px);
  --col: min(34rem, 42vw);
  color-scheme: light;
}

/* ── base ──────────────────────────────────────────────────────────────── */
html {
  background: var(--ground); color: var(--ink);
  font-family: var(--sans);
  -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.25vw, 1.1875rem); 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-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(--rasp) 55%, transparent); }
a:hover { color: var(--rasp); text-decoration-color: currentColor; }
::selection { background: color-mix(in oklab, var(--rose) 45%, var(--ground)); color: var(--ink); }
:focus-visible { outline: 2px solid var(--rasp); outline-offset: 3px; border-radius: 2px; }
:lang(fr) main p:not(.lead):not(.open), :lang(fr) main dd { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 10 4 4; }
:lang(fr) main a { hyphens: manual; -webkit-hyphens: manual; }
.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(--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: the wordmark as on the packs, Contact and the other language ─ */
.top {
  position: relative; z-index: 3;
  display: flex; align-items: center; 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 { display: inline-flex; align-items: center; min-height: 44px; margin-right: auto; color: var(--rasp); text-decoration: none; }
.wm { display: block; height: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem); width: auto; aspect-ratio: 2669 / 785; fill: currentColor; }
.mark:hover { color: var(--ink); }
.nav { 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: 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(--rasp); }
.lang.offer { animation: offer 2.6s ease-in-out 1.4s 1 both; }
@keyframes offer {
  0%, 100% { color: var(--ink); }
  45% { color: var(--rasp); text-decoration: underline; text-decoration-color: var(--rose); }
}
.home .top { position: absolute; inset: 0 0 auto 0; }

/* ── the stage: one layer behind the whole page ────────────────────────── */
.run { position: relative; }
.stage {
  position: absolute; z-index: 0; inset: 0 0 auto 0; height: 100vh; height: 100svh;
  background: var(--ground) url("still.webp") no-repeat;
  background-size: min(46vw, 82vh); background-position: right calc(var(--m) * 0.6) center;
  pointer-events: none;
}
.stage canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.9s ease-out; }
.stage canvas.on { opacity: 1; }
html:not(.gl) .stage canvas, html.lost .stage canvas { display: none; }
/* with the oil: fixed, the large viewport's height, so toolbars that come and go never move it */
html.gl .stage { position: fixed; inset: 0 auto auto 0; width: 100%; height: 100vh; height: 100lvh; }
html.lost .stage { position: absolute; height: 100vh; height: 100svh; }

.act { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; min-height: 88vh; min-height: 88svh; padding: 8vh var(--m) 8vh calc(var(--m) + env(safe-area-inset-left, 0px)); }
.act > * { max-width: var(--col); }
.hero { min-height: 100vh; min-height: 100svh; padding-block: 136px 72px; }
.hero h1 {
  font-size: clamp(2.625rem, 1.5rem + 3vw, 4.375rem); line-height: 1.04; letter-spacing: -0.018em; font-weight: 400;
  margin-bottom: 0.55em; max-width: min(38rem, 46vw);
}
.k { color: var(--rasp); }
.nw { white-space: nowrap; }
.lead, .open { font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.5rem); line-height: 1.5; color: var(--ink); hyphens: manual; -webkit-hyphens: manual; }
.hero .lead { margin: 0; max-width: min(31rem, var(--col)); }
.act h2 { font-size: clamp(2rem, 1.4rem + 1.8vw, 3.125rem); line-height: 1.08; letter-spacing: -0.014em; margin-bottom: 1.4rem; }
.act p { max-width: min(31em, var(--col)); }
.act .open { margin-bottom: 1em; }
.act p:last-child { margin-bottom: 0; }
.act .then { color: var(--wine); }
.company { min-height: 100vh; min-height: 100svh; }
.company .identity { font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.5rem); line-height: 1.5; }

/* the range: product kinds set like the packs' product names, each with its line drawing */
.goods { list-style: none; margin: 0; padding: 0; }
.goods li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 1.25rem; align-items: start; padding-block: 1.4rem; border-top: 1px solid var(--line); }
.goods li:last-child { border-bottom: 1px solid var(--line); }
.goods li::before { content: ""; grid-row: 1 / span 2; width: 5.5rem; height: 5.5rem; background: no-repeat 50% 50% / contain; }
.goods .oils::before { background-image: url("castor.svg"), url("jojoba.svg"); background-size: 76% 76%, 76% 76%; background-position: 0 0, 100% 100%; }
.goods .cream::before { background-image: url("cream.svg"); }
.goods h3 { font-family: var(--mono); font-weight: 700; font-size: clamp(1.25rem, 1.1rem + 0.55vw, 1.625rem); line-height: 1.2; letter-spacing: -0.01em; color: var(--rasp); margin-bottom: 0.35rem; }
.goods p { margin: 0; color: var(--wine); }
.goods + .where { margin-top: 1.25rem; }

.pause {
  position: fixed; z-index: 4;
  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(--rasp) 45%, transparent); border-radius: 50%;
  background: color-mix(in oklab, var(--field) 90%, transparent); color: var(--rasp); cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.pause:hover { color: var(--ink); 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 ───────────── */
.grid { 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)); }
.still { background: url("still.webp") 50% 50% / contain no-repeat; }
.form { display: grid; grid-template-columns: minmax(0, 34rem) minmax(0, 1fr); gap: 0 clamp(2rem, 6vw, 8rem); align-items: start; }
.form .copy { grid-column: 1; grid-row: 1; }
.form .drop { grid-column: 2; grid-row: 1; position: sticky; top: 2rem; width: 100%; max-width: 32rem; aspect-ratio: 1; justify-self: center; }
.copy h1, .lost .h1 { font-size: clamp(2.5rem, 1.5rem + 3vw, 4.25rem); line-height: 1.04; letter-spacing: -0.018em; font-weight: 400; margin: 0 0 0.6em; }
.doc .copy { max-width: 40em; }
.doc h2 { font-size: clamp(1.5rem, 1.25rem + 0.6vw, 1.875rem); line-height: 1.2; letter-spacing: -0.01em; margin: 2.3em 0 0.6em; }
.copy .intro, .form .lead { font-size: 1.1875rem; line-height: 1.5; }
.doc ul { margin: 0 0 1em; padding-left: 1.2em; }
.doc li { margin-bottom: 0.4em; }
.doc li::marker { color: var(--rasp); }
.doc strong { font-weight: 600; color: var(--ink); }
.doc .updated { margin: 3rem 0 0; font-size: 0.9375rem; color: var(--wine); }
.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(--wine); }
.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(--wine); }
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(--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(--rasp); }
form.contact input:focus-visible, form.contact textarea:focus-visible { outline: 2px solid var(--rasp); outline-offset: 2px; border-color: var(--rasp); }
form.contact [aria-invalid="true"] { border-color: var(--rasp); }
.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(--wine); }
form.contact button {
  min-height: 44px; padding: 0 1.75rem; margin-top: 0.3rem;
  font: inherit; font-size: 1rem; font-weight: 500; color: #fff;
  background: var(--rasp); border: 0; border-radius: 22px; 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(--rasp); }
form.contact .contact-status:empty { margin: 0; }

.lost { text-align: center; }
.lost .drop { width: min(24rem, 70vw); aspect-ratio: 1; margin: 0 auto 1rem; }
.lost .copy { max-width: 36rem; margin-inline: auto; }
.lost .h1 { margin-top: 2.25rem; }
.lost .back { margin: 0; }
.lost .back a { display: inline-flex; align-items: center; min-height: 44px; }

/* ── footer: the same ground, behind its 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(--wine); --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(--wine); }
.legal-line a { display: inline-flex; align-items: center; min-height: 44px; }
.home .foot { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)); }

/* ── narrower windows: header and type ─────────────────────────────────── */
@media (max-width: 900px) {
  :root { --m: 24px; --col: 36rem; }
  .top { min-height: 72px; gap: 0 1.25rem; }
  .nav { gap: 0 1.25rem; }
  .form { display: block; }
  .form .drop { display: none; }
}

/* ── portrait screens (phones, tablets upright): one scene, the oil above the words ── */
/* the same query as assets/main.js */
@media (max-aspect-ratio: 11/10), (max-width: 599px) {
  :root { --col: 40rem; }
  .top { min-height: 72px; }
  .stage { background-size: min(92vw, 44svh); background-position: 50% calc(72px + 1svh); }
  .act { justify-content: flex-end; min-height: 100vh; min-height: 100svh; padding: 50vh var(--m) 10vh calc(var(--m) + env(safe-area-inset-left, 0px)); padding-top: 50svh; padding-bottom: 10svh; }
  .hero { padding-top: calc(72px + 46svh); padding-bottom: 7svh; }
  .hero h1 { font-size: clamp(2.375rem, 1.3rem + 4.4vw, 3.75rem); max-width: var(--col); }
  .company { padding-bottom: 14svh; }
  .act > *, .act p, .hero .lead { max-width: var(--col); }
  .goods li { grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: 1rem; padding-block: 1.15rem; }
  .goods li::before { width: 4.5rem; height: 4.5rem; }
}
/* short portrait screens (iPhone SE, 320 × 568): the oil takes a little less of the first screen */
@media (max-aspect-ratio: 11/10) and (max-height: 700px) {
  .hero { padding-top: calc(64px + 32svh); padding-bottom: 5svh; }
  .act { padding-top: 40svh; padding-bottom: 8svh; }
  .hero h1 { font-size: clamp(2rem, 1.2rem + 4vw, 2.5rem); }
  .hero .lead { font-size: 1.125rem; }
}
/* low landscape screens (phones on their side): the words beside the oil, smaller */
@media (max-height: 500px) and (min-aspect-ratio: 11/10) {
  .top { min-height: 60px; }
  .act { min-height: 100vh; min-height: 100svh; padding-block: 72px 32px; }
  .hero { padding-block: 72px 32px; }
  .hero h1 { font-size: clamp(1.875rem, 1rem + 2.6vw, 2.5rem); }
  .act h2 { font-size: clamp(1.625rem, 1rem + 2vw, 2.125rem); margin-bottom: 0.9rem; }
  .lead, .open, .company .identity { font-size: 1.125rem; }
  .goods li { padding-block: 0.8rem; }
}
/* without the motion (reduced motion, no script, no WebGL): the still holds the first screen,
   and the words follow at a reading pace, with no empty screens waiting for an oil that is not there */
@media (prefers-reduced-motion: reduce), (scripting: none) {
  html .act:not(.hero) { min-height: 0; justify-content: flex-start; padding-top: clamp(4rem, 3rem + 4vw, 7rem); padding-bottom: 0; }
  html .company { padding-bottom: clamp(4rem, 3rem + 4vw, 7rem); }
}
html.no-gl .act:not(.hero), html.still .act:not(.hero) { min-height: 0; justify-content: flex-start; padding-top: clamp(4rem, 3rem + 4vw, 7rem); padding-bottom: 0; }
html.no-gl .company, html.still .company { padding-bottom: clamp(4rem, 3rem + 4vw, 7rem); }
@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, .nav { gap: 0 1rem; } .wm { height: 1.625rem; } }
@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 { --wine: var(--ink); --edge: var(--ink); --line: var(--wine); } }
@media (forced-colors: active) {
  .stage, .still, .goods li::before { display: none; }
  .wm { fill: CanvasText; }
  .home .top { position: relative; }
  .act, .hero { min-height: 0; padding-top: 3rem; }
  :focus-visible { outline: 2px solid Highlight; }
  .pause { display: none; }
}
@media print {
  @page { margin: 18mm 16mm; }
  :root { --ink: #000; --wine: #333; --rasp: #000; --line: #999; }
  html, body { background: white; color: black; font-size: 11pt; }
  .skip, .stage, .pause, .nav, .family, .still, .goods li::before { display: none !important; }
  .top, .home .top { position: static; min-height: 0; padding: 0 0 6mm; }
  .act, .hero, .company { display: block; min-height: 0; padding: 8mm 0 0; }
  .grid { padding: 8mm 0 0; }
  .goods li { display: block; border-color: #999; break-inside: avoid; }
  a { color: black; }
}