/* =========================================================
   LISTED ARCHITECTURE
   listedarchitecture.ca
   ---------------------------------------------------------
   THE TYPE SYSTEM — three voices, never mixed

   1. STRUCTURE   Graphie Semibold, UPPERCASE, tracked.
                  Title blocks, labels, nav, buttons, filters.

   2. VOICE       IvyPresto Display (serif), light, sentence case.
                  Headlines, statements, house names, pull quotes.
                  This is the editorial layer — the argument.

   3. BODY        Graphie Book. Everything else.

   Ground: #0B1E38, worked with gradient, grain and vignette
   so the page has atmosphere rather than a single flat fill.
   ========================================================= */

/* ---------- Tokens ---------- */
:root {
  --navy:          #0B1E38;
  --navy-lift:     #102845;
  --navy-deep:     #071527;
  --navy-black:    #050F1D;

  --ivory:         #F4F2EC;   /* warm white — primary text */
  --ivory-soft:    rgba(244, 242, 236, 0.74);
  --ivory-mute:    rgba(244, 242, 236, 0.54);
  --ivory-faint:   rgba(244, 242, 236, 0.30);
  --ivory-ghost:   rgba(244, 242, 236, 0.13);

  --rule:          rgba(244, 242, 236, 0.15);
  --rule-soft:     rgba(244, 242, 236, 0.085);

  --brass:         #C9A227;
  --brass-warm:    #D4B778;
  --brass-lift:    #E3CDA0;   /* hovered fill — a touch lighter */
  --brass-soft:    rgba(212, 183, 120, 0.45);
  --brass-faint:   rgba(212, 183, 120, 0.16);

  /* 1 — structure */
  --font-sans: "graphie", "Graphie", -apple-system, BlinkMacSystemFont,
               "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* 2 — voice. Swap the first name for whichever display serif your
     Adobe Fonts kit publishes; Cormorant Garamond carries it until then. */
  --font-serif: "ivypresto-display", "canela", "freight-display-pro",
                "Cormorant Garamond", "Hoefler Text", Georgia, "Times New Roman", serif;

  --w-book: 400;
  --w-semi: 600;
  --w-serif-light: 300;
  --w-serif-reg: 400;

  /* Body leading. Was 1.7; reduced 30% at your direction.
     This is the one number to change if running copy reads too dense —
     1.30 is a comfortable middle, 1.45 is conventional editorial. */
  --lh-body: 1.19;

  /* Display leading multiplier. Each display rule keeps its own base
     ratio and is scaled by this, so the type scale stays proportional.
     1 = original, 0.8 = the 30%/20% tightening currently applied. */
  --lh-display: 0.8;

  --gutter: clamp(1.5rem, 5vw, 6.5rem);
  --measure: 60ch;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--navy-deep);
}

body {
  margin: 0;
  color: var(--ivory);
  font-family: var(--font-sans);
  font-weight: var(--w-book);
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  line-height: var(--lh-body);
  letter-spacing: 0.004em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow-x: hidden;

  /* Atmosphere: a deep ground that lifts toward the top, with a slow
     warm light off to one side. Not a flat fill. */
  background-color: var(--navy);
  background-image:
    radial-gradient(88% 52% at 76% -4%, rgba(212, 183, 120, 0.11) 0%, rgba(212, 183, 120, 0) 62%),
    radial-gradient(70% 46% at 8% 22%, rgba(28, 62, 102, 0.55) 0%, rgba(28, 62, 102, 0) 60%),
    linear-gradient(178deg, #0E2444 0%, #0B1E38 42%, #081A31 78%, #071527 100%);
  background-attachment: fixed;
}

/* Fine grain — sits above the ground, below the content. Gives the
   navy a printed tooth instead of a screen-flat surface. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.42;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.28'/%3E%3C/svg%3E");
}

body > * { position: relative; z-index: 1; }

img { max-width: 100%; display: block; }
figure { margin: 0; }

/* =========================================================
   1 — STRUCTURE  (Graphie Semibold, caps)
   ========================================================= */
.eyebrow, .btn, .nav__link, .filter__btn, .t-sm, .label,
.method__name, .card__meta, .foot__head, .status, .card__flag,
.speclist dt, .edit-split__head {
  font-family: var(--font-sans);
  font-weight: var(--w-semi);
  text-transform: uppercase;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.9em;
  font-size: 0.625rem;
  letter-spacing: 0.42em;
  color: var(--brass-warm);
  margin: 0 0 1.75rem;
}

/* Hairline that runs out of the eyebrow — a small architectural tell */
.eyebrow::before {
  content: "";
  width: clamp(24px, 4vw, 52px);
  height: 1px;
  background: var(--brass-soft);
  flex: none;
}

.eyebrow--plain::before { display: none; }

.label {
  font-size: 0.625rem;
  letter-spacing: 0.3em;
  color: var(--ivory-faint);
}

.t-sm {
  font-size: 0.6875rem;
  letter-spacing: 0.28em;
  line-height: 1.4;
}

/* =========================================================
   2 — VOICE  (display serif, light, sentence case)
   ========================================================= */
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: var(--w-serif-light);
  font-style: normal;
  text-transform: none;
  letter-spacing: -0.005em;
  color: var(--ivory);
}

