:root{
  --case-bg:#111;
  --case-ink:#f5f2e9;
  --case-muted:#a8a49b;
  --case-accent:#ff5b73;
  --case-panel:#1a1a1d;
  --case-line:rgba(255,255,255,.16);
  --case-radius:24px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--case-bg);color:var(--case-ink);font-family:Archivo,Helvetica,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
figure{margin:0}
body header,body header a,body header button{color:#101010!important}
@keyframes case-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes case-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}
.case-shell{width:min(1360px,100%);margin:0 auto;padding-left:clamp(20px,5vw,56px);padding-right:clamp(20px,5vw,56px)}
.case-back{display:inline-flex;align-items:center;gap:10px;padding:30px 0 20px;color:var(--case-muted);font-size:13px;font-weight:600}
.case-back:hover{color:var(--case-accent)}
.case-kicker,.case-label{font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:600;letter-spacing:.17em;text-transform:uppercase}
.case-hero{position:relative;min-height:min(76vw,850px);border-radius:var(--case-radius);overflow:hidden;background:var(--case-panel);isolation:isolate}
.case-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:var(--hero-fit,cover);object-position:var(--hero-position,center)}
/* Two-axis scrim. Several covers are light presentation slides, so the old
   single bottom gradient left the overlay copy sitting on near-white pixels.
   The vertical pass anchors the title band, the horizontal one protects the
   left column where the copy lives while keeping the artwork readable. */
