/* ==========================================================================
   PUBLIC.CSS — the public shell's stylesheet (C-10, spec H9).
   THE CONTRACT: both shells load this sheet — shell-public.html (anonymous
   pages: login, register, about, privacy, terms, billing-return) and
   garden_designer.html (the app shell still needs the gate forms for the
   expired-session path, the base reset, typography, and the site footer).
   Every section here was MOVED out of garden_designer.css (extraction, not
   duplication — the monolith shrank by exactly these selectors); the
   hub-restore block moved out of hub.css (the restore banner renders on the
   public login page). Tokens come via @import — single source in tokens.css.
   ========================================================================== */
@import 'tokens.css';


.is-hidden { display: none !important; }
.is-invisible { visibility: hidden; }


.is-active { }


/* ---- Interactive state rollout (Sprint 2 Phase 3, W3/W7) ---- */

/* Focus-visible: every interactive element gets the visible ring (D30 — 0.40 alpha).
   Inputs keep their shipped :focus ring; this extends the pattern app-wide.
   Covers real focusable controls (buttons, tabs, inputs, links); div-role controls
   (.pal-header, .pal-item, .home-nav-link) carry no tabindex in Sara's shipped
   markup — keyboard-focusability there is her UX call, not this phase's. */
.btn:focus-visible, .btn-primary:focus-visible, .btn-neutral:focus-visible,
.btn-danger:focus-visible, .btn-danger-fill:focus-visible, .cp-submit:focus-visible,
.create-garden-btn:focus-visible, .create-garden-cancel:focus-visible,
.tab-btn:focus-visible, .sub-tab:focus-visible, .mode-tab:focus-visible,
.tb:focus-visible, .hcc-btn:focus-visible, #minimap-toggle:focus-visible, #lang-toggle:focus-visible,
.irr-layer-btn:focus-visible, .lib-cat-pill:focus-visible,
.lib-add-btn:focus-visible, .explore-see-all:focus-visible,
.almanac-header .month-nav button:focus-visible,
.profile-shed-btn:focus-visible, .custom-plant-toggle:focus-visible,
.explore-back-btn:focus-visible, .shared-banner-btn:focus-visible,
.lib-load-more button:focus-visible, .property-cancel-btn:focus-visible,
.plant-modal-close:focus-visible, a:focus-visible,
#search:focus-visible, .create-garden-input:focus-visible,
.info-schedule-input:focus-visible, .info-seasonal-input:focus-visible,
.cp-input:focus-visible, .cp-select:focus-visible, .cp-num:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Disabled: .is-disabled class (admin precedent) + :disabled pseudo.
   Subdued text is intentional — WCAG exempts disabled controls from contrast minimums.
   button:disabled raises specificity above bare class rules (e.g. .tb's cursor: pointer). */
.is-disabled, :disabled, button:disabled { cursor: not-allowed; }
.btn.is-disabled, .btn:disabled, .btn-primary.is-disabled, .btn-primary:disabled,
.btn-neutral.is-disabled, .btn-neutral:disabled, .btn-danger.is-disabled, .btn-danger:disabled,
.btn-danger-fill.is-disabled, .btn-danger-fill:disabled, .cp-submit.is-disabled, .cp-submit:disabled,
.tab-btn.is-disabled, .tab-btn:disabled, .tb.is-disabled, .tb:disabled {
  color: var(--color-text-disabled);
  border-color: var(--color-sand);
  background: var(--color-page);
}

/* Error: text + border pair, never color alone (WCAG 1.4.1) */
.is-error { color: var(--color-error-text); }
.input.is-error, .select.is-error, .textarea.is-error,
.info-schedule-input.is-error, .info-seasonal-input.is-error,
.cp-input.is-error, .cp-select.is-error, .cp-num.is-error {
  border-color: var(--color-danger-text);
}
/* #search ships borderless (its base border declaration is invalid and dropped) —
   error state introduces the border via the token */
#search.is-error { border: var(--border-error); }


/* Typography */
.title { font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: var(--fw-heading); color: var(--color-charcoal); letter-spacing: -0.3px; }
.title-lg { font-family: var(--font-display); font-size: var(--fs-5xl); font-weight: var(--fw-heading); color: var(--color-charcoal); letter-spacing: -0.5px; }
.title-sm { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-heading); color: var(--color-charcoal); }
.subtitle { font-family: var(--font-body); font-weight: var(--fw-body); font-size: var(--fs-md); font-style: italic; color: var(--color-stone-dark); }
.body-text { font-family: var(--font-body); font-weight: var(--fw-body); font-size: var(--fs-sm); color: var(--color-stone-dark); line-height: 1.6; }
.label { font-family: var(--font-voice); font-weight: var(--fw-voice); font-size: var(--fs-base); font-style: italic; color: var(--color-stone-dark); }
.label-sm { font-family: var(--font-ui); font-weight: var(--fw-ui); font-size: var(--fs-xs); color: var(--color-stone-dark); text-transform: uppercase; letter-spacing: 1px; }
.meta { font-family: var(--font-body); font-weight: var(--fw-body); font-size: var(--fs-xs); color: var(--color-stone-dark); }


/* Quiet underlined link — the shared secondary-inline-link pattern
   (login beta note, register beta card, about CTA — one rule, three
   consumers; hostile High round 1, Ulysses: every line load-bearing). */
.quiet-link {
  font-family: var(--font-ui); font-weight: var(--fw-ui);
  font-size: var(--fs-xs);
  color: var(--color-stone-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--dur-fast) var(--ease-standard);
}

.quiet-link:hover {
  color: var(--color-garden);
}

/* Coarse pointers need a real target: 12px text alone is a ~16px hit box
   (hostile High round 1, Ulysses). Vertical padding on an inline element
   widens the hit area without moving the layout. */
@media (pointer: coarse) {
  .quiet-link { padding: 8px 12px; }
}



/* Surfaces */
.surface-app { background: var(--color-parchment); }
.surface-panel { background: var(--color-paper); }
.surface-card { background: var(--color-page); }

/* Cards */
.card { background: var(--color-page); border: var(--border-dashed); border-radius: var(--radius-md); padding: var(--space-md); }
.card-hover:hover { background: var(--color-parchment); }

