/* ==========================================================================
   DARRAGH DEMPSEY — IMAGE ARCHAEOLOGY
   warm-black gallery / bone ink / CRT cyan / cadmium
   ========================================================================== */

:root{
  --bg:      #0E0D0B;
  --bg2:     #14120F;
  --bg3:     #1B1915;
  --bg-rgb:  14,13,11;
  --ink-rgb: 234,229,217;
  --ink:     #EAE5D9;
  --mut:     #948D7C;
  --line:    rgba(234,229,217,.13);
  --line2:   rgba(234,229,217,.28);
  --cyan:    #57DFC4;
  --red:     #E4572E;
  --serif:   'Instrument Serif', Georgia, serif;
  --sans:    'Inter', -apple-system, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, monospace;
  --pad:     clamp(20px, 4vw, 64px);
  --ease:    cubic-bezier(.22,.61,.21,1);
}

/* light — warm paper, cobalt ink, cadmium accent (print / blueprint register) */
html[data-theme="light"]{
  --bg:      #EDE8DC;
  --bg2:     #E6E0D0;
  --bg3:     #DDD6C3;
  --bg-rgb:  237,232,220;
  --ink-rgb: 26,26,180;
  --ink:     #1A1AC8;
  --mut:     #6E6EB4;
  --line:    rgba(26,26,200,.16);
  --line2:   rgba(26,26,200,.42);
  --cyan:    #1A1AC8;
  --red:     #1A1AC8;
}
html[data-theme="light"] ::selection{ background:#57DFC4; color:#0B0B09; }
body, .nav, .foot, .artifact{ transition:background-color .5s ease, border-color .5s ease; }

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:auto; }
html, body{ background:var(--bg); }
body{
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:var(--cyan); color:#0B0B09; }

.mono{ font-family:var(--mono); font-weight:400; }
.label{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mut);
}
em, i{ font-style:italic; }

/* ---------- grain ---------- */
.grain{
  position:fixed; inset:-100px; z-index:2000; 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.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.03;
}
html[data-theme="light"] .grain{ opacity:.05; mix-blend-mode:multiply; }

/* ---------- page transition veil ---------- */
.veil{
  position:fixed; inset:0; z-index:3000; pointer-events:none;
  background:var(--bg);
  transform:scaleY(0); transform-origin:top;
  transition:transform .55s var(--ease);
}
.veil.on{ transform:scaleY(1); pointer-events:all; }
body.entering .veil{ transform-origin:bottom; }

/* ---------- preloader (home) ---------- */
.loader{
  position:fixed; inset:0; z-index:4000;
  background:var(--bg);
  display:flex; align-items:flex-end; justify-content:space-between;
  padding:var(--pad);
  transition:opacity .6s ease, visibility .6s;
}
.loader.off{ opacity:0; visibility:hidden; }
.loader .l-name{ font-family:var(--serif); font-size:clamp(20px,3vw,32px); }
.loader .l-name em{ color:var(--mut); }
.loader .l-pct{ font-family:var(--mono); font-size:12px; color:var(--cyan); letter-spacing:.1em; }

/* ---------- nav — solid band, image starts beneath (gallery style) ---------- */
:root{ --navh: 64px; }
.nav{
  position:fixed; top:0; left:0; right:0; z-index:900;
  height:var(--navh);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--pad);
  background:var(--bg);
  border-bottom:1px solid var(--line);
  transition:background-color .5s ease, border-color .5s ease;
}
.nav-name{
  font-family:var(--serif); font-size:20px; letter-spacing:.01em; color:var(--ink);
}
.nav-links{ display:flex; gap:clamp(14px,2.2vw,36px); }
.nav-links a{
  font-size:11.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--ink);
  position:relative; padding:4px 0;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--ink); transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease);
}
.nav-links a:hover::after, .nav-links a[aria-current]::after{
  transform:scaleX(1); transform-origin:left;
}
.nav-burger{ display:none; }
.theme-btn{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink); border:1px solid var(--line2); border-radius:999px;
  padding:7px 14px; margin-left:clamp(14px,2vw,30px);
  transition:background .3s, color .3s;
}
.theme-btn:hover{ background:var(--ink); color:var(--bg); }

