/* ==========================================================================
   OSMIA — brand site v4. "Printed matter, alive."
   A small book from a serious publisher, with one live bee in it.

   The system: type-first editorial (Lora carries everything; Inter only as
   the folio/label voice), cream paper + hairlines + ONE honey accent per
   screen, almost no photography — the true imagery is the app itself,
   recreated faithfully from its real design tokens. The single living
   element is the bee: the real one-line mark gliding the app's own ∞ path,
   and rules that draw themselves in as you read. Everything degrades to
   stillness under prefers-reduced-motion.
   ========================================================================== */

/* --- THE TYPE, SELF-HOSTED — the site's pages claim no third parties, so
       the fonts live here too (assets/fonts/, variable woff2, latin +
       latin-ext; the latin block carries æ ø å for Danish and Swedish).
       Lora spans wght 400-700, Inter 100-900 — everything the CSS asks
       for (400/500/600, plus a true bold where <b> wants one). --- */
@font-face {
  font-family: "Lora"; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url("assets/fonts/lora.woff2") format("woff2");
  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: "Lora"; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url("assets/fonts/lora-ext.woff2") format("woff2");
  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: "Lora"; font-style: italic; font-weight: 400 700;
  font-display: swap; src: url("assets/fonts/lora-italic.woff2") format("woff2");
  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: "Lora"; font-style: italic; font-weight: 400 700;
  font-display: swap; src: url("assets/fonts/lora-italic-ext.woff2") format("woff2");
  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: "Inter"; font-style: normal; font-weight: 100 900;
  font-display: swap; src: url("assets/fonts/inter.woff2") format("woff2");
  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: "Inter"; font-style: normal; font-weight: 100 900;
  font-display: swap; src: url("assets/fonts/inter-ext.woff2") format("woff2");
  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;
}

:root {
  /* --- paper & ink (site) --- */
  --cream: #faf6f0;
  --paper: #fffdf9;
  --sand: #f1e9db;
  --ink: #1a1714;
  --ink-soft: #38322c;
  --muted: #6b6358;
  --muted-2: #8a8175;
  --line: #e6dfd1;
  --line-2: #d5c9b4;
  --honey: #c9893a;
  --honey-deep: #8c5a18;   /* AA on cream — the only honey used as text */
  --on-dark: #f7f1e7;

  /* --- the app's OWN tokens, verbatim from app/src/lib/theme.ts —
         used ONLY inside the phone recreations so they are true --- */
  --app-cream: #FAF6F0;
  --app-cream-warm: #F5EFE3;
  --app-ink: #1A1714;
  --app-muted: #6B6358;
  --app-muted-light: #746B60;
  --app-placeholder: #B5AC9F;
  --app-hairline: #E5DED0;
  --app-honey: #C9893A;
  --app-honey-deep: #8C5A18;

  /* --- type --- */
  --serif: "Lora", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --fs-mega: clamp(3rem, 1.4rem + 6.4vw, 6.6rem);
  --fs-display: clamp(2.3rem, 1.4rem + 3.6vw, 4.4rem);
  --fs-h2: clamp(1.7rem, 1.3rem + 1.6vw, 2.6rem);
  --fs-h3: 1.3rem;
  --fs-lede: clamp(1.18rem, 1.06rem + 0.55vw, 1.5rem);
  --fs-body: 1.09rem;
  --fs-small: 0.93rem;
  --fs-folio: 0.72rem;

  /* spacing (section-level; in-page rhythm is authored inline by design) */
  --s4: 24px; --s5: 40px;
  --s6: 64px; --s7: 96px; --s8: 144px;

  --maxw: 71rem;
  --measure: 36rem;
  --radius-lg: 26px;

  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur: 950ms;

  --img-grade: saturate(0.55) sepia(0.16) contrast(1.02) brightness(1.03);
}

/* --- reset --- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: var(--serif);
  font-size: var(--fs-body);
  line-height: 1.72;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: rgba(201, 137, 58, 0.22); }

/* paper grain — two ultra-soft radial washes + a whisper of tooth */
body.grain::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(58% 42% at 82% -8%, rgba(201,137,58,0.05), transparent 62%),
    radial-gradient(50% 38% at -10% 108%, rgba(26,23,20,0.035), transparent 60%);
}
body.grain::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  opacity: 0.5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.028'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
main, header, footer { position: relative; z-index: 1; }

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(20px, 4.5vw, 44px); }
.skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--cream); padding: 10px 16px; z-index: 100; font-family: var(--sans); }
.skip:focus { left: 12px; top: 12px; }

/* ==========================================================================
   TYPE VOICES
   ========================================================================== */

/* the folio voice — Inter smallcaps, the only sans on the site */
.folio {
  font-family: var(--sans); font-size: var(--fs-folio); font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted-2);
  display: flex; align-items: center; gap: 14px;
}
.folio::after { content: ""; height: 1px; width: 44px; background: var(--line-2); }
.folio--center { justify-content: center; }
.folio--center::before { content: ""; height: 1px; width: 44px; background: var(--line-2); }
.folio b { color: var(--honey-deep); font-weight: 500; }

h1, h2, h3 { font-weight: 500; line-height: 1.12; letter-spacing: -0.014em; text-wrap: balance; }
.mega { font-size: var(--fs-mega); line-height: 1.02; letter-spacing: -0.022em; }
.display { font-size: var(--fs-display); line-height: 1.06; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.3; }

.lede { font-size: var(--fs-lede); line-height: 1.55; color: var(--ink-soft); max-width: var(--measure); }
.muted { color: var(--muted); }
.small { font-size: var(--fs-small); }
em { font-style: italic; }

/* body prose blocks (letter, stance) */
.prose { max-width: var(--measure); }
.prose p + p { margin-top: 1.2em; }
/* the reading pages' rhythm (was inline, 7× on letter.html + 6× on why.html):
   chapter breaks, section h2s, and the folio→prose gap */
.chapter { margin-top: clamp(44px, 6vw, 68px); }
.prose h2 { margin-top: 64px; font-size: 1.6rem; }
.prose h2 + p { margin-top: 20px; }
.folio + .prose { margin-top: 20px; }
.prose .initial::first-letter {
  font-size: 3.1em; float: left; line-height: 0.82;
  padding: 0.08em 0.12em 0 0; color: var(--honey-deep);
}

/* ==========================================================================
   NAV
   ========================================================================== */
.nav { position: fixed; inset-inline: 0; top: 0; z-index: 50; transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.nav.solid { background: rgba(250, 246, 240, 0.9); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line); }
.nav__in { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand__wordmark { font-family: var(--serif); font-size: 1.32rem; font-weight: 500; letter-spacing: 0.01em; }
.nav__links { display: flex; gap: clamp(18px, 2.6vw, 36px); }
.nav__links a {
  font-family: var(--sans); font-size: 0.86rem; font-weight: 500; letter-spacing: 0.04em;
  text-decoration: none; color: var(--muted); padding: 6px 2px;
  border-bottom: 1px solid transparent; transition: color 300ms var(--ease), border-color 300ms var(--ease);
}
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--line-2); }
.nav__right { display: flex; align-items: center; gap: 14px; }
/* Reserved seam: when a real Sign in exists post-launch it takes this slot
   (nav__right, before the CTA). Deliberately empty until then — a login
   form that doesn't authenticate is credential theater, not completeness. */
