/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --navy: #0E1A26;
  --ivory: #F7F4ED;
  --ivory-2: #EFEAE0;
  --brass: #C6A15B;
  --graphite: #2F2F2F;
  --slate: #50627A;
  --slate-faint: rgba(80,98,122,0.35);
  --line: rgba(47,47,47,0.14);

  --display: 'Fraunces', serif;
  --body: 'Inter', sans-serif;
  --mono: 'IBM Plex Mono', monospace;

  --sheet-margin: clamp(20px, 5vw, 64px);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *,*::before,*::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

body{
  margin:0;
  background: var(--ivory);
  color: var(--graphite);
  font-family: var(--body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,svg{ display:block; max-width:100%; }
a{ color: inherit; }

/* faint drafting-paper grid across whole document */
body::before{
  content:"";
  position: fixed; inset:0;
  pointer-events:none;
  z-index:0;
  background-image:
    repeating-linear-gradient(0deg, rgba(80,98,122,0.055) 0 1px, transparent 1px 88px),
    repeating-linear-gradient(90deg, rgba(80,98,122,0.055) 0 1px, transparent 1px 88px);
}

h1,h2,h3,h4{ font-family: var(--display); font-weight: 500; margin:0; letter-spacing: -0.01em; }
p{ margin:0; }

.mono{ font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.09em; font-size: 11px; color: var(--slate); }

.wrap{ position:relative; max-width: 1440px; margin: 0 auto; padding: 0 var(--sheet-margin); }

/* ============================================================
   REUSABLE DRAFTING FURNITURE
   ============================================================ */

.sheet{
  position: relative;
  padding: clamp(90px,14vw,180px) 0 clamp(60px,10vw,120px);
  border-top: 1px solid var(--line);
}

.sheet-label{
  position:absolute;
  top: 28px;
  right: var(--sheet-margin);
  display:flex; align-items:center; gap:10px;
  z-index:2;
}
.sheet-label .num{ font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; color: var(--slate); }
.sheet-label .dot{ width:5px;height:5px;border-radius:50%; background: var(--brass); }

.sheet-title-mark{
  position:absolute;
  top: 28px;
  left: var(--sheet-margin);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--slate);
  text-transform: uppercase;
}

.crop{ position:absolute; width:16px; height:16px; pointer-events:none; opacity:0.55; z-index:2; }
.crop svg{ width:100%; height:100%; }
.crop.tl{ top:14px; left:14px; }
.crop.tr{ top:14px; right:14px; }
.crop.bl{ bottom:14px; left:14px; }
.crop.br{ bottom:14px; right:14px; }

.reveal{ opacity:0; transform: translateY(18px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.in{ opacity:1; transform: translateY(0); }

.draw-line{ stroke-dasharray: var(--len, 1000); stroke-dashoffset: var(--len, 1000); transition: stroke-dashoffset 1.6s var(--ease); }
.in .draw-line{ stroke-dashoffset: 0; }

.kicker{ font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--brass); margin-bottom: 14px; display:flex; align-items:center; gap:10px; }
.kicker::before{ content:""; width: 26px; height:1px; background: var(--brass); }

/* ============================================================
   NAV
   ============================================================ */
header.nav{
  position: fixed; top:0; left:0; right:0; z-index: 200;
  display:flex; align-items:center; justify-content: space-between;
  padding: 22px var(--sheet-margin);
  mix-blend-mode: normal;
  transition: background 0.4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
header.nav.scrolled{ background: rgba(247,244,237,0.86); backdrop-filter: blur(10px); border-color: var(--line); }

.logo{ font-family: var(--display); font-size: 19px; letter-spacing: 0.01em; display:flex; align-items:baseline; gap:8px; }
.logo em{ font-style: italic; color: var(--slate); font-size: 12px; font-family: var(--mono); text-transform: uppercase; letter-spacing: .12em; }

nav.links{ display:flex; align-items:center; gap: 36px; }
nav.links a{
  font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
  text-decoration:none; color: var(--graphite); position:relative; padding-bottom: 3px;
}
nav.links a::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background: var(--brass); transition: width .35s var(--ease); }
nav.links a:hover::after, nav.links a:focus-visible::after{ width:100%; }
nav.links a:focus-visible{ outline: 1px dashed var(--brass); outline-offset: 4px; }

.nav-index{ font-family: var(--mono); font-size: 11px; color: var(--slate); letter-spacing: .1em; }

/* ---------- Hamburger button ---------- */
.menu-btn{
  display:none; position:relative; z-index:260;
  width:42px; height:42px; align-items:center; justify-content:center;
  background: transparent; border: 1px solid var(--line); cursor:pointer;
  padding:0; -webkit-tap-highlight-color: transparent;
}
.menu-btn-lines{ position:relative; width:18px; height:12px; display:block; }
.menu-btn-lines span{
  position:absolute; left:0; width:100%; height:1px; background: var(--navy);
  transition: transform .35s var(--ease), opacity .25s var(--ease), top .35s var(--ease), background .3s var(--ease);
}
.menu-btn-lines span:nth-child(1){ top:0; }
.menu-btn-lines span:nth-child(2){ top:50%; margin-top:-0.5px; }
.menu-btn-lines span:nth-child(3){ top:100%; margin-top:-1px; }
.menu-btn[aria-expanded="true"] .menu-btn-lines span{ background: var(--ivory); }
.menu-btn[aria-expanded="true"] .menu-btn-lines span:nth-child(1){ top:50%; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn-lines span:nth-child(2){ opacity:0; }
.menu-btn[aria-expanded="true"] .menu-btn-lines span:nth-child(3){ top:50%; transform: rotate(-45deg); }
.menu-btn:focus-visible{ outline: 1px dashed var(--brass); outline-offset: 3px; }

/* ---------- Mobile menu overlay ---------- */
.mobile-menu{
  position: fixed; inset:0; z-index:250;
  background: var(--navy);
  visibility:hidden; opacity:0;
  transition: opacity .5s var(--ease), visibility .5s var(--ease);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.mobile-menu.open{ visibility:visible; opacity:1; }
.mobile-menu-grid{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg, rgba(247,244,237,0.06) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(247,244,237,0.06) 0 1px, transparent 1px 64px);
}
.mobile-menu-grid::before{
  content:""; position:absolute; top:50%; left:50%; width:420px; height:420px;
  transform: translate(-50%,-50%);
  border: 1px solid rgba(198,161,91,0.18); border-radius:50%;
}
.mobile-menu-inner{ position:relative; z-index:2; width:100%; padding: 0 var(--sheet-margin); }
.mobile-menu-links{ display:flex; flex-direction:column; gap: 6px; }
.mobile-menu-links a{
  display:flex; align-items:baseline; gap:18px;
  font-family: var(--display); font-size: clamp(30px,8vw,52px); font-weight:500;
  color: var(--ivory); text-decoration:none; padding: 12px 0;
  border-bottom: 1px solid rgba(247,244,237,0.12);
  opacity:0; transform: translateY(16px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), color .3s var(--ease);
}
.mobile-menu.open .mobile-menu-links a{ opacity:1; transform: translateY(0); }
.mobile-menu.open .mobile-menu-links a:nth-child(1){ transition-delay: .08s; }
.mobile-menu.open .mobile-menu-links a:nth-child(2){ transition-delay: .14s; }
.mobile-menu.open .mobile-menu-links a:nth-child(3){ transition-delay: .20s; }
.mobile-menu.open .mobile-menu-links a:nth-child(4){ transition-delay: .26s; }
.mobile-menu.open .mobile-menu-links a:nth-child(5){ transition-delay: .32s; }
.mobile-menu-links a:hover, .mobile-menu-links a:focus-visible{ color: var(--brass); }
.mobile-menu-links .mm-num{
  font-family: var(--mono); font-size: 12px; letter-spacing:.1em; color: var(--brass);
}
.mobile-menu-footer{
  margin-top: 40px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  color: rgba(247,244,237,0.55); font-size:10.5px; letter-spacing:.08em;
  opacity:0; transition: opacity .6s var(--ease) .4s;
}
.mobile-menu.open .mobile-menu-footer{ opacity:1; }
body.menu-open{ overflow:hidden; }

@media (max-width: 860px){
  nav.links{ display:none; }
  .menu-btn{ display:inline-flex; }
  .nav-index{ display:none; }
}
@media (min-width: 861px){
  .mobile-menu{ display:none; }
}

/* ============================================================
   PRELOADER
   ============================================================ */
#preloader{
  position: fixed; inset:0; z-index: 999;
  background: var(--navy);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap: 22px;
  transition: opacity 0.9s var(--ease), visibility 0.9s var(--ease);
}
#preloader.hidden{ opacity:0; visibility: hidden; pointer-events:none; }
#preloader svg{ width: 140px; height:140px; }
#preloader .pl-label{ font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; color: rgba(247,244,237,0.55); text-transform: uppercase; }
#preloader .pl-circle{ stroke-dasharray: 452; stroke-dashoffset: 452; animation: drawCircle 1.6s var(--ease) forwards 0.2s; }
#preloader .pl-needle{ transform-origin: 70px 70px; animation: spinNeedle 1.8s var(--ease) forwards 0.4s; opacity:0; }
#preloader .pl-cross line{ stroke-dasharray: 60; stroke-dashoffset: 60; animation: drawCross 0.6s var(--ease) forwards 1.6s; }

@keyframes drawCircle{ to{ stroke-dashoffset: 0; } }
@keyframes spinNeedle{ 0%{ opacity:0; transform: rotate(-40deg) scale(0.9);} 30%{opacity:1;} 100%{ opacity:1; transform: rotate(320deg) scale(1);} }
@keyframes drawCross{ to{ stroke-dashoffset:0; } }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position: relative;
  min-height: 100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding: 140px var(--sheet-margin) 60px;
  border-top: none;
}
.hero-grid{
  display:grid; grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items:center;
  max-width: 1440px; margin: 0 auto; width:100%;
}
.hero h1{
  font-size: clamp(40px, 6vw, 84px);
  line-height: 1.02;
  color: var(--navy);
}
.hero h1 .it{ font-style: italic; color: var(--slate); }
.hero .lede{
  margin-top: 26px; max-width: 46ch;
  font-size: 17px; line-height: 1.7; color: var(--graphite);
}
.hero .cta{
  margin-top: 40px; display:inline-flex; align-items:center; gap: 12px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration:none; color: var(--navy); border-bottom: 1px solid var(--navy); padding-bottom:6px;
  transition: gap .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.hero .cta:hover{ gap: 18px; color: var(--brass); border-color: var(--brass); }

.axo-wrap{ position:relative; }
.axo-wrap svg{ width:100%; height:auto; }
.dim-callout{ font-family: var(--mono); font-size: 10px; fill: var(--slate); letter-spacing:.04em; }

.hero-scroll{
  position:absolute; bottom: 34px; left: var(--sheet-margin);
  display:flex; align-items:center; gap:10px;
}
.hero-scroll .track{ width:1px; height: 46px; background: var(--slate-faint); position:relative; overflow:hidden; }
.hero-scroll .track::after{ content:""; position:absolute; top:-100%; left:0; width:100%; height:100%; background: var(--brass); animation: scrollTick 2.2s ease-in-out infinite; }
@keyframes scrollTick{ 0%{ top:-100%; } 50%{ top:0; } 100%{ top:100%; } }

@media (max-width: 900px){
  .hero-grid{ grid-template-columns: 1fr; }
  .axo-wrap{ order:-1; }
}

/* ============================================================
   MANIFESTO
   ============================================================ */
.manifesto .wrap{ display:grid; grid-template-columns: 170px 1fr 210px; gap: 40px; }
.manifesto .margin-notes{ padding-top: 8px; }
.margin-note{ font-family: var(--mono); font-size: 10.5px; line-height:1.7; color: var(--slate); border-left: 1px solid var(--line); padding-left: 14px; margin-bottom: 30px; }
.manifesto-body{ max-width: 62ch; }
.manifesto-body p{ font-size: 19px; line-height: 1.75; color: var(--graphite); margin-bottom: 22px; }
.manifesto-body .drop{
  font-family: var(--display); font-size: 78px; line-height: 0.78; float:left;
  margin: 6px 12px 0 0; color: var(--navy); font-weight: 500;
}
blockquote.pull{
  font-family: var(--display); font-style: italic; font-size: clamp(24px,3vw,34px);
  color: var(--navy); line-height: 1.35; margin: 42px 0; border-left: 2px solid var(--brass); padding-left: 26px;
}
blockquote.pull cite{ display:block; margin-top:14px; font-family: var(--mono); font-style: normal; font-size:11px; letter-spacing:.08em; color: var(--slate); text-transform: uppercase; }
.manifesto .fragments{ position:relative; }
.frag{ position:absolute; opacity:0.75; }
@media (max-width: 900px){ .manifesto .wrap{ grid-template-columns: 1fr; } .manifesto .margin-notes, .manifesto .fragments{ display:none; } }

/* ============================================================
   PHILOSOPHY (three chapters)
   ============================================================ */
.chapters{ display:flex; flex-direction:column; gap: 130px; margin-top: 70px; }
.chapter{ display:grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items:center; }
.chapter:nth-child(even){ direction: rtl; }
.chapter:nth-child(even) > *{ direction: ltr; }
.chapter .chnum{ font-family: var(--mono); font-size: 60px; color: var(--slate-faint); line-height:1; margin-bottom: 18px; }
.chapter h3{ font-size: clamp(26px,3vw,38px); color: var(--navy); margin-bottom: 16px; }
.chapter p.desc{ font-size: 15.5px; line-height: 1.75; color: var(--graphite); max-width: 42ch; }
.chapter .tags{ margin-top: 22px; display:flex; gap:10px; flex-wrap:wrap; }
.chapter .tags span{ font-family: var(--mono); font-size: 10px; letter-spacing:.08em; text-transform: uppercase; color: var(--slate); border:1px solid var(--line); padding: 5px 10px; }
.chapter figure{ margin:0; border:1px solid var(--line); background: rgba(255,255,255,0.4); padding: 18px; }
@media (max-width: 860px){ .chapter, .chapter:nth-child(even){ grid-template-columns: 1fr; direction: ltr; } }

/* ============================================================
   CONTEXT
   ============================================================ */
.contexts{ display:grid; grid-template-columns: repeat(3,1fr); gap: 44px; margin-top: 60px; }
.ctx-card{ }
.ctx-card figure{ margin:0; border-bottom: 1px solid var(--line); padding-bottom: 20px; }
.ctx-card h4{ margin-top: 20px; font-size: 21px; color: var(--navy); }
.ctx-card .coord{ font-family: var(--mono); font-size: 10px; color: var(--slate); margin-top:4px; letter-spacing:.06em; }
.ctx-card p{ margin-top: 12px; font-size: 14.5px; line-height:1.7; color: var(--graphite); }
@media (max-width: 900px){ .contexts{ grid-template-columns: 1fr; } }

/* ============================================================
   SELECTED WORKS
   ============================================================ */
.spread{ margin-top: 70px; padding-top: 60px; border-top: 1px dashed var(--line); }
.spread:first-of-type{ border-top:none; padding-top:0; }
.spread-head{ display:flex; justify-content: space-between; align-items:flex-end; gap: 20px; flex-wrap:wrap; margin-bottom: 34px; }
.spread-head h3{ font-size: clamp(28px,3.4vw,46px); color: var(--navy); }
.spread-head .meta{ font-family: var(--mono); font-size: 11px; color: var(--slate); text-align:right; line-height:1.9; letter-spacing:.04em; }
.spread-grid{ display:grid; grid-template-columns: 1.3fr 1fr; gap: 46px; }
.spread-drawing{ border:1px solid var(--line); padding: 22px; background: rgba(255,255,255,0.35); }
.spread-info{ display:flex; flex-direction:column; gap: 26px; }
.info-block .mono{ display:block; margin-bottom: 8px; }
.info-block p{ font-size: 14.5px; line-height:1.75; color: var(--graphite); }
.palette{ display:flex; gap: 10px; }
.swatch{ width: 34px; height:34px; border:1px solid var(--line); }
.timeline-mini{ display:flex; align-items:center; gap: 6px; }
.timeline-mini span{ font-family: var(--mono); font-size: 9px; color: var(--slate); }
.timeline-mini .bar{ flex:1; height:1px; background: var(--line); position:relative; }
.timeline-mini .bar::after{ content:""; position:absolute; left:0; top:-2px; width:38%; height:5px; background: var(--brass); }
@media (max-width: 900px){ .spread-grid{ grid-template-columns: 1fr; } }

.project-index{ margin-top: 90px; border-top: 1px solid var(--line); }
.pi-row{ display:grid; grid-template-columns: 60px 1fr 160px 140px 90px; gap: 18px; align-items:center; padding: 20px 0; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 12px; color: var(--slate); }
.pi-row.head{ text-transform: uppercase; letter-spacing:.1em; font-size:10px; color: var(--graphite); }
.pi-row span.title{ font-family: var(--body); font-size: 15px; color: var(--navy); letter-spacing:0; text-transform:none; }
@media (max-width: 760px){ .pi-row{ grid-template-columns: 40px 1fr 90px; } .pi-row span:nth-child(4), .pi-row span:nth-child(5){ display:none; } }

/* ============================================================
   PROCESS — scale ruler
   ============================================================ */
.ruler-wrap{ margin-top: 90px; position:relative; }
.ruler-line{ position:relative; height: 2px; background: var(--line); margin: 0 20px; }
.ruler-fill{ position:absolute; left:0; top:0; height:100%; width:0%; background: var(--brass); transition: width 1.6s var(--ease); }
.milestones{ display:flex; justify-content: space-between; margin-top: -1px; }
.milestone{ position:relative; flex:1; display:flex; flex-direction:column; align-items:center; padding-top: 26px; text-align:center; }
.milestone::before{ content:""; position:absolute; top:0; left:50%; transform: translateX(-50%); width:1px; height:20px; background: var(--slate-faint); }
.milestone .mnum{ font-family: var(--mono); font-size: 11px; color: var(--brass); }
.milestone h4{ margin-top: 10px; font-size: 17px; color: var(--navy); }
.milestone p{ margin-top: 8px; font-size: 12.5px; color: var(--slate); max-width: 20ch; line-height:1.6; }
@media (max-width: 860px){ .milestones{ flex-direction:column; gap: 30px; } .milestone{ align-items:flex-start; text-align:left; padding-left: 26px; padding-top:0; } .milestone::before{ top:50%; left:0; transform: translateY(-50%) rotate(90deg); } .ruler-line{ display:none; } }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonial{ max-width: 900px; margin: 0 auto; text-align:center; }
.testimonial blockquote{ font-family: var(--display); font-style: italic; font-size: clamp(24px, 4vw, 44px); line-height:1.4; color: var(--navy); }
.testimonial cite{ display:block; margin-top: 28px; font-family: var(--mono); font-size: 11px; letter-spacing:.1em; text-transform: uppercase; color: var(--slate); font-style: normal; }
.t-nav{ display:flex; justify-content:center; gap: 14px; margin-top: 50px; }
.t-nav button{ width:8px; height:8px; border-radius:50%; border:1px solid var(--slate); background: transparent; cursor:pointer; padding:0; }
.t-nav button.active{ background: var(--brass); border-color: var(--brass); }
.t-nav button:focus-visible{ outline: 2px dashed var(--brass); outline-offset:3px; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-frame{ position:relative; border:1px solid var(--line); padding: clamp(30px,5vw,70px); margin-top: 50px; }
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.contact-info .mono{ display:block; margin-bottom:6px; }
.contact-info .field{ margin-bottom: 30px; }
.contact-info .field strong{ display:block; font-family: var(--display); font-size: 20px; color: var(--navy); font-weight:500; margin-top: 4px; }

form.contact-form{ display:flex; flex-direction:column; gap: 24px; }
.f-row{ position:relative; }
.f-row label{ font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); display:block; margin-bottom: 8px; }
.f-row input, .f-row textarea{
  width:100%; background: transparent; border:none; border-bottom: 1px solid var(--line);
  font-family: var(--body); font-size: 15px; color: var(--graphite); padding: 8px 2px; outline:none;
  transition: border-color .3s var(--ease);
}
.f-row textarea{ resize: vertical; min-height: 90px; font-family: var(--body); }
.f-row input:focus, .f-row textarea:focus{ border-color: var(--navy); }
.f-row.error input, .f-row.error textarea{ border-color: #A34A3A; }
.f-row .err-msg{ font-family: var(--mono); font-size: 10px; color: #A34A3A; margin-top: 6px; min-height: 13px; letter-spacing:.03em; }
.submit-btn{
  align-self:flex-start; margin-top: 10px; background: var(--navy); color: var(--ivory); border:none;
  font-family: var(--mono); font-size: 11px; letter-spacing:.12em; text-transform: uppercase;
  padding: 15px 30px; cursor:pointer; transition: background .3s var(--ease), transform .3s var(--ease);
}
.submit-btn:hover{ background: var(--brass); }
.submit-btn:focus-visible{ outline: 2px dashed var(--brass); outline-offset: 3px; }
.submit-btn:disabled{ opacity:0.5; cursor:not-allowed; }
.form-success{ font-family: var(--mono); font-size: 12px; color: var(--slate); margin-top: 4px; display:none; }
.form-success.show{ display:block; }
@media (max-width: 860px){ .contact-grid{ grid-template-columns: 1fr; } }

footer.site-footer{
  padding: 40px var(--sheet-margin) 50px; border-top: 1px solid var(--line);
  display:flex; justify-content: space-between; align-items:center; flex-wrap:wrap; gap: 14px;
  font-family: var(--mono); font-size: 10.5px; color: var(--slate); letter-spacing:.05em;
}

/* generic svg stroke defaults */
.tech-line{ stroke: var(--slate); stroke-width:1; fill:none; }
.pencil-line{ stroke: var(--graphite); stroke-width:1.1; fill:none; opacity:0.75; }
.brass-line{ stroke: var(--brass); stroke-width:1; fill:none; }
.hatch{ stroke: var(--slate); stroke-width:0.6; opacity:0.5; }

/* ============================================================
   PHOTOGRAPHY — real project imagery
   ============================================================ */
.photo-treat{ filter: grayscale(0.06) saturate(1.05) contrast(1.04) brightness(0.99); }
figure.hero-photo{ margin:0; position:relative; border: 1px solid var(--line); }
figure.hero-photo img{ width:100%; height: clamp(340px,46vw,560px); object-fit: cover; filter: grayscale(0.06) saturate(1.05) contrast(1.04) brightness(0.99); }
figure.hero-photo figcaption{
  position:absolute; left:0; right:0; bottom:0;
  background: linear-gradient(0deg, rgba(14,26,38,0.75), transparent);
  color: var(--ivory); padding: 16px 18px; font-size: 10.5px; letter-spacing:.08em;
}
.chapter figure.photo, .ctx-card figure.photo, .spread-drawing.photo{
  margin:0; overflow:hidden; position:relative; border:1px solid var(--line);
}
.chapter figure.photo img, .ctx-card figure.photo img, .spread-drawing.photo img{
  width:100%; height:100%; object-fit: cover; display:block;
}
.chapter figure.photo{ aspect-ratio: 4 / 3.1; }
.ctx-card figure.photo{ aspect-ratio: 4 / 3; }
.spread-drawing.photo{ aspect-ratio: 5 / 3.6; }
.photo-tag{
  position:absolute; left:14px; bottom:14px; z-index:2;
  font-family: var(--mono); font-size: 10px; letter-spacing:.08em; text-transform: uppercase;
  color: var(--ivory); background: rgba(14,26,38,0.72); padding: 6px 10px;
}

/* Instagram-style gallery strip */
.gallery-strip{ display:grid; grid-template-columns: repeat(6,1fr); gap: 10px; margin-top: 60px; }
.gallery-strip figure{ margin:0; aspect-ratio: 1/1; overflow:hidden; position:relative; border:1px solid var(--line); }
.gallery-strip img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .6s var(--ease); }
.gallery-strip figure:hover img{ transform: scale(1.06); }
@media (max-width: 900px){ .gallery-strip{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 560px){ .gallery-strip{ grid-template-columns: repeat(2,1fr); } }

/* ============================================================
   MOBILE READ-MORE CLAMP
   Long text blocks collapse on small screens with a fade + button,
   so the page doesn't feel like an unbroken wall of text on mobile.
   ============================================================ */
.read-more-btn{ display:none; }
@media (max-width: 860px){
  .clampable{ position:relative; max-height: 220px; overflow:hidden; transition: max-height .5s var(--ease); }
  .clampable::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:72px;
    background: linear-gradient(180deg, rgba(247,244,237,0), var(--ivory) 82%);
    pointer-events:none; transition: opacity .35s var(--ease);
  }
  .clampable.expanded{ max-height: 2400px; }
  .clampable.expanded::after{ opacity:0; }
  .read-more-btn{
    display:inline-flex; align-items:center; gap:8px; margin-top:20px;
    font-family: var(--mono); font-size: 11px; letter-spacing:.1em; text-transform:uppercase;
    background:none; border:1px solid var(--line); color:var(--navy); padding:11px 20px; cursor:pointer;
    transition: border-color .3s var(--ease), color .3s var(--ease);
  }
  .read-more-btn:hover{ border-color: var(--brass); color: var(--brass); }
  .read-more-btn:focus-visible{ outline: 1px dashed var(--brass); outline-offset:3px; }
  .read-more-btn .rm-icon{ transition: transform .3s var(--ease); }
  .read-more-btn[aria-expanded="true"] .rm-icon{ transform: rotate(180deg); }
}