/* The display scale is always the serif, whatever element carries it —
   these declare the family so they hold up on a <p> or <span> too. */
.t-hero, .t-xl, .t-lg, .t-md {
  font-family: var(--font-serif);
  font-weight: var(--w-serif-light);
  text-transform: none;
}

.t-hero {
  font-size: clamp(2.75rem, 1.2rem + 6.6vw, 7.25rem);
  line-height: calc(0.96 * var(--lh-display));
  letter-spacing: -0.018em;
}

.t-xl {
  font-size: clamp(2.125rem, 1.2rem + 3.9vw, 4.5rem);
  line-height: calc(1.02 * var(--lh-display));
  letter-spacing: -0.014em;
}

.t-lg {
  font-size: clamp(1.75rem, 1.15rem + 2.4vw, 3.125rem);
  line-height: calc(1.1 * var(--lh-display));
  letter-spacing: -0.01em;
}

.t-md {
  font-size: clamp(1.375rem, 1.1rem + 1.1vw, 2rem);
  line-height: calc(1.18 * var(--lh-display));
}

/* Italic accent — used sparingly, and never for whole paragraphs */
.em { font-style: italic; color: var(--brass-warm); }

/* House names and other set-caps titles rendered in the serif.
   Caps in a display serif need tracking to breathe. */
.t-caps {
  text-transform: uppercase;
  letter-spacing: 0.028em;
  word-spacing: 0.06em;
}

.t-caps.t-hero { font-size: clamp(2.25rem, 1.1rem + 5.2vw, 5.75rem); line-height: calc(1.02 * var(--lh-display)); }

/* Serif lede — the first statement under a headline */
.lede {
  font-family: var(--font-serif);
  font-weight: var(--w-serif-light);
  font-size: clamp(1.25rem, 1rem + 1.15vw, 1.875rem);
  line-height: 1.38;
  letter-spacing: -0.004em;
  color: var(--ivory);
  max-width: 30ch;
  margin: 0 0 1.25rem;
}

/* =========================================================
   3 — BODY  (Graphie Book)
   ========================================================= */
p, li, dd, figcaption, label, input, textarea, select {
  font-family: var(--font-sans);
  font-weight: var(--w-book);
  text-transform: none;
}

