/*
 * piqu production-eleventy — main.css v0.1
 * Skin B / Balanced Atelier — Newsreader display + Inter body/UI,
 * neutral cream background, slate-teal accent, Quiet Editorial Atelier direction.
 * Lifted from production-scaffold/styles/main.css (which lifted it from prototype-v2.8.8/styles.css).
 * Local-only scaffold. No fonts shipped; relies on Google Fonts (no font files committed).
 */

/* ----------------------------------------------------------------------------
   piqu Route A — Quiet Editorial · Prototype v2.2
   Visual refinement pass. Same structure as v2.1; visual tokens vary by skin.
   Three skins, switchable via body class:
     body.skin-a — Warm Editorial   (EB Garamond + Inter; cream + forest accent)
     body.skin-b — Balanced Atelier (Newsreader   + Inter; neutral + slate teal)
     body.skin-c — Cooler Architect (Geist Sans single-family; cool stone + ink)
   Not production code. Google Fonts CDN used in prototype only — production
   self-hosts woff2 subsets per `image-and-asset-specification.md`.
---------------------------------------------------------------------------- */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; cursor: pointer; background: none; border: 0; padding: 0; }

/* ---------- Shared, skin-agnostic tokens ---------- */
:root {
  --bg-card:        #ffffff;
  --max-w:          1320px;
  --max-w-reading:  680px;

  --t-h1:   3.75rem;
  --t-h2:   2.25rem;
  --t-h3:   1.5rem;
  --t-lead: 1.1875rem;
  --t-body: 1.0625rem;
  --t-small:0.9375rem;
  --t-label:0.75rem;

  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-5: 3rem;
  --s-6: 4.5rem;
  --s-7: 6rem;
  --s-8: 8rem;
}

@media (max-width: 720px) {
  :root {
    --t-h1: 2.25rem;
    --t-h2: 1.625rem;
    --t-h3: 1.25rem;
    --t-lead: 1.0625rem;
    --t-body: 1rem;
    --s-7: 4rem;
    --s-8: 5rem;
  }
}

/* ============================================================================
   SKIN A — Warm Editorial
   EB Garamond display + Inter body; cream / warm-grey / forest accent.
============================================================================ */
body.skin-a {
  --bg:             #FAF7F2;
  --bg-band:        #F3EFE8;
  --bg-placeholder: #E9E4DC;
  --ink:            #1A1814;
  --ink-soft:       #5E5A52;
  --ink-quiet:      #8A8579;
  --rule:           #D9D4CA;
  --accent:         #2D4A3E;
  --accent-hover:   #1F3A2E;

  --font-display: 'EB Garamond', 'Iowan Old Style', Georgia, serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --rule-weight:  1px;
  --link-style:   underline-soft;
}

/* Slightly larger hero on skin A — Garamond reads beautifully large */
body.skin-a { --t-h1: 4rem; }
@media (max-width: 720px) { body.skin-a { --t-h1: 2.375rem; } }

/* ============================================================================
   SKIN B — Balanced Atelier
   Newsreader display + Inter body; near-neutral cream / slate teal accent.
============================================================================ */
body.skin-b {
  --bg:             #F6F4EF;
  --bg-band:        #EDEAE3;
  --bg-placeholder: #E2DED6;
  --ink:            #1C1A17;
  --ink-soft:       #5A5750;
  --ink-quiet:      #86827A;
  --rule:           #D4D0C7;
  --accent:         #3A4A52;
  --accent-hover:   #293841;

  /* Display serif aligned to the approved homepage (Cormorant Garamond, self-hosted, OFL 1.1).
     Headings inherit this at weight 400 (see h1–h4 rule). Body/UI stays Inter (--font-body).
     Newsreader @font-face + files retained for now (unused) pending a later cleanup audit.
     17 Jun 2026. */
  --font-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --rule-weight:  1px;
  --link-style:   underline-soft;
}

/* ============================================================================
   SKIN C — Cooler Architectural
   Single-family Geist Sans; cool stone background / near-black accent.
============================================================================ */
body.skin-c {
  --bg:             #F4F4F1;
  --bg-band:        #E8E8E3;
  --bg-placeholder: #DEDED9;
  --ink:            #15161A;
  --ink-soft:       #52545A;
  --ink-quiet:      #7F8189;
  --rule:           #CFD0CC;
  --accent:         #1E2A33;
  --accent-hover:   #0F1A22;

  --font-display: 'Geist', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Geist', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;

  --rule-weight:  1px;
  --link-style:   underline-hard;
}

/* On skin C, h1/h2 use a denser tracking and lighter weight typical of arch sites */
body.skin-c h1, body.skin-c h2, body.skin-c h3, body.skin-c h4 { letter-spacing: -0.015em; font-weight: 500; }
body.skin-c .hero__title { letter-spacing: -0.02em; }
body.skin-c { --t-h1: 3.25rem; }
@media (max-width: 720px) { body.skin-c { --t-h1: 2rem; } }

/* ---------- Base ---------- */
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--s-4); }

.section { padding: var(--s-7) 0; }
.section--tight { padding: var(--s-5) 0; }
.section--band { background: var(--bg-band); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.18;
  margin: 0;
  color: var(--ink);
}
h1 { font-size: var(--t-h1); letter-spacing: -0.012em; }
h2 { font-size: var(--t-h2); letter-spacing: -0.005em; }
h3 { font-size: var(--t-h3); }

p { margin: 0 0 var(--s-3); max-width: 60ch; }
.lead { font-size: var(--t-lead); line-height: 1.6; color: var(--ink); max-width: 56ch; }
.small { font-size: var(--t-small); color: var(--ink-soft); }

.label {
  font-family: var(--font-body);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.col-reading { max-width: var(--max-w-reading); margin: 0 auto; }
.col-reading--narrow { max-width: 580px; margin: 0 auto; }
.col-reading[style*="text-align: center"] > p,
.col-reading[style*="text-align:center"] > p {
  margin-left: auto;
  margin-right: auto;
}

.rule { height: 1px; background: var(--rule); border: 0; margin: var(--s-5) 0; }
.placeholder-copy { font-style: italic; color: var(--ink-soft); }

/* ---------- Links ---------- */
.q-link {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
  transition: opacity 200ms ease, border-color 160ms ease;
}
.q-link:hover { opacity: 0.6; }
.q-link--soft { border-bottom-color: var(--ink-quiet); color: var(--ink-soft); }

/* Skin C uses a slightly different link treatment: ink-coloured underline at
   the rule weight, and the accent appears only on hover. */
body.skin-c .q-link { border-bottom-color: var(--ink); }
body.skin-c .q-link:hover { color: var(--accent); opacity: 1; border-bottom-color: var(--accent); }

/* ---------- Image placeholders ---------- */
.imgph {
  background: var(--bg-placeholder);
  color: var(--ink-quiet);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--s-3);
  font-size: var(--t-small);
  letter-spacing: 0.02em;
  font-style: italic;
  border: 1px dashed var(--rule);
}
.imgph--16x9 { aspect-ratio: 16 / 9; }
.imgph--4x3  { aspect-ratio: 4 / 3; }
.imgph--3x2  { aspect-ratio: 3 / 2; }
.imgph--1x1  { aspect-ratio: 1 / 1; }
.imgph--4x5  { aspect-ratio: 4 / 5; }

