/* ==========================================================================
   Continental Capital — house style
   Noir deco. Aged cream ground, warm black plates, brass.
   ========================================================================== */

:root {
  --paper:        #E9E1CF;
  --card:         #F3EDDF;
  --band:         #E2D9C4;
  --ink:          #0E0C0A;
  --plate:        #14110D;
  --plate-deep:   #0B0907;
  --brass:        #C08A2E;
  --brass-bright: #E0B45C;
  --brass-paper:  #6E4E14;   /* brass-coloured TEXT on cream — passes contrast */
  --frame:        #4A3618;
  --cream:        #F0E7D2;
  --cream-hi:     #F7F0DE;
  --muted-ink:    #A99B7E;   /* muted text on a plate */
  --muted-ink-2:  #CFC3A4;
  --muted-paper:  #57503E;   /* muted text on cream */
  --hair:         #DED5BE;
  --hair-dark:    #2A2114;

  --display: 'Bodoni Moda', Didot, 'Times New Roman', serif;
  --label:   Oswald, 'Arial Narrow', Helvetica, sans-serif;
  --body:    Spectral, Georgia, serif;

  --gutter: 100px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 300;
  line-height: 1.7;
}

img { max-width: 100%; }

a { color: var(--brass-paper); text-decoration: none; }
a:hover { color: var(--ink); }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--paper);
  font-family: var(--label); font-size: 13px; letter-spacing: .16em;
  padding: 12px 20px; z-index: 50;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 3px solid var(--brass); outline-offset: 3px; }

.wrap { max-width: 1440px; margin: 0 auto; padding-inline: var(--gutter); }

/* --------------------------------------------------------- masthead ----- */

.masthead {
  border-bottom: 3px solid var(--ink);
  padding: 0 56px;
  min-height: 120px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 18px; padding: 14px 0; }
.brand img { width: 66px; height: 66px; display: block; }
.brand__name {
  display: block; font-family: var(--display); font-size: 23px; font-weight: 700;
  letter-spacing: .14em; color: var(--ink);
}
.brand__motto {
  display: block; font-family: var(--label); font-size: 11px; font-weight: 500;
  letter-spacing: .3em; color: var(--brass-paper); margin-top: 7px;
}
.nav {
  display: flex; align-items: center; gap: 32px; flex-wrap: wrap;
  font-family: var(--label); font-size: 13px; font-weight: 500; letter-spacing: .16em;
}
.nav a { color: var(--muted-paper); padding: 10px 0; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] {
  color: var(--ink); border-bottom: 3px solid var(--brass); padding-bottom: 4px;
}

/* ---------------------------------------------------------- buttons ----- */

.btn {
  display: inline-block; font-family: var(--label); font-size: 14px;
  font-weight: 600; letter-spacing: .2em; padding: 19px 40px; border: 1px solid transparent;
}
.btn--dark  { background: var(--ink);   color: var(--paper); }
.btn--brass { background: var(--brass); color: var(--ink); }
.btn--brass:hover { background: var(--brass-bright); color: var(--ink); }
.btn--ghost { border-color: #8A7446; color: var(--cream); font-weight: 500; }
.btn--ghost:hover { border-color: var(--brass); color: var(--cream-hi); }
.btn--outline { border-color: var(--ink); color: var(--ink); font-weight: 500; }
.btn--sm { font-size: 12.5px; padding: 17px 30px; }
.btn--nav { font-size: 13px; padding: 15px 26px; letter-spacing: .18em; }

/* ------------------------------------------------ the plate (VHS) ------- */
/* Layer order matters. Image, warm pass, scrim, vignette, scanlines, track. */

.plate {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--plate); border: 1px solid var(--brass-paper);
}
.plate__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 40%;
  filter: brightness(1.62) contrast(1.6) saturate(1.3);
}
.plate__warm, .plate__scrim, .plate__vig, .plate__scan, .plate__trackwrap {
  position: absolute; inset: 0; pointer-events: none;
}
.plate__warm  { background: var(--brass); mix-blend-mode: soft-light; opacity: .30; }
.plate__scrim { background: rgba(12,10,7,.24); }
.plate__vig   { background: radial-gradient(ellipse at 50% 45%, rgba(0,0,0,0) 42%, rgba(0,0,0,.62) 100%); }