p { margin: 0 0 1.2em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

.dek {
  color: var(--ivory-soft);
  max-width: 54ch;
  line-height: var(--lh-body);
}

.fine {
  font-size: 0.8125rem;
  line-height: var(--lh-body);
  color: var(--ivory-mute);
  max-width: 66ch;
}

.meta {
  font-size: 0.875rem;
  letter-spacing: 0.03em;
  color: var(--ivory-mute);
}

a { color: inherit; }

/* =========================================================
   LAYOUT
   ========================================================= */
.wrap {
  width: 100%;
  max-width: 1620px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow { max-width: 1120px; }

.section { padding-block: clamp(5rem, 11vw, 12rem); }

.section--tight { padding-block: clamp(3.5rem, 7vw, 7rem); }

.section--ruled { border-top: 1px solid var(--rule-soft); }

/* Editorial split — title block left, argument right, asymmetric */
.split {
  display: grid;
  grid-template-columns: minmax(0, 4.4fr) minmax(0, 7.6fr);
  gap: clamp(2rem, 5vw, 7rem);
  align-items: start;
}

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

@media (max-width: 900px) {
  .split, .split--even { grid-template-columns: 1fr; gap: 2rem; }
}

.stack > * + * { margin-top: 1.5rem; }

.rule { height: 1px; background: var(--rule-soft); border: 0; margin: 0; }

.rule--brass {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, var(--brass-soft), transparent 62%);
}

/* =========================================================
   BUTTONS / LINKS
   ========================================================= */
/* All calls to action are gold — the same gold as the italic accent in
   the headlines. A discreet CTA (transparent, sitting on the page
   ground) takes gold for both its outline and its type. */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.9em;
  font-size: 0.6875rem;
  letter-spacing: 0.26em;
  text-decoration: none;
  padding: 1.15em 2.1em;
  border: 1px solid var(--brass-warm);
  color: var(--brass-warm);
  background: transparent;
  cursor: pointer;
  overflow: hidden;
  font-family: var(--font-sans);
  transition: color 0.5s var(--ease), border-color 0.5s var(--ease);
}

/* Fill wipes up from the base rather than snapping on */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--brass-warm);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.5s var(--ease-out);
  z-index: -1;
}

.btn > * , .btn { z-index: 0; }

.btn:hover, .btn:focus-visible { color: var(--navy); border-color: var(--brass-warm); }
.btn:hover::before, .btn:focus-visible::before { transform: scaleY(1); }

/* Solid: gold field, navy type */
.btn--solid { color: var(--navy); border-color: var(--brass-warm); }
.btn--solid::before { transform: scaleY(1); }
.btn--solid:hover, .btn--solid:focus-visible { color: var(--brass-warm); }
.btn--solid:hover::before, .btn--solid:focus-visible::before {
  transform: scaleY(0);
  transform-origin: top;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: clamp(2rem, 3.5vw, 3.25rem);
}

/* ---- Paired calls to action -------------------------------------
   A row holding more than one button must always show exactly ONE
   filled button, otherwise hovering the outline button leaves two
   gold blocks side by side and the choice reads ambiguously.

   At rest      solid = filled,  outline = empty
   Hover outline  it fills,      the solid one empties
   Hover solid    it holds its fill and warms slightly

   A lone solid button keeps its original invert-on-hover, so forms
   and single CTAs are unaffected.
   ------------------------------------------------------------------ */

/* the solid button empties when a sibling is hovered or focused */
.btn-row:has(.btn:is(:hover, :focus-visible)) .btn--solid:not(:hover):not(:focus-visible) {
  color: var(--brass-warm);
}

.btn-row:has(.btn:is(:hover, :focus-visible)) .btn--solid:not(:hover):not(:focus-visible)::before {
  transform: scaleY(0);
  transform-origin: top;
}

/* in a pair, the solid button keeps its fill when it is the one hovered */
.btn-row:has(.btn ~ .btn) .btn--solid:is(:hover, :focus-visible) {
  color: var(--navy);
}

.btn-row:has(.btn ~ .btn) .btn--solid:is(:hover, :focus-visible)::before {
  transform: scaleY(1);
  transform-origin: bottom;
  background: var(--brass-lift);
}

/* Text-level CTA on transparent ground — gold, per the same rule */
.link {
  display: inline-flex;
  align-items: center;
  gap: 0.8em;
  font-family: var(--font-sans);
  font-weight: var(--w-semi);
  text-transform: uppercase;
  font-size: 0.6875rem;
  letter-spacing: 0.24em;
  text-decoration: none;
  padding-bottom: 0.6em;
  position: relative;
  color: var(--brass-warm);
}

.link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--rule);
}

.link::before {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--brass-warm);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s var(--ease-out);
  z-index: 1;
}

.link:hover::before, .link:focus-visible::before { transform: scaleX(1); }

.link .arw { transition: transform 0.5s var(--ease-out); font-weight: var(--w-book); }
.link:hover .arw { transform: translateX(5px); }

:focus-visible { outline: 1px solid var(--brass-warm); outline-offset: 5px; }

/* =========================================================
   HEADER / NAV
   ========================================================= */
