/* kyrena.com: a reading shore beside a touch field, over blue silicone. */
/* 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: "Noto Serif Display";
  src: url("/assets/fonts/noto-serif-display-latin.woff2") format("woff2");
  font-weight: 300 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: "Sofia Sans";
  src: url("/assets/fonts/sofia-sans-latin.woff2") format("woff2");
  font-weight: 400 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: "Sofia Sans";
  src: url("/assets/fonts/sofia-sans-latin-ext.woff2") format("woff2");
  font-weight: 400 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: "Noto Serif Display Fallback";
  src: local("Georgia");
  size-adjust: 102.8%;
  ascent-override: 104.1%;
  descent-override: 28.2%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Sofia Sans Fallback";
  src: local("Arial"), local("ArialMT");
  size-adjust: 94.2%;
  ascent-override: 95.5%;
  descent-override: 31.8%;
  line-gap-override: 0%;
}
/* the ground: a misted Cellublue blue, never white. The canvas grades its thin
   veil to this same tone (GROUND in main.js), so the page and the silicone are one */
:root {
  --veil: oklch(88% 0.045 245);             /* #c0dbf4, the misted ground */
  --silicone: oklch(56% 0.171 258.1);       /* #2a71d6, medical silicone (focus, rings) */
  --silicone-ink: oklch(40% 0.15 260);      /* links, 6.6:1 on the ground */
  --ink: oklch(27.9% 0.086 258.6);          /* #0a2752, text, 10.3:1 */
  --tide: oklch(38% 0.075 257);             /* quiet text, 7:1 */
  --field: oklch(93% 0.028 245);            /* form fields, a shade lighter than the ground */
  --shore: max(24px, 8vw);
  --head: clamp(76px, 3.25rem + 5.8vw, 112px);   /* the header's height (BRIEF §0.4) */
  /* the gutters and the header clear the notch and the rounded corners */
  --sl: calc(var(--shore) + env(safe-area-inset-left, 0px));
  --sr: calc(var(--shore) + env(safe-area-inset-right, 0px));
  --top: calc(var(--head) + env(safe-area-inset-top, 0px));
  --display: "Fine", "Noto Serif Display", "Noto Serif Display Fallback", Georgia, "Times New Roman", serif;
  --text: "Fine", "Sofia Sans", "Sofia Sans Fallback", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--veil);
  color: var(--ink);
}
@media (color-gamut: p3) {
  :root { --silicone: oklch(56% 0.2 259); --silicone-ink: oklch(40% 0.18 261); }
}
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font: 400 1.125rem/1.6 var(--text);
  font-kerning: normal;
  background: var(--veil);
  color: var(--ink);
  overflow-x: clip;
}
h1, h2, p, dl, dd, address { margin: 0; }
address { font-style: normal; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* the silicone: one fixed sheet behind the page, faded in on its first frame */
#membrane {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  display: block;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease-out;
}
.gl-on #membrane { opacity: 1; }
.no-gl #membrane { display: none; }
.top, main, .foot { position: relative; z-index: 1; }

/* ── type ─────────────────────────────────────────────────────────────── */
h1, h2 {
  font-family: var(--display);
  font-weight: 300;
  letter-spacing: -0.012em;
  text-wrap: balance;
  font-optical-sizing: auto;
}
/* the smaller of height and width: between 900 and 1100 px the shore column is
   narrow, and 8.2svh alone set the French h1 on four or five lines */
h1 { font-size: clamp(3rem, min(8.2svh, 5.4vw), 4.5rem); line-height: 1.04; max-width: 11.4em; }
.nw { white-space: nowrap; }
h2 { font-size: 3rem; line-height: 1.08; max-width: 12em; }
.lede { font-size: 1.5rem; line-height: 1.4; max-width: 23em; margin-top: 2rem; }
.shore p + p { margin-top: 1.1em; }
.shore p { max-width: 34em; text-wrap: pretty; }
/* short display lines never break inside a word; French running text may, sparingly */
.lede, .customer, h1, h2 { -webkit-hyphens: manual; hyphens: manual; }
:lang(fr) .shore p:not(.lede) { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 11 4 4; }
:lang(fr) .shore a { -webkit-hyphens: manual; hyphens: manual; }
strong { font-weight: 600; }

