/* -----------------------------------------------------------------------------
   SPONTE PRODUCTIONS — CASE STUDY STYLESHEET
   -----------------------------------------------------------------------------
   Scoped stylesheet for case-study pages generated by
   src/templates/case-study.mjs. Depends on site.css for design tokens
   (--font-body, --font-display, --font-mono, --bg, --surface, --border,
   --border-2, --text, --text-muted, --text-faint, --ease-out) and for the
   `@keyframes pulse` animation used by .status-pill.

   THIS FILE IS MECHANICALLY MERGED FROM THE THREE APPROVED STANDALONE DRAFTS:
     public/case-studies/georgia-mausoleums-draft.html   (GMI)
     public/case-studies/one-way-martial-arts-draft.html (One Way)
     public/case-studies/between-the-spines-draft.html   (BTS)

   MERGE NOTES
     Shared blocks (.draft-banner, .cs-hero, .status-pill, .cs-meta, .cs-section,
     .sub-block-grid, .internal-callout, .media-placeholder-full, .public-ending,
     .internal-band) are byte-identical across all three source drafts and are
     copied once here.

     Unique blocks:
       .ba-grid / .ba-card                — GMI only (before/after grid)
       .media-grid / .media-card          — One Way and BTS (identical between them)
       .logline                           — BTS only (pull-quote block)
       .collab-note                       — BTS only (collaborator credits block)

   REPORTED CONFLICT (see /* CONFLICT */ block below):
     .media-placeholder-full .secondary { max-width }
       GMI       : 56ch
       One Way   : 56ch
       BTS       : 60ch
     Resolution chosen for this scaffold: 60ch (the wider value, taken from
     BTS). Rationale: BTS's caption "YouTube embed · Trailer excerpt · Stills ·
     Poster frame · BTS · Color references" is the longest of the three and
     was authored with 60ch in the standalone draft. Using 60ch avoids
     introducing an unintended line wrap that did not exist in the BTS
     standalone. The narrower 56ch value from GMI/One Way still fits their
     shorter captions comfortably at 60ch.
     This value is centralized in the CSS custom property
     `--cs-media-full-secondary-max` (declared on `:root` below) so it can be
     overridden per-page or per-record without editing the shared rule.

   SCOPING
     All selectors below are scoped to case-study-specific class names
     (`.cs-*`, `.draft-banner`, `.sub-block*`, `.media-*`, `.ba-*`, `.internal-*`,
     `.logline`, `.collab-note`, `.public-ending`, `.status-pill`). None of
     these class names collide with existing selectors in site.css.
   ----------------------------------------------------------------------------- */


/* ---- Custom properties -----------------------------------------------------
   Centralized here so page-level overrides can adjust the reported max-width
   conflict without editing shared rules. */
:root {
  --cs-media-full-secondary-max: 60ch; /* was 56ch in GMI/One Way, 60ch in BTS — see MERGE NOTES */
}


