/* =========================================================
   raghavkohli.xyz — faithful port of Portfolio.dc.html
   Editorial minimal · Fraunces/Geist · slate-blue accent
   ========================================================= */
:root{
  --paper:#FAFAF8;
  --paper-2:#F4F3EE;
  --ink:#1C1B18;
  --ink-2:#3B3A34;
  --ink-soft:#57564F;
  --mute:#6B6A64;
  --faint:#67665E;
  --faint-2:#757467;
  --line:#C2C0B7;
  --accent:#2E3A57;
  --serif:'Fraunces',Georgia,serif;
  --serif-alt:'Cormorant',Georgia,serif;
  --sans:'Geist',system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --stripe:repeating-linear-gradient(135deg,#EEEDE7 0px,#EEEDE7 1px,#F4F3EE 1px,#F4F3EE 11px);
  --gutter:clamp(24px,6vw,96px);
  --maxw:1320px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;line-height:1.6;
  overflow-wrap:break-word;}
a{color:var(--accent);text-decoration:none;transition:color .3s ease;}
a:hover{color:var(--ink);}
::selection{background:var(--accent);color:var(--paper);}
button{font-family:inherit;}
img{display:block;width:100%;height:100%;object-fit:cover;}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter);}
.mono{font-family:var(--mono);}
.eyebrow{font-size:12.5px;letter-spacing:.09em;color:var(--faint-2);font-weight:inherit;}
/* visually hidden but available to screen readers / SEO */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ---------- header ---------- */
.head{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:20px var(--gutter);background:rgba(250,250,248,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
.head .mark{font-family:var(--serif-alt);font-size:22px;font-weight:500;letter-spacing:-0.01em;line-height:1;color:var(--ink);}
.head nav{display:flex;gap:26px;font-size:13px;}
.head nav a{color:var(--mute);position:relative;}
.head nav a:hover{color:var(--ink);}
/* nav hover reveals a small stack of sub-labels (mouse only — see @media hover) */
.head nav .navsub{position:absolute;top:calc(100% + 11px);right:0;display:flex;flex-direction:column;gap:5px;
  text-align:right;opacity:0;transform:translateY(-4px);pointer-events:none;
  transition:opacity .3s ease,transform .35s cubic-bezier(.16,1,.3,1);}
.head nav .navsub span{white-space:nowrap;font-size:11px;letter-spacing:.01em;color:var(--faint-2);}

/* ---------- work section ---------- */
.work{padding:clamp(36px,5vw,72px) var(--gutter) 0;max-width:var(--maxw);margin:0 auto;}
.work__head{display:flex;align-items:baseline;justify-content:space-between;gap:20px 40px;flex-wrap:wrap;
  margin-bottom:clamp(40px,6vw,72px);}

/* keyword filter chips */
.work__filters{display:flex;flex-wrap:wrap;gap:7px 8px;align-items:center;}
.work__chip{font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;color:var(--faint);
  background:none;border:1px solid transparent;padding:5px 11px;border-radius:999px;cursor:pointer;line-height:1;
  transition:color .3s ease,border-color .3s ease,background .3s ease;}
.work__chip:hover{color:var(--ink);}
.work__chip.on{color:var(--accent);border-color:var(--line);background:rgba(46,58,87,.05);}
/* reset control — shown by main.js only while a filter is active */
.work__reset{font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;color:var(--accent);
  background:none;border:1px solid var(--line);padding:5px 11px;border-radius:999px;cursor:pointer;line-height:1;
  transition:color .3s ease,border-color .3s ease;}
.work__reset:hover{color:var(--ink);border-color:var(--ink);}
.work__reset[hidden]{display:none;}

/* Default landing: a 12-column grid. Each card is placed with an inline
   grid-column span (see index.njk) + a --cmt vertical offset, which recreates
   the floating, asymmetric composition and holds it across widths (proportional
   columns, not fixed px) down to the mobile breakpoint. */
.work__grid{display:grid;grid-template-columns:repeat(12,1fr);align-items:start;
  column-gap:40px;row-gap:clamp(60px,9vw,140px);}

/* filtered state: the container flips to flex so matches can float to the top
   and grow while the rest shrink + recede. In flex mode each card's inline
   grid-column is inert, so widths here take over cleanly. FLIP transforms
   (set inline by main.js) animate the reflow. */
.work__grid.filtering{display:flex;flex-wrap:wrap;justify-content:space-between;
  align-items:flex-start;gap:56px 40px;}
.work__grid.filtering .card{margin-top:0;}
.work__grid.filtering .card.match{width:480px;order:0;}
.work__grid.filtering .card:not(.match){width:236px;order:1;opacity:.38;}
.work__grid.filtering .card:not(.match):hover{opacity:.85;}
.card.flip{transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .5s ease;will-change:transform;}

/* --cmt offset, --car aspect, --cpad overlay padding, --cq question size are
   per-card inline custom props; grid-column is inline too. min-width:0 keeps
   grid items from overflowing their track. */
figure.card{margin-top:var(--cmt,0);max-width:100%;min-width:0;
  transition:opacity .5s ease;}
.card__click{cursor:pointer;position:relative;display:block;color:inherit;}
/* container-type lets the question below size to the card's own width */
.card__frame{position:relative;aspect-ratio:var(--car);overflow:hidden;background:var(--stripe);
  container-type:inline-size;transition:transform .6s cubic-bezier(.16,1,.3,1);}
.card__frame > img{position:absolute;inset:0;transition:transform .9s cubic-bezier(.16,1,.3,1);}
.card__fig{position:absolute;left:16px;bottom:14px;font-family:var(--mono);font-size:11px;letter-spacing:.03em;color:var(--faint);}
/* frosted-glass + halftone screen over the image, question text on top */
.card__overlay{position:absolute;inset:0;background:rgba(250,250,248,.5);
  backdrop-filter:blur(9px) saturate(1.15);-webkit-backdrop-filter:blur(9px) saturate(1.15);
  display:flex;flex-direction:column;justify-content:flex-end;padding:var(--cpad,30px);
  opacity:0;transition:opacity .55s cubic-bezier(.16,1,.3,1);pointer-events:none;overflow:hidden;}
.card__overlay::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(circle at center,rgba(28,27,24,.2) 1px,transparent 1.5px);
  background-size:6px 6px;mix-blend-mode:multiply;opacity:.7;}
.card__overlay > *{position:relative;z-index:1;}
/* if the browser can't frost the glass, fall back to a near-opaque tint so text stays legible */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .card__overlay{background:rgba(250,250,248,.92);}
}
.card__qlabel{font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--faint-2);margin-bottom:14px;}
/* scale to the card width (cqi), capped at the designed --cq, floored at 14px,
   so a long question in a narrow card shrinks instead of clipping */
