/* =========================================================================
   1918 Capital — Cipher Ledger
   Ink, brass, cream. Serif display / sans body / mono for anything numeric.
   ========================================================================= */

/* ------------------------------------------------------------- tokens --- */
:root {
  --ink-900: #060f1c;
  --ink-850: #08131f;
  --ink-800: #0a1728;
  --ink-700: #0f2137;
  --ink-600: #16304c;
  --ink-500: #1f4166;
  --ink-400: #2d5580;

  --brass-300: #f6ecce;
  --brass-400: #eed9a2;
  --brass-500: #e2c04d;
  /* 600/700 are the golds that sit as small text on cream. They stay darker on
     purpose: brightening them drops contrast below a readable ratio. Gold on
     ink uses --gold-on-ink instead, where brighter also means more contrast. */
  --brass-600: #a8842c;
  --brass-700: #7c611f;
  --gold-on-ink: var(--brass-400);
  /* Small gold text on cream. Measured 4.72:1 against --cream-50, versus 3.27:1
     for brass-600, which failed the 4.5:1 minimum for text this size. Decorative
     brass (rules, borders, the hero wheel) keeps its brighter value. */
  --gold-label: #8a6a18;

  --cream-50: #faf7f0;
  --cream-100: #f3eee2;
  --cream-200: #e5ddcb;
  --cream-300: #cfc4ac;

  --on-ink: #dbd3c3;
  --on-ink-dim: #9aa7b8;
  --on-cream: #16304c;
  --on-cream-dim: #55637a;

  --serif: "Cormorant Garamond", "Iowan Old Style", Palatino, Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --measure: 62ch;
  --gutter: clamp(1.35rem, 5vw, 5.5rem);
  --shell: 1180px;
  --ticker-h: 46px;
  --header-h: 74px;

  --rule: 1px solid color-mix(in srgb, var(--brass-500) 26%, transparent);
  --rule-dark: 1px solid color-mix(in srgb, var(--ink-500) 45%, transparent);

  --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;
  /* Page surface is cream with white form fields: pin the light scheme so a
     dark-mode OS doesn't force-darken native controls or scrollbars. */
  color-scheme: light;
  /* Drop the ~300ms double-tap-zoom delay on taps. */
  touch-action: manipulation;
}

body {
  margin: 0;
  /* Keep the fixed ticker from covering the last line of any page. */
  padding-bottom: var(--ticker-h);
  background: var(--cream-50);
  color: var(--on-cream);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.7;
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

picture {
  display: block;
}

img,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
}

:where(h1, h2, h3, h4) {
  margin: 0;
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.012em;
  font-family: var(--serif);
  text-wrap: balance;
}

p {
  margin: 0 0 1.15em;
  text-wrap: pretty;
}

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

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

::selection {
  background: var(--brass-500);
  color: var(--ink-900);
}

.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -100%;
  z-index: 200;
  padding: 0.6rem 1rem;
  background: var(--brass-500);
  color: var(--ink-900);
  font: 500 0.8rem/1 var(--sans);
  text-decoration: none;
}

.skip-link:focus {
  top: 0.5rem;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------ layout --- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.shell--narrow {
  max-width: 780px;
}

.section {
  padding-block: clamp(4rem, 11vh, 9rem);
}

.section--tight {
  padding-block: clamp(2.75rem, 7vh, 5rem);
}

.section--ink {
  background: var(--ink-800);
  color: var(--on-ink);
}

.section--ink h1,
.section--ink h2,
.section--ink h3 {
  color: var(--cream-100);
}

.stack > * + * {
  margin-top: var(--stack-gap, 1.5rem);
}

/* ----------------------------------------------------- shared elements -- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1.5rem;
  font: 500 0.6875rem/1 var(--mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-label);
}

.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--brass-500) 55%, transparent), transparent);
}

/* Dark surfaces take the bright gold. The masthead is dark but is not a
   .section--ink, so it needs naming explicitly — without this it inherited the
   deep --gold-label intended for cream and dropped to 3.56:1. */
.section--ink .eyebrow,
.masthead .eyebrow {
  color: var(--gold-on-ink);
}

.eyebrow--centered {
  justify-content: center;
}

.eyebrow--centered::after {
  display: none;
}

.lede {
  font-size: clamp(1.125rem, 1.02rem + 0.5vw, 1.375rem);
  line-height: 1.62;
  color: var(--on-cream-dim);
  max-width: var(--measure);
}

.section--ink .lede {
  color: var(--on-ink-dim);
}

.h-display {
  font-size: clamp(2.25rem, 1.5rem + 3.4vw, 4rem);
  font-weight: 300;
}

.h-section {
  font-size: clamp(1.875rem, 1.4rem + 2.1vw, 3rem);
  font-weight: 300;
}

.h-sub {
  font-size: clamp(1.375rem, 1.2rem + 0.9vw, 1.875rem);
}

.prose {
  max-width: var(--measure);
}

.prose h2 {
  margin-top: 2.75rem;
  font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem);
}

.prose h3 {
  margin-top: 2rem;
  font-size: 1.3125rem;
}

.rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--brass-500) 42%, transparent) 18%, color-mix(in srgb, var(--brass-500) 42%, transparent) 82%, transparent);
}

/* An engraved double rule — the certificate-border detail. */
.rule--double {
  height: 4px;
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--brass-500) 50%, transparent) 20%, color-mix(in srgb, var(--brass-500) 50%, transparent) 80%, transparent) top / 100% 1px no-repeat,
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--brass-500) 28%, transparent) 20%, color-mix(in srgb, var(--brass-500) 28%, transparent) 80%, transparent) bottom / 100% 1px no-repeat;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font: 500 0.8125rem/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gold-label);
  padding-bottom: 0.35rem;
  border-bottom: 1px solid color-mix(in srgb, var(--brass-500) 38%, transparent);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.link-arrow::after {
  content: "→";
  transition: transform 0.3s var(--ease-out);
}

.link-arrow:hover {
  color: var(--brass-700);
  border-color: var(--brass-500);
}

.link-arrow:hover::after {
  transform: translateX(4px);
}

.section--ink .link-arrow {
  color: var(--brass-400);
}

.section--ink .link-arrow:hover {
  color: var(--brass-300);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.9rem;
  font: 500 0.75rem/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--brass-500);
  background: transparent;
  color: var(--brass-500);
  cursor: pointer;
  transition: background 0.35s var(--ease), color 0.35s var(--ease);
}

.btn:hover {
  background: var(--brass-500);
  color: var(--ink-900);
}

.btn--solid {
  background: var(--ink-700);
  border-color: var(--ink-700);
  color: var(--cream-100);
}

.btn--solid:hover {
  background: var(--brass-500);
  border-color: var(--brass-500);
  color: var(--ink-900);
}

