/* Case study pages: showcase panels on a dark page. Motion lives in case.js. */

body.case { background: var(--ink); }
.case .cs-hero { padding-bottom: 0; }
.cs-title { font-size: clamp(64px, 13vw, 230px); line-height: .82; margin-top: 18px; }
.cs-title .tw { display: inline-block; overflow: hidden; padding: .12em .04em .16em; margin: -.12em -.04em -.16em; vertical-align: top; }
.cs-title .tw > span { display: inline-block; will-change: transform; }

/* Cover: a framed scene that settles into place */
.case .cs-cover { max-width: 1280px; margin: 0 auto; padding: 0 16px; }
.case .cs-cover .par { border: 1.5px solid var(--ink); border-bottom: 0; border-radius: 28px 28px 0 0; overflow: hidden; aspect-ratio: 16 / 9; background: var(--ink); will-change: transform; }
.case .cs-cover img { border: 0; border-radius: 0; }

/* Parallax frames: the image is taller than its window and drifts inside it */
.par { position: relative; overflow: hidden; }
.par > img { width: 100%; height: 118%; object-fit: cover; display: block; will-change: transform; }
.cs-gallery .par { border-radius: 20px; border: 1.5px solid var(--ink); }
.cs-gallery .par > img { height: auto; min-height: 100%; }

/* Text sections on dark */
.case .cs-body { color: var(--cream); padding-top: 10vh; }
.case .cs-sec { border-top: 1px solid rgba(253,249,240,.16); }
.case .cs-sec:first-child { border-top: 0; }
.case .cs-sec h2 { color: var(--accent); font-family: var(--body); font-weight: 700; font-size: 14px; letter-spacing: .02em; }
.case .cs-sec h2 span { color: rgba(253,249,240,.45); font-weight: 500; }
.case .cs-text .lead { color: var(--cream); font-weight: 900; letter-spacing: -.035em; line-height: 1.02; font-size: clamp(30px, 3.8vw, 56px); }
.case .cs-text p, .case .cs-text li { color: rgba(253,249,240,.76); }
.case .cs-text li b, .case .cs-text p b { color: var(--cream); }
.case .cs-point { background: var(--ink-2); }
.case .cs-point b { color: var(--cream); }
.case .cs-point p { color: rgba(253,249,240,.72); }
.case .cs-gallery figcaption { color: rgba(253,249,240,.55); }
.case .cs-text .cs-note { color: rgba(253,249,240,.55); }
.case .cs-text a { color: var(--cream); }
.kw { display: inline-block; padding: 0 .18em; border-radius: .3em; background: var(--accent); color: var(--ink); }

