/* ============================================================
   MILOVISION - subpages (Aug 6)
   Loaded AFTER main.css (tokens, fonts, nav, footer live there).
   Two page families, both straight from the Brand System Manual:

   GREEN pages (.page--green): coming-soon + contact - the same
   Deep Perception world as the landing film. Section anatomy per
   manual: Badger Valley numeral in ember · tracked ember kicker ·
   giant No.84 headline · quiet No.61 editorial with ONE ember
   sentence ("clarity comes from restraint").

   PAPER pages (.page--paper): legal documents - Off-White base
   like the manual's own document spreads, Deep Perception type.
   ============================================================ */

/* ---------- page frame ---------- */
.page {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
.page--green { background: var(--green); color: var(--paper); }
.page--paper { background: var(--paper); color: var(--green); }

/* subpages have no boot choreography - nav is simply there */
.page .nav__logo,
.page .nav__lens { opacity: 1; transform: none; }
.page .nav__lens { pointer-events: auto; }
/* paper pages: same marks, ink color (hover stays ember via main.css) */
.page--paper .nav__lens { color: var(--green); }
.page--paper .nav__logo { color: var(--green); }
.page--paper .nav__links a { color: rgba(26, 67, 58, 0.62); }
.page--paper .nav__links a:hover,
.page--paper .nav__links a.is-active { color: var(--green); }
.page--paper .nav__links a.is-active { color: var(--orange); }

/* no grain on subpages (Tuan, Aug 6): the emulsion belongs to the
   landing film only - flat surfaces stay clean */

/* ---------- editorial section (manual anatomy) ---------- */
.sheet {
  position: relative;
  z-index: 5;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--nav-h) + var(--nav-top) + 4vh) var(--edge) calc(44px + 6vh);
}

/* (Badger numerals removed everywhere, Tuan Aug 6 - the kicker+title
   lockup opens each page now) */

.sheet__kicker {
  font-family: var(--font-light);
  font-size: clamp(12px, 0.92vw, 15px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange);
  /* sits right on the giant title - kicker + headline read as ONE
     lockup (Tuan, Aug 6); the title's own top bearing adds the rest */
  margin-bottom: 0.5vh;
}

.sheet__title {
  font-family: var(--font-wide);
  font-size: clamp(52px, 7.4vw, 132px);
  line-height: 0.92;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--paper);
  margin-bottom: 4.5vh;
}
.page--paper .sheet__title {
  color: var(--green);
  /* optical alignment: No.84's glyph box carries ~0.054em left side
     bearing - at 112px that is 6px of visible indent against the
     body's ink edge, and L/D's straight stems on paper expose it
     (measured by pixel-scanning the rendered ink, Aug 6) */
  margin-left: -0.054em;
}

.sheet__body {
  max-width: 44ch;
  font-family: var(--font-light);
  font-size: clamp(15px, 1.12vw, 19px);
  line-height: 1.55;
  letter-spacing: 0.005em;
  color: var(--paper-soft);
}
.sheet__body p + p { margin-top: 1.1em; }
.sheet__body .ember { color: var(--orange); }
/* coming-soon pages: the editorial keeps ONE tone (paper-soft) - the
   closing line is its own paragraph, that pause is the emphasis; the
   badger "coming soon" is the only color accent in the block. Both a
   second orange AND a second white fought the hierarchy (Tuan). */

/* ---------- optical alignment (Aug 7, ink-scanned at 393w) ----------
   every face carries different left side bearing; stacked at a 24px
   edge the deltas show. Vertical-stem first glyphs get pulled ONTO
   the ink line of the nav logo's M (= exactly 24.0px); round first
   glyphs OVERHANG slightly so they READ flush (classic hanging
   punctuation logic). V/A/C display titles stay per Tuan. */
.sheet__kicker--stem { margin-left: -0.083em; } /* U, M, T starts: -1px @12px */
.sheet__kicker--round { margin-left: -0.1em; }  /* G start: onto + past the line */
.sheet__title--stem { margin-left: -0.023em; }  /* TEAM's T: -1px @43px */

