/*
 * Application stylesheet (Propshaft, served as-is).
 *
 * This file is the site-wide design system for the repositioned author site.
 * It ports the approved mockup (palette, typography, and the component classes
 * the views compose with). Keep it the single source of truth for visual
 * tokens: views use semantic classes (.hero, .cat-card, .room, .btn, .label)
 * rather than repeating raw hex values, so a palette change happens here once.
 */

:root {
  /* Palette — cool plaster, a gallery identity. Prussian is the single accent;
     the paintings carry the colour on the page. No terracotta, copper or cream. */
  --paper: #F4F5F2;
  --vellum: #EBEDE8;
  --ink: #1E2327;
  --muted: #5D646A;
  --hairline: #DBDED8;
  --prussian: #2B3D47;
  --prussian-light: #4E6672;
  --gallery-dark: #181C1F;

  /* Type — literary, engineered, restrained. Chosen for the audience: readers,
     collectors, and systems-minded operators.
     Spectral: titles (600) and long-form reading (400), a quiet literary serif
       built for the screen — not the ubiquitous elegant-serif default.
     IBM Plex Mono: navigation and small labels, the "systems" texture the site
       is framed around, and a nod to the engineering credibility. */
  --serif: 'Spectral', Georgia, 'Times New Roman', serif;
  --reading: 'Spectral', Georgia, 'Times New Roman', serif;
  --sans: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  /* Legacy aliases → new tokens, so existing views inherit the new system
     without touching every usage. One accent only: prussian. */
  --bone: var(--paper);
  --card: var(--vellum);
  --ink-soft: var(--muted);
  --rule: var(--hairline);
  --verdigris: var(--prussian);
  --verdigris-deep: var(--prussian);
  --oxide: var(--muted);
  --font-display: var(--serif);
  --font-body: var(--reading);
}

.font-display { font-family: var(--serif); }
.font-body { font-family: var(--reading); }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--reading);
  font-size: 18px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}

.frame { max-width: 1120px; margin: 0 auto; padding: 0 clamp(28px, 6vw, 64px); }

.ds h1, .ds h2, .ds h3,
.hero h1, .sec-head h2, .wing h3, .room h3, .cat-body h3, .agents h3, .notes h2 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.01em;
}
.ds em, em.serif { font-family: var(--serif); font-style: italic; }

a { color: var(--verdigris); }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid var(--verdigris);
  outline-offset: 3px;
}

.label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
}

