/* JS Artisan Beauté — page layout and type.
   Colours, fonts and the per-section sky come from tokens.css.
   The sun, horizon line, wave and day meter are drawn by sky.css / sky.js. */

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --header-h: 3.5rem;
  --word-h: clamp(1.45rem, 6.3vw, 2.25rem);          /* letter height of the drawn section words */
  --section-pad: clamp(6rem, 16vh, 12rem);
  --band: 22vh;                                      /* height of the colour hand-over between sections */
  --body-size: clamp(1.15rem, 1.1rem + 0.5vw, 1.5rem);
  --lab-size: 0.8125rem;                             /* 13px; nothing in the lab font goes below 0.75rem */
}

html {
  background: var(--manzanita);
  scroll-padding-top: var(--header-h);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--manzanita);
  color: var(--fog);
  font-family: var(--font-text);
  font-size: var(--body-size);
  font-weight: 400;
  line-height: 1.5;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, dl, dd, ol { margin: 0; }
ol { padding: 0; list-style: none; }
svg { display: block; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* the lab voice: labels, numbers, tables, navigation, references */
.lab {
  font-family: var(--font-lab);
  font-size: var(--lab-size);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.08em;
}

/* a fact the client has not supplied yet */
.placeholder {
  font-family: var(--font-lab);
  font-size: 0.74em;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.02em;
  text-transform: none;
  text-decoration: underline dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}
.lab .placeholder { font-size: 1em; letter-spacing: 0.04em; }

/* text for search engines, AI readers and screen readers; the drawn letters beside it carry the look */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.skip-link {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 100;
  padding: 0.7rem 1rem;
  background: var(--fog);
  color: var(--manzanita);
  font-family: var(--font-lab);
  font-size: var(--lab-size);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transform: translateY(-300%);
}
.skip-link:focus { transform: none; }

/* ---------- header ----------
   A solid oxblood bar: it vanishes into the night sections and stays
   legible over fog and reagent without blend modes. It sets the sky
   variables itself so the day meter can read --sun / --ink / --rule. */

.site-header {
  --paper: var(--manzanita);
  --ink: var(--fog);
  --sun: var(--reagent);
  --rule: rgba(236, 233, 227, .28);

  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.25rem);
  padding-inline: var(--gutter);
  background: var(--paper);
  color: var(--ink);
  border-bottom: var(--hair) solid var(--rule);
}

