/* case-study-rail.css
   Sticky-rail case study layout. Extracted from coros.html so every
   case study can share it. Deliberately separate from case-study.css:
   nothing here changes a page that does not link it. */

/* =====================================================================
   RAIL TEMPLATE  ·  prototype layer over assets/case-study.css
   ---------------------------------------------------------------------
   Structure borrowed from amylalai.com: a sticky left rail (back link,
   title, scroll-spy jump nav) with one narrow content column beside it.
   Everything below is additive. It overrides nothing in the shared
   stylesheet except the full-bleed math, which assumes a centred column
   and has to bleed right-only here so it never runs under the rail.
   ===================================================================== */

/* =====================================================================
   TYPE STACK
   ---------------------------------------------------------------------
   Target, from the specimen: Romie Regular / Acumin Medium / Inter Light.
   Neither Romie nor Acumin is free, and neither is in this repo, so the
   page runs on free stand-ins picked to sit in the same class. Swapping to
   the real thing is these three variables and nothing else.

   ROMIE  · Very Cool Studio, paid. Desktop and web are separate licences
            and the web one is what this page needs. Self-hosted.
            Drop the woff2 in assets/fonts/ and uncomment the @font-face
            below, then set --f-head to 'Romie'.
   ACUMIN · Adobe Fonts. Included with any Creative Cloud plan, but web use
            needs a published Web Project. Adobe gives you a <link> to a
            use.typekit.net kit; paste it above this <style> block, then
            set --f-sub to 'acumin-pro'. It will NOT work from a locally
            installed desktop copy.
   INTER  · already loaded. No change.

   ?type=1 opens a switcher to compare the headline candidates live.
   ===================================================================== */
/*
@font-face{
  font-family:'Romie';
  src:url('assets/fonts/Romie-Regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
*/
:root{
  --f-head:'Newsreader', 'Romie', var(--font-serif), Georgia, serif;
  --f-sub:'Archivo', 'acumin-pro', var(--font-primary), sans-serif;
  --f-body:var(--font-primary);
  /* per-face optical correction: the stand-ins do not set at the same size
     or colour, so each carries its own scale and tracking nudge */
  --head-scale:1;
  --head-track:-0.01em;
  --stmt-size:1.75rem;
  --head-weight:400;
}
.csr-display,.csr-railtitle,.csr-next b{font-variation-settings:'opsz' 60;}

/* alternates, via ?type=1. Instrument Serif is much darker and narrower
   than the rest, so it is the one that needs its size pulled back. */
html[data-head="playfair"]{--f-head:'Playfair Display', serif; --head-scale:.96;}
html[data-head="fraunces"]{--f-head:'Fraunces', serif; --head-scale:.94; --head-track:-0.015em;}
html[data-head="instrument"]{--f-head:'Instrument Serif', serif; --head-scale:.9; --head-track:-0.005em;}
html[data-head="dmserif"]{--f-head:'DM Serif Display', serif; --head-scale:.9; --head-track:-0.005em;}
/* WONK 0: Fraunces' wonky terminals are more idiosyncratic than Romie is */
html[data-head="fraunces"] .csr-display,
html[data-head="fraunces"] .csr-railtitle,
html[data-head="fraunces"] .csr-next b{
  font-variation-settings:'SOFT' 0,'WONK' 0,'opsz' 100;
}
html[data-head="playfair"] .csr-display,
html[data-head="instrument"] .csr-display,
html[data-head="dmserif"] .csr-display{font-variation-settings:normal;}

/* ---------- full-bleed hero ---------- */
.csr-hero{
  margin-top:76px;padding:96px 40px 88px;
  background:#EADFD6 url('../images/shared/mosaic-desert.webp') center top / cover no-repeat;
  display:flex;justify-content:center;align-items:flex-end;gap:clamp(16px,4vw,64px);
}
.csr-hero img{
  width:clamp(140px,17vw,250px);height:auto;display:block;
  filter:drop-shadow(0 26px 60px rgba(65,0,22,.16));
}
.csr-hero img:nth-child(2){margin-bottom:44px;}
@media (max-width:760px){
  .csr-hero{padding:56px 20px 48px;gap:12px;}
  .csr-hero img:nth-child(3){display:none;}
}