.btn {
  display: inline-block;
  font-family: var(--mono);
  font-size: 13.5px;
  letter-spacing: .03em;
  text-decoration: none;
  padding: 14px 24px;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.btn:hover { background: var(--ink); color: var(--bone); }
.btn-ink { background: var(--ink); color: var(--bone); }
.btn-ink:hover { background: var(--verdigris); border-color: var(--verdigris); }
.btn-block { display: block; width: 100%; text-align: center; }

/* NAV */
.site-nav {
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  background: var(--bone);
  z-index: 40;
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 70px; gap: 18px; }
.wordmark {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.nav-links { display: flex; gap: 26px; align-items: center; }
.nav-links a {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .06em;
  text-decoration: none;
  color: var(--ink-soft);
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); }
.nav-cta { border: 1px solid var(--ink); padding: 8px 14px; color: var(--ink) !important; }
.nav-cta:hover { background: var(--ink); color: var(--bone) !important; }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; color: var(--ink); }
@media (max-width: 920px) {
  .nav-links a:not(.nav-cta) { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-cta { display: none; }
}
.mobile-menu { display: none; border-top: 1px solid var(--rule); padding-top: 14px; padding-bottom: 20px; }
.mobile-menu.open { display: block; }
.mobile-menu a {
  display: block;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .05em;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 10px 0;
}
.mobile-menu a:hover { color: var(--ink); }

/* Flash. The success notice used to be a pale grey slab that read as chrome,
   and people submitted a form, landed back on it, and could not tell whether
   anything had happened. It is now a solid green receipt: white on #15803D is
   5.02:1, and the tick is drawn in text so it survives an email client or a
   stylesheet that never loads. */
.flash { font-family: var(--mono); font-size: 14.5px; line-height: 1.45; padding: 16px 20px; margin-top: 18px; border: 1px solid var(--ink); }
.flash-notice {
  background: #15803D;
  border-color: #0E5C2C;
  border-left-width: 5px;
  color: #FFFFFF;
  font-weight: 500;
}
.flash-notice::before { content: "\2713\00a0\00a0"; font-weight: 700; }
.flash-alert { background: #E7EAE6; border-color: var(--prussian); color: var(--ink); }

/* HERO */
.hero { padding: 100px 0 84px; border-bottom: 1px solid var(--rule); }
.hero .label { margin-bottom: 26px; display: flex; align-items: center; gap: 12px; }
.hero .label::before { content: ""; width: 30px; height: 1px; background: var(--oxide); }
.hero h1 { font-size: clamp(40px, 5.4vw, 66px); max-width: 880px; font-weight: 400; }
.hero h1 em { color: var(--verdigris-deep); font-family: var(--serif); font-style: italic; }
.hero p.lede { margin-top: 26px; font-size: 19px; color: var(--ink-soft); max-width: 620px; }
/* ── Review pledge ────────────────────────────────────────────────
   The dialog that stands between the free book and the reader taking it.
   A native <dialog>, so focus trapping, Escape and the backdrop come from
   the browser rather than from script that could fail. */
.epub-gate { display: contents; }

.pledge {
  width: min(520px, calc(100vw - 40px));
  padding: 0;
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
}

.pledge::backdrop { background: rgba(20, 24, 27, .58); }

.pledge-inner { padding: 32px 34px 28px; }

.pledge-eyebrow {
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--oxide);
}

.pledge h2 {
  margin: 0 0 16px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(24px, 3vw, 30px);
  line-height: 1.12;
}

.pledge p {
  margin: 0 0 14px;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.pledge p b { color: var(--ink); font-weight: 500; }

.pledge-row {
  margin-top: 24px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

@media (max-width: 560px) {
  .pledge-inner { padding: 26px 22px 22px; }
  .pledge-row .btn { flex: 1 1 auto; text-align: center; }
}

/* ── Audio note ───────────────────────────────────────────────────
   A spoken review, played only when a reader asks for it. Native controls
   ship in the markup and the styled bar is hidden until the controller
   connects, so the player still works with no JavaScript at all. */
.audio-note {
  margin: 34px 0 0;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--verdigris-deep);
}

.audio-note audio { width: 100%; }

/* Nested in a quote, the block already carries the accent rule; a second one
   28px to its right just reads as noise. */
blockquote .audio-note { border-left: 1px solid var(--rule); }

.audio-note-shell { display: flex; align-items: center; gap: 18px; }

.audio-note-key {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--verdigris-deep);
  border-radius: 50%;
  background: var(--verdigris-deep);
  color: var(--bone);
  cursor: pointer;
  transition: background .15s, color .15s;
}

.audio-note-key:hover { background: transparent; color: var(--verdigris-deep); }
.audio-note-key svg { width: 22px; height: 22px; }
.audio-note-key .audio-note-pause { display: none; }
.audio-note.is-playing .audio-note-key .audio-note-play { display: none; }
.audio-note.is-playing .audio-note-key .audio-note-pause { display: block; }

.audio-note-track { flex: 1 1 auto; min-width: 0; }

.audio-note-title {
  margin: 0 0 8px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.audio-note-bar {
  height: 3px;
  background: var(--rule);
  overflow: hidden;
}

.audio-note-progress {
  display: block;
  width: 0;
  height: 100%;
  background: var(--verdigris-deep);
}

.audio-note-clock {
  margin: 8px 0 0;
  display: flex;
  gap: 8px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-soft);
}

.audio-note-caption {
  margin: 0;
  font-size: 15.5px;
  color: var(--ink-soft);
}

.audio-note-transcript { border-top: 1px solid var(--rule); padding-top: 12px; }

.audio-note-transcript summary {
  cursor: pointer;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--verdigris);
}

.audio-note-transcript p {
  margin: 14px 0 0;
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--ink-soft);
}

@media (max-width: 560px) {
  .audio-note { padding: 18px; }
  .audio-note-shell { gap: 14px; }
  .audio-note-key { width: 42px; height: 42px; }
}

/* ── Hero portrait ────────────────────────────────────────────────
   Two invisible columns. The hero copy stacks in the left one, heading
   over lede, and the portrait sits in a single merged cell on the right,
   squared off and stretched to the exact height that copy occupies. The
   source is 3:4, so the frame crops it: the head holds the top of the
   plate and the shoulders fall away. Below 860px the columns collapse,
   the face leads, and it centres on the page rather than hugging the
   left margin. */
.hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(32px, 5vw, 72px);
  align-items: stretch;
}

.hero-portrait {
  width: clamp(200px, 23vw, 300px);
  min-height: 260px;
  overflow: hidden;
  background: var(--vellum);
  border: 1px solid var(--rule);
  justify-self: center;
  align-self: stretch;
}

.hero-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 12%;
}

