/* ═══════════════════════════════════════════════
   style.css — shared across all pages
   Darshan Munkur Portfolio
═══════════════════════════════════════════════ */

/* ── TOKENS ── */
:root {
  /* Color — surface (warm canvas, purple identity) */
  --bg:        #FBF9F4;   /* Warm cream base — preserved for editorial warmth */
  --bg2:       #F1F0F4;   /* Purple-tinted surface lift         Δ0.090 */
  --bg3:       #E6E4EA;   /* Active / hover elevated state      Δ0.093 */
  --bd:        rgba(0,0,0,0.07);
  --bd2:       rgba(0,0,0,0.13);
  /* Color — text (3-step, purple-charcoal ladder) */
  --t1:        #1C1A22;   /* Deep charcoal-plum               16.6:1 on canvas */
  --t2:        #3A3644;   /* Secondary purple-gray            11.3:1 on canvas */
  --t3:        #6E6A78;   /* Muted slate utility              5.08:1 on canvas */
  /* Color — accent (Royal Amethyst; AA on canvas, AA on card surface) */
  --accent:    #5D3FD3;   /* 6.40:1 on canvas · 5.94:1 on card */
  --accent-d:  rgba(93,63,211,0.09);
  --accent-r:  93,63,211;
  --dot:       #5D3FD3;
  --nav-bg:    rgba(247,245,241,0.94);
  --hero-fade: rgba(247,245,241,0.90);
  --panel-bg:  #1e1a2e;

  /* Type families */
  --serif:     'Instrument Serif', Georgia, serif;
  --sans:      'DM Sans', sans-serif;
  --mono:      'DM Mono', monospace;

  /* Type scale — editorial display ladder + UI body ladder
     Use these tokens directly; reach for ad-hoc clamp only for one-offs. */
  --type-display-xl:  clamp(44px, 6.5vw, 88px);   /* hero name (one per page) */
  --type-display-lg:  clamp(36px, 5.5vw, 80px);   /* case-study h1 */
  --type-display-md:  clamp(32px, 4.5vw, 60px);   /* footer-cta, section opener */
  --type-heading-lg:  clamp(26px, 3.5vw, 44px);   /* cs section heading */
  --type-heading-md:  clamp(20px, 2.5vw, 28px);   /* history-company */
  --type-heading-sm:  clamp(19px, 2vw,   24px);   /* skill-cat */
  --type-body-lg:     16px;                       /* primary body text */
  --type-body-md:     15px;                       /* supporting prose */
  --type-body-sm:     13px;                       /* utility / meta labels */
  --type-mono-lbl:    11px;                       /* button / nav labels */
  --type-mono-xs:     9px;                        /* eyebrow, caption */

  /* Spacing scale — 4/8/16/24/32/48 micro + responsive macro bands */
  --sp-xxs:    4px;
  --sp-xs:     8px;
  --sp-sm:     12px;
  --sp-md:     16px;
  --sp-lg:     24px;
  --sp-xl:     32px;
  --sp-2xl:    48px;
  --sp-3xl:    64px;
  --sp-block:   clamp(56px,  8vh,  96px);   /* between content blocks */
  --sp-section: clamp(64px,  9vh, 112px);   /* between major sections */
  --sp-band:    clamp(80px, 12vh, 140px);   /* full-bleed hero/metric bands */

  /* Border radius — editorial-restrained; cards get warmth without softness */
  --r-none:    0;
  --r-xs:      2px;
  --r-sm:      4px;
  --r-md:      8px;
  --r-lg:      16px;
  --r-pill:    9999px;

  /* Layout */
  --pad:       clamp(24px, 5vw, 80px);
  --nav-h:     64px;
  --max:       1440px;
  --tap-min:   48px;                          /* minimum interactive target */

  /* ── Semantic type aliases — use these for all new work ── */
  --fs-body:         16px;    /* canonical primary body */
  --fs-body-md:      15px;    /* supporting prose */
  --fs-utility:      13px;    /* uppercase metadata / utility labels */
  --lh-body:         1.65;    /* body line-height */
  --fw-body:         400;     /* body weight — regular */
  --fw-medium:       500;     /* labels, UI chrome */
  --fw-semibold:     600;     /* bold lead-ins, callout emphasis */
  --ls-utility:      0.07em;  /* utility label letter-spacing */

  /* ── Proportional column spans — section-level CSS Grid ── */
  --col-4:           span 4;
  --col-5:           span 5;
  --col-7:           span 7;
  --col-8:           span 8;

  /* ── Structural border — low-contrast cell dividers / card bounds ── */
  --bd-low:          1px solid rgba(28,26,34,0.06);

  /* ── Semantic contrast tokens (light mode values) ── */
  --text-primary:    #1C1A22;    /* Headlines, body copy */
  --text-secondary:  #3A3644;    /* Nav links, sub-headers */
  --text-muted:      #6E6A78;    /* Utility labels, meta */

  /* Legacy aliases (kept for backwards compat — prefer --sp-block / --sp-section) */
  --space-sm:  var(--sp-block);
  --space-lg:  var(--sp-section);
}

