:root{
  --bg:#FFFFFF;
  --surface:#FFFFFF;
  --surface-tint:#F7F7F7;
  --ink:#000000;
  --ink-soft:#4A4A4A;
  --ink-faint:#8A8A8A;
  --accent:#B91646;
  --line:#E5E5E5;
  --line-strong:#CFCFCF;
  --shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 20px rgba(0,0,0,0.05);
  --sans: "Libre Franklin", -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0C0C0D;
    --surface:#0C0C0D;
    --surface-tint:#161617;
    --ink:#FFFFFF;
    --ink-soft:#B7B7B7;
    --ink-faint:#7A7A7A;
    --accent:#FF6A8E;
    --line:#242425;
    --line-strong:#38383A;
    --shadow: 0 1px 2px rgba(0,0,0,0.4), 0 8px 20px rgba(0,0,0,0.45);
  }
}
:root[data-theme="dark"]{
  --bg:#0C0C0D;
  --surface:#0C0C0D;
  --surface-tint:#161617;
  --ink:#FFFFFF;
  --ink-soft:#B7B7B7;
  --ink-faint:#7A7A7A;
  --accent:#FF6A8E;
  --line:#242425;
  --line-strong:#38383A;
  --shadow: 0 1px 2px rgba(0,0,0,0.4), 0 8px 20px rgba(0,0,0,0.45);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--ink); color:var(--bg); }
a{ color:inherit; }
img,svg{ display:block; max-width:100%; }

.wrap{ max-width:1160px; margin:0 auto; padding:0 32px; }
@media (max-width:640px){ .wrap{ padding:0 20px; } }

h1,h2,h3{
  font-family:var(--sans);
  font-weight:650;
  letter-spacing:-0.015em;
  text-wrap:balance;
  margin:0;
  color:var(--ink);
}

.eyebrow{
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-faint);
}

/* ---------- Nav ---------- */
header.site{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{ display:flex; align-items:center; justify-content:space-between; height:64px; gap:20px; }
.nav-mark{ display:flex; align-items:center; gap:9px; font-family:var(--sans); font-weight:700; font-size:17px; text-decoration:none; letter-spacing:-0.01em; color:var(--ink); }
.mark-icon{ width:24px; height:auto; flex:0 0 auto; }
.footer-brand{ display:inline-flex; align-items:center; gap:7px; }
.footer-brand .mark-icon{ width:15px; opacity:.9; }
.nav-back{ font-family:var(--mono); font-size:13px; text-decoration:none; color:var(--ink-soft); display:flex; align-items:center; gap:8px; }
.nav-back:hover{ color:var(--ink); }
.nav-links{ display:flex; gap:26px; list-style:none; margin:0; padding:0; font-family:var(--mono); font-size:13px; letter-spacing:0.02em; }
.nav-links a{
  text-decoration:none; color:var(--ink-soft);
  padding:6px 2px; border-bottom:1px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.nav-links a:hover, .nav-links a.active{ color:var(--ink); border-color:var(--accent); }
.nav-cta{
  font-family:var(--mono); font-size:13px;
  color:var(--ink); text-decoration:none;
  border:1px solid var(--line-strong); border-radius:3px;
  padding:8px 16px;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.nav-cta:hover{ background:var(--ink); border-color:var(--ink); color:var(--bg); }
.nav-toggle{ display:none; background:none; border:0; color:var(--ink); cursor:pointer; padding:8px; }
.nav-toggle svg{ width:22px; height:22px; }

@media (max-width:860px){
  .nav-links{
    position:fixed; inset:64px 0 auto 0;
    flex-direction:column; gap:0;
    background:var(--bg); border-bottom:1px solid var(--line);
    padding:8px 20px 20px;
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
  }
  .nav-links.open{ opacity:1; transform:translateY(0); pointer-events:auto; }
  .nav-links a{ display:block; padding:12px 0; border-bottom:1px solid var(--line); }
  .nav-cta{ display:none; }
  .nav-toggle{ display:block; }
}

/* ---------- Hero ---------- */
.hero{ padding:64px 0 60px; border-bottom:1px solid var(--line); }
.hero-grid{ display:grid; grid-template-columns:1.15fr 0.85fr; gap:56px; align-items:center; }
.hero .eyebrow{ margin-bottom:16px; }
.hero h1{ font-size:clamp(28px, 3.6vw, 42px); line-height:1.15; max-width:17ch; }
.hero-sub{ margin-top:20px; max-width:56ch; font-size:15.5px; color:var(--ink-soft); }
.hero-meta{
  display:flex; flex-wrap:wrap; gap:28px;
  margin-top:32px; padding-top:24px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:12.5px; color:var(--ink-faint);
}
.hero-meta strong{ display:block; font-family:var(--sans); font-size:14px; color:var(--ink); font-weight:500; margin-top:4px; }
.hero-image{ aspect-ratio:4/5; border:1px solid var(--line); border-radius:4px; overflow:hidden; background:var(--surface-tint); }
.hero-image img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; gap:32px; }
  .hero-image{ aspect-ratio:4/3; }
}

/* ---------- Page header (subpages) ---------- */
.page-head{ padding:56px 0 44px; border-bottom:1px solid var(--line); }
.page-head h1{ font-size:clamp(28px,4vw,42px); margin-top:14px; max-width:22ch; }
.page-head p{ margin-top:16px; max-width:60ch; color:var(--ink-soft); font-size:16px; }

/* ---------- Section scaffolding ---------- */
section{ padding:72px 0; border-bottom:1px solid var(--line); }
.section-head{ display:flex; align-items:baseline; justify-content:space-between; gap:24px; margin-bottom:40px; }
.section-head h2{ font-size:clamp(22px,2.6vw,28px); }
.section-head .eyebrow{ white-space:nowrap; }

/* ---------- About ---------- */
.about-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:64px; }
.about-grid p{ font-size:16px; color:var(--ink-soft); max-width:58ch; }
.about-grid p + p{ margin-top:14px; }
.spec-list{ list-style:none; margin:0; padding:0; font-family:var(--mono); font-size:13.5px; }
.spec-list li{ display:flex; justify-content:space-between; gap:16px; padding:13px 0; border-bottom:1px solid var(--line); color:var(--ink-soft); }
.spec-list li span:first-child{ font-weight:600; color:var(--ink); }
.spec-list li span:last-child{ color:var(--ink); text-align:right; }
@media (max-width:820px){ .about-grid{ grid-template-columns:1fr; gap:32px; } }

