/* ==========================================================
   Coffey | Residential — V1 Editorial Classic
   PT Serif headlines · Work Sans body · PT Serif Caption wordmark
   · JetBrains Mono labels.  Bone palette (#f6f3ec / #1a1916).
   1440 artboard / 1280 content cap / 56px gutters / 120px section
   padding.  Fixed sizes, desktop-first; mobile stacks at <=800.
   ========================================================== */

:root {
  --bg:      #f6f3ec;   /* page background — warm bone */
  --fg:      #1a1916;   /* primary text */
  --muted:   #8a8478;   /* mono labels, captions, secondary */
  --line:    #d8d2c4;   /* every hairline */
  --cta:     #1a1916;   /* dark CTA / footer panel */
  --ctaFg:   #f6f3ec;   /* text on CTA */
  --softBg:  #efe9df;   /* optional soft panel */

  --serif:   'PT Serif', Georgia, serif;
  --caption: 'PT Serif Caption', 'PT Serif', Georgia, serif;
  --sans:    'Work Sans', Helvetica, Arial, sans-serif;
  --mono:    'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

  --gutter:  56px;
  --section: 120px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* ============= Site-wide content cap =============
   Every page wraps its content in <div class="shell">.
   Content stops at 1280px + 2 × 56px gutter = 1392px.
   On viewports wider than that, the bone page background
   shows on either side — the cap stays consistent. */
.shell {
  max-width: 1392px;
  margin: 0 auto;
  background: var(--bg);
}

/* ============= Atoms ============= */
.eyebrow {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;                  /* neutralise <h2> user-agent margins
                                 (eyebrow may be a <div> or <h2>) */
  display: block;
}
.eyebrow--light { color: rgba(255,255,255,.75); }

.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 16px 28px;
  background: #fff;
  color: var(--fg);
  border: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 200ms, color 200ms;
}
.cta-btn:hover { background: var(--fg); color: var(--bg); }
.cta-btn--dark { background: var(--fg); color: var(--bg); }
.cta-btn--dark:hover { background: #fff; color: var(--fg); }

/* ============= Header =============
   Three-column grid:
     LEFT   brand group (small logo mark + eyebrow)
     CENTER wordmark "Coffey | Residential"
     RIGHT  nav
   The two outer columns are 1fr so the wordmark sits true-centre
   regardless of how wide the brand or nav happens to be.

   ─── Site-wide edge rule ───
   ALL text/navigation content sits inside a 56px gutter (var(--gutter)).
   Only graphic surfaces go full-bleed to the shell edge: hero images,
   gallery images, and project-tile images. This gives the page a single
   coherent vertical alignment for everything you read, with full-bleed
   moments reserved for photography. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 28px var(--gutter);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  gap: 24px;
}
.site-header .brand {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-self: start;
}
.site-header .brand-mark {
  display: block;
  height: 22px;
  width: auto;
}
.site-header .wordmark {
  justify-self: center;
  font-family: var(--caption);
  font-style: normal;
  font-size: 15px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.site-header .wordmark .pipe {
  opacity: 0.35;
  font-style: normal;
  margin: 0 6px;
}
.site-header .right { justify-self: end; }

.site-nav {
  display: flex;
  gap: 28px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--fg);
}
.site-nav a { transition: opacity 200ms; white-space: nowrap; }
.site-nav a:hover { opacity: 0.55; }
.site-nav a.is-active {
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
}

/* Hamburger toggle — injected by site.js, hidden on desktop. */
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 8px;
  margin: 0;
  cursor: pointer;
  justify-self: end;
  z-index: 110;
  position: relative;
}
.nav-toggle__bars {
  display: block;
  width: 26px;
  height: 14px;
  position: relative;
}
.nav-toggle__bars span {
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--fg);
  transition:
    transform 280ms cubic-bezier(.2,.7,.2,1),
    opacity 200ms ease,
    top 280ms cubic-bezier(.2,.7,.2,1);
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 6px; }
.nav-toggle__bars span:nth-child(3) { top: 12px; }
body.nav-open .nav-toggle__bars span:nth-child(1) { top: 6px; transform: rotate(45deg); }
body.nav-open .nav-toggle__bars span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle__bars span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

/* Swap desktop nav for the hamburger drawer once the nav links start to
   crowd the centered wordmark. With six links including "Awards & Press"
   we need substantial breathing room — flipping at 1280px keeps the
   layout calm before things start to wrap or rub against the wordmark. */
@media (max-width: 1280px) {
  .nav-toggle { display: block; }
  /* Mobile drawer — full-bleed overlay below the header.
     Frosted glass: semi-transparent bone tint over a blurred backdrop
     so the page behind is hinted at without competing with the links. */
  .site-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: rgba(246, 243, 236, 0.72);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
    backdrop-filter: blur(18px) saturate(120%);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 28px;
    padding: 80px 32px;
    transform: translateY(-100%);
    transition: transform 380ms cubic-bezier(.2,.7,.2,1);
    z-index: 100;
    pointer-events: none;
    /* Defeat the desktop .right { justify-self: end } since fixed takes
       us out of the header grid; explicit overrides keep specificity. */
    justify-self: stretch;
  }
  body.nav-open .site-nav {
    transform: translateY(0);
    pointer-events: auto;
  }
  body.nav-open { overflow: hidden; }
  .site-nav a {
    font-family: var(--serif);
    font-size: 32px;
    line-height: 1.1;
    letter-spacing: -0.015em;
  }
  .site-nav a.is-active {
    text-decoration: none;
  }
}

/* Tight phone-only header treatment: tighter padding, hide the eyebrow. */
@media (max-width: 800px) {
  .site-header { padding: 20px 24px; grid-template-columns: auto 1fr auto; }
  .site-header .brand .eyebrow { display: none; }
  .site-header .wordmark { justify-self: center; }
}

/* ============= Hero =============
   Image takes its natural aspect (no cropping). The overlay sits on
   top and adapts to whatever height the image gives us. */
.hero {
  position: relative;
  background: var(--fg);
  overflow: hidden;
}
.hero__media {
  position: relative;
  aspect-ratio: 3 / 2;     /* reserves space before the JS-set img loads */
  background: var(--fg);   /* matches the dark overlay so any race state is invisible */
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;       /* fill the 3:2 box regardless of intrinsic ratio */
  display: block;
}
.hero__media .hero-fallback {
  position: absolute;
  inset: 0;
}
.hero__inner {
  position: absolute;
  inset: 0;
  z-index: 2;
  color: #fff;
  padding: 56px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.hero__head {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 96px;
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 1100px;
}
.hero__head > div { display: block; }
.hero__foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-top: 36px;
  flex-wrap: wrap;
}
.hero__sub {
  max-width: 420px;
  font-size: 15px;
  line-height: 1.55;
  opacity: 0.9;
  margin: 0;
}

@media (max-width: 800px) {
  .hero__inner { padding: 32px 24px; }
  .hero__head { font-size: 56px; }
  .hero__sub { font-size: 14px; }
}

@media (max-width: 700px) {
  /* On phones, the 3:2 hero image is too short to hold the eyebrow,
     two-line H1, sub-copy and CTA without clipping. Move the text
     OUT of the absolute overlay so it sits in its own block below
     the image. The .hero element already has the dark background
     colour, so the text panel reads as a continuous extension of
     the image. Everything fits, nothing clips. */
  .hero { overflow: visible; }
  .hero__inner {
    position: static;
    inset: auto;
    padding: 24px 20px 28px;
    justify-content: flex-start;
    gap: 12px;
  }
  .hero__head {
    font-size: 48px;
    line-height: 0.98;
  }
  .hero__foot { margin-top: 12px; }
}

/* ============= Sections (generic) ============= */
.section {
  padding: var(--section) var(--gutter);
  border-bottom: 1px solid var(--line);
}
@media (max-width: 800px) {
  .section { padding: 64px 24px; }
}

/* ============= About ============= */
.about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
}
.about__lhs h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 56px;
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 24px 0 0 0;
}
.about__rhs .intro {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  margin: 0;
  color: var(--fg);
}
.about__rhs .body {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.65;
  margin-top: 20px;
  color: var(--muted);
}
.about__more {
  display: inline-block;
  margin-top: 32px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 4px;
  transition: opacity 200ms ease;
}
.about__more:hover { opacity: 0.55; }
.about__portrait {
  margin-top: 36px;
}
.about__portrait img {
  width: 100%;
  height: auto;
  display: block;
}
.about__portrait figcaption {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (max-width: 800px) {
  .about__grid { grid-template-columns: 1fr; gap: 40px; }
  .about__lhs h2 { font-size: 44px; }
}

/* ============= Section header (eyebrow + h2 + optional right link) ============= */
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 56px;
  gap: 24px;
  flex-wrap: wrap;
}
.section-head .lhs .eyebrow { display: block; margin-bottom: 16px; }
.section-head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 56px;
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0;
}
.section-head .more {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--fg);
}
@media (max-width: 800px) {
  .section-head h2 { font-size: 40px; }
}

/* ============= Projects — V6 alternating full-bleed rows ============= */
/* The projects section breaks out of the gutter and runs edge-to-edge.
   Each row is a 1fr/1fr split: one half image (full bleed, corners
   touching), one half content (56px inset).  Rows alternate sides. */
.projects {
  padding: 0;            /* rows manage their own spacing */
  border-bottom: 1px solid var(--line);
}
.projects > .section-head {
  padding: 120px var(--gutter) 56px;
  margin-bottom: 0;
}
.projects__rows {
  display: block;
}
.project-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;          /* don't stretch the content half to the image */
  border-top: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
}
.project-row .pr-image {
  aspect-ratio: 3 / 2;         /* reserve a 3:2 slot — most tiles match */
  overflow: hidden;
}
.project-row .pr-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;           /* fill the reserved 3:2 slot */
  display: block;
  transition: filter 300ms;
}
.project-row:hover .pr-image img { filter: brightness(0.78); }

