/* ============================================================================
   site.css — everything that is not the scroll cinematic.
   ----------------------------------------------------------------------------
   The palette is locked to the generated scenes (--bg is the exact scene
   background) so the page and the diorama world read as one surface.

   z-index note: the scroll-world engine paints its sky/stage/copy/topbar as
   position:fixed layers up to z-index 60. Content that must scroll *over* the
   finished cinematic therefore sits at z-index 70 with an opaque background.
   ========================================================================== */

:root {
  --bg:        #F2E9DC;
  --paper:     #FBF7F0;
  --ink:       #2A2320;
  --ink-soft:  #6E6157;
  --line:      rgba(42, 35, 32, .13);
  --accent:    #A65A3C;
  --accent-dk: #8A4830;
  --radius:    14px;
  --shadow:    0 2px 4px rgba(42,35,32,.04), 0 12px 32px rgba(42,35,32,.07);
  --font: ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, -apple-system, sans-serif;
  --wrap: 1080px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* The scroll-world engine wraps its own CSS in `@layer sw`. Unlayered rules beat
   layered ones at ANY specificity, so a bare `a {}` or `img {}` reset here would
   silently override the engine's button colours and scene sizing. Both resets are
   therefore scoped to skip elements the engine owns (all of which are `sw-*`). */
a:not([class*="sw-"]) { color: inherit; }
img:not([class*="sw-"]), svg:not([class*="sw-"]) { max-width: 100%; height: auto; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ------------------------------------------------------------------ button */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5em;
  padding: .78em 1.5em;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .01em;
  text-decoration: none;
  border: 0; border-radius: 999px;
  box-shadow: 0 4px 14px rgba(166, 90, 60, .28);
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.btn:hover { background: var(--accent-dk); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(166,90,60,.34); }
.btn:active { transform: translateY(0); }
.btn--sm { padding: .58em 1.1em; font-size: .85rem; }
.btn--lg { padding: .95em 1.9em; font-size: 1.02rem; }
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }

/* ------------------------------------------------------------------ header */

.hdr {
  position: sticky; top: 0; z-index: 80;
  display: flex; align-items: center; gap: clamp(12px, 3vw, 32px);
  padding: 14px clamp(18px, 5vw, 56px);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.hdr__brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 1.05rem; text-decoration: none; letter-spacing: -.01em;
}
/* Wordmark only — no logo glyph, on the cinematic (.sw-brand__mark) or on the
   content pages (.hdr__mark). Unlayered so it also wins over the engine. */
.hdr__mark, .sw-brand__mark { display: none; }
.hdr__nav { display: flex; gap: clamp(14px, 2.4vw, 26px); margin-left: auto; }
.hdr__nav a {
  text-decoration: none; font-weight: 600; font-size: .93rem; color: var(--ink-soft);
  transition: color .16s;
}
.hdr__nav a:hover { color: var(--accent); }
@media (max-width: 680px) {
  .hdr__nav { display: none; }
  .hdr .btn { margin-left: auto; }
}

/* -------------------------------------------------------------- page shell */
/* Sits above the engine's fixed cinematic layers (max z-index 60). */

.page, .ftr {
  position: relative; z-index: 70;
  background: var(--bg);
}

.sec {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(64px, 11vw, 132px) clamp(20px, 5vw, 40px);
  border-top: 1px solid var(--line);
}
.page > .sec:first-child { border-top: 0; }

.sec__label {
  margin: 0 0 12px;
  font-size: .78rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent);
}
.sec__title {
  margin: 0 0 18px;
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.9rem);
  line-height: 1.14; letter-spacing: -.022em; font-weight: 800;
  max-width: 20ch;
}
.sec__intro { margin: 0 0 36px; max-width: 62ch; color: var(--ink-soft); font-size: 1.06rem; }
.sec__more { margin: 32px 0 0; }
.sec__more a { color: var(--accent); font-weight: 700; text-decoration: none; }
.sec__more a:hover { text-decoration: underline; }
.sec__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 40px; }
.sec__cta-note { color: var(--ink-soft); font-size: .93rem; }
.sec__cta-link { color: var(--accent); font-weight: 700; text-decoration: none; font-size: .95rem; }
.sec__cta-link:hover { text-decoration: underline; }

/* The page's h1, sitting directly under the cinematic. */
.sec--intro { padding-top: clamp(72px, 12vw, 148px); }
.sec__title--hero {
  font-size: clamp(2rem, 1.3rem + 3.1vw, 3.4rem);
  max-width: 17ch;
}

/* ------------------------------------------------------------- story beats */

