/* Case study — Sacred Healing Journeys (Andrea Brinkman-Waterbury).
   Built from drafts/case-study-andrea/design.png.

   This page loads works-page.css first and reshapes it, rather than restating
   the card. The card object — its chamfered gilt edge, the flip, the name plate,
   the hover lift — is the works deck's card, and there should be exactly one
   definition of it in the codebase. What changes here is the composition: one
   card instead of four, standing at the right of the frame, and a copy column
   that carries two labelled points under the lede.

   Departures from the design render, and why (DESIGN.md governs this repo):
   - The nav in the render reads STUDIO / WORK / HER / CONTACT with an ENTER
     plate. The live site's nav and fit-call plate are used instead; a case study
     cannot ship its own navigation.
   - The render's card is a generated mystical object (a leaf seal on moss).
     Andrea's real card and real brand board are in assets/works, so they are
     what stand here. PRODUCT.md principle 2 is "mirror, not metaphor", and
     putting invented artwork on a named client's case study breaks it.
   - The card's corners are chamfered, not rounded. DESIGN.md: no radius outside
     circular icon rings.
   - The render's "01 / 03" pager and its two arrows are left over from the
     four-card version this was iterated from; with one card they have nothing
     to page through, so they are dropped. The reveal hint is kept.
*/

/* ---------- Hero shell ----------
   Only above the phone breakpoint: below it works-page.css lets the hero
   collapse to its content, and that is still what we want here. */
@media (min-width: 901px) {
  .cs-hero { min-height: max(100vh, 860px); }
}

/* The copy is the substance of this page, so it holds a wider column than the
   works hero gives it and steps back less when the card is turned over. */
.cs-copy { max-width: min(52vw, 830px); }
.cs-hero:has(.wk-card[data-open="true"]) .wk-copy { opacity: .26; }

/* three lines, as drawn — the measure is set so "business built to grow."
   closes the headline on its own line and clears the card */
