/* ============================================================================
   AllArounder - shared public stylesheet ("Soft Earth, gallery-grade")
   Olive Branch palette only. Pairing 3: Rubik + Assistant.
   This file is self-contained: no dependency on portal-v2.js or portal-v2.css.

   FONTS (each public page adds this <link>, replacing the Heebo-only one;
   keep the existing preconnect lines):
   https://fonts.googleapis.com/css2?family=Rubik:wght@500;700;800;900&family=Assistant:wght@300;400;500;600;700&display=swap

   ----------------------------------------------------------------------------
   DECORATION RULE (HARD — Nave 2026-06-12): decorative graphics on this site are
   the codex watercolor assets in /assets/watercolor/ ONLY (mask-faded, multiply-
   blended — components in section "WATERCOLOR" below). Hand-authored SVG path
   line-art for decoration is BANNED. Functional UI glyphs <=24px (check, x,
   chevron, plus, lock) are exempt. Full rule: DESIGN.md "Visual Motifs".

   FUNCTIONAL GLYPHS still styled here: .aa-check, .aa-x, .aa-faq-plus,
   .aa-list li svg. Use simple standard 24x24 stroke glyphs for those — never
   botanical shapes.
   ========================================================================== */

/* ============================================================
   1. TOKENS
   ============================================================ */
:root {
  /* Brand hues (Olive Branch only) */
  --olive: #5A7040;
  --oliveH: #4A5D33;
  --forest: #3D4A2D;
  --sage: #8FA67A;
  --sage-text: #57654A;
  --lsage: #C4DBC0;
  --dark-olive: #2A3020;
  --dusty-rose: #D4A0A0;

  /* Unified muted (kills the #7A8A6A AA failure on the system pages) */
  --muted: #5A6050;

  /* Editorial aliases (same hues, editorial naming) */
  --ink: #2A3020;
  --ink-soft: #3D4A2D;
  --ink-mute: #5A6050;

  /* Paper ladder (replaces the binary white/cream alternation) */
  --paper-0: #FBF8F2; /* gallery white: card/plate surface */
  --paper-1: #F5F0E8; /* cream: dominant page base */
  --paper-2: #EEE9DF; /* linen: hero + alternate sections */
  --paper-3: #E8EDE1; /* olive-tinted soft panel */
  --paper-4: #E3DCCD; /* deep parchment: table heads, sparse accents */

  /* The one warm moment per page (background only, with --ink text) */
  --rose-chip-bg: #EAD3D3;

  /* Decorative alphas */
  --blob-sage: rgba(196, 219, 192, .14);
  --glass-on-dark: rgba(245, 240, 232, .08);
  --hairline-c: rgba(87, 101, 74, .28);
  --hairline: 1px solid rgba(87, 101, 74, .28);

  /* Type */
  --font-display: 'Rubik', sans-serif;
  --font-body: 'Assistant', sans-serif;

  /* Radii (organic hand-thrown signature; cards never over 20px) */
  --r-card: 16px 18px 16px 20px;
  --r-chip: 14px 16px 14px 18px;
  --r-panel: 22px 26px 22px 30px; /* hero/CTA PANELS only, never cards */
  --r-blob: 46% 54% 58% 42% / 48% 42% 58% 52%;
  --r-arch: 160px 160px 18px 18px;
  --r-arch-sm: 120px 120px 14px 14px; /* under 720px */
  --r-pill: 999px;

  /* Shadows (forest-tinted, single layer, never black) */
  --shadow-rest: 0 4px 16px rgba(90, 112, 64, .08);
  --shadow-lift: 0 14px 36px rgba(61, 74, 45, .13);
  --shadow-modal: 0 24px 48px rgba(61, 74, 45, .24);

  /* Texture (cream/linen sections only; never on forest) */
  --linen-dots: radial-gradient(rgba(90, 112, 64, .035) 1px, transparent 1.4px);

  /* Legacy aliases so leftover page-specific rules keep resolving
     after each page drops its duplicated token block.
     --white is a LEGACY card-surface token only (new plates use --paper-0);
     never use it for text or section backgrounds. */
  --cream: #F5F0E8;
  --light-sage: #C4DBC0;
  --white: #FBF8F2; /* legacy alias resolves to gallery white (paper-0); pure #FFFFFF is off-palette */
  --border: rgba(87, 101, 74, .28);
  --font: var(--font-body);
  --radius-sm: 10px;
  --radius-md: var(--r-card);
  --radius-lg: var(--r-panel);
  --shadow: var(--shadow-rest);
  --shadow-lg: var(--shadow-lift);
}

