/* Archdrafts Architectural Design — site stylesheet
   1. Tokens   2. Base   3. Type   4. Layout   5. Header + menu   6. Components   7. Pages   8. Footer
   9. Tablet (<=1080px)   10. Phone (<=760px)   11. Reduced motion
   Change the look from the tokens first; components only reference tokens.
   Phone fixes belong in section 10 so approved desktop layouts stay untouched. */

/* ---------- 1. Tokens ---------- */
:root {
  /* Color: warm paper neutrals, warm charcoal ink, one quiet umber accent */
  --paper: #F3EFE7;       /* page */
  --paper-2: #E9E2D5;     /* bands */
  --paper-3: #FBF9F5;     /* inputs */
  --line: #D4CABA;        /* hairlines */
  --line-strong: #B9AD99;
  --ink: #26231F;         /* text, primary buttons */
  --ink-2: #5C554B;       /* secondary text (6.2:1 on paper) */
  --dark: #2D2925;        /* footer */
  --on-dark: #EEE8DD;
  --on-dark-2: #BDB4A4;
  --accent: #7A5236;      /* umber: focus rings, required marks */
  --error: #9B3B24;

  /* Type */
  --sans: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Newsreader', Georgia, serif;   /* italic accent phrase inside a heading (<em>) only */
  --fs-display: clamp(2.7rem, 5.6vw, 5.4rem);
  --fs-h1: clamp(2.3rem, 4.4vw, 4rem);
  --fs-h2: clamp(1.7rem, 2.7vw, 2.5rem);
  --fs-h3: clamp(1.2rem, 1.5vw, 1.4rem);
  --fs-statement: clamp(1.45rem, 2.6vw, 2.35rem);
  --fs-lede: clamp(1.1rem, 1.35vw, 1.28rem);
  --fs-body: 1.0625rem;
  --fs-small: .9375rem;
  --fs-label: .75rem;

  /* Space */
  --gutter: clamp(16px, 4vw, 56px);
  --gap: clamp(16px, 2.2vw, 32px);
  --section: clamp(80px, 10vw, 160px);
  --section-s: clamp(56px, 6vw, 96px);
  --stack: clamp(48px, 6vw, 88px);    /* between image blocks on project pages */
  --max: 1440px;
  --measure: 66ch;

  /* Header: full height at the page top, compact once scrolled. Content always clears the full height,
     so the header changing size never moves the page. */
  --header-full: 112px;
  --header-compact: 72px;
  --logo-h: 48px;
  --logo-icon: 21.1%;      /* share of the horizontal logo taken by the monogram */

  /* Motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-fast: .2s;
  --t-med: .45s;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-compact) + 24px); }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: var(--fs-body); line-height: 1.65;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
address { font-style: normal; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--paper-2); }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: var(--paper); padding: 10px 14px; }
.skip:focus { top: 12px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 3. Type ---------- */
.display, .h1, .h2, .h3, .statement { font-weight: 400; margin: 0; text-wrap: balance; overflow-wrap: break-word; }
.display { font-size: var(--fs-display); line-height: 1.02; letter-spacing: -.03em; }
.h1 { font-size: var(--fs-h1); line-height: 1.05; letter-spacing: -.028em; }
.h2 { font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -.02em; }
.h3 { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -.01em; font-weight: 500; }
/* A heading phrase kept together on its own line (wraps normally on phones) */
.h1 em.line { display: block; }
@media (min-width: 761px) { .h1 em.line { white-space: nowrap; } }
.display em, .h1 em, .h2 em { font-family: var(--serif); font-style: italic; font-weight: 300; letter-spacing: -.01em; }
.statement { font-size: var(--fs-statement); line-height: 1.26; letter-spacing: -.018em; }
.statement .quiet { color: var(--ink-2); }
.lede { font-size: var(--fs-lede); line-height: 1.5; }
.small { font-size: var(--fs-small); color: var(--ink-2); }
.label {
  display: inline-block; font-size: var(--fs-label); font-weight: 500; line-height: 1.3;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin: 0;
}
.cap { margin-top: 12px; font-size: .875rem; color: var(--ink-2); }
.num { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.prose p { max-width: var(--measure); }

/* ---------- 4. Layout ---------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.grid > * { min-width: 0; }
.section { padding-block: var(--section); }
.band { background: var(--paper-2); }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: clamp(32px, 4vw, 56px); }

/* Page intro: title left, short lede right */
.page-intro { padding-top: calc(var(--header-full) + clamp(40px, 7vw, 112px)); padding-bottom: var(--section-s); }
.page-intro .title { grid-column: 1 / span 7; }
.page-intro .lede { grid-column: 9 / -1; align-self: end; color: var(--ink-2); max-width: 44ch; margin: 0; }
.page-intro--short { padding-bottom: clamp(40px, 5vw, 72px); }

/* Image frames: fixed crops keep compositions ordered on desktop; phones switch to natural proportions */
.frame { position: relative; overflow: hidden; background: var(--paper-2); }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame--natural img { height: auto; }
.r-land { aspect-ratio: 3 / 2; }
.r-wide { aspect-ratio: 16 / 9; }
.r-pano { aspect-ratio: 2 / 1; }
.r-cine { aspect-ratio: 21 / 9; }
.r-port { aspect-ratio: 4 / 5; }

/* ---------- 5. Header + menu ---------- */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--header-full);
  background: rgba(243, 239, 231, .96); border-bottom: 1px solid transparent;
  transition: height var(--t-med) var(--ease), background-color var(--t-med), border-color var(--t-med), color var(--t-med);
}
/* No header animation until the first frame has painted */
html:not(.header-ready) .site-header, html:not(.header-ready) .site-header * { transition: none !important; }
.site-header .bar { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.site-header.is-compact { height: var(--header-compact); border-color: var(--line); backdrop-filter: saturate(1.2) blur(8px); }

/* The brand mark: one horizontal logo that folds into its monogram. The wordmark is clipped away from the
   right while the mark scales down slightly, so the logo simplifies instead of swapping images. */
.brand { display: flex; align-items: center; min-height: 44px; }
.brand .mark {
  position: relative; display: block; height: var(--logo-h); aspect-ratio: 1100 / 181;
  transform-origin: left center; clip-path: inset(-2px 0 -2px 0);
  transition: clip-path var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.brand img { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity var(--t-med); }
.brand .logo-light { opacity: 0; }
.is-compact .brand .mark { clip-path: inset(-2px calc(100% - var(--logo-icon)) -2px 0); transform: scale(.8); }

.nav { display: flex; align-items: center; gap: clamp(22px, 2.6vw, 44px); }
.nav a { font-size: 1.0625rem; font-weight: 500; padding-block: 10px; position: relative; }
.nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--t-med) var(--ease); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
/* Contact: a filled button. Dark on the solid header; light paper over the Home hero. */
.nav .nav-cta { border: 1px solid var(--ink); border-radius: 999px; padding: 10px 22px; background: var(--ink); color: var(--paper); transition: background-color var(--t-med), color var(--t-med), border-color var(--t-med); }
.nav .nav-cta::after { display: none; }
.nav .nav-cta:hover { background: #3A352F; border-color: #3A352F; }
.menu-btn { display: none; }

/* Home: transparent over the hero at the top, light logo and nav with a soft shadow for contrast */
.has-hero .site-header:not(.is-compact) { background: transparent; color: var(--paper); }
.has-hero .site-header:not(.is-compact) .logo-dark { opacity: 0; }
.has-hero .site-header:not(.is-compact) .logo-light { opacity: 1; }
.has-hero .site-header:not(.is-compact) .nav a { text-shadow: 0 1px 14px rgba(20, 17, 14, .45); }
.has-hero .site-header:not(.is-compact) .brand .mark { filter: drop-shadow(0 1px 10px rgba(20, 17, 14, .35)); }
.has-hero .site-header:not(.is-compact) .nav .nav-cta { text-shadow: none; background: var(--paper); color: var(--ink); border-color: var(--paper); }
.has-hero .site-header:not(.is-compact) .nav .nav-cta:hover { background: #fff; border-color: #fff; }

.mobile-nav { display: none; }

/* ---------- 6. Components ---------- */
/* Buttons: pill with an arrow chip */
.btn {
  display: inline-flex; align-items: center; gap: 14px; min-height: 52px; padding: 6px 6px 6px 24px;
  border-radius: 999px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  font-size: 1rem; font-weight: 500; letter-spacing: .01em; cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.btn .chip { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--paper); color: var(--ink); transition: transform var(--t-med) var(--ease); }
.btn:hover .chip { transform: translateX(3px); }
.btn:hover { background: #3A352F; }
.btn--light { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--light .chip { background: var(--ink); color: var(--paper); }
.btn--light:hover { background: #fff; }
.btn--lg { min-height: 68px; padding: 8px 8px 8px 34px; font-size: 1.1875rem; gap: 22px; }
.btn--lg .chip { width: 52px; height: 52px; }
.btn[disabled] { opacity: .55; cursor: progress; }
.ico { width: 16px; height: 16px; flex: none; }

/* Text link with arrow; padded for a comfortable click/tap area */
.link {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding-block: 10px;
  font-size: 1rem; font-weight: 500; border-bottom: 1px solid var(--line-strong);
  transition: border-color var(--t-fast);
}
.link .ico { transition: transform var(--t-med) var(--ease); }
.link:hover { border-color: var(--ink); }
.link:hover .ico { transform: translateX(3px); }
.link--light { color: var(--paper); border-color: rgba(243, 239, 231, .55); }
.link--light:hover { border-color: var(--paper); }

/* Cards */
.card { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.card .frame img { transition: transform 1.1s var(--ease); }
.card:hover .frame img { transform: scale(1.025); }
.card .meta { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.card .name { font-weight: 500; font-size: 1.0625rem; }
.card .where { font-size: var(--fs-small); color: var(--ink-2); text-align: right; }
.card:hover .name { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* Drawing inserts: pre-tinted to the page color, no blend modes, no fade needed to look right */
.drawing img { width: 100%; }
.drawing .cap { text-align: center; }

/* Data rows (project metadata) */
.p-meta { display: grid; border-top: 1px solid var(--line-strong); margin: 0; }
.p-meta > div { display: grid; grid-template-columns: 9.5em 1fr; gap: 16px; padding-block: 11px; border-bottom: 1px solid var(--line); }
.p-meta dt { padding-top: .3em; }
.p-meta dd { margin: 0; font-size: var(--fs-small); }

/* Short item lists in two columns, separated by hairlines */
.item-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); margin: 28px 0 32px; border-top: 1px solid var(--line); }
.item-list li { padding-block: 11px; border-bottom: 1px solid var(--line); font-size: var(--fs-small); }

/* Reveal: a gentle rise for photos below the fold. Elements are fully correct without it. */
.reveal { transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.pending { opacity: 0; transform: translateY(16px); }

/* ---------- 7. Pages ---------- */
/* Home hero */
.hero { position: relative; height: min(100svh, 1000px); min-height: 600px; color: var(--paper); overflow: hidden; }
.hero-media, .hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 17, 14, .5) 0%, rgba(20, 17, 14, 0) 26%, rgba(20, 17, 14, 0) 45%, rgba(20, 17, 14, .6) 100%); }
.hero-text { position: relative; z-index: 1; height: 100%; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; padding-bottom: clamp(32px, 5vw, 72px); }
.hero .copy { max-width: 900px; }
.hero .actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: clamp(28px, 3vw, 44px); }
.hero-credit { display: grid; text-align: right; font-size: .875rem; line-height: 1.5; color: rgba(243, 239, 231, .85); flex: none; padding-block: 8px; }
.hero-credit span:first-child { color: var(--paper); font-weight: 500; }
.hero-credit:hover span:first-child { text-decoration: underline; text-underline-offset: 3px; }

/* Home: positioning */
.positioning .statement { grid-column: 1 / span 10; max-width: 30em; }
.positioning .link { grid-column: 1 / span 4; justify-self: start; margin-top: clamp(28px, 3vw, 44px); }

/* Home: selected work */
.sel { display: grid; gap: clamp(44px, 5vw, 80px); }
.sel-row { display: grid; grid-template-columns: 7fr 5fr; gap: var(--gap); align-items: stretch; }
.sel-row .r-fill { flex: 1; min-height: 0; }
.sel-row .r-fill img { position: absolute; inset: 0; }

/* Home: areas of practice + drawing */
.areas-home .areas-copy { grid-column: 1 / span 6; }
.areas-home .areas-drawing { grid-column: 8 / -1; align-self: center; }
.area-list { margin-top: 32px; border-top: 1px solid var(--line-strong); }
.area-list li { border-bottom: 1px solid var(--line-strong); }
.area-list a { display: grid; grid-template-columns: 1fr auto; column-gap: 24px; row-gap: 6px; padding-block: clamp(18px, 2vw, 26px); }
.area-list .t { font-size: var(--fs-h3); letter-spacing: -.01em; font-weight: 500; }
.area-list .d { grid-column: 1; color: var(--ink-2); font-size: var(--fs-small); max-width: 52ch; }
.area-list .go { grid-column: 2; grid-row: 1 / span 2; align-self: center; transition: transform var(--t-med) var(--ease); }
.area-list a:hover .go { transform: translateX(4px); }
.area-list a:hover .t { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* Work */
.filters { display: flex; flex-wrap: wrap; gap: 4px clamp(18px, 2.4vw, 36px); margin-bottom: clamp(32px, 4vw, 56px); border-bottom: 1px solid var(--line); }
.filters button {
  background: none; border: 0; min-height: 48px; padding: 12px 2px; margin-bottom: -1px; cursor: pointer;
  font-size: 1rem; color: var(--ink-2); border-bottom: 2px solid transparent; transition: color var(--t-fast), border-color var(--t-fast);
}
.filters button:hover { color: var(--ink); }
.filters button[aria-pressed="true"] { color: var(--ink); font-weight: 500; border-bottom-color: var(--ink); }
.work-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(44px, 4.5vw, 72px) var(--gap); }
.work-grid > .card.span-2 { grid-column: 1 / -1; }
.work-grid > .card.span-2 .frame { aspect-ratio: 21 / 9; }
.card[hidden], .more-work[hidden] { display: none; }
.more-work { margin-top: var(--section-s); padding-top: 32px; border-top: 1px solid var(--line-strong); }
.more-h { margin-bottom: 28px; }
.work-grid--small { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px var(--gap); }
.work-grid--small .meta { flex-direction: column; gap: 2px; }
.work-grid--small .where { text-align: left; }

/* Small-project modal */
.pm {
  width: min(1280px, calc(100vw - 48px)); max-width: none; max-height: calc(100dvh - 48px);
  padding: 0; border: 0; background: var(--paper); color: var(--ink); overflow: auto; overscroll-behavior: contain;
}
.pm::backdrop { background: rgba(20, 17, 14, .74); }
.pm-inner { position: relative; display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); }
.pm-media { background: var(--paper-2); display: flex; flex-direction: column; }
.pm-stage { flex: 1; display: grid; place-items: center; touch-action: pan-y; user-select: none; }
.pm-img { width: 100%; height: auto; max-height: calc(100dvh - 160px); object-fit: contain; }
.pm-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 12px; }
.pm-nav button { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--paper); cursor: pointer; }
.pm-nav button:hover { border-color: var(--ink); }
.pm-nav svg { width: 16px; height: 16px; }
.pm-count { font-size: var(--fs-small); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pm-single .pm-nav { display: none; }
.pm-info { padding: clamp(28px, 3vw, 48px); padding-top: 88px; display: grid; gap: 24px; align-content: start; }
.pm-text { color: var(--ink-2); margin: 0; }
.pm-close {
  position: absolute; top: 16px; right: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--paper); cursor: pointer; font-size: var(--fs-small);
}
.pm-close:hover { border-color: var(--ink); }
.pm-close svg { width: 14px; height: 14px; }
html.modal-open, html.modal-open body { overflow: hidden; }

/* Project page */
.p-head { padding-top: calc(var(--header-full) + clamp(32px, 5vw, 80px)); padding-bottom: clamp(32px, 4vw, 56px); }
.crumbs { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: var(--fs-small); color: var(--ink-2); margin-bottom: 14px; }
.crumbs a { padding-block: 6px; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.crumbs span { padding-block: 6px; }
.p-title { grid-column: 1 / span 7; align-self: end; }
.p-hero--split { padding-bottom: var(--section-s); }
.p-hero--split .frame { grid-column: 1 / span 6; align-self: start; }
.p-hero--split .side { grid-column: 8 / -1; }
.p-hero--split .p-data { margin-bottom: clamp(32px, 3.5vw, 48px); }
.p-story { padding-block: var(--section-s); }
/* Narrative on the left, project data beside it on the right */
.p-story .story { grid-column: 1 / span 7; grid-row: 1; }
.p-story .p-data { grid-column: 9 / -1; grid-row: 1; align-self: start; padding-top: .35em; }
/* Project narratives: a step above body size so the story reads comfortably next to large imagery */
.story p { max-width: var(--measure); color: var(--ink-2); font-size: 1.1875rem; line-height: 1.7; }
.story .lede { color: var(--ink); margin-bottom: 1.2em; font-size: clamp(1.25rem, 1.55vw, 1.45rem); line-height: 1.5; }
.p-blocks .wrap { display: grid; gap: var(--stack); padding-bottom: var(--section-s); }
.b-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.b-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.b-drawing { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.b-drawing .drawing { grid-column: 3 / span 8; }
.b-drawing--wide .drawing { grid-column: 1 / -1; }
.next { border-top: 1px solid var(--line); }
.next a { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-block: clamp(32px, 4vw, 56px); }
.next-t { display: grid; gap: 8px; min-width: 0; }
.next .thumb { width: clamp(140px, 20vw, 280px); aspect-ratio: 3 / 2; overflow: hidden; flex: none; }
.next .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.next a:hover .thumb img { transform: scale(1.04); }
.next a:hover .h2 { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }

/* Existing / Proposed slider */
.cmp { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper-2); touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: ew-resize; }
.cmp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.cmp-before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.cmp-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 48px; margin-left: -24px; display: flex; justify-content: center; align-items: center; cursor: ew-resize; outline: none; }
.cmp-handle::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: var(--paper); box-shadow: 0 0 8px rgba(20, 17, 14, .35); }
.cmp-knob { position: relative; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--paper); color: var(--ink); box-shadow: 0 2px 12px rgba(20, 17, 14, .3); }
.cmp-knob svg { width: 22px; height: 22px; }
.cmp-handle:focus-visible .cmp-knob { outline: 2px solid var(--accent); outline-offset: 3px; }
.cmp-tag { position: absolute; top: 16px; padding: 6px 12px; border-radius: 999px; background: rgba(243, 239, 231, .92); font-size: var(--fs-label); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; pointer-events: none; }
.cmp-tag--l { left: 16px; }
.cmp-tag--r { right: 16px; }