.project-row .pr-content {
  padding: 56px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 620px;
}
.project-row .pr-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 20px;
}
.project-row .pr-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 36px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
}
.project-row .pr-loc {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--muted);
  margin-top: 10px;
}
.project-row .pr-body {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.65;
  color: var(--fg);
  margin: 24px 0 0 0;
}
.project-row .pr-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 32px;
}
.project-row .pr-foot .read {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--fg);
}
.project-row .pr-foot .year {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--muted);
}
/* Alternate: even rows flip image to the right, content to the left.
   Scoped to .projects__rows so the Homes index (which uses JS-driven
   alternation for filterable rows) is not affected. */
.projects__rows .project-row:nth-child(even) .pr-image    { order: 2; }
.projects__rows .project-row:nth-child(even) .pr-content  { order: 1; }

@media (max-width: 900px) {
  .project-row { grid-template-columns: 1fr; }
  .project-row .pr-content { padding: 40px 24px; max-width: none; }
  .project-row .pr-title { font-size: 28px; }
  /* Force every tile to read text-on-top, image-below on mobile.
     Selectors match the desktop alternation rules' specificity so they
     win the cascade — otherwise even rows keep flipping image-on-top. */
  .projects__rows .project-row:nth-child(odd)  .pr-content,
  .projects__rows .project-row:nth-child(even) .pr-content { order: 1; }
  .projects__rows .project-row:nth-child(odd)  .pr-image,
  .projects__rows .project-row:nth-child(even) .pr-image   { order: 2; }
  .projects > .section-head { padding: 64px 24px 32px; }
}

/* ============= Services (4-col) ============= */
.services__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px;
  border-top: 1px solid var(--line);
  padding-top: 32px;
}
.service__num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--muted);
  margin-bottom: 16px;
}
.service h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 26px;
  letter-spacing: -0.01em;
  margin: 0 0 12px 0;
}
.service p {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}
.services .section-head { margin-bottom: 64px; }
.services .section-head h2 { font-size: 56px; }

@media (max-width: 900px) {
  .services__grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}
@media (max-width: 540px) {
  .services__grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ============= Awards ============= */
.awards { padding: 90px var(--gutter); border-bottom: 1px solid var(--line); }
.awards__top {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 80px;
  margin-bottom: 32px;
}
.awards__feature {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  max-width: 720px;
}
.awards__feature em { font-style: italic; }

.awards__rows-wrap {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 80px;
}
.awards__rows {
  border-bottom: 1px solid var(--line);
}
.awards__row {
  display: grid;
  grid-template-columns: 80px 1fr 1fr 90px;
  align-items: baseline;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  gap: 16px;
}
.awards__row .y {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
}
.awards__row .t {
  font-family: var(--serif);
  font-size: 18px;
  letter-spacing: -0.01em;
}
.awards__row .by {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--muted);
}
.awards__row .out {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: right;
}
.awards__row .out.win { color: var(--fg); }
.awards__row .out.shortlist { color: var(--muted); }

@media (max-width: 900px) {
  .awards__top, .awards__rows-wrap { grid-template-columns: 1fr; gap: 24px; }
  .awards__feature { font-size: 26px; }
  .awards__row { grid-template-columns: 60px 1fr 70px; gap: 12px; }
  .awards__row .by { grid-column: 2; grid-row: 2; margin-top: 4px; }
}

/* "See all" link inside the homepage press section. Sits at the bottom of
   the press rows, aligned with the row text. */
.press__more {
  display: inline-block;
  margin-top: 40px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 4px;
  transition: opacity 200ms ease;
}
.press__more:hover { opacity: 0.55; }

/* ============= Homepage Journal section =============
   Three image-led cards, links to the journal index for everything else. */
.home-journal {
  padding: 120px var(--gutter);
  border-bottom: 1px solid var(--line);
}
.home-journal .section-head { margin-bottom: 56px; }
.home-journal h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 48px;
  letter-spacing: -0.02em;
  margin: 0;
}
.home-journal .more {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--fg);
}
.home-journal__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 32px;
  row-gap: 48px;
}
@media (max-width: 900px) {
  .home-journal { padding: 64px 24px; }
  .home-journal h2 { font-size: 32px; }
  .home-journal__grid { grid-template-columns: 1fr; row-gap: 40px; }
}

/* ============= Press ============= */
.press { padding: 100px var(--gutter); border-bottom: 1px solid var(--line); }
.press__wrap {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 80px;
}
.press__rows {}
.press__row {
  display: grid;
  grid-template-columns: 160px 1fr 60px;
  align-items: baseline;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  gap: 16px;
}
.press__row:first-child { border-top: 1px solid var(--line); }
.press__row .src {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.press__row .line {
  font-family: var(--serif);
  font-size: 20px;
  letter-spacing: -0.01em;
}
.press__row .yr {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  text-align: right;
}
@media (max-width: 900px) {
  .press__wrap { grid-template-columns: 1fr; gap: 24px; }
  .press__row { grid-template-columns: 1fr auto; gap: 8px; }
  .press__row .src { font-size: 10px; }
  .press__row .line { grid-column: 1 / -1; font-size: 17px; }
  .press__row .yr { grid-column: 2; grid-row: 1; }
}

/* ============= Testimonial ============= */
.testimonial {
  padding: 140px var(--gutter);
  text-align: center;
  border-bottom: 1px solid var(--line);
}
.testimonial blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 40px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  max-width: 1000px;
  margin: 0 auto;
}
.testimonial cite {
  display: block;
  margin-top: 32px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-style: normal;
}
@media (max-width: 800px) {
  .testimonial { padding: 80px 24px; }
  .testimonial blockquote { font-size: 28px; }
}

/* ============= Journal ============= */
.journal {
  padding: 100px var(--gutter);
  border-bottom: 1px solid var(--line);
}
.journal__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 40px;
  gap: 24px;
}
.journal__head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 40px;
  margin: 0;
  letter-spacing: -0.015em;
}
.journal__head .more {
  font-family: var(--sans);
  font-size: 13px;
}
.journal__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.journal__card {
  border-top: 1px solid var(--line);
  padding-top: 20px;
  display: block;
  color: inherit;
}
.journal__card .meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 24px;
}
.journal__card .title {
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
@media (max-width: 900px) {
  .journal__grid { grid-template-columns: 1fr; gap: 24px; }
  .journal__card .title { font-size: 22px; }
}

/* ============= CTA panel ============= */
.cta {
  padding: var(--section) var(--gutter);
  background: var(--cta);
  color: var(--ctaFg);
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 80px;
}
.cta h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 64px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
}
.cta .cta-btn { margin-top: 36px; }

.cta__news .eyebrow { color: rgba(255,255,255,.6); margin-bottom: 16px; display: block; }
.cta__news p {
  font-family: var(--sans);
  font-size: 14px;
  opacity: 0.9;
  margin: 0 0 20px 0;
}
.cta__news .form {
  display: flex;
  align-items: baseline;
  border-bottom: 1px solid rgba(255,255,255,.4);
  padding-bottom: 12px;
  gap: 12px;
}
.cta__news .form input {
  flex: 1;
  background: transparent;
  border: 0;
  color: #fff;
  font-family: var(--sans);
  font-size: 14px;
  outline: none;
  padding: 4px 0;
}
.cta__news .form input::placeholder { color: rgba(255,255,255,.5); }
.cta__news .form button {
  background: transparent;
  border: 0;
  color: #fff;
  font-family: var(--sans);
  font-size: 12px;
  opacity: 0.8;
}
@media (max-width: 800px) {
  .cta { grid-template-columns: 1fr; padding: 80px 24px; gap: 56px; }
  .cta h2 { font-size: 44px; }
}

/* ==========================================================
   PROJECT PAGE
   Content cap 1280 inside a 1440 artboard.  Most sections sit
   inside the cap with 56px gutter.  Only next/prev is full bleed.
   ========================================================== */

.cap {
  padding: 0 var(--gutter);
}

/* Breadcrumb / meta strip */
.breadcrumb {
  padding: 22px var(--gutter);
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.breadcrumb .now { color: var(--fg); }
.breadcrumb .sep { margin: 0 10px; opacity: 0.4; }

/* Hero (project) — runs shell-edge to shell-edge, same as the home hero */
.project-hero {
  padding: 0;
  aspect-ratio: 3 / 2;       /* reserve space before the image loads */
  overflow: hidden;
}
.project-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Landscape frame — used when a project has no landscape hero image.
   Wraps a portrait <img> in a 3:2 box and crops with object-fit: cover.
   Set --focus per-instance to pick the visible portion. */
.landscape-frame {
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  display: block;
}
.landscape-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
  display: block;
}

/* Title block */
.project-title {
  padding: 80px var(--gutter) 100px;
}
.project-title__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: end;
}
.project-title__lhs h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 88px;
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin: 0;
}
.project-title__lhs .loc {
  font-family: var(--sans);
  font-size: 16px;
  color: var(--muted);
  margin-top: 14px;
}
.project-title__lhs .eyebrow {
  display: block;
  margin-bottom: 24px;
}
.project-title__rhs {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.45;
  margin: 0;
  max-width: 500px;
  justify-self: end;
}
@media (max-width: 900px) {
  .project-title { padding: 56px 24px 64px; }
  .project-title__grid { grid-template-columns: 1fr; gap: 32px; }
  .project-title__lhs h1 { font-size: 56px; }
  .project-title__rhs { max-width: none; font-size: 18px; }
}

/* Facts strip */
.facts {
  /* Sit inside the site-wide 56px gutter like every other text section. */
  padding: 0 var(--gutter);
}
.facts__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.facts__cell {
  padding: 28px 24px;
  border-right: 1px solid var(--line);
}
/* Zero out the outer padding on the first/last cell so labels align
   exactly with the 56px gutter used by surrounding text. */
