@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@300;400;500;600;700&display=swap');

:root{
  --paper: #F1EEE7;
  --paper-deep: #E7E2D7;
  --ink: #1B1A16;
  --ink-soft: #55524A;
  --blue: #2F4B78;
  --line: #C9C2B2;
  --rust: #A8471F;
  --burgundy: #6E1F2D;
  /* every text style on the site uses Geist Mono */
  --title: 'Geist Mono', ui-monospace, monospace;
  --serif: var(--title);
  --sans: var(--title);
  --mono: var(--title);
}
button, input, textarea, select{font-family:inherit;}

*{box-sizing:border-box; margin:0; padding:0;}
:root{padding-top:env(safe-area-inset-top, 0px); padding-bottom:env(safe-area-inset-bottom, 0px);}
html{scroll-behavior:smooth; scroll-padding-top:env(safe-area-inset-top, 0px);}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

::selection{background:var(--blue); color:var(--paper);}
:focus-visible{outline:2px solid var(--blue); outline-offset:3px;}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
}

a{color:inherit; text-decoration:none;}

/* ---------- Layout shell ---------- */
.frame{
  max-width:1400px;
  margin:0 auto;
  padding:0 clamp(20px, 4vw, 64px);
}

/* ---------- Header / nav ---------- */
header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  background:rgba(241,238,231,0.86);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
  padding-top:env(safe-area-inset-top, 0px);
}
.header-inner{
  max-width:1400px;
  margin:0 auto;
  padding:18px clamp(20px, 4vw, 64px);
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:24px;
}
.wordmark{
  font-family:var(--serif);
  font-optical-sizing:auto;
  font-weight:500;
  font-size:1.05rem;
  letter-spacing:0.01em;
  white-space:nowrap;
  display:flex;
  align-items:center;
  gap:10px;
}
.logo-mark{
  width:26px;
  height:26px;
  border-radius:50%;
  border:1px solid var(--ink);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--mono);
  font-size:0.6rem;
  letter-spacing:0;
  flex-shrink:0;
}
.wordmark span{color:var(--blue); font-style:italic; font-weight:400;}
nav{display:flex; gap:clamp(16px,3vw,36px);}
nav button, nav a{
  background:none; border:none; cursor:pointer;
  font-family:var(--sans); font-size:0.92rem; font-weight:500;
  color:var(--ink-soft);
  padding:4px 2px;
  position:relative;
  text-decoration:none;
}
nav button::after, nav a::after{
  content:'';
  position:absolute; left:0; bottom:-3px;
  height:1px; width:0%;
  background:var(--ink);
  transition:width .25s ease;
}
nav button[aria-current="page"], nav a[aria-current="page"]{color:var(--ink);}
nav button[aria-current="page"]::after, nav a[aria-current="page"]::after{width:100%;}
nav button:hover::after, nav a:hover::after{width:100%;}

/* Practice project cards, wrapped in a real <a> for standalone project pages */
.project-link{display:block; text-decoration:none; color:inherit;}

/* Detail-page close control, now a real link instead of a JS button */
a.detail-close{text-decoration:none; display:inline-block;}

/* Smooth native cross-page transition between real page loads (Practice <-> project pages),
   where the browser supports it; falls back to a normal instant navigation otherwise. */
@view-transition{
  navigation:auto;
}

/* ---------- Page transition ---------- */
.page{
  display:none;
  padding-top:96px;
  min-height:100vh;
}
.page.active{
  display:block;
  animation:fadeIn .5s ease both;
}

/* Standalone project pages (real page loads): same fade-in the in-page
   sections use, applied on document load. Also opt into the browser's
   native cross-document View Transition for a smooth cross-fade between
   real page loads in browsers that support it; it's a no-op (plain
   instant navigation) everywhere else, so this never breaks anything. */
@view-transition{
  navigation:auto;
}
body.project-page{
  animation:fadeIn .5s ease both;
}

@keyframes fadeIn{
  from{opacity:0; transform:translateY(8px);}
  to{opacity:1; transform:translateY(0);}
}

/* ---------- Shared bits ---------- */
.eyebrow-mono{
  font-family:var(--mono);
  font-size:0.72rem;
  color:var(--ink-soft);
  letter-spacing:0.03em;
}
.rule{border:none; border-top:1px solid var(--line); margin:0;}

.figure{
  position:relative;
  background:
    linear-gradient(var(--paper-deep) 1px, transparent 1px) 0 0/100% 28px,
    linear-gradient(90deg, var(--paper-deep) 1px, transparent 1px) 0 0/28px 100%,
    #EAE5DA;
  border:none;
  aspect-ratio: var(--ar, 4/3);
  display:flex;
  align-items:flex-end;
}
.figure .cap{
  font-family:var(--mono);
  font-size:0.68rem;
  color:var(--ink-soft);
  padding:8px 10px;
  background:rgba(241,238,231,0.75);
  width:100%;
}
.figure img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
}
.figure .cap{
  position:relative;
  z-index:1;
}

/* =====================================================
   HOME
   ===================================================== */
#home.page{padding-top:0;}

/* ---- Section 1: full-width slideshow with overlaid text ---- */
.home-hero{
  position:relative;
  height:min(56.25vw, 100svh);
  min-height:560px;
  overflow:hidden;
  background:var(--ink);
  color:#fff;
}
.home-hero .slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity 1.2s ease;
}
.home-hero .slide.active{opacity:1;}
.home-hero .slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.home-hero .slide--pair{
  display:flex;
  gap:4px;
  background:var(--ink);
}
.home-hero .slide--pair img{flex:1 1 0; min-width:0;}

.home-hero-shade{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(20,19,15,0.55) 0%, rgba(20,19,15,0.15) 38%, transparent 55%),
    linear-gradient(0deg, rgba(20,19,15,0.55) 0%, rgba(20,19,15,0.1) 30%, transparent 45%);
}

