/* christiannahamilton.com
   Editorial serif for argument, precise sans for state. Near-black, warm white, one accent.
   System font stacks: nothing to download, nothing to block rendering. To self-host a licensed
   face later, add @font-face rules here and put the family first in --serif or --sans. */

:root {
  --paper: #FAF8F4;
  --paper-2: #F2EEE6;
  --ink: #15130F;
  --ink-2: #2A2721;
  --mute: #6B665C;
  --rule: #DDD8CE;
  --accent: #2340C8;
  --accent-soft: #E6EAFB;
  --on-dark: #F4F1EA;
  --on-dark-mute: #A8A294;
  --accent-on-dark: #9DAEFF;
  --rule-on-dark: rgba(244, 241, 234, 0.18);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Charter, "Bitstream Charter", "Book Antiqua", Georgia, serif;
  --sans: "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --wrap: 1180px;
  --gutter: clamp(20px, 5vw, 48px);
  --step-1: clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem);
  --step-2: clamp(1.4rem, 1.25rem + 0.8vw, 1.9rem);
  --step-3: clamp(1.8rem, 1.5rem + 1.6vw, 2.8rem);
  --step-4: clamp(2.5rem, 1.7rem + 4.2vw, 5.25rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: clamp(1rem, 0.97rem + 0.15vw, 1.08rem); line-height: 1.6; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
img, svg { max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; line-height: 1.15; margin: 0; text-wrap: balance; letter-spacing: -0.01em; }
p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--accent); }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--accent); color: #fff; }
[hidden] { display: none !important; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--gutter); top: -4rem; z-index: 100; background: var(--ink); color: var(--paper); padding: 0.6rem 1rem; text-decoration: none; }
.skip:focus { top: 0.5rem; color: var(--paper); }
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: calc(44rem + 2 * var(--gutter)); }

/* ---------- header ---------- */
.site-header { border-bottom: 1px solid var(--rule); background: var(--paper); }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 0 1.5rem; min-height: 4.25rem; flex-wrap: wrap; }
.brand { font-family: var(--serif); font-size: 1.2rem; text-decoration: none; letter-spacing: -0.005em; padding-block: 0.5rem; }
.site-nav ul { display: flex; gap: clamp(1rem, 2.4vw, 2rem); }
.site-nav a { display: block; padding: 0.6rem 0; font-size: 0.95rem; text-decoration: none; color: var(--ink-2); border-bottom: 2px solid transparent; }
.site-nav a:hover { color: var(--ink); border-bottom-color: var(--rule); }
.site-nav a[aria-current] { color: var(--ink); border-bottom-color: var(--accent); }
.nav-toggle { display: none; background: none; border: 1px solid var(--ink); padding: 0.45rem 0.9rem; font-size: 0.9rem; border-radius: 2px; min-height: 2.75rem; }

@media (max-width: 760px) {
  .js .nav-toggle { display: block; }
  .js .site-nav { display: none; }
  .js .site-nav.is-open { display: block; }
  .site-nav { flex-basis: 100%; padding-bottom: 1rem; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav a { padding: 0.8rem 0; border-bottom: 1px solid var(--rule); font-size: 1.05rem; }
  .site-nav a[aria-current] { border-bottom-color: var(--rule); box-shadow: inset 3px 0 0 var(--accent); padding-left: 0.9rem; }
}

/* ---------- buttons and links ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 2.9rem; padding: 0.65rem 1.25rem; border: 1px solid var(--ink); border-radius: 2px; background: transparent; color: var(--ink); text-decoration: none; font-size: 0.98rem; font-weight: 500; line-height: 1.2; transition: background-color 0.15s, color 0.15s, border-color 0.15s; }
.btn:hover { background: var(--ink); color: var(--paper); }
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-quiet { border-color: var(--rule); color: var(--ink-2); font-weight: 400; }
.btn-quiet:hover { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-light { border-color: var(--on-dark); color: var(--on-dark); }
.btn-light:hover { background: var(--on-dark); color: var(--ink); }
.btn[disabled] { opacity: 0.55; cursor: default; }
.text-link { color: var(--accent); font-weight: 500; }
.text-link:hover { color: var(--ink); }
.link-button { background: none; border: 0; padding: 0; color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.link-button:hover { color: var(--ink); }

/* ---------- page heads ---------- */
.page-head { padding-block: clamp(3rem, 8vw, 6.5rem) clamp(2rem, 4vw, 3.5rem); }
.page-head h1 { font-size: var(--step-4); letter-spacing: -0.025em; line-height: 1; }
.lede { font-family: var(--serif); font-size: var(--step-2); line-height: 1.35; max-width: 34em; margin-top: 1.5rem; color: var(--ink-2); }
.page-head p:not(.lede) { max-width: 42em; margin-top: 1rem; color: var(--ink-2); }
.section-head h2 { font-size: var(--step-3); letter-spacing: -0.02em; }
.section-head p { margin-top: 1rem; max-width: 40em; color: var(--ink-2); }
.eyebrow, .opp-kicker { font-size: 0.78rem; line-height: 1.3; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent); }

