/* =========================================================================
   Q-A Studio — prototype v0.1
   Visual identity v1 locked 2026-05-22 (Cemento + Geist + JetBrains Mono +
   graphite-blue + brick-red).
   Mobile-first; desktop is enhancement layer.
   Throwaway prototype — design ports, code does not.
   ========================================================================= */

/* --- Tokens ------------------------------------------------------------- */

:root {
  /* Palette — Cemento */
  --bg: #F4F4F2;
  --ink: #15171A;
  --stone: #6E737A;
  --hairline: #D5D7D9;
  --white: #FFFFFF;

  /* Dual accent */
  --graphite: #4A5566;   /* structural — links, eyebrows, dividers */
  --brick: #A8332B;      /* editorial — status, end-of-section marks */

  /* Type */
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* Spacing (8px base) */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-5: 48px;
  --s-6: 64px;
  --s-7: 96px;
  --s-8: 128px;

  /* Layout */
  --content-width: 920px;
  --wide-width: 1280px;
  --gutter: 24px;
}

@media (min-width: 768px) {
  :root { --gutter: 40px; }
}

@media (min-width: 1024px) {
  :root { --gutter: 64px; }
}

/* --- Reset / base ------------------------------------------------------- */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--graphite); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--ink); }

img { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; }

p { margin: 0 0 var(--s-2); }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

/* --- Type scale --------------------------------------------------------- */

h1, h2, h3, h4 {
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin: 0;
}

h1 { font-size: 32px; }
h2 { font-size: 24px; }
h3 { font-size: 20px; }

.eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--graphite);
  margin: 0 0 var(--s-3);
  display: block;
}

.metadata,
.caption {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  color: var(--stone);
  letter-spacing: 0.01em;
  line-height: 1.5;
}

.status-pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brick);
  margin-bottom: var(--s-1);
}

.status-pill::before {
  content: "●";
  font-size: 8px;
  vertical-align: middle;
  margin-right: 5px;
  position: relative;
  top: -1px;
}

/* Wordmark separator — the dot in Q•A. Optically reduced bullet that
   harmonizes with the logo's centered dot; scales with surrounding type. */
.qa-dot {
  font-size: 0.62em;
  vertical-align: 0.12em;
}

.hero-positioning {
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 500;
  margin: 0;
  max-width: 16em;
}

.large-title {
  font-size: 36px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 500;
  margin: 0 0 var(--s-3);
}

/* --- Accent rules ------------------------------------------------------- */

.accent-rule {
  width: 48px;
  height: 2px;
  background: var(--brick);
  margin: var(--s-2) 0 var(--s-3);
  border: 0;
}

.hairline {
  width: 100%;
  height: 1px;
  background: var(--hairline);
  margin: var(--s-4) 0;
  border: 0;
}

/* --- Layout ------------------------------------------------------------- */

.container {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.container-wide {
  max-width: var(--wide-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section {
  padding: var(--s-6) 0;
  border-top: 1px solid var(--hairline);
}

.section:first-of-type { border-top: none; }

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

/* --- Header ------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg);
  padding: var(--s-2) var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}

.site-header.scrolled { border-bottom-color: var(--hairline); }

.site-header .wordmark {
  display: flex;
  align-items: center;
  color: var(--ink);
  line-height: 1;
}

.site-header .wordmark img {
  display: block;
  height: 22px;
  width: auto;
}

.site-header .wordmark:hover { opacity: .8; }

.nav-primary {
  display: none;
}

.nav-primary a {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  color: var(--graphite);
  margin: 0 var(--s-2);
  letter-spacing: -0.005em;
}

@media (min-width: 1024px) {
  .nav-primary a { margin: 0 var(--s-3); }
}

.nav-primary a {
  position: relative;
  padding-bottom: 4px;
}

.nav-primary a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  background: var(--brick);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .18s ease;
}

.nav-primary a:hover { color: var(--ink); }
.nav-primary a:hover::after { transform: scaleX(1); }

.nav-primary a.active {
  color: var(--ink);
  font-weight: 600;
}

.nav-primary a.active::after { transform: scaleX(1); }

.lang-toggle {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--graphite);
}

.lang-toggle .current { color: var(--ink); }

.menu-toggle {
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 20px;
  color: var(--ink);
  line-height: 1;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.header-right {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

@media (min-width: 768px) {
  .site-header { padding: var(--s-3) var(--gutter); }
  .menu-toggle { display: none; }
  .nav-primary { display: flex; align-items: center; }
  .site-header .wordmark img { height: 26px; }
}

/* --- Mobile nav overlay ------------------------------------------------- */

.nav-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 200;
  padding: var(--s-3) var(--gutter);
  display: none;
  flex-direction: column;
}

.nav-overlay.open { display: flex; }

.nav-overlay .close {
  align-self: flex-end;
  background: none;
  border: 0;
  font-family: var(--font-mono);
  font-size: 24px;
  color: var(--ink);
  line-height: 1;
}

.nav-overlay .nav-list {
  margin-top: var(--s-6);
}

.nav-overlay .nav-list-primary a {
  display: block;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
  padding: var(--s-2) 0;
}

.nav-overlay .nav-list-primary a.active {
  font-weight: 700;
  color: var(--brick);
}

.nav-overlay .nav-list-secondary a {
  display: block;
  font-size: 18px;
  color: var(--graphite);
  padding: var(--s-1) 0;
}

.nav-overlay .nav-list-legal {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--stone);
  margin-top: var(--s-4);
}

.nav-overlay .nav-list-legal a {
  color: var(--stone);
  margin-right: var(--s-2);
}

.nav-overlay .nav-utility {
  margin-top: auto;
  padding-top: var(--s-5);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--stone);
}