/* ============================================================
   2. BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.125rem;
  background: var(--paper-1);
  color: var(--ink);
  line-height: 1.8;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* Headings: Rubik. Hebrew never gets positive letter-spacing;
   -0.02em max (tighter collides Hebrew at heavy weight). */
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--forest); }
h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); font-weight: 900; line-height: 1.12; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.75rem); font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; }
h3 { font-size: 1.75rem; font-weight: 700; line-height: 1.3; letter-spacing: 0; }
h4 { font-size: 1.375rem; font-weight: 700; line-height: 1.4; letter-spacing: 0; }

/* Rubik italic: color carries the emphasis for consistency. */
h1 em, h2 em, h3 em, h4 em { font-style: normal; color: var(--olive); }
.aa-on-dark h1 em, .aa-on-dark h2 em, .aa-on-dark h3 em { color: var(--lsage); }

/* Anything under 22px stays Assistant, never the serif. */
small, .aa-caption { font-family: var(--font-body); font-size: .875rem; color: var(--ink-mute); }

/* Serif numerals for figures/KPIs (Latin glyphs, not reader prose) */
.aa-num { font-family: var(--font-display); font-weight: 700; color: var(--forest); }

/* Focus clarity (matches the existing input focus ring) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid transparent;
  box-shadow: 0 0 0 3px rgba(90, 112, 64, .25);
}

/* ============================================================
   3. LAYOUT HELPERS
   ============================================================ */
.aa-container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 28px; }
.aa-container--narrow { max-width: 720px; } /* editorial text measure */
.aa-measure { max-inline-size: 720px; }

/* Section rhythm: 96px desktop / 56px mobile */
.aa-section { position: relative; padding-block: 96px; }
.aa-section--art { overflow: hidden; } /* required parent for blobs and bleeds */

/* Paper ladder surfaces */
.bg-paper-0 { background-color: var(--paper-0); }
.bg-paper-1 { background-color: var(--paper-1); }
.bg-paper-2 { background-color: var(--paper-2); }
.bg-paper-3 { background-color: var(--paper-3); }
.bg-paper-4 { background-color: var(--paper-4); }

/* Linen texture: combine with a cream/linen surface. Never on forest. */
.aa-linen { background-image: var(--linen-dots); background-size: 26px 26px; }

/* Table heads / sub-footer accents (sparse) */
.aa-thead { background: var(--paper-4); }

/* Grids: explicit mobile fallback per DESIGN.md */
.aa-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.aa-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.aa-grid-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }

@media (max-width: 900px) {
  .aa-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .aa-section { padding-block: 56px; }
  .aa-grid-2, .aa-grid-3 { grid-template-columns: 1fr; }      /* content cards: 1 col */
  .aa-grid-tiles { grid-template-columns: repeat(2, 1fr); }   /* stat/icon tiles: 2 col */
}

/* ============================================================
   4. EYEBROWS, CHIPS, SECTION HEADS
   ============================================================ */
.aa-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-weight: 600; font-size: .8rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--sage-text);
}
/* Hebrew gets NO positive letter-spacing ever (pages carry lang="he") */
.aa-eyebrow:lang(he), .aa-chip-inline:lang(he) { letter-spacing: 0; text-transform: none; }