.card__q{font-family:var(--serif);font-weight:400;font-size:clamp(14px,8.5cqi,var(--cq,24px));
  line-height:1.32;color:#23221E;margin:0;}
.card__view{margin-top:20px;font-size:12.5px;color:var(--accent);}

figcaption{display:flex;align-items:baseline;gap:12px;margin-top:18px;font-size:13.5px;flex-wrap:wrap;}
figcaption .n{color:var(--line);font-variant-numeric:tabular-nums;}
figcaption .name{font-weight:500;color:var(--ink);}
figcaption .desc{color:var(--faint);}
figcaption .status{margin-left:auto;color:var(--accent);font-size:12.5px;}

/* floating metadata panel (desktop hover) */
.card__meta{position:absolute;top:6px;width:172px;opacity:0;pointer-events:none;z-index:3;
  display:flex;flex-direction:column;gap:9px;transition:opacity .45s ease, transform .55s cubic-bezier(.16,1,.3,1);}
/* details hug the card edge: panel on the right reads left-aligned, panel on the left reads right-aligned */
.card__meta.right{left:100%;margin-left:22px;transform:translateX(-10px);text-align:left;align-items:flex-start;}
.card__meta.left{right:100%;margin-right:22px;transform:translateX(10px);text-align:right;align-items:flex-end;}
.card__meta > div{display:flex;flex-direction:column;gap:3px;align-items:inherit;}
.card__meta .lbl{font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;color:#B7B5AC;}
.card__meta .val{font-size:12px;color:var(--ink-2);}
.card__meta > div:nth-child(4) .val{color:var(--faint);}
.card__meta > div:nth-child(4) .val.live{color:var(--accent);}

/* expanding thumbnail strip (desktop hover) */
.card__thumbs{display:flex;gap:8px;margin-top:14px;overflow:hidden;max-height:0;opacity:0;
  transition:max-height .55s cubic-bezier(.16,1,.3,1), opacity .4s ease;}
.card__thumb{flex:0 0 auto;width:78px;height:78px;background:var(--stripe);position:relative;}
.card__thumb span{position:absolute;left:6px;bottom:5px;font-family:var(--mono);font-size:9px;color:#9A988F;}

/* hover-only interactions — gated so touch devices never get stuck states */
@media (hover:hover){
  .head nav a:hover .navsub{opacity:1;transform:translateY(0);}
  .card__click:hover .card__frame{transform:translateY(-8px);}
  .card__click:hover .card__frame > img{transform:scale(1.04);}
  .card__click:hover .card__overlay{opacity:1;}
  .card__click:hover .card__meta{opacity:1;transform:translateX(0);}
  .card__click:hover .card__thumbs{max-height:78px;opacity:1;}
}

/* ---------- about ---------- */
.about{max-width:var(--maxw);margin:0 auto;padding:clamp(80px,12vw,170px) var(--gutter) 0;}
.about__quote{font-family:var(--serif);font-weight:400;font-size:clamp(24px,3.4vw,46px);line-height:1.14;
  letter-spacing:-0.01em;color:var(--ink);max-width:18em;margin:30px 0 0;}
.about__quote em{font-style:normal;color:var(--accent);}
.about__body{font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.65;color:var(--ink-soft);
  max-width:32em;margin:40px 0 0;}

/* full-cv disclosure */
.about__expand{display:inline-flex;align-items:center;gap:8px;margin-top:34px;background:none;border:none;
  padding:0;cursor:pointer;font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;color:var(--accent);
  transition:color .3s ease;}
.about__expand:hover{color:var(--ink);}
.about__chev{transition:transform .4s cubic-bezier(.16,1,.3,1);}
.about__expand[aria-expanded="true"] .about__chev{transform:rotate(180deg);}
/* grid-rows 0fr->1fr animates to auto height cleanly */
.about__cv{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .55s cubic-bezier(.16,1,.3,1);}
.about__cv.open{grid-template-rows:1fr;}
.about__cv-inner{overflow:hidden;min-height:0;}
.cv-sec{margin-top:clamp(40px,5vw,60px);}
.cv-sec:first-child{margin-top:36px;}
.cv-sec .eyebrow{display:block;margin-bottom:22px;}
.cv-item{padding:20px 0;border-top:1px solid rgba(28,27,24,.09);}
.cv-item:first-of-type{border-top:none;padding-top:0;}
.cv-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:10px;}
.cv-role{font-size:15px;font-weight:500;color:var(--ink);}
.cv-year{font-family:var(--mono);font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums;}
.cv-bullets{list-style:none;display:flex;flex-direction:column;gap:8px;padding:0;margin:0;}
.cv-bullets li{position:relative;padding-left:18px;font-size:14px;font-weight:300;line-height:1.55;
  color:var(--ink-soft);max-width:52em;}
.cv-bullets li::before{content:"";position:absolute;left:2px;top:9px;width:4px;height:4px;border-radius:50%;
  background:var(--faint-2);}
.cv-bullets em{font-style:italic;color:var(--ink-2);}
.cv-line{display:grid;grid-template-columns:130px 1fr;gap:16px;padding:12px 0;
  border-top:1px solid rgba(28,27,24,.06);}
.cv-line:first-of-type{border-top:none;}
.cv-key{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--faint-2);padding-top:2px;}
.cv-val{font-size:14px;font-weight:300;line-height:1.55;color:var(--ink-soft);}

/* ---------- index ---------- */
.index{max-width:var(--maxw);margin:0 auto;padding:clamp(64px,9vw,120px) var(--gutter) 0;}
.index__head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:clamp(28px,4vw,48px);}
.index__hint{font-size:12.5px;color:var(--faint-2);}
.index__grid{display:grid;grid-template-columns:1fr minmax(300px,420px);gap:clamp(32px,5vw,72px);align-items:start;}
.index__list{display:flex;flex-direction:column;}
.index__row{display:flex;align-items:baseline;gap:20px;padding:22px 4px;border-top:1px solid rgba(28,27,24,.09);
  color:var(--ink-soft);transition:color .3s ease,padding-left .4s cubic-bezier(.16,1,.3,1);}