.nav-overlay .nav-utility .lang-toggle {
  margin-bottom: var(--s-3);
  font-size: 13px;
}

/* --- Hero (project / page) --------------------------------------------- */

.hero-bleed {
  width: 100%;
  background: var(--ink);
  overflow: hidden;
}

.hero-bleed img {
  width: 100%;
  display: block;
  object-fit: cover;
  object-position: center 42%;
  aspect-ratio: 3 / 2;
}

/* Orientation-aware project hero: a landscape shot fills a calm 3:2 bleed;
   a portrait shot is shown whole (no crop), centred on the dark field. */
.hero-bleed.is-portrait img {
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  aspect-ratio: auto;
  object-fit: contain;
  max-height: 86vh;
}

@media (min-width: 1024px) {
  .hero-bleed.is-landscape img { max-height: 84vh; }
}

/* --- Metadata strip (below hero) ---------------------------------------- */

.meta-strip {
  padding: var(--s-3) var(--gutter);
  border-bottom: 1px solid var(--hairline);
}

.meta-strip-inner {
  max-width: var(--wide-width);
  margin: 0 auto;
}

.meta-strip .project-name {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: var(--s-1) 0;
}

.meta-strip .meta-line {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--stone);
  margin-bottom: var(--s-1);
}

@media (min-width: 768px) {
  .meta-strip-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: var(--s-3);
  }

  .meta-strip .project-name { font-size: 28px; }
}

/* --- Positioning band --------------------------------------------------- */

.positioning-band {
  padding: var(--s-7) var(--gutter);
}

.positioning-band-inner {
  max-width: var(--content-width);
  margin: 0 auto;
}

.positioning-band .hero-positioning {
  font-size: 28px;
}

@media (min-width: 768px) {
  .positioning-band { padding: var(--s-7) var(--gutter); }
  .positioning-band .hero-positioning { font-size: 40px; }
}

@media (min-width: 1024px) {
  .positioning-band { padding: var(--s-8) var(--gutter); }
  .positioning-band .hero-positioning { font-size: 52px; }
}

/* Projects index lede — curated-not-complete note under "Selected work" */
.index-lede {
  max-width: 48ch;
  margin-top: var(--s-2);
  color: var(--stone);
  font-size: 16px;
  line-height: 1.55;
}

/* --- Project cards (grid) ---------------------------------------------- */

.project-grid {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: repeat(2, 1fr);
}

/* Mobile + tablet: third card spans both columns at a wider aspect,
   making the set read as 2-up + 1-wide instead of leaving an orphan */
.project-grid .project-card:nth-child(3) {
  grid-column: 1 / -1;
}

.project-grid .project-card:nth-child(3) .project-card-img {
  aspect-ratio: 16 / 10;
}

@media (min-width: 768px) {
  .project-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
}

@media (min-width: 1024px) {
  .project-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }

  /* Desktop: third card behaves like the others */
  .project-grid .project-card:nth-child(3) { grid-column: auto; }
  .project-grid .project-card:nth-child(3) .project-card-img { aspect-ratio: 4 / 5; }
}

/* Projects index: a full uniform grid — opt out of the home preview's
   "3rd card is a wide feature" treatment so every card is an equal 4:5. */
.project-index-grid .project-card:nth-child(3) { grid-column: auto; }
.project-index-grid .project-card:nth-child(3) .project-card-img { aspect-ratio: 4 / 5; }
.project-index-grid .project-card-img img { object-position: center 42%; }

/* --- Projects index: type filter --------------------------------------- */
.index-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  margin-top: var(--s-3);
}

.filter-chip {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--stone);
  background: transparent;
  border: 1px solid var(--hairline);
  padding: 7px 13px;
  border-radius: 2px;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