.site-head {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(9, 26, 48, 0.72);
  backdrop-filter: saturate(150%) blur(18px);
  -webkit-backdrop-filter: saturate(150%) blur(18px);
  border-bottom: 1px solid var(--rule-soft);
}

.site-head__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: 92px;
  padding-block: 1rem;
}

.brand { display: block; line-height: 0; }
.brand img { height: 40px; width: auto; }

@media (max-width: 560px) { .brand img { height: 30px; } .site-head__inner { min-height: 84px; } }

.nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.8vw, 3rem); }

.nav__link {
  position: relative;
  font-size: 0.6875rem;
  letter-spacing: 0.24em;
  text-decoration: none;
  color: var(--ivory-soft);
  padding-block: 0.5em;
  white-space: nowrap;
  transition: color 0.4s var(--ease);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--brass-warm);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-out);
}

.nav__link:hover { color: var(--ivory); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--ivory); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--rule);
  color: var(--ivory);
  font-family: var(--font-sans);
  font-weight: var(--w-semi);
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  padding: 0.8em 1.2em;
  cursor: pointer;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .nav-toggle { display: block; }

  .nav {
    position: fixed;
    inset: 92px 0 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--navy-black);
    border-bottom: 1px solid var(--rule);
    padding: 0.5rem var(--gutter) 2.5rem;
    transform: translateY(-10px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
  }

  .nav[data-open="true"] { opacity: 1; transform: none; pointer-events: auto; }

  .nav__link {
    font-family: var(--font-serif);
    font-weight: var(--w-serif-light);
    text-transform: none;
    font-size: 1.75rem;
    letter-spacing: -0.01em;
    width: 100%;
    padding-block: 1.1rem;
    border-bottom: 1px solid var(--rule-soft);
  }

  .nav__link::after { display: none; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(600px, 92vh, 1040px);
  padding-block: clamp(6rem, 14vh, 11rem) clamp(4rem, 9vh, 8rem);
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.5;
  z-index: 0;
}

/* Vignette + floor gradient so type always sits on a settled ground */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(11,30,56,0) 40%, rgba(7,21,39,0.75) 100%),
    linear-gradient(180deg, rgba(11,30,56,0) 45%, rgba(7,21,39,0.9) 100%);
}

.hero__inner { position: relative; z-index: 2; width: 100%; }

.hero__title { max-width: 15ch; }

.hero__title .em { display: block; }

.hero__body {
  margin-top: clamp(1.75rem, 3vw, 2.75rem);
  color: var(--ivory-soft);
  max-width: 46ch;
  font-size: clamp(1rem, 0.95rem + 0.35vw, 1.1875rem);
}

/* Scroll cue */
.hero__cue {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(2rem, 5vh, 4rem);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-sans);
  font-weight: var(--w-semi);
  text-transform: uppercase;
  font-size: 0.5625rem;
  letter-spacing: 0.32em;
  color: var(--ivory-faint);
}

.hero__cue span::after {
  content: "";
  display: block;
  width: 1px;
  height: 56px;
  margin-top: 0.9rem;
  background: linear-gradient(180deg, var(--brass-soft), transparent);
}

@media (max-width: 900px) { .hero__cue { display: none; } }

/* Interior page hero — quieter, but the same voice */
.hero--page {
  padding-block: clamp(4.5rem, 15vh, 10rem) clamp(3rem, 6vw, 5rem);
  position: relative;
}

.hero--page .t-hero { max-width: 14ch; }

/* =========================================================
   IMAGE FRAMES + PLACEHOLDERS
   Placeholders read as drawing sheets, not grey boxes.
   ========================================================= */
.frame {
  position: relative;
  overflow: hidden;
  background: var(--navy-deep);
  aspect-ratio: 4 / 3;
}

.frame--wide { aspect-ratio: 16 / 9; }
.frame--tall { aspect-ratio: 3 / 4; }
.frame--pano { aspect-ratio: 2.4 / 1; }
.frame--sq   { aspect-ratio: 1 / 1; }

@media (max-width: 700px) {
  .frame--pano { aspect-ratio: 4 / 3; }
}

.frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease-out), filter 1.4s var(--ease-out);
}