.nav__cta {
  font-family: var(--sans); font-size: 0.86rem; font-weight: 500; text-decoration: none;
  color: var(--ink); border: 1px solid var(--line-2); border-radius: 999px; padding: 9px 18px;
  transition: border-color 300ms var(--ease), background 300ms var(--ease);
}
.nav__cta:hover { border-color: var(--honey); background: rgba(201,137,58,0.06); }
.nav__toggle { display: none; padding: 8px; }
.menu { display: none; }
@media (max-width: 860px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: block; }
  .menu.open { display: flex; flex-direction: column; gap: 4px; padding: 10px 0 22px; }
  .menu a {
    font-family: var(--serif); font-size: 1.5rem; text-decoration: none;
    padding: 10px 2px; border-bottom: 1px solid var(--line);
  }
  .menu a:last-child { border-bottom: 0; }
  .nav.solid, .nav:has(.menu.open) { background: rgba(250,246,240,0.96); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line); }
}

/* ==========================================================================
   THE LIVING BEE + DRAWN RULES
   ========================================================================== */

/* the ∞ glide — the app's own loader math, slowed to a garden pace.
   JS drives transform; this is only the vessel. */
.bee { width: 34px; height: 34px; will-change: transform; }
.bee-field { position: relative; display: grid; place-items: center; }

/* a drawn rule: a hairline that arrives as you reach it (JS adds .drawn) */
.rule { border: 0; height: 1px; background: var(--line-2); transform-origin: left center; }
.js .rule { transform: scaleX(0); transition: transform 1400ms var(--ease); }
.js .rule.drawn { transform: scaleX(1); }

/* the bee resting on a wire — section divider */
.wire { position: relative; padding-block: var(--s6); }
.wire .rule { max-width: min(520px, 72%); margin-inline: auto; }
.wire .bee { position: absolute; left: 50%; top: 50%; translate: -50% calc(-50% - 15px); width: 26px; height: 26px; opacity: 0.85; }

/* reveals */
/* gated on .js (QA): without JavaScript nothing may hide — the page is
   complete, merely still */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: 120ms; }
.reveal[data-d="2"] { transition-delay: 240ms; }
.reveal[data-d="3"] { transition-delay: 360ms; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .js .rule { transform: none; transition: none; }
  .bee { animation: none !important; }
}

/* ==========================================================================
   STRUCTURE — sections, acts, splits
   ========================================================================== */
.section { padding-block: clamp(84px, 11vw, 168px); }
.section--tight { padding-block: clamp(56px, 7vw, 104px); }
.section--closer { padding-bottom: clamp(84px, 10vw, 150px); } /* page-final CTA (was inline on 3 pages) */
.ground-sand { background: linear-gradient(var(--sand), var(--cream)); }
.ground-paper { background: var(--paper); box-shadow: 0 1px 0 var(--line), 0 -1px 0 var(--line); }

.head { max-width: 46rem; }
.head h2, .head .display { margin-top: var(--s4); }
.head--center { text-align: center; }
.head--center .lede { margin-inline: auto; }

.split { display: grid; gap: clamp(28px, 4vw, 72px); }
@media (min-width: 861px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--offset { grid-template-columns: 0.85fr 1.15fr; }
}
.stack > * + * { margin-top: var(--s4); }

/* pull-quote bleed */
.bleed { position: relative; min-height: 66vh; display: grid; align-items: center; overflow: hidden; }
.bleed__img { position: absolute; inset: -8% 0; z-index: 0; }
.bleed__img img { width: 100%; height: 100%; object-fit: cover; filter: var(--img-grade) brightness(0.6); }
.bleed__in { position: relative; z-index: 1; padding-block: var(--s8); }
.pull { font-size: clamp(1.7rem, 1.2rem + 2.6vw, 3.1rem); line-height: 1.22; color: var(--on-dark); max-width: 24ch; letter-spacing: -0.01em; }
.pull em { color: #ecd9ba; }

/* link-as-sentence — ONE underline system (2026-07-13; was two defined in
   two places, a border plus a gradient, overlapping on hover): a resting
   hairline drawn as the lower background layer, and the honey line that
   draws itself over it on hover — the drawn-rule language. */
.btn-link {
  font-family: var(--serif); font-style: italic; font-size: 1.06rem; color: var(--ink);
  text-decoration: none; padding-bottom: 3px;
  background-image: linear-gradient(var(--honey), var(--honey)), linear-gradient(var(--line-2), var(--line-2));
  background-repeat: no-repeat;
  background-position: 0 100%, 0 100%;
  background-size: 0% 1px, 100% 1px;
  transition: background-size 500ms var(--ease);
}
.btn-link:hover { background-size: 100% 1px, 100% 1px; }
.btn-link .arw { display: inline-block; transition: transform 300ms var(--ease); font-style: normal; }
.btn-link:hover .arw { transform: translateX(4px); }

/* buttons — one shape, two weights */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--sans); font-size: 0.93rem; font-weight: 500; text-decoration: none;
  color: var(--cream); background: var(--ink); border-radius: 999px; padding: 14px 26px;
  transition: background 300ms var(--ease), transform 300ms var(--ease);
}
.btn:hover { background: var(--ink-soft); transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-2); }
.btn--ghost:hover { background: rgba(26,23,20,0.04); }
.btn[disabled] { opacity: 0.55; cursor: default; transform: none; }