@media (max-width: 860px) {
  .hero-split { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .hero-portrait {
    order: -1;
    width: clamp(210px, 52vw, 280px);
    min-height: 0;
    aspect-ratio: 3 / 4;
    align-self: center;
    justify-self: center;
  }
}

.wings { margin-top: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); max-width: 880px; }
@media (max-width: 760px) { .wings { grid-template-columns: 1fr; } }
.wing { background: var(--card); padding: 30px 30px 28px; text-decoration: none; color: var(--ink); transition: background .15s; }
.wing:hover { background: var(--vellum); }
.wing .label { color: var(--oxide); margin-bottom: 12px; }
.wing h3 { font-size: 25px; margin-bottom: 8px; }
.wing p { font-size: 15px; color: var(--ink-soft); }
.wing .go { font-family: var(--mono); font-size: 12.5px; margin-top: 16px; display: block; color: var(--verdigris); }

section.band { padding: 96px 0; }
.sec-head { max-width: 660px; margin-bottom: 54px; }
.sec-head h2 { font-size: clamp(30px, 3.6vw, 42px); }
.sec-head h2 em { font-family: var(--serif); font-style: italic; color: var(--verdigris-deep); }
.sec-head p { margin-top: 16px; color: var(--ink-soft); font-size: 17.5px; }