.frame__ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  text-align: center;
  padding: 2rem;
  background:
    /* drawing grid */
    linear-gradient(rgba(244,242,236,0.028) 1px, transparent 1px) 0 0 / 100% 42px,
    linear-gradient(90deg, rgba(244,242,236,0.028) 1px, transparent 1px) 0 0 / 42px 100%,
    /* raking light */
    linear-gradient(148deg, rgba(212,183,120,0.10) 0%, rgba(212,183,120,0) 46%),
    linear-gradient(200deg, rgba(46,88,140,0.30) 0%, rgba(46,88,140,0) 60%),
    var(--navy-lift);
}

/* Thin inset rule, like a plate border */
.frame__ph::before {
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(244, 242, 236, 0.10);
  pointer-events: none;
}

.frame__ph-mark {
  font-family: var(--font-serif);
  font-weight: var(--w-serif-light);
  font-style: italic;
  text-transform: none;
  font-size: clamp(1.125rem, 1rem + 0.8vw, 1.75rem);
  letter-spacing: -0.005em;
  color: var(--ivory-ghost);
  max-width: 18ch;
  line-height: 1.2;
}

.frame__ph-label {
  font-family: var(--font-sans);
  font-weight: var(--w-semi);
  text-transform: uppercase;
  font-size: 0.5625rem;
  letter-spacing: 0.3em;
  color: var(--ivory-faint);
  max-width: 28ch;
  line-height: 1.26;
}

.caption {
  margin-top: 1.1rem;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--ivory-mute);
  max-width: 50ch;
}

/* =========================================================
   METHOD — numbered editorial rows
   ========================================================= */
.method {
  margin-top: clamp(3rem, 6vw, 5.5rem);
  border-top: 1px solid var(--rule-soft);
}

.method__item {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 3.2fr) minmax(0, 5fr);
  gap: clamp(1rem, 3vw, 4rem);
  align-items: start;
  padding-block: clamp(2rem, 3.6vw, 3.25rem);
  border-bottom: 1px solid var(--rule-soft);
  transition: background 0.6s var(--ease);
}

.method__item:hover { background: rgba(244, 242, 236, 0.022); }

.method__num {
  font-family: var(--font-serif);
  font-weight: var(--w-serif-light);
  font-size: clamp(1.75rem, 1.1rem + 2.2vw, 3.25rem);
  line-height: 1;
  color: var(--brass-soft);
  letter-spacing: -0.02em;
}

.method__name {
  font-size: 0.75rem;
  letter-spacing: 0.26em;
  color: var(--ivory);
  padding-top: 0.55em;
}

.method__claim {
  font-family: var(--font-serif);
  font-weight: var(--w-serif-light);
  font-size: clamp(1.25rem, 1rem + 0.9vw, 1.75rem);
  line-height: calc(1.3 * var(--lh-display));
  color: var(--ivory);
  margin: 0 0 0.75rem;
  max-width: 24ch;
}

.method__body {
  color: var(--ivory-mute);
  font-size: 0.9375rem;
  line-height: var(--lh-body);
  margin: 0;
  max-width: 46ch;
}

@media (max-width: 820px) {
  .method__item { grid-template-columns: auto 1fr; gap: 1rem 1.5rem; }
  .method__num { grid-row: span 2; }
  .method__claim { margin-top: 0.75rem; }
}

/* =========================================================
   STATEMENT BAND — the one loud moment on the page
   ========================================================= */
.statement {
  position: relative;
  text-align: center;
  padding-block: clamp(5rem, 12vw, 11rem);
  border-block: 1px solid var(--rule-soft);
  overflow: hidden;
}

.statement::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 120% at 50% 50%, rgba(212,183,120,0.09), transparent 68%);
  pointer-events: none;
}

/* Large display statements are always the serif — this is a <p>, so it
   has to declare the family itself or it inherits the sans. */
.statement__text {
  position: relative;
  font-family: var(--font-serif);
  font-weight: var(--w-serif-light);
  text-transform: none;
  font-size: clamp(2rem, 1.1rem + 4.4vw, 5rem);
  line-height: calc(1.06 * var(--lh-display));
  letter-spacing: -0.015em;
  margin-inline: auto;
  max-width: 18ch;
  color: var(--ivory);
}