/* Smooth ramp, never a hard 1px step — a step pattern beats against the pixel
   grid at fractional zoom and produces wide alternating bands. */
.plate__scan {
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,.34) 0px,
    rgba(0,0,0,.02) 1.5px,
    rgba(0,0,0,.34) 3px
  );
}
.plate__trackwrap { overflow: hidden; }
.plate__track {
  position: absolute; top: 0; left: 0; width: 100%; height: 62px;
  background: linear-gradient(180deg,
    rgba(255,246,224,0) 0%,
    rgba(255,246,224,.05) 30%,
    rgba(255,246,224,.12) 50%,
    rgba(255,246,224,.05) 70%,
    rgba(255,246,224,0) 100%);
  animation: plate-track 9s linear infinite;
}
@keyframes plate-track {
  from { transform: translateY(-70px); }
  to   { transform: translateY(var(--plate-h, 860px)); }
}
@media (prefers-reduced-motion: reduce) {
  .plate__track { animation: none; opacity: .4; top: 34%; }
}

.plate__corner { position: absolute; width: 52px; height: 52px; pointer-events: none; }
.plate__corner--tl { top: 9px; left: 9px;  border-top: 5px solid var(--brass); border-left: 5px solid var(--brass); }
.plate__corner--tr { top: 9px; right: 9px; border-top: 5px solid var(--brass); border-right: 5px solid var(--brass); }
.plate__corner--bl { bottom: 9px; left: 9px;  border-bottom: 5px solid var(--brass); border-left: 5px solid var(--brass); }
.plate__corner--br { bottom: 9px; right: 9px; border-bottom: 5px solid var(--brass); border-right: 5px solid var(--brass); }

.plate__inner {
  position: relative; margin: 9px; border: 1px solid var(--frame);
  min-height: calc(100% - 18px);
  display: flex; flex-direction: column; justify-content: center;
  padding: 72px;
}

/* ------------------------------------------------------------- hero ----- */

.hero { padding: 40px; }
.hero .plate { --plate-h: 860px; min-height: 780px; }
.hero__eyebrow {
  font-family: var(--label); font-size: 13px; font-weight: 600;
  letter-spacing: .4em; color: var(--brass-bright);
}
.hero h1 {
  margin: 30px 0 0; font-family: var(--display); font-size: clamp(38px, 5.8vw, 84px);
  font-weight: 700; line-height: 1.06; letter-spacing: .02em; color: var(--cream-hi);
  max-width: 960px; text-shadow: 0 2px 30px rgba(8,6,4,.8);
}
.hero p {
  margin: 34px 0 0; font-size: 19px; line-height: 1.78; color: var(--muted-ink-2);
  max-width: 680px; text-shadow: 0 1px 18px rgba(8,6,4,.85);
}
.hero__actions { display: flex; gap: 14px; margin-top: 40px; flex-wrap: wrap; }

/* tapered brass rule */
.taper { display: flex; align-items: center; gap: 7px; margin-top: 34px; }
.taper span { display: block; background: var(--brass-bright); }
.taper span:nth-child(1), .taper span:nth-child(5) { width: 34px;  height: 2px; }
.taper span:nth-child(2), .taper span:nth-child(4) { width: 64px;  height: 4px; }
.taper span:nth-child(3)                            { width: 150px; height: 8px; }

/* ------------------------------------------------------------ strip ----- */

.strip {
  background: var(--ink); min-height: 56px;
  display: flex; align-items: center; justify-content: center;
  gap: 48px; flex-wrap: wrap; padding: 14px 24px;
  font-family: var(--label); font-size: 11.5px; font-weight: 500;
  letter-spacing: .26em; color: var(--muted-ink-2); text-align: center;
}
.strip b { color: var(--brass); font-weight: 500; }

/* --------------------------------------------------------- sections ----- */

.section { padding: 80px var(--gutter); }
.section--band { background: var(--band); }