/* Services */
.svc { padding-block: var(--section-s); border-top: 1px solid var(--line-strong); }
.svc-name { grid-column: 1 / span 4; }
.svc-body { grid-column: 6 / span 6; }
.svc-body .lede { margin-bottom: 18px; }
.svc-body > p:not(.lede) { color: var(--ink-2); max-width: var(--measure); }
.svc-break { padding-block: clamp(24px, 4vw, 64px) clamp(40px, 5vw, 80px); border-top: 1px solid var(--line-strong); }
.svc-break .drawing.wide { max-width: 1240px; margin-inline: auto; }
.split-cta .h2 { grid-column: 1 / span 6; }
.split-cta > div { grid-column: 8 / -1; align-self: end; color: var(--ink-2); }
.split-cta .link { margin-top: 16px; color: var(--ink); }

/* Process */
.stages { border-top: 1px solid var(--line-strong); }
.stage { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding-block: clamp(48px, 6vw, 96px); border-bottom: 1px solid var(--line-strong); }
.stage > .num { grid-column: 1 / span 1; font-size: var(--fs-h3); color: var(--ink); }
.stage-body { grid-column: 2 / span 5; }
.stage-body .h2 { margin-bottom: 20px; }
.stage-body .lede { margin-bottom: 14px; }
.stage-body > p:not(.lede) { color: var(--ink-2); max-width: 54ch; }
.stage-body .item-list { margin-bottom: 0; }
.stage-aside { grid-column: 8 / -1; align-self: center; }
.stage-aside .drawing { max-width: 520px; margin-inline: auto; }
.stage-aside .drawing img[src*="process-plan"] { max-width: 440px; margin-inline: auto; }
.stage-photo { max-width: 560px; margin-inline: auto; }
/* Short text + a drawing sequence: the 2x2 sequence sits beside the text, a little wider than other stage images */
.stage--wide .stage-aside { grid-column: 7 / -1; }
.stage--wide .stage-aside .drawing { max-width: none; }
.stage-photo--tall { max-width: 400px; }