.beats { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.beat {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(16px, 3vw, 32px);
  padding: clamp(20px, 3vw, 30px) 0;
  border-top: 1px solid var(--line);
}
.beat:first-child { border-top: 0; }
.beat__n {
  font-variant-numeric: tabular-nums;
  font-size: .82rem; font-weight: 800; letter-spacing: .1em;
  color: var(--accent, var(--ink-soft));
  padding-top: .35em;
}
.beat__eyebrow {
  margin: 0 0 6px;
  font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent);
}
.beat__title {
  margin: 0 0 8px;
  font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem); line-height: 1.25;
  letter-spacing: -.015em; font-weight: 800;
}
.beat__body { margin: 0; color: var(--ink-soft); max-width: 68ch; }

/* ------------------------------------------------------------------- cards */

.cards {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
}
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(20px, 2.6vw, 28px);
  box-shadow: var(--shadow);
  display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 6px 12px rgba(42,35,32,.06), 0 18px 44px rgba(42,35,32,.1); }
@media (prefers-reduced-motion: reduce) { .card:hover { transform: none; } }
.card__title { margin: 0 0 8px; font-size: 1.16rem; font-weight: 800; letter-spacing: -.01em; }
.card__blurb { margin: 0 0 16px; color: var(--ink-soft); font-size: .96rem; }
.card__list { margin: 0 0 16px; padding: 0; list-style: none; display: grid; gap: 7px; }
.card__list li {
  position: relative; padding-left: 22px; font-size: .93rem; color: var(--ink-soft);
}
.card__list li::before {
  content: ""; position: absolute; left: 4px; top: .58em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent); opacity: .55;
}
.card__best { margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: .88rem; color: var(--ink-soft); }

/* --------------------------------------------------------------------- faq */

.faqs { display: grid; gap: 10px; max-width: 76ch; }
.faq {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 4px 20px;
}
.faq summary {
  cursor: pointer; list-style: none;
  padding: 16px 34px 16px 0; position: relative;
  font-weight: 700; font-size: 1.02rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 4px; top: 50%;
  width: 10px; height: 10px; margin-top: -6px;
  border-right: 2.5px solid var(--accent); border-bottom: 2.5px solid var(--accent);
  transform: rotate(45deg); transition: transform .22s ease;
}
.faq[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq p { margin: 0 0 18px; color: var(--ink-soft); max-width: 66ch; }

/* -------------------------------------------------------------- post cards */

.post-cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.post-cards--list { grid-template-columns: 1fr; }
.post-card {
  display: grid; gap: 7px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 24px; text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.post-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); box-shadow: var(--shadow); }
@media (prefers-reduced-motion: reduce) { .post-card:hover { transform: none; } }
.post-card__date { font-size: .78rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); }
.post-card__title { font-size: 1.12rem; font-weight: 800; line-height: 1.3; letter-spacing: -.012em; }
.post-card__desc { font-size: .94rem; color: var(--ink-soft); }

/* ------------------------------------------------------------------- prose */

.prose-wrap { max-width: 760px; margin: 0 auto; padding: clamp(28px, 5vw, 56px) clamp(20px, 5vw, 40px) 0; }
.crumbs { font-size: .86rem; color: var(--ink-soft); margin-bottom: 26px; }
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs span { margin: 0 7px; opacity: .5; }

.prose-head h1 {
  margin: 0 0 14px;
  font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3rem); line-height: 1.1;
  letter-spacing: -.026em; font-weight: 800;
}
.prose-lede { margin: 0; font-size: 1.12rem; color: var(--ink-soft); max-width: 62ch; }
.prose-meta { margin: 0; font-size: .9rem; color: var(--ink-soft); }

.tags { display: flex; flex-wrap: wrap; gap: 7px; list-style: none; margin: 18px 0 0; padding: 0; }
.tags li {
  font-size: .76rem; font-weight: 700; letter-spacing: .05em;
  padding: 5px 11px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 11%, transparent);
  color: var(--accent-dk);
}

.prose { margin-top: 40px; }
.prose > * + * { margin-top: 1.15em; }
.prose h2 { margin-top: 2em; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); letter-spacing: -.018em; line-height: 1.22; font-weight: 800; }
.prose h3 { margin-top: 1.7em; font-size: 1.16rem; font-weight: 800; }
.prose p, .prose li { color: #3B322C; }
.prose a { color: var(--accent-dk); text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .45em; }
.prose blockquote {
  margin: 1.6em 0; padding: 4px 0 4px 22px;
  border-left: 3px solid var(--accent);
  font-size: 1.08rem; color: var(--ink-soft);
}
.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .88em; padding: .16em .42em; border-radius: 5px;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}
.prose pre {
  overflow-x: auto; padding: 18px 20px; border-radius: var(--radius);
  background: #2F2A27; color: #EDE4D8; font-size: .88rem; line-height: 1.55;
}
.prose pre code { background: none; padding: 0; font-size: inherit; color: inherit; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.4em 0; }
.prose img { border-radius: var(--radius); }