/* ---------- Practice grid (index) ---------- */
.practice-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
a.practice-card{
  border:1px solid var(--line); border-radius:4px; overflow:hidden;
  display:flex; flex-direction:column; background:var(--surface);
  text-decoration:none; color:var(--ink);
  transition:border-color .2s ease, box-shadow .2s ease;
}
a.practice-card:hover{ border-color:var(--ink); box-shadow:var(--shadow); }
a.practice-card.feature{ grid-column:1 / -1; flex-direction:row; }
.pc-media{ aspect-ratio:4/3; overflow:hidden; background:var(--surface-tint); flex-shrink:0; position:relative; }
a.practice-card.feature .pc-media{ width:46%; aspect-ratio:auto; }
.pc-media img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
a.practice-card:hover .pc-media img{ transform:scale(1.03); }
.pc-body{ padding:24px 26px 28px; display:flex; flex-direction:column; flex:1; }
a.practice-card.feature .pc-body{ padding:36px 42px 36px 38px; justify-content:center; }
.pc-title{ font-size:18px; font-weight:650; margin:10px 0 8px; letter-spacing:-0.01em; }
a.practice-card.feature .pc-title{ font-size:25px; }
.pc-desc{ font-size:14px; color:var(--ink-soft); line-height:1.55; }
a.practice-card.feature .pc-desc{ font-size:15px; max-width:44ch; }
.pc-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.pc-tag{ font-family:var(--mono); font-size:11px; border:1px solid var(--line-strong); border-radius:3px; padding:4px 9px; color:var(--ink-soft); }
.pc-view{ margin-top:auto; padding-top:16px; font-family:var(--mono); font-size:12px; color:var(--ink); display:flex; align-items:center; gap:6px; }
a.practice-card:hover .pc-view{ color:var(--accent); }

@media (max-width:860px){
  .practice-grid{ grid-template-columns:1fr; }
  a.practice-card.feature{ flex-direction:column; }
  a.practice-card.feature .pc-media{ width:100%; aspect-ratio:4/3; }
  a.practice-card.feature .pc-body{ padding:24px 26px 28px; }
}