.section-head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.section-head--left { align-items: flex-start; text-align: left; }
.eyebrow {
  font-family: var(--label); font-size: 12.5px; font-weight: 600;
  letter-spacing: .4em; color: var(--brass-paper);
}
.eyebrow--plate { color: var(--brass-bright); }
.section-head h2 {
  margin: 16px 0 0; font-family: var(--display); font-size: clamp(28px, 3.4vw, 46px);
  font-weight: 700; line-height: 1.12; letter-spacing: .02em; color: var(--ink);
}
.plate h2 { color: var(--cream-hi); }
.bar { display: block; width: 72px; height: 5px; background: var(--ink); margin-top: 20px; }
.bar--brass { background: var(--brass-bright); }
.section-head p {
  margin: 20px 0 0; font-size: 16px; line-height: 1.75; color: var(--muted-paper);
  max-width: 620px;
}

/* ----------------------------------------------------- property card ---- */

.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; margin-top: 44px; }
.card {
  background: var(--card); border: 1px solid var(--hair); border-top: 6px solid var(--ink);
  padding: 32px 30px; display: flex; flex-direction: column;
}
.card__mark { width: 50px; height: 50px; object-fit: contain; display: block; }
.card h3 {
  margin: 18px 0 0; font-family: var(--display); font-size: 27px; font-weight: 700;
  letter-spacing: .06em; color: var(--ink);
}
.card__motto {
  font-family: var(--label); font-size: 10.5px; font-weight: 500;
  letter-spacing: .26em; color: var(--brass-paper); margin-top: 9px;
}
.card p { margin: 18px 0 0; font-size: 15px; line-height: 1.72; color: var(--muted-paper); }
.card__spacer { flex-grow: 1; min-height: 24px; }
.card__link {
  font-family: var(--label); font-size: 12px; font-weight: 600;
  letter-spacing: .2em; color: var(--ink); margin-top: 22px;
}

.ledger { display: flex; flex-direction: column; gap: 10px;
  font-family: var(--label); font-size: 12px; font-weight: 500; letter-spacing: .08em; }
.ledger div { display: flex; justify-content: space-between; gap: 16px;
  border-bottom: 1px solid var(--hair); padding-bottom: 9px; }
.ledger dt, .ledger span:first-child { color: var(--muted-paper); }
.ledger dd, .ledger span:last-child { margin: 0; color: var(--ink); text-align: right; }

/* ------------------------------------------------------ the standard ---- */

.standard { padding: 0 40px 40px; }
.standard .plate { --plate-h: 720px; }
.standard .plate__inner { align-items: center; padding: 52px 96px; }
.principles {
  width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 38px 68px; margin-top: 44px;
}
.principle { display: flex; gap: 20px; }
.principle__num {
  font-family: var(--display); font-size: 38px; font-weight: 700;
  color: var(--brass); line-height: 1; min-width: 56px;
}
.principle h3 {
  margin: 0; font-family: var(--label); font-size: 15px; font-weight: 600;
  letter-spacing: .2em; color: var(--cream);
}
.principle p { margin: 11px 0 0; font-size: 15px; line-height: 1.72; color: var(--muted-ink); }

/* -------------------------------------------------------- boundary ------ */

.boundary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin-top: 46px; }
.boundary > div { border-top: 5px solid var(--ink); padding-top: 20px; }
.boundary h3 {
  margin: 0; font-family: var(--label); font-size: 13.5px; font-weight: 600;
  letter-spacing: .2em; color: var(--ink);
}
.boundary p { margin: 12px 0 0; font-size: 14px; line-height: 1.7; color: var(--muted-paper); }

/* --------------------------------------------------------- the house ---- */

.house { display: flex; gap: 90px; align-items: flex-start; }
.house__text { flex-grow: 1; }
.house__text p { margin: 22px 0 0; font-size: 16px; line-height: 1.78; color: var(--muted-paper); max-width: 560px; }
.house__link { display: inline-block; font-family: var(--label); font-size: 12.5px;
  font-weight: 600; letter-spacing: .2em; color: var(--ink); margin-top: 24px; }

.register { width: 460px; flex-shrink: 0; background: var(--ink);
  border-top: 6px solid var(--brass); padding: 30px; }
