/* =========================================================================
   Legio Intermeratus — enhance.css
   Premium enhancement layer. Loads AFTER styles.css and the page CSS.
   Pure CSS; progressive. Pairs with /assets/js/enhance.js (optional).
   Nothing here is required for the page to work or be readable.
   ========================================================================= */

:root {
  /* Warm-tinted depth system (shadows carry the paper's hue, never grey) */
  --sh-1: 0 1px 2px rgba(46,30,18,.06), 0 3px 8px -2px rgba(46,30,18,.06);
  --sh-2: 0 4px 10px -4px rgba(46,30,18,.18), 0 10px 24px -12px rgba(46,30,18,.16);
  --sh-3: 0 10px 22px -10px rgba(40,26,16,.30), 0 26px 50px -28px rgba(40,26,16,.40);
  --sh-4: 0 18px 40px -16px rgba(34,20,10,.42), 0 46px 90px -50px rgba(34,20,10,.55);
  --ease-out: cubic-bezier(.16,.84,.32,1);
  --ease-spring: cubic-bezier(.34,1.32,.5,1);
}

/* ---- JS readiness flag: only hide pre-animation states when JS is live ---- */
html.js [data-anim],
html.js .kin .kin__i,
html.js .reveal-stagger > * { will-change: transform, opacity; }

/* -------------------------------------------------------------------------
   1. Paper grain — a fixed, very faint film over the whole page.
   img-src allows data: so this passes the strict CSP.
   ------------------------------------------------------------------------- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
  opacity: .045;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* -------------------------------------------------------------------------
   2. Scroll progress line (element injected by enhance.js)
   ------------------------------------------------------------------------- */
.scroll-progress {
  position: fixed; inset: 0 0 auto 0; height: 3px;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--accent), var(--gold) 55%, var(--green));
  z-index: 150; pointer-events: none; will-change: transform;
}

/* -------------------------------------------------------------------------
   3. Masthead — depth on scroll + logo settle (enhance.js toggles .is-stuck)
   ------------------------------------------------------------------------- */
.site-header { transition: box-shadow .35s var(--ease-out), background-color .35s ease; }
.site-header.is-stuck { box-shadow: var(--sh-2); background: color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter: blur(8px); }
.masthead { transition: padding-block .3s var(--ease-out); }
.site-header.is-stuck .masthead { padding-block: .45rem; }
.brand__logo { transition: width .3s var(--ease-out), height .3s var(--ease-out); }
.site-header.is-stuck .brand__logo { width: 40px; height: 40px; }
.site-nav a { position: relative; transition: color .18s ease, background-color .18s ease; }

/* -------------------------------------------------------------------------
   4. Buttons — settle shadow + a single light sweep on hover
   ------------------------------------------------------------------------- */
.btn { position: relative; overflow: hidden; isolation: isolate; box-shadow: var(--sh-1); }
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(115deg, transparent 34%, rgba(255,255,255,.30) 50%, transparent 66%);
  transform: translateX(-135%); transition: transform .7s var(--ease-out);
}
.btn:hover::before, .btn:focus-visible::before { transform: translateX(135%); }
.btn:hover { box-shadow: var(--sh-2); transform: translateY(-2px); }
.btn--ghost { box-shadow: none; }
.btn--ghost::before { display: none; }

/* readmore: arrow already animates; add a hairline that draws in */
.readmore { position: relative; }
.readmore::before {
  content: ""; position: absolute; left: 0; right: 1.4em; bottom: -3px; height: 1.5px;
  background: currentColor; transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .35s var(--ease-out);
}
.readmore:hover::before { transform: scaleX(1); }

/* -------------------------------------------------------------------------
   5. Editorial link underlines that draw in (scoped to running copy)
   ------------------------------------------------------------------------- */
.prose a, .answer a, .lead a, .community-list a, .agenda__what a, .lead-feature a,
.banner__lead a, .section-head p a {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1.5px; background-position: 0 1.08em; background-repeat: no-repeat;
  transition: background-size .35s var(--ease-out), color .2s ease;
}
.prose a:hover, .answer a:hover, .lead a:hover, .community-list a:hover,
.agenda__what a:hover, .lead-feature a:hover, .banner__lead a:hover, .section-head p a:hover {
  background-size: 100% 1.5px;
}