.case-hero:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.40) 0,rgba(0,0,0,.10) 24%,rgba(0,0,0,.58) 60%,rgba(0,0,0,.90) 100%),linear-gradient(90deg,rgba(0,0,0,.62) 0,rgba(0,0,0,.20) 46%,rgba(0,0,0,0) 74%)}
.case-hero__copy{position:absolute;z-index:2;inset:clamp(25px,5vw,62px);display:flex;flex-direction:column;justify-content:space-between;color:#fff;animation:case-rise .75s cubic-bezier(.2,.7,.2,1) both}
.case-hero__top{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;transform:translateY(-28px)}
.case-hero__top span{padding:9px 12px;border:1px solid rgba(255,255,255,.24);border-radius:999px;background:rgba(0,0,0,.54);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.case-hero__title{margin:0;font-size:clamp(64px,13.2vw,190px);line-height:.76;letter-spacing:-.074em;font-weight:900;text-transform:uppercase;max-width:100%}
.case-hero__subtitle{margin:24px 0 0;font-size:clamp(21px,3.2vw,48px);line-height:1.12;letter-spacing:-.045em;font-weight:650;max-width:820px}
.case-hero__title,.case-hero__subtitle{text-shadow:0 5px 28px rgba(0,0,0,.52)}
.case-hero__foot{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;border-top:1px solid rgba(255,255,255,.34);padding-top:18px}
.case-hero__foot span:last-child{text-align:right}
/* FORGE and REFORM use logo presentation slides as cover art, so the wordmark
   is already the largest thing in the frame. Repeating it as an overlay title
   collided with the artwork and was unreadable against those light slides, and
   the hero decorations landed on the logo. On these two the artwork carries the
   name and the subtitle becomes the headline; the h1 stays in the DOM for
   assistive tech and search. */
.case-page--forge .case-hero__title,
.case-page--reform .case-hero__title{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.case-page--forge .case-hero__subtitle,
.case-page--reform .case-hero__subtitle{margin:0;max-width:640px;font-size:clamp(30px,4.4vw,62px);line-height:1.06;font-weight:700}
.case-page--forge .case-hero-decor,
.case-page--reform .case-hero-decor{display:none}
.case-index{position:sticky;top:var(--site-header-h,75px);z-index:12;margin-top:28px;background:color-mix(in srgb,var(--case-bg) 88%,transparent);border-top:1px solid var(--case-line);border-bottom:1px solid var(--case-line);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.case-index__inner{display:flex;gap:8px;overflow-x:auto;padding-top:12px;padding-bottom:12px;scrollbar-width:none}
.case-index__inner::-webkit-scrollbar,.case-rail::-webkit-scrollbar{display:none}
.case-index a{flex:none;border:1px solid var(--case-line);border-radius:999px;padding:9px 13px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.case-index a{transition:background .22s ease,border-color .22s ease,color .22s ease}
.case-index a:hover,.case-index a.is-active{background:var(--case-accent);border-color:var(--case-accent);color:var(--accent-ink,#111)}
.case-intro{display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(34px,6vw,84px);padding-top:clamp(44px,4.8vw,68px);padding-bottom:clamp(44px,4.8vw,66px);align-items:start}
.case-intro h2{margin:0;font-size:clamp(30px,3.9vw,56px);line-height:1.06;letter-spacing:-.042em}
.case-intro p{margin:0;color:var(--case-muted);font-size:clamp(17px,1.7vw,22px);line-height:1.7}
.case-facts{grid-column:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:0}
.case-fact{border-top:1px solid var(--case-line);padding-top:16px}
.case-fact b{display:block;margin-top:9px;font-size:13px;line-height:1.5}
.case-chapter{scroll-margin-top:140px;border-top:1px solid var(--case-line);padding-top:clamp(40px,4.6vw,64px);padding-bottom:clamp(42px,4.8vw,68px)}
.case-chapter__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(270px,440px);gap:clamp(26px,5vw,68px);align-items:end;margin-bottom:clamp(20px,2.6vw,36px)}
.case-chapter__head h2{margin:10px 0 0;font-size:clamp(27px,3.3vw,46px);line-height:1.1;letter-spacing:-.038em}
.case-chapter__head p{margin:0;color:var(--case-muted);font-size:15px;line-height:1.7}
.case-chapter__number{color:var(--case-accent)}
.case-feature{position:relative;border-radius:var(--case-radius);overflow:hidden;background:var(--case-panel);border:1px solid var(--case-line)}
.case-feature img{width:100%;height:auto}
.case-feature__caption{display:flex;justify-content:space-between;gap:20px;padding:15px 18px;color:var(--case-muted);border-top:1px solid var(--case-line)}
.case-rail-wrap{position:relative}
.case-rail__bar{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:15px;color:var(--case-muted)}
.case-rail__bar>div{display:flex;gap:8px}
.case-rail__bar button{width:44px;height:44px;border:1px solid var(--case-line);border-radius:50%;background:transparent;color:var(--case-ink);font:600 17px/1 Archivo,Helvetica,sans-serif;cursor:pointer;transition:.2s ease}
.case-rail__bar button:hover:not(:disabled){background:var(--case-accent);border-color:var(--case-accent);color:var(--accent-ink,#111)}
.case-rail__bar button:disabled{opacity:.25;cursor:default}
.case-rail{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:1px;overscroll-behavior-inline:contain;scrollbar-width:none;padding:0 0 10px;cursor:grab}
.case-rail.is-dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
.case-shot{flex:0 0 min(78vw,880px);scroll-snap-align:start;scroll-snap-stop:always;border-radius:20px;overflow:hidden;background:var(--case-panel);border:1px solid var(--case-line)}
.case-shot img{width:100%;height:auto;object-fit:var(--shot-fit,contain);object-position:var(--shot-position,center)}
.case-rail .case-shot{height:min(51vw,620px);display:grid;grid-template-rows:minmax(0,1fr) auto}
.case-rail .case-shot img{height:100%;min-height:0}
.case-shot figcaption{display:flex;justify-content:space-between;gap:18px;margin:0;padding:14px 16px;color:var(--case-muted);border-top:1px solid var(--case-line)}
.case-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.case-duo .case-shot{width:auto;min-width:0}
.case-duo .case-shot img{width:100%;height:100%;object-fit:cover}
.case-duo .case-shot{display:grid;grid-template-rows:1fr auto}
.case-triptych{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.case-triptych .case-shot{width:auto;min-width:0}
.case-triptych .case-shot img{width:100%;height:100%;object-fit:cover}
.case-triptych .case-shot{display:grid;grid-template-rows:1fr auto}
.case-crops{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.case-crop{min-height:clamp(360px,48vw,650px);border-radius:20px;background-image:var(--crop-image);background-size:300% 100%;background-repeat:no-repeat;border:1px solid var(--case-line)}
.case-crop:nth-child(1){background-position:left center}.case-crop:nth-child(2){background-position:center center}.case-crop:nth-child(3){background-position:right center}
.case-statement{position:relative;min-height:clamp(360px,54vw,650px);border-radius:var(--case-radius);padding:clamp(30px,6vw,74px);background:var(--case-accent);color:var(--accent-ink,#111);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.case-statement strong{font-size:clamp(58px,11vw,160px);line-height:.78;letter-spacing:-.075em;text-transform:uppercase}
.case-statement small{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase}
.case-motion-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px}
.case-video{grid-column:span 6;margin:0;border:1px solid var(--case-line);border-radius:20px;overflow:hidden;background:var(--case-panel)}
.case-video.span-4{grid-column:span 4}.case-video.span-8{grid-column:span 8}.case-video.span-12{grid-column:1/-1}
.case-video__frame{position:relative;overflow:hidden;background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--case-accent) 16%,#111),#111 62%);aspect-ratio:16/9}
.case-video__frame:before{content:"MOTION / PLAY";position:absolute;left:18px;bottom:16px;color:var(--case-muted);font:600 9px/1 "IBM Plex Mono",monospace;letter-spacing:.16em;z-index:0}
.case-video--portrait .case-video__frame{aspect-ratio:850/1200}
.case-video iframe,.case-video video{position:absolute;z-index:1;inset:0;width:100%;height:100%;border:0}
.case-video video{object-fit:cover;background:#05080d}
.case-video figcaption{display:flex;justify-content:space-between;gap:18px;padding:14px 16px;color:var(--case-muted);border-top:1px solid var(--case-line)}
.case-prototype{margin-top:clamp(34px,5vw,62px);border:1px solid var(--case-line);border-radius:var(--case-radius);overflow:hidden;background:var(--case-panel)}
.case-prototype__bar,.case-prototype__foot{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:18px clamp(18px,3vw,30px)}
.case-prototype__bar>div:first-child{display:grid;gap:7px}
.case-prototype__bar strong{font-size:clamp(18px,2vw,26px);letter-spacing:-.03em}
.case-prototype__tabs{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.case-prototype__tabs button{border:1px solid var(--case-line);border-radius:999px;padding:10px 14px;background:transparent;color:var(--case-ink);font:700 10px/1 Archivo,Helvetica,sans-serif;letter-spacing:.07em;text-transform:uppercase;cursor:pointer;transition:.2s ease}
.case-prototype__tabs button:hover,.case-prototype__tabs button[aria-selected="true"]{background:var(--case-accent);border-color:var(--case-accent);color:var(--accent-ink,#111)}
.case-prototype__launch{min-height:230px;border-top:1px solid var(--case-line);display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(22px,4vw,52px);padding:clamp(24px,4vw,48px);background:radial-gradient(circle at 13% 50%,color-mix(in srgb,var(--case-accent) 22%,var(--case-panel)),var(--case-panel) 48%);transition:background .25s ease}
.case-prototype__launch:hover{background:radial-gradient(circle at 13% 50%,color-mix(in srgb,var(--case-accent) 34%,var(--case-panel)),var(--case-panel) 52%)}
.case-prototype__glyph{width:clamp(78px,9vw,124px);aspect-ratio:1;border-radius:24px;display:grid;place-items:center;background:var(--case-accent);color:var(--accent-ink,#111);font-size:clamp(44px,6vw,78px);font-weight:900;box-shadow:0 18px 50px color-mix(in srgb,var(--case-accent) 24%,transparent)}
.case-prototype__launch>span:nth-child(2){display:grid;gap:10px}
.case-prototype__launch>span:nth-child(2) strong{font-size:clamp(27px,4vw,54px);line-height:.9;letter-spacing:-.05em}
.case-prototype__launch>b{font-size:13px;border-bottom:1px solid currentColor;padding-bottom:5px}
.case-prototype__frame{position:relative;aspect-ratio:16/9;background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--case-accent) 14%,#111),#111 64%);border-top:1px solid var(--case-line);border-bottom:1px solid var(--case-line)}
.case-prototype__frame:before{content:"INTERACTIVE PREVIEW";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:var(--case-muted);font:600 9px/1 "IBM Plex Mono",monospace;letter-spacing:.17em}
.case-prototype__frame iframe{position:absolute;z-index:1;inset:0;width:100%;height:100%;border:0;background:transparent}
.case-prototype__frame--figma{min-height:clamp(540px,66vw,860px);aspect-ratio:16/10;background:linear-gradient(135deg,color-mix(in srgb,var(--case-accent) 11%,var(--case-panel)),var(--case-panel))}
.case-prototype__frame--figma iframe{background:#f5f5f5}
/* Mobile viewport mode: the stage drops its wide aspect ratio and hosts the
   prototype in a centred phone-sized column instead of letterboxing it. */
.case-prototype__frame.is-mobile{aspect-ratio:auto;min-height:clamp(560px,74vw,840px);display:grid;place-items:center;padding:clamp(16px,3vw,34px)}
.case-prototype__frame.is-mobile:before{top:34px;transform:translate(-50%,0)}
.case-prototype__frame.is-mobile iframe{position:relative;inset:auto;width:min(100%,392px);height:min(100%,780px);border-radius:26px;box-shadow:0 26px 64px rgba(0,0,0,.42)}
.case-prototype__native{position:relative;min-height:clamp(520px,58vw,780px);aspect-ratio:16/9;overflow:hidden;border-top:1px solid var(--case-line);border-bottom:1px solid var(--case-line);background:var(--case-panel)}
.case-prototype__native-view{position:absolute;inset:0;display:none;overflow:hidden;color:#fff;animation:case-rise .45s cubic-bezier(.2,.7,.2,1) both}
.case-prototype__native-view.is-active{display:block}
.case-prototype__native-view img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .35s ease}
.case-prototype__native-view:hover img{transform:scale(1.025);filter:saturate(1.08)}
.case-prototype__native-wash{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.02) 26%,rgba(0,0,0,.82) 100%),linear-gradient(90deg,rgba(0,0,0,.34),transparent 48%)}
.case-prototype__native-copy{position:absolute;z-index:1;left:clamp(24px,4vw,54px);right:clamp(84px,9vw,132px);bottom:clamp(25px,4vw,50px);display:grid;gap:11px;align-items:start}
.case-prototype__native-copy strong{font-size:clamp(40px,7vw,96px);line-height:.82;letter-spacing:-.065em;text-transform:uppercase}
.case-prototype__native-copy>span{max-width:580px;font-size:clamp(14px,1.45vw,19px);line-height:1.5;color:rgba(255,255,255,.8)}
.case-prototype__native-arrow{position:absolute;z-index:1;right:clamp(22px,3vw,42px);top:clamp(22px,3vw,42px);width:clamp(52px,6vw,76px);aspect-ratio:1;display:grid;place-items:center;border:1px solid rgba(255,255,255,.55);border-radius:50%;font-size:clamp(20px,3vw,34px);transition:.25s ease}
.case-prototype__native-view:hover .case-prototype__native-arrow{background:var(--case-accent);border-color:var(--case-accent);color:var(--accent-ink,#111);transform:rotate(45deg)}
.case-prototype__foot{color:var(--case-muted)}
.case-prototype__foot b{color:var(--case-ink)}
.case-prototype__foot a{flex:none;color:var(--case-ink);font-size:13px;font-weight:700;border-bottom:1px solid currentColor;padding-bottom:4px}
.case-prototype__foot a:hover{color:var(--case-accent)}
.case-note{border-top:1px solid var(--case-line);padding-top:clamp(44px,5vw,70px);padding-bottom:clamp(44px,5vw,70px);display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,6vw,78px)}
.case-note h2{margin:10px 0 0;font-size:clamp(26px,3.1vw,42px);line-height:1.1;letter-spacing:-.036em}
.case-note p{margin:0;color:var(--case-muted);font-size:clamp(16px,1.55vw,20px);line-height:1.75}
.case-note__body{display:flex;flex-direction:column;align-items:flex-start;gap:28px}
.case-source-link{display:inline-flex;align-items:center;gap:8px;padding-bottom:5px;border-bottom:1px solid currentColor;color:var(--case-ink);font-size:13px;font-weight:700}
.case-source-link:hover{color:var(--case-accent)}
.case-next{border-top:1px solid var(--case-line)}
.case-next a{display:flex;justify-content:space-between;align-items:center;gap:28px;padding-top:48px;padding-bottom:48px}
.case-next h2{margin:10px 0 0;font-size:clamp(34px,5vw,64px);letter-spacing:-.055em}
.case-next__arrow{width:60px;height:60px;display:grid;place-items:center;border:1px solid var(--case-line);border-radius:50%;font-size:23px;transition:.25s ease}
.case-next a:hover .case-next__arrow{background:var(--case-accent);border-color:var(--case-accent);color:var(--accent-ink,#111);transform:translateX(6px)}
/* FORGE — compressed industrial product world */
.case-page--forge{background-color:#172022;background-image:linear-gradient(rgba(244,234,211,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(244,234,211,.035) 1px,transparent 1px);background-size:52px 52px}
.case-page--forge .case-hero{min-height:min(69vw,790px);border-radius:2px;border:1px solid #6e492f;clip-path:polygon(0 0,96% 0,100% 8%,100% 100%,0 100%)}
.case-page--forge .case-hero:before{content:"";position:absolute;z-index:1;inset:0 0 auto;height:38%;background:linear-gradient(180deg,#202b2d 56%,rgba(32,43,45,.78) 76%,transparent);pointer-events:none}
.case-page--forge .case-hero:after{background:linear-gradient(90deg,rgba(16,22,23,.94),rgba(16,22,23,.08) 66%),linear-gradient(180deg,transparent 50%,rgba(15,20,21,.72))}
.case-page--forge .case-hero__copy{inset:clamp(26px,4vw,54px);justify-content:flex-end;gap:34px}.case-page--forge .case-hero__top{position:absolute;left:0;right:0;top:0}.case-page--forge .case-hero__title{max-width:58%;font-size:clamp(86px,15vw,204px);line-height:.68;color:#f3e6cc}.case-page--forge .case-hero__subtitle{max-width:560px;color:#d6c4a7}.case-page--forge .case-hero__foot{border-color:rgba(244,234,211,.22)}
.forge-instrument{position:absolute;z-index:2;right:clamp(26px,5vw,72px);bottom:clamp(36px,7vw,92px);width:clamp(180px,26vw,350px);aspect-ratio:1;border:1px solid rgba(244,234,211,.5);border-radius:50%;display:grid;place-items:center;color:#f4ead3}.forge-instrument:before,.forge-instrument:after{content:"";position:absolute;background:rgba(244,234,211,.28)}.forge-instrument:before{width:1px;height:112%;left:50%}.forge-instrument:after{height:1px;width:112%;top:50%}.forge-instrument span{font-size:clamp(54px,8vw,102px);font-weight:900;letter-spacing:-.07em}.forge-instrument i{position:absolute;inset:12%;border:8px solid #b7662c;border-left-color:transparent;border-radius:50%;transform:rotate(-32deg)}.forge-instrument b{position:absolute;bottom:-32px;font:600 9px "IBM Plex Mono",monospace;letter-spacing:.14em}
.case-page--forge .case-index{background:rgba(23,32,34,.92);border-color:#4f3b2e}.case-page--forge .case-index a{border-radius:2px}.case-page--forge .case-intro{position:relative;border-left:10px solid #b7662c;padding-left:clamp(24px,5vw,60px)}.case-page--forge .case-chapter{position:relative}.case-page--forge .case-chapter:before{content:attr(data-chapter);position:absolute;right:clamp(20px,5vw,56px);top:30px;color:rgba(244,234,211,.045);font-size:clamp(130px,20vw,280px);line-height:.8;font-weight:900}.case-page--forge .case-feature,.case-page--forge .case-shot,.case-page--forge .case-video,.case-page--forge .case-prototype,.case-page--forge .case-statement{border-radius:2px;box-shadow:18px 18px 0 rgba(0,0,0,.12)}.case-page--forge .case-chapter__head h2{text-transform:uppercase;max-width:880px}.case-page--forge .case-statement{background:linear-gradient(135deg,#b7662c 0 56%,#202b2d 56%)}

/* REFORM — modular play system */
.case-page--reform{background-color:#f4f3ef;background-image:radial-gradient(circle at 1px 1px,rgba(8,117,245,.13) 1px,transparent 0);background-size:28px 28px}
.case-page--reform .case-hero{min-height:min(73vw,820px);border-radius:54px;background:#0875f5;border:10px solid #fff;box-shadow:0 28px 90px rgba(8,70,180,.23)}.case-page--reform .case-hero:after{background:linear-gradient(90deg,rgba(0,44,136,.8),transparent 64%),linear-gradient(180deg,transparent 52%,rgba(0,43,143,.62))}
.case-page--reform .case-hero__title{font-size:clamp(76px,15.5vw,220px);line-height:.68;text-shadow:none}.case-page--reform .case-hero__subtitle{max-width:630px}.case-page--reform .case-hero__top span{background:#fff;color:#0875f5;border:0}.reform-blocks{position:absolute;z-index:2;right:clamp(24px,4vw,52px);top:clamp(92px,14vw,176px);display:grid;grid-template-columns:repeat(2,clamp(76px,10vw,140px));gap:12px;transform:rotate(8deg)}.reform-blocks i{aspect-ratio:1;border-radius:28px;background:#ff6d28;color:#fff;display:grid;place-items:center;font-size:clamp(48px,7vw,92px);font-style:normal;font-weight:900;box-shadow:0 16px 30px rgba(0,0,0,.18)}.reform-blocks i:nth-child(2){background:#ffe43b;color:#0875f5;transform:translateY(40%)}.reform-blocks i:nth-child(3){background:#fff;color:#0875f5;grid-column:2}
.case-page--reform .case-index{background:rgba(244,243,239,.9);border-color:rgba(8,117,245,.2)}.case-page--reform .case-index a{background:#fff;border-color:#c8daf2;color:#0875f5}.case-page--reform .case-intro{border-left:10px solid #0875f5;padding-left:clamp(24px,5vw,60px)}.case-page--reform .case-chapter{border-top:1px solid #cbd8e6}.case-page--reform .case-feature,.case-page--reform .case-shot,.case-page--reform .case-video,.case-page--reform .case-prototype,.case-page--reform .case-statement{border-radius:18px}.case-page--reform .case-note{margin-top:8px;background:#0875f5;color:#fff;border:0;border-radius:20px;padding:clamp(38px,5vw,62px)}.case-page--reform .case-note p{color:#d8e9ff}.case-page--reform .case-source-link{color:#fff}

/* BREAKING RULES — torn editorial collage */
.case-page--breaking-rules{background-color:#101010;background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 4px)}
.case-page--breaking-rules .case-hero{min-height:min(77vw,850px);border-radius:0;transform:rotate(-.7deg);outline:12px solid #f1eadb;outline-offset:-12px;box-shadow:20px 22px 0 #e31b23}.case-page--breaking-rules .case-hero:after{background:linear-gradient(90deg,rgba(0,0,0,.76),transparent 66%),linear-gradient(180deg,transparent 45%,rgba(0,0,0,.88))}
.case-page--breaking-rules .case-hero__title{font-size:clamp(70px,13vw,185px);line-height:.73;max-width:880px;transform:rotate(-2deg);text-shadow:6px 6px 0 #e31b23}.case-page--breaking-rules .case-hero__subtitle{display:inline-block;width:max-content;max-width:80%;padding:10px 16px;background:#f1eadb;color:#111;transform:rotate(1.3deg);text-shadow:none}.breaking-tape{position:absolute;z-index:3;right:-50px;top:28%;padding:14px 80px;background:#e31b23;color:#fff;font:700 10px "IBM Plex Mono",monospace;letter-spacing:.18em;transform:rotate(9deg)}
.case-page--breaking-rules .case-index{background:rgba(16,16,16,.93)}.case-page--breaking-rules .case-index a{border-radius:0}.case-page--breaking-rules .case-intro{position:relative;margin-top:58px;background:#f1eadb;color:#111;padding:clamp(44px,7vw,86px);transform:rotate(.5deg)}.case-page--breaking-rules .case-intro p{color:#48413a}.case-page--breaking-rules .case-fact{border-color:#bbb1a4}.case-page--breaking-rules .case-chapter{position:relative;border:0;margin-block:70px;padding:clamp(46px,7vw,90px);background:#171717;box-shadow:-18px 18px 0 #e31b23}.case-page--breaking-rules .case-chapter[data-chapter="1"]{transform:rotate(-.45deg);background:#f1eadb;color:#101010}.case-page--breaking-rules .case-chapter[data-chapter="1"] .case-chapter__head p,.case-page--breaking-rules .case-chapter[data-chapter="1"] .case-shot figcaption{color:#5d554c}.case-page--breaking-rules .case-feature,.case-page--breaking-rules .case-shot{border-radius:0}.case-page--breaking-rules .case-feature img,.case-page--breaking-rules .case-shot img{filter:contrast(1.08)}.case-page--breaking-rules .case-statement{border-radius:0;background:#e31b23;color:#fff;transform:rotate(1deg)}.case-page--breaking-rules .case-note{border-top:8px solid #e31b23}

/* MELODY MAKER — contemporary music newspaper */
.case-page--melody-maker{background:#efe8db;color:#17120f;--mm-off:linear-gradient(90deg,transparent calc(50% - .5px),rgba(23,18,15,.045) 50%,transparent calc(50% + .5px))}
.case-page--melody-maker .case-hero{min-height:min(72vw,800px);border-radius:0;border:14px solid #f8f4ec;outline:1px solid #17120f;box-shadow:0 28px 60px rgba(73,42,27,.2)}.case-page--melody-maker .case-hero:after{background:linear-gradient(180deg,rgba(27,13,8,.05),rgba(27,13,8,.82))}
.case-page--melody-maker .case-hero__title{font-family:Georgia,serif;font-size:clamp(62px,12vw,168px);line-height:.78;letter-spacing:-.07em;text-transform:none}.case-page--melody-maker .case-hero__subtitle{font-family:Georgia,serif;font-style:italic}.melody-masthead{position:absolute;z-index:3;left:0;right:0;top:0;padding:15px 24px;background:#9e1719;color:#fff;display:flex;justify-content:space-between;gap:20px;font:700 10px "IBM Plex Mono",monospace;letter-spacing:.13em}
.case-page--melody-maker .case-index{background:rgba(239,232,219,.92);border-color:#9c8e7c}.case-page--melody-maker .case-index a{border-radius:0;border-color:#17120f}.case-page--melody-maker .case-intro{border-top:10px solid #9e1719;border-bottom:1px solid #17120f}.case-page--melody-maker .case-intro h2,.case-page--melody-maker .case-chapter h2,.case-page--melody-maker .case-note h2{font-family:Georgia,serif;font-weight:600;letter-spacing:-.05em}.case-page--melody-maker .case-intro p,.case-page--melody-maker .case-chapter__head p,.case-page--melody-maker .case-note p{font-family:Georgia,serif}.case-page--melody-maker .case-chapter{border-top:1px solid rgba(23,18,15,.22)}.case-page--melody-maker .case-chapter__head{grid-template-columns:1.15fr .85fr}.case-page--melody-maker .case-feature,.case-page--melody-maker .case-shot{border-radius:0;border:1px solid rgba(23,18,15,.28)}.case-page--melody-maker .case-rail{gap:28px}.case-page--melody-maker .case-statement{border-radius:0;background:#9e1719;color:#fff}.case-page--melody-maker .case-statement strong{font-family:Georgia,serif}.case-page--melody-maker .case-next{background:#17120f;color:#efe8db}
.case-page--melody-maker #breaking-rules{position:relative;margin-top:clamp(110px,15vw,210px);padding:clamp(54px,8vw,104px);border:0;background:#101010;color:#f1eadb;transform:rotate(-.35deg)}
.case-page--melody-maker #breaking-rules:before{content:"ACT II / BREAKING RULES — EXPERIMENTAL EDITION";display:inline-block;margin:0 0 clamp(40px,6vw,74px);padding:12px 16px;background:#e31b23;color:#fff;font:700 10px "IBM Plex Mono",monospace;letter-spacing:.16em;transform:rotate(1.4deg)}
.case-page--melody-maker #breaking-rules .case-chapter__head p,.case-page--melody-maker #breaking-principle .case-chapter__head p{color:#aaa49a}
.case-page--melody-maker #breaking-rules .case-feature{border:1px solid rgba(23,18,15,.28);outline:0}
.case-page--melody-maker #breaking-spreads{position:relative;margin-block:clamp(78px,10vw,132px);padding:clamp(52px,8vw,96px);border:0;background:#f1eadb;transform:rotate(.3deg)}
.case-page--melody-maker #breaking-spreads .case-shot{border:0;outline:1px solid #17120f}
.case-page--melody-maker #breaking-principle{padding:clamp(52px,8vw,96px);border:0;background:#101010;color:#f1eadb}
.case-page--melody-maker #breaking-principle .case-statement{background:#e31b23}

/* TOKYO 1964 — quiet Japanese modernism */
.case-page--tokyo-1964{background-color:#ded0b9;background-image:radial-gradient(circle at 84% 11%,rgba(185,35,32,.1) 0 12vw,transparent 12.2vw)}
.case-page--tokyo-1964 .case-hero{min-height:min(74vw,820px);border-radius:0;background:#eee3d1;border:1px solid #7e6f63}.case-page--tokyo-1964 .case-hero:after{background:linear-gradient(90deg,rgba(34,24,18,.2),transparent 58%),linear-gradient(180deg,transparent 50%,rgba(31,21,15,.76))}
.case-page--tokyo-1964 .case-hero__copy{inset:clamp(24px,4vw,52px)}.case-page--tokyo-1964 .case-hero__title{font-size:clamp(70px,12.2vw,166px);max-width:52%;line-height:.74}.case-page--tokyo-1964 .case-hero__subtitle{max-width:520px}.tokyo-sun{position:absolute;z-index:2;right:clamp(28px,7vw,100px);top:clamp(72px,10vw,130px);width:clamp(150px,22vw,300px);aspect-ratio:1}.tokyo-sun i{position:absolute;inset:0;border-radius:50%;background:#b92320;mix-blend-mode:multiply}.tokyo-sun span{position:absolute;inset:17%;display:grid;place-items:center;color:#eee3d1;font-size:clamp(22px,4vw,52px);line-height:1.05;text-align:center;font-weight:700;writing-mode:vertical-rl}
.case-page--tokyo-1964 .case-index{background:rgba(222,208,185,.92);border-color:#8d7c6c}.case-page--tokyo-1964 .case-index a{border-radius:0;border-color:#8d7c6c}.case-page--tokyo-1964 .case-intro{position:relative;padding-left:clamp(80px,12vw,180px)}.case-page--tokyo-1964 .case-intro:before{content:"●";position:absolute;left:clamp(20px,5vw,56px);top:clamp(70px,8vw,105px);color:#b92320;font-size:clamp(44px,7vw,92px)}.case-page--tokyo-1964 .case-chapter{border-top:1px solid #8d7c6c}.case-page--tokyo-1964 .case-chapter__number{color:#b92320;writing-mode:vertical-rl}.case-page--tokyo-1964 .case-feature,.case-page--tokyo-1964 .case-shot,.case-page--tokyo-1964 .case-statement{border-radius:0}.case-page--tokyo-1964 .case-statement{background:#b92320;color:#eee3d1}.case-page--tokyo-1964 .case-crop{border-radius:0}.case-page--tokyo-1964 .case-next{background:#b92320;color:#eee3d1}

/* SATRANÇ — board, silence, conflict */
.case-page--satranc{background-color:#bfc4c8;background-image:linear-gradient(45deg,rgba(17,17,17,.035) 25%,transparent 25%),linear-gradient(-45deg,rgba(17,17,17,.035) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(17,17,17,.035) 75%),linear-gradient(-45deg,transparent 75%,rgba(17,17,17,.035) 75%);background-size:80px 80px;background-position:0 0,0 40px,40px -40px,-40px 0}
.case-page--satranc .case-hero{min-height:min(72vw,800px);border-radius:0;border:12px solid #111;box-shadow:24px 24px 0 #e3e6e8}.case-page--satranc .case-hero:after{background:linear-gradient(90deg,rgba(0,0,0,.82),transparent 65%),linear-gradient(180deg,transparent 48%,rgba(0,0,0,.72))}
.case-page--satranc .case-hero__title{max-width:60%;font-size:clamp(68px,12vw,168px);line-height:.74}.case-page--satranc .case-hero__subtitle{max-width:550px}.chess-coordinates{position:absolute;z-index:3;left:0;right:0;bottom:0;height:42px;display:grid;grid-template-columns:repeat(8,1fr);background:#111;color:#fff}.chess-coordinates span{display:grid;place-items:center;font:700 10px "IBM Plex Mono",monospace}.chess-coordinates span:nth-child(even){background:#e3e6e8;color:#111}
.case-page--satranc .case-index{background:rgba(191,196,200,.92);border-color:#111}.case-page--satranc .case-index a{border-radius:0;border-color:#111}.case-page--satranc .case-intro{background:#e3e6e8;border:12px solid #111;margin-top:56px;padding:clamp(42px,7vw,82px)}.case-page--satranc .case-chapter{border-top:0;margin-block:42px;padding:clamp(48px,7vw,88px);background:#e3e6e8;border:1px solid #111}.case-page--satranc .case-chapter[data-chapter="1"],.case-page--satranc .case-chapter[data-chapter="3"]{background:#111;color:#e8ebed}.case-page--satranc .case-chapter[data-chapter="1"] .case-chapter__head p,.case-page--satranc .case-chapter[data-chapter="3"] .case-chapter__head p{color:#aeb4b8}.case-page--satranc .case-feature,.case-page--satranc .case-shot,.case-page--satranc .case-statement{border-radius:0;border:1px solid #111}.case-page--satranc .case-statement{background:repeating-conic-gradient(#111 0 25%,#e3e6e8 0 50%) 0/160px 160px;color:#fff;text-shadow:4px 4px 0 #111}.case-page--satranc .case-note{background:#111;color:#e8ebed;padding:clamp(48px,7vw,88px);margin-bottom:56px}.case-page--satranc .case-note p{color:#aeb4b8}.case-page--satranc .case-next{background:#e3e6e8;color:#111}
.case-page--forge-product .case-hero:after{background:linear-gradient(180deg,rgba(13,19,20,.02),rgba(13,19,20,.9))}
.case-page--arc-reactor-build .case-hero:after{background:linear-gradient(180deg,rgba(3,8,15,.02),rgba(3,8,15,.9))}
.case-motion-ready .case-reveal{opacity:0;transform:translateY(22px);transition:opacity .72s ease,transform .72s cubic-bezier(.2,.7,.2,1)}
.case-motion-ready .case-reveal.is-visible{opacity:1;transform:none}
@media(max-width:780px){
  .case-hero{min-height:620px;border-radius:18px}
  .case-hero__title{font-size:clamp(54px,20vw,100px)}
  .case-hero__top,.case-hero__foot{gap:14px}
  .case-hero__top{transform:translateY(-12px)}
  .case-intro,.case-chapter__head,.case-note{grid-template-columns:1fr}
  .case-facts{grid-column:auto;grid-template-columns:1fr}
  .case-duo,.case-triptych,.case-crops{grid-template-columns:1fr}
  .case-shot{flex-basis:88vw}
  .case-rail .case-shot{height:min(112vw,610px)}
  .case-duo .case-shot,.case-triptych .case-shot{display:block}
  .case-crop{min-height:420px;background-size:cover!important;background-position:center!important}
  .case-motion-grid{grid-template-columns:1fr}
  .case-video,.case-video.span-4,.case-video.span-8,.case-video.span-12{grid-column:1}
  .case-video--portrait{width:min(100%,520px);justify-self:center}
  .case-prototype__bar,.case-prototype__foot{align-items:flex-start;flex-direction:column}
  .case-prototype__tabs{justify-content:flex-start}
  .case-prototype__launch{grid-template-columns:auto 1fr;min-height:190px}
  .case-prototype__launch>b{grid-column:1/-1;width:max-content}
  .case-prototype__frame{height:min(72vh,680px);min-height:520px;aspect-ratio:auto}
  .case-prototype__native{min-height:520px;aspect-ratio:auto}
  .case-prototype__native-copy{right:28px}
  .case-prototype__foot .case-label{line-height:1.55}
  .case-page--forge .case-hero,.case-page--reform .case-hero,.case-page--breaking-rules .case-hero,.case-page--melody-maker .case-hero,.case-page--tokyo-1964 .case-hero,.case-page--satranc .case-hero{min-height:680px}
  .case-page--forge .case-hero__title,.case-page--satranc .case-hero__title,.case-page--tokyo-1964 .case-hero__title{max-width:100%}
  .forge-instrument{width:150px;right:24px;bottom:150px;opacity:.72}.forge-instrument b{display:none}
  .reform-blocks{right:18px;top:120px;grid-template-columns:72px 72px}.reform-blocks i{border-radius:18px;font-size:44px}
  .breaking-tape{right:-90px;top:22%}.melody-masthead span:last-child{display:none}
  .tokyo-sun{width:150px;right:22px;top:122px;opacity:.8}
  .case-page--reform .case-intro,.case-page--reform .case-chapter,.case-page--reform .case-note,.case-page--satranc .case-intro,.case-page--satranc .case-chapter,.case-page--satranc .case-note,.case-page--breaking-rules .case-intro,.case-page--breaking-rules .case-chapter{padding:42px 22px}
  .case-page--breaking-rules .case-chapter{box-shadow:-9px 9px 0 #e31b23}
  .case-page--melody-maker #breaking-rules,.case-page--melody-maker #breaking-spreads,.case-page--melody-maker #breaking-principle{padding:42px 22px}
  .case-page--melody-maker #breaking-rules{transform:none}
  .case-page--melody-maker #breaking-spreads{transform:none}
  .case-page--melody-maker #breaking-principle .case-statement{}
  .case-page--tokyo-1964 .case-intro{padding-left:78px}
}
@media(prefers-reduced-motion:reduce){
  .case-motion-ready .case-reveal{opacity:1;transform:none}
}

/* REFORM opens its rails out: this project is about pieces you can see, so the
   pieces are all on screen rather than one and a half of them with a drag hint. */
.case-page--reform .case-rail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,1.8vw,26px);overflow:visible;cursor:auto;scroll-snap-type:none;padding:0}
/* the frame that opens a group takes the full width, so the scroll lands on
   something before it lands on a pair */
.case-page--reform .case-rail .case-shot:first-child{grid-column:1/-1}
.case-page--reform .case-rail .case-shot:first-child>img{aspect-ratio:16/9}
.case-page--reform .case-rail .case-shot{flex:none;width:auto;min-width:0;height:auto;
  display:grid;grid-template-rows:1fr auto;scroll-snap-align:none}
.case-page--reform .case-rail .case-shot>img,.case-page--reform .case-rail .case-shot picture{
  aspect-ratio:4/3;height:auto;width:100%;object-fit:var(--shot-fit,contain);background:#f4f3ef}
.case-page--reform .case-rail__bar{display:none}
@media(max-width:620px){
  .case-page--reform .case-rail{grid-template-columns:1fr}
  .case-page--reform .case-rail .case-shot:first-child>img{aspect-ratio:4/5}
}

/* ACT II — Breaking Rules turns the magazine over. Ink ground where the
   magazine is cream, the sans where the magazine is Georgia, red as the only
   colour left. The inversion is the whole device; nothing else is added. */
.case-page--melody-maker #breaking-rules,
.case-page--melody-maker #breaking-spreads,
.case-page--melody-maker #breaking-principle{background:#131110;color:#efe8db;border-color:rgba(239,232,219,.16)}
.case-page--melody-maker #breaking-rules h2,
.case-page--melody-maker #breaking-rules h3,
.case-page--melody-maker #breaking-spreads h2,
.case-page--melody-maker #breaking-principle h2,
.case-page--melody-maker #breaking-principle .case-statement strong{
  font-family:Archivo,Helvetica,sans-serif;font-weight:800;letter-spacing:-.03em;text-transform:uppercase}
.case-page--melody-maker #breaking-rules p,
.case-page--melody-maker #breaking-spreads p,
.case-page--melody-maker #breaking-principle p{font-family:Archivo,Helvetica,sans-serif}
.case-page--melody-maker #breaking-rules:before{background:#e31b23;color:#fff;border:0}
.case-page--melody-maker #breaking-rules .case-label,
.case-page--melody-maker #breaking-spreads .case-label,
.case-page--melody-maker #breaking-principle .case-label{color:#e31b23}
.case-page--melody-maker #breaking-rules .case-feature,
.case-page--melody-maker #breaking-rules .case-shot,
.case-page--melody-maker #breaking-spreads .case-shot{border:1px solid rgba(239,232,219,.2);outline:0}
.case-page--melody-maker #breaking-rules .case-shot figcaption,
.case-page--melody-maker #breaking-spreads .case-shot figcaption{color:#9a938a;border-top-color:rgba(239,232,219,.16)}

.case-page--melody-maker{overflow-x:clip}
.case-page--melody-maker #spreads,.case-page--melody-maker #breaking-spreads{overflow-x:clip}

/* The magazine is flipped, not scrolled: spreads run edge to edge, one to a
   view, and snap. It is the one gesture a magazine has that a page does not. */
.case-page--melody-maker #spreads .case-rail-wrap,
.case-page--melody-maker #breaking-spreads .case-rail-wrap{
  width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.case-page--melody-maker #spreads .case-rail,
.case-page--melody-maker #breaking-spreads .case-rail{
  gap:0;padding:0;scroll-snap-type:x mandatory;scroll-padding:0}
.case-page--melody-maker #spreads .case-shot,
.case-page--melody-maker #breaking-spreads .case-shot{
  flex:0 0 100vw;width:100vw;height:min(76vh,760px);border:0;outline:0;border-radius:0;
  scroll-snap-align:center;background:#131110}
.case-page--melody-maker #spreads .case-shot>img,
.case-page--melody-maker #breaking-spreads .case-shot>img{
  width:100%;height:100%;object-fit:contain;background:#131110}
.case-page--melody-maker #spreads .case-shot figcaption,
.case-page--melody-maker #breaking-spreads .case-shot figcaption{
  position:absolute;left:0;right:0;bottom:0;border:0;background:linear-gradient(transparent,rgba(19,17,16,.86));
  color:#cfc7bb;pointer-events:none}
.case-page--melody-maker #spreads .case-rail__bar,
.case-page--melody-maker #breaking-spreads .case-rail__bar{
  max-width:1360px;margin-inline:auto;padding-inline:clamp(20px,5vw,56px)}