html[data-theme="light"] .hero-tag .label{ color:rgba(26,26,200,.9); }
html[data-theme="light"] .hero-foot .hf{ color:rgba(26,26,200,.8); }
html[data-theme="light"] .hero-foot .hf b{ color:var(--ink); }

/* ==========================================================================
   HOME — FULLSCREEN SLIDESHOW
   ========================================================================== */
.show{
  position:fixed; inset:0; overflow:hidden; background:var(--bg);
}
.show-media{ position:absolute; inset:0; }
.show-media img, .show-media canvas{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:opacity .65s ease;
}
.show-caption{
  position:absolute; left:var(--pad); bottom:calc(var(--pad) * .75); z-index:10;
  display:flex; flex-direction:column; gap:6px;
  mix-blend-mode:difference; color:#fff;
  transition:opacity .4s ease;
}
.show-caption.dim{ opacity:0; }
.sc-title{
  font-family:var(--serif); font-size:clamp(26px,3.4vw,44px); line-height:1.05;
}
.show-caption:hover .sc-title{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.14em; }
.sc-meta{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; opacity:.8; }
.show-ctrl{
  position:absolute; right:var(--pad); bottom:calc(var(--pad) * .75); z-index:10;
  display:flex; align-items:center; gap:16px;
  mix-blend-mode:difference; color:#fff;
}
.show-arrow{
  font-family:var(--mono); font-size:17px; color:#fff;
  border:1px solid rgba(255,255,255,.45); border-radius:50%;
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  transition:background .3s, color .3s;
}
.show-arrow:hover{ background:#fff; color:#000; }
.show-count{ font-size:11px; letter-spacing:.14em; }

/* ==========================================================================
   CATEGORY PAGES — visual grid
   ========================================================================== */
.cat-page{ padding-top:clamp(110px,16vh,170px); min-height:70vh; }
.cat-page .page-head{ margin-bottom:clamp(36px,6vh,70px); }
.cat-intro{
  padding:0 var(--pad); margin:-14px 0 clamp(44px,7vh,80px);
}
.cat-intro p{
  max-width:66ch; font-size:16px; line-height:1.8; color:rgba(var(--ink-rgb),.85);
}
.cat-grid{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(48px,7vh,90px) clamp(28px,4vw,64px);
  padding:0 var(--pad) clamp(60px,10vh,120px);
  max-width:1480px;
}
.card{ }
.card .card-im{ overflow:hidden; background:var(--bg2); }
.card img{ width:100%; transition:transform 1s var(--ease); }
.card a:hover img{ transform:scale(1.015); }
.card figcaption{
  margin-top:14px; display:flex; flex-direction:column; gap:3px;
}
.card .ct{ font-family:var(--serif); font-size:clamp(19px,1.8vw,25px); line-height:1.15; }
.card .ct a:hover{ color:var(--cyan); }
.card .ct .aw{ color:var(--red); font-size:.4em; vertical-align:middle; font-style:normal; }
.card .cm{ font-size:11px; color:var(--mut); letter-spacing:.05em; }
.card .cy{ font-size:11px; color:var(--mut); letter-spacing:.12em; }
@media (max-width:720px){
  .cat-grid{ grid-template-columns:1fr; }
}

/* ---------- contact page ---------- */
.contact-grid{
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:clamp(40px,6vw,110px);
  padding:0 var(--pad) clamp(60px,10vh,120px);
  max-width:1480px;
}
.contact-links-col{ display:flex; flex-direction:column; gap:clamp(30px,5vh,50px); }
.cbig{ display:flex; flex-direction:column; gap:10px; }
.cbig-t{
  font-family:var(--serif); font-size:clamp(24px,2.6vw,38px); line-height:1.12;
}
a.cbig:hover .cbig-t{ color:var(--cyan); }
.cform{ display:flex; flex-direction:column; gap:26px; max-width:560px; }
.cform .hidden-field{ display:none; }
.cf-row{ display:flex; flex-direction:column; gap:9px; }
.cf-row span{
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--mut);
}
.cf-row input, .cf-row textarea{
  background:transparent; border:0; border-bottom:1px solid var(--line2);
  padding:10px 2px; font-family:var(--sans); font-weight:300; font-size:16px;
  color:var(--ink); outline:none; resize:vertical;
  transition:border-color .3s;
}
.cf-row input:focus, .cf-row textarea:focus{ border-bottom-color:var(--cyan); }
.cform .btn{ align-self:flex-start; margin-top:6px; }
@media (max-width:900px){
  .contact-grid{ grid-template-columns:1fr; }
}