/* ROOMS */
.rooms { background: var(--ink); color: var(--bone); }
.rooms .label { color: #8A9299; }
.rooms .sec-head h2 { color: var(--bone); }
.rooms .sec-head p { color: #AEB6BB; }
.room-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: #2A3138; border: 1px solid #2A3138; }
@media (max-width: 880px) { .room-grid { grid-template-columns: 1fr; } }
.room { background: var(--ink); padding: 36px 30px; text-decoration: none; color: var(--bone); display: flex; flex-direction: column; transition: background .15s; }
.room:hover { background: #20262B; }
.room .label { color: var(--oxide); margin-bottom: 16px; filter: brightness(1.5); }
.room h3 { font-size: 22px; color: var(--bone); font-style: italic; font-weight: 400; flex: 1; font-family: var(--serif); }
.room .answer { margin-top: 22px; font-family: var(--mono); font-size: 13px; color: #8A9299; }
.room .answer b { color: var(--bone); font-weight: 500; display: block; margin-top: 4px; }

/* CATALOGUE */
.cat-card { display: grid; grid-template-columns: 150px 1fr 280px; border: 1px solid var(--ink); background: var(--card); margin-bottom: 24px; }
@media (max-width: 880px) { .cat-card { grid-template-columns: 1fr; } }
.cat-code { border-right: 1px solid var(--rule); padding: 26px 0; text-align: center; }
@media (max-width: 880px) { .cat-code { border-right: none; border-bottom: 1px solid var(--rule); padding: 16px 26px; text-align: left; } }
.cat-code .label { color: var(--oxide); }
.cat-code .status { font-family: var(--mono); font-size: 11px; margin-top: 10px; display: block; color: var(--ink-soft); }
.cat-cover { display: block; width: 64px; margin: 14px auto 0; box-shadow: 0 1px 6px rgba(35,32,26,.18); }
@media (max-width: 880px) { .cat-cover { margin: 12px 0 0; } }
.cat-body { padding: 30px 34px; }
.cat-body h3 { font-size: 27px; }
.cat-body .strap { font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--verdigris-deep); margin: 8px 0 14px; }
.cat-body p { color: var(--ink-soft); font-size: 15.5px; max-width: 540px; }
.cat-side { border-left: 1px solid var(--rule); padding: 28px; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
@media (max-width: 880px) { .cat-side { border-left: none; border-top: 1px solid var(--rule); } }
.cat-side .btn { text-align: center; padding: 11px 16px; font-size: 12.5px; }
.cat-side .magnet { font-family: var(--mono); font-size: 12px; color: var(--verdigris); text-decoration: none; text-align: center; margin-top: 6px; }
.cat-side .magnet:hover { text-decoration: underline; }
.cat-divider { margin: 64px 0 30px; }
.cat-divider .label { color: var(--oxide); }

/* DIRECT EDITIONS */
.direct { background: var(--card); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.direct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
@media (max-width: 880px) { .direct-grid { grid-template-columns: 1fr; } }
.direct-copy p { color: var(--ink-soft); margin-bottom: 16px; }
.direct-copy p b { color: var(--ink); }
.ed { border: 1px solid var(--ink); background: var(--bone); padding: 26px 28px; margin-bottom: 18px; display: flex; justify-content: space-between; gap: 18px; align-items: center; }
.ed h3 { font-size: 20px; }
.ed p { font-size: 14px; color: var(--ink-soft); margin-top: 4px; }
.ed .tag { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--oxide); white-space: nowrap; }

/* FIELD NOTES */
.notes { padding: 110px 0; text-align: center; }
.notes h1, .notes h2 { font-size: clamp(32px, 4vw, 48px); max-width: 720px; margin: 0 auto; }
.notes h1 em, .notes h2 em { font-family: var(--serif); font-style: italic; color: var(--verdigris-deep); }
.notes p { margin: 20px auto 36px; max-width: 540px; color: var(--ink-soft); font-size: 17px; }
.signup { display: flex; max-width: 480px; margin: 0 auto; border: 1px solid var(--ink); background: var(--card); }
.signup input { flex: 1; min-width: 0; border: none; background: transparent; padding: 16px 18px; font-family: var(--mono); font-size: 14px; color: var(--ink); }
.signup input::placeholder { color: #9AA1A6; }
.signup button { border: none; border-left: 1px solid var(--ink); background: var(--ink); color: var(--bone); font-family: var(--mono); font-size: 13px; padding: 0 24px; cursor: pointer; white-space: nowrap; }
.signup button:hover { background: var(--verdigris); }
.notes .fine { margin-top: 16px; font-family: var(--mono); font-size: 12px; color: var(--ink-soft); }

/* Text-link trigger for a file magnet: looks like the catalogue magnet links,
   reveals the compact email form on click. */
.fn-link { display: inline-block; background: none; border: none; padding: 0; margin: 0; font-family: var(--mono); font-size: 13px; letter-spacing: .02em; color: var(--verdigris); cursor: pointer; text-align: left; }
.fn-link:hover { text-decoration: underline; }

/* Inline file-magnet form (book pages): reveal-on-click email + submit, bone theme */
.fn-form { display: flex; flex-wrap: wrap; gap: 10px; max-width: 480px; margin-top: 14px; }
.fn-form input[type=email] { flex: 1; min-width: 220px; border: 1px solid var(--ink); background: var(--bone); padding: 13px 16px; font-family: var(--mono); font-size: 14px; color: var(--ink); }
.fn-form input[type=email]::placeholder { color: #9AA1A6; }
.fn-form input[type=submit] { border: 1px solid var(--ink); background: var(--ink); color: var(--bone); font-family: var(--mono); font-size: 13px; padding: 0 22px; cursor: pointer; }
.fn-form input[type=submit]:hover { background: var(--verdigris); border-color: var(--verdigris); }

/* Inline signup (book pages, article foot) */
.inline-notes { border: 1px solid var(--ink); background: var(--card); padding: 28px 30px; }
.inline-notes .label { color: var(--oxide); margin-bottom: 12px; display: block; }
.inline-notes h3 { font-family: var(--serif); font-size: 22px; font-weight: 500; margin-bottom: 8px; }
.inline-notes p { color: var(--ink-soft); font-size: 15px; margin-bottom: 18px; max-width: 520px; }
.inline-notes .signup { margin: 0; max-width: 460px; }
.inline-notes .fine { margin-top: 12px; font-family: var(--mono); font-size: 11.5px; color: var(--ink-soft); }

/* ARTICLES */
.arts { border-top: 1px solid var(--rule); }
.art-list { border-top: 1px solid var(--ink); }
.art-row { display: grid; grid-template-columns: 120px 1fr 160px; gap: 24px; padding: 26px 4px; border-bottom: 1px solid var(--rule); text-decoration: none; color: var(--ink); align-items: baseline; }
@media (max-width: 760px) { .art-row { grid-template-columns: 1fr; } }
.art-row:hover h3 { color: var(--verdigris-deep); font-style: italic; }
.art-row .label { color: var(--oxide); }
.art-row h3 { font-family: var(--serif); font-size: 21px; font-weight: 500; transition: color .1s; }
.art-row span.go { font-family: var(--mono); font-size: 12px; color: var(--ink-soft); text-align: right; }
@media (max-width: 760px) { .art-row span.go { text-align: left; } }

/* ABOUT */
.about-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 64px; }
@media (max-width: 880px) { .about-grid { grid-template-columns: 1fr; } }
.about-grid p { color: var(--ink-soft); margin-bottom: 16px; font-size: 16.5px; }
.about-grid p b { color: var(--ink); }
.about-grid h2 em { font-family: var(--serif); font-style: italic; }
.agents { border: 1px solid var(--ink); background: var(--card); padding: 30px; }
.agents .label { color: var(--oxide); margin-bottom: 14px; display: block; }
.agents h3 { font-size: 22px; margin-bottom: 10px; }
.agents p { font-size: 14.5px; color: var(--ink-soft); margin-bottom: 14px; }
.agents ul { list-style: none; margin-bottom: 20px; padding: 0; }
.agents li { font-family: var(--mono); font-size: 12.5px; padding: 8px 0; border-bottom: 1px solid var(--rule); color: var(--ink); }
.agents li:last-child { border-bottom: none; }
.agents li::before { content: "· "; color: var(--oxide); }

/* PRESS COVERAGE */
.coverage-section { border-top: 1px solid var(--rule); }
.coverage-heading { margin-bottom: 34px; }
.coverage-featured { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); padding: 15px 0; margin-bottom: 48px; color: var(--ink-soft); font-family: var(--mono); font-size: 12.5px; }
.coverage-featured .label { display: inline; margin-right: 18px; color: var(--ink); }
.coverage-year { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 36px; }
.coverage-year + .coverage-year { margin-top: 52px; }
.coverage-year-heading { color: var(--oxide); font-family: var(--mono) !important; font-size: 14px; letter-spacing: .08em !important; padding-top: 24px; }
.coverage-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.coverage-item { border-bottom: 1px solid var(--rule); padding: 24px 0 28px; }
.coverage-meta { display: flex; flex-wrap: wrap; gap: 7px 18px; margin-bottom: 9px; color: var(--ink-soft); font-family: var(--mono); font-size: 11.5px; letter-spacing: .03em; }
.coverage-meta > * + *::before { content: "·"; margin-right: 18px; color: var(--oxide); }
.coverage-outlet { color: var(--ink); font-weight: 500; }
.coverage-title { font-family: var(--serif); font-size: 24px; font-weight: 500; line-height: 1.2; }
.coverage-excerpt { max-width: 760px; margin-top: 9px; color: var(--ink-soft); font-size: 16px; }
.coverage-quote { max-width: 700px; margin: 20px 0 18px; border-left: 2px solid var(--prussian); padding-left: 20px; }
.coverage-quote p { color: var(--ink); font-family: var(--serif); font-size: 19px; font-style: italic; }
.coverage-quote footer { margin-top: 6px; color: var(--ink-soft); font-family: var(--mono); font-size: 11.5px; }
.coverage-link { display: inline-block; margin-top: 14px; color: var(--verdigris); font-family: var(--mono); font-size: 12.5px; text-underline-offset: 4px; }
.coverage-link:hover { color: var(--ink); }
.coverage-closing { margin: 54px 0 0; border-top: 1px solid var(--ink); padding-top: 24px; color: var(--ink-soft); font-size: 16px; }
.coverage-closing a { color: var(--ink); text-underline-offset: 4px; }
@media (max-width: 760px) {
  .coverage-year { grid-template-columns: 1fr; gap: 8px; }
  .coverage-year-heading { padding-top: 0; }
  .coverage-meta { gap: 6px 12px; }
  .coverage-meta > * + *::before { margin-right: 12px; }
}

/* BOOK COVERAGE */
.book-coverage { padding: 64px 0 !important; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); background: var(--card); }
.book-coverage .frame { max-width: 900px; }
.book-coverage h2 { font-size: 34px; }
.book-coverage-quotes { list-style: none; margin: 30px 0 34px; padding: 0; display: grid; gap: 20px; }
.book-coverage-quotes blockquote { margin: 0; border-left: 2px solid var(--prussian); padding-left: 20px; }
.book-coverage-quotes p { color: var(--ink); font-family: var(--serif); font-size: 20px; font-style: italic; }
.book-coverage-quotes footer { margin-top: 7px; color: var(--ink-soft); font-family: var(--mono); font-size: 11.5px; }
.book-coverage-links { list-style: none; margin: 30px 0 0; padding: 0; border-top: 1px solid var(--ink); }
.book-coverage-links li { border-bottom: 1px solid var(--rule); }
.book-coverage-entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 18px 0; color: var(--ink); text-decoration: none; }
.book-coverage-meta { display: block; margin-bottom: 4px; color: var(--ink-soft); font-family: var(--mono); font-size: 11px; letter-spacing: .03em; }
.book-coverage-title { display: block; font-family: var(--serif); font-size: 18px; }
.book-coverage-read { color: var(--verdigris); font-family: var(--mono); font-size: 11.5px; text-decoration: underline; text-underline-offset: 4px; }
.book-coverage-entry:hover .book-coverage-title { color: var(--verdigris-deep); }
@media (max-width: 640px) {
  .book-coverage-entry { grid-template-columns: 1fr; gap: 8px; }
}

/* Prose blocks (book synopses, press copy) */
.prose-ink p { color: var(--ink-soft); margin-bottom: 18px; font-size: 17px; }
.prose-ink p.lead { color: var(--ink); font-family: var(--serif); font-size: 21px; font-style: italic; }
.prose-ink p strong, .prose-ink p b { color: var(--ink); font-weight: 600; }

/* FOOTER */
.site-footer { border-top: 1px solid var(--ink); padding: 44px 0; background: var(--card); margin-top: auto; }
.foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 24px; }
.foot .col p { font-family: var(--mono); font-size: 12px; color: var(--ink-soft); line-height: 2.1; }
.foot a { color: var(--ink-soft); text-decoration: none; font-family: var(--mono); font-size: 12px; display: block; line-height: 2.1; }
.foot a:hover { color: var(--ink); }
.foot .quiet { font-style: italic; font-family: var(--serif); font-size: 14px; color: var(--ink-soft); max-width: 300px; }
.foot .col span.inline { font-family: var(--mono); font-size: 12px; color: var(--ink-soft); line-height: 2.1; }
.foot .col span.inline a { display: inline; }
.foot .imprint { display: flex; align-items: center; gap: 8px; }
.foot .imprint img { width: 22px; height: 22px; opacity: .7; }

.page-shell { min-height: 100vh; display: flex; flex-direction: column; }
.page-shell main { flex: 1; }

/* HOME
   A cover-led storefront for visitors arriving from a book, article, course or
   artwork advert. These rules are deliberately scoped so the editorial book
   pages retain their own visual language. */
.home-page {
  --paper: #f7f5f0;
  --vellum: #eeeae2;
  --ink: #171918;
  --muted: #555b59;
  --hairline: #d7d1c8;
  --prussian: #173f49;
  --prussian-light: #315d65;
  --oxide: #7a2026;
  background: var(--paper);
  font-size: 20px;
}

.home-page .label {
  font-size: 13px;
  line-height: 1.45;
}

.home-page .site-nav {
  background: rgba(247, 245, 240, .96);
  border-color: rgba(23, 25, 24, .16);
  backdrop-filter: blur(14px);
}

.home-page .nav-cta {
  border-color: var(--oxide);
  background: var(--oxide);
  color: #fff !important;
}

.home-page .nav-cta:hover {
  border-color: var(--ink);
  background: var(--ink);
}

.home-page .wordmark {
  font-size: 24px;
}

.home-page .nav-links a,
.home-page .mobile-menu a {
  font-size: 15px;
}

.home-page .home-hero {
  padding: 0 0 56px;
  border-bottom: 0;
  background: #f7f5f0;
  overflow: hidden;
}

.home-hero-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.home-hero-stage::after {
  content: none;
}

.home-hero-art {
  position: relative;
  order: 2;
  width: 100%;
  padding: 30px 0;
  margin: 0;
  background: #fff;
}

.home-hero-art img {
  display: block;
  width: 100%;
  height: auto;
}

.home-hero-copy {
  position: relative;
  z-index: 1;
  order: 1;
  padding-top: 54px;
  padding-bottom: 34px;
}

.home-page .home-hero-copy .label {
  margin-bottom: 18px;
  color: var(--oxide);
}

.home-page .home-hero-copy .label::before {
  background: var(--oxide);
}

.home-page .home-hero h1 {
  max-width: 1100px;
  margin: 0;
  color: var(--ink);
  font-size: 54px;
  font-weight: 500;
  line-height: 1.01;
}

.home-page .home-hero h1 em {
  color: var(--oxide);
}

.home-page .home-hero p.lede {
  max-width: 900px;
  margin-top: 20px;
  color: #3f4543;
  font-size: 20px;
  line-height: 1.58;
}

.home-page .home-hero p.home-art-link {
  margin-top: 22px;
  font-size: 18px;
}

.home-page .home-art-link a {
  color: var(--oxide);
  font-family: var(--mono);
  font-size: 15px;
  text-decoration: none;
}

.home-hero-paths {
  position: relative;
  z-index: 2;
  margin-top: 52px;
}

.home-page .wings {
  max-width: none;
  margin: 0;
  gap: 0;
  border: 0;
  background: var(--ink);
  box-shadow: 0 18px 48px rgba(23, 25, 24, .16);
}

.home-page .wing {
  min-height: 230px;
  padding: 38px 42px 36px;
  border-right: 1px solid rgba(255, 255, 255, .16);
  background: var(--ink);
  color: #fff;
}

.home-page .wing:last-child {
  border-right: 0;
}

.home-page .wing:hover {
  background: #242826;
}

.home-page .wing .label,
.home-page .wing p {
  color: #aeb5b1;
}

.home-page .wing .label {
  font-size: 15px;
}

.home-page .wing h3 {
  color: #fff;
  font-size: 34px;
}

.home-page .wing p {
  font-size: 20px;
  line-height: 1.6;
}

.home-page .wing .go {
  color: #d7dbd8;
  font-size: 17px;
}

.home-page section.band {
  padding-top: 88px;
  padding-bottom: 88px;
}

.home-page .rooms {
  background: #202321;
}

.home-page .rooms .sec-head h2 {
  max-width: 540px;
  font-size: 42px;
}

.home-page .rooms .sec-head p {
  color: #c8ccc9;
  font-size: 19px;
}

.home-page .room-grid {
  gap: 12px;
  border: 0;
  background: transparent;
}

.home-page .room {
  min-height: 330px;
  padding: 34px 30px;
  border-top: 3px solid var(--oxide);
  background: #292c2a;
}

.home-page .room:nth-child(2) {
  border-top-color: #777d79;
}

.home-page .room:nth-child(3) {
  border-top-color: var(--prussian-light);
}

.home-page .room:hover {
  background: #313532;
}

.home-page .room .label,
.home-page .room .answer {
  color: #b8bdb9;
  filter: none;
}

.home-page .room h3 {
  font-size: 26px;
  line-height: 1.25;
}

.home-page .room .answer {
  font-size: 15px;
}

.home-page .room .answer b {
  font-size: 17px;
}

.home-page #field-guides {
  background: #f7f5f0;
}