/* App Store badge — honest "coming soon" */
.storebadge {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  border: 1px solid var(--line-2); border-radius: 12px; padding: 9px 16px; color: var(--ink);
  transition: border-color 300ms var(--ease);
}
.storebadge:hover { border-color: var(--honey); }
.storebadge svg { width: 22px; height: 22px; }
.storebadge .sb { display: flex; flex-direction: column; line-height: 1.15; }
.storebadge small { font-family: var(--sans); font-size: 0.64rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.storebadge b { font-family: var(--sans); font-size: 0.95rem; font-weight: 600; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero { padding-top: clamp(140px, 18vh, 220px); padding-bottom: clamp(72px, 9vw, 140px); }
/* subpage hero closers — one vocabulary (was four inline values):
   --sub for the reading/utility pages, --mid where content follows close,
   --tall for the centered auth shell */
.hero--sub { padding-bottom: clamp(24px, 4vw, 56px); }
.hero--mid { padding-bottom: clamp(40px, 5vw, 72px); }
.hero--tall { padding-bottom: clamp(64px, 8vw, 120px); }
.hero__grid { display: grid; gap: clamp(40px, 6vw, 96px); align-items: center; }
/* 861 matches the rest of the site's collapse point (nav/phones/tiers/
   footer) — the hero used to hold out until 981, leaving a 120px band of
   stacked hero under a desktop nav */
@media (min-width: 861px) { .hero__grid { grid-template-columns: 1.15fr 0.85fr; } }
.hero .mega { max-width: 12ch; }
.hero .lede { margin-top: var(--s5); }
.getstarted { margin-top: var(--s6); display: grid; gap: 18px; }
.get-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
/* #746b60, not --muted-2: readable running text at this size needs the
   app's own AA-measured compressed value (#8a8175 = 3.56:1 on cream,
   failed); --muted-2 stays for decorative strokes/italics. */
.get-micro, .btn-note { font-family: var(--sans); font-size: 0.82rem; color: #746b60; max-width: 34rem; line-height: 1.6; }

/* ==========================================================================
   THE PHONES — faithful recreations of the real app, from its own tokens.
   Every screen maps to a REAL surface; the chip says so honestly.
   ========================================================================== */
.phone {
  width: min(320px, 82vw); aspect-ratio: 9 / 19.2; margin-inline: auto;
  border-radius: 44px; background: var(--app-ink); padding: 10px;
  box-shadow:
    0 2px 6px rgba(26,23,20,0.16),
    0 24px 70px -18px rgba(26,23,20,0.38);
}
.phone__screen {
  position: relative; height: 100%; border-radius: 35px; overflow: hidden;
  background: var(--app-cream);
  display: flex; flex-direction: column;
  font-size: 13.5px; line-height: 1.5; color: var(--app-ink);
}
.phone__notch { position: absolute; top: 9px; left: 50%; translate: -50%; width: 86px; height: 22px; background: var(--app-ink); border-radius: 999px; }
.pstatus { display: flex; justify-content: space-between; padding: 12px 22px 0; font-family: var(--sans); font-size: 11px; color: var(--app-muted); }
.pbody { flex: 1; padding: 20px 18px 40px; display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
.pchip {
  position: absolute; bottom: 12px; left: 50%; translate: -50%;
  font-family: var(--sans); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--app-muted-light); background: rgba(250,246,240,0.92);
  border: 1px solid var(--app-hairline); border-radius: 999px; padding: 4px 10px; white-space: nowrap;
}
/* the honesty chip must never clip — at narrow phones (82vw ≈ 262px) the
   full line outruns the mock; step the type, keep the single line */
@media (max-width: 380px) {
  .pchip { font-size: 8px; letter-spacing: 0.04em; padding: 4px 8px; }
}

/* shared app atoms */
.aptitle { font-family: var(--sans); font-size: 11.5px; font-weight: 500; color: var(--app-ink); text-align: center; letter-spacing: 0.01em; }
.apgreet { font-family: var(--serif); font-style: italic; font-size: 12px; color: var(--app-muted-light); }
.approm { font-family: var(--serif); font-size: 17px; line-height: 1.45; color: var(--app-ink); }
.apmicro { font-family: var(--sans); font-size: 10px; color: var(--app-muted); }
.apinput {
  border: 1px solid var(--app-hairline); border-radius: 14px; background: rgba(255,255,255,0.35);
  padding: 12px 14px; font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--app-placeholder);
  position: relative;
}
.apinput .mic { position: absolute; right: 10px; bottom: 9px; opacity: 0.7; width: 13px; height: 13px; stroke: var(--app-muted-light); }
.apbtn {
  font-family: var(--sans); font-size: 12.5px; font-weight: 500; color: #fff; text-align: center;
  background: var(--app-honey); border-radius: 12px; padding: 11px;
}
.apseg { display: flex; border: 1px solid var(--app-hairline); border-radius: 999px; overflow: hidden; font-family: var(--sans); font-size: 10.5px; }
.apseg span { flex: 1; text-align: center; padding: 6px 4px; color: var(--app-muted); }
.apseg .on { background: var(--app-cream-warm); color: var(--app-honey-deep); font-weight: 500; }

/* the Home mock's tab bar — the real app's four tabs over the top
   hairline, Home active in honey (labels only at mock scale); fills the
   dead cream below the tool cards with what actually sits there */
.aptabs { margin-top: auto; display: flex; border-top: 1px solid var(--app-hairline); padding-top: 9px; }
.aptabs span { flex: 1; text-align: center; font-family: var(--sans); font-size: 8.5px; letter-spacing: 0.02em; color: var(--app-muted); }
.aptabs .on { color: var(--app-honey-deep); font-weight: 500; }

/* home launcher (the app's real 4 tool cards) */
.apcard { border: 1px solid var(--app-hairline); border-radius: 14px; padding: 11px 13px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.apcard--focal { border: 2px solid var(--app-honey); background: var(--app-cream-warm); }
.apcard--quiet { border-left: 2px solid var(--app-honey); }
.apcard b { font-family: var(--serif); font-weight: 400; font-size: 13.5px; display: block; }
.apcard i { font-family: var(--serif); font-style: italic; font-size: 10.5px; color: var(--app-muted); }

/* field-shifting thread (the real turn styles) */
.apturn-user { border-left: 1px solid var(--app-hairline); padding-left: 9px; font-family: var(--serif); font-size: 12.5px; color: var(--app-ink); }
.apturn-ai { background: var(--app-cream-warm); border-top: 1px solid var(--app-hairline); border-radius: 14px; padding: 11px 12px; font-family: var(--serif); font-size: 12.5px; }
.apturn-ai p + p { margin-top: 8px; }
.apturn-ai .prac { font-weight: 600; }
.aploading { display: flex; align-items: center; gap: 7px; }
.aploading .apmicro { color: var(--app-muted); }
.aploading img { width: 18px; height: 18px; }

/* history (the redesign: search capsule, pills, month header) */
.apsearch { display: flex; align-items: center; gap: 6px; border: 1px solid var(--app-hairline); border-radius: 999px; padding: 6px 11px; background: rgba(255,255,255,0.35); font-family: var(--sans); font-size: 11px; color: var(--app-placeholder); }
.appills { display: flex; gap: 5px; flex-wrap: wrap; }
.appills span { font-family: var(--sans); font-size: 9.5px; font-weight: 500; border: 1px solid var(--app-hairline); border-radius: 999px; padding: 4px 9px; color: var(--app-muted); }
.appills .on { border-color: var(--app-honey); color: var(--app-honey-deep); }
.apmonth { font-family: var(--sans); font-size: 9.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--app-muted); }
.aphistcard { background: var(--app-cream-warm); border-top: 1px solid var(--app-hairline); border-radius: 12px; padding: 10px 12px; display: grid; gap: 5px; }
.aphistcard .t { font-family: var(--serif); font-size: 12px; }
.aphistcard .g { font-family: var(--serif); font-style: italic; font-size: 10.5px; color: var(--app-muted-light); border-left: 1px solid var(--app-hairline); padding-left: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aphistcard .m { font-family: var(--sans); font-size: 9px; color: var(--app-muted); }

/* gallery layout for the app page */
.phones { display: grid; gap: clamp(48px, 6vw, 88px); margin-top: var(--s7); }
@media (min-width: 861px) { .phones { grid-template-columns: repeat(2, 1fr); } }
.phonecase { display: grid; gap: 26px; align-content: start; }
.phonecase figcaption { max-width: 30rem; margin-inline: auto; text-align: center; }
/* h2 for document outline (was h3 under a lone h1); metrics unchanged —
   the line-height matches the old h3 rule the tag used to inherit. */
.phonecase h2 { font-size: 1.34rem; line-height: 1.3; }
.phonecase figcaption p { color: var(--muted); font-size: var(--fs-small); margin-top: 8px; }

/* ==========================================================================
   STANCE — the creed, set quiet
   ========================================================================== */
.creed { border-top: 1px solid var(--line-2); }
.creed__item { display: grid; gap: 14px; padding: clamp(30px, 4vw, 52px) 0; border-bottom: 1px solid var(--line); }
@media (min-width: 861px) { .creed__item { grid-template-columns: 110px 1fr; gap: clamp(24px, 4vw, 64px); } }
.creed__no { font-family: var(--sans); font-size: var(--fs-folio); letter-spacing: 0.2em; color: var(--honey-deep); padding-top: 8px; }
.creed__item h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); max-width: 26ch; line-height: 1.3; } /* was h3 — see .phonecase h2 */
.creed__item p { color: var(--muted); max-width: var(--measure); margin-top: 10px; }
.creed--ledger .creed__item h2 { font-size: 1.35rem; } /* the refusals list (was 4× inline) */

/* ==========================================================================
   LETTER
   ========================================================================== */
.letter { max-width: 41rem; margin-inline: auto; }
.letter .prose { max-width: none; }
.letter__sig { margin-top: var(--s6); }
.letter__sig .name { font-size: 1.25rem; font-style: italic; }
.letter__sig .role { font-family: var(--sans); font-size: 0.8rem; color: var(--muted-2); margin-top: 6px; letter-spacing: 0.04em; }

/* ==========================================================================
   WRITING — the reading-room index (moved in from writing.html's in-page
   style block, 2026-07-13; the page carried the site's only <style> tag)
   ========================================================================== */
.writing-lead { display: block; text-decoration: none; color: inherit; border: 1px solid color-mix(in srgb, currentColor 18%, transparent); background: rgba(240,232,216,.45); padding: clamp(28px, 5vw, 54px); margin-top: clamp(40px, 6vw, 72px); }
.writing-lead h2 { margin: 18px 0 0; font-size: clamp(2rem, 4.6vw, 3.1rem); max-width: 14ch; }
.writing-lead .lede { margin-top: 18px; max-width: 44ch; }
.writing-lead .writing-read { margin-top: 26px; }
.writing-lead:hover .arw { transform: translateX(4px); }
.writing-grows { margin-top: clamp(48px, 7vw, 84px); padding-top: clamp(28px, 4vw, 40px); border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent); }
.writing-item { padding: clamp(24px, 3.5vw, 36px) 0; border-bottom: 1px solid color-mix(in srgb, currentColor 10%, transparent); }
.writing-item h3 { margin: 6px 0 8px; font-size: 1.35rem; }
.writing-item h3 a { text-decoration: none; color: inherit; }
.writing-item h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.writing-date { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; opacity: .55; }