.home-hero-title{
  position:absolute;
  z-index:2;
  top:calc(96px + env(safe-area-inset-top, 0px));
  left:0; right:0;
  max-width:1400px;
  margin:0 auto;
  padding:0 clamp(20px, 4vw, 64px);
  font-family:var(--sans);
  font-weight:500;
  text-transform:uppercase;
  font-size:clamp(2rem, 4.6vw, 4.4rem);
  line-height:0.94;
  letter-spacing:-0.035em;
  display:flex;
  flex-direction:column;
}
.home-hero-title span:nth-child(2){padding-left:0.9em;}
.home-hero-title span:nth-child(3){padding-left:3.4em;}

.home-hero-aside{
  position:absolute;
  z-index:2;
  right:0; bottom:clamp(28px, 5vh, 56px);
  left:0;
  max-width:1400px;
  margin:0 auto;
  padding:0 clamp(20px, 4vw, 64px);
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  text-align:right;
  gap:16px;
}
.home-hero-aside p{
  max-width:30ch;
  font-size:0.95rem;
  line-height:1.5;
}
.home-pill{
  font-family:var(--sans);
  font-size:0.78rem;
  font-weight:500;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink);
  background:#fff;
  border:none;
  border-radius:999px;
  padding:11px 26px;
  cursor:pointer;
  transition:background .25s ease, color .25s ease;
}
.home-pill:hover{background:var(--burgundy); color:#fff;}

.home-slideshow-dots{
  position:absolute;
  z-index:2;
  left:0; right:0;
  bottom:clamp(28px, 5vh, 56px);
  max-width:1400px;
  margin:0 auto;
  padding:0 clamp(20px, 4vw, 64px);
  display:flex;
  gap:8px;
  pointer-events:none;
}
.home-slideshow-dots button{
  width:22px; height:2px;
  border:none;
  background:rgba(255,255,255,0.4);
  cursor:pointer;
  padding:0;
  pointer-events:auto;
}
.home-slideshow-dots button.active{background:#fff;}

/* Header sits over the slideshow until it scrolls past */
header{transition:background-color .3s ease, border-color .3s ease;}
body.header-over header{
  background:transparent;
  border-bottom-color:transparent;
  backdrop-filter:none;
}
body.header-over .wordmark,
body.header-over nav button,
body.header-over nav button[aria-current="page"]{color:#fff;}
body.header-over .wordmark span{color:rgba(255,255,255,0.8);}
body.header-over .logo-mark{border-color:#fff;}
body.header-over nav button::after{background:#fff;}

/* ---- Section 2: brand, statement and grid ---- */
.home-intro{
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:clamp(32px, 5vw, 80px);
  padding-top:14vh;
  padding-bottom:14vh;
  align-items:stretch;
}
.home-intro-copy{
  display:flex;
  flex-direction:column;
}
.home-brand{
  font-family:var(--sans);
  font-weight:500;
  text-transform:uppercase;
  font-size:clamp(1.7rem, 3.2vw, 3rem);
  line-height:0.98;
  letter-spacing:-0.035em;
  color:var(--ink);
  margin-bottom:0.7em;
}
.home-brand-at{
  font-size:0.28em;
  letter-spacing:0.02em;
  vertical-align:middle;
  margin-right:0.9em;
}
.home-brand-amp{font-size:0.55em; vertical-align:middle;}
.home-intro-copy p{
  max-width:42ch;
  font-size:1.02rem;
  line-height:1.7;
  color:var(--ink-soft);
  text-align:justify;
  margin-bottom:40px;
}
.home-intro-copy .home-gif{
  margin-top:auto;
  width:100%;
}

.home-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1.25fr 1fr 1.1fr;
  border-top:1px solid var(--line);
  align-self:stretch;
}
.home-cell{
  position:relative;
  min-height:clamp(150px, 16vw, 230px);
  padding:14px 16px 18px;
  border-left:1px solid var(--line);
  border-bottom:1px solid var(--line);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.home-cell:nth-child(odd){border-left:none;}
.home-cell-no{
  font-family:var(--mono);
  font-size:0.72rem;
  color:var(--ink-soft);
}
.home-cell-word{
  align-self:flex-end;
  font-family:var(--sans);
  font-weight:500;
  text-transform:uppercase;
  font-size:clamp(1.3rem, 2.3vw, 2.2rem);
  letter-spacing:-0.03em;
  color:var(--ink);
}
.home-cell--gif{
  padding:0;
}
.home-cell--gif .figure{
  width:100%;
  height:100%;
  min-height:260px;
  aspect-ratio:auto;
}
.home-cell--accent{
  background:var(--burgundy);
  color:#fff;
  border-left-color:var(--burgundy);
  border-bottom-color:var(--burgundy);
  padding:20px;
}
.home-cell--accent p{
  font-size:0.98rem;
  line-height:1.5;
}

@media (max-width: 860px){
  .home-intro{grid-template-columns:1fr; padding-top:9vh; padding-bottom:10vh; row-gap:48px;}
  .home-intro-copy .home-gif{margin-top:36px;}
}
@media (max-width: 780px){
  /* phones: a taller frame so the headline has room; the wide renders are cropped at the sides */
  .home-hero{height:min(118vw, 82svh); min-height:0;}
  .home-hero-title{font-size:clamp(1.5rem, 6.4vw, 2.4rem); letter-spacing:-0.04em; top:calc(88px + env(safe-area-inset-top, 0px));}
  .home-hero-title span:nth-child(2){padding-left:0.6em;}
  .home-hero-title span:nth-child(3){padding-left:1.8em;}
  .home-hero-aside p{font-size:0.86rem; max-width:24ch;}
  .home-pill{padding:10px 20px;}
  .home-cell{min-height:118px; padding:10px 12px 14px;}
  .home-cell--gif{padding:0;}
  .home-cell--gif .figure{min-height:200px;}
  .home-cell--blank{display:none;}
  .home-cell--accent{grid-column:1 / -1; min-height:150px; padding:18px;}
}
/* =====================================================
   ABOUT
   ===================================================== */
.about-grid{
  display:grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap:64px;
  padding:4vh 0 12vh;
  align-items:stretch;
}
.about-grid .figure{--ar:4/5;}
.about-copy{
  display:flex;
  flex-direction:column;
  height:100%;
}
.about-copy h1{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.5rem, 2.3vw, 1.9rem);
  margin-bottom:0.6em;
}
.about-copy .role{
  font-family:var(--mono);
  font-size:0.74rem;
  color:var(--blue);
  margin-bottom:1.6em;
  display:block;
}
.about-copy .body-copy{
  font-size:0.92rem;
  line-height:1.8;
  color:var(--ink-soft);
  text-align:justify;
}
.about-copy .body-copy p + p{margin-top:1.15em;}
.about-copy-bottom{margin-top:auto; max-width:610px;}
.side-quests{
  margin-top:2.4em;
  padding-top:1.6em;
  border-top:1px solid var(--line);
  font-family:var(--mono);
  font-size:0.78rem;
  color:var(--ink-soft);
  text-align:justify;
}

/* =====================================================
   PRACTICE
   ===================================================== */
.practice-head{
  padding:4vh 0 5vh;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  flex-wrap:wrap;
}
.practice-head h1{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.5rem, 2.3vw, 1.9rem);
}

.project{
  position:relative;
  padding:36px 0;
  display:grid;
  grid-template-columns: 60px 1.1fr 1.4fr;
  gap:32px;
  align-items:start;
}
.project::before,
.project-link:last-of-type .project::after{
  content:'';
  position:absolute;
  left:50%;
  width:100vw;
  margin-left:-50vw;
  border-top:1px solid var(--line);
}
.project::before{top:0;}
.project-link:last-of-type .project::after{bottom:0;}
.project-link:last-of-type .project{margin-bottom:12vh;}
.project .index{
  font-family:var(--mono);
  font-size:0.78rem;
  color:var(--ink-soft);
  padding-top:4px;
}
.project .figure{--ar:4/3;}
.project-info h3{
  font-family:var(--serif);
  font-weight:400;
  font-size:1.5rem;
  margin-bottom:0.3em;
}
.project-meta{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  font-family:var(--mono);
  font-size:0.72rem;
  color:var(--blue);
  margin-bottom:1em;
}
.project-meta span{
  border:1px solid var(--blue);
  padding:2px 8px;
  border-radius:2px;
}
.project-meta .scale-tag{
  color:var(--ink-soft);
  border-color:var(--line);
}
.project-desc{
  color:var(--ink-soft);
  font-size:0.96rem;
  line-height:1.7;
  max-width:44ch;
  text-align:justify;
}
.project-link{cursor:pointer;}
.project--open{
  transition:background .3s ease, box-shadow .3s ease;
  box-shadow:0 0 0 100vmax transparent;
  clip-path:inset(0 -100vmax);
}
.project-link:hover .project--open, .project-link:focus-visible .project--open{
  background:var(--paper-deep);
  box-shadow:0 0 0 100vmax var(--paper-deep);
}
.project-link:hover .project--open .figure, .project-link:focus-visible .project--open .figure{border-color:var(--ink);}
.view-link{
  display:inline-block;
  margin-top:1.1em;
  font-family:var(--mono);
  font-size:0.75rem;
  color:var(--ink);
  border-bottom:1px solid var(--ink);
  padding-bottom:2px;
}

@media (max-width: 780px){
  .project{grid-template-columns:1fr; gap:16px;}
  .project .index{padding-top:0;}
}

/* =====================================================
   PROJECT DETAIL
   ===================================================== */
.project-detail{padding-top:0; display:block; animation:fadeIn .5s ease both;}

.header-left{
  display:flex;
  align-items:center;
  gap:16px;
  min-width:0;
}
.header-inner:has(.header-left){align-items:center;}
.detail-close{
  background:rgba(241,238,231,0.9);
  border:1px solid var(--ink);
  font-family:var(--mono);
  font-size:0.75rem;
  padding:5px 12px;
  cursor:pointer;
  color:var(--ink);
  white-space:nowrap;
  flex-shrink:0;
}
.detail-close:hover{background:var(--ink); color:var(--paper);}
@media (max-width: 560px){
  .detail-close{padding:5px 9px;}
  .detail-close-label{display:none;}
}

.detail-hero{
  position:relative;
  height:92vh;
  overflow:hidden;
  background:#EAE5DA;
}
.detail-hero img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  animation:kenburns 1.6s ease-out both;
}
.detail-hero::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(20,19,15,0.75) 0%, rgba(20,19,15,0.05) 45%, transparent 70%);
}
.detail-hero-caption{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:0 clamp(20px,4vw,64px) 48px;
  color:var(--paper);
  animation:fadeIn .7s ease .3s both;
}
.detail-hero-caption .eyebrow-mono{color:rgba(241,238,231,0.75);}
.detail-hero-caption h1{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.2rem, 5vw, 4rem);
  margin-top:0.15em;
}