.home-catalogue-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.home-page .home-catalogue-grid .cat-card {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto minmax(0, 1fr) 124px;
  margin: 0;
  border-color: rgba(23, 25, 24, .24);
  background: #fff;
  box-shadow: 0 12px 36px rgba(23, 25, 24, .07);
}

.home-page .home-catalogue-grid .cat-code {
  min-height: 290px;
  padding: 22px 24px 24px;
  border-right: 0;
  border-bottom: 1px solid var(--hairline);
  text-align: left;
  background: #eeeae2;
}

.home-page .home-catalogue-grid .cat-meta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  min-height: 52px;
  gap: 16px;
  align-items: start;
}

.home-page .home-catalogue-grid .cat-code .status {
  display: block;
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.45;
  text-align: right;
}

.home-page .home-catalogue-grid .cat-cover {
  width: auto;
  height: 218px;
  margin: 0 auto;
  box-shadow: 0 16px 30px rgba(23, 25, 24, .2);
}

.home-page .home-catalogue-grid .cat-body {
  padding: 28px 26px 22px;
}

.home-page .home-catalogue-grid .cat-body h3 {
  display: flex;
  min-height: 2.16em;
  align-items: flex-start;
  font-size: 29px;
}

.home-page .home-catalogue-grid .cat-body .strap {
  min-height: 4.35em;
  margin-bottom: 0;
  color: var(--oxide);
  font-size: 18px;
  line-height: 1.45;
}

