/* Faulkner Governance Risk & Compliance. Second design: a luxury register. Serif display,
   sans text and labels, obsidian bands, hairlines, one accent. Tokens on
   :root; dark scheme by preference or by data-theme. Radius 0, no shadows. */

:root {
  --navy: #1F4E79;
  --sky: #8FB3D9;
  --obsidian: #0B0F14;
  --steel: #C9D3DE;
  --ink: #1B2430;
  --paper: #FFFFFF;
  --ground: #F5F7F9;
  --signal: #B7791F;
  --signal-hover: #BD8431;
  --soft: #46515E;
  --divider: #D8DEE5;
  --rule: #1B2430;
  --link: #1F4E79;
  --label: #1F4E79;
  --focus: #1F4E79;
  --body: #1B2430;
  --heading: #1B2430;
  /* band roles, obsidian in both schemes */
  --band-bg: #0B0F14;
  --band-heading: #E8ECF0;
  --band-body: #C9D3DE;
  --band-soft: #858C95;
  --band-label: #8FB3D9;
  --band-divider: #262A30;
  --band-rule: #4F565D;
  --band-focus: #8FB3D9;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
  --gutter: clamp(16px, 4vw, 48px);
  --frame: 1200px;
  --measure: 66ch;
  --section: clamp(40px, 1.5rem + 2.5vw, 64px);
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0B0F14;
    --paper: #141A21;
    --ink: #E8ECF0;
    --body: #C9D3DE;
    --heading: #E8ECF0;
    --soft: #AEB8C4;
    --divider: #2A3441;
    --rule: #4F565D;
    --navy: #6FB1DC;
    --link: #6FB1DC;
    --label: #6FB1DC;
    --focus: #6FB1DC;
  }
}
:root[data-theme="dark"] {
  --ground: #0B0F14;
  --paper: #141A21;
  --ink: #E8ECF0;
  --body: #C9D3DE;
  --heading: #E8ECF0;
  --soft: #AEB8C4;
  --divider: #2A3441;
  --rule: #4F565D;
  --navy: #6FB1DC;
  --link: #6FB1DC;
  --label: #6FB1DC;
  --focus: #6FB1DC;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; font-synthesis: none; }
body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--ground);
  color: var(--body);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-weight: 400;
  text-rendering: optimizeLegibility;
}
main { flex: 1; }
::selection { background: var(--sky); color: var(--obsidian); }

a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 1.5px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.band :focus-visible { outline-color: var(--band-focus); }

.skip { position: absolute; left: 16px; top: -100px; background: var(--paper); color: var(--ink); padding: 8px 12px; z-index: 10; }
.skip:focus { top: 16px; }

.frame { width: min(var(--frame), 100% - 2 * var(--gutter)); margin-inline: auto; }
.prose { max-width: var(--measure); }
.prose p { margin: 0 0 1.5em; }
p { margin: 0 0 1em; }

/* Type */
h1, h2, h3, .deck, .figure { color: var(--heading); margin: 0; }
h1 { font-family: var(--serif); font-weight: 300; font-size: clamp(2.5rem, 1.5rem + 4.3vw, 5rem); line-height: 1.02; letter-spacing: -0.012em; text-wrap: balance; max-width: 16ch; }
.h1-interior, h1.interior { font-size: clamp(2.125rem, 1.35rem + 3.2vw, 3.75rem); line-height: 1.06; max-width: 20ch; }
h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(2rem, 1.4rem + 2vw, 3rem); line-height: 1.08; letter-spacing: -0.01em; text-wrap: balance; }
h3 { font-family: var(--serif); font-weight: 400; font-size: 1.375rem; line-height: 1.25; letter-spacing: -0.005em; text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
.deck { font-family: var(--serif); font-weight: 400; font-size: clamp(1.1875rem, 1rem + 0.5vw, 1.375rem); line-height: 1.45; max-width: 34em; }
.deck p { margin: 0 0 0.75em; }
.deck p:last-child { margin-bottom: 0; }
.label {
  font-family: var(--sans); font-size: 0.75rem; line-height: 1.35; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--label);
  font-variant-numeric: tabular-nums;
}
.label .tick { display: inline-block; width: 1px; height: 12px; background: currentColor; margin: 0 20px; vertical-align: -1px; opacity: 0.6; }
.small { font-size: 0.875rem; line-height: 1.5; }
.soft { color: var(--soft); }
.num { font-variant-numeric: tabular-nums; }

