/*
 * case.css: a client's case study page (page-case-study.php; inc/case-study.php enqueues
 * it on that page only, after site.css). Its own file, so the services and front-page
 * builders' site.css blocks merge cleanly beside it.
 *
 * Our look, the front page's (Stanley, 2026-10-26: "on theme with the current website but
 * give it small elements of mandys deli design"): our paper and ink, Archivo Black
 * headings at the front page's ladder, the kit's window on its plate (P3), the plated
 * pill, our text links. Everything here is site.css's kit; this file only lays it out.
 * The client's design comes in through three small touches, from the five colours the
 * page's <main> carries (config.php's theme, measured by smwd_case_theme before they are
 * printed; the defaults below are our own):
 *  - their line under the name in a serif italic in their accent, as their own
 *    headline's second line is (Fraunces 600 italic; never claimed to be their face);
 *  - their amber (--c-button) as the plate under what is theirs: the windows holding
 *    their real site and the pill to it. Magenta stays the plate of what is ours;
 *  - their cream (--c-ground) as those windows' tab bar.
 * Mandy's Deli, measured 2026-10-26 (WCAG): the ochre #824E06 on our paper 6.22:1 (large
 * type only all the same, as their site uses it); the amber #D9972B is never text and
 * never touches magenta (1.77:1): it is a plate's edge beside the 4px ink outline, which
 * carries the edge at 15.98:1; our ink dot on their cream 15.53:1.
 *
 * Motion, the front page's patterns only: the name rises word by word (P1, printed
 * split), the line and the pill come after it, the headings rise (P1, site.js), the pills
 * and phones arrive as lists (P2), the windows rise and lift off their plates (P3), and
 * the pages drift a little as they pass (the page's one standout, a CSS view timeline).
 * Paragraphs never move. Only transform and opacity; start states only under .js
 * (T-052); nothing loops (D-31); under reduced motion and without JavaScript every final
 * state shows at once.
 */

/* The face of the hero's line (assets/fonts/OFL-Fraunces.txt): Fraunces 600 italic,
   Fontsource's Latin file of Google Fonts v38, read 2026-10-22, OFL 1.1. */
@font-face{
  font-family:"Fraunces";
  src:url("../fonts/fraunces-latin-600-italic.woff2") format("woff2");
  font-weight:600;
  font-style:italic;
  font-display:swap;
}

/* ---- The client's colours, printed on <main> by page-case-study.php; these are our
   own, for a client with none. The front page's heading ladder (site.css's .home): the
   section headings stop at 68px, under the name. */
.case-page{
  --c-ground:#F4F3EF;
  --c-ink:#111827;
  --c-accent:#E0218A;
  --c-button:#E0218A;
  --c-body:#474E5E;
  --c-serif:"Fraunces",Georgia,"Times New Roman",serif;
  --fs-h2:clamp(2.25rem, 1.6rem + 3vw, 4.25rem);
}

/* The light run is one paper ground, as the front page's is, so no seams show between
   sections; white windows stand on it. */
.case-page > :is(.case-hero,.case-key,.case-partner,.case-before,.case-rows,.case-phones,.case-words){background:var(--paper)}

/* ==== The hero: the crumb, the name at poster size, their line, the pill ============ */
.case-page > .case-hero{padding-block:var(--pad-s) var(--pad-m)}
.case-hero__stage{position:relative;display:grid;row-gap:var(--gap-head);align-items:center}
/* The words are the container the name is sized against, so its longest word always fits
   its column: at 200% text the poster size's 3rem floor made "Mandy's" (4.21em) 404px in
   a 326px column at 390, and it widened the stage, pushing the line, the pill and the
   window off the screen with it (device pass, 2026-10-27). 21cqi is 88% of the column
   for it; at the usual text size it never binds (48px at 320 and 390 before and after). */
.case-hero__words{display:grid;justify-items:start;gap:var(--gap-text);container-type:inline-size}
.case-hero__shot > .lift{inline-size:calc(100% - var(--plate));inline-size:min(100% - var(--plate), (100svh - 9rem) * 1.6)}
.case-hero__name{margin:0;font-family:var(--font-display);font-weight:400;font-size:min(var(--fs-poster), 21cqi);line-height:.95;letter-spacing:-.03em;color:var(--ink);text-wrap:balance}
/* Touch one: their headline's second line, in their accent. */
.case-hero__line{max-inline-size:26ch;font-family:var(--c-serif);font-style:italic;font-weight:600;font-size:clamp(1.5rem, 1.1rem + 1.7vw, 2.75rem);line-height:1.15;letter-spacing:-.01em;color:var(--c-accent);text-wrap:balance}
.case-hero__go{margin-block-start:var(--space-2)}
/* Touch two: the pill to their site on their amber, not our magenta (the kit's .btn is
   its plate). The paper face and the ink words are ours: ink on paper 15.98:1. */