/* About */
.about-photo { padding-bottom: var(--section-s); }
.philosophy .ph-h { grid-column: 1 / span 4; }
.principles { grid-column: 6 / -1; border-top: 1px solid var(--line-strong); }
.principles li { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--gap); padding-block: 26px; border-bottom: 1px solid var(--line-strong); }
.principles p { color: var(--ink-2); }
.owner-photo { grid-column: 1 / span 5; }
.owner-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: saturate(.85); }
.owner-copy { grid-column: 7 / span 5; align-self: end; }
.owner-copy .role { color: var(--ink-2); margin: 10px 0 32px; font-size: var(--fs-lede); }
.owner-copy .prose p { color: var(--ink-2); }

/* Contact */
/* Details at the top, sketch at the bottom, ending level with the Send Inquiry button */
.contact-info { grid-column: 1 / span 5; display: flex; flex-direction: column; justify-content: space-between; gap: clamp(40px, 5vw, 72px); }
.contact-info dl { margin: 0; border-top: 1px solid var(--line-strong); }
.contact-info dl > div { display: grid; gap: 6px; padding-block: 16px; border-bottom: 1px solid var(--line); }
.contact-info dd { margin: 0; font-size: 1.0625rem; }
.contact-info dd a { display: inline-block; padding-block: 4px; }
.contact-info dd a:hover { text-decoration: underline; text-underline-offset: 3px; }
.contact-drawing { width: 100%; }
/* Soft edges where the sketch was cropped, so it fades into the page instead of ending in a hard line */
.contact-drawing img { -webkit-mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 62%, transparent 100%); }
.form { grid-column: 7 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px var(--gap); align-content: start; }
.form-note { grid-column: 1 / -1; margin: 0; }
.field { display: grid; gap: 8px; align-content: start; min-width: 0; }
.field.full, .submit, .form-status { grid-column: 1 / -1; }
.field label { font-size: var(--fs-small); font-weight: 500; }
.req { color: var(--accent); margin-left: 2px; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 52px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 2px;
  background: var(--paper-3); color: var(--ink); font: inherit; font-size: 1rem; transition: border-color var(--t-fast);
}
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
.field textarea { min-height: 180px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-2); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.field input::placeholder { color: #8C8476; }
.err { display: none; font-size: .875rem; color: var(--error); }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--error); }
.field.invalid .err { display: block; }
.form-status { margin: 0; padding: 16px 18px; background: var(--paper-2); border-left: 2px solid var(--ink); }
.form-status.is-error { border-left-color: var(--error); }