/* ---- Draft banner (shared, identical across all 3 drafts) ----------------- */
.draft-banner{position:sticky;top:0;z-index:120;background:#1a0f0f;border-bottom:1px solid #3a2020;color:#f4d9d9;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;padding:.65rem 1.25rem;text-align:center;line-height:1.4}
.draft-banner strong{color:#ffb0b0;letter-spacing:.2em}
.draft-banner .sep{opacity:.35;margin-inline:.75rem}


/* ---- Case-study hero (shared) --------------------------------------------- */
.cs-hero{padding-top:6rem;padding-bottom:clamp(3rem,5vw,5rem);border-bottom:1px solid var(--border)}
.cs-hero .top-eyebrow{display:inline-block;margin-bottom:2rem}
.cs-hero h1{font-family:var(--font-display);font-weight:300;font-size:clamp(2.4rem,1.4rem + 3.4vw,4.6rem);letter-spacing:-.028em;line-height:1;max-width:22ch;margin-bottom:1.5rem}
.cs-hero .subtitle{font-size:clamp(1.05rem,.95rem + .5vw,1.3rem);color:var(--text-muted);line-height:1.5;max-width:58ch;margin-bottom:0}
.cs-hero .status-row{margin-top:clamp(2rem,3vw,2.5rem);display:flex;flex-wrap:wrap;gap:1rem 1.25rem;align-items:center}

.status-pill{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:#d9c9a8;background:rgba(217,201,168,.06);border:1px solid rgba(217,201,168,.28);padding:.4rem .7rem;border-radius:2px}
.status-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:#d9c9a8;box-shadow:0 0 0 0 rgba(217,201,168,.7);animation:pulse 2.4s var(--ease-out) infinite}

.cs-hero .status-note{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;color:var(--text-faint);max-width:56ch;line-height:1.55}

.cs-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:clamp(1.5rem,3vw,2.5rem) 2rem;margin-top:clamp(2.75rem,4vw,3.5rem);padding-top:clamp(1.75rem,3vw,2.25rem);border-top:1px solid var(--border)}
.cs-meta dt{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-faint);margin-bottom:.55rem}
.cs-meta dd{font-family:var(--font-body);font-size:.95rem;color:var(--text);line-height:1.45}


/* ---- Case-study section (shared) ------------------------------------------ */
.cs-section{padding-block:clamp(3rem,5vw,5rem);border-bottom:1px solid var(--border)}
.cs-section:last-of-type{border-bottom:none}
.cs-section .cs-head{display:grid;grid-template-columns:1fr 2fr;gap:clamp(2rem,5vw,5rem);align-items:baseline;margin-bottom:clamp(1.5rem,3vw,2.5rem)}
.cs-section .cs-num{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-faint)}
.cs-section h2{font-family:var(--font-display);font-weight:400;font-size:clamp(1.7rem,1.3rem + 1.4vw,2.6rem);letter-spacing:-.02em;line-height:1.05;color:var(--text)}
.cs-section .cs-body{max-width:64ch}
.cs-section .cs-body p{font-size:1.05rem;line-height:1.65;color:var(--text-muted);margin-bottom:1.1rem}
.cs-section .cs-body p strong{color:var(--text);font-weight:500}
.cs-section .cs-body ul{list-style:none;padding:0;margin-top:1.25rem}
.cs-section .cs-body ul li{position:relative;padding-left:1.5rem;font-size:1rem;line-height:1.6;color:var(--text-muted);margin-bottom:.75rem}
.cs-section .cs-body ul li::before{content:"—";position:absolute;left:0;color:var(--text-faint);font-family:var(--font-mono)}


/* ---- Logline (BTS only) --------------------------------------------------- */
.logline{margin-top:1.75rem;padding:1.5rem 1.75rem;border-left:2px solid var(--text-faint);background:rgba(255,255,255,.015);max-width:64ch}
.logline .lbl{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-faint);margin-bottom:.55rem}
.logline p{font-family:var(--font-display);font-weight:300;font-size:clamp(1.1rem,1rem + .5vw,1.35rem);line-height:1.5;color:var(--text);margin:0;letter-spacing:-.005em}


/* ---- Sub-block grid (shared) ---------------------------------------------- */
.sub-block-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);margin-top:2rem}
.sub-block{background:var(--bg);padding:clamp(1.75rem,2.5vw,2.25rem);display:flex;flex-direction:column;gap:.75rem;min-height:200px}
.sub-block .num{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;color:var(--text-faint);text-transform:uppercase}
.sub-block h3{font-family:var(--font-display);font-weight:400;font-size:1.25rem;letter-spacing:-.01em;color:var(--text);line-height:1.15}
.sub-block p{font-size:.95rem;color:var(--text-muted);line-height:1.55;margin-top:auto}


/* ---- Collaborator note block (BTS only) ----------------------------------- */
.collab-note{margin-top:2rem;padding:1.5rem 1.75rem;border:1px solid var(--border);background:var(--surface);max-width:64ch}
.collab-note .lbl{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-faint);margin-bottom:.6rem}
.collab-note p{font-size:.98rem;color:var(--text-muted);line-height:1.6;margin:0}


/* ---- Media card grid (One Way + BTS — identical between the two) --------- */
.media-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.25rem;margin-top:2rem}
.media-card{border:1px solid var(--border);padding:clamp(1.5rem,2.5vw,2rem);background:var(--surface);display:flex;flex-direction:column;gap:1rem;min-height:260px}
.media-card .label{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-faint)}
.media-card h4{font-family:var(--font-display);font-weight:400;font-size:1.2rem;letter-spacing:-.01em;color:var(--text);line-height:1.2}
.media-card .caption{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);line-height:1.55}
.media-card .placeholder-media{margin-top:auto;padding:2rem 1rem;border:1px dashed var(--border-2);background:transparent;text-align:center;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;color:var(--text-faint);line-height:1.5;min-height:120px;display:flex;align-items:center;justify-content:center}


/* ---- Before/after card grid (GMI only) ------------------------------------ */
.ba-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.25rem;margin-top:2rem}
.ba-card{border:1px solid var(--border);padding:clamp(1.5rem,2.5vw,2rem);background:var(--surface);display:flex;flex-direction:column;gap:1rem;min-height:280px}
.ba-card .label{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-faint)}
.ba-card h4{font-family:var(--font-display);font-weight:400;font-size:1.2rem;letter-spacing:-.01em;color:var(--text);line-height:1.2}
.ba-card .placeholder-media{margin-top:auto;padding:1.5rem 1rem;border:1px dashed var(--border-2);background:transparent;text-align:center;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;color:var(--text-faint);line-height:1.5}


