/* Hallmark · macrostructure: Split Studio · tone: classic authority · anchor hue: gold
 * theme: studied-DNA (source: supplied screenshots) · display: DM Serif Display · body: Manrope
 * Scope: existing page structure, two colour variants, decorative CSS artwork only.
 */
@font-face {
  font-family: "DM Serif Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/dm-serif-display.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/manrope-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/manrope-bold.woff2") format("woff2");
}
body.t-crest {
  --color-paper: oklch(98.6% 0.006 80);
  --color-surface: oklch(96.6% 0.008 250);
  --color-ink: oklch(21% 0.045 252);
  --color-muted: oklch(43% 0.028 253);
  --color-band: oklch(19% 0.052 248);
  --color-band-light: oklch(29% 0.06 252);
  --color-gold: oklch(79% 0.118 80);
  --color-gold-light: oklch(88% 0.105 85);
  --color-gold-dark: oklch(47% 0.085 78);
  --color-light: oklch(99.4% 0.003 80);
  --color-light-muted: oklch(82% 0.023 250);
  --color-line: oklch(90% 0.015 250);
  --color-dark-line: oklch(37% 0.044 250);
  --color-focus: oklch(56% 0.18 250);
  --color-clear: oklch(19% 0.052 248 / 0);
  --font-display: "DM Serif Display", Georgia, serif;
  --font-body: "Manrope", sans-serif;
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs: 12px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;
  --space-3xl: 80px;
  --space-4xl: 96px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --bg: var(--color-paper);
  --ink: var(--color-ink);
  --accent: var(--color-gold-dark);
  --muted: var(--color-muted);
  --line: var(--color-line);
  --card: var(--color-surface);
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.7 var(--font-body);
  color-scheme: light;
  overflow-wrap: anywhere;
}
body.t-crest[data-variant="burgundy"] {
  --color-paper: oklch(98% 0.012 80);
  --color-surface: oklch(95.8% 0.015 65);
  --color-ink: oklch(27% 0.052 15);
  --color-muted: oklch(44% 0.03 20);
  --color-band: oklch(25% 0.076 12);
  --color-band-light: oklch(35% 0.085 15);
  --color-gold: oklch(80% 0.095 80);
  --color-gold-light: oklch(89% 0.085 85);
  --color-gold-dark: oklch(47% 0.072 73);
  --color-light-muted: oklch(84% 0.019 70);
  --color-line: oklch(90% 0.019 65);
  --color-dark-line: oklch(42% 0.044 20);
  --color-clear: oklch(25% 0.076 12 / 0);
}
.t-crest *, .t-crest *::before, .t-crest *::after { box-sizing: border-box; }
.t-crest .wrap { width: min(1320px, calc(100% - 104px)); max-width: none; margin-inline: auto; padding-inline: 0; }
.t-crest a { color: var(--accent); text-underline-offset: 4px; }
.t-crest a:hover { text-decoration-thickness: 2px; }
.t-crest a:active { opacity: 0.8; }
.t-crest :is(a, summary, audio):focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
.t-crest :is(.hero, .cta, footer) :is(a, summary, audio):focus-visible { outline-color: var(--color-gold-light); }
.t-crest [aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.t-crest header { border-bottom: 1px solid var(--line); background: var(--bg); }
.t-crest header .wrap { min-height: 84px; padding-block: var(--space-2xs); gap: var(--space-lg); flex-wrap: nowrap; }
.t-crest .brand { display: inline-flex; align-items: center; gap: var(--space-xs); flex-shrink: 0; color: var(--ink); }
.t-crest .brand .mark { display: block; width: 64px; height: 64px; background: url("crown.svg") center / contain no-repeat; }
.t-crest .brand .word { color: var(--ink); font: 400 36px/1 var(--font-display); letter-spacing: -0.035em; }
.t-crest .brand .word > span { display: block; margin-top: var(--space-2xs); color: var(--accent); font: 700 11px/1.1 var(--font-body); letter-spacing: 0.3em; text-transform: uppercase; }
.t-crest nav { align-items: center; justify-content: flex-end; gap: var(--space-md); }
.t-crest nav a { display: inline-flex; align-items: center; min-height: 44px; border-bottom: 2px solid transparent; color: var(--ink); font: 700 12px/1.3 var(--font-body); white-space: nowrap; }
.t-crest nav a:hover, .t-crest nav a[aria-current] { color: var(--ink); border-bottom-color: var(--accent); }
.t-crest .hero { position: relative; isolation: isolate; background: var(--color-band); color: var(--color-light); overflow: hidden; }
.t-crest .hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, var(--color-band) 30%, var(--color-clear) 80%), radial-gradient(ellipse at 75% 22%, var(--color-band-light), var(--color-clear) 65%), linear-gradient(0deg, var(--color-band), var(--color-band-light));
}
.t-crest .hero::after { content: ""; position: absolute; z-index: -1; width: 440px; height: 440px; right: max(7%, calc((100% - 1320px) / 2)); top: calc(50% - 220px); background: url("crown.svg") center / contain no-repeat; opacity: 0.65; }
.t-crest .hero > .wrap { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; min-height: 520px; padding-block: var(--space-3xl); }
.t-crest h1, .t-crest h2, .t-crest h3 { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.025em; line-height: 1.12; min-width: 0; overflow-wrap: anywhere; }
.t-crest .hero h1 { font-size: clamp(40px, 3.2vw, 46px); line-height: 1.08; color: var(--color-gold); max-width: 520px; width: 48%; margin: 0 0 var(--space-lg); text-wrap: balance; }
.t-crest .hero .lede { width: 48%; max-width: 470px; color: var(--color-light); font-size: 16px; line-height: 1.7; }
.t-crest .hero .lede p { margin: 0; }
.t-crest .hero .lede p + p { margin-top: var(--space-sm); }
.t-crest .hero a { color: var(--color-gold-light); }
.t-crest .hero .note { color: var(--color-gold); margin: 0 0 var(--space-sm); max-width: 52%; }
.t-crest main.wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-lg); padding-block: var(--space-2xl) var(--space-xl); }
.t-crest main > * { grid-column: 1 / -1; min-width: 0; }
.t-crest main > :is(h2, h3, h4, p, ul, ol, .transcript) { width: 100%; max-width: 850px; margin-inline: auto; }
.t-crest main > h2 { font-size: clamp(28px, 2.8vw, 38px); margin-top: var(--space-2xl); margin-bottom: var(--space-md); }
.t-crest main > h2:first-child { margin-top: 0; }
.t-crest main > h3 { font-size: 25px; margin-top: var(--space-xl); margin-bottom: var(--space-sm); }
.t-crest main p { margin-top: 0; margin-bottom: var(--space-sm); }
.t-crest main > h2 ~ p { line-height: 1.8; }
.t-crest main > .note { margin-block: var(--space-md); }
.t-crest .note { font: 400 13px/1.65 var(--font-body); color: var(--muted); }
.t-crest main > .card { width: 100%; max-width: 850px; margin: 0 auto var(--space-xl); padding: var(--space-lg); }
.t-crest .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); margin-bottom: var(--space-md); }
.t-crest .card { border: 1px solid var(--line); border-radius: 4px; background: var(--card); padding: var(--space-md); margin: 0; min-width: 0; }
.t-crest .card h3 { font-size: 24px; margin: 0 0 var(--space-sm); }
.t-crest .card p { font-size: 14px; }
.t-crest .card p:last-child { margin-bottom: 0; }
.t-crest .tw { max-width: 100%; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; margin: 0 0 var(--space-xl); border: 1px solid var(--line); border-radius: 4px; background: var(--card); }
.t-crest table, .t-crest table.wrap { width: 100%; min-width: 680px; margin: 0; font: 400 14px/1.65 var(--font-body); }
.t-crest th, .t-crest td { padding: var(--space-sm); border-bottom: 1px solid var(--line); vertical-align: top; }
.t-crest thead { background: var(--color-band); color: var(--color-light); }
.t-crest thead th { font-size: 12px; font-weight: 700; }
.t-crest tbody th { font-weight: 700; }
.t-crest tbody tr:nth-child(even) { background: var(--bg); }
.t-crest caption { padding: var(--space-sm); color: var(--muted); background: var(--bg); font-size: 12px; line-height: 1.7; white-space: normal; }
.t-crest details { max-width: 850px; margin-inline: auto; padding: 0; border-bottom: 1px solid var(--line); }
.t-crest main > details { grid-column: auto; max-width: none; margin: 0; align-self: start; }
.t-crest summary { position: relative; padding: var(--space-md) var(--space-lg) var(--space-md) 0; list-style: none; font: 700 14px/1.65 var(--font-body); color: var(--ink); }
.t-crest summary::-webkit-details-marker { display: none; }
.t-crest summary::after { content: "+"; position: absolute; right: var(--space-3xs); top: var(--space-md); color: var(--accent); font-weight: 400; font-size: 20px; }
.t-crest details[open] summary::after { content: "−"; }
.t-crest summary:hover { color: var(--accent); }
.t-crest summary:active { opacity: 0.8; }
.t-crest details[open] { padding-bottom: var(--space-sm); }
.t-crest details p { font-size: 15px; padding-right: var(--space-lg); }
.t-crest .cta { display: flex; justify-content: space-between; gap: var(--space-md); margin: var(--space-2xl) 0 0; padding: var(--space-lg); background: var(--color-band); color: var(--color-light); border: 1px solid var(--color-dark-line); border-radius: 4px; font: 400 15px/1.65 var(--font-body); }
.t-crest .cta > span { max-width: 650px; }
.t-crest .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); min-height: 48px; padding: var(--space-xs) var(--space-md); border: 1px solid var(--color-gold); border-radius: 4px; background: linear-gradient(110deg, var(--color-gold), var(--color-gold-light) 48%, var(--color-gold)); color: var(--color-ink); font: 700 14px/1.5 var(--font-body); text-decoration: none; white-space: nowrap; transition: transform 150ms var(--ease-out); }
.t-crest .btn::after { content: "→"; font-size: 20px; line-height: 1; }
.t-crest .btn:hover { transform: translateY(-2px); }
.t-crest .btn:active { transform: translateY(1px); }
.t-crest audio { display: block; max-width: 850px; margin: var(--space-md) auto; }
.t-crest .video { width: 100%; max-width: 850px; margin: var(--space-lg) auto; }
.t-crest .video iframe { max-width: 100%; border-radius: 4px; }
.t-crest .eps { margin-block: 0 var(--space-xl); }
.t-crest .eps li { padding-block: var(--space-md); border-bottom: 1px solid var(--line); }
.t-crest footer { padding-block: var(--space-xl); border-top: 1px solid var(--color-dark-line); background: var(--color-band); color: var(--color-light-muted); font: 400 13px/1.85 var(--font-body); }
.t-crest footer p { margin: 0 0 var(--space-sm); max-width: 1100px; }
.t-crest footer p:last-child { margin-bottom: 0; }
.t-crest footer strong { color: var(--color-light); }
.t-crest footer a { color: var(--color-gold-light); }
@media (max-width: 1100px) {
  .t-crest .wrap { width: calc(100% - 64px); }
  .t-crest nav { gap: var(--space-sm); }
  .t-crest .hero::after { width: 320px; height: 320px; top: calc(50% - 160px); right: 4%; }
  .t-crest .hero h1 { font-size: 44px; }
}
@media (max-width: 760px) {
  .t-crest .wrap { width: calc(100% - 40px); }
  .t-crest header .wrap { flex-direction: column; align-items: flex-start; gap: 0; padding-top: var(--space-3xs); padding-bottom: 0; }
  .t-crest .brand .mark { width: 56px; height: 56px; }
  .t-crest .brand .word { font-size: 32px; }
  .t-crest .brand .word > span { font-size: 10px; margin-top: var(--space-3xs); }
  .t-crest nav { justify-content: space-between; flex-wrap: wrap; width: 100%; gap: 0 var(--space-xs); padding-top: var(--space-3xs); }
  .t-crest nav a { font-size: 11px; }
  .t-crest .hero > .wrap { min-height: 0; padding-block: var(--space-xl) var(--space-2xl); justify-content: flex-start; }
  .t-crest .hero h1 { width: 100%; max-width: 100%; font-size: 32px; margin-bottom: var(--space-lg); text-wrap: pretty; }
  .t-crest .hero .lede { width: 100%; max-width: 100%; font-size: 15px; line-height: 1.7; }
  .t-crest .hero .note { max-width: 100%; }
  .t-crest .hero::after { width: 200px; height: 200px; top: auto; bottom: calc(-1 * var(--space-lg)); right: calc(-1 * var(--space-lg)); opacity: 0.14; }
  .t-crest .hero::before { background: linear-gradient(180deg, var(--color-band) 30%, var(--color-clear)), radial-gradient(ellipse at 90% 80%, var(--color-band-light), var(--color-clear) 65%), var(--color-band); }
  .t-crest main.wrap { grid-template-columns: minmax(0, 1fr); padding-block: var(--space-xl); }
  .t-crest main > h2 { margin-top: var(--space-xl); font-size: 28px; }
  .t-crest main > h3 { font-size: 23px; }
  .t-crest main > .card { padding: var(--space-md); }
  .t-crest .cards { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
  .t-crest .cta { flex-direction: column; align-items: flex-start; padding: var(--space-md); }
  .t-crest footer { font-size: 12px; padding-block: var(--space-lg); }
}
@media (prefers-reduced-motion: reduce) {
  .t-crest .btn { transition: none; }
  .t-crest .btn:hover, .t-crest .btn:active { transform: none; }
}