.index__row:hover,.index__row.on{color:var(--ink);padding-left:14px;}
.index__row .n{font-family:var(--mono);font-size:11.5px;color:var(--line);font-variant-numeric:tabular-nums;min-width:26px;}
.index__row .nm{font-size:clamp(18px,2.1vw,26px);font-weight:500;letter-spacing:-0.01em;}
.index__row .cat{flex:1;font-size:12.5px;color:var(--faint-2);align-self:center;}
.index__row .yr{font-family:var(--mono);font-size:12px;color:var(--faint-2);font-variant-numeric:tabular-nums;}
.index__end{border-top:1px solid rgba(28,27,24,.09);}
.index__preview{position:sticky;top:96px;}
.index__pv-img{aspect-ratio:4/3;overflow:hidden;background:var(--stripe);position:relative;transition:opacity .4s ease;}
.index__pv-img .fig{position:absolute;left:16px;bottom:13px;font-family:var(--mono);font-size:11px;letter-spacing:.03em;color:var(--faint);}
.index__pv-name{font-size:14px;font-weight:500;color:var(--ink);margin:20px 0 10px;transition:opacity .4s ease;}
.index__pv-blurb{font-family:var(--sans);font-weight:300;font-size:14px;line-height:1.6;color:var(--ink-soft);max-width:34em;transition:opacity .4s ease;}