.site-header__mark {
  display: flex;
  align-items: center;
  flex: none;
  min-height: 44px;
  margin-right: auto;
  padding-block: 0.5rem;
}
.site-header__wordmark {
  width: clamp(8rem, 14vw, 11rem);
  height: auto;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.25rem);
}
.site-nav__link {
  display: none;
  padding-block: 0.8125rem;                          /* 18px line + 26px = a 44px hit area */
  font-family: var(--font-lab);
  font-size: 0.75rem;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.site-nav__link--keep { display: block; }
.site-nav__link:hover { text-decoration: underline; text-underline-offset: 0.45em; text-decoration-thickness: 1px; }

@media (min-width: 44rem) {
  .site-nav__link { display: block; }
}

.daymeter {
  flex: none;
  position: relative;
  width: 64px;
  height: 32px;
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  min-height: 190vh;
  background: var(--paper);
  color: var(--ink);
}

.hero__stage {
  position: sticky;
  top: 0;
  min-height: 100vh;
  min-height: 100svh;                                /* grows if the text needs more room */
  overflow: hidden;
}

/* the sky stays one viewport tall, so the horizon holds at --horizon of the screen even if the stage grows */
.horizon {
  position: absolute;
  inset: 0;
  height: 100vh;
  height: 100svh;
  z-index: 0;
}

/* everything readable sits below the horizon line; the sky above stays empty.
   Rows: the sky reserved for the sun, the text, free space, the foot.
   --sky-h * 0.44 is --horizon (tokens.css) as a length: a percentage row would not
   count towards the height of a stage that is allowed to grow. */
.hero__body {
  --sky-h: 100vh;
  --sky-gap: 9vh;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: calc(var(--sky-h) * 0.44 + var(--sky-gap)) auto 1fr auto;
  min-height: 100vh;
  min-height: 100svh;
}
@supports (height: 100svh) {
  .hero__body { --sky-h: 100svh; }
}

.hero__text {
  grid-row: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-inline: var(--gutter);
  text-align: center;
}

.hero__title { width: min(84vw, 62rem); }
.hero__wordmark { width: 100%; height: auto; }

.hero__status {
  margin-top: clamp(0.9rem, 3vh, 2rem);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.hero__line {
  max-width: 22em;
  margin-top: clamp(0.7rem, 2.4vh, 1.6rem);
  font-size: clamp(1.15rem, 1rem + 0.9vw, 1.75rem);
  font-weight: 300;
  line-height: 1.35;
  text-wrap: balance;
}
@media (min-width: 44rem) {
  .hero__line { max-width: none; }
  .hero__line span { display: block; }
}

.hero__foot {
  grid-row: 4;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 0.9rem;
  align-items: end;
  padding: 1.5rem var(--gutter) clamp(1rem, 3.5vh, 2.25rem);
}

.ref {
  width: 11.5rem;
  font-size: 0.75rem;
  text-transform: uppercase;
}
.ref__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.28rem;
  border-top: var(--hair) solid var(--rule);
}
.ref__row:last-child { border-bottom: var(--hair) solid var(--rule); }

.hero__hint {
  font-size: 0.75rem;
  text-transform: uppercase;
  text-align: center;
}

@media (min-width: 44rem) {
  .hero__foot { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .ref { width: 13rem; }
  .hero__hint { grid-column: 2; }
}

/* short viewports: drop the reference block first, then tighten, then drop the hint.
   In em, so a larger reader font size counts as a shorter viewport. */
@media (max-height: 46em) {
  .ref { display: none; }
}
@media (max-height: 38em) {
  .hero__status { margin-top: 0.6rem; }
  .hero__line { margin-top: 0.4rem; font-size: 1.05rem; }
}
@media (max-height: 38em) and (max-width: 43.99em) {
  .hero__hint { display: none; }
}
@media (max-height: 26em) {
  .hero__hint { display: none; }
  .hero__body { --sky-gap: 5vh; }
}

/* no scroll-driven sunrise: the hero is one screen, and nothing asks for a scroll */
@media (prefers-reduced-motion: reduce) {
  .hero { min-height: 100vh; min-height: 100svh; }
  .hero__hint { display: none; }
}
@media (scripting: none) {
  .hero { min-height: 100vh; min-height: 100svh; }
  .hero__hint { display: none; }
}

/* ---------- sections ---------- */

.section {
  position: relative;
  padding: var(--section-pad) var(--gutter);
  background: var(--paper);
  color: var(--ink);
}

/* the one permitted gradient: the previous section's paper fades into this one */
.section--after-night { --prev-paper: var(--manzanita); }
.section--after-fog   { --prev-paper: var(--fog); }

.section--after-night::before,
.section--after-fog::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--band);
  background: linear-gradient(to bottom, var(--prev-paper), var(--paper));
  pointer-events: none;
}

/* where ink would not read on the incoming colour, start the content below the band */
.section--after-night {
  padding-top: calc(var(--band) + var(--section-pad) * 0.5);
}

/* reagent into night is a clean edge, not a gradient (yellow-green into oxblood turns muddy olive):
   a short band of the section's own paper, then the content */
.section--after-reagent::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: calc(var(--band) * 0.35);
  background: var(--paper);
  pointer-events: none;
}
.section--after-reagent {
  padding-top: calc(var(--band) * 0.35 + var(--section-pad) * 0.5);
}

/* two fog sections in a row: one hairline between them instead of a band */
.section--wide-title { padding-top: 0; }
.section--wide-title .section__inner {
  padding-top: var(--section-pad);
  border-top: var(--hair) solid var(--rule);
}

.section__inner {
  position: relative;
  max-width: 88rem;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: clamp(2.5rem, 7vh, 4.5rem);
}

.section__head { min-width: 0; }
.section__body { min-width: 0; }

/* drawn words: one shared letter height, width follows each word's own proportions */
.word {
  width: min(100%, calc(var(--word-h) * var(--ar)));
  height: auto;
}
.word--racines  { --ar: 5.682; }   /* 590.9 / 104 */
.word--science  { --ar: 13.604; }  /* 1414.8 / 104 */
.word--alliance { --ar: 6.543; }   /* 680.5 / 104 */
.word--contact  { --ar: 6.063; }   /* 630.6 / 104 */