/* Eyebrow as a pill chip: leaf SVG + the existing label, moved not retyped */
.aa-chip-inline {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-weight: 600; font-size: .8rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--sage-text);
  background: var(--paper-0);
  border: var(--hairline);
  border-radius: var(--r-pill);
  padding: 7px 16px;
}
.aa-chip-inline svg { inline-size: 15px; block-size: 15px; color: var(--olive); flex-shrink: 0; }

/* Icon badge chip (figure lines, service icons sit inside or beside it) */
.aa-chip {
  inline-size: 46px; block-size: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--paper-3);
  color: var(--olive);
  border: var(--hairline);
  border-radius: var(--r-chip);
}
.aa-chip svg { inline-size: 24px; block-size: 24px; }

/* The ONE dusty-rose moment per page: background tint + dark-olive text only */
.aa-rose-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--rose-chip-bg);
  color: var(--dark-olive);
  font-family: var(--font-body); font-weight: 600; font-size: .85rem;
  border-radius: var(--r-pill);
  padding: 6px 14px;
}

/* Section heads: aligned start, eyebrow chip + serif H2 */
.aa-sec-head { text-align: start; margin-block-end: 48px; }
.aa-sec-head h2 { margin-block: 14px 12px; }
.aa-sec-sub { color: var(--ink-mute); font-size: 1.05rem; max-inline-size: 720px; text-align: start; }

/* ============================================================
   5. HERO ARCHETYPE: warm linen gallery wall
   ============================================================ */
.aa-hero {
  position: relative; overflow: hidden;
  background-color: var(--paper-2);
  background-image: var(--linen-dots);
  background-size: 26px 26px;
  padding-block: 96px;
}
@media (max-width: 720px) { .aa-hero { padding-block: 56px; } }

.aa-hero-grid { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; }
@media (min-width: 900px) {
  .aa-hero-grid { grid-template-columns: 7fr 5fr; }
}

.aa-hero-copy { text-align: start; position: relative; z-index: 2; }
.aa-hero-copy .aa-chip-inline { margin-block-end: 22px; }
.aa-hero-copy h1 { margin-block-end: 24px; }
.aa-hero-sub { color: var(--ink-mute); max-inline-size: 580px; margin-block-end: 36px; }
.aa-hero-sub strong { color: var(--ink-soft); font-weight: 600; }
.aa-hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }

/* Art column: stacks under at low opacity below 900px */
.aa-hero-art { position: relative; z-index: 1; }
@media (max-width: 899.98px) {
  .aa-hero-art { max-inline-size: 420px; opacity: .85; }
}

/* Scroll indicator, recolored to sage for the light hero */
.aa-hero-scroll-line { inline-size: 1px; block-size: 40px; background: linear-gradient(to bottom, rgba(143, 166, 122, .7), transparent); }

/* ============================================================
   6. BLOBS (soft sage background blobs — kept for non-botanical use)
   ============================================================ */
/* Blob mask variant for portraits when the arch is not wanted */
.aa-blob-mask { border-radius: var(--r-blob); overflow: hidden; }

/* Soft sage blob: 1-2 per section, parent needs .aa-section--art (overflow hidden),
   never behind body text */
.aa-blob {
  position: absolute;
  inline-size: 340px; block-size: 300px;
  border-radius: var(--r-blob);
  background: radial-gradient(closest-side, rgba(196, 219, 192, .16), transparent);
  pointer-events: none;
}

/* ============================================================
   8. GALLERY PLATES (card language)
   ============================================================ */
.aa-plate {
  background: var(--paper-0);
  border: var(--hairline);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-rest);
  padding: 32px 28px;
}

/* Figure line: serif numeral (existing 01/02 etc.) or hairline + .aa-chip badge */
.aa-figure { display: flex; align-items: center; gap: 12px; margin-block-end: 16px; }
.aa-figure-num {
  font-family: var(--font-display); font-weight: 700; font-size: 1.375rem;
  line-height: 1; color: var(--sage-text);
}
.aa-figure-rule { inline-size: 24px; block-size: 1px; background: var(--hairline-c); flex-shrink: 0; }