/* Slim-page shell & paper card — the shared recipe for every standalone page
   outside the app frame (login, register, billing-return, paywall, static
   pages). Consume by dual-class: class="page-shell login-page",
   class="paper-card login-card". Per-page classes carry layout overrides
   only (Ulysses governance 3-4) — never visual restyling. min-height: 100vh
   fills the viewport; the site footer follows in document flow, one scroll
   below the fold (Sara 2026-09-25: the footer is never pinned). */
.page-shell { min-height: 100vh; display: flex; flex-direction: column; align-items: center; background: var(--color-page); background-image: var(--texture-ruled); padding: var(--space-md); }
.paper-card { background: var(--color-paper); border: var(--border-medium); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--space-xl); }


/* Buttons */
.btn { padding: 5px 12px; border: 1px solid var(--color-sand); border-radius: var(--radius-md); background: var(--color-page); font-size: var(--fs-xs); font-family: var(--font-ui); font-weight: var(--fw-ui); color: var(--color-stone-dark); cursor: pointer; }
.btn:hover:not(:disabled):not(.is-disabled) { background: var(--color-sand); color: var(--color-charcoal); }
.btn-active { background: var(--color-sand); border-color: var(--color-garden); color: var(--color-garden); }
.btn-primary { padding: 6px 16px; border: none; border-radius: var(--radius-md); background: var(--color-garden); color: var(--color-page); font-size: var(--fs-xs); font-family: var(--font-ui); font-weight: 600; cursor: pointer; }
.btn-primary:hover:not(:disabled):not(.is-disabled) { background: var(--color-garden-dark); }
.btn-pill { border-radius: var(--radius-pill); }
.btn-neutral { padding: 6px 16px; border: var(--border-medium); border-radius: var(--radius-sm); background: var(--color-paper); color: var(--color-charcoal); font-size: var(--fs-sm); font-family: var(--font-ui); font-weight: var(--fw-ui); cursor: pointer; }
.btn-neutral:hover:not(:disabled):not(.is-disabled) { background: var(--color-sand); }
.btn-danger { padding: 6px 16px; border: 1px solid var(--color-danger); border-radius: var(--radius-sm); background: transparent; color: var(--color-danger-text); font-size: var(--fs-sm); font-family: var(--font-ui); font-weight: var(--fw-ui); cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast); }
.btn-danger:hover:not(:disabled):not(.is-disabled) { background: var(--color-danger); color: var(--color-page); }
.btn-danger-fill { padding: 6px 16px; border: none; border-radius: var(--radius-sm); background: var(--color-danger); color: var(--color-page); font-size: var(--fs-sm); font-family: var(--font-ui); font-weight: var(--fw-ui); cursor: pointer; }
.btn-danger-fill:hover:not(:disabled):not(.is-disabled) { background: var(--color-rose); }



/* Inputs */
.input { padding: 7px 12px; border: 1px solid var(--color-sand); border-radius: var(--radius-md); font-size: var(--fs-sm); font-family: var(--font-body); font-weight: var(--fw-body); background: var(--color-page); color: var(--color-charcoal); }
.input:focus { outline: none; border-color: var(--color-garden); box-shadow: var(--focus-ring); }
.input-pill { border-radius: var(--radius-pill); }
.input.is-readonly { background: var(--color-parchment); color: var(--color-stone-dark); cursor: default; }


/* Loading placeholder — reusable pulsing LG logo */
.lg-loading { text-align: center; display: flex; align-items: center; justify-content: center; }
.lg-loading-icon { opacity: 0.2; animation: pulse var(--dur-ambient) ease-in-out infinite; }
.lg-loading-sm { padding: 12px 0; min-height: 60px; }
.lg-loading-sm .lg-loading-icon { height: 40px; }
.lg-loading-md { padding: 24px 0; min-height: 120px; }
.lg-loading-md .lg-loading-icon { height: 80px; }
.lg-loading-lg { padding: 40px 0; min-height: 180px; }
.lg-loading-lg .lg-loading-icon { height: 120px; }

/* Global loading screen */
#app-loader { position: fixed; inset: 0; z-index: var(--z-loader); background: var(--color-paper); display: flex; align-items: center; justify-content: center; transition: opacity 0.5s var(--ease-standard); }
#app-loader.hidden { opacity: 0; pointer-events: none; }
.app-loader-icon { height: 64px; opacity: 0.3; animation: pulse var(--dur-ambient) ease-in-out infinite; }

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--font-body); font-weight: var(--fw-body); display: flex; flex-direction: column; min-height: 100vh; background: var(--color-parchment); color: var(--color-charcoal); }


/* ---- Site Footer (spec 2026-09-25-site-footer-about) ----
   Mirrors the top bar: charcoal bar, mode-tab links, glass hover. Defined
   ONCE in garden_designer.html — the single shell served at every route —
   so one edit percolates everywhere. Layout: a centered vertical stack —
   links line, brand lockup (the header's icon + wordmark treatment), then
   small print — designed to grow to 2–3 lines (Sara 2026-09-25 PM).
   --footer-h is a min-height floor, not a fixed height, so the stack can
   grow. Everything centers: the corner zones stay decorative-only against
   corner-anchored floating UI (Decision 15). No top border: charcoal
   against parchment is self-separating, as on the top bar. */
#site-footer { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); background: var(--color-charcoal); color: var(--color-paper); min-height: var(--footer-h); flex-shrink: 0; }
.site-footer-links { display: flex; align-items: center; justify-content: center; gap: var(--space-md); flex-wrap: wrap; }
/* Links mirror the header's mode-tab recipe (serif, letterspaced, muted →
   paper on hover): the dark-ground link language of the bar it sits on. */
.site-footer-link { font-family: var(--font-body); font-weight: var(--fw-voice); font-size: var(--fs-md); letter-spacing: 0.5px; color: rgba(245,240,232,0.5); text-decoration: none; padding: var(--space-2xs) var(--space-md); border-radius: var(--radius-sm); transition: color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard); }
.site-footer-link:hover { color: var(--color-paper); background: var(--nav-glass-subtle); }
.site-footer-link:focus-visible { outline: none; box-shadow: var(--focus-ring-dark); }
.site-footer-brand { display: flex; align-items: center; }
/* The wordmark image already carries its own dragonfly — no standalone icon
   (Sara 2026-09-25: the lockup read icon–Liminal–dragonfly–Gardens). */
.site-footer-wordmark { height: 28px; filter: invert(1); opacity: 0.7; }
.site-footer-legal { display: flex; flex-direction: column; align-items: center; gap: var(--space-2xs); text-align: center; }
/* 11px rides below the design system's 12px floor — Sara's explicit call
   (2026-09-25); the one sanctioned exception. */