.cs-title {
  font-size: clamp(36px, 4.05vw, 80px);
  max-width: 11.4em;
}
.cs-lede {
  margin-top: clamp(14px, 2.2vh, 30px); max-width: 20em;
  font: 300 clamp(18px, 1.62vw, 32px)/1.5 var(--serif); color: var(--cream, #efe6d8);
}

/* ---------- The two points ---------- */
.cs-points {
  margin: clamp(24px, 4vh, 54px) 0 0;
  display: grid; gap: clamp(20px, 3.4vh, 42px);
  max-width: 30em;
}
.cs-point {
  display: grid; grid-template-columns: auto 1fr;
  gap: clamp(16px, 1.8vw, 34px); align-items: start;
}
/* the one permitted round corner in this system: a circular icon ring */
.cs-ring {
  width: clamp(54px, 4.6vw, 92px); aspect-ratio: 1; border-radius: 50%;
  border: 1px solid var(--accent-line); color: var(--accent);
  display: grid; place-items: center;
}
.cs-ring svg { width: 46%; height: 46%; }
.cs-point-label {
  font: 500 clamp(12px, 1.02vw, 18px)/1 var(--mono);
  letter-spacing: .24em; text-transform: uppercase; color: var(--accent);
}
.cs-point-text {
  margin: clamp(8px, 1.1vh, 14px) 0 0; max-width: 18em;
  font: 300 clamp(16px, 1.32vw, 25px)/1.5 var(--serif); color: var(--cream, #efe6d8);
}

/* ---------- The card: one, standing at the right ----------
   .wk-stage is a zero-width plumb line that the card centres itself on, so the
   card is placed by moving the line rather than by offsetting the card. */
.cs-hero .wk-stage {
  --w: min(26vw, 44vh, 440px);
  left: 69%; right: auto;              /* the card's centre line, as drawn */
  bottom: calc(7vh + 96px);
}
/* A single card is nth-child(1), so works-page.css is still dealing it the
   leftmost seat in the four-card fan. Reset that offset, and give it the slight
   lean in the render — it is resting on the wood, not mounted. */
.cs-hero .wk-card:nth-child(n) { --x: 0px; --y: 0px; --r: 2.2deg; --ry: -5deg; }
.cs-hero .wk-card:hover, .cs-hero .wk-card:has(:focus-visible) { --y: -2.2%; }

/* The card is this page's subject, so its name plate is not held back for a
   hover the way the works deck holds four of them back. */
.cs-hero .wk-plate { opacity: 1; }
.cs-hero .wk-card[data-open="true"] .wk-plate { opacity: 0; }

/* Opened: it squares up and turns over to the brand board. The works deck
   scales an opened card 2.1x because it starts small enough to sit four in a
   row; a single card already stands large, so it opens gently. */
.cs-hero .wk-card[data-open="true"] { --s: 1.3; --y: -12%; }

/* ---------- Reveal hint ---------- */
.cs-hint {
  position: absolute; left: 0; right: 0; bottom: clamp(26px, 4.4vh, 58px); z-index: 5;
  display: flex; align-items: center; justify-content: center; gap: clamp(12px, 1.4vw, 24px);
  font: 400 clamp(10px, .82vw, 15px)/1 var(--mono);
  letter-spacing: .3em; text-transform: uppercase; color: var(--accent);
  transition: opacity .5s var(--ease);
}
.cs-hint i { display: block; width: clamp(34px, 5vw, 96px); height: 1px; background: var(--accent-line); }
.cs-hero:has(.wk-card[data-open="true"]) .cs-hint { opacity: 0; }

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .cs-hero .wk-stage { --w: min(30vw, 40vh, 340px); right: clamp(40px, 7vw, 150px); }
  .cs-copy { max-width: 46vw; }
}

/* ---------- Phone: copy on top, one card below ----------
   works-page.css lays the deck out as a 2x2 grid here and shifts an opened card
   sideways to centre it on that block. One card is its own block, so the grid
   drops to a single column and the shift goes back to zero. */
@media (max-width: 900px) {
  .cs-copy { max-width: none; }
  .cs-hero .wk-stage {
    --w: min(58vw, 290px);
    right: auto; bottom: auto;
    grid-template-columns: var(--w);
  }
  .cs-hero .wk-card:nth-child(n) { --r: 0deg; --ry: 0deg; }
  /* Opened, the card is 1.41x wider than its column and is laid out from the
     column's left edge, so without this it would hang off the right of the
     screen. Pull it back by half the width it gained to centre it. */
  .cs-hero .wk-card:nth-child(n)[data-open="true"] {
    --cx: calc(var(--w) * -.205); --s: 1; --y: 0px;
  }
  .cs-points { max-width: none; }
  .cs-hint { position: static; margin: clamp(18px, 3vh, 30px) 0 0; }
}


/* ==========================================================================
   The story — seven numbered sections and the close
   ==========================================================================

   Every section below the hero sits on one flat ground: the brand gray, --bg.
   That value was warmed from #1b1b1b to #1d1b19 site-wide on 2026-10-08, since
   DESIGN.md recorded the untinted original as a known defect that "should drift
   warm to match the warm branch". It is read from --bg here, never restated.

   The flat ground replaces a stepped tide (near-black climbing to warm
   charcoal) on request, 2026-10-08. Two things follow from it and are
   deliberate:

   - The metal no longer switches. Antique gold exists for the sections whose
     ground turns lighter warm charcoal; with one mid gray under the whole
     story there is no lighter ground to answer, so copper — DESIGN.md's base
     structural metal, and the metal the hero already wears — carries all of it.
     A metal that changed partway down an unchanging background would read as
     an accident.
   One departure, noted on purpose: DESIGN.md's body token is
   clamp(16px, 1.66vw, 33px), which is sized for a landing page's short
   paragraphs. This page is long-form reading, so body runs smaller and the
   measure is held to ~34em, the top of the range the system allows.
*/

.cs-page { --cream: #efe6d8; }

.cs-sec {
  position: relative; isolation: isolate;
  background: var(--surface);
  padding: clamp(58px, 9vh, 130px) clamp(26px, 3.6vw, 82px);
}
/* The Diamond Pin Rule: every pin is filled with its own section's surface, so
   it reads as sitting in the rule rather than on top of it. */
.cs-sec .deco-frame i, .cs-close .deco-frame i { background: var(--surface); }

/* One ground for the whole story, and one metal on it. Taken from --bg rather
   than restated, so there is a single definition of the page base. */
.cs-sec, .cs-close { --surface: var(--bg); }

/* ---------- Section frame: a margin rail, then the column ---------- */
/* The rail hangs in the left margin of a centred column, rather than the pair
   being left-aligned in the viewport — otherwise the text leaves half the
   screen empty on a wide monitor. */
.cs-wrap {
  display: grid; grid-template-columns: minmax(130px, 190px) minmax(0, 1fr);
  gap: clamp(24px, 3.2vw, 70px);
  max-width: 1120px; margin: 0 auto;
}

/* the rail: a number stamped in a diamond, and the section's name beneath it */
.cs-rail {
  display: flex; flex-direction: column; align-items: flex-start; gap: clamp(14px, 1.8vh, 24px);
  position: sticky; top: clamp(96px, 14vh, 150px); align-self: start;
  font: 400 clamp(11px, .88vw, 16px)/1.6 var(--mono);
  letter-spacing: .26em; text-transform: uppercase; color: var(--accent);
}
/* The number is stamped upright inside a turned diamond, so the diamond is
   drawn as a pseudo-element rather than by rotating the badge itself — rotating
   the badge would turn the digits with it. Inset 15% is the figure at which a
   square rotated 45deg exactly meets the edges of its box. */
.cs-rail b {
  position: relative; display: grid; place-items: center;
  width: clamp(38px, 3.3vw, 62px); aspect-ratio: 1;
  font: 500 clamp(12px, .95vw, 17px)/1 var(--mono);
  letter-spacing: .06em; color: var(--accent);
}
.cs-rail b::before {
  content: ""; position: absolute; inset: 15%;
  border: 1px solid var(--accent); transform: rotate(45deg);
}
.cs-rail span { max-width: 9em; }

/* em here resolves against .cs-main's own inherited 16px, not the paragraph's
   size — 44em lands the prose at roughly 31em of its own type, the upper end of
   the 22-34em measure DESIGN.md allows. */
.cs-main { max-width: 44em; scroll-margin-top: clamp(84px, 11vh, 120px); }
.cs-sec, .cs-close { scroll-margin-top: clamp(84px, 11vh, 120px); }

.cs-head {
  font: 900 clamp(27px, 2.9vw, 52px)/1.06 var(--display);
  letter-spacing: -.035em; word-spacing: .05em; color: var(--ink);
  margin: 0 0 clamp(20px, 3vh, 38px); max-width: 17em;
}
.cs-main p {
  margin: 0 0 clamp(16px, 2.2vh, 28px);
  font: 300 clamp(17px, 1.3vw, 26px)/1.56 var(--serif); color: var(--cream);
}
.cs-main p:last-child { margin-bottom: 0; }
/* the one line that sets up the section, held a step above the prose */
.cs-stand {
  font-size: clamp(19px, 1.5vw, 29px) !important; color: var(--ink) !important;
}
.cs-lead-in { margin-bottom: clamp(12px, 1.6vh, 18px) !important; }

/* ---------- List: diamond-marked, never a disc ---------- */
.cs-list { list-style: none; margin: 0 0 clamp(20px, 2.8vh, 34px); padding: 0; display: grid; gap: clamp(10px, 1.4vh, 17px); }
.cs-list li {
  position: relative; padding-left: clamp(26px, 2vw, 38px);
  font: 300 clamp(17px, 1.3vw, 26px)/1.5 var(--serif); color: var(--cream);
}
.cs-list li::before {
  content: ""; position: absolute; left: 0; top: .52em;
  width: 9px; height: 9px; border: 1px solid var(--accent); transform: rotate(45deg);
}

/* ---------- Quote: a drawn plate, four brackets, no fill and no shadow ----------
   The section already draws one rule and the plate draws its own; that is the
   stacking DESIGN.md expects. What it forbids is doubling either of them, so
   neither carries a second rule. */
.cs-quote {
  position: relative; margin: clamp(26px, 3.6vh, 46px) 0;
  padding: clamp(26px, 3.2vh, 44px) clamp(24px, 2.4vw, 46px);
  border: 1px solid var(--accent-line);
}
.cs-quote::before, .cs-quote::after,
.cs-quote blockquote::before, .cs-quote blockquote::after {
  content: ""; position: absolute; width: 13px; height: 13px; border: 1px solid var(--accent);
}
.cs-quote::before { left: 6px; top: 6px; border-right: 0; border-bottom: 0; }
.cs-quote::after { right: 6px; bottom: 6px; border-left: 0; border-top: 0; }
.cs-quote blockquote::before { right: 6px; top: 6px; border-left: 0; border-bottom: 0; }
.cs-quote blockquote::after { left: 6px; bottom: 6px; border-right: 0; border-top: 0; }
.cs-quote blockquote { margin: 0; }
.cs-quote blockquote p {
  margin: 0;
  font: 300 clamp(18px, 1.44vw, 29px)/1.5 var(--serif); font-style: italic; color: var(--ink);
}
.cs-quote blockquote p::before { content: "\201C"; }
.cs-quote blockquote p::after { content: "\201D"; }
/* name over brand, not a single wrapping line — at this tracking the two run
   wider than the plate and the separator ends up dangling at a line break */
.cs-quote figcaption {
  display: grid; gap: clamp(5px, .7vh, 9px);
  margin-top: clamp(16px, 2vh, 24px);
  font: 400 clamp(10px, .82vw, 15px)/1.5 var(--mono);
  letter-spacing: .22em; text-transform: uppercase; color: var(--accent);
}
.cs-quote figcaption i { display: none; }
.cs-quote figcaption span { color: var(--soft); letter-spacing: .18em; }

/* ---------- The work itself: a screenshot on a drawn plate ----------
   The rule sits off the photograph with a mat between them, so the corner
   brackets land on the page ground and stay legible whatever the shot is doing
   at its own edges. Square corners and no shadow, as everywhere else. */
.cs-shot { margin: clamp(26px, 3.6vh, 46px) 0; }
.cs-shot-plate {
  position: relative; display: block;
  padding: clamp(8px, .9vw, 14px);
  border: 1px solid var(--accent-line);
}
.cs-shot-plate::before, .cs-shot-plate::after,
.cs-shot-plate i::before, .cs-shot-plate i::after {
  content: ""; position: absolute; width: 13px; height: 13px; border: 1px solid var(--accent);
}
.cs-shot-plate::before { left: 5px; top: 5px; border-right: 0; border-bottom: 0; }
.cs-shot-plate::after { right: 5px; bottom: 5px; border-left: 0; border-top: 0; }
.cs-shot-plate i { position: absolute; inset: 0; pointer-events: none; }
.cs-shot-plate i::before { right: 5px; top: 5px; border-left: 0; border-bottom: 0; }
.cs-shot-plate i::after { left: 5px; bottom: 5px; border-right: 0; border-top: 0; }
.cs-shot img { width: 100%; height: auto; }
.cs-shot figcaption {
  margin-top: clamp(12px, 1.6vh, 18px);
  font: 400 clamp(10px, .82vw, 15px)/1.5 var(--mono);
  letter-spacing: .22em; text-transform: uppercase; color: var(--accent);
}

/* ---------- The closing claim of a section ----------
   DESIGN.md reserves Playfair Display 700 for the single bold claim that closes
   a section. Two of them on this page, and no more. */
.cs-claim {
  margin: clamp(32px, 4.4vh, 58px) 0 0; padding-top: clamp(24px, 3vh, 38px);
  border-top: 1px solid var(--accent-line);
}
.cs-claim-label {
  margin: 0 0 clamp(12px, 1.6vh, 20px) !important;
  font: 400 clamp(10px, .84vw, 15px)/1 var(--mono) !important;
  letter-spacing: .3em; text-transform: uppercase; color: var(--accent) !important;
}
.cs-claim-text {
  margin: 0 !important; max-width: 20em;
  font: 700 clamp(20px, 1.68vw, 33px)/1.42 "Playfair Display", Georgia, serif !important;
  color: var(--ink) !important;
}

/* ---------- Close: the page's one call to action ---------- */
.cs-close {
  position: relative; isolation: isolate;
  background: var(--surface);
  padding: clamp(66px, 11vh, 150px) clamp(26px, 3.6vw, 82px);
  text-align: center;
}
.cs-close-inner { max-width: 880px; margin: 0 auto; }
.cs-close .deco-eyebrow { justify-content: center; margin-bottom: clamp(20px, 2.8vh, 36px); }
.cs-close .deco-eyebrow em { max-width: 180px; }
.cs-close-head {
  margin: 0; font: 900 clamp(32px, 3.6vw, 66px)/1.02 var(--display);
  letter-spacing: -.038em; word-spacing: .05em; color: var(--ink);
}
.cs-close-sub {
  margin: clamp(16px, 2.4vh, 28px) auto 0; max-width: 28em;
  font: 300 clamp(17px, 1.32vw, 26px)/1.56 var(--serif); color: var(--cream);
}

/* ---------- Phone ---------- */
@media (max-width: 900px) {
  .cs-wrap { grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 3vh, 32px); }
  /* the rail lies down into a single line above the heading */
  .cs-rail {
    position: static; flex-direction: row; align-items: center; gap: clamp(14px, 3vw, 22px);
  }
  .cs-rail span { max-width: none; }
  .cs-main { max-width: none; }
}