/* ---------- Project block (subpages) ---------- */
.project{ padding:64px 0; border-bottom:1px solid var(--line); }
.project:last-child{ border-bottom:none; }
.project-media{ aspect-ratio:4/3; border-radius:4px; overflow:hidden; border:1px solid var(--line); margin-bottom:32px; background:var(--surface-tint); }
.project-media img{ width:100%; height:100%; object-fit:cover; }
.project-media.no-crop{ aspect-ratio:auto; width:fit-content; max-width:100%; margin:0 auto 32px; background:none; border:none; text-align:center; }
.project-media.no-crop img{ display:block; width:auto; height:auto; max-width:min(640px, 100%); margin:0 auto; border:1px solid var(--line); border-radius:4px; background:var(--surface-tint); }
.project-media.no-crop + .project-media.no-crop{ margin-top:-8px; }
.bb-collage{
  display:flex; margin:0 auto 32px; max-width:640px;
  border-radius:4px; overflow:hidden;
  box-shadow:0 22px 44px -26px rgba(0,0,0,.4);
  aspect-ratio:25/12;
}
.bb-collage-panel{ position:relative; height:100%; overflow:hidden; background:var(--surface-tint); cursor:pointer; }
.bb-collage-panel.portrait{ flex:0 0 36%; }
.bb-collage-panel.landscape{ flex:0 0 64%; }
.bb-collage-panel img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; transition:opacity .5s ease; }
.bb-collage-panel img.active{ opacity:1; }
.project-meta{ display:flex; flex-wrap:wrap; gap:32px; margin:28px 0 30px; padding:18px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.project-meta div{ font-family:var(--mono); }
.project-meta .k{ font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-faint); }
.project-meta .v{ font-size:14px; color:var(--ink); margin-top:5px; font-variant-numeric:tabular-nums; }
.project h3{ font-size:clamp(22px,2.8vw,30px); margin-bottom:8px; }
.project-sub{ color:var(--ink-soft); font-size:15px; max-width:60ch; margin-bottom:0; }
.project-body{ max-width:68ch; }
.project-body h4{ font-weight:600; font-size:14px; margin:22px 0 6px; }
.project-body p{ color:var(--ink-soft); font-size:15px; margin:0; }
.project-body p + p{ margin-top:12px; }
.audio-player-wrap{ margin:0 auto 32px; max-width:640px; padding:22px 24px; border:1px solid var(--line); border-radius:4px; background:var(--surface-tint); }
.audio-player-wrap audio{ width:100%; display:block; }
.audio-credits{ display:flex; flex-wrap:wrap; gap:24px; margin:20px 0 26px; }
.audio-credits div{ font-family:var(--mono); }
.audio-credits .k{ font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-faint); }
.audio-credits .v{ font-size:14px; color:var(--ink); margin-top:5px; }
.project-strip{ display:flex; gap:14px; margin-top:28px; }
.project-strip a{ flex:1; aspect-ratio:1; border-radius:4px; overflow:hidden; border:1px solid var(--line); }
.project-strip img{ width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
.project-strip a:hover img{ transform:scale(1.05); }

/* ---------- Gallery (illustration page) ---------- */
.gallery{ columns:3 280px; column-gap:22px; }
.gallery figure{ margin:0 0 22px; break-inside:avoid; border:1px solid var(--line); border-radius:4px; overflow:hidden; background:var(--surface); }
.gallery img{ width:100%; height:auto; display:block; }
.gallery figcaption{ padding:16px 18px 20px; }
.gallery figcaption .g-title{ font-size:16px; font-weight:650; margin-bottom:5px; }
.gallery figcaption .g-meta{ font-family:var(--mono); font-size:11px; letter-spacing:0.04em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:8px; }
.gallery figcaption p{ font-size:13.5px; color:var(--ink-soft); margin:0; }

/* ---------- Collaborative list ---------- */
.collab-list{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); }
.collab-list .entry{ background:var(--surface); padding:32px; }
.collab-list .role{ font-size:17px; font-weight:650; }
.collab-list .org{ font-family:var(--mono); font-size:12.5px; color:var(--ink-faint); margin:4px 0 14px; }
.collab-list .dates{ font-family:var(--mono); font-size:11.5px; color:var(--ink-faint); float:right; }
.collab-list p{ color:var(--ink-soft); font-size:14.5px; margin:0; }
@media (max-width:760px){ .collab-list{ grid-template-columns:1fr; } }