.facts__cell:first-child { padding-left: 0; }
.facts__cell:last-child  { border-right: 0; padding-right: 0; }
.facts__cell .l {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.facts__cell .v {
  font-family: var(--serif);
  font-size: 18px;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
@media (max-width: 1100px) {
  .facts__grid { grid-template-columns: repeat(3, 1fr); }
  .facts__cell { border-bottom: 1px solid var(--line); }
  .facts__cell:nth-child(3n) { border-right: 0; }
  .facts__cell:nth-last-child(-n+3) { border-bottom: 0; }
}
@media (max-width: 900px) {
  .facts { padding: 0 24px; }
}
@media (max-width: 600px) {
  .facts__grid { grid-template-columns: repeat(2, 1fr); }
  .facts__cell:nth-child(3n) { border-right: 1px solid var(--line); }
  .facts__cell:nth-child(2n) { border-right: 0; }
  .facts__cell:nth-last-child(-n+3) { border-bottom: 1px solid var(--line); }
  .facts__cell:nth-last-child(-n+2) { border-bottom: 0; }
}

/* Section-headed two-column pattern (280px label / 1fr content) */
.section-2col {
  padding: 120px var(--gutter);
  border-bottom: 1px solid var(--line);
}
.section-2col__grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 80px;
}
.section-2col__lhs .eyebrow {
  display: block;
  margin-bottom: 16px;
}
.section-2col__lhs h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 36px;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
}
@media (max-width: 900px) {
  .section-2col { padding: 64px 24px; }
  .section-2col__grid { grid-template-columns: 1fr; gap: 32px; }
  .section-2col__lhs h2 { font-size: 32px; }
}

/* Brief — two-column text inside the content side */
.brief-text {
  column-count: 2;
  column-gap: 48px;
  max-width: 880px;
}
.brief-text p {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  margin: 0 0 1.2em 0;
  break-inside: avoid;
}
@media (max-width: 900px) {
  .brief-text { column-count: 1; }
}

/* Gallery — flexible 2-column grid.
   Section runs shell-edge to shell-edge so the images match the
   homepage hero/rows. The small mono header is inset by --gutter
   because it's text. */
.gallery {
  padding: 60px 0 80px;
}
.gallery__head {
  padding: 0 var(--gutter) 24px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
/* CSS multi-columns gives a true masonry flow: every image sits at
   1/3 width, but a short image lifts up to sit directly beneath a
   tall one above it in the same column — no gaps between rows.
   Natural aspect ratios are respected throughout. */
.gallery__grid {
  column-count: 3;
  column-gap: 3px;
}
.gallery__grid > * {
  margin: 0 0 3px 0;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  display: block;
  width: 100%;
}
.gallery__grid img {
  width: 100%;
  height: auto;
  display: block;
}
/* g-wide kept as a class hook for future use; in masonry flow it sits
   at 1/3 width like everything else, never full-bleed. */
.g-wide { /* no special grid rules needed in column flow */ }
.g-image figcaption,
.g-wide figcaption {
  display: none;               /* captions live in HTML alt text + can show with .show-caps */
}
.gallery__grid.show-caps .g-image figcaption,
.gallery__grid.show-caps .g-wide figcaption {
  display: block;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.g-quote {
  column-span: all;
  -webkit-column-span: all;
  padding: 120px 0;
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.g-quote p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 36px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0;
}
.g-quote .by {
  display: block;
  margin-top: 24px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
@media (max-width: 1100px) {
  .gallery__grid { column-count: 2; }
}
@media (max-width: 700px) {
  /* Drop CSS multi-column on mobile. Single-column masonry isn't masonry —
     it's just a stack — and the column-count + loading="lazy" combination
     has a known bug on iOS Safari where figures collapse to zero height
     before image dimensions are known, so the IntersectionObserver never
     fires and images never render inline. Plain block flow avoids it. */
  .gallery__grid {
    column-count: unset;
    display: block;
  }
  .gallery__grid > * {
    margin: 0 0 8px 0;
  }
  .g-quote { padding: 64px 0; }
  .g-quote p { font-size: 24px; }
}

/* Materials list */
.materials__row {
  display: grid;
  grid-template-columns: 180px 1fr;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  align-items: baseline;
  gap: 24px;
}
.materials__row .l {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.materials__row .v {
  font-family: var(--sans);
  font-size: 15px;
}

/* Project press rows */
.project-press__row {
  display: grid;
  grid-template-columns: 180px 1fr 80px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
  align-items: baseline;
  color: inherit;
  gap: 24px;
}
.project-press__row .src {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
}
.project-press__row .line {
  font-family: var(--sans);
  font-size: 16px;
}
.project-press__row .yr {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: right;
}

/* Credits */
.credits__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 48px;
}
.credits__cell {
  padding: 18px 0;
  border-top: 1px solid var(--line);
}
.credits__cell .l {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.credits__cell .v {
  font-family: var(--sans);
  font-size: 15px;
}
@media (max-width: 600px) {
  .credits__grid { grid-template-columns: 1fr; }
}

/* Next / Previous tiles (full bleed) */
.nextprev {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.nextprev a {
  position: relative;
  color: var(--fg);
  overflow: hidden;
  display: block;
  aspect-ratio: 3 / 2;          /* fixed landscape frame */
  background: var(--softBg);
}
.nextprev a img {
  width: 100%;
  height: 100%;
  object-fit: cover;            /* fills the frame; crops as needed */
  object-position: var(--focus, 50% 50%);  /* per-tile focus point */
  display: block;
  transition: transform 400ms ease-out;
}
.nextprev a:hover img { transform: scale(1.02); }
.nextprev a .overlay {
  position: absolute;
  inset: 0;
  padding: 40px 56px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #fff;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.55) 100%);
}
.nextprev .dir, .nextprev .num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.nextprev .num { opacity: 0.8; margin-bottom: 8px; }
.nextprev .title {
  font-family: var(--serif);
  font-size: 48px;
  letter-spacing: -0.02em;
  line-height: 1;
}
@media (max-width: 800px) {
  .nextprev { grid-template-columns: 1fr; }
  .nextprev .title { font-size: 32px; }
  .nextprev a .overlay { padding: 24px; }
}

/* ============= Footer ============= */
.site-footer {
  padding: 40px var(--gutter);
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  gap: 24px;
  flex-wrap: wrap;
}
.site-footer a { color: inherit; }
.site-footer a:hover { color: var(--fg); }

@media (max-width: 600px) {
  .site-footer { padding: 32px 24px; flex-direction: column; gap: 8px; }
}

/* ==========================================================
   STUDIO PAGE
   ========================================================== */

/* Type-only header — A residential studio, one house at a time. */
.studio-hero {
  padding: 140px var(--gutter) 80px;
  border-bottom: 1px solid var(--line);
}
.studio-hero__inner { max-width: 1200px; margin: 0 auto; }
.studio-hero .eyebrow { display: block; margin-bottom: 32px; }
.studio-hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 120px;
  line-height: 0.96;
  letter-spacing: -0.035em;
  margin: 0;
  max-width: 1100px;
}
.studio-hero h1 em { font-style: italic; display: block; }
@media (max-width: 800px) {
  .studio-hero { padding: 80px 24px 56px; }
  .studio-hero h1 { font-size: 56px; }
}

/* Principal: portrait left, bio right */
.principal {
  padding: 120px var(--gutter);
  border-bottom: 1px solid var(--line);
}
.principal__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 80px;
  align-items: start;
}
.principal__portrait {
  aspect-ratio: 3 / 2;          /* Phil's portrait file is 500x333 landscape */
  overflow: hidden;
}
.principal__portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.principal__caption {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.principal__bio { padding-top: 24px; max-width: 540px; }
.principal__bio .eyebrow { display: block; margin-bottom: 16px; }
.principal__bio h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 48px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
}
.principal__quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.45;
  margin: 32px 0 0 0;
}
.principal__body {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.7;
  color: var(--fg);
  margin-top: 32px;
}
.principal__body p { margin: 0 0 1.2em 0; }
@media (max-width: 900px) {
  .principal { padding: 64px 24px; }
  .principal__grid { grid-template-columns: 1fr; gap: 40px; }
  .principal__bio { padding-top: 0; max-width: none; }
  .principal__bio h2 { font-size: 36px; }
}

/* Values — 4 numbered cards with vertical dividers */
.values-section {
  padding: 120px var(--gutter);
  border-bottom: 1px solid var(--line);
}
.values-section .section-head { margin-bottom: 56px; }
.values-section .section-head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 56px;
  letter-spacing: -0.02em;
  margin: 0;
}
.values-section .section-head .meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
}
.value-card {
  padding: 36px 28px 40px;
  border-right: 1px solid var(--line);
  min-height: 320px;
}
.value-card:last-child { border-right: 0; }
.value-card__num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
  color: var(--muted);
  margin-bottom: 32px;
}
.value-card h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 24px;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0;
}
.value-card p {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  margin: 16px 0 0 0;
}
@media (max-width: 900px) {
  .values-section { padding: 64px 24px; }
  .values-grid { grid-template-columns: repeat(2, 1fr); }
  .value-card:nth-child(2) { border-right: 0; }
  .value-card { min-height: 0; border-bottom: 1px solid var(--line); }
  .value-card:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 540px) {
  .values-grid { grid-template-columns: 1fr; }
  .value-card { border-right: 0; border-bottom: 1px solid var(--line); }
  .value-card:last-child { border-bottom: 0; }
}

/* Team — 3-col grid */
.team-section {
  padding: 140px var(--gutter);
  border-bottom: 1px solid var(--line);
}
.team-section .section-head { margin-bottom: 56px; }
.team-section .section-head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 56px;
  letter-spacing: -0.02em;
  margin: 0;
}
.team-section .section-head .blurb {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--muted);
  max-width: 280px;
  text-align: right;
  margin: 0;
  line-height: 1.5;
}
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 32px;
  row-gap: 56px;
}
.team-member__portrait {
  width: 100%;
  aspect-ratio: 4 / 3;          /* team headshots are 500x375 landscape */
  overflow: hidden;
  background: var(--softBg);
}
.team-member__portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-member__role {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 18px;
}
.team-member__name {
  font-family: var(--serif);
  font-size: 24px;
  letter-spacing: -0.01em;
  margin-top: 6px;
}
.team-member__short {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted);
  margin: 12px 0 0 0;
  max-width: 320px;
}
.team-footer {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  gap: 24px;
  flex-wrap: wrap;
}
.team-footer a {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg);
}
@media (max-width: 900px) {
  .team-section { padding: 64px 24px; }
  .team-grid { grid-template-columns: repeat(2, 1fr); column-gap: 20px; row-gap: 40px; }
  .team-section .section-head .blurb { text-align: left; max-width: none; }
}
@media (max-width: 540px) {
  .team-grid { grid-template-columns: 1fr; }
}

