/* Self-hosted fonts (latin subset, woff2) — served from this site so phones
   don't wait on extra connections to Google before text can render. Inter
   and Libre Baskerville are variable fonts, so one file covers every weight. */
@font-face{ font-family:"Inter"; font-style:normal; font-weight:400 800; font-display:swap;
  src:url("../fonts/inter-var-latin.woff2") format("woff2"); }
@font-face{ font-family:"Libre Baskerville"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("../fonts/libre-baskerville-latin.woff2") format("woff2"); }
@font-face{ font-family:"IBM Plex Mono"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/plex-mono-400-latin.woff2") format("woff2"); }
@font-face{ font-family:"IBM Plex Mono"; font-style:normal; font-weight:500; font-display:swap;
  src:url("../fonts/plex-mono-500-latin.woff2") format("woff2"); }

:root{
  --font-display:"Libre Baskerville", Georgia, "Times New Roman", serif;
  --font-body:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:"IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  /* contextual tokens — redefined per chapter, never per element. Near-monochrome
     with one restrained warm accent — not pure black/white/blue. */
  --bg:#0B0A08;
  --fg:#F6F2EA;
  --muted:#8C8578;
  --rule:rgba(246,242,234,.15);
  --accent:#C9793B;
  --frame:rgba(246,242,234,.09);

  --measure:34rem;
  --gutter:clamp(1.5rem, 6vw, 6rem);
  --header-h:73px; /* fallback; js/main.js syncs this to the real sticky header height */
}

.lit{
  --bg:#F6F2EA;
  --fg:#0B0A08;
  --muted:#6B6355;
  --rule:rgba(11,10,8,.15);
  --accent:#B5672B;
  --frame:rgba(11,10,8,.07);
}

*{box-sizing:border-box}
body{
  margin:0;
  background:#0B0A08;
  color:#F6F2EA;
  font-family:var(--font-body);
  font-size:clamp(1rem,.95rem + .25vw,1.125rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Film grain overlay removed — an animated SVG feTurbulence filter covering
   the whole viewport caused real pages to render solid black on some mobile
   browsers under GPU/compositing pressure (confirmed live on this site). Not
   worth the risk for a purely decorative texture. */

/* ---------- scrub rail ---------- */
.rail{
  position:fixed; left:clamp(1rem,2.4vw,2.25rem); top:0; bottom:0; z-index:50;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.1rem;
  font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.14em;
  color:#8C8578;
  transition:color .5s ease;
}
.rail.on-light{ color:#6B6355; }
.rail-tc{ color:#F6F2EA; font-weight:700; }
.rail.on-light .rail-tc{ color:#0B0A08; }
.rail-track{
  width:1px; height:min(38vh,300px);
  background:currentColor; opacity:.35; position:relative;
}
.rail-fill{
  position:absolute; inset:0 auto auto 0; width:1px; height:0;
  background:#F6F2EA;
}
.rail.on-light .rail-fill{ background:#0B0A08; }
.rail-chapter{
  writing-mode:vertical-rl; text-orientation:mixed;
  white-space:nowrap; letter-spacing:.28em; font-size:.625rem;
}
@media (max-width:900px){
  .rail{display:none}
}

.topbar{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:50;
  background:rgba(138,138,134,.28); display:none;
}
.topbar-fill{ height:100%; width:0; background:#F6F2EA; }
.topbar.on-light{ background:rgba(11,10,8,.2); }
.topbar.on-light .topbar-fill{ background:#0B0A08; }
@media (max-width:900px){ .topbar{display:block} }

/* ---------- site header / nav ---------- */
.site-header{
  position:sticky; top:0; z-index:55;
  background:rgba(11,10,8,.94);
  border-bottom:1px solid rgba(246,242,234,.12);
}
@media (min-width:721px){
  .site-header{ background:rgba(11,10,8,.85); backdrop-filter:blur(6px); }
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem var(--gutter);
  max-width:none;
}
.logo{
  font-family:var(--font-body); font-weight:500; letter-spacing:-.01em;
  font-size:1.15rem; color:#F6F2EA; text-decoration:none;
}
.nav-links{
  display:flex; gap:2.25rem; list-style:none; margin:0; padding:0;
  font-family:var(--font-mono); font-size:.8125rem; letter-spacing:.06em;
}
.nav-links a{
  color:#8C8578; text-decoration:none; transition:color .2s ease;
}
.nav-links a:hover,
.nav-links a[aria-current="page"]{ color:#F6F2EA; }
.nav-right{ display:flex; align-items:center; gap:1.25rem; }
.nav-toggle{
  display:none; background:none; color:#F6F2EA; border:none;
  font-size:1.4rem; cursor:pointer;
}
.nav-cta{
  font-family:var(--font-mono); font-size:.75rem; letter-spacing:.14em;
  text-transform:uppercase; white-space:nowrap;
  color:#0B0A08; background:#C9793B; text-decoration:none;
  padding:.55rem 1.1rem; border-radius:999px;
  transition:opacity .2s ease, transform .2s ease;
}
.nav-cta:hover{ opacity:.88; transform:translateY(-1px); }
@media (max-width:720px){
  .nav-cta{ padding:.45rem .85rem; font-size:.6875rem; }
}
@media (max-width:720px){
  .nav-links{
    position:absolute; top:100%; left:0; right:0;
    background:#0B0A08; flex-direction:column; gap:0;
    border-bottom:1px solid rgba(246,242,234,.12);
    display:none;
  }
  .nav-links.open{ display:flex; }
  .nav-links a{
    padding:.9rem var(--gutter); width:100%; display:block;
    border-top:1px solid rgba(246,242,234,.12);
  }
  .nav-toggle{ display:block; }
}

/* ---------- chapters ---------- */
.ch{
  background:var(--bg);
  color:var(--fg);
  padding:clamp(6rem,16vh,11rem) var(--gutter);
  padding-left:max(var(--gutter), 5.5rem);
  position:relative;
  /* z-index (any value) forces this section to establish its own stacking
     context, so its own background paints BELOW its negative-z-index
     children (.hero-video / .hero-overlay) instead of ON TOP of them.
     Without this, .ch's solid background hid the hero video completely. */
  z-index:0;
}
@media (max-width:900px){
  .ch{ padding-left:var(--gutter) }
}

.slug{
  display:flex; align-items:baseline; gap:1rem;
  font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.24em;
  color:var(--muted); text-transform:uppercase;
  padding-bottom:.9rem; margin-bottom:clamp(2rem,5vh,3.25rem);
  border-bottom:1px solid var(--rule);
}
.slug b{ color:var(--accent); font-weight:700 }
.slug span{ margin-left:auto; opacity:.7 }

h1,h2{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.03;
  letter-spacing:-.02em;
  text-wrap:balance;
  margin:0;
}
h2{ font-size:clamp(2.25rem,6.2vw,4.25rem); }
.body{ margin-top:1.75rem; color:var(--fg); opacity:.82 }

/* WordPress Gallery/Image blocks dropped into body content — wider than the
   narrow text column, styled to match the site's plate/border look.
   This is the no-JS fallback only: main.js finds any .wp-block-gallery and
   replaces it with the .gv-viewer component below (main image + thumbnail
   strip + fullscreen). If JS never runs, this grid is what visitors see. */
.body .wp-block-gallery{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(160px,1fr)) !important;
  gap:1rem !important;
  width:100%;
  max-width:none;
  margin:2rem 0 !important;
  padding:0 !important;
  list-style:none;
}
.body .wp-block-gallery .wp-block-image,
.body .wp-block-gallery > figure,
.body .wp-block-gallery > li{
  width:auto !important;
  margin:0 !important;
}
.body .wp-block-image{
  max-width:none;
  width:100%;
  margin:2rem 0;
}
.body .wp-block-gallery img,
.body .wp-block-image img{
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  object-fit:cover !important;
  aspect-ratio:4/3 !important;
  border:1px solid var(--rule);
  display:block;
}
.body .wp-block-gallery figure,
.body .wp-block-image figure{
  aspect-ratio:4/3;
  overflow:hidden;
  margin:0 !important;
}
.body figcaption{
  font-family:var(--font-mono);
  font-size:.75rem;
  color:var(--muted);
  margin-top:.5rem;
  opacity:.8;
}
.body p{ margin:0 0 1.1em }
.body p:last-child{ margin-bottom:0 }

/* ---------- Gallery viewer (JS-built from a WP Gallery block) ---------- */
.gv-viewer{
  border:1px solid var(--rule);
  background:#050505;
  width:100%;
  margin:2rem 0;
}
.gv-stage{
  position:relative;
  height:min(70vh, 720px);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
@media (min-width:1400px){
  .gv-stage{ height:min(75vh, 860px); }
}
.gv-frame{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
}
.gv-frame img{
  max-width:100%; max-height:100%;
  width:auto; height:auto;
  display:block;
  border:0;
}
.gv-count{
  position:absolute; top:1rem; right:1.1rem;
  font-family:var(--font-mono);
  font-size:.6875rem; letter-spacing:.16em; color:var(--muted);
  font-variant-numeric:tabular-nums;
  background:rgba(11,10,8,.55);
  padding:.3em .6em;
}
.gv-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(11,10,8,.5);
  border:1px solid var(--rule);
  color:var(--fg);
  width:42px; height:42px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease;
  z-index:2;
  padding:0;
}
.gv-btn:hover{ border-color:var(--accent); background:rgba(11,10,8,.75); }
.gv-btn svg{ width:16px; height:16px; }
.gv-prev{ left:.9rem; }
.gv-next{ right:.9rem; }
.gv-expand{
  position:absolute; bottom:1rem; right:1.1rem; top:auto; left:auto; transform:none;
  width:auto; height:auto; border-radius:0;
  font-family:var(--font-mono);
  font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted);
  display:flex; align-items:center; gap:.5em;
  padding:.5em .8em;
}
.gv-expand:hover{ color:var(--fg); }
.gv-expand svg{ width:12px; height:12px; }

.gv-thumbs{
  display:flex; gap:.5rem; padding:.75rem;
  border-top:1px solid var(--rule);
  overflow-x:auto;
  scrollbar-width:thin;
  scrollbar-color:var(--rule) transparent;
}
.gv-thumbs::-webkit-scrollbar{ height:5px; }
.gv-thumbs::-webkit-scrollbar-thumb{ background:var(--rule); border-radius:3px; }
.gv-thumb{
  flex:0 0 auto;
  width:64px; height:64px;
  border:1px solid var(--rule);
  background:none;
  padding:0;
  cursor:pointer;
  opacity:.55;
  transition:opacity .2s ease, border-color .2s ease;
  position:relative;
  overflow:hidden;
}
.gv-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.gv-thumb:hover{ opacity:.85; }
.gv-thumb.is-active{ opacity:1; border-color:var(--accent); }
.gv-thumb.is-active::after{
  content:""; position:absolute; left:0; right:0; bottom:-9px;
  height:2px; background:var(--accent);
}
@media (max-width:640px){
  .gv-stage{ height:min(46vh, 340px); }
  .gv-thumb{ width:52px; height:52px; }
}

.gv-lightbox{
  position:fixed; inset:0; z-index:100;
  background:rgba(6,6,6,.97);
  display:none;
  flex-direction:column;
  padding:clamp(1rem,4vw,2rem);
}
.gv-lightbox.is-open{ display:flex; }
.gv-lb-top{ display:flex; justify-content:flex-end; margin-bottom:1rem; }
.gv-lb-stage{
  flex:1; display:flex; align-items:center; justify-content:center;
  position:relative; min-height:0;
}
.gv-lb-stage img{
  max-width:min(88vw,1200px); max-height:100%;
  width:auto; height:auto; display:block;
  border:1px solid var(--rule);
}
@media (prefers-reduced-motion:reduce){
  .gv-thumb, .gv-btn, .gv-expand{ transition:none; }
}

/* ---------- opening title card ---------- */
.open{
  min-height:90svh;
  display:flex; flex-direction:column; justify-content:flex-start;
  padding-top:clamp(3rem,8vh,5rem); padding-bottom:0;
  overflow:hidden;
}

.hero-video{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%; object-fit:cover;
}
.hero-video-embed{
  border:0; pointer-events:none;
}
.hero-overlay{
  position:absolute; inset:0; z-index:-1;
  background:rgba(11,10,8,.55);
}

.wordmark{
  font-family:var(--font-display); font-weight:800; font-size:clamp(1.125rem,1.6vw,1.375rem);
  letter-spacing:-.01em; margin-bottom:2.25rem; color:var(--fg);
}
.ch.open{ text-align:center }
.open h1{
  font-size:clamp(2.75rem,8.5vw,6.5rem);
  max-width:16ch;
  margin-left:auto; margin-right:auto;
}
.open .eyebrow{
  font-family:var(--font-mono); font-size:.625rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--accent); margin-bottom:.6rem;
}
.open .lede{
  max-width:40ch; margin-top:2rem; margin-left:auto; margin-right:auto;
  color:var(--fg); opacity:.72;
  font-size:clamp(1.0625rem,1rem + .4vw,1.3125rem);
}
.cue{
  margin-top:clamp(2.5rem,6vh,4rem);
  font-family:var(--font-mono); font-size:.625rem; letter-spacing:.26em;
  color:var(--muted); text-transform:uppercase;
  display:flex; align-items:center; justify-content:center; gap:.7rem;
}
.cue i{ display:block; width:1px; height:2.25rem; background:currentColor; opacity:.5;
  animation:pulse 2.4s ease-in-out infinite; transform-origin:top }
@keyframes pulse{ 0%,100%{transform:scaleY(.35);opacity:.25} 50%{transform:scaleY(1);opacity:.6} }

/* ---------- Homepage: center every section's own content, except the
   process steps (.triptych) and the project grid (.work), which keep
   their left-aligned card layout. Scoped to .home so no other page
   (Photography, About, project pages, etc.) is affected. ---------- */
.home .ch{ text-align:center }
.home .slug{ justify-content:center }
.home .slug span{ margin-left:0 }
.home .body p{ max-width:44ch; margin-left:auto; margin-right:auto; }
.home .pull{
  margin-left:auto; margin-right:auto;
  border-left:0; border-top:2px solid var(--accent);
  padding-left:0; padding-top:1rem;
}
.home .actions{ justify-content:center }
.home .contact-list{ margin-left:auto; margin-right:auto; }
.home .swap{ margin-left:auto; margin-right:auto; }
.home .triptych,
.home .work{ text-align:left }

/* "01 The Dark" has no grid below it, so vertically center its content in
   the viewport instead of leaving it stuck at the top with dead space
   under the pull-quote. */
.home .dark{
  /* The sticky header takes real space above this section, so a plain
     100svh box starts below it and its content centers ~header-height/2
     too low relative to the actual window. Pulling the section up by the
     header's height (it slides in under the header, which sits on top via
     z-index) lets it occupy the true full viewport, so centered content
     lines up with the window's real center — and with the rail, which does
     the same. */
  margin-top:calc(-1 * var(--header-h));
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
}

/* "02 The Process" felt cramped between its heading and intro — give it
   more top padding and a bit more air around the heading. */
.home .process{ padding-top:clamp(8rem,20vh,13rem) }
.home .process .slug{ margin-bottom:clamp(2.5rem,6vh,3.75rem) }
.home .process .body{ margin-top:clamp(1.75rem,4vh,2.75rem) }

/* ---------- the process, in three beats ---------- */
.triptych{
  display:grid; gap:clamp(2.25rem,4vw,3.25rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
  margin-top:clamp(2.75rem,7vh,4.5rem);
  border-top:1px solid var(--rule);
  padding-top:clamp(1.75rem,4vh,2.5rem);
}
.beat em{
  font-family:var(--font-mono); font-style:normal; font-size:.625rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--accent);
}
.beat h3{
  font-family:var(--font-display); font-weight:700; line-height:1.08;
  letter-spacing:-.01em;
  font-size:clamp(1.5rem,2.5vw,1.9375rem);
  margin:.5rem 0 .85rem;
}
.beat p{ margin:0; font-size:.9375rem; line-height:1.6; opacity:.82 }
.beat .kit{
  margin-top:1.1rem; padding-top:.9rem; border-top:1px solid var(--rule);
  font-family:var(--font-mono); font-size:.625rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); line-height:2;
}

.pull{
  font-family:var(--font-display); font-weight:700; font-size:clamp(1.375rem,2.6vw,1.875rem);
  line-height:1.25; max-width:24ch; margin:clamp(2.5rem,6vh,4rem) 0 0;
  padding-left:1.25rem; border-left:2px solid var(--accent);
  color:var(--fg);
}

/* ---------- release / work ---------- */
.work{
  display:grid; gap:clamp(1.25rem,3vw,2.25rem);
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:clamp(2.5rem,6vh,4rem);
}
@media (max-width:720px){
  .work{ grid-template-columns:1fr; }
}
.slot{ display:flex; flex-direction:column; gap:.75rem; text-decoration:none; color:inherit }
.slot .plate{
  aspect-ratio:4/3; border:1px solid var(--rule);
  background:
    repeating-linear-gradient(-45deg, var(--frame) 0 1px, transparent 1px 11px);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:.625rem; letter-spacing:.2em;
  color:var(--muted); text-transform:uppercase;
  transition:border-color .35s ease, transform .35s ease;
  overflow:hidden;
  position:relative;
}
.slot .plate img{ width:100%; height:100%; object-fit:cover; }
.slot:hover .plate{ border-color:var(--accent); transform:translateY(-3px) }

/* video tiles (Cinematography and its sub-categories) get a play-icon badge
   so the medium is legible from the grid, not just the label below it */
.slot.is-video .plate::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(11,10,8,.35), transparent 55%);
  pointer-events:none;
}
.play-badge{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:3rem; height:3rem; border-radius:50%;
  background:rgba(11,10,8,.5);
  display:flex; align-items:center; justify-content:center;
  transition:background .35s ease, transform .35s ease;
}
.play-badge::after{
  content:""; margin-left:3px;
  border-style:solid; border-width:.5rem 0 .5rem .82rem;
  border-color:transparent transparent transparent #F6F2EA;
}
.slot:hover .play-badge{ background:#C9793B; transform:translate(-50%,-50%) scale(1.08); }
.lit .play-badge::after{ border-left-color:#F6F2EA; }
.slot h3{
  font-family:var(--font-body); font-size:1rem; font-weight:600;
  margin:0; letter-spacing:-.005em;
}
.slot p{
  margin:0; font-family:var(--font-mono); font-size:.6875rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}
.swap{
  margin-top:2.5rem; font-family:var(--font-mono); font-size:.6875rem;
  letter-spacing:.1em; color:var(--muted); max-width:44ch;
}
.swap a{ color:var(--fg); text-decoration:underline; text-underline-offset:.2em; }
.swap a:hover{ color:var(--accent); }

/* ---------- end card ---------- */
.end{ margin-top:calc(-1 * var(--header-h)); min-height:100svh; display:flex; flex-direction:column; justify-content:center }

/* On a tall, narrow phone screen, forcing these sections to fill 90-100svh
   leaves huge dead black gaps above/below their (comparatively short) text —
   the "chapter fills the screen" idea works on desktop but not here. Let them
   hug their own content with generous padding instead. */
@media (max-width:640px){
  .open{
    min-height:auto;
    padding-bottom:clamp(3.5rem,12vh,5rem);
  }
  .home .dark,
  .end{
    margin-top:0;
    min-height:auto;
  }
}
.end h2{ font-size:clamp(2.5rem,7vw,5rem) }
.actions{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:clamp(2rem,5vh,3rem); align-items:center }
.btn{
  display:inline-flex; align-items:center; gap:.75rem;
  background:var(--accent); color:#FBF8F2; text-decoration:none;
  font-family:var(--font-mono); font-size:.75rem; letter-spacing:.2em; text-transform:uppercase;
  padding:1.05rem 1.9rem; border:1px solid var(--accent);
  transition:background .3s ease, color .3s ease;
}
.btn:hover{ background:transparent; color:var(--accent) }
.btn-ghost{
  display:inline-flex; align-items:center;
  color:var(--fg); text-decoration:none; opacity:.65;
  font-family:var(--font-mono); font-size:.75rem; letter-spacing:.2em; text-transform:uppercase;
  padding:1.05rem 1.1rem; border-bottom:1px solid transparent;
  transition:opacity .3s ease, border-color .3s ease;
}
.btn-ghost:hover{ opacity:1; border-color:var(--accent) }

.card{
  display:flex; gap:clamp(1.25rem,3vw,2.25rem); align-items:flex-start;
  margin-top:clamp(3.5rem,9vh,6rem); padding-top:clamp(1.75rem,4vh,2.5rem);
  border-top:1px solid var(--rule); max-width:44rem;
}
.card .portrait{
  flex:0 0 auto; width:clamp(4.5rem,10vw,6.5rem); aspect-ratio:3/4;
  border:1px solid var(--rule); overflow:hidden;
  background:repeating-linear-gradient(-45deg, var(--frame) 0 1px, transparent 1px 11px);
}
.card .portrait img{ width:100%; height:100%; object-fit:cover; }
.card .who{ font-size:.9375rem; color:var(--fg); opacity:.78; margin:0 }
.card .who strong{ display:block; font-family:var(--font-mono); font-size:.6875rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--accent); margin-bottom:.6rem; font-weight:700 }

.colophon{
  font-family:var(--font-mono); font-size:.625rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--muted);
  margin-top:clamp(3rem,8vh,5rem);
}

a:focus-visible{ outline:2px solid var(--accent); outline-offset:4px }

/* ---------- reveals ---------- */
.rv{ opacity:0; transform:translateY(22px); transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1) }
.rv.in{ opacity:1; transform:none }
.rv:nth-child(2){ transition-delay:.08s }
.rv:nth-child(3){ transition-delay:.16s }
.rv:nth-child(4){ transition-delay:.24s }

@media (prefers-reduced-motion:reduce){
  .rv{ opacity:1; transform:none; transition:none }
  .bar{ animation:none; height:11vh }
  .cue i{ animation:none }
  *{ scroll-behavior:auto !important }
}

/* ============================================
   Secondary pages (single project, standalone
   About/Contact/Work-archive) — same tokens,
   same fonts, simpler one-chapter layout with
   a small back link instead of the scrub rail.
   ============================================ */
.simple-nav{
  font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted); text-decoration:none;
  display:inline-flex; align-items:center; gap:.6rem;
  padding:clamp(1.5rem,4vh,2.5rem) var(--gutter) 0;
  transition:color .3s ease;
}
.simple-nav:hover{ color:var(--accent) }

.project-meta{
  display:flex; flex-wrap:wrap; gap:clamp(1.5rem,4vw,3rem);
  margin-top:clamp(2rem,5vh,3rem);
  font-family:var(--font-mono); font-size:.75rem; letter-spacing:.08em;
  color:var(--muted);
}
.project-meta strong{
  display:block; font-family:var(--font-mono); font-size:.625rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--accent);
  margin-bottom:.4em; font-weight:700;
}

.plate-large{
  aspect-ratio:16/9; border:1px solid var(--rule); overflow:hidden;
  background:repeating-linear-gradient(-45deg, var(--frame) 0 1px, transparent 1px 11px);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.2em;
  color:var(--muted); text-transform:uppercase;
  margin-top:clamp(2.5rem,6vh,4rem);
}
.plate-large img{ width:100%; height:100%; object-fit:cover; }

/* About page photo — floats left so the bio text wraps around it */
.bio-photo{
  float:left; aspect-ratio:3/4; width:clamp(11rem,28vw,16rem);
  border:1px solid var(--rule); overflow:hidden;
  margin:clamp(2.5rem,6vh,4rem) 2rem 1.5rem 0;
}
.bio-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:640px){
  .bio-photo{ float:none; width:min(100%,20rem); margin:clamp(2rem,5vh,3rem) 0 1.5rem; }
}

