/* Fulgent Capital — site styles
   Palette taken from Colin's own files: the cream and green-black of the tree logo,
   the gold of the leaf divider, the deep green behind the silver logo.
   Structure: the site is set like one of Colin's own books. A leather spine holds the
   contents (desktop), a running head and contents page do the same job on phones,
   each page opens like a chapter, and every page closes on a colophon. */

@font-face { font-family: "Libre Caslon Display"; src: url("/assets/fonts/libre-caslon-display-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Libre Caslon Text"; src: url("/assets/fonts/libre-caslon-text-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Libre Caslon Text"; src: url("/assets/fonts/libre-caslon-text-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Libre Caslon Text"; src: url("/assets/fonts/libre-caslon-text-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --paper: #f9f0df;        /* cream behind the tree logo */
  --paper-light: #fdf8ee;
  --parchment: #efe1c3;    /* the hanging signs on the book covers */
  --parchment-light: #f6ead0;
  --ink: #042f23;          /* tree and lettering in the cream logo */
  --ink-deep: #07211c;     /* background of the silver logo */
  --text: #1f2b25;
  --muted: #4d5a52;
  --gold: #b19248;         /* gold leaf divider: decoration only */
  --gold-text: #7a5f22;    /* darker gold that passes contrast on cream */
  --gold-light: #d6bd7c;   /* gold for text and focus rings on deep green */
  --leaf: #3a6937;         /* green of the colour logo */
  --silver: #c3c5c1;
  --rule: #d9c9a6;
  --display: "Libre Caslon Display", "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --serif: "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --wrap: 1140px;
  --gutter: 20px;
  --spine: 248px;          /* width of the book spine on desktop */
  --head-h: 67px;          /* height of the running head on phones (64px + 3px double rule) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-padding-top: 84px;
}
html.nav-open { overflow: hidden; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ink); text-decoration-color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a, button { touch-action: manipulation; }
p { margin: 0 0 1em; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; color: var(--ink); line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.005em; }
h1 { font-size: clamp(2.35rem, 7.5vw, 4.1rem); }
h2 { font-size: clamp(1.8rem, 5vw, 2.7rem); }
h3 { font-size: clamp(1.3rem, 3.4vw, 1.65rem); }
ul { padding-left: 1.2em; }
:focus-visible { outline: 2px solid var(--leaf); outline-offset: 3px; }
/* On deep green the green ring is too faint (about 2.6:1), so it turns gold there (over 8:1). */
.praise :focus-visible, .section--dark :focus-visible { outline-color: var(--gold-light); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 760px; }
.wrap.narrow, .narrow.wrap { max-width: 760px; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--paper); padding: 10px 16px; z-index: 50; }
.skip:focus { left: 10px; top: 10px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Small-caps line used above headings (serif, not a mono label) */
.kicker { display: block; font-variant-caps: all-small-caps; letter-spacing: .14em; font-size: 1.05rem; color: var(--gold-text); margin-bottom: .6em; }
.lede { font-size: 1.15rem; color: var(--text); }
.muted { color: var(--muted); }

/* Drop cap: the first letter of a chapter, as in Colin's books */
.dropcap::first-letter { float: left; font-family: var(--display); font-size: 3.6em; line-height: .8; padding: .08em .09em 0 0; color: var(--ink); }

/* Gold leaf divider — Colin's own ornament */
.leaf-rule { display: block; width: min(360px, 80%); height: auto; margin: 0 auto; }
.leaf-rule--left { margin: 0; }

/* ---------- Calls to action ---------- */
/* CSS-added decoration (seal letter, arrows, numbers, dashes, dots) uses content: "x" / "" so screen readers skip it;
   the plain line before each is the fallback for browsers that do not support the empty alternative. */
/* Primary: a parchment label sealed with a green wax seal bearing the "M" of The Market Man Method mark */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; margin-left: 12px; padding: .7em 1.3em .7em 2.9em;
  font: inherit; font-size: 1rem; line-height: 1.2; text-decoration: none; text-align: center;
  color: var(--ink); background: linear-gradient(180deg, var(--parchment-light), var(--parchment));
  border: 1px solid #b89c62; border-radius: 2px;
  box-shadow: inset 0 0 0 3px var(--parchment-light), inset 0 0 0 4px rgba(177, 146, 72, .55), 0 6px 12px -10px rgba(7, 33, 28, .7);
  cursor: pointer; user-select: none; -webkit-user-select: none;
  transition: transform 140ms var(--ease-out), background-color 160ms ease;
}
.btn::before {
  content: "M"; content: "M" / ""; position: absolute; left: -12px; top: 50%; width: 50px; height: 50px; margin-top: -25px;
  display: grid; place-items: center; padding-top: 3px;
  font-family: var(--display); font-size: 1.3rem; line-height: 1; color: #e2c777;
  /* Slightly uneven radius so the seal reads as pressed wax, not a perfect circle */
  border-radius: 50% 47% 52% 48% / 48% 52% 47% 51%;
  background: radial-gradient(circle at 36% 30%, #2c6c4b 0%, #11462f 40%, #052419 100%);
  box-shadow: inset 0 0 0 4px #0a3527, inset 0 0 0 5px rgba(226, 199, 119, .6), 0 2px 4px rgba(7, 33, 28, .45);
  transition: transform 160ms var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn:active::before { transform: scale(0.94); }

/* Secondary: a ledger entry, double-ruled underneath like a total in an account book */
.btn--ghost {
  display: inline-block; /* so the arrow stays beside the last word when the label wraps */
  min-height: 44px; margin-left: 0; padding: .5em 0 .3em;
  background: none; border: 0; border-bottom: 3px double var(--gold); border-radius: 0; box-shadow: none;
  text-align: left;
}
.btn--ghost::before { content: none; }
.btn--ghost::after { content: "\2192"; content: "\2192" / ""; display: inline-block; margin-left: .5em; color: var(--gold-text); transition: transform 160ms var(--ease-out); }
.btn--ghost[download]::after { content: "\2193"; content: "\2193" / ""; }
.btn--ghost:active::after { transform: translateX(2px); }

.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 1.6em; }
.btn-row--center { justify-content: center; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--paper-light); }
  .btn:hover::before { transform: rotate(-8deg); }
  .btn--ghost:hover { background: none; border-bottom-color: var(--ink); }
  .btn--ghost:hover::after { transform: translateX(3px); }
  a:hover { text-decoration-color: var(--ink); }
}

/* ---------- Running head (phones and tablets) ---------- */
.site-header { position: sticky; top: 0; z-index: 30; background: var(--paper); border-bottom: 3px double var(--gold); }
.spine { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.brand { display: block; flex: 0 1 auto; }
.brand img { width: 200px; height: auto; }
@media (max-width: 374px) { .brand img { width: 170px; } }
.menu-toggle {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
  font: inherit; font-size: 1rem; font-variant-caps: all-small-caps; letter-spacing: .1em; color: var(--ink);
  background: transparent; border: 1px solid var(--ink); border-radius: 2px; cursor: pointer;
  user-select: none; -webkit-user-select: none;
  transition: transform 140ms var(--ease-out);
}
.menu-toggle:active { transform: scale(0.97); }
.menu-toggle .bars { width: 16px; height: 10px; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; position: relative; }
.menu-toggle .bars::after { content: ""; position: absolute; left: 0; right: 0; top: 4px; border-top: 1px dotted currentColor; }

/* Contents page: opens below the running head and fills the screen */
.site-nav { display: none; }
.site-nav.is-open {
  display: block; position: fixed; left: 0; right: 0; top: var(--head-h); bottom: 0;
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--paper-light);
  padding: 34px var(--gutter) calc(32px + env(safe-area-inset-bottom, 0px));
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
  @starting-style { opacity: 0; transform: translateY(-6px); }
}
.contents-title { text-align: center; font-variant-caps: all-small-caps; letter-spacing: .3em; font-size: 1.15rem; color: var(--gold-text); margin: 0 0 22px; }
.contents { list-style: none; margin: 0 auto; padding: 0; max-width: 520px; }
.contents a { display: flex; align-items: baseline; gap: 10px; min-height: 44px; padding: 12px 0; text-decoration: none; font-family: var(--display); font-size: 1.45rem; line-height: 1.25; color: var(--ink); }
.contents .ld, .leaders .ld { flex: 1 1 24px; min-width: 24px; border-bottom: 2px dotted var(--gold); transform: translateY(-.28em); }
.contents .cn { min-width: 2em; text-align: right; color: var(--gold-text); font-size: 1.1rem; }
.contents a[aria-current="page"] .ct, .contents a.is-section .ct { color: var(--leaf); }
.contents a[aria-current="page"] .ct { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 6px; }
.site-nav .social { display: flex; justify-content: center; gap: 18px; margin-top: 26px; }
.social a { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; color: inherit; }
.social svg { width: 20px; height: 20px; fill: currentColor; }

/* ---------- Book spine (desktop) ---------- */
@media (min-width: 1100px) {
  body { padding-left: var(--spine); }
  html { scroll-padding-top: 24px; }
  .site-header {
    position: fixed; top: 0; left: 0; bottom: 0; width: var(--spine);
    border: 0; overflow-y: auto;
    /* Rounded leather: darker at both edges, lighter down the middle */
    background: linear-gradient(90deg, #031510 0%, #082820 9%, #0d352a 50%, #082820 91%, #031510 100%);
    box-shadow: 1px 0 0 var(--gold), 10px 0 24px -16px rgba(0, 0, 0, .6);
  }
  .site-header :focus-visible { outline-color: var(--gold-light); }
  .spine { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; min-height: 100%; max-width: none; padding: 28px 22px 20px; }
  /* Raised bands: gold double rules across the spine, as on a bound book */
  .brand { padding: 0 8px 24px; margin-bottom: 18px; border-bottom: 3px double rgba(214, 189, 124, .6); }
  .brand img { width: 150px; margin: 0 auto; }
  .menu-toggle { display: none; }
  .site-nav, .site-nav.is-open { display: flex; flex-direction: column; flex: 1; position: static; padding: 0; background: none; overflow: visible; transition: none; }
  .contents-title { color: var(--gold-light); font-size: .95rem; margin-bottom: 8px; }
  .contents { max-width: none; margin: 0; }
  .contents li + li { border-top: 1px solid rgba(214, 189, 124, .25); }
  .contents a { position: relative; gap: 12px; padding: 11px 4px; font-family: var(--serif); font-size: 1.02rem; font-variant-caps: all-small-caps; letter-spacing: .12em; color: #e9e4d6; }
  .contents .ld { display: none; }
  .contents .cn { order: -1; min-width: 2.2em; text-align: left; color: var(--gold-light); font-family: var(--display); font-size: 1rem; letter-spacing: 0; font-variant-caps: normal; }
  .contents a[aria-current="page"] .ct, .contents a.is-section .ct { color: var(--gold-light); text-decoration: none; }
  /* Ribbon bookmark marking the chapter you're in, tucked against the spine's edge */
  .contents a[aria-current="page"]::after, .contents a.is-section::after { content: ""; position: absolute; right: -22px; top: 8px; bottom: 8px; width: 5px; background: var(--gold-light); }
  .site-nav .social { margin-top: auto; padding-top: 16px; border-top: 3px double rgba(214, 189, 124, .6); gap: 6px; color: #e9e4d6; }
}
@media (min-width: 1100px) and (hover: hover) and (pointer: fine) {
  .contents a:hover .ct { color: #fff; }
}

/* ---------- Sections ---------- */
.section { padding: 64px 0; }
.section--tight { padding: 44px 0; }
.section--light { background: var(--paper-light); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.section--dark { background: var(--ink-deep); color: #e9e4d6; }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--paper); }
.section--dark a { color: var(--paper); }
.section--dark .kicker { color: var(--gold-light); }
.section--dark .muted { color: var(--silver); }
@media (min-width: 768px) { .section { padding: 96px 0; } :root { --gutter: 32px; } }

/* ---------- Chapter opening (inner pages) ---------- */
.page-head { padding: 44px 0 40px; text-align: center; border-bottom: 1px solid var(--rule); }
.page-head .wrap { max-width: 880px; }
.page-head .wrap::after { content: ""; display: block; width: 200px; aspect-ratio: 722 / 40; margin: 26px auto 0; background: url("/assets/images/gold-leaf-divider.webp") center / contain no-repeat; }
.chapter-no { display: block; font-family: var(--display); color: var(--gold-text); font-size: clamp(3rem, 12vw, 4.6rem); line-height: 1; margin-bottom: 16px; }
.chapter-no span { display: block; font-family: var(--serif); font-size: .95rem; font-variant-caps: all-small-caps; letter-spacing: .3em; color: var(--muted); margin-bottom: 10px; }
.page-head h1 { margin: 0 auto .3em; max-width: 20ch; }
.page-head p { margin: 0 auto; max-width: 52ch; font-style: italic; color: var(--muted); font-size: 1.15rem; }
@media (min-width: 768px) { .page-head { padding: 72px 0 56px; } }

/* ---------- Home: title spread ---------- */
.spread { padding: 28px 0 56px; }
.spread-book { display: grid; gap: 40px; }
.leaf--title { text-align: center; }
.hero-mark { width: 170px; margin: 0 auto 16px; }
.spread h1 { margin-bottom: .35em; }
.spread h1 span { display: block; font-size: .62em; color: var(--leaf); margin-top: .12em; }
.spread .leaf-rule { width: 220px; margin: 4px auto 22px; }
.leaf--plate { margin: 0; }
.leaf--plate figcaption { margin-top: 20px; text-align: center; font-variant-caps: all-small-caps; letter-spacing: .14em; font-size: 1rem; color: var(--gold-text); }
/* Arched frame — the arches of the old City buildings on Colin's covers */
.arch { border-radius: 999px 999px 2px 2px; overflow: hidden; background: var(--parchment); box-shadow: 0 0 0 1px var(--rule), 0 0 0 8px var(--paper), 0 0 0 9px var(--gold); max-width: 400px; margin: 10px auto 0; }
.arch img { width: 100%; aspect-ratio: 900 / 1227; object-fit: cover; }

/* Facing pages: two leaves of an open book with a soft fold down the middle */
.facing { display: grid; gap: 32px; margin-top: 44px; }
.page-h { font-size: 1.5rem; padding-bottom: .4em; border-bottom: 2px solid var(--ink); }
@media (min-width: 900px) {
  .spread { padding: 48px 0 88px; }
  .spread-book, .facing { grid-template-columns: 1fr 1fr; gap: 0; position: relative; background: var(--paper-light); border: 1px solid var(--rule); box-shadow: 0 30px 50px -40px rgba(7, 33, 28, .6); }
  .section--light .facing { background: var(--paper); }
  .spread-book::before, .facing::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 64px; margin-left: -32px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(7, 33, 28, .07) 40%, rgba(7, 33, 28, .16) 50%, rgba(7, 33, 28, .07) 60%, transparent); }
  .leaf { padding: 52px 48px; }
  .leaf--plate { order: -1; display: flex; flex-direction: column; justify-content: center; }
  .facing-page { padding: 44px 48px; }
}

/* ---------- Ledger list — numbered entries with a double margin rule, like an old account book ---------- */
.ledger-head { display: grid; grid-template-columns: 52px 1fr; margin-top: 32px; font-variant-caps: all-small-caps; letter-spacing: .14em; font-size: .98rem; color: var(--gold-text); }
.ledger-head span { padding: 0 0 6px; }
.ledger-head span:first-child { text-align: center; }
.ledger-head span:nth-child(2) { padding-left: 18px; }
.ledger-head span:nth-child(3) { display: none; }
.ledger { list-style: none; margin: 32px 0 0; padding: 0; border-top: 2px solid var(--ink); }
.ledger-head + .ledger { margin-top: 0; }
.ledger > li { display: grid; grid-template-columns: 52px 1fr; border-bottom: 1px solid var(--rule); }
.ledger > li:last-child { border-bottom: 3px double var(--ink); }
.ledger .no { font-family: var(--display); font-size: 1.5rem; color: var(--gold-text); padding: 20px 0; border-right: 3px double var(--gold); text-align: center; font-variant-numeric: oldstyle-nums; }
.ledger .entry { padding: 20px 0 22px 18px; }
.ledger h3 { margin-bottom: .3em; }
.ledger p { margin-bottom: .5em; }
.ledger .more { font-size: .98rem; }
@media (min-width: 768px) {
  .ledger > li, .ledger-head { grid-template-columns: 84px 1fr; }
  .ledger-head span:nth-child(2) { padding-left: 30px; }
  .ledger .entry { padding: 26px 0 26px 30px; display: grid; grid-template-columns: 1fr 1.5fr; gap: 28px; align-items: baseline; }
  .ledger .entry h3 { margin: 0; }
}
/* Folio column: each entry's link sits at the right, where a ledger records the page it's posted to */
@media (min-width: 900px) {
  .ledger-head { grid-template-columns: 84px 1fr 11rem; }
  .ledger-head span:nth-child(3) { display: block; text-align: right; }
  .ledger--folio .entry > div { display: grid; grid-template-columns: 1fr 11rem; gap: 24px; align-items: baseline; }
  .ledger--folio .entry p { margin: 0; }
  .ledger--folio .more { text-align: right; }
}

/* Two-column feature */
.split { display: grid; gap: 36px; align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: 64px; } .split--wide-left { grid-template-columns: 1.3fr .7fr; } .split--center { align-items: center; } }

/* ---------- Praise page: testimonials set like the praise inside a book's cover ---------- */
.praise { background: var(--ink-deep); color: #e9e4d6; text-align: center; }
.praise h2 { color: var(--paper); }
.praise-list { max-width: 40rem; margin: 26px auto 0; }
.praise-item { margin: 0; padding: 22px 0; }
/* Drawn in CSS here: the leaf image has a pale fringe that shows on deep green. Two gold rules and a diamond, after the compass points. */
.praise-item + .praise-item::before {
  content: ""; display: block; width: 170px; height: 12px; margin: 0 auto 34px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 12'%3E%3Cg fill='%23d6bd7c'%3E%3Crect x='0' y='5.5' width='72' height='1'/%3E%3Crect x='98' y='5.5' width='72' height='1'/%3E%3Cpath d='M85 0l6 6-6 6-6-6z'/%3E%3Ccircle cx='76' cy='6' r='1.3'/%3E%3Ccircle cx='94' cy='6' r='1.3'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}
.praise-item blockquote { margin: 0; }
.praise-item p { font-style: italic; font-size: clamp(1.15rem, 3.6vw, 1.45rem); line-height: 1.55; color: #f1ecdf; margin-bottom: .7em; }
.praise-item figcaption { color: var(--gold-light); font-variant-caps: all-small-caps; letter-spacing: .16em; font-size: 1.08rem; }
.praise-item figcaption::before { content: "\2014\00a0"; content: "\2014\00a0" / ""; }

/* ---------- Hanging signs — the parchment pillar signs from Colin's covers ---------- */
.sign {
  display: block; position: relative; text-align: center; text-decoration: none; color: var(--ink);
  background: linear-gradient(180deg, var(--parchment-light), var(--parchment));
  border: 1px solid #b89c62; box-shadow: inset 0 0 0 4px var(--parchment-light), inset 0 0 0 5px rgba(177, 146, 72, .55), 0 6px 14px -10px rgba(7, 33, 28, .6);
  padding: 18px 10px 16px; border-radius: 2px;
}
.sign .n { display: block; font-family: var(--display); color: var(--gold-text); font-size: 1rem; margin: 0; }
.sign .t { display: block; font-variant-caps: all-small-caps; letter-spacing: .1em; font-size: 1.12rem; line-height: 1.25; margin: 0; }

/* A pillar's heading hangs from an iron bracket fixed to the page edge, on two chains */
.hang { position: relative; padding-top: 34px; margin-bottom: 26px; }
.hang::before { content: ""; position: absolute; top: 0; left: 0; width: min(100%, 372px); height: 4px; background: var(--ink); border-radius: 0 3px 3px 0; }
.hang::after { content: ""; position: absolute; top: -6px; left: 0; width: 8px; height: 16px; background: var(--ink); border-radius: 1px; }
.sign--heading { display: inline-block; width: min(100%, 340px); padding: 18px 22px 16px; transform-origin: 50% -34px; }
.sign--heading::before, .sign--heading::after { content: ""; position: absolute; top: -35px; height: 34px; border-left: 2px dotted var(--ink); }
.sign--heading::before { left: 18%; }
.sign--heading::after { right: 18%; }
.sign--heading h2 { margin: 0; font-size: clamp(1.45rem, 5.4vw, 1.95rem); line-height: 1.15; }

/* Cohort: the five weeks hang one under another on phones, side by side from one rod on wider screens */
.weeks { list-style: none; margin: 40px 0 0; padding: 30px 0 0; display: grid; gap: 30px; max-width: 320px; border-top: 4px solid var(--ink); }
.weeks li { position: relative; display: flex; }
.weeks .sign { flex: 1; } /* equal heights when they hang side by side */
.weeks li::before, .weeks li::after { content: ""; position: absolute; top: -31px; height: 31px; border-left: 2px dotted var(--ink); }
.weeks li::before { left: 22%; }
.weeks li::after { right: 22%; }
.weeks .sign { transform-origin: 50% -30px; }
.weeks .sign h3.n { font-size: 1rem; line-height: 1.3; }
@media (min-width: 900px) { .weeks { max-width: none; grid-template-columns: repeat(5, 1fr); gap: 14px; } }

/* ---------- The Five Pillars page ---------- */
/* The walk: Colin's cover image with the five signs as links */
.walk { margin: 0 auto; max-width: 460px; width: 100%; }
.walk-frame { position: relative; box-shadow: 0 0 0 1px var(--rule), 0 0 0 8px var(--paper), 0 0 0 9px var(--gold); }
.walk-frame img { width: 100%; }
/* Fail-safe: the link text uses its own class (not .visually-hidden). If this stylesheet is ever missing or an old
   cached copy is used, the five links show as a plain readable list under the photo instead of vanishing. */
.walk-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.walk-signs { list-style: none; margin: 0; padding: 0; counter-reset: pillar; }
.walk-signs li { counter-increment: pillar; }
.walk-sign { position: absolute; display: block; border-radius: 3px; transition: box-shadow 160ms ease, background-color 160ms ease; }
.walk-sign::after { content: ""; position: absolute; inset: -5px; } /* a slightly larger tap area than the sign itself */
/* A small green seal with the pillar number marks each sign as something you can tap */
.walk-sign::before {
  content: counter(pillar); content: counter(pillar) / ""; position: absolute; left: -30px; top: 50%; width: 26px; height: 26px; margin-top: -13px;
  display: grid; place-items: center; padding-top: 2px; border-radius: 50%;
  font-family: var(--display); font-size: .9rem; line-height: 1; color: #e2c777;
  background: radial-gradient(circle at 36% 30%, #2c6c4b 0%, #11462f 40%, #052419 100%);
  box-shadow: 0 0 0 1px rgba(226, 199, 119, .8), 0 2px 4px rgba(0, 0, 0, .4);
}
.walk-sign:active { background-color: rgba(255, 244, 214, .35); }
.walk-sign:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 2px #fff; }
/* WARNING: these five positions are hand-measured percentages of city-walk-five-pillars.webp (900x1227) exactly as it is now.
   If that image is swapped, re-cropped or given a different aspect ratio, all five links will silently sit over the wrong spot
   with no error. Re-measure each sign's left/top/width/height against the new image and test by tapping each one. */
.walk-sign--1 { left: 74.2%; top: 6.5%; width: 19.4%; height: 8.8%; }
.walk-sign--2 { left: 74.1%; top: 20%; width: 19%; height: 8.7%; }
.walk-sign--3 { left: 70.7%; top: 33.7%; width: 17.4%; height: 8.6%; }
.walk-sign--4 { left: 70%; top: 45.5%; width: 18%; height: 8.6%; }
.walk-sign--5 { left: 70.2%; top: 57.3%; width: 17.6%; height: 8.4%; }
.walk figcaption { margin-top: 22px; text-align: center; font-style: italic; color: var(--muted); font-size: .98rem; }
@media (hover: hover) and (pointer: fine) {
  .walk-sign:hover { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ink); background-color: rgba(255, 244, 214, .2); }
}

.pillar { padding: 52px 0; border-bottom: 1px solid var(--rule); }
.pillar:last-child { border-bottom: 0; }
.pillar-body { display: grid; gap: 22px; }
.pillar-img { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--rule), 0 0 0 5px var(--paper), 0 0 0 6px var(--gold); }
.pillar .motto { font-family: var(--display); font-size: clamp(1.45rem, 4.4vw, 1.8rem); line-height: 1.25; color: var(--leaf); margin-bottom: .6em; }
.pillar .closing { font-style: italic; color: var(--ink); }
@media (min-width: 900px) {
  .pillar { padding: 72px 0; }
  .pillar-body { grid-template-columns: 180px minmax(0, 40rem); gap: 52px; }
  .pillar-img { width: 170px; height: 170px; margin-top: 6px; }
}

/* Contents-style list: title, dotted leader, arrow */
.leaders { list-style: none; margin: 22px 0 0; padding: 0; max-width: 620px; border-top: 2px solid var(--ink); }
.leaders li { border-bottom: 1px solid var(--rule); }
.leaders a { display: flex; align-items: baseline; gap: 10px; min-height: 48px; padding: 13px 0; text-decoration: none; font-family: var(--display); font-size: 1.2rem; line-height: 1.3; }
.leaders .cn { color: var(--gold-text); transition: transform 160ms var(--ease-out); }
.leaders a:active .cn { transform: translateX(2px); }
@media (hover: hover) and (pointer: fine) { .leaders a:hover .cn { transform: translateX(3px); } .leaders a:hover .ct { text-decoration: underline; text-decoration-color: var(--gold); } }

/* ---------- About: author's note ---------- */
.frontis { margin: 0 auto 44px; max-width: 320px; }
.frontis figcaption { margin-top: 22px; text-align: center; font-variant-caps: all-small-caps; letter-spacing: .16em; color: var(--gold-text); }
.portrait img { width: 100%; border-radius: 999px 999px 2px 2px; box-shadow: 0 0 0 1px var(--rule), 0 0 0 8px var(--paper), 0 0 0 9px var(--gold); }
.essay { max-width: 34rem; margin: 0 auto; font-size: 1.1rem; }
.essay-break { width: 170px; margin: 2.2em auto; }
.pull { font-family: var(--display); font-size: clamp(1.4rem, 4vw, 1.9rem); line-height: 1.3; color: var(--ink); border-left: 3px double var(--gold); padding: 4px 0 4px 20px; margin: 1.2em 0; }
/* On wider screens the pull quotes move into the right-hand margin, like notes in a book's margin */
@media (min-width: 900px) {
  .essay { margin-left: max(0px, calc(50% - 24.5rem)); }
  .essay .pull:not(.pull--inline) { float: right; clear: right; width: 13rem; margin: .3em -15rem 1em 0; padding: 14px 0 0; border-left: 0; border-top: 3px double var(--gold); font-size: 1.3rem; }
}
.imprint-page { text-align: center; }
.imprint-logo { width: 150px; margin: 0 auto 22px; }
.epigraph { text-align: center; }
.epigraph h2 { max-width: 24ch; margin: 0 auto; font-size: clamp(1.5rem, 4.5vw, 2.2rem); line-height: 1.25; }
.epigraph .wrap::before, .epigraph .wrap::after { content: ""; display: block; width: 170px; aspect-ratio: 722 / 40; margin: 0 auto 28px; background: url("/assets/images/gold-leaf-divider.webp") center / contain no-repeat; }
.epigraph .wrap::after { margin: 28px auto 0; transform: scaleY(-1); }

/* ---------- Programmes: contract note ---------- */
/* Set like the contract note a City broker issued for every deal: a ruled slip, a perforated tear line, and the bottom line double-ruled */
.note-slip, .price-card {
  position: relative; max-width: 560px; margin: 48px auto 0; padding: 40px 26px 28px;
  background: var(--paper-light); border: 1px solid var(--rule); border-top: 3px solid var(--ink);
  box-shadow: 0 20px 34px -26px rgba(7, 33, 28, .55); text-align: left;
}
.note-slip::before, .price-card::before { content: ""; position: absolute; left: 0; right: 0; top: 14px; border-top: 2px dashed rgba(177, 146, 72, .6); }
.note-slip h2 { margin-bottom: .4em; }
.note-rows { margin: 16px 0 26px; }
.note-rows div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.note-rows div:last-child { border-bottom: 3px double var(--ink); }
.note-rows dt { font-variant-caps: all-small-caps; letter-spacing: .14em; color: var(--muted); }
.note-rows dd { margin: 0; text-align: right; font-family: var(--display); font-size: 1.15rem; color: var(--ink); }
.note-rows dd.amount { font-size: 2.2rem; line-height: 1; }
.price-card .amount { font-family: var(--display); font-size: 2.6rem; color: var(--ink); line-height: 1; margin: .2em 0; }
/* Promotional offer (cohort-offer/): the same contract note, with the usual price struck through above the offer price */
.note-slip--offer .kicker { margin-bottom: .2em; }
/* Labels stay on one line from 375px up; on the narrowest phones they may wrap so "£100.00" never spills past the slip */
@media (min-width: 375px) { .note-slip--offer .note-rows dt { white-space: nowrap; } }
.note-rows dd.was { color: var(--muted); }
.note-rows dd.was s { text-decoration-thickness: 1px; text-decoration-color: var(--gold-text); }
.note-rows dd .placeholder { display: inline-block; margin: 0; padding: 4px 8px; font-family: var(--serif); font-size: .9rem; line-height: 1.4; }
.note-slip-after { max-width: 560px; margin-left: auto !important; margin-right: auto !important; }
.notices { display: grid; gap: 22px; margin-top: 44px; }
@media (min-width: 900px) { .notices { grid-template-columns: 1fr 1fr; gap: 28px; } }

/* Cards (resources, next steps) */
.cards { display: grid; gap: 18px; margin-top: 32px; }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cards--4 { grid-template-columns: repeat(4, 1fr); } .cards--3 { grid-template-columns: repeat(3, 1fr); } }
.card { background: var(--paper-light); border: 1px solid var(--rule); border-top: 3px solid var(--ink); padding: 24px 22px 22px; display: flex; flex-direction: column; }
/* The title must clearly outrank the description: the display face is light, so it needs real size over the text face */
.card h3 { margin-bottom: .4em; font-size: clamp(1.7rem, 1.2rem + 1.1vw, 2rem); line-height: 1.12; }
.card p { flex: 1; color: var(--muted); font-size: .95rem; line-height: 1.6; }
.card .step { font-family: var(--display); color: var(--gold-text); font-size: 1.1rem; }
.card a.card-link { margin-top: 6px; font-size: .95rem; }

/* Ticked lists, ruled with a double margin line like a ledger page */
.ticks { list-style: none; padding: 0; margin: 0 0 1.2em;
  background: linear-gradient(var(--gold), var(--gold)) 30px 0 / 1px 100% no-repeat, linear-gradient(var(--gold), var(--gold)) 33px 0 / 1px 100% no-repeat; }
.ticks li { position: relative; padding: 10px 0 10px 46px; border-bottom: 1px solid var(--rule); }
.ticks li::before { content: ""; position: absolute; left: 6px; top: 18px; width: 12px; height: 7px; border-left: 2px solid var(--leaf); border-bottom: 2px solid var(--leaf); transform: rotate(-45deg); }
.ticks strong { display: block; color: var(--ink); font-weight: 700; }
.section--dark .ticks li { border-color: rgba(195, 197, 193, .25); }
.section--dark .ticks li::before { border-color: var(--gold-light); }
.section--dark .ticks strong { color: var(--paper); }
.price-card .ticks { background: none; }
.price-card .ticks li { padding-left: 32px; }

.three-col { display: grid; gap: 32px; margin-top: 28px; }
@media (min-width: 900px) { .three-col { grid-template-columns: repeat(3, 1fr); gap: 40px; } }
.three-col h3 { font-size: 1.35rem; padding-bottom: .4em; border-bottom: 2px solid var(--ink); }

/* Notice panel (Important Information) — double rule like a certificate */
.notice { border: 1px solid var(--ink); outline: 1px solid var(--ink); outline-offset: 4px; padding: 24px 22px; margin: 12px 4px; background: var(--paper-light); }
.notice h2 { font-size: 1.5rem; }
.notice p:last-child { margin-bottom: 0; }

/* Quote band, set as an epigraph between two leaf ornaments */
.motto-band { text-align: center; padding: 48px var(--gutter); }
.motto-band blockquote { margin: 0 auto; max-width: 30ch; font-family: var(--display); font-size: clamp(1.5rem, 4.5vw, 2.2rem); line-height: 1.25; color: var(--ink); }
.motto-band blockquote::before, .motto-band blockquote::after { content: ""; display: block; width: 150px; aspect-ratio: 722 / 40; margin: 0 auto 24px; background: url("/assets/images/gold-leaf-divider.webp") center / contain no-repeat; }
.motto-band blockquote::after { margin: 24px auto 0; transform: scaleY(-1); }

/* Books */
.book { display: grid; gap: 26px; padding: 48px 0; border-bottom: 1px solid var(--rule); }
.book:last-child { border-bottom: 0; }
.book .cover { max-width: 300px; box-shadow: 0 22px 40px -22px rgba(7, 33, 28, .7); }
.book .order { font-variant-caps: all-small-caps; letter-spacing: .12em; color: var(--gold-text); font-size: 1.05rem; }
.book .price { font-family: var(--display); font-size: 1.5rem; color: var(--ink); margin: 0 0 .2em; }
.book .note { font-style: italic; color: var(--muted); }
@media (min-width: 800px) { .book { grid-template-columns: 300px 1fr; gap: 56px; align-items: center; padding: 72px 0; } .book:nth-child(even) .cover-wrap { order: 2; } .book:nth-child(even) { grid-template-columns: 1fr 300px; } }

/* Downloads */
.downloads { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 18px; }
.download { display: grid; grid-template-columns: 88px 1fr; gap: 18px; align-items: center; padding: 18px; background: var(--paper-light); border: 1px solid var(--rule); }
.download img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; }
.download .n { font-family: var(--display); color: var(--gold-text); }
.download h3 { margin: 0 0 .2em; font-size: 1.35rem; }
.download p { margin: 0 0 .6em; color: var(--muted); }
@media (min-width: 900px) { .downloads { grid-template-columns: repeat(2, 1fr); } .download { grid-template-columns: 120px 1fr; } .download img { width: 120px; height: 120px; } }

/* Infographic figure */
.figure { margin: 28px 0 0; }
.figure img { width: 100%; border: 1px solid var(--rule); }
.figure figcaption { font-size: .95rem; color: var(--muted); margin-top: 10px; }

/* Landing plate: each programme page's overview sheet, set straight after the chapter
   opening like a plate tipped into a book, on a cream mount with a soft shadow (same
   shadow family as the book covers). It links to the full-size file for zooming. */
.plate-band { padding: 32px 0 0; }
.plate { margin: 0 auto; max-width: 980px; }
.plate a { display: block; padding: 8px; background: var(--paper-light); border: 1px solid var(--rule); box-shadow: 0 22px 40px -26px rgba(7, 33, 28, .55); }
.plate img { width: 100%; }
.plate figcaption { margin: 14px auto 0; max-width: 46ch; text-align: center; font-style: italic; font-size: .95rem; color: var(--muted); }
@media (min-width: 768px) { .plate-band { padding-top: 56px; } .plate a { padding: 14px; } }

/* Placeholder: clearly marked gaps for Colin to fill in */
.placeholder { display: block; background: #fff6d6; color: #5a4300; border: 1px dashed #b38b00; padding: 12px 14px; margin: 14px 0; font-size: .95rem; line-height: 1.5; text-align: left; }
.placeholder::before { content: "To confirm: "; font-weight: 700; }

/* Contact */
.contact-card { border-top: 2px solid var(--ink); padding-top: 20px; }
.contact-email { font-family: var(--display); font-size: clamp(1.05rem, 4.6vw, 1.7rem); word-break: break-word; }

/* Legal text */
.legal h2 { font-size: 1.6rem; margin-top: 1.6em; }
.legal ul { margin: 0 0 1em; }

/* ---------- Colophon: the closing page of the book ---------- */
.site-footer { background: var(--paper-light); border-top: 3px double var(--gold); padding: 48px 0 32px; text-align: center; color: var(--muted); font-size: .98rem; }
.colophon .leaf-rule { width: 190px; margin: 0 auto 30px; }
.footer-logo { width: 130px; margin: 0 auto 16px; }
.imprint { margin: 0; font-variant-caps: all-small-caps; letter-spacing: .16em; font-size: 1.08rem; line-height: 1.5; color: var(--ink); }
.imprint span { display: none; }
.colophon-nav { list-style: none; padding: 0; margin: 20px auto 8px; max-width: 720px; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 20px; }
/* Separator dots only once the links fit on one line, so no line ever starts with a dot */
@media (min-width: 900px) {
  .colophon-nav { gap: 0; max-width: none; }
  .colophon-nav li + li::before { content: "\00b7"; content: "\00b7" / ""; color: var(--gold); padding: 0 .4em; }
}
.colophon-nav a { display: inline-block; padding: 10px 2px; text-decoration: none; color: var(--ink); }
.colophon-monthly { margin: 18px 0 0; }
.colophon-monthly a { display: inline-block; padding: 8px 0; font-variant-caps: all-small-caps; letter-spacing: .14em; font-size: 1.05rem; }
.colophon-mail { margin: 4px 0 0; }
/* The Healthcheck page has no Monthly link (kept separate, Colin 16 Oct), so keep the same breathing room above the email */
.colophon > nav + .colophon-mail { margin-top: 18px; }
.colophon-mail a { display: inline-block; padding: 8px 0; font-family: var(--display); font-size: clamp(1rem, 4.2vw, 1.2rem); word-break: break-word; }
.site-footer .social { display: flex; justify-content: center; gap: 4px; color: var(--ink); }
.colophon-h { margin: 22px 0 12px; font-family: var(--serif); font-variant-caps: all-small-caps; letter-spacing: .16em; font-size: 1.02rem; color: var(--gold-text); }
.badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; align-items: center; }
.badges img { height: 38px; width: auto; }
.footer-legal { max-width: 760px; margin: 30px auto 0; padding-top: 18px; border-top: 1px solid var(--rule); display: grid; gap: 8px; font-size: .9rem; }
.footer-legal p { margin: 0; }
@media (min-width: 640px) { .imprint span { display: inline; } .imprint-break { display: none; } }
@media (hover: hover) and (pointer: fine) { .colophon-nav a:hover { text-decoration: underline; text-decoration-color: var(--gold); } }

/* "Take the Healthcheck" in the contents (phones) and on the spine (desktop) */
.hc-link {
  display: flex; align-items: center; justify-content: center; min-height: 48px; max-width: 520px; margin: 22px auto 0; padding: 10px 16px;
  font-variant-caps: all-small-caps; letter-spacing: .14em; font-size: 1.08rem; text-decoration: none; color: var(--ink);
  background: linear-gradient(180deg, var(--parchment-light), var(--parchment)); border: 1px solid #b89c62; border-radius: 2px;
  box-shadow: inset 0 0 0 3px var(--parchment-light), inset 0 0 0 4px rgba(177, 146, 72, .55);
  transition: transform 140ms var(--ease-out);
}
.hc-link:active { transform: scale(0.97); }
.hc-link[aria-current="page"] { color: var(--leaf); }
@media (min-width: 1100px) {
  .hc-link { margin: 18px 0 0; font-size: .95rem; letter-spacing: .08em; padding: 8px 10px; text-align: center; line-height: 1.3; }
  .site-header .hc-link:focus-visible { outline-color: var(--gold-light); }
}

/* Small line pointing to the Healthcheck or Monthly from other pages */
.hc-aside { font-style: italic; color: var(--muted); }
.hc-aside a { font-style: normal; color: var(--ink); }
.also { margin-top: 30px; }
.also .hc-aside { margin: 0 0 .5em; }

/* Home: the Healthcheck invitation */
.hc-invite { background: var(--paper-light); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.hc-invite-inner { display: grid; gap: 22px; justify-items: center; text-align: center; max-width: 820px; margin: 0 auto; }
.hc-invite-mark { width: 150px; }
.hc-invite h2 { margin-bottom: .4em; }
@media (min-width: 768px) {
  .hc-invite-inner { grid-template-columns: 200px 1fr; gap: 44px; justify-items: start; text-align: left; align-items: center; }
  .hc-invite-mark { width: 200px; }
}

/* ---------- HEALTHCHECK page ---------- */
.hc-head .hc-mark { width: 150px; margin: 0 auto 10px; }
.hc-head h1 { letter-spacing: .06em; }
.hc .wrap { max-width: 760px; }
/* Progress: the five signs from the cover, hanging from one rod */
.hc-signs { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 6px 0 30px; padding: 16px 0 0; border-top: 3px solid var(--ink); }
.hc-signs li { position: relative; }
.hc-signs li::before, .hc-signs li::after { content: ""; position: absolute; top: -16px; height: 16px; border-left: 1px dotted var(--ink); }
.hc-signs li::before { left: 22%; }
.hc-signs li::after { right: 22%; }
.hc-signs span { display: block; padding: 6px 2px; text-align: center; font-variant-caps: all-small-caps; letter-spacing: .04em; font-size: .78rem; line-height: 1.2; color: var(--muted); background: var(--parchment-light); border: 1px solid var(--rule); border-radius: 2px; overflow-wrap: anywhere; }
.hc-signs .is-current span { color: var(--ink); background: var(--parchment); border-color: var(--ink); box-shadow: inset 0 0 0 2px var(--parchment-light), inset 0 0 0 3px rgba(177, 146, 72, .7); }
.hc-signs .is-done span { color: var(--leaf); border-color: #b89c62; }
/* Phones: the signs show 1 to 5 (five words don't fit across 390px); wider screens show the pillar words from the cover */
.hc-signs b { font-family: var(--display); font-weight: 400; font-size: 1.15rem; font-variant-caps: normal; }
.hc-signs i { display: none; font-style: normal; }
@media (min-width: 640px) { .hc-signs span { font-size: .95rem; letter-spacing: .08em; } .hc-signs { gap: 12px; } .hc-signs b { display: none; } .hc-signs i { display: inline; } }

.hc-promises { list-style: none; padding: 0; margin: 4px 0 22px; border-top: 1px solid var(--rule); }
.hc-promises li { padding: 9px 0 9px 26px; border-bottom: 1px solid var(--rule); position: relative; font-family: var(--display); font-size: 1.2rem; color: var(--ink); }
.hc-promises li::before { content: ""; position: absolute; left: 4px; top: 50%; width: 8px; height: 8px; margin-top: -4px; background: var(--gold); transform: rotate(45deg); }
.hc-privacy { font-size: .98rem; }

.hc-count { margin: 0 0 6px; font-variant-caps: all-small-caps; letter-spacing: .12em; color: var(--gold-text); min-height: 1.7em; }
.hc-q { border: 0; margin: 0; padding: 0; min-width: 0; }
.hc-q legend { padding: 0; margin-bottom: 18px; outline-offset: 6px; }
.hc-qno { display: block; font-variant-caps: all-small-caps; letter-spacing: .1em; font-size: .98rem; color: var(--muted); margin-bottom: 6px; }
.hc-qtext { display: block; font-family: var(--display); font-size: clamp(1.5rem, 5vw, 2rem); line-height: 1.22; color: var(--ink); }
.hc-options { display: grid; gap: 10px; }
.hc-option {
  display: flex; align-items: center; gap: 14px; min-height: 54px; padding: 10px 16px; cursor: pointer;
  background: var(--paper-light); border: 1px solid var(--rule); border-radius: 2px; font-size: 1.08rem;
  transition: background-color 140ms ease, border-color 140ms ease;
}
.hc-option input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--ink); }
.hc-option:has(input:checked) { background: var(--parchment); border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.hc-option:has(input:focus-visible) { outline: 2px solid var(--leaf); outline-offset: 2px; }
@media (min-width: 640px) { .hc-options { grid-template-columns: 1fr 1fr; } }
@media (hover: hover) and (pointer: fine) { .hc-option:hover { border-color: var(--ink); } }
.hc-error { color: #8c2f1b; font-weight: 700; min-height: 1.7em; margin: 14px 0 0; }
.hc-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 10px; }
button.btn { font-family: var(--serif); }
.btn--back::after { content: none; }
.btn--back::before { content: "\2190"; content: "\2190" / ""; position: static; display: inline-block; width: auto; height: auto; margin: 0 .5em 0 0; padding: 0; background: none; box-shadow: none; border-radius: 0; color: var(--gold-text); font-family: var(--serif); font-size: 1rem; }

/* Result: a ledger statement of the five pillars, the free starting point, then optional programmes */
.hc-result:focus { outline: none; }
.hc-rows { margin: 22px 0 0; border-top: 2px solid var(--ink); }
.hc-row { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.hc-row:last-child { border-bottom: 3px double var(--ink); }
.hc-row dt { font-family: var(--display); font-size: 1.2rem; color: var(--ink); }
.hc-row dd { margin: 0; display: flex; align-items: center; gap: 14px; }
.hc-meter { display: inline-flex; gap: 3px; }
.hc-meter span { width: 7px; height: 20px; background: var(--rule); border-radius: 1px; }
.hc-meter span.on { background: var(--gold-text); }
.hc-band { font-variant-caps: all-small-caps; letter-spacing: .1em; color: var(--leaf); }
@media (min-width: 640px) { .hc-row { grid-template-columns: 1fr 300px; align-items: center; } }
.hc-result-note { margin: 0 0 .4em; font-style: italic; color: var(--muted); }
.hc-hint { margin: -6px 0 16px; font-size: .98rem; }
/* Level pillars: the visitor picks where to start */
.hc-tie { border: 0; margin: 30px 0 0; padding: 0; min-width: 0; }
.hc-tie legend { padding: 0; margin-bottom: 14px; font-family: var(--display); font-size: 1.3rem; line-height: 1.3; color: var(--ink); }
.hc-step { margin: 34px 0 10px; padding: 28px 24px 30px; text-align: center; background: var(--paper-light); border: 1px solid var(--ink); outline: 1px solid var(--ink); outline-offset: 4px; }
.hc-step .kicker { margin-bottom: .3em; }
.hc-step h3 { margin-bottom: .4em; }
.hc-step p:not(.kicker) { max-width: 46ch; margin-left: auto; margin-right: auto; }
.hc-step .hc-action { margin-bottom: 1.4em; padding: 12px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.hc-action strong { display: block; font-variant-caps: all-small-caps; letter-spacing: .1em; font-weight: 400; color: var(--gold-text); }
/* Optional programmes, shown to everyone alongside the free starting point */
.hc-more { margin: 40px 0 0; }
.hc-more > h3 { margin-bottom: .2em; }
.hc-more-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--ink); }
.hc-more-list li { padding: 16px 0 18px; border-bottom: 1px solid var(--rule); }
.hc-more-list h4 { margin: 0 0 .25em; font-family: var(--display); font-weight: 400; font-size: 1.25rem; color: var(--ink); }
.hc-more-list p { margin: 0 0 .4em; }
@media (min-width: 640px) { .hc-more-list { grid-template-columns: 1fr 1fr; gap: 0 28px; } }
.hc-org-more { margin: 22px 0 0; text-align: center; }
.hc-result .btn--back { margin-top: 18px; }
/* Shown only when JavaScript is off: a plain ruled note in the page's own voice, not a "to confirm" box */
.hc-noscript { margin: 18px 0 0; padding: 12px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); color: var(--ink); }

/* ---------- Market Man Monthly ---------- */
/* The current issue, set like a broker's monthly market letter: masthead, issue line, two columns on wide screens */
.letter { max-width: 760px; margin: 36px auto 0; padding: 26px 22px 24px; background: var(--paper-light); border: 1px solid var(--rule); box-shadow: 0 24px 40px -32px rgba(7, 33, 28, .6); }
.letter-head { border-top: 3px double var(--ink); border-bottom: 1px solid var(--ink); padding: 14px 0 8px; margin-bottom: 22px; text-align: center; }
.letter-masthead { margin: 0; font-family: var(--display); font-size: clamp(1.9rem, 7vw, 3rem); line-height: 1.05; letter-spacing: .02em; color: var(--ink); }
.letter-issue { display: flex; justify-content: space-between; margin: 10px 0 0; font-variant-caps: all-small-caps; letter-spacing: .14em; font-size: .95rem; color: var(--gold-text); }
.letter-title { font-size: clamp(1.5rem, 4.5vw, 2rem); }
.letter-body h3 { font-size: 1.3rem; margin-top: .4em; }
@media (min-width: 768px) {
  .letter { padding: 34px 40px 30px; }
  .letter-body { column-count: 2; column-gap: 40px; column-rule: 1px solid var(--rule); }
  .letter-body h3 { break-after: avoid; }
}
.mmm-slip { max-width: 600px; }
.mmm-form { margin-top: 6px; }
.field { margin-bottom: 18px; }
.field label { display: block; margin-bottom: 6px; font-variant-caps: all-small-caps; letter-spacing: .1em; color: var(--ink); }
.field input[type="text"], .field input[type="email"] {
  width: 100%; min-height: 50px; padding: 10px 14px; font: inherit; font-size: 1.0625rem; color: var(--text);
  background: #fff; border: 1px solid #b89c62; border-radius: 2px;
}
.field input:focus-visible { outline: 2px solid var(--leaf); outline-offset: 2px; border-color: var(--ink); }
.field input[aria-invalid="true"] { border-color: #8c2f1b; box-shadow: inset 0 0 0 1px #8c2f1b; }
.field--check { display: grid; grid-template-columns: 30px 1fr; align-items: start; gap: 4px 10px; }
.field--check input { width: 24px; height: 24px; margin: 3px 0 0; accent-color: var(--ink); }
.field--check label { margin: 0; font-variant-caps: normal; letter-spacing: 0; line-height: 1.5; }
.field--check .field-error { grid-column: 2; }
.field-error { margin: 6px 0 0; color: #8c2f1b; font-weight: 700; font-size: .95rem; }
.field-error:empty { display: none; }
.mmm-intro { margin: 0 0 20px; }
/* Hidden "leave this empty" box for bots: moved off-screen rather than display:none, which some bots skip */
.mmm-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* Messages after pressing the button: a ruled note, green rule when it worked, red rule when it didn't */
.mmm-status:not(:empty) { margin-top: 18px; padding: 12px 14px; border: 1px solid var(--rule); border-left: 3px solid var(--ink); background: var(--paper-light); color: var(--ink); font-size: .98rem; line-height: 1.5; }
.mmm-status.is-done { border-left-color: var(--leaf); }
.mmm-status.is-error { border-left-color: #8c2f1b; }
.mmm-form[aria-busy="true"] .btn { cursor: progress; }
.mmm-details { margin-top: 56px; }
.mmm-center { margin-left: auto; margin-right: auto; }

/* Small utilities (no inline styles, so the content security policy can stay strict) */
.u-flush { padding-top: 0; padding-bottom: 0; }
.u-top-small { padding-top: 8px; }
.u-mt { margin-top: 1em; }
.u-mt-lg { margin-top: 40px; }
.u-mt-0 { margin-top: 0; }
.u-h-sm { font-size: 1.6rem; }
.u-left { text-align: left; }
.u-one-col { grid-template-columns: 1fr !important; }
.u-note { margin: 1em 0 0; font-size: .95rem; }
.u-logo-feature { max-width: 320px; width: 100%; margin: 0 auto; }

/* Reduced motion: drop movement, keep everything visible (the sign swing is skipped in the script) */
@media (prefers-reduced-motion: reduce) {
  .btn, .btn::before, .btn--ghost::after, .menu-toggle, .site-nav.is-open, .leaders .cn, .walk-sign, .hc-link, .hc-option { transition: none; }
  .hc-link:active { transform: none; }
  .btn:active, .btn:active::before, .menu-toggle:active, .btn--ghost:active::after, .leaders a:active .cn { transform: none; }
  @media (hover: hover) and (pointer: fine) {
    .btn:hover::before, .btn--ghost:hover::after, .leaders a:hover .cn { transform: none; }
  }
}