/* ---------- contact ---------- */
.contact{max-width:var(--maxw);margin:0 auto;padding:clamp(80px,11vw,150px) var(--gutter) clamp(90px,12vw,160px);}
.contact__row{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:24px;margin-top:28px;}
.contact__email{font-family:var(--serif-alt);font-size:clamp(26px,3.2vw,40px);font-weight:400;color:var(--ink);}
.contact__links{display:flex;gap:22px;font-size:13.5px;}
.contact__links a{color:var(--mute);}
.contact__fine{margin-top:clamp(56px,8vw,90px);font-size:11.5px;color:var(--faint-2);letter-spacing:.02em;}

/* ---------- project detail (standalone /work pages) ---------- */
.detail{max-width:1120px;margin:0 auto;padding:clamp(48px,8vw,110px) var(--gutter) clamp(90px,12vw,150px);}
.detail__back{display:inline-block;margin-bottom:clamp(40px,6vw,64px);font-size:13px;color:var(--mute);}
.detail__qlabel{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--faint-2);}
.detail__q{font-family:var(--serif);font-weight:400;font-size:clamp(32px,5vw,68px);line-height:1.16;
  letter-spacing:-0.01em;color:var(--ink);margin:26px 0 0;max-width:15em;}
.detail__meta{display:flex;flex-wrap:wrap;gap:48px 72px;margin:clamp(48px,6vw,72px) 0 0;}
.detail__meta .lbl{font-family:var(--mono);font-size:11px;color:var(--faint-2);margin-bottom:8px;}
.detail__meta .val{font-size:14px;color:var(--ink-2);}
.detail__lead{font-family:var(--sans);font-weight:300;font-size:clamp(17px,1.7vw,21px);line-height:1.6;
  color:var(--ink-2);max-width:30em;margin:clamp(48px,6vw,72px) 0 0;}
.detail__hero-media{margin-top:clamp(56px,8vw,96px);aspect-ratio:16/9;background:var(--stripe);position:relative;}
.detail__hero-media .fig{position:absolute;left:20px;bottom:16px;font-family:var(--mono);font-size:11px;color:var(--faint);}
.detail__pair{display:flex;gap:28px;margin-top:28px;flex-wrap:wrap;}
.detail__pair > div{flex:1;min-width:260px;aspect-ratio:4/3;background:var(--stripe);position:relative;}
.detail__pair .fig{position:absolute;left:18px;bottom:14px;font-family:var(--mono);font-size:11px;color:var(--faint);}
.detail__body{max-width:62ch;margin-top:clamp(56px,8vw,96px);font-size:1.0625rem;line-height:1.7;color:var(--ink-soft);font-weight:300;}
.detail__body h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.4rem,2.4vw,2rem);line-height:1.15;
  margin:1.6em 0 .5em;color:var(--ink);}