/* Testimonials — 3-col x 2-row grid, mirroring the values pattern.
   Each cell is a serif blockquote with a mono attribution row that links to
   the project it relates to. Relationship-driven (not project-driven) —
   the project pages carry their own house-specific quotes. */
.testimonials-section {
  padding: 140px var(--gutter);
  border-bottom: 1px solid var(--line);
}
.testimonials-section .section-head { margin-bottom: 56px; }
.testimonials-section .section-head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 56px;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.05;
}
.testimonials-section .section-head .blurb {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--muted);
  max-width: 320px;
  margin: 0;
  line-height: 1.55;
}
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
}
.testimonial-card {
  padding: 48px 28px 40px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 280px;
}
.testimonial-card:nth-child(3n) { border-right: 0; }
.testimonial-card:nth-last-child(-n+3) { border-bottom: 0; }
.testimonial-card blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.45;
  letter-spacing: -0.005em;
  margin: 0 0 28px;
  color: var(--fg);
}
.testimonial-card figcaption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.testimonial-card__name {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg);
}
.testimonial-card__project {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  transition: color 200ms ease;
}
.testimonial-card__project:hover { color: var(--fg); }
@media (max-width: 900px) {
  .testimonials-section { padding: 64px 24px; }
  .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonial-card:nth-child(3n) { border-right: 1px solid var(--line); }
  .testimonial-card:nth-child(2n) { border-right: 0; }
  .testimonial-card:nth-last-child(-n+3) { border-bottom: 1px solid var(--line); }
  .testimonial-card:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 540px) {
  .testimonials-grid { grid-template-columns: 1fr; }
  .testimonial-card { border-right: 0; border-bottom: 1px solid var(--line); }
  .testimonial-card:last-child { border-bottom: 0; }
}

/* Studio facts strip — 4 cells horizontal */
.studio-facts {
  /* Sit inside the site-wide 56px gutter like every other text section. */
  padding: 0 var(--gutter);
}
.studio-facts__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.studio-facts__cell {
  padding: 32px 28px;
  border-right: 1px solid var(--line);
}
/* Align outermost cell content with the page gutter, like .facts. */
.studio-facts__cell:first-child { padding-left: 0; }
.studio-facts__cell:last-child  { border-right: 0; padding-right: 0; }
.studio-facts__cell .l {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.studio-facts__cell .v {
  font-family: var(--serif);
  font-size: 32px;
  letter-spacing: -0.01em;
}
@media (max-width: 800px) {
  .studio-facts__grid { grid-template-columns: repeat(2, 1fr); }
  .studio-facts__cell:nth-child(2) { border-right: 0; }
  .studio-facts__cell:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

/* Studio Journal teaser — 3-col cards with top border */
.studio-journal {
  padding: 140px var(--gutter);
  border-bottom: 1px solid var(--line);
}
.studio-journal .section-head { margin-bottom: 48px; }
.studio-journal h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 48px;
  letter-spacing: -0.02em;
  margin: 0;
}
.studio-journal .more {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--fg);
}
.studio-journal__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.studio-journal__card {
  display: block;
  color: inherit;
}
.studio-journal__card-image {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  margin-bottom: 24px;
  border-top: 1px solid var(--line);
}
.studio-journal__card-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 500ms cubic-bezier(.2,.7,.2,1);
}
.studio-journal__card:hover .studio-journal__card-image img { transform: scale(1.02); }
.studio-journal__card .meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.studio-journal__card .title {
  font-family: var(--serif);
  font-size: 28px;
  letter-spacing: -0.015em;
  margin-top: 28px;
  max-width: 320px;
  line-height: 1.2;
}
@media (max-width: 900px) {
  .studio-journal { padding: 64px 24px; }
  .studio-journal h2 { font-size: 36px; }
  .studio-journal__grid { grid-template-columns: 1fr; gap: 24px; }
  .studio-journal__card .title { font-size: 22px; }
}

/* ==========================================================
   PROCESS PAGE
   ========================================================== */

.process-hero {
  padding: 140px var(--gutter) 80px;
  border-bottom: 1px solid var(--line);
}
.process-hero__inner { max-width: 1200px; margin: 0 auto; }
.process-hero .eyebrow { display: block; margin-bottom: 32px; }
.process-hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 120px;
  line-height: 0.96;
  letter-spacing: -0.035em;
  margin: 0;
  max-width: 1100px;
}
.process-hero h1 em { font-style: italic; display: block; }
.process-hero .lede {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  max-width: 640px;
  margin: 40px 0 0 0;
  color: var(--muted);
}
@media (max-width: 800px) {
  .process-hero { padding: 80px 24px 56px; }
  .process-hero h1 { font-size: 56px; }
}

/* Timeline strip — proportional duration bars across 8 stages.
   Animated reveal on scroll: the baseline draws left-to-right, the
   stages fade up in sequence, and the dots appear last. Calm and slow. */
.timeline-section {
  padding: 80px var(--gutter) 40px;
}
.timeline-section .eyebrow { display: block; margin-bottom: 24px; }
.timeline {
  position: relative;
  padding: 32px 0 16px;
}
.timeline__baseline {
  position: absolute;
  left: 0; right: 0; top: 56px;
  height: 1px;
  background: var(--line);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1200ms cubic-bezier(.2,.7,.2,1) 100ms;
}
.timeline.is-revealed .timeline__baseline { transform: scaleX(1); }
.timeline__grid {
  display: grid;
  /* Proportional widths per stage; longest is "On site" */
  grid-template-columns: 0.7fr 1fr 1.2fr 1.6fr 1.2fr 1fr 3fr 0.8fr;
  position: relative;
}
.timeline__stage {
  border-right: 1px solid var(--line);
  padding: 0 12px 24px 12px;
  position: relative;
  min-height: 150px;             /* room for 2-line titles + dot + duration */
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(.2,.7,.2,1), color 250ms;
}
/* First stage hugs the page gutter — no left padding, no faux border. */
.timeline__stage:first-child { padding-left: 0; }
.timeline__stage .t {
  min-height: 2.4em;             /* reserve 2 lines so everything below aligns */
}
.timeline.is-revealed .timeline__stage {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger reveal so the timeline reads left-to-right */
.timeline.is-revealed .timeline__stage:nth-child(1) { transition-delay: 300ms; }
.timeline.is-revealed .timeline__stage:nth-child(2) { transition-delay: 420ms; }
.timeline.is-revealed .timeline__stage:nth-child(3) { transition-delay: 540ms; }
.timeline.is-revealed .timeline__stage:nth-child(4) { transition-delay: 660ms; }
.timeline.is-revealed .timeline__stage:nth-child(5) { transition-delay: 780ms; }
.timeline.is-revealed .timeline__stage:nth-child(6) { transition-delay: 900ms; }
.timeline.is-revealed .timeline__stage:nth-child(7) { transition-delay: 1020ms; }
.timeline.is-revealed .timeline__stage:nth-child(8) { transition-delay: 1140ms; }

.timeline__stage:last-child { border-right: 0; }
.timeline__stage .n {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  /* Number sits above the baseline; bigger gap so the line below it
     has clear air before the stage title starts. */
  margin-bottom: 22px;
}
.timeline__stage .t {
  font-family: var(--serif);
  font-size: 16px;
  letter-spacing: -0.01em;
  line-height: 1.15;
  transition: color 250ms;
}
.timeline__stage .dot {
  position: absolute;
  top: 90px; left: -3px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--fg);
  transform: scale(0);
  transition: transform 350ms cubic-bezier(.2,.7,.2,1);
}
.timeline.is-revealed .timeline__stage:nth-child(1) .dot { transition-delay: 800ms; }
.timeline.is-revealed .timeline__stage:nth-child(2) .dot { transition-delay: 920ms; }
.timeline.is-revealed .timeline__stage:nth-child(3) .dot { transition-delay: 1040ms; }
.timeline.is-revealed .timeline__stage:nth-child(4) .dot { transition-delay: 1160ms; }
.timeline.is-revealed .timeline__stage:nth-child(5) .dot { transition-delay: 1280ms; }
.timeline.is-revealed .timeline__stage:nth-child(6) .dot { transition-delay: 1400ms; }
.timeline.is-revealed .timeline__stage:nth-child(7) .dot { transition-delay: 1520ms; }
.timeline.is-revealed .timeline__stage:nth-child(8) .dot { transition-delay: 1640ms; }
.timeline.is-revealed .timeline__stage .dot { transform: scale(1); }

.timeline__stage .dur {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-top: 56px;
}

/* Hover state: thicker dot, name a touch darker */
.timeline__stage:hover .dot { transform: scale(1.6); }
.timeline__stage:hover .t { color: var(--fg); }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .timeline__baseline,
  .timeline__stage,
  .timeline__stage .dot {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
}
@media (max-width: 900px) {
  .timeline-section { padding: 56px 24px 24px; }
  .timeline__grid { grid-template-columns: 1fr 1fr; gap: 0; }
  .timeline__baseline { display: none; }
  .timeline__stage { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 16px 12px; min-height: 0; }
  .timeline__stage:nth-child(2n) { border-right: 0; }
  .timeline__stage .dot { display: none; }
  .timeline__stage .dur { margin-top: 8px; }
}

/* Summary grid — 4x2 stage cards */
.stages-summary {
  padding: 40px var(--gutter) 120px;
  border-bottom: 1px solid var(--line);
}
.stages-summary__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
}
.stage-card {
  padding: 28px 24px 32px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  min-height: 200px;
}
.stage-card:nth-child(4n) { border-right: 0; }
.stage-card:nth-last-child(-n+4) { border-bottom: 0; }
.stage-card__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.stage-card .t {
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: -0.015em;
  margin-top: 18px;
  line-height: 1.15;
}
.stage-card .dur {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--muted);
  margin-top: 8px;
}
.stage-card .one {
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.6;
  margin: 16px 0 0 0;
  color: var(--fg);
}
@media (max-width: 1000px) {
  .stages-summary { padding: 32px 24px 64px; }
  .stages-summary__grid { grid-template-columns: repeat(2, 1fr); }
  .stage-card:nth-child(4n) { border-right: 1px solid var(--line); }
  .stage-card:nth-child(2n) { border-right: 0; }
  .stage-card:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 540px) {
  .stages-summary__grid { grid-template-columns: 1fr; }
  .stage-card { border-right: 0; }
}

