@import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo+Black&family=Inter:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root{
  --ink:#141210;
  --paper:#f2f2f2;
  --paper-2:#e7e7e6;
  --line:#141210;
  --muted:#6b6558;

  /* real gradient, sampled directly from Brian's live site header asset */
  --g1:#c7f519;
  --g2:#b9fbb3;
  --g3:#2befeb;
  --g4:#2bd7fd;
  --g5:#c0b6fb;
  --g6:#f596fc;
  --g7:#fd7afc;
  --g8:#d85be5;
  --grad: linear-gradient(90deg, var(--g1), var(--g2), var(--g3), var(--g4), var(--g5), var(--g6), var(--g7), var(--g8));

  --red:#ff3b30;
  --blue:#2bd7fd;
  --yellow:#c7f519;

  --display: 'Anton', 'Archivo Black', sans-serif;
  --geo: 'Archivo Black', sans-serif;
  --body: 'Inter', sans-serif;
  --mono: 'Space Mono', monospace;

  --container: 1240px;
  --gutter: clamp(20px, 4vw, 56px);
  --rule: 2px;
  --topbar-h: 92px;
}

*{ box-sizing:border-box; }
/* the rubber-band overscroll at the top/bottom of the page shows whatever is behind
   the body — paint it with the brand gradient so a springy scroll reveals color,
   not a flash of white, right up against the gradient topbar. */
html{ scroll-behavior:smooth; height:100%; background:var(--grad); background-attachment:fixed; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  min-height:100%; display:flex; flex-direction:column;
  /* professional kerning: real kern pairs + ligatures + contextual alternates on everywhere */
  font-kerning:normal;
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
  font-variant-ligatures:common-ligatures contextual;
  text-rendering:optimizeLegibility;
}
main{ flex:1 0 auto; }
img{ max-width:100%; display:block; }
a{ color:inherit; }
.wrap{ max-width:var(--container); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter); }

/* ---------- gradient header band: the band IS the header now, tall enough to hold the nav row ---------- */
.spine{ display:none; }

.topbar{
  position:sticky; top:0; left:0; right:0; z-index:800;
  height:var(--topbar-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--gutter);
  background:var(--grad);
  margin-top:0;
}
@media (max-width:640px){ :root{ --topbar-h:73px; } }
.brandmark{
  font-family:var(--mono); font-weight:700; font-size:13px;
  letter-spacing:.06em; text-transform:uppercase;
  text-decoration:none; color:var(--ink);
}
.brandmark b{ font-family:var(--geo); font-size:14px; letter-spacing:0; }

.menu-btn{
  display:flex; align-items:center; gap:10px;
  background:var(--ink); color:var(--paper);
  border:none; border-radius:999px;
  font-family:var(--mono); font-weight:700; font-size:12px;
  letter-spacing:.1em; text-transform:uppercase;
  padding:10px 18px; cursor:pointer;
}
.menu-btn .dots{ display:grid; grid-template-columns:1fr 1fr; gap:3px; }
.menu-btn .dots span{ width:4px; height:4px; background:var(--paper); border-radius:50%; }
.menu-btn:hover{ background:#fff; color:var(--ink); }
.menu-btn:hover .dots span{ background:var(--ink); }

/* ---------- full-screen overlay nav ---------- */
.overlay{
  position:fixed; inset:0; background:var(--ink); color:var(--paper);
  z-index:1000; transform:translateY(-100%); transition:transform .5s cubic-bezier(.77,0,.18,1);
  display:flex; flex-direction:column; padding:28px var(--gutter) 40px;
  overflow-y:auto;
}
.overlay.open{ transform:translateY(0); }
.overlay-top{ display:flex; align-items:center; justify-content:space-between; }
.overlay-top .brandmark{ color:var(--paper); }
.overlay-close{
  background:none; border:none; color:var(--paper); font-family:var(--mono);
  font-size:13px; letter-spacing:.1em; text-transform:uppercase; cursor:pointer;
}
.overlay-list{ list-style:none; margin:auto 0; padding:0; }
.overlay-list li{ border-top:1px solid rgba(250,248,243,.18); }
.overlay-list li:last-child{ border-bottom:1px solid rgba(250,248,243,.18); }
.overlay-list a{
  display:flex; align-items:baseline;
  font-family:var(--display); font-size:clamp(32px,7vw,72px);
  text-transform:uppercase; text-decoration:none; color:var(--paper);
  padding:10px 0; transition:color .2s, padding-left .2s;
}
.overlay-list a:hover{ color:var(--g4); padding-left:16px; }
/* two-tier sizing: primary sections read large, the rest sit smaller underneath */
.overlay-list a.nav-sm{ font-size:clamp(19px,3.4vw,30px); }
.overlay-list .soon{
  display:flex; align-items:baseline; gap:20px;
  font-family:var(--display); font-size:clamp(20px,4vw,32px);
  text-transform:uppercase; color:rgba(250,248,243,.35);
  padding:8px 0;
}
.overlay-list .soon span.tag{
  font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--paper);
  margin-left:auto; --mark:var(--g6); --mark-opacity:.35;
}
.overlay-foot{
  display:flex; flex-wrap:wrap; gap:8px 28px; font-family:var(--mono); font-size:12px;
  letter-spacing:.04em; color:rgba(250,248,243,.6); padding-top:20px; border-top:1px solid rgba(250,248,243,.18);
}
.overlay-foot a{ color:var(--paper); text-decoration:underline; }

/* ---------- generic type ---------- */
h1,h2,h3{
  margin:0; font-family:var(--display); text-transform:uppercase; line-height:.94;
  /* Anton sets tight by default — real kern pairs on, plus a touch of positive
     tracking so glyphs never collide. One value across all display type. */
  letter-spacing:.012em; font-kerning:normal; font-feature-settings:"kern" 1;
}
.eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); display:flex; align-items:center; gap:10px; margin:0;
}
.eyebrow.center{ justify-content:center; text-align:center; }

/* ---------- hero ---------- */
.hero{ padding-top:56px; }
/* nudged right to match the optical left edge of the display font below it —
   the mono font's glyphs sit flush at the box edge, but Anton's letterforms
   carry a few px of left-side bearing, so the plain box edges don't line up visually */
.hero-eyebrow{ font-family:var(--mono); font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-left:8px; }
.hero-name{
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(48px,10vw,132px); line-height:.98; margin:6px 0 0;
  letter-spacing:.012em;
}
.hero-name .hl{ color:var(--ink); }

.hero-media{ position:relative; margin-top:36px; overflow:hidden; aspect-ratio:2.7/1; background:var(--ink); }
.hero-media .slide{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; transition:opacity 1.8s cubic-bezier(.4,0,.4,1); z-index:1; will-change:opacity;
}
.hero-media .slide.active{ opacity:1; z-index:2; }
.hero-media .slide img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Slow continuous drift. Every slide runs the SAME animation from page load, so all
   slides are always at the identical scale — a cross-fade can never catch two images
   at different sizes, and nothing restarts when .active moves. That was the pop. */