.section__sub {
  margin-top: 1.4rem;
  text-transform: uppercase;
}

.section__body > * { max-width: var(--measure); }
.section__body > * + * { margin-top: 1.4em; }

.lead {
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.3rem);
  font-weight: 300;
  line-height: 1.22;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.section__body > .lead + * { margin-top: clamp(1.5rem, 4vh, 2.5rem); }

@media (min-width: 50rem) {
  :root { --word-h: clamp(2.25rem, 4.4vw, 4rem); }

  .section__inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(2rem, 6vw, 6rem);
    align-items: start;
  }

  /* the long word runs across both columns; its subtitle stays in the left one */
  .section--wide-title .section__head { display: contents; }
  .section--wide-title .section__title { grid-column: 1 / -1; }
  .section--wide-title .section__sub { grid-column: 1; margin-top: 0.35rem; }
  .section--wide-title .section__body { grid-column: 2; }
}

/* ---------- facts tables ---------- */

.facts {
  width: 100%;
  max-width: var(--measure);
}
.section__body > .facts { margin-top: clamp(2.5rem, 6vh, 3.75rem); }
.section__body > .facts:first-child { margin-top: 0; }

.facts__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding-block: 0.8rem;
  border-top: var(--hair) solid var(--rule);
}
.facts__row:last-child { border-bottom: var(--hair) solid var(--rule); }

.facts dt {
  flex: 0 1 auto;
  max-width: 45%;
  text-transform: uppercase;
}
.facts dd {
  flex: 1 1 0;
  min-width: 0;
  text-align: right;
  letter-spacing: 0.03em;
  overflow-wrap: anywhere;
}

/* ---------- principles ---------- */

.principles { max-width: var(--measure); }

.principle {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  column-gap: 1rem;
  padding-block: clamp(1.4rem, 3.5vh, 2rem);
  border-top: var(--hair) solid var(--rule);
}
.principle:last-child { border-bottom: var(--hair) solid var(--rule); }

.principle__no {
  /* sit the mono number on the heading's first baseline */
  padding-top: 0.55em;
  letter-spacing: 0.08em;
}
.principle__head {
  font-family: var(--font-text);
  font-size: 1.12em;
  font-weight: 500;
  line-height: 1.25;
}
.principle__text p { margin-top: 0.4em; }

.note { text-transform: none; letter-spacing: 0.04em; }
.section__body > .note { margin-top: 2rem; }

/* ---------- button ---------- */

.section__body > .actions { margin-top: clamp(2.5rem, 6vh, 3.5rem); }

.button {
  display: inline-block;
  padding: 1.05rem 1.9rem;
  border: var(--hair) solid var(--manzanita);
  border-radius: 0;
  background: var(--manzanita);
  color: var(--fog);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
}
.button:hover { background: transparent; color: var(--manzanita); }
.button:focus-visible { outline-color: var(--manzanita); }

@media (prefers-reduced-motion: no-preference) {
  .button { transition: background-color 160ms ease-out, color 160ms ease-out; }
}

/* ---------- contact and footer ---------- */

.section--last { padding-bottom: 0; }

.contact__monogram { margin-top: clamp(3.5rem, 10vh, 6rem); }
.monogram {
  width: clamp(6rem, 12vw, 8.5rem);
  height: auto;
}
.monogram .sun { fill: var(--sun); }

.site-footer {
  position: relative;
  max-width: 88rem;
  margin: var(--section-pad) auto 0;
  padding-block: 1.5rem 2rem;
  border-top: var(--hair) solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.4rem 2rem;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
}

/* a link inside a facts row: same ink, underlined so it reads as a link */
.facts__link { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; text-transform: none; letter-spacing: 0.02em; overflow-wrap: anywhere; }
.facts__link:hover { text-decoration-thickness: 2px; }

/* the guide for a first message sits close under the button */
.section__body > .actions + .note { margin-top: 1.25rem; max-width: 28rem; line-height: 1.6; }

/* ---------- print ---------- */

@media print {
  .site-header, .hero__hint { display: none; }
  .hero { min-height: 0; }
  .hero__stage { position: static; min-height: 0; height: 60vh; }
  .horizon { height: 100%; }
  .hero__body { --sky-h: 60vh; min-height: 0; }
}