/* Lists with SVG bullets (kills the glyph check/x and the brown bullets):
   positives get .aa-check (sage-text), negatives get .aa-x (ink-mute) */
.aa-list { list-style: none; }
.aa-list li {
  display: flex; align-items: flex-start; gap: 10px;
  line-height: 1.65; margin-block-end: 12px;
}
.aa-list li > svg { inline-size: 16px; block-size: 16px; flex-shrink: 0; margin-block-start: .3em; }
.aa-check { color: var(--sage-text); }
.aa-x { color: var(--ink-mute); }
/* On-dark list variant (inside the forest CTA / dark compare card) */
.aa-on-dark .aa-check { color: var(--lsage); }
.aa-on-dark .aa-x { color: rgba(245, 240, 232, .55); }

/* Glass card on the forest panel only */
.aa-glass {
  background: var(--glass-on-dark);
  border: 1px solid rgba(196, 219, 192, .2);
  border-radius: var(--r-card);
}

/* Staggered shelf: even-indexed plates drop 18px on wide screens ONLY.
   Zero offset 720-1024px; the grid collapses to 1 col at 720px.
   Apply to ONE grid per page max (CLS discipline). */
@media (min-width: 1024px) {
  .aa-shelf > *:nth-child(even) { transform: translateY(18px); }
}

/* ============================================================
   9. BUTTONS
   ============================================================ */
.btn-primary {
  display: inline-block;
  background: var(--olive); color: var(--paper-1);
  border: none; border-radius: var(--r-pill);
  padding: 14px 34px;
  font-family: var(--font-body); font-size: .95rem; font-weight: 700;
  cursor: pointer; text-align: center;
}
.btn-primary:hover { background: var(--oliveH); color: var(--paper-1); }

/* Secondary on LIGHT panels (linen hero, cream sections): olive-on-light.
   The dark-hero ghost is invisible on linen; never use it here. */
.btn-ghost-light {
  display: inline-block;
  background: transparent; color: var(--olive);
  border: 2px solid var(--olive); border-radius: var(--r-pill);
  padding: 12px 30px;
  font-family: var(--font-body); font-size: .95rem; font-weight: 700;
  cursor: pointer; text-align: center;
}
.btn-ghost-light:hover { background: var(--olive); color: var(--paper-1); }

/* Secondary on the FOREST panel only: cream ghost (correct on dark) */
.btn-ghost-dark {
  display: inline-block;
  background: transparent; color: var(--paper-1);
  border: 2px solid rgba(245, 240, 232, .55); border-radius: var(--r-pill);
  padding: 12px 30px;
  font-family: var(--font-body); font-size: .95rem; font-weight: 600;
  cursor: pointer; text-align: center;
}
.btn-ghost-dark:hover { border-color: var(--paper-1); background: rgba(245, 240, 232, .08); color: var(--paper-1); }

/* ============================================================
   10. FAQ: catalog index
   ============================================================ */
.aa-faq { display: flex; flex-direction: column; }
.aa-faq-item { border-block-start: var(--hairline); background: transparent; }
.aa-faq-item:last-child { border-block-end: var(--hairline); }

/* Serif questions at 22px (under 22px would have to stay Assistant) */
.aa-faq-q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-block: 20px;
  background: none; border: none; cursor: pointer;
  text-align: start;
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.375rem; line-height: 1.35;
  color: var(--forest);
}
.aa-faq-q:hover { color: var(--olive); }

.aa-faq-plus { flex-shrink: 0; display: inline-flex; color: var(--sage-text); }
.aa-faq-plus svg, .aa-faq-plus-icon { inline-size: 18px; block-size: 18px; }

/* Both open-state hooks preserved: home uses .faq-item.open / .aa-faq-item.open,
   the system pages use [aria-expanded="true"]. JS stays verbatim. */