/* block-highlight for bold text (drag-select look) */
.cat-intro strong, .proj-body strong, .info-main p strong, .bio strong{
  font-weight:400; color:var(--bg) !important;
  background:var(--ink);
  padding:.05em .3em; margin:0 .05em;
  box-decoration-break:clone; -webkit-box-decoration-break:clone;
}

/* ==========================================================================
   HOME — HERO
   ========================================================================== */
.hero{
  position:relative; height:100svh; min-height:600px;
  display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden;
}
.hero-media{ position:absolute; inset:0; }
.hero-media canvas, .hero-media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to top, var(--bg) 4%, rgba(var(--bg-rgb),.42) 34%, rgba(var(--bg-rgb),.18) 62%, rgba(var(--bg-rgb),.55) 100%);
}
.hero-tag{
  position:absolute; top:84px; left:var(--pad); z-index:5;
  display:flex; align-items:center; gap:10px;
}
.hero-tag .dot{
  width:7px; height:7px; border-radius:50%; background:var(--cyan);
  box-shadow:0 0 12px var(--cyan);
  animation:pulse 2.4s ease infinite;
}
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }

.hero-inner{ position:relative; z-index:5; padding:0 var(--pad) 0; }
.hero-name{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(64px, 14vw, 220px);
  line-height:.88; letter-spacing:.035em;
  text-transform:uppercase;
}
.hero-name .ln{
  display:block; overflow:hidden;
  padding-bottom:.18em; margin-bottom:-.18em;   /* room for descenders inside the mask */
}
.hero-name .ln > span{ display:inline-block; transform:translateY(130%); transition:transform 1.1s var(--ease); }
.hero-name .ln:nth-child(2) > span{ transition-delay:.08s; }
.hero-name .ln em{ font-style:italic; text-transform:none; letter-spacing:.012em; }
body.ready .hero-name .ln > span{ transform:translateY(0); }