/* Bands */
.band { background: var(--band-bg); color: var(--band-body); -webkit-font-smoothing: antialiased; }
.band h1, .band h2, .band h3 { color: var(--band-heading); }
.band .deck { color: var(--band-body); }
.band .label { color: var(--band-label); }
.band .soft { color: var(--band-soft); }
.band a { color: var(--band-label); }
.waterline { height: 2px; background: var(--sky); }

/* Header */
.site-header { height: 72px; display: flex; align-items: center; border-bottom: 1px solid var(--band-divider); }
.site-header .frame { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { display: block; height: 26px; width: auto; }
.brand .lockup { display: none; }
.brand .mark { display: block; }
@media (min-width: 880px) { .brand .lockup { display: block; height: 60px; } .brand .mark { display: none; } }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 32px; }
.site-nav a {
  display: inline-flex; align-items: center; height: 44px;
  font-family: var(--sans); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--band-body); text-decoration: none; position: relative;
}
.site-nav a:hover { color: var(--band-heading); }
.site-nav a[aria-current="page"] { color: var(--band-heading); }
.site-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 10px; height: 1px; background: currentColor; }
/* Under 600 px the four links do not fit beside the mark, so the header
   becomes two rows: the mark, then the nav on its own line. */
@media (max-width: 599px) {
  .site-header { height: auto; padding: 10px 0 0; }
  .site-header .frame { flex-wrap: wrap; row-gap: 0; }
  .brand { height: 40px; }
  .site-nav { flex-basis: 100%; }
  .site-nav ul { gap: 14px; flex-wrap: wrap; }
  .site-nav a { font-size: 0.6875rem; letter-spacing: 0.06em; height: 36px; }
  .site-nav a[aria-current="page"]::after { bottom: 8px; }
}

/* Hero */
.hero { padding: clamp(56px, 6vw, 104px) 0 clamp(48px, 5vw, 80px); }
.hero .frame { display: grid; grid-template-columns: 1fr; gap: 48px; }
@media (min-width: 1024px) { .hero .frame { grid-template-columns: 7fr 5fr; align-items: end; column-gap: 64px; } }
.hero h1 { margin: 28px 0 32px; }
.hero .deck { margin-bottom: 40px; }

.strip { margin-top: 56px; border-top: 1px solid var(--band-rule); display: grid; grid-template-columns: 1fr; }
.strip > div { padding: 20px 0; border-bottom: 1px solid var(--band-divider); }
.strip .label { display: block; color: var(--band-soft); margin-bottom: 10px; }
.strip .value { display: block; font-family: var(--serif); font-size: 1.25rem; line-height: 1.35; color: var(--band-heading); }
@media (min-width: 600px) {
  .strip { grid-template-columns: repeat(3, 1fr); column-gap: 0; }
  .strip > div { border-bottom: 0; padding: 28px 32px 8px 0; border-left: 1px solid var(--band-divider); padding-left: 32px; }
  .strip > div:first-child { border-left: 0; padding-left: 0; }
}
@media (max-width: 599px) { .hero .label .tick { display: none; } .hero .label .place { display: block; margin-top: 4px; } }
.terms { margin: 20px 0 0; }
.title-band { padding: clamp(48px, 6vw, 96px) 0 clamp(40px, 5vw, 72px); }
.title-band h1 { margin: 24px 0 24px; }
.title-band .deck { max-width: 36em; }