/* ------------------------------------------------------------- crest --- */
/* Stroke widths are viewBox units, so they must be set per rendered size
   rather than with vector-effect: non-scaling-stroke — that would make
   stroke-dasharray resolve in device pixels and break the draw-in animation. */
.crest {
  overflow: visible;
  --sw-shield: 2;
  --sw-inner: 0.9;
  --sw-charge: 1.7;
}

.crest .crest-shield,
.crest .crest-inner,
.crest .crest-charge {
  fill: none;
  stroke: currentColor;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.crest .crest-shield {
  stroke-width: var(--sw-shield);
}

.crest .crest-inner {
  stroke-width: var(--sw-inner);
  opacity: 0.6;
}

.crest .crest-charge {
  stroke-width: var(--sw-charge);
}

.crest .crest-date {
  fill: currentColor;
  font: 500 10px/1 var(--mono);
  letter-spacing: 0.14em;
  /* Illegible below roughly 60px wide; the hero crest re-enables it. */
  display: none;
}

/* Small marks: heavier strokes so the hairlines survive being scaled down. */
.brand .crest,
.site-footer__mark .crest {
  --sw-shield: 3.6;
  --sw-inner: 1.5;
  --sw-charge: 2.8;
}

/* ------------------------------------------------------------ header --- */
/* The header is sticky, so anchor targets need to clear it. */
:target {
  scroll-margin-top: calc(var(--header-h) + 1rem);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: color-mix(in srgb, var(--ink-900) 92%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid color-mix(in srgb, var(--brass-500) 20%, transparent);
  color: var(--on-ink);
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 74px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
  color: var(--brass-400);
  flex-shrink: 0;
}

.brand .crest {
  width: 30px;
  height: auto;
  transition: color 0.4s var(--ease);
}

.brand__word {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.brand__name {
  font-family: var(--serif);
  font-size: 1.3125rem;
  letter-spacing: 0.04em;
  color: var(--cream-100);
}

.brand__sub {
  margin-top: 0.28rem;
  font: 400 0.5625rem/1 var(--mono);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold-on-ink);
}

.brand:hover .brand__name {
  color: var(--brass-300);
}

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(0.85rem, 2vw, 2rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__link {
  position: relative;
  display: block;
  padding: 0.4rem 0;
  font: 400 0.78rem/1 var(--sans);
  letter-spacing: 0.055em;
  text-decoration: none;
  color: var(--on-ink);
  white-space: nowrap;
  transition: color 0.3s var(--ease);
}

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

.nav__link:hover,
.nav__link[aria-current="page"] {
  color: var(--brass-300);
}

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

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--brass-500) 32%, transparent);
  background: transparent;
  cursor: pointer;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 18px;
  height: 1px;
  background: var(--brass-400);
  margin-inline: auto;
  transition: transform 0.3s var(--ease), opacity 0.2s linear;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: relative;
}

.nav-toggle__bars::before {
  top: -6px;
}

.nav-toggle__bars::after {
  top: 5px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
  transform: translateY(-5px) rotate(-45deg);
}

/* The bar collapses to the hamburger earlier than the rest of the layout. With
   eight links, the brand and the nav start colliding at 1020px and below — this
   used to be 860px, when there were seven. Re-measure if a link is added. */
@media (max-width: 1020px) {
  .nav-toggle {
    display: block;
  }

  .nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--ink-900);
    border-bottom: 1px solid color-mix(in srgb, var(--brass-500) 20%, transparent);
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.4s var(--ease);
  }

  .nav[data-open="true"] {
    max-height: 60vh;
  }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem var(--gutter) 1.25rem;
  }

  .nav__link {
    padding: 0.9rem 0;
    font-size: 0.9375rem;
    border-bottom: var(--rule-dark);
  }

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

/* --------------------------------------------------------------- hero --- */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: clamp(290px, calc(64svh - 74px - var(--ticker-h)), 600px);
  padding-block: clamp(1rem, 2.6vh, 2.25rem) clamp(1rem, 2.6vh, 2rem);
  background: var(--ink-900);
  color: var(--on-ink);
  overflow: hidden;
  text-align: center;
}

/* Layer 1 — the gold well behind the crest. */
.hero__glow {
  position: absolute;
  inset: 0;
  z-index: -4;
  background:
    radial-gradient(ellipse 70% 55% at 50% 42%, color-mix(in srgb, var(--brass-600) 26%, transparent), transparent 70%),
    radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--ink-500) 55%, transparent), transparent 65%),
    var(--ink-900);
}

/* The emblem stack: wheel, photograph, seal — all sharing one centre. */
.hero__emblem {
  position: relative;
  isolation: isolate;
  width: clamp(172px, 25vmin, 300px);
  aspect-ratio: 1;
  /* Room for the crest that overhangs the lower rim. */
  margin-bottom: clamp(1.15rem, 2.6vh, 1.85rem);
}

/* The 1918 storefront, set as a medallion in the hub of the guilloche. */
.hero__medallion {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 50%;
  overflow: hidden;
  opacity: 0;
  /* Brass rim, ink spacer, second brass hairline — a struck-medal edge. */
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--brass-400) 70%, transparent),
    0 0 0 6px var(--ink-900),
    0 0 0 7px color-mix(in srgb, var(--brass-600) 45%, transparent),
    0 0 60px 6px color-mix(in srgb, var(--ink-900) 85%, transparent);
  animation: medallion-in 2.2s 0.15s var(--ease-out) forwards;
  will-change: opacity, transform;
}

.hero__medallion img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Favour the shopfront and the group on the step over the roofline. */
  object-position: 50% 58%;
  filter: sepia(0.2) contrast(1.03) brightness(0.98);
}

/* Darken the lower rim so the crest reads against it. */
.hero__medallion::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 122%, color-mix(in srgb, var(--ink-900) 88%, transparent) 14%, color-mix(in srgb, var(--ink-900) 34%, transparent) 32%, transparent 48%);
}

/* Layer 3 — the guilloche rosette, slowly turning. */
.hero__rosette {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  /* Sized off the emblem, so the hub always matches the medallion. */
  width: 355%;
  aspect-ratio: 1;
  translate: -50% -50%;
  opacity: 0;
  background: url("../img/guilloche.svg") center / contain no-repeat;
  /* Two masks composited: a ring that clears the photograph, and a downward
     fade so the brightened wheel does not cut across the wordmark below. */
  mask-image:
    radial-gradient(circle at 50% 50%, transparent 22%, #000 30%, transparent 72%),
    linear-gradient(180deg, #000 0 56%, rgba(0, 0, 0, 0.34) 74%, rgba(0, 0, 0, 0) 94%);
  mask-composite: intersect;
  -webkit-mask-composite: source-in;
  animation: rosette-in 2.6s 0.35s var(--ease-out) forwards, rosette-turn 240s 0.35s linear infinite;
  will-change: opacity, transform;
  pointer-events: none;
}

/* Layer 4 — engraved line ruling, like the hatching on a banknote. */
.hero__hatch {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--brass-400) 10%, transparent) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--brass-400) 5%, transparent) 0 1px, transparent 1px 9px);
  mask-image: linear-gradient(180deg, transparent, #000 22%, #000 62%, transparent);
  opacity: 0.7;
}