/* Detail blocks — one row per stage */
.stages-detail {
  padding: 120px var(--gutter);
  border-bottom: 1px solid var(--line);
}
.stages-detail .section-head { margin-bottom: 64px; }
.stages-detail .section-head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 56px;
  letter-spacing: -0.02em;
  margin: 0;
}
.stages-detail .section-head .meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.stage-row {
  display: grid;
  grid-template-columns: 180px 1fr 1fr 1fr;
  gap: 48px;
  padding: 40px 0;
  border-top: 1px solid var(--line);
  align-items: flex-start;
}
.stage-row:last-child { border-bottom: 1px solid var(--line); }
.stage-row__lhs .num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 16px;
}
.stage-row__lhs .name {
  font-family: var(--serif);
  font-size: 28px;
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.stage-row__lhs .meta {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--muted);
  margin-top: 12px;
}
.stage-row__col .label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.stage-row__col ul {
  margin: 0; padding: 0; list-style: none;
}
.stage-row__col ul li {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  padding: 6px 0;
  border-bottom: 1px dotted var(--line);
}
.stage-row__col p {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 1000px) {
  .stages-detail { padding: 64px 24px; }
  .stages-detail .section-head h2 { font-size: 36px; }
  .stage-row { grid-template-columns: 1fr; gap: 24px; }
}

/* Fees */
.fees-section {
  padding: 140px var(--gutter);
  border-bottom: 1px solid var(--line);
}
.fees-section__grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 80px;
}
.fees-section__lhs .eyebrow { display: block; margin-bottom: 16px; }
.fees-section__lhs h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 36px;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
}
.fees-lead {
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.45;
  margin: 0;
  letter-spacing: -0.005em;
  max-width: 720px;
}
.fees-breakdown {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 56px;
}
.fees-breakdown__cell {
  padding: 24px 0 0;
  border-top: 1px solid var(--line);
}
.fees-breakdown__cell .l {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.fees-breakdown__cell .h {
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: -0.01em;
}
.fees-breakdown__cell p {
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
  margin: 10px 0 0 0;
}
@media (max-width: 1000px) {
  .fees-section { padding: 64px 24px; }
  .fees-section__grid { grid-template-columns: 1fr; gap: 32px; }
  .fees-lead { font-size: 20px; }
  .fees-breakdown { grid-template-columns: 1fr; gap: 24px; }
}

/* FAQ */
.faq-section {
  padding: 140px var(--gutter);
  border-bottom: 1px solid var(--line);
}
.faq-section__grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 80px;
}
.faq-section__lhs .eyebrow { display: block; margin-bottom: 16px; }
.faq-section__lhs h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 36px;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
}
.faq-row {
  padding: 28px 0;
  border-top: 1px solid var(--line);
}
.faq-row:last-child { border-bottom: 1px solid var(--line); }
.faq-row__grid {
  display: grid;
  grid-template-columns: 40px 1fr 1fr;
  gap: 32px;
  align-items: baseline;
}
.faq-row .q-no {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.faq-row .q {
  font-family: var(--serif);
  font-size: 20px;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.faq-row .a {
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.65;
  margin: 0;
  color: var(--fg);
}
@media (max-width: 1000px) {
  .faq-section { padding: 64px 24px; }
  .faq-section__grid { grid-template-columns: 1fr; gap: 32px; }
  .faq-row__grid { grid-template-columns: 40px 1fr; gap: 16px; }
  .faq-row .a { grid-column: 1 / -1; margin-top: 12px; }
}

/* ==========================================================
   PRESS & AWARDS PAGE
   ========================================================== */

.press-hero {
  padding: 140px var(--gutter) 80px;
  border-bottom: 1px solid var(--line);
}
.press-hero__inner { max-width: 1200px; margin: 0 auto; }
.press-hero .eyebrow { display: block; margin-bottom: 32px; }
.press-hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 120px;
  line-height: 0.96;
  letter-spacing: -0.035em;
  margin: 0;
  max-width: 1100px;
}
.press-hero h1 em { font-style: italic; display: block; }
@media (max-width: 800px) {
  .press-hero { padding: 80px 24px 56px; }
  .press-hero h1 { font-size: 56px; }
}

/* Recognition stat strip */
.press-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--line);
}
.press-stats__cell {
  padding: 36px 28px;
  border-right: 1px solid var(--line);
}
.press-stats__cell:last-child { border-right: 0; }
.press-stats__cell .l {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
.press-stats__cell .v {
  font-family: var(--serif);
  font-size: 40px;
  letter-spacing: -0.02em;
  line-height: 1;
}
.press-stats__cell .sub {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--muted);
  margin-top: 10px;
}
@media (max-width: 800px) {
  .press-stats { grid-template-columns: repeat(2, 1fr); }
  .press-stats__cell:nth-child(2) { border-right: 0; }
  .press-stats__cell:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

/* Awards table */
.awards-section {
  padding: 120px var(--gutter);
  border-bottom: 1px solid var(--line);
}
.awards-section .section-head { margin-bottom: 48px; }
.awards-section .section-head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 56px;
  letter-spacing: -0.02em;
  margin: 0;
}
.awards-section .section-head .meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.awards-table__head {
  display: grid;
  grid-template-columns: 60px 1.4fr 1.6fr 1fr 120px;
  gap: 24px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.awards-table__head > span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.awards-table__head .status-col { text-align: right; }
.awards-row {
  display: grid;
  grid-template-columns: 60px 1.4fr 1.6fr 1fr 120px;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.awards-row .yr {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
}
.awards-row .body {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  letter-spacing: -0.005em;
}
.awards-row .title {
  font-family: var(--sans);
  font-size: 15px;
}
.awards-row .cat {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--muted);
}
.awards-row .status-wrap { text-align: right; }
.awards-row .status {
  display: inline-block;
  padding: 4px 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  color: var(--fg);
}
.awards-row .status.win {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}

/* Universal reveal-on-scroll utility, applied by site.js to major content
   blocks on every page. Items fade up as they cross into the viewport,
   with a 60ms cascade when several arrive together. Disabled for users
   with prefers-reduced-motion. */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 700ms ease,
    transform 700ms cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.reveal-on-scroll.is-in {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Reveal-on-scroll for awards rows.
   Row fades up; the status badge lands a beat later (scale + fade). */
.awards-row {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 600ms ease, transform 600ms cubic-bezier(.2,.7,.2,1);
}
.awards-row.is-in {
  opacity: 1;
  transform: translateY(0);
}
.awards-row .status {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 450ms ease 250ms, transform 450ms cubic-bezier(.2,.7,.2,1) 250ms;
}
.awards-row.is-in .status {
  opacity: 1;
  transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .awards-row, .awards-row .status {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
@media (max-width: 900px) {
  .awards-section { padding: 64px 24px; }
  .awards-section .section-head h2 { font-size: 36px; }
  .awards-table__head { display: none; }
  .awards-row {
    grid-template-columns: 60px 1fr 80px;
    gap: 12px;
    row-gap: 6px;
    padding: 16px 0;
  }
  .awards-row .body  { grid-column: 1 / -1; font-size: 16px; }
  .awards-row .title { grid-column: 1 / 3; font-size: 14px; }
  .awards-row .cat   { display: none; }
}

/* Press list — grouped by year */
.press-section {
  padding: 120px var(--gutter);
  border-bottom: 1px solid var(--line);
}
.press-section .section-head { margin-bottom: 48px; }
.press-section .section-head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 56px;
  letter-spacing: -0.02em;
  margin: 0;
}
.press-section .section-head .meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.press-year {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 48px;
  padding-top: 56px;
  border-top: 1px solid var(--line);
  margin-bottom: 8px;
}
.press-year__num {
  font-family: var(--serif);
  font-size: 64px;
  letter-spacing: -0.02em;
  line-height: 1;
}
.press-row {
  display: grid;
  grid-template-columns: 220px 1fr 60px;
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
  color: inherit;
}
/* No double-line between year groups: drop the bottom border on the
   last row of each year, since the next .press-year supplies a top border. */
.press-year .press-row:last-child { border-bottom: 0; }

/* Reveal-on-scroll for the big year numeral + press rows */
.press-year__num,
.press-row {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 600ms ease, transform 600ms cubic-bezier(.2,.7,.2,1);
}
.press-year__num.is-in,
.press-row.is-in {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .press-year__num, .press-row {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
.press-row .src {
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
  letter-spacing: -0.005em;
}
.press-row .proj {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--fg);
}
.press-row .kind {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: right;
}
@media (max-width: 900px) {
  .press-section { padding: 64px 24px; }
  .press-section .section-head h2 { font-size: 36px; }
  .press-year { grid-template-columns: 1fr; gap: 20px; padding-top: 32px; }
  .press-year__num { font-size: 44px; }
  .press-row { grid-template-columns: 1fr auto; row-gap: 4px; padding: 14px 0; }
  .press-row .src { font-size: 17px; }
  .press-row .proj { grid-column: 1; }
  .press-row .kind { grid-column: 2; grid-row: 1; }
}

/* As featured in — typographic outlet wall */
.outlets-section {
  padding: 140px var(--gutter);
  border-bottom: 1px solid var(--line);
}
.outlets-section .eyebrow {
  display: block;
  text-align: center;
  margin-bottom: 32px;
}
.outlets-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.outlet {
  padding: 36px 16px;
  text-align: center;
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
  font-family: var(--serif);
  font-style: italic;
  font-size: 28px;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.outlet:nth-child(4n) { border-right: 0; }
.outlet:nth-last-child(-n+4) { border-bottom: 1px solid var(--line); }
@media (max-width: 900px) {
  .outlets-section { padding: 64px 24px; }
  .outlets-grid { grid-template-columns: repeat(2, 1fr); }
  .outlet { font-size: 20px; padding: 24px 12px; }
  .outlet:nth-child(2n) { border-right: 0; }
  .outlet:nth-child(4n) { border-right: 1px solid var(--line); }
  .outlet:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
}

/* Press kit */
.press-kit {
  padding: 120px var(--gutter);
  border-bottom: 1px solid var(--line);
}
.press-kit__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: flex-start;
}
.press-kit__lhs .eyebrow { display: block; margin-bottom: 16px; }
.press-kit__lhs h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 48px;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
}
.press-kit__lhs p {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  margin: 28px 0 0 0;
  max-width: 460px;
}
.press-kit__rhs { border-top: 1px solid var(--line); }
.press-kit__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
  color: inherit;
}
.press-kit__row .name {
  font-family: var(--serif);
  font-size: 20px;
  letter-spacing: -0.005em;
}
.press-kit__row .size {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.press-kit__row .dl {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg);
}
.press-kit__contact { margin-top: 32px; }
.press-kit__contact .l {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.press-kit__contact .email {
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: -0.005em;
}
.press-kit__contact .phone {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
}
@media (max-width: 900px) {
  .press-kit { padding: 64px 24px; }
  .press-kit__grid { grid-template-columns: 1fr; gap: 40px; }
  .press-kit__lhs h2 { font-size: 32px; }
}

/* ==========================================================
   CONTACT PAGE
   ========================================================== */

.contact-hero {
  padding: 140px var(--gutter) 80px;
  border-bottom: 1px solid var(--line);
}
.contact-hero__inner { max-width: 1200px; margin: 0 auto; }
.contact-hero .eyebrow { display: block; margin-bottom: 32px; }
.contact-hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 120px;
  line-height: 0.96;
  letter-spacing: -0.035em;
  margin: 0;
  max-width: 1100px;
}
.contact-hero h1 em { font-style: italic; display: block; }
.contact-hero .lede {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  max-width: 640px;
  margin: 40px 0 0 0;
  color: var(--muted);
}
@media (max-width: 800px) {
  .contact-hero { padding: 80px 24px 56px; }
  .contact-hero h1 { font-size: 56px; }
}

/* Quick contacts strip — 4 cells */
.quick-contacts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--line);
}
.quick-contacts__cell {
  padding: 36px 28px;
  border-right: 1px solid var(--line);
}
.quick-contacts__cell:last-child { border-right: 0; }
.quick-contacts__cell .l {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
.quick-contacts__cell .v {
  font-family: var(--serif);
  font-size: 18px;
  letter-spacing: -0.005em;
  line-height: 1.25;
  display: block;
  color: inherit;
  text-decoration: none;
  transition: opacity 200ms ease;
}
a.quick-contacts__cell .v,
.quick-contacts__cell a.v:hover { opacity: 0.55; }
.quick-contacts__cell .sub {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--muted);
  margin-top: 10px;
}
@media (max-width: 800px) {
  .quick-contacts { grid-template-columns: repeat(2, 1fr); }
  .quick-contacts__cell:nth-child(2) { border-right: 0; }
  .quick-contacts__cell:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

/* Enquiry form */
.enquiry-section {
  padding: 140px var(--gutter) 60px;
  border-bottom: 1px solid var(--line);
}
.enquiry-section__grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 80px;
  align-items: flex-start;
}
.enquiry-section__lhs {
  position: sticky;
  /* Sticks lower in the viewport so the page content above it
     (eyebrow, lede, etc.) remains visible while the form scrolls. */
  top: 160px;
  align-self: start;
}
.enquiry-section__lhs .eyebrow { display: block; margin-bottom: 16px; }
.enquiry-section__lhs h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 44px;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
}
.enquiry-section__lhs p {
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--muted);
  margin: 24px 0 0 0;
  max-width: 280px;
}
.enquiry-section__lhs .alt {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.enquiry-section__lhs .alt .l {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.enquiry-section__lhs .alt .v {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--fg);
  text-decoration: none;
  transition: opacity 200ms ease;
}
.enquiry-section__lhs .alt a.v:hover { opacity: 0.55; }

.enquiry-form { max-width: 720px; }
.enquiry-form__section {
  padding: 48px 0 24px;
  border-top: 1px solid var(--line);
}
.enquiry-form__section:first-child { padding-top: 0; border-top: 0; }
.enquiry-form__section .label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 18px;
  display: block;
}
.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.field {
  display: block;
  padding: 20px 0;
}
.field__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
  display: block;
}
.field__label .req { margin-left: 6px; color: var(--muted); }
.field__input,
.field__textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--fg);
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: -0.005em;
  color: var(--fg);
  padding: 4px 0 10px;
  outline: none;
}
.field__input::placeholder,
.field__textarea::placeholder { color: var(--muted); }
.field__textarea {
  resize: vertical;
  min-height: 140px;
  font-size: 20px;
  line-height: 1.5;
  font-family: var(--serif);
}
.field__hint {
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--muted);
  margin: 12px 0 0 0;
  line-height: 1.5;
}