.site-footer-copy { font-family: var(--font-ui); font-weight: var(--fw-ui); font-size: 11px; color: rgba(245,240,232,0.5); }


/* ---- Login Page ---- */

.login-root {
  display: none;
}

.login-root.is-active {
  display: block;
}

.login-page {
  /* height (not min-height): the page must never exceed the viewport, or
     the card gets pushed below the fold. .gate-content flexes to absorb
     whatever remains below the wordmark. (2026-09-25 layout fix.) dvh
     follow-up (High round 1 #19, applied round 2): on real phones the
     dynamic URL bar makes 100vh taller than the visible viewport. */
  height: 100vh;
  height: 100dvh;
  justify-content: flex-start;
  padding: var(--space-lg);
  gap: var(--space-md);
  overflow-x: hidden;
  overflow-y: auto;
}

.login-card {
  width: clamp(160px, 45%, 280px);
  /* Card follows the gate logo and the pair centers as a stack inside
     .gate-content. (2026-09-25: `margin-top: auto` used to pin the card
     to the gate's bottom edge — hand-tuned on a 13" laptop where the gap
     was small, but at taller/wider viewports it shoved the card below
     the fold. Centering reads well at every size.) */
  margin-bottom: var(--space-xl);
  position: relative;
  z-index: 1;
}

.login-header {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.login-title {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  font-weight: 500;
  color: var(--color-charcoal);
  margin: 0 0 var(--space-xs);
}

.login-subtitle {
  font-family: var(--font-body); font-weight: var(--fw-body);
  font-size: var(--fs-base);
  color: var(--color-stone-dark);
  margin: 0;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.login-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.login-label {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--color-stone-dark);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.login-input {
  font-size: var(--fs-lg);
  padding: var(--space-sm) var(--space-md);
}

.login-error {
  font-family: var(--font-ui); font-weight: var(--fw-ui);
  font-size: var(--fs-sm);
  color: var(--color-danger-text);
  min-height: 20px;
}

.login-submit {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 500;
  padding: var(--space-sm) var(--space-lg);
  margin-top: var(--space-sm);
  background: var(--color-rose-dark);
}

.login-submit:hover:not(:disabled):not(.is-disabled) {
  background: color-mix(in srgb, var(--color-rose-dark) 88%, black);
}

.login-toggle {
  display: block;
  width: 100%;
  margin-top: var(--space-md);
  padding: var(--space-sm);
  font-family: var(--font-body); font-weight: var(--fw-body);
  font-size: var(--fs-md);
  color: var(--color-stone-dark);
  background: none;
  border: none;
  cursor: pointer;
  text-align: center;
  transition: color var(--dur-fast) var(--ease-standard);
}

.login-toggle:hover {
  color: var(--color-garden);
}

/* Private-beta marker (2026-09-25 launch-pages task) — quiet line at the
   foot of the sign-in card linking the public About page. stone-dark
   (5.38:1), not stone (3.49:1) — the -text ramp convention. */
/* (The about link inside the note consumes the shared .quiet-link.) */
.login-beta-note {
  margin: var(--space-xs) 0 0;
  padding: var(--space-sm);
  font-family: var(--font-ui); font-weight: var(--fw-ui);
  font-size: var(--fs-xs);
  color: var(--color-stone-dark);
  text-align: center;
}


/* ---- Garden Gate ---- */

.gate-wordmark {
  text-align: center;
  position: relative;
  z-index: 2;
  padding: var(--space-lg) var(--space-xl);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--color-rose) 25%, transparent) 0%, color-mix(in srgb, var(--color-rose) 12%, transparent) 45%, transparent 75%);
}

.gate-wordmark-title {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-heading);
  color: var(--color-charcoal);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin: 0;
}

.gate-wordmark-subtitle {
  font-family: var(--font-body); font-weight: var(--fw-body);
  font-size: var(--fs-base);
  font-style: italic;
  color: var(--color-stone-dark);
  margin: var(--space-xs) 0 0;
}

.gate-flourish {
  width: 120px;
  height: 1px;
  border: none;
  background-image: var(--ink-flourish);
  margin: var(--space-sm) auto 0;
}

.gate-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 800px;
  min-width: 420px;
  /* Flex absorption: take whatever space remains below the wordmark so
     wordmark + gate always fit the viewport. (Was height: calc(100vh -
     120px) — a magic constant hand-tuned for one laptop class; at other
     heights the card overflowed the fold.) min-height is the floor:
     below it the page scrolls, as before. */
  flex: 1 1 auto;
  height: auto;
  min-height: 560px;
  padding: var(--space-xl) 0;
}