@keyframes kenburns{
  from{transform:scale(1.09);}
  to{transform:scale(1);}
}

.detail-backdrop{
  position:relative;
  min-height:80vh;
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
  display:flex;
  align-items:flex-end;
}
.detail-backdrop::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,19,15,0.15) 0%, rgba(20,19,15,0.55) 100%);
}
.detail-backdrop--clear::after{
  background:linear-gradient(180deg, rgba(20,19,15,0.02) 0%, rgba(20,19,15,0.12) 100%);
}
.detail-backdrop .cap{
  position:relative;
  z-index:1;
  font-family:var(--mono);
  font-size:0.7rem;
  color:var(--paper);
  padding:14px clamp(20px,4vw,64px);
}
@media (max-width: 780px){
  .detail-backdrop{background-attachment:scroll;}
}

.detail-hero-2{
  padding:8vh 0 1vh;
}

.detail-concept{
  padding:8vh 0 1vh;
}
.detail-concept .eyebrow-mono{
  display:block;
  margin-bottom:1.4em;
}
.concept-frame{
  border:none;
  background:#fff;
  overflow:hidden;
}
.concept-frame img{
  width:100%;
  display:block;
}
.concept-cap{
  margin-top:14px;
  font-family:var(--mono);
  font-size:0.78rem;
  color:var(--ink-soft);
  line-height:1.6;
  max-width:62ch;
  text-align:justify;
}