.detail__body p{margin-bottom:1.1em;}
.detail__body strong{color:var(--ink);font-weight:500;}
.detail__body a{border-bottom:1px solid var(--faint-2);}
.detail__body img{width:100%;height:auto;margin:2em 0;background:var(--paper-2);}
.detail__next{display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  margin-top:clamp(64px,9vw,110px);padding-top:26px;border-top:1px solid rgba(28,27,24,.09);color:var(--ink);}
.detail__next .lbl{font-size:12.5px;letter-spacing:.09em;color:var(--faint-2);}
.detail__next .nm{flex:1;font-size:15px;color:var(--ink-soft);}

/* ---------- project overlay (zoom-open from card) ---------- */
.pv{position:fixed;inset:0;z-index:100;visibility:hidden;}
.pv.open{visibility:visible;}
.pv__backdrop{position:absolute;inset:0;background:rgba(244,243,239,.7);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .48s ease;}
.pv.open .pv__backdrop{opacity:1;}
.pv__panel{position:absolute;inset:0;overflow-y:auto;background:var(--paper);
  opacity:0;transform:scale(.94);transform-origin:var(--pv-origin,50% 50%);
  transition:transform .5s cubic-bezier(.16,1,.3,1), opacity .5s cubic-bezier(.16,1,.3,1);}
.pv.open .pv__panel{opacity:1;transform:scale(1);}
.pv__bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;
  padding:20px var(--gutter);background:rgba(250,250,248,.75);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
.pv__nav{background:none;border:none;padding:0;cursor:pointer;font-size:13px;color:var(--mute);}
.pv__nav:hover{color:var(--ink);}
.pv__barname{font-size:13px;color:var(--faint-2);}
.pv__body{max-width:1120px;margin:0 auto;padding:clamp(48px,8vw,110px) var(--gutter) clamp(90px,12vw,150px);}
.pv__qlabel{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--faint-2);}
.pv__q{font-family:var(--serif);font-weight:400;font-size:clamp(32px,5vw,68px);line-height:1.16;
  letter-spacing:-0.01em;color:var(--ink);margin:26px 0 0;max-width:15em;}
.pv__sub{font-family:var(--sans);font-weight:300;font-size:clamp(15px,1.5vw,18px);line-height:1.5;
  color:var(--faint);margin:20px 0 0;max-width:34em;}
.pv__sub[hidden]{display:none;}
.pv__gallery{margin-top:clamp(48px,6vw,80px);}
.pv__meta{display:flex;flex-wrap:wrap;gap:48px 72px;margin:clamp(48px,6vw,72px) 0 0;}
.pv__meta .lbl{font-family:var(--mono);font-size:11px;color:var(--faint-2);margin-bottom:8px;}
.pv__meta .val{font-size:14px;color:var(--ink-2);}
.pv__lead{font-family:var(--sans);font-weight:300;font-size:clamp(17px,1.7vw,21px);line-height:1.6;
  color:var(--ink-2);max-width:30em;margin:clamp(48px,6vw,72px) 0 0;}
.pv__hero{margin-top:clamp(56px,8vw,96px);aspect-ratio:16/9;background:var(--stripe);position:relative;}
.pv__hero .fig{position:absolute;left:20px;bottom:16px;font-family:var(--mono);font-size:11px;color:var(--faint);}
.pv__pair{display:flex;gap:28px;margin-top:28px;flex-wrap:wrap;}
.pv__pair:empty{display:none;}
.pv__pair > div{flex:1;min-width:260px;aspect-ratio:4/3;background:var(--stripe);position:relative;}
.pv__pair .fig{position:absolute;left:18px;bottom:14px;font-family:var(--mono);font-size:11px;color:var(--faint);}
.pv__methodwrap{margin-top:clamp(72px,10vw,120px);}
.pv__methodwrap.hide{display:none;}
.pv__method{display:flex;flex-direction:column;margin-top:36px;}
.pv__method .m{display:flex;gap:24px;padding:24px 0;border-top:1px solid rgba(28,27,24,.09);}
.pv__method .mn{font-family:var(--mono);font-size:12px;color:var(--line);min-width:28px;}
.pv__method .mt{font-size:15px;font-weight:500;color:var(--ink);margin-bottom:6px;}
.pv__method .mb{font-size:14px;color:var(--faint);max-width:34em;}
.pv__next{display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  margin-top:clamp(64px,9vw,110px);padding-top:26px;border-top:1px solid rgba(28,27,24,.09);color:var(--ink);}
.pv__nextname{flex:1;font-size:15px;color:var(--ink-soft);}
.pv__arrow{color:var(--accent);}
body.pv-open{overflow:hidden;}