.gate-arch {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

.gate-logo {
  width: 80px;
  height: 120px;
  margin-top: var(--space-sm);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  background-color: var(--color-charcoal);
  -webkit-mask-image: url('/img/brand/lg-icon.png');
  mask-image: url('/img/brand/lg-icon.png');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.gate-botanical {
  position: absolute;
  opacity: 0.7;
  pointer-events: none;
  z-index: 0;
}

.gate-botanical-top-left {
  top: 10%;
  left: -8%;
  transform: rotate(-12deg);
}

.gate-botanical-top-right {
  top: 8%;
  right: -8%;
  transform: rotate(8deg);
}

.gate-botanical-mid-left {
  top: 45%;
  left: -12%;
  transform: rotate(-5deg);
}

.gate-botanical-mid-right {
  top: 50%;
  right: -10%;
  transform: rotate(10deg);
}

.gate-quote {
  font-family: var(--font-body); font-weight: var(--fw-body);
  font-size: var(--fs-md);
  font-style: italic;
  color: var(--color-stone-dark);
  text-align: center;
  max-width: 340px;
  margin-top: var(--space-md);
  position: relative;
  z-index: 1;
  line-height: 1.6;
}

.gate-attribution {
  display: block;
  font-family: var(--font-ui); font-weight: var(--fw-ui);
  font-size: var(--fs-xs);
  font-style: normal;
  color: var(--color-stone-dark);
  margin-top: var(--space-xs);
}

/* SVG token classes — all gate SVG elements get color from these */
.gate-stroke-garden { stroke: var(--color-charcoal); fill: none; }
.gate-stroke-garden-dark { stroke: var(--color-garden-dark); fill: none; }
.gate-stroke-sage { stroke: var(--color-sage); fill: none; }
.gate-stroke-moss { stroke: var(--color-moss); fill: none; }
.gate-stroke-rose { stroke: var(--color-rose); fill: none; }
.gate-stroke-ochre { stroke: var(--color-ochre); fill: none; }
.gate-stroke-mauve { stroke: var(--color-mauve); fill: none; }
.gate-fill-garden { fill: var(--color-garden); stroke: none; }
.gate-fill-sage { fill: var(--color-sage); stroke: none; }
.gate-fill-rose { fill: var(--color-rose); stroke: none; }
.gate-fill-ochre { fill: var(--color-ochre); stroke: none; }
.gate-fill-mauve { fill: var(--color-mauve); stroke: none; }

/* ---- Garden Gate — mobile ---- */
@media (max-width: 480px) {
  .login-page {
    padding: var(--space-sm) var(--space-sm) var(--space-lg);
    gap: var(--space-xs);
  }

  .gate-wordmark {
    padding: var(--space-sm) var(--space-md);
  }

  .gate-content {
    min-width: 0;
    min-height: 520px;
    height: auto;
    padding: var(--space-sm) 0;
  }

  .gate-arch {
    width: 100%;
    overflow: hidden;
  }

  .gate-logo {
    width: 48px;
    height: 72px;
  }

  .login-card {
    width: clamp(140px, 65%, 260px);
    padding: var(--space-lg);
    margin-bottom: var(--space-md);
  }

  .login-title {
    font-size: var(--fs-2xl);
  }

  .gate-wordmark-title {
    font-size: var(--fs-xl);
    letter-spacing: 0.2em;
  }

  .gate-quote {
    font-size: var(--fs-xs);
    max-width: 240px;
    margin-top: var(--space-xs);
  }

  /* Register/login cork board — mobile pass (2026-09-26).
     The 5-column desktop grid overflows at narrow viewports and scatters
     photos/postits below the register card and around the footer. On mobile
     we distill to a single column, keeping the corkboard frame + the form
     slot (register card + Private Beta overlay). Decorative photos and
     index cards hide — they're aesthetic on desktop, unrelated to the
     mobile job of "get to sign up." */
  .cork-board {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: "form";
    max-height: none;
  }

  /* Specificity note: the botanical photos carry .cork-photo alongside
     .cork-slot-*, and `.cork-photo { display: flex; }` (line ~2530) lands
     LATER in source order with equal specificity — a bare `.cork-slot-1
     { display: none; }` here loses the cascade. Qualifying with the
     parent `.cork-board` (0,2,0) beats `.cork-photo` (0,1,0) and hides
     the elements as intended. */
  .cork-board .cork-board-welcome,
  .cork-board .cork-slot-1, .cork-board .cork-slot-2,
  .cork-board .cork-slot-3, .cork-board .cork-slot-4,
  .cork-board .cork-slot-5, .cork-board .cork-slot-6,
  .cork-board .cork-slot-7,
  .cork-board .cork-board-free, .cork-board .cork-board-pro,
  .cork-board .cork-board-lgphoto, .cork-board .cork-board-label {
    display: none;
  }
}


/* ---- PostIt Component (reusable) ---- */

.post-it {
  position: relative;
  width: 180px;
  padding: var(--space-lg) var(--space-md) var(--space-md);
  box-shadow: var(--shadow-cork-card);
  transform: rotate(var(--post-it-rotation, 0deg));
  font-family: var(--font-body); font-weight: var(--fw-body);
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--color-charcoal);
}

.post-it::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, transparent 50%, var(--cork-fold-shadow) 50%);
  border-radius: 0 0 var(--radius-sm) 0;
}

.post-it-pin {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  border-radius: var(--radius-round);
  background: radial-gradient(circle at 40% 35%, var(--pin-highlight-bright), var(--color-danger) 60%);
  box-shadow: var(--shadow-cork-pin);
}

.post-it-body {
  position: relative;
  white-space: pre-wrap;
  overflow-wrap: normal;
}

.post-it-rose {
  background-color: var(--color-rose-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23p)' opacity='0.08'/%3E%3C/svg%3E");
}

.post-it-ochre {
  background-color: var(--color-ochre-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23p)' opacity='0.08'/%3E%3C/svg%3E");
}

.post-it-sage {
  background-color: var(--color-sage-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23p)' opacity='0.08'/%3E%3C/svg%3E");
}

.post-it-mauve {
  background-color: var(--color-mauve-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23p)' opacity='0.08'/%3E%3C/svg%3E");
}

.post-it-indigo {
  background-color: var(--color-indigo-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23p)' opacity='0.08'/%3E%3C/svg%3E");
}



/* ---- Cork Board Elements ---- */

.cork-pin {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  border-radius: var(--radius-round);
  box-shadow: var(--shadow-cork-pin);
  z-index: 1;
}

.cork-pin-red {
  background: radial-gradient(circle at 40% 35%, var(--pin-highlight), var(--color-danger) 60%);
}

.cork-pin-green {
  background: radial-gradient(circle at 40% 35%, var(--pin-highlight), var(--color-garden) 60%);
}

.cork-pin-blue {
  background: radial-gradient(circle at 40% 35%, var(--pin-highlight), var(--color-indigo) 60%);
}

.cork-pin-yellow {
  background: radial-gradient(circle at 40% 35%, var(--pin-highlight), var(--color-ochre) 60%);
}

.cork-index-card {
  position: relative;
  background-color: var(--color-page);
  background-image:
    repeating-linear-gradient(
      transparent, transparent 23px,
      var(--cork-line-color) 23px, var(--cork-line-color) 24px
    ),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23p)' opacity='0.08'/%3E%3C/svg%3E");
  padding: var(--space-md) var(--space-sm) var(--space-sm);
  border-left: 3px solid var(--color-rose);
  box-shadow: var(--shadow-cork-heavy);
  color: var(--color-charcoal);
  transform: rotate(var(--cork-rotation, 0deg));
  text-align: center;
}

.cork-board-pro .cork-index-card {
  border-left-color: var(--color-garden);
}

.cork-card-title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-heading);
  color: var(--color-charcoal);
  margin-bottom: var(--space-xs);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--ink-flourish-border);
}

.cork-card-body {
  font-family: var(--font-body); font-weight: var(--fw-body);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--color-stone-dark, var(--color-charcoal));
}

.cork-photo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--color-page);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23p)' opacity='0.08'/%3E%3C/svg%3E");
  padding: var(--space-sm);
  padding-bottom: var(--space-md);
  box-shadow: var(--shadow-cork-photo);
  transform: rotate(var(--cork-rotation, 0deg));
}