/* ==========================================================================
   PRICING
   ========================================================================== */
.tiers { display: grid; gap: 20px; margin-top: var(--s7); }
@media (min-width: 861px) { .tiers { grid-template-columns: repeat(3, 1fr); } }
.tier { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(26px, 3vw, 40px); background: var(--paper); display: flex; flex-direction: column; gap: 18px; }
.tier--companion { border-color: var(--honey); }
.tier__k { font-family: var(--sans); font-size: var(--fs-folio); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted-2); }
.tier__price { font-size: 2.6rem; line-height: 1; }
.tier__price small { font-size: 1rem; color: var(--muted); font-family: var(--sans); }
.tier ul { list-style: none; padding: 0; display: grid; gap: 10px; color: var(--muted); font-size: var(--fs-small); }
.tier li { padding-left: 22px; position: relative; }
.tier li::before { content: "—"; position: absolute; left: 0; color: var(--honey-deep); }
.tier .btn, .tier .btn--ghost { margin-top: auto; }

/* ==========================================================================
   WAITLIST — the real one (posts to the waitlist EF; never pretends)
   ========================================================================== */
.waitform { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 34rem; margin-inline: auto; }
.waitform label { position: absolute; left: -9999px; }
.waitform input {
  flex: 1 1 240px; font-family: var(--serif); font-size: 1rem; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line-2); border-radius: 999px; padding: 13px 20px;
}
.waitform input::placeholder { color: var(--muted-2); font-style: italic; }
.waitform input:focus { outline: none; border-color: var(--honey); }
.waitform__status { font-family: var(--sans); font-size: 0.86rem; color: var(--muted); max-width: 34rem; margin: 14px auto 0; line-height: 1.6; }
.waitform__status a { color: var(--honey-deep); }
.wait-disclosure { font-family: var(--sans); font-size: 0.78rem; color: #746b60; margin-top: 12px; } /* AA — see .get-micro */

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer { background: var(--ink); color: var(--on-dark); margin-top: var(--s8); }
.footer--flush { margin-top: 0; } /* pages that end on their own quiet close */
.footer .wrap { padding-block: clamp(56px, 7vw, 96px) 36px; }
.footer__top { display: grid; gap: 40px; }
@media (min-width: 861px) { .footer__top { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer .brand__wordmark { color: var(--on-dark); }
.footer__note { color: #b9ae9d; font-size: var(--fs-small); max-width: 30rem; margin-top: 18px; line-height: 1.7; }
.footer__col h4 { font-family: var(--sans); font-size: var(--fs-folio); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: #8d8271; margin-bottom: 16px; }
.footer__col a { display: block; color: #d8cebd; text-decoration: none; font-size: var(--fs-small); padding: 5px 0; }
.footer__col a:hover { color: var(--on-dark); }
.footer__base { display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; border-top: 1px solid rgba(247,241,231,0.14); margin-top: 48px; padding-top: 26px; font-family: var(--sans); font-size: 0.8rem; color: #8d8271; }

/* ==========================================================================
   MOTION PASS — "drawn, not pushed". Everything below activates ONLY under
   html.motion (set by JS when prefers-reduced-motion is off). Without it,
   the page is the approved static site — designed still-states, not gaps.
   ========================================================================== */

/* the voyager — THE one bee. Fixed layer, transform-only, never intercepts. */
#voyager {
  position: fixed; left: 0; top: 0; width: 28px; height: 28px;
  z-index: 60; pointer-events: none; will-change: transform;
  opacity: 0; transition: opacity 1200ms var(--ease);
}
#voyager.here { opacity: 0.92; }
#voyager img { width: 100%; height: 100%; }

/* its scent trail — one cheap canvas UNDER the content (z below main), so
   the trace lives on the paper and slips beneath the tinted plates */
#trail { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

/* the static bees stand down while the voyager lives (they ARE the
   reduced-motion still-state, so they only hide under .motion) */
.motion .wire .bee, .motion .bee-field .bee { opacity: 0; }

/* --- scenes: pre-play states (motion only) --- */

/* cascade — the app's real mount choreography (delays set inline by JS) */
.motion [data-scene="cascade"]:not(.played) .cas { opacity: 0; transform: translateY(3px); }
.motion [data-scene="cascade"] .cas { transition: opacity 1000ms var(--ease), transform 1000ms var(--ease); }

/* thread — reply materializes the way the app does (M2-A: card up 6px,
   paragraphs staggered, adoption link late) */
.motion [data-scene="thread"]:not(.played) .apturn-ai { opacity: 0; transform: translateY(6px); }
.motion [data-scene="thread"] .apturn-ai { transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.motion [data-scene="thread"]:not(.played) .apturn-ai > p { opacity: 0; }
.motion [data-scene="thread"] .apturn-ai > p { transition: opacity 600ms var(--ease); }
.motion [data-scene="thread"] .aploading { transition: opacity 500ms var(--ease); }

/* intention — cadence segment settles + save readiness cross-fade */
.motion [data-scene="intention"] .apseg span { transition: background 600ms var(--ease), color 600ms var(--ease), font-weight 0ms; }
.motion [data-scene="intention"]:not(.played) .apbtn { opacity: 0.55; }
.motion [data-scene="intention"] .apbtn { transition: opacity 700ms var(--ease); }

/* reflect — the two questions arrive one at a time */
.motion [data-scene="reflect"]:not(.played) .q { opacity: 0; }
.motion [data-scene="reflect"] .q { transition: opacity 800ms var(--ease); }

/* history — typed search + the record settling to the match */
.motion [data-scene="history"] .fadeable { transition: opacity 700ms var(--ease); }

/* ==========================================================================
   AUTH SHELL — design only (no real auth until the launch pass).
   The sign-in and account pages are DESIGNED previews: honest about being
   pre-launch, incapable of capturing credentials (fields disabled).
   ========================================================================== */
.authwrap { max-width: 26rem; margin-inline: auto; }
.authcard {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--paper); padding: clamp(28px, 4vw, 44px);
  display: grid; gap: 18px;
}
.authcard .field { display: grid; gap: 6px; }
.authcard label {
  font-family: var(--sans); font-size: var(--fs-folio); font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-2);
}
.authcard input {
  font-family: var(--serif); font-size: 1rem; color: var(--ink);
  background: var(--cream); border: 1px solid var(--line-2);
  border-radius: 12px; padding: 12px 16px;
}
.authcard input::placeholder { color: var(--muted-2); font-style: italic; }
.authcard input[disabled] { opacity: 0.65; cursor: not-allowed; }
/* the pre-launch Sign in button reads as *waiting*, not broken — ghost +
   muted instead of the dimmed-ink gray (the only gray in the system) */
.authcard .btn[disabled] { background: transparent; color: var(--muted); border: 1px solid var(--line-2); opacity: 1; }
.authnote {
  font-family: var(--sans); font-size: 0.84rem; color: var(--muted);
  line-height: 1.65; text-align: center;
}
.authnote a { color: var(--honey-deep); }

/* the honest state chip — same voice as the phones' "recreated preview" */
.shellchip {
  justify-self: center; font-family: var(--sans); font-size: 0.7rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2);
  border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px;
}

/* account shell rows — the plumbing voice, mirroring the app's Section/Row */
.acct { border-top: 1px solid var(--line-2); }
.acct__row {
  display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: baseline;
  justify-content: space-between; padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.acct__row b { font-weight: 500; font-size: 1.06rem; }
.acct__row span { font-family: var(--sans); font-size: var(--fs-small); color: var(--muted); }
.acct__k {
  font-family: var(--sans); font-size: var(--fs-folio); font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted-2);
  margin: 40px 0 6px;
}
.acct__danger b { color: #a04434; }

/* the quiet Sign in seam — secondary to the CTA, never a 5th nav item */
.nav__signin {
  font-family: var(--sans); font-size: 0.86rem; font-weight: 500;
  text-decoration: none; color: var(--muted); padding: 6px 2px;
  border-bottom: 1px solid transparent;
  transition: color 300ms var(--ease), border-color 300ms var(--ease);
}
.nav__signin:hover, .nav__signin[aria-current="page"] { color: var(--ink); border-bottom-color: var(--line-2); }
@media (max-width: 860px) { .nav__signin { display: none; } }

/* ==========================================================================
   V5 ELEVATION — the catch-up + craft pass. Same book, richer chapters.
   New: the day-gradient grounds (the index reads as one day, dawn to dusk),
   the interactive routed thread, the long-arc letter, drawn link
   underlines, the phone lift, focus-visible. Everything
   kinetic stays behind html.motion; the static site remains the designed
   still-state.
   ========================================================================== */

/* --- the day turns as you scroll (index): grounds warm toward evening --- */
.ground-eve { background: linear-gradient(180deg, var(--cream), #f2e8d7 55%, #eee2cd); }
.ground-return { background: linear-gradient(180deg, #f4ecdd, var(--cream) 70%); }

/* --- hero headline settles line by line (the app's own cascade rhythm) --- */
.hline { display: block; }
.js .motion-lines .hline { opacity: 0; transform: translateY(10px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.js .motion-lines.in .hline { opacity: 1; transform: none; }
.js .motion-lines.in .hline:nth-child(2) { transition-delay: 260ms; }
@media (prefers-reduced-motion: reduce) {
  .js .motion-lines .hline { opacity: 1; transform: none; transition: none; }
}

/* (drawn underline for .btn-link merged into its single definition above,
   2026-07-13 — the V5 re-declaration made two underline systems fire.) */

/* --- the phones breathe on approach (desktop, motion only) --- */
@media (hover: hover) {
  .motion .phone { transition: transform 700ms var(--ease), box-shadow 700ms var(--ease); }
  .motion .phonecase:hover .phone {
    transform: translateY(-6px);
    box-shadow: 0 2px 6px rgba(26,23,20,0.14), 0 34px 90px -20px rgba(26,23,20,0.42);
  }
}

/* --- focus-visible: keyboard readers get the honey --- */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--honey); outline-offset: 3px; border-radius: 3px;
}

/* (The correction chip and its reply-swap were removed 2026-07-11 with the
   app's own chip: correction is conversation now — the second authored
   moment shows the follow-up ask and the step that answers it.) */
.apturn-ai .mantra { font-weight: 600; }

/* --- THE LONG-ARC LETTER (index Act IV): a mirror letter at reading scale.
       Paper, a drawn honey top rule, the app's committed-content material. --- */
.letterpaper {
  position: relative; max-width: 34rem; margin-inline: auto;
  background: var(--paper); border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 48px);
  box-shadow: 0 1px 0 var(--line), 0 18px 60px -28px rgba(26,23,20,0.25);
}
.letterpaper::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--honey); transform-origin: left center;
}
.motion .letterpaper::before { transform: scaleX(0); transition: transform 1400ms var(--ease); }
.motion .letterpaper.written::before { transform: scaleX(1); }
.letterpaper .ldate {
  font-family: var(--sans); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted-2);
  margin-bottom: 18px;
}
.letterpaper p { font-size: 1.02rem; line-height: 1.75; color: var(--ink-soft); }
.letterpaper p + p { margin-top: 1em; }
.letterpaper .lmantra { font-weight: 600; color: var(--ink); }
.letterpaper .lchip {
  margin-top: 22px; font-family: var(--sans); font-size: 0.7rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2);
}
/* the letter writes itself, once, as you reach it */
.motion .letterpaper:not(.written) .lp { opacity: 0; transform: translateY(6px); }
.motion .letterpaper .lp { transition: opacity 900ms var(--ease), transform 900ms var(--ease); }

/* --- the fifth card arrives (app page, My Patterns scene) --- */
/* .apcard--arrives retired with the fifth-card scene (Patterns is present-
   but-honest on Home now); the waiting-state + header-icon styles replace it. */
.apwaiting { font-family: var(--serif); font-size: 11px; line-height: 1.55; color: var(--app-muted);
  text-align: center; max-width: 200px; margin: 12px auto 0; }
.apheadrow { display: flex; align-items: center; justify-content: space-between; }
.apheadrow .aptitle { flex: 1; text-align: center; transform: translateX(14px); }
.apheadicons { display: flex; gap: 7px; align-items: center; color: var(--app-muted); }
.apcard .fnicon { flex: none; }

/* --- direction scene: the found sentence + the commit gate arrive --- */
.motion [data-scene="destination"]:not(.played) .ap-found { opacity: 0; transform: translateY(4px); }
.motion [data-scene="destination"] .ap-found { transition: opacity 900ms var(--ease), transform 900ms var(--ease); }
.apfilled {
  border: 1px solid var(--app-hairline); border-radius: 14px; background: rgba(255,255,255,0.55);
  padding: 12px 14px; font-family: var(--serif); font-size: 13px; color: var(--app-ink);
}

/* ==========================================================================
   V6 SIGNATURE MOTION — the dandelion + the journey bee.
   An ORIGINAL dandelion in the site's own line work stands at the bee's
   home; its seeds disperse as you scroll away and gather as you return —
   each on its own air current. The voyager's journey gains authored
   perches (.beeperch) and arcs. All kinetics live in main.js behind
   html.motion; this is the vessel + the designed still-state (the complete
   dandelion at rest).
   ========================================================================== */
/* authored waypoints — invisible, positioned by inline style in a
   position:relative host */
.has-perch { position: relative; }
.beeperch { position: absolute; width: 2px; height: 2px; pointer-events: none; }


/* ==========================================================================
   V7 — THE MEADOW: the dandelion as living backdrop. A large botanical
   study (original, generated line work) stands BEHIND the whole page —
   green stem/leaves/calyx, a gauzy filament orb, detailed parachute seeds —
   and a fixed canvas carries a slow continuous drift of seeds through the
   air the page lives in. Content sits over it; readability first: fine
   strokes, low ink, the greens muted sage. Reduced motion / no-JS: the
   complete plant WITH a baked still-drift — designed stillness.
   ========================================================================== */
:root {
  --leaf: #7d8f5e;        /* muted sage — the botanical life */
  --leaf-deep: #5d7046;
  --leaf-wash: rgba(125, 143, 94, 0.13);
}
#meadow {
  /* CONTAINMENT (bleed fix): absolute at the DOCUMENT top — the plant
     belongs to the hero zone and scrolls away with it, in every mode
     (JS, no-JS, reduced motion). It was position:fixed — a full-page
     viewport layer whose stem/leaves persisted at low opacity over the
     plain-cream lower sections. */
  position: absolute; top: 0; left: 0; right: 0; height: 100vh;
  z-index: 0; pointer-events: none; overflow: hidden;
}
/* HERO PLANT, viewport-rooted (2026-07-11 layout fix): the plant PINS to
   the viewport so it always runs off the BOTTOM OF THE SCREEN — the old
   100vh containment sliced the sunk stem at the hero boundary (the seam).
   The bleed-fix concern is answered by STACKING, not clipping: content
   sections rise to z-index:1 (below) and cover the plant as they scroll
   over it, panel over paper. JS-gated (.plantfix) — without JS the page
   keeps the contained fallback. */
.plantfix #meadowplant { position: fixed; }
.plantfix main > section { position: relative; z-index: 1; }
.plantfix footer { position: relative; z-index: 1; } /* the footer covers too */
.plantfix #seeds { z-index: 2; } /* the air keeps its site-long drift */
/* --pfade: JS scroll fade (main.js) — the pinned plant belongs to the hero;
   it dissolves as you leave, so deep sections and the footer never carry a
   ghost stem. 1 at the top, 0 by one viewport of scroll. */

#meadowplant {
  position: absolute; max-width: none;
  /* 2026-07-11 composition v2 (follows the app's Home; v1 "floated" — the
     drawn stem/leaves ended mid-air): BIGGER and PULLED DOWN — 120vh sunk
     11.4vh below the viewport, so stem and leaves run off the bottom edge
     while the HEAD STAYS at the approved spot (head y = 100vh + bottom −
     0.76·height = 20.2vh). TUNABLES: height = zoom; bottom = 0.76·height
     − 79.8vh (negative; keeps the head fixed); the left calc keeps the
     SEED HEAD at 50vw (0.4302·height); .bee-home perches at the head's
     left rim. */
  /* v6 (−20% per the founder's eye): below the old 105vh head-pin floor,
     so the head rides lower now (y = 100vh + bottom − 0.76·height ≈ 30.6vh)
     — rooted at the edge with a 4vh margin; the viewport-pin + scroll fade
     carry the rooting. */
  height: 86vh; bottom: -4vh; width: auto;
  opacity: calc(0.62 * var(--pfade, 1));
  left: calc(50vw - 37vh);
  will-change: transform, opacity;
}
#meadowplant .mstem  { stroke: var(--leaf-deep); stroke-width: 3.4; stroke-linecap: round; opacity: 0.75; }
#meadowplant .mstem2 { stroke: var(--leaf); stroke-width: 1.2; stroke-linecap: round; opacity: 0.7; }
#meadowplant .mleaf  { fill: var(--leaf-wash); stroke: var(--leaf-deep); stroke-width: 1.5; stroke-linejoin: round; opacity: 0.8; }
#meadowplant .mvein  { stroke: var(--leaf-deep); stroke-width: 0.9; opacity: 0.55; }
#meadowplant .mfil line { stroke: var(--muted-2); stroke-width: 0.55; opacity: 0.5; }
#meadowplant .mseed .msh { stroke: var(--muted); stroke-width: 0.9; stroke-linecap: round; opacity: 0.75; }
#meadowplant .mseed .mrays line { stroke: var(--muted-2); stroke-width: 0.7; stroke-linecap: round; opacity: 0.8; }
#meadowplant .mseed .marcs path { stroke: var(--muted-2); stroke-width: 0.45; fill: none; opacity: 0.5; }
#meadowplant .mseed .mgrain, #meadowplant .sseed .mgrain { stroke: var(--honey-deep); stroke-width: 2.6; stroke-linecap: round; opacity: 0.8; }
#meadowplant .sseed .msh { stroke: var(--muted); stroke-width: 1; stroke-linecap: round; }
#meadowplant .sseed .mrays line { stroke: var(--muted-2); stroke-width: 0.8; stroke-linecap: round; }
/* the live canvas replaces the baked drift when motion runs */
.motion #meadowplant .still-seeds { display: none; }
/* the AIR stays with the viewport (site-long drift) even though the
   plant scrolls away — fixed escapes the absolute parent by design.
   pointer-events: none is LOAD-BEARING: the canvas was body-appended out
   of #meadow's click-through umbrella (2026-07-11), and a full-viewport
   canvas above z-index:1 content otherwise eats every click on the page. */
#seeds { position: fixed; inset: 0; pointer-events: none; }

/* the bee's home perch — at the seed head's LEFT RIM now (the head stands
   to the bee's right, mirroring the app's Home): head center at 50vw,
   y = 20.2vh (0.24·105vh − 5vh plant-top offset); the drawn head's radius
   is ≈ 0.147·plant-height, so the rim offset scales with the zoom. */
.bee-home { position: absolute; left: calc(50vw - 12.6vh - 34px); top: calc(30.6vh - 17px); width: 34px; height: 34px; }
.hero { position: relative; }

/* readability: a soft cream clearing behind hero/head text columns — the
   paper stays under the ink wherever a plant stands behind the text.
   (Index got this first; generalized 2026-07-13 to every planted hero —
   the sunflower and capsule pages were setting ink on the bloom.) */
/* z-index: 0 is LOAD-BEARING: it makes .clearing its own stacking
   context, so the -1 pseudo sits at the CLEARING's floor — above the
   root-level #meadow — instead of dropping beneath the plant on pages
   without .plantfix (only the index lifts its sections to z-index: 1). */
.clearing { position: relative; z-index: 0; }
.clearing::before {
  content: ""; position: absolute; inset: -8% -12%; z-index: -1;
  /* left-anchored cap: on the wide .wrap heroes (app/stance/pricing) the
     wash covers the text column and stops before the right-side bloom,
     which has no collision to fix */
  max-width: 64rem;
  background: radial-gradient(62% 58% at 42% 45%, rgba(250,246,240,0.9), rgba(250,246,240,0.55) 55%, transparent 74%);
}
/* the reading pages (why/letter/writing) set a 41rem column close to the
   bloom — their wash reaches a little further right so headline serifs
   and the bold lede never sit on the petals at desktop width */
.letter.clearing::before {
  inset: -8% -18%; max-width: none;
  background: radial-gradient(64% 58% at 46% 45%, rgba(250,246,240,0.92), rgba(250,246,240,0.55) 58%, transparent 78%);
}
@media (max-width: 980px) {
  /* same v3 move at phone scale: 100vh sunk 21.3vh below the viewport
     (head fixed at 45.3vh = 100vh − 21.3vh − 0.76·100vh), head at 50vw.
     The bee sits ON the flower's crown (head top rim, radius ≈ 0.147·
     100vh = 14.7vh) — a perch at the head's side floated over the full-
     width body text, and a bee on the dandelion reads intentional.
     Opacity stepped down (0.5 → 0.32, 2026-07-13): at phone scale the
     full-width text column crosses the clock; the plant recedes to a
     watermark so the ink wins. Perch retuned to the DRAWN crown (≈44vh
     measured on-device; the 38vh math put the bee inside the paragraph). */
  #meadowplant { height: 64vh; bottom: -4vh; opacity: calc(0.32 * var(--pfade, 1)); left: calc(50vw - 27.5vh); }
  .bee-home { top: calc(44vh - 26px); left: calc(50vw - 14px); }
}

/* ==========================================================================
   V8 — THE SUNFLOWER: the meadow's second plant. Same layer, same
   containment, same laws — its OWN nature: a Fibonacci phyllotaxis face,
   two golden petal rings, a heavy head that sways around the stem top and
   turns toward the light (the cursor), pollen motes on the air instead of
   parachute seeds. Page-driven (the botanical family): each page carries
   its own bloom inside its own #meadow; no toggle.
   ========================================================================== */
#sunplant {
  /* identical containment + head-centering math to #meadowplant:
     head at 47.8% of a 0.9*94vh-wide drawing, 24% down */
  position: absolute; bottom: 0; max-width: none;
  height: 94vh; width: auto; opacity: 0.62;
  left: calc(50vw - 40.4vh);
  will-change: transform, opacity;
}

/* v2: the lush sunflower bakes its rich fills inline (dark face, dense
   gold crown, deep leaves); CSS carries only the LIVING parts below. */
/* baked pollen is the designed still-state; the live canvas replaces it */
/* (v2 bakes pollen fills inline) */
.motion #meadow .still-pollen { display: none; }

/* the heavy head — JS writes rotate() each frame; the pivot is the
   stem-top attachment point, in viewBox units */
#sunhead { transform-box: view-box; transform-origin: 430px 365px; will-change: transform; }

/* petal breath — individuated by construction: each petal carries its own
   animation-duration/-delay inline in the generated SVG; the animation
   NAME only exists under .motion, so reduced motion never runs it */
.motion #sunplant .petal {
  transform-box: fill-box; transform-origin: 0% 50%;
  animation-name: petalBreath; animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
@keyframes petalBreath {
  0%, 100% { transform: scale(0.988) rotate(-0.35deg); }
  50%      { transform: scale(1.012) rotate(0.35deg); }
}

/* a breeze through the leaves — each leaf carries its own duration/delay
   inline; the NAME exists only under .motion (reduced motion: still) */
.motion #sunplant .sleaf {
  animation-name: leafSway; animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
@keyframes leafSway {
  0%, 100% { transform: rotate(-1.4deg); }
  50%      { transform: rotate(1.6deg); }
}

/* the light on the seed face — a whisper, motion-only (the still face is
   perfectly even; the founder read the old pass as a domed shadow) */
#sunplant .shimmer { display: none; }
.motion #sunplant .shimmer { display: block; animation: faceLight 27s ease-in-out infinite; }
@keyframes faceLight {
  0%, 100% { transform: translate(-38px, -30px); }
  50%      { transform: translate(38px, 34px); }
}

@media (max-width: 980px) {
  #sunplant { height: 64vh; opacity: 0.5; left: calc(50vw - 27.5vh); }
}

/* ==========================================================================
   V9 — THE BOTANICAL FAMILY: yellow flowering dandelion (The App), white
   clock (the hero, default), sunflower (A Letter). Page-driven, each in
   its own contained #meadow.
   ========================================================================== */
/* A Letter: the sunflower stands to the RIGHT of the reading column */
.meadow--letter #sunplant {
  position: absolute; bottom: 0; max-width: none;
  height: 88vh; width: auto;
  left: calc(76vw - 37.8vh);
  opacity: 0.6;
}
.bee-home--letter { position: absolute; left: calc(76vw + 6px); top: calc(0.24 * 88vh + 12vh - 30px); width: 2px; height: 2px; }