/* ---------- 8. Footer ---------- */
.site-footer { background: var(--dark); color: var(--on-dark); font-size: 1.1875rem; }
.f-cta { display: flex; justify-content: space-between; align-items: center; gap: 32px 48px; flex-wrap: wrap; padding-block: clamp(72px, 9vw, 136px); border-bottom: 1px solid rgba(238, 232, 221, .18); }
.f-cta-h { margin: 0; font-weight: 400; font-size: clamp(2.3rem, 5vw, 4.4rem); line-height: 1.05; letter-spacing: -.028em; }
.f-main { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 48px; padding-block: clamp(56px, 7vw, 96px); }
.f-brand { grid-column: 1 / span 4; display: grid; gap: 28px; align-content: start; }
.f-mono { width: clamp(132px, 13vw, 200px); height: auto; }
.f-line { margin: 0; color: var(--on-dark-2); font-family: var(--serif); font-style: italic; font-size: 1.375rem; line-height: 1.3; max-width: 16em; }
.f-cols { grid-column: 5 / -1; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.15fr) minmax(0, 1.3fr); gap: var(--gap); }
.f-cols > div { display: flex; flex-direction: column; align-items: flex-start; }
.f-cols a { padding-block: 6px; }
.f-cols a:hover { text-decoration: underline; text-underline-offset: 3px; }
.f-cols address { padding-top: 6px; color: var(--on-dark); line-height: 1.55; }
.f-h { margin: 0 0 12px; font-size: .875rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-2); }
.legal { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 24px 32px; border-top: 1px solid rgba(238, 232, 221, .18); font-size: 1.0625rem; color: var(--on-dark-2); }

