/* ============ TOKENS ============ */
:root{
  --paper:    #EFEDE6;   /* warm off-white */
  --paper-2:  #E5E2D9;   /* deeper warm surface */
  --ink:      #15151C;   /* near-black, indigo undertone */
  --ink-2:    #23232E;
  --muted:    #6A6A73;
  --accent:   #2436D8;   /* electric cobalt — used sparingly */
  --line:     rgba(21,21,28,0.14);

  --display: "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --body:    "Hanken Grotesk", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --pad: clamp(1.25rem, 5vw, 5rem);
  --maxw: 1400px;
}

/* ============ RESET / BASE ============ */
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(1rem, 0.95rem + 0.25vw, 1.15rem);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
::selection{ background:var(--accent); color:var(--paper); }

.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); }

.label{
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--muted);
}

/* ============ NAV ============ */
header.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  backdrop-filter:saturate(140%) blur(8px);
  background:color-mix(in srgb, var(--paper) 82%, transparent);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, background .3s ease;
}
header.nav.scrolled{ border-color:var(--line); }
.nav-inner{
  max-width:var(--maxw); margin:0 auto; padding:0.9rem var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.brand{ font-family:var(--display); font-weight:700; letter-spacing:-0.01em; font-size:1.05rem; }
.brand span{ color:var(--accent); }
.nav-links{ display:flex; gap:clamp(1rem,3vw,2.25rem); }
.nav-links a{
  font-family:var(--mono); font-size:0.78rem; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--ink); position:relative; padding:.25rem 0;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:1.5px; width:0;
  background:var(--accent); transition:width .35s cubic-bezier(.2,.7,.2,1);
}
.nav-links a:hover::after, .nav-links a:focus-visible::after{ width:100%; }

/* ============ HERO ============ */
.hero{ padding-top:clamp(7rem, 14vh, 11rem); padding-bottom:clamp(3rem,7vw,6rem); }
.hero .eyebrow{ display:flex; gap:1rem; align-items:center; margin-bottom:clamp(1.5rem,4vw,2.5rem); }
.hero .eyebrow .dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); }

.wordmark{
  font-family:var(--display);
  font-weight:800;
  line-height:0.86;
  letter-spacing:-0.035em;
  font-size:clamp(3.4rem, 15.5vw, 14rem);
  text-transform:uppercase;
}
.wordmark .ln{ display:block; overflow:hidden; }
.wordmark .ln > span{ display:block; will-change:transform; }
.wordmark .ln:last-child{ color:var(--accent); -webkit-text-stroke:0; }

.hero-foot{
  margin-top:clamp(2rem,5vw,3.5rem);
  display:flex; flex-wrap:wrap; gap:2rem 3rem; align-items:flex-end;
  justify-content:space-between;
}
.hero-foot p.lead{
  max-width:40ch; font-size:clamp(1.1rem,1rem + 0.6vw,1.5rem);
  line-height:1.4; color:var(--ink);
}
.disciplines{ display:flex; flex-wrap:wrap; gap:.5rem; }
.disciplines span{
  font-family:var(--mono); font-size:0.72rem; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--muted);
  border:1px solid var(--line); border-radius:999px; padding:.4rem .8rem;
}

/* ============ SECTION SHELL ============ */
section{ padding-block:clamp(3.5rem,8vw,7rem); }
.sec-head{
  display:flex; align-items:baseline; gap:1rem;
  border-top:1px solid var(--line); padding-top:1.25rem; margin-bottom:clamp(2rem,5vw,3.5rem);
}
.sec-head .num{ font-family:var(--mono); font-size:0.8rem; color:var(--accent); }
.sec-head h2{
  font-family:var(--display); font-weight:500; letter-spacing:-0.01em;
  font-size:clamp(1.5rem,1rem + 2vw,2.6rem); line-height:1;
}

/* ============ WORK INDEX (signature) ============ */
.index{ position:relative; }
.row{
  display:grid; grid-template-columns: 1fr auto auto;
  gap:1rem 2rem; align-items:center;
  border-bottom:1px solid var(--line);
  padding:clamp(1.1rem,2.5vw,1.9rem) 0;
  cursor:pointer; position:relative;
  transition:padding-left .4s cubic-bezier(.2,.7,.2,1), color .3s ease;
}
.row .arrow{ color:var(--accent); opacity:0; transform:translateX(-8px);
  transition:opacity .3s ease, transform .3s ease; font-family:var(--mono); }