/* ---- Internal callout (shared) -------------------------------------------- */
.internal-callout{margin-top:2rem;border:1px solid #3a2f1a;background:rgba(58,47,26,.15);padding:clamp(1.5rem,2.5vw,2rem);position:relative}
.internal-callout::before{content:"Internal";position:absolute;top:-.7rem;left:1.25rem;background:var(--bg);padding:.15rem .55rem;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:#d9c088;border:1px solid #3a2f1a}
.internal-callout .caption{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;color:#d9c088;text-transform:uppercase;margin-bottom:1rem}
.internal-callout h3{font-family:var(--font-display);font-weight:400;font-size:1.25rem;color:var(--text);letter-spacing:-.01em;margin-bottom:1rem}
.internal-callout ul{list-style:none;padding:0;margin:0}
.internal-callout ul li{position:relative;padding-left:1.4rem;font-size:.95rem;color:var(--text-muted);line-height:1.55;margin-bottom:.55rem}
.internal-callout ul li::before{content:"\25A1";position:absolute;left:0;color:#d9c088;font-family:var(--font-mono);font-size:.9rem;top:.05rem}
.internal-callout .foot{margin-top:1.25rem;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;color:var(--text-faint);text-transform:uppercase}


/* ---- Full-width media placeholder (shared, with reported conflict) -------- */
.media-placeholder-full{margin-top:2rem;aspect-ratio:21/9;border:1px dashed var(--border-2);background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem;line-height:1.6}
.media-placeholder-full .primary{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-muted)}

/* CONFLICT — SEE MERGE NOTES AT TOP
   GMI/One Way declared max-width:56ch here; BTS declared max-width:60ch.
   Consolidated via the --cs-media-full-secondary-max custom property. */
.media-placeholder-full .secondary{margin-top:.85rem;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);max-width:var(--cs-media-full-secondary-max);line-height:1.6}


/* ---- Public ending divider (shared) --------------------------------------- */
.public-ending{margin-top:clamp(4rem,7vw,6rem);padding-top:clamp(2rem,3vw,2.5rem);border-top:1px solid var(--border);text-align:center;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--text-faint)}
.public-ending::before{content:"— End of public case study —";display:inline-block;padding-inline:1.5rem;background:var(--bg)}


/* ---- Internal band (shared) — separates draft notes from public content -- */
.internal-band{background:var(--surface);border-top:2px solid #3a2f1a;border-bottom:1px solid var(--border);padding-block:clamp(3rem,5vw,4.5rem);margin-top:clamp(2.5rem,4vw,3.5rem);position:relative}
.internal-band::before{content:"Internal draft notes — not part of the public case study";position:absolute;top:-.75rem;left:50%;transform:translateX(-50%);background:var(--bg);padding:.25rem .9rem;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:#d9c088;border:1px solid #3a2f1a;white-space:nowrap;max-width:calc(100% - 2rem);overflow:hidden;text-overflow:ellipsis}
.internal-band .cs-num{color:#d9c088}
.internal-band h2{font-size:clamp(1.35rem,1.1rem + 1vw,1.9rem);color:var(--text)}
.internal-band .lead-note{margin-top:1rem;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;color:#d9c088;text-transform:uppercase;line-height:1.55;max-width:60ch}
.internal-band .cs-inner{padding-block:0}
.internal-band .cs-inner .cs-head{margin-bottom:clamp(1.25rem,2vw,2rem)}


/* ---- Mobile overrides (<=760px) ------------------------------------------- */
@media (max-width:760px){
  .cs-section .cs-head{grid-template-columns:1fr;gap:1rem}
  .cs-hero .top-eyebrow{margin-bottom:1.5rem}
  .cs-hero h1{margin-bottom:1.25rem}
  .cs-hero .status-row{margin-top:1.75rem;gap:.9rem}
  .cs-meta{gap:1.5rem}

  .media-placeholder-full{aspect-ratio:auto;min-height:220px;padding:1.5rem 1.25rem}
  .media-placeholder-full .primary{font-size:.72rem;letter-spacing:.14em}
  .media-placeholder-full .secondary{font-size:.64rem;letter-spacing:.1em}

  .internal-band::before{font-size:.56rem;letter-spacing:.16em;padding:.25rem .6rem}

  /* One Way + BTS mobile override — smaller media-card min-height */
  .media-card{min-height:220px}

  /* BTS-only mobile override — smaller padding + slightly reduced logline size */
  .logline{padding:1.25rem 1.25rem}
  .logline p{font-size:1.05rem}
}