.hero-foot{
  position:relative; z-index:5;
  display:flex; justify-content:space-between; align-items:flex-end; gap:24px;
  padding:26px var(--pad) 30px;
  border-top:1px solid transparent;
}
.hero-foot .hf{ font-family:var(--mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:rgba(var(--ink-rgb),.75); }
.hero-foot .hf b{ font-weight:500; color:var(--ink); }
.hero-scroll{ display:flex; align-items:center; gap:8px; }
.hero-scroll .bar{
  width:1px; height:34px; background:var(--line2); position:relative; overflow:hidden;
}
.hero-scroll .bar::after{
  content:""; position:absolute; left:0; top:-100%; width:100%; height:100%;
  background:var(--cyan); animation:drip 1.8s var(--ease) infinite;
}
@keyframes drip{ to{ top:100%; } }

/* ---------- section scaffolding ---------- */
.sec{ padding:clamp(90px,12vh,170px) var(--pad); position:relative; }
.sec-head{ display:flex; align-items:baseline; gap:18px; margin-bottom:clamp(40px,6vh,80px); }
.sec-head .n{ font-family:var(--mono); font-size:11px; color:var(--mut); letter-spacing:.14em; }
.sec-head h2{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(38px,5.6vw,84px); line-height:1.02; letter-spacing:-.01em;
}
.sec-head h2 em{ color:var(--mut); }
.rule{ border:0; border-top:1px solid var(--line); margin:0 var(--pad); }

/* ---------- statement strip ---------- */
.statement{ max-width:1180px; }
.statement .big{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(30px,4.4vw,66px); line-height:1.14; letter-spacing:-.005em;
  text-wrap:balance;
}
.statement .big em{ font-style:italic; color:var(--cyan); }
.statement .sub{
  margin-top:36px; max-width:560px; color:var(--mut); font-size:15px;
}
.statement .sub b{ color:var(--ink); font-weight:400; }

/* ---------- selected works (editorial) ---------- */
.sel{ display:flex; flex-direction:column; gap:clamp(80px,14vh,180px); }
.sel-item{
  display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(16px,2.4vw,40px);
  align-items:end; position:relative;
}
.sel-media{ grid-column:1 / span 8; position:relative; }
.sel-item:nth-child(even) .sel-media{ grid-column:5 / span 8; order:2; }
.sel-item:nth-child(even) .sel-txt{ order:1; grid-column:1 / span 4; }
.sel-txt{ grid-column:9 / span 4; padding-bottom:6px; }

.sel-media a{ display:block; position:relative; overflow:hidden; }
.sel-media .im{
  position:relative; overflow:hidden;
  clip-path:inset(0 0 14% 0); opacity:0;
  transition:clip-path 1s var(--ease), opacity 1s ease;
}
[data-reveal].in .im, .sel-item.in .im{ clip-path:inset(0 0 0% 0); opacity:1; }
.sel-media img{
  width:100%; transform:scale(1.04);
  transition:transform 1.2s var(--ease), filter .5s ease;
  will-change:transform;
}
.sel-media a:hover img{ transform:scale(1.015); }
.sel-media .sel-cap{
  display:flex; justify-content:space-between; gap:14px; margin-top:12px;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--mut);
}
.sel-num{
  position:absolute; z-index:3; pointer-events:none;
  top:-.42em; left:-.18em;
  font-family:var(--serif); font-size:clamp(64px,8vw,128px); line-height:1;
  color:transparent; -webkit-text-stroke:1.5px rgba(var(--ink-rgb),.55);
}

.sel-txt .yr{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--mut); }
.sel-txt h3{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(30px,3.2vw,52px); line-height:1.02; margin:10px 0 14px;
}
.sel-txt h3 a{ background-image:linear-gradient(currentColor,currentColor); background-size:0% 1px; background-repeat:no-repeat; background-position:0 96%; transition:background-size .5s var(--ease); }
.sel-txt h3 a:hover{ background-size:100% 1px; }
.sel-txt .med{ font-family:var(--mono); font-size:12px; color:var(--mut); line-height:1.7; }
.sel-txt .aw{ display:inline-flex; align-items:center; gap:8px; margin-top:14px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--red); }
.sel-txt .aw::before{ content:"●"; font-size:8px; }
.sel-all{ margin-top:clamp(60px,9vh,120px); text-align:center; }

.btn{
  display:inline-flex; align-items:center; gap:14px;
  font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  border:1px solid var(--line2); border-radius:999px; padding:16px 30px;
  transition:border-color .35s, background .35s, color .35s;
}
.btn:hover{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
.btn .arr{ transition:transform .35s var(--ease); }
.btn:hover .arr{ transform:translateX(5px); }

/* ---------- compare slider ---------- */
.compare-wrap{ max-width:1280px; margin:0 auto; }
.compare{
  position:relative; overflow:hidden; user-select:none; touch-action:none;
  cursor:ew-resize; aspect-ratio:1800/1012; background:var(--bg2);
}
.compare img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.compare .top{ clip-path:inset(0 0 0 50%); }
.compare .cbar{
  position:absolute; top:0; bottom:0; left:50%; width:1px; background:var(--ink);
  box-shadow:0 0 18px rgba(0,0,0,.6);
}
.compare .cbar::after{
  content:"↔"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:44px; height:44px; border-radius:50%;
  background:var(--ink); color:var(--bg);
  display:flex; align-items:center; justify-content:center; font-size:15px;
}
.compare-tags{
  display:flex; justify-content:space-between; margin-top:12px;
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--mut);
}
.compare-tags .t2{ color:var(--cyan); }