/* Vignette so the type always wins against the texture. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 65% 55% at 50% 45%, transparent 30%, color-mix(in srgb, var(--ink-900) 72%, transparent) 100%);
}

.hero__inner {
  position: relative;
  display: grid;
  justify-items: center;
  gap: clamp(0.5rem, 1.1vh, 1rem);
}

.hero__crest {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 0;
  translate: -50% 42%;
  width: clamp(52px, 7.5vmin, 82px);
  color: var(--brass-400);
  /* Rendered ~1.9x, so thin user-unit strokes give a fine engraved line. */
  --sw-shield: 1.15;
  --sw-inner: 0.5;
  --sw-charge: 0.95;
  filter: drop-shadow(0 0 22px color-mix(in srgb, var(--brass-600) 45%, transparent));
}

.hero__crest .crest-date {
  display: block;
}

.hero__name {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.35rem, 1.1rem + 5.6vw, 5.5rem);
  line-height: 0.94;
  letter-spacing: -0.02em;
  color: var(--cream-50);
  text-shadow: 0 1px 40px color-mix(in srgb, var(--ink-900) 80%, transparent);
}

.hero__name em {
  display: block;
  font-style: normal;
  font-size: 0.42em;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  color: var(--brass-400);
  margin-top: 0.3em;
}

.hero__tagline {
  max-width: 40ch;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.0625rem, 0.95rem + 0.7vw, 1.4375rem);
  font-style: italic;
  line-height: 1.45;
  color: color-mix(in srgb, var(--cream-100) 82%, transparent);
}

.hero__meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  font: 400 0.6875rem/1 var(--mono);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--on-ink-dim);
}

.hero__meta span {
  width: 34px;
  height: 1px;
  background: color-mix(in srgb, var(--brass-500) 60%, transparent);
}

/* --- Crest reveal: the shield draws itself, then the charges settle in. --- */
.hero__crest .crest-shield,
.hero__crest .crest-inner {
  stroke-dasharray: var(--len, 320);
  stroke-dashoffset: var(--len, 320);
  animation: crest-draw 1.9s 0.15s var(--ease-out) forwards;
}

.hero__crest .crest-inner {
  animation-delay: 0.5s;
}

.hero__crest .crest-charge {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: crest-charge-in 1.1s 1.25s var(--ease-out) forwards;
}

.hero__crest .crest-date {
  opacity: 0;
  animation: crest-fade 1s 1.7s var(--ease) forwards;
}

/* Staggered entrance for the hero copy, driven purely by delay. */
.hero__inner > .reveal-load {
  opacity: 0;
  animation: rise-in 1.15s var(--ease-out) forwards;
}

.hero__inner > .reveal-load:nth-child(2) { animation-delay: 1.35s; }
.hero__inner > .reveal-load:nth-child(3) { animation-delay: 1.55s; }
.hero__inner > .reveal-load:nth-child(4) { animation-delay: 1.72s; }

@keyframes crest-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes crest-charge-in {
  from { opacity: 0; transform: scale(0.82); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes crest-fade {
  to { opacity: 1; }
}

@keyframes rise-in {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes medallion-in {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes rosette-in {
  to { opacity: 1; }
}

@keyframes rosette-turn {
  from { rotate: 0deg; }
  to { rotate: 360deg; }
}

}

/* ------------------------------------------- scroll reveal (IO-driven) -- */
[data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.9s var(--ease-out) var(--reveal-delay, 0ms),
    transform 1s var(--ease-out) var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

[data-reveal="in"] {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Gentle parallax: JS writes --shift (-1..1) and CSS decides the magnitude,
   so the effect can be tuned or dropped per breakpoint without touching JS. */
[data-parallax] {
  transform: translate3d(0, calc(var(--shift, 0) * var(--parallax-depth, 26px)), 0);
  will-change: transform;
}

/* ----------------------------------------------------- statement block -- */
.statement {
  position: relative;
  text-align: center;
  /* Deliberately tight: the hero stops short so this copy is already in
     view on load, and the statement sits high in its own band. */
  padding-block: clamp(0.9rem, 2vh, 1.75rem) clamp(1.75rem, 4vh, 3.25rem);
}

/* Wide enough for the tagline to land on one line: size it against the
   viewport so it scales down rather than wrapping or overflowing. */
@media (min-width: 820px) {
  .hero__tagline {
    max-width: none;
    white-space: nowrap;
    font-size: min(1.4375rem, 2.1vw);
  }
}

/* A hairline mark used to break sections without a heavy divider. */
.section-mark {
  display: grid;
  justify-items: center;
  gap: 1.1rem;
  color: var(--brass-500);
}

.section-mark::before,
.section-mark::after {
  content: "";
  width: 1px;
  height: clamp(28px, 6vh, 56px);
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--brass-500) 65%, transparent));
}

.section-mark::after {
  background: linear-gradient(180deg, color-mix(in srgb, var(--brass-500) 65%, transparent), transparent);
}

.section-mark__glyph {
  width: 9px;
  height: 9px;
  border: 1px solid currentColor;
  rotate: 45deg;
}

/* Short laptop screens (13-inch and smaller): tighten the emblem and the
   supporting copy a notch so the whole statement still clears the ticker
   without scrolling. Height-based, so it never fires on tall displays. */
@media (min-width: 820px) and (max-height: 800px) {
  .hero__emblem {
    /* The emblem keeps its size; the height comes out of type and spacing. */
    margin-bottom: clamp(0.85rem, 1.9vh, 1.35rem);
  }

  .hero__name {
    font-size: min(4.25rem, 5vw);
  }

  .mission__line {
    font-size: min(2.25rem, 3.2vw);
  }

  .mission__note {
    font-size: 0.9375rem;
  }
}

/* Very short screens (small laptops, browser with several toolbars open). */
@media (min-width: 820px) and (max-height: 730px) {
  .hero {
    padding-block: 0.85rem 0.75rem;
  }

  .hero__inner {
    gap: 0.4rem;
  }

  .hero__emblem {
    margin-bottom: 0.7rem;
  }

  .hero__name {
    font-size: min(3.5rem, 4.3vw);
  }

  .hero__tagline {
    font-size: min(1.1875rem, 1.8vw);
  }

  .statement {
    padding-block: 0.7rem 1.25rem;
  }

  .mission__line {
    font-size: min(2rem, 2.9vw);
  }

  .mission__note {
    margin-top: 0.9rem;
    font-size: 0.875rem;
  }
}

/* Narrow screens: recover what height we can without shrinking the body copy
   below a comfortable reading size. */
@media (max-width: 819px) {
  /* Let the hero collapse to its content: on a phone the min-height was
     reserving ~40px that nothing used. */
  .hero {
    min-height: 0;
  }

  .hero__name {
    font-size: clamp(2.125rem, 1rem + 5.2vw, 3.25rem);
  }

  .mission__line {
    font-size: clamp(1.375rem, 0.9rem + 2.4vw, 2.125rem);
  }

  .mission__note {
    font-size: 0.9375rem;
    line-height: 1.55;
  }
}

/* Shorter phones: trim type and spacing only. The emblem keeps its size at
   every breakpoint by request, which is why the smallest handsets still need a
   short scroll to reach the end of the supporting copy. */
@media (max-width: 819px) and (max-height: 820px) {
  .hero {
    padding-block: 0.9rem 0.8rem;
  }

  .hero__inner {
    gap: 0.45rem;
  }

  .hero__emblem {
    margin-bottom: 0.8rem;
  }

  .hero__tagline {
    font-size: 1rem;
  }

  .statement {
    padding-block: 0.75rem 1.25rem;
  }

  .mission__line {
    font-size: clamp(1.25rem, 0.85rem + 2.2vw, 1.75rem);
  }

  .mission__note {
    margin-top: 0.7rem;
    font-size: 0.875rem;
  }
}

/* ---------------------------------------------------------- card grids -- */
.grid {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 275px), 1fr));
}