.filter-chip:hover { border-color: var(--ink); color: var(--ink); }

.filter-chip.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}

.filter-chip .fc-n {
  margin-left: 5px;
  font-size: 10px;
  opacity: .55;
}

.project-card {
  display: block;
  color: inherit;
}

.project-card:hover { color: inherit; }
.project-card:hover .project-card-img img { opacity: .92; }

.project-card-img {
  background: var(--ink);
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.project-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .25s ease;
}

.project-card-meta {
  padding-top: var(--s-2);
}

.project-card-name {
  font-size: 16px;
  font-weight: 500;
  margin: var(--s-1) 0 4px;
  letter-spacing: -0.005em;
}

.project-card-info {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--stone);
  letter-spacing: 0.01em;
}

@media (min-width: 768px) {
  .project-card-name { font-size: 17px; }
}

/* --- Gallery (project detail) — orientation-aware ----------------------
   Landscape shots run full-bleed at their true ratio; portraits are paired
   two-up (or centred when alone). No forced crop — the photograph dictates
   the slot, not the other way round. */

.gallery-item { margin-bottom: var(--s-5); }

/* Landscape / full-width: honour the native ratio, no crop. */
.gallery-item.gallery-wide img {
  width: 100%;
  display: block;
  height: auto;
}

/* Portrait pair: two verticals share a row, matched height via 4:5 cover. */
.gallery-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
  margin-bottom: var(--s-5);
}

.gallery-pair img {
  width: 100%;
  height: 100%;
  display: block;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--ink);
}

/* Lone portrait: centred, narrower column, shown whole. */
.gallery-portrait-single {
  margin: 0 auto var(--s-5);
  max-width: 78%;
}

@media (min-width: 768px) {
  .gallery-pair { gap: var(--s-3); }
  .gallery-portrait-single { max-width: 58%; }
}

.gallery-portrait-single img {
  width: 100%;
  display: block;
  height: auto;
}

/* --- Narrative + images flow (project detail) --------------------------
   Orientation-driven editorial article: lead text beside a portrait;
   portraits run side-by-side with text (alternating sides), landscapes
   break full-width between paragraphs; standalone text sits in a narrow
   reading column. Mobile: every block stacks (text then image). */

.narrative { padding: var(--s-6) 0 var(--s-3); }

/* Reading column — standalone paragraphs between full-width images */
.narr-text {
  max-width: 62ch;
  margin: 0 auto var(--s-5);
  padding: 0 var(--gutter);
}
.narr-text p:last-child { margin-bottom: 0; }

/* Lead paragraph — a touch larger, sets the tone */
.narr-text.lead,
.narr-row.lead .narr-row-text {
  font-size: 19px;
  line-height: 1.55;
  letter-spacing: -0.01em;
}
@media (min-width: 768px) {
  .narr-text.lead,
  .narr-row.lead .narr-row-text { font-size: 21px; }
}

/* Side-by-side text + portrait */
.narr-row {
  max-width: var(--wide-width);
  margin: 0 auto var(--s-6);
  padding: 0 var(--gutter);
  display: grid;
  gap: var(--s-3);
}
.narr-row-figure { background: var(--ink); overflow: hidden; }
.narr-row-figure img { width: 100%; height: auto; display: block; }
.narr-row-text p:last-child { margin-bottom: 0; }

@media (min-width: 860px) {
  .narr-row { gap: var(--s-6); align-items: center; }
  .narr-row.img-right { grid-template-columns: 1fr 0.78fr; }
  .narr-row.img-left  { grid-template-columns: 0.78fr 1fr; }
  .narr-row.img-right .narr-row-text   { grid-column: 1; grid-row: 1; }
  .narr-row.img-right .narr-row-figure { grid-column: 2; grid-row: 1; }
  .narr-row.img-left  .narr-row-text   { grid-column: 2; grid-row: 1; }
  .narr-row.img-left  .narr-row-figure { grid-column: 1; grid-row: 1; }
  .narr-row-text { max-width: 52ch; }
}

/* Full-width landscape break — native ratio, no crop */
.narr-full {
  max-width: var(--wide-width);
  margin: 0 auto var(--s-6);
  padding: 0 var(--gutter);
}
.narr-full img { width: 100%; height: auto; display: block; background: var(--ink); }

/* Tail blocks: leftover portraits (paired) / lone portrait */
.narr-pair {
  max-width: var(--wide-width);
  margin: 0 auto var(--s-6);
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
}
@media (min-width: 768px) { .narr-pair { gap: var(--s-3); } }
.narr-pair img {
  width: 100%; height: 100%; display: block;
  aspect-ratio: 4 / 5; object-fit: cover; background: var(--ink);
}
.narr-single {
  max-width: 640px;
  margin: 0 auto var(--s-6);
  padding: 0 var(--gutter);
}
.narr-single img { width: 100%; height: auto; display: block; }