/* ---------- Contact / footer ---------- */
.contact-grid{ display:flex; align-items:flex-start; gap:36px; }
.contact-avatar{
  flex:0 0 auto;
  width:150px; height:auto;
  aspect-ratio:600/784;
  border-radius:4px;
  object-fit:cover;
  display:block;
}
@media (max-width:640px){
  .contact-grid{ flex-direction:column; gap:20px; }
  .contact-avatar{ width:110px; }
}
.contact h2{ font-size:clamp(26px,3.8vw,40px); max-width:20ch; }
.contact-sub{ margin-top:16px; color:var(--ink-soft); font-size:15.5px; max-width:52ch; }
.contact-links{ display:flex; flex-wrap:wrap; gap:14px; margin-top:28px; }
.contact-compact{ padding:44px 0; border-bottom:none; }
.contact-teaser{ display:inline-flex; text-decoration:none; }
.contact-teaser .eyebrow{ transition:color .15s ease; }
.contact-teaser:hover .eyebrow{ color:var(--accent); }
.contact-compact .contact-links{ margin-top:18px; }
.contact-links a{
  font-family:var(--mono); font-size:13.5px; text-decoration:none;
  color:var(--ink); border:1px solid var(--line-strong); border-radius:3px;
  padding:10px 18px; transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.contact-links a:hover{ background:var(--ink); border-color:var(--ink); color:var(--bg); }
footer{ padding:32px 0; }
.footer-row{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-family:var(--mono); font-size:12px; color:var(--ink-faint); }

/* ---------- Next project ---------- */
.next-project{ display:block; text-decoration:none; color:inherit; border-top:1px solid var(--line); }
.next-project-inner{ padding:40px 0; display:flex; flex-direction:column; gap:8px; }
.next-project-title{
  margin:0; font-size:16px; font-weight:600; letter-spacing:0.01em;
  display:flex; align-items:center; gap:9px;
  transition:color .2s ease, gap .2s ease;
}
.next-project-arrow{ flex:0 0 auto; width:20px; height:14px; transition:transform .2s ease; }
.next-project:hover .next-project-title{ color:var(--accent); gap:14px; }
.next-project:hover .next-project-arrow{ transform:translateX(6px); }
@media (max-width:640px){ .next-project-inner{ padding:32px 0; gap:6px; } }

/* ---------- Reveal ---------- */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }

/* ---------- Scroll to top ---------- */
.scroll-top-btn{
  position:fixed; right:24px; bottom:24px; width:48px; height:48px; border-radius:50%;
  background:var(--surface); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.12); cursor:pointer; padding:0;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s, border-color .2s ease;
  z-index:40;
}
.scroll-top-btn.visible{ opacity:1; visibility:visible; transform:translateY(0); }
.scroll-top-btn:hover{ border-color:var(--accent); }
.scroll-top-btn .mark-icon{ width:19px; height:auto; }
.scroll-top-btn .mark-icon.spin{ animation:scrollTopSpin .6s cubic-bezier(.3,0,.2,1); }
@keyframes scrollTopSpin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
@media (max-width:640px){ .scroll-top-btn{ right:16px; bottom:16px; width:44px; height:44px; } }

/* ---------- Mega hero (homepage) ---------- */
.hero-mega-top{ display:flex; justify-content:flex-start; margin-bottom:26px; }
.mediums-list{ list-style:none; margin:0; padding:0; font-family:var(--mono); font-size:14px; color:var(--ink-faint); text-align:left; line-height:1.9; }
.mega-title{ font-size:clamp(44px,8.5vw,108px); font-weight:700; letter-spacing:-0.02em; line-height:1; margin:0; }
.mega-sub{ font-size:clamp(24px,4.5vw,46px); font-weight:500; color:var(--ink-soft); margin:16px 0 0; letter-spacing:-0.01em; }
.mega-sub a{ color:var(--ink); text-decoration:none; border-bottom:2px solid var(--line-strong); transition:border-color .15s ease, color .15s ease; }
.mega-sub a:hover{ border-color:var(--accent); color:var(--accent); }
.mega-intro{ font-size:18px; color:var(--ink-soft); max-width:68ch; margin-top:28px; }