.detail-plan{
  padding:2vh 0 1vh;
}
.detail-plan .eyebrow-mono{
  display:block;
  margin-bottom:1.4em;
}
.plan-set{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
  align-items:stretch;
}
.plan-item{
  display:flex;
  flex-direction:column;
  height:100%;
}
.plan-item .plan-label{
  display:block;
  font-family:var(--mono);
  font-size:0.72rem;
  color:var(--ink-soft);
  margin-bottom:10px;
}
.plan-frame{
  border:none;
  background:#fff;
  overflow:hidden;
}
.plan-frame img{
  width:100%;
  display:block;
}
.plan-frame--half{
  flex:0 0 50%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.plan-frame--half img{
  width:100%;
  height:100%;
  object-fit:cover;
}
@media (max-width: 780px){
  .plan-set{grid-template-columns:1fr;}
}

.detail-meta-compact{
  display:grid;
  grid-template-columns:0.8fr 1.2fr;
  gap:20px;
  margin-top:28px;
  flex:1;
}
.detail-meta-compact dl{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  height:100%;
}
.detail-meta-compact dt{
  font-family:var(--mono);
  font-size:0.72rem;
  color:var(--ink-soft);
  margin-bottom:0.25em;
}
.detail-meta-compact dd{font-size:0.95rem;}
.detail-meta-compact .detail-desc{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:flex-end;
  height:100%;
  max-width:none;
  margin-left:0;
}
.detail-meta-compact .detail-desc p{
  font-size:0.92rem;
  line-height:1.7;
  color:var(--ink-soft);
  max-width:30ch;
  text-align:justify;
}
.detail-meta-compact--wide{grid-template-columns:0.55fr 1.45fr;}
.detail-meta-compact .detail-desc p.desc-wide{max-width:none;}
@media (max-width: 1024px){
  .plan-set--with-text{grid-template-columns:1fr;}
  .plan-set--with-text .plan-item{height:auto;}
  .plan-set--with-text .plan-frame--half{flex:none; aspect-ratio:16/9;}
  .detail-meta-compact dl{gap:1em;}
  .detail-meta-compact .detail-desc{align-items:stretch;}
  .detail-meta-compact .detail-desc p,
  .detail-meta-compact .detail-desc p.desc-wide{max-width:none;}
}
@media (max-width: 560px){
  .detail-meta-compact{grid-template-columns:1fr;}
  .detail-meta-compact dl, .detail-meta-compact .detail-desc{height:auto;}
}

.detail-site{
  padding:8vh 0 1vh;
}
.detail-site .eyebrow-mono{
  display:block;
  margin-bottom:1.4em;
}

.detail-subsection{
  padding:6vh 0 2vh;
}
.detail-subsection .eyebrow-mono{
  display:block;
  margin-bottom:1.4em;
}
.process-row{
  display:flex;
  gap:20px;
  align-items:flex-start;
}
.process-row .figure{
  flex:var(--grow) 1 0;
  min-width:0;
}
.process-row--split .process-group{display:contents;}
@media (max-width: 780px){
  .process-row--split{flex-direction:column;}
  .process-row--split .process-group{display:flex; gap:12px; align-items:flex-start; width:100%;}
  .process-row{flex-wrap:wrap; row-gap:12px;}
  .process-row{column-gap:12px;}
  .process-row .figure--full,
  .process-row--stack .figure{flex:1 1 100%;}
}

.detail-drawings{
  padding:8vh 0 1vh;
}
.detail-drawings .eyebrow-mono{
  display:block;
  margin-bottom:1.4em;
}
.drawing-stack{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
}
.drawing-frame{
  border:1px solid var(--line);
  background:#fff;
  overflow:hidden;
}
.drawing-frame img{
  width:100%;
  display:block;
}
@media (max-width: 780px){
  .drawing-stack{grid-template-columns:1fr;}
}
.site-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.site-row .figure{--ar:16/9;}
@media (max-width: 860px){
  .site-row{grid-template-columns:1fr;}
}

.detail-body{
  padding:8vh 0 6vh;
}
.detail-meta-grid{
  display:grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap:64px;
  padding-bottom:6vh;
  border-bottom:1px solid var(--line);
  margin-bottom:6vh;
}
.detail-meta-grid dl{display:grid; gap:1.4em;}
.detail-meta-grid dt{
  font-family:var(--mono);
  font-size:0.72rem;
  color:var(--ink-soft);
  margin-bottom:0.3em;
}
.detail-meta-grid dd{font-size:1rem;}
.detail-desc{
  font-size:1.05rem;
  line-height:1.85;
  color:var(--ink-soft);
  text-align:justify;
  max-width:56ch;
  margin-left:auto;
}
.detail-meta-grid--halves{
  grid-template-columns:1fr 1fr;
  gap:32px;
}
.detail-meta-grid--halves .detail-desc{
  max-width:none;
  margin-left:0;
}

.detail-gallery{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  padding-bottom:10vh;
}
.detail-gallery .gallery-item{display:flex; flex-direction:column;}
.detail-gallery .gallery-item.feature{grid-column:1 / -1;}
.detail-gallery .gallery-item .figure{--ar:16/9;}
.detail-gallery .gallery-cap{
  margin-top:10px;
  font-family:var(--mono);
  font-size:0.72rem;
  color:var(--ink-soft);
}
@media (max-width: 860px){
  .detail-gallery{grid-template-columns:1fr 1fr;}
}
@media (max-width: 560px){
  .detail-gallery{grid-template-columns:1fr;}
}

.detail-next{
  border-top:1px solid var(--ink);
  padding:32px 0 12vh;
  display:flex;
  justify-content:space-between;
  align-items:baseline;
}
.detail-next .eyebrow-mono{margin-bottom:0.4em; display:block;}
.detail-next h4{
  font-family:var(--serif);
  font-weight:400;
  font-size:1.6rem;
}
.detail-next a{border-bottom:1px solid transparent; transition:border-color .2s ease;}
.detail-next a:hover{border-color:var(--ink);}

@media (max-width: 860px){
  .detail-meta-grid{grid-template-columns:1fr;}
  .detail-gallery{grid-template-columns:1fr;}
  .detail-desc{margin-left:0; max-width:none;}
}
@media (prefers-reduced-motion: reduce){
  .detail-hero img{animation:none;}
  .detail-backdrop{background-attachment:scroll;}
}

/* =====================================================
   CONTACT
   ===================================================== */
.contact-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:64px;
  padding:6vh 0 14vh;
  align-items:stretch;
}
.contact-copy{
  display:flex;
  flex-direction:column;
  height:100%;
}
.contact-copy-bottom{margin-top:auto;}
.contact-grid h1{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.5rem, 2.3vw, 1.9rem);
  line-height:1.08;
  margin-bottom:0.5em;
}
.contact-grid .lede{
  color:var(--ink-soft);
  font-size:1rem;
  line-height:1.7;
  margin-bottom:2.4em;
}
@media (min-width: 1200px){
  .contact-grid .lede{white-space:nowrap;}
}
.contact-list{list-style:none;}
.contact-list li{
  border-top:1px solid var(--line);
  padding:18px 0;
  display:grid;
  grid-template-columns:120px 1fr;
  gap:16px;
}
.contact-list li:last-child{border-bottom:1px solid var(--line);}
.contact-list dt{
  font-family:var(--mono);
  font-size:0.72rem;
  color:var(--ink-soft);
}
.contact-list dd{font-size:1rem;}
.contact-list a:hover{color:var(--blue);}