[data-theme="dark"] {
  /* ── Purple Identity: Midnight Amethyst ── */

  /* Surface — 3-step lift, Δ0.009 restored by bg2 bump */
  --bg:        #121016;   /* Midnight Amethyst canvas       lum 0.0055 */
  --bg2:       #211E2B;   /* Raised card surface            lum 0.0142 Δ+0.0087 */
  --bg3:       #2B273A;   /* Peak interactive / hover       lum 0.0226 Δ+0.0084 */

  /* Structural borders */
  --bd:        rgba(255,255,255,0.08);
  --bd2:       rgba(255,255,255,0.14);
  --bd-low:    1px solid rgba(235,230,245,0.06);   /* cool lavender tint on rules */

  /* Typography — 3-step lavender-ivory ladder */
  --t1:        #F4F3F7;   /* Ivory white                   17.1:1 on canvas */
  --t2:        #D1CDDA;   /* Lavender-gray secondary       12.1:1 on canvas */
  --t3:        #9590A2;   /* Muted slate-lavender           6.1:1 on canvas */

  /* Accent — Luminous Lavender */
  --accent:    #A899FF;   /* 7.80:1 on canvas · 6.74:1 on card */
  --accent-d:  rgba(168,153,255,0.12);
  --accent-r:  168,153,255;
  --dot:       #A899FF;

  /* Nav & hero overlays keyed to canvas */
  --nav-bg:    rgba(18,16,22,0.96);
  --hero-fade: rgba(18,16,22,0.90);
  --panel-bg:  #1a1625;

  /* Semantic contrast tokens */
  --text-primary:    #F4F3F7;   /* Headlines, body copy         17.1:1 */
  --text-secondary:  #D1CDDA;   /* Nav rails, sub-headers       12.1:1 */
  --text-muted:      #9590A2;   /* Utility labels, timestamps    6.1:1 */
}

/* ── RESET ── */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; scrollbar-gutter: stable; }
body {
  background: var(--bg); color: var(--t1);
  font-family: var(--sans); font-weight: var(--fw-body);
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
  animation: pageFade .4s ease both;
}
@keyframes pageFade { from { opacity: 0 } to { opacity: 1 } }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* ── CURSOR ── removed for consistency (using browser default) ── */

/* ── SCROLL PROGRESS ── */
#scroll-bar { position: fixed; bottom: 0; left: 0; right: 0; height: 3px; z-index: 9999; pointer-events: none; background: rgba(var(--accent-r),.12); }
#scroll-fill { height: 100%; background: var(--accent); width: 0%; transition: width .06s linear; box-shadow: 0 0 8px rgba(var(--accent-r),.4); }

/* ── BACK TO TOP ── */
#btt { position: fixed; bottom: 28px; right: 28px; z-index: 400; width: 36px; height: 36px; border: 1px solid var(--bd2); display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--t3); opacity: 0; pointer-events: none; transition: opacity .3s, border-color .2s, color .2s; cursor: pointer; background: var(--bg); }
#btt.visible { opacity: 1; pointer-events: auto; }
#btt:hover { border-color: var(--accent); color: var(--accent); }