/* The App: the yellow dandelion at family scale, RIGHT of the text
   (the sunflower's mirror composition) */
.meadow--app #danflower {
  position: absolute; bottom: 0; max-width: none;
  height: 92vh; width: auto;
  left: calc(76vw - 39.6vh);
  opacity: 0.6;
}
.bee-home--app { position: absolute; left: calc(76vw + 4px); top: calc(0.24 * 92vh + 8vh - 30px); width: 2px; height: 2px; }
/* the intro column keeps its clearing over the bloom's reach */
.meadow--app ~ main .hero .wrap { position: relative; }

/* the flowering dandelion's own motion: each ligule breathes on its own
   period (inline durations); the whole bloom sways gently. Reduced motion:
   the complete still bloom. */
.motion #danflower .lig {
  transform-box: fill-box; transform-origin: 0% 50%;
  animation-name: ligBreath; animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
@keyframes ligBreath {
  0%, 100% { transform: scale(0.99) rotate(-0.55deg); }
  50%      { transform: scale(1.01) rotate(0.55deg); }
}
.motion #danflower #danhead { animation: danSway 13s ease-in-out infinite; will-change: transform; }
/* the cluster's smaller heads sway on their own periods (inline durations) */
.motion #danflower .danhead-s {
  animation-name: danSway; animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