.cork-photo-img {
  display: block;
  width: 80px;
  height: 80px;
  object-fit: contain;
}

.cork-photo-caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: var(--space-xs);
  text-align: center;
}

.cork-photo-name {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-heading);
  color: var(--color-charcoal);
}

.cork-photo-species {
  font-family: var(--font-body); font-weight: var(--fw-body);
  font-size: var(--fs-xs);
  font-style: italic;
  color: var(--color-stone-dark);
}

.cork-photo-note {
  font-family: var(--font-body); font-weight: var(--fw-body);
  font-size: var(--fs-xs);
  color: var(--color-stone-dark);
  line-height: 1.4;
}

.cork-botanical-photo .cork-photo-img {
  width: 70px;
  height: 70px;
}


.cork-botanical-photo {
  max-width: 110px;
}


.cork-wordmark {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-heading);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-charcoal);
  margin: 0;
}

.cork-subtitle {
  font-family: var(--font-body); font-weight: var(--fw-body);
  font-size: var(--fs-xl);
  font-style: italic;
  color: var(--color-stone-dark);
  margin: var(--space-xs) 0 0;
}



/* ---- Register Page (Cork Board) ---- */

.register-root {
  display: none;
}

.register-root.is-active {
  display: block;
}

.register-page {
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  /* Hug the cork board instead of forcing 100vh — on tall displays the board
     is content-height, and the forced viewport height left dead space under
     it, pushing the footer far below (Sara 2026-09-25). */
  min-height: 0;
}

.cork-board {
  position: relative;
  width: 100%;
  max-width: 1100px;
  max-height: calc(100vh - var(--space-md) * 2);
  display: grid;
  grid-template-columns: 1fr 1fr 280px 1fr 1fr;
  grid-template-rows: auto 1fr 1fr 1fr;
  grid-template-areas:
    "label    label    label    label    label"
    "welcome  slot1    form     slot2    slot3"
    "slot4    free     form     pro      pro"
    "slot5    slot6    form     slot7    lgphoto";
  gap: var(--space-xs);
  padding: var(--space-xs);
  align-items: center;
  justify-items: center;
  border-radius: var(--radius-sm);
  border: 14px solid var(--color-cork-dark);
  box-shadow: var(--shadow-cork-board-inset),
              var(--shadow-cork-board-drop);
  background-color: var(--color-cork);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.18'/%3E%3C/svg%3E");
}

.cork-board-welcome { grid-area: welcome; }
.cork-slot-1 { grid-area: slot1; }
.cork-board-label { grid-area: label; text-align: center; padding-top: var(--space-lg); }
.cork-slot-2 { grid-area: slot2; }
.cork-slot-3 { grid-area: slot3; }
.cork-slot-4 { grid-area: slot4; }
.cork-board-free { grid-area: free; }
.cork-board-form { grid-area: form; align-self: stretch; display: flex; align-items: center; justify-content: center; }
.cork-board-pro { grid-area: pro; }
.cork-slot-5 { grid-area: slot5; }
.cork-slot-6 { grid-area: slot6; }
.cork-slot-7 { grid-area: slot7; }
.cork-board-lgphoto { grid-area: lgphoto; }


.cork-register-card {
  position: relative;
  background: var(--color-paper);
  border: 2px solid var(--color-rose);
  border-radius: var(--radius-sm);
  padding: var(--space-xl);
  box-shadow: var(--shadow-cork-photo);
  width: 260px;
}

.cork-register-card .login-header {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.cork-register-card .login-title {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: 500;
  color: var(--color-charcoal);
  margin: 0 0 var(--space-xs);
}

.cork-register-card .login-subtitle {
  font-family: var(--font-body); font-weight: var(--fw-body);
  font-size: var(--fs-md);
  color: var(--color-stone-dark);
  margin: 0;
}

.cork-register-card .login-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.cork-register-card .login-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.cork-register-card .login-label {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--color-stone-dark);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cork-register-card .login-input {
  font-size: var(--fs-base);
  padding: var(--space-sm) var(--space-md);
}

.register-error {
  font-family: var(--font-ui); font-weight: var(--fw-ui);
  font-size: var(--fs-sm);
  color: var(--color-danger-text);
  min-height: 20px;
}

/* Subscriptions MVP (T7) — approved mockup:
   docs/superpowers/mockups/2026-09-16-subscriptions/register.html.
   Price at the TOP of the register card, prominent on purpose
   (Sara: pricing must never feel buried/deceptive). */
.register-price {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  color: var(--color-charcoal);
  margin: 0 0 var(--space-xs);
}

.register-price small {
  font-size: var(--fs-sm);
  color: var(--color-stone-dark);
}

/* Shown when landing back on /register from a cancelled checkout
   (?billing=cancelled). */
.register-note {
  font-family: var(--font-ui); font-weight: var(--fw-ui);
  font-size: var(--fs-xs);
  color: var(--color-stone-dark);
  margin: var(--space-xs) 0 0;
}

/* Legal-assent line (required-docs spec §4): sits at the moment of assent —
   above the register submit button, under the paywall checkout CTA. */
.register-legal { font-family: var(--font-ui); font-weight: var(--fw-ui); font-size: var(--fs-xs); color: var(--color-stone-dark); margin: var(--space-xs) 0 0; }
.register-legal a, .paywall-legal a { color: var(--color-garden); }
.paywall-legal { font-family: var(--font-ui); font-weight: var(--fw-ui); font-size: var(--fs-xs); color: var(--color-stone-dark); margin: var(--space-sm) 0 0; }

/* Closed-signups state (2026-09-25 launch-pages task) — the Private Beta
   notify card overlaid ON the create-account card (Logan: overlay, not
   stacked — the board keeps its normal height). The greyed register card
   stays mounted underneath; the overlay is the only interactive element
   except the sign-in link, which stays clickable and fully legible. */
.cork-form-stack {
  position: relative;
}

.cork-beta-card {
  position: absolute;
  left: 50%;
  top: 50%;
  /* True center: the earlier -46% bias lifted the overlay's top edge into
     the inert card's subtitle at several viewports (High round 1, Ulysses). */
  transform: translate(-50%, -50%) rotate(-1.5deg);
  z-index: var(--z-stack);
  width: 240px;
  background: var(--color-paper);
  border: 2px solid var(--color-moss);
  border-radius: var(--radius-sm);
  padding: var(--space-lg) var(--space-md) var(--space-md);
  /* Heavy cork shadow: the overlay must read ABOVE the inert card it
     covers (the deleted construction banner used this same weight). */
  box-shadow: var(--shadow-cork-heavy);
  text-align: center;
  color: var(--color-charcoal);
}

.cork-beta-title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-heading);
  color: var(--color-charcoal);
  margin: 0 0 var(--space-xs);
}