/* ---------- home ---------- */
.hero { padding-block: clamp(3.5rem, 10vw, 8.5rem) clamp(3rem, 7vw, 6rem); display: grid; grid-template-areas: "portrait" "headline" "body"; gap: clamp(2rem, 4vw, 3.5rem); }
.hero h1 { grid-area: headline; display: grid; gap: clamp(1rem, 2.4vw, 2rem); }
.hero-name { font-family: var(--sans); font-size: var(--step-1); font-weight: 500; letter-spacing: 0; color: var(--ink-2); }
.hero-line { font-size: var(--step-4); line-height: 0.98; letter-spacing: -0.03em; max-width: 11em; }
.hero-body { grid-area: body; max-width: 39em; display: grid; gap: 1rem; font-size: var(--step-1); line-height: 1.5; color: var(--ink-2); }
.hero-portrait { grid-area: portrait; width: min(72vw, 18rem); border: 1px solid var(--rule); background: var(--paper-2); overflow: hidden; }
.hero-portrait img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; font-size: 1rem; }
@media (min-width: 960px) {
  .hero { grid-template-columns: minmax(15rem, 5fr) minmax(0, 7fr); grid-template-areas: "portrait body" "headline body"; gap: clamp(2rem, 4vw, 3.5rem) clamp(3.5rem, 7vw, 7rem); align-items: start; }
  .hero-portrait { width: min(100%, 14rem); justify-self: start; }
}

