/* ============================================================
   AMARIMA — DIVISION PAGES (labs / experiences / forms / sounds)

   Derived from the designed v5 system (versions/v5-division-pages/
   css/division.css): one family, four "hours". Each page sets its
   own palette on <body> (--sky-1/2/3, --surface, --ink, --ink-soft,
   --line, --grain-*); this file consumes those tokens, so structure,
   grain and motion are identical and only temperature changes.

     Labs         the homepage's NIGHT — sky shader + fireflies
                  (js/night-sky.js, body.night), since 2026-09-10
     Experiences  dawn    (light)
     Forms        dusk    (dark, body.dp-dark)
     Sounds       night   (dark, body.dp-dark)

   Page anatomy — copy from docs/Website pages.md (2026-09-10):
     hero      division name + descriptor
     projects  the same ticker as the homepage (css/ticker.css), inked
               for this page, with this division's projects
     services  "Choose your own adventure", dot-marked list
     voices    three client quotes
     cta       "Bring us in" + team@amarima.com

   The pages are GENERATED by docs/make-division-pages.py.

   Type: ONE family — the homepage's Helvetica Neue stack (main.css
   --sans), set light the way the homepage's "We're the way you
   differentiate…" line is (.sec-divisions .div-phrase: 300, -0.01em).
   The v5 Fraunces / Space Grotesk pairing was retired on 2026-09-10 at
   the owner's request; the two tokens below are kept so every rule
   still names its ROLE, and point at the one family.

   Hidden-until-revealed states are gated on html.js, set by a
   one-line inline script in each page's <head>. With JavaScript off
   every word is visible.
   ============================================================ */

:root{
  --font-display: var(--sans);
  --font-struct:  var(--sans);

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-reveal: 720ms;
  --dur-ui:     220ms;
  --stagger:     70ms;
}

/* ---------- base / theme ---------- */
body.division{
  background: var(--surface);
  color: var(--ink);
  font-family: var(--sans);
}
body.division main{ position: relative; z-index: 1; display: block; }
body.division p{ text-wrap: pretty; }

/* Each division paints its own hour, so the shared inner-page mint band
   (main.css body:not(.home)::before) is switched off — it would bleed
   through the transparent sections. */
body.division::before,
body.division::after{ display: none !important; }

.dp-wrap{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: clamp(22px, 6vw, 96px);
  box-sizing: border-box;
}
.dp-section{ padding-block: clamp(64px, 11vh, 132px); }

/* ---------- grain: one recipe, over the large colour fields ---------- */
.grain{ position: relative; isolation: isolate; }
.grain::after{
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: var(--grain-opacity, 0.06);
  mix-blend-mode: var(--grain-blend, soft-light);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ---------- type roles ---------- */
.dp-eyebrow{
  font-family: var(--font-struct);
  font-size: var(--type-caption, 11px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--ls-caption, 0.22em);
  text-transform: uppercase;
  color: var(--ink-soft);
}
.display{
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 0.92;
  color: var(--ink);
}

/* ---------- hero: the division name, set large ---------- */
.dp-hero{
  position: relative;
  min-height: min(78vh, 760px);
  display: flex;
  align-items: flex-end;
  background: linear-gradient(178deg,
              var(--sky-1) 0%, var(--sky-2) 54%, var(--sky-3) 100%);
  padding-block: clamp(8rem, 18vh, 13rem) clamp(3rem, 7vh, 6rem);
  overflow: clip;
}
.dp-hero .dp-wrap{ position: relative; z-index: 3; }
.dp-h1{
  font-size: clamp(64px, 12.5vw, 176px);
  margin: 0;
}
/* Same register as the homepage division rows (tracked caps + mid-dots). */
.dp-descriptor{
  margin-top: clamp(20px, 3.4vh, 34px);
  font-family: var(--font-struct);
  font-size: clamp(12px, 1.05vw, 14px);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------- projects: the homepage ticker, inked for this page ---------- */
.dp-projects .dp-eyebrow{ margin-bottom: clamp(22px, 3.6vh, 38px); }
/* Without its label the section is only the ticker; the full section
   padding around five thin lines would read as a hole in the page. */
.dp-projects--bare{ padding-block: clamp(40px, 7vh, 88px); }
.division .proj-ticker{
  --proj-ink: var(--ink);
  --proj-sep: var(--ink-soft);
}

/* ---------- the two-column split: heading left, content right ----------
   Used by the services section, and by "Bring us in" where a page asks for
   it (Labs), so the CTA's links start exactly where the services text does. */
.dp-split{
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 5vw, 88px);
  align-items: start;
}

/* ---------- services: "Choose your own adventure" ---------- */
.dp-h2{
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(34px, 4.4vw, 60px);
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.dp-services-head{ position: sticky; top: 7rem; }
.dp-list{
  list-style: none;
  margin: 0;
  padding: 0;
}
/* A dot marks each service (the homepage's old menu marker). It is placed
   against the FIRST line — padding + half a line — so a two-line service
   keeps its dot at the top, not floating at the middle. */
.dp-list li{
  --row-pad: clamp(14px, 1.8vw, 22px);
  position: relative;
  padding: var(--row-pad) 0 var(--row-pad) 1.5em;
  font-family: var(--font-struct);
  font-weight: 400;
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.3;
  color: var(--ink);
}
.dp-list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--row-pad) + 0.65em - 3px);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-soft);
}
/* Labs: no marker at all — the owner wants to compare it against the dot. */
.dp-list--bare li{ padding-left: 0; }
.dp-list--bare li::before{ content: none; }
/* Labs, the evidence division, is the one that gets hairline rules. */
.dp-list--ruled li{ border-top: 1px solid var(--line); }
.dp-list--ruled li:last-child{ border-bottom: 1px solid var(--line); }