.contact-figure{--ar:1/1;}

footer{
  border-top:1px solid var(--ink);
  padding:24px 0 40px;
}
.footer-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-family:var(--mono);
  font-size:0.72rem;
  color:var(--ink-soft);
  flex-wrap:wrap;
  gap:10px;
}

/* ---------- Responsive ---------- */
@media (max-width: 860px){
  .about-grid, .contact-grid{
    grid-template-columns:1fr;
  }
  .about-copy{height:auto;}
  .about-copy-bottom{margin-top:2.5em;}
  .contact-copy{height:auto;}
  .contact-copy-bottom{margin-top:2.5em;}
  nav{gap:14px;}
}

/* Keep the side gutter on full-width sections whose vertical padding shorthand would otherwise zero it */
.frame{
  padding-left:clamp(20px, 4vw, 64px);
  padding-right:clamp(20px, 4vw, 64px);
}

/* Small phones: collapse the wordmark to its logo so all four nav links fit */
@media (max-width: 560px){
  .wordmark{font-size:0;}
  .wordmark .logo-mark{font-size:0.6rem;}
  nav{gap:12px;}
}

/* ---------- Project image slideshow ---------- */
.slideshow{
  position:relative;
  outline:none;
}
.slideshow:focus-visible{outline:2px solid var(--blue); outline-offset:4px;}
.slideshow-track{
  position:relative;
  width:100%;
  aspect-ratio:var(--slide-ar, 4/3);
  background:var(--paper-deep);
  overflow:hidden;
}
.slideshow-pair{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
  align-items:start;
}
.slideshow-pair .eyebrow-mono{
  display:block;
  margin-bottom:1.4em;
}
/* column widths match each slideshow's frame shape, so both are the same height */
.slideshow-pair--wide-left{grid-template-columns:1.7778fr 1.2fr;}
@media (max-width: 780px){
  .slideshow-pair,
  .slideshow-pair--wide-left{grid-template-columns:1fr; row-gap:6vh;}
}
.slideshow-slide{
  position:absolute;
  inset:0;
  margin:0;
  opacity:0;
  transition:opacity .9s ease;
}
.slideshow-slide.is-active{opacity:1;}
.slideshow-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.slideshow-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px; height:44px;
  border:1px solid var(--ink);
  background:rgba(241,238,231,0.88);
  color:var(--ink);
  font-size:1rem;
  cursor:pointer;
  z-index:2;
}
.slideshow-btn:hover{background:var(--ink); color:var(--paper);}
.slideshow-prev{left:14px;}
.slideshow-next{right:14px;}
.slideshow-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:12px;
  font-family:var(--mono);
  font-size:0.72rem;
  color:var(--ink-soft);
}
.slideshow-toggle{
  background:none;
  border:none;
  border-bottom:1px solid var(--ink-soft);
  font:inherit;
  color:inherit;
  cursor:pointer;
  padding:0 0 1px;
}
.slideshow-toggle:hover{color:var(--ink); border-color:var(--ink);}
@media (max-width: 780px){
  .slideshow-btn{width:36px; height:36px; font-size:0.9rem;}
  .slideshow-prev{left:8px;}
  .slideshow-next{right:8px;}
}
@media (prefers-reduced-motion: reduce){
  .slideshow-slide{transition:none;}
}