/* ── NAV ── */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 800; height: var(--nav-h); padding: 0 var(--pad); display: flex; align-items: center; justify-content: space-between; background: var(--nav-bg); backdrop-filter: blur(16px); border-bottom: 1px solid var(--bd); }
.nav-logo { font-family: var(--serif); font-size: 17px; letter-spacing: -.01em; color: var(--t1); flex-shrink: 0; z-index: 1; }
.nav-links { display: flex; gap: 36px; list-style: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); align-items: center; pointer-events: auto; z-index: 2; }
.nav-links a { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--text-secondary); transition: color .2s; }
.nav-links a:hover, .nav-links a.active { color: var(--accent); }
.nav-right { display: flex; align-items: center; gap: 16px; }
.nav-status { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--t2); }
.nav-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 6px rgba(var(--accent-r),.4); animation: pulse 2.5s ease infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ── THEME TOGGLE ── */
.theme-toggle { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--bd2); background: transparent; color: var(--t3); font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color .2s, color .2s; }
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
.theme-icon { display: inline-flex; align-items: center; justify-content: center; width: 1em; height: 1em; }

/* ── PAGE OFFSET ── */
.page { padding-top: var(--nav-h); }

/* ── SHARED FOOTER ── */
.site-footer { border-top: 1px solid var(--bd); max-width: var(--max); margin: 0 auto; }
.footer-cta { padding: clamp(56px,8vh,96px) var(--pad); border-bottom: 1px solid var(--bd); }
.footer-cta h2 { font-family: var(--serif); font-size: clamp(32px,4.5vw,60px); font-weight: 400; letter-spacing: -.025em; line-height: 1.05; margin-bottom: 20px; }
.footer-cta h2 em { font-style: italic; color: var(--accent); }
.footer-cta p { font-size: var(--fs-body-md); color: var(--t2); line-height: var(--lh-body); max-width: 400px; margin-bottom: 32px; }
.footer-btns { display: flex; gap: var(--sp-sm); flex-wrap: wrap; }

/* ── PRIMARY CTA — solid fill, highest visual affordance ──
   Use for: the singular main action per screen / section.         */
.btn-primary, .btn-filled, .gate-btn {
  font-family: var(--mono); font-size: var(--type-mono-lbl);
  font-weight: var(--fw-medium); letter-spacing: .14em; text-transform: uppercase;
  color: var(--bg); background: var(--accent); border: 1px solid var(--accent);
  padding: 14px 28px; min-height: var(--tap-min);
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-xs); transition: opacity .2s, transform .15s; cursor: pointer;
}
.btn-primary:hover, .btn-filled:hover, .gate-btn:hover { opacity: .88; }
.btn-primary:active, .btn-filled:active, .gate-btn:active { transform: scale(.98); }

/* ── SECONDARY CTA — 1px structural outline, non-dominant ──
   Use for: supporting actions alongside a primary CTA.            */
.btn-secondary, .btn-outline, .footer-btn, .err-btn {
  font-family: var(--mono); font-size: var(--type-mono-lbl);
  font-weight: var(--fw-medium); letter-spacing: .12em; text-transform: uppercase;
  color: var(--t2); border: 1px solid var(--bd2);
  padding: 14px 24px; min-height: var(--tap-min);
  display: inline-flex; align-items: center; gap: var(--sp-xs);
  transition: border-color .2s, color .2s, background .2s;
  background: transparent; cursor: pointer;
}
.btn-secondary:hover, .btn-outline:hover, .footer-btn:hover, .err-btn:hover {
  border-color: var(--accent); color: var(--accent); background: var(--accent-d);
}

/* ── TERTIARY CTA — plain text + directional arrow ──
   Use for: inline navigation, "read more" style low-priority links. */
.btn-tertiary {
  font-family: var(--mono); font-size: var(--type-mono-lbl);
  font-weight: var(--fw-medium); letter-spacing: .12em; text-transform: uppercase;
  color: var(--t2); background: none; border: none; padding: 14px 0;
  display: inline-flex; align-items: center; gap: var(--sp-xs);
  cursor: pointer; transition: color .2s, gap .2s;
}
.btn-tertiary::after { content: '→'; font-style: normal; transition: transform .2s; }
.btn-tertiary:hover { color: var(--accent); gap: var(--sp-sm); }
.btn-tertiary:hover::after { transform: translateX(3px); }

/* ── SHARED FOOTER BOTTOM BAR ── */
.footer-bottom { padding: clamp(18px,2.5vh,24px) var(--pad); display: flex; align-items: center; justify-content: space-between; }
.footer-copy { font-family: var(--mono); font-size: 10px; color: var(--text-muted); letter-spacing: .06em; }
.footer-copy strong { color: var(--t2); font-weight: 400; }
.footer-nav-links { display: flex; gap: 24px; list-style: none; }
.footer-nav-links a { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); transition: color .2s; }
.footer-nav-links a:hover { color: var(--accent); }