/* ---------- 3D artifact ---------- */
.artifact{ background:var(--bg2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.artifact-tabs{
  display:flex; flex-wrap:wrap; gap:10px; margin-bottom:clamp(30px,5vh,54px);
}
.atab{
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--mut); border:1px solid var(--line); border-radius:999px;
  padding:11px 20px; transition:all .3s; display:inline-flex; gap:10px; align-items:center;
}
.atab .ix{ color:var(--cyan); }
.atab:hover{ color:var(--ink); border-color:var(--line2); }
.atab.on{ color:var(--ink); border-color:var(--ink); background:rgba(var(--ink-rgb),.04); }
#artifactViewer{ transition:opacity .35s ease; }
#artifactViewer.swapping{ opacity:0; }
.artifact-grid{
  display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(24px,4vw,72px); align-items:center;
}
.artifact model-viewer{
  width:100%; height:clamp(380px,58vh,620px);
  --poster-color:transparent;
  background:transparent;
}
.artifact-info .label{ margin-bottom:18px; }
.artifact-info h3{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(34px,4vw,60px); line-height:1.03; margin-bottom:22px;
}
.artifact-info h3 em{ color:var(--mut); }
.artifact-info p{ color:var(--mut); font-size:15px; max-width:46ch; }
.artifact-specs{
  margin-top:30px; border-top:1px solid var(--line);
}
.artifact-specs .sp{
  display:flex; justify-content:space-between; gap:16px;
  padding:11px 0; border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:11.5px; letter-spacing:.06em;
}
.artifact-specs .sp span:first-child{ color:var(--mut); text-transform:uppercase; letter-spacing:.12em; }
.artifact-hint{ margin-top:18px; font-family:var(--mono); font-size:11px; color:var(--cyan); letter-spacing:.12em; text-transform:uppercase; }
.variant{
  margin-top:22px; display:flex; align-items:center; gap:10px;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
}
.variant .vlabel, .variant .vsep{ color:var(--mut); }
.vbtn{
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--mut); padding:2px 0; border-bottom:1px solid transparent;
  transition:color .3s, border-color .3s;
}
.vbtn:hover{ color:var(--ink); }
.vbtn.on{ color:var(--ink); border-bottom-color:var(--cyan); }
.variant.hidden{ display:none; }

/* ---------- recognition marquee ---------- */
.recog{ padding:clamp(70px,9vh,120px) 0; overflow:hidden; border-bottom:1px solid var(--line); }
.recog .label{ padding:0 var(--pad); margin-bottom:34px; }
.marquee{ display:flex; overflow:hidden; }
.marquee-track{
  display:flex; align-items:baseline; gap:0; flex-shrink:0;
  animation:mq 36s linear infinite;
}
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes mq{ to{ transform:translateX(-50%); } }
.mq-i{
  font-family:var(--serif); font-size:clamp(30px,4.4vw,64px); white-space:nowrap;
  padding:0 .35em; line-height:1.25;
}
.mq-i em{ color:var(--mut); }
.mq-sep{ color:var(--red); font-size:.5em; vertical-align:middle; padding:0 .5em; }