/* ---------- Hero slideshow (homepage) ---------- */
.hero-slideshow{
  display:flex; justify-content:center;
  padding:88px 32px;
}
.slideshow-frame{
  position:relative;
  width:min(1240px, 96vw);
  height:min(90vh, 1120px);
  display:flex; align-items:center; justify-content:center;
}
.slideshow-box{
  position:relative;
  overflow:hidden;
  background:var(--surface-tint);
  border:1px solid var(--line);
  border-radius:4px;
  transition:width 4s cubic-bezier(.45,0,.15,1), height 4s cubic-bezier(.45,0,.15,1);
}
.slideshow-slide{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain;
  opacity:0;
  transition:opacity 4.5s cubic-bezier(.45,0,.15,1);
}
.slideshow-slide.is-active{ opacity:1; }
@media (max-width:640px){
  .hero-slideshow{ padding:56px 20px; }
  .slideshow-frame{ width:100%; height:min(70vh, 680px); }
}

/* ---------- Hero interact (homepage) ---------- */
/* The headline block stands alone — no photo is ever positioned over or
   behind it, so there is nothing here that CAN cover the text, at any
   viewport width or text-wrap. The photos live in their own masonry
   below: a CSS multi-column flow, which is the browser's own layout
   algorithm rather than coordinates computed for one screen size, so
   columns and stacked photos are structurally incapable of
   overlapping — the browser lays out each column's items top to
   bottom and never lets two occupy the same space. Column count drops
   automatically as the viewport narrows (down to one column on
   phones), which replaces the old hand-written mobile override. */
.hero-interact{ position:relative; padding:56px 0; border-bottom:1px solid var(--line); overflow-x:hidden; }
.hero-interact-text{ position:relative; max-width:960px; }

/* Two small lead-in photos, sitting in normal document flow directly
   above the headline — never absolutely positioned, so they simply
   push the headline down rather than ever being able to sit over it. */
.hero-lead-photos{ display:flex; align-items:flex-end; gap:48px; margin-bottom:32px; margin-left:40px; }
.hero-lead-photos .hc-tile{ margin:0; }
.lead-medium{ width:270px; --r:-9deg; }
.lead-small{ width:190px; --r:12deg; align-self:flex-start; }