@keyframes danSway {
  0%, 100% { transform: rotate(-0.8deg); }
  50%      { transform: rotate(0.8deg); }
}

@media (max-width: 980px) {
  /* phone scale (2026-07-13): blooms step right and recede — the full-
     width text column runs across them, so they read as watermarks
     behind the clearing rather than competitors for the ink. Perches
     follow their flowers. */
  .meadow--letter #sunplant { height: 60vh; opacity: 0.28; left: calc(70vw - 25.8vh); }
  .meadow--app #danflower { height: 64vh; opacity: 0.3; left: calc(72vw - 27.5vh); }
  .bee-home--letter { left: calc(70vw + 4px); top: calc(0.24 * 60vh + 40vh - 24px); }
  .bee-home--app { left: calc(72vw + 4px); top: calc(0.24 * 64vh + 36vh - 24px); }
}

/* ==========================================================================
   V10 — THE MASON BEE'S OWN WORLD: the hotel (The Stance) and the three
   petal nesting capsules (Pricing). Same containment, same laws.
   ========================================================================== */
/* The Stance: the reed bundle stands right of the creed */
.meadow--stance #beehotel {
  /* RIGHT-anchored so the bundle can never clip the viewport edge; height
     capped on both axes so the whole cluster is always fully visible
     within the hero zone (full visibility over maximum size) */
  position: absolute; bottom: auto; top: 11vh; max-width: none;
  height: min(62vh, 46vw); width: auto;
  right: 4vw; left: auto;
  opacity: 0.85;
}
.bee-home--stance { position: absolute; right: calc(4vw + min(26.5vh, 19.6vw)); left: auto; top: 17vh; width: 2px; height: 2px; }
/* reduced-motion / no-JS: the resting bees ARE the still-state */
.motion #beehotel .still-bees { display: none; }