.gallery-item .caption-strip {
  padding: var(--s-2) var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-2);
  border-bottom: 1px solid var(--hairline);
}

.caption-strip .caption-text,
.caption-strip .photo-credit {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--stone);
  letter-spacing: 0.01em;
}

/* --- CTA ---------------------------------------------------------------- */

.cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--graphite);
  padding: var(--s-1) 0;
  border-bottom: 1px solid var(--graphite);
  transition: color .15s, border-color .15s;
}

.cta:hover { color: var(--ink); border-bottom-color: var(--ink); }

.cta-arrow::after { content: "→"; margin-left: 4px; }

.cta-block {
  text-align: center;
  padding: var(--s-7) var(--gutter);
}

.cta-block h2 {
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: 0 0 var(--s-4);
}

@media (min-width: 1024px) {
  .cta-block h2 { font-size: 36px; }
}

/* --- Filter (projects index) ------------------------------------------- */

.filter-bar-mobile {
  padding: var(--s-2) var(--gutter);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.filter-trigger {
  background: none;
  border: 0;
  padding: var(--s-1) 0;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--graphite);
  display: flex;
  align-items: center;
  gap: var(--s-1);
}

.filter-bar-desktop {
  display: none;
}

@media (min-width: 1024px) {
  .filter-bar-mobile { display: none; }
  .filter-bar-desktop {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    padding: var(--s-3) var(--gutter);
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
    align-items: center;
  }

  .filter-bar-desktop .filter-chip {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--graphite);
    background: none;
    border: 1px solid var(--hairline);
    padding: 6px 12px;
    border-radius: 0;
  }

  .filter-bar-desktop .filter-chip.active {
    border-color: var(--ink);
    color: var(--ink);
  }

  .filter-bar-desktop .result-count {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--stone);
  }
}

/* --- About / Method / Contact: prose sections -------------------------- */

.prose {
  max-width: 36em;
  font-size: 16px;
  line-height: 1.65;
}

.prose p { margin-bottom: var(--s-3); }

.prose p:last-child { margin-bottom: 0; }

@media (min-width: 1024px) {
  .prose { font-size: 17px; }
  .large-title { font-size: 56px; }
}

/* --- Legal pages (privacy / cookies / terms) --------------------------- */
.legal-prose { max-width: 44em; }
.legal-prose h2 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: var(--s-5) 0 var(--s-2);
}
.legal-prose h2:first-of-type { margin-top: 0; }
.legal-prose h3 {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--graphite);
  margin: var(--s-3) 0 var(--s-1);
}
.legal-prose ul { margin: 0 0 var(--s-3) var(--s-3); padding: 0; }
.legal-prose li { margin-bottom: var(--s-1); }
.legal-prose a { color: var(--graphite); text-underline-offset: 2px; }
.legal-prose strong { font-weight: 600; color: var(--ink); }
.legal-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--stone);
  margin-top: var(--s-5);
  padding-top: var(--s-3);
  border-top: 1px solid var(--hairline);
}

/* --- Two-col compositional block --------------------------------------- */

.two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
}

@media (min-width: 768px) {
  .two-col {
    grid-template-columns: 2fr 1fr;
    gap: var(--s-5);
    align-items: start;
  }
}

/* --- Section header (eyebrow + title) ---------------------------------- */

.section-head {
  margin-bottom: var(--s-4);
}

.section-head .eyebrow { margin-bottom: var(--s-2); }

/* --- About — principal profile sections -------------------------------- */

.profile-section {
  padding: var(--s-6) 0;
  border-top: 1px solid var(--hairline);
}

.profile-section .profile-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--graphite);
  margin-bottom: var(--s-2);
  display: block;
}

.profile-section h2 {
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s-4);
  line-height: 1.05;
}

.profile-section .role-line {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--stone);
  margin: 0 0 var(--s-4);
  letter-spacing: 0.01em;
}

.profile-section .portrait {
  background: var(--ink);
  margin: 0 0 var(--s-4);
  overflow: hidden;
}

.profile-section .portrait img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.profile-section .profile-body {
  max-width: 36em;
}

.profile-section .profile-body p {
  margin-bottom: var(--s-3);
  line-height: 1.65;
  font-size: 16px;
}

.profile-section .profile-body p:last-child { margin-bottom: 0; }

.profile-section .profile-credentials {
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--stone);
  line-height: 1.7;
  max-width: 36em;
}

