/* =========================================================================
   ISAIAH SANCHEZ — Light found in darkness
   A cinematic, candlelit portfolio. Darkness is the canvas; warm light is
   the accent, and it only appears where the eye should land.
   ========================================================================= */

:root {
  /* --- Palette: darkness, and the light found in it --- */
  --void:   #08080a;   /* base — cinematic black, faintly cool */
  --ink:    #0d0d11;   /* nav blur / scrims */
  --ash:    #15151a;   /* tiles, raised surfaces */
  --line:   #25252d;   /* hairlines */
  --smoke:  #8d8880;   /* secondary / captions */
  --bone:   #ece7dd;   /* primary text — warm off-white, never pure */
  --candle: #e8a24b;   /* the flame */
  --ember:  #c8512a;   /* the coal */
  --glow:   linear-gradient(90deg, var(--candle), var(--ember));

  /* --- Type --- */
  --serif: "Fraunces", "Hoefler Text", Georgia, serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* --- Rhythm --- */
  --edge: clamp(1.25rem, 5vw, 5rem);   /* page side margins */
  --rule: 1px solid var(--line);
  --ease: cubic-bezier(.16,.84,.34,1);
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  background: var(--void);
  color: var(--bone);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* Cinematic letterbox bars, top & bottom of the whole viewport */
body::before, body::after {
  content: ""; position: fixed; left: 0; right: 0; height: 22px;
  background: var(--void); z-index: 90; pointer-events: none;
}
body::before { top: 0; box-shadow: 0 1px 0 rgba(255,255,255,.02); }
body::after  { bottom: 0; box-shadow: 0 -1px 0 rgba(255,255,255,.02); }

/* --- Type scale --------------------------------------------------------- */
.display {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 300;
  line-height: .98;
  letter-spacing: -0.01em;
}
.eyebrow {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--smoke);
}
.lede {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.15rem, 1rem + 1.1vw, 1.6rem);
  line-height: 1.5;
  color: var(--bone);
}

/* =========================================================================
   NAV
   ========================================================================= */
.nav {
  position: fixed; top: 22px; left: 0; right: 0; z-index: 80;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem var(--edge);
  transition: background .4s var(--ease), backdrop-filter .4s var(--ease), padding .4s var(--ease);
}
.nav.is-scrolled {
  background: rgba(8,8,10,.72);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  padding-top: .8rem; padding-bottom: .8rem;
  border-bottom: var(--rule);
}
.wordmark {
  font-family: var(--serif); font-weight: 400;
  font-size: 1.02rem; letter-spacing: .34em; text-transform: uppercase;
  white-space: nowrap;
}
.wordmark .dot { color: transparent; background: var(--glow); -webkit-background-clip: text; background-clip: text; }

.nav-links { display: flex; gap: clamp(1.2rem, 2.4vw, 2.6rem); align-items: center; }
.nav-links a {
  position: relative;
  font-size: .76rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--smoke); padding: .35rem 0; transition: color .3s var(--ease);
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1.5px; width: 0;
  background: var(--glow); transition: width .35s var(--ease);
}
.nav-links a:hover, .nav-links a:focus-visible { color: var(--bone); }
.nav-links a:hover::after, .nav-links a:focus-visible::after,
.nav-links a[aria-current="page"]::after { width: 100%; }
.nav-links a[aria-current="page"] { color: var(--bone); }

/* mobile menu button */
.nav-toggle {
  display: none; background: none; border: 0; color: var(--bone);
  width: 40px; height: 40px; cursor: pointer; position: relative; z-index: 81;
}
.nav-toggle span { display:block; width: 24px; height: 1.5px; background: var(--bone); margin: 5px auto; transition: transform .35s var(--ease), opacity .25s var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }

/* =========================================================================
   HERO
   ========================================================================= */