/* ---------- panels ---------- */
.pn { max-width: 1280px; margin: 0 auto; padding: 0 16px 5vh; }
.pn-foot { display: flex; justify-content: space-between; gap: 16px; margin-top: 10px; font-size: 13px; color: #6d675d; }
.pn-foot span:nth-child(2) { flex: 1; text-align: center; }
.pn > :first-child { border-radius: 28px; border: 1.5px solid var(--ink); overflow: hidden; }

/* Statement: giant type over ruled lines */
.pn-statement { background: var(--pbg); color: var(--ink); padding: clamp(28px, 4vw, 64px) clamp(24px, 5vw, 80px); }
.st-line { display: block; overflow: hidden; border-bottom: 1.5px solid var(--ink); font-family: var(--display); font-weight: 900; letter-spacing: -.045em; line-height: .9; font-size: clamp(54px, 10.5vw, 196px); padding: .06em 0 .02em; }
.st-line:nth-child(even) { text-align: right; }
.st-line:last-child { border-bottom: 0; }
.st-line > span { display: inline-block; will-change: transform; }

/* Pill sentence */
.pn-pill { background: #fff; color: var(--ink); text-align: center; font-family: var(--display); font-weight: 800; letter-spacing: -.02em; line-height: 1.25; font-size: clamp(20px, 2.4vw, 36px); padding: clamp(22px, 3vw, 40px) clamp(24px, 5vw, 80px); border-radius: 999px !important; }

/* Devices */
.pn-device { position: relative; background: var(--pbg); padding: clamp(32px, 6vw, 96px) clamp(16px, 7vw, 120px) 0; display: flex; justify-content: center; min-height: 360px; }
.pn-device.over { padding-top: clamp(80px, 12vw, 180px); }
.pn-bgimg { position: absolute; inset: 0; }
.pn-bgimg::after { content: ""; position: absolute; inset: 0; background: rgba(20,20,20,.18); }
.float { position: relative; width: 100%; will-change: transform; display: flex; justify-content: center; }
.dev-browser { width: min(1060px, 100%); background: #fff; border: 1.5px solid var(--ink); border-bottom: 0; border-radius: 16px 16px 0 0; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.22); }
.dev-browser .bar { display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px; background: var(--cream); border-bottom: 1.5px solid var(--ink); }
.dev-browser .bar i { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--ink); }
.dev-browser .bar i:nth-child(1) { background: var(--orange); } .dev-browser .bar i:nth-child(2) { background: var(--yellow); } .dev-browser .bar i:nth-child(3) { background: var(--lime); }
.dev-browser .bar span { margin: 0 auto; padding: 4px 18px; border-radius: 999px; border: 1.5px solid var(--ink); font-size: 12px; background: #fff; transform: translateX(-24px); }
.dev-browser .screen img { width: 100%; display: block; }

.pn-phones { display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); gap: 16px; border: 0 !important; border-radius: 0 !important; overflow: visible !important; }
.pn-phones.n1 { --n: 1; } .pn-phones.n2 { --n: 2; } .pn-phones.n3 { --n: 3; }
.ph-card { background: var(--pbg); border: 1.5px solid var(--ink); border-radius: 28px; overflow: hidden; padding: 12% 14% 0; display: flex; align-items: flex-end; min-height: 420px; }
.pn-phones.n1 .ph-card { padding: 7% 30% 0; }
.dev-phone { width: 100%; max-width: 300px; margin: 0 auto; background: var(--ink); border-radius: 40px 40px 0 0; padding: 10px 10px 0; box-shadow: 0 24px 60px rgba(0,0,0,.25); }
.dev-phone .screen { position: relative; border-radius: 31px 31px 0 0; overflow: hidden; aspect-ratio: 9 / 16.5; background: #fff; }
.dev-phone .screen::before { content: ""; position: absolute; z-index: 1; top: 9px; left: 50%; width: 32%; height: 22px; border-radius: 999px; background: var(--ink); transform: translateX(-50%); }
.dev-phone .screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* Full-bleed and pairs */
.pn-full { aspect-ratio: 16 / 9; background: var(--ink); }
.pn-full.tall { aspect-ratio: 4 / 5; max-height: 92vh; margin: 0 auto; }
.pn-full .par { height: 100%; }
.pn-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; border: 0 !important; border-radius: 0 !important; overflow: visible !important; }
.pn-pair .pn-full { aspect-ratio: 4 / 5; border: 1.5px solid var(--ink); border-radius: 28px; overflow: hidden; }

/* Bento stats */
.pn-bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; border: 0 !important; border-radius: 0 !important; overflow: visible !important; }
.bn { background: var(--pbg); border: 1.5px solid var(--ink); border-radius: 24px; padding: 26px 24px 24px; min-height: 220px; display: flex; flex-direction: column; justify-content: space-between; color: var(--ink); }
.bn.dark { color: var(--cream); }
.bn b { font-family: var(--display); font-weight: 900; letter-spacing: -.05em; line-height: .9; font-size: clamp(48px, 5.6vw, 96px); }
.bn span { font-weight: 500; }

/* Palette and type */
.pn-palette { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; background: #fff; padding: 16px; }
.sw { aspect-ratio: 4 / 5; border-radius: 18px; border: 1.5px solid var(--ink); background: var(--sw); display: flex; flex-direction: column; justify-content: flex-end; padding: 10px; gap: 4px; }
.sw span, .sw code { align-self: flex-start; background: #fff; border: 1.5px solid var(--ink); border-radius: 999px; padding: 3px 10px; font-size: 12px; font-family: var(--body); }
.ty { aspect-ratio: 4 / 5; border-radius: 18px; border: 1.5px solid var(--ink); background: var(--cream); padding: 14px; display: flex; flex-direction: column; justify-content: space-between; }
.ty b { font-family: var(--display); font-weight: 900; font-size: clamp(56px, 6vw, 96px); letter-spacing: -.04em; line-height: .9; }
.ty span { font-weight: 700; } .ty small { color: #6d675d; }

/* Marquee */
.pn-marquee { background: var(--pbg); color: var(--ink); padding: 18px 0; }
.mq-track { display: flex; width: max-content; gap: 34px; align-items: center; font-family: var(--display); font-weight: 900; letter-spacing: -.04em; font-size: clamp(40px, 6.5vw, 112px); line-height: 1; white-space: nowrap; will-change: transform; }
.mq-track i { font-style: normal; font-size: .5em; }

/* Sticky "visit" pill */
.visit { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: inline-flex; align-items: center; gap: 12px; padding: 8px 8px 8px 20px; border-radius: 999px; background: var(--ink); color: var(--cream); font-weight: 500; font-size: 14px; border: 1.5px solid var(--ink); transition: border-radius .3s var(--n-out), transform .3s var(--n-out); }
.visit b { width: 34px; height: 34px; border-radius: 50%; background: var(--lime); color: var(--ink); display: grid; place-items: center; }
.visit:hover { border-radius: 12px; }

.case .cs-next-card { border: 1.5px solid var(--ink); }
.case footer { background: var(--ink); margin-top: 10vh; }

@media (max-width: 760px) {
  .pn-phones { grid-template-columns: 1fr; }
  .pn-phones .ph-card { min-height: 0; padding: 10% 18% 0; }
  .pn-bento { grid-template-columns: 1fr 1fr; }
  .pn-pair { grid-template-columns: 1fr; }
  .dev-browser .bar span { display: none; }
  .pn-foot span:nth-child(2) { display: none; }
}
.dev-browser .screen { max-height: min(74vh, 760px); overflow: hidden; }
.dev-browser .screen img { object-fit: cover; object-position: top; }

/* Video panels */
.pn-video { background: var(--pbg); aspect-ratio: 4 / 3; max-height: 88vh; margin: 0 auto; }
.pn-video video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- dark page, no outlines around photos, panels or devices ---------- */
.case .cs-cover .par, .cs-gallery .par, .pn > :first-child, .ph-card, .pn-pair .pn-full, .bn,
.dev-browser, .dev-browser .bar, .dev-browser .bar span, .dev-browser .bar i, .case .cs-next-card, .pn-pill { border: 0 !important; }
.dev-browser .bar { background: #f2eee6; }
.dev-browser .bar span { background: #fff; }
.pn-foot { color: rgba(253,249,240,.5); }
.pn-palette { background: var(--ink-2); }
.sw { border: 1px solid rgba(253,249,240,.14); }
.sw span, .sw code { border: 0; }
.ty { border: 0; background: var(--cream); color: var(--ink); }
.bn.dark { background: var(--ink-2) !important; }
.case footer { margin-top: 6vh; border-top: 1px solid rgba(253,249,240,.12); }

/* ---------- collection pages (branding, side projects): several projects on one page ---------- */
.collection .col-hero { padding-bottom: 72px; }
.col-index { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.col-index a { display: inline-flex; gap: 8px; align-items: baseline; padding: 9px 16px; border-radius: 999px; border: 1.5px solid var(--ink); font-size: 15px; font-weight: 500; transition: background .3s, color .3s, border-radius .3s var(--n-out); }
.col-index a span { font-size: 11px; font-weight: 700; }
.col-index a:hover { background: var(--ink); color: var(--accent); border-radius: 10px; }
.col-proj { padding-top: 18vh; scroll-margin-top: 0; }
.col-proj + .col-proj { border-top: 1px solid rgba(253,249,240,.08); margin-top: 10vh; }
.col-head { max-width: 1280px; margin: 0 auto 7vh; padding: 0 16px; color: var(--cream); }
.col-head > small { display: inline-block; color: var(--ink); background: var(--accent); padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.col-head h2 { font-size: clamp(56px, 9vw, 150px); margin: 18px 0 22px; }
.col-head .cs-tagline { color: rgba(253,249,240,.82); margin-bottom: 40px; }
.col-head .cs-meta { border-top: 1px solid rgba(253,249,240,.2); }
.col-head .cs-meta a { border-bottom-color: var(--cream); }
.col-proj .cs-cover .par { border: 0; border-radius: 28px; }
.col-proj .cs-body { padding-top: 6vh; }