/* ---------- 9. Tablet (<=1080px) ---------- */
@media (max-width: 1080px) {
  :root { --header-full: 92px; --header-compact: 64px; --logo-h: 38px; }
  .nav { display: none; }
  .menu-btn {
    display: inline-flex; align-items: center; gap: 12px; min-height: 48px; min-width: 48px; padding: 0 4px;
    background: none; border: 0; cursor: pointer; font-size: 1rem; font-weight: 500; position: relative; z-index: 2;
  }
  .menu-btn .bars { position: relative; width: 24px; height: 9px; border-block: 1.5px solid currentColor; transition: transform var(--t-med) var(--ease); }
  .menu-open .menu-btn .bars { border-bottom-color: transparent; transform: translateY(4px); }
  /* Over the hero: the same soft shadow as desktop, applied to the whole logo link and the whole Menu control
     (not the clipped mark or the text alone), so each reads as one piece with no box or halo edge */
  /* Over the hero: a static shade behind the header instead of shadow filters, which phones keep redrawing
     while the hero image underneath loads (that redraw read as a glitch for the first seconds) */
  .has-hero .site-header:not(.is-compact) .menu-btn { text-shadow: none; filter: none; }
  .has-hero .site-header:not(.is-compact) .brand, .has-hero .site-header:not(.is-compact) .brand .mark { filter: none; }
  .has-hero .site-header:not(.is-compact)::before { content: ''; position: absolute; inset: 0 0 -32px; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(20, 17, 14, .5) 0%, rgba(20, 17, 14, .28) 60%, rgba(20, 17, 14, 0) 100%); }
  .menu-open .has-hero .site-header .menu-btn, .menu-open .has-hero .site-header .brand { filter: none; }
  .menu-open .has-hero .site-header .menu-btn { text-shadow: none; }
  .mobile-nav {
    display: flex; flex-direction: column; gap: 28px; position: fixed; inset: 0; z-index: 40; overflow-y: auto;
    background: var(--paper); padding: calc(var(--header-full) + 16px) var(--gutter) max(28px, env(safe-area-inset-bottom));
    opacity: 0; visibility: hidden; transition: opacity var(--t-med), visibility var(--t-med);
  }
  .menu-open .mobile-nav { opacity: 1; visibility: visible; }
  html.menu-open { overflow: hidden; }
  .mobile-nav ul { border-top: 1px solid var(--line-strong); }
  .mobile-nav li { border-bottom: 1px solid var(--line-strong); }
  .mobile-nav li a { display: flex; align-items: center; min-height: 64px; padding-block: 10px; font-size: clamp(1.75rem, 7vw, 2.4rem); letter-spacing: -.02em; line-height: 1.15; }
  .mobile-nav li a[aria-current="page"] { font-family: var(--serif); font-style: italic; font-weight: 300; }
  .btn--block { width: 100%; justify-content: space-between; min-height: 60px; font-size: 1.0625rem; }
  .mobile-nav .foot { display: grid; gap: 2px; margin-top: auto; font-size: 1rem; color: var(--ink-2); }
  .mobile-nav .foot a { padding-block: 8px; }
  /* While the menu is open the header sits on paper: dark logo, no transparency */
  .menu-open .site-header, .menu-open .has-hero .site-header:not(.is-compact) { background: var(--paper); color: var(--ink); border-color: transparent; }
  .menu-open .site-header .logo-dark { opacity: 1 !important; }
  .menu-open .site-header .logo-light { opacity: 0 !important; }
  .menu-open .site-header .brand .mark { filter: none !important; }

  .page-intro .title { grid-column: 1 / -1; }
  .page-intro .lede { grid-column: 1 / span 9; margin-top: 24px; }
  .p-title { grid-column: 1 / -1; }
  .p-story .story { grid-column: 1 / span 7; }
  .p-story .p-data { grid-column: 9 / -1; }
  .work-grid--small { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-name { grid-column: 1 / -1; margin-bottom: 20px; }
  .svc-body { grid-column: 1 / span 10; }
  .pm-inner { grid-template-columns: 1fr; }
  .pm-info { padding-top: clamp(24px, 4vw, 40px); }
  .f-brand { grid-column: 1 / -1; }
  .f-cols { grid-column: 1 / -1; }
}