/* ---------- about teaser ---------- */
.about-teaser{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(28px,5vw,90px); align-items:center; }
.about-teaser .im{ overflow:hidden; }
.about-teaser img{ width:100%; filter:grayscale(1) contrast(1.05); transition:filter .7s ease; }
.about-teaser .im:hover img{ filter:grayscale(0) contrast(1); }
.about-teaser h2{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(30px,3.8vw,56px); line-height:1.1; margin:14px 0 22px;
  max-width:18ch;
}
.about-teaser p{ color:var(--mut); max-width:52ch; font-size:15px; }
.about-teaser .btn{ margin-top:34px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{ border-top:1px solid var(--line); padding:clamp(36px,6vh,60px) var(--pad) 34px; }
.foot-cta .label{ margin-bottom:26px; }
.foot-big{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(38px,6.4vw,96px); line-height:1.04; letter-spacing:-.01em;
  display:inline-block; max-width:16ch;
}
.foot-big em{ color:var(--cyan); font-style:italic; }
.foot-big:hover em{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:.08em; }
.foot-meta{
  display:flex; flex-wrap:wrap; gap:14px 38px;
  font-size:11.5px; letter-spacing:.08em; color:var(--mut);
}
.foot .foot-cta + .foot-meta{ margin-top:clamp(60px,9vh,110px); padding-top:24px; border-top:1px solid var(--line); }
.foot-meta a:hover{ color:var(--ink); }

/* ==========================================================================
   WORK INDEX PAGE
   ========================================================================== */
.index-page, .proj, .info-page{ padding-top:clamp(120px,18vh,190px); }
.page-head{ padding:0 var(--pad); margin-bottom:clamp(44px,7vh,90px); }
.page-head .label{ margin-bottom:22px; }
.page-head h1{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(42px,7vw,110px); line-height:.98; letter-spacing:-.015em;
}
.page-head h1 em{ font-style:italic; color:var(--mut); }

.filters{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  padding:0 var(--pad); margin-bottom:clamp(30px,5vh,60px);
}
.fbtn{
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--mut); border:1px solid var(--line); border-radius:999px;
  padding:9px 18px; transition:all .3s;
}
.fbtn:hover{ color:var(--ink); border-color:var(--line2); }
.fbtn.on{ color:var(--bg); background:var(--ink); border-color:var(--ink); }
.fcount{ margin-left:auto; font-size:11px; color:var(--mut); letter-spacing:.12em; }

.index-list{ padding:0 var(--pad) 40px; }
.yr-group{ margin-bottom:clamp(36px,6vh,64px); }
.yr-group.hide{ display:none; }
.yr-head{
  display:flex; align-items:center; gap:18px;
  font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--mut);
  margin-bottom:6px;
}
.yr-head .yr-ln{ flex:1; height:1px; background:var(--line); }

.row{
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,2fr) auto;
  gap:18px; align-items:baseline;
  padding:20px 0; border-bottom:1px solid var(--line);
  position:relative; transition:opacity .3s, padding-left .45s var(--ease);
}
.row.hide{ display:none; }
.row-title{
  font-family:var(--serif); font-size:clamp(22px,2.6vw,38px); line-height:1.05;
  transition:color .3s;
}
.row-title .aw{ color:var(--red); font-size:.34em; vertical-align:middle; font-style:normal; }
.row-med, .row-cat{ font-size:11.5px; color:var(--mut); letter-spacing:.04em; }
.row-cat{ text-align:right; letter-spacing:.1em; text-transform:uppercase; }
.row-arr{ color:var(--mut); font-size:14px; transform:translateX(-6px); opacity:0; transition:all .35s var(--ease); }
.row:hover{ padding-left:14px; }
.row:hover .row-title{ color:var(--cyan); }
.row:hover .row-arr{ transform:translateX(0); opacity:1; color:var(--cyan); }
.index-list.peeking .row:not(:hover){ opacity:.36; }

/* docked peek preview — consistent place, right side */
.peek{
  position:fixed; z-index:800; pointer-events:none;
  width:min(380px,28vw); aspect-ratio:4/3;
  right:var(--pad); top:50%;
  opacity:0;
  transition:opacity .45s ease;
  overflow:hidden;
}
.peek.on{ opacity:1; }
.peek canvas, .peek img{ width:100%; height:100%; object-fit:cover; }
@media (hover:none){ .peek{ display:none; } }

/* ==========================================================================
   PROJECT PAGE
   ========================================================================== */