.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: #fff;
  border: 1px solid var(--cream-200);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform 0.5s var(--ease-out), border-color 0.4s var(--ease), box-shadow 0.5s var(--ease-out);
}

/* Brass hairline that wipes in along the top edge on hover. */
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, var(--brass-500), var(--brass-300));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s var(--ease-out);
}

a.card:hover,
a.card:focus-visible {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--brass-500) 40%, var(--cream-200));
  box-shadow: 0 18px 40px -28px color-mix(in srgb, var(--ink-900) 55%, transparent);
}

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

.card__index {
  font: 500 0.6875rem/1 var(--mono);
  letter-spacing: 0.2em;
  color: var(--gold-label);
}

.card__title {
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1.2;
}

.card__text {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--on-cream-dim);
}

.card__more {
  margin-top: auto;
  padding-top: 0.5rem;
  font: 500 0.6875rem/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-label);
}

.card--ink {
  background: color-mix(in srgb, var(--ink-700) 70%, transparent);
  border-color: color-mix(in srgb, var(--ink-400) 40%, transparent);
  color: var(--on-ink);
}

.card--ink .card__title {
  color: var(--cream-100);
}

.card--ink .card__text {
  color: var(--on-ink-dim);
}

.card--ink .card__index,
.card--ink .card__more {
  color: var(--brass-400);
}

a.card--ink:hover {
  border-color: color-mix(in srgb, var(--brass-500) 45%, transparent);
  box-shadow: none;
}

/* ------------------------------------------------------- page masthead -- */
.masthead {
  position: relative;
  isolation: isolate;
  padding-block: clamp(3.5rem, 9vh, 6.5rem);
  background: var(--ink-800);
  color: var(--on-ink);
  overflow: hidden;
}

.masthead::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 80% 130% at 88% 0%, color-mix(in srgb, var(--brass-600) 16%, transparent), transparent 62%),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--brass-400) 5%, transparent) 0 1px, transparent 1px 6px);
  mask-image: linear-gradient(180deg, #000, transparent 92%);
}

.masthead__title {
  font-size: clamp(2.5rem, 1.6rem + 4vw, 4.5rem);
  font-weight: 300;
  color: var(--cream-50);
}

.masthead__lede {
  max-width: 54ch;
  margin-top: 1.5rem;
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  color: var(--on-ink-dim);
}

/* ---------------------------------------------------------- principles -- */
.principles {
  display: grid;
  gap: 0;
  counter-reset: principle;
}

.principle {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(1.75rem, 4vh, 2.75rem);
  border-top: 1px solid var(--cream-200);
  counter-increment: principle;
}

.principle:last-child {
  border-bottom: 1px solid var(--cream-200);
}

.principle::before {
  content: counter(principle, decimal-leading-zero);
  font: 500 0.8125rem/1.7 var(--mono);
  letter-spacing: 0.12em;
  color: var(--gold-label);
}

.principle__title {
  font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
  margin-bottom: 0.65rem;
}

.principle__body {
  max-width: 58ch;
  color: var(--on-cream-dim);
}

@media (max-width: 600px) {
  .principle {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
}

/* ----------------------------------------------------------- pullquote -- */
/* A line lifted out of running prose and set as an engraved aside. Shared by
   the mission statement and the family letter. */
.pullquote {
  margin: 2.5rem 0;
  padding-left: clamp(1.1rem, 3vw, 2rem);
  border-left: 2px solid color-mix(in srgb, var(--brass-500) 55%, transparent);
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.125rem);
  line-height: 1.25;
  color: var(--on-cream);
}

/* --------------------------------------------------- mission statement -- */
/* Display type, but sized to be read as a sentence rather than glanced at as a
   slogan. The short-screen rules that keep this clear of the fold sit with the
   hero, above, since the two are tuned against each other. */
.mission__line {
  max-width: 34ch;
  margin-inline: auto;
  text-align: center;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.5rem, 1.05rem + 1.9vw, 2.5rem);
  line-height: 1.22;
  letter-spacing: -0.012em;
  color: var(--cream-50);
}

.mission__note {
  max-width: 62ch;
  margin: clamp(1.5rem, 3.5vh, 2.25rem) auto 0;
  text-align: center;
  color: var(--on-ink-dim);
}

@media (max-width: 600px) {
  .mission__line,
  .mission__note {
    text-align: left;
  }
}

/* Family photographs, mounted like prints in an album. Each keeps its own
   aspect ratio — these are scans of prints of several shapes, and cropping them
   to a common one costs faces — so rows are deliberately a little ragged, with
   every caption sitting directly under the print it belongs to.

   Wider than the letter it interrupts: the prose is set to a reading measure,
   but the photographs are the point of this page and need the room. */
.plates {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  max-width: 900px;
  margin-inline: auto;
}

.plates--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* The tall portrait gets the narrower column so the two prints finish at more
   nearly the same height. */
.plates--2 {
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
}

@media (max-width: 700px) {
  .plates--3,
  .plates--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 470px) {
  .plates--3,
  .plates--2 {
    grid-template-columns: minmax(0, 1fr);
  }
}

.plate {
  margin: 0;
}

.plate img {
  width: 100%;
  padding: 5px;
  background: var(--cream-100);
  border: 1px solid color-mix(in srgb, var(--brass-500) 34%, transparent);
  /* Matches the founding photograph, so scans of different ages read as one set. */
  filter: sepia(0.18) contrast(1.03) brightness(0.97);
}