a { color: var(--silicone-ink); text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: color-mix(in oklab, currentColor 55%, transparent); }
a:hover { text-decoration-thickness: 2px; text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 3px; }

.skip {
  position: absolute;
  left: 12px;
  top: -200px;
  z-index: 10;
  padding: 10px 16px;
  background: var(--veil);
  color: var(--ink);
  font-weight: 600;
}
.skip:focus { top: 12px; }

/* ── header ───────────────────────────────────────────────────────────── */
/* the wordmark is sized like a corporate logo (BRIEF §0.4): cap height 16 px at
   390 px wide, rising with the width to 24 px from 1024 px (Noto Serif Display's
   caps are 0.714 em). The header is as tall as that name needs, 76 px on a phone,
   112 px from 1024 px. The links sit on the wordmark's baseline: one flex line,
   baseline-aligned, centred in the header by align-content */
.top {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: baseline;
  justify-content: space-between;
  column-gap: 1.5rem;
  min-height: var(--top);
  padding: env(safe-area-inset-top, 0px) var(--sr) 0 var(--sl);
}
.mark {
  font: 400 clamp(1.4rem, 0.954rem + 1.83vw, 2.125rem)/1 var(--display);
  letter-spacing: 0.1em;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
a.mark:hover { color: var(--silicone-ink); }
.top .links { display: flex; align-items: center; gap: 1.25rem; }
.lang, .to-contact {
  font-weight: 500;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 4px;
  color: var(--ink);
  text-decoration-line: none;
}
/* the header's words carry no underline at rest; it shows on hover and focus */
.top .links a:is(:hover, :focus-visible) { text-decoration-line: underline; }
.lang.offer { animation: offer 3.2s ease 1.4s 1 both; }
@keyframes offer {
  0%, 100% { text-shadow: none; color: var(--ink); }
  45% { text-shadow: 0 0 14px color-mix(in oklab, var(--silicone) 55%, transparent); color: var(--silicone-ink); }
}
/* the one control: pause. A round icon in the bottom-right corner of the first
   section, over the silicone and clear of the words: two bars, a triangle once
   paused; its name is spoken and changes with it */
.hero, .intro { position: relative; }
.pause {
  position: absolute;
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 2;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid color-mix(in oklab, var(--ink) 26%, transparent);
  border-radius: 50%;
  background: color-mix(in oklab, var(--veil) 72%, transparent);
  color: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pause svg { width: 20px; height: 20px; fill: currentColor; }
.pause[aria-pressed="true"] .i-pause, .pause:not([aria-pressed="true"]) .i-play { display: none; }
.pause:hover { background: var(--veil); border-color: color-mix(in oklab, var(--ink) 50%, transparent); }
.pause[hidden] { display: none; }

/* ── sections: the reading shore (left) and the touch field (right) ─── */
main section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.84fr);
  align-items: center;
  padding-left: var(--sl);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: pan-y pinch-zoom;
}
main :is(h1, h2, p, li, dt, dd, address, a, label, input, textarea) { -webkit-user-select: text; user-select: text; }
.shore { position: relative; max-width: 40rem; }
.pool { align-self: stretch; min-height: 60vh; }

.hero {
  min-height: 100vh;
  min-height: 100svh;
  grid-template-rows: auto 1fr;
  grid-template-areas: "shore pool" "cust pool";
}
/* the headline keeps its distance from the wordmark: the header's height and 44 px */
.hero .shore { grid-area: shore; padding-block: calc(var(--top) + 44px) 0; max-width: none; }
.hero .pool { grid-area: pool; }
/* the customer's path: whoever bought from Cellublue finds it on the first screen */
.customer {
  grid-area: cust;
  align-self: end;
  max-width: 31em;
  margin-block: 2.5rem 64px;
  font-size: 1.0625rem;
  line-height: 1.55;
  text-wrap: pretty;
}
.customer .q { font-weight: 600; }