.aa-faq-item.open .aa-faq-plus,
.faq-item.open .aa-faq-plus,
.aa-faq-q[aria-expanded="true"] .aa-faq-plus,
[aria-expanded="true"] .aa-faq-plus { transform: rotate(45deg); }

.aa-faq-a { max-height: 0; overflow: hidden; }
.aa-faq-item.open .aa-faq-a { max-height: 420px; }
.aa-faq-a-inner { padding-block: 4px 22px; color: var(--ink); font-size: 1rem; line-height: 1.7; }

/* ============================================================
   11. FINAL CTA BAND: the one forest anchor, floating panel on cream
   ============================================================ */
.aa-cta-panel {
  position: relative; overflow: hidden;
  background: var(--forest);
  color: var(--paper-1);
  border-radius: var(--r-panel);
  margin-inline: clamp(16px, 4vw, 48px);
  padding: clamp(56px, 8vw, 96px) clamp(24px, 5vw, 64px);
}
/* Cream linen dots at .04 on the dark panel */
.aa-cta-panel::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(245, 240, 232, .04) 1px, transparent 1.4px);
  background-size: 26px 26px;
  pointer-events: none;
}
.aa-cta-panel > :not(.aa-blob) { position: relative; z-index: 2; }
.aa-cta-panel .aa-blob { background: radial-gradient(closest-side, rgba(196, 219, 192, .10), transparent); }
.aa-cta-panel h2 { color: var(--paper-1); }
.aa-cta-panel h2 em { color: var(--lsage); }
.aa-cta-panel p { color: rgba(245, 240, 232, .75); }

/* ============================================================
   12. NAV (light cream, hairline, scrolled shadow)
   ============================================================ */
.aa-nav {
  position: sticky; inset-block-start: 0; z-index: 200;
  background: var(--paper-1);
  border-block-end: var(--hairline);
}
.aa-nav.scrolled { box-shadow: var(--shadow-rest); }

/* Glass variant for pages that use backdrop-filter; solid-cream base is the
   @supports fallback (the base rule above) */