/* ---------- Blurred backdrop with a paper sheet (non-Home pages) ---------- */
body.has-backdrop{
  --backdrop: linear-gradient(rgba(20,19,15,0.34), rgba(20,19,15,0.34)), url('../images/backdrop.jpg') center / cover no-repeat;
}
body.has-backdrop::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:-1;
  background:var(--backdrop);
}
/* header shows the same backdrop, so the sheet slides out of sight beneath it */
body.has-backdrop header{
  background:var(--backdrop);
  background-attachment:fixed;
  backdrop-filter:none;
  border-bottom-color:transparent;
}
body.has-backdrop .wordmark,
body.has-backdrop nav button,
body.has-backdrop nav button[aria-current="page"]{color:#fff;}
body.has-backdrop .wordmark span{color:rgba(255,255,255,0.8);}
body.has-backdrop .logo-mark{border-color:#fff;}
body.has-backdrop nav button::after{background:#fff;}
body.has-backdrop nav button:not([aria-current="page"]){color:rgba(255,255,255,0.78);}

body.has-backdrop .page.active{
  padding-top:calc(64px + env(safe-area-inset-top, 0px) + 40px);
  min-height:0;
}
body.has-backdrop .page.active > .frame{
  display:flow-root;
  max-width:1240px;
  background:var(--paper);
  padding-top:clamp(28px, 5vh, 56px);
}
/* Practice dividers and hover highlight stop at the sheet's edges */
body.has-backdrop .project::before,
body.has-backdrop .project-link:last-of-type .project::after{
  left:calc(-1 * clamp(20px, 4vw, 64px));
  width:calc(100% + 2 * clamp(20px, 4vw, 64px));
  margin-left:0;
}
body.has-backdrop .project--open{
  clip-path:inset(0 calc(-1 * clamp(20px, 4vw, 64px)));
}
/* Footer: white text on the blurred image, outside the sheet */
body.has-backdrop footer{
  border-top:none;
  padding:28px 0 36px;
}
body.has-backdrop footer .frame{
  max-width:1240px;
  background:transparent;
}
body.has-backdrop .footer-inner{color:rgba(255,255,255,0.88);}

@media (max-width: 780px){
  body.has-backdrop header{background-attachment:scroll;}
  body.has-backdrop .page.active{padding-top:calc(64px + env(safe-area-inset-top, 0px) + 20px);}
  body.has-backdrop .page.active > .frame{max-width:none; margin:0 12px;}
}
/* ---------- Main page titles: the Home page's bold uppercase ---------- */
.about-copy h1,
.practice-head h1,
.contact-grid h1,
.detail-hero-caption h1{
  font-family:var(--sans);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:-0.035em;
  line-height:0.95;
}
.detail-hero-caption h1{font-size:clamp(2.2rem, 5.6vw, 4.6rem);}

/* keep Contact content inside its column on narrow screens */
.contact-grid > *{min-width:0;}
.contact-list dd{min-width:0; overflow-wrap:anywhere;}
@media (max-width: 560px){
  .contact-list li{grid-template-columns:64px 1fr; gap:10px;}
  .contact-list dd{font-size:0.94rem;}
}

/* Page titles in burgundy */
.about-copy h1,
.practice-head h1,
.contact-grid h1{color:var(--burgundy);}


/* About and Contact photos: black and white until hovered (only where a mouse can hover) */
@media (hover: hover){
  .about-grid .figure img,
  .contact-figure img{
    filter:grayscale(1);
    transition:filter .6s ease;
  }
  .about-grid .figure:hover img,
  .contact-figure:hover img{filter:grayscale(0);}
}
/* phones and tablets keep the About portrait black and white, as before */
@media (hover: none){
  .about-grid .figure img{filter:grayscale(1);}
}

/* Home footer line matches the PEOPLE / SPACES / MEMORIES grid lines */
#home.active ~ footer{border-top:1px solid var(--line);}

/* Phones: the backdrop runs past the bottom of the screen (browser toolbars resize the viewport),
   and the header shows exactly the same crop of it, so there is no hard edge or seam */
@media (max-width: 780px){
  body.has-backdrop{
    --bd-h:130vh;
    --bd-h:130lvh;
    --bd-size:max(100vw, calc(var(--bd-h) * 1.7778)) auto;
  }
  body.has-backdrop::before{
    inset:auto;
    top:0; left:0; right:0;
    height:var(--bd-h);
    background-size:100% 100%, var(--bd-size);
    background-position:0 0, center top;
  }
  body.has-backdrop header{
    background-size:100% 100%, var(--bd-size);
    background-position:0 0, center top;
    background-attachment:scroll;
  }
}

/* Home: burgundy cell text sits at the bottom of the cell */
.home-cell--accent{justify-content:flex-end;}

/* Home section 2: left column follows the grid's three rows */
@media (min-width: 861px){
  .home-intro-copy{
    display:grid;
    grid-template-rows:1.25fr 1fr 1.1fr;
    padding-top:1px;
  }
  .home-intro-text{
    grid-row:1 / 3;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:1.4em;
    padding:12px 0 18px;
  }
  .home-intro-text .home-brand{margin-bottom:0;}
  .home-intro-text p{
    margin-bottom:0;
    max-width:40ch;
    font-size:clamp(1.05rem, 1.35vw, 1.25rem);
    line-height:1.6;
  }
  .home-intro-copy .home-gif{
    grid-row:3;
    margin:0;
    height:100%;
    aspect-ratio:auto;
  }
}

/* Home: brand heading and grid words in burgundy */
.home-brand{color:var(--burgundy);}
.home-brand-at,
.home-brand-comma{color:var(--ink);}

/* Home: burgundy cell quote justified, at the bottom and centred across the cell */
.home-cell--accent{align-items:center;}
.home-cell--accent p{
  width:100%;
  max-width:26ch;
  text-align:justify;
}

/* Smaller page titles on About, Practice and Contact */
.about-copy h1,
.practice-head h1,
.contact-grid h1{font-size:clamp(1.25rem, 1.8vw, 1.55rem);}

/* Smaller project names in the Practice list */
.project-info h3{font-size:1.3rem;}

/* Practice list: Stapati note sits at the bottom, level with the cover image's bottom edge */
.project-info{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  align-self:stretch;
}
.project-note{
  margin-top:auto;
  padding-top:18px;
  font-family:var(--mono);
  font-size:0.72rem;
  color:var(--ink-soft);
}

/* Project pages: next project shown with its Practice cover beside its name */
.detail-next{justify-content:flex-start;}
.detail-next a.next-card{
  display:flex;
  align-items:flex-end;
  gap:24px;
  border-bottom:none;
  color:inherit;
}
.next-thumb{
  --ar:4/3;
  width:clamp(140px, 18vw, 240px);
  flex-shrink:0;
  overflow:hidden;
}
.next-thumb img{transition:transform .6s ease;}
.next-card:hover .next-thumb img{transform:scale(1.04);}
.next-text h4{
  border-bottom:1px solid transparent;
  transition:border-color .2s ease;
}
.next-card:hover .next-text h4{border-color:var(--ink);}
@media (max-width: 560px){
  .detail-next a.next-card{gap:16px;}
  .next-thumb{width:120px;}
  .next-text h4{font-size:1.25rem;}
}

/* Slightly smaller next-project pictures */
.next-thumb{width:clamp(120px, 14vw, 190px);}
@media (max-width: 560px){
  .next-thumb{width:100px;}
}

/* ---------- Home: spinning logo in the section 2 slot ---------- */
.home-spin-slot{
  display:flex;
  align-items:center;
  margin-top:40px;
}
@media (min-width: 861px){
  .home-intro-copy .home-spin-slot{grid-row:3; margin-top:0;}
}

.ha-spin {
  --ha-ink: #1D1C1A;     /* words */
  --ha-line: #8A857D;    /* grey box lines */
  --ha-amp: #7A1F2B;     /* burgundy & */
  --ha-figure: #5E5952;  /* the people */
  --ha-prop: #6E685F;    /* house, trees, lamp, chair */
  container-type: inline-size;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  font-family: var(--title);
}
.ha-spin__stage {
  position: relative;
  aspect-ratio: 1200 / 340;
}
.ha-spin__row {
  --ha-h: 10cqw;
  position: absolute;
  left: 7.9167%;
  width: 84.1667%;
  top: 32.353%;
  height: 35.294%;
  display: grid;
  grid-template-columns: 41.584% 16.832% 41.584%;
}
.ha-spin__box {
  position: relative;
  height: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24%, #000 76%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 24%, #000 76%, transparent 100%);
}
.ha-spin__strip { will-change: transform; }
.ha-spin__word {
  height: var(--ha-h);
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  line-height: 1;
  color: var(--ha-ink);
  font-size: 3.5cqw;
  font-weight: 400;
  letter-spacing: 0.01em;
}
.ha-spin__word.is-final {
  font-size: 4.166cqw;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.ha-spin__amp {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 6.0cqw;
  font-weight: 700;
  color: var(--ha-amp);
  -webkit-text-stroke: 0.21cqw var(--ha-amp);
  transition: transform .3s cubic-bezier(.3, 1.6, .5, 1);
}
.ha-spin__amp.is-land { transform: scale(1.12); }
.ha-spin__lines,
.ha-spin__world {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.ha-spin__world path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ha-spin__fig path { stroke: var(--ha-figure); stroke-width: 1.5; }
.ha-spin__prop path { stroke: var(--ha-prop); stroke-width: 1.25; }
.ha-spin__sound {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 0 auto;
  min-height: 36px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  color: var(--ha-line);
  font: 500 12px/1 var(--title);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.ha-spin__sound:hover,
.ha-spin__sound[aria-pressed="true"] { color: var(--ha-amp); }
.ha-spin__sound:focus-visible { outline: 2px solid var(--ha-amp); outline-offset: 2px; }
/* the spinning logo keeps its motion even when the device asks for reduced animation */
@media (prefers-reduced-motion: reduce){
  .ha-spin__amp{transition:transform .3s cubic-bezier(.3, 1.6, .5, 1) !important;}
}

/* ---------- Site logo (here & about grid) ---------- */
.header-inner{align-items:center;}
.site-logo{
  display:block;
  height:36px;
  width:auto;
}
.wordmark a{display:block; line-height:0;}
/* white version over the Home slideshow and the blurred backdrop */
body.header-over .site-logo,
body.has-backdrop .site-logo{filter:invert(1);}
@media (max-width: 560px){
  .site-logo{height:28px;}
}
/* phones: tighter header so the logo, the back button and all four links fit on one line */
@media (max-width: 560px){
  .header-inner{gap:12px;}
  .header-left{gap:10px;}
  nav{gap:10px;}
  nav button, nav a{font-size:0.82rem;}
  .site-logo{height:26px;}
}
@media (max-width: 360px){
  .site-logo{height:22px;}
  nav{gap:8px;}
  nav button, nav a{font-size:0.76rem;}
}

/* logo sits closer to the left edge */
.header-inner{padding-left:clamp(14px, 1.6vw, 26px);}

/* one-line wordmark: shorter so it isn't too wide */
.site-logo{height:22px;}
@media (max-width: 560px){
  .site-logo{height:15px;}
}
@media (max-width: 360px){
  .site-logo{height:13px;}
}
/* phones: squeeze the header on project pages, where the back button shares the row */
@media (max-width: 560px){
  .header-inner:has(.header-left){padding-right:14px; gap:10px;}
  .header-left{gap:8px;}
  .header-left .detail-close{padding:4px 7px;}
  .header-inner:has(.header-left) .site-logo{height:14px;}
  .header-inner:has(.header-left) nav{gap:8px;}
  .header-inner:has(.header-left) nav a{font-size:0.78rem;}
}
@media (max-width: 380px){
  .header-inner:has(.header-left) .site-logo{height:12px;}
  .header-inner:has(.header-left) nav a{font-size:0.72rem;}
  .header-inner:has(.header-left) nav{gap:7px;}
}
/* much smaller logo */
.site-logo{height:15px;}
@media (max-width: 560px){
  .site-logo{height:12px;}
  .header-inner:has(.header-left) .site-logo{height:11px;}
}
@media (max-width: 380px){
  .header-inner:has(.header-left) .site-logo{height:10px;}
}

/* two-line "here / about" logo with the stroked & */
.site-logo{height:34px;}
@media (max-width: 560px){
  .site-logo{height:28px;}
  .header-inner:has(.header-left) .site-logo{height:26px;}
}
@media (max-width: 380px){
  .header-inner:has(.header-left) .site-logo{height:24px;}
}

/* colour box logo: its own colours on plain backgrounds, plain white over photos */
.site-logo{height:34px;}
body.header-over .site-logo,
body.has-backdrop .site-logo{filter:brightness(0) invert(1);}
@media (max-width: 560px){
  .site-logo{height:26px;}
  .header-inner:has(.header-left) .site-logo{height:24px;}
}
@media (max-width: 380px){
  .header-inner:has(.header-left) .site-logo{height:20px;}
}

/* ---------- All titles in Geist Mono (the logo's font) ---------- */
.home-hero-title,
.home-brand,
.home-cell-word,
.about-copy h1,
.practice-head h1,
.contact-grid h1,
.detail-hero-caption h1,
.project-info h3,
.detail-next h4{
  font-family:var(--title);
  font-weight:500;
  letter-spacing:-0.02em;
}
/* monospace letters are wider, so the largest titles come down a little to keep their line breaks */
.home-hero-title{font-size:clamp(1.7rem, 3.9vw, 3.7rem); line-height:1;}
.home-brand{font-size:clamp(1.4rem, 2.6vw, 2.5rem);}
.home-cell-word{font-size:clamp(1.05rem, 1.9vw, 1.8rem);}
.detail-hero-caption h1{font-size:clamp(1.9rem, 4.6vw, 3.8rem);}
.project-info h3{font-size:1.15rem;}
.detail-next h4{font-size:1.35rem;}
@media (max-width: 780px){
  .home-hero-title{font-size:clamp(1.3rem, 5.4vw, 2.1rem);}
}

/* logo further left */
.header-inner{padding-left:clamp(8px, 0.9vw, 14px);}

/* Home headline: three compact lines, right edges aligned */
.home-hero-title{
  right:auto;
  left:max(0px, calc((100% - 1400px) / 2));
  width:max-content;
  margin:0;
  align-items:flex-end;
  text-align:right;
  line-height:0.94;
  letter-spacing:-0.045em;
  word-spacing:-0.28em;
}
.home-hero-title span:nth-child(2),
.home-hero-title span:nth-child(3){padding-left:0;}

/* "Studio Here & About" on Home a little bolder */
.home-brand{font-weight:700;}

/* animated sketch logo in the Home grid cell */
.home-cell--gif{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px 16px;
}
.home-cell--gif .ha-shift{width:100%; max-width:420px;}

/* Home slideshow line in Geist Mono, same size as before */
.home-hero-aside p{font-family:var(--title); max-width:36ch;}

/* Home slideshow line: smaller, justified, three lines */
.home-hero-aside p{
  font-size:0.8rem;
  line-height:1.55;
  width:40ch;
  max-width:100%;
  text-align:justify;
}
@media (max-width: 560px){
  .home-hero-aside p{font-size:0.72rem; width:40ch;}
}

/* spinning logo words in Geist Mono (sizes and motion unchanged) */
.ha-spin,
.ha-spin__sound{font-family:var(--title);}

/* 'View our work': back to the original tab, a little more rectangular with rounded corners */
.home-pill{border-radius:8px; padding:12px 24px;}
/* title above a project's render gallery */
.detail-gallery-title{display:block; margin-bottom:1.4em;}

/* a section straight after a gallery doesn't need the gallery's large bottom gap as well */
.detail-gallery:has(+ .detail-subsection--after-gallery){padding-bottom:0;}

/* Project covers: smaller titles, and a caption that stays legible on every photo */
.detail-hero-caption h1{font-size:clamp(1.55rem, 3.3vw, 2.75rem);}
.detail-hero::after{
  background:linear-gradient(0deg, rgba(20,19,15,0.82) 0%, rgba(20,19,15,0.45) 22%, rgba(20,19,15,0.05) 48%, transparent 70%);
}
.detail-hero-caption .eyebrow-mono{
  color:var(--paper);
  font-size:0.8rem;
}
.detail-hero-caption h1,
.detail-hero-caption .eyebrow-mono{text-shadow:0 1px 12px rgba(20,19,15,0.35);}

/* caption sits above the cover's shading layer, not beneath it */
.detail-hero-caption{z-index:1;}

.home-cell--gif .ha-shuffle{width:100%; max-width:420px;}

/* =====================================================
   Geist Mono sizing
   Text that used to be Space Grotesk is ~12% smaller so it reads at the
   old visual size. Text columns keep the exact widths they had with the
   old font (in px, since a Geist Mono 'ch' is narrower than the old one),
   so every description still lines up with the images around it.
   ===================================================== */
nav button, nav a{font-size:0.83rem;}
@media (max-width: 560px){ nav button, nav a{font-size:0.74rem;} }
@media (max-width: 360px){ nav button, nav a{font-size:0.68rem;} }
@media (max-width: 560px){ .header-inner:has(.header-left) nav a{font-size:0.7rem;} }
@media (max-width: 380px){ .header-inner:has(.header-left) nav a{font-size:0.65rem;} }

.home-pill{font-size:0.7rem;}

.home-intro-copy p{font-size:0.9rem; line-height:1.6; max-width:439px;}
@media (min-width: 861px){
  .home-intro-text p{font-size:clamp(0.92rem, 1.2vw, 1.1rem); line-height:1.55; max-width:clamp(431px, 34.6vw, 513px);}
}
.home-cell--accent p{font-size:0.86rem; line-height:1.45; max-width:261px;}

.about-copy .body-copy{font-size:0.84rem; line-height:1.65;}

.project-desc{font-size:0.85rem; line-height:1.6; max-width:433px;}

.detail-desc{font-size:0.92rem; line-height:1.65; max-width:603px;}
.detail-meta-grid--halves .detail-desc{max-width:none;}
.detail-meta-grid dd{font-size:0.88rem;}
.detail-meta-compact dd{font-size:0.84rem;}
/* Loom & Hideout: line height keeps the old line spacing, so the text still ends level with the plan beside it */
.detail-meta-compact .detail-desc p{font-size:0.81rem; line-height:1.9; max-width:283px;}
.detail-meta-compact .detail-desc p.desc-wide{max-width:none;}
@media (max-width: 1024px){
  .detail-meta-compact .detail-desc p{max-width:none;}
}
@media (max-width: 860px){
  .detail-desc{max-width:none;}
}

.contact-grid .lede{font-size:0.88rem;}
/* laptops: the line stays on one line, as wide as the contact list below it */
@media (min-width: 1200px){
  .contact-grid .lede{font-size:0.77rem;}
}
.contact-list dd{font-size:0.88rem;}
@media (max-width: 560px){ .contact-list dd{font-size:0.83rem;} }

/* tighter word gaps: a monospace space is twice as wide as a normal one */
.home-intro-copy p,
.home-cell--accent p,
.about-copy .body-copy,
.side-quests,
.project-desc,
.detail-desc,
.concept-cap,
.contact-grid .lede{word-spacing:-0.15em;}
/* phones: narrow justified columns break long words with a hyphen instead of opening wide gaps */
@media (max-width: 560px){
  .home-intro-copy p,
  .about-copy .body-copy,
  .side-quests,
  .project-desc,
  .detail-desc,
  .concept-cap{hyphens:auto; -webkit-hyphens:auto;}
}

/* project pages: 'Next' in the logo blue, the next project's name in the logo burgundy */
.next-text .eyebrow-mono{color:#3A86BA;}
.next-text h4{color:#7A102C;}
.next-card:hover .next-text h4{border-color:#7A102C;}