.hero { position: relative; height: 100svh; min-height: 620px; display: flex; align-items: flex-end; }
.hero-media { position: absolute; inset: 0; overflow: hidden; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); }
.hero-media.kenburns img { animation: kenburns 22s ease-out forwards; }
@keyframes kenburns { from { transform: scale(1.16); } to { transform: scale(1.02); } }
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 75% 20%, transparent 40%, rgba(8,8,10,.55) 100%),
    linear-gradient(to top, var(--void) 4%, rgba(8,8,10,.35) 38%, transparent 72%);
}
.hero-inner {
  position: relative; z-index: 2; padding: 0 var(--edge) clamp(3rem, 9vh, 7rem);
  max-width: 60rem;
}
.hero h1 {
  font-size: clamp(2.9rem, 1.5rem + 7vw, 7rem);
  margin: .5rem 0 1.1rem; max-width: 14ch;
}
.hero .tagline {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(1.4rem, 1rem + 1.6vw, 2.2rem); color: var(--candle);
  margin-bottom: 1.4rem; line-height: 1.2;
}
.hero p.intro { max-width: 46ch; color: var(--smoke); font-size: 1.02rem; }
.hero p.intro strong { color: var(--bone); font-weight: 400; }

.scroll-cue {
  position: absolute; left: 50%; bottom: 38px; transform: translateX(-50%);
  z-index: 3; display: flex; flex-direction: column; align-items: center; gap: .6rem;
  font-size: .62rem; letter-spacing: .3em; text-transform: uppercase; color: var(--smoke);
}
.scroll-cue .bar { width: 1px; height: 46px; background: linear-gradient(var(--candle), transparent); animation: drip 2.4s var(--ease) infinite; }
@keyframes drip { 0%,100%{ opacity:.3; transform: scaleY(.6); transform-origin: top; } 50%{ opacity: 1; transform: scaleY(1);} }

/* fade-up entrance for hero text */
.rise { opacity: 0; transform: translateY(22px); animation: rise .9s var(--ease) forwards; }
.rise.d1 { animation-delay: .15s; } .rise.d2 { animation-delay: .3s; }
.rise.d3 { animation-delay: .45s; } .rise.d4 { animation-delay: .6s; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* =========================================================================
   PAGE SHELL / SECTIONS
   ========================================================================= */
main { display: block; }
.section { padding: clamp(4rem, 11vh, 8.5rem) var(--edge); }
.section-head { display: flex; align-items: baseline; gap: 1.2rem; flex-wrap: wrap; margin-bottom: clamp(2rem, 5vh, 3.4rem); }
.section-head h2 { font-size: clamp(1.9rem, 1.2rem + 3vw, 3.4rem); }
.section-head .count { font-family: var(--sans); font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; color: var(--smoke); margin-left: auto; }

/* generic page header (sub pages) */
.page-head { padding: clamp(7rem, 16vh, 11rem) var(--edge) clamp(2rem, 5vh, 3.5rem); border-bottom: var(--rule); }
.page-head h1 { font-size: clamp(2.6rem, 1.6rem + 5vw, 5.6rem); margin: .6rem 0 .4rem; }
.page-head p { color: var(--smoke); max-width: 52ch; }

/* =========================================================================
   GALLERY GRID — an editorial contact sheet with rhythm
   ========================================================================= */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.6rem, 1.4vw, 1.1rem);
  grid-auto-flow: dense;
}
.tile {
  position: relative; overflow: hidden; background: var(--ash);
  aspect-ratio: 4 / 5; cursor: pointer; border: 0;
  width: 100%; padding: 0; color: inherit; font: inherit; text-align: left;
}
.tile.feature { grid-column: span 2; aspect-ratio: 16 / 10; }
.tile img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.92) brightness(.86); transform: scale(1.01);
  transition: transform 1.1s var(--ease), filter .7s var(--ease);
}
.tile:hover img, .tile:focus-visible img { transform: scale(1.07); filter: saturate(1.05) brightness(1); }

/* warm light blooms from the lower edge on hover — the "light found" */
.tile::after {
  content: ""; position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(80% 60% at 50% 118%, rgba(232,162,75,.32), transparent 70%);
  mix-blend-mode: screen; transition: opacity .6s var(--ease); pointer-events: none;
}
.tile:hover::after, .tile:focus-visible::after { opacity: 1; }