/* Button */
.button {
  display: inline-flex; align-items: center; justify-content: center;
  height: 52px; padding: 0 32px;
  background: transparent; color: var(--heading); border: 1px solid var(--signal);
  font-family: var(--sans); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; line-height: 1; transition: background 160ms ease, color 160ms ease;
}
.button:hover { background: var(--signal); color: var(--obsidian); }
.band .button { color: var(--band-heading); }
.band .button:hover { color: var(--obsidian); }
.button:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.band .button:focus-visible { outline-color: var(--band-focus); }

/* Figures strip */
.figures { border-bottom: 1px solid var(--divider); }
.figures .frame { display: grid; grid-template-columns: 1fr; }
.figures > .frame > div { padding: 24px 0; border-top: 1px solid var(--divider); }
.figure { font-family: var(--serif); font-weight: 300; font-size: clamp(2.25rem, 1.8rem + 2.2vw, 3.75rem); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.figure-caption { display: block; margin-top: 10px; font-size: 0.875rem; color: var(--soft); max-width: 24ch; line-height: 1.45; }
@media (min-width: 600px) { .figures .frame { grid-template-columns: repeat(3, 1fr); column-gap: 24px; } .figures > .frame > div { border-top: 0; padding: 32px 0; } }
.figures.four .frame { grid-template-columns: 1fr 1fr; }
@media (min-width: 1024px) { .figures.four .frame { grid-template-columns: repeat(4, 1fr); } }

/* Sections and the rail */
.section { padding: 0; }
.section > .frame { border-top: 1px solid var(--rule); padding: var(--section) 0; }
.section.first > .frame { border-top: 0; }
.section .frame { display: grid; grid-template-columns: 1fr; row-gap: 16px; }
@media (min-width: 1024px) { .section .frame { grid-template-columns: minmax(140px, 2fr) 10fr; column-gap: 40px; align-items: baseline; } .section .content { max-width: 920px; } .section .content.prose { max-width: 920px; } }
.rail { display: flex; gap: 12px; align-items: baseline; }
.numeral { font-family: var(--serif); font-weight: 300; font-size: 2.5rem; line-height: 1; color: var(--heading); letter-spacing: 0.06em; position: relative; padding-bottom: 14px; display: inline-block; }
.numeral::after { content: ""; position: absolute; left: 0; bottom: 0; width: 28px; height: 2px; background: var(--sky); }
.numeral.small { font-size: 1.25rem; padding-bottom: 8px; margin-bottom: 8px; }
.numeral.small::after { width: 18px; height: 1px; }
@media (max-width: 1023px) { .rail { margin-bottom: 8px; } .numeral { font-size: 1.75rem; } }
@media (min-width: 1024px) { .rail.sticky { position: sticky; top: 24px; align-self: start; } }
.content > h2, .prose > h2 { margin-bottom: 32px; }
#fit .prose p, #outside .prose p { font-family: var(--serif); font-size: clamp(1.1875rem, 1rem + 0.6vw, 1.5rem); line-height: 1.5; color: var(--heading); max-width: none; margin-bottom: 1.2em; }
.content > .heading-row { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap; margin-bottom: 32px; }
.content > .heading-row h2 { margin: 0; }
.more { font-size: 0.9375rem; font-weight: 500; white-space: nowrap; }
.more .arrow { display: inline-block; margin-left: 6px; transition: transform 160ms cubic-bezier(.2,.7,.2,1); }
.more:hover .arrow { transform: translateX(4px); }

/* Register rows */
.register { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--divider); }
.register > li { border-top: 1px solid var(--divider); padding: 20px 0; display: grid; grid-template-columns: 1fr; gap: 8px; }
.register .idx { font-family: var(--sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; color: var(--soft); font-variant-numeric: tabular-nums; }
.register h3 { margin: 0; }
.register h3 a { color: var(--heading); text-decoration: none; }
.register h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.register p { margin: 0; color: var(--soft); max-width: 60ch; }
@media (min-width: 1024px) { .register > li { grid-template-columns: 4fr 7fr; column-gap: 32px; } .register h3 { padding-right: 24px; } }
@media (max-width: 599px) { .register > li { padding: 20px 0; } }

/* Guarantee panel */
.panel { border-top: 1px solid var(--signal); padding: 40px 0 8px; }
@media (min-width: 1024px) { .panel { display: grid; grid-template-columns: 4fr 5fr; column-gap: 48px; padding-top: 48px; } }
.panel h2 { margin-bottom: 16px; }
.panel .deck { color: var(--soft); font-size: 1.25rem; }
.clauses { list-style: none; margin: 24px 0 0; padding: 0; }
@media (min-width: 1024px) { .clauses { margin-top: 0; } }
.clauses li { display: block; padding: 20px 0; border-top: 1px solid var(--divider); }
.clauses li:first-child { border-top: 0; padding-top: 0; }
.clauses p { font-family: var(--serif); font-size: 1.25rem; line-height: 1.45; color: var(--heading); }
.clauses .idx { font-family: var(--sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; color: var(--label); font-variant-numeric: tabular-nums; padding-top: 6px; }
.clauses p { margin: 0; }

/* Document row */
.doc-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider); padding: 18px 0; margin-top: 24px; text-decoration: none; color: var(--heading); }
.doc-row:hover .name { text-decoration: underline; text-decoration-thickness: 1px; }
.doc-row .name { font-weight: 600; font-size: 0.9375rem; color: var(--heading); }
.doc-row .label { margin-left: 16px; }
.doc-row .arrow { color: var(--label); }