.proj{ }
.proj-head{ padding:0 var(--pad); margin-bottom:clamp(30px,5vh,56px); }
.crumb{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--mut); margin-bottom:22px; }
.crumb a:hover{ color:var(--cyan); }
.crumb .sl{ padding:0 8px; }
.proj-title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(44px,8vw,128px); line-height:.96; letter-spacing:-.015em;
  max-width:14ch;
}
.proj-hero{ padding:0 var(--pad); margin-bottom:clamp(40px,7vh,80px); }
.ph-frame{ overflow:hidden; }
.ph-frame img{ width:100%; }
.proj-hero figcaption, .pi figcaption{
  margin-top:12px; font-size:11px; letter-spacing:.08em; color:var(--mut);
}

.proj-cols{
  display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  gap:clamp(28px,5vw,90px);
  padding:0 var(--pad); margin-bottom:clamp(60px,10vh,120px);
}
.proj-meta{ align-self:start; position:sticky; top:110px; border-top:1px solid var(--line2); }
.pm-row{
  display:grid; grid-template-columns:110px 1fr; gap:14px;
  padding:12px 0; border-bottom:1px solid var(--line);
  font-size:11.5px; line-height:1.6; letter-spacing:.03em;
}
.pm-k{ color:var(--mut); text-transform:uppercase; letter-spacing:.12em; font-size:10.5px; padding-top:1px; }
.pm-award .pm-v{ color:var(--red); }
.proj-body p{ font-size:16.5px; line-height:1.8; color:rgba(var(--ink-rgb),.86); max-width:62ch; }
.proj-body p + p{ margin-top:1.4em; }
.proj-body .lead{
  font-family:var(--serif); font-size:clamp(22px,2.4vw,31px); line-height:1.35;
  color:var(--ink);
}
.proj-body em{ color:var(--ink); }

.proj-images{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,44px);
  padding:0 var(--pad); margin-bottom:clamp(60px,10vh,120px);
}
.pi{ }
.pi.wide{ grid-column:1 / -1; }
.pi img{ width:100%; }

.proj-nav{
  display:grid; grid-template-columns:1fr 1fr;
  border-top:1px solid var(--line);
}
.pn{
  padding:clamp(30px,5vh,54px) var(--pad);
  display:flex; flex-direction:column; gap:10px;
  transition:background .35s;
}
.pn:hover{ background:var(--bg2); }
.pn.next{ text-align:right; border-left:1px solid var(--line); }
.pn-t{ font-family:var(--serif); font-size:clamp(24px,3vw,44px); line-height:1.05; }
.pn:hover .pn-t{ color:var(--cyan); }

/* ==========================================================================
   INFORMATION PAGE
   ========================================================================== */
.info-grid{
  display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr);
  gap:clamp(30px,5vw,100px);
  padding:0 var(--pad);
}
.info-side{ align-self:start; position:sticky; top:110px; }
.info-side .im{ overflow:hidden; margin-bottom:22px; }
.info-side img{ width:100%; filter:grayscale(1) contrast(1.06); transition:filter .8s ease; }
.info-side .im:hover img{ filter:none; }
.info-side .caption{ font-size:11px; color:var(--mut); letter-spacing:.08em; }
.info-side .side-links{ margin-top:26px; display:flex; flex-direction:column; gap:8px; }
.info-side .side-links a{
  font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--mut);
  transition:color .3s;
}
.info-side .side-links a:hover{ color:var(--cyan); }

.info-main .blk{ margin-bottom:clamp(50px,8vh,90px); }
.info-main .blk > .label{ margin-bottom:24px; }
.info-main p.bio-lead{
  font-family:var(--serif); font-size:clamp(24px,3vw,40px); line-height:1.28; letter-spacing:-.005em;
  margin-bottom:26px; text-wrap:balance; color:var(--ink); max-width:24ch;
}
.bio-lead em{ color:var(--cyan); }
.info-main p{ font-size:15.5px; line-height:1.8; color:rgba(var(--ink-rgb),.85); max-width:64ch; }
.info-main p + p{ margin-top:1.3em; }
.stmt p em{ color:var(--ink); }