.tile .cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 1.3rem 1rem .95rem;
  background: linear-gradient(to top, rgba(8,8,10,.92), transparent);
  transform: translateY(8px); opacity: 0; transition: transform .45s var(--ease), opacity .45s var(--ease);
}
.tile:hover .cap, .tile:focus-visible .cap { transform: none; opacity: 1; }
.tile .cap .t { font-family: var(--serif); font-weight: 300; font-size: .98rem; line-height: 1.2; }
.tile .cap .s { font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--candle); margin-top: .35rem; }

/* reveal on scroll */
.tile { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.tile.in { opacity: 1; transform: none; }

/* placeholder state when the real photo isn't dropped in yet */
.tile.is-missing img { opacity: 0; }
.tile.is-missing { background:
  linear-gradient(135deg, #131318, #0c0c10);
}
.tile.is-missing::before {
  content: attr(data-ph); position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center; text-align: center;
  padding: 1.4rem; font-family: var(--serif); font-weight: 300; font-style: italic;
  font-size: .92rem; line-height: 1.35; color: #4f4b46; letter-spacing: .01em;
}
.tile.is-missing .cap { background: linear-gradient(to top, rgba(8,8,10,.8), transparent); }

/* =========================================================================
   PROJECTS — chapters
   ========================================================================= */
.chapter { padding: clamp(3.5rem, 9vh, 7rem) var(--edge); border-bottom: var(--rule); }
.chapter:last-of-type { border-bottom: 0; }
.chapter-head { max-width: 60rem; margin-bottom: clamp(2rem, 5vh, 3rem); }
.chapter-head .meta { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.chapter-head .roman { font-family: var(--serif); font-style: italic; font-size: 1.1rem; color: var(--ember); }
.chapter-head .frames { font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; color: var(--smoke); }
.chapter-head .line { flex: 1; height: 1px; background: var(--line); }
.chapter-head h2 { font-size: clamp(2.2rem, 1.4rem + 4vw, 4.4rem); margin-bottom: 1.2rem; }
.chapter-head .statement { max-width: 56ch; color: var(--smoke); font-size: 1.05rem; }

/* =========================================================================
   ABOUT
   ========================================================================= */

.about-quote { font-family: var(--serif); font-weight: 300; font-style: italic; font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3.2rem); line-height: 1.15; margin-bottom: 2rem; }
.about-quote .em { color: var(--candle); }
.about-copy p { color: var(--smoke); margin-bottom: 1.1rem; max-width: 52ch; }
.about-copy p:first-child { color: var(--bone); }
.about-meta { margin-top: 2rem; font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; color: var(--smoke); }

/* =========================================================================
   CONTACT
   ========================================================================= */
.contact-wrap { min-height: 78svh; display: flex; flex-direction: column; justify-content: center; padding: clamp(5rem,12vh,8rem) var(--edge); }
.contact-wrap p.intro { max-width: 46ch; color: var(--smoke); font-size: 1.1rem; margin-bottom: clamp(2.5rem,6vh,4rem); }
.contact-list { display: grid; gap: clamp(1rem, 3vh, 1.8rem); }
.contact-list a { display: inline-flex; align-items: baseline; gap: 1.2rem; width: fit-content; }
.contact-list .k { font-size: .68rem; letter-spacing: .26em; text-transform: uppercase; color: var(--smoke); min-width: 6.5rem; }
.contact-list .v { font-family: var(--serif); font-weight: 300; font-size: clamp(1.5rem, 1rem + 2.4vw, 2.8rem); transition: color .3s var(--ease); position: relative; }
.contact-list a:hover .v, .contact-list a:focus-visible .v { color: var(--candle); }
.contact-list .v::after { content:""; position:absolute; left:0; bottom:2px; height:1.5px; width:0; background: var(--glow); transition: width .4s var(--ease); }
.contact-list a:hover .v::after, .contact-list a:focus-visible .v::after { width:100%; }

/* =========================================================================
   FOOTER
   ========================================================================= */
.footer { padding: clamp(3rem,7vh,5rem) var(--edge) clamp(3.5rem,7vh,5rem); border-top: var(--rule); display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; align-items: center; justify-content: space-between; }
.footer .fm { font-family: var(--serif); letter-spacing: .3em; text-transform: uppercase; font-size: .9rem; }
.footer .fm .dot { color: transparent; background: var(--glow); -webkit-background-clip: text; background-clip: text; }
.footer nav { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.footer nav a { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--smoke); transition: color .3s var(--ease); }
.footer nav a:hover { color: var(--bone); }
.footer .copy { font-size: .68rem; color: #56524c; letter-spacing: .06em; width: 100%; }

/* =========================================================================
   LIGHTBOX
   ========================================================================= */
.lb { position: fixed; inset: 0; z-index: 200; display: none; background: rgba(5,5,7,.96); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); }
.lb.open { display: grid; grid-template-rows: 1fr auto; }
.lb-stage { position: relative; display: flex; align-items: center; justify-content: center; padding: clamp(1.5rem,5vh,4rem) clamp(3rem,8vw,6rem) 0; min-height: 0; }
.lb-stage img { max-width: 100%; max-height: 78svh; object-fit: contain; box-shadow: 0 30px 90px rgba(0,0,0,.6); opacity: 0; transition: opacity .4s var(--ease); }
.lb-stage img.ready { opacity: 1; }
.lb-foot { padding: 1.2rem clamp(1.5rem,5vw,4rem) clamp(2rem,5vh,3rem); display: flex; align-items: baseline; gap: 1.2rem; }
.lb-foot .t { font-family: var(--serif); font-weight: 300; font-size: 1.1rem; }
.lb-foot .s { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--candle); }
.lb-foot .num { margin-left: auto; font-size: .72rem; letter-spacing: .22em; color: var(--smoke); }
.lb-btn { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: var(--rule); color: var(--bone); width: 52px; height: 52px; border-radius: 50%; cursor: pointer; font-size: 1.2rem; display: grid; place-items: center; transition: border-color .3s var(--ease), background .3s var(--ease); }
.lb-btn:hover { border-color: var(--candle); background: rgba(232,162,75,.08); }
.lb-prev { left: clamp(.6rem,2vw,1.6rem); } .lb-next { right: clamp(.6rem,2vw,1.6rem); }
.lb-close { position: absolute; top: 34px; right: clamp(1rem,4vw,2.4rem); background: none; border: 0; color: var(--bone); font-size: 1.6rem; cursor: pointer; z-index: 3; line-height: 1; opacity: .7; transition: opacity .3s; }
.lb-close:hover { opacity: 1; }
.lb-stage.ph::before { content: attr(data-ph); color:#5a554e; font-family:var(--serif); font-style:italic; font-size:1rem; }

/* =========================================================================
   FOCUS / A11y
   ========================================================================= */
:focus-visible { outline: 2px solid var(--candle); outline-offset: 3px; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ash); color: var(--bone); padding: .8rem 1.2rem; z-index: 300; }
.skip:focus { left: var(--edge); top: 28px; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 860px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .tile.feature { grid-column: span 2; aspect-ratio: 16/10; }
  
  
  
}

@media (max-width: 680px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: fixed; inset: 0; flex-direction: column; justify-content: center;
    gap: 1.8rem; background: rgba(8,8,10,.97); -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
    transform: translateY(-100%); transition: transform .5s var(--ease); padding: 0 var(--edge);
  }
  .nav-links.open { transform: none; }
  .nav-links a { font-size: 1.4rem; letter-spacing: .12em; font-family: var(--serif); }
  .nav-links a::after { display: none; }
  .grid { grid-template-columns: 1fr; gap: .5rem; }
  .tile, .tile.feature { aspect-ratio: 4/5; grid-column: auto; }
  .tile .cap { transform: none; opacity: 1; } /* always show caption on touch */
  .footer { flex-direction: column; align-items: flex-start; }
}

/* ===== PROJECT COVERS + OVERLAY ===== */
.project-covers{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(.7rem,1.5vw,1.2rem)}
.project-cover{position:relative;overflow:hidden;background:var(--ash);aspect-ratio:3/2;cursor:pointer;border:0;width:100%;padding:0;text-align:left;color:inherit;opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.project-cover.in{opacity:1;transform:none}
.project-cover img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) brightness(.6);transition:transform 1.1s var(--ease),filter .7s var(--ease)}
.project-cover:hover img,.project-cover:focus-visible img{transform:scale(1.05);filter:saturate(1.02) brightness(.72)}
.project-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(8,8,10,.94),rgba(8,8,10,.2) 60%,transparent);pointer-events:none}
.project-cover .pc-body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(1.3rem,3vw,2.3rem)}
.project-cover .pc-meta{display:flex;align-items:center;gap:.8rem;margin-bottom:.5rem}
.project-cover .pc-roman{font-family:var(--serif);font-style:italic;color:var(--ember);font-size:1.05rem}
.project-cover .pc-frames{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--smoke)}
.project-cover h3{font-family:var(--serif);font-weight:300;font-size:clamp(1.7rem,1.1rem + 1.8vw,2.7rem);line-height:1;margin-bottom:.6rem}
.project-cover .pc-enter{font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--bone);display:inline-flex;align-items:center;gap:.5rem;opacity:.85}
.project-cover .pc-enter .arr{transition:transform .35s var(--ease)}
.project-cover:hover .pc-enter .arr{transform:translateX(5px)}
@media(max-width:680px){.project-covers{grid-template-columns:1fr}.project-cover{aspect-ratio:4/3}}
.project-overlay{position:fixed;inset:0;z-index:150;background:var(--void);overflow-y:auto;-webkit-overflow-scrolling:touch;display:none;opacity:0;transition:opacity .45s var(--ease)}
.project-overlay.open{display:block;opacity:1;animation:povIn .5s var(--ease)}
@keyframes povIn{from{opacity:0}to{opacity:1}}
.project-overlay .po-close{position:fixed;top:30px;right:clamp(1rem,4vw,2.4rem);z-index:4;background:rgba(8,8,10,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:var(--rule);color:var(--bone);width:48px;height:48px;border-radius:50%;cursor:pointer;font-size:1.4rem;line-height:1;display:grid;place-items:center;transition:border-color .3s var(--ease)}
.project-overlay .po-close:hover{border-color:var(--candle)}
.po-head{padding:clamp(6rem,14vh,9rem) var(--edge) clamp(2rem,5vh,3rem);border-bottom:var(--rule)}
.po-head .meta{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}
.po-head .roman{font-family:var(--serif);font-style:italic;color:var(--ember);font-size:1.1rem}
.po-head .frames{font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--smoke)}
.po-head h2{font-size:clamp(2.4rem,1.5rem + 4vw,5rem);margin:.4rem 0 1.2rem}
.po-head .statement{max-width:56ch;color:var(--smoke);font-size:1.05rem}
.po-body{padding:clamp(2rem,5vh,3.4rem) var(--edge) clamp(4rem,9vh,7rem)}
.project-overlay .tile{opacity:1;transform:none}

/* ===== PORTFOLIO COVER + :target OVERLAYS (no-JS friendly) ===== */
.about-lead{max-width:64rem;margin:0 auto clamp(2rem,5vh,3.4rem)}
.about-lead .about-meta{margin-top:1.6rem}
.portfolio-cover{position:relative;display:block;width:100%;overflow:hidden;background:var(--ash);aspect-ratio:21/9;cursor:pointer;border:0;padding:0;text-align:left;color:inherit;transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .portfolio-cover:not(.in){opacity:0;transform:translateY(26px)}
.portfolio-cover img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) brightness(.55);transition:transform 1.1s var(--ease),filter .7s var(--ease)}
.portfolio-cover:hover img,.portfolio-cover:focus-visible img{transform:scale(1.04);filter:saturate(1.02) brightness(.66)}
.portfolio-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(8,8,10,.9),rgba(8,8,10,.12) 62%,transparent);pointer-events:none}
.portfolio-cover .pc-body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(1.5rem,4vw,3rem)}
.portfolio-cover .pc-meta{display:flex;align-items:center;gap:.8rem;margin-bottom:.5rem}
.portfolio-cover .pc-frames{font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:var(--smoke)}
.portfolio-cover h3{font-family:var(--serif);font-weight:300;font-size:clamp(1.9rem,1.2rem + 2vw,3.2rem);line-height:1;margin-bottom:.6rem}
.portfolio-cover .pc-enter{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--bone);display:inline-flex;align-items:center;gap:.5rem;opacity:.9}
.portfolio-cover .pc-enter .arr{transition:transform .35s var(--ease)}
.portfolio-cover:hover .pc-enter .arr{transform:translateX(5px)}
@media(max-width:680px){.portfolio-cover{aspect-ratio:4/3}}
/* overlays open via :target (works with no JS) and via .open (JS) */
.project-overlay{overscroll-behavior:contain}

.project-overlay .tile{opacity:1 !important;transform:none !important}
a.project-cover,a.portfolio-cover{text-decoration:none}

/* ===== HAMBURGER-ONLY NAV (all widths) + scrim ===== */
.nav-toggle{display:block}
.nav::before{content:"";position:absolute;inset:-22px 0 -34px 0;background:linear-gradient(to bottom,rgba(8,8,10,.72),rgba(8,8,10,0));pointer-events:none;z-index:-1}
.nav-links{position:fixed;inset:0;flex-direction:column;justify-content:center;align-items:flex-start;gap:1.6rem;background:rgba(8,8,10,.985);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);transform:translateY(-100%);transition:transform .5s var(--ease);padding:0 var(--edge);z-index:79;pointer-events:none}
.nav-links.open{transform:none;pointer-events:auto}
.nav-links a,.nav-links button{font-family:var(--serif);font-weight:300;font-size:clamp(1.5rem,1rem + 1.6vw,2.1rem);letter-spacing:.06em;text-transform:none;color:var(--bone);background:none;border:0;cursor:pointer;padding:.15rem 0;text-align:left}
.nav-links a::after{display:none}
.nav-links a:hover,.nav-links button:hover,.nav-links button:focus-visible{color:var(--candle)}
button.wordmark{background:none;border:0;cursor:pointer;color:inherit;padding:0}
button.project-cover,button.portfolio-cover{font:inherit}
.footer nav button{background:none;border:0;cursor:pointer;color:var(--smoke);font-family:var(--sans);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;padding:0}
.footer nav button:hover{color:var(--bone)}

/* ROBUST MENU HIDE — display-based, reliable even in limited renderers (iOS Files preview) */
.nav .nav-links:not(.open){display:none !important}
.nav-links.open{display:flex !important}
/* keep galleries visible without scripts too */
.tile,.project-cover,.portfolio-cover,.rise{opacity:1;transform:none}

/* ===== OVERLAY READABILITY + FINAL POLISH ===== */
/* Adaptive legibility: soft shadows guarantee text over ANY photo — no solid boxes */
.hero .eyebrow,.hero h1,.hero .tagline,.hero p.intro{text-shadow:0 2px 28px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.45)}
.scroll-cue{text-shadow:0 1px 8px rgba(0,0,0,.5)}
.tile .cap .t,.tile .cap .s{text-shadow:0 1px 10px rgba(0,0,0,.65)}
.project-cover h3,.portfolio-cover h3,.project-cover .pc-roman,.project-cover .pc-frames,.portfolio-cover .pc-frames,.project-cover .pc-enter,.portfolio-cover .pc-enter{text-shadow:0 1px 16px rgba(0,0,0,.55)}
button.wordmark,.wordmark{text-shadow:0 1px 14px rgba(0,0,0,.6)}
/* Deeper, taller scrims so multi-line copy never fights the frame */
.hero-media::after{background:radial-gradient(120% 92% at 76% 18%,transparent 36%,rgba(8,8,10,.6) 100%),linear-gradient(to top,var(--void) 2%,rgba(8,8,10,.58) 28%,rgba(8,8,10,.16) 54%,transparent 74%)}
.tile .cap{padding-top:1.7rem;background:linear-gradient(to top,rgba(8,8,10,.95),rgba(8,8,10,.5) 46%,transparent)}
.project-cover::after{background:linear-gradient(to top,rgba(8,8,10,.95),rgba(8,8,10,.32) 58%,transparent)}
.portfolio-cover::after{background:linear-gradient(to top,rgba(8,8,10,.93),rgba(8,8,10,.22) 62%,transparent)}
/* Cleaner mobile grids — captions live in the lightbox, not stacked on every photo */
@media(max-width:680px){.tile .cap{opacity:0;transform:translateY(8px)}}
/* Small-screen wordmark won't crowd the menu button */
@media(max-width:480px){.wordmark,button.wordmark{letter-spacing:.2em;font-size:.92rem}}
/* Accessibility — visible focus for the button-driven nav and covers */
.nav-links button:focus-visible,.footer nav button:focus-visible,button.wordmark:focus-visible,.project-cover:focus-visible,.portfolio-cover:focus-visible,.nav-toggle:focus-visible,.po-close:focus-visible{outline:2px solid var(--candle);outline-offset:4px;border-radius:2px}
/* Rhythm: a touch more air under section titles, tighter cover copy */
.section-head{margin-bottom:clamp(2.2rem,5.5vh,3.6rem)}
.pc-enter{margin-top:.15rem}

/* ===== v1.1 ENHANCEMENTS (no visual change to the design) ===== */
.tile picture,.project-cover picture,.portfolio-cover picture,.hero-media picture{display:block;width:100%;height:100%}
button{-webkit-appearance:none;appearance:none}
#preloader{position:fixed;inset:0;background:var(--void);z-index:300;pointer-events:none;animation:preloadFade 1.1s ease 1.3s forwards}
@keyframes preloadFade{from{opacity:1;visibility:visible}to{opacity:0;visibility:hidden}}
html.loaded #preloader{animation:preloadFade .55s ease forwards}
@media(prefers-reduced-motion:reduce){#preloader{display:none}}
/* custom 404 — same palette, fonts, mood */
.page-404{min-height:100vh}
.fourofour{position:relative;min-height:100vh;min-height:100svh;display:grid;place-items:center;text-align:center;padding:2rem var(--edge);overflow:hidden}
.fourofour::before{content:"";position:absolute;inset:0;background:url(images/hero.jpg) center/cover no-repeat;filter:brightness(.26) saturate(.82);transform:scale(1.06);z-index:-2}
.fourofour::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 42%,transparent 10%,var(--void) 80%);z-index:-1}
.fourofour .inner{max-width:46ch}
.fourofour .eyebrow{margin-bottom:1.2rem}
.fourofour h1{font-size:clamp(2rem,1.3rem + 4vw,3.7rem);margin-bottom:1.4rem;text-shadow:0 2px 30px rgba(0,0,0,.6)}
.fourofour p{color:var(--smoke);font-size:1.05rem;margin-bottom:2.4rem}
.btn-home{display:inline-flex;align-items:center;border:1px solid var(--line);color:var(--bone);padding:.95rem 2.1rem;letter-spacing:.2em;text-transform:uppercase;font-size:.7rem;text-decoration:none;transition:border-color .35s var(--ease),color .35s var(--ease),background .35s var(--ease)}
.btn-home:hover,.btn-home:focus-visible{border-color:var(--candle);color:var(--candle);background:rgba(232,162,75,.06);outline:none}
.page-404 .nav{position:absolute;background:none;border:0}
.page-404 .nav::before{opacity:.4}