/* Fee cells */
.cells { display: grid; grid-template-columns: 1fr; }
.cells > div { border-top: 1px solid var(--rule); padding: 16px 0 8px; }
.cells .label { display: block; margin-bottom: 8px; }
.cells .value { display: block; font-family: var(--serif); font-size: 1.5rem; font-weight: 300; line-height: 1.3; color: var(--heading); }
@media (min-width: 600px) { .cells { grid-template-columns: repeat(3, 1fr); column-gap: 24px; } }
.cells + p { margin-top: 32px; color: var(--soft); max-width: 60ch; }

/* Process rail */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; row-gap: 32px; }
.steps li { border-top: 1px solid var(--rule); padding-top: 20px; }
.steps .numeral.small { display: inline-block; margin-bottom: 10px; }
.steps h3 { margin: 0 0 8px; font-size: 1.25rem; }
.steps p { margin: 0; color: var(--soft); max-width: 44ch; }
@media (min-width: 600px) { .steps { grid-template-columns: repeat(2, 1fr); column-gap: 48px; row-gap: 48px; } }

/* Closing row */
.closing { padding: 0; }
.closing .frame { border-top: 1px solid var(--rule); padding: clamp(48px, 5vw, 72px) 0; }
.closing .frame { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 24px; }
.closing .cta { font-family: var(--serif); font-weight: 300; font-size: clamp(2rem, 1.4rem + 2vw, 3rem); line-height: 1.08; color: var(--heading); text-decoration: none; }
.closing .cta:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.closing .cta .arrow { display: inline-block; margin-left: 12px; transition: transform 160ms cubic-bezier(.2,.7,.2,1); }
.closing .cta:hover .arrow { transform: translateX(6px); }
.closing .email { font-family: var(--serif); font-size: 1.25rem; font-weight: 400; color: var(--heading); text-decoration: none; user-select: all; -webkit-user-select: all; }

/* Spec table on Services */
.spec { margin: 24px 0 0; border-bottom: 1px solid var(--divider); }
.spec > div { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 16px 0; border-top: 1px solid var(--divider); }
.spec dt { font-family: var(--sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--soft); }
.spec dd { margin: 0; color: var(--ink); max-width: 60ch; }
@media (min-width: 1024px) { .spec > div { grid-template-columns: 3fr 6fr; column-gap: 24px; } }
.index { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--divider); }
@media (min-width: 600px) { .index { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; border-bottom: 0; } .index li:last-child, .index li:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--divider); } }
.index li { border-top: 1px solid var(--divider); }
.index a { display: flex; gap: 20px; align-items: baseline; padding: 14px 0; color: var(--heading); text-decoration: none; }
.index a:hover .t { text-decoration: underline; text-decoration-thickness: 1px; }
.index .idx { min-width: 40px; }
.index .numeral.small { padding-bottom: 0; margin-bottom: 0; }
.index .numeral.small::after { display: none; }
.index .arrow { margin-left: auto; color: var(--label); }
.plain { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--divider); }
.plain li { border-top: 1px solid var(--divider); padding: 12px 0; max-width: 60ch; }