.cork-beta-body {
  font-family: var(--font-body); font-weight: var(--fw-body);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--color-stone-dark);
  margin: 0 0 var(--space-md);
}

.cork-beta-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.cork-beta-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  text-align: left;
}

/* (The field label consumes the shared .label-sm — markup, not CSS.) */

.cork-beta-submit {
  /* 44px floor: the primary conversion action of the closed-register page —
     same standard as .about-cta-btn (High round 1, Ulysses). */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cork-beta-input {
  font-size: var(--fs-base);
  padding: var(--space-sm) var(--space-md);
}

.cork-beta-error {
  font-family: var(--font-ui); font-weight: var(--fw-ui);
  font-size: var(--fs-xs);
  color: var(--color-danger-text);
  min-height: 16px;
  text-align: left;
}

.cork-beta-success {
  display: none;
  font-family: var(--font-body); font-weight: var(--fw-body);
  font-size: var(--fs-sm);
  color: var(--color-garden-dark);
  margin: 0;
}

.cork-beta-card.is-submitted .cork-beta-form {
  display: none;
}

.cork-beta-card.is-submitted .cork-beta-success {
  display: block;
}

/* (The about link consumes the shared .quiet-link — this class keeps only
   its layout job inside the beta card.) */
.cork-beta-about {
  display: inline-block;
  margin-top: var(--space-md);
}

.cork-register-card.is-disabled .login-header,
.cork-register-card.is-disabled .login-form {
  opacity: 0.4;
  pointer-events: none;
}

/* The dead signup pitch's price/subtitle lines sit behind the overlay at
   most widths but half-peek above its top edge at others (High round 1:
   "$4.44 /" sliced at 360/390) — hidden in the closed state. visibility
   (not display) keeps the card's geometry, so the overlay's centering is
   untouched. The overlay IS the message now. */
.cork-register-card.is-disabled .register-price,
.cork-register-card.is-disabled .login-subtitle {
  visibility: hidden;
}

/* The sign-in link stays live in the closed state — a visible dead link
   on a launch-facing page fails review (Ulysses/Franny hostile round). */
.cork-register-card.is-disabled .register-toggle {
  pointer-events: auto;
}


/* Billing return page (slim page like login/register) — approved mockup:
   docs/superpowers/mockups/2026-09-16-subscriptions/billing-return.html. */
.billing-return-root {
  display: none;
}

.billing-return-root.is-active {
  display: block;
}

.billing-return {
  justify-content: center;
}

.billing-return-card {
  max-width: 440px;
  text-align: center;
}

.billing-return-title {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-heading);
  color: var(--color-charcoal);
  margin: 0 0 var(--space-sm);
}

.billing-return-body {
  font-family: var(--font-body); font-weight: var(--fw-body);
  font-size: var(--fs-lg);
  color: var(--color-stone-dark);
  margin: 0 0 var(--space-lg);
}

.billing-return-spinner {
  width: 28px;
  height: 28px;
  margin: 0 auto var(--space-md);
  border: 3px solid var(--color-sand);
  border-top-color: var(--color-garden);
  border-radius: var(--radius-round);
  animation: billing-return-spin 1s linear infinite;
}

@keyframes billing-return-spin {
  to { transform: rotate(360deg); }
}

.billing-return-quiet-link {
  display: inline-block;
  margin-top: var(--space-md);
  font-family: var(--font-ui); font-weight: var(--fw-ui);
  font-size: var(--fs-xs);
  color: var(--color-stone-dark);
}

.billing-return-error {
  font-family: var(--font-ui); font-weight: var(--fw-ui);
  font-size: var(--fs-sm);
  color: var(--color-danger-text);
  min-height: 20px;
}


/* ---- Static Pages (footer SPEC 2026-09-25-site-footer-about §4) ----
   Consumes the shared .page-shell/.paper-card via dual-class; the rules here
   are this page's layout overrides only (governance rule 4). Root mirrors
   the footer-aware slim-root pattern (commit 1). */

.about-root {
  display: none;
}

.about-root.is-active {
  display: block;
}

.static-page {
  justify-content: flex-start;
  padding: var(--space-lg);
  gap: var(--space-md);
  /* Hug the content — the footer lives right below the card, not padded
     below the fold by a forced viewport height (Sara 2026-09-25, same
     treatment as the register board). */
  min-height: 0;
}

.static-page-card {
  width: 100%;
  max-width: 65ch;
  margin-top: var(--space-xl);
  margin-bottom: var(--space-md);
}

.static-page-icon { height: 40px; margin-bottom: var(--space-sm); }

/* Markdown body — rendered output has no classes, so scoped descendants
   (Ulysses rulings, footer SPEC §4). Title consumes the shared .title
   class in the template; nothing here is a visual override of the card. */
.static-page-body p,
.static-page-body li { font-family: var(--font-body); font-weight: var(--fw-body); font-size: var(--fs-base); color: var(--color-charcoal); line-height: 1.7; }
.static-page-body h2 { font-family: var(--font-display); font-weight: var(--fw-heading); font-size: var(--fs-2xl); letter-spacing: var(--ls-tight); color: var(--color-charcoal); margin: var(--space-lg) 0 var(--space-xs); }
.static-page-body h3 { font-family: var(--font-display); font-weight: var(--fw-heading); font-size: var(--fs-xl); color: var(--color-charcoal); margin: var(--space-md) 0 var(--space-2xs); }
.static-page-body a { color: var(--color-garden); }
.static-page-body blockquote { font-family: var(--font-voice); font-weight: var(--fw-voice); font-style: italic; color: var(--color-stone-dark); margin: var(--space-md) 0; padding-left: var(--space-md); border-left: var(--border-dotted); }



/* ===========================================================
   ABOUT PAGE — the polaroid collage (2026-09-25, Phase 3)
   Bespoke rendering for /about (SPEC amendment below the
   footer SPEC's own content): the page ground is a pile of
   polaroids — the 24 garden photos tiled edge-to-edge so no
   page background shows anywhere — with torn-paper clippings
   carrying the copy. Slim page: the document scrolls (Sara's
   v9 scroll model); the footer sits below in the shell.
   =========================================================== */