.statement__sub {
  position: relative;
  margin: clamp(1.5rem, 3vw, 2.5rem) auto 0;
  color: var(--ivory-mute);
  max-width: 46ch;
}

.statement .standard__line {
  position: relative;
  margin-inline: auto;
  max-width: 40ch;
}

/* =========================================================
   CATALOGUE GRID + CARDS
   ========================================================= */
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.7rem;
  padding-block: 1.6rem;
}

.filters__label {
  font-family: var(--font-sans);
  font-weight: var(--w-semi);
  text-transform: uppercase;
  font-size: 0.5625rem;
  letter-spacing: 0.32em;
  color: var(--ivory-faint);
  margin-right: 1rem;
}

.filter__btn {
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  background: transparent;
  border: 1px solid var(--rule-soft);
  color: var(--ivory-mute);
  padding: 0.85em 1.4em;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease),
              background 0.4s var(--ease);
}

.filter__btn:hover { color: var(--brass-warm); border-color: var(--brass-soft); }

.filter__btn[aria-pressed="true"] {
  color: var(--brass-warm);
  border-color: var(--brass-soft);
  background: var(--brass-faint);
}

/* Even grid — rows align, and card CTAs sit on a common baseline
   because .card__cta pushes itself down with margin-top: auto. */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: clamp(3rem, 5vw, 5rem) clamp(1.5rem, 3vw, 3.5rem);
  margin-top: clamp(2.5rem, 4vw, 4rem);
  align-items: stretch;
}

@media (max-width: 560px) { .grid { grid-template-columns: 1fr; } }

.card { display: flex; flex-direction: column; }

.card__link {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card__media { position: relative; overflow: hidden; }

/* Image settles into full presence on hover */
.card__link .frame img { filter: saturate(0.82) brightness(0.88); }
.card__link:hover .frame img { transform: scale(1.045); filter: saturate(1) brightness(1); }

.card__flag {
  position: absolute;
  top: 1rem; left: 1rem;
  z-index: 3;
  font-size: 0.5rem;
  letter-spacing: 0.28em;
  padding: 0.75em 1.1em;
  background: rgba(7, 21, 39, 0.7);
  border: 1px solid rgba(244, 242, 236, 0.14);
  color: var(--ivory-soft);
  backdrop-filter: blur(8px);
}

.card__body {
  padding-top: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  flex: 1;
}

.card__name {
  font-family: var(--font-serif);
  font-weight: var(--w-serif-light);
  text-transform: uppercase;
  font-size: clamp(1.4375rem, 1.15rem + 0.85vw, 1.9375rem);
  line-height: calc(1.1 * var(--lh-display));
  letter-spacing: 0.026em;
  color: var(--ivory);
  position: relative;
  display: inline-block;
  padding-bottom: 0.35rem;
}

.card__name::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--brass-soft);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--ease-out);
}

.card__link:hover .card__name::after { transform: scaleX(1); }

.card__meta {
  font-size: 0.5625rem;
  letter-spacing: 0.26em;
  color: var(--ivory-faint);
}

.card__note {
  margin: 0.4rem 0 0;
  font-size: 0.9375rem;
  line-height: var(--lh-body);
  color: var(--ivory-soft);
  max-width: 42ch;
}

.card__cta {
  margin-top: auto;
  padding-top: 1.5rem;
  font-family: var(--font-sans);
  font-weight: var(--w-semi);
  text-transform: uppercase;
  font-size: 0.625rem;
  letter-spacing: 0.24em;
  color: var(--brass-soft);
  display: inline-flex;
  gap: 0.7em;
  align-items: center;
  transition: color 0.45s var(--ease);
}

.card__cta .arw { transition: transform 0.5s var(--ease-out); }
.card__link:hover .card__cta { color: var(--brass-warm); }
.card__link:hover .card__cta .arw { transform: translateX(5px); }

.empty { padding: 5rem 0; color: var(--ivory-mute); }

/* =========================================================
   FEATURE BAND — full bleed
   ========================================================= */
/* Full-bleed escape from a centred .wrap.
   Uses negative margins, NOT transform: .reveal also sets transform, and
   when both classes land on one element the later rule wins and the
   horizontal shift is silently dropped. Margins compose; transforms don't. */