/* Pricing: the three capsules rest right of the arrangement */
.meadow--pricing #capsules {
  position: absolute; top: 16vh; max-width: none;
  height: 46vh; width: auto;
  left: calc(76vw - 26vh);
  opacity: 0.92;
}
.bee-home--pricing { position: absolute; left: calc(76vw + 2px); top: calc(16vh + 10vh); width: 2px; height: 2px; }
/* each capsule breathes on its own period — resting, not performing */
.motion #capsules .capsule {
  animation-name: capsuleBreath; animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
@keyframes capsuleBreath {
  0%, 100% { transform: scale(0.994) rotate(-0.3deg); }
  50%      { transform: scale(1.006) rotate(0.3deg); }
}

@media (max-width: 980px) {
  /* phone scale (2026-07-13): the capsules drop BELOW the lede (48vh) —
     at 22vh they sat directly behind the hero text at near-full opacity,
     the site's saturated exception fighting its own words. */
  .meadow--stance #beehotel { height: min(42vh, 60vw); opacity: 0.6; right: 3vw; left: auto; top: 18vh; }
  .meadow--pricing #capsules { height: 26vh; opacity: 0.6; left: calc(68vw - 14.7vh); top: 48vh; }
  .bee-home--stance { right: calc(3vw + 18vw); left: auto; top: 24vh; }
  .bee-home--pricing { left: calc(68vw + 2px); top: 52vh; }
}

