/* ═══ CASE STUDIES ════════════════════════════════════════════════
   Chapter pages. Same palette and grounds as sos.css, but the type
   carries the page — a case study earns display scale that a landing
   section does not. Plates deliberately break the uniform rectangle
   rhythm: the first is full width, then the run alternates, so the
   page never reads as a CMS loop of equal cards.

   NOTE ON SCOPE: the accessibility floor at the bottom of this file is
   site-wide, not case-study-specific. It lives here because this is the
   one stylesheet every one of the eighteen pages already loads, and
   because it must cascade LAST to beat the display-type rules above it.
   Putting it in its own file would mean editing eighteen HTML heads to
   link it; putting it at the top would let the rules above override it.
   ════════════════════════════════════════════════════════════════ */

main{display:block}

/* ── masthead / kicker ── */
.cs{padding:clamp(30px,5vw,64px) 0 clamp(60px,8vw,120px)}
.cs-kicker{font-family:var(--goth);font-weight:600;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--dim);margin-bottom:clamp(18px,3vw,34px)}
.cs-kicker a{color:var(--gold);text-decoration:none}
.cs-kicker a:hover{color:var(--gold-lt)}
.cs-kicker span{opacity:.5;padding:0 6px}

/* the title is the art direction */
.cs-title{font-family:var(--fat);font-weight:800;color:var(--sand);text-transform:uppercase;
  font-size:clamp(40px,8.4vw,124px);line-height:.9;letter-spacing:-.01em;max-width:16ch}
.cs-dek{margin-top:clamp(20px,3vw,34px);max-width:52ch;font-size:clamp(18px,2vw,23px);
  line-height:1.45;color:var(--cream)}

.cs-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:0 clamp(20px,3vw,48px);
  margin:clamp(34px,5vw,62px) 0 0;padding:0}
@media(max-width:700px){.cs-meta{grid-template-columns:1fr;gap:0}}
.cs-meta div{border-top:1px solid var(--rule);padding:14px 0 0;margin:0 0 18px}
.cs-meta dt{font-family:var(--goth);font-weight:600;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold)}
.cs-meta dd{margin:7px 0 0;font-family:var(--type);font-size:13.5px;line-height:1.5;color:var(--sand2)}

/* ── body ── */
.cs-body{margin-top:clamp(46px,7vw,96px)}
.cs-body h2{font-family:var(--fat);font-weight:700;color:var(--sand);text-transform:uppercase;
  font-size:clamp(26px,4vw,46px);line-height:1.03;max-width:20ch;
  margin:clamp(52px,7vw,96px) 0 22px;padding-top:22px;border-top:1px solid var(--rule)}
.cs-body h3,.cs-body h4{font-family:var(--goth);font-weight:600;font-size:13px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);margin:clamp(30px,4vw,46px) 0 14px}
.cs-body p{font-size:17.5px;line-height:1.66;color:var(--cream);max-width:66ch;margin-bottom:20px}
.cs-body a{color:var(--gold-lt);text-decoration:none;border-bottom:1px solid var(--rule)}
.cs-body a:hover{border-color:var(--gold)}
.cs-body strong{color:var(--sand);font-weight:600}
.cs-body ul{list-style:none;padding:0;margin:0 0 26px;max-width:66ch}
.cs-body li{position:relative;padding-left:26px;margin-bottom:13px;font-family:var(--type);
  font-size:14px;line-height:1.65;color:var(--sand2)}
.cs-body li::before{content:"";position:absolute;left:0;top:9px;width:11px;height:1px;background:var(--gold)}
.cs-body li strong{color:var(--cream)}
/* a quote is a moment, not an indented paragraph */
.cs-body blockquote{margin:clamp(40px,6vw,72px) 0;padding:0;border:0;max-width:22ch}
.cs-body blockquote{font-family:var(--fat);font-weight:700;color:var(--gold);
  font-size:clamp(22px,3.6vw,40px);line-height:1.1;text-transform:none}

/* ── plates: first full width, then an alternating run ── */
.plates{margin-top:clamp(52px,7vw,100px);display:grid;grid-template-columns:repeat(2,1fr);gap:2px;
  background:var(--black);border:1px solid var(--rule)}
@media(max-width:680px){.plates{grid-template-columns:1fr}}
.pl{margin:0;background:var(--black2);box-shadow:0 0 0 1px var(--rule2);
  display:grid;place-items:center;padding:0;overflow:hidden}