.cv-rows{ border-top:1px solid var(--line2); }
.cv-row{
  display:grid; grid-template-columns:110px 1fr; gap:18px;
  padding:16px 0; border-bottom:1px solid var(--line);
}
.cv-row .y{ font-family:var(--mono); font-size:11.5px; color:var(--mut); letter-spacing:.08em; padding-top:4px; }
.cv-row .h{ font-size:15px; font-weight:400; color:var(--ink); }
.cv-row .s{ font-size:13px; color:var(--mut); margin-top:3px; }
.cv-row .s em{ color:rgba(var(--ink-rgb),.7); }
.cv-row.hl .h{ color:var(--red); }

/* ==========================================================================
   REVEALS / MOTION
   ========================================================================== */
[data-reveal]{
  opacity:0; transform:translateY(14px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
[data-reveal].in{ opacity:1; transform:none; }

[data-split] .sw{
  display:inline-block; overflow:hidden; vertical-align:top;
  padding-bottom:.16em; margin-bottom:-.16em;   /* room for descenders inside the mask */
}
[data-split] .sw > span{ display:inline-block; transform:translateY(125%); transition:transform 1s var(--ease); }
[data-split].in .sw > span{ transform:translateY(0); }

.plx{ overflow:hidden; }
.plx img{ will-change:transform; transform:scale(1.12); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1024px){
  .proj-cols{ grid-template-columns:1fr; }
  .proj-meta{ position:static; }
  .artifact-grid{ grid-template-columns:1fr; }
  .info-grid{ grid-template-columns:1fr; }
  .info-side{ position:static; max-width:420px; }
}
@media (max-width:820px){
  .sel-item, .sel-item:nth-child(even){ display:flex; flex-direction:column; align-items:stretch; gap:18px; }
  .sel-txt{ order:2; }
  .sel-media{ order:1; }
  .sel-num{ display:none; }
  .row{ grid-template-columns:1fr auto; grid-template-rows:auto auto; gap:4px 14px; }
  .row-med{ grid-column:1 / -1; }
  .row-cat{ display:none; }
  .about-teaser{ grid-template-columns:1fr; }
  .about-teaser .im{ max-width:380px; }
  .proj-images{ grid-template-columns:1fr; }
  .proj-nav{ grid-template-columns:1fr; }
  .pn.next{ border-left:0; border-top:1px solid var(--line); text-align:left; }

  .nav{ mix-blend-mode:normal; }
  .nav.solid{ background:linear-gradient(rgba(14,13,11,.92), rgba(14,13,11,0)); }
  .nav-links{
    position:fixed; inset:0; z-index:-1;
    background:var(--bg);
    flex-direction:column; align-items:flex-start; justify-content:center;
    padding:var(--pad); gap:26px;
    opacity:0; pointer-events:none; transition:opacity .4s;
  }
  body.menu-open .nav-links{ opacity:1; pointer-events:all; z-index:950; }
  .nav-links a{ font-size:26px; font-family:var(--serif); text-transform:none; letter-spacing:0; color:var(--ink); }
  .nav-name{ color:var(--ink); }
  .theme-btn{
    color:var(--ink); border-color:var(--line2);
    margin-left:auto; margin-right:16px; z-index:960; position:relative;
  }
  .theme-btn:hover{ background:var(--ink); color:var(--bg); }
  .nav-burger{
    display:flex; flex-direction:column; gap:6px; z-index:960; padding:6px;
  }
  .nav-burger span{ width:26px; height:1.5px; background:var(--ink); transition:transform .35s var(--ease); display:block; }
  body.menu-open .nav-burger span:first-child{ transform:translateY(3.75px) rotate(45deg); }
  body.menu-open .nav-burger span:last-child{ transform:translateY(-3.75px) rotate(-45deg); }
  .nav-name{ z-index:960; position:relative; }
}
@media (max-width:520px){
  .hero-foot .hf:nth-child(2){ display:none; }
  .foot-meta{ flex-direction:column; gap:10px; }
}

@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation-duration:.001s !important; transition-duration:.001s !important; }
  [data-reveal], [data-split] .sw > span, .hero-name .ln > span{ opacity:1 !important; transform:none !important; }
}