/* One print has faded far more than the others. Rather than leave it looking
   washed out beside them, it gets its own correction — the shared filter would
   have to be too strong for the rest if it had to carry this one too. */
.plate--faded img {
  filter: sepia(0.1) contrast(1.32) brightness(0.93);
}

.plate__caption {
  margin: 0;
  padding-top: 0.7rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--on-cream-dim);
}

.plate__caption b {
  display: block;
  font: 500 0.6875rem/1.7 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-label);
}

.vision-close {
  text-align: center;
}

.vision-close__line {
  max-width: 24ch;
  margin-inline: auto;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3rem);
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--cream-50);
}

.vision-close__line em {
  font-style: italic;
  color: var(--brass-400);
}

.vision-sign {
  margin-top: 2rem;
  font: 500 0.75rem/1.7 var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-on-ink);
}

/* -------------------------------------------------------- area section -- */
.area {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.75rem, 5vw, 4.5rem);
  align-items: start;
  padding-block: clamp(2.5rem, 6vh, 4.5rem);
  border-top: var(--rule);
}

.area__aside {
  position: sticky;
  top: 100px;
}

.area__title {
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
  margin-bottom: 1rem;
}

.area__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.area__tags li {
  padding: 0.35rem 0.7rem;
  font: 400 0.6875rem/1.4 var(--mono);
  letter-spacing: 0.06em;
  color: var(--on-cream-dim);
  border: 1px solid var(--cream-200);
  background: #fff;
}

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

  .area__aside {
    position: static;
  }
}

/* ---------------------------------------------------------- news feed --- */
.newsfeed__body {
  display: grid;
  gap: 0;
}

.newsco {
  padding-block: clamp(1.5rem, 3.5vh, 2.5rem);
  border-top: 1px solid var(--cream-200);
}

.newsco:first-child {
  border-top: 0;
  padding-top: 0;
}

.newsco__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.9rem;
  margin-bottom: 1rem;
}

.newsco__name {
  font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem);
}

.newsco__name a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.newsco__name a:hover {
  color: var(--brass-700);
  border-bottom-color: color-mix(in srgb, var(--brass-500) 55%, transparent);
}

.newsco__host {
  margin: 0;
  font: 400 0.6875rem/1 var(--mono);
  letter-spacing: 0.06em;
  color: var(--gold-label);
}

.newsco__empty {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--on-cream-dim);
}

.newslist {
  display: grid;
  gap: 0.9rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: news;
}

.newsitem {
  counter-increment: news;
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0 0.75rem;
  align-items: baseline;
}

.newsitem::before {
  content: counter(news, decimal-leading-zero);
  font: 500 0.6875rem/1.6 var(--mono);
  color: var(--brass-600);
}

.newsitem__title {
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--on-cream);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--brass-500) 26%, transparent);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
  /* Long unbroken headlines must not push the grid wider than the column. */
  overflow-wrap: anywhere;
}

.newsitem__title:hover {
  color: var(--brass-700);
  border-bottom-color: var(--brass-500);
}

.newsitem__meta {
  grid-column: 2;
  margin: 0.3rem 0 0;
  font: 400 0.6875rem/1.5 var(--mono);
  letter-spacing: 0.04em;
  color: var(--on-cream-dim);
}

.newsfeed__meta {
  margin: clamp(1.5rem, 3vh, 2.25rem) 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--cream-200);
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--on-cream-dim);
  max-width: 78ch;
}

/* The loading/error state block is shared with the strategy box, which lives on
   ink. On cream it needs its own colours. */
.newsfeed .stratbox__state strong {
  color: var(--brass-700);
}

.newsfeed .stratbox__state p {
  color: var(--on-cream-dim);
}

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

  .newsitem::before {
    display: none;
  }

  .newsitem__meta {
    grid-column: 1;
  }
}

/* ------------------------------------------------------ founding banner -- */
.founding {
  background: var(--ink-800);
  color: var(--on-ink);
  overflow: hidden;
}

.founding__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(1.75rem, 5vw, 4rem);
  padding-block: clamp(2.25rem, 6vh, 4rem);
}

.founding__year {
  margin: 0 0 0.6rem;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(3rem, 1.6rem + 6vw, 6rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--cream-50);
}

.founding__body {
  margin: 0;
  max-width: 46ch;
  font-size: clamp(1rem, 0.95rem + 0.35vw, 1.1875rem);
  line-height: 1.65;
  color: color-mix(in srgb, var(--cream-100) 88%, transparent);
}

.founding__figure {
  margin: 0;
  /* Brass hairline on the inner edge, echoing the medallion rim on the home
     page without repeating the full struck-medal treatment. */
  border: 1px solid color-mix(in srgb, var(--brass-500) 40%, transparent);
  background: var(--ink-900);
}

.founding__figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 42%;
  filter: sepia(0.18) contrast(1.03) brightness(0.97);
}

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

  /* Photograph first on a phone: it carries the story faster than the copy. */
  .founding__figure {
    order: -1;
  }
}

/* ----------------------------------------------- real estate gallery --- */
.property-block {
  padding-block: clamp(1.75rem, 4vh, 3rem) clamp(2rem, 5vh, 3.5rem);
}

.property-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.property figure {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  background: #fff;
  border: 1px solid var(--cream-200);
  overflow: hidden;
}

.property__img {
  width: 100%;
  /* Renderings arrive at slightly different aspect ratios; a fixed frame with
     cover keeps the row of cards visually even. */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 45%;
  background: var(--cream-100);
}

.property figcaption {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: clamp(0.9rem, 2vw, 1.25rem);
  border-top: 1px solid var(--cream-200);
}

.property__name {
  font-family: var(--serif);
  font-size: 1.1875rem;
  line-height: 1.2;
  color: var(--on-cream);
}

.property__meta {
  margin: 0;
  font: 500 0.6875rem/1.4 var(--mono);
  letter-spacing: 0.06em;
  color: var(--on-cream-dim);
}

.property__status {
  margin: 0;
  font: 500 0.625rem/1.4 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass-700);
}

/* ------------------------------------------------------ equity partners -- */
.partner-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.75rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

.partner {
  display: grid;
  place-items: center;
  /* Fixed width, not min-width: with `auto` basis the tile grew to fit the
     widest logo, which pushed the three-logo row onto two lines. A pinned width
     also makes every tile identical and lets max-width cap the logo. */
  flex: 0 0 auto;
  width: 10.75rem;
  height: 5.25rem;
  padding: 0.75rem 0.9rem;
  background: #fff;
  border: 1px solid var(--cream-200);
}

/* Explicit max-height, not a percentage: a percentage max-height on a grid item
   does not resolve against the grid area here, so the logos overflowed the
   tile at full natural size. An absolute cap also lands all three logos on the
   same optical height despite their different aspect ratios. Never crop or
   distort a trademark — width and height stay auto so the ratio is preserved. */