.pl:first-child{grid-column:1/-1}
.pl:nth-child(6n+4){grid-column:1/-1}
.pl img{width:100%;height:100%;object-fit:contain;background:var(--paper);
  padding:clamp(14px,2.2vw,30px);display:block;aspect-ratio:4/3}
.pl:first-child img,.pl:nth-child(6n+4) img{aspect-ratio:16/8}
@media(max-width:680px){.pl img,.pl:first-child img{aspect-ratio:4/3}}

/* ── press, made editorial ── */
.cs-press{margin-top:clamp(56px,8vw,110px)}
.cs-press h2{font-family:var(--fat);font-weight:700;color:var(--sand);text-transform:uppercase;
  font-size:clamp(24px,3.4vw,40px);margin-bottom:6px}
.prs{list-style:none;padding:0;margin:26px 0 0;border-top:1px solid var(--rule)}
.prs li{border-bottom:1px solid var(--rule)}
.prs a{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;padding:18px 4px;
  text-decoration:none;transition:padding-left .3s cubic-bezier(.2,.7,.3,1),background .3s ease}
.prs a:hover{padding-left:16px;background:rgba(200,127,44,.05)}
.prs span{font-family:var(--fat);font-weight:700;font-size:clamp(17px,2.2vw,25px);
  line-height:1.15;color:var(--cream);flex:1 1 60%}
.prs a:hover span{color:var(--gold-lt)}
.prs em{font-family:var(--goth);font-weight:500;font-style:normal;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--dim);white-space:nowrap}

/* ── next / back ── */
.cs-next{margin-top:clamp(60px,8vw,120px);padding-top:30px;border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:22px 40px;align-items:baseline;justify-content:space-between}
.cs-next>a:first-child{text-decoration:none;max-width:22ch}
.cs-next .label{display:block;font-family:var(--goth);font-weight:600;font-size:10px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:9px}
.cs-next b{font-family:var(--fat);font-weight:700;font-size:clamp(22px,3.2vw,38px);
  line-height:1.04;color:var(--sand);text-transform:uppercase;display:block}
.cs-next>a:first-child:hover b{color:var(--gold-lt)}
.cs-back{font-family:var(--goth);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:3px}
.cs-back:hover{color:var(--gold-lt);border-color:var(--gold)}

/* ── /work index ── */
.wk-hero{padding:clamp(40px,6vw,90px) 0 clamp(24px,4vw,48px)}
.wk-h1{font-family:var(--fat);font-weight:800;color:var(--sand);text-transform:uppercase;
  font-size:clamp(44px,10vw,150px);line-height:.86;letter-spacing:-.01em}
.wk-sub{margin-top:24px;max-width:54ch;font-size:clamp(17px,1.8vw,21px);color:var(--cream)}
.idx{list-style:none;padding:0;margin:clamp(40px,6vw,80px) 0 0;border-top:1px solid var(--rule)}
.idx li{border-bottom:1px solid var(--rule)}
.idx a{display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,.85fr) 132px;
  gap:clamp(14px,2.4vw,34px);align-items:center;padding:clamp(18px,2.6vw,30px) 4px;
  text-decoration:none;transition:background .3s ease,padding-left .35s cubic-bezier(.2,.7,.3,1)}
.idx a:hover{background:rgba(200,127,44,.055);padding-left:18px}
@media(max-width:900px){.idx a{grid-template-columns:44px 1fr;row-gap:8px}
  .idx .ix-cat,.idx .ix-yr{grid-column:2}}
.ix-n{font-family:var(--type);font-size:11.5px;color:var(--dim);letter-spacing:.08em}
.ix-t{font-family:var(--fat);font-weight:700;text-transform:uppercase;color:var(--cream);
  font-size:clamp(19px,2.7vw,33px);line-height:1.05}
.idx a:hover .ix-t{color:var(--gold-lt)}
.ix-cat{font-family:var(--type);font-size:13px;color:var(--sand2);line-height:1.5}
.ix-yr{font-family:var(--goth);font-weight:500;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim);text-align:right}
@media(max-width:900px){.ix-yr{text-align:left}}
.wk-note{margin-top:34px;font-family:var(--type);font-size:12.5px;color:var(--dim);max-width:70ch;line-height:1.6}