@supports ((-webkit-backdrop-filter: blur(8px)) or (backdrop-filter: blur(8px))) {
  .aa-nav--glass {
    background: rgba(245, 240, 232, .85);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}

/* Logo chip: guarantees the logo never floats contrastless */
.aa-nav-logo-chip {
  display: inline-flex; align-items: center;
  background: var(--paper-0);
  border-radius: var(--r-pill);
  padding: 4px 10px;
}

/* Active link: small olive leaf marker (fixed olive in the data URI by design;
   data URIs cannot read currentColor) */
.aa-nav a.active,
.aa-nav a[aria-current="page"] { color: var(--forest); font-weight: 600; }
.aa-nav a.active::after,
.aa-nav a[aria-current="page"]::after {
  content: '';
  display: inline-block;
  inline-size: 11px; block-size: 11px;
  margin-inline-start: 6px;
  vertical-align: middle;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A7040' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21c-4.5-2.4-7-5.8-7-9.8C5 7 8 4 12 3c4 1 7 4 7 8.2 0 4-2.5 7.4-7 9.8Z'/%3E%3Cpath d='M12 21V9'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ============================================================
   13. FOOTER (forest; vine at top edge, pressed leaves, serif logotype)
   ============================================================ */
.aa-footer {
  position: relative; overflow: hidden;
  background: var(--forest);
  color: var(--lsage);
}
.aa-footer-leaf {
  position: absolute; inset-block-start: -24px;
  inline-size: 180px;
  color: var(--lsage); opacity: .12;
  pointer-events: none;
}
.aa-footer-leaf svg { width: 100%; height: auto; }
.aa-footer-logotype {
  font-family: var(--font-display); font-weight: 800;
  font-size: 1.25rem; color: var(--paper-1);
}
.aa-footer a {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 50% 100%;
  padding-block-end: 2px;
}
.aa-footer a:hover { background-size: 100% 1px; color: var(--paper-1); }

/* ============================================================
   14. LINKS: underline draw-in (center-out, direction-neutral so RTL-safe)
   ============================================================ */
.aa-link {
  background-image: linear-gradient(var(--olive), var(--olive));
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 50% 100%;
  padding-block-end: 2px;
}
.aa-link:hover { background-size: 100% 1px; }

/* ============================================================
   15. INPUTS (radius stays 8px)
   ============================================================ */
.aa-input {
  background: var(--paper-0);
  border: 1.5px solid var(--lsage);
  border-radius: 8px;
  padding: 13px 16px;
  font-family: var(--font-body); font-size: 1rem;
  color: var(--ink);
  width: 100%;
}
.aa-input::placeholder { color: var(--sage); }
.aa-input:focus {
  outline: 2px solid transparent;
  border-color: var(--olive);
  box-shadow: 0 0 0 3px rgba(90, 112, 64, .15);
}

/* ============================================================
   16. VERTICAL READING SPINE (optional accent; decorative only)
   - hidden below 900px
   - eyebrow text is MOVED into it, never retyped; vertical-rl is layout,
     never a transform-rotate of Hebrew letters
   - drop it on any page where it adds horizontal-scroll risk
   ============================================================ */
.aa-spine { display: none; }
@media (min-width: 900px) {
  .aa-spine {
    position: fixed; inset-block: 0; inset-inline-start: 0;
    inline-size: 48px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 28px;
    z-index: 90;
    pointer-events: none;
  }
  .aa-spine-item {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    pointer-events: auto;
  }
  .aa-spine-item span, .aa-spine-item a {
    writing-mode: vertical-rl;
    font-family: var(--font-body); font-weight: 600; font-size: .72rem;
    letter-spacing: 0;
    color: var(--sage-text);
  }
  .aa-spine-tick { display: inline-flex; color: var(--sage); }
  .aa-spine-tick svg { inline-size: 12px; block-size: 12px; }
  .aa-spine-item.passed .aa-spine-tick { color: var(--olive); }
}

/* ============================================================
   17. MOTION (all new animation gated behind no-preference)
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

  /* Reveal system (IntersectionObserver toggles .revealed; JS stays verbatim).
     Stagger: set --i inline per card (60-90ms steps) or keep the existing
     reveal-delay-N classes. */
  .reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .55s ease, transform .55s ease;
    transition-delay: calc(var(--i, 0) * 75ms);
  }
  .reveal.revealed { opacity: 1; transform: none; }
  .reveal-delay-1 { transition-delay: .1s; }
  .reveal-delay-2 { transition-delay: .2s; }
  .reveal-delay-3 { transition-delay: .3s; }
  .reveal-scale { opacity: 0; transform: scale(.94); transition: opacity .5s ease, transform .5s ease; }
  .reveal-scale.revealed { opacity: 1; transform: scale(1); }

  /* FAQ plus rotation + answer ease */
  .aa-faq-plus { transition: transform .25s ease; }
  .aa-faq-a { transition: max-height .25s ease; }

  /* Underline draw-in */
  .aa-link, .aa-footer a { transition: background-size .25s ease, color .15s ease; }

  /* Buttons: lift + tone shift */
  .btn-primary, .btn-ghost-light, .btn-ghost-dark {
    transition: background-color .15s ease, color .15s ease, border-color .15s ease,
                transform .12s ease, box-shadow .15s ease;
  }
  .btn-primary:hover, .btn-ghost-light:hover, .btn-ghost-dark:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-rest);
  }

  /* Plates: hover lift (extends the existing card behavior) */
  .aa-plate { transition: transform .2s ease, box-shadow .2s ease; }
  .aa-plate:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }

  /* Nav shadow ease */
  .aa-nav { transition: box-shadow .2s ease; }

  /* Spine tick fill ease */
  .aa-spine-tick { transition: color .3s ease; }
}