/* ── SHARED UTILITIES ── */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .65s ease, transform .65s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }
.section-label { font-family: var(--mono); font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); display: flex; align-items: center; gap: 14px; margin-bottom: clamp(40px, 6vh, 64px); }
.section-label::after { content: ''; flex: 1; max-width: 40px; height: 1px; background: var(--bd2); }

/* ── UTILITY LABEL — canonical uppercase metadata treatment ──
   Apply to: role tags, scope headers, project types, timeline strings,
   card metadata, category labels, and all mono-uppercase UI copy.   */
.u-label {
  font-family: var(--mono);
  font-size: var(--fs-utility);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-utility);
  color: var(--t3);
  line-height: 1.4;
}

/* ── METRIC NUMERAL — upright sans-serif only, never italic serif ──
   Apply to: stat numbers, percentages, dates, durations, timelines.  */
.metric-num {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 400;
  letter-spacing: -.01em;
}

/* ── ACCESSIBILITY ── */
.skip-link { position: absolute; top: -100%; left: 16px; background: var(--accent); color: #fff; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 10px 18px; z-index: 99999; text-decoration: none; }
.skip-link:focus { top: 16px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ── DARK MODE ENHANCEMENTS ── */

/* Button text inversion */
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-filled,
[data-theme="dark"] .gate-btn {
  color: #FFFFFF;
}

/* Nav link hover — transition to absolute brightness */
[data-theme="dark"] .nav-links a:hover {
  color: #FFFFFF;
}

/* Primary body text — elevated contrast */
[data-theme="dark"] p,
[data-theme="dark"] .hero-desc,
[data-theme="dark"] .case-lead,
[data-theme="dark"] .cs-prose {
  color: var(--text-primary);
}

/* Utility labels — improved visibility */
[data-theme="dark"] .u-label,
[data-theme="dark"] .meta-key,
[data-theme="dark"] .stat-label,
[data-theme="dark"] .cs-label,
[data-theme="dark"] .card-tag {
  color: var(--text-muted);
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  body::before { display: none; }
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 0; }

/* ── EDITORIAL EM — purple italic accent ── */
h1 em, h2 em, .hero-h1 em, .about-name em, .cs-h em,
.section-heading em, .footer-cta h2 em, .case-h1 em {
  font-style: italic;
  color: var(--accent);
}


/* ══════════════════════════════════════════════
   TEXTURE — organic grain, purely decorative
   SVG feTurbulence filter as inline data URI
   Fixed position, pointer-events:none
   Exempt from WCAG 1.4.11 (decorative)
══════════════════════════════════════════════ */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Subtle grain using SVG turbulence */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
  background-size: 256px 256px;
  background-repeat: repeat;
  opacity: 0.28;
  mix-blend-mode: multiply;
}
[data-theme="dark"] body::before {
  mix-blend-mode: screen;
  opacity: 0.10;
}
/* All page content stays above texture — .nav and fixed elements omitted to preserve their own positioning */
.page, main, section, footer, #loader {
  position: relative;
  z-index: 1;
}

/* ── HOVER STATES — Clean without glow effects ── */

/* Section cards & project cards — subtle lift only */
.proj-card {
  transition: background .22s, transform .35s cubic-bezier(.23,1,.32,1), box-shadow .35s;
}
.proj-card:hover {
  transform: translateY(-2px) scale(1.005);
  box-shadow: 0 8px 32px rgba(var(--accent-r),.08), 0 2px 8px rgba(0,0,0,.06);
}

/* Footer CTA — removed glow */
.footer-cta {
  position: relative;
  transition: background .3s;
}

/* Nav link hover — grid cell underline shimmer */
.nav-links a {
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s cubic-bezier(.23,1,.32,1);
}
.nav-links a:hover::after { transform: scaleX(1); }

/* ══════════════════════════════════════════════
   REDUCED MOTION — disable all grid animations
   Grid stays visible but static, no transitions
══════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  body::before { display: none; }
  .proj-card { transition: none !important; }
  .proj-card:hover { transform: none; box-shadow: none; }
}

/* ══════════════════════════════════════════════
   MOBILE NAV — hamburger + fullscreen overlay
   Activated at ≤768px
══════════════════════════════════════════════ */