/* the bands hold what they say, no more: no empty half-screens */
.band { min-height: auto; }
.band .shore { padding-block: 11vh; }
.prose .pool { min-height: 44vh; }
.contact .pool { min-height: 40vh; }

/* ── Cellublue: the words above one pad the width of the page ────────── */
.stage {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: start;
  padding-right: var(--sr);
  padding-bottom: 7vh;
}
.stage .shore { grid-row: 1; padding-block: 11vh 1rem; }
.stage .pool { grid-row: 2; grid-column: 1; min-height: 56vh; margin-left: calc(-1 * var(--sl)); margin-right: calc(-1 * var(--sr)); }

.shore > h2 + p { margin-top: 1.6rem; }

/* ── the reading bands: facts set as short definitions, no boxes ─────── */
/* a band without a pool gives its right column to the words: the heading and
   its sentences on the left, the definitions beside them */
.wide {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  column-gap: clamp(2.5rem, 6vw, 6.5rem);
  align-items: start;
  padding-right: var(--sr);
}
.wide .side { padding-block: calc(11vh + 0.9rem) 11vh; }
/* each definition hangs from a hairline, the term in the text face's bold */
.defs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1.75rem clamp(1.5rem, 3vw, 2.75rem);
}
.defs > div { border-top: 1px solid color-mix(in oklab, var(--ink) 20%, transparent); padding-top: 0.85rem; }
.defs dt { font-weight: 600; font-size: 1.0625rem; line-height: 1.35; }
.defs dd { margin-top: 0.35rem; font-size: 1rem; line-height: 1.5; text-wrap: pretty; }
/* the milestones: each year in the display face, hanging from a hairline, what happened under it */
.years { list-style: none; margin: 0; padding: 0; max-width: 36rem; }
.years > li { border-top: 1px solid color-mix(in oklab, var(--ink) 20%, transparent); padding-block: 0.8rem 1.5rem; }
.years .yr { display: block; font: 400 1.75rem/1.15 var(--display); }
.years p { margin-top: 0.4rem; font-size: 1rem; line-height: 1.5; text-wrap: pretty; }
/* a section's own line (International), one step above the text */
.sub { font-size: 1.3125rem; line-height: 1.45; max-width: 30em; }
/* the country shops: a short list in columns, each name its own link */
.shops {
  list-style: none;
  margin: 0.9em 0 0;
  padding: 0;
  columns: 3 8.5rem;
  column-gap: 2rem;
  max-width: 34rem;
}
.shops li { break-inside: avoid; padding-block: 0.1rem; }
.shore .shops + p { margin-top: 1.1em; }
:lang(fr) .defs dd { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 11 4 4; }

/* ── the no-WebGL sheet, drawn once in SVG (also without JavaScript) ──── */
.fallback { display: none; }
.no-gl .fallback { display: block; width: 100%; height: 100%; min-height: 60vh; }
/* without the live silicone (no WebGL, or the still hero of reduced motion),
   the empty pools below the hero would be blank screens */
.no-gl .band .pool, .reduced .band .pool { display: none; }
@media (scripting: none) {
  .fallback { display: block; width: 100%; height: 100%; min-height: 60vh; }
  .band .pool { display: none; }
}

/* ── footer ───────────────────────────────────────────────────────────── */
.foot { padding: 3rem var(--sr) calc(2rem + env(safe-area-inset-bottom, 0px)) var(--sl); }
/* set on .family itself: family.css reads these through fallbacks on .family.
   The footer lies on the page's own ground (the canvas, or --veil without it):
   a painted panel showed as a box over the living silicone, so none is painted */
.foot .family {
  --family-ink: var(--ink);
  --family-dim: var(--tide);
  --family-line: color-mix(in oklab, var(--ink) 16%, transparent);
  --family-ground: transparent;
  padding-block: 1rem 2.25rem;
}
.family-company { margin-top: 1.5rem; font-size: 0.8125rem; line-height: 1.45; color: var(--tide); }
.legal-line { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; font-size: 0.875rem; color: var(--tide); }
.legal-line a { color: var(--ink); display: inline-flex; align-items: center; min-height: 24px; }