.partner__logo {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 3.25rem;
}

@media (max-width: 520px) {
  .partner {
    width: calc(50% - 0.375rem);
  }
}

/* ------------------------------------------- private investment tiles -- */
/* Literal 1-inch squares: `1in` is a real CSS unit and resolves to 96px, so the
   tiles match the requested physical size rather than approximating it. */
.pi-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

.pi-tile {
  display: grid;
  place-items: center;
  /* Grown from 1in so the labels can carry a readable type size. */
  width: 1.25in;
  height: 1.25in;
  padding: 0.4rem;
  background: #fff;
  border: 1px solid var(--cream-200);
  text-align: center;
  text-decoration: none;
  color: var(--on-cream);
  overflow: hidden;
  transition: transform 0.35s var(--ease-out), border-color 0.3s var(--ease),
    color 0.3s var(--ease), box-shadow 0.35s var(--ease-out);
}

.pi-tile__name {
  font: 500 0.6875rem/1.35 var(--mono);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  /* Long names such as "Professional Plumbing Group" break across three lines
     rather than overflowing the square. */
  overflow-wrap: anywhere;
  hyphens: auto;
}

.pi-tile:hover,
.pi-tile:focus-visible {
  transform: translateY(-3px);
  border-color: var(--brass-500);
  color: var(--brass-700);
  box-shadow: 0 12px 24px -18px color-mix(in srgb, var(--ink-900) 60%, transparent);
}

.pi-note {
  margin-top: 1.1rem;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--on-cream-dim);
  max-width: 62ch;
}

/* ------------------------------------------------------------ showcase -- */
/* Each cell carries its own border rather than relying on a background showing
   through 1px gaps — an incomplete final row would otherwise leave a coloured
   void where no items exist. */
.showcase {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: 0;
}

.showcase__item {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--ink-800);
  border: 1px solid color-mix(in srgb, var(--ink-400) 40%, transparent);
  /* Collapse doubled interior borders. */
  margin: 0 -1px -1px 0;
}

.showcase__kicker {
  margin: 0;
  font: 500 0.625rem/1 var(--mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass-500);
}

.showcase__name {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.375rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--cream-100);
}

.showcase__note {
  margin: 0;
  font-size: 0.875rem;
  color: var(--on-ink-dim);
}

/* --------------------------------------------------------- tools list --- */
.tool {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem 2rem;
  align-items: center;
  padding: 1.4rem 0;
  border-top: 1px solid var(--cream-200);
  text-decoration: none;
  color: inherit;
  transition: padding-inline 0.4s var(--ease);
}

.tool:last-of-type {
  border-bottom: 1px solid var(--cream-200);
}

.tool:hover {
  padding-inline: 0.75rem;
  background: linear-gradient(90deg, color-mix(in srgb, var(--brass-500) 8%, transparent), transparent);
}

.tool__name {
  font-family: var(--serif);
  font-size: 1.25rem;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.tool__host {
  font: 400 0.6875rem/1 var(--mono);
  letter-spacing: 0.06em;
  color: var(--gold-label);
}

.tool__text {
  margin: 0.3rem 0 0;
  font-size: 0.9375rem;
  color: var(--on-cream-dim);
  max-width: 66ch;
}

.tool__cta {
  font: 500 0.6875rem/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-label);
  white-space: nowrap;
}

/* ======================================================================
   Strategy comparison box
   ====================================================================== */
.stratbox {
  --pos: #2f6d52;
  --neg: #9c3d2e;
  position: relative;
  background: var(--ink-850);
  border: 1px solid color-mix(in srgb, var(--brass-500) 26%, transparent);
  color: var(--on-ink);
  overflow: hidden;
}

/* Ledger hairline at the very top of the card. */
.stratbox::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, var(--brass-700), var(--brass-500) 45%, var(--brass-300) 60%, var(--brass-600));
}

.stratbox__head {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  align-items: end;
  justify-content: space-between;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-bottom: 1px solid color-mix(in srgb, var(--ink-400) 45%, transparent);
}

.stratbox__title {
  font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem);
  color: var(--cream-100);
}

.stratbox__sub {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  color: var(--on-ink-dim);
  max-width: 52ch;
}

.stratbox__source {
  font: 400 0.6875rem/1.6 var(--mono);
  letter-spacing: 0.04em;
  color: var(--on-ink-dim);
  text-align: right;
}

.stratbox__source b {
  display: block;
  font-weight: 500;
  color: var(--brass-400);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.625rem;
}

/* ------- controls ------- */
.stratbox__controls {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: flex-end;
  padding: clamp(1.15rem, 2.5vw, 1.75rem) clamp(1.5rem, 3vw, 2.25rem);
  background: color-mix(in srgb, var(--ink-700) 55%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--ink-400) 45%, transparent);
}

.field {
  display: grid;
  gap: 0.5rem;
}

.field__label {
  font: 500 0.625rem/1.2 var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass-400);
}

.field__row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.field input[type="number"],
.field select {
  width: 7.5rem;
  padding: 0.6rem 0.7rem;
  font: 500 1rem/1.2 var(--mono);
  color: var(--cream-50);
  background: var(--ink-900);
  border: 1px solid color-mix(in srgb, var(--brass-500) 32%, transparent);
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.3s var(--ease);
}

.field select {
  width: auto;
  min-width: 11rem;
  padding-right: 2rem;
  font-size: 0.875rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--brass-400) 50%), linear-gradient(135deg, var(--brass-400) 50%, transparent 50%);
  background-position: calc(100% - 15px) center, calc(100% - 10px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.field input[type="number"]:hover,
.field select:hover {
  border-color: color-mix(in srgb, var(--brass-500) 60%, transparent);
}

.field__suffix {
  font: 500 0.9375rem/1 var(--mono);
  color: var(--brass-400);
}

.field__hint {
  font-size: 0.75rem;
  color: var(--on-ink-dim);
}

.rate-presets {
  display: flex;
  gap: 0.35rem;
}

.rate-preset {
  padding: 0.4rem 0.6rem;
  font: 400 0.6875rem/1 var(--mono);
  color: var(--on-ink-dim);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--ink-400) 55%, transparent);
  cursor: pointer;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.rate-preset:hover {
  color: var(--brass-300);
  border-color: color-mix(in srgb, var(--brass-500) 55%, transparent);
}

.rate-preset[aria-pressed="true"] {
  color: var(--ink-900);
  background: var(--brass-500);
  border-color: var(--brass-500);
}

.check {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8125rem;
  color: var(--on-ink-dim);
  cursor: pointer;
  max-width: 30ch;
}

.check input {
  flex-shrink: 0;
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--brass-500);
  cursor: pointer;
}

/* ------- results table ------- */
.stratbox__body {
  padding: clamp(1.25rem, 3vw, 2.25rem);
}