/* -------------------------------------------------------------------------
   6. Cards — richer lift, accent rule grows from the hovered corner
   ------------------------------------------------------------------------- */
.clip { box-shadow: var(--sh-1); transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out), border-color .25s ease; }
.clip--link:hover { transform: translateY(-5px); box-shadow: var(--sh-3); }
.indexbox { box-shadow: var(--sh-1); transition: box-shadow .3s var(--ease-out); }
.indexbox:hover { box-shadow: var(--sh-2); }
.indexbox li { transition: padding-left .2s var(--ease-out); }
.indexbox li:hover { padding-left: .3rem; }
.answer { box-shadow: var(--sh-1); }

/* sys-chips lift */
.sys-chip { transition: transform .2s var(--ease-spring), border-color .2s ease, color .2s ease, box-shadow .2s ease; }
.sys-chip:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--sh-1); }
.site-footer .sys-chip:hover { border-color: #c89a55; color: #f3e7cf; }

/* stat numbers: tabular figures so the count-up doesn't jitter */
.stat .num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* -------------------------------------------------------------------------
   7. Cinematic media treatments
   ------------------------------------------------------------------------- */
.photo, .media, figure > .photo { box-shadow: var(--sh-1); }

/* Warm duotone that resolves to full colour on hover/focus */
.media--duo > img, .duo > img, img.duo {
  filter: grayscale(.62) contrast(1.06) brightness(.97) sepia(.22) saturate(.9);
  transition: filter .55s var(--ease-out), transform .7s var(--ease-out);
}
.media--duo:hover > img, .media--duo:focus-within > img,
.duo:hover > img, .duo:focus-within > img, img.duo:hover { filter: none; }

/* A soft inner vignette + caption gradient for framed photos */
.framed { position: relative; display: block; overflow: hidden; background: var(--paper-2); box-shadow: var(--sh-3); }
.framed::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), inset 0 0 60px -20px rgba(20,12,6,.5);
}
.framed > img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.framed:hover > img { transform: scale(1.045); }

/* Ken-Burns drift, opt-in */
@media (prefers-reduced-motion: no-preference) {
  .kb > img { animation: kb 22s ease-in-out infinite alternate; }
  @keyframes kb { from { transform: scale(1.04) translate3d(0,0,0); } to { transform: scale(1.13) translate3d(-1.5%,-1.5%,0); } }
}

/* -------------------------------------------------------------------------
   8. Dark sections — depth glow + faint vignette
   ------------------------------------------------------------------------- */
.section--press, .section--green, .cta-band { position: relative; overflow: hidden; isolation: isolate; }
.section--press::before, .section--green::before, .cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
}
.section--press::before { background: radial-gradient(70% 90% at 82% -15%, rgba(179,50,42,.30), transparent 58%), radial-gradient(60% 80% at 6% 120%, rgba(156,120,38,.18), transparent 60%); }
.section--green::before { background: radial-gradient(70% 90% at 84% -12%, rgba(120,190,140,.22), transparent 60%), radial-gradient(50% 70% at 4% 116%, rgba(20,70,40,.5), transparent 60%); }
.cta-band::before { background: radial-gradient(60% 120% at 90% 0%, rgba(255,255,255,.16), transparent 55%); }
.cta-band { box-shadow: var(--sh-3); }

/* -------------------------------------------------------------------------
   9. Section ornament divider (CSS diamond — a die pip, no SVG)
   ------------------------------------------------------------------------- */
.ornament { display: flex; align-items: center; gap: 1rem; margin-block: clamp(2rem,5vw,3.2rem); color: var(--rule-strong); }
.ornament::before, .ornament::after { content: ""; height: 1px; background: var(--rule); flex: 1; }
.ornament i { width: 9px; height: 9px; background: var(--accent); transform: rotate(45deg); box-shadow: 0 0 0 4px var(--paper), 14px 0 0 0 var(--rule-strong), -14px 0 0 0 var(--rule-strong); }
.ornament.on-paper2 i { box-shadow: 0 0 0 4px var(--paper-2), 14px 0 0 0 var(--rule-strong), -14px 0 0 0 var(--rule-strong); }