.case-hero .btn.case-btn{background:var(--c-button)}
.case-btn .case-arrow{inline-size:1em;block-size:1em}
@media (hover:hover){
  .case-btn:hover .case-arrow--out{transform:translate(2px,-2px)}
}

/* The crumb: "Our work", then the arrow and the client's name. Every part 44px tall to
   tap. */
.case-crumbs__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;column-gap:.75em;font-weight:700;font-size:var(--fs-body);line-height:1.2;color:var(--ink)}
.case-crumbs__list li{display:inline-flex;align-items:center;gap:.75em;min-block-size:44px}
.case-crumbs .text-link{display:inline-flex;align-items:center;min-block-size:44px}
.case-crumbs .case-arrow{inline-size:1.1em;block-size:1.1em}

/* The line and the pill arrive after the name. */
.js .case-hero:not(.in) :is(.case-hero__line,.case-hero__go){opacity:0;transform:translateY(var(--list-y))}
.js .case-hero .case-hero__line{transition:opacity .7s var(--ease-arrive) .35s,transform .9s var(--ease-arrive) .35s}
.js .case-hero .case-hero__go{transition:opacity .7s var(--ease-arrive) .5s,transform .9s var(--ease-arrive) .5s}

/* ---- Their site, huge, shrinking back to its place (Stanley, 2026-10-27: "a giant
   browser that shrinks as you scroll"). At rest, and wherever the shrink does not run,
   the hero is the words and the window: side by side from 64em (the words in five
   columns, the window in seven), the window under the words below it. */