/* Shelf offset + reveal/hover coexistence on wide screens */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .aa-shelf > *:nth-child(even).reveal { transform: translateY(40px); }
  .aa-shelf > *:nth-child(even).reveal.revealed { transform: translateY(18px); }
  .aa-shelf > *:nth-child(even).aa-plate:hover { transform: translateY(15px); box-shadow: var(--shadow-lift); }
}

/* ============================================================
   18. REDUCED MOTION: disable sway/reveal/underline-draw, force content visible
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal, .reveal-scale { opacity: 1 !important; transform: none !important; transition: none !important; }
  .aa-link, .aa-footer a { transition: none !important; }
  .aa-faq-plus, .aa-faq-a { transition: none !important; }
}
/* Under reduced motion the shelf offset is static layout, not animation: keep it */
@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .aa-shelf > *:nth-child(even) { transform: translateY(18px) !important; }
}

/* ============================================================
   19. WATERCOLOR COMPONENTS (shared — multiply-blended, soft-masked)
   All watercolor sits on cream paper: always multiply so paper melts into page.
   No hard rectangle edges anywhere — every element has a soft mask fade.
   ============================================================ */

/* Divider: one sprig, breathing space, soft radial fade */
.aa-wc-divider {
  block-size: 90px;
  background: url('/assets/watercolor/wc-divider-sprig.png') center / contain no-repeat;
  -webkit-mask-image: radial-gradient(ellipse 60% 90% at 50% 50%, #000 45%, transparent 98%);
  mask-image: radial-gradient(ellipse 60% 90% at 50% 50%, #000 45%, transparent 98%);
  mix-blend-mode: multiply;
  margin-block: 18px;
}

/* Transition passage v2: taller, melts into neighbors top+bottom */
.aa-wc-transition {
  position: relative;
  block-size: clamp(150px, 22vw, 250px);
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%);
}
.aa-wc-transition img {
  position: absolute;
  top: 50%; left: 50%;
  width: 120%; min-width: 980px;
  transform: translate(-50%, -50%);
  will-change: transform;
  mix-blend-mode: multiply;
}

/* Frameless hero art: no border, no radius, no plate */
.aa-hero-wc { position: relative; }
.aa-hero-wc img {
  display: block;
  inline-size: 100%; block-size: auto;
  -webkit-mask-image: radial-gradient(ellipse 88% 92% at 42% 46%, #000 52%, transparent 99%);
  mask-image: radial-gradient(ellipse 88% 92% at 42% 46%, #000 52%, transparent 99%);
  mix-blend-mode: multiply;
}

/* Section corner wash (replaces aa-bleed branches) */
.aa-wash-corner { position: relative; }
.aa-wash-corner::before {
  content: '';
  position: absolute;
  inset-block-start: 0; inset-inline-start: 0;
  inline-size: min(520px, 55vw);
  block-size: min(340px, 40vw);
  background: url('/assets/watercolor/wc-branch-corner.png') top left / cover no-repeat;
  opacity: .55;
  -webkit-mask-image: radial-gradient(ellipse 100% 100% at 0% 0%, #000 35%, transparent 95%);
  mask-image: radial-gradient(ellipse 100% 100% at 0% 0%, #000 35%, transparent 95%);
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* Soft ambience wash for one calm section per page */
.aa-wash-soft { position: relative; }
.aa-wash-soft::after {
  content: '';
  position: absolute;
  inset-block-end: 0; inset-inline-end: 0;
  inline-size: min(640px, 70vw);
  block-size: min(420px, 50vw);
  background: url('/assets/watercolor/wc-wash-soft.png') bottom right / cover no-repeat;
  opacity: .5;
  -webkit-mask-image: radial-gradient(ellipse 100% 100% at 100% 100%, #000 30%, transparent 92%);
  mask-image: radial-gradient(ellipse 100% 100% at 100% 100%, #000 30%, transparent 92%);
  mix-blend-mode: multiply;
  pointer-events: none;
}