.profile-section .profile-credentials strong {
  color: var(--ink);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 2px;
}

@media (min-width: 768px) {
  .profile-section { padding: var(--s-7) 0; }
  .profile-section h2 { font-size: 44px; }
  .profile-section .profile-body p { font-size: 17px; }

  .profile-section .profile-grid {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: var(--s-6);
    align-items: start;
  }
}

@media (min-width: 1024px) {
  .profile-section h2 { font-size: 52px; }
  .profile-section .profile-grid {
    grid-template-columns: 5fr 6fr;
    gap: var(--s-7);
  }
}

/* --- About — narrative opening ----------------------------------------- */

.about-opening {
  padding: var(--s-7) 0 var(--s-6);
}

.about-opening .opening-title {
  font-size: 36px;
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 500;
  margin: var(--s-3) 0 var(--s-5);
  max-width: 14em;
}

.about-opening .opening-prose {
  max-width: 36em;
}

.about-opening .opening-prose p {
  font-size: 16px;
  line-height: 1.65;
  margin-bottom: var(--s-3);
}

@media (min-width: 768px) {
  .about-opening { padding: var(--s-8) 0 var(--s-7); }
  .about-opening .opening-title { font-size: 56px; }
  .about-opening .opening-prose p { font-size: 18px; line-height: 1.6; }
}

@media (min-width: 1024px) {
  .about-opening .opening-title { font-size: 72px; }
}

/* --- About — woven facts (teaching / awards / collaborators) ----------- */

.woven-facts {
  padding: var(--s-6) 0;
  border-top: 1px solid var(--hairline);
}

.woven-facts .fact-block {
  max-width: 36em;
  margin-bottom: var(--s-5);
}

.woven-facts .fact-block:last-child { margin-bottom: 0; }

.woven-facts .fact-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--graphite);
  margin-bottom: var(--s-2);
  display: block;
}

.woven-facts .fact-prose {
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: -0.005em;
}

/* keep multi-part facts (e.g. an address: city · street) from wrapping mid-phrase */
.nowrap { white-space: nowrap; }

@media (min-width: 768px) {
  .woven-facts .fact-prose { font-size: 18px; }
}

/* --- Press list (for project detail + press page) ---------------------- */

.press-item {
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--hairline);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-2);
  align-items: baseline;
}

.press-item:last-child { border-bottom: 0; }

.press-item .outlet {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 15px;
  color: var(--ink);
}

.press-item .press-date {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--stone);
}

.press-item .press-link {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* --- Contact form ------------------------------------------------------ */

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  max-width: 32em;
}

.contact-form label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--graphite);
  display: block;
  margin-bottom: var(--s-1);
}

.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100%;
  background: var(--bg);
  border: 0;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 16px;
  color: var(--ink);
  padding: var(--s-1) 0;
  letter-spacing: -0.005em;
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  outline: none;
  border-bottom-color: var(--ink);
}

.contact-form textarea {
  min-height: 160px;
  resize: vertical;
  /* Boxed, not underline-only — the primary field reads clearly as writable */
  border: 1px solid var(--hairline);
  border-radius: 2px;
  padding: var(--s-2);
  margin-top: var(--s-1);
}

.contact-form textarea:focus {
  border-color: var(--ink);
}

.contact-form button[type="submit"] {
  margin-top: var(--s-3);
  background: var(--ink);
  color: var(--bg);
  border: 0;
  padding: var(--s-2) var(--s-4);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  align-self: flex-start;
  transition: background .15s;
}

.contact-form button[type="submit"]:hover { background: var(--graphite); }

.contact-form button[type="submit"]:disabled { opacity: .5; cursor: default; }

/* Honeypot — removed from view, left in the a11y tree but out of tab order */
.contact-form .hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Consent checkbox row — reads as fine print, not a labelled field */
.contact-form .consent label {
  display: flex;
  align-items: flex-start;
  gap: var(--s-1);
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.5;
  color: var(--stone);
  margin-bottom: 0;
}

.contact-form .consent input {
  width: auto;
  flex: none;
  margin-top: 3px;
  border: 0;
  padding: 0;
  background: none;
  accent-color: var(--ink);
}

.contact-form .consent a {
  color: var(--graphite);
  text-underline-offset: 2px;
}

/* Submission feedback */
.contact-form .form-status {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  margin: 0;
  color: var(--stone);
}