/* Chip row inside the form */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.chip-form {
  padding: 10px 16px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 13px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  transition: background 200ms, color 200ms;
}
.chip-form:hover { background: var(--softBg); }
.chip-form.is-active { background: var(--fg); color: var(--bg); border-color: var(--fg); }

/* Attachment dropzone */
.dropzone {
  border: 1px dashed var(--line);
  padding: 28px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  transition: border-color 180ms ease, background-color 180ms ease;
}
.dropzone.is-dragover {
  border-color: var(--fg);
  border-style: solid;
  background: rgba(26, 25, 22, 0.04);
}
.dropzone.is-dragover .dropzone__title { color: var(--fg); }
.dropzone__title {
  font-family: var(--serif);
  font-size: 20px;
  letter-spacing: -0.005em;
}
.dropzone__hint {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
}
.dropzone__btn {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg);
  cursor: pointer;
}

/* Submit row */
.submit-row {
  padding: 56px 0 24px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.submit-row p {
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--muted);
  margin: 0;
  max-width: 360px;
  line-height: 1.55;
}
.submit-row p a { text-decoration: underline; }
.submit-row .send {
  padding: 20px 36px;
  background: var(--fg);
  color: var(--bg);
  border: 0;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
@media (max-width: 900px) {
  .enquiry-section { padding: 64px 24px; }
  .enquiry-section__grid { grid-template-columns: 1fr; gap: 40px; }
  .enquiry-section__lhs { position: static; }
  .enquiry-section__lhs h2 { font-size: 32px; }
  .field-grid { grid-template-columns: 1fr; gap: 0; }
}

/* Studio + map */
.studio-block {
  padding: 120px var(--gutter);
  border-bottom: 1px solid var(--line);
}
.studio-block__grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 64px;
  align-items: flex-start;
}
.studio-block .eyebrow { display: block; margin-bottom: 16px; }
.studio-block h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 48px;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
}
.studio-block h2 em { font-style: italic; display: block; }
.studio-block .address {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  margin: 28px 0 0 0;
}
.studio-block .address .quiet { color: var(--muted); }
.studio-block__details {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.studio-block__details .l {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.studio-block__details .v {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.65;
  color: inherit;
  text-decoration: none;
  transition: opacity 200ms ease;
}
.studio-block__details a.v:hover { opacity: 0.55; }

.studio-map {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--softBg);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
}
.studio-map iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  /* Strip Google's colour so the map sits inside the bone palette.
     Slight contrast + brightness lifts the streets back up. */
  filter: grayscale(1) contrast(1.05) brightness(1.04);
  /* The whole block is the link; map itself stays still. */
  pointer-events: none;
  transition: filter 250ms ease;
}
.studio-map:hover iframe {
  filter: grayscale(1) contrast(1.12) brightness(1.0);
}
.studio-map__pin {
  position: absolute;
  left: 55%;
  top: 43%;
  transform: translate(-50%, -100%);
  pointer-events: none;
}
.studio-map__pin .pin-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.studio-map__pin .tag {
  background: var(--fg);
  color: var(--bg);
  padding: 6px 10px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.studio-map__pin .stem { width: 1px; height: 14px; background: var(--fg); }
.studio-map__pin .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--fg); margin-top: -5px; }
.studio-map__scale {
  position: absolute;
  left: 12px; bottom: 10px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
@media (max-width: 900px) {
  .studio-block { padding: 64px 24px; }
  .studio-block__grid { grid-template-columns: 1fr; gap: 40px; }
  .studio-block h2 { font-size: 32px; }
}

/* Transport row */
.transport {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--line);
}
.transport__cell {
  padding: 28px 24px;
  border-right: 1px solid var(--line);
}
.transport__cell:last-child { border-right: 0; }
.transport__cell .l {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.transport__cell .v {
  font-family: var(--serif);
  font-size: 18px;
  letter-spacing: -0.005em;
}
.transport__cell .sub {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--muted);
  margin-top: 8px;
  line-height: 1.5;
}
@media (max-width: 800px) {
  .transport { grid-template-columns: repeat(2, 1fr); }
  .transport__cell:nth-child(2) { border-right: 0; }
  .transport__cell:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

/* Before you send micro-FAQ */
.before-send {
  padding: 140px var(--gutter);
  border-bottom: 1px solid var(--line);
}
.before-send__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 48px;
}
.before-send__head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 32px;
  letter-spacing: -0.015em;
  margin: 0;
}
.before-send__head .meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.before-send__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.before-send__card {
  border-top: 1px solid var(--line);
  padding-top: 24px;
}
.before-send__card .qno {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
.before-send__card .q {
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.before-send__card .a {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
  margin: 14px 0 0 0;
}
@media (max-width: 900px) {
  .before-send { padding: 64px 24px; }
  .before-send__grid { grid-template-columns: 1fr; gap: 24px; }
}

/* ==========================================================
   JOURNAL — index page
   ========================================================== */

.journal-hero {
  padding: 140px var(--gutter) 80px;
  border-bottom: 1px solid var(--line);
}
.journal-hero__inner { max-width: 1200px; margin: 0 auto; }
.journal-hero .eyebrow { display: block; margin-bottom: 32px; }
.journal-hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 120px;
  line-height: 0.96;
  letter-spacing: -0.035em;
  margin: 0;
  max-width: 1100px;
}
.journal-hero h1 em { font-style: italic; display: block; }
.journal-hero .lede {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  max-width: 640px;
  margin: 40px 0 0 0;
  color: var(--muted);
}
@media (max-width: 800px) {
  .journal-hero { padding: 80px 24px 56px; }
  .journal-hero h1 { font-size: 56px; }
}

/* Lead article — image + content split */
.journal-lead {
  display: block;
  color: inherit;
}
.journal-lead__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}
.journal-lead__image { position: relative; }
.journal-lead__image img {
  width: 100%; height: 100%;
  object-fit: cover;            /* fills the matching content height */
  display: block;
}
.journal-lead__content {
  padding: 64px 56px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.journal-lead__content .eyebrow {
  display: block;
  margin-bottom: 24px;
}
.journal-lead__content h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 56px;
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0;
}
.journal-lead__deck {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.45;
  margin: 28px 0 0 0;
}
.journal-lead__foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 48px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.journal-lead__foot .read { color: var(--fg); }
@media (max-width: 900px) {
  .journal-lead__grid { grid-template-columns: 1fr; }
  .journal-lead__image img { height: auto; aspect-ratio: 4/3; }
  .journal-lead__content { padding: 40px 24px; }
  .journal-lead__content h2 { font-size: 36px; }
}