.hero-interact-media{
  margin-top:56px;
  columns:3 300px;
  column-gap:68px;
  padding:0 22px;
}
.hc-tile{
  break-inside:avoid;
  margin:0 0 68px;
  transform:rotate(var(--r,0deg));
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.hc-tile img{
  display:block; width:100%; height:auto;
  border-radius:2px; background:var(--surface-tint);
  box-shadow:var(--shadow);
}
.hc-tile:hover{ transform:rotate(var(--r,0deg)) scale(1.045); position:relative; z-index:5; }

/* Scale and angle vary tile to tile for the same playful, collage feel
   as before — a couple of small accents, most mid-size, one photo
   breaking across the full column width as the clear "biggest" piece
   — but width here is always a % of the COLUMN it landed in, and the
   masonry's own gap/margin keeps every rotated edge clear of its
   neighbors regardless of column count. */
.hc-d{ column-span:all; width:48%; margin:40px auto 64px; --r:3deg; }
.hc-l{ width:94%; --r:-8deg; }
.hc-g{ width:84%; --r:-10deg; }
.hc-e{ width:78%; margin-left:auto; --r:7deg; }
.hc-o{ width:82%; --r:-7deg; }
.hc-i{ width:74%; margin-left:auto; --r:-5deg; }
.hc-a{ width:70%; --r:-8deg; }
.hc-h{ width:60%; margin-left:auto; --r:10deg; }
.hc-m{ width:58%; --r:-6deg; }
.hc-b{ width:50%; --r:9deg; }
.hc-j{ width:42%; --r:-9deg; }
.hc-k{ width:40%; margin-left:auto; --r:11deg; }

@media (max-width:640px){
  .hero-interact-media{ columns:1; margin-top:40px; }
}

/* ---------- Category gallery ---------- */
.gallery-list{ display:grid; grid-template-columns:repeat(auto-fill, minmax(250px,1fr)); gap:32px 28px; }
a.gallery-item{ display:block; text-decoration:none; color:var(--ink); }
.gi-media{ aspect-ratio:4/3; overflow:hidden; border:1px solid var(--line); border-radius:4px; background:var(--surface-tint); }
.gi-media img{ width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.gi-media video{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.gi-media.no-crop{ aspect-ratio:auto; width:fit-content; max-width:100%; margin:0 auto; border-color:transparent; background:none; }
.gi-media.no-crop img{ width:auto; height:auto; max-width:100%; max-height:340px; border:1px solid var(--line); border-radius:4px; background:var(--surface-tint); }
.gi-media.no-crop video{ width:auto; height:auto; max-width:100%; max-height:340px; border:1px solid var(--line); border-radius:4px; background:var(--surface-tint); display:block; margin:0 auto; }
a.gallery-item:hover .gi-media img,
a.gallery-item:hover .gi-media video{ transform:scale(1.04); }
.gi-name{ margin-top:14px; font-weight:650; font-size:16.5px; }
.gi-date{ font-family:var(--mono); font-size:12px; color:var(--ink-faint); margin-top:3px; }

/* ---------- Project header (detail pages) ---------- */
.project-title-block{ padding:56px 0 40px; border-bottom:1px solid var(--line); }
.project-title-block h1{ font-size:clamp(28px,4.4vw,44px); margin-top:14px; }
.project-title-block .ar{ font-family:var(--sans); font-size:clamp(18px,2.4vw,24px); color:var(--ink-soft); font-weight:400; margin-top:4px; }
.project-title-meta{ display:flex; flex-wrap:wrap; gap:32px; margin-top:24px; font-family:var(--mono); font-size:12.5px; color:var(--ink-faint); }
.project-title-meta strong{ display:block; font-family:var(--sans); font-size:14px; color:var(--ink); font-weight:500; margin-top:4px; }
.project-intro{ max-width:66ch; margin-top:22px; color:var(--ink-soft); font-size:15.5px; }

/* ---------- Flipbook ---------- */
.flipbook-wrap{ margin:0 auto; max-width:640px; }
.flipbook-wrap.small{ max-width:420px; }
.flipbook-label{ font-family:var(--mono); font-size:11.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:14px; }
.flipbook{
  position:relative; border:1px solid var(--line); border-radius:4px; overflow:visible;
  background:var(--surface-tint); aspect-ratio:842/595;
  perspective:2200px;
  box-shadow:0 22px 44px -26px rgba(0,0,0,.4);
}
.flipbook-page{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#fff; display:block;
  border-radius:4px;
}
.flipbook .flipbook-base{ position:absolute; inset:0; z-index:0; border-radius:4px; overflow:hidden; }
.flipbook .flipbook-base .flipbook-page{ position:static; }
.flipbook .flipbook-leaf{
  z-index:3; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  transform-style:preserve-3d; will-change:transform, filter;
  transform:rotateY(0deg); filter:brightness(1);
  pointer-events:none; display:none;
  clip-path:inset(0 round 4px);
}
.flipbook .flipbook-leaf.turning{ display:block; }
.flipbook .flipbook-leaf.turning-next{
  /* Hinged on the center spine, like a real page turning forward: the
     leaf's right side lifts and folds back over the spine to the left. */
  transform-origin:50% 50%;
  transition:transform .5s cubic-bezier(.4,.06,.2,1), filter .5s cubic-bezier(.4,.06,.2,1);
  transform:rotateY(-112deg); filter:brightness(.5);
}
.flipbook .flipbook-leaf.turning-prev{
  /* Mirrored: hinged on the center spine, left side folds back to the right. */
  transform-origin:50% 50%;
  transition:transform .5s cubic-bezier(.4,.06,.2,1), filter .5s cubic-bezier(.4,.06,.2,1);
  transform:rotateY(112deg); filter:brightness(.5);
}
@keyframes flipbookShade{ 0%{ opacity:0; } 45%{ opacity:1; } 100%{ opacity:0; } }
.flipbook .flipbook-shade{
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0; border-radius:4px;
  /* Shadow cast at the spine as the leaf folds over it, not at an outer edge. */
  background:linear-gradient(90deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.32) 50%, rgba(0,0,0,0) 70%);
}
.flipbook .flipbook-shade.turning{ animation:flipbookShade .5s cubic-bezier(.4,.06,.2,1) 1; }
.flipbook .flipbook-spine{
  position:absolute; top:0; left:50%; width:14%; height:100%; transform:translateX(-50%);
  background:linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.16) 48%, rgba(0,0,0,.16) 52%, rgba(0,0,0,0) 100%);
  pointer-events:none; opacity:0; transition:opacity .3s ease; z-index:2;
}
.flipbook .flipbook-spine.visible{ opacity:1; }
.flipbook-placeholder{ display:flex; align-items:center; justify-content:center; height:100%; text-align:center; padding:24px; }
.flipbook-placeholder p{ font-family:var(--mono); font-size:12.5px; color:var(--ink-faint); border:1px dashed var(--line-strong); padding:18px 22px; border-radius:4px; margin:0; }
.flipbook-controls{ display:flex; align-items:center; justify-content:center; gap:18px; margin-top:16px; }
.flipbook-btn{ border:1px solid var(--line-strong); background:var(--surface); cursor:pointer; padding:8px 16px; border-radius:3px; font-family:var(--mono); font-size:13px; color:var(--ink); transition:background .15s ease, color .15s ease; }
.flipbook-btn:hover:not(:disabled){ background:var(--ink); color:var(--bg); border-color:var(--ink); }
.flipbook-btn:disabled{ opacity:.3; cursor:default; }
.flipbook-count{ font-family:var(--mono); font-size:12.5px; color:var(--ink-faint); min-width:56px; text-align:center; font-variant-numeric:tabular-nums; }