.bleed {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.feature__media { position: relative; }

.feature__media .frame img { filter: saturate(0.9) brightness(0.85); }

.feature__overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(2rem, 5vw, 5rem) var(--gutter);
  background: linear-gradient(0deg, rgba(7,21,39,0.94) 8%, rgba(7,21,39,0.35) 62%, rgba(7,21,39,0) 100%);
}

.feature__name {
  max-width: 16ch;
  text-transform: uppercase;
  letter-spacing: 0.026em;
}

.feature__meta {
  margin-top: 1.1rem;
  font-family: var(--font-sans);
  font-weight: var(--w-semi);
  text-transform: uppercase;
  font-size: 0.625rem;
  letter-spacing: 0.28em;
  color: var(--brass-warm);
}

/* =========================================================
   LISTING PAGE
   ========================================================= */
.listing-head__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  align-items: baseline;
  margin-top: 1.5rem;
  color: var(--ivory-soft);
  font-size: 0.9375rem;
  letter-spacing: 0.03em;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-size: 0.5625rem;
  letter-spacing: 0.28em;
  color: var(--brass-warm);
}

.status::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--brass-warm);
  box-shadow: 0 0 0 4px var(--brass-faint);
}

.entry {
  border-top: 1px solid var(--rule-soft);
  padding-block: clamp(3.5rem, 7vw, 7rem);
}

.entry__num {
  display: block;
  font-family: var(--font-serif);
  font-weight: var(--w-serif-light);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--brass-soft);
  margin-bottom: 1.25rem;
  letter-spacing: -0.01em;
}

.entry__title {
  font-family: var(--font-sans);
  font-weight: var(--w-semi);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  color: var(--ivory);
  margin-bottom: 1rem;
}

.entry__sub {
  font-family: var(--font-serif);
  font-weight: var(--w-serif-light);
  font-size: clamp(1.25rem, 1rem + 0.9vw, 1.75rem);
  line-height: calc(1.28 * var(--lh-display));
  color: var(--ivory-soft);
  letter-spacing: -0.005em;
  margin-bottom: 0;
  max-width: 20ch;
}

/* Sticky title block on long study pages */
@media (min-width: 901px) {
  .entry .split > div:first-child { position: sticky; top: 140px; }
}

.standard {
  font-family: var(--font-serif);
  font-weight: var(--w-serif-light);
  text-transform: none;
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3.5rem);
  line-height: calc(1.1 * var(--lh-display));
  letter-spacing: -0.014em;
  max-width: 18ch;
}

.standard__line {
  margin-top: 1.75rem;
  color: var(--brass-warm);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.4375rem);
  letter-spacing: -0.003em;
}

.edit-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1px;
  background: var(--rule-soft);
  border: 1px solid var(--rule-soft);
  margin-top: 2.25rem;
}

.edit-split__col {
  background: rgba(16, 40, 69, 0.55);
  padding: clamp(1.75rem, 3vw, 2.75rem);
}

.edit-split__head {
  font-size: 0.625rem;
  letter-spacing: 0.3em;
  color: var(--brass-warm);
  margin-bottom: 1.25rem;
}

.speclist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin: 2.25rem 0 0;
  border-top: 1px solid var(--rule-soft);
}

.speclist > div {
  padding: 1.35rem 2rem 1.35rem 0;
  border-bottom: 1px solid var(--rule-soft);
}

.speclist dt {
  font-size: 0.5625rem;
  letter-spacing: 0.28em;
  color: var(--ivory-faint);
  margin-bottom: 0.6rem;
}

.speclist dd {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: var(--w-serif-reg);
  font-size: 1.0625rem;
  color: var(--ivory);
  letter-spacing: 0;
}

.bullets { margin: 0; padding-left: 1.15rem; color: var(--ivory-soft); }
.bullets li { margin-bottom: 0.6rem; line-height: var(--lh-body); }
.bullets li::marker { color: var(--brass-soft); }

.prev-next {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-block: 3rem;
  border-top: 1px solid var(--rule-soft);
}

/* =========================================================
   FORMS
   ========================================================= */
.form { max-width: 640px; margin-top: 2.75rem; }