/* ── the legal notice and the contact page ────────────────────────────── */
.doc main section { display: block; padding-right: var(--sr); }
.doc .intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.84fr); padding-top: calc(var(--top) + 44px); }
.doc .intro .pool { min-height: 34vh; }
.doc h1 { font-size: 3rem; line-height: 1.08; }
.doc .legal { box-sizing: content-box; max-width: 36rem; padding-bottom: 5rem; }
.doc .legal h2 { font: 600 1.3125rem/1.3 var(--text); letter-spacing: 0; margin-top: 3rem; scroll-margin-top: 2rem; }
.doc .legal h2 + p, .doc .legal h2 + dl { margin-top: 0.9rem; }
.doc .legal p + p { margin-top: 0.9em; }
.doc .legal .updated { margin-top: 3rem; color: var(--tide); }
.doc .legal dl { display: grid; grid-template-columns: 12em minmax(0, 1fr); gap: 0.35rem 1.5rem; }
.doc .legal dt { color: var(--tide); }
.doc .legal dd { font-variant-numeric: tabular-nums; }

/* the form: fields a shade lighter than the ground, the ink for their edges */
.write {
  display: grid !important;
  grid-template-columns: minmax(0, 36rem) minmax(0, 20rem);
  gap: 2rem clamp(3rem, 7vw, 7rem);
  align-items: start;
  padding-bottom: 5rem;
}
form.contact { position: relative; display: grid; gap: 1.25rem; }
form.contact p { display: grid; gap: 0.4rem; }
form.contact label { font-weight: 500; font-size: 1rem; }
form.contact input, form.contact textarea {
  font: inherit;
  font-size: 1.0625rem;
  color: var(--ink);
  background: var(--field);
  border: 1px solid color-mix(in oklab, var(--ink) 62%, transparent);   /* 3.5:1 on the ground (WCAG 1.4.11) */
  border-radius: 6px;
  padding: 0.7rem 0.85rem;
  min-height: 48px;
  width: 100%;
}
form.contact textarea { resize: vertical; min-height: 10rem; line-height: 1.5; }
form.contact :is(input, textarea):focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-color: var(--ink); }
form.contact .contact-trap { position: absolute; left: -100vw; }
form.contact .contact-note { display: block; font-size: 0.9375rem; line-height: 1.5; color: var(--tide); max-width: 34em; }
form.contact button {
  justify-self: start;
  font: 600 1rem/1 var(--text);
  letter-spacing: 0.02em;
  color: var(--veil);
  background: var(--ink);
  border: 0;
  border-radius: 999px;
  padding: 0 1.75rem;
  min-height: 48px;
  cursor: pointer;
}
form.contact button:hover { background: var(--silicone-ink); }
form.contact button:disabled { opacity: 0.6; cursor: progress; }
form.contact .contact-status { display: block; min-height: 1.6em; font-weight: 500; }
form.contact .contact-status:empty { min-height: 0; }
.elsewhere { display: grid; gap: 1rem; font-size: 1rem; line-height: 1.55; padding-top: 0.3rem; }
.elsewhere h2 { font: 600 1rem/1.4 var(--text); letter-spacing: 0; }

/* ── 404 ──────────────────────────────────────────────────────────────── */
.lost .hero h1 { font-size: 3.75rem; }
.lost .hero .shore p { margin-top: 1.25rem; }
.lost .hero .shore p + p { margin-top: 0.4rem; }