.hero-media .slide img{
  animation:heroDrift 26s ease-in-out infinite alternate;
  will-change:transform; backface-visibility:hidden;
}
@keyframes heroDrift{
  from{ transform:scale(1.07); }
  to  { transform:scale(1); }
}
/* header strips (inner pages) are wider + shorter than the home banner */
.hero-media.strip{ aspect-ratio:3.6/1; margin-top:0; }
@media (max-width:640px){ .hero-media.strip{ aspect-ratio:2.1/1; } }
/* one-off taller header (3D page only) — shows its source image's full height uncropped,
   instead of the shared strip ratio other pages use. Do not apply this class elsewhere. */
.hero-media.tall{ aspect-ratio:2000/790; margin-top:0; }
@media (max-width:640px){ .hero-media.tall{ aspect-ratio:2.1/1; } }
@media (prefers-reduced-motion: reduce){ .hero-media .slide img{ animation:none; } }
.hero-media .slide-dots{
  position:absolute; right:var(--gutter); bottom:24px; z-index:3;
  display:flex; gap:8px;
}
.hero-media .slide-dots button{
  width:9px; height:9px; border-radius:50%; border:1.5px solid var(--paper);
  background:rgba(250,248,243,.25); padding:0; cursor:pointer;
}
.hero-media .slide-dots button.active{ background:var(--paper); }
.hero-caption{
  position:absolute; left:var(--gutter); bottom:24px; max-width:520px;
  background:var(--ink); color:var(--paper); padding:22px 26px;
  font-family:var(--geo); font-size:clamp(16px,2.2vw,24px); line-height:1.25; text-transform:uppercase;
  z-index:3;
}
@media (max-width:640px){ .hero-media{ aspect-ratio:1.7/1; } }

/* ---------- portfolio index grid (nav tiles: cropping allowed) ---------- */
/* full-bleed white band under the header image, same white as the "Trusted
   by" logo section below it — the .index-grid itself just holds the
   constrained/centered 4-tile row inside that white section. */
.index-section{ background:#fff; padding:48px 0 40px; }
.index-grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  max-width:var(--container); margin:0 auto;
  gap:10px; padding:0 var(--gutter);
}
.index-cell{
  position:relative; border-radius:16px;
  aspect-ratio:3/4; overflow:hidden; text-decoration:none; color:var(--paper); display:block;
}
.index-cell img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.05); transition:filter .4s, transform .5s;
}
.index-cell:hover img{ filter:grayscale(0); transform:scale(1.04); }
.index-cell::after{ content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.78), rgba(0,0,0,.05) 55%); }
.index-cell .cell-inner{ position:absolute; left:0; right:0; bottom:0; padding:18px; z-index:2; }
.index-cell .idx{ font-family:var(--mono); font-size:11px; color:var(--g4); display:block; margin-bottom:6px; }
.index-cell h3{ font-size:clamp(20px,2.4vw,30px); }
.index-cell p{ margin:6px 0 0; font-size:13px; color:rgba(250,248,243,.75); }
@media (max-width:820px){ .index-grid{ grid-template-columns:repeat(2,1fr); } }