.register__title { font-family: var(--label); font-size: 11.5px; font-weight: 600;
  letter-spacing: .4em; color: var(--brass-bright); }
.register dl { display: flex; flex-direction: column; gap: 13px; margin: 22px 0 0;
  font-family: var(--label); font-size: 12.5px; font-weight: 500; letter-spacing: .08em; }
.register dl > div { display: flex; justify-content: space-between; gap: 16px;
  border-bottom: 1px solid var(--hair-dark); padding-bottom: 12px; }
.register dl > div:last-child { border-bottom: 0; padding-bottom: 0; }
.register dt { color: var(--muted-ink); }
.register dd { margin: 0; color: var(--cream); text-align: right; }

/* --------------------------------------------------------- dispatch ----- */

.dispatch { position: relative; isolation: isolate; overflow: hidden;
  background: var(--ink); padding: 54px var(--gutter) 58px; text-align: center; }
.dispatch__glow, .dispatch__scan { position: absolute; inset: 0; pointer-events: none; }
.dispatch__glow { background: radial-gradient(ellipse at 50% 50%, rgba(52,41,24,.7) 0%, rgba(14,12,9,0) 66%); }
.dispatch__scan { background-image: repeating-linear-gradient(to bottom,
  rgba(0,0,0,.34) 0px, rgba(0,0,0,.02) 1.5px, rgba(0,0,0,.34) 3px); }
.dispatch > * { position: relative; }
.dispatch h2 { margin: 14px 0 0; font-family: var(--display); font-size: clamp(24px, 2.8vw, 34px);
  font-weight: 700; letter-spacing: .02em; color: var(--cream-hi); }
.dispatch form { display: flex; align-items: flex-end; justify-content: center;
  gap: 12px; margin-top: 26px; flex-wrap: wrap; }