.home-page .home-catalogue-grid .cat-side {
  padding: 0 26px 28px;
  border-top: 0;
  border-left: 0;
  justify-content: flex-start;
}

.home-page .home-catalogue-grid .cat-side .btn {
  display: flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
  font-size: 16px;
}

.home-page .home-catalogue-grid .cat-side .magnet {
  font-size: 15px;
  line-height: 1.45;
}

.home-page .home-catalogue-grid .cat-side .btn:hover {
  border-color: var(--oxide);
  background: var(--oxide);
}

.home-page .cat-divider {
  margin-top: 80px;
  padding-top: 28px;
  border-top: 1px solid var(--ink);
}

.home-page .notes {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background: #eeeae2;
}

.home-page .notes h2 em {
  color: var(--oxide);
}

.home-page .arts {
  background: #fff;
}

.home-page .art-row {
  transition: padding .18s ease, background .18s ease;
}

.home-page .art-row:hover {
  padding-right: 16px;
  padding-left: 16px;
  background: #f7f5f0;
}

.home-page .art-row:hover h3 {
  color: var(--oxide);
}

.home-page .art-row h3 {
  font-size: 24px;
}

.home-page .art-row span.go {
  font-size: 14px;
}

.home-page #about {
  background: #f7f5f0;
}