/* ---------- trusted-by / quote ---------- */
.section{ padding:64px 0; background:#fff; }
.marquee{
  margin-top:28px; overflow:hidden; position:relative; width:100%;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  /* explicit size/repeat + an isolated stacking context — iOS Safari can drop
     the mask's compositing layer mid-animation (esp. after backgrounding the
     tab or under memory pressure) if these are left to their defaults, which
     is what makes the marquee appear to freeze or vanish intermittently on
     mobile only; this keeps the mask stable across repaints. */
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  isolation:isolate;
}
.marquee-track{
  display:flex; align-items:center; width:max-content; animation:marquee 38s linear infinite;
  /* forces its own GPU compositing layer so the animation keeps running even
     if the browser would otherwise recycle/repaint the layer mid-scroll */
  will-change:transform; -webkit-transform:translateZ(0); transform:translateZ(0);
}
.marquee-track .logo{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  height:64px; padding:0 clamp(22px,3vw,44px);
}
.marquee-track .logo img{ max-height:100%; max-width:150px; width:auto; height:auto; object-fit:contain; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .marquee-track{ animation:none; overflow-x:auto; } }
.quote{ padding:72px 0; background:var(--paper-2); }
.quote blockquote{
  margin:0; font-family:var(--display); text-transform:none; font-size:clamp(24px,3.6vw,44px);
  line-height:1.12; max-width:27ch; position:relative;
}
.quote .qm{
  font-size:1.9em; line-height:0; vertical-align:-.22em; color:var(--muted);
}
.quote cite{ display:block; margin-top:22px; font-family:var(--mono); font-style:normal; font-size:13px; color:var(--muted); }

.about-strip-outer{ padding:72px 0; }
.about-strip{ display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:start; }
.about-strip p{ font-size:18px; max-width:56ch; }
.about-strip .tags{ display:flex; flex-wrap:wrap; gap:12px 20px; margin-top:24px; }
.about-strip .tags span{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; }
@media (max-width:820px){ .about-strip{ grid-template-columns:1fr; gap:24px; } }

/* ---------- sign-off / contact teaser ---------- */
.signoff{ padding:72px 0; background:var(--ink); color:var(--paper); position:relative; overflow:hidden; }
.signoff .wrap{ position:relative; z-index:2; display:grid; grid-template-columns:1fr auto; gap:40px; align-items:end; }
.signoff h2{
  font-family:var(--body); text-transform:none; letter-spacing:normal;
  font-weight:600; font-size:clamp(21px,3vw,30px); line-height:1.45; max-width:34ch;
}
.signoff a.mail{ font-family:var(--geo); text-decoration:none; color:var(--g4); word-break:break-all; }
.signoff .tip{
  font-family:var(--mono); font-size:12px; color:rgba(250,248,243,.55); margin-top:18px; max-width:34ch;
}
.signoff .pirate{ width:150px; opacity:.9; }
@media (max-width:820px){ .signoff .wrap{ grid-template-columns:1fr; } .signoff .pirate{ width:110px; } }

/* ---------- chapter header (content pages) ---------- */
.chapter{ padding-top:48px; padding-bottom:44px; }
.chapter .num{ font-family:var(--mono); font-size:14px; color:var(--muted); }
.chapter .eyebrow{ font-weight:700; color:var(--ink); }
.chapter h1{ font-size:clamp(40px,8vw,110px); margin-top:6px; letter-spacing:.012em; line-height:.98; }
.kern-at{ margin-left:-.045em; }
.chapter .desc{ max-width:64ch; font-size:17px; margin-top:18px; color:#3a352c; }

/* ---------- EXPERIMENTAL — classic 2D bounce-in on page-header typography ----------
   Brian wants to try this site-wide; delete this block + the main.js block above
   "// overlay nav" to remove it entirely if it doesn't land. */
/* Hide the h1 by default so it can never flash into view un-animated before
   main.js (loaded at the very end of body) has had a chance to run — on a real
   network that script can take noticeably longer to arrive than it does
   locally, which is why this only ever showed up on the live site. main.js is
   responsible for revealing it again (see the matching comment there); the
   animation below is a pure-CSS safety net for the rare case JS never runs at
   all (disabled, blocked, errors out), so the header is never left invisible. */
body:not([data-no-h1-bounce]) h1{
  opacity:0;
  animation:h1-noscript-reveal 0s 1.5s forwards;
}
@keyframes h1-noscript-reveal{ to{ opacity:1; } }
.bounce-letter{
  display:inline-block; transform-origin:50% 100%; color:var(--lc, var(--ink));
  animation:hdr-bounce 1.05s both;
}
/* A weighted object dropping onto solid ground: fast fall (ease-in, like gravity),
   an impact squash at the baseline, then each rebound is smaller than the last —
   never rising back above the drop's start, so it reads as landing, not unfurling.
   Color rides along: each letter starts tinted with the brand-gradient color that
   sits above it (--lc, set per-letter in main.js) and cools to ink black by the
   time it first touches down, as if it fell out of the colorful header band. */
@keyframes hdr-bounce{
  0%   { transform:translateY(-220%) scaleY(1.1) scaleX(.95); opacity:0; color:var(--lc, var(--ink)); animation-timing-function:cubic-bezier(.55,0,1,.45); }
  4%   { opacity:1; }
  38%  { transform:translateY(0) scaleY(.7) scaleX(1.22); color:var(--ink); animation-timing-function:cubic-bezier(0,.6,.4,1); }
  48%  { transform:translateY(-34%) scaleY(1.04) scaleX(.97); animation-timing-function:cubic-bezier(.55,0,1,.45); }
  62%  { transform:translateY(0) scaleY(.88) scaleX(1.1); animation-timing-function:cubic-bezier(0,.6,.4,1); }
  70%  { transform:translateY(-12%) scaleY(1.02) scaleX(.99); animation-timing-function:cubic-bezier(.55,0,1,.45); }
  81%  { transform:translateY(0) scaleY(.95) scaleX(1.04); animation-timing-function:cubic-bezier(0,.6,.4,1); }
  87%  { transform:translateY(-4%); animation-timing-function:cubic-bezier(.55,0,1,.45); }
  95%  { transform:translateY(0) scaleY(.99) scaleX(1.01); animation-timing-function:cubic-bezier(0,.6,.4,1); }
  100% { transform:translateY(0) scaleY(1) scaleX(1); color:var(--ink); }
}
@media (prefers-reduced-motion: reduce){ .bounce-letter{ animation:none; } }

/* ---------- masonry gallery: NO cropping, natural ratios ---------- */
.masonry{ column-count:1; column-gap:20px; padding:20px var(--gutter) 80px; }
@media (min-width:640px){ .masonry{ column-count:2; } }
@media (min-width:980px){ .masonry{ column-count:3; } }
@media (min-width:1320px){ .masonry{ column-count:4; } }
.masonry figure{
  margin:0 0 20px; break-inside:avoid; background:var(--paper-2);
  border:1px solid rgba(20,18,16,.08); cursor:zoom-in; overflow:hidden;
}
.masonry img{ width:100%; height:auto; display:block; transition:transform .35s; }
.masonry figure:hover img{ transform:scale(1.015); }

.lightbox{
  position:fixed; inset:0; background:rgba(10,9,7,.94); z-index:1200;
  display:none; flex-direction:column; align-items:center; justify-content:center; padding:5vh 5vw; cursor:zoom-out;
}
.lightbox.open{ display:flex; }
.lightbox .lb-frame{ display:flex; flex-direction:column; align-items:center; max-width:100%; max-height:100%; cursor:default; }
.lightbox img{ max-width:100%; max-height:78vh; width:auto; margin:0 auto; box-shadow:0 30px 80px rgba(0,0,0,.5); cursor:default; }
.lightbox .lb-caption{
  margin-top:18px; max-width:70ch; text-align:center; color:var(--paper); cursor:default;
}
.lightbox .lb-caption .lb-title{
  font-family:var(--geo); text-transform:uppercase; font-size:clamp(15px,2vw,20px); letter-spacing:.02em;
}
.lightbox .lb-caption .lb-desc{
  font-family:var(--body); font-size:14px; color:rgba(250,248,243,.7); margin-top:6px; white-space:pre-line;
}
.lightbox .lb-close{
  position:fixed; top:24px; right:28px; color:var(--paper); font-family:var(--mono);
  font-size:13px; letter-spacing:.1em; text-transform:uppercase; background:none; border:none; cursor:pointer;
}
.lightbox .lb-arrow{
  position:fixed; top:50%; transform:translateY(-50%); z-index:1201;
  background:rgba(250,248,243,.1); border:1.5px solid rgba(250,248,243,.5); color:var(--paper);
  width:52px; height:52px; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:20px;
  transition:background .2s, border-color .2s;
}
.lightbox .lb-arrow:hover{ background:var(--g8); border-color:var(--g8); color:var(--ink); }
.lightbox .lb-arrow svg{ display:block; width:18px; height:18px; }
.lightbox .lb-prev{ left:20px; }
.lightbox .lb-next{ right:20px; }
.lightbox .lb-count{
  position:fixed; top:28px; left:28px; color:rgba(250,248,243,.6); font-family:var(--mono); font-size:12px; letter-spacing:.08em;
}
@media (max-width:640px){ .lightbox .lb-arrow{ width:40px; height:40px; font-size:16px; } .lightbox .lb-arrow svg{ width:15px; height:15px; } .lightbox .lb-prev{ left:8px; } .lightbox .lb-next{ right:8px; } }

/* ---------- book footer ---------- */
.book-footer{ display:grid; grid-template-columns:1fr 1fr; border-top:1px solid rgba(20,18,16,.12); }
.book-footer a{ text-decoration:none; color:var(--ink); padding:28px var(--gutter); display:flex; flex-direction:column; gap:6px; }
.book-footer .prev{ border-right:1px solid rgba(20,18,16,.12); }
.book-footer .next{ text-align:right; align-items:flex-end; }
.book-footer span:first-child{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.book-footer .big{ font-family:var(--display); font-size:clamp(20px,3vw,34px); text-transform:uppercase; }
.book-footer a:hover .big{ color:var(--g8); }
@media (max-width:640px){ .book-footer{ grid-template-columns:1fr; } .book-footer .prev{ border-right:none; border-bottom:1px solid rgba(20,18,16,.12); } .book-footer .next{ text-align:left; align-items:flex-start; } }

.credits{ padding:16px var(--gutter); display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px; font-family:var(--mono); font-size:11px; color:var(--muted); }

[data-reveal]{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
[data-reveal].in{ opacity:1; transform:none; }

/* ---------- highlighter mark: rectangular marker swipe, never a pill ----------
   Pills read as buttons, so they are reserved for real buttons. Anything that is
   just a label gets a marker stripe behind it instead. */
.mark{ position:relative; display:inline-block; padding:3px 9px; isolation:isolate; }
.mark::before{
  content:''; position:absolute; z-index:-1;
  left:-3px; right:-3px; top:16%; bottom:9%;
  background:var(--mark,var(--g1)); opacity:var(--mark-opacity,.62);
  transform:rotate(-.4deg);
}
/* a second, shorter swipe gives the uneven double-pass look of a real marker */
.mark::after{
  content:''; position:absolute; z-index:-1;
  left:2px; right:6px; top:34%; bottom:14%;
  background:var(--mark,var(--g1)); opacity:calc(var(--mark-opacity,.62) * .55);
  transform:rotate(.5deg);
}

/* =====================================================================
   Case pages (UI / UX, and the template Games and the rest will follow)
   Left: the story — index, client mark, title, roles, copy, a supporting shot.
   Right: the work, large. Everything on paper, rounded corners via CSS only.
   ===================================================================== */
.case{ padding:clamp(56px,8vw,104px) 0; }
.case:first-of-type{ padding-top:clamp(40px,6vw,76px); }
.case:nth-of-type(even){ background:var(--paper-2); }

.case-grid{
  display:grid; grid-template-columns:minmax(280px,.82fr) 1.35fr;
  gap:clamp(28px,4.5vw,68px); align-items:start;
}
.case-col{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
/* a small secondary brand mark sitting under a case's body copy/store links,
   e.g. Merge Treasure Hunt's Lucky Spin Games logo */
.case-brand-mark{ height:180px; width:auto; max-width:100%; object-fit:contain; object-position:left top; align-self:flex-start; border-radius:14px; }

.case-num{
  font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); display:flex; align-items:center; gap:10px; align-self:stretch;
}

/* client / game marks keep their own proportions — the flex column must not stretch them */
.case-client{ height:55px; width:auto; max-width:min(240px,100%); object-fit:contain; align-self:flex-start; flex:0 0 auto; }
.case-clients{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; align-self:flex-start; }
.case-clients .case-client{ height:49px; }
.case-client.lg{ height:77px; }
.case-client.xl{ height:121px; }

.case-col h2{ font-size:clamp(28px,3.4vw,46px); line-height:1; }
.case-roles{
  margin:0; display:flex; flex-wrap:wrap; gap:11px 16px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink);
}
.case-desc{ margin:0; font-size:16px; line-height:1.62; color:#33302a; }
/* inline text link inside body copy — underlined so it reads as clickable */
.inline-link{ text-decoration:underline; text-underline-offset:2px; }
.inline-link:hover{ color:var(--accent,var(--g4)); }

/* 2-row, 3-col grid of sample thumbnails (UI page closing section) — deliberately
   much smaller than a case-hero image, since these are quick samples, not a lead shot */
.case-media .ui-samples-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; max-width:516px; width:100%; }
.ui-samples-grid .case-shot{ aspect-ratio:4/3; max-width:none; cursor:zoom-in; }
.ui-samples-grid .case-shot:hover img{ transform:scale(1.015); }
.ui-samples-grid .case-shot img{ transition:transform .35s; }
.ui-samples-grid .case-shot img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:480px){ .case-media .ui-samples-grid{ grid-template-columns:repeat(2,1fr); max-width:280px; } }
.case-note{
  margin:2px 0 0; font-family:var(--body); font-size:13.5px; line-height:1.5; color:var(--muted);
}
.case-awards{ margin:2px 0 0; padding:0; list-style:none; display:grid; gap:9px; }
.case-awards li{
  font-family:var(--body); font-size:13.5px; line-height:1.5; color:var(--muted);
  padding-left:18px; position:relative;
}
.case-awards li::before{
  content:''; position:absolute; left:0; top:.5em; width:8px; height:8px;
  background:var(--accent,var(--g4));
}

/* ---------- section divider between grouped case blocks (Slots page) ---------- */
.slots-divider{
  display:flex; align-items:center; gap:clamp(20px,3.5vw,36px);
  background:var(--paper-2); border-radius:24px;
  padding:clamp(24px,3.5vw,40px); margin:clamp(24px,4vw,40px) 0;
}
.slots-divider-logo{ width:clamp(72px,9vw,108px); height:auto; flex:none; border-radius:18px; }
.slots-divider-copy{ min-width:0; }
.slots-divider h2{
  font-family:var(--body); font-weight:700; text-transform:none; letter-spacing:normal;
  font-size:clamp(22px,2.6vw,30px); line-height:1.3; margin:0;
}
.slots-divider p{ max-width:64ch; font-size:16px; line-height:1.62; color:#3a352c; margin:12px 0 0; }
.slots-divider .store-links{ margin-top:16px; }
@media (max-width:640px){
  .slots-divider{ flex-direction:column; align-items:flex-start; }
}

/* rounded frames, done in CSS — the source images are untouched */
.case-shot{
  margin:0; overflow:hidden; border-radius:16px; background:var(--paper-2);
  display:flex; align-items:center; justify-content:center;
}
.case:nth-of-type(even) .case-shot{ background:#fff; }
.case-shot img{ width:100%; height:auto; display:block; }
/* 'contain' frames hold art that already carries its own backdrop (or transparency),
   so the figure adds no second card behind it — just the rounded corner. */
.case-shot.contain{ background:none; padding:0; }
.case-shot.contain img{ width:auto; max-height:56vh; border-radius:14px; }

.case-hero{ border-radius:20px; }
.case-hero.crop43{ aspect-ratio:4/3; }
.case-hero.crop43 img{ width:100%; height:100%; object-fit:cover; }
/* full-width 16:9 shot placed below a pair of case-asides — same "crop, don't
   letterbox" treatment as .case-hero.crop43, just a different fixed ratio */
.case-shot.crop169{ width:100%; max-width:none; aspect-ratio:16/9; margin-top:clamp(14px,1.8vw,22px); }
.case-shot.crop169 img{ width:100%; height:100%; object-fit:cover; }
.case-hero img{ transform:scale(1.02); transition:transform 1.4s cubic-bezier(.2,.7,.2,1); }
[data-reveal].in .case-hero img{ transform:none; }
@media (prefers-reduced-motion: reduce){ .case-hero img{ transform:none; transition:none; } }

/* the supporting shot rides at the bottom of the left column */
/* right column: lead image, then the supporting shot left-justified underneath */
.case-media{ display:flex; flex-direction:column; align-items:flex-start; gap:clamp(14px,1.8vw,22px); min-width:0; }
.case-media > *{ max-width:100%; }
.case-aside{ max-width:min(360px,62%); }
/* Two supporting shots share the width under the lead image. Both cells are the same
   square window so the pair reads as one row; art is contained (never cropped) unless
   the shot is explicitly marked croppable. */
/* Paired shots under the lead image: left window is 3:4, right is 1:1. Column widths
   are in the same ratio so both windows come out the same height. Both crop to fill. */
.case-asides{
  display:grid; grid-template-columns:.75fr 1fr; gap:clamp(12px,1.6vw,20px);
  width:100%; align-items:start;
}
.case-asides .case-shot{ max-width:none; width:100%; padding:0; }
.case-asides .case-shot:first-child{ aspect-ratio:3/4; }
.case-asides .case-shot:last-child{ aspect-ratio:1/1; }
.case-asides .case-shot img{ width:100%; height:100%; object-fit:cover; border-radius:0; }
.case-asides .case-shot img.top{ object-position:top center; }
/* landscape variant: 4:3 on the left instead of 3:4 */
.case-asides.wide{ grid-template-columns:1.333fr 1fr; }
.case-asides.wide .case-shot:first-child{ aspect-ratio:4/3; }
/* art too tall to crop well sits inside its window instead */
.case-asides .case-shot.fit{ background:#fff; padding:0; }

.case-asides .case-shot.fit img{ object-fit:cover; object-position:top center; }
@media (max-width:560px){ .case-asides{ grid-template-columns:1fr; } }
.case-aside img{ border-radius:14px; }
/* art that reads fine cropped can fill a consistent window instead of floating */
.case-shot.crop{ aspect-ratio:4/3; width:min(360px,62%); }
.case-shot.crop img{ width:100%; height:100%; object-fit:cover; object-position:top center; border-radius:0; }

/* pair of phone screens sit side by side inside one frame */
.case-shot.pair{ gap:clamp(12px,1.6vw,24px); padding:clamp(18px,2.4vw,34px); }
.case-shot.pair img{ width:auto; max-width:calc(50% - 12px); max-height:60vh; }

@media (max-width:900px){
  .case-grid{ grid-template-columns:1fr; gap:26px; }
  .case-media{ order:-1; }             /* lead with the work on small screens */
  .case-shot.contain img{ max-height:46vh; }
}

/* closing note */
.page-outro{ padding:clamp(48px,7vw,88px) 0 88px; }
.page-outro p{ max-width:62ch; font-size:16px; color:var(--muted); }
.btn-pill{
  display:inline-flex; align-items:center; gap:8px; margin-top:20px;
  background:var(--ink); color:var(--paper); border-radius:999px; padding:13px 24px;
  text-decoration:none; font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  transition:background .25s, color .25s;
}
.btn-pill:hover{ background:var(--g8); color:var(--ink); }
.case-note{ color:var(--muted); }
.case-aside.contain img{ max-height:300px; }

/* ---------- discipline palette ----------
   One set of highlighter colors for a discipline wherever it appears: the About
   tags on the home page, and the roles line on every project page. */
.d-art-direction{ --mark:var(--g1); }
.d-art          { --mark:var(--g3); }
.d-animation    { --mark:var(--g5); }
.d-ui           { --mark:var(--g6); }
.d-illustration { --mark:var(--g2); }
.d-creative     { --mark:var(--g4); }
.d-audio        { --mark:var(--g7); }
.d-tech-art     { --mark:var(--g8); }
.d-logo         { --mark:var(--g2); }
.d-site-design  { --mark:var(--g4); }
.d-game-design  { --mark:var(--g8); }

/* ---------- home: pirate straddles the seam into the sign-off band ---------- */
.about-strip-outer{ position:relative; padding:72px 0 88px; }
.about-aside{
  display:flex; flex-direction:column; align-items:flex-end; justify-content:flex-end; gap:6px; height:100%;
  --pirate-w:clamp(199px,25.4vw,351px);
}
/* the pirate says it, so it gets a balloon with a tail pointing down at him */
.about-tip{
  position:relative; margin:0 0 14px; max-width:26ch;
  background:#fff; border:2px solid var(--ink); border-radius:18px;
  padding:14px 18px; font-family:var(--mono); font-size:12.5px; line-height:1.55; color:var(--ink);
  text-align:left;
}
.about-tip::after, .about-tip::before{
  content:''; position:absolute; left:34px; width:0; height:0; border-style:solid;
}
.about-tip::before{ bottom:-16px; border-width:16px 13px 0 0; border-color:var(--ink) transparent transparent transparent; }
.about-tip::after { bottom:-12px; border-width:13px 10px 0 0; border-color:#fff transparent transparent transparent; }
.about-pirate{ width:var(--pirate-w); height:auto; }
/* EXPERIMENTAL — scroll-tied "3D" rotate, try-it-and-see per Brian's request
   (swapped in for the earlier mouse-tilt version, same idea). Easy to remove:
   delete this rule plus the matching "pirate scroll rotate" block in main.js
   (search for that comment) — nothing else depends on either. No transition
   here on purpose: it should track the scroll position 1:1, not ease/lag
   behind it. */
.about-pirate{ will-change:transform; }
.about-aside .about-tip-plain{
  margin:8px 0 0; font-family:var(--body); font-size:10px;
  color:var(--muted); text-align:center; width:var(--pirate-w); max-width:none;
}
@media (max-width:820px){
  .about-aside{ align-items:flex-start; margin-top:30px; --pirate-w:234px; }
}

/* ---------- video reels ---------- */
.reel-block{ padding:clamp(48px,7vw,88px) 0; }
.reel-block:nth-of-type(even){ background:var(--paper-2); }
.video-frame{
  position:relative; margin:0; aspect-ratio:16/9; border-radius:20px;
  overflow:hidden; background:var(--ink);
}
.video-frame img, .video-frame iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0; display:block;
}
.video-frame img{ object-fit:cover; }
.video-play{
  position:absolute; inset:0; margin:auto; width:clamp(64px,7vw,92px); height:clamp(64px,7vw,92px);
  border-radius:50%; border:2px solid var(--paper); background:rgba(20,18,16,.42);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .25s, border-color .25s, transform .25s;
}
.video-play::before{
  content:''; margin-left:7px;
  border-left:22px solid var(--paper); border-top:14px solid transparent; border-bottom:14px solid transparent;
}
.video-play:hover{ background:var(--g8); border-color:var(--g8); transform:scale(1.06); }
.video-play:hover::before{ border-left-color:var(--ink); }
.video-frame[data-yt=""] .video-play{ cursor:default; }
.video-frame[data-yt=""] .video-play:hover{ background:rgba(20,18,16,.42); border-color:var(--paper); transform:none; }
.video-frame[data-yt=""] .video-play:hover::before{ border-left-color:var(--paper); }

.reel-meta{ display:grid; grid-template-columns:1fr 1.25fr; gap:clamp(20px,4vw,60px); margin-top:clamp(22px,3vw,34px); align-items:start; }
.reel-meta > div{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.reel-meta h2{ font-size:clamp(24px,3vw,40px); }
@media (max-width:820px){ .reel-meta{ grid-template-columns:1fr; gap:18px; } }
.case-shot figcaption{
  width:100%; padding:10px 2px 0; font-family:var(--mono); font-size:11px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
}
.case-shot.contain{ flex-direction:column; align-items:flex-start; }

/* ---------- social link with mark ---------- */
.social-link{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  font-family:var(--mono); font-size:13px; letter-spacing:.04em;
}
.social-link svg{ width:19px; height:19px; flex:0 0 auto; display:block; }
.signoff .social-link{ color:var(--g4); margin-top:10px; }
.signoff .social-link:hover{ color:var(--paper); }

/* ---------- about / résumé ---------- */
.bio-grid{ display:grid; grid-template-columns:auto 1fr; gap:clamp(24px,4vw,52px); align-items:start; padding:clamp(36px,5vw,64px) 0 0; }
.bio-portrait{ width:clamp(150px,16vw,220px); border-radius:16px; margin-bottom:28px; }
.bio-copy{ font-size:17px; line-height:1.62; max-width:62ch; margin:0; }
.bio-actions{ display:flex; flex-wrap:wrap; gap:14px 20px; align-items:center; margin-top:26px; }
@media (max-width:760px){ .bio-grid{ grid-template-columns:1fr; } }

.res-section{ padding:clamp(44px,6vw,80px) 0; background:#fff; }
.res-section + .res-section{ border-top:1px solid rgba(20,18,16,.12); }
.res-head{ display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; margin-bottom:clamp(20px,3vw,32px); }
.res-head h2{ font-size:clamp(26px,3.4vw,44px); }

.res-job{ display:grid; grid-template-columns:minmax(230px,.7fr) 1.6fr; gap:clamp(18px,3.5vw,54px); padding:clamp(20px,2.6vw,34px) 0; align-items:start; }
.res-job .case-client{ margin-bottom:10px; }
.res-job + .res-job{ border-top:1px solid rgba(20,18,16,.12); }
.res-job h3{ font-family:var(--body); font-weight:600; text-transform:none; letter-spacing:normal; font-size:clamp(17px,1.5vw,19px); line-height:1.35; }
.res-when{ margin:10px 0 0; font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
/* narrow the body column so lines don't run edge-to-edge of its 1.6fr grid
   cell — capped at 60% of that cell's width on wider screens; released back
   to full width on mobile, where the grid is already single-column and the
   cell itself is much narrower. */
.res-body{ max-width:60%; }
@media (max-width:1000px){ .res-body{ max-width:80%; } }
@media (max-width:760px){ .res-body{ max-width:none; } }
.res-body p{ margin:0 0 14px; font-size:15.5px; line-height:1.6; }
.res-body p:last-child{ margin-bottom:0; }
.res-body .lede{ font-size:16.5px; font-weight:600; font-style:italic; color:var(--ink); }
.res-role{
  margin:24px 0 10px; font-family:var(--body); font-weight:700; font-size:15px;
  letter-spacing:normal; text-transform:none; color:var(--ink);
}
.res-role:not(:first-child){ margin-top:42px; }
.res-list{ margin:0; padding:0; list-style:none; display:grid; gap:10px; }
.res-list li{ position:relative; padding-left:18px; font-size:15.5px; line-height:1.55; }
.res-list li::before{ content:''; position:absolute; left:0; top:.62em; width:7px; height:7px; background:#c9c5bc; }
@media (max-width:760px){ .res-job{ grid-template-columns:1fr; gap:14px; } }

/* awards list: one block per project */
.awards{ display:grid; gap:clamp(18px,2.4vw,28px); }
.award-item h3{ font-family:var(--body); font-weight:600; text-transform:none; letter-spacing:normal; font-size:16.5px; line-height:1.4; }
.award-item ul{ margin:9px 0 0; padding:0; list-style:none; display:grid; gap:6px; }
.award-item li{ position:relative; padding-left:18px; font-size:14.5px; line-height:1.5; color:var(--muted); }
.award-item li::before{ content:''; position:absolute; left:0; top:.58em; width:6px; height:6px; background:var(--accent,var(--g6)); }
@media (min-width:900px){
  .awards{ display:block; column-count:2; column-gap:clamp(32px,4vw,64px); }
  .award-item{ break-inside:avoid; margin-bottom:clamp(20px,2.4vw,32px); }
}

/* ---------- contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px); padding:clamp(36px,5vw,64px) 0 clamp(56px,7vw,96px); align-items:start; }
.contact-lede{ font-size:18px; line-height:1.6; margin:0 0 22px; max-width:40ch; }
.contact-mail{ font-family:var(--geo); font-size:clamp(18px,2.4vw,30px); text-decoration:none; color:var(--ink); word-break:break-word; display:inline-block; }
.contact-mail:hover{ color:var(--g8); }
.contact-art{ width:100%; max-width:420px; margin-left:auto; }
.form-field{ display:grid; gap:7px; margin-bottom:18px; }
.form-field label{ font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.form-field input, .form-field textarea{
  font-family:var(--body); font-size:15px; color:var(--ink); background:#fff;
  border:2px solid var(--ink); border-radius:10px; padding:12px 14px; width:100%;
}
.form-field textarea{ min-height:150px; resize:vertical; }
.form-field input:focus, .form-field textarea:focus{ outline:3px solid var(--g4); outline-offset:1px; }
@media (max-width:760px){ .contact-grid{ grid-template-columns:1fr; } .contact-art{ margin:0; } }

/* ---------- the asterisk page ---------- */
.aster{ padding-top:clamp(48px,8vw,104px); padding-bottom:clamp(64px,10vw,120px); animation:asterFadeIn .8s ease both; }
@keyframes asterFadeIn{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion: reduce){ .aster{ animation:none; } }
.aster-layout{
  display:grid; grid-template-columns:minmax(0,66ch) 1fr;
  gap:clamp(24px,4vw,56px); align-items:stretch;
}
.aster-box{
  background:#fff; border-radius:24px;
  padding:clamp(30px,5vw,56px);
}
.aster-art{
  width:100%; height:100%; min-height:260px; object-fit:cover; border-radius:24px;
}
@media (max-width:820px){
  .aster-layout{ grid-template-columns:1fr; }
  .aster-art{ min-height:200px; order:-1; }
}
.aster-lead{ display:flex; align-items:flex-start; gap:clamp(10px,1.5vw,20px); }
.aster-mark{
  width:clamp(32px,3.8vw,48px); height:auto; flex:0 0 auto;
  margin-top:.14em; transform-origin:50% 50%;
  animation:asterPop .75s cubic-bezier(.3,1.2,.4,1) .15s both;
}
/* a comedic, exaggerated "pop" — overshoots big, wobbles, then settles,
   rather than a plain fade — Brian's "Victor Borge" reference. Sequenced:
   the mark pops first, then the heading fades in, then the body copy —
   each stage timed to start as the previous one finishes. */
@keyframes asterPop{
  0%   { transform:scale(0) rotate(-10deg); opacity:0; }
  50%  { transform:scale(1.4) rotate(6deg); opacity:1; }
  68%  { transform:scale(.86) rotate(-3deg); }
  82%  { transform:scale(1.1) rotate(1.5deg); }
  92%  { transform:scale(.97) rotate(-.5deg); }
  100% { transform:scale(1) rotate(0deg); }
}
@keyframes asterTextIn{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion: reduce){ .aster-mark{ animation:none; } }
.aster-lead h2{
  font-family:var(--body); font-weight:700; text-transform:none; letter-spacing:normal;
  font-size:clamp(21px,2.6vw,32px); line-height:1.3;
  opacity:0; animation:asterTextIn .55s ease .9s both;
}
.aster-box p{
  font-size:clamp(14px,1.5vw,16px); line-height:1.65; margin:24px 0 0;
  opacity:0; animation:asterTextIn .55s ease 1.35s both;
}
.aster-box .sig{ margin-top:28px; font-family:var(--body); font-weight:700; font-size:clamp(14px,1.5vw,16px); color:var(--ink); text-align:right; }
@media (prefers-reduced-motion: reduce){
  .aster-lead h2, .aster-box p{ animation:none; opacity:1; }
}

/* ---------- contact: no form, one clear action ---------- */
.talk{ padding:clamp(40px,6vw,80px) 0 clamp(64px,9vw,110px); display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(30px,5vw,64px); align-items:center; }
.talk-q{ font-size:clamp(19px,2.4vw,28px); line-height:1.45; max-width:22ch; margin:0 0 30px; }
.btn-square{
  display:flex; align-items:center; justify-content:center; text-align:center;
  width:100%; max-width:22ch; height:auto;
  background:var(--ink); color:var(--paper); text-decoration:none; border-radius:20px;
  font-family:var(--display); text-transform:uppercase; font-size:clamp(20px,2.2vw,26px);
  letter-spacing:.012em; line-height:1.05; padding:22px 20px;
  transition:background .25s, color .25s, transform .25s;
}
.btn-square:hover{ background:var(--g8); color:var(--ink); transform:translateY(-3px); }
.talk-mail{ display:block; margin-top:20px; font-family:var(--mono); font-size:13px; color:var(--muted); text-decoration:none; }
.talk-mail:hover{ color:var(--ink); }
.talk-art{ width:100%; max-width:840px; margin-left:auto; }
@media (max-width:760px){ .talk{ grid-template-columns:1fr; } .talk-art{ margin:0; max-width:460px; } }

/* ---------- discipline gallery (3D and friends) ---------- */
.shot-masonry{ column-count:1; column-gap:20px; padding:clamp(28px,4vw,48px) var(--gutter) 80px; }
@media (min-width:700px){ .shot-masonry{ column-count:2; } }
@media (min-width:1080px){ .shot-masonry{ column-count:3; } }
.shot-masonry figure{
  margin:0 0 20px; break-inside:avoid; background:var(--paper-2);
  border-radius:16px; overflow:hidden;
}
.shot-masonry img{ width:100%; height:auto; display:block; }
/* two shots explicitly paired side by side, so they never separate across the masonry columns */
.shot-masonry .shot-pair{ display:flex; gap:4px; background:none; }
.shot-masonry .shot-pair img{ width:50%; object-fit:cover; }

/* youtube fallback, in case an embed is blocked */
.reel-fallback{ margin:14px 0 0; font-family:var(--mono); font-size:12px; }
.reel-fallback a{ color:var(--muted); }
.reel-fallback a:hover{ color:var(--ink); }

.shot-caption{
  margin:10px 0 0; font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted);
}

/* a lone shot with its own caption (animation DVD row, etc.) */
.shot-solo{ margin:0; }
.shot-solo img{ border-radius:16px; }

/* ---------- stories / case studies hub ---------- */
.stories-quote{ padding-top:32px; padding-bottom:40px; display:grid; }
.stories-quote .quote-slide{
  grid-area:1/1; opacity:0; visibility:hidden; pointer-events:none;
  /* visibility only flips to hidden once the opacity fade-out has actually
     finished (the matching .7s delay) — without this, visibility:hidden takes
     effect immediately and the quote disappears in a blink instead of fading. */
  transition:opacity .7s ease, visibility 0s linear .7s;
}
.stories-quote .quote-slide.is-active{
  opacity:1; visibility:visible; pointer-events:auto;
  transition:opacity .7s ease;
}
.stories-quote blockquote{
  margin:0; font-family:var(--display); text-transform:none; font-size:clamp(20px,2.8vw,32px);
  line-height:1.2; max-width:52ch; color:var(--ink);
}
.stories-quote cite{ display:block; margin-top:16px; font-family:var(--mono); font-style:normal; font-size:13px; color:var(--muted); }
@media (prefers-reduced-motion: reduce){ .stories-quote .quote-slide{ transition:none; } }
/* gray backdrop behind the card grid so the white cards read as distinct boxes,
   not as a continuation of the page background */
.case-grid-section{ background:var(--paper-2); padding-top:8px; }
.stories-grid{ display:grid; grid-template-columns:1fr; gap:clamp(28px,4vw,44px); padding-top:32px; padding-bottom:64px; }
@media (min-width:760px){ .stories-grid{ grid-template-columns:1fr 1fr; } }
.story-card{
  position:relative; display:block; text-decoration:none; color:var(--ink);
  background:#fff; overflow:hidden; border-radius:14px; box-shadow:0 1px 0 rgba(20,18,16,.1);
}
.story-card .story-num{
  position:absolute; top:14px; left:14px; z-index:2; font-family:var(--mono); font-size:12px;
  letter-spacing:.08em; color:var(--paper); background:rgba(20,18,16,.55); padding:4px 9px; border-radius:20px;
}
.story-card.is-soon .story-num{ background:rgba(20,18,16,.32); }
.story-card .story-media{ aspect-ratio:16/10; overflow:hidden; background:var(--paper-2); }
.story-card .story-media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s, filter .4s; filter:grayscale(.15); }
.story-card:hover .story-media img{ transform:scale(1.04); filter:grayscale(0); }
.story-card .story-copy{ padding:22px var(--gutter) 30px; }
.story-card .story-eyebrow{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.story-card h3{ margin-top:8px; font-size:clamp(19px,2.2vw,26px); line-height:1.14; text-transform:none; font-family:var(--geo); }
.story-card .story-view{
  display:inline-flex; align-items:center; gap:8px; margin-top:16px;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink);
}
.story-card.is-soon{ cursor:default; }
.story-card.is-soon .story-media img{ filter:grayscale(1); opacity:.55; }
.story-card.is-soon .story-view{ color:var(--muted); }
.story-card.is-soon:hover .story-media img{ transform:none; filter:grayscale(1); opacity:.55; }

/* ---------- individual case-study page (STAR format) ---------- */
.case-num{ margin:0 0 10px; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.star{ padding-top:8px; padding-bottom:20px; max-width:66ch; }
.star-block{ padding:clamp(22px,3vw,30px) 0; border-top:1px solid rgba(20,18,16,.12); }
.star-block:first-child{ border-top:none; }
.star-block h3{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0 0 10px; }
.star-block p{ margin:0; font-size:16.5px; line-height:1.62; color:#2c2820; }
.star-block p + p{ margin-top:12px; }

/* Two-column STAR layout, done as real newspaper columns (CSS multi-column,
   not a grid or a fixed left/right split): all 4 blocks stay one flat,
   ordinary sequence in the HTML (.star.star-cols, set on the wrapping div —
   no wrapper divs needed) and the browser flows that single stream of
   content into 2 columns, balancing height automatically. In practice that
   usually puts Situation+Task in the left column and lets Action continue
   from wherever Task ends, spilling into the right column exactly like a
   newspaper article would — no dead space, because there's no shared row
   height to wait on. Applies to all 8 case studies (01–08): the two
   custom-layout ones (Process, Personal) flow the same way even though their
   sections aren't literally Situation/Task/Action/Result. */
.star.star-cols{
  max-width:980px; margin:0 auto;
  column-count:2; column-gap:clamp(48px,5vw,88px);
}
.star.star-cols .star-block{
  padding:clamp(14px,1.8vw,18px) 0;
  break-inside:auto; -webkit-column-break-inside:auto;
}
.star.star-cols .star-block h3{
  break-after:avoid; -webkit-column-break-after:avoid;
}
.star.star-cols .star-block p{ font-size:14.5px; line-height:1.58; }
.star.star-cols .star-list{ break-inside:auto; }
.star.star-cols .star-list li{
  font-size:14.5px; line-height:1.58;
  break-inside:avoid; -webkit-column-break-inside:avoid;
}
@media (max-width:760px){
  .star.star-cols{ column-count:1; max-width:66ch; margin:0; }
  .star.star-cols .star-block{ padding:clamp(22px,3vw,30px) 0; }
  .star.star-cols .star-block p,
  .star.star-cols .star-list li{ font-size:16.5px; line-height:1.62; }
}
.star-list{ list-style:none; margin:12px 0 0; padding:0; }
.star-list li{ position:relative; padding-left:20px; font-size:16.5px; line-height:1.62; color:#2c2820; }
.star-list li + li{ margin-top:9px; }
.star-list li::before{ content:"–"; position:absolute; left:0; color:var(--muted); font-family:var(--mono); }
.star-gallery{ display:grid; grid-template-columns:1fr 1fr; gap:16px; padding-top:8px; padding-bottom:60px; }
.star-gallery figure{ margin:0; border-radius:16px; overflow:hidden; background:var(--paper-2); }
.star-gallery img{ width:100%; height:100%; object-fit:cover; display:block; }
.star-gallery .full{ grid-column:1/-1; }
@media (max-width:640px){ .star-gallery{ grid-template-columns:1fr; } }

/* named sub-steps inside a .star-block, for case studies whose own page isn't
   shaped as Situation/Task/Action/Result (e.g. the Process case study's
   Pre-/Production/Post-Production phases) */
.process-step{ margin:0 0 22px; }
.process-step:last-child{ margin-bottom:0; }
.process-step h4{ font-family:var(--body); font-weight:700; font-size:16px; margin:0 0 6px; color:var(--ink); }
.process-step p{ margin:0; font-size:16.5px; line-height:1.62; color:#2c2820; }
.process-step p + p{ margin-top:6px; }
/* in the newspaper-column layout, keep each named step (heading + its own
   description/outcome) together rather than splitting a step's heading from
   its body across a column break — the phases themselves (Pre-Production,
   Production, Post-Production) still flow and break normally between steps. */
.star.star-cols .process-step{ break-inside:avoid; -webkit-column-break-inside:avoid; }
.star.star-cols .process-step p{ font-size:14.5px; line-height:1.58; }
@media (max-width:760px){
  .star.star-cols .process-step p{ font-size:16.5px; line-height:1.62; }
}

/* case-study prev/next pager (distinct from the site-wide book-footer below it) */
.case-pager{ display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch; gap:16px; padding-top:36px; padding-bottom:8px; border-top:1px solid rgba(20,18,16,.12); }
.case-pager-item{
  display:flex; flex-direction:column; gap:5px; text-decoration:none; color:var(--ink);
  padding:16px 18px; border-radius:14px; background:var(--paper-2);
}
.case-pager-item.next{ align-items:flex-end; text-align:right; }
.case-pager-item .cp-dir{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.case-pager-item .cp-num{ font-family:var(--mono); font-size:11px; color:var(--muted); }
.case-pager-item .cp-title{ font-family:var(--geo); font-size:15px; line-height:1.28; max-width:34ch; }
.case-pager-item .cp-status{ margin-top:2px; font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.case-pager-item.is-soon{ opacity:.72; }
.case-pager-item:not(.is-soon):hover{ opacity:.8; }
.case-pager-hub{
  display:flex; align-items:center; justify-content:center; align-self:stretch;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink); text-decoration:none; text-align:center; white-space:nowrap;
  padding:16px 18px; border-radius:14px; background:var(--paper-2);
  transition:opacity .2s;
}
.case-pager-hub:hover{ opacity:.8; }
@media (max-width:700px){
  .case-pager{ grid-template-columns:1fr; }
  .case-pager-item.next{ align-items:flex-start; text-align:left; }
  .case-pager-hub{ order:3; }
}

/* ---------- marketing page ---------- */
.mkt-grid{ padding-top:clamp(56px,8vw,104px); padding-bottom:40px; display:grid; gap:clamp(20px,3vw,32px); }
@media (min-width:820px){ .mkt-grid{ grid-template-columns:1fr 1fr; } }
.mkt-block h3{ font-family:var(--body); font-weight:700; text-transform:none; letter-spacing:normal; font-size:18px; }
.mkt-block p{ margin:8px 0 0; font-size:15.5px; line-height:1.6; color:#33302a; }

/* ---------- app store / google play links ---------- */
.store-links{ display:flex; flex-wrap:wrap; gap:10px; margin:14px 0 0; }
.store-btn{
  display:inline-flex; align-items:center; gap:8px;
  border:1.5px solid var(--ink); border-radius:999px; padding:9px 18px;
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink); text-decoration:none; transition:background .25s, color .25s;
}
.store-btn:hover{ background:var(--ink); color:var(--paper); }
.store-btn svg{ width:14px; height:14px; flex:none; }

/* ---------- games: same case template, three shots per title ---------- */
.game-note{ margin:2px 0 0; font-family:var(--body); font-size:13.5px; line-height:1.5; color:var(--muted); }
.game-credit{ margin:14px 0 0; font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; color:var(--muted); }
.case-cap{ margin:8px 0 0; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }