/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --ink: #17140f;          /* near-black warm, dominant bg */
  --ink-soft: #211c16;     /* card / raised surface on dark */
  --redwood: #7a3d2c;      /* mahogany interior wood */
  --sienna: #a8501f;       /* fascia trim red */
  --stone: #cdc4b0;        /* travertine paving */
  --paper: #eee7d8;        /* warm plaster, used sparingly for insets */
  --slate: #63666b;        /* roof shingle grey */
  --ink-line: rgba(238,231,216,0.14);

  --font-display: "Shippori Mincho", "Noto Serif JP", serif;
  --font-body: "Work Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "Courier New", monospace;

  --gap: clamp(1rem, 2vw, 2rem);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}

/* ============================================================
   ABOUT
   ============================================================ */
.about-layout{
  display:grid;
  grid-template-columns:14rem 1fr;
  gap:2.5rem;
  padding:1rem clamp(1.25rem,4vw,3rem) 3rem;
  max-width:52rem;
  align-items:start;
}
.about-portrait img{
  width:100%; border-radius:2px;
}
.about-text p{
  line-height:1.8; color:var(--stone); margin:0 0 1.1rem; font-size:1.02rem;
}
.about-text p:last-child{ margin-bottom:0; }
@media (max-width:640px){
  .about-layout{ grid-template-columns:1fr; }
  .about-portrait{ max-width:12rem; }
}
.about-photo{
  padding:0 clamp(1.25rem,4vw,3rem) 4rem;
  max-width:52rem;
}
.about-photo img{ width:100%; border-radius:2px; display:block; }
.about-photo-caption{
  font-family:var(--font-mono); font-size:0.85rem; color:var(--slate); margin-top:0.8rem; line-height:1.6;
}

/* ============================================================
   RESUME / TIMELINE
   ============================================================ */
.resume-skills{
  padding:0 clamp(1.25rem,4vw,3rem) 2rem;
}
.resume-skills h2{
  font-family:var(--font-display); font-weight:500; font-size:1.3rem; margin:0 0 1rem;
}
.timeline{
  padding:1rem clamp(1.25rem,4vw,3rem) 4rem;
  max-width:52rem;
}
.timeline-item{
  display:grid;
  grid-template-columns:7rem 1fr;
  gap:1.5rem;
  padding:1.6rem 0;
  border-top:1px solid var(--ink-line);
}
.timeline-item:first-child{ border-top:1px solid var(--ink-line); }
.timeline-year{
  font-family:var(--font-mono); color:var(--sienna); font-size:0.92rem; letter-spacing:0.02em; padding-top:0.15rem;
}
.timeline-body h3{
  font-family:var(--font-display); font-weight:500; font-size:1.05rem; margin:0 0 0.5rem; color:var(--paper);
}
.timeline-body p{
  line-height:1.7; color:var(--stone); margin:0; font-size:0.97rem;
}
.timeline-photo{
  margin-top:0.9rem; border-radius:2px; overflow:hidden; max-width:22rem;
}
.timeline-photo img{ width:100%; display:block; }

/* ============================================================
   SITE HEADER
   ============================================================ */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.25rem clamp(1.25rem, 4vw, 3rem);
  background:linear-gradient(to bottom, rgba(23,20,15,0.85), rgba(23,20,15,0));
  pointer-events:none;
}
.site-header *{ pointer-events:auto; }
.wordmark{
  font-family:var(--font-display);
  font-size:1.05rem;
  letter-spacing:0.04em;
}
.wordmark small{
  display:block;
  font-family:var(--font-mono);
  font-size:0.6rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--stone);
  margin-top:0.2rem;
}
.back-link{
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  border:1px solid var(--ink-line);
  padding:0.5rem 0.9rem;
  border-radius:2px;
  transition:border-color 0.2s, background 0.2s;
}
.back-link:hover{ border-color:var(--sienna); background:rgba(168,80,31,0.12); }

/* ============================================================
   HOMEPAGE HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(2rem,6vw,5rem);
  background-size:cover; background-position:center;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(23,20,15,0.97) 5%, rgba(23,20,15,0.35) 55%, rgba(23,20,15,0.55));
  z-index:1;
}
.hero-content{ position:relative; z-index:2; max-width:56rem; }
.hero-eyebrow{
  font-family:var(--font-mono);
  font-size:0.75rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--sienna);
  margin-bottom:1rem;
}
.hero h1{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(2.4rem, 6vw, 4.6rem);
  line-height:1.05;
  margin:0 0 1.25rem;
}
.hero p{
  font-size:clamp(1rem, 1.6vw, 1.2rem);
  line-height:1.6;
  color:var(--stone);
  max-width:38rem;
  margin:0 0 2rem;
}
.hero-meta{
  display:flex; gap:2rem; flex-wrap:wrap;
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.08em;
  color:var(--stone);
  text-transform:uppercase;
  border-top:1px solid var(--ink-line);
  padding-top:1.25rem;
}
.hero-meta span b{ display:block; color:var(--paper); font-family:var(--font-body); font-size:0.95rem; text-transform:none; letter-spacing:0; margin-top:0.15rem; }

.scroll-cue{
  position:absolute; right:clamp(1.5rem,5vw,4rem); bottom:2.5rem; z-index:2;
  font-family:var(--font-mono); font-size:0.65rem; letter-spacing:0.15em; text-transform:uppercase;
  color:var(--stone);
  writing-mode:vertical-rl;
  display:flex; align-items:center; gap:0.6rem;
}
.scroll-cue::after{ content:""; width:1px; height:2.5rem; background:var(--stone); animation:pulse-line 2s infinite ease-in-out; }
@keyframes pulse-line{ 0%,100%{opacity:0.3;} 50%{opacity:1;} }

/* ============================================================
   PROJECT GRID (homepage)
   ============================================================ */
.section-label{
  display:flex; align-items:baseline; gap:1rem;
  padding:0 clamp(1.25rem,4vw,3rem);
  margin:0 0 1.5rem;
}
.section-label h2{
  font-family:var(--font-display); font-weight:500;
  font-size:1.4rem; margin:0;
}
.section-label .count{
  font-family:var(--font-mono); font-size:0.75rem; color:var(--stone);
  letter-spacing:0.05em;
}

.project-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
  gap:2px;
  background:var(--ink-line);
  padding:2px;
  margin:0 clamp(1.25rem,4vw,3rem) 6rem;
}
.project-card{
  position:relative;
  background:var(--ink);
  aspect-ratio:4/3;
  overflow:hidden;
  display:block;
}
.project-card img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform 0.6s cubic-bezier(.2,.8,.2,1), filter 0.6s;
  filter:saturate(0.92) brightness(0.85);
}
.project-card:hover img{ transform:scale(1.05); filter:saturate(1) brightness(0.95); }
.project-card .card-overlay{
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:1.5rem;
  background:linear-gradient(to top, rgba(23,20,15,0.92) 0%, rgba(23,20,15,0.05) 60%);
}
.project-card .card-num{
  font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.1em;
  color:var(--sienna); margin-bottom:0.4rem;
}
.project-card h3{
  font-family:var(--font-display); font-weight:500;
  font-size:1.35rem; margin:0 0 0.3rem;
}
.project-card .card-tag{
  font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.06em;
  color:var(--stone); text-transform:uppercase;
}
.project-card.placeholder{
  display:flex; align-items:center; justify-content:center;
  border:1px dashed var(--ink-line);
  color:var(--slate);
  font-family:var(--font-mono); font-size:0.75rem; letter-spacing:0.08em;
  text-transform:uppercase; text-align:center; padding:2rem;
}

footer.site-footer{
  padding:0 clamp(1.25rem,4vw,3rem) 3rem;
  border-top:1px solid var(--ink-line);
  margin-top:1rem;
}

/* Title-block style contact stamp, echoing an architectural drawing sheet */
.title-block{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  border:1px solid var(--ink-line);
  margin-top:2.5rem;
}
.title-block .tb-cell{
  padding:1.1rem 1.25rem;
  border-right:1px solid var(--ink-line);
}
.title-block .tb-cell:last-child{ border-right:none; }
.title-block .tb-label{
  font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--sienna); margin-bottom:0.5rem;
}
.title-block .tb-value{
  font-family:var(--font-body); font-size:0.9rem; line-height:1.5; color:var(--paper);
}
.title-block .tb-value.firm{ font-family:var(--font-display); font-size:1.1rem; }
.title-block .tb-value a{ border-bottom:1px solid var(--ink-line); transition:border-color 0.2s, color 0.2s; }
.title-block .tb-value a:hover{ border-color:var(--sienna); color:var(--sienna); }

.footer-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  padding-top:1.25rem;
  font-family:var(--font-mono); font-size:0.68rem; color:var(--slate); letter-spacing:0.05em;
}

@media (max-width:760px){
  .title-block{ grid-template-columns:1fr 1fr; }
  .title-block .tb-cell{ border-bottom:1px solid var(--ink-line); }
  .title-block .tb-cell:nth-child(2n){ border-right:none; }
}

/* ============================================================
   PROJECT PAGE — WAYFINDING STRIP (signature element)
   ============================================================ */
.wayfinding{
  position:sticky; top:0; z-index:40;
  display:flex;
  background:var(--ink);
  border-bottom:1px solid var(--ink-line);
  padding-top:4.2rem; /* clears fixed header */
}
.wayfinding-inner{
  display:flex; width:100%;
  max-width:100%;
  overflow-x:auto;
}
.way-stop{
  flex:1 1 0;
  min-width:140px;
  display:flex; align-items:center; gap:0.6rem;
  padding:0.9rem clamp(0.75rem,2vw,1.5rem);
  border-right:1px solid var(--ink-line);
  cursor:pointer;
  transition:background 0.25s;
  white-space:nowrap;
}
.way-stop:last-child{ border-right:none; }
.way-stop svg{ width:20px; height:16px; flex-shrink:0; opacity:0.5; transition:opacity 0.25s, stroke 0.25s; }
.way-stop span{
  font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--slate); transition:color 0.25s;
}
.way-stop.active svg{ opacity:1; stroke:var(--sienna); }
.way-stop.active span{ color:var(--paper); }
.way-stop:hover span{ color:var(--paper); }

/* ============================================================
   PROJECT PAGE — TITLE BLOCK
   ============================================================ */
.project-title{
  padding:3rem clamp(1.25rem,4vw,3rem) 2rem;
  max-width:56rem;
}
.project-title .eyebrow{
  font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--sienna); margin-bottom:0.75rem;
}
.project-title h1{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(2.2rem,5vw,3.4rem); margin:0 0 1rem; line-height:1.08;
}
.project-title p.lede{
  font-size:1.05rem; line-height:1.7; color:var(--stone); max-width:42rem; margin:0 0 1.75rem;
}
.spec-chips{ display:flex; flex-wrap:wrap; gap:0.6rem; }
.spec-chips span{
  font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.05em; text-transform:uppercase;
  border:1px solid var(--ink-line); padding:0.4rem 0.75rem; border-radius:2px; color:var(--stone);
}

/* ============================================================
   PROJECT PAGE — HERO SLIDESHOW
   ============================================================ */
.slideshow{
  position:relative;
  margin:0 clamp(1.25rem,4vw,3rem) 4rem;
  aspect-ratio:16/9;
  background:var(--ink-soft);
  overflow:hidden;
}
.slideshow .slide{
  position:absolute; inset:0;
  opacity:0; transition:opacity 0.7s ease;
}
.slideshow .slide.active{ opacity:1; }
.slideshow img{ width:100%; height:100%; object-fit:cover; }
.slide-caption{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  padding:1.25rem 1.5rem;
  background:linear-gradient(to top, rgba(23,20,15,0.85), rgba(23,20,15,0));
  font-family:var(--font-mono); font-size:0.75rem; letter-spacing:0.06em;
  color:var(--paper); text-transform:uppercase;
  display:flex; justify-content:space-between;
}
.slide-caption .idx{ color:var(--stone); }
.slide-nav{
  position:absolute; top:0; bottom:0; z-index:4;
  width:15%; display:flex; align-items:center;
  background:transparent; border:none; cursor:pointer;
  color:var(--paper); opacity:0; transition:opacity 0.25s;
}
.slideshow:hover .slide-nav{ opacity:0.85; }
.slide-nav:hover{ opacity:1 !important; }
.slide-nav.prev{ left:0; justify-content:flex-start; padding-left:1rem; background:linear-gradient(to right, rgba(23,20,15,0.35), transparent); }
.slide-nav.next{ right:0; justify-content:flex-end; padding-right:1rem; background:linear-gradient(to left, rgba(23,20,15,0.35), transparent); }
.slide-nav svg{ width:28px; height:28px; }

/* ============================================================
   PROJECT PAGE — GALLERY SECTIONS
   ============================================================ */
.gallery-section{ padding:1rem clamp(1.25rem,4vw,3rem) 4.5rem; scroll-margin-top:8rem; }
.gallery-section .section-head{
  display:flex; align-items:baseline; gap:1rem; margin-bottom:1.5rem;
  border-bottom:1px solid var(--ink-line); padding-bottom:0.9rem;
}
.gallery-section .section-head h2{
  font-family:var(--font-display); font-weight:500; font-size:1.6rem; margin:0;
}
.gallery-section .section-head .section-note{
  font-family:var(--font-mono); font-size:0.75rem; color:var(--stone);
}
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px,1fr));
  gap:1.25rem;
}
.gallery-grid figure{ margin:0; cursor:pointer; }
.gallery-grid .thumb{
  aspect-ratio:4/3; overflow:hidden; background:var(--ink-soft);
}
.gallery-grid img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 0.5s ease, filter 0.5s ease;
  filter:saturate(0.95) brightness(0.9);
}
.gallery-grid figure:hover img{ transform:scale(1.04); filter:saturate(1) brightness(1); }
.gallery-grid figcaption{
  font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.05em; text-transform:uppercase;
  color:var(--stone); margin-top:0.6rem;
}

.narrative{
  padding:1rem clamp(1.25rem,4vw,3rem) 4rem;
  max-width:42rem;
}
.narrative h2{ font-family:var(--font-display); font-weight:500; font-size:1.6rem; margin:0 0 1.1rem; }
.narrative p{ line-height:1.75; color:var(--stone); margin:0 0 1.1rem; font-size:0.98rem; }
.narrative p:last-child{ margin-bottom:0; }

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox{
  position:fixed; inset:0; z-index:100;
  background:rgba(10,9,7,0.96);
  display:none; align-items:center; justify-content:center;
  padding:clamp(1rem,4vw,4rem);
}
.lightbox.open{ display:flex; }
.lightbox img{ max-width:100%; max-height:82vh; object-fit:contain; margin:0 auto; }
.lightbox-caption{
  position:absolute; left:0; right:0; bottom:2rem; text-align:center;
  font-family:var(--font-mono); font-size:0.75rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--stone);
}
.lightbox-close{
  position:absolute; top:1.5rem; right:1.5rem; z-index:2;
  background:none; border:1px solid var(--ink-line); color:var(--paper);
  width:2.4rem; height:2.4rem; border-radius:2px; cursor:pointer; font-size:1.1rem;
}
.lightbox-nav{
  position:absolute; top:0; bottom:0; width:20%; background:none; border:none; cursor:pointer; color:var(--paper); opacity:0.6;
}
.lightbox-nav:hover{ opacity:1; }
.lightbox-nav.prev{ left:0; } .lightbox-nav.next{ right:0; }
.lightbox-nav svg{ width:32px; height:32px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:640px){
  .wayfinding{ padding-top:3.6rem; }
  .way-stop{ min-width:110px; }
  .hero{ padding:1.5rem; }
  .project-title, .gallery-section, .narrative, .slideshow{ margin-left:1rem; margin-right:1rem; padding-left:0; padding-right:0; }
}