/* ── phone: text first, then a pool of thick silicone under the thumb ── */
@media (max-width: 899px) {
  /* gutters: 24 px, 20 px under 400 px wide, plus the safe area (BRIEF §0.10.4.e) */
  :root { --shore: 24px; }
  body { font-size: 1.0625rem; }
  h1 { font-size: clamp(2.625rem, 6vw, 3.5rem); line-height: 1.06; }
  h2 { font-size: clamp(2.125rem, 4.4vw, 2.625rem); }
  .lede { font-size: 1.25rem; margin-top: 1.4rem; }
  .top { column-gap: 1rem; }
  .top .links { gap: 0.75rem; }
  main section { display: block; padding-left: var(--sl); padding-right: var(--sr); }
  .pool { min-height: 0; height: 38vh; height: 38svh; margin-left: calc(-1 * var(--sl)); margin-right: calc(-1 * var(--sr)); }
  .hero { display: flex; flex-direction: column; align-items: stretch; }
  .hero .shore { padding-block: calc(var(--top) + 28px) 0; }
  .customer { order: 1; align-self: flex-start; margin-block: 28px 0; font-size: 1rem; }
  .hero .pool { order: 2; flex: 1 1 auto; min-height: 34svh; height: auto; }
  .band .shore { padding-block: 64px 28px; }
  .prose .pool, .contact .pool { min-height: 0; height: 30vh; height: 30svh; }
  .stage { display: grid; padding-bottom: 40px; }
  .stage .shore { padding-block: 64px 1rem; }
  .stage .pool { min-height: 0; height: 46vh; height: 46svh; }
  .wide .side { padding-block: 0.5rem 36px; }
  .sub { font-size: 1.1875rem; }
  .doc .intro { display: block; padding-top: calc(var(--top) + 28px); }
  .doc .intro .pool { display: none; }
  .doc h1 { font-size: 2.125rem; }
  .doc .legal dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .doc .legal dd + dt { margin-top: 0.6rem; }
  .write { grid-template-columns: minmax(0, 1fr); padding-top: 2rem; }
  form.contact .contact-note { font-size: 1rem; }
  .lost .hero h1 { font-size: 2.375rem; }
}
@media (max-width: 399px) { :root { --shore: 20px; } }

/* ── reduced motion: one composed still of the hero ───────────────────── */
.reduced #membrane {
  position: absolute;
  height: 100svh;
  transition: none;
  -webkit-mask-image: linear-gradient(white 72%, transparent);
  mask-image: linear-gradient(white 72%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .lang.offer { animation: none; }
  #membrane { transition: none; }
}

/* ── page to page: a short cross-fade ─────────────────────────────────── */
@view-transition { navigation: auto; }
::view-transition-group(root) { animation-duration: 0.22s; }
.top { view-transition-name: top; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ── more contrast: the quiet text goes full ink, the silicone recedes ── */
@media (prefers-contrast: more) {
  :root { --tide: var(--ink); --silicone-ink: var(--ink); }
  #membrane { opacity: 0.45; }
  .gl-on #membrane { opacity: 0.45; }
  a { text-decoration-color: currentColor; }
  form.contact input, form.contact textarea { border-color: var(--ink); }
}

/* ── forced colours: system colours only, no silicone behind the words ── */
@media (forced-colors: active) {
  #membrane, .fallback, .pool { display: none !important; }
  body, :root { background: Canvas; color: CanvasText; }
  a { color: LinkText; }
  :focus-visible { outline: 2px solid Highlight; }
  .legal-line, .family-company, .contact-note { color: CanvasText; }
  .pause { display: none; }
  form.contact input, form.contact textarea { border: 1px solid CanvasText; background: Field; color: FieldText; }
  form.contact button { background: ButtonFace; color: ButtonText; border: 1px solid ButtonText; }
}

/* ── print (the legal notice above all): black on white, the addresses spelled out ── */
@media print {
  :root, body { background: #fff; color: #000; }
  :root { --ink: #000; --tide: #000; --silicone-ink: #000; }
  #membrane, .pool, .skip, .lang, .to-contact, .pause, .family, form.contact { display: none !important; }
  .top, main section, .hero, .doc .intro { position: static; display: block; padding: 0; min-height: 0; }
  .mark { font-size: 18pt; min-height: 0; margin-bottom: 8mm; }
  .band .shore, .hero .shore, .stage .shore, .wide .side { display: block; padding-block: 0 1.5rem; }
  .defs > div, .years > li { break-inside: avoid; }
  h1 { font-size: 26pt; } h2 { font-size: 16pt; } body { font-size: 10.5pt; }
  a { color: #000; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.9em; word-break: break-all; }
  .doc .legal dl > * { break-inside: avoid; }
  .doc .legal h2 { break-after: avoid; }
  .foot { padding: 1rem 0 0; }
}