/* Index grid — 3 col cards */
.journal-index {
  padding: 120px var(--gutter);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.journal-index__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 48px;
}
.journal-index__head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 32px;
  letter-spacing: -0.015em;
  margin: 0;
}
.journal-index__head .meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.journal-index__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 32px;
  row-gap: 64px;
}
.journal-card {
  color: inherit;
  display: block;
}
.journal-card__image {
  width: 100%;
  aspect-ratio: 16/10;
  overflow: hidden;
  margin-bottom: 16px;
}
.journal-card__image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 500ms cubic-bezier(.2,.7,.2,1);
}
.journal-card:hover .journal-card__image img { transform: scale(1.02); }
/* Fallback: cards/leads that opt out of an image via the .no-image class
   (set by the on-load JS guard for too-low-res sources) collapse the
   image frame and let the text fill the slot. */
.journal-card.no-image .journal-card__image { display: none; }
.journal-lead.no-image .journal-lead__image { display: none; }
.journal-lead.no-image .journal-lead__grid { grid-template-columns: 1fr; }
.journal-lead.no-image .journal-lead__content { padding: 80px 56px; }
.journal-card__meta {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.journal-card__title {
  font-family: var(--serif);
  font-size: 24px;
  letter-spacing: -0.015em;
  margin-top: 12px;
  line-height: 1.15;
}
.journal-card__deck {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
  margin: 10px 0 0 0;
}
@media (max-width: 900px) {
  .journal-index { padding: 64px 24px; }
  .journal-index__grid { grid-template-columns: 1fr; row-gap: 40px; }
}

/* ============= Journal archive page =============
   Dense alphabetised index of every old (image-less) entry. Mirrors the
   side-headed pattern used elsewhere on the site: a big serif letter on
   the left, a column of titles on the right. */
.archive-hero {
  padding: 140px var(--gutter) 80px;
  border-bottom: 1px solid var(--line);
}
.archive-hero__inner { max-width: 1200px; margin: 0 auto; }
.archive-hero .eyebrow { display: block; margin-bottom: 32px; }
.archive-hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 88px;
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin: 0;
  max-width: 1100px;
}
.archive-hero h1 em { font-style: italic; display: block; }
.archive-hero .lede {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  max-width: 640px;
  margin: 32px 0 0 0;
  color: var(--muted);
}
.archive-section {
  padding: 80px var(--gutter) 120px;
}
.archive-letter {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 48px;
  padding: 40px 0;
  border-bottom: 1px solid var(--line);
}
.archive-letter:first-child { border-top: 1px solid var(--line); }
.archive-letter__num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 72px;
  line-height: 1;
  color: var(--fg);
  letter-spacing: -0.02em;
}
.archive-letter__list {
  display: flex;
  flex-direction: column;
}
.archive-row {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  color: inherit;
  transition: color 200ms ease;
}
.archive-row:last-child { border-bottom: 0; }
.archive-row:hover { color: var(--muted); }
.archive-row__title {
  font-family: var(--serif);
  font-size: 18px;
  letter-spacing: -0.005em;
  line-height: 1.35;
}
@media (max-width: 800px) {
  .archive-hero { padding: 80px 24px 56px; }
  .archive-hero h1 { font-size: 44px; }
  .archive-section { padding: 48px 24px 80px; }
  .archive-letter { grid-template-columns: 1fr; gap: 16px; padding: 32px 0; }
  .archive-letter__num { font-size: 48px; }
  .archive-row__title { font-size: 16px; }
}

/* Newsletter block */
.newsletter-section {
  padding: 120px var(--gutter);
  border-bottom: 1px solid var(--line);
}
.newsletter-section__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: flex-end;
}
.newsletter-section__lhs .eyebrow { display: block; margin-bottom: 16px; }
.newsletter-section__lhs h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 48px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
}
.newsletter-section__lhs h2 em { font-style: italic; }
.newsletter-section__lhs p {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  margin: 20px 0 0 0;
  max-width: 420px;
}
.newsletter-section__form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: end;
  border-bottom: 1px solid var(--fg);
  padding-bottom: 10px;
}
.newsletter-section__form input {
  background: transparent;
  border: 0;
  font-family: var(--sans);
  font-size: 18px;
  color: var(--fg);
  outline: none;
  padding: 4px 0;
}
.newsletter-section__form input::placeholder { color: var(--muted); }
.newsletter-section__form button {
  background: transparent;
  border: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg);
  cursor: pointer;
}
.newsletter-section__small {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--muted);
  margin-top: 14px;
}
@media (max-width: 900px) {
  .newsletter-section { padding: 64px 24px; }
  .newsletter-section__grid { grid-template-columns: 1fr; gap: 40px; }
  .newsletter-section__lhs h2 { font-size: 32px; }
}

/* ==========================================================
   JOURNAL — article page
   ========================================================== */

.article-meta-strip {
  padding: 22px var(--gutter);
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.article-meta-strip .now { color: var(--fg); }
.article-meta-strip .sep { margin: 0 10px; opacity: 0.4; }

.article-hero {
  max-width: 820px;
  margin: 0 auto;
  padding: 120px var(--gutter) 60px;
  text-align: center;
}
.article-hero .eyebrow { display: block; margin-bottom: 32px; }
.article-hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 72px;
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0;
}
.article-hero .deck {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.45;
  margin: 32px 0 0 0;
}
.article-hero .meta-row {
  margin-top: 40px;
  display: flex;
  justify-content: center;
  gap: 16px;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
@media (max-width: 800px) {
  .article-hero { padding: 64px 24px 40px; }
  .article-hero h1 { font-size: 40px; }
}

/* Single editorial image used to break up a text-heavy page (Process,
   Awards & Press). Sits between sections, with the standard gutter and
   a mono caption row below. */
.page-feature {
  padding: 80px var(--gutter);
  border-bottom: 1px solid var(--line);
}
.page-feature figure {
  max-width: 1280px;
  margin: 0 auto;
}
.page-feature img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.page-feature figcaption {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  gap: 24px;
}

/* Triple variant: three landscape project tiles side by side. Used on the
   Awards & Press page to show the most-awarded work without taking the
   full vertical space a single hero image needs. */
.page-feature--triple { padding-top: 60px; padding-bottom: 60px; }
.page-feature--triple .page-feature__triple-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.page-feature__cell {
  display: block;
  color: inherit;
  text-decoration: none;
}
.page-feature__cell figure { margin: 0; max-width: none; }
.page-feature__cell img {
  aspect-ratio: 4 / 3;
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  transition: transform 500ms cubic-bezier(.2,.7,.2,1);
}
.page-feature__cell:hover img { transform: scale(1.02); }
.page-feature__cell figcaption {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  gap: 16px;
}
.page-feature__cell figcaption .meta { color: var(--muted); }
@media (max-width: 900px) {
  .page-feature--triple .page-feature__triple-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* Split variant: image on one side, an explanatory text block on the
   other, both inside the same 1280px cap. Used on Process to give the
   studio shot a bit of context. */
.page-feature--split .page-feature__grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 64px;
  align-items: stretch;
}
.page-feature--split figure { max-width: none; margin: 0; }
.page-feature--split img { aspect-ratio: 4 / 3; height: 100%; }
.page-feature--split .page-feature__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px 0;
}
.page-feature--split .page-feature__text .eyebrow {
  display: block;
  margin-bottom: 20px;
}
.page-feature--split .page-feature__text h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 24px;
}
.page-feature--split .page-feature__text p {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
  margin: 0 0 14px;
}

@media (max-width: 800px) {
  .page-feature { padding: 48px 24px; }
  .page-feature img { aspect-ratio: 4 / 3; }
  .page-feature--split .page-feature__grid { grid-template-columns: 1fr; gap: 24px; }
  .page-feature--split .page-feature__text h3 { font-size: 28px; }
}