/* ==========================================================================
   PRINT (P38, 2026-07-08 ruling) — the book can leave the screen. The
   letter and the stance print as documents: no meadow, no nav, no live
   layers, no form chrome; ink on paper, one measure. Built-to-be-left at
   its most literal.
   ========================================================================== */
@media print {
  #meadow, #meadowplant, #sunplant, #danflower, #voyager, #trail, #seeds,
  .nav, .menu, .wire, .bee, .bee-home, .bee-field, .skip,
  form, .waitform, .authcard, .getstarted, .nav__toggle,
  .footer__col, .phonecase .pchip {
    display: none !important;
  }
  body { background: #fff; color: #000; font-size: 11.5pt; line-height: 1.6; }
  body.grain::before, body.grain::after { display: none; }
  .wrap { max-width: 42rem; padding-inline: 0; }
  .hero, section { padding-block: 1.2rem; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .rule { opacity: 1 !important; }
  .bleed { min-height: auto; }
  .bleed__img { display: none; }
  .pull, .bleed .pull { color: #000; }
  a { text-decoration: none; color: #000; }
  .letter__sig img { filter: none; }
  .footer { border-top: 1px solid #999; }
  .footer__note, .footer__base { color: #333; }
  h1, h2, h3, .mega, .display { break-after: avoid; }
  p, blockquote { orphans: 3; widows: 3; }
}

/* --- P36 (approved 2026-07-08): the demo's second moment ------------------
   The visitor sees the router lead with the OTHER kind of help. The control
   is JS-gated: without JS the page is complete with the first moment and no
   dead affordance shows (the no-JS law). One quiet line, the link register. */
.apswap-row { text-align: center; margin-top: 14px; }
.apswap {
  display: none;
  font-family: var(--serif); font-style: italic; font-size: 0.98rem;
  color: var(--muted); border-bottom: 1px solid var(--line-2);
  padding-bottom: 2px; transition: color 300ms var(--ease), border-color 300ms var(--ease);
}
html.js .apswap { display: inline-block; }
.apswap:hover { color: var(--ink); border-color: var(--honey); }