@media (min-width: 64em){
  .case-hero.has-zoom .case-hero__stage{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
  .case-hero.has-zoom .case-hero__words{grid-column:1 / 6;grid-row:1}
  .case-hero.has-zoom .case-hero__shot{grid-column:6 / -1;grid-row:1}
  .case-hero.has-zoom .case-hero__name{font-size:min(clamp(3.5rem, 1.6rem + 4.2vw, 6.75rem), 21cqi)}
}
/* The shrink, from 64em on a screen at least 40em tall, where motion is allowed and the
   browser has a scroll timeline. The hero becomes a track a screen and most of another
   tall, and its stage holds the top of the screen (sticky) while the page scrolls the
   first 70% of a screen: through that, --case-p runs from 0 to 1 on the scroll's own
   timeline (no scroll listener). At 0 the window fills the stage, centred, as large as
   the stage's height lets it, clear of the floating pill; at 1 it is in its place.
   site.js measures how far it has to travel and grow (--dx, --dy, --s) and marks the
   hero .is-zooming once it has, so without the script nothing here applies. The words
   come up over the last 30%, once the window has all but cleared their column, rising
   3rem as they fade in. Only transform and opacity move; nothing loops (D-31).
   Focus inside the hero (the crumb or the pill, by keyboard) stops the shrink, so a
   focused link is never invisible: --case-p falls back to 1, the finished hero. */
@property --case-p{syntax:"<number>";inherits:true;initial-value:1}
@keyframes case-zoom{from{--case-p:0}to{--case-p:1}}
@supports (animation-timeline: scroll()){
  @media (min-width: 64em) and (min-height: 40em) and (prefers-reduced-motion: no-preference){
    .case-page > .case-hero.is-zooming{--case-run:70svh;padding-block:0 var(--pad-s)}
    .case-hero.is-zooming .case-hero__track{block-size:calc(100svh - var(--nav-h) + var(--case-run) + 15svh)}
    .case-hero.is-zooming .case-hero__stage{position:sticky;top:0;box-sizing:border-box;block-size:calc(100svh - var(--nav-h));padding-block:calc(.625rem + var(--pill-h) + .75rem) 1.5rem;align-content:center;animation:case-zoom linear both;animation-timeline:scroll(root);animation-range:0 var(--case-run)}
    .case-hero.is-zooming .case-hero__shot{transform:translate(calc(var(--dx, 0px) * (1 - var(--case-p))), calc(var(--dy, 0px) * (1 - var(--case-p)))) scale(calc(1 + (var(--s, 1) - 1) * (1 - var(--case-p))));will-change:transform}
    .case-hero.is-zooming .case-hero__words{--w:clamp(0, (var(--case-p) - .7) / .3, 1);opacity:var(--w);transform:translateY(calc((1 - var(--w)) * 3rem))}
    .case-hero.is-zooming:focus-within .case-hero__stage{animation:none}
  }
}

/* ==== At a glance and What we built ================================================= */
/* When it went live as a pill on the left, under a small heading; the sentence on what
   we built on the right under a section heading, with the What we do parts it used as
   the kit's link pills (a link to its part where one exists; plain words where not). */
.case-page > .case-key{padding-block:var(--pad-s) var(--pad-m)}
.case-key__inner{display:grid;gap:var(--gap-head)}
.case-key__glance,.case-key__built{display:grid;align-content:start;gap:var(--gap-text)}
.case-key__body{display:grid;gap:var(--space-3)}
.section .case-key__glance h2{font-size:clamp(1.5rem, 1.2rem + 1vw, 2rem)}
.case-pills{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:flex-start;gap:.75rem}
.case-pill{box-sizing:border-box;padding:.7em 1.3em;font-weight:700;font-size:var(--fs-body);line-height:1.3;color:var(--ink);background:var(--white);border:var(--line) solid var(--ink);border-radius:999px}
.case-key__text{max-inline-size:36ch;font-size:clamp(1.25rem, 1rem + 1.1vw, 2rem);font-weight:500;line-height:1.38;letter-spacing:-.01em;color:var(--ink)}
.case-parts{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.625rem}
.case-part{display:inline-flex;align-items:center;gap:.45em;box-sizing:border-box;min-block-size:46px;padding:.5em .9em .5em 1.1em;font-family:var(--font-display);font-size:var(--fs-body);line-height:1.1;color:var(--ink);text-decoration:none;background:var(--white);border:var(--line) solid var(--ink);border-radius:999px;-webkit-tap-highlight-color:transparent;transition:transform var(--t-feedback) var(--ease-out)}
.case-part .case-arrow{inline-size:.95em;block-size:.95em;color:var(--accent)}
@media (hover:hover){
  a.case-part:hover{background:var(--lit)}
  a.case-part:hover .case-arrow{transform:translateX(3px)}
}
a.case-part:active{transform:translateY(1px)}
@media (min-width: 64em){
  .case-key__inner{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
  .case-key__glance{grid-column:1 / 5}
  .case-key__built{grid-column:6 / -1}
}

/* ==== The business ================================================================== */
/* The heading on the left; their line in the display face on the right, then our part
   and the longer words once written. */
.case-page > .case-partner{padding-block:var(--pad-s) var(--pad-m)}
.case-partner__inner{display:grid;gap:var(--gap-head) var(--gutter)}
/* Never past 16vw (device pass, 2026-10-27): at 200% text "The business" sat at the
   heading's 72px floor and "business" (4.6em) widened the column on a 320 or 360 phone,
   so it and their line ran 43px off the screen. At 100% text --fs-h2 is under 16vw at
   every width from 320, so Stanley's page (D-61/D-69) is as it was. */
.case-partner__side h2{font-size:min(var(--fs-h2), 16vw)}
.case-partner__main{display:grid;gap:var(--gap-text)}
.case-partner__lead{max-inline-size:24ch;font-family:var(--font-display);font-size:clamp(1.5rem, 1.1rem + 1.7vw, 2.75rem);line-height:1.1;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.case-partner__text{max-inline-size:44ch;font-size:var(--fs-lead);font-weight:450;line-height:1.45;color:var(--ink-soft)}
@media (min-width: 64em){
  .case-partner__inner{grid-template-columns:repeat(12,minmax(0,1fr))}
  .case-partner__side{grid-column:1 / 5}
  .case-partner__main{grid-column:6 / -1}
}

/* ==== Before and after (D-51): the shared slider in a kit window, as on the front page */
.case-page > .case-before{padding-block:var(--pad-s) var(--pad-m)}
.case-before__inner{display:grid;row-gap:var(--gap-head)}

/* ==== The rows: the part of their real site each names, on a laptop or a phone ===== */
/* A heading and a line, and beside them the device, the sides taking turns from 64em: a
   laptop for a desktop's capture, a phone for a phone's (Stanley, 2026-10-26: "maybe
   have it on the phone or on a laptop"). A row whose capture is missing keeps its words
   alone, across more of the width.
   No device is ever taller than the screen under the floating pill: each is as wide as
   its column lets it be, up to the width at which the whole of it (a laptop with its
   base, a phone with its bezels, the hero's window) stands in the screen's height less
   the pill (svh, so a phone's own bars never hide its foot). Held sideways (844 by 390)
   the hero's window was 529px tall, each laptop 470 and the form's phone 547, on 310px
   of screen; at 320 by 568 the phone was 547 on 488; at 1024 by 768 it was 686 on 688
   (device pass, 2026-10-27). Where the screen is tall enough nothing changes: none of
   these binds at 390 by 844, 768 by 1024 or any desktop from 1280 by 800. Old browsers
   without svh keep the first declaration, the sizes as they were. */
.case-page > .case-rows{padding-block:var(--pad-s) var(--pad-m)}
.case-row{display:grid;gap:var(--space-4);align-items:center}
.case-row + .case-row{margin-block-start:clamp(4.5rem, 2.5rem + 6vw, 9rem)}
.case-row__words{display:grid;gap:var(--gap-text);align-content:center}
.section .case-row__words h2{font-size:var(--fs-h3)}
.case-row__words p{max-inline-size:30ch;font-size:var(--fs-lead);font-weight:450;line-height:1.45;color:var(--ink-soft)}
.case-row__pic{display:grid;justify-items:center}
.case-row__pic > .case-lift--laptop{inline-size:calc(88% - var(--plate));inline-size:min(88% - var(--plate), (100svh - 10.5rem) * 1.6)}
.case-row__pic > .case-base{inline-size:min(100%, ((100svh - 10.5rem) * 1.6 + var(--plate)) / .88)}
.case-row__pic > .case-lift--phone{inline-size:min(calc(100% - var(--plate)), 15rem);inline-size:min(100% - var(--plate), 15rem, (100svh - 8rem) * .46)}
@media (min-width: 64em){
  .case-row{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
  .case-row__words{grid-column:1 / 5;grid-row:1}
  .case-row__pic{grid-column:6 / -1;grid-row:1}
  .case-row:nth-child(even) .case-row__words{grid-column:9 / -1}
  .case-row:nth-child(even) .case-row__pic{grid-column:1 / 8}
  .case-row--words .case-row__words,.case-row--words:nth-child(even) .case-row__words{grid-column:1 / 9}
  .case-row__pic > .case-lift--phone{inline-size:min(calc(100% - var(--plate)), 19rem);inline-size:min(100% - var(--plate), 19rem, (100svh - 8rem) * .46)}
}

/* ---- The devices round a capture, in the kit's line: the window, its capture edge to
   edge under the tab line, is a laptop's screen, with the laptop's base under it; a
   phone is the same window, rounder, the tab line its top bezel and the kit's dot a
   speaker slot in its middle. Touches two and three: their amber as the plate, their
   cream as the bar. */
.case-lift::before{background:var(--c-button)}
.case-window{display:block;padding:calc(var(--tab) + var(--line)) 0 0;overflow:hidden;overflow:clip}
.case-window::before{background:var(--c-ground)}
.case-window__img{display:block;inline-size:100%;block-size:auto;aspect-ratio:16 / 10;object-fit:cover;object-position:50% 0}
.case-base{position:relative;display:block;box-sizing:border-box;inline-size:100%;block-size:clamp(.875rem, .6rem + .9vw, 1.375rem);margin-block-start:calc(var(--space-1) * -.25);background:var(--white);border:var(--line-heavy) solid var(--ink);border-radius:.25rem .25rem 1.25rem 1.25rem / .25rem .25rem .875rem .875rem;box-shadow:var(--plate-sm) var(--plate-sm) 0 var(--c-button)}
.case-base::before{content:"";position:absolute;inset:-1px 41% auto;block-size:45%;background:var(--c-ground);border:var(--line) solid var(--ink);border-block-start:0;border-radius:0 0 .5rem .5rem}
.case-lift--phone{border-radius:2rem}
.case-window--phone{border-radius:2rem;padding:calc(var(--tab) + var(--line)) .375rem 1.5rem;background:var(--c-ground)}
.case-window--phone::after{left:50%;inline-size:26%;block-size:8px;border-radius:999px;transform:translateX(-50%);top:calc(var(--tab) / 2 - 4px)}
.case-window--phone .case-window__img{aspect-ratio:390 / 844;border-radius:.5rem}
/* A capture still arriving (site.js marks it .is-loading, so only with the script) is
   hidden until it is whole and decoded, as the front page's window is (Sam's item a,
   2026-10-26): the laptop's white screen, the phone's cream or the tile's paper shows
   until then, never their site painted in strips, or dark and blurred first. It then
   comes in over 300ms where motion is allowed; going out it goes at once, so a capture
   marked mid-paint never fades out on screen. */
:is(.case-window__img,.case-tile__img).is-loading{opacity:0}
@media (prefers-reduced-motion: no-preference){
  :is(.case-window__img,.case-tile__img):not(.is-loading){transition:opacity .3s var(--ease-out)}
}
.js .case-row__pic[data-reveal]:not(.in) > .case-base{opacity:0;transform:translateY(var(--rise-y)) scale(.96)}
.js .case-row__pic[data-reveal] > .case-base{transition:transform var(--t-enter) var(--ease-arrive),opacity .5s var(--ease-arrive)}

/* ==== Their pages, side by side. Our ink: the page's one dark band and its standout === */
/* The words in paper on the ink on the left (15.98:1, the line 10.39:1), and every
   desktop capture as a tile, the tiles in two columns turned a few degrees and running
   off the panel's edges, each on a small plate of their amber. Below 64em: the words,
   then the tiles. As the band passes, each column drifts a little, its own way (a view
   timeline: transform only, no pin, no loop, no scroll listener); without that support,
   or under reduced motion, the columns simply rest at their offsets. contain:layout
   comes with [data-standout] (site.css). */
.case-page > .case-pages{padding-block:var(--pad-m);color:var(--text-primary);background:var(--ink);overflow:hidden;overflow:clip}
.case-pages__panel{position:relative;display:grid;gap:var(--gap-head)}
.case-pages h2{color:var(--text-primary)}
.case-pages__words{position:relative;z-index:1;display:grid;align-content:start;gap:var(--gap-text);max-inline-size:26rem}
.case-pages__words p{font-size:var(--fs-lead);font-weight:450;line-height:1.45;color:var(--text-secondary)}
/* While the ground turns (site.css, "The ground"), this band is see-through over it, so
   its words take the ground's ink as every word standing on the ground does. Kept in
   paper, the heading and its line were paper on the paper ground (1:1, unseen) from the
   moment the band came on screen until its heading was a third of the way up, the tiles
   beside them already showing (device pass, 2026-10-27: 390 to 1920). They change at the
   flip, as the rest do. Without the script there is no ground and the band keeps its
   own ink, the words their paper. */
html[data-ground] .case-pages h2{color:var(--on);transition:color 0s linear var(--flip)}
html[data-ground] .case-pages__words p{color:var(--on-soft);transition:color 0s linear var(--flip)}
html.is-ground-still .case-pages :is(h2,.case-pages__words p){transition:none}
/* On the ground the band has no edge of its own, so its clip had nothing to stand on:
   the tiles stopped on a hard line across the ground, mid-tile, 20 to 420px of them cut
   (device pass, 2026-10-27: 390 to 2000, worst at 768), and once the paper came back the
   cut tiles sat on it like a torn print. They now fade out over the band's foot, its
   bottom padding, where nothing else stands. Without the script the band keeps its ink
   and its edge, and the tiles run off it as built. */
html[data-ground] .case-page > .case-pages.on-ground--ink{-webkit-mask-image:linear-gradient(#000 calc(100% - var(--pad-m)),transparent);mask-image:linear-gradient(#000 calc(100% - var(--pad-m)),transparent)}
.case-pages__mosaic{position:relative;min-block-size:clamp(20rem, 12rem + 30vw, 32rem)}
.case-pages__tilt{position:absolute;inset:4% -20% -40% -6%;display:grid;grid-template-columns:repeat(var(--cols, 2),minmax(0,1fr));align-content:start;align-items:start;gap:clamp(1rem, .6rem + 1.6vw, 2rem);transform:rotate(-8deg)}
.case-pages__col{--off:calc(var(--k, 0) * 14%);--drift:calc(4% + var(--k, 0) * 3%);display:grid;gap:clamp(1rem, .6rem + 1.6vw, 2rem);transform:translateY(var(--off))}
.case-tile{overflow:hidden;overflow:clip;background:var(--paper);border:var(--line) solid var(--paper);border-radius:var(--radius-sm);box-shadow:var(--plate-sm) var(--plate-sm) 0 var(--c-button)}
.case-tile__img{display:block;inline-size:100%;block-size:auto;aspect-ratio:16 / 10;object-fit:cover;object-position:50% 0}
@media (min-width: 64em){
  .case-pages__panel{grid-template-columns:minmax(0,5fr) minmax(0,7fr);min-block-size:clamp(28rem, 18rem + 20vw, 38rem)}
  .case-pages__mosaic{min-block-size:0}
  .case-pages__tilt{inset:-30% -24% -30% 4%;align-content:center}
}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .case-pages__col{animation:case-drift linear both;animation-timeline:view();animation-range:cover}
  }
}
@keyframes case-drift{from{transform:translateY(calc(var(--off) + var(--drift)))}to{transform:translateY(calc(var(--off) - var(--drift)))}}

/* ==== And on a phone: every phone capture in a narrow window, in a row ============== */
/* The words on the left, the phones on the right, every other one a little lower; three
   to a row on a phone, or four in one. The phones arrive as a list (P2). */
.case-page > .case-phones{padding-block:var(--pad-m)}
.case-phones__inner{display:grid;gap:var(--gap-head) var(--gutter);align-items:center}
.case-phones__words{display:grid;gap:var(--gap-text);align-content:center}
.case-phones__words p{max-inline-size:30ch;font-size:var(--fs-lead);font-weight:450;line-height:1.45;color:var(--ink-soft)}
.case-phones__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(5.25rem,1fr));gap:clamp(.875rem, .5rem + 1.4vw, 2rem);align-items:start}
.case-phones__list > li:nth-child(even){margin-block-start:12%}
/* Never taller than the screen under the pill (the rows' block says why): held sideways
   each was 405px tall on 310. Capped, it stands in the middle of its place in the row. */
.case-phones__list > li > .lift{--cap:calc((100svh - 9rem) * .46);inline-size:min(100% - var(--plate), var(--cap));margin-inline-start:max(var(--plate), (100% - var(--cap)) / 2)}
.case-phones__list :is(.case-lift--phone,.case-window--phone){border-radius:1.25rem}
.case-phones__list .case-window--phone{padding-inline:.25rem;padding-block-end:1rem}
/* Never one phone alone under a row: four, the set the deploy now takes (their front
   page, opening times, form and menu page), stood three and one at 390 and 375
   (2026-10-27). Four stand in one row, as they do from 48em; any other count that leaves
   one over puts it in the middle, under the row. */
@media (max-width: 47.99em){
  .case-phones__list:has(> li:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}
  .case-phones__list > li:nth-child(3n+1):last-child:not(:first-child):not(:nth-child(4)){grid-column:2}
}
@media (min-width: 48em){
  .case-phones__list{grid-template-columns:repeat(var(--n, 3),minmax(0,1fr))}
}
@media (min-width: 64em){
  .case-phones__inner{grid-template-columns:repeat(12,minmax(0,1fr))}
  .case-phones__words{grid-column:1 / 5}
  .case-phones__board{grid-column:6 / -1}
}

/* ==== In their words, once given in writing (T-034) ================================= */
/* The quote large in the display face, the business's name under it. */
.case-page > .case-words{padding-block:var(--pad-m)}
.case-page > .case-words .case-words__inner{display:grid;gap:var(--space-3);margin-block:0}
.section h2.case-words__title{font-size:clamp(1.5rem, 1.2rem + 1vw, 2rem)}
.case-words blockquote{margin:0}
.case-words blockquote p{max-inline-size:26ch;font-family:var(--font-display);font-size:var(--fs-h3);line-height:1.1;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.case-words figcaption{font-weight:700;color:var(--ink-soft)}

/* ==== On to the next client's case study, in the closing band ======================= */
.work-close .case-next{margin-block-end:var(--gap-head);font-size:var(--fs-lead);text-align:center}
.case-next .text-link{display:inline-flex;align-items:center;gap:.4em;min-block-size:44px;font-weight:700}
.case-next .case-arrow{inline-size:1em;block-size:1em}
@media (hover:hover){
  .case-next .text-link:hover .case-arrow{transform:translateX(3px)}
}

/* The arrows lean on toward where they go under a mouse. */
.case-page .case-arrow{flex:none;transition:transform var(--t-hover) var(--ease-out)}

/* ==== Reduced motion: every final state at once (engine.css already zeroes each
   duration; these make them explicit). ============================================== */
@media (prefers-reduced-motion: reduce){
  .js .case-hero :is(.case-hero__line,.case-hero__go){opacity:1;transform:none;transition:none}
  .js .case-row__pic[data-reveal] > .case-base{opacity:1;transform:none;transition:none}
  .case-part,.case-page .case-arrow{transition:none}
}