.field { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.field label { font-family: var(--label); font-size: 11px; font-weight: 500;
  letter-spacing: .26em; color: var(--muted-ink); }
.field input { width: 420px; max-width: 100%; height: 52px; background: var(--plate);
  border: 1px solid var(--frame); color: var(--cream); font-family: var(--body);
  font-size: 15px; padding: 0 16px; }
.field input::placeholder { color: #7A6E55; }
.dispatch button { height: 52px; background: var(--brass); color: var(--ink); border: 0;
  font-family: var(--label); font-size: 14px; font-weight: 600; letter-spacing: .2em;
  padding: 0 34px; cursor: pointer; }
.dispatch button:hover { background: var(--brass-bright); }
.dispatch__fine { font-family: var(--label); font-size: 11px; font-weight: 500;
  letter-spacing: .14em; color: var(--muted-ink); margin-top: 20px; }

/* ----------------------------------------------------------- footer ----- */

.site-footer { background: var(--plate-deep); border-top: 1px solid var(--hair-dark);
  padding: 52px var(--gutter) 0; }
.site-footer__top { display: flex; gap: 80px; flex-wrap: wrap; }
.site-footer__brand { width: 320px; }
.site-footer__brand img { width: 74px; height: 74px; display: block; }
.site-footer__name { font-family: var(--display); font-size: 18px; font-weight: 700;
  letter-spacing: .14em; color: var(--cream); margin-top: 16px; }
.site-footer__motto { font-family: var(--label); font-size: 10.5px; font-weight: 500;
  letter-spacing: .3em; color: var(--brass); margin-top: 10px; }
.site-footer__brand p { margin: 16px 0 0; font-size: 14px; line-height: 1.7; color: var(--muted-ink); }
.site-footer__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px; flex-grow: 1; }
.site-footer__cols h2 { margin: 0; font-family: var(--label); font-size: 11px;
  font-weight: 600; letter-spacing: .3em; color: var(--cream); }
.site-footer__cols ul { list-style: none; margin: 13px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 13px; }
.site-footer__cols a, .site-footer__cols li { font-size: 14px; color: var(--muted-ink); font-family: var(--body); }
.site-footer__cols a:hover { color: var(--cream); }
.site-footer__legal { margin: 44px 0 0; border-top: 1px solid var(--hair-dark);
  padding: 24px 0; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font-family: var(--label); font-size: 11px; font-weight: 500; letter-spacing: .2em;
  color: var(--muted-ink); }

/* ------------------------------------------------- properties page ------ */

.pagehead { padding: 28px 40px; }
.pagehead .plate { --plate-h: 340px; min-height: 284px; }
.pagehead .plate__inner { padding: 0 64px; }
.pagehead .plate__corner { width: 44px; height: 44px; }
.pagehead h1 { margin: 20px 0 0; font-family: var(--display);
  font-size: clamp(30px, 4vw, 58px); font-weight: 700; line-height: 1.08;
  letter-spacing: .02em; color: var(--cream-hi); text-shadow: 0 2px 30px rgba(8,6,4,.8); }
.pagehead p { margin: 20px 0 0; font-size: 17px; line-height: 1.75;
  color: var(--muted-ink-2); max-width: 620px; text-shadow: 0 1px 18px rgba(8,6,4,.85); }

.house-row { padding: 68px var(--gutter); display: flex; gap: 70px; align-items: flex-start; }
.house-row--alt { background: var(--band); flex-direction: row-reverse; }
.house-row__text { width: 560px; flex-shrink: 0; }
.house-row__head { display: flex; align-items: center; gap: 18px; }
.house-row__head img { width: 58px; height: 58px; object-fit: contain; display: block; }
.house-row__head h2 { margin: 0; font-family: var(--display); font-size: 34px;
  font-weight: 700; letter-spacing: .06em; color: var(--ink); line-height: 1.15; }
.house-row__motto { font-family: var(--label); font-size: 10.5px; font-weight: 500;
  letter-spacing: .28em; color: var(--brass-paper); margin-top: 8px; }
.pull { margin: 24px 0 0; font-family: var(--display); font-size: 24px;
  font-weight: 700; line-height: 1.4; color: var(--ink); }
.house-row__text > p { margin: 18px 0 0; font-size: 16px; line-height: 1.78; color: var(--muted-paper); }
.tags { display: flex; gap: 32px; flex-wrap: wrap; margin-top: 26px;
  font-family: var(--label); font-size: 11.5px; font-weight: 500;
  letter-spacing: .18em; color: var(--muted-paper); }

.specimen { flex-grow: 1; background: var(--card); border: 1px solid var(--hair);
  border-top: 6px solid var(--ink); padding: 26px; }
.specimen__head { display: flex; justify-content: space-between; gap: 16px;
  font-family: var(--label); font-size: 11px; font-weight: 600;
  letter-spacing: .26em; color: var(--muted-paper); }
.specimen__head em { font-style: normal; color: #A3997E; }
.specimen hr { border: 0; border-top: 1px solid var(--hair); margin: 16px 0 22px; }
.specimen__foot { font-family: var(--label); font-size: 11px; font-weight: 500;
  letter-spacing: .2em; color: var(--muted-paper); text-align: center; }

.dials { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 20px; }
.dial { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.dial span { font-family: var(--label); font-size: 10px; font-weight: 500;
  letter-spacing: .2em; color: var(--muted-paper); }

.tape { width: 100%; border-collapse: collapse;
  font-family: var(--label); font-size: 12px; font-weight: 500; letter-spacing: .08em; }
.tape th { text-align: left; padding: 11px 0; border-bottom: 1px solid var(--hair);
  color: #A3997E; font-size: 10px; letter-spacing: .24em; font-weight: 500; }
.tape td { padding: 13px 0; border-bottom: 1px solid var(--hair); color: var(--muted-paper); }
.tape td:first-child { color: var(--brass-paper); }
.tape .num { text-align: right; color: var(--ink); }
.cluster { background: var(--ink); padding: 14px 18px; margin-top: 18px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cluster b { font-family: var(--label); font-size: 11px; font-weight: 600;
  letter-spacing: .26em; color: var(--brass-bright); }
.cluster span { font-family: var(--label); font-size: 11px; font-weight: 500;
  letter-spacing: .18em; color: var(--muted-ink-2); }

.grades { display: flex; flex-direction: column; gap: 18px; }
.grade__row { display: flex; justify-content: space-between; gap: 16px;
  font-family: var(--label); font-size: 12px; font-weight: 500;
  letter-spacing: .12em; margin-bottom: 8px; }
.grade__row span:first-child { color: var(--brass-paper); }
.grade__row span:last-child { color: var(--ink); }
.meter { height: 7px; background: var(--hair); }
.meter > i { display: block; height: 7px; background: var(--ink); }
.meter--low > i { background: var(--brass-paper); }

.compare { padding: 0 40px 40px; }
.compare .plate { --plate-h: 500px; }
.compare .plate__inner { padding: 44px 72px; display: block; }
.compare .plate__corner { width: 44px; height: 44px; }
.compare table { width: 100%; border-collapse: collapse; margin-top: 30px;
  font-family: var(--label); font-size: 13px; font-weight: 400; letter-spacing: .06em; }
.compare th { text-align: left; padding: 13px 18px; border-bottom: 3px solid var(--brass);
  color: var(--cream); font-weight: 600; letter-spacing: .22em; font-size: 11px; }
.compare th:first-child { padding-left: 0; }
.compare td { padding: 18px; border-bottom: 1px solid var(--hair-dark); color: var(--cream); }
.compare tbody th { border-bottom: 1px solid var(--hair-dark); color: var(--muted-ink);
  letter-spacing: .22em; font-size: 10.5px; font-weight: 600; padding-left: 0; }
.compare tr:last-child td, .compare tr:last-child th { border-bottom: 0; }

/* ------------------------------------------------------ responsive ------ */

@media (max-width: 1200px) {
  :root { --gutter: 56px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .boundary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .house { gap: 48px; }
  .register { width: 380px; }
  .house-row { gap: 44px; }
  .house-row__text { width: 46%; }
  .standard .plate__inner { padding: 44px 48px; }
  .compare .plate__inner { padding: 36px 40px; }
}

@media (max-width: 860px) {
  :root { --gutter: 24px; }
  .masthead { padding: 0 24px; }
  .nav { gap: 20px; font-size: 12px; }
  .hero, .standard, .compare, .pagehead { padding: 16px; }
  .hero .plate { --plate-h: 640px; min-height: 560px; }
  .plate__inner { padding: 32px 26px; }
  .plate__corner { width: 34px; height: 34px; border-width: 4px !important; }
  .section { padding: 48px var(--gutter); }
  .cards, .boundary, .principles { grid-template-columns: minmax(0, 1fr); }
  .house, .house-row, .house-row--alt { flex-direction: column; gap: 28px; }
  .house-row__text, .register { width: 100%; }
  .site-footer__top { gap: 36px; }
  .site-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__brand { width: 100%; }
  .site-footer__legal { justify-content: flex-start; }
  .strip { gap: 14px; font-size: 10px; letter-spacing: .22em; }
  .compare table, .compare thead, .compare tbody, .compare th, .compare td, .compare tr { display: block; }
  .compare thead { display: none; }
  .compare tbody th { padding: 18px 0 8px; border-bottom: 0; }
  .compare td { padding: 6px 0; border-bottom: 0; }
  .compare td::before { content: attr(data-house) " — "; color: var(--brass); }
  .field input { width: 100%; }
}

/* ==========================================================================
   Interior pages — personnel, careers, resources, legal (added with the
   redesign deploy, 2026-09-21). Same tokens as the house style above.
   ========================================================================== */

.lede { max-width: 62ch; margin: 0 auto 34px; text-align: center; font: 300 18px/1.7 var(--font-body, "Spectral", Georgia, serif); color: #2A241A; }

.prose { max-width: 68ch; margin: 0 auto; font: 300 16.5px/1.8 "Spectral", Georgia, serif; color: #2A241A; }
.prose h2 { margin: 34px 0 10px; font: 600 12px/1.4 "Oswald", system-ui, sans-serif; letter-spacing: .18em; color: var(--brass-paper); }
.prose p { margin: 0 0 14px; }
.prose a { color: #2A241A; text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 3px; }
.prose__note { margin-top: 28px; padding-top: 14px; border-top: 1px solid rgba(14,12,10,.16); font-size: 14px; color: #6A6152; }

.rule-head { margin: 46px 0 18px; padding-bottom: 10px; border-bottom: 1px solid rgba(14,12,10,.2);
  font: 600 13px/1.3 "Oswald", system-ui, sans-serif; letter-spacing: .2em; color: var(--brass-paper); text-align: center; }

.people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; max-width: 980px; margin: 0 auto; }
.person { background: var(--card); border: 1px solid rgba(74,54,24,.35); padding: 26px 22px; text-align: center; }
.person h2 { margin: 0 0 8px; font: 700 20px/1.2 "Bodoni Moda", Georgia, serif; letter-spacing: .04em; color: var(--ink); }
.person p { margin: 0; font: 500 11.5px/1.6 "Oswald", system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #6A6152; }

.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.card { display: flex; flex-direction: column; gap: 10px; background: var(--card); border: 1px solid rgba(74,54,24,.35); padding: 22px; }
.card__img { width: 100%; height: 170px; object-fit: contain; background: #fff; border: 1px solid rgba(14,12,10,.08); }
.card h3 { margin: 0; font: 700 17px/1.25 "Bodoni Moda", Georgia, serif; letter-spacing: .02em; color: var(--ink); }
.card p { margin: 0; font: 300 14.5px/1.65 "Spectral", Georgia, serif; color: #3A3428; }
.card__link { margin-top: auto; font: 600 11px/1 "Oswald", system-ui, sans-serif; letter-spacing: .16em; color: var(--brass-paper); text-decoration: none; }
.card__link:hover { color: var(--ink); }

/* The dispatch form's answers */
.dispatch__done, .dispatch__error { margin: 18px auto 0; max-width: 52ch; font: 500 14px/1.6 "Oswald", system-ui, sans-serif; letter-spacing: .04em; }
.dispatch__done { color: var(--brass-bright); }
.dispatch__error { color: #E8A0A0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 1200px) {
  .cards, .people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .cards, .people { grid-template-columns: 1fr; }
}
.dispatch__consent { margin: 0 0 14px; max-width: 46ch; font: 300 13.5px/1.6 "Spectral", Georgia, serif; color: rgba(240,234,220,.72); }

/* The boundary grid lost its fourth card (the ad-funding claim), so three fill the row. */
.boundary { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ------------------------------------------------ VHS, whole page -------- */
/* The plate effect used to stop at the hero. This lays the same treatment over
   every page, the way the other house sites do it (cf. Insider Empire's .ie-vhs).
   One difference that matters: Insider Empire is a dark site and blends white
   with `screen`. This ground is cream, so `screen` would wash it out — the lines
   here are dark at a low alpha, which reads the same over both the paper and the
   dark plates. The scanline period is 4px against the plate's 3px so the two
   patterns cannot beat against each other where they overlap. */

.cc-vhs {
  position: fixed; inset: 0;
  pointer-events: none;          /* never intercepts a click or a text selection */
  z-index: 9;                    /* above the page, below the skip-link (50) */
  animation: cc-flicker 7.5s infinite;
}

/* Scanlines */
.cc-vhs::before {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(14, 12, 10, .055) 0px,
    rgba(14, 12, 10, .055) 1px,
    transparent 1px,
    transparent 4px
  );
}

/* Tape grain: animated turbulence, blended so it lifts the darks and settles
   into the paper instead of greying it out. */
.cc-vhs::after {
  content: ""; position: absolute; inset: -10%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.55 0'/></filter><rect width='240' height='240' filter='url(%23n)' opacity='0.9'/></svg>");
  background-size: 240px 240px;
  mix-blend-mode: overlay;
  opacity: .10;
  animation: cc-static .22s steps(4) infinite;
  will-change: transform;
}

/* The head sweep creeping down the screen. Kept faint on purpose: `overlay` over the
   dark plates lightens hard, and at a higher alpha the band visibly washed out body
   text as it passed. It should read as tape, never cost a line of contrast. */
.cc-vhs__roll {
  position: absolute; left: 0; right: 0;
  height: 120px; top: -120px;
  background: linear-gradient(
    to bottom,
    rgba(255, 246, 224, 0) 0%,
    rgba(255, 246, 224, .05) 30%,
    rgba(255, 246, 224, .13) 50%,
    rgba(255, 246, 224, .05) 70%,
    rgba(255, 246, 224, 0) 100%);
  mix-blend-mode: overlay;
  animation: cc-roll 9s linear infinite;
}

@keyframes cc-roll {
  0%   { transform: translateY(0); }
  100% { transform: translateY(110vh); }
}
@keyframes cc-static {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-6px, 3px); }
  40%  { transform: translate(4px, -5px); }
  60%  { transform: translate(-3px, -2px); }
  80%  { transform: translate(5px, 4px); }
  100% { transform: translate(0, 0); }
}
@keyframes cc-flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
  20%, 24%, 55%                          { opacity: .78; }
}

/* Motion off: keep the texture, drop everything that moves. */
@media (prefers-reduced-motion: reduce) {
  .cc-vhs, .cc-vhs::after, .cc-vhs__roll { animation: none !important; }
  .cc-vhs__roll { display: none; }
  .cc-vhs { opacity: .7; }
}

/* Printing a page should not print tape noise. */
@media print {
  .cc-vhs { display: none !important; }
}

/* ------------------------------------------------ nav CTA --------------- */
/* `.nav a` (0-1-1) outranks the button variants (0-1-0), so a button placed in
   the nav silently lost its own colour: THE DISPATCH was rendering muted-paper
   #57503E on ink #0E0C0A, about 2:1, which is not readable. Re-assert the
   variant colours at nav specificity so any button in the masthead keeps them. */
.nav a.btn--brass        { color: var(--ink); background: var(--brass); }
.nav a.btn--brass:hover,
.nav a.btn--brass:focus-visible { color: var(--ink); background: var(--brass-bright); }
.nav a.btn--dark         { color: var(--paper); }
.nav a.btn--dark:hover   { color: var(--cream-hi); }

/* A thin dark keyline so the gold does not float on the cream masthead. */
.nav a.btn--brass { border-color: var(--frame); }

/* ------------------------------------------------ personnel portraits --- */
/* The portrait gets the same treatment as the plates: dark ground, brass frame,
   a warm pass and the scanlines, so a face reads as house footage rather than a
   stock headshot dropped into the page. */

.person {
  display: flex; flex-direction: column;
  padding: 0;                      /* the frame runs to the card edge */
  overflow: hidden;
}
.person__frame {
  position: relative; isolation: isolate;
  margin: 0;                       /* <figure> default */
  aspect-ratio: 1 / 1;
  background: var(--plate);
  border-bottom: 1px solid var(--frame);
  overflow: hidden;
}
.person__img {
  width: 100%; height: 100%; display: block;
  object-fit: cover;
  object-position: 50% 28%;        /* these frames sit head-high; favour the face */
  filter: saturate(.88) contrast(1.06) brightness(1.02);
}
.person__warm, .person__vig, .person__scan {
  position: absolute; inset: 0; pointer-events: none;
}
.person__warm { background: var(--brass); mix-blend-mode: soft-light; opacity: .22; }
.person__vig  { background: radial-gradient(ellipse at 50% 42%, rgba(0,0,0,0) 46%, rgba(0,0,0,.55) 100%); }
.person__scan {
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,.20) 0px,
    rgba(0,0,0,.02) 1.5px,
    rgba(0,0,0,.20) 3px
  );
}
/* Smaller brackets than the hero — the frame is a fraction of its size. */
.person .plate__corner { width: 30px; height: 30px; border-width: 3px !important; }
.person .plate__corner--tl { top: 8px; left: 8px; }
.person .plate__corner--br { bottom: 8px; right: 8px; }

.person h2 { margin: 20px 22px 8px; }
.person p  { margin: 0 22px 24px; }

/* A portrait is worth a little lift on hover, nothing more. */
.person { transition: border-color .18s ease; }
.person:hover { border-color: var(--brass); }

@media (prefers-reduced-motion: reduce) {
  .person { transition: none; }
}