/* -------------------------------------------------------------------------
   10. Kinetic headline — words rise in. enhance.js splits + triggers.
   Hidden state gated on html.js so no-JS still shows the headline.
   ------------------------------------------------------------------------- */
.kin__w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .14em; margin-bottom: -.14em; }
html.js .kin .kin__i { display: inline-block; transform: translateY(106%); opacity: 0; }
html.js .kin.kin--in .kin__i {
  transform: translateY(0); opacity: 1;
  transition: transform .82s var(--ease-out), opacity .7s ease;
  transition-delay: var(--d, 0ms);
}

/* -------------------------------------------------------------------------
   11. Reveal-stagger groups (JS adds .in to each child, with a delay)
   Hidden state gated on html.js.
   ------------------------------------------------------------------------- */
html.js .reveal-stagger > * { opacity: 0; transform: translateY(22px); }
html.js .reveal-stagger > *.in { opacity: 1; transform: none; transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }

/* A gentler version of the built-in .reveal that also nudges horizontally */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal-up { animation: rv-up linear both; animation-timeline: view(); animation-range: entry 0% cover 20%; }
    @keyframes rv-up { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
  }
}

/* -------------------------------------------------------------------------
   12. Parallax (enhance.js drives translate via --py); safe default
   ------------------------------------------------------------------------- */
[data-parallax] { will-change: transform; transform: translate3d(0, var(--py, 0px), 0); }

/* -------------------------------------------------------------------------
   13. Reduced motion — neutralise everything motion-based
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body::after { display: none; }
  .scroll-progress { display: none; }
  html.js .kin .kin__i { transform: none; opacity: 1; }
  html.js .reveal-stagger > * { opacity: 1; transform: none; }
  .framed:hover > img, .media--duo:hover > img { transform: none; }
  [data-parallax] { transform: none !important; }
  .btn::before { display: none; }
}

/* -------------------------------------------------------------------------
   14. Cinematic hero-band — a full-bleed parallax photo moment.
   Drop a <figure class="hero-band"> right under a page banner.
   ------------------------------------------------------------------------- */
.hero-band { position: relative; margin: 0; overflow: hidden; background: var(--press); border-bottom: 1px solid var(--rule); isolation: isolate; }
.hero-band__inner { position: relative; height: clamp(15rem, 36vw, 27rem); overflow: hidden; }
.hero-band__inner > img {
  position: absolute; inset: -13% 0; width: 100%; height: 126%; object-fit: cover; display: block;
  transform: translate3d(0, var(--py, 0px), 0); will-change: transform;
  filter: saturate(.92) contrast(1.04);
}
.hero-band::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(14,10,8,.78), rgba(14,10,8,.28) 52%, rgba(14,10,8,0) 80%),
    linear-gradient(0deg, rgba(14,10,8,.62), transparent 42%),
    radial-gradient(60% 80% at 88% 10%, rgba(179,50,42,.22), transparent 60%);
}
.hero-band__cap { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; }
.hero-band__cap .container { padding-block: clamp(1.2rem, 3vw, 2.1rem); }
.hero-band__cap .k {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--mono); font-size: .74rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: #ecc7c0;
}
.hero-band__cap .k::before { content: ""; width: .45rem; height: .45rem; background: var(--accent); transform: rotate(45deg); }
.hero-band__cap p {
  margin-top: .5rem; max-width: 30ch; color: #fff;
  font-family: var(--serif); font-weight: 700; line-height: 1.12;
  font-size: clamp(1.4rem, 1rem + 2.2vw, 2.6rem); letter-spacing: -.01em;
  text-wrap: balance;
}
.hero-band__cap .tags { margin-top: 1rem; }
.hero-band__cap .tag { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.28); color: #f4ece0; backdrop-filter: blur(2px); }
@media (prefers-reduced-motion: reduce) { .hero-band__inner > img { inset: 0; height: 100%; } }

/* -------------------------------------------------------------------------
   15. Existing full-bleed photo bands drift gently on scroll (CSS only).
   Scale gives the transform room so no edges show.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .photo-band { position: relative; overflow: hidden; }
    .photo-band > img { will-change: transform; animation: band-drift linear both; animation-timeline: view(); animation-range: cover; }
    @keyframes band-drift { from { transform: scale(1.13) translateY(-4.2%); } to { transform: scale(1.13) translateY(4.2%); } }
  }
}