.stratbox__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.strattable {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.strattable caption {
  text-align: left;
  padding-bottom: 1rem;
  font: 500 0.625rem/1.4 var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass-400);
}

.strattable th,
.strattable td {
  padding: 0.9rem 0.75rem;
  text-align: right;
  border-bottom: 1px solid color-mix(in srgb, var(--ink-400) 34%, transparent);
}

.strattable thead th.col-period {
  text-align: left;
}

.strattable thead th {
  font: 500 0.6875rem/1.4 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-ink-dim);
  border-bottom-color: color-mix(in srgb, var(--brass-500) 40%, transparent);
  vertical-align: bottom;
}

.strattable thead th small {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.625rem;
  letter-spacing: 0.04em;
  text-transform: none;
  color: color-mix(in srgb, var(--on-ink-dim) 78%, transparent);
}

.strattable th[scope="row"] {
  text-align: left;
  font: 400 1rem/1.3 var(--serif);
  color: var(--cream-100);
  white-space: nowrap;
}

.strattable th[scope="row"] small {
  display: block;
  font: 400 0.625rem/1.5 var(--mono);
  letter-spacing: 0.04em;
  color: var(--on-ink-dim);
}

.strattable tbody tr:last-child th,
.strattable tbody tr:last-child td {
  border-bottom: 0;
}

.strattable tbody tr {
  transition: background 0.3s var(--ease);
}

.strattable tbody tr:hover {
  background: color-mix(in srgb, var(--ink-700) 45%, transparent);
}

.num {
  display: block;
  font: 500 clamp(1rem, 0.95rem + 0.35vw, 1.25rem)/1.2 var(--mono);
  color: var(--cream-50);
  white-space: nowrap;
}

/* Series colour, not sentiment colour: a positive return is not a signal.
   Each column matches its legend swatch; only losses turn red. */
.num--bench { color: #a8c6e4; }
.num--strat { color: var(--brass-300); }
.num--neg { color: #e79b8b; }
.num--muted { color: var(--on-ink-dim); font-size: 0.8125rem; }

.cell-figure {
  min-width: 8.5rem;
}

/* Bars must be block-level: width/height do nothing on an inline span. */
.bar {
  display: block;
  position: relative;
  width: 100%;
  max-width: 8rem;
  height: 5px;
  margin-top: 0.5rem;
  margin-left: auto;
  background: color-mix(in srgb, var(--ink-500) 40%, transparent);
}

.bar__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: linear-gradient(90deg, var(--brass-600), var(--brass-400));
  transition: width 0.9s var(--ease-out);
}

.bar__fill--dia {
  background: linear-gradient(90deg, var(--ink-400), #6f9cc6);
}

.bar__fill--neg {
  background: linear-gradient(90deg, #7d3325, #b35a45);
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  margin-top: 1.25rem;
  font: 400 0.6875rem/1.5 var(--mono);
  color: var(--on-ink-dim);
}

.legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.legend i {
  width: 14px;
  height: 6px;
  flex-shrink: 0;
}

.legend i.k-dia { background: linear-gradient(90deg, var(--ink-400), #6f9cc6); }
.legend i.k-strat { background: linear-gradient(90deg, var(--brass-600), var(--brass-400)); }

/* Narrow screens: stack each period into a labelled block rather than pushing
   the strategy column — the whole point of the table — off the side. The markup
   stays a real <table>; only the presentation changes. */
@media (max-width: 640px) {
  .stratbox__scroll {
    overflow-x: visible;
  }

  .strattable {
    min-width: 0;
    display: block;
  }

  .strattable caption {
    display: block;
  }

  .strattable thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .strattable tbody,
  .strattable tbody tr {
    display: block;
  }

  .strattable tbody tr {
    padding-block: 1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--brass-500) 22%, transparent);
  }

  .strattable tbody tr:last-child {
    border-bottom: 0;
  }

  .strattable th[scope="row"] {
    display: block;
    padding: 0 0 0.75rem;
    border: 0;
    font-size: 1.25rem;
  }

  .strattable td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.4rem 0;
    border: 0;
  }

  .strattable td::before {
    content: attr(data-label);
    font: 500 0.625rem/1.4 var(--mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--on-ink-dim);
  }

  .cell-figure {
    /* Number over its bar, right-aligned against the label. */
    flex-wrap: wrap;
  }

  .cell-figure .bar {
    flex: 0 0 100%;
    max-width: none;
    margin-top: 0.35rem;
  }
}

/* ------- footnotes / states ------- */
.stratbox__foot {
  padding: clamp(1rem, 2.5vw, 1.5rem) clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid color-mix(in srgb, var(--ink-400) 45%, transparent);
  background: color-mix(in srgb, var(--ink-900) 55%, transparent);
}

.stratbox__assumption {
  margin: 0;
  font: 500 0.8125rem/1.6 var(--mono);
  color: var(--brass-300);
}

.stratbox__notes {
  margin: 0.9rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.4rem;
  font-size: 0.8125rem;
  color: var(--on-ink-dim);
}

.stratbox__notes li {
  padding-left: 1.1rem;
  position: relative;
}

.stratbox__notes li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--gold-on-ink);
}

.stratbox__state {
  display: grid;
  place-items: center;
  gap: 1rem;
  min-height: 220px;
  padding: 2rem;
  text-align: center;
}

.stratbox__state p {
  margin: 0;
  max-width: 46ch;
  font-size: 0.9375rem;
  color: var(--on-ink-dim);
}

.stratbox__state strong {
  display: block;
  font: 500 0.6875rem/1 var(--mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass-400);
}

.spinner {
  width: 26px;
  height: 26px;
  border: 1px solid color-mix(in srgb, var(--brass-500) 25%, transparent);
  border-top-color: var(--brass-500);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

@keyframes spin {
  to { rotate: 360deg; }
}

.is-recalculating .strattable tbody {
  opacity: 0.45;
  transition: opacity 0.2s linear;
}

.disclaimer {
  margin: 1.25rem 0 0;
  padding: 1.15rem 1.35rem;
  border-left: 2px solid var(--brass-600);
  background: color-mix(in srgb, var(--cream-200) 45%, transparent);
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--on-cream-dim);
}

.section--ink .disclaimer {
  background: color-mix(in srgb, var(--ink-700) 45%, transparent);
  color: var(--on-ink-dim);
}