/* ---------- voices: three client quotes ---------- */
.dp-voices-grid{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 64px);
}
.dp-voice{ margin: 0; }
.dp-voice::before{
  content: "";
  display: block;
  width: 32px;
  height: 1px;
  background: var(--ink-soft);
  margin-bottom: clamp(18px, 2.6vh, 26px);
}
.dp-voice p{
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(19px, 1.75vw, 25px);
  line-height: 1.4;
  color: var(--ink);
  hanging-punctuation: first;
}

/* ---------- cta: one pill, the one teal moment ---------- */
.dp-cta-lead{
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(40px, 6vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 clamp(28px, 4.4vh, 44px);
}
.dp-cta-links{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 32px;
}
.dp-pill{
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--font-struct);
  font-size: clamp(14px, 1.1vw, 16px);
  letter-spacing: 0.02em;
  color: var(--ink);            /* ink = AA-safe on every hour; teal is border + arrow */
  text-decoration: none;
  padding: 0.95em 1.8em;
  border: 1px solid color-mix(in srgb, var(--teal-flash) 60%, transparent);
  border-radius: 999px;
  transition: border-color var(--dur-ui) var(--ease-out-expo),
              background var(--dur-ui) var(--ease-out-expo),
              transform var(--dur-ui) var(--ease-out-expo);
}
.dp-pill .dp-arrow{ color: var(--teal-flash); transition: transform var(--dur-ui) var(--ease-out-expo); }
/* (0,2,0) so it beats main.css `a:hover`, which would turn the text rose. */
.dp-pill:hover{
  color: var(--ink);
  border-color: var(--teal-flash);
  background: color-mix(in srgb, var(--teal-flash) 10%, transparent);
}
.dp-pill:hover .dp-arrow{ transform: translateX(4px); }
.dp-pill:active{ transform: scale(0.98); }
.dp-textlink{
  font-family: var(--font-struct);
  font-size: clamp(14px, 1.1vw, 16px);
  letter-spacing: 0.02em;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 32%, transparent);
  padding-bottom: 2px;
  transition: border-color var(--dur-ui) var(--ease-out-expo);
}
.dp-textlink:hover{ color: var(--ink); border-bottom-color: var(--ink); }
/* Stacked in the split's right column: each link starts at the column's
   left edge, the same edge the services list text starts on. */
.dp-cta-links--stack{
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  padding-top: 0.35em;   /* first link's top meets the heading's cap line */
}