.article-lead-image {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.article-lead-image img { width: 100%; height: auto; display: block; }
.article-lead-image .meta {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.article-body {
  max-width: 680px;
  margin: 0 auto;
  padding: 120px var(--gutter);
}
.article-body p {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.75;
  margin: 0 0 1.4em 0;
}
.article-body p.drop-cap::first-letter {
  font-family: var(--serif);
  font-size: 68px;
  line-height: 0.85;
  float: left;
  margin: 6px 14px 0 0;
  letter-spacing: -0.02em;
}
.article-body blockquote {
  margin: 56px 0;
  padding: 28px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.article-body blockquote p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 28px;
  line-height: 1.35;
  letter-spacing: -0.005em;
  margin: 0;
}
.article-body figure { margin: 56px 0; }
.article-body figure img,
.article-body p img,
.article-body img {
  /* Journal-archive images are often small SEO thumbnails. Cap their
     rendered size so a 300px-wide image isn't stretched to fit the column;
     it sits at natural size inside a sensible max. Anything below the cap
     renders at native width, anything bigger is constrained. */
  display: block;
  max-width: 400px;
  width: auto;
  height: auto;
  margin: 32px auto;
}
.article-body figure figcaption {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 800px) {
  .article-body { padding: 64px 24px; }
  .article-body p { font-size: 16px; }
  .article-body blockquote p { font-size: 20px; }
}

.article-footer {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 var(--gutter) 120px;
}
.article-footer__row {
  padding: 32px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: baseline;
}
.article-footer__row .by {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.article-footer__row .name {
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: -0.005em;
}
.article-footer__row .role {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
}
.article-footer__row .share {
  display: flex;
  gap: 18px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
@media (max-width: 700px) {
  .article-footer__row { grid-template-columns: 1fr; gap: 16px; }
}

/* Read next — 3 col, no images sometimes */
.read-next {
  padding: 0 var(--gutter) 140px;
  max-width: 1280px;
  margin: 0 auto;
  border-bottom: 1px solid var(--line);
}
.read-next__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 32px;
}
.read-next__head h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 28px;
  letter-spacing: -0.015em;
  margin: 0;
}
.read-next__head .more {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.read-next__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.read-next__card {
  display: block;
  color: inherit;
}
.read-next__card .image { display: none; } /* journal is text-only */
.read-next__card .meta {
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.read-next__card .title {
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: -0.01em;
  margin-top: 8px;
  line-height: 1.15;
}
@media (max-width: 900px) {
  .read-next__grid { grid-template-columns: 1fr; gap: 40px; }
}

/* Wide feature image, used to break up text-led pages
   (Process, Press, etc.). Runs full shell width, natural aspect. */
.feature-image {
  margin: 0;
  border-bottom: 1px solid var(--line);
}
.feature-image img {
  width: 100%;
  height: auto;
  display: block;
}
.feature-image figcaption {
  padding: 14px var(--gutter);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ============= Homes index page ============= */
.homes-hero {
  padding: 140px var(--gutter) 80px;
  border-bottom: 1px solid var(--line);
}
.homes-hero__inner { max-width: 1200px; margin: 0 auto; }
.homes-hero .eyebrow { display: block; margin-bottom: 28px; }
.homes-hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 104px;
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: 0;
}
.homes-hero h1 em { font-style: italic; display: block; }
.homes-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.homes-stats__cell .l {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.homes-stats__cell .v {
  font-family: var(--serif);
  font-size: 36px;
  margin-top: 6px;
  letter-spacing: -0.01em;
}

/* Filter chip row */
.filter-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 24px var(--gutter);
  border-bottom: 1px solid var(--line);
  gap: 24px;
  flex-wrap: wrap;
}
.filter-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  padding: 8px 14px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 12px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  transition: background 200ms, color 200ms;
}
.chip:hover { background: var(--softBg); }
.chip.is-active { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.filter-meta {
  display: flex;
  gap: 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  flex-wrap: wrap;
}

/* Larger row treatment for the Homes index (vs the homepage Recent Work) */
.project-row--index .pr-content { padding: 72px 56px; }
.project-row--index .pr-title { font-size: 48px; letter-spacing: -0.015em; }
/* Homes index: alternation is JS-driven (because of filtering) so override
   the generic :nth-child rule used on the homepage. */
.project-row--index .pr-image   { order: 1; }
.project-row--index .pr-content { order: 2; }
.project-row--index.row-flip .pr-image   { order: 2; }
.project-row--index.row-flip .pr-content { order: 1; }
.project-row--index .pr-body { font-size: 15px; line-height: 1.65; }
.project-row--index .pr-foot {
  border-top: 1px solid var(--line);
  padding-top: 18px;
  margin-top: 32px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.project-row--index .pr-foot .read { font-size: 13px; }

@media (max-width: 800px) {
  .homes-hero { padding: 80px 24px 56px; }
  .homes-hero h1 { font-size: 56px; }
  .homes-stats { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .filter-row { flex-direction: column; align-items: flex-start; gap: 16px; padding: 20px 24px; }
  .project-row--index .pr-content { padding: 40px 24px; }
  .project-row--index .pr-title { font-size: 32px; }
  /* Force text-on-top, image-below for every tile on mobile, regardless
     of the JS-driven row-flip alternation used on desktop. */
  .project-row--index .pr-image,
  .project-row--index.row-flip .pr-image   { order: 2; }
  .project-row--index .pr-content,
  .project-row--index.row-flip .pr-content { order: 1; }
}

/* ============= Lightbox =============
   Editorial overlay: charcoal backdrop, image dead-centre, hairline
   controls. No shadows, no rounded corners. Esc / arrows / backdrop
   close. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(10, 9, 8, 0.94);
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 220ms ease-out;
}
.lightbox.is-open { display: flex; opacity: 1; }
.lightbox__stage {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 92vw;
  max-height: 90vh;
}
.lightbox__img {
  display: block;
  max-width: 92vw;
  max-height: 82vh;
  width: auto;
  height: auto;
  object-fit: contain;
  cursor: default;
}
.lightbox__caption {
  margin-top: 18px;
  color: rgba(246, 243, 236, 0.55);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.lightbox__close,
.lightbox__prev,
.lightbox__next {
  position: absolute;
  background: transparent;
  border: 1px solid rgba(246, 243, 236, 0.28);
  color: rgba(246, 243, 236, 0.7);
  width: 44px;
  height: 44px;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  font-family: var(--sans);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 180ms, border-color 180ms, background 180ms;
}
.lightbox__close:hover,
.lightbox__prev:hover,
.lightbox__next:hover {
  color: rgba(246, 243, 236, 1);
  border-color: rgba(246, 243, 236, 0.7);
}
.lightbox__close { top: 24px;  right: 24px; }
.lightbox__prev  { left: 24px;  top: 50%; transform: translateY(-50%); }
.lightbox__next  { right: 24px; top: 50%; transform: translateY(-50%); }

@media (max-width: 800px) {
  .lightbox__close { top: 16px; right: 16px; }
  .lightbox__prev  { left: 12px; }
  .lightbox__next  { right: 12px; }
  .lightbox__img   { max-height: 76vh; }
}

/* ==========================================================
   MOBILE FIT-UP
   Final pass for ≤600px viewports. Earlier breakpoints at 1000/
   900/800 px leave tabular row layouts with fixed-width left
   columns squeezed at phone sizes; this section collapses them
   to single-column flows so labels stack above their content.
   Also includes a safety net against accidental horizontal scroll
   (overflow-x: clip, which — unlike `hidden` — does not break
   position: sticky on .site-header and the contact form's lhs).
   ========================================================== */

html { overflow-x: clip; }

@media (max-width: 600px) {
  /* Project-page rows — labels stack above content. */
  .materials__row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 14px 0;
  }
  .project-press__row {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 4px 12px;
    padding: 16px 0;
  }
  .project-press__row .src  { grid-column: 1;     grid-row: 1; }
  .project-press__row .yr   { grid-column: 2;     grid-row: 1; text-align: right; }
  .project-press__row .line { grid-column: 1 / -1; grid-row: 2; }
}

@media (max-width: 540px) {
  /* 4-cell strip layouts (studio facts, press stats, quick contacts,
     transport on contact page). Each collapses to a single column
     with horizontal-rule dividers between rows instead of vertical
     borders between cells.
     Also inset the strips from the screen edge — .press-stats,
     .quick-contacts and .transport are full-bleed on desktop (a
     deliberate design choice when they sit as one continuous strip),
     but at single-column phone width that has the cell contents
     pressed against the viewport edge. Match the rest of the page's
     20px mobile gutter. */
  .press-stats,
  .quick-contacts,
  .transport {
    padding-left: 20px;
    padding-right: 20px;
  }
  .studio-facts__grid,
  .press-stats,
  .quick-contacts,
  .transport {
    grid-template-columns: 1fr;
  }
  .studio-facts__cell,
  .press-stats__cell,
  .quick-contacts__cell,
  .transport__cell {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 16px 0;
  }
  .studio-facts__cell:last-child,
  .press-stats__cell:last-child,
  .quick-contacts__cell:last-child,
  .transport__cell:last-child {
    border-bottom: 0;
  }

  /* Journal article breadcrumb strip — allow wrap so long titles
     don't push the "X min read" off the right edge. */
  .article-meta-strip {
    flex-wrap: wrap;
    gap: 6px 12px;
  }
  .article-meta-strip .sep { margin: 0 6px; }
}

@media (max-width: 500px) {
  /* Awards row — fully stack year/status on top, body and title beneath. */
  .awards-row {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto auto;
    gap: 4px 12px;
    padding: 18px 0;
  }
  .awards-row .yr          { grid-column: 1;     grid-row: 1; font-size: 11px; }
  .awards-row .status-wrap { grid-column: 2;     grid-row: 1; text-align: right; }
  .awards-row .body        { grid-column: 1 / -1; grid-row: 2; font-size: 16px; }
  .awards-row .title       { grid-column: 1 / -1; grid-row: 3; font-size: 14px; }
  .awards-row .cat         { display: none; }

  /* Press row — title row above project, kind chip below */
  .press-row {
    grid-template-columns: 1fr;
    row-gap: 4px;
  }
  .press-row .src  { font-size: 16px; }
  .press-row .kind { grid-column: 1; grid-row: auto; justify-self: start; }
  .press-row .proj { grid-column: 1; }

  /* Timeline — drop the 2-col masonry; one stage per row */
  .timeline__grid { grid-template-columns: 1fr; }
  .timeline__stage:nth-child(2n) { border-right: 1px solid var(--line); }
  .timeline__stage:last-child    { border-bottom: 1px solid var(--line); }

  /* FAQ — drop the q-no column; question gets full width */
  .faq-row__grid { grid-template-columns: 1fr; gap: 8px; }
  .faq-row .q-no { display: none; }

  /* Generic section padding tightens 4 px so content keeps clear of
     the screen edge without feeling cramped. */
  .section { padding-left: 20px; padding-right: 20px; }
  .section-head h2 { font-size: 32px; }
}

@media (max-width: 420px) {
  /* Last-mile tightening for very small phones (iPhone SE / 360-wide
     Androids). Wordmark and brand-mark in the header can crowd the
     hamburger — let it shrink. */
  .wordmark { font-size: 15px; }
  .hero__head { font-size: 44px; }
}