/* ── /press ── */
.pr-lede{margin-top:26px;max-width:56ch;font-size:clamp(17px,1.8vw,21px);color:var(--cream)}
.pr-group{margin-top:clamp(44px,6vw,84px)}
.pr-group>h2{font-family:var(--goth);font-weight:600;font-size:11.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);padding-bottom:14px;border-bottom:1px solid var(--rule)}

/* ═══════════════════════════════════════════════════════════════════
   ACCESSIBILITY FLOOR — site-wide, and it must stay last in this file
   ═══════════════════════════════════════════════════════════════════
   Written 2026-09-06 after Kai's WCAG 2.2 AA verification returned FAIL
   and the findings were reproduced independently here.

   MEASUREMENT LESSON, recorded because it cost a wrong first answer:
   element rectangles do not reveal text overflow. A heading box can be
   256px wide and perfectly inside the viewport while the WORD inside it
   renders 375px and spills. getBoundingClientRect().right never sees it.
   The measurement that does is scrollWidth vs clientWidth, per element.
   The first pass here reported "no offenders" on /contact/ while the
   document was scrolling sideways by 87px.

   Instrument check first, always: assert documentElement.clientWidth is
   actually 320 before believing any reflow number. An emulated 320
   viewport with a scrollbar reports innerWidth 347 and is not 320.

   ── SC 1.4.10 Reflow ────────────────────────────────────────────
   Measured at a true 320px: / scrolled 27px, /contact/ 87px, /about/
   17px. Root cause in every case was a single long word set in display
   type — "unforgettable.", "irrelevance." — plus the email address,
   which has no break opportunity at all. Display type does not wrap
   below its own word width, so the floor of each clamp has to come down
   on narrow screens and long words need permission to break. */
h1,h2,h3,h4,
.cs-title,.wk-h1,.dos-h,.c-h,.tagline,.spirit,
.ix-t,.prs span,.cs-next b,.ab-role,.sv-reel-h,.wk-h1{
  overflow-wrap:break-word;
}
/* an address or URL has no spaces to break at, so it needs anywhere */
a[href^="mailto:"],a[href^="tel:"],.ct-c a,.ct-c .v{
  overflow-wrap:anywhere;
}
@media(max-width:400px){
  .cs-title{font-size:clamp(30px,8.4vw,124px)}
  .wk-h1{font-size:clamp(34px,10vw,150px)}
  /* hyphenate only where the screen is genuinely narrow — desktop
     display type stays unhyphenated. Relies on <html lang="en">. */
  h1,h2,.cs-title,.wk-h1,.dos-h,.c-h,.cs-body h2{hyphens:auto}
}

/* ── SC 1.4.3 Contrast (minimum) ─────────────────────────────────
   Ratios computed against the three grounds this palette actually uses:
   --black #0C0A08, --black2 #12100D, --panel #181410.

   --dim was #867868: 4.61 on black, 4.43 on black2, 4.27 on panel. It
   carries most of the small text on the site, so two of its three
   grounds failed the 4.5 floor. #8A7C6C clears all three at 4.52+ and
   is a four-point lift per channel — not a visible change in the
   design, just a passing one. */