/* ---------- shell: rail + content ---------- */
.csr-shell{
  max-width:1240px;margin:0 auto;
  padding:72px 80px 120px;
  display:grid;grid-template-columns:200px minmax(0,1fr);gap:64px;
  align-items:start;
}
.csr-rail{position:sticky;top:118px;}
.csr-back{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  font-family:var(--font-mono);font-size:0.6rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--text-light);
  transition:color .25s ease;margin-bottom:26px;
}
.csr-back:hover{color:var(--orange);}
.csr-railtitle{
  font-family:var(--f-head);font-size:calc(1.5rem * var(--head-scale));line-height:1.15;
  letter-spacing:var(--head-track);
  color:var(--text-dark);margin-bottom:30px;
}
.csr-jump{display:flex;flex-direction:column;gap:2px;}
.csr-jump a{
  text-decoration:none;padding:9px 0;
  font-family:var(--font-mono);font-size:0.66rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--text-muted);
  transition:color .3s ease,padding-left .3s ease;
  border-left:1px solid transparent;
}
.csr-jump a:hover{color:var(--text-light);}
.csr-jump a.is-active{color:var(--text-dark);}
.csr-jump a.is-active::before{
  content:'';display:inline-block;width:14px;height:1px;
  background:var(--orange);vertical-align:middle;margin-right:9px;
}

/* ---------- sections ---------- */
.csr-sec{scroll-margin-top:120px;padding-bottom:96px;}
.csr-sec:last-child{padding-bottom:24px;}
.csr-eyebrow{
  font-family:var(--font-mono);font-size:0.62rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--text-light);
  margin-bottom:12px;
}
.csr-display{
  font-family:var(--f-head);
  /* h2 defaults to 700 and nothing here ever overrode it, which is why these
     read as heavy. The specimen calls for Romie REGULAR. 400 is the default;
     the ?type=1 panel can push it to 500/600 to compare. */
  font-weight:var(--head-weight,400);
  font-size:calc(clamp(1.7rem,3.4vw,2.6rem) * var(--head-scale));line-height:1.2;
  color:var(--text-dark);letter-spacing:var(--head-track);margin-bottom:24px;
}
.csr-sec p{font-family:var(--f-body);font-size:0.95rem;line-height:1.85;color:var(--text-light);
  font-weight:300;margin-bottom:1rem;}
.csr-sec p strong{color:var(--text-dark);font-weight:500;}
/* qualified with p so they outrank `.csr-sec p` above, which is (0,1,1) */
.csr-sec p.csr-sub{
  /* scales with the h2s so it never crowds them on a narrow window */
  font-family:var(--f-sub);font-size:clamp(1.2rem,2vw,1.38rem);font-weight:500;line-height:1.45;color:var(--text-dark);
  margin:68px 0 10px;letter-spacing:-0.01em;
}

/* ---------- meta row, Amy's inline treatment ---------- */
.csr-meta{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:28px 36px;margin-top:44px;
}
.csr-meta .half{grid-column:span 2;}
.csr-meta dt{
  font-family:var(--font-mono);font-size:0.55rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--text-muted);
  margin-bottom:9px;
}
.csr-meta dd{margin:0;font-size:0.88rem;font-weight:300;line-height:1.6;color:var(--text-light);}
@media (max-width:700px){
  .csr-meta{grid-template-columns:repeat(2,minmax(0,1fr));}
  .csr-meta .half{grid-column:1 / -1;}
}

/* ---------- the problem statement ----------
   No card. The tinted box + 2.6rem serif read as a poster, so the statement
   now sits on the page at a step BELOW the section heads: the eyebrow says
   which beat this is, the rule holds the question, and nothing shouts.
   --stmt-size is driven by the ?type=1 stepper so the size can be judged
   against real copy rather than argued about. */
.csr-problem{margin:4px 0 34px;}
.csr-stmt{
  font-family:var(--f-head);
  /* Sept 11 2026: now the SAME size and weight as .csr-display. It used to be
     a fixed 1.75rem at weight 300 while the h2s shrink with the viewport, so
     between ~640 and ~1050px the statement was BIGGER than the section heads
     and lighter: it read as a broken heading, not a quieter one. */
  font-size:calc(clamp(1.7rem,3.4vw,2.6rem) * var(--head-scale));
  line-height:1.2;font-weight:var(--head-weight,400);letter-spacing:var(--head-track);
  color:var(--text-dark);margin:0 0 22px;
  font-variation-settings:'opsz' 60;
}
.csr-problem .csr-q{
  font-size:0.95rem;font-weight:300;line-height:1.75;color:var(--text-light);
  padding-top:20px;border-top:1px solid var(--divider);margin:0;
}