/* ------------------------------------------------------------ niche points */

.points { display: grid; gap: 16px; margin-top: 40px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.point { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.point h3 { margin: 0 0 8px; font-size: 1.06rem; font-weight: 800; }
.point p { margin: 0; color: var(--ink-soft); font-size: .95rem; }

.plain-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.plain-list a { color: var(--accent-dk); font-weight: 700; text-underline-offset: 3px; }

/* --------------------------------------------------------------- post CTA */

.post-cta {
  margin: 60px 0 0; padding: clamp(26px, 4vw, 40px);
  background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 10%, var(--paper)), var(--paper));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: 18px;
}
.post-cta h2 { margin: 0 0 10px; font-size: 1.35rem; font-weight: 800; letter-spacing: -.015em; }
.post-cta p { margin: 0 0 22px; color: var(--ink-soft); max-width: 54ch; }

.related { margin-top: 56px; }
.related h2 { margin: 0 0 18px; font-size: 1.2rem; font-weight: 800; }

/* --------------------------------------------------------------- sticky CTA */

.sticky-cta {
  position: fixed; right: clamp(14px, 3vw, 28px); bottom: clamp(14px, 3vw, 28px);
  z-index: 90;
  padding: .8em 1.5em;
  background: var(--accent); color: #fff;
  font-weight: 700; font-size: .92rem; text-decoration: none;
  border-radius: 999px;
  box-shadow: 0 6px 24px rgba(166,90,60,.4);
  opacity: 0; transform: translateY(14px);
  transition: opacity .3s ease, transform .3s ease;
  padding-bottom: max(.8em, env(safe-area-inset-bottom));
}
.sticky-cta.is-in { opacity: 1; transform: translateY(0); }
.sticky-cta:hover { background: var(--accent-dk); }
@media (max-width: 520px) { .sticky-cta { left: 14px; right: 14px; text-align: center; justify-content: center; } }

/* ------------------------------------------------------------------ footer */

.ftr {
  border-top: 1px solid var(--line);
  padding: clamp(48px, 7vw, 80px) clamp(20px, 5vw, 40px) 36px;
  background: var(--paper);
}
.ftr__grid {
  max-width: var(--wrap); margin: 0 auto;
  display: grid; gap: 40px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.ftr__brand { margin: 0 0 6px; font-size: 1.2rem; font-weight: 800; }
.ftr__tag { margin: 0 0 20px; color: var(--ink-soft); max-width: 34ch; }
.ftr__h { margin: 0 0 14px; font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.ftr__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.ftr__list a { color: var(--ink-soft); text-decoration: none; font-size: .94rem; }
.ftr__list a:hover { color: var(--accent); text-decoration: underline; }
.ftr__fine {
  max-width: var(--wrap); margin: 48px auto 0; padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: .85rem; color: var(--ink-soft);
}

/* ------------------------------------------------------------- scene fitting */
/* Full-bleed. The scenes now paint their own floor out past the frame edge, so
   `cover` fills the viewport at any aspect ratio with no letterbox and nothing
   important lost — the composition keeps its focus at the centre, which is the
   part `cover` always keeps. This matches the engine's own default, so no
   override is needed; the rule is kept only to document the intent.

   (An earlier build used `contain`, which was right when each scene was a small
   transparent island that had to sit whole inside the frame.) */
.sw-scene__still { object-fit: cover; }

/* The engine's copy scrim is a left-to-right gradient about 58vw wide, which is
   right on a wide screen and far too narrow on a phone — the eyebrow and index
   ended up sitting unreadably on top of the scene. On narrow viewports the copy
   stacks at the bottom, so the scrim needs to come up from the bottom instead.
   Unlayered, so it beats the engine's `@layer sw` rule. */
@media (max-width: 860px) {
  /* Lift the scene so its subject sits in the upper half. On a phone the copy
     stacks across the bottom, and a centred subject lands right where the scrim
     is densest — the doorway in scene 6 was being quietly covered up. The gap
     this opens at the bottom falls under the opaque end of the scrim, so it is
     never visible. */
  .sw-scene { transform: translateY(-13%) scale(1.08); }

  .sw-copylayer::before {
    width: 100%;
    background: linear-gradient(
      to top,
      /* Strong enough under the copy, gone by the upper third — an earlier pass
         sat at ~95% opacity at mid-screen and quietly hid the scene itself. */
      var(--sw-bg) 0%,
      color-mix(in srgb, var(--sw-bg) 92%, transparent) 42%,
      color-mix(in srgb, var(--sw-bg) 66%, transparent) 60%,
      color-mix(in srgb, var(--sw-bg) 26%, transparent) 78%,
      transparent 100%
    );
  }
}

/* ---------------------------------------------------------------- reveal in */

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}