/* ======================================================================
   Contact
   ====================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

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

.detail-list {
  margin: 0;
  display: grid;
  gap: 1.5rem;
}

.detail-list dt {
  font: 500 0.625rem/1 var(--mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-label);
  margin-bottom: 0.45rem;
}

.detail-list dd {
  margin: 0;
  font-size: 1rem;
}

.detail-list dd a {
  text-decoration-color: color-mix(in srgb, var(--brass-500) 50%, transparent);
  text-underline-offset: 3px;
}

.form {
  display: grid;
  gap: 1.25rem;
}

.form__field {
  display: grid;
  gap: 0.5rem;
}

.form__field label {
  font: 500 0.625rem/1 var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-cream-dim);
}

.form__field input,
.form__field textarea {
  padding: 0.8rem 0.9rem;
  font: 400 1rem/1.5 var(--sans);
  color: var(--on-cream);
  background: #fff;
  border: 1px solid var(--cream-200);
  border-radius: 0;
  transition: border-color 0.3s var(--ease);
}

.form__field input:hover,
.form__field textarea:hover {
  border-color: var(--cream-300);
}

.form__field input:focus,
.form__field textarea:focus {
  border-color: var(--brass-500);
}

.form__field textarea {
  min-height: 8rem;
  resize: vertical;
}

.form__note {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--on-cream-dim);
}

/* ======================================================================
   Footer + fixed ticker
   ====================================================================== */
.site-footer {
  background: var(--ink-900);
  color: var(--on-ink-dim);
  padding-block: clamp(2.75rem, 6vh, 4.5rem) 2rem;
  border-top: 1px solid color-mix(in srgb, var(--brass-500) 22%, transparent);
}

.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(140px, 1fr));
  gap: clamp(1.75rem, 4vw, 3rem);
  padding-bottom: 2.5rem;
}

.site-footer__mark {
  display: grid;
  gap: 1rem;
  max-width: 34ch;
}

.site-footer__mark .crest {
  width: 34px;
  color: var(--brass-500);
}

.site-footer__mark p {
  margin: 0;
  font-size: 0.875rem;
}

.footer-col h2 {
  font: 500 0.625rem/1 var(--mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-on-ink);
  margin-bottom: 1rem;
}

.footer-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.6rem;
}

.footer-col a {
  font-size: 0.875rem;
  text-decoration: none;
  color: var(--on-ink);
  transition: color 0.25s var(--ease);
}

.footer-col a:hover {
  color: var(--brass-300);
}

.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  justify-content: space-between;
  padding-top: 1.75rem;
  border-top: var(--rule-dark);
  font-size: 0.75rem;
}

.site-footer__base p {
  margin: 0;
  max-width: 78ch;
}

/* --- Fixed market ticker --------------------------------------------- */
.tickerbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  height: var(--ticker-h);
  display: flex;
  align-items: center;
  background: var(--ink-900);
  border-top: 1px solid var(--brass-600);
  box-shadow: 0 -12px 30px -20px rgba(0, 0, 0, 0.9);
}

/* Hairline of brass above the bar, matching the certificate double-rule. */
.tickerbar::before {
  content: "";
  position: absolute;
  inset: auto 0 100% 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--brass-500) 55%, transparent), transparent);
}

.tickerbar__label {
  flex-shrink: 0;
  display: none;
  align-items: center;
  gap: 0.55rem;
  height: 100%;
  padding-inline: 1rem;
  border-right: 1px solid color-mix(in srgb, var(--brass-500) 25%, transparent);
  font: 500 0.5625rem/1 var(--mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-on-ink);
  white-space: nowrap;
}

.tickerbar__label i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #4fbf85;
  box-shadow: 0 0 0 0 rgba(79, 191, 133, 0.6);
  animation: pulse 2.4s var(--ease) infinite;
}

@keyframes pulse {
  70% { box-shadow: 0 0 0 7px rgba(79, 191, 133, 0); }
  100% { box-shadow: 0 0 0 0 rgba(79, 191, 133, 0); }
}

@media (min-width: 700px) {
  .tickerbar__label {
    display: flex;
  }
}

.tickerbar__widget {
  flex: 1;
  min-width: 0;
  height: 100%;
  overflow: hidden;
}

/* The TradingView embed renders its own iframe; keep it flush in the bar. */
.tickerbar__widget iframe {
  display: block;
  height: 100% !important;
}

.tickerbar__widget .tradingview-widget-copyright {
  font: 400 0.5625rem/1 var(--mono);
  padding-left: 0.75rem;
  color: var(--on-ink-dim);
}

.tickerbar__widget .tradingview-widget-copyright a {
  color: var(--gold-on-ink);
  text-decoration: none;
}

/* Fallback shown when the embed is blocked or offline. */
.tickerbar__fallback {
  display: flex;
  align-items: center;
  height: 100%;
  padding-inline: 1rem;
  font: 400 0.6875rem/1 var(--mono);
  letter-spacing: 0.08em;
  color: var(--on-ink-dim);
}

/* ======================================================================
   Motion & responsiveness safeguards
   ====================================================================== */

/* Coarse pointers / small screens: keep the reveals, drop the expensive bits. */
@media (max-width: 760px) {
  :root {
    --parallax-depth: 12px;
  }

  /* The tracked-out subtitle outgrows the firm name on a narrow viewport. */
  .hero__name em {
    font-size: 0.38em;
    letter-spacing: 0.2em;
    text-indent: 0.2em;
  }

  .hero__meta {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 0.85rem;
    letter-spacing: 0.2em;
  }

  .hero__meta span {
    display: none;
  }

  .hero__medallion {
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--brass-400) 65%, transparent),
      0 0 0 5px var(--ink-900),
      0 0 0 6px color-mix(in srgb, var(--brass-600) 40%, transparent);
  }

  .hero__rosette {
    mask-image:
      radial-gradient(circle at 50% 50%, transparent 22%, #000 30%, transparent 66%),
      linear-gradient(180deg, #000 0 56%, rgba(0, 0, 0, 0.3) 74%, rgba(0, 0, 0, 0) 92%);
  }

  .hero__hatch {
    background-image: repeating-linear-gradient(0deg, color-mix(in srgb, var(--brass-400) 8%, transparent) 0 1px, transparent 1px 5px);
  }

  [data-reveal] {
    transform: translateY(18px);
    transition-duration: 0.7s, 0.7s;
  }

  .site-header {
    position: sticky;
  }
}

@media (hover: none) {
  /* Backdrop blur on a scrolling header is costly on mobile GPUs. */
  .site-header {
    backdrop-filter: none;
    background: var(--ink-900);
  }
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  /* Every animated element must be legible in its final state. */
  .hero__rosette {
    opacity: 1;
  }

  .hero__medallion {
    opacity: 1;
    transform: none;
  }

  .hero__crest .crest-shield,
  .hero__crest .crest-inner {
    stroke-dashoffset: 0;
  }

  .hero__crest .crest-charge,
  .hero__crest .crest-date,
  .hero__inner > .reveal-load {
    opacity: 1;
    transform: none;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }

  [data-parallax] {
    transform: none;
  }

  .spinner {
    animation: none;
    border-top-color: transparent;
    border-left-color: var(--brass-500);
  }
}

@media print {
  .site-header,
  .tickerbar,
  .stratbox__controls {
    display: none;
  }

  body {
    padding-bottom: 0;
    background: #fff;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}