.row:hover, .row:focus-within{ padding-left:clamp(.6rem,2vw,1.4rem); }
.row:hover .arrow, .row:focus-within .arrow{ opacity:1; transform:translateX(0); }
.row .title{
  font-family:var(--display); font-weight:500; letter-spacing:-0.015em;
  font-size:clamp(1.5rem, 1rem + 3vw, 3.4rem); line-height:1.02;
  transition:color .3s ease;
}
.row:hover .title, .row:focus-within .title{ color:var(--accent); }
.row .meta{ font-family:var(--mono); font-size:0.78rem; color:var(--muted); white-space:nowrap; }
.row .yr{ font-family:var(--mono); font-size:0.78rem; color:var(--muted); }

/* floating cursor preview (desktop) */
.preview{
  position:fixed; top:0; left:0; z-index:5;
  width:min(30vw, 360px); aspect-ratio:4/3;
  border-radius:6px; overflow:hidden; pointer-events:none;
  opacity:0; transform:translate(-50%,-50%) scale(.92);
  transition:opacity .25s ease, transform .35s cubic-bezier(.2,.7,.2,1);
  box-shadow:0 30px 60px -25px rgba(21,21,28,.45);
}
.preview.show{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.preview .thumb{ width:100%; height:100%; }

/* inline thumbs for mobile / no-hover */
.row .inline-thumb{ display:none; }

/* duotone placeholder thumbs — REPLACE with <img> when you have artwork */
.thumb{ background:var(--paper-2); display:grid; place-items:center; }
.thumb b{ font-family:var(--display); font-weight:700; font-size:1.4rem; color:var(--paper);
  mix-blend-mode:overlay; letter-spacing:-.01em; text-align:center; padding:1rem; }
.t1{ background:linear-gradient(135deg,#2436D8,#5560e8); }
.t2{ background:linear-gradient(135deg,#1f5d4c,#3a8f74); }
.t3{ background:linear-gradient(135deg,#b8533a,#d98461); }
.t4{ background:linear-gradient(135deg,#3a3550,#6a5f8f); }
.t5{ background:linear-gradient(135deg,#23232E,#4a4a5e); }
.t6{ background:linear-gradient(135deg,#c79a3a,#e3c46b); }

/* ============ GALLERY GRID ============ */
.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.75rem,1.5vw,1.25rem); }
.tile{ position:relative; overflow:hidden; border-radius:4px; }
.tile .thumb{ aspect-ratio:4/5; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.tile:hover .thumb{ transform:scale(1.04); }
.tile figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:.9rem 1rem;
  background:linear-gradient(to top, rgba(21,21,28,.7), transparent);
  color:var(--paper); font-family:var(--mono); font-size:.72rem;
  letter-spacing:.06em; text-transform:uppercase;
  opacity:0; transform:translateY(6px); transition:opacity .3s ease, transform .3s ease;
}
.tile:hover figcaption, .tile:focus-within figcaption{ opacity:1; transform:translateY(0); }

/* ============ ABOUT ============ */
.about-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:start; }
.about-grid p{ font-size:clamp(1.15rem,1rem + 0.7vw,1.6rem); line-height:1.45; max-width:30ch; }
.about-grid p + p{ margin-top:1.25rem; }
.caps{ display:grid; gap:.6rem; }
.caps .label{ margin-bottom:.4rem; }
.caps ul{ list-style:none; display:grid; gap:.55rem; }
.caps li{ display:flex; justify-content:space-between; gap:1rem;
  border-bottom:1px solid var(--line); padding-bottom:.55rem; font-size:.98rem; }
.caps li span:last-child{ font-family:var(--mono); font-size:.78rem; color:var(--muted); }

/* ============ CONTACT (inverted) ============ */
.contact{ background:var(--ink); color:var(--paper); border-radius:14px;
  margin-inline:var(--pad); padding:clamp(2.5rem,7vw,6rem) clamp(1.5rem,5vw,5rem);
  margin-block:clamp(2rem,5vw,4rem); }
.contact .label{ color:#9a9aa6; }
.contact .big{
  font-family:var(--display); font-weight:700; letter-spacing:-0.025em;
  line-height:.95; font-size:clamp(2.2rem, 1rem + 7vw, 6rem);
  margin:1rem 0 2rem; word-break:break-word;
}
.contact a.email{ color:var(--paper); border-bottom:2px solid var(--accent);
  transition:color .3s ease; }
.contact a.email:hover{ color:#9aa6ff; }
.contact-links{ display:flex; flex-wrap:wrap; gap:1.5rem; margin-top:1rem; }
.contact-links a{ font-family:var(--mono); font-size:.85rem; letter-spacing:.05em;
  text-transform:uppercase; color:var(--paper); opacity:.85; transition:opacity .3s; }
.contact-links a:hover{ opacity:1; color:#9aa6ff; }

footer.foot{ padding:2.5rem var(--pad) 3.5rem; display:flex; flex-wrap:wrap; gap:1rem;
  justify-content:space-between; color:var(--muted); font-family:var(--mono); font-size:.75rem; }

/* ============ PROJECT PAGE ============ */
.p-hero{ padding-top:clamp(7rem,14vh,11rem); padding-bottom:clamp(2rem,5vw,3.5rem); }
.p-back{ font-family:var(--mono); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); display:inline-flex; gap:.5rem; align-items:center; margin-bottom:clamp(1.5rem,4vw,2.5rem);
  transition:color .3s ease; }
.p-back:hover{ color:var(--accent); }
.p-eyebrow{ display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:clamp(1rem,3vw,1.75rem); }
.p-title{
  font-family:var(--display); font-weight:800; letter-spacing:-0.03em; line-height:.92;
  text-transform:uppercase; font-size:clamp(2.6rem, 1rem + 9vw, 8rem);
}
.p-lead{ margin-top:clamp(1.25rem,3vw,2rem); max-width:46ch;
  font-size:clamp(1.15rem,1rem + 0.7vw,1.65rem); line-height:1.4; }

.p-meta{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem 2rem;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding-block:clamp(1.5rem,3vw,2.25rem); margin-top:clamp(2rem,5vw,3.5rem); }
.p-meta .k{ font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); margin-bottom:.5rem; }
.p-meta .v{ font-size:.98rem; line-height:1.35; }

.fig{ margin-block:clamp(1rem,2.5vw,2rem); }
.fig .thumb{ aspect-ratio:16/9; border-radius:6px; }
.fig.portrait .thumb{ aspect-ratio:4/5; }
.fig-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(.75rem,1.5vw,1.25rem);
  margin-block:clamp(1rem,2.5vw,2rem); }
.fig-grid .thumb{ aspect-ratio:4/5; border-radius:6px; }
.cap{ font-family:var(--mono); font-size:.72rem; letter-spacing:.04em; color:var(--muted);
  margin-top:.6rem; }

.prose{ max-width:62ch; margin-block:clamp(2.5rem,6vw,4.5rem); }
.prose .label{ display:block; margin-bottom:1rem; }
.prose p{ font-size:clamp(1.05rem,1rem + 0.4vw,1.3rem); line-height:1.55; }
.prose p + p{ margin-top:1.1rem; }

.next{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem;
  border-top:1px solid var(--line); padding-top:clamp(1.5rem,4vw,2.5rem);
  margin-top:clamp(2rem,5vw,4rem); }
.next .nlabel{ font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.next a.nlink{ font-family:var(--display); font-weight:500; letter-spacing:-0.015em;
  font-size:clamp(1.8rem,1rem + 4vw,3.4rem); line-height:1; transition:color .3s ease; }
.next a.nlink:hover{ color:var(--accent); }

/* ============ REVEAL ANIM ============ */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }

/* ============ RESPONSIVE ============ */
@media (max-width:880px){
  .about-grid{ grid-template-columns:1fr; }
  .grid{ grid-template-columns:repeat(2,1fr); }
  .row{ grid-template-columns:1fr auto; }
  .row .meta{ display:none; }
  .p-meta{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .nav-links{ gap:1rem; }
  .nav-links a{ font-size:.68rem; }
  .grid{ grid-template-columns:1fr 1fr; }
  .hero-foot{ flex-direction:column; align-items:flex-start; gap:1.5rem; }
  .row .inline-thumb{ display:block; margin-top:1rem; aspect-ratio:16/9; border-radius:4px; overflow:hidden; }
  .row{ grid-template-columns:1fr; }
  .row .yr{ display:none; }
  .fig-grid{ grid-template-columns:1fr; }
  .p-meta{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
}