.about-page {
  position: relative;
  /* Cover the viewport even if content is short; content can grow taller. */
  min-height: 100vh;
  overflow: hidden;
  /* Safety net under the pile: rotated tiles expose hairline slivers at
     corners and page edges. Cork (the desk, not white) shows through
     instead of body parchment — the full-bleed contract. */
  background: var(--color-cork);
}

/* --- the pile: absolute ground layer, grid-tiled, rotated to overlap --- */

.about-pile {
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
  display: grid;
  /* LARGE prints, each photo once (Logan 2026-09-25). Column width is
     viewport-clamped so cells stay near the photos' native 3:2 aspect at
     every common size — the frame matches the photo instead of cropping
     it dramatically (fit-vs-fill was never the issue; aspect was). */
  grid-template-columns: repeat(auto-fill, minmax(clamp(280px, 33vw, 440px), 1fr));
  grid-auto-rows: 290px;
  /* dense: the span-2 portrait tiles below leave holes under sparse flow,
     and a hole has no background — body parchment shows through (hostile
     round 1, Ulysses major). */
  grid-auto-flow: dense;
  overflow: hidden;
}

/* Screen-reader-only text (shared a11y utility — first consumer). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.about-tile {
  background: var(--color-page);
  /* polaroid mat: --space-sm sides (8px), a deliberate 20px caption lip —
     the mat proportion is the artifact's own metric, not a spacing token */
  padding: var(--space-sm) var(--space-sm) 20px;
  box-shadow: var(--shadow-cork-photo);
  /* scale > 1 + rotation: neighbors interlock, no background peeks through */
  transform: rotate(-2.4deg) scale(1.16);
}

.about-tile img {
  display: block;
  width: 100%;
  height: 100%;
  /* cover: the photo FILLS its frame (Logan 2026-09-25 — no fit-letterbox).
     Frames are shaped to the photos' aspects (is-portrait spans two rows;
     the 3:2-ish column clamp), so cover crops only a few percent. */
  object-fit: cover;
}

/* Hand-scattered variety, pure CSS patterns (no JS styling). Rotations,
   offsets, and scales break the grid lattice — the read is a pile, not a
   rotated mosaic (hostile round 1, Ulysses). */
.about-tile:nth-child(7n+2) { transform: rotate(2.2deg) translateY(10px) scale(1.13); }
.about-tile:nth-child(7n+3) { transform: rotate(-1.6deg) translateX(-8px) scale(1.17); z-index: var(--z-stack); }
.about-tile:nth-child(7n+4) { transform: rotate(3.1deg) translateY(-8px) scale(1.14); }
.about-tile:nth-child(7n+5) { transform: rotate(-2.6deg) translateX(9px) scale(1.16); z-index: var(--z-stack); }
.about-tile:nth-child(7n+6) { transform: rotate(1.5deg) translateY(12px) scale(1.12); }
.about-tile:nth-child(7n+7) { transform: rotate(-2deg) translateX(-10px) scale(1.18); z-index: var(--z-stack); }

/* Portrait photos span two rows, making a tall cell that matches their
   2:3 aspect instead of cropping them into a landscape window. */
.about-tile.is-portrait { grid-row: span 2; z-index: var(--z-stack); }

/* --- clippings: torn paper, pins OUTSIDE the clip-path --- */

.about-pin-wrap {
  position: relative;
  /* The drop shadow lives on the WRAP, not the clipping: clip-path clips
     the element's own painted output, so a shadow declared on the clipped
     element can never render (High round 1, Ulysses major). The wrap is
     unclipped, so the shadow paints around the torn paper. */
  box-shadow: var(--shadow-cork-heavy);
}

.about-pin-wrap > .cork-pin {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-pin);
}

.about-clipping {
  background: var(--color-paper);
  color: var(--color-charcoal);
}

/* torn edges — four hand-jittered variants */
.about-hero-clipping {
  clip-path: polygon(1% 4%, 4% 0%, 52% 2%, 97% 0%, 100% 5%, 99% 52%, 100% 95%, 96% 100%, 48% 98%, 3% 100%, 0% 95%, 1% 48%);
}

.about-letter {
  clip-path: polygon(0% 2%, 3% 0%, 51% 1%, 98% 0%, 100% 3%, 99% 50%, 100% 98%, 97% 100%, 50% 99%, 2% 100%, 0% 97%, 1% 51%);
}

.about-app {
  clip-path: polygon(1% 3%, 5% 0%, 55% 2%, 96% 0%, 100% 4%, 99% 55%, 100% 96%, 95% 100%, 45% 98%, 4% 100%, 0% 96%, 1% 50%);
}

.about-cta {
  clip-path: polygon(1% 4%, 5% 0%, 55% 2%, 96% 0%, 100% 4%, 99% 55%, 100% 96%, 95% 100%, 45% 98%, 4% 100%, 0% 96%, 1% 50%);
}

/* --- content stack above the pile --- */

.about-content {
  position: relative;
  z-index: var(--z-lift);
  max-width: 960px;
  margin: 0 auto;
  padding: var(--space-2xl) var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

.about-hero {
  display: flex;
  justify-content: center;
}

.about-hero-clipping {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-lg) var(--space-xl) var(--space-md);
  transform: rotate(-1deg);
  text-align: center;
}

.about-hero-logo {
  width: min(170px, 42vw);
  height: auto;
  display: block;
}

.about-hero-tag {
  margin: 0;
  font-family: var(--font-body); font-weight: var(--fw-body);
  font-size: var(--fs-md);
  font-style: italic;
  color: var(--color-stone-dark);
}

/* --- the letter + founder photo --- */

.about-letter-row {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--space-xl);
  align-items: center;
}

.about-letter {
  padding: var(--space-2xl) var(--space-xl) var(--space-xl);
  transform: rotate(0.5deg);
  font-family: var(--font-body); font-weight: var(--fw-body);
  font-size: var(--fs-lg);
  line-height: 1.75;
}

.about-letter p {
  margin: 0 0 var(--space-md);
  max-width: 68ch;
}

.about-letter-hello {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-heading);
  line-height: 1.2;
}

.about-letter-sign {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-xl);
  text-align: right;
  margin-bottom: 0;
}

.about-link {
  color: var(--color-garden);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--dur-fast) var(--ease-standard);
}