/* Frameworks register */
.frameworks { list-style: none; margin: 0; padding: 0; columns: 1; border-top: 1px solid var(--divider); }
.frameworks li { border-bottom: 1px solid var(--divider); padding: 12px 0; break-inside: avoid; font-variant-numeric: tabular-nums; }
@media (min-width: 600px) { .frameworks { columns: auto; display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; } }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1fr; row-gap: 48px; }
.address { font-family: var(--serif); font-weight: 400; font-size: clamp(1.375rem, 0.75rem + 1.2vw, 1.75rem); color: var(--heading); user-select: all; -webkit-user-select: all; margin: 8px 0 16px; word-break: normal; overflow-wrap: anywhere; }
.copy-button { font-family: var(--sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--heading); background: transparent; border: 1px solid var(--rule); padding: 0 16px; height: 36px; cursor: pointer; }
.copy-button:hover { background: var(--paper); }
.copy-status { display: block; margin-top: 10px; font-size: 0.875rem; color: var(--soft); min-height: 1.4em; }
.contact-block + .contact-block { margin-top: 40px; }
form { max-width: 560px; }
.field { margin-bottom: 24px; }
.field label { display: block; font-size: 0.875rem; font-weight: 600; margin-bottom: 8px; color: var(--heading); }
.field .hint { display: block; font-size: 0.875rem; color: var(--soft); margin-bottom: 8px; font-weight: 400; }
.field .opt { font-weight: 400; color: var(--soft); }
.field input, .field textarea { width: 100%; font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--soft); border-radius: 0; padding: 12px 16px; height: 52px; }
.field textarea { min-height: 150px; height: auto; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.consent { font-size: 0.875rem; color: var(--soft); max-width: 56ch; margin-bottom: 24px; }
.trap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
form h2 { margin-bottom: 24px; }

/* Not found and thanks */
.notfound { padding: clamp(64px, 8vw, 128px) 0; flex: 1; }
.notfound .frame { display: grid; grid-template-columns: 1fr; gap: 48px; }
@media (min-width: 1024px) { .notfound .frame { grid-template-columns: 1fr 1fr; align-items: center; } }
.notfound h1 { margin: 24px 0 32px; }
.notfound img { display: block; width: 100%; max-width: 420px; height: auto; opacity: 0.9; }

/* Footer */
.site-footer { padding: 96px 0 48px; }
.site-footer.band { border-top: 1px solid var(--band-divider); }
.footer-grid { display: grid; grid-template-columns: 1fr; row-gap: 32px; }
@media (min-width: 600px) { .footer-grid { grid-template-columns: 1fr 1fr; column-gap: 24px; } .footer-grid .f-mark { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 4fr 4fr 4fr; } .footer-grid .f-mark { grid-column: auto; } }
.f-mark img { display: block; height: 32px; width: auto; }
.site-footer .label { display: block; margin-bottom: 10px; color: var(--band-soft); }
.site-footer .f-email { font-family: var(--serif); font-size: 1.5rem; font-weight: 400; color: var(--band-heading); text-decoration: none; user-select: all; -webkit-user-select: all; }
.site-footer .f-email:hover { text-decoration: underline; }
.site-footer .f-place { margin: 8px 0 0; font-size: 0.875rem; color: var(--band-soft); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin: 0; }
.site-footer li a { display: inline-block; padding: 7px 0; color: var(--band-body); text-decoration: none; font-size: 0.9375rem; }
.site-footer li a:hover { color: var(--band-heading); text-decoration: underline; }
.footer-bottom { margin-top: 64px; border-top: 1px solid var(--band-rule); padding-top: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; align-items: baseline; }
.footer-bottom p { margin: 0; font-size: 0.875rem; color: var(--band-soft); max-width: 70ch; }
.footer-bottom .label { margin: 0; color: var(--band-soft); }
.print-url { display: none; }

@media print {
  .site-nav, form, .skip, .copy-button, .copy-status, .button, .notfound img, .band-photo { display: none; }
  .brand img, .f-mark img { filter: brightness(0); }
  .band, .site-header, .site-footer { background: #fff; color: #000; }
  .band h1, .band h2, .band .deck, .band .label, .band a, .site-footer .f-email, .site-footer li a, .footer-bottom p { color: #000; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .print-url { display: block; margin-top: 8px; font-size: 10pt; }
  a { color: #000; text-decoration: none; }
  .waterline { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none; } }

/* Placement helpers */
.hero .strip { grid-column: 1 / -1; }
.frameworks-heading { margin: 40px 0 12px; }
.back { margin-top: 32px; }

/* Photographs behind the bands. The gradient keeps the text on near solid
   obsidian whatever the picture does. */
.band.photo { position: relative; isolation: isolate; }
.band-photo { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.band-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.band-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,15,20,0.88) 0%, rgba(11,15,20,0.66) 45%, rgba(11,15,20,0.18) 100%); }
/* The hero carries the photograph: the text column (the left 58 percent of the frame) stays under a deep gradient for contrast, and the picture comes through on the right. */
.hero .band-photo::after { background: linear-gradient(180deg, rgba(11,15,20,0) 62%, rgba(11,15,20,0.5) 100%), linear-gradient(90deg, rgba(11,15,20,0.92) 0%, rgba(11,15,20,0.84) 38%, rgba(11,15,20,0.72) 55%, rgba(11,15,20,0.28) 74%, rgba(11,15,20,0.04) 100%); }
.title-band .band-photo::after { background: linear-gradient(90deg, rgba(11,15,20,0.88) 0%, rgba(11,15,20,0.62) 55%, rgba(11,15,20,0.22) 100%); }
.interlude { position: relative; isolation: isolate; height: clamp(300px, 44vw, 620px); background: var(--obsidian); }
.interlude .band-photo::after { background: linear-gradient(180deg, rgba(11,15,20,0.10), rgba(11,15,20,0.30)); }
.interlude .frame { position: absolute; left: 0; right: 0; bottom: 28px; margin-inline: auto; }
.interlude .label { color: var(--steel); opacity: 0.85; }
@media (max-width: 599px) { .band-photo::after, .title-band .band-photo::after { background: linear-gradient(180deg, rgba(11,15,20,0.86) 0%, rgba(11,15,20,0.86) 70%, rgba(11,15,20,0.45) 100%); } }

@media (max-width: 599px) { .hero h1 { margin: 20px 0 24px; } .hero .deck { margin-bottom: 32px; } }

/* About page: a portrait in the rail column. */
.section.has-portrait > .frame { align-items: start; }
.portrait { margin: 0; max-width: 200px; }
.portrait img { display: block; width: 100%; height: auto; border: 1px solid var(--divider); }
.portrait figcaption { margin-top: 12px; }
@media (max-width: 1023px) { .portrait { max-width: 160px; margin-bottom: 16px; } }

/* Refinements after the review round of 2026-09-25 (an art director's read
   of the screenshots). Overrides only; the tokens and structure above stand. */
.cells > div, .steps li { border-top-color: var(--divider); }
.hero .deck { max-width: 28em; font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); }
h1.interior { max-width: 26ch; }
.title-band .deck { max-width: 30em; }
@media (min-width: 1024px) { .panel .terms { grid-column: 2; margin: 16px 0 0; } }
.button { height: 48px; padding: 0 28px; font-size: 0.75rem; letter-spacing: 0.18em; }
@media (min-width: 600px) { .site-nav a { font-size: 0.75rem; letter-spacing: 0.18em; } }
.copy-button { height: 40px; }
.more { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; }
.more:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.closing .email { display: none; }
@media (max-width: 599px) { .closing .cta .arrow { display: inline; margin-left: 0.25em; } }
.index .arrow { display: none; }
.register > li { align-items: baseline; }
.register p { font-size: 0.9375rem; line-height: 1.6; }
.doc-row .name, .site-footer li a { font-size: 0.875rem; }
.section > .frame { padding: calc(var(--section) * 0.65) 0 var(--section); }
.section.first > .frame { padding-top: var(--section); }
@media (max-width: 599px) {
  .site-header { padding: 14px 0 4px; }
  .site-nav ul { gap: 12px; }
  .site-nav a { letter-spacing: 0.08em; height: 40px; }
  .strip { margin-top: 40px; }
  .strip > div { padding: 14px 0; }
  .strip .label { margin-bottom: 4px; }
}
.site-footer { padding: 64px 0 40px; }
.site-footer li a { padding: 5px 0; }
.footer-bottom { margin-top: 48px; }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 3fr 5fr 4fr; } }
.section:not(:has(h2)) .rail { display: none; }
.section:not(:has(h2)) > .frame { grid-template-columns: 1fr; }
.notfound img { max-width: 260px; }
.back { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; }
.back:hover { text-decoration: underline; text-decoration-thickness: 1px; }
/* Dark scheme: the page ground sits a step above the bands so the bands still read as bands, and one blue for labels and numeral rules. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ground: #141A21; --label: #8FB3D9; } }
:root[data-theme="dark"] { --ground: #141A21; --label: #8FB3D9; }
@media (max-width: 599px) { .site-nav ul { gap: 10px; } .site-nav a { font-size: 0.625rem; letter-spacing: 0.06em; } }
.back a { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; }
.back a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.back-link { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; }
.back-link:hover { text-decoration: underline; text-decoration-thickness: 1px; }

/* Second review round: the About page nameplate and CV kickers, second paragraphs in a register row, the contact sidebar, the closing row's note. */
.register .when { display: block; margin-bottom: 8px; font-family: var(--sans); font-size: 0.75rem; font-weight: 600; line-height: 1.35; letter-spacing: 0.18em; text-transform: uppercase; color: var(--soft); font-variant-numeric: tabular-nums; }
#education .register > li { padding: 20px 0; }
.register > li > p + p { grid-column: 2; margin-top: 8px; }
.register + .asof { margin: 16px 0 0; }
.content > h2.label { font-family: var(--sans); font-size: 0.75rem; line-height: 1.35; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--label); text-wrap: initial; margin-bottom: 20px; }
#short .prose p { font-family: var(--serif); font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem); line-height: 1.55; color: var(--heading); max-width: none; margin-bottom: 1.3em; }
.title-band.nameplate { padding: clamp(40px, 5vw, 72px) 0 clamp(36px, 4vw, 56px); }
.title-band.nameplate.photo { padding: clamp(56px, 7vw, 104px) 0 clamp(48px, 6vw, 88px); }
@media (min-width: 1024px) {
  .title-band.nameplate .frame { display: grid; grid-template-columns: 7fr 5fr; column-gap: 64px; align-items: last baseline; }
  .title-band.nameplate h1 { margin-bottom: 0; }
  .title-band.nameplate .deck { max-width: 24em; }
}
.next { list-style: upper-roman; margin: 8px 0 12px; padding-left: 1.6em; color: var(--soft); font-size: 0.9375rem; line-height: 1.6; }
.next li { margin: 0 0 6px; padding-left: 4px; }
.next li::marker { font-family: var(--sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; color: var(--label); }
.closing .closing-note { flex-basis: 100%; margin: 0; color: var(--soft); font-size: 0.9375rem; line-height: 1.6; max-width: 44em; }
.doc-row + .doc-row { margin-top: 0; border-top: 0; }
.steps + .doc-row { margin-top: 8px; }
.doc-row + .doc-row { margin-top: 0; border-top: 0; }
.steps + .doc-row { margin-top: 8px; }
.content > .lede, .section .content > p.prose { font-family: var(--serif); font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem); line-height: 1.55; color: var(--heading); max-width: none; margin: 0 0 32px; }
.cells + p { margin-top: 32px; }