/* ---------- reveal ---------- */
/* hidden state only when JS is present (html.js), so no-JS users still see everything */
.reveal{transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1);}
.js .reveal{opacity:0;transform:translateY(18px);}
.reveal.in{opacity:1;transform:none;}

/* ---------- responsive ---------- */
@media(max-width:900px){
  figure.card{margin-top:0;}
  .card__frame{aspect-ratio:4/3;}
  /* one column on mobile — for both the default grid and the filtered view */
  .work__grid,.work__grid.filtering{display:grid;grid-template-columns:1fr;
    row-gap:clamp(48px,10vw,80px);column-gap:0;}
  .work__grid > .card{grid-column:1 / -1 !important;margin-top:0;}
  .work__grid.filtering .card.match,.work__grid.filtering .card:not(.match){width:auto;margin-top:0;opacity:1;}
  .card__meta,.card__thumbs{display:none;}
  .card__overlay{opacity:1;position:static;background:none;padding:16px 0 0;pointer-events:auto;
    backdrop-filter:none;-webkit-backdrop-filter:none;}
  .card__overlay::before{display:none;}
  .card__q{font-size:1.15rem;}
  .card__qlabel{color:var(--faint);}
  .head nav .navsub{display:none;}
  .index__grid{grid-template-columns:1fr;}
  .index__preview{display:none;}
  .cv-line{grid-template-columns:1fr;gap:4px;}
  /* larger touch targets on mobile (>=~44px hit area) */
  .head{padding-block:8px;}
  .head nav a{padding-block:12px;}
  .work__chip,.work__reset{padding-block:11px;}
  .about__expand{padding-block:14px;margin-top:22px;}
  .contact__links a{padding-block:11px;}
}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.001ms !important;scroll-behavior:auto !important;}
  .reveal{opacity:1;transform:none;}
}

/* ---------- project subtitle ---------- */
.detail__sub{font-family:var(--sans);font-weight:300;font-size:clamp(15px,1.5vw,18px);line-height:1.5;
  color:var(--faint);margin-top:20px;max-width:34em;}

/* ---------- detail gallery: variable sizes, invisible grid ---------- */
.gallery{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(20px,3vw,36px);
  row-gap:clamp(48px,7vw,96px);align-items:start;margin-top:clamp(64px,9vw,110px);}
.g{margin:0;}
.g__frame{position:relative;overflow:hidden;background:var(--stripe);}
.g__frame > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.g__fig{position:absolute;left:14px;bottom:12px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.03em;color:var(--faint);}
.g__cap{margin-top:14px;font-size:12.5px;color:var(--faint);line-height:1.5;max-width:34em;}

.g--lg{grid-column:1 / -1;}
.g--lg .g__frame{aspect-ratio:16/10;}
.g--md{grid-column:span 6;}
.g--md .g__frame{aspect-ratio:4/3;}
.g--sm{grid-column:span 4;}
.g--sm .g__frame{aspect-ratio:1/1;}
.g--tall{grid-column:span 5;}
.g--tall .g__frame{aspect-ratio:3/4;}

@media(max-width:820px){
  .g--lg,.g--md,.g--sm,.g--tall{grid-column:1 / -1;}
  .g--lg .g__frame,.g--md .g__frame,.g--sm .g__frame,.g--tall .g__frame{aspect-ratio:4/3;}
  .gallery{row-gap:clamp(36px,8vw,56px);}
}