.contact-form .form-status--ok { color: var(--ink); }
.contact-form .form-status--error { color: #9B4A3A; } /* restrained brick — functional error feedback only */

/* --- Footer ------------------------------------------------------------ */

.site-footer {
  background: var(--bg);
  border-top: 1px solid var(--hairline);
  padding: var(--s-6) var(--gutter) var(--s-3);
  margin-top: var(--s-6);
}

.site-footer-inner {
  max-width: var(--wide-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
}

.footer-brand .wordmark {
  display: inline-block;
  color: var(--ink);
  margin-bottom: var(--s-2);
  line-height: 1;
}

.footer-brand .wordmark img {
  display: block;
  height: 32px;
  width: auto;
}

.footer-brand .tagline {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--graphite);
  max-width: 20em;
}

.footer-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
}

.footer-links a {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--graphite);
  padding: 4px 0;
}

.footer-locations {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--stone);
  line-height: 1.5;
}

.footer-locations .loc-label {
  color: var(--ink);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.footer-bottom {
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--stone);
}

.footer-bottom .social a {
  margin-right: var(--s-2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

@media (min-width: 768px) {
  .site-footer-inner {
    grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
    gap: var(--s-5);
  }

  .footer-links { grid-template-columns: 1fr; }

  .footer-locations { grid-template-columns: 1fr; }

  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

/* --- Prev/next nav (project detail) ------------------------------------ */

.prev-next {
  border-top: 1px solid var(--hairline);
  padding: var(--s-3) var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
}

.prev-next a {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.prev-next .label {
  display: block;
  color: var(--stone);
  margin-bottom: 4px;
}

.prev-next .name {
  font-family: var(--font-sans);
  font-size: 15px;
  text-transform: none;
  letter-spacing: -0.005em;
  color: var(--ink);
}

.prev-next .next { text-align: right; }

/* --- Utility ------------------------------------------------------------ */

.text-center { text-align: center; }
.muted { color: var(--stone); }
.no-mobile { display: none; }
@media (min-width: 768px) { .no-mobile { display: inline; } .no-desktop { display: none; } }

/* =========================================================================
   Homepage v2 — narrative arc components
   (carousel, pull-quote break, studio positioning, method pillars,
   reviews, press strip, people, conversation block)
   ========================================================================= */

/* --- Hero carousel ------------------------------------------------------ */

.hero-carousel {
  position: relative;
  background: var(--bg);
}

.hero-track {
  position: relative;
}

.hero-slide {
  display: none;
}

.hero-slide.active {
  display: block;
}

.hero-slide .hero-img {
  width: 100%;
  background: var(--ink);
  overflow: hidden;
}

/* Hero photography is curated landscape; a calm 3:2 reads architectural
   without the aggressive top/bottom loss of a 16:9 crop. object-position
   biases slightly above centre, where the built subject usually sits. */
.hero-slide .hero-img img {
  width: 100%;
  display: block;
  object-fit: cover;
  object-position: center 42%;
  aspect-ratio: 3 / 2;
}

@media (min-width: 1024px) {
  .hero-slide .hero-img img {
    max-height: 80vh;
  }
}

.hero-slide .hero-meta {
  padding: var(--s-3) var(--gutter);
  border-bottom: 1px solid var(--hairline);
}

.hero-slide .hero-meta .project-name {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: var(--s-1) 0;
}

.hero-slide .hero-meta .project-name a {
  color: var(--ink);
}

.hero-slide .hero-meta .project-name a:hover {
  color: var(--brick);
}

.hero-slide .hero-meta .meta-line {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--stone);
  margin-bottom: var(--s-1);
}

@media (min-width: 768px) {
  .hero-slide .hero-meta .project-name { font-size: 28px; }
}

/* Carousel controls — arrows */
.hero-nav {
  position: absolute;
  top: 38%;
  transform: translateY(-50%);
  background: rgba(244, 244, 242, 0.85);
  border: 0;
  width: 44px;
  height: 44px;
  font-family: var(--font-mono);
  font-size: 28px;
  color: var(--ink);
  line-height: 1;
  cursor: pointer;
  z-index: 10;
  transition: background .15s, color .15s;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.hero-nav:hover {
  background: var(--bg);
  color: var(--brick);
}

.hero-prev { left: var(--gutter); }
.hero-next { right: var(--gutter); }

@media (min-width: 768px) {
  .hero-nav { display: flex; }
}

/* Carousel controls — dots */
.hero-dots {
  display: flex;
  justify-content: center;
  gap: var(--s-1);
  padding: var(--s-3) 0;
}

.hero-dot {
  background: transparent;
  border: 1px solid var(--stone);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

.hero-dot:hover {
  border-color: var(--ink);
}

.hero-dot.active {
  background: var(--ink);
  border-color: var(--ink);
}

/* --- Section CTA helpers ------------------------------------------------ */

.section-cta-center {
  margin-top: var(--s-5);
  text-align: center;
}

.section-cta-left {
  margin-top: var(--s-4);
}

/* --- Studio positioning ------------------------------------------------- */

.studio-positioning-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  align-items: center;
}

@media (min-width: 768px) {
  .studio-positioning-grid {
    grid-template-columns: 6fr 5fr;
    gap: var(--s-6);
  }
}

.studio-positioning-img img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--ink);
  display: block;
}

@media (min-width: 768px) {
  .studio-positioning-img img { aspect-ratio: 3 / 4; }
}

/* --- Pull-quote image break -------------------------------------------- */

.pull-quote-block {
  position: relative;
  background: var(--ink);
  overflow: hidden;
}

.pull-quote-img {
  width: 100%;
}

.pull-quote-img img {
  width: 100%;
  display: block;
  object-fit: cover;
  aspect-ratio: 4 / 5;
}

@media (min-width: 768px) {
  .pull-quote-img img {
    aspect-ratio: 16 / 9;
    max-height: 72vh;
  }
}

.pull-quote-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(21, 23, 26, 0.35) 0%, rgba(21, 23, 26, 0.65) 100%);
  pointer-events: none;
}