.home-page .agents {
  border-top: 4px solid var(--oxide);
  background: #fff;
  box-shadow: 0 12px 36px rgba(23, 25, 24, .07);
}

.home-page .about-grid p {
  font-size: 18px;
}

.home-page .agents p {
  font-size: 17px;
}

.home-page .agents li {
  font-size: 14px;
}

.home-page .site-footer {
  background: var(--ink);
  color: #fff;
}

.home-page .site-footer a,
.home-page .site-footer .quiet,
.home-page .site-footer .col p,
.home-page .site-footer .col span.inline {
  color: #b9bfbc;
}

.home-page .site-footer a:hover {
  color: #fff;
}

.home-page .site-footer a,
.home-page .site-footer .col p,
.home-page .site-footer .col span.inline {
  font-size: 14px;
}

.home-page .site-footer .quiet {
  font-size: 17px;
}

@media (max-width: 920px) {
  .home-page .home-hero h1 {
    max-width: 690px;
    font-size: 48px;
  }

  .home-catalogue-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .home-hero-copy {
    padding-top: 44px;
    padding-bottom: 28px;
  }

  .home-page .home-hero h1 {
    font-size: 38px;
    line-height: 1.04;
  }

  .home-page .home-hero p.lede {
    font-size: 18px;
    line-height: 1.5;
  }

  .home-page .home-hero p.home-art-link {
    font-size: 17px;
  }

  .home-hero-paths {
    margin-top: 36px;
  }

  .home-page .wing {
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .16);
  }

  .home-page .wing:last-child {
    border-bottom: 0;
  }

  .home-page section.band {
    padding-top: 70px;
    padding-bottom: 70px;
  }

  .home-page .rooms .sec-head h2 {
    font-size: 34px;
  }

  .home-page .room {
    min-height: 280px;
  }

  .home-catalogue-grid {
    grid-template-columns: 1fr;
  }

  .home-page .home-catalogue-grid .cat-code {
    min-height: 0;
  }

  .home-page .home-catalogue-grid .cat-card {
    grid-template-rows: auto minmax(0, 1fr) 124px;
  }
}