/* ---------- three-up insight columns ---------- */
.csr-cols{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:34px;margin:36px 0 8px;
}
.csr-cols h4{
  font-family:var(--f-sub);font-size:0.9rem;font-weight:500;line-height:1.45;color:var(--text-dark);
  margin:0 0 10px;letter-spacing:-0.01em;
}
.csr-cols p{font-size:0.85rem;line-height:1.75;margin:0;}
.csr-num{
  display:block;font-family:var(--font-mono);font-size:0.6rem;font-weight:500;
  letter-spacing:.2em;color:var(--orange);margin-bottom:12px;
  padding-bottom:10px;border-bottom:1px solid var(--divider);
}
@media (max-width:820px){.csr-cols{grid-template-columns:1fr;gap:28px;}}

/* ---------- framed media panel + linear numbered step ----------
   UNUSED on this page. The Solution section runs Emma's drifting canvas
   instead. Kept because it is the other half of Amy's template: a linear
   step / copy / big framed screen rhythm. Swap it in if the sticky
   disclosure ever feels like too much machinery for a study. */
.csr-frame{
  background:var(--bg-warm);border-radius:8px;
  padding:56px 40px;margin:22px 0 12px;
  display:flex;justify-content:center;align-items:center;gap:40px;
}
.csr-frame img{max-width:100%;height:auto;display:block;}
.csr-frame.phone img{width:clamp(180px,26vw,270px);}
.csr-frame.pair img{width:clamp(150px,20vw,225px);}
.csr-sec p.csr-cap{
  font-family:var(--font-mono);font-size:0.58rem;line-height:1.6;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-muted);margin:10px 0 0;
}
@media (max-width:640px){.csr-frame{padding:32px 18px;gap:18px;}}

/* ---------- numbered walkthrough ---------- */
.csr-step{padding-top:40px;border-top:1px solid var(--divider);margin-top:44px;}
.csr-step:first-of-type{border-top:0;padding-top:0;}
.csr-step-n{
  font-family:var(--font-mono);font-size:0.62rem;font-weight:500;
  letter-spacing:.2em;color:var(--orange);display:block;margin-bottom:12px;
}
.csr-step h3{
  font-family:var(--f-sub);font-size:1.22rem;font-weight:500;line-height:1.35;color:var(--text-dark);
  letter-spacing:-0.015em;margin:0 0 14px;
}

/* ---------- learnings, Amy's two-up ---------- */
.csr-learn{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:44px 40px;margin-top:36px;
}
.csr-learn h4{
  font-family:var(--f-sub);font-size:1.08rem;font-weight:500;line-height:1.35;color:var(--text-dark);
  letter-spacing:-0.015em;margin:0 0 12px;
}
.csr-learn p{font-size:0.88rem;line-height:1.8;margin:0;}
@media (max-width:760px){.csr-learn{grid-template-columns:1fr;gap:32px;}}

/* ---------- next project ---------- */
.csr-next{
  border-top:1px solid var(--divider);margin-top:20px;padding-top:34px;
  display:flex;justify-content:space-between;align-items:baseline;gap:24px;
  text-decoration:none;
}
.csr-next span{
  font-family:var(--font-mono);font-size:0.6rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--text-muted);
}
.csr-next b{
  font-family:var(--f-head);font-weight:var(--head-weight,400);font-size:calc(1.6rem * var(--head-scale));
  letter-spacing:var(--head-track);
  color:var(--text-dark);transition:color .3s ease;
}
.csr-next:hover b{color:var(--orange);}

/* ---------- live prototype link (.csr-proto) ----------
   A prototype that is hosted off-site. Built as a card, not an inline link,
   because it is usually the only clickable thing in the section it sits in and
   an inline link disappears into body copy. Three lines: mono label so it reads
   as a component, headline-scale link text, then the bare host so the reader
   can see where the click is sending them before they take it. Uses the same
   head vars as .csr-next so it tracks any font swap on <html data-head>. */