/* ---------- coming soon (countdown removed Aug 7 - "kein interner
   Druck") - tracked subtitle ABOVE the badger display line (like
   kicker over title). Badger Valley stays per Tuan (Aug 7, after a
   brief No.61 experiment): the ONE Badger accent per layout (manual
   2.6.2: lowercase, ember) IS the coming-soon event. */
.count__note {
  margin-left: -0.09em; /* L stem: 1px bearing @11px */
  margin-top: 9vh;
  font-family: var(--font-light);
  font-size: clamp(11px, 0.82vw, 13px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-dim);
}
.count__soon {
  margin-top: 1.1vh;
  font-family: "Badger Valley", serif;
  font-size: clamp(34px, 3.2vw, 56px);
  line-height: 1;
  color: var(--orange);
}
/* one-time staggered ENTRANCE (Tuan: "besonderer") - the subtitle
   rises first, the badger line follows a breath later, timed to the
   veil's lift; motion with purpose, once, then stillness */
@keyframes soonRise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.count__note { animation: soonRise 0.7s var(--ease-out) 0.35s both; }
.count__soon { animation: soonRise 0.7s var(--ease-out) 0.55s both; }
@media (prefers-reduced-motion: reduce) {
  .count__note, .count__soon { animation: none; }
}

/* ---------- contact layout ---------- */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(48px, 6vw, 128px);
  align-items: start;
}
/* the giant scales to its own column here, never into the form */
.contact .sheet__title { font-size: clamp(44px, 4.9vw, 88px); }
.contact__info { margin-top: 5.5vh; }
.contact__meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: clamp(20px, 2vw, 40px);
  row-gap: 1.35em;
  font-family: var(--font-light);
  font-size: clamp(13px, 0.98vw, 16px);
  line-height: 1.5;
  color: var(--paper-soft);
}
.contact__meta dt {
  font-size: clamp(10px, 0.72vw, 12px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper-dim);
  padding-top: 0.28em;
}
.contact__meta a { border-bottom: 1px solid rgba(240, 234, 226, 0.25); transition: border-color 0.3s var(--ease-out), color 0.3s var(--ease-out); }
.contact__meta a:hover { color: var(--paper); border-color: var(--orange); }

/* ---------- the form ---------- */
.form { padding-top: calc(clamp(28px, 2.6vw, 46px) + 3.8vh); }
.form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(24px, 2.4vw, 48px);
}
.field { position: relative; margin-bottom: 4.6vh; }
.field--full { grid-column: 1 / -1; }

.field__label {
  display: block;
  font-family: var(--font-light);
  font-size: clamp(10px, 0.72vw, 12px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper-dim);
  margin-bottom: 1.1vh;
  transition: color 0.3s var(--ease-out);
}
.field:focus-within .field__label { color: var(--orange); }

.field__input {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(240, 234, 226, 0.22);
  border-radius: 0;
  padding: 0.45em 0 0.7em;
  font-family: var(--font-light);
  font-size: clamp(16px, 1.2vw, 20px);
  line-height: 1.4;
  color: var(--paper);
  caret-color: var(--orange);
  outline: none;
  transition: border-color 0.3s var(--ease-out);
  -webkit-appearance: none;
  appearance: none;
}
.field__input::placeholder { color: rgba(240, 234, 226, 0.28); }
.field__input:focus { border-color: var(--orange); }
.field__input:-webkit-autofill {
  -webkit-text-fill-color: var(--paper);
  -webkit-box-shadow: 0 0 0 1000px var(--green) inset;
  transition: background-color 9999s;
}

/* topic dropdown: a native <select> pops the OPERATING SYSTEM's
   menu (unstylable) - this listbox keeps the open state in the
   brand world: deep-ink panel, hairline, ember selection */