.pull-quote-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--s-5) var(--gutter);
  text-align: center;
  pointer-events: none;
}

.pull-quote-text blockquote {
  margin: 0 auto;
  max-width: 24em;
  pointer-events: auto;
}

.pull-quote-text .quote-en {
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s-3);
  color: var(--bg);
  font-weight: 500;
}

.pull-quote-text .quote-it {
  font-family: var(--font-mono);
  font-size: 12px;
  font-style: italic;
  color: rgba(244, 244, 242, 0.65);
  margin: 0 0 var(--s-3);
  line-height: 1.55;
  letter-spacing: 0.01em;
}

.pull-quote-text cite {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bg);
  font-style: normal;
  display: block;
  opacity: 0.7;
}

@media (min-width: 768px) {
  .pull-quote-text .quote-en { font-size: 32px; }
  .pull-quote-text .quote-it { font-size: 13px; }
  .pull-quote-text blockquote { max-width: 22em; }
}

@media (min-width: 1024px) {
  .pull-quote-text .quote-en { font-size: 44px; line-height: 1.2; }
  .pull-quote-text blockquote { max-width: 20em; }
}

/* --- Method pillars (homepage) ----------------------------------------- */

.method-pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  margin-top: var(--s-3);
}

@media (min-width: 768px) {
  .method-pillars {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-5);
  }
}

.method-pillar::before {
  content: "";
  display: block;
  width: 72px;          /* mobile: short fixed rule, identical across all three */
  height: 2px;
  background: var(--brick);
  margin-bottom: var(--s-2);
}

@media (min-width: 768px) {
  .method-pillar::before {
    width: 100%;        /* desktop: full column width */
  }
}

.method-pillar .pillar-eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  display: block;
  margin-bottom: var(--s-2);
}

.method-pillar p {
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
  color: var(--ink);
}

@media (min-width: 768px) {
  .method-pillar p { font-size: 16px; }
}

/* --- Reviews ----------------------------------------------------------- */

.reviews-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  margin-top: var(--s-3);
}

@media (min-width: 768px) {
  .reviews-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-5);
  }
  /* Equal-height cards so the rule + attribution align at the bottom across
     all three, regardless of quote length. Mobile (single column) is untouched. */
  .review-card { display: flex; flex-direction: column; height: 100%; }
  .review-card cite { margin-top: auto; }
}

.review-card blockquote {
  margin: 0 0 var(--s-3);
  padding: 0;
}

.review-card blockquote p {
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: -0.01em;
  font-weight: 500;
  margin: 0;
  color: var(--ink);
}

@media (min-width: 1024px) {
  .review-card blockquote p { font-size: 20px; }
}

.review-card cite {
  font-style: normal;
  display: block;
  padding-top: var(--s-2);
  border-top: 1px solid var(--hairline);
}

.review-card .review-name {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  color: var(--ink);
  display: block;
  margin-bottom: 2px;
}

.review-card .review-project {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--stone);
  letter-spacing: 0.01em;
  display: block;
}

/* --- Press strip (homepage outlet placeholders) ------------------------ */

.press-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--s-4);
  margin-top: var(--s-3);
}

.press-logo {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.005em;
  color: var(--stone);
  opacity: 0.72;
  transition: opacity .15s, color .15s;
  white-space: nowrap;
}

.press-logo:hover {
  opacity: 1;
  color: var(--ink);
}

@media (min-width: 768px) {
  .press-strip { gap: var(--s-6); }
  .press-logo { font-size: 22px; }
}

/* --- Studio / People block --------------------------------------------- */

.people-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
}

@media (min-width: 768px) {
  .people-grid {
    grid-template-columns: 5fr 7fr;
    gap: var(--s-6);
    align-items: start;
  }
}

