/* 1221 Advisors website: one stylesheet shared by every page.
   Colors, type and spacing are set once here (the "Editorial warmth" design,
   chosen 2026-10-26). Fonts are served from this site, never from Google. */

/* ---------- Fonts (SIL Open Font License; licences in /fonts/) ---------- */
@font-face {
  font-family: "Instrument Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/instrument-sans-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/instrument-sans-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Instrument Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/fonts/instrument-sans-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/fonts/instrument-sans-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Instrument Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/fonts/instrument-sans-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/fonts/instrument-sans-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Newsreader"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("/fonts/newsreader-latin-ext-opsz-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Newsreader"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("/fonts/newsreader-latin-opsz-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Newsreader"; font-style: italic; font-weight: 200 800; font-display: swap;
  src: url("/fonts/newsreader-latin-ext-opsz-italic.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Newsreader"; font-style: italic; font-weight: 200 800; font-display: swap;
  src: url("/fonts/newsreader-latin-opsz-italic.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: "Oswald"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/fonts/oswald-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: "Doto"; font-style: normal; font-weight: 900; font-display: swap;
  src: url("/fonts/doto-latin-900-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------- The design's colors and type, set once ---------- */
:root {
  --ground: #F2EADD;      /* page background: soft cream */
  --sand: #E9DFCC;        /* header, hero and alternate bands */
  --sage-band: #4E5A48;   /* the brand's green-gray: the assessment section */
  --brown-band: #4D3D30;  /* the brand's dark brown: advising */
  --footer: #3A2E25;      /* deepest brown: the footer */
  --ink: #141110;         /* text, dark bands */
  --accent: #6B2D23;      /* buttons, italic emphasis */
  --accent-hover: #6B2D23;
  --body: #3A322C;        /* paragraphs */
  --muted: #5E5348;       /* small print */
  --sage: #3E5438;        /* section labels (the brand's deep sage) */
  --bronze: #9A6534;      /* step numbers */
  --on-dark: #F5EFE4;
  --on-dark-muted: #CFC5B6;
  --on-dark-gold: #E0D2B4;
  --on-dark-faint: #B9AE9F;
  --button-text: #FBF7F0;
  --line: rgba(20, 17, 16, 0.18);
  --line-strong: rgba(20, 17, 16, 0.3);
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --pad-x: clamp(20px, 5vw, 64px);
  --section-y: clamp(72px, 9vw, 120px);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: var(--sans); -webkit-font-smoothing: antialiased;
}
a { color: var(--ink); }
a:hover { color: var(--accent); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
img { max-width: 100%; }
h1, h2, h3, p, dl, dd, figure { margin: 0; }
/* Jumping to a section lands it just below the sticky menu bar. */
[id] { scroll-margin-top: 92px; }
@media (max-width: 760px) { [id] { scroll-margin-top: 112px; } }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 10;
  background: var(--ink); color: var(--on-dark); padding: 12px 16px; border-radius: 2px;
}
.skip-link:focus { top: 16px; color: var(--on-dark); }

.wrap { max-width: 1200px; margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }
.band { background: var(--sand); }
.band--dark { background: var(--footer); color: var(--on-dark); }
.band--brown { background: var(--brown-band); color: #FBF7F0; }
.band--sage { background: var(--sage-band); color: #FAF6EF; }
.band--sage .split__main .eyebrow,
.band--sage .facts dt { color: #DCE6D2; }
.band--sage .split__main .text-lg,
.band--sage .split__main .small { color: #E6DDCE; }
.band--sage .facts > div { border-top-color: rgba(250, 246, 239, 0.3); }
.band--sage .card { color: var(--ink); }
.section { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.section--flush-top { padding-top: 0; }

/* ---------- Type ---------- */
.eyebrow {
  font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sage);
}
.eyebrow--accent { color: var(--accent); }
.eyebrow--on-dark { color: var(--on-dark-muted); }
.serif { font-family: var(--serif); }
.italic { font-style: italic; }
.accent { color: var(--accent); }
.text { font-size: 17px; line-height: 1.6; color: var(--body); text-wrap: pretty; }
.text-lg { font-size: 18px; line-height: 1.65; color: var(--body); text-wrap: pretty; max-width: 38rem; }
.small { font-size: 15px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.h2 {
  font-family: var(--serif); font-weight: 400; letter-spacing: -0.02em; line-height: 1.05; text-wrap: balance;
  font-size: clamp(38px, 4.6vw, 60px);
}
.h3 { font-size: 21px; font-weight: 600; }

/* ---------- Buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px;
  background: var(--accent); color: var(--button-text); font-size: 16px; font-weight: 600;
  text-decoration: none; border-radius: 2px;
}
.btn:hover { color: var(--button-text); background: #5A251C; }
.btn--small { min-height: 44px; padding: 0 18px; font-size: 15px; }
.btn--outline { background: transparent; color: var(--ink); border: 1px solid var(--ink); padding: 0 24px; }
.btn--outline:hover { background: var(--ink); color: var(--on-dark); }
.btn--light { background: var(--ground); color: var(--ink); }
.btn--light:hover { background: #FFFFFF; color: var(--ink); }
.link-arrow {
  font-size: 16px; font-weight: 600; text-decoration: underline; text-underline-offset: 6px;
  text-decoration-thickness: 1px;
}

/* ---------- Header: stays at the top while you scroll ---------- */
.masthead {
  position: sticky; top: 0; z-index: 50; background: var(--sand);
  transition: box-shadow 0.25s ease;
}
.masthead.is-scrolled { box-shadow: 0 1px 0 rgba(20, 17, 16, 0.1), 0 10px 24px -18px rgba(20, 17, 16, 0.45); }
.site-header {
  padding-top: 18px; padding-bottom: 18px; display: flex; align-items: center; gap: 16px 28px;
}
.site-header .brand { flex: none; margin-right: auto; }
.site-header__cta { flex: none; }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand__word { font-size: 12px; font-weight: 600; letter-spacing: 0.24em; }

/* The logo: 12:21 as a flip clock (Kevin, 2026-10-29). Four tiles in the
   brand's colors, in order: near black, dark brown, shadow red, copper. */
.flip { display: inline-flex; align-items: center; gap: 3px; }
.flip__tile {
  position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden;
  width: 26px; height: 36px; border-radius: 3px; color: #F2EADD;
  font-family: "Oswald", "Arial Narrow", sans-serif; font-weight: 700; font-size: 29px; line-height: 1;
}
.flip__tile::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 50%; background: rgba(255, 255, 255, 0.07);
}
.flip__tile::after {
  content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 1px); height: 2px; background: rgba(0, 0, 0, 0.35);
}
.flip__tile--1 { background: #141110; }
.flip__tile--2 { background: #4D3D30; }
.flip__tile--3 { background: #6B2D23; }
.flip__tile--4 { background: #B07840; }
.flip__colon { display: flex; flex-direction: column; gap: 7px; padding: 0 2px; }
.flip__colon span { width: 4px; height: 4px; border-radius: 50%; background: #B07840; }
/* Other sizes of the same tiles: the split-flap board, the step numbers, the 404. */
.flip--sm { gap: 3px; }
.flip--sm .flip__tile { width: 22px; height: 30px; font-size: 20px; }
.flip--lg { gap: 4px; }
.flip--lg .flip__tile { width: 40px; height: 56px; font-size: 44px; border-radius: 4px; }
.flip--xl { gap: 6px; }
.flip--xl .flip__tile { width: 72px; height: 100px; font-size: 80px; border-radius: 6px; }
.flip--xl .flip__tile::after { height: 3px; }

/* The split-flap board ("Opening soon"). */
.splitflap__board { display: flex; flex-direction: column; gap: 4px; }
.splitflap__row { display: flex; }

/* 80s seven-segment digits (drawn by build.py). Unlit segments show faintly. */
.lcd { display: block; width: auto; height: 34px; color: var(--accent); overflow: visible; }
.lcd--big { height: 92px; color: var(--bronze); }

/* The LED dot-matrix sign ("Coming next"): the third era, after flip and LCD. */
.led { align-self: flex-start; margin-bottom: 4px; }
.led__panel {
  display: inline-flex; align-items: center; color: var(--sage);
  font-family: "Doto", ui-monospace, monospace; font-weight: 900; font-size: 28px;
  letter-spacing: 0.08em; line-height: 1;
}
.nav { min-width: 0; font-size: 15px; font-weight: 500; }
.nav__links {
  display: flex; gap: 4px 24px; white-space: nowrap; overflow-x: auto; scrollbar-width: none;
  padding: 6px 2px;   /* room for the focus ring and the underline */
}
.nav__links::-webkit-scrollbar { display: none; }
.nav__links a { text-decoration: none; text-underline-offset: 7px; text-decoration-thickness: 2px; }
.nav__links a.is-current { color: var(--accent); text-decoration: underline; }
.site-header__cta, .site-header__cta:hover { color: var(--button-text); }
@media (max-width: 1100px) {
  .nav__links { gap: 4px 18px; font-size: 14px; }
}
/* Phones: logo and button on the first row, the section links in one swipeable row below. */
@media (max-width: 760px) {
  .site-header { flex-wrap: wrap; padding-top: 12px; padding-bottom: 8px; gap: 8px 12px; }
  .site-header .flip__tile { width: 22px; height: 30px; font-size: 24px; }
  .site-header .flip__colon { gap: 6px; }
  .site-header .brand { gap: 10px; }
  .site-header__cta { min-height: 38px; padding: 0 14px; font-size: 14px; }
  .nav { order: 3; flex: 1 1 100%; }
  .nav__links { gap: 4px 20px; padding-bottom: 8px;
    -webkit-mask-image: linear-gradient(to right, #000 85%, transparent);
            mask-image: linear-gradient(to right, #000 85%, transparent); }
}

/* ---------- Motion (only when site.js runs, and never with reduced motion) ---------- */
.flip__tile.is-flapping { animation: flap 0.075s ease-out; }
@keyframes flap {
  from { transform: perspective(220px) rotateX(-65deg); filter: brightness(0.85); }
  to { transform: none; filter: none; }
}
.js-motion .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.js-motion .reveal.is-visible { opacity: 1; transform: none; }
.js-motion .reveal:nth-child(2) { transition-delay: 0.08s; }
.js-motion .reveal:nth-child(3) { transition-delay: 0.16s; }
.js-motion .reveal:nth-child(4) { transition-delay: 0.24s; }
.js-motion .reveal:nth-child(5) { transition-delay: 0.32s; }
@media (prefers-reduced-motion: reduce) {
  .js-motion .reveal { opacity: 1; transform: none; transition: none; }
  .flip__tile.is-flapping { animation: none; }
}
@media print {
  .masthead { position: static; box-shadow: none; }
  .js-motion .reveal { opacity: 1; transform: none; }
}

/* ---------- Hero ---------- */
.hero { padding-top: clamp(56px, 9vw, 112px); padding-bottom: clamp(64px, 9vw, 120px); }
.hero .eyebrow { margin-bottom: 32px; }
.hero__title {
  font-family: var(--serif); font-weight: 400; font-size: clamp(46px, 7.4vw, 108px); line-height: 1.0;
  letter-spacing: -0.025em; text-wrap: balance;
}
.hero__title span { display: block; }
.hero__title .italic { color: var(--accent); }
.hero__foot {
  margin-top: clamp(40px, 5vw, 64px); padding-top: 32px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px;
}
.hero__lede { max-width: 36rem; font-size: clamp(19px, 1.6vw, 22px); line-height: 1.5; color: var(--body); text-wrap: pretty; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }

/* ---------- The assessment ---------- */
.split {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 56px clamp(48px, 7vw, 104px);
}
.split__main { flex: 999 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.split__main .text-lg { max-width: 36rem; }
.facts {
  margin-top: 8px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 24px 40px;
}
.facts > div { display: flex; flex-direction: column; gap: 6px; padding-top: 16px; border-top: 1px solid var(--line-strong); }
.facts dt { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.facts dd { font-size: 17px; line-height: 1.5; }
.split__main .small { margin-top: 8px; max-width: 36rem; }
.card {
  flex: 1 1 340px; min-width: 0; background: var(--ground); border: 1px solid rgba(20, 17, 16, 0.22);
  border-radius: 2px; padding: 36px 32px; display: flex; flex-direction: column; gap: 24px;
}
.card__title { font-family: var(--serif); font-size: clamp(36px, 3.6vw, 48px); line-height: 1.05; font-weight: 400; letter-spacing: -0.02em; }
.card .small { font-size: 14px; line-height: 1.55; }

/* ---------- How it works ---------- */
.steps {
  list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 48px 40px;
}
.steps li { display: flex; flex-direction: column; gap: 14px; padding-top: 28px; border-top: 1px solid var(--line-strong); }
.steps .flip { align-self: flex-start; }
.steps__bonus { margin-top: 40px; max-width: 46rem; font-size: 16px; line-height: 1.6; color: var(--muted); }

/* What's in your report (inside the green-gray assessment section) */
.report { display: flex; flex-direction: column; gap: 16px; padding-top: 24px; border-top: 1px solid rgba(250, 246, 239, 0.3); }
.report__title { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.15; }
.report__list { margin: 0; padding: 0 0 0 20px; display: flex; flex-direction: column; gap: 12px; font-size: 17px; line-height: 1.55; color: #E6DDCE; }
.report__list strong { color: #FAF6EF; font-weight: 600; }
.report__list li::marker { color: #F0C99A; }
.section-title {
  margin-bottom: 56px; font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 5vw, 64px);
  line-height: 1.05; letter-spacing: -0.02em;
}

/* ---------- Research and beliefs ---------- */
.research .eyebrow { margin-bottom: 24px; }
.research__head { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 36px; margin-bottom: 56px; }
.research__title {
  max-width: 22ch; font-family: var(--serif); font-weight: 400;
  font-size: clamp(36px, 4.4vw, 58px); line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance;
}
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 48px; }
.grid-3 > article { display: flex; flex-direction: column; gap: 14px; padding-top: 24px; border-top: 1px solid var(--line-strong); }
.beliefs .eyebrow { margin-bottom: 40px; }
.beliefs .grid-3 > article { border-top-color: var(--ink); }
.beliefs .lcd { align-self: flex-start; }

/* What you get back */
.benefits__head { display: flex; flex-direction: column; gap: 24px; margin-bottom: 56px; }
.benefits__head .text-lg { max-width: 40rem; }
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 48px 40px; }
.grid-4 > article { display: flex; flex-direction: column; gap: 14px; padding-top: 24px; border-top: 2px solid var(--accent); }
.belief__title { font-family: var(--serif); font-weight: 500; font-size: 32px; line-height: 1.1; letter-spacing: -0.01em; }

/* ---------- Coming next ---------- */
.notice {
  border: 1px dashed rgba(20, 17, 16, 0.4); border-radius: 2px; padding: clamp(32px, 4vw, 48px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px;
}
.notice__body { flex: 999 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.notice__title { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3.2vw, 42px); line-height: 1.1; letter-spacing: -0.015em; }
.notice .text { max-width: 38rem; }
.notice .btn { flex: none; }

/* ---------- Advising ---------- */
.advising {
  padding-top: clamp(80px, 10vw, 136px); padding-bottom: clamp(80px, 10vw, 136px);
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 40px clamp(48px, 7vw, 104px);
}
.advising__body { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.advising__title { font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 5vw, 68px); line-height: 1.04; letter-spacing: -0.025em; text-wrap: balance; }
.advising__tagline { font-family: var(--serif); font-style: italic; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.3; color: #EBC495; }
.advising__text { max-width: 38rem; font-size: 18px; line-height: 1.65; color: #E6DDCE; text-wrap: pretty; }
.advising .eyebrow--on-dark { color: #E0D2B4; }
.advising .btn { flex: none; }

/* ---------- About ---------- */
.about {
  padding-top: clamp(72px, 9vw, 136px); padding-bottom: clamp(72px, 9vw, 136px);
  display: flex; flex-wrap: wrap; align-items: center; gap: 56px clamp(48px, 7vw, 112px);
}
.portrait { flex: 0 1 300px; display: flex; flex-direction: column; gap: 16px; }
.portrait__frame { position: relative; padding: 0 14px 14px 0; }
.portrait__frame::before {
  content: ""; position: absolute; left: 14px; top: 14px; right: 0; bottom: 0; border: 1px solid rgba(20, 17, 16, 0.35);
}
.portrait img { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 274 / 310; object-fit: cover; filter: saturate(0.9); }
.portrait figcaption { font-size: 14px; color: var(--muted); }
.about__body { flex: 999 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.about__quote { font-family: var(--serif); font-size: clamp(30px, 3.4vw, 46px); line-height: 1.15; letter-spacing: -0.015em; text-wrap: balance; }

/* ---------- Closing call ---------- */
.closing {
  padding-top: clamp(80px, 10vw, 136px); padding-bottom: clamp(80px, 10vw, 136px);
  display: flex; flex-direction: column; gap: 28px;
}
.closing__title { max-width: 16ch; font-family: var(--serif); font-weight: 400; font-size: clamp(42px, 6vw, 84px); line-height: 1.02; letter-spacing: -0.025em; text-wrap: balance; }
.closing__text { max-width: 36rem; font-size: 19px; line-height: 1.6; color: var(--body); }
.closing .actions { margin-top: 12px; }

/* ---------- Footer ---------- */
.site-footer .wrap { padding-top: 48px; padding-bottom: 40px; display: flex; flex-direction: column; gap: 40px; }
.site-footer a { color: var(--on-dark); text-decoration: none; }
.site-footer a:hover { color: var(--on-dark-gold); text-decoration: underline; }
.site-footer__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; }
.site-footer .brand { color: var(--on-dark); }
.site-footer .flip__tile { width: 22px; height: 30px; font-size: 24px; }
.site-footer .flip__colon { gap: 6px; }
.site-footer .flip__colon span { background: #E0B884; }
.site-footer .brand__word { font-size: 11px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 15px; }
.site-footer__bottom {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 16px 40px;
  padding-top: 28px; border-top: 1px solid rgba(245, 239, 228, 0.14);
}
.verse { max-width: 40rem; font-family: var(--serif); font-style: italic; font-size: 19px; line-height: 1.5; color: var(--on-dark-muted); }
.copyright { font-size: 13px; color: var(--on-dark-faint); }

/* ---------- Simple pages (404 and future pages) ---------- */
.page { padding-top: clamp(56px, 9vw, 112px); padding-bottom: clamp(72px, 9vw, 120px); display: flex; flex-direction: column; gap: 24px; }
.page__title { font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 6vw, 72px); line-height: 1.05; letter-spacing: -0.02em; }