/* THREE PRACTICES (brand homepage + men's pillar)
   The homepage moved one level of abstraction up: three verbs, three doors,
   then a router. These rules extend the existing system rather than forking
   it: wings gain a three-up variant, rooms a four-door variant, and the
   build work gets a shared program-card component used on / and /men. */

.wings.wings-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 920px) {
  .wings.wings-3 { grid-template-columns: 1fr; }
  .home-page .wings-3 .wing { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .16); }
  .home-page .wings-3 .wing:last-child { border-bottom: 0; }
}

.home-page .home-hero h1 { font-size: clamp(44px, 6.6vw, 84px); }
@media (max-width: 920px) { .home-page .home-hero h1 { font-size: clamp(40px, 8vw, 60px); } }
@media (max-width: 760px) { .home-page .home-hero h1 { font-size: 40px; } }
.home-page .home-hero-copy { padding-top: 76px; }
.home-page .wings-3 .wing { min-height: 210px; }
.home-page .wings-3 .wing h3 { font-size: 30px; }
.home-page .wings-3 .wing p { font-size: 17px; }

.room-grid.room-grid-4 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 880px) { .room-grid.room-grid-4 { grid-template-columns: 1fr; } }
.home-page .room-grid-4 .room { min-height: 240px; }

/* Program cards: one room, one card. Light on the men's pillar, dark on the
   homepage build band. */
.prog-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 880px) { .prog-grid { grid-template-columns: 1fr; } }
.prog { border: 1px solid var(--ink); background: var(--card); padding: 34px 32px 30px; }
.prog .label { display: block; margin-bottom: 14px; }
.prog h3 { font-family: var(--serif); font-weight: 500; font-size: 27px; margin-bottom: 8px; }
.prog .strap { font-family: var(--serif); font-style: italic; font-size: 17.5px; color: var(--verdigris-deep); margin-bottom: 12px; }
.prog p { font-size: 15.5px; color: var(--ink-soft); }
.prog .go { display: inline-block; font-family: var(--mono); font-size: 12.5px; margin-top: 18px; color: var(--verdigris); text-decoration: none; }
.prog .go:hover { text-decoration: underline; }
.prog-waitlist { margin-top: 24px; border-top: 1px solid var(--rule); padding-top: 20px; }
.prog-waitlist .label { display: block; margin-bottom: 10px; }
.prog-waitlist p { font-size: 14px; margin-bottom: 12px; }
.prog-waitlist .signup { max-width: 420px; margin: 0; }
.prog-waitlist .fine { margin-top: 10px; font-family: var(--mono); font-size: 11.5px; color: var(--ink-soft); }

/* Dark pillar band (homepage build section) */
.band-dark { background: var(--ink); color: var(--bone); }
.band-dark .label { color: #8A9299; }
.band-dark .sec-head h2 { color: var(--bone); }
.band-dark .sec-head h2 em { color: #C9D2D6; }
.band-dark .sec-head p { color: #AEB6BB; }
.band-dark .prog { background: #20262B; border-color: #2A3138; }
.band-dark .prog h3 { color: var(--bone); }
.band-dark .prog .strap { color: #C9D2D6; }
.band-dark .prog p { color: #AEB6BB; }
.band-dark .prog .go { color: #D7DBD8; }
.btn-invert { border-color: var(--bone); color: var(--bone); }
.btn-invert:hover { background: var(--bone); color: var(--ink); }

/* Featured painting on the homepage paint door */
.paint-figure { margin: 0; max-width: 880px; }
.paint-figure a { display: block; }
.paint-figure img { display: block; width: 100%; height: auto; border: 1px solid var(--hairline); box-shadow: 0 18px 48px rgba(30, 35, 39, .14); }
.paint-figure figcaption { margin-top: 14px; font-family: var(--mono); font-size: 12px; letter-spacing: .05em; color: var(--muted); }
.home-page #paint { background: #fff; }

/* Three practices, one preoccupation */
section.band.creed { padding: 92px 0; border-top: 1px solid var(--hairline); text-align: center; }
.creed h2 { font-size: clamp(30px, 3.6vw, 44px); max-width: 700px; margin: 0 auto; }
.creed h2 em { font-family: var(--serif); font-style: italic; color: var(--verdigris-deep); }
.creed p { margin: 18px auto 0; max-width: 660px; color: var(--ink-soft); font-size: 17.5px; }
.home-page .creed h2 em { color: var(--oxide); }