:root{--dim:#8A7C6C}

/* The 01–09 ordinals on the services cards were --rule #3A2E22 on
   black: 1.50 against a 3.0 requirement at 34px. They are quiet by
   intent, so this is the smallest colour that clears the bar rather
   than a redesign. They do get more visible — that is the trade. */
.ob .ob-n{color:#685C50}

/* The marquee alternates filled and outlined words. The outline was
   --gold-dp #8E5A1C at 3.42, which passes as large text but the clamp
   floors at 19px on a phone, where the requirement is 4.5. The stroke
   colour lifts; the fill stays transparent and the effect is intact. */
.marq-t span:nth-child(even){-webkit-text-stroke-color:#A26E30}


/* ═════════════════════════════════════════════════════════════════
   TYPOGRAPHY + CAPTION REPAIR — 2026-09-08
   Loaded last on every page that carries the affected markup, so the
   three fixes below live together instead of being scattered.
   ═════════════════════════════════════════════════════════════════ */

/* 1. Display type broke mid-word with no hyphen — "unforgettab / le."
   on /contact/, and proper nouns snapped in the next-case-study CTA.
   The break-word rule earlier in this file is what stops horizontal
   overflow at 320px, so it stays; these give the break somewhere
   sensible to land and stop headings orphaning their last word. */
h1,h2,h3,h4,
.cs-title,.wk-h1,.dos-h,.c-h,.tagline,.spirit,
.ix-t,.prs span,.cs-next b,.ab-role,.sv-reel-h{
  hyphens:auto;
  text-wrap:balance;
}
/* never hyphenate a name or a link label — those break on spaces only */
.cs-next b,.prs span,.ix-t{hyphens:manual}

/* 2. The ch unit is measured on "0", which runs narrower than the
   uppercase display faces actually set, so these limits were forcing
   breaks that the line had room for. Relaxed to fit the real words. */
.cs-title{max-width:19ch}
.cs-body h2{max-width:23ch}
.cs-body blockquote{max-width:25ch}
.cs-next>a:first-child{max-width:26ch}

/* 3. nowrap + ellipsis cut 50 of the 76 work-tile captions at 390px,
   and because @media(hover:none) pins captions open on touch, a phone
   showed a permanently clipped label with no way to read the rest.
   Same truncation hit 16 Obsession Wall scraps. Two lines each. */
.wk figcaption,.scrap span{
  white-space:normal;
  text-overflow:clip;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
.wk figcaption{line-height:1.35}
.scrap{padding-bottom:40px}
.scrap span{line-height:1.25}


/* ═════════════════════════════════════════════════════════════════
   CHAPTER MARKERS + THE REEL — 2026-09-08
   Andie's points 2 and 3. The 01–09 ordinals were set in the mono
   face at 13px, which reads as list numbering rather than as part of
   the brand. They move to the display face with room around them —
   collectible chapter markers, still quieter than the headings they
   sit beside. Colour is left exactly where the contrast pass put it.
   ═════════════════════════════════════════════════════════════════ */
.sv-n{
  font-family:var(--fat) !important;
  font-weight:700;
  font-size:clamp(26px,3.2vw,40px) !important;
  line-height:.9;
  letter-spacing:-.02em;
  padding-top:2px !important;
  position:relative;
}
.sv-n::after{content:"";position:absolute;left:0;bottom:-11px;width:22px;height:1px;
  background:var(--gold);opacity:.55}
@media(max-width:820px){.sv-n{font-size:clamp(22px,7vw,30px) !important}}

/* the same idea on the home page's nine cards */
.ob .ob-n{
  font-family:var(--fat);
  font-weight:700;
  font-size:clamp(30px,3.6vw,44px);
  line-height:.9;
  letter-spacing:-.02em;
}

/* ── the reel, given a frame instead of a plain panel ──────────────
   Corner rules and a low warm pool, lifted from the printed brand.
   Deliberately small: it should feel made, not decorated. */
.sv-reel{position:relative;overflow:hidden}
.sv-reel::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 70% at 82% 50%,rgba(200,127,44,.10),transparent 68%)}
.sv-reel::after{content:"";position:absolute;inset:11px;pointer-events:none;
  border:1px solid rgba(200,127,44,.22);
  -webkit-mask:linear-gradient(#000 0 0) top left/26px 1px no-repeat,
    linear-gradient(#000 0 0) top left/1px 26px no-repeat,
    linear-gradient(#000 0 0) top right/26px 1px no-repeat,
    linear-gradient(#000 0 0) top right/1px 26px no-repeat,
    linear-gradient(#000 0 0) bottom left/26px 1px no-repeat,
    linear-gradient(#000 0 0) bottom left/1px 26px no-repeat,
    linear-gradient(#000 0 0) bottom right/26px 1px no-repeat,
    linear-gradient(#000 0 0) bottom right/1px 26px no-repeat;
          mask:linear-gradient(#000 0 0) top left/26px 1px no-repeat,
    linear-gradient(#000 0 0) top left/1px 26px no-repeat,
    linear-gradient(#000 0 0) top right/26px 1px no-repeat,
    linear-gradient(#000 0 0) top right/1px 26px no-repeat,
    linear-gradient(#000 0 0) bottom left/26px 1px no-repeat,
    linear-gradient(#000 0 0) bottom left/1px 26px no-repeat,
    linear-gradient(#000 0 0) bottom right/26px 1px no-repeat,
    linear-gradient(#000 0 0) bottom right/1px 26px no-repeat}
.sv-reel-txt,.sv-phone{position:relative;z-index:1}
.sv-reel-p2{color:var(--cream) !important;font-weight:500}