.video-embed{
  aspect-ratio:16/9; margin-top:clamp(2.5rem,6vh,4rem);
  border:1px solid var(--rule); overflow:hidden;
}
.video-embed iframe{ width:100%; height:100%; border:0; display:block; }

.project-nav{
  display:flex; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
  margin-top:clamp(3rem,8vh,5rem); padding-top:clamp(1.5rem,4vh,2rem);
  border-top:1px solid var(--rule);
  font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.16em;
  text-transform:uppercase;
}
.project-nav a{ color:var(--fg); opacity:.75; text-decoration:none; transition:opacity .3s ease }
.project-nav a:hover{ opacity:1; color:var(--accent) }

.archive-grid{
  display:grid; gap:clamp(1.25rem,3vw,2.25rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
  margin-top:clamp(2.5rem,6vh,4rem);
}

.contact-list{ list-style:none; margin:clamp(2.5rem,6vh,4rem) 0 0; padding:0; max-width:30rem; }
.contact-list li{ padding:.9rem 0; border-top:1px solid var(--rule); }
.contact-list li:last-child{ border-bottom:1px solid var(--rule); }
.contact-list .label{
  display:block; font-family:var(--font-mono); font-size:.625rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin-bottom:.35em;
}
.contact-list a{ color:var(--fg); text-decoration:none; }
.contact-list a:hover{ color:var(--accent); }


/* ---------- click-to-play video (loads the player only when tapped) ---------- */
.video-facade{
  position:relative; display:block; width:100%; height:100%;
  padding:0; border:0; margin:0; cursor:pointer; background:#0B0A08; color:#F6F2EA;
}
.video-facade img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  opacity:.85; transition:opacity .3s ease;
}
.video-facade:hover img, .video-facade:focus-visible img{ opacity:1; }
.video-facade-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:4.5rem; height:4.5rem; border-radius:50%;
  background:rgba(11,10,8,.62); border:1px solid rgba(246,242,234,.55);
  display:flex; align-items:center; justify-content:center;
}
.video-facade-play::before{
  content:""; margin-left:.25rem;
  border-style:solid; border-width:.7rem 0 .7rem 1.15rem;
  border-color:transparent transparent transparent #F6F2EA;
}
.video-facade:focus-visible{ outline:2px solid var(--accent); outline-offset:-4px; }