/* Hide desktop-only nav items on mobile */
@media (max-width: 768px) {
  .nav-links  { display: none !important; }
  .nav-status { display: none; }
  .nav-hamburger { display: flex !important; }
}

/* Hamburger button — 3-bar → ✕ morph */
.nav-hamburger {
  display: none;
  width: 32px; height: 32px;
  border: 1px solid var(--bd2);
  background: transparent; color: var(--t2);
  cursor: pointer;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px; padding: 0;
  transition: border-color .2s, color .2s;
}
.nav-hamburger:hover { border-color: var(--accent); color: var(--accent); }
.nav-hamburger span {
  display: block; width: 14px; height: 1px;
  background: currentColor;
  transition: transform .35s cubic-bezier(.23,1,.32,1), opacity .2s, width .3s;
  transform-origin: center;
}
.nav-hamburger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-hamburger.is-open span:nth-child(2) { opacity: 0; width: 0; }
.nav-hamburger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Lock body scroll while overlay is open */
body.nav-open { overflow: hidden; }

/* ── FULLSCREEN OVERLAY ── */
#nav-overlay {
  position: fixed; inset: 0; z-index: 795;
  background: var(--bg);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .4s cubic-bezier(.23,1,.32,1);
}
#nav-overlay.is-open { opacity: 1; pointer-events: auto; }

/* Grain texture to match page feel */
#nav-overlay::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
  background-size: 256px 256px; background-repeat: repeat;
  opacity: 0.18; mix-blend-mode: multiply;
}
[data-theme="dark"] #nav-overlay::before { mix-blend-mode: screen; opacity: 0.07; }

/* Large editorial serif links — slide up on open */
.overlay-links { list-style: none; text-align: center; position: relative; z-index: 1; }
.overlay-links li { overflow: hidden; }
.overlay-links a {
  display: block;
  font-family: var(--serif);
  font-size: clamp(44px, 11vw, 80px);
  font-weight: 400; letter-spacing: -.03em;
  color: var(--t1); line-height: 1.15; padding: .08em 0;
  transform: translateY(110%);
  transition: transform .6s cubic-bezier(.16,1,.3,1), color .25s;
}
#nav-overlay.is-open .overlay-links a { transform: translateY(0); }
.overlay-links li:nth-child(1) a { transition-delay: .07s; }
.overlay-links li:nth-child(2) a { transition-delay: .14s; }
.overlay-links li:nth-child(3) a { transition-delay: .21s; }
.overlay-links a:hover { color: var(--accent); }

/* Thin vertical spacer between links and foot info */
.overlay-divider {
  width: 1px; height: clamp(24px, 3.5vh, 44px);
  background: var(--bd2); margin: clamp(16px, 2.5vh, 28px) auto 0;
  position: relative; z-index: 1;
  opacity: 0; transition: opacity .35s .25s;
}
#nav-overlay.is-open .overlay-divider { opacity: 1; }

/* Footer bar — email + status pinned to overlay bottom */
.overlay-foot {
  position: absolute; bottom: clamp(24px, 4vh, 40px);
  left: 0; right: 0; padding: 0 var(--pad);
  display: flex; justify-content: space-between; align-items: center;
  z-index: 1;
  opacity: 0; transform: translateY(8px);
  transition: opacity .4s .3s, transform .4s .3s;
}
#nav-overlay.is-open .overlay-foot { opacity: 1; transform: translateY(0); }
.overlay-foot-email {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--t3); transition: color .2s;
}
.overlay-foot-email:hover { color: var(--accent); }
.overlay-status {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 11px; color: var(--t3);
}

/* ── FOOTER BOTTOM — stack vertically on mobile ── */
@media (max-width: 600px) {
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: var(--sp-sm); }
}

/* ── CASE META — tighter cell padding on small phones ── */
@media (max-width: 480px) {
  .meta-cell { padding: 12px 16px; }
}

/* ── CONTRIBUTIONS BLOCK — reduce horizontal padding on mobile ── */
@media (max-width: 480px) {
  .contributions-block { padding: var(--sp-md) var(--sp-lg); }
}

/* ── CASE METRICS — smaller vertical band on mobile ── */
@media (max-width: 480px) {
  .case-metrics { padding-top: clamp(48px,7vh,80px); padding-bottom: clamp(48px,7vh,80px); }
}