/* Hands the page's surface over to the dusty-rose footer band. */
.dp-handoff{
  height: clamp(90px, 16vh, 180px);
  background: linear-gradient(180deg,
              transparent 0%,
              color-mix(in srgb, var(--footer-rose, #E6B7B7) 45%, transparent) 62%,
              var(--footer-rose, #E6B7B7) 100%);
}

/* Footer vault pill: the label is a sentence, not a caption. (Was inline
   on the placeholder pages.) */
.site-footer .contact-cta.cta-vault{ text-transform: none; letter-spacing: 0.02em; max-width: 100%; text-align: center; }

/* ---------- "Bring us in" as a draft (owner's component, 2026-09-10) ----------
   One mailto link: the lead line, then the address typed in teal behind a
   blinking caret (js/draft.js), then a small note. Our type (the Helvetica
   stack, light) and our tokens, not the component's Space Grotesk.
   The typed address sits in a grid cell with an invisible full-length copy
   of itself, so the line is its final width from the start — on a centred
   page the words would otherwise slide sideways as each letter arrives. */
.dp-cta--draft .dp-wrap{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(22px, 3.4vh, 32px);
}
.dp-center .dp-cta--draft .dp-wrap{ align-items: center; }
.dp-draft{
  display: inline-block;
  max-width: 100%;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--sans);
  text-align: left;
}
.dp-draft:hover{ color: var(--ink); }   /* beat main.css a:hover (rose) */
.dp-draft:focus-visible{ outline: 2px solid var(--teal-flash); outline-offset: 6px; }
.dp-draft-line{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4em;
  font-size: clamp(22px, 3vw, 40px);
  font-weight: 300;
  line-height: 1.3;
  padding-bottom: 0.5em;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 25%, transparent);
  transition: border-color 0.3s ease;
}
.dp-center .dp-draft-line{ justify-content: center; }
.dp-draft:hover .dp-draft-line,
.dp-draft:focus-visible .dp-draft-line{ border-bottom-color: var(--teal-flash); }
.dp-draft-lead{ opacity: 0.55; }
.dp-draft-type{ display: inline-grid; color: var(--teal-flash); font-weight: 400; }
.dp-draft-type::before{
  content: attr(data-full);
  visibility: hidden;
  grid-area: 1 / 1;
  white-space: nowrap;
}
.dp-draft-type > .dp-draft-typed{ grid-area: 1 / 1; white-space: nowrap; }
/* The caret is the typed text's own ::after, so it always sits right after
   the last letter. (As a separate span it became a second grid item and the
   grid put it on a row of its own, under the address.) It takes no width,
   so the reserved line width does not grow when the typing finishes. */
.dp-draft-typed::after{
  content: "";
  display: inline-block;
  width: 2px;
  height: 0.9em;
  margin-left: 0.12em;
  margin-right: calc(-0.12em - 2px);
  vertical-align: -0.1em;
  background: var(--teal-flash);
  animation: dp-caret-blink 1s steps(2) infinite;
}
/* Small text: --ink-soft (8.3:1 on the night sky). The component's .45
   opacity measures ~4.1:1 there, under the 4.5 floor. */
.dp-draft-meta{
  display: block;
  margin-top: 0.9em;
  font-size: 13px;
  color: var(--ink-soft);
}
.dp-center .dp-draft-meta{ text-align: center; }
@keyframes dp-caret-blink{ 50%{ opacity: 0; } }
@media (prefers-reduced-motion: reduce){ .dp-draft-typed::after{ animation: none; } }

/* ============================================================
   MOTION — progressive enhancement only.
   ============================================================ */
.js .reveal{
  opacity: 0;
  transform: translateY(20px);
  transition: opacity   var(--dur-reveal) var(--ease-out-expo),
              transform var(--dur-reveal) var(--ease-out-expo);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
.js .reveal.in-view{ opacity: 1; transform: none; }

/* FORMS: content wipes up into place, like material setting. */
.js .dp-materialise{
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1000ms var(--ease-out-expo);
}
.js .dp-materialise.in-view{ clip-path: inset(0 0 0 0); }

@media (prefers-reduced-motion: reduce){
  .js .reveal{ opacity: 1; transform: none; transition: none; }
  .js .dp-materialise{ clip-path: none; transition: none; }
}

/* ============================================================
   DARK HOURS (Forms dusk, Sounds night)
   ============================================================ */
body.dp-dark .site-header .logo,
body.dp-dark .site-header .mobile-menu-toggle{ color: var(--ink); }
/* --nav-ink: the nav sits on the LIGHTEST part of the hero sky. On Forms,
   --ink-soft measures 3.75:1 there (under the 4.5 floor for 11px caps), so
   that page supplies a lighter nav tone rather than flattening its whole
   ink hierarchy. */
body.dp-dark .site-nav a{ color: var(--nav-ink, var(--ink-soft)); }
body.dp-dark .site-nav a:hover,
body.dp-dark .site-nav a.current{ color: var(--ink); }
/* The mobile overlay paints main.css --bg-deep (light grey); with the light
   ink above, the menu would read light-on-light. Give it the page surface. */
body.dp-dark .site-nav.open{ background: var(--surface); }
body.dp-dark .site-nav.open::before{ color: var(--ink); }
body.dp-dark .dp-handoff{
  background: linear-gradient(180deg, transparent 0%, transparent 55%, var(--footer-rose, #E6B7B7) 100%);
}

/* ============================================================
   NIGHT (body.night — Labs, 2026-09-10): the homepage's night sky and
   fireflies, drawn by js/night-sky.js into a fixed canvas behind the page,
   plus the homepage's black footer. The CSS gradient under the canvas is
   the same sky, flat: it is what shows before three.js arrives, without
   WebGL, and in any overscroll.
   ============================================================ */
html:has(body.night){ background: #000; }
/* Stops MEASURED off the rendered canvas (1440x813, median across a strip
   so fireflies don't count). Not #927777: the camera only ever sees the
   middle of the sky plane, so the shader's nightTop never reaches the
   screen — assuming it once put the Labs header on the wrong ground. */
body.night{
  background: #000 linear-gradient(180deg,
    #231C1C 0%, #1D1818 5%, #171313 10%, #130F0F 15%, #0E0C0C 20%,
    #0A0808 25%, #060505 30%, #020101 40%, #000 50%, #000 100%) fixed;
}
.night-sky{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  display: block;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease-out;
}
.night-sky.is-ready{ opacity: 1; }
@media (prefers-reduced-motion: reduce){ .night-sky{ transition: none; } }
body.night .dp-hero{ background: transparent; }
/* The homepage footer (index.html body.home .site-footer), verbatim. */
body.night .site-footer{
  z-index: 2;
  background: #000000;
  color: rgba(232, 216, 245, 0.55);
  border-top-color: rgba(232, 216, 245, 0.08);
}
body.night .site-footer .brand{ color: #E8D8F5; }
body.night .site-footer .parent-note{ color: rgba(232, 216, 245, 0.62); }
body.night .site-footer .footer-email{ color: rgba(232, 216, 245, 0.92); }
body.night .site-footer .footer-email:hover{ color: #B88CFF; border-bottom-color: #B88CFF; }
body.night .site-footer .contact-cta{ color: #E8D8F5; border-color: rgba(232, 216, 245, 0.5); }
body.night .site-footer .contact-cta:hover{ background: rgba(176, 140, 240, 0.15); border-color: #B88CFF; color: #F4F7F2; box-shadow: 0 0 48px rgba(176, 140, 240, 0.35); }

/* ============================================================
   CENTRED (body.dp-center — Labs, 2026-09-10, owner's request)
   One axis down the middle of the page — EXCEPT the services section
   ("Choose your own adventure"), which the owner wants left-aligned in its
   two-column split, as before. Every rule here is therefore scoped to the
   hero, the ticker, the quotes or the CTA; .dp-services is never touched.
   The markup is unchanged, so dropping the switch restores the fully
   left-aligned page exactly.
   ============================================================ */
/* Hero + ticker read as ONE opening group: no full-screen hero (that left
   a band of empty sky between the title and the ticker), a generous top
   and almost no bottom padding, and a short step down to the ticker. */
.dp-center .dp-hero{
  min-height: 0;
  justify-content: center;
  text-align: center;
  padding-block: clamp(8rem, 24vh, 14rem) 0;
}
/* Title → ticker = ticker → "Choose your own adventure" (owner, 2026-09-10).
   The gap after the ticker is this section's own bottom padding + the
   services section's top padding, so the gap before it is built from the
   same two values and the two stay equal at every viewport. The hero ends
   with no bottom padding of its own. */
.dp-center .dp-projects--bare{ padding-top: calc(clamp(40px, 7vh, 88px) + clamp(64px, 11vh, 132px)); }
/* Quotes: centred in their columns, each rule centred over its quote. */
.dp-center .dp-voices-grid{ text-align: center; }
.dp-center .dp-voice::before{ margin-inline: auto; }
.dp-center .dp-voice p{ hanging-punctuation: none; }
/* Bring us in: the split becomes a centred stack — heading, then the links
   on the same axis. (Scoped to .dp-cta so the services split is left as is.) */
.dp-center .dp-cta .dp-split{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(28px, 4.5vh, 48px);
  text-align: center;
}
.dp-center .dp-cta .dp-services-head{ position: static; }
.dp-center .dp-cta .dp-cta-links--stack{ align-items: center; padding-top: 0; }
.dp-center .dp-cta:not(.dp-cta--split) .dp-wrap{ text-align: center; }
.dp-center .dp-cta:not(.dp-cta--split) .dp-cta-links{ justify-content: center; }

/* ---------- responsive ---------- */
@media (max-width: 860px){
  .dp-split{ grid-template-columns: 1fr; }
  .dp-cta-links--stack{ padding-top: 0; }
  .dp-services-head{ position: static; }
  .dp-voices-grid{ grid-template-columns: 1fr; max-width: 36ch; }
}
@media (max-width: 720px){
  .dp-hero{ min-height: min(70vh, 560px); }
  .site-footer .wrap{ justify-content: center; }
  .site-footer .contact-cta.cta-vault{ padding: 0.85rem 1.5rem; }
}