.csr-proto{
  display:block;margin:28px 0 8px;padding:22px 26px;
  border:1px solid var(--divider);border-radius:14px;
  background:var(--bg-warm);text-decoration:none;
  transition:border-color .3s ease, background .3s ease;
}
.csr-proto:hover{border-color:var(--orange);background:#fff;}
.csr-proto span{
  display:block;font-family:var(--font-mono);font-size:0.55rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--text-muted);
}
.csr-proto b{
  display:block;margin-top:10px;
  font-family:var(--f-head);font-weight:var(--head-weight,400);
  font-size:calc(1.25rem * var(--head-scale));letter-spacing:var(--head-track);
  color:var(--text-dark);transition:color .3s ease;
  text-wrap:balance;
}
.csr-proto:hover b{color:var(--orange);}
.csr-proto em{
  display:block;margin-top:8px;font-style:normal;
  font-family:var(--font-mono);font-size:0.58rem;letter-spacing:.06em;
  color:var(--text-muted);
}

/* ---------- bleed: right only, never under the rail ----------
   The shared stylesheet bleeds symmetrically off a centred column.
   Here the column sits right of a 200px rail, so a symmetric bleed
   would slide the media under it. Bleed into the right margin only. */
.csr-content{
  /* 780 is the reading measure. The grid track is wider than that, so the
     slack plus the page gutter is what the media is allowed to bleed into. */
  max-width:780px;
  /* 96px = the 36px of grid slack plus the 80px gutter, less a 20px margin.
     100vw counts the scrollbar, so the extra room past the shell is measured
     off 1280 rather than 1240 to stay clear of it. */
  --csr-bleed:min(230px, calc(96px + max(0px,(100vw - 1280px) / 2)));
  /* The 96px floor above overflowed the viewport by ~16px between 1024 and
     1230px. Third clamp = the room that actually exists. Was a page-local
     patch on capstone + aster only; promoted Sept 11 2026 so all 7 get it. */
  --csr-bleed:max(0px, min(230px, calc(96px + max(0px,(100vw - 1280px) / 2)), calc((100vw - 1240px) / 2 + 68px)));
}
.csr-content .cs-fd,
.csr-content .cs-sticky,
.csr-content .cs-image-wide{
  width:calc(100% + var(--csr-bleed)) !important;
  margin-left:0 !important;
}
/* the media half needs the room more than the pinned copy does at this width.
   Scoped above the stacking breakpoint: unscoped it outranks the shared
   stylesheet's mobile rule and keeps two columns on a phone. */
@media (min-width:901px){
  .csr-content .cs-sticky.left-text{grid-template-columns:1fr 1.15fr;gap:48px;}
}
.csr-content .cs-collage.old{margin:34vh 0 16vh;}
/* the blueprint PNGs carry their own padding, so 32px below reads as ~70 */
.csr-content .cs-image-wide{margin-bottom:6px;}
.csr-content .cs-section{margin-bottom:0;}
.csr-content .cs-alt + .cs-section,
.csr-content .cs-alt + .cs-section.cs-fd{margin-top:120px;}