.people-portraits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
}

@media (min-width: 768px) {
  .people-portraits { gap: var(--s-3); }
}

.people-portraits figure {
  margin: 0;
}

.people-portraits img {
  width: 100%;
  background: var(--ink);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}

.people-portraits figcaption {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--graphite);
  margin-top: var(--s-1);
}

/* --- Conversation block (CTA, dark) ------------------------------------ */

.conversation-block {
  background: var(--ink);
  color: var(--bg);
  padding: var(--s-7) var(--gutter);
  margin-top: var(--s-6);
}

.conversation-inner {
  max-width: var(--content-width);
  margin: 0 auto;
  text-align: center;
}

.conversation-eyebrow {
  color: var(--hairline) !important;
  margin-bottom: var(--s-3);
}

.conversation-title {
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 500;
  margin: 0 0 var(--s-3);
  color: var(--bg);
}

@media (min-width: 768px) {
  .conversation-title { font-size: 44px; }
}

@media (min-width: 1024px) {
  .conversation-title { font-size: 56px; }
}

.conversation-body {
  font-size: 16px;
  line-height: 1.6;
  color: var(--hairline);
  max-width: 30em;
  margin: 0 auto var(--s-5);
}

@media (min-width: 768px) {
  .conversation-body { font-size: 17px; }
}

.conversation-cta {
  color: var(--bg);
  border-bottom-color: var(--bg);
}

.conversation-cta:hover {
  color: var(--brick);
  border-bottom-color: var(--brick);
}

/* When .conversation-block precedes the footer, eat the footer's top margin */
.conversation-block + .site-footer {
  margin-top: 0;
}

/* --- Projects index: editorial row layout ----------------------------- */
/* One row per project. Mobile: lead full-width, 2 thumbs side-by-side
   below. Desktop: lead left (large), 2 thumbs stacked right. */

.project-rows {
  display: flex;
  flex-direction: column;
}

.project-row {
  display: block;
  color: inherit;
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--hairline);
}

.project-row:first-child {
  padding-top: var(--s-3);
}

.project-row:last-child {
  border-bottom: 0;
}

.project-row:hover { color: inherit; }
.project-row:hover .project-row-cta {
  color: var(--ink);
  border-bottom-color: var(--ink);
}
.project-row:hover .project-row-lead img,
.project-row:hover .project-row-thumb img {
  opacity: 0.92;
}

.project-row-header {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-2);
  align-items: end;
  margin-bottom: var(--s-3);
}

@media (min-width: 768px) {
  .project-row-header {
    grid-template-columns: 1fr auto;
    gap: var(--s-3);
  }
}

.project-row-name {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: var(--s-1) 0 4px;
  line-height: 1.1;
  color: var(--ink);
}

.project-row-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--stone);
  letter-spacing: 0.01em;
}

.project-row-cta {
  align-self: end;
  white-space: nowrap;
  justify-self: start;
}

@media (min-width: 768px) {
  .project-row-cta { justify-self: end; }
  .project-row-name { font-size: 28px; }
}

@media (min-width: 1024px) {
  .project-row-name { font-size: 36px; }
}

/* Image layout */

.project-row-images {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-2);
}

.project-row-lead {
  background: var(--ink);
  overflow: hidden;
}

.project-row-lead img {
  width: 100%;
  display: block;
  object-fit: cover;
  aspect-ratio: 16 / 10;
  transition: opacity .25s ease;
}

/* Desktop: pin the row's aspect-ratio on the container so the row height
   is fixed by the box, not by the taller column's intrinsic content.
   Both columns then fill via object-fit: cover and heights always align. */
@media (min-width: 768px) {
  .project-row-images {
    grid-template-columns: 7fr 3fr;
    gap: var(--s-3);
    align-items: stretch;
    aspect-ratio: 5 / 2;
  }

  .project-row-lead img {
    height: 100%;
    aspect-ratio: auto;
  }
}

/* Thumbs — mobile: 2 columns; desktop: 1 column, stretches to lead height */

.project-row-thumbs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  gap: var(--s-2);
}

@media (min-width: 768px) {
  .project-row-thumbs {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    gap: var(--s-3);
    height: 100%;
  }
}

.project-row-thumb {
  background: var(--ink);
  overflow: hidden;
}

.project-row-thumb img {
  width: 100%;
  display: block;
  object-fit: cover;
  aspect-ratio: 4 / 5;
  transition: opacity .25s ease;
}

@media (min-width: 768px) {
  .project-row-thumb {
    height: 100%;
  }
  .project-row-thumb img {
    aspect-ratio: auto;
    height: 100%;
  }
}