.about-link:hover {
  color: var(--color-garden-dark);
}

.about-founder {
  margin: 0;
  background: var(--color-page);
  padding: 10px 10px 14px;
  box-shadow: var(--shadow-cork-heavy);
  transform: rotate(2deg);
  justify-self: center;
  max-width: 320px;
}

.about-founder-img {
  display: block;
  width: 100%;
  height: auto;
  /* reserved box: the pile is sized from the page height at fill time; a
     late-decoding image growing the page would otherwise bare the bottom
     (hostile round 1, Franny medium). */
  aspect-ratio: 1042 / 1170;
  object-fit: cover;
}

.about-founder-cap {
  margin-top: var(--space-xs);
  text-align: center;
  font-family: var(--font-voice);
  font-weight: var(--fw-voice);
  font-style: italic;
  font-size: var(--fs-sm);
  color: var(--color-stone-dark);
}

/* --- the app copy clipping --- */

.about-app-wrap {
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
}

.about-app {
  padding: var(--space-2xl) var(--space-xl) var(--space-xl);
  transform: rotate(-0.6deg);
  font-family: var(--font-body); font-weight: var(--fw-body);
  font-size: var(--fs-lg);
  line-height: 1.7;
}

.about-app p {
  margin: 0 0 var(--space-md);
}

.about-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-heading);
  letter-spacing: var(--ls-tight);
  color: var(--color-charcoal);
  margin: var(--space-lg) 0 var(--space-xs);
}

/* --- private beta CTA --- */

.about-cta-wrap {
  max-width: 620px;
  margin: 0 auto;
  width: 100%;
}

.about-cta {
  padding: var(--space-2xl) var(--space-xl) var(--space-xl);
  transform: rotate(0.8deg);
  text-align: center;
}

.about-cta-title {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-heading);
  color: var(--color-charcoal);
  margin: 0 0 var(--space-sm);
}

.about-cta-body {
  font-family: var(--font-body); font-weight: var(--fw-body);
  font-size: var(--fs-lg);
  line-height: 1.6;
  color: var(--color-stone-dark);
  margin: 0 0 var(--space-lg);
}

.about-cta-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.about-cta-btn {
  font-size: var(--fs-sm);
  padding: var(--space-sm) var(--space-xl);
  /* 44px floor: the primary conversion action must be a comfortable tap
     target on phones (hostile round 1, Ulysses medium). */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* (The quiet sign-in link consumes the shared .quiet-link.) */

/* --- about page: mobile (slim pages render pre-JS; @media is the
   documented exception, same as login/register) --- */

@media (max-width: 700px) {
  .about-content {
    padding: var(--space-xl) var(--space-md);
    gap: var(--space-xl);
  }

  .about-letter-row {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .about-founder {
    max-width: 260px;
    margin-top: calc(var(--space-sm) * -1);
  }

  .about-letter,
  .about-app {
    font-size: var(--fs-base);
    padding: var(--space-xl) var(--space-md) var(--space-lg);
  }
}
.static-page-body code { font-family: var(--font-mono); font-size: var(--fs-sm); }
.static-page-body ul, .static-page-body ol { padding-left: var(--space-lg); }

.static-page-back {
  display: inline-block;
  margin-top: var(--space-md);
  font-family: var(--font-ui); font-weight: var(--fw-ui);
  font-size: var(--fs-xs);
  color: var(--color-stone-dark);
}

.static-page-error {
  font-family: var(--font-ui); font-weight: var(--fw-ui);
  font-size: var(--fs-sm);
  color: var(--color-danger-text);
}

.register-submit {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 500;
  padding: var(--space-sm) var(--space-lg);
  margin-top: var(--space-sm);
  background: var(--color-rose-dark);
}

.register-submit:hover:not(:disabled):not(.is-disabled) {
  background: color-mix(in srgb, var(--color-rose-dark) 88%, black);
}

.register-toggle {
  display: block;
  width: 100%;
  margin-top: var(--space-md);
  padding: var(--space-sm);
  font-family: var(--font-body); font-weight: var(--fw-body);
  font-size: var(--fs-md);
  color: var(--color-stone-dark);
  text-decoration: none;
  text-align: center;
  transition: color var(--dur-fast) var(--ease-standard);
}

.register-toggle:hover {
  color: var(--color-garden);
}



/* ---- Register Page — mobile ---- */
@media (max-width: 480px) {
  .register-page {
    padding: var(--space-md) var(--space-sm);
  }

  .cork-board {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-sm);
  }

  .cork-board-form {
    order: -1;
  }

  .cork-register-card {
    width: 100%;
    max-width: 300px;
  }

  .cork-board-label {
    padding-top: var(--space-sm);
  }
}



/* --- Restore banner (on login page — T8) --- */

.hub-restore-mount {
    display: contents;
}

.hub-restore-banner {
    padding: var(--space-lg);
    background: var(--color-paper);
    border-left: 3px solid var(--color-danger);
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    font-family: var(--font-body);
    max-width: 480px;
    margin: var(--space-lg) auto;
    box-shadow: var(--shadow-md);
}

.hub-restore-title {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    color: var(--color-ink);
}

.hub-restore-body {
    font-size: var(--fs-base);
    color: var(--color-charcoal);
    line-height: 1.5;
}

.hub-restore-label {
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--fs-md);
    color: var(--color-stone-dark);
}

.hub-restore-input {
    padding: var(--space-sm);
    border: var(--border-medium);
    border-radius: var(--radius-sm);
    background: var(--color-page);
    color: var(--color-charcoal);
    font-family: var(--font-body);
    font-size: var(--fs-base);
}

.hub-restore-input:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.hub-restore-error-slot {
    display: block;
    min-height: 0;
}

.hub-restore-error {
    font-size: var(--fs-base);
    color: var(--color-danger);
    padding-top: var(--space-xs);
}

.hub-restore-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

.hub-restore-btn {
    padding: var(--space-xs) var(--space-md);
    background: transparent;
    border: var(--border-medium);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: var(--fs-base);
    color: var(--color-charcoal);
}

.hub-restore-btn:hover {
    background: var(--color-parchment);
}

.hub-restore-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.hub-restore-btn-primary {
    background: var(--color-garden);
    color: var(--color-page);
    border-color: var(--color-garden);
}

.hub-restore-btn-primary:hover {
    background: var(--color-garden-dark);
    border-color: var(--color-garden-dark);
}