.leverage-band { background: var(--paper-2); border-block: 1px solid var(--rule); padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.leverage-intro { display: grid; gap: 1.25rem 4rem; }
.leverage-intro h2 { font-size: var(--step-3); max-width: 13em; margin-top: 0.65rem; letter-spacing: -0.02em; }
.leverage-intro > p { font-family: var(--serif); font-size: var(--step-2); line-height: 1.4; color: var(--ink-2); max-width: 31em; }
.leverage-grid { display: grid; gap: 1px; margin-top: clamp(2.5rem, 5vw, 4rem); border: 1px solid var(--rule); background: var(--rule); }
.leverage-grid li { background: var(--paper-2); }
.leverage-grid a { display: block; height: 100%; padding: 1.4rem; text-decoration: none; }
.leverage-grid a:hover { background: var(--paper); color: inherit; }
.leverage-grid h3 { font-size: var(--step-1); }
.leverage-grid a:hover h3 { color: var(--accent); }
.leverage-grid p { margin-top: 0.6rem; color: var(--ink-2); font-size: 0.95rem; line-height: 1.5; }
@media (min-width: 900px) {
  .leverage-intro { grid-template-columns: 5fr 7fr; align-items: end; }
  .leverage-grid { grid-template-columns: repeat(3, 1fr); }
}

.surface-band { background: var(--ink); color: var(--on-dark); padding-block: clamp(3rem, 7vw, 6rem); }
.band-head { display: grid; gap: 1rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.band-head h2 { font-size: var(--step-3); letter-spacing: -0.02em; }
.band-head p { color: var(--on-dark-mute); max-width: 44em; }
@media (min-width: 960px) { .band-head { grid-template-columns: 5fr 7fr; align-items: end; gap: 3rem; } }

.architecture { padding-block: clamp(4rem, 9vw, 8rem); }
.spine { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); margin-top: clamp(2rem, 4vw, 3.5rem); border-top: 1px solid var(--ink); }
.spine li { padding: 1.1rem 1rem 1.4rem 0; border-bottom: 1px solid var(--rule); }
.spine-n { font-size: 0.8rem; color: var(--mute); font-variant-numeric: tabular-nums; }
.spine h3 { font-size: var(--step-1); margin-top: 0.35rem; }
.spine p { font-size: 0.9rem; color: var(--ink-2); margin-top: 0.4rem; line-height: 1.45; }
.layers { display: grid; gap: 2rem; margin-top: clamp(2.5rem, 5vw, 4rem); }
.layers h3 { font-size: var(--step-2); }
.layers p { margin-top: 0.5rem; color: var(--ink-2); max-width: 30em; }
@media (min-width: 800px) { .layers { grid-template-columns: repeat(3, 1fr); gap: 3rem; } }

.evidence-band { background: var(--paper-2); border-block: 1px solid var(--rule); padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.evidence-row { display: grid; gap: 2.5rem; }
@media (min-width: 960px) { .evidence-row { grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; } }
.figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; border-top: 1px solid var(--ink); }
.figures div { padding: 1.1rem 0 1.3rem; border-bottom: 1px solid var(--rule); }
.figures dt { font-family: var(--serif); font-size: var(--step-2); letter-spacing: -0.015em; line-height: 1.1; }
.figures dd { font-size: 0.92rem; color: var(--ink-2); margin-top: 0.35rem; }
.figures.inline { margin-top: 1rem; font-size: 1rem; }

.home-thinking { padding-block: clamp(4rem, 9vw, 7rem) 0; }
.home-thinking .section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.home-thinking .section-head p { margin: 0; }
.invitation { padding-block: clamp(4rem, 9vw, 8rem); }
.invitation h2 { font-size: var(--step-3); max-width: 22em; letter-spacing: -0.02em; }
.invitation p { margin-top: 1.25rem; font-size: var(--step-1); }

.opportunity-intro { background: var(--accent-soft); border-block: 1px solid #CBD2F6; padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.opportunity-intro-grid { display: grid; gap: 2rem 4rem; }
.opportunity-intro h2 { font-size: var(--step-3); max-width: 12em; margin-top: 0.65rem; }
.opportunity-intro-grid > div:last-child { display: grid; gap: 1rem; color: var(--ink-2); max-width: 42em; }
.opportunity-intro .btn { justify-self: start; margin-top: 0.5rem; }
@media (min-width: 900px) { .opportunity-intro-grid { grid-template-columns: 5fr 7fr; align-items: start; } }

/* ---------- opportunity studio ---------- */
.opportunity-head { padding-block: clamp(3.5rem, 9vw, 7.5rem) clamp(3rem, 7vw, 5.5rem); }
.opportunity-head h1 { font-size: var(--step-4); line-height: 0.98; letter-spacing: -0.032em; max-width: 12em; margin-top: 1.2rem; }
.opportunity-head .illustrative { color: var(--mute); font-size: 0.9rem; margin-top: 1.5rem; }
.opp-origin { max-width: 48em; margin-top: clamp(2rem, 5vw, 3.75rem); padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.opp-origin > p:not(.opp-kicker) { color: var(--ink-2); font-size: var(--step-0); line-height: 1.6; margin-top: 0.8rem; }
.opp-brief-band { background: var(--ink); color: var(--on-dark); padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.opp-brief-grid { display: grid; gap: 2.5rem 5rem; }
.opp-brief-grid h2 { font-size: var(--step-3); max-width: 14em; margin-top: 0.7rem; }
.opp-brief-band .opp-kicker { color: var(--accent-on-dark); }
.opp-scenario { display: grid; gap: 1.15rem; color: var(--on-dark-mute); font-size: var(--step-1); line-height: 1.55; max-width: 39em; }
@media (min-width: 900px) { .opp-brief-grid { grid-template-columns: 5fr 7fr; } }

.opp-direction { padding-block: clamp(4rem, 9vw, 7rem); }
.opp-direction-head { max-width: 48em; }
.opp-direction-head h2, .opp-section h2, .opp-boundaries h2, .opp-evidence-grid h2, .opp-method h2 { font-size: var(--step-3); letter-spacing: -0.02em; margin-top: 0.6rem; }
.opp-direction-head > p:last-child { color: var(--ink-2); margin-top: 1rem; max-width: 43em; }
.opp-controls { display: grid; gap: 2.75rem; margin-top: clamp(2.5rem, 5vw, 4rem); }
.opp-controls legend { font-size: 1rem; }
.opp-choice-grid { display: grid; gap: 0.65rem; }
.objective-choices { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.shift-choices { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.opp-choice { position: relative; display: block; cursor: pointer; }
.opp-choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.opp-choice span { display: grid; align-content: start; gap: 0.35rem; height: 100%; min-height: 8rem; padding: 1.1rem 1.1rem 1.2rem 2.8rem; border: 1px solid var(--rule); background: var(--paper); transition: border-color 0.15s, background-color 0.15s; }
.shift-choices .opp-choice span { min-height: 7.5rem; }
.opp-choice span::before { content: ''; position: absolute; left: 1rem; top: 1.25rem; width: 0.95rem; height: 0.95rem; border: 1px solid var(--ink); border-radius: 50%; background: var(--paper); }
.opp-choice strong { font-weight: 600; line-height: 1.3; }
.opp-choice em { color: var(--ink-2); font-style: normal; font-size: 0.9rem; line-height: 1.45; }
.opp-choice:hover span { border-color: var(--ink); }
.opp-choice input:checked + span { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: #fff; }
.opp-choice input:checked + span::before { background: var(--accent); border-color: var(--accent); box-shadow: inset 0 0 0 3px var(--paper); }
.opp-choice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
.opp-condition-row { display: flex; gap: 0.45rem 1rem; align-items: baseline; flex-wrap: wrap; padding-top: 1rem; border-top: 1px solid var(--ink); font-size: 0.9rem; color: var(--mute); }
.opp-condition-row strong { color: var(--ink); font-weight: 600; }
.opp-condition-row button { margin-left: auto; }
.opp-live { margin-top: 2.5rem; padding: 1.25rem; border: 1px dashed var(--rule); color: var(--ink-2); display: grid; gap: 0.9rem; max-width: 48em; }
.opp-live-actions { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; margin-top: 1rem; }
.opp-live-status { color: var(--mute); font-size: 0.9rem; }
.opp-live-result { margin-top: 3rem; padding: clamp(1.5rem, 4vw, 2.5rem); background: var(--ink); color: var(--on-dark); }
.opp-live-result .opp-kicker { color: var(--accent-on-dark); }
.opp-live-result > h3 { font-size: var(--step-3); margin-top: 0.6rem; }
.opp-live-thesis { font-family: var(--serif); font-size: var(--step-2); line-height: 1.45; color: var(--on-dark-mute); max-width: 37em; margin-top: 1rem; }
.opp-live-asset { margin-top: 2rem; border-top: 1px solid var(--on-dark); padding-top: 1rem; }
.opp-live-result h4 { font-family: var(--sans); font-size: 0.82rem; font-weight: 600; letter-spacing: 0; color: var(--accent-on-dark); }
.opp-live-asset p { font-size: var(--step-1); margin-top: 0.35rem; }
.opp-live-exchange { display: grid; gap: 1px; background: var(--rule-on-dark); border: 1px solid var(--rule-on-dark); margin-top: 2rem; }
.opp-live-exchange article { background: var(--ink); padding: 1.2rem; }
.opp-live-exchange .live-party { color: var(--on-dark); font-weight: 600; margin-bottom: 1rem; }
.opp-live-exchange h4:not(:first-child) { margin-top: 0.9rem; }
.opp-live-exchange p:not(.live-party) { color: var(--on-dark-mute); margin-top: 0.25rem; font-size: 0.92rem; }
.opp-live-moves { display: grid; gap: 1rem; margin-top: 2rem; }
.opp-live-moves li { border-top: 1px solid var(--rule-on-dark); padding-top: 0.8rem; }
.opp-live-moves p { color: var(--on-dark-mute); margin-top: 0.35rem; }
.opp-live-lists { display: grid; gap: 1.5rem; margin-top: 2rem; }
.opp-live-lists section { border-top: 1px solid var(--rule-on-dark); padding-top: 0.8rem; }
.opp-live-lists ul { margin-top: 0.5rem; }
.opp-live-lists li { color: var(--on-dark-mute); padding: 0.35rem 0; }
.opp-live-lists li::before { content: ''; display: inline-block; width: 0.35rem; height: 0.35rem; margin: 0 0.6rem 0.15rem 0; border-radius: 50%; background: var(--accent-on-dark); }
.opp-live-boundary { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--on-dark); font-family: var(--serif); font-style: italic; }
@media (min-width: 760px) { .opp-live-exchange, .opp-live-moves, .opp-live-lists { grid-template-columns: repeat(3, 1fr); } }

.opportunity-reading { border-top: 1px solid var(--rule); }
.opp-thesis, .opp-section { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding: clamp(3.5rem, 8vw, 6rem) var(--gutter); }
.opp-thesis h2 { font-size: var(--step-3); max-width: 21em; margin-top: 0.65rem; }
.opp-lede { font-family: var(--serif); font-size: var(--step-2); line-height: 1.45; color: var(--ink-2); max-width: 37em; margin-top: 1.5rem; }
.opp-frame { display: grid; gap: 0 3rem; border-top: 1px solid var(--ink); margin-top: 2.5rem; }
.opp-frame > div { padding: 1.1rem 0 1.3rem; border-bottom: 1px solid var(--rule); }
.opp-frame dt { color: var(--mute); font-size: 0.82rem; margin-bottom: 0.35rem; }
.opp-frame dd { max-width: 34em; }
@media (min-width: 760px) { .opp-frame { grid-template-columns: 1fr 1fr; } }

.opp-section { border-top: 1px solid var(--rule); }
.opp-section > header { max-width: 45em; margin-bottom: 2rem; }
.exchange-grid { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.exchange-grid article { background: var(--paper); padding: 1.5rem; }
.exchange-grid h3, .opp-commercial h3, .adapt-grid h3 { font-size: var(--step-1); }
.exchange-grid ul, .opp-commercial ul { margin-top: 1rem; border-top: 1px solid var(--rule); }
.exchange-grid li, .opp-commercial li { padding: 0.65rem 0; border-bottom: 1px solid var(--rule); color: var(--ink-2); font-size: 0.95rem; }
@media (min-width: 850px) { .exchange-grid { grid-template-columns: repeat(3, 1fr); } }

.opp-section.opp-dark { max-width: none; background: var(--ink); color: var(--on-dark); }
.opp-dark > * { max-width: var(--wrap); margin-inline: auto; }
.opp-dark .opp-kicker { color: var(--accent-on-dark); }
.opp-journey { display: grid; border-top: 1px solid var(--on-dark); }
.opp-journey li { display: grid; grid-template-columns: 2rem 7rem 1fr; gap: 1rem; padding: 1rem 0 1.15rem; border-bottom: 1px solid var(--rule-on-dark); align-items: baseline; }
.opp-journey li > span { color: var(--on-dark-mute); font-size: 0.8rem; }
.opp-journey h3 { font-size: var(--step-1); }
.opp-journey p { color: var(--on-dark-mute); }
@media (max-width: 640px) { .opp-journey li { grid-template-columns: 2rem 1fr; } .opp-journey p { grid-column: 2; } }

.opp-commercial { display: grid; gap: 2.5rem 3rem; }
.opp-commercial article { border-top: 1px solid var(--ink); padding-top: 1rem; }
.opp-commercial p { color: var(--ink-2); margin-top: 0.75rem; }
.opp-commercial .opp-machine { border-top: 3px solid var(--accent); }
.opp-machine h3 { color: var(--accent); }
@media (min-width: 850px) { .opp-commercial { grid-template-columns: repeat(2, 1fr); } .opp-commercial .opp-machine { grid-column: 1 / -1; } }

.opp-adaptation { background: var(--accent-soft); max-width: none; border-color: #CBD2F6; }
.opp-adaptation > * { max-width: var(--wrap); margin-inline: auto; }
.adapt-grid { display: grid; gap: 2rem 4rem; margin-top: 2.5rem; }
.adapt-grid article { padding-top: 1rem; border-top: 1px solid var(--ink); }
.adapt-grid p { color: var(--ink-2); margin-top: 0.65rem; }
@media (min-width: 760px) { .adapt-grid { grid-template-columns: 1fr 1fr; } }

.opp-signed { border-top-color: var(--ink); }
.opp-signed h2 { max-width: 18em; }
.opp-signed blockquote { font-family: var(--serif); font-size: var(--step-2); line-height: 1.45; max-width: 36em; margin-top: 1.5rem; }
.opp-signed > p:not(.opp-kicker):not(.opp-signature) { max-width: 44em; color: var(--ink-2); margin-top: 1.5rem; }
.opp-signature { font-family: var(--serif); font-style: italic; font-size: var(--step-1); margin-top: 1.5rem; }
.opp-boundaries { padding-block: clamp(4rem, 9vw, 7rem); display: grid; gap: 2.5rem 5rem; }
.opp-boundaries ol { border-top: 1px solid var(--ink); }
.opp-boundaries li { display: grid; grid-template-columns: 2rem 1fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.opp-boundaries li span { color: var(--mute); font-size: 0.8rem; }
@media (min-width: 900px) { .opp-boundaries { grid-template-columns: 5fr 7fr; } }

.opp-evidence-band { background: var(--paper-2); border-block: 1px solid var(--rule); padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.opp-evidence-grid { display: grid; gap: 2.5rem 5rem; }
.opp-evidence-grid header > p:last-child { color: var(--ink-2); margin-top: 1rem; }
.opp-evidence-grid dl { border-top: 1px solid var(--ink); }
.opp-evidence-grid dl > div { display: grid; gap: 0.25rem 1.5rem; padding: 0.85rem 0; border-bottom: 1px solid var(--rule); }
.opp-evidence-grid dt { color: var(--accent); font-size: 0.82rem; font-weight: 600; }
.opp-evidence-grid dd { color: var(--ink-2); }
.opp-public-basis { color: var(--mute); font-size: 0.86rem; line-height: 1.65; margin-top: 1.25rem; }
.opp-public-basis a { color: inherit; text-decoration: underline; text-underline-offset: 0.18em; }
.opp-public-basis a:hover { color: var(--ink); }
@media (min-width: 760px) { .opp-evidence-grid dl > div { grid-template-columns: 11rem 1fr; } }
@media (min-width: 900px) { .opp-evidence-grid { grid-template-columns: 5fr 7fr; } }

.opp-method { padding-block: clamp(4rem, 9vw, 7rem); }
.opp-method > header { max-width: 42em; }
.opp-method-grid { display: grid; gap: 2rem 3rem; margin-top: 2.5rem; }
.opp-method-grid article { border-top: 1px solid var(--ink); padding-top: 1rem; }
.opp-method-grid h3 { font-size: var(--step-1); }
.opp-method-grid p { color: var(--ink-2); margin-top: 0.6rem; }
.opp-trademarks { border-top: 1px solid var(--rule); color: var(--mute); font-size: 0.75rem; line-height: 1.55; padding-block: 1.25rem 2.5rem; }
@media (min-width: 760px) { .opp-method-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- thinking ---------- */
.piece-list { border-top: 1px solid var(--ink); margin-top: 1.5rem; }
.piece-list li { border-bottom: 1px solid var(--rule); }
.piece-list a { display: grid; gap: 0.3rem; padding: 1.4rem 0 1.6rem; text-decoration: none; }
.piece-kind { font-size: 0.82rem; color: var(--mute); }
.piece-title { font-family: var(--serif); font-size: var(--step-2); line-height: 1.2; letter-spacing: -0.015em; }
.piece-desc { color: var(--ink-2); max-width: 46em; }
.piece-list a:hover { color: inherit; }
.piece-list a:hover .piece-title { color: var(--accent); }
@media (min-width: 800px) {
  .piece-list:not(.three) a { grid-template-columns: 6rem minmax(0, 5fr) minmax(0, 6fr); gap: 2rem; align-items: baseline; }
  .piece-list.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 2.5rem; border-top: 0; }
  .piece-list.three li { border-top: 1px solid var(--ink); border-bottom: 0; }
}
main > .wrap:last-child { padding-bottom: clamp(4rem, 9vw, 8rem); }
.filter { display: flex; gap: 0.5rem; margin-top: 2rem; flex-wrap: wrap; }
.filter button { background: none; border: 1px solid var(--rule); border-radius: 2px; padding: 0.4rem 0.95rem; font-size: 0.92rem; min-height: 2.75rem; }
.filter button:hover { border-color: var(--ink); }
.filter button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* ---------- article ---------- */
.article-head { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(1.5rem, 3vw, 2.5rem); }
.crumb, .d-crumb { display: flex; gap: 0.9rem; flex-wrap: wrap; font-size: 0.9rem; color: var(--mute); }
.crumb a, .d-crumb a { color: var(--ink); }
.crumb span::before, .d-crumb span::before { content: "/"; margin-right: 0.9rem; color: var(--rule); }
.article-head h1 { font-size: var(--step-4); letter-spacing: -0.025em; line-height: 1.02; margin-top: 1.5rem; }
.standfirst { font-family: var(--serif); font-size: var(--step-2); line-height: 1.35; color: var(--ink-2); margin-top: 1.5rem; }
.prose { font-family: var(--serif); font-size: clamp(1.12rem, 1.05rem + 0.3vw, 1.28rem); line-height: 1.65; }
.prose p + p { margin-top: 1.05em; }
.prose h2 { font-size: var(--step-2); margin-top: 2.2em; margin-bottom: 0.6em; }
.prose hr { border: 0; height: 1px; width: 4rem; background: var(--ink); margin: 2.6em 0; }
.prose strong { font-weight: 600; }
.prose .key-line { font-size: var(--step-2); line-height: 1.3; letter-spacing: -0.01em; }
.prose .key-line + .key-line { margin-top: 0.4em; }
.article-foot { margin-top: 3.5rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.article-foot > p + p { margin-top: 1.25rem; color: var(--ink-2); }
.byline { font-family: var(--serif); font-style: italic; font-size: var(--step-1); }
.more { padding-block: clamp(3.5rem, 8vw, 6rem); }
.more h2 { font-size: var(--step-2); margin-bottom: 1.5rem; }
.privacy .prose { padding-block: clamp(3rem, 7vw, 5.5rem); font-size: 1.08rem; }
.privacy h1 { font-size: var(--step-4); letter-spacing: -0.025em; margin-bottom: 2rem; }
.privacy .prose a { color: var(--accent); }

/* ---------- experience and contact ---------- */
.exp-block { display: grid; gap: 1.25rem; padding-block: clamp(2rem, 4vw, 3.25rem); border-top: 1px solid var(--rule); }
.exp-block:first-of-type { border-top-color: var(--ink); }
.exp-side h2 { font-size: var(--step-2); }
.exp-side p { color: var(--mute); margin-top: 0.5rem; font-size: 0.95rem; max-width: 22em; }
.exp-main { display: grid; gap: 1rem; max-width: 44em; font-size: var(--step-1); line-height: 1.55; }
.exp-main .btn { font-size: 1rem; justify-self: start; margin-top: 0.5rem; }
@media (min-width: 900px) { .exp-block { grid-template-columns: 4fr 8fr; gap: 3rem; } }
.capabilities { display: grid; border-top: 1px solid var(--rule); font-size: 1rem; }
.capabilities li { display: grid; gap: 0.15rem; padding: 0.9rem 0; border-bottom: 1px solid var(--rule); }
.capabilities strong { font-family: var(--serif); font-weight: 500; font-size: var(--step-1); line-height: 1.25; }
.capabilities span { color: var(--ink-2); font-size: 0.98rem; }
@media (min-width: 640px) { .capabilities li { grid-template-columns: 5fr 7fr; gap: 1.5rem; align-items: baseline; } }

.contact-grid { display: grid; gap: 2.5rem; border-top: 1px solid var(--ink); padding-top: 2rem; }
.contact-grid + .contact-grid { margin-top: clamp(3rem, 7vw, 5.5rem); padding-bottom: clamp(3rem, 7vw, 5.5rem); }
.contact-grid h2 { font-family: var(--sans); font-size: 0.9rem; font-weight: 500; color: var(--mute); letter-spacing: 0; margin-bottom: 0.6rem; }
.contact-link { font-family: var(--serif); font-size: var(--step-2); letter-spacing: -0.01em; text-decoration-color: var(--rule); overflow-wrap: anywhere; }
.contact-grid .quiet { color: var(--ink-2); margin-top: 0.75rem; max-width: 28em; font-size: 0.98rem; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 5fr 5fr 3fr; gap: 3rem; } }
.plain-links { margin-top: 2rem; display: grid; gap: 0.6rem; font-size: var(--step-1); }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--rule); padding-block: 2.25rem 2.75rem; font-size: 0.92rem; color: var(--ink-2); }
.footer-row { display: flex; justify-content: space-between; gap: 1.25rem 2rem; flex-wrap: wrap; align-items: baseline; }
.footer-name { font-family: var(--serif); font-size: 1.05rem; color: var(--ink); }
.footer-name span { font-family: var(--sans); font-size: 0.92rem; color: var(--mute); margin-left: 0.9rem; }
.footer-links { display: flex; gap: 0.5rem 1.75rem; flex-wrap: wrap; }
.footer-links a { display: inline-block; padding-block: 0.35rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0ms !important; transition-duration: 0.001ms !important; transition-delay: 0ms !important; }
}
@media print {
  .site-header, .site-footer, .rail, .next, .hero-actions, .filter { display: none !important; }
  body { background: #fff; }
}