/* ---------- mobile: rail becomes a scrolling chip bar ---------- */
@media (max-width:900px){
  /* minmax(0,…) + min-width:0, or the scrolling chip bar's intrinsic width
     stretches the track and takes the whole page wider than the viewport */
  .csr-shell{grid-template-columns:minmax(0,1fr);gap:0;padding:40px 28px 90px;}
  .csr-rail,.csr-content{min-width:0;}
  .csr-rail{
    /* The nav is 69px tall at rest and 61px once .scrolled shrinks its padding.
       top:64px matched neither: it tucked 5px under the nav at rest, then left a
       3px hole once the nav shrank, and body text scrolled through it. The rail
       only ever sticks after the nav has shrunk, so 60px is the number, and the
       1px overlap kills the sub-pixel seam. Opaque, because .94 ghosted too. */
    position:sticky;top:60px;z-index:60;margin:0 -28px 40px;
    padding:14px 28px;background:#FAF8F5;
    border-bottom:1px solid var(--divider);
  }
  .csr-railtitle{display:none;}
  .csr-back{margin-bottom:12px;}
  .csr-jump{
    flex-direction:row;gap:20px;overflow-x:auto;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .csr-jump::-webkit-scrollbar{display:none;}
  .csr-jump a{padding:2px 0;white-space:nowrap;}
  .csr-jump a.is-active::before{display:none;}
  .csr-jump a.is-active{border-bottom:1px solid var(--orange);}
  .csr-content{--csr-bleed:0px;}
  .csr-sec{padding-bottom:64px;scroll-margin-top:150px;}
}

/* ---------- legacy wide-canvas blocks, inside the rail ----------
   .cs-sticky / .cs-pin were built for the old 1240px canvas: a two-column
   grid that bleeds 80px past the text and a 100vh scroll-pinned stage. In a
   780px reading column that becomes a tall empty region, so inside the rail
   they stack as ordinary content and every step is shown at once.
   Scoped to .csr-content, so no page that does not use the rail is affected. */
.csr-content .cs-sticky{
  grid-template-columns:1fr !important;gap:34px;
  width:100% !important;margin-left:0 !important;
}
/* The 44vh/16vh margins on .cs-collage.stack are COROS-canvas spacing: they
   exist so a pinned text column has runway to scroll past while the figures
   drift. Inside the rail the collage is stacked UNDER the copy, so that 44vh
   is just 440px of dead cream between a paragraph and its own diagram. The
   .old variant was already scoped above; .stack never was, which left the
   same hole on all five rollout pages. */
.csr-content .cs-collage.stack{margin:34px 0 0;}
/* .cs-fd's figures drift up to ~34px UPWARD as the section crosses the
   viewport. On COROS the media canvas starts far below the copy so it never
   collides; on a page where prose runs straight into the finale (solace does
   now) the top figure rides over the last paragraph. 56px of clearance covers
   the drift with room to spare. --fd-head-offset does NOT help here: .flow
   resets .tiltwrap's transform, so that variable is inert in flow layout. */
.csr-content .cs-fd{margin-top:88px;}
/* .flow is a two-column drifting grid. .is-single stacks the figures in ONE
   column instead, for a study whose media pairs 1:1 with the numbered blocks
   beside it (solace: ritual / canvas / live demo against 01 / 02 / 03). */
.csr-content .cs-fd-media.flow.is-single{grid-template-columns:1fr;gap:34px;}
.csr-content .cs-fd-media.flow.is-single .pcol:nth-child(2){padding-top:0;}
.csr-content .cs-fd-media.flow.is-single video{width:100%;height:auto;display:block;border-radius:6px;}
/* the canvas is the only portrait artefact in the stack. At full column width
   it renders 762px tall against the ritual's 319 and the demo's 372, so it
   reads as the main event when it is really the middle step. Capped on the
   WRAPPER, not the img, so the zoom hairline tracks the smaller box. */
.csr-content .cs-fd-media.flow.is-single .tiltwrap.is-portrait{max-width:360px;margin:0 auto;}
.csr-content .cs-pin{position:static;height:auto;min-height:0;display:block;}
.csr-content .cs-pin-inner{display:block;width:100%;}
.csr-content .cs-step{
  grid-area:auto;opacity:1;transform:none;pointer-events:auto;margin-bottom:1.5rem;
}
.csr-content .cs-step:last-child{margin-bottom:0;}
.csr-content .cs-alt{grid-template-columns:1fr;gap:30px;}
.csr-content .cs-image-wide{width:100% !important;margin-left:0 !important;}

/* ---------- First Pass: artefact beside its reasoning ----------
   The old 1240px canvas ran .cs-alt as media-left / copy-right, and that
   pairing is the point of the section: you read "why it lost" next to the
   thing that lost. The rule above flattens it because 780px cannot carry two
   columns. So take the bleed back, and only claim the second column once the
   copy track is still a reading measure (~480px+) — hence the 1200px gate
   rather than applying this at every width. */
@media (min-width:1200px){
  .csr-content .cs-alt{
    grid-template-columns:minmax(0,0.8fr) minmax(0,1fr);
    gap:72px 52px;
    width:calc(100% + var(--csr-bleed));
  }
  /* the other five pages put the section eyebrow INSIDE .cs-alt as a first
     child. Harmless in one column; in two it eats the first cell and knocks
     every media/copy pair out of alignment. */
  .csr-content .cs-alt > .csr-eyebrow{grid-column:1 / -1;margin-bottom:-40px;}
}

/* ---------- photo-only hero band ----------
   For case studies with no screens to stand on the photo (capstone has no
   images at all, gauge only has two). Shorter than the full hero, because
   nothing sits on it. */
.csr-hero--photo{
  display:block;padding:0;
  height:clamp(240px,32vh,400px);
  /* a 280px band off 'center top' is all sky; bias down so the mesa
     line and the warm rock band are what you actually see */
  background-position:center 62% !important;
}
@media (max-width:760px){ .csr-hero--photo{height:200px;} }

/* ---------- hero variant: a system, not a product ----------
   Solace's deliverables are a ritual, a framework and a tool, and every piece
   of art that exists for any of them is a dark screenshot. Three of those on
   the mosaic band made the page open like a product case study, which is the
   one thing this project is not. So: the three layers named in type on the
   left, one machine carrying the artefact on the right.

   The type sits on a solid cream CARD rather than straight on the photo. The
   sublabels are 0.83rem and photographic texture under type that small is
   exactly what made the first pass unreadable; a graded scrim was the other
   candidate and lost. The card also rhymes with the panels in the problem
   diagnosis diagram further down the page.

   Everything is scoped to .csr-hero--system so the other five heroes, which
   are still a plain flex row of images, are untouched. */
.csr-hero--system{
  display:block;padding:0;position:relative;
  /* the mosaic stays, biased down off 'center top' so the band under the card
     is rock rather than sky */
  background-position:center 40%;
}
/* a light wash over the whole band: enough to sit the card down into the photo
   without flattening it. The card does the real legibility work. */
.csr-hero--system::before{
  content:'';position:absolute;inset:0;background:rgba(250,248,245,.30);
}
.csr-hero-in{
  position:relative;z-index:1;
  max-width:1500px;margin:0 auto;
  padding:74px clamp(28px,5vw,72px);
  display:grid;
  /* .74fr / 1.26fr, with a floor on the type column so the serif never wraps
     mid-word between 900 and 1100px */
  grid-template-columns:minmax(250px,.74fr) 1.26fr;
  gap:clamp(30px,5vw,72px);
  align-items:center;
}
/* the base .csr-hero img rule caps every hero image at 250px. This one is the
   whole right half, so it has to win: two classes beats one. */
.csr-hero--system img{
  width:100%;height:auto;display:block;margin:0;
  filter:drop-shadow(0 30px 70px rgba(65,0,22,.20));
}
.csr-hero-card{
  background:rgba(250,248,245,.96);
  border:1px solid rgba(20,19,17,.07);
  border-radius:8px;
  padding:34px 32px 36px;
  box-shadow:0 20px 50px rgba(65,0,22,.10);
}
.csr-hero-eyebrow{
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.18em;
  text-transform:uppercase;color:#6B5F53;margin-bottom:26px;
}
.csr-layers{display:flex;flex-direction:column;gap:26px;}
.csr-layer .n{
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.2em;
  font-weight:500;color:var(--orange);display:block;margin-bottom:7px;
}
.csr-layer .t{
  font-family:var(--f-head);font-size:clamp(1.4rem,2.2vw,1.85rem);
  line-height:1.12;display:block;color:var(--text-dark);
}
/* sentence-case Inter, NOT uppercase mono. Uppercase mono at this size is
   decoration; it was the actual reason the first version could not be read. */
.csr-layer .d{
  font-family:var(--font-primary);font-size:.83rem;font-weight:300;
  line-height:1.6;color:#4E463D;display:block;margin-top:7px;
}
@media (max-width:900px){
  .csr-hero-in{grid-template-columns:1fr;gap:30px;padding:48px 24px 44px;}
  .csr-hero-card{padding:28px 24px 30px;}
  .csr-layers{gap:22px;}
}


/* a zoomable figure: the cursor and the hairline are the only affordance,
   because these sit in a 567px column where the detail is deliberately not
   readable in place. See bindZoom() in case-study.js. */
.csr-content [data-zoom]{cursor:zoom-in;position:relative;}
.csr-content [data-zoom]::after{
  content:'';position:absolute;inset:0;border-radius:6px;
  box-shadow:inset 0 0 0 1px rgba(20,19,17,0);transition:box-shadow .18s ease;
  pointer-events:none;
}
.csr-content [data-zoom]:hover::after,
.csr-content [data-zoom]:focus-visible::after{box-shadow:inset 0 0 0 1px rgba(225,83,4,.55);}
.csr-content [data-zoom]:focus-visible{outline:none;}

/* The affordance line under a figure: click to zoom, drag to compare, whatever
   the interaction is. Same type as .csr-cap, with the orange dot so it reads as
   an instruction rather than a comment. .csr-zoomhint is the old zoom-only name,
   kept as an alias. */
.csr-content .csr-hint, .csr-content .csr-zoomhint{
  font-family:var(--font-mono);font-size:0.58rem;line-height:1.6;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-muted);margin:14px 0 0;
  display:flex;align-items:center;gap:8px;
}
/* Caption first, hint second: the hint tucks under its caption. */
.csr-sec p.csr-cap + .csr-hint,
.csr-sec p.csr-cap + .csr-zoomhint{margin-top:6px;}
.csr-content .csr-hint::before, .csr-content .csr-zoomhint::before{
  content:'';width:5px;height:5px;border-radius:50%;background:var(--orange);
  flex:0 0 auto;
}