/* When a real image is dropped in, .img-real handles aspect ratio and fit */
.img-real {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 0;
}
.aspect--4x3 { aspect-ratio: 4 / 3; overflow: hidden; }
.aspect--3x2 { aspect-ratio: 3 / 2; overflow: hidden; }
.aspect--4x5 { aspect-ratio: 4 / 5; overflow: hidden; }
.aspect--1x1 { aspect-ratio: 1 / 1; overflow: hidden; }

/* ---------- Mood-tone placeholders (cross-project stress test) ----------
   Used in place of stock photography for projects without rights-cleared
   images. Each .mood-ph carries the dominant tonal palette of that project
   so the design can be assessed against the project's mood, while remaining
   clearly labelled as a placeholder. */
.mood-ph {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: var(--s-3);
  color: rgba(255,255,255,0.65);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
}
.mood-ph::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.45) 100%);
  pointer-events: none;
}
.mood-ph__tag { position: relative; z-index: 2; font-style: italic; }
/* Project moods */
.mood--hever-fenix { background: linear-gradient(135deg, #2d3833 0%, #1b2622 60%, #0f1614 100%); }
.mood--clapham-quartzite-timber { background: linear-gradient(135deg, #c9bda9 0%, #a08766 70%, #5e4a35 100%); color: rgba(255,255,255,0.85); }
.mood--keston-dark-timber { background: linear-gradient(135deg, #3a2e22 0%, #261c12 70%, #15100a 100%); }
.mood--hammersmith-steel { background: linear-gradient(135deg, #d8d6d1 0%, #aaaaa6 50%, #6e6e6c 100%); color: rgba(0,0,0,0.55); }
.mood--eltham-dark-gaggenau { background: linear-gradient(135deg, #2e2a26 0%, #1c1916 60%, #0e0d0b 100%); }
.mood--oxted-timber-frame { background: linear-gradient(135deg, #b8aa8a 0%, #8a7b5d 60%, #4f4530 100%); color: rgba(255,255,255,0.85); }
/* Generic moods for archive grid (no project assigned) */
.mood--warm-timber { background: linear-gradient(135deg, #b29470 0%, #75583c 70%, #3f2f1f 100%); color: rgba(255,255,255,0.85); }
.mood--cool-stone { background: linear-gradient(135deg, #d0cec7 0%, #9b988e 60%, #5a574e 100%); color: rgba(0,0,0,0.55); }
.mood--dark-cabinetry { background: linear-gradient(135deg, #2c2a26 0%, #18171a 70%, #0c0b0e 100%); }
.mood--colour-accent { background: linear-gradient(135deg, #4a5c5a 0%, #2b3a3a 60%, #16201f 100%); }
.mood--marble-pale { background: linear-gradient(135deg, #ecebe5 0%, #c6c2b6 60%, #908b7c 100%); color: rgba(0,0,0,0.55); }
.mood--stainless-light { background: linear-gradient(135deg, #c9c8c5 0%, #94938e 60%, #545350 100%); color: rgba(0,0,0,0.55); }

/* ============================================================================
   SKIN SWITCHER BAR (prototype only)
============================================================================ */
.skin-switcher {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 200;
  background: var(--ink);
  color: var(--bg);
  padding: 8px 12px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: flex;
  gap: 12px;
  align-items: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  border-radius: 2px;
}
.skin-switcher__label { color: rgba(255,255,255,0.55); }
.skin-switcher a {
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  padding: 4px 6px;
  border-bottom: 1px solid transparent;
}
.skin-switcher a:hover { color: #ffffff; }
.skin-switcher a[aria-current="true"] {
  color: #ffffff;
  border-bottom-color: rgba(255,255,255,0.7);
}
/* Smaller on narrow viewports so it doesn't dominate the bottom of the screen */
@media (max-width: 480px) {
  .skin-switcher {
    bottom: 8px;
    right: 8px;
    padding: 6px 8px;
    gap: 6px;
    font-size: 10px;
  }
  .skin-switcher__label { display: none; }
}

/* ============================================================================
   HEADER
============================================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: var(--rule-weight, 1px) solid var(--rule);
}

:target,
h1, h2, h3,
.section-heading,
.project-tile,
.archive-tile,
.cs-hero,
.contact-head { scroll-margin-top: 96px; }

.site-header__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--s-3) var(--s-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}
.site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  line-height: 0;
  text-decoration: none;
  color: var(--ink);
}
.site-header__brand .site-header__wings { display: inline-flex; line-height: 0; }
.site-header__brand .site-header__wings svg { display: block; height: 25.5px; width: auto; }
.site-header__brand .site-header__wordmark { display: block; height: 30px; width: auto; }

/* Skin C wordmark — slightly tighter, in body family (single-family approach) */
body.skin-c .site-header__brand,
body.skin-c .menu-overlay__brand {
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.site-header__nav {
  display: flex;
  gap: var(--s-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-header__nav a {
  text-decoration: none;
  color: var(--ink);
  font-size: var(--t-small);
  letter-spacing: 0.04em;
  padding: 6px 2px;
  border-bottom: 1px solid transparent;
  transition: border-color 160ms ease;
}
.site-header__nav a:hover,
.site-header__nav a:focus-visible,
.site-header__nav a[aria-current="page"] {
  border-bottom-color: var(--ink);
}
.menu-trigger {
  display: none;
  font-size: var(--t-small);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 6px 2px;
  border-bottom: 1px solid var(--ink);
  cursor: pointer;
}

@media (max-width: 860px) {
  .site-header__nav { display: none; }
  .menu-trigger { display: inline-block; }
  /* v0.6.x — wings now shown on mobile site-wide (Adrian's request), scaled down + tighter.
     Supersedes the earlier "mobile wordmark-only" treatment. The homepage keeps its own
     (matching) home-fable overrides. */
  .site-header__brand .site-header__wings { display: inline-flex; }
  .site-header__brand .site-header__wings svg { height: 25px; }
  .site-header__brand { gap: 10px; }
}
@media (max-width: 600px) {
  .site-header__brand .site-header__wings svg { height: 21px; }
  .site-header__brand .site-header__wordmark { height: 25px; }
  .site-header__brand { gap: 8px; }
}

/* ============================================================================
   MENU OVERLAY
============================================================================ */
.menu-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 100;
  display: none;
  overflow-y: auto;
  padding: var(--s-4) var(--s-4) var(--s-5);
}
.menu-overlay[data-open="true"] { display: block; }
.menu-overlay__bar {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--s-2) 2.25rem 0;   /* left:0 so the brand lockup aligns with the menu text column; CLOSE keeps its right inset */
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.menu-overlay__brand {
  font-family: var(--font-display);
  font-size: 1.625rem;
  text-decoration: none;
  color: var(--ink);
}
.menu-overlay__close {
  font-size: var(--t-small);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 6px 2px;
  border-bottom: 1px solid var(--ink);
  cursor: pointer;
}
.menu-overlay__sections {
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  gap: 2.25rem;
}
.menu-overlay__group {
  border-top: 1px solid var(--rule);
  padding-top: var(--s-2);
}
.menu-overlay__top {
  font-family: var(--font-display);
  font-size: 1.375rem;
  letter-spacing: -0.005em;
  text-decoration: none;
  color: var(--ink);
  display: block;
  padding: 4px 0;
}
.menu-overlay__top:hover { color: var(--accent); }
.menu-overlay__group ul { list-style: none; padding: 0; margin: 0; }
.menu-overlay__group li { padding: 4px 0; }
.menu-overlay__group li a {
  font-size: var(--t-small);
  color: var(--ink-soft);
  text-decoration: none;
  letter-spacing: 0.02em;
  line-height: 1.4;
}
.menu-overlay__group li a:hover { color: var(--ink); }
.menu-overlay__contact {
  max-width: 760px;
  margin: var(--s-4) auto 0;
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule);
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--ink-soft);
}
.menu-overlay__contact p { margin: 0; }
.menu-overlay__contact p + p { margin-top: var(--s-1); }
.menu-overlay__contact a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  display: inline-block;
  padding: 3px 0 1px;
}

/* ============================================================================
   QUIET TEXT FILTERS
============================================================================ */
.q-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  font-size: var(--t-small);
  color: var(--ink-soft);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--s-5);
  align-items: baseline;
}
.q-filter__label {
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  margin-right: var(--s-3);
  flex-shrink: 0;
}
.q-filter__item {
  color: var(--ink-soft);
  text-decoration: none;
  padding: 2px 0;
}
.q-filter__item:hover { color: var(--ink); }
.q-filter__item[aria-current="true"] {
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
}
.q-filter__sep { color: var(--ink-quiet); margin: 0 8px; }
@media (max-width: 720px) { .q-filter { display: none; } }

.q-filter-mobile {
  display: none;
  padding: var(--s-3) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--s-5);
}
.q-filter-mobile summary {
  font-size: var(--t-small);
  color: var(--ink);
  cursor: pointer;
  padding: 4px 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.q-filter-mobile summary::-webkit-details-marker { display: none; }
.q-filter-mobile summary::after {
  content: '+';
  color: var(--ink-quiet);
  font-size: 1.25rem;
  line-height: 1;
}
.q-filter-mobile[open] summary::after { content: '−'; }
.q-filter-mobile ul { list-style: none; padding: var(--s-3) 0 var(--s-1); margin: 0; }
.q-filter-mobile li { padding: 8px 0; font-size: var(--t-small); }
.q-filter-mobile a { color: var(--ink-soft); text-decoration: none; }
.q-filter-mobile li[data-active="true"] a {
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
}
@media (max-width: 720px) { .q-filter-mobile { display: block; } }

/* ============================================================================
   ARCHIVE GRID — refined editorial treatment
   v2.2: two-column on desktop (not three), more whitespace per tile,
   metadata sits below the image with a single thin top rule, no chips.
============================================================================ */
.archive-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-7) var(--s-5);
}
@media (max-width: 720px) { .archive-grid { grid-template-columns: 1fr; gap: var(--s-6); } }

.archive-entry { display: block; text-decoration: none; color: var(--ink); }
.archive-entry__media { margin-bottom: var(--s-3); }
.archive-entry__meta {
  border-top: 1px solid var(--rule);
  padding-top: var(--s-2);
}
.archive-entry__loc {
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  margin: 0 0 var(--s-1);
}
.archive-entry__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.25;
  margin: 0 0 var(--s-2);
  letter-spacing: -0.005em;
}
body.skin-c .archive-entry__title { font-weight: 500; letter-spacing: -0.015em; }

.archive-entry__note {
  font-size: var(--t-small);
  color: var(--ink-soft);
  line-height: 1.65;
  margin: 0 0 var(--s-2);
  max-width: 50ch;
}
.archive-entry__credit {
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  margin-top: var(--s-2);
}
.archive-entry:hover .archive-entry__title { color: var(--accent); }

/* Section heading */
.section-heading {
  text-align: left;
  padding: var(--s-6) 0 var(--s-4);
  border-top: 1px solid var(--rule);
}
.section-heading:first-of-type { border-top: 0; padding-top: var(--s-4); }
.section-heading .label { display: block; margin-bottom: var(--s-2); }
.section-heading h2 { font-size: var(--t-h2); margin-bottom: var(--s-2); }
.section-heading p { color: var(--ink-soft); max-width: 60ch; margin-top: var(--s-2); }

/* ============================================================================
   VIDEO / HERO MEDIA
============================================================================ */
.video-ph {
  background: var(--bg-placeholder);
  color: var(--ink-quiet);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--s-3);
  font-size: var(--t-small);
  letter-spacing: 0.02em;
  font-style: italic;
  border: 1px dashed var(--rule);
}
.video-ph--16x9 { aspect-ratio: 16 / 9; }

.hero__media .imgph,
.hero__media .video-ph,
.hero__media .aspect--hero,
.cs-hero > .imgph,
.cs-hero > .aspect--hero,
.archive-entry-head__media {
  aspect-ratio: auto;
  height: clamp(300px, 56vh, 600px);
}
.aspect--hero { width: 100%; overflow: hidden; }
.aspect--hero .img-real { width: 100%; height: 100%; object-fit: cover; }

@media (max-height: 640px) {
  .hero__media .imgph,
  .hero__media .video-ph,
  .hero__media .aspect--hero,
  .cs-hero > .imgph,
  .cs-hero > .aspect--hero,
  .archive-entry-head__media { height: clamp(220px, 45vh, 360px); }
}

/* ============================================================================
   ARCHIVE ENTRY (single-page)
============================================================================ */
.archive-entry-head { padding-top: var(--s-5); padding-bottom: var(--s-5); }
.archive-entry-head__media { margin-bottom: var(--s-5); }
.archive-entry-head__loc {
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  margin: 0 0 var(--s-2);
}
.archive-entry-head__title {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  margin: 0 0 var(--s-3);
  max-width: 22ch;
}
.archive-entry-head__note {
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--ink);
  max-width: 60ch;
  margin: 0 0 var(--s-3);
}
.archive-entry-head__credit {
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  margin-top: var(--s-3);
}

/* ============================================================================
   HERO
============================================================================ */
.hero { padding: var(--s-6) 0 var(--s-7); }
.hero__media { margin-bottom: var(--s-6); }
.hero__eyebrow { margin-bottom: var(--s-3); }
.hero__title {
  font-size: var(--t-h1);
  max-width: 17ch;
  margin-bottom: var(--s-3);
  line-height: 1.1;
}
.hero__sub {
  font-size: var(--t-lead);
  color: var(--ink-soft);
  max-width: 52ch;
  margin-bottom: var(--s-4);
}
.hero__meta {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  flex-wrap: wrap;
  font-size: var(--t-small);
  color: var(--ink-soft);
}
.hero__meta .dot { color: var(--ink-quiet); }
@media (max-width: 480px) {
  .hero__meta { gap: var(--s-2); row-gap: 6px; }
}

/* ============================================================================
   PROOF STRIP
============================================================================ */
.proof {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
  padding: var(--s-4) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  text-align: center;
  font-size: var(--t-small);
  letter-spacing: 0.04em;
}
.proof a {
  text-decoration: none;
  color: var(--ink);
  padding: var(--s-1) 0;
  display: block;
}
.proof a:hover { color: var(--accent); }
.proof__sub {
  display: block;
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  font-style: italic;
  margin-top: 4px;
}
@media (max-width: 720px) {
  .proof { grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
}

/* ============================================================================
   FEATURED PROJECTS
============================================================================ */
.featured-projects {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-6) var(--s-5);
}
@media (max-width: 720px) { .featured-projects { grid-template-columns: 1fr; gap: var(--s-6); } }

.project-tile {
  text-decoration: none;
  color: var(--ink);
  display: block;
}
.project-tile__media { margin-bottom: var(--s-3); }
.project-tile__title {
  font-family: var(--font-display);
  font-size: 1.625rem;
  line-height: 1.25;
  margin: 0 0 var(--s-1);
  letter-spacing: -0.005em;
}
body.skin-c .project-tile__title,
body.skin-c .hero__title { font-weight: 500; }

.project-tile__loc {
  font-family: var(--font-body);
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  margin: 0 0 var(--s-2);
}
.project-tile__strap {
  font-size: var(--t-small);
  color: var(--ink-soft);
  margin: 0 0 var(--s-2);
  max-width: none;
}

.qtags {
  font-size: var(--t-small);
  color: var(--ink-soft);
  letter-spacing: 0.02em;
  margin: 0;
  max-width: none;
}
.qtags .sep {
  display: inline-block;
  margin: 0 6px;
  color: var(--ink-quiet);
}

.project-tile:hover .project-tile__title { color: var(--accent); }

/* ============================================================================
   WHAT-WE-DO three-up
============================================================================ */
.three-up {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}
.three-up h3 { margin-bottom: var(--s-2); }
.three-up p { color: var(--ink-soft); }
@media (max-width: 720px) { .three-up { grid-template-columns: 1fr; gap: var(--s-5); } }

/* ============================================================================
   ADRIAN / STUDIO snippet
============================================================================ */
.adrian {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--s-6);
  align-items: center;
}
.adrian__media .imgph--4x5 { max-width: 420px; }
.adrian__creds {
  font-size: var(--t-small);
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  margin: 0 0 var(--s-3);
}
@media (max-width: 900px) {
  .adrian { grid-template-columns: 1fr; gap: var(--s-4); }
  .adrian__media .imgph--4x5 { max-width: 100%; }
}

/* ============================================================================
   PULL QUOTE
============================================================================ */
.pullquote {
  text-align: center;
  padding: var(--s-6) 0;
}
.pullquote blockquote {
  font-family: var(--font-display);
  font-size: 1.875rem;
  line-height: 1.35;
  margin: 0 auto var(--s-3);
  max-width: 30ch;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.pullquote cite {
  font-style: normal;
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}
@media (max-width: 720px) { .pullquote blockquote { font-size: 1.375rem; } }

/* ============================================================================
   QUIET ENDING
============================================================================ */
.quiet-ending {
  text-align: center;
  padding: var(--s-7) 0;
  border-top: 1px solid var(--rule);
}
.quiet-ending h2 { max-width: 22ch; margin: 0 auto var(--s-3); }
.quiet-ending p { color: var(--ink-soft); max-width: 50ch; margin: 0 auto var(--s-3); }
.quiet-ending .actions { font-size: var(--t-small); margin-top: var(--s-3); }
.quiet-ending .actions a { margin: 0 var(--s-2); }

/* ============================================================================
   FOOTER
============================================================================ */
.site-footer {
  background: var(--bg);
  border-top: 1px solid var(--rule);
  padding: var(--s-6) 0 var(--s-4);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: var(--s-5);
}
.site-footer h4 {
  font-family: var(--font-body);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 var(--s-2);
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 6px; }
.site-footer a { color: var(--ink); text-decoration: none; }
.site-footer a:hover { color: var(--accent); }
.site-footer__addr p { margin: 0; font-size: var(--t-small); line-height: 1.7; }
.site-footer__company {
  border-top: 1px solid var(--rule);
  margin-top: var(--s-5);
  padding-top: var(--s-3);
  font-size: var(--t-label);
  letter-spacing: 0.04em;
  color: var(--ink-quiet);
  max-width: 70ch;
}
@media (max-width: 900px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .site-footer__grid { grid-template-columns: 1fr; } }

/* ============================================================================
   CASE STUDY
============================================================================ */
.crumbs {
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  padding: var(--s-3) 0;
  /* Allow crumbs to wrap rather than overflow on narrow viewports */
  word-spacing: 0.05em;
}
.crumbs a { color: var(--ink-quiet); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
@media (max-width: 480px) {
  .crumbs { letter-spacing: 0.06em; }
}

.cs-hero { padding-bottom: var(--s-5); }
.cs-hero__title { max-width: 22ch; margin-bottom: var(--s-2); }
.cs-hero__strap { font-size: var(--t-lead); color: var(--ink-soft); margin-bottom: var(--s-3); max-width: 56ch; }
.cs-hero__meta {
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}

.cs-spec {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--s-5);
  padding: var(--s-5) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.cs-spec dl { margin: 0; }
.cs-spec dt {
  font-family: var(--font-body);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: var(--s-3);
}
.cs-spec dt:first-of-type { margin-top: 0; }
.cs-spec dd { margin: 0; font-size: var(--t-body); line-height: 1.6; }
.cs-spec ul.features { list-style: none; padding: 0; margin: 0; }
.cs-spec ul.features li {
  padding: 6px 0;
  border-bottom: 1px solid var(--rule);
  font-size: var(--t-small);
}
.cs-spec ul.features li:last-child { border-bottom: 0; }
@media (max-width: 800px) { .cs-spec { grid-template-columns: 1fr; gap: var(--s-4); } }

.cs-narrative {
  padding-top: var(--s-5);
  padding-bottom: var(--s-5);
}
.cs-narrative h2 { font-size: var(--t-h2); margin-bottom: var(--s-3); }
.cs-narrative .col-reading { margin: 0; }

.detail-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
  margin: var(--s-4) 0;
}
.detail-pair figcaption {
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  margin-top: 8px;
}
@media (max-width: 720px) { .detail-pair { grid-template-columns: 1fr; } }

/* Finish-range row: a small 3-up comparison (not a gallery). Mirrors detail-pair. */
.finish-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
  margin: var(--s-4) 0 0;
}
.finish-row figcaption {
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  margin-top: 8px;
}
@media (max-width: 720px) { .finish-row { grid-template-columns: 1fr; } }

.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3);
  padding: var(--s-5) 0;
}
.gallery .imgph:nth-child(3n),
.gallery .aspect--4x3:nth-child(3n),
.gallery .aspect--3x2:nth-child(3n) { grid-column: span 2; }
@media (max-width: 720px) {
  .gallery { grid-template-columns: 1fr; }
  .gallery .imgph:nth-child(3n),
  .gallery .aspect--4x3:nth-child(3n),
  .gallery .aspect--3x2:nth-child(3n) { grid-column: span 1; }
}

.cs-cross {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  padding-top: var(--s-5);
  padding-bottom: var(--s-5);
}
.cs-cross h3 { font-size: var(--t-h3); margin-bottom: var(--s-3); }
.cs-related {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}
@media (max-width: 720px) { .cs-related { grid-template-columns: 1fr; } }

/* Non-project cross-links: quiet text-only editorial row (no placeholder swatches) */
.cs-related__more {
  font-size: var(--t-small);
  color: var(--ink-quiet);
  margin: 0;
}
.cs-related__more a + a::before {
  content: "·";
  margin: 0 var(--s-2);
  color: var(--ink-quiet);
}

/* ============================================================================
   CONTACT PAGE
============================================================================ */
.contact-head {
  padding-top: var(--s-7);
  padding-bottom: var(--s-5);
}
.contact-head__addr {
  font-size: var(--t-lead);
  margin-top: var(--s-3);
  color: var(--ink);
}
.contact-head .label { display: block; margin-bottom: 4px; }

.contact-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--s-7);
  padding: var(--s-5) 0;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: var(--s-5); } }

.form { display: grid; gap: var(--s-3); max-width: 640px; }
.form-row { display: grid; gap: var(--s-3); grid-template-columns: 1fr 1fr; }
.form-row--single { grid-template-columns: 1fr; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }

.form label {
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: block;
  margin-bottom: 6px;
}
.form .optional::after {
  content: ' (optional)';
  text-transform: none;
  font-size: var(--t-label);
  color: var(--ink-quiet);
  letter-spacing: 0.04em;
  font-style: italic;
}
.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form select,
.form textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  padding: 10px 0;
  font: inherit;
  font-size: var(--t-body);
  color: var(--ink);
  min-height: 44px;
  border-radius: 0;
}
.form textarea { min-height: 120px; resize: vertical; }
.form input:focus, .form textarea:focus, .form select:focus {
  outline: none;
  border-bottom-color: var(--ink);
}

.consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: var(--t-small);
  color: var(--ink);
}
.consent input { margin-top: 5px; }

.form__submit {
  margin-top: var(--s-4);
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: var(--s-3) var(--s-5);
  cursor: pointer;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: var(--t-label);
  font-family: var(--font-ui);
  transition: background 0.2s, color 0.2s;
}
.form__submit:hover { background: var(--ink); color: var(--bg); }
.form__submit:disabled { opacity: 0.5; cursor: not-allowed; }

/* ============================================================================
   IMAGE MODULE (v0.4 — piquImage shortcode wrapper from @11ty/eleventy-img)
   The shortcode emits <figure class="image image--{aspect} image--{context}">
   wrapping <picture><source>...<img>. These rules normalise figure margins,
   force the figure to fill its parent, and crop the image to the requested
   aspect with object-fit cover.
   ============================================================================ */

figure.image {
  margin: 0;
  width: 100%;
  overflow: hidden;
  display: block;
  background: var(--surface, transparent);
}
figure.image picture,
figure.image picture img,
figure.image > img {
  display: block;
  width: 100%;
  height: 100%;
}
figure.image picture img,
figure.image > img {
  object-fit: cover;
}

/* Aspect-ratio variants (cover-cropped) */
figure.image--3x2  { aspect-ratio: 3 / 2;  }
figure.image--16x9 { aspect-ratio: 16 / 9; }
figure.image--4x5  { aspect-ratio: 4 / 5;  }
figure.image--4x3  { aspect-ratio: 4 / 3;  }
figure.image--1x1  { aspect-ratio: 1 / 1;  }

/* Hero override
   - Mobile (default): follow the source image's wide aspect (~16/9) so the
     full composition is visible. The hero stays short but the picture is
     intact end-to-end — matches the prototype's mobile photography behaviour.
   - Desktop (≥720px): use the dramatic clamp-height hero, cover-cropped.
     This wins over any image--3x2 aspect-ratio on the same element. */
figure.image--hero {
  aspect-ratio: 16 / 9;
  height: auto;
}
@media (min-width: 720px) {
  figure.image--hero {
    aspect-ratio: auto;
    height: clamp(300px, 56vh, 600px);
  }
}
@media (min-width: 720px) and (max-height: 640px) {
  figure.image--hero { height: clamp(220px, 45vh, 360px); }
}

/* Figcaption */
figure.image figcaption {
  font-size: var(--t-small);
  color: var(--ink-quiet);
  margin-top: var(--s-2);
  text-align: center;
}
figure.image figcaption .image__credit {
  display: block;
  margin-top: var(--s-1);
  font-size: var(--t-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ─────────────────────────────────────────────────────────────────────────────
   v0.4.2 — Homepage hero breathing room
   Adds gap between header bottom border and hero image.
   Mobile (default): ~24px. Desktop: scales up to ~56px via clamp.
   Clamp on the hero figure also nudged slightly tighter so first fold remains
   balanced after the added top space.
   ───────────────────────────────────────────────────────────────────────── */
.home-hero {
  padding-top: clamp(24px, 4vw, 56px);
}
@media (min-width: 720px) {
  /* Slightly tighter desktop hero height to compensate for the new top gap
     while preserving the image-led feel. */
  .home-hero figure.image--hero {
    height: clamp(280px, 52vh, 560px);
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   v0.4.2 — Skip-to-content link
   Visually hidden until focused. Lands focus on #main so keyboard / screen-reader
   users can jump past the header without traversing the brand and nav each time.
   ───────────────────────────────────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip-link:focus,
.skip-link:focus-visible {
  position: fixed;
  top: var(--s-3, 1rem);
  left: var(--s-3, 1rem);
  width: auto;
  height: auto;
  margin: 0;
  padding: var(--s-2, 0.5rem) var(--s-3, 1rem);
  clip: auto;
  clip-path: none;
  background: var(--ink);
  color: var(--bg);
  z-index: 300;
  border-radius: 2px;
  text-decoration: none;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ============================================================================
   HOME — image-led sections (v0.6.x)
============================================================================ */
.home-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
  align-items: center;
}
.home-split__text .label { margin-bottom: var(--s-2); }
@media (max-width: 860px) {
  .home-split { grid-template-columns: 1fr; gap: var(--s-4); }
}
.offer-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  margin-top: var(--s-4);
}
.offer-card__media { margin-bottom: var(--s-3); }
.offer-card h3 { margin-bottom: var(--s-1); }
.offer-card p { color: var(--ink-soft); }
@media (max-width: 720px) {
  .offer-cards { grid-template-columns: 1fr; gap: var(--s-5); }
}
.offer-card h3 a { color: var(--ink); text-decoration: none; transition: color 160ms ease; }
.offer-card h3 a:hover { color: var(--accent); }

/* ============================================================================
   HOME (Fable editorial) — scoped to body.home-fable ONLY (v0.6.x).
   Promoted from /internal/homepage-fable-test/. Other pages are unaffected.
   Serif = self-hosted Cormorant Garamond (OFL 1.1), matching the original mock-up.
============================================================================ */
body.home-fable{
  --bg:#f4f2ec; --ink:#1c1b18; --muted:#6f6a61; --line:#dcd8ce; --brass:#8a6f3d;
  --serif:'Cormorant Garamond',Georgia,serif;
  background:#f4f2ec;
}

/* Overlay header on Home only — real global header reused so the mobile menu still works */
body.home-fable .site-header{
  position:fixed; left:0; right:0; top:0;
  background:transparent; border-bottom-color:transparent; color:#fff;
  transition:background .4s ease,color .4s ease,border-color .4s ease,box-shadow .4s ease;
}
body.home-fable .site-header:not(.is-scrolled){ text-shadow:0 1px 18px rgba(0,0,0,.5); }
body.home-fable .site-header:not(.is-scrolled) .site-header__brand{ color:#fff; filter:drop-shadow(0 1px 12px rgba(0,0,0,.45)); }
body.home-fable .site-header:not(.is-scrolled) .site-header__wordmark{ fill:#fff; }
body.home-fable .site-header:not(.is-scrolled) .site-header__wings polygon{ stroke:#fff; }
body.home-fable .site-header:not(.is-scrolled) .site-header__nav a{ color:#fff; }
body.home-fable .site-header:not(.is-scrolled) .site-header__nav a:hover,
body.home-fable .site-header:not(.is-scrolled) .site-header__nav a:focus-visible,
body.home-fable .site-header:not(.is-scrolled) .site-header__nav a[aria-current="page"]{ border-bottom-color:#fff; }
body.home-fable .site-header:not(.is-scrolled) .menu-trigger{ color:#fff; border-bottom-color:#fff; }
body.home-fable .site-header.is-scrolled{
  background:rgba(244,242,236,.92); backdrop-filter:blur(10px);
  color:var(--ink); box-shadow:0 1px 0 rgba(0,0,0,.06); border-bottom-color:transparent;
}

/* Sections */
body.home-fable .wrap{ max-width:1400px; margin:0 auto; padding:0 40px; }
body.home-fable section{ padding:120px 0; }

body.home-fable .hero{ position:relative; height:100vh; min-height:640px; overflow:hidden; }
body.home-fable .hero-media{ position:absolute; inset:0; }
body.home-fable .hero-media figure, body.home-fable .hero-media picture{ display:block; width:100%; height:100%; margin:0; }
body.home-fable .hero-media img{ width:100%; height:100%; object-fit:cover; }
html.js body.home-fable .hero-media{ transform:scale(1.08); animation:fableZoom 14s ease-out forwards; }
@keyframes fableZoom{ to{ transform:scale(1); } }
body.home-fable .hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.4),rgba(0,0,0,0) 28%,rgba(0,0,0,.12) 55%,rgba(0,0,0,.68)); }
body.home-fable .hero-copy{ position:absolute; left:0; right:0; bottom:0; z-index:2; color:#fff; padding:0 40px 64px; }
body.home-fable .hero-copy .inner{ max-width:1400px; margin:0 auto; }
body.home-fable .eyebrow{ font-size:12px; letter-spacing:.28em; text-transform:uppercase; opacity:.85; margin-bottom:22px; }
body.home-fable .hero h1{ font-family:var(--serif); font-weight:400; font-size:clamp(40px,6vw,92px); line-height:1.02; max-width:16ch; letter-spacing:-.01em; color:#fff; }
body.home-fable .hero .lede{ margin-top:24px; max-width:46ch; font-size:17px; opacity:.9; }
body.home-fable .scrollcue{ position:absolute; left:50%; bottom:30px; transform:translateX(-50%); z-index:2; color:#fff; font-size:11px; letter-spacing:.25em; text-transform:uppercase; opacity:.8; }

body.home-fable .intro{ padding:160px 40px 150px; }
body.home-fable .intro-grid{ display:grid; grid-template-columns:1fr 1fr; gap:110px; align-items:start; }
body.home-fable .intro-grid h2{ font-family:var(--serif); font-weight:400; font-size:clamp(30px,3.4vw,50px); line-height:1.08; letter-spacing:-.01em; }
body.home-fable .intro-grid p{ color:var(--muted); font-size:17px; max-width:50ch; }
body.home-fable .creds{ margin-top:30px; font-size:13px; letter-spacing:.05em; color:var(--muted); line-height:2; }
body.home-fable .pullquote{ margin-top:64px; padding-left:30px; border-left:2px solid var(--brass); max-width:44ch; }
body.home-fable .pullquote p{ font-family:var(--serif); font-style:italic; font-weight:500; font-size:clamp(21px,1.9vw,29px); line-height:1.4; color:var(--ink); max-width:none; }
body.home-fable .pullquote cite{ display:block; margin-top:24px; font-style:normal; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }

body.home-fable .projects{ padding-top:30px; padding-bottom:64px; }
body.home-fable .proj-head{ display:flex; justify-content:space-between; align-items:flex-end; border-bottom:1px solid var(--line); padding-bottom:24px; margin-bottom:64px; }
body.home-fable .proj-head h2{ font-family:var(--serif); font-weight:400; font-size:clamp(28px,3vw,46px); }
body.home-fable .proj-head a{ font-size:13px; letter-spacing:.14em; text-transform:uppercase; text-decoration:none; border-bottom:0; padding-bottom:0; transition:opacity 160ms ease; }
body.home-fable .feature{ display:grid; grid-template-columns:1.55fr 1fr; gap:48px; align-items:end; margin-bottom:110px; color:inherit; }
body.home-fable .ph{ overflow:hidden; }
body.home-fable .ph figure, body.home-fable .ph picture{ display:block; width:100%; height:100%; margin:0; }
body.home-fable .ph img{ width:100%; height:100%; object-fit:cover; }
body.home-fable .feature .ph{ aspect-ratio:16/10; }
body.home-fable .feature .ph img{ transition:transform 1.2s cubic-bezier(.2,.7,.2,1); }
body.home-fable .feature:hover .ph img{ transform:scale(1.05); }
body.home-fable .feature .meta .num{ font-size:13px; color:var(--brass); letter-spacing:.2em; margin-bottom:14px; }
body.home-fable .feature .meta h3{ font-family:var(--serif); font-weight:400; font-size:34px; line-height:1.1; margin-bottom:14px; }
body.home-fable .feature .meta p{ color:var(--muted); font-size:15px; max-width:34ch; }
body.home-fable .pair{ display:grid; grid-template-columns:1fr 1fr; gap:48px; }
body.home-fable .pair .ph{ aspect-ratio:4/5; }
body.home-fable .pair .ph img{ transition:transform 1.2s cubic-bezier(.2,.7,.2,1); }
body.home-fable .pair .card:hover .ph img{ transform:scale(1.05); }
body.home-fable .pair h3{ font-family:var(--serif); font-weight:400; font-size:26px; margin-top:20px; }
body.home-fable .pair p{ color:var(--muted); font-size:15px; line-height:1.5; margin-top:10px; max-width:38ch; }
body.home-fable .pair .num{ font-size:12px; color:var(--brass); letter-spacing:.2em; margin-top:18px; }

body.home-fable .dark{ background:#e8e4da; color:var(--ink); padding:0; }
body.home-fable .dark .split{ display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:stretch; min-height:80vh; }
body.home-fable .dark .txt{ padding:clamp(50px,7vw,120px); display:flex; flex-direction:column; justify-content:center; }
body.home-fable .dark .txt h2{ font-family:var(--serif); font-weight:400; font-size:clamp(32px,3.6vw,56px); line-height:1.08; margin-bottom:28px; }
body.home-fable .dark .txt p{ color:var(--muted); font-size:17px; max-width:42ch; margin-bottom:34px; }
body.home-fable .dark .txt .lnk{ font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--brass); text-decoration:none; border-bottom:0; padding-bottom:0; align-self:flex-start; transition:opacity 160ms ease; }
body.home-fable .dark .img{ overflow:hidden; }
body.home-fable .dark .img figure, body.home-fable .dark .img picture{ display:block; width:100%; height:100%; margin:0; }
body.home-fable .dark .img img{ width:100%; height:100%; object-fit:cover; }

body.home-fable .cta{ text-align:center; padding:96px 0 56px; }
body.home-fable .cta h2{ font-family:var(--serif); font-weight:400; font-size:clamp(34px,4.4vw,68px); line-height:1.06; max-width:18ch; margin:0 auto 30px; }
body.home-fable .cta p{ color:var(--muted); max-width:50ch; margin:0 auto 40px; font-size:17px; }
body.home-fable .btn{ display:inline-block; font-size:13px; letter-spacing:.16em; text-transform:uppercase; background:var(--ink); color:#fff; padding:18px 40px; transition:background .3s; text-decoration:none; }
body.home-fable .btn:hover{ background:var(--brass); }

body.home-fable .fable-link{ color:inherit; text-decoration:none; }

/* reveal — gated by JS so content always shows if JS fails */
body.home-fable .reveal{ transition:opacity 1s ease, transform 1s ease; }
html.js body.home-fable .reveal:not(.in){ opacity:0; transform:translateY(34px); }

@media (max-width:860px){
  body.home-fable .wrap{ padding:0 22px; }
  body.home-fable .intro{ padding:90px 22px 80px; }
  body.home-fable .intro-grid, body.home-fable .feature, body.home-fable .pair, body.home-fable .dark .split{ grid-template-columns:1fr; gap:40px; }
  body.home-fable section{ padding:70px 0; }
}

@media (prefers-reduced-motion: reduce){
  html.js body.home-fable .hero-media{ animation:none; transform:none; }
  body.home-fable .feature .ph img, body.home-fable .pair .ph img{ transition:none; }
  body.home-fable .feature:hover .ph img, body.home-fable .pair .card:hover .ph img{ transform:none; }
  html.js body.home-fable .reveal:not(.in){ opacity:1; transform:none; transition:none; }
}


/* ============================================================================
   HOME (Fable) polish v0.6.x — Home-only. Larger logo pushed left, nav pushed
   right (full-bleed header inner); editorial text links de-lined (no underline/
   border) but keep a visible keyboard focus ring. No effect off the homepage.
============================================================================ */
body.home-fable .site-header__inner{ max-width:none; padding-left:40px; padding-right:40px; }
body.home-fable .site-header__brand .site-header__wordmark{ height:38px; }
body.home-fable .site-header__brand .site-header__wings svg{ height:32px; }
body.home-fable .proj-head a:hover,
body.home-fable .dark .txt .lnk:hover{ opacity:.6; }
body.home-fable .proj-head a:focus-visible,
body.home-fable .dark .txt .lnk:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; }
@media (max-width:860px){
  body.home-fable .site-header__inner{ padding-left:22px; padding-right:22px; }
  body.home-fable .site-header__brand .site-header__wordmark{ height:30px; }
}

/* ============================================================================
   HOME (Fable) mobile polish v0.6.x — Home-only.
   Issue 1: show the wings+wordmark lockup on the homepage mobile header
            (the rest of the site is intentionally wordmark-only on mobile, so
            this override is scoped to body.home-fable and does NOT affect other
            pages' headers). Sizing scales down on phones; wings stay visible.
   Issue 2: add breathing room above the final showroom CTA on mobile.
============================================================================ */
@media (max-width: 860px){
  /* tablets (incl. iPad Mini 768 / iPad Air 820) + larger phones */
  body.home-fable .site-header__brand .site-header__wings{ display:inline-flex; }
  body.home-fable .site-header__brand .site-header__wings svg{ height:25px; }
  body.home-fable .site-header__brand .site-header__wordmark{ height:30px; }
  body.home-fable .site-header__brand{ gap:10px; }
  body.home-fable .cta.wrap{ margin-top: clamp(32px, 7vw, 48px); }
}
@media (max-width: 600px){
  /* phones — slightly smaller and tighter; wings stay visible */
  body.home-fable .site-header__brand .site-header__wings svg{ height:21px; }
  body.home-fable .site-header__brand .site-header__wordmark{ height:25px; }
  body.home-fable .site-header__brand{ gap:8px; }
}

/* Menu overlay brand — approved wings + official piqu wordmark lockup (replaces plain text).
   Single flattened SVG (components/logo-lockup.njk), currentColor = --ink on the cream overlay.
   ~36px tall => ~113px wide lockup, wordmark ~26px. Site-wide overlay (per approved scope). */
.menu-overlay__brand{ line-height:0; }
.menu-overlay__brand .brand-lockup{ display:block; height:36px; width:auto; }

/* Selected work cards (/projects/) — 2-up image-led cards (v0.6.x batch 1). */
.selected-work-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-5) var(--s-4); }
@media (max-width: 720px) { .selected-work-grid { grid-template-columns: 1fr; gap: var(--s-5); } }

/* Projects page — breathing room between section heading and first grid row
   (Adrian, 13 Jun 2026). Scoped to #featured/#more (Projects page only). */
#featured > h2,
#more > h2 { margin-bottom: var(--s-4); }
@media (max-width: 600px) {
  #featured > h2,
  #more > h2 { margin-bottom: var(--s-3); }
}

/* Studio page — Adrian portrait beside the intro copy (Adrian, 13 Jun 2026).
   Restrained: modest 4:5 portrait, reading-width copy, the pair centred on
   desktop and stacked on mobile. Scoped to .studio-intro (Studio page only). */
.studio-intro__copy { max-width: var(--max-w-reading); }
.studio-intro__portrait { max-width: 260px; margin: 0 0 var(--s-4); }
.studio-intro__quote {
  margin-top: var(--s-4);
  font-style: italic;
  color: var(--ink-soft);
  max-width: 48ch;
}
@media (min-width: 760px) {
  .studio-intro {
    display: grid;
    grid-template-columns: 300px minmax(0, var(--max-w-reading));
    gap: var(--s-5);
    justify-content: start;
    align-items: start;
  }
  .studio-intro__portrait { max-width: 300px; margin: 0; }
}
/* Contact form controls inherit the site body/UI font (Inter) — form elements do
   not inherit font-family by default (they fell back to UA Arial). Scoped to the
   enquiry form so no site-wide button/CTA styling changes. Adrian, 17 Jun 2026. */
.enquiry-form input,
.enquiry-form textarea,
.enquiry-form select,
.enquiry-form button { font-family: inherit; }

/* ============================================================================
   CONTACT PAGE polish (Adrian, 17 Jun 2026). Scoped to contact-specific classes
   (.contact-layout / .contact-showroom / .enquiry-form / .contact-related).
   No global header/menu/footer/homepage impact. Form remains markup-only/disabled.
============================================================================ */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr;          /* mobile: stack (intro+showroom, then form) */
  gap: var(--s-6);
  align-items: start;
  margin-top: var(--s-4);
}
@media (min-width: 880px) {
  .contact-layout { grid-template-columns: 44fr 56fr; gap: var(--s-7); }
}
.contact-layout__intro > h1 { margin-top: 0; }
.contact-layout__form > h2 { margin-top: 0; }

/* Showroom block */
.contact-showroom { margin-top: var(--s-5); }
.contact-showroom address {
  font-style: normal;
  line-height: 1.85;
  margin-top: var(--s-2);
  color: var(--ink);
}
.contact-showroom address a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink-quiet);
  padding-bottom: 1px;
  transition: opacity 160ms ease;
}
.contact-showroom address a:hover { opacity: 0.6; }
.contact-showroom__appt  { color: var(--ink-soft);  margin-top: var(--s-3); max-width: 44ch; }
.contact-showroom__houzz { color: var(--ink-quiet); margin-top: var(--s-2); }

/* Enquiry form — restyle the existing .enquiry-form markup (label above field) */
.enquiry-form { display: grid; gap: var(--s-3); margin-top: var(--s-4); max-width: 560px; }
.enquiry-form__row { display: block; }
.enquiry-form__row > label:not(.small) {
  display: block;
  margin-bottom: 8px;
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.enquiry-form input[type="text"],
.enquiry-form input[type="email"],
.enquiry-form input[type="tel"],
.enquiry-form select,
.enquiry-form textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0 14px;
  height: 46px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.enquiry-form textarea {
  height: auto;
  min-height: 160px;
  padding: 12px 14px;
  line-height: 1.6;
  resize: vertical;
}
.enquiry-form input:focus,
.enquiry-form select:focus,
.enquiry-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(58, 74, 82, 0.14);
}
/* Privacy/consent row: keep the consent sentence in normal case, checkbox aligned */
.enquiry-form__notice { color: var(--ink-soft); }
.enquiry-form label[for="enq-privacy-consent"] { line-height: 1.5; }
.enquiry-form label[for="enq-privacy-consent"] input { margin-top: 3px; flex: none; }

/* Submit — site-consistent, stays visibly disabled in the scaffold */
.enquiry-form__row--actions { margin-top: var(--s-2); }
.enquiry-form button[type="submit"] {
  justify-self: start;
  background: var(--ink);
  color: var(--bg-card);
  border: 1px solid var(--ink);
  padding: 14px 30px;
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 2px;
  cursor: pointer;
  transition: opacity 160ms ease;
}
.enquiry-form button[type="submit"]:disabled { opacity: 0.42; cursor: not-allowed; }
.enquiry-form__staging { color: var(--ink-quiet); font-size: var(--t-small); margin-top: var(--s-2); }

/* Related / useful links — quiet wrapped list, no dot separators */
.contact-related { margin-top: var(--s-6); border-top: 1px solid var(--rule); padding-top: var(--s-4); }
.contact-related ul {
  list-style: none; padding: 0; margin: var(--s-2) 0 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2) var(--s-4); max-width: 560px;
}
@media (max-width: 600px) { .contact-related ul { grid-template-columns: 1fr; } }
.contact-related a {
  color: var(--ink-soft); text-decoration: none;
  border-bottom: 1px solid var(--ink-quiet); padding-bottom: 1px;
  transition: opacity 160ms ease;
}
.contact-related a:hover { opacity: 0.6; }

/* ============================================================================
   GUIDES (Phase 2) — article comparison tables + hub index. Scoped to .guide-*.
   No nav/menu/homepage impact. Adrian, 20 Jun 2026.
============================================================================ */
.guide-table-wrap { max-width: var(--max-w); margin: var(--s-3) auto 0; overflow-x: auto; }
.guide-table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: var(--t-small); }
.guide-table th, .guide-table td { text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid var(--rule); }
.guide-table thead th { font-family: var(--font-body); font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--ink-quiet); }
.guide-table th[scope="row"] { font-family: var(--font-body); font-weight: 600; color: var(--ink); }
.guide-index { list-style: none; padding: 0; margin: var(--s-2) 0 0; display: grid; gap: var(--s-4); }
.guide-index a { display: inline-block; font-family: var(--font-display); font-size: var(--t-h3); line-height: 1.2; color: var(--ink); text-decoration: none; }
.guide-index a:hover { color: var(--accent); }
.guide-index p { margin: var(--s-1) 0 0; color: var(--ink-soft); max-width: 60ch; }