.dropdown { position: relative; }
.dropdown__trigger {
  cursor: pointer;
  text-align: left;
  padding-right: 26px;
}
.dropdown__trigger::after {
  content: "";
  position: absolute;
  right: 2px;
  top: 0.85em;
  width: 12px;
  height: 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23fa5f14' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.3s var(--ease-out);
}
.dropdown.is-open .dropdown__trigger::after { transform: rotate(180deg); }
.dropdown.is-open .dropdown__trigger { border-color: var(--orange); }
.dropdown__panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--green-ink); /* the darker surface alone separates
     the panel - the hairline border read as clutter (Tuan, Aug 7) */
  padding: 6px 0;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
  outline: none;
}
.dropdown.is-open .dropdown__panel {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.dropdown__option {
  padding: 0.6em 1.1em;
  font-family: var(--font-light);
  font-size: clamp(14px, 1.05vw, 17px);
  color: var(--paper-soft);
  cursor: pointer;
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.dropdown__option.is-active { background: rgba(240, 234, 226, 0.07); color: var(--paper); }
.dropdown__option.is-selected { color: var(--orange); }

textarea.field__input {
  resize: none;
  overflow: hidden;
  min-height: 2.2em;
}

.field__error {
  position: absolute;
  left: 0;
  bottom: -1.7em;
  font-family: var(--font-light);
  font-size: clamp(11px, 0.8vw, 13px);
  letter-spacing: 0.05em;
  color: var(--orange);
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
  pointer-events: none;
}
.field.is-invalid .field__error { opacity: 1; transform: translateY(0); }
.field.is-invalid .field__input { border-color: var(--orange); }

/* honeypot - invisible to humans, tempting to bots */
.field--hp {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.form__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 1.5vh;
}
.form__consent {
  font-family: var(--font-light);
  font-size: clamp(11px, 0.8vw, 13px);
  line-height: 1.5;
  color: var(--paper-dim);
  max-width: 34ch;
}
.form__consent a { color: var(--paper-soft); border-bottom: 1px solid rgba(240, 234, 226, 0.25); transition: color 0.3s var(--ease-out), border-color 0.3s var(--ease-out); }
.form__consent a:hover { color: var(--paper); border-color: var(--orange); }

/* compact filled pill (Tuan, Aug 6): ember fill, white copy in the
   same LIGHT weight as the inputs ("General inquiry") - the small
   size keeps it quiet, the weight keeps it in the form's voice */
.button {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(140px, 11vw, 180px);
  padding: 0.85em 1.9em;
  background: var(--orange);
  border: 1px solid var(--orange);
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-light);
  font-size: clamp(12px, 0.86vw, 14px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ffffff; /* manual: white as contrast on saturated fields */
  transition: background 0.35s var(--ease-out), color 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
}
.button:hover,
.button:focus-visible {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--green);
}
.button:disabled { opacity: 0.55; cursor: default; }

/* success state - replaces the form with a MIRRORED TWIN of the left
   column: same kicker voice, same title scale, same margins, so the
   two giants (CONTACT / THANK YOU.) share one optical baseline and
   the spread stays composed (Tuan: "ausbalanciert, wohl ueberlegt") */
.form__done { display: none; }
.form.is-done { padding-top: 0; } /* twin starts on the left column's grid line */
.form.is-done .form__done { display: block; }
.form.is-done .form__grid,
.form.is-done .form__foot { display: none; }
.sheet__title .ember { color: var(--orange); }

/* ---------- legal documents (paper family) ---------- */
.doc { max-width: 76ch; }
.doc .sheet__body { max-width: none; color: rgba(26, 67, 58, 0.82); }
.doc h2 {
  font-family: var(--font-demi);
  font-size: clamp(15px, 1.05vw, 18px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
  margin: 2.6em 0 0.7em;
}
.doc p { margin-top: 0.7em; }
.doc ul { margin: 0.7em 0 0 1.1em; list-style: disc; }
.doc li { margin-top: 0.3em; }
.doc a { color: var(--orange); }
.doc .doc__lede { font-size: clamp(16px, 1.2vw, 20px); color: var(--green); }

/* legal pages scroll - the sheet tops out instead of centering */
.page--paper .sheet { justify-content: flex-start; padding-top: calc(var(--nav-h) + var(--nav-top) + 7vh); }
.page--paper .footer__row { border-top-color: rgba(26, 67, 58, 0.18); }
.page--paper .footer__copy,
.page--paper .footer__links a { color: rgba(26, 67, 58, 0.55); }
.page--paper .footer__links a:hover { color: var(--green); }
/* legal pages: footer scrolls with the document instead of floating */
.page--paper .footer { position: static; margin-top: 8vh; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .contact { grid-template-columns: 1fr; gap: 7vh; }
  .form { padding-top: 0; }
}
@media (max-width: 720px) {
  .form__grid { grid-template-columns: 1fr; }
  .form__foot { flex-direction: column; align-items: flex-start; gap: 3.5vh; }
  .count { gap: 9vw; }
}


/* ---------- mobile ---------- */
@media (max-width: 900px) {
  /* titles: the 52px desktop minimum overflows a 390px screen */
  .sheet__title { font-size: clamp(32px, 11vw, 52px); }
  .contact .sheet__title { font-size: clamp(32px, 11vw, 52px); }
  /* subpages scroll on phones - a FIXED footer bar would ride over
     the form/content, so it joins the document flow down here */
  .page .footer { position: static; margin-top: 8vh; }
}

/* ============================================================
   IMAGE PLATES (Aug 7) - ventures + about carry one Brand Image
   Series still below the editorial: display two-liner in the
   landing voice, grid-flush picture (16:9 on desktop, square cut
   on phones via <picture>), about adds the habitat text. The
   page--plate body class flips the page from one centered
   viewport into a scrolling editorial sheet.
   REVERT: restore 05_SITE/_backups/2026-08-07-pre-plates/ (or:
   remove page--plate + the plate <section>s from the two pages,
   delete this block + the reveal snippet in pages.js).
   ============================================================ */
.page--plate .sheet {
  justify-content: flex-start;
  padding-top: calc(var(--nav-h) + var(--nav-top) + 7vh);
}
/* the page scrolls now - the footer joins the flow like on paper */
.page--plate .footer { position: static; margin-top: 10vh; }

.plate-block { margin-top: 13vh; }
/* when the plate opens the page directly under the title (about,
   since the habitat text replaced the old editorial) it moves in */
.sheet__title + .plate-block { margin-top: 7vh; }
.plate-head {
  font-family: var(--font-wide);
  font-size: clamp(30px, 3.4vw, 60px);
  line-height: 1.02;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--paper);
}
.plate-head .ember { color: var(--orange); }
.plate { margin: 4.5vh 0 0; }
/* order-aware spacing: on about the IMAGE leads the block (a display
   headline must never sit directly on the page title - Tuan, Aug 7)
   and the headline + habitat text follow as one unit */
.plate-block > .plate:first-child { margin-top: 0; }
/* proximity = grouping: the headline RESOLVES the image, so it hangs
   close - the big pause belongs BEFORE the plate (section break),
   never inside the image+headline+text unit (Tuan, Aug 7) */
.plate + .plate-head { margin-top: 3.5vh; }
.plate-head + .plate-body { margin-top: 3.5vh; }
.plate img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 2200 / 1238;
  object-fit: cover;
  background: rgba(240, 234, 226, 0.05); /* quiet slab while lazy-loading */
}
/* AI transparency caption - same voice as the landing note */
.plate-note {
  margin: 10px 0 0;
  font-family: var(--font-light);
  font-size: clamp(9px, 0.6vw, 11px);
  letter-spacing: 0.04em;
  line-height: 1.5;
  color: rgba(240, 234, 226, 0.4);
}
.plate-body { margin-top: 6vh; }
/* the plate pushes the count block down - give it back its air */
.page--plate .count__note { margin-top: 12vh; }

/* scroll reveal (gated on .has-js so a scriptless load stays visible) */
.has-js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.has-js .plate.reveal { transition-delay: 0.08s; }
.has-js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .has-js .reveal { transition: none; transform: none; opacity: 1; }
}

@media (max-width: 900px) {
  .plate-block { margin-top: 9vh; }
  .plate-head { font-size: clamp(25px, 7.4vw, 40px); line-height: 1.05; }
  .plate { margin-top: 3.5vh; }
  .plate img { aspect-ratio: 1 / 1; }
  .plate-body { margin-top: 5vh; }
  .plate + .plate-head { margin-top: 2.2vh; }
  .plate-head + .plate-body { margin-top: 2.6vh; }
  /* phones: the title-to-image pause tightens too (Tuan) - the
     desktop value reads composed, on 390px it read as a hole */
  .sheet__title + .plate-block { margin-top: 3.5vh; }
  .page--plate .count__note { margin-top: 10vh; }
}