/* ---------- Archetype rows ---------- */
.archetype-row{ display:grid; grid-template-columns:140px 1fr; gap:26px; padding:28px 0; border-bottom:1px solid var(--line); align-items:start; }
.archetype-row img{ width:140px; height:140px; object-fit:cover; border-radius:4px; border:1px solid var(--line); }
.archetype-row .a-num{ font-family:var(--mono); font-size:11px; color:var(--ink-faint); }
.archetype-row h4{ font-size:19px; font-weight:650; margin:6px 0 2px; }
.archetype-row .a-model{ font-family:var(--mono); font-size:12px; color:var(--ink-faint); margin-bottom:10px; }
.archetype-row p{ color:var(--ink-soft); font-size:14.5px; max-width:60ch; margin:0; }
@media (max-width:600px){ .archetype-row{ grid-template-columns:88px 1fr; gap:16px; } .archetype-row img{ width:88px; height:88px; } }

/* ---------- Lightbox ---------- */
.lightbox-trigger{ cursor:zoom-in; }
.lightbox-overlay{
  position:fixed; inset:0; z-index:200;
  background:rgba(0,0,0,0.88);
  display:flex; align-items:center; justify-content:center;
  padding:48px;
  opacity:0; pointer-events:none;
  transition:opacity .2s ease;
}
.lightbox-overlay.open{ opacity:1; pointer-events:auto; }
.lightbox-img{ max-width:100%; max-height:100%; object-fit:contain; border-radius:4px; box-shadow:0 20px 60px rgba(0,0,0,0.5); }
.lightbox-close{
  position:absolute; top:18px; right:22px;
  background:none; border:0; color:#fff; font-size:34px; line-height:1;
  cursor:pointer; padding:6px 10px;
}
@media (max-width:640px){ .lightbox-overlay{ padding:20px; } }

/* ---------- BTS loop ---------- */
.bts-square{ width:280px; max-width:100%; aspect-ratio:1; border:1px solid var(--line); border-radius:4px; overflow:hidden; position:relative; }
.bts-square img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .5s ease; }
.bts-square img.active{ opacity:1; }
.bts-caption{ font-family:var(--mono); font-size:11.5px; color:var(--ink-faint); margin-top:12px; text-align:center; }

/* ---------- Sectioned book projects (e.g. Becoming & Unbecoming) ---------- */
.book-section{ padding:48px 0 8px; border-top:1px solid var(--line); }
.book-section:first-of-type{ border-top:none; padding-top:56px; }
.book-section h2{ font-size:clamp(21px,2.8vw,28px); margin:10px 0 14px; }
.book-section h2 + .book-subtitle{ margin-top:-10px; }
.book-subtitle{ font-style:italic; font-size:16px; color:var(--ink-soft); margin:0 0 14px; }
.book-desc{ max-width:64ch; color:var(--ink-soft); font-size:15px; margin:0 0 30px; }
.book-desc + .flipbook-wrap{ margin-top:4px; }
.book-section-textonly{ padding-bottom:52px; }
.book-section-textonly .book-desc{ margin-bottom:0; }

/* ---------- Project videos ---------- */
.project-video-wrap{ max-width:640px; margin:0 auto 28px; }
.project-video-wrap video{ display:block; width:100%; border:1px solid var(--line); border-radius:4px; background:#000; }
.project-video-wrap .flipbook-label{ text-align:center; }