/* .csr-cols was written for h4 + a paragraph (COROS's three research findings).
   Measuring Success needs short parallel items instead, so give the columns a
   list: no bullets, an orange rule per item, same 0.85rem as .csr-cols p. */
.csr-content .csr-cols ul{list-style:none;margin:0;padding:0;}
.csr-content .csr-cols li{
  font-family:var(--f-body);font-size:0.85rem;line-height:1.75;font-weight:300;
  color:var(--text-light);position:relative;padding-left:16px;margin-bottom:11px;
}
.csr-content .csr-cols li:last-child{margin-bottom:0;}
.csr-content .csr-cols li::before{
  content:'';position:absolute;left:0;top:.78em;width:6px;height:1px;
  background:var(--orange);opacity:.75;
}

/* .csr-cols is three up by default (COROS's three research findings).
   .two is for a paired before/after, like the two testing rounds. */
.csr-content .csr-cols.two{grid-template-columns:repeat(2,minmax(0,1fr));gap:44px;}
@media (max-width:820px){.csr-content .csr-cols.two{grid-template-columns:1fr;gap:28px;}}

/* ---------- hero variant: one full-bleed cover render ----------
   Airline 2036 opens on a wide scene, not a row of phone screens. The base
   hero caps every img at 250px and stands it on the mosaic band, which is
   exactly wrong for a single cinematic frame. Keep the red rock band (see
   [[hero-photo-band]] — Emma has asked for it back once already) and stand
   ONE wide uncropped frame on it. Uncropped matters: the composition runs the
   full height, news panel left and the reroute card top to bottom on the
   right, so a band crop would cut the argument out of the picture. */
