.case-page { --case-bg: #f4d53f; --case-fg: #11100e; --case-accent: #ff5b38; background: #f3f0e8; }
.case-header { height: 88px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 3.5vw; border-bottom: 1px solid var(--line); }
.back-link { font: 500 .7rem var(--mono); text-transform: uppercase; text-underline-offset: .3rem; }
.case-hero { padding: clamp(4rem,8vw,8rem) 3.5vw 3rem; display: grid; grid-template-columns: 1fr 3fr; min-height: 73vh; background: var(--case-bg); color: var(--case-fg); transition: background .3s; }
.case-index { font: .7rem var(--mono); }
.case-heading h1 { margin: .5rem 0 1.5rem; max-width: 1100px; font: 800 clamp(4.5rem,11vw,11rem)/.78 var(--display); letter-spacing: -.09em; overflow-wrap: anywhere; }
.case-heading > p { max-width: 730px; font-size: clamp(1.05rem,1.7vw,1.45rem); line-height: 1.55; }
.case-meta { grid-column: 2; align-self: end; display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; margin: 5rem 0 0; padding-top: 1.2rem; border-top: 1px solid currentColor; }
.case-meta dt { margin-bottom: .5rem; font: .6rem var(--mono); text-transform: uppercase; opacity: .55; }.case-meta dd { margin: 0; font-size: .8rem; line-height: 1.5; }
.case-canvas { min-height: min(75vw,900px); position: relative; overflow: hidden; background: var(--case-fg); color: var(--case-bg); }
.brand-board { position:absolute;inset:7%;display:grid;grid-template-columns:1.15fr .85fr;gap:2rem;align-items:center }
.brand-logo-panel { height:78%;display:grid;place-items:center;padding:7%;background:#f7f3e9;box-shadow:20px 20px 0 var(--case-accent);transform:rotate(-2deg) }
.brand-logo-panel img { width:92%;max-height:70% }.brand-assets{height:78%;display:grid;grid-template-rows:1fr 1fr;gap:1.5rem}.brand-card{position:relative;overflow:hidden;padding:2rem;border:3px solid;background:var(--case-bg);color:var(--case-fg)}.brand-card:last-child{background:var(--case-accent)}.brand-card strong{font:800 clamp(2rem,5vw,5rem)/.85 var(--display);letter-spacing:-.07em}.brand-card small{position:absolute;bottom:1.2rem;left:2rem;font:.6rem var(--mono)}
.canvas-word { position: absolute; inset: 0; display: grid; place-items: center; font: 800 clamp(5rem,18vw,18rem)/.8 var(--display); letter-spacing: -.1em; transform: rotate(-4deg); }
.canvas-badge { position: absolute; z-index: 3; padding: 1rem 1.3rem; border: 3px solid currentColor; background: var(--case-accent); color: var(--case-fg); font: 700 clamp(1rem,2vw,2rem) var(--display); box-shadow: 8px 8px 0 currentColor; }
.canvas-badge.one { top: 12%; left: 8%; transform: rotate(-7deg); }.canvas-badge.two { right: 7%; bottom: 12%; transform: rotate(6deg); }
.canvas-object { position: absolute; z-index: 2; left: 50%; top: 50%; width: 28%; height: 48%; transform: translate(-50%,-50%) rotate(7deg); border: 6px solid currentColor; border-radius: 18px; background: #f3f0e8; color: #11100e; box-shadow: 20px 20px 0 var(--case-accent); display: grid; place-items: center; text-align: center; padding: 2rem; font: 800 clamp(2rem,5vw,5rem)/.85 var(--display); }
.case-pad { padding: clamp(6rem,10vw,10rem) 7vw; }
.case-story { display: grid; grid-template-columns: 1fr 3fr; gap: 3vw; }
.story-label { display: flex; gap: 1rem; align-items: flex-start; font: .65rem var(--mono); text-transform: uppercase; }.story-label span:first-child { opacity: .45; }
.story-copy h2 { max-width: 1000px; margin: 0 0 2.5rem; font: 700 clamp(2.6rem,5.8vw,6rem)/.95 var(--display); letter-spacing: -.06em; }
.story-copy p { max-width: 760px; margin: 0; font-size: clamp(1rem,1.35vw,1.25rem); line-height: 1.75; }
.design-system { background: var(--case-fg); color: var(--case-bg); }
.system-intro { display: grid; grid-template-columns: 1fr 3fr; gap: 3vw; }.system-intro > p { max-width: 850px; margin: 0; font-size: clamp(1.3rem,2.5vw,2.3rem); line-height: 1.4; }
.palette { display: grid; grid-template-columns: repeat(4,1fr); min-height: 260px; margin-top: 6rem; border: 1px solid currentColor; }.swatch { padding: 1rem; display: flex; align-items: flex-end; font: .6rem var(--mono); border-right: 1px solid currentColor; }.swatch:last-child { border: 0; }
.type-specimen { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid currentColor; overflow: hidden; }.type-specimen strong { display: block; white-space: nowrap; font: 800 clamp(5rem,14vw,14rem)/.8 var(--display); letter-spacing: -.09em; }.type-specimen p { max-width: 500px; font: .7rem/1.7 var(--mono); }
.reference-section{background:#f3f0e8}.reference-note{max-width:620px;margin:1.5rem 0 3rem;line-height:1.6}.reference-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:1rem}.reference-image{margin:0;min-height:420px;background:#ddd;overflow:hidden}.reference-image:first-child{grid-row:span 2}.reference-image img{width:100%;height:100%;display:block;object-fit:cover}.reference-image figcaption{position:absolute;width:1px;height:1px;overflow:hidden}
.provided-gallery{padding-top:2rem;background:#f3f0e8}.provided-gallery>.story-label{margin-bottom:3rem}.provided-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem}.provided-image{margin:0;background:#ddd;overflow:hidden}.provided-image:nth-child(3n+1){grid-column:1/-1}.provided-image img{display:block;width:100%;height:auto;min-height:360px;object-fit:cover}.provided-image figcaption{padding:.65rem 0;font:.58rem var(--mono);text-transform:uppercase}
.applications > .story-label { margin-bottom: 3rem; }.application-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 1.5rem; }.application { min-height: 520px; position: relative; overflow: hidden; background: var(--case-bg); color: var(--case-fg); }.application:nth-child(3) { grid-column: 1/-1; min-height: 620px; }
.app-poster { position: absolute; width: 57%; height: 75%; left: 21%; top: 12%; padding: 2rem; border: 3px solid currentColor; background: #f3f0e8; color: #11100e; transform: rotate(-4deg); box-shadow: 14px 14px 0 var(--case-accent); display: flex; flex-direction: column; justify-content: space-between; }.app-poster strong { font: 800 clamp(3rem,7vw,7rem)/.8 var(--display); letter-spacing: -.08em; }.app-poster small { font: .65rem var(--mono); }
.app-device { width: 44%; min-width: 230px; height: 82%; position: absolute; top: 9%; left: 28%; border: 7px solid #111; border-radius: 32px; background: #f8f5ee; color: #111; overflow: hidden; box-shadow: 16px 18px 0 var(--case-accent); }.device-top { height: 16%; padding: 1.3rem; font: 700 1.2rem var(--display); }.device-content { height: 84%; padding: 1.4rem; background: var(--case-bg); display: flex; flex-direction: column; justify-content: center; }.device-content strong { font: 800 clamp(2rem,4vw,4rem)/.9 var(--display); }.device-content button { width: max-content; margin-top: 2rem; border: 2px solid currentColor; background: var(--case-accent); padding: .7rem 1rem; font: .65rem var(--mono); }
.app-sign { position: absolute; inset: 13% 8%; background: var(--case-fg); color: var(--case-bg); display: grid; place-items: center; text-align: center; font: 800 clamp(4rem,12vw,12rem)/.75 var(--display); letter-spacing: -.08em; box-shadow: 20px 20px 0 var(--case-accent); transform: rotate(1.5deg); }.app-sign span { position: absolute; bottom: 1.5rem; font: .65rem var(--mono); letter-spacing: .15em; }
.application.full{grid-column:1/-1}.ui-browser{position:absolute;inset:6%;border:5px solid #111;border-radius:12px;background:#f8f5ed;color:#111;overflow:hidden;box-shadow:16px 18px 0 var(--case-accent)}.browser-bar{height:40px;display:flex;align-items:center;gap:7px;padding:0 14px;border-bottom:2px solid}.browser-bar i{width:9px;height:9px;border-radius:50%;background:var(--case-accent)}.browser-bar span{margin-left:10px;font:.5rem var(--mono)}.shop-nav{height:65px;padding:0 3%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ccc;font:.55rem var(--mono)}.shop-nav img{width:110px;height:50px;object-fit:contain}.shop-hero{height:calc(100% - 105px);display:grid;grid-template-columns:1fr 1fr}.shop-copy{padding:7%;display:flex;flex-direction:column;justify-content:center}.shop-copy h3,.cafe-web h3{margin:.7rem 0;font:800 clamp(2.3rem,5vw,5rem)/.82 var(--display);letter-spacing:-.08em}.shop-copy p,.cafe-web p{font-size:.68rem;line-height:1.5}.ui-button{display:inline-block;width:max-content;padding:.65rem .9rem;margin-top:1rem;border:2px solid;background:var(--case-accent);font:600 .53rem var(--mono)}.shop-product{display:grid;place-items:center;background:var(--case-bg);position:relative}.product-box{padding:15% 8%;border:5px solid;border-radius:12px 12px 28px 28px;background:#fff;text-align:center;font:800 clamp(1.4rem,3vw,3rem)/.9 var(--display);transform:rotate(6deg);box-shadow:10px 10px 0 var(--case-accent)}.price-pill{position:absolute;right:8%;top:8%;padding:.6rem;border-radius:50%;background:#111;color:#fff;font:.55rem var(--mono)}
.mobile-screen{position:absolute;width:52%;height:86%;top:7%;left:24%;border:7px solid #111;border-radius:35px;background:#f8f5ed;color:#111;overflow:hidden;box-shadow:15px 18px 0 var(--case-accent)}.phone-status{height:30px;padding:8px 16px;display:flex;justify-content:space-between;font:.48rem var(--mono)}.mobile-nav{height:55px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ccc}.mobile-nav img{width:82px;height:42px;object-fit:contain}.mobile-body{height:calc(100% - 85px);padding:18px}.mobile-body h4{margin:.7rem 0;font:800 clamp(1.5rem,4vw,3.2rem)/.9 var(--display);letter-spacing:-.06em}.mobile-body p{font-size:.62rem}.mobile-art{height:37%;margin-top:1rem;display:grid;place-items:center;background:var(--case-bg);border-radius:12px;font:800 2.5rem var(--display)}
.ig-profile{position:absolute;inset:7%;padding:4%;border:5px solid #111;background:#f8f5ed;color:#111;box-shadow:16px 18px 0 var(--case-accent);font-size:.65rem}.ig-head{display:grid;grid-template-columns:75px 1fr;gap:1rem;align-items:center}.ig-avatar{width:70px;height:70px;display:grid;place-items:center;border-radius:50%;background:var(--case-bg);font:800 1.8rem var(--display)}.ig-stats{display:flex;justify-content:space-around;text-align:center}.ig-stats b{display:block;font-size:.9rem}.ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.ig-grid div{aspect-ratio:1;display:grid;place-items:center;padding:7%;text-align:center;background:var(--case-bg);font:700 clamp(.55rem,1.25vw,1.1rem)/1 var(--display)}.ig-grid div:nth-child(2n){background:var(--case-accent)}.ig-grid div:nth-child(3n){background:#304cdb;color:#fff}
.cafe-web{height:calc(100% - 105px);display:grid;grid-template-columns:1fr 1fr}.cafe-web>div{padding:7%;display:flex;flex-direction:column;justify-content:center}.menu-list{border-left:2px solid #b83c27}.menu-list p{padding:1rem 0;border-bottom:1px solid;display:flex;justify-content:space-between}.order-flow{position:absolute;inset:6% 4%;display:grid;grid-template-columns:210px 1fr;border:5px solid #111;background:#f7f4ec;color:#111;box-shadow:16px 18px 0 var(--case-accent)}.order-flow aside{padding:1.5rem;background:#171717;color:#fff}.order-flow aside img{width:130px}.order-flow ol{list-style:none;padding:0;margin-top:2rem}.order-flow li{padding:1rem 0;border-bottom:1px solid #555;font:.62rem var(--mono)}.order-flow main{position:relative;padding:2rem}.order-flow h3{margin:.5rem 0;font:700 2rem var(--display)}.order-flow main>p{font-size:.7rem}.option-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem}.option-grid>div{padding:1rem;border:2px solid #bbb}.option-grid .selected{border:4px solid #00a4d6}.option-grid i{display:block;height:90px;margin-bottom:1rem;background:#ddd;box-shadow:5px 5px #aaa}.option-grid b,.option-grid small{display:block;font-size:.62rem}.order-flow footer{position:absolute;left:0;right:0;bottom:0;padding:1rem 2rem;background:#f2d52f;display:flex;justify-content:space-between;font:.62rem var(--mono)}
.story-page{position:absolute;inset:5%;border:5px solid #111;background:#f1acd1;color:#111;box-shadow:16px 18px 0 #f4d53f}.story-page nav{height:70px;padding:0 4%;display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid;font:.6rem var(--mono)}.story-page nav img{width:140px;height:55px}.story-page main{height:calc(100% - 70px);display:grid;grid-template-columns:.9fr 1.1fr}.story-page main>div{padding:7%;display:flex;flex-direction:column;justify-content:center}.story-page h3{margin:.7rem 0;font:800 clamp(2.8rem,6vw,6rem)/.82 var(--display);letter-spacing:-.07em}.story-page p{font-size:.7rem}.story-page section{position:relative;background:#304cdb}.story-page section i{position:absolute;width:42%;height:60%;display:grid;place-items:center;border:5px solid #111;font:normal 800 clamp(4rem,8vw,8rem) var(--display)}.story-page section i:first-child{left:8%;bottom:10%;border-radius:50%;background:#ff5b38;transform:rotate(-7deg)}.story-page section i:last-child{right:7%;top:10%;background:#f4d53f;transform:rotate(7deg)}
.case-notes { display: grid; grid-template-columns: 2fr 1fr; gap: 8vw; align-items: end; background: var(--case-accent); color: var(--case-fg); }.case-notes blockquote { margin: 0; font: 700 clamp(2.7rem,5.5vw,5.5rem)/.95 var(--display); letter-spacing: -.055em; }.case-notes p { line-height: 1.7; }
.next-project { padding: 4rem 3.5vw; background: #11100e; color: white; }.next-project > span { font: .65rem var(--mono); text-transform: uppercase; opacity: .5; }.next-project a { margin-top: 2rem; display: flex; justify-content: space-between; align-items: center; text-decoration: none; }.next-project strong { font: 700 clamp(3rem,8vw,8rem)/1 var(--display); letter-spacing: -.07em; }.next-project i { color: var(--case-accent); font: normal 4rem var(--display); transition: transform .2s; }.next-project a:hover i { transform: translate(8px,-8px); }

@media (max-width:760px) {
  .case-header { height: 70px; padding: 0 1.2rem; }.back-link { font-size: .58rem; }
  .case-hero { min-height: auto; padding: 3.5rem 1.2rem 2rem; display: block; }.case-index { margin-bottom: 4rem; }.case-heading h1 { font-size: 20vw; }.case-meta { display: grid; grid-template-columns: 1fr 1fr; margin-top: 4rem; }.case-meta div { min-height: 70px; }
  .case-canvas { min-height: 120vw; }.brand-board{inset:6%;grid-template-columns:1fr;grid-template-rows:1.2fr .8fr;gap:1rem}.brand-logo-panel{height:100%;padding:10%;box-shadow:10px 10px 0 var(--case-accent)}.brand-assets{height:100%;grid-template-columns:1fr 1fr;grid-template-rows:1fr;gap:.7rem}.brand-card{padding:1rem}.brand-card strong{font-size:1.35rem}.brand-card small{left:1rem;bottom:.7rem;font-size:.42rem}
  .case-pad { padding: 5rem 1.2rem; }.case-story, .system-intro { display: block; }.story-label { margin-bottom: 3rem; }.story-copy h2 { font-size: 2.8rem; }.system-intro > p { font-size: 1.25rem; }
  .palette { grid-template-columns: 1fr 1fr; min-height: 320px; margin-top: 4rem; }.swatch { min-height: 160px; border-bottom: 1px solid currentColor; }
  .reference-grid{display:block}.reference-image{min-height:70vw;margin-bottom:1rem}
  .provided-grid{display:block}.provided-image{margin-bottom:1rem}.provided-image img{min-height:0}.provided-image figcaption{font-size:.5rem}
  .application-grid { display: block; }.application { min-height: 110vw; margin-bottom: 1rem; }.application:nth-child(3) { min-height: 100vw; }.ui-browser{inset:3%;box-shadow:8px 9px 0 var(--case-accent)}.shop-nav{height:48px}.shop-nav img{width:72px}.shop-nav span{display:none}.shop-hero,.cafe-web{height:calc(100% - 88px);grid-template-columns:1fr}.shop-product,.menu-list{display:none}.shop-copy h3,.cafe-web h3{font-size:2.4rem}.mobile-screen{width:70%;left:15%;border-width:5px}.ig-profile{inset:3%;padding:3%;box-shadow:8px 9px 0 var(--case-accent)}.ig-head{grid-template-columns:50px 1fr}.ig-avatar{width:48px;height:48px}.ig-grid{gap:2px}.ig-grid div{font-size:.48rem}.order-flow{inset:3%;display:block;box-shadow:8px 9px 0 var(--case-accent)}.order-flow aside{height:65px;padding:.4rem 1rem}.order-flow aside img{width:80px;height:50px}.order-flow ol{display:none}.order-flow main{padding:1rem}.order-flow h3{font-size:1.4rem}.option-grid{gap:.35rem;margin-top:1rem}.option-grid>div{padding:.4rem}.option-grid i{height:45px;margin-bottom:.5rem}.order-flow footer{padding:.6rem;font-size:.42rem}.story-page{inset:3%;box-shadow:8px 9px 0 #f4d53f}.story-page nav{height:52px}.story-page nav img{width:85px;height:42px}.story-page nav span{display:none}.story-page main{height:calc(100% - 52px);grid-template-columns:1fr;grid-template-rows:.8fr 1.2fr}.story-page main>div{padding:5%}.story-page h3{font-size:2.1rem}.story-page p{display:none}.story-page section i{font-size:3rem}.app-sign{font-size:20vw}
  .case-notes { display: block; }.case-notes blockquote { margin-bottom: 4rem; }.next-project { padding: 4rem 1.2rem; }.next-project i { font-size: 2rem; }
}