/* ---------- 10. Phone (<=760px) ---------- */
@media (max-width: 760px) {
  :root { --header-full: 80px; --header-compact: 60px; --logo-h: 32px; --fs-body: 1rem; }
  .grid > * { grid-column: 1 / -1 !important; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .page-intro .lede { margin-top: 18px; }
  /* Headlines set as exactly two lines on phones: sized to the screen width so neither line wraps */
  .title--2line { font-size: min(var(--fs-h1), 8.1vw); white-space: nowrap; }

  /* Home */
  /* Home hero on phones: the cabin shown wide (4:3, the whole glazed living area and massing), fading into a
     dark panel that carries the headline and actions, instead of a narrow portrait crop of the image */
  .hero { height: auto; min-height: 0; background: #24231D; }
  .hero::after { display: none; }
  .hero-media { position: relative; inset: auto; height: auto; aspect-ratio: 4 / 3; }
  .hero-media img { object-position: 50% 58%; }
  .hero-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 17, 14, .7) 0%, rgba(20, 17, 14, .25) 22%, rgba(20, 17, 14, 0) 40%, rgba(36, 35, 29, 0) 62%, #24231D 100%); }
  .hero-text { height: auto; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 22px; margin-top: -40px; padding-bottom: 44px; }
  .hero .actions { gap: 12px 20px; }
  .hero-credit { text-align: left; font-size: .8125rem; }
  .positioning .link { margin-top: 24px; }
  .sel { gap: 44px; }
  .sel-row { grid-template-columns: 1fr; row-gap: 44px; }
  .sel .r-pano, .sel .r-cine { aspect-ratio: 3 / 2; }
  .sel-row .r-fill { aspect-ratio: 4 / 5; flex: none; }
  .areas-home .areas-drawing { margin-top: 40px; }
  .area-list a { column-gap: 16px; }

  /* Work */
  /* Filters: one option per row, hairlines between, a thin ink bar marks the active one */
  .filters { flex-direction: column; gap: 0; border-bottom: 0; border-top: 1px solid var(--line); }
  .filters button { width: 100%; text-align: left; min-height: 52px; margin: 0; padding: 14px 0 14px 14px; font-size: 1rem; border-bottom: 1px solid var(--line); border-left: 2px solid transparent; }
  .filters button[aria-pressed="true"] { border-bottom-color: var(--line); border-left-color: var(--ink); }
  .work-grid { grid-template-columns: 1fr; gap: 44px; }
  .work-grid > .card.span-2 .frame { aspect-ratio: 3 / 2; }
  .work-grid--small { grid-template-columns: 1fr 1fr; gap: 32px 16px; }
  .card .meta { flex-direction: column; gap: 2px; }
  .card .where { text-align: left; }

  /* Modal: a full-screen sheet on phones */
  .pm { width: 100vw; height: 100dvh; max-height: none; margin: 0; }
  .pm-inner { min-height: 100%; align-content: start; }
  .pm-close { position: sticky; top: 0; margin: 12px 12px 0 auto; float: right; }
  .pm-media { margin-top: 0; }
  .pm-img { max-height: none; }
  .pm-info { padding: 24px var(--gutter) 40px; }

  /* Project pages: natural proportions, stacked data */
  .p-meta > div { grid-template-columns: 1fr; gap: 4px; padding-block: 12px; }
  .p-meta dd { font-size: 1rem; }
  .story p { font-size: 1.0625rem; }
  .p-story .story { grid-row: 2; }
  .p-story .p-data { grid-row: 1; margin-bottom: 36px; padding-top: 0; }
  .p-hero .frame, .p-blocks .frame { aspect-ratio: auto; }
  .p-hero .frame img, .p-blocks .frame img { height: auto; }
  /* Project photos run edge to edge on phones (the slider and drawings keep the page margins) */
  .p-hero .frame, .b-full .frame, .b-pair .frame, .b-trio .frame { margin-inline: calc(-1 * var(--gutter)); }
  /* Per-image phone crop, only where the architecture survives it (set per image in projects.js) */
  .m-crop .frame { aspect-ratio: var(--m-ar) !important; }
  .m-crop .frame img { height: 100% !important; object-position: var(--m-pos, 50% 50%); }
  .b-pair, .b-trio { grid-template-columns: 1fr; row-gap: 24px; }
  .b-drawing .drawing { grid-column: 1 / -1; }
  .cmp-tag { top: 10px; padding: 4px 10px; }
  .cmp-tag--l { left: 10px; }
  .cmp-tag--r { right: 10px; }
  .next a { align-items: flex-end; }
  .next .thumb { width: 104px; }

  /* Services, process, about */
  .item-list { grid-template-columns: 1fr; }
  .split-cta > div { margin-top: 20px; }
  .stage { grid-template-columns: 1fr; row-gap: 12px; }
  .stage > .num, .stage-body, .stage-aside { grid-column: 1 / -1; }
  .stage-aside, .stage--wide .stage-aside { grid-column: 1 / -1; margin-top: 28px; grid-row: auto; }
  .stage-aside .drawing, .stage-photo { margin-inline: 0; }
  .stage-photo--tall { max-width: 320px; margin-inline: auto; }
  .principles { margin-top: 32px; }
  .principles li { grid-template-columns: 1fr; gap: 6px; }
  .owner-copy { margin-top: 32px; }
  .owner-photo img { aspect-ratio: auto; height: auto; object-fit: fill; }
  .about-photo .frame { aspect-ratio: 3 / 2; }

  /* Contact: form first, then details and the sketch */
  .contact .wrap { display: flex; flex-direction: column; }
  .form { order: 1; grid-template-columns: 1fr; }
  .contact-info { order: 2; margin-top: 56px; }
  .submit .btn { width: 100%; justify-content: space-between; }
  .contact-drawing img { -webkit-mask-image: none; mask-image: none; }

  /* Footer */
  .f-cta { padding-block: 64px; }
  .f-cta .btn--lg { width: 100%; justify-content: space-between; }
  /* Brand block centered as a divider between the CTA and the footer details */
  .f-brand { justify-items: center; text-align: center; gap: 22px; padding-bottom: 8px; }
  .f-line { max-width: none; }
  .f-cols { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .f-cols > div:last-child { grid-column: 1 / -1; }
  .legal { flex-direction: column; gap: 6px; }
}

/* ---------- 11. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}