/* Project case file: one clean, predictable layout following Portfolio_series. */
#case-modal{opacity:0;transition:opacity .24s ease}#case-modal.open{opacity:1}#case-modal.is-closing{opacity:0;pointer-events:none}
#case-modal.open{z-index:10020;display:grid;place-items:center;grid-template-columns:minmax(0,1fr);padding:clamp(12px,2.2vw,30px);overflow:hidden;background:rgba(2,5,10,.88);backdrop-filter:blur(12px)}
#cm-box{position:relative;display:flex;width:min(1480px,calc(100vw - 56px));height:min(94dvh,1080px);max-width:none;max-height:none;min-height:0;flex-direction:column;overflow:hidden;border:1px solid #24354d;border-radius:22px;background:radial-gradient(560px circle at var(--case-pointer-x,50%) var(--case-pointer-y,10%),rgba(46,115,207,.105),transparent 72%),#080e17;box-shadow:0 34px 110px rgba(0,0,0,.72);transition:border-color .3s,box-shadow .3s,translate .22s cubic-bezier(.2,.8,.2,1),scale .22s cubic-bezier(.2,.8,.2,1),opacity .2s ease;animation:case-file-enter .5s cubic-bezier(.2,.8,.2,1)}
@keyframes case-file-enter{from{opacity:0;translate:0 16px;scale:.988}to{opacity:1;translate:0 0;scale:1}}
#cm-box.case-file-switching{animation:case-file-switch .34s cubic-bezier(.2,.8,.2,1)}
@keyframes case-file-switch{from{opacity:.6;translate:0 8px}to{opacity:1;translate:0 0}}
#case-modal.is-closing #cm-box{translate:0 16px;scale:.986;opacity:0}
#cm-box>div:first-child{position:relative;z-index:2;flex:none;padding:0;border:0;background:transparent}
.cm-hero{position:relative;display:flex;height:clamp(250px,36vh,365px);min-height:230px;max-height:none;flex:none;align-items:flex-end;overflow:hidden;border-bottom:1px solid rgba(118,155,203,.16);background:radial-gradient(ellipse at var(--case-hero-x,72%) var(--case-hero-y,28%),rgba(57,133,237,.26),transparent 50%),linear-gradient(130deg,#0d1a2b,#080e17 74%)}
.cm-hero>img{position:absolute;top:5%;right:3%;width:58%;height:90%;object-fit:contain;object-position:center;opacity:.94;mix-blend-mode:normal;filter:drop-shadow(0 18px 30px rgba(0,0,0,.4));transform:none;animation:none}
.cm-hero>img[hidden]{display:none}
#case-modal.open .cm-hero>img{animation:case-art-in .65s .04s cubic-bezier(.2,.8,.2,1) both}
@keyframes case-art-in{from{scale:1.045;opacity:0}to{scale:1;opacity:.94}}
.cm-hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,#080e17 0%,rgba(8,14,23,.94) 30%,rgba(8,14,23,.12) 78%),linear-gradient(0deg,rgba(4,8,14,.94),transparent 76%);pointer-events:none}
.cm-hero-caption{position:relative;z-index:1;display:flex;width:58%;flex-direction:column;gap:9px;padding:25px clamp(24px,5vw,60px)}
.cm-hero-caption>*{animation:case-caption-in .45s both cubic-bezier(.2,.8,.2,1)}
.cm-hero-caption>*:nth-child(1){animation-delay:.06s}.cm-hero-caption>*:nth-child(2){animation-delay:.13s}.cm-hero-caption>*:nth-child(3){animation-delay:.2s}
@keyframes case-caption-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.cm-hero-caption span{color:#78b5ff;font:700 .62rem/1.5 var(--font-mono,monospace);letter-spacing:.16em;text-transform:uppercase}
.cm-hero-caption strong{max-width:18ch;color:#f3f7ff;font:700 clamp(2.3rem,5.2vw,4.3rem)/.97 var(--font-body,Inter,sans-serif);letter-spacing:-.045em}
.cm-hero-caption small{color:#aabbd1;font:600 .6rem var(--font-mono,monospace);letter-spacing:.15em}
.cm-close{position:absolute;top:16px;right:16px;z-index:4;display:grid;width:42px;height:42px;place-items:center;border:1px solid rgba(219,234,253,.3);border-radius:50%;background:rgba(2,6,12,.8);color:#eaf2fd;cursor:pointer;backdrop-filter:blur(8px);transition:transform .25s,border-color .25s,background .25s}
.cm-close:hover{transform:rotate(90deg);border-color:#70adff;background:#101d30}
#cm-body{flex:1;min-height:0;padding:clamp(24px,4vw,48px) clamp(24px,6.2vw,78px);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-color:#31435c #080e17;scrollbar-width:thin}
#cm-body::-webkit-scrollbar{width:8px}#cm-body::-webkit-scrollbar-thumb{border:2px solid #080e17;border-radius:8px;background:#31435c}
.case-reader-summary{margin:0 0 25px;padding:15px 18px;border:1px solid rgba(90,153,231,.24);border-left:3px solid #539bfa;border-radius:0 8px 8px 0;background:linear-gradient(110deg,rgba(18,38,63,.72),rgba(8,14,23,.9))}
.case-reader-summary small,.case-story small,.case-impact-heading small,.case-gallery>header small,.case-recommendations>small{color:#70adff;font:700 .6rem/1.5 var(--font-mono,monospace);letter-spacing:.19em;text-transform:uppercase}
.case-reader-summary p{margin:7px 0 0;color:#e2ebf7;font-size:.9rem;line-height:1.7}
.case-story{display:grid;gap:20px;margin:0}
.case-project-meta{display:flex;align-items:center;gap:10px;color:#9aabc1;font:700 .63rem var(--font-mono,monospace);letter-spacing:.14em;text-transform:uppercase}
.case-project-meta i{width:4px;height:4px;border-radius:50%;background:#70adff;box-shadow:0 0 12px #70adff}
.case-story-intro{padding:0 0 21px;border-bottom:1px solid #1b293a}
.case-story-intro p{max-width:74ch!important;margin:10px 0 0;color:#edf4ff!important;font-size:clamp(1.15rem,1.9vw,1.52rem)!important;line-height:1.55!important;letter-spacing:-.025em}
.case-repo-link{display:inline-flex;width:max-content;min-height:44px;align-items:center;gap:10px;margin:-4px 0 3px;padding:0 17px!important;border:1px solid rgba(94,160,245,.38);border-radius:7px!important;background:#101d2d!important;color:#c5ddff!important;font:700 .69rem var(--font-mono,monospace);letter-spacing:.06em;text-decoration:none;transition:transform .25s,border-color .25s,background .25s,box-shadow .25s}
.case-repo-link:hover{transform:translateY(-2px);border-color:#70adff;background:#132640!important;box-shadow:0 10px 28px rgba(59,130,246,.15)}
.case-impact-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:7px 0 -9px}
.case-impact-heading>span{color:#74869e;font:600 .55rem var(--font-mono,monospace);letter-spacing:.15em}
.case-impact-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;overflow:hidden;border:1px solid #1d2c40;border-radius:11px;background:rgba(146,178,222,.14)}
.case-impact-card{display:flex;min-height:105px;flex-direction:column;justify-content:center;padding:16px;border:0;border-radius:0;background:radial-gradient(ellipse at 85% 5%,rgba(67,135,222,.1),transparent 62%),#0a121e}
.case-impact-card strong{color:#f2f6fd;font:700 clamp(1.2rem,2.2vw,1.8rem)/1.1 var(--font-body,Inter,sans-serif);letter-spacing:-.04em}
.case-impact-card span{margin-top:7px;color:#aebed2;font-size:.7rem;line-height:1.45}
.case-story-columns{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(240px,.85fr);gap:clamp(22px,4vw,54px);padding:23px 0;border-top:1px solid #1b293a;border-bottom:1px solid #1b293a}
.case-story-columns p{margin:10px 0 0;color:#c7d4e5!important;font-size:.86rem!important;line-height:1.75!important}
.case-story-side{display:grid;gap:24px}.case-stack>div{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.case-stack>div span{padding:6px 10px;border:1px solid #26374d;border-radius:999px;background:#0b1625;color:#d2dfef;font:600 .67rem var(--font-mono,monospace)}
.case-features ul{display:grid;gap:10px;margin:10px 0 0;padding:0;list-style:none}.case-features li{display:flex;gap:11px;color:#cfdaea;font-size:.79rem;line-height:1.55}.case-features li span{color:#70adff;font:700 .61rem var(--font-mono,monospace)}
.case-technical-details{margin:28px 0 4px;border:1px solid #24354d;border-radius:11px;background:linear-gradient(145deg,#0c1726,#080f1a)}
.case-technical-details>summary{display:flex;min-height:62px;align-items:center;justify-content:space-between;gap:14px;padding:14px 17px;color:#e8f0fc;font-size:.84rem;font-weight:700;cursor:pointer;list-style:none}
.case-technical-details>summary::-webkit-details-marker{display:none}.case-technical-details>summary::after{content:'+';color:#70adff;font:500 1.3rem var(--font-mono,monospace);transition:transform .25s}.case-technical-details[open]>summary::after{transform:rotate(45deg)}.case-technical-details>summary span{margin-left:auto;color:#8294ad;font-size:.67rem;font-weight:500}
.case-technical-content{padding:0 18px 18px;border-top:1px solid rgba(136,173,222,.14)}.case-technical-content h4{margin-top:20px!important;color:#70adff!important}.case-technical-content p{color:#c4d0e1!important;font-size:.83rem!important;line-height:1.72!important}
.case-gallery,.case-recommendations{margin-top:38px;padding-top:25px;border-top:1px solid #1c2a3d}
.case-gallery>header{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:16px}.case-gallery>header h3,.case-recommendations h3{margin:6px 0 0;color:#f2f6fd;font-size:1.45rem;font-weight:700;letter-spacing:-.035em}.case-gallery>header p{margin:6px 0 0;color:#99a9bd;font-size:.74rem}.case-gallery>header>span{flex:none;color:#9eafc5;font:600 .62rem var(--font-mono,monospace);letter-spacing:.12em;text-transform:uppercase}
.case-gallery-grid{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;padding:2px 2px 14px;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-color:#38506d #0a111a;scrollbar-width:thin}.case-gallery-grid::-webkit-scrollbar{height:8px}.case-gallery-grid::-webkit-scrollbar-thumb{border:2px solid #0a111a;border-radius:8px;background:#38506d}
.case-gallery-item{flex:0 0 clamp(280px,42vw,475px);min-width:0;margin:0;overflow:hidden;scroll-snap-align:start;border:1px solid #1a293c;border-radius:10px;background:#080e17}.case-gallery-item img{display:block;width:100%;aspect-ratio:16/10;object-fit:contain;background:#060a10;transition:transform .45s cubic-bezier(.2,.8,.2,1)}.case-gallery-item:hover img{transform:scale(1.025)}.case-gallery-item figcaption{display:flex;align-items:baseline;gap:10px;padding:10px 12px;color:#b9c7d9;font-size:.7rem}.case-gallery-item figcaption span{color:#70adff;font:700 .57rem var(--font-mono,monospace)}
.case-recommendation-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin-top:16px}.case-recommendation{display:flex;min-width:0;min-height:80px;align-items:center;gap:12px;overflow:hidden;padding:10px;border:1px solid #1a293c;border-radius:9px;background:#080e17;color:#f0f5fc;text-align:left;cursor:pointer;transition:transform .25s,border-color .25s,background .25s}.case-recommendation:hover{transform:translateY(-3px);border-color:#396ba7;background:#0b1523}.case-recommendation>img{width:100px;height:64px;flex:none;border-radius:5px;object-fit:cover;background:#05080e}.case-recommendation>span{display:flex;min-width:0;flex-direction:column;gap:4px}.case-recommendation small,.case-recommendation em{color:#8fa4bf;font:600 .53rem var(--font-mono,monospace);letter-spacing:.1em;text-transform:uppercase;font-style:normal}.case-recommendation strong{overflow:hidden;font-size:.78rem;text-overflow:ellipsis;white-space:nowrap}.case-recommendation em{color:#7bb4ff;font-size:.52rem}
.case-block-in{animation:case-block-in .64s both cubic-bezier(.2,.8,.2,1);animation-delay:calc(var(--case-block-delay,0ms) + 70ms)}
@keyframes case-block-in{from{opacity:0;translate:0 22px;filter:blur(7px)}to{opacity:1;translate:0 0;filter:blur(0)}}
@media(max-width:700px){#case-modal.open{padding:0;align-items:end}#cm-box{width:100%;height:94dvh;border-radius:18px 18px 0 0}.cm-hero{height:30dvh;min-height:205px}.cm-hero>img{right:0;width:64%;height:86%}.cm-hero-caption{width:70%;padding:18px}.cm-hero-caption strong{font-size:clamp(1.8rem,8vw,2.5rem)}#cm-body{padding:22px 19px 32px}.case-impact-grid{gap:1px}.case-impact-card{min-height:84px;padding:11px}.case-impact-card strong{font-size:1rem}.case-impact-card span{font-size:.61rem}.case-story-columns{grid-template-columns:1fr;gap:22px}.case-gallery-grid{gap:9px}.case-gallery-item{flex-basis:min(82vw,390px)}.case-recommendation-grid{grid-template-columns:1fr}.case-recommendation>img{width:92px;height:62px}.case-gallery>header h3{font-size:1.2rem}}
@media(prefers-reduced-motion:reduce){#cm-box,.cm-hero-caption>*,.cm-hero>img,.case-block-in,.case-gallery-item img,.case-recommendation,.case-repo-link{animation:none!important;transition:none!important;translate:none!important;scale:none!important;filter:none!important}}

/* Review note: gallery captions sit in their own solid strip (never over the
   image), and every case-file screenshot opens full size on click. */
.case-gallery-item{display:flex;flex-direction:column}
.case-gallery-item img{flex:none;cursor:zoom-in}
.case-gallery-item:hover img{filter:brightness(1.06)}
.case-gallery-item figcaption{flex:none;background:#0b1421;border-top:1px solid #16233a}

/* Bright-pass — review round 4: brighter, cheerful, still professional.
   Palette discipline follows Portfolio_series: near-black ink, bright body
   text, vivid blue→cyan→violet accent, lifted panels and strokes. */
/* Global scale. 17px read a touch large across the whole site, so the root
   sits at the browser default: everything rem-based lands ~6% smaller while
   body copy stays at a comfortable 16px. */
html { font-size: 16px; }

/* Legibility floor for micro labels */
[class*="text-[0.5"], [class*="text-[0.52"], [class*="text-[0.55"], [class*="text-[0.58"], [class*="text-[0.6"], [class*="text-[0.62"], [class*="text-[0.64"] { font-size: .72rem !important; }
@media (max-width: 700px) { .series-tagline, .series-studio { font-size: .6rem; } .audience-switch { font-size: .58rem; } .audience-index { font-size: .66rem; } }
.cert-pick-rank { font-size: .7rem; }
#cm-body h4 { font-size: .74rem; }

/* Small captions and meta rows: bigger + brighter */
.case-gallery-item figcaption { color: #cdd9ea; font-size: .76rem; }
.case-gallery-item figcaption span { font-size: .7rem; }
.case-gallery>header p { color: #b4c4da; font-size: .8rem; }
.case-gallery>header>span { color: #b3c3da; font-size: .72rem; }
.case-reader-summary small, .case-story small, .case-impact-heading small, .case-gallery>header small, .case-recommendations>small { font-size: .68rem; }
.case-impact-heading>span { color: #9dadc5; font-size: .68rem; }
.case-impact-card span { color: #c2d0e4; font-size: .76rem; }
.case-project-meta { color: #b6c5da; font-size: .74rem; }
.case-recommendation small { color: #aabdd8; font-size: .66rem; }
.case-recommendation em { color: #8fc2ff; font-size: .66rem; }
.case-technical-details>summary span { color: #a7b8d0; font-size: .72rem; }
.cm-hero-caption span { font-size: .68rem; }
.cm-hero-caption small { color: #c4d3e8; font-size: .68rem; }
.resume-project span, .resume-stats span { color: #b7c6dd; font-size: .74rem; }
.resume-cert-list li span { color: #c0cfe3; font-size: .72rem; }
.series-skill-tab span { color: #a9bcd6; font-size: .72rem; }
.series-skill-note { color: #c0cde0; font-size: .74rem; }
.series-original-tags span { color: #e4ebf7; border-color: rgba(205,223,247,.32); background: rgba(10,20,34,.6); font-size: .72rem; }
.case-features li span { font-size: .68rem; }

/* Panels and strokes: lift off near-black */
#mission { background-color: #05070d; }
#cm-box { border-color: #2e4467; background: radial-gradient(560px circle at var(--case-pointer-x,50%) var(--case-pointer-y,10%), rgba(66,150,255,.14), transparent 72%), #0b1220; }
.case-reader-summary { border-color: rgba(110,175,255,.4); background: linear-gradient(110deg, rgba(26,52,86,.78), #0c1424); }
.case-story-intro, .case-story-columns { border-color: #27395a; }
.case-impact-grid { border-color: #2a3f60; background: rgba(146,178,222,.22); }
.case-impact-card { background: radial-gradient(ellipse at 85% 5%, rgba(67,135,222,.14), transparent 62%), #0d1728; }
.case-stack>div span { border-color: #33476b; background: #101c33; color: #e0eaf8; }
.case-technical-details { border-color: #2e4467; background: linear-gradient(145deg, #0f1c31, #0a1322); }
.case-gallery, .case-recommendations { border-color: #24354f; }
.case-gallery-item { border-color: #263a5c; background: #0d1626; }
.case-gallery-item figcaption { background: #0e1a2e; border-top-color: #22334f; }
.case-gallery-grid { scrollbar-color: #45628a #0c1424; }
.case-recommendation { border-color: #263a5c; background: #0d1626; }
.case-repo-link { border-color: rgba(110,175,255,.5); background: #14263f !important; }
.resume-stats div { background: #121f38; }
.resume-sheet-side { border-color: rgba(130,175,240,.32); }

/* Living portrait-lens ambience: idle sheen, breathing ring, drifting sparkles */
.pp-stage { position: relative; }
.pp-lens::after { animation: pp-sheen 6.5s ease-in-out infinite; }
.pp-ring { animation: pp-ring-breathe 4.2s ease-in-out infinite; }
.pp-spark { position: absolute; z-index: 2; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(160,205,255,.5) 45%, rgba(160,205,255,0) 72%); opacity: 0; pointer-events: none; animation: pp-spark-float var(--sp-dur,5s) ease-in-out var(--sp-delay,0s) infinite; }
@keyframes pp-sheen { 0%, 100% { opacity: .18; } 50% { opacity: .55; } }
@keyframes pp-ring-breathe { 0%, 100% { box-shadow: 0 0 10px rgba(214,183,124,.35); } 50% { box-shadow: 0 0 22px rgba(214,183,124,.75); } }
@keyframes pp-spark-float { 0% { transform: translate3d(0, 0, 0) scale(.7); opacity: 0; } 25% { opacity: .9; } 60% { opacity: .5; } 100% { transform: translate3d(var(--sp-dx, 6px), var(--sp-dy, -34px), 0) scale(1.05); opacity: 0; } }
.pp-stage.pp-offscreen .pp-lens::after, .pp-stage.pp-offscreen .pp-ring, .pp-stage.pp-offscreen .pp-spark { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .pp-lens::after, .pp-ring, .pp-spark { animation: none; } }

/* --- Typography depth pass: locked tiers, crisper rendering, stable numerals --- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { text-wrap: balance; }
p, li { text-wrap: pretty; line-height: 1.68; }
.panel-title { font-weight: 700; }
:is(#nav-clock, .resume-stats strong, .series-original-count, .audience-index, .cert-pick-index, .series-skill-tab strong, .series-originals-progress, .sec-num) { font-variant-numeric: tabular-nums; }

/* --- Round-8: skill proficiency tags, tighter skill cards, balanced case columns --- */
@media (min-width: 701px) {
  .series-skill-card { min-height: 140px; padding: 15px; }
  .case-story-columns { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}
.series-skill-level {
  position: relative;
  z-index: 1;
  margin-top: auto;
  align-self: flex-start;
  padding: 3px 9px;
  border: 1px solid color-mix(in srgb, var(--skill-hue) 55%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--skill-hue) 12%, #091321);
  color: color-mix(in srgb, var(--skill-hue) 82%, #ffffff 18%);
  font: 600 .6rem var(--font-mono, monospace);
  letter-spacing: .09em;
  text-transform: uppercase;
}
.series-skill-level:empty { display: none; }
.case-stack-inline { margin-top: 22px; }
.case-story-side { align-content: start; }
.case-story-columns > section { min-width: 0; }