.field { margin-bottom: 1.9rem; }

.field label {
  display: block;
  font-family: var(--font-sans);
  font-weight: var(--w-semi);
  text-transform: uppercase;
  font-size: 0.5625rem;
  letter-spacing: 0.28em;
  color: var(--ivory-mute);
  margin-bottom: 0.8rem;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ivory);
  font-family: var(--font-serif);
  font-weight: var(--w-serif-reg);
  font-size: 1.1875rem;
  padding: 0.9rem 0;
  transition: border-color 0.4s var(--ease);
}

.field input:focus,
.field textarea:focus,
.field select:focus { outline: none; border-bottom-color: var(--brass-warm); }

.field textarea { resize: vertical; min-height: 130px; line-height: 1.35; }

.field input::placeholder,
.field textarea::placeholder { color: var(--ivory-faint); font-style: italic; }

.subscribe {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: flex-end;
  max-width: 640px;
  margin-top: 2.75rem;
}

.subscribe .field { flex: 1 1 300px; margin-bottom: 0; }

.form-note { margin-top: 1.75rem; font-size: 0.8125rem; color: var(--ivory-mute); }

/* =========================================================
   FOOTER
   ========================================================= */
.site-foot {
  border-top: 1px solid var(--rule-soft);
  background: linear-gradient(180deg, rgba(5,15,29,0.4) 0%, rgba(5,15,29,0.92) 100%);
  padding-block: clamp(4rem, 8vw, 7rem) 2.5rem;
  margin-top: clamp(3rem, 6vw, 6rem);
}

.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr));
  gap: clamp(2.5rem, 5vw, 6rem);
}

@media (max-width: 820px) {
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-grid > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 460px) { .foot-grid { grid-template-columns: 1fr; } }

.foot__logo { height: 35px; width: auto; margin-bottom: 1.75rem; }

.foot__blurb {
  font-family: var(--font-serif);
  font-weight: var(--w-serif-light);
  font-size: 1.375rem;
  line-height: calc(1.32 * var(--lh-display));
  color: var(--ivory-soft);
  max-width: 24ch;
  letter-spacing: -0.005em;
}

.foot__geo {
  margin-top: 1.5rem;
  font-family: var(--font-sans);
  font-weight: var(--w-semi);
  text-transform: uppercase;
  font-size: 0.5625rem;
  letter-spacing: 0.28em;
  color: var(--brass-warm);
}

.foot__head {
  font-size: 0.5625rem;
  letter-spacing: 0.3em;
  color: var(--ivory-faint);
  margin-bottom: 1.5rem;
}

.foot__list { list-style: none; margin: 0; padding: 0; }
.foot__list li { margin-bottom: 0.3rem; line-height: 1.4; }

.foot__list a {
  display: inline-block;
  text-decoration: none;
  color: var(--ivory-soft);
  font-family: var(--font-serif);
  font-size: 1.125rem;
  line-height: 1.4;
  letter-spacing: 0;
  transition: color 0.4s var(--ease);
}

.foot__list a:hover { color: var(--brass-warm); }

.foot-base {
  margin-top: clamp(3.5rem, 7vw, 6rem);
  padding-top: 2.25rem;
  border-top: 1px solid var(--rule-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 3rem;
  justify-content: space-between;
  align-items: baseline;
}

.foot-base p {
  font-size: 0.75rem;
  color: var(--ivory-faint);
  line-height: var(--lh-body);
  max-width: 68ch;
  margin: 0;
}

/* =========================================================
   MOTION
   ========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out);
}

.reveal.is-in { opacity: 1; transform: none; }

/* Stagger children of a revealed block */
.reveal[data-stagger] > * { transition-delay: inherit; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Utilities ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; top: -60px; left: var(--gutter); z-index: 100;
  background: var(--ivory); color: var(--navy); padding: 0.9em 1.5em;
  font-family: var(--font-sans); font-weight: var(--w-semi);
  text-transform: uppercase; font-size: 0.625rem; letter-spacing: 0.24em;
  text-decoration: none; transition: top 0.3s var(--ease);
}

.skip:focus { top: 14px; }

.center { text-align: center; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.brass { color: var(--brass-warm); }
.muted { color: var(--ivory-mute); }