.csr-hero--cover{
  padding:34px 40px 30px;
  /* the band is short enough that the default 'center top' is all sky and
     the red rock never shows. 45% catches the mesa line and lands the frame
     on the warm band; 62% (the --photo value) is too rock-heavy here and
     fights the red cancellation card. */
  background-position:center 45%;
}
/* the cover artefact is a still on most pages and a silent loop on airline
   2036. The generic `.csr-hero video` rule sizes video like a phone screen
   (140-250px), so the video has to be named here or the hero collapses. */
.csr-hero--cover img,
.csr-hero--cover video{
  width:min(730px,58vw);max-width:none;height:auto;display:block;
  border-radius:10px;
  filter:drop-shadow(0 24px 56px rgba(65,0,22,.28));
}
@media (max-width:760px){
  .csr-hero--cover{padding:26px 20px 24px;}
  .csr-hero--cover img,
  .csr-hero--cover video{width:100%;border-radius:6px;}
}

/* ---------- air above a sticky block inside the rail ----------
   Aug 15 2026, Emma on gauge: "the spacing between the problem and the
   process it replaced ... needs more padding."

   Measured: on gauge the `.cs-sticky` block sat 8px below the `.csr-cols`
   grid, while every other gap in that section is 34-36px. Cause: the rail
   collapses `.cs-sticky` to one column and it carries no top margin of its
   own, so it inherits only the previous block's 8px. A sticky block is a
   change of register - copy plus media - and needs a bigger step than the
   paragraph rhythm around it. */
.csr-content .cs-sticky:not(:first-child){margin-top:64px;}


/* ---------- typography defaults, all case studies ----------
   Standing rule: single-word last lines are a defect. Was declared locally on
   capstone + aster only; promoted Sept 11 2026. csr-sub was 1.12rem, which sat
   0.6px above the h4s inside it, so a sub-section and its items read as the
   same rank; 1.38rem is the size capstone had already proved out. */
.csr-content p, .csr-content dd, .csr-content li,
.csr-cap, .csr-hint{text-wrap:pretty;}
.csr-content h2, .csr-content h3, .csr-content h4,
.csr-stmt, .csr-q, .csr-sub{text-wrap:balance;}
/* one serif family per page: pull quotes were DM Serif with a faked italic */
.csr-content .quote-block{font-family:var(--f-head);font-size:1.2rem;}