/* isakvidinghoff.com: one stylesheet, self-hosted fonts, no third-party assets.
   Colours follow the shared book palette in offers/brand-brief.md section 4, plus the teal
   from Isak's portrait. Clockwise (headings) is the face the old site used; the body uses the
   system sans, close to the Inter of the old site. Layout: wide sections for the home page and
   lists, one narrow reading column for articles. */

@font-face {
  font-family: "Clockwise";
  src: url("fonts/clockwise-bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Clockwise";
  src: url("fonts/clockwise-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --paper: #f8f7f4;
  --surface: #ffffff;
  --ink: #243042;
  --deep: #2c425b;
  --muted: #5b6a73;
  --sage: #4e7a6e;
  --sage-light: #6c9b8e;
  --teal: #7cc4c0;
  --ring: #3d6457;
  --cream: #e8c0a3;
  --cream-soft: #f6eadf;
  --alt: #eff1ee;
  --rule: #e2ddd4;
  --shadow: 0 1px 2px rgba(36, 48, 66, 0.06), 0 8px 24px rgba(36, 48, 66, 0.06);
  --display: "Clockwise", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --narrow: 42rem;
  --wide: 72rem;
  --radius: 14px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #131920;
    --surface: #1b232d;
    --ink: #ebe7e0;
    --deep: #bcd0e4;
    --muted: #a3afba;
    --sage: #8fc2b3;
    --ring: #8fc2b3;
    --sage-light: #6c9b8e;
    --teal: #4f9c98;
    --cream: #c79a7a;
    --cream-soft: #2a241f;
    --alt: #171e26;
    --rule: #2d3743;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.25);
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font: 1.0625rem/1.65 var(--sans);
}

main { flex: 1 0 auto; }

img { max-width: 100%; height: auto; display: block; }

a { color: var(--deep); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--sage); }
:focus-visible { outline: 3px solid var(--sage); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink);
  text-wrap: balance;
  letter-spacing: 0.01em;
}
h1 { font-size: clamp(2.2rem, 4.6vw, 3.5rem); margin: 0 0 1.25rem; }
h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 2.5rem 0 0.75rem; }
h3 { font-size: 1.3rem; margin: 0 0 0.5rem; }

.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 10; background: var(--surface); padding: 0.5rem 0.75rem; }

.wrap, .wrap-narrow {
  margin: 0 auto;
  padding-left: max(1.25rem, env(safe-area-inset-left, 0px));
  padding-right: max(1.25rem, env(safe-area-inset-right, 0px));
}
.wrap { max-width: calc(var(--wide) + 2.5rem); }
.wrap-narrow { max-width: calc(var(--narrow) + 2.5rem); }

.preview-banner {
  margin: 0;
  padding: 0.4rem 1rem;
  background: var(--cream);
  color: #243042;
  font-size: 0.85rem;
  text-align: center;
}

/* Header */
.site-header { padding-block: 1.25rem; }
.header-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 2rem; }
/* The brand: the "Then and again" mark (ink 28 px) with the wordmark, cap 13.3 px, gap 9.3 px. */
.brand { display: inline-flex; align-items: center; gap: 9.3px; line-height: 0; color: inherit; text-decoration: none; }
.brand img { width: 178px; height: auto; }
.brand-mark { width: 41px; height: 31px; flex: none; --line: #b4713f; }
.footer-name .brand-mark { --line: #e7bea0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand .brand-mark { --line: #e7bea0; } }
:root[data-theme="dark"] .brand .brand-mark { --line: #e7bea0; }
:root[data-theme="light"] .brand .brand-mark { --line: #b4713f; }
.site-header nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
.site-header nav a { color: var(--muted); text-decoration: none; font-size: 1rem; padding-block: 0.25rem; border-bottom: 2px solid transparent; }
.site-header nav a:hover { color: var(--ink); }
.site-header nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--teal); }

/* Shared pieces */
.eyebrow { margin: 0 0 0.75rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sage); }
.eyebrow a { color: inherit; text-decoration: none; }
.eyebrow a:hover { text-decoration: underline; }
.card-meta { margin: 0 0 0.5rem; font-size: 0.82rem; color: var(--muted); letter-spacing: 0.02em; }
.standfirst, .lead { font-size: 1.2rem; line-height: 1.6; color: var(--muted); }
.standfirst p, .lead p { margin: 0 0 0.75rem; }

.button {
  display: inline-block;
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  background: var(--deep);
  color: var(--paper);
  font-weight: 600;
  text-decoration: none;
  border: 2px solid var(--deep);
}
.button:hover { background: var(--sage); border-color: var(--sage); color: var(--paper); }
.button.ghost { background: transparent; color: var(--deep); }
.button.ghost:hover { background: var(--deep); color: var(--paper); border-color: var(--deep); }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.75rem 0 0; }

.section { padding-block: 3.5rem; }
.section-tight { padding-block: 1rem 3.5rem; }
.section-alt { background: var(--alt); }
.section-title { margin-top: 0; margin-bottom: 1.5rem; }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: 1.5rem; }
.section-head .section-title { margin-bottom: 0; }

/* Home */
.hero { padding-block: 2.5rem 4rem; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 3rem; align-items: center; }
.hero-text { min-width: 0; }
.portrait { margin: 0; justify-self: end; width: min(100%, 26rem); }
.portrait img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 28px;
  box-shadow: 0 0 0 6px var(--surface), 0 0 0 8px var(--teal), 0 24px 60px rgba(44, 66, 91, 0.25);
}

.topics, .cards, .shows { display: grid; gap: 1.25rem; }
.topics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.shows { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.topic, .card, .show-card {
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.topic p { color: var(--muted); margin: 0 0 1rem; }
.topic ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.topic li a { font-weight: 600; }

.card { box-shadow: var(--shadow); transition: transform 0.15s ease; position: relative; }
.card:hover { transform: translateY(-2px); }
.card h2, .card h3 { font-size: 1.3rem; margin: 0 0 0.5rem; }
.card h2 a, .card h3 a { color: var(--ink); text-decoration: none; }
.card h2 a::after, .card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.card h2 a:hover, .card h3 a:hover { color: var(--sage); }
.card p:last-child { margin: 0; color: var(--muted); }

.show-card h2, .show-card h3 { font-size: 1.5rem; margin: 0 0 0.5rem; }
.show-card h3 a { color: var(--ink); }
.show-card > p { color: var(--muted); }

.chips { list-style: none; margin: 1rem 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chips a {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper);
  color: var(--deep);
  font-size: 0.9rem;
  text-decoration: none;
}
.chips a:hover { border-color: var(--sage); color: var(--sage); }

.book { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 3rem; align-items: center; max-width: var(--wide); background: var(--cream-soft); border-radius: 24px; padding: 2.5rem; }
.book h2 { margin-top: 0; }
.book-cover { width: 100%; height: auto; border-radius: 4px; max-width: 12rem; filter: drop-shadow(0 12px 24px rgba(36, 48, 66, 0.2)); }
.cover-paper { fill: #f8f7f4; }
.cover-band { fill: #e8c0a3; }
.cover-band-text { fill: #243042; font: 600 9px var(--sans); letter-spacing: 0.2em; }
.cover-title { fill: #2c425b; font: 700 30px var(--display); }
.cover-line { fill: none; stroke: #6c9b8e; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.cover-author { fill: #5f6e77; font: 600 10px var(--sans); letter-spacing: 0.18em; }
.soon { display: inline-block; margin: 0.5rem 0 0; padding: 0.3rem 0.8rem; border-radius: 999px; background: var(--surface); color: var(--sage); font-size: 0.85rem; font-weight: 600; }

.about-strip { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 2.5rem; align-items: center; }
.about-strip img { width: 10rem; height: 10rem; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px var(--surface), 0 0 0 6px var(--ring); }
.about-strip h2 { margin-top: 0; }

/* Page and article headers */
.page-header, .post-header { padding-top: 2.5rem; padding-bottom: 1rem; }
.page-portrait { width: 9rem; height: 9rem; border-radius: 50%; object-fit: cover; margin-bottom: 1.5rem; box-shadow: 0 0 0 4px var(--surface), 0 0 0 6px var(--ring); }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin: 1.25rem 0 0; color: var(--muted); font-size: 0.92rem; }
.post-meta img { width: 32px; height: 32px; border-radius: 50%; }
.badge { padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--cream-soft); color: var(--ink); font-size: 0.8rem; border: 1px solid var(--cream); }

/* Reading column */
.prose { font-size: 1.125rem; line-height: 1.75; padding-bottom: 2rem; }
.prose h2 { font-size: 1.65rem; }
.prose h3 { font-size: 1.25rem; margin-top: 2rem; }
.prose p, .prose ul, .prose ol { margin: 0 0 1.25rem; }
.prose li { margin: 0.4rem 0; }
.prose li::marker { color: var(--sage); }
.prose blockquote {
  margin: 1.75rem 0;
  padding: 1rem 1.25rem;
  background: var(--cream-soft);
  border-left: 4px solid var(--sage-light);
  border-radius: 0 10px 10px 0;
}
.prose blockquote p:last-child { margin: 0; }
.prose hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem 0; }
.prose .try { margin: 2.5rem 0; padding: 1.5rem; background: var(--surface); border: 1px solid var(--rule); border-left: 4px solid var(--sage); border-radius: var(--radius); box-shadow: var(--shadow); }
.prose .try h2 { margin-top: 0; font-size: 1.35rem; color: var(--sage); }
.prose .try > :last-child { margin-bottom: 0; }
.prose .free-note { padding: 1rem 1.25rem; background: var(--alt); border-radius: 10px; }
.prose .sources { font-size: 0.92rem; color: var(--muted); }
.prose .sources h2 { font-size: 1.1rem; }
.tags { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tags li { margin: 0; padding: 0.2rem 0.7rem; border-radius: 999px; background: var(--alt); font-size: 0.85rem; color: var(--muted); }

.author-box { display: flex; align-items: center; gap: 1rem; padding-block: 1.5rem 3rem; color: var(--muted); }
.author-box img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; }
.author-box p { margin: 0; }

.episodes { list-style: none; padding: 0; margin: 0 0 3rem; display: grid; gap: 1rem; }
.episodes li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 1rem; padding: 1.25rem; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); }
.episodes h3 { font-size: 1.2rem; margin: 0 0 0.25rem; }
.episodes h3 a { color: var(--ink); text-decoration: none; }
.episodes h3 a:hover { color: var(--sage); text-decoration: underline; }
.episodes p { margin: 0 0 0.25rem; color: var(--muted); }
.ep-number { font: 700 1.5rem/1 var(--display); color: var(--sage); }

/* Footer */
.site-footer { background: var(--deep); color: #dfe6ee; margin-top: 0; }
.site-footer a { color: #ffffff; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; padding-block: 3rem 2rem; }
.footer-grid p { margin: 0 0 0.5rem; }
.footer-grid nav { display: grid; gap: 0.4rem; align-content: start; }
.footer-grid nav a { text-decoration: none; }
.footer-grid nav a:hover { text-decoration: underline; }
.footer-grid .footer-name { margin-bottom: 1rem; line-height: 0; }
.footer-name { display: flex; align-items: center; gap: 9.3px; }
.footer-name img { width: 178px; height: auto; }
.footer-label { font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: #b9c7d6; }
.footer-base { border-top: 1px solid rgba(255, 255, 255, 0.15); padding-block: 1rem 2rem; font-size: 0.88rem; }
.footer-base p { margin: 0; }
@media (prefers-color-scheme: dark) {
  .site-footer { background: #0d1217; }
}

/* Signature: the steady line (level, a sharp drop, then lower and steady). It draws itself once. */
.steady-line { display: block; width: 100%; height: 100%; overflow: visible; }
.steady-line path { fill: none; stroke: var(--sage-light); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.hero-line { max-width: calc(var(--wide) + 2.5rem); margin: 2.5rem auto 0; padding-inline: 1.25rem; height: 3.5rem; }
.hero-line .steady-line path { stroke-dashoffset: 1; animation: draw-line 2.4s 0.3s cubic-bezier(0.65, 0, 0.35, 1) forwards; }
@keyframes draw-line { to { stroke-dashoffset: 0; } }

.hero { position: relative; overflow: hidden; }
.hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto auto;
  width: 60rem;
  height: 44rem;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--teal) 28%, transparent), transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.hero, .hero-grid { isolation: isolate; }
.hero h1 { font-size: clamp(2.4rem, 5.2vw, 4rem); line-height: 1.08; }
.hero h1 em {
  font-style: normal;
  background: linear-gradient(transparent 62%, color-mix(in srgb, var(--cream) 70%, transparent) 62%, color-mix(in srgb, var(--cream) 70%, transparent) 92%, transparent 92%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-inline: 0.05em;
}
.hero-facts { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin: 1.5rem 0 0; color: var(--muted); font-size: 0.92rem; }
.hero-facts span { display: inline-flex; align-items: center; gap: 0.5rem; }
.hero-facts span::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--sage-light); }
.portrait { position: relative; }
.portrait::after {
  content: "";
  position: absolute;
  inset: auto -1.25rem -1.25rem auto;
  width: 45%;
  height: 45%;
  border-radius: 28px;
  background: repeating-linear-gradient(135deg, var(--cream) 0 2px, transparent 2px 10px);
  opacity: 0.55;
  z-index: -1;
}
.section-note { margin: 0; color: var(--muted); }

/* Topic cards with icons */
.icon { width: 1.75rem; height: 1.75rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.topic { display: flex; flex-direction: column; border-top: 0; box-shadow: var(--shadow); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.topic:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(36, 48, 66, 0.06), 0 16px 40px rgba(36, 48, 66, 0.1); }
.topic > .icon { width: 2.75rem; height: 2.75rem; padding: 0.6rem; margin-bottom: 1rem; border-radius: 12px; color: var(--sage); background: color-mix(in srgb, var(--sage-light) 16%, transparent); }
.topic h3 a { color: var(--ink); text-decoration: none; }
.topic h3 a:hover { color: var(--sage); }
.topic ul { margin-bottom: 1.25rem; }
.topic li a { font-weight: 500; color: var(--ink); text-decoration-color: var(--rule); }
.topic li a:hover { color: var(--sage); text-decoration-color: currentColor; }
.topic-more { margin: auto 0 0; padding-top: 1rem; border-top: 1px solid var(--rule); font-size: 0.92rem; }
.topic-more a { color: var(--sage); font-weight: 600; text-decoration: none; }
.topic-more a::after { content: " →"; }
.topics-small { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.topics-small .topic p { margin: 0; }
.section-title .icon { width: 1.6rem; height: 1.6rem; margin-right: 0.6rem; vertical-align: -0.15em; color: var(--sage); }

/* Featured article: two columns wide, two rows tall, deep blue */
.cards-feature .card-featured { grid-column: span 2; grid-row: span 2; }
.card-featured { display: flex; flex-direction: column; justify-content: flex-end; min-height: 20rem; padding: 2rem; background: #2c425b; border-color: #2c425b; color: #dfe6ee; overflow: hidden; }
@media (prefers-color-scheme: dark) { .card-featured { background: #1f3247; border-color: #2d4660; } }
.card-featured .steady-line { position: absolute; top: 2.25rem; left: 2rem; width: calc(100% - 4rem); height: 4rem; }
.card-featured .steady-line path { stroke: var(--teal); opacity: 0.8; }
.card-featured .card-meta { color: #b9c7d6; }
.card-featured h2, .card-featured h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin-bottom: 0.75rem; }
.card-featured h2 a, .card-featured h3 a { color: #ffffff; }
.card-featured h2 a:hover, .card-featured h3 a:hover { color: var(--teal); }
.card-featured p:last-child, .card-featured p { color: #dfe6ee; }
.card-featured .read-more { margin: 1rem 0 0; font-weight: 600; color: var(--teal); }
.card-featured > p:not(.card-meta):not(.read-more) { font-size: 1.05rem; max-width: 36rem; }

/* Quote band */
.quote-band { padding-block: 4.5rem; background: #2c425b; text-align: center; }
@media (prefers-color-scheme: dark) { .quote-band { background: #1f3247; } }
.quote-band blockquote { margin: 0; }
.quote-band blockquote p { margin: 0; font: 700 clamp(1.6rem, 3.4vw, 2.5rem)/1.25 var(--display); color: #ffffff; text-wrap: balance; letter-spacing: 0.01em; }
.quote-band blockquote p::before { content: "“"; display: block; font-size: 4rem; line-height: 0.6; margin-bottom: 0.75rem; color: #7cc4c0; }
.quote-band footer { margin-top: 1.25rem; color: #b9c7d6; font-size: 0.95rem; }

/* A book, not a flat picture: turned a little on its spine, with page edges and a cast shadow.
   Only transform animates (on the GPU), so the hover stays smooth. */
.book-art { perspective: 1200px; display: flex; justify-content: center; }
.book-3d { position: relative; display: inline-block; line-height: 0; border-radius: 2px 5px 5px 2px; transform-style: preserve-3d; transform: rotateY(-22deg) rotateZ(-1.5deg); transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; box-shadow: 18px 24px 40px -12px rgba(16, 24, 34, 0.45), 4px 6px 10px rgba(16, 24, 34, 0.18); }
.book-3d .book-cover { position: relative; z-index: 1; display: block; border-radius: 2px 5px 5px 2px; filter: none; box-shadow: none; transform: none; transition: none; }
.book-3d::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; background: linear-gradient(90deg, rgba(0, 0, 0, 0.28) 0, rgba(255, 255, 255, 0.18) 2.2%, rgba(0, 0, 0, 0.12) 4.5%, rgba(255, 255, 255, 0) 8%), linear-gradient(115deg, rgba(255, 255, 255, 0.14) 0, rgba(255, 255, 255, 0) 40%); }
.book-3d::after { content: ""; position: absolute; top: 1.5%; bottom: 1.5%; right: 0; width: 14px; transform-origin: left center; transform: translateX(100%) rotateY(90deg) translateX(-100%) translateX(0); background: repeating-linear-gradient(90deg, #f3eee6 0 1px, #ddd5c8 1px 2px); border-radius: 0 2px 2px 0; }
.book-hit { display: inline-block; line-height: 0; }
.book-hit:hover .book-3d { transform: rotateY(-8deg) rotateZ(0deg) translateY(-6px); }

/* Article: reading progress, contents list beside the text on wide screens */
.progress { position: fixed; inset: 0 0 auto 0; height: 3px; background: var(--sage-light); transform-origin: 0 50%; transform: scaleX(0); z-index: 20; display: none; }
@supports (animation-timeline: scroll()) {
  .progress { display: block; animation: read-progress linear both; animation-timeline: scroll(root); }
  @keyframes read-progress { to { transform: scaleX(1); } }
}
.post-layout { max-width: calc(var(--narrow) + 2.5rem); margin: 0 auto; padding-inline: 1.25rem; }
.post-layout .prose { padding-inline: 0; }
.toc { margin: 1.5rem 0 2rem; padding: 1.25rem 1.5rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); font-size: 0.95rem; }
.toc-title { margin: 0 0 0.5rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sage); }
.toc ol { margin: 0; padding-left: 1.25rem; display: grid; gap: 0.35rem; }
.toc li::marker { color: var(--sage-light); }
.toc a { color: var(--muted); text-decoration: none; }
.toc a:hover { color: var(--ink); text-decoration: underline; }
.prose h2[id] { scroll-margin-top: 1.5rem; }
@media (min-width: 72rem) {
  .post-layout.has-toc { max-width: calc(var(--narrow) + 2 * 16rem + 2.5rem + 6rem); display: grid; grid-template-columns: 16rem minmax(0, var(--narrow)) 16rem; gap: 3rem; align-items: start; }
  .post-layout.has-toc .toc { grid-column: 3; grid-row: 1; position: sticky; top: 2rem; margin: 0.5rem 0 0; padding: 0 0 0 1.25rem; border: 0; border-left: 2px solid var(--rule); border-radius: 0; background: none; }
  .post-layout.has-toc .prose { grid-column: 2; grid-row: 1; }
}
.prose > p:first-of-type { font-size: 1.2rem; color: var(--ink); }

.jump { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1rem; }
.jump a { padding: 0.35rem 0.9rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--rule); color: var(--deep); text-decoration: none; font-size: 0.92rem; }
.jump a:hover { border-color: var(--sage); color: var(--sage); }
.topic-group + .topic-group { padding-top: 1rem; }

/* Watch box on articles */
.prose .watch { margin: 2.5rem 0; padding: 1.25rem 1.5rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); }
.prose .watch ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.prose .watch li { margin: 0; }
.prose .watch a { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto; gap: 0.75rem; align-items: center; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 1rem; line-height: 1.4; }
.prose .watch a:hover { color: var(--sage); }
.play { width: 2.25rem; height: 2.25rem; border-radius: 50%; background: #2c425b; position: relative; }
.play::after { content: ""; position: absolute; left: 0.85rem; top: 0.65rem; border-style: solid; border-width: 0.48rem 0 0.48rem 0.75rem; border-color: transparent transparent transparent #ffffff; }
.watch-length { color: var(--muted); font-weight: 400; font-size: 0.88rem; white-space: nowrap; }

/* Purpose self-check */
.check-band { padding-block: 1rem 3.5rem; background: var(--paper); }
.check-band-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; padding: 2rem 2.25rem; border-radius: 24px; background: linear-gradient(120deg, color-mix(in srgb, var(--teal) 22%, var(--surface)), var(--surface) 70%); border: 1px solid var(--rule); max-width: var(--wide); }
.wrap.check-band-inner { padding: 2rem 2.25rem; }
.check-band h2 { margin: 0 0 0.5rem; }
.check-band p { margin: 0; color: var(--muted); }
.check-band .eyebrow { margin-bottom: 0.5rem; color: var(--sage); }
.check-band .button { white-space: nowrap; }
.check-header .badge { display: inline-block; }
.check { padding-bottom: 2rem; }
.check-how { padding: 1rem 1.25rem; border-radius: 10px; background: var(--alt); color: var(--ink); }
.check-step { margin: 2.5rem 0; }
.check-step-head { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; align-items: start; }
.check-step-number { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: #2c425b; color: #ffffff; font: 700 1.3rem/1 var(--display); }
.check-step-head h3 { margin: 0.35rem 0 0.25rem; font-size: 1.5rem; }
.check-step-head p { margin: 0; color: var(--muted); }
.check-questions { list-style: none; counter-reset: none; margin: 1.25rem 0 0; padding: 0 0 0 4rem; display: grid; gap: 1rem; }
.check-questions li { padding: 1.25rem 1.5rem; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow); }
.check-q { margin: 0 0 0.5rem; font: 700 1.2rem/1.35 var(--display); color: var(--ink); letter-spacing: 0.01em; }
.check-q::before { content: "Q" counter(list-item) "  "; color: var(--sage); }
.check-questions details { color: var(--muted); font-size: 0.98rem; }
.check-questions summary { cursor: pointer; color: var(--sage); font-weight: 600; font-size: 0.9rem; }
.check-questions details p { margin: 0.5rem 0 0; }
.check-lines { height: 3.2rem; margin-top: 0.75rem; background: repeating-linear-gradient(transparent 0 1.55rem, var(--rule) 1.55rem 1.6rem); display: none; }
.check-statement { margin: 3rem 0 2rem; padding: 2rem; border-radius: 24px; background: #2c425b; color: #dfe6ee; }
.check-statement h3 { margin: 0 0 0.5rem; color: #ffffff; }
.check-statement .template { margin: 1.25rem 0; font: 700 clamp(1.25rem, 2.4vw, 1.6rem)/1.45 var(--display); color: #ffffff; letter-spacing: 0.01em; }
.check-statement .blank { padding: 0 0.3em; border-bottom: 2px dashed #7cc4c0; color: #7cc4c0; }
.check-statement .example { margin: 0; color: #b9c7d6; }
.check-statement .example strong { color: #ffffff; }
.check-statement .button.ghost { color: #ffffff; border-color: rgba(255, 255, 255, 0.6); background: transparent; }
.check-statement .button.ghost:hover, .check-statement .button.ghost[aria-pressed="true"] { background: rgba(255, 255, 255, 0.12); }
.report-chart h3 { margin: 0 0 0.5rem; }
@media (prefers-color-scheme: dark) { .check-statement, .check-step-number { background: #1f3247; } }
@media (max-width: 44rem) {
  .check-questions { padding-left: 0; }
  .check-band-inner, .wrap.check-band-inner { padding: 1.5rem 1.25rem; border-radius: 0; }
  .check-statement { padding: 1.5rem 1.25rem; margin-inline: -1.25rem; border-radius: 0; }
}
@media print {
  .site-header, .site-footer, .preview-banner, .check-band, .author-box, .check-next, .progress { display: none; }
  .check-questions details { display: none; }
  .check-lines { display: block; }
  .check-questions li { box-shadow: none; break-inside: avoid; }
  .check-statement { background: none; color: #243042; border: 1px solid #ccc; }
  .check-statement h3, .check-statement .template, .check-statement .example strong { color: #243042; }
}

/* Purpose assessment: one step at a time, scored in the browser */
.assess { margin: 1rem 0 3rem; scroll-margin-top: 5.5rem; }
.assess-bar { height: 6px; border-radius: 999px; background: var(--rule); overflow: hidden; margin-bottom: 1.5rem; }
.assess-bar-fill { height: 100%; width: 0; background: var(--sage); transition: width 0.3s ease; }
.assess-step h2 { margin: 0 0 1rem; font-size: 1.5rem; }
.assess fieldset { margin: 0 0 1rem; padding: 1.1rem 1.25rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); }
.assess legend { padding: 0; font-weight: 600; color: var(--ink); float: left; width: 100%; margin-bottom: 0.75rem; }
.assess legend + * { clear: both; }
.assess fieldset.needs-answer { border-color: #c4603f; box-shadow: 0 0 0 2px color-mix(in srgb, #c4603f 30%, transparent); }
.agree-scale { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.4rem; }
.agree-scale label, .pick { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.7rem; border: 1px solid var(--rule); border-radius: 10px; cursor: pointer; font-size: 0.9rem; line-height: 1.25; }
.agree-scale label { flex-direction: column; justify-content: flex-start; text-align: center; gap: 0.35rem; }
.agree-scale input, .pick input { accent-color: var(--sage); margin: 0; flex-shrink: 0; }
.agree-scale label:has(input:checked), .pick:has(input:checked) { border-color: var(--sage); background: color-mix(in srgb, var(--sage) 12%, var(--surface)); }
.pick:has(input:disabled) { opacity: 0.5; cursor: default; }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0.5rem; }
.pick-wide { margin-bottom: 0.5rem; font-size: 1rem; }
.lived-prompt { margin: 1.5rem 0 0.75rem; font-weight: 600; }
.assess .hint { color: var(--muted); }
.assess .own { display: block; font-weight: 600; margin-bottom: 0.4rem; }
.assess textarea { width: 100%; box-sizing: border-box; padding: 0.7rem; border: 1px solid var(--rule); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; }
.assess-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; }
.assess-nav [hidden] { display: inline-block; visibility: hidden; }
.assess-progress { margin: 0; color: var(--muted); font-size: 0.9rem; text-align: center; }
.report { margin: 1rem 0 3rem; outline: none; scroll-margin-top: 5.5rem; }
.report h3 { margin: 2.25rem 0 1rem; }
.report h4 { margin: 0 0 0.35rem; font-size: 1.05rem; }
.report-profile { margin: 0 0 0.75rem; font-size: clamp(1.8rem, 4vw, 2.4rem); }
.report-lead { font-size: 1.1rem; }
.report-note { padding: 0.8rem 1rem; border-radius: 10px; background: var(--cream-soft); border: 1px solid var(--cream); }
.meters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.meter { padding: 1rem 1.1rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); }
.meter-head { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.meter-head span { font-size: 0.85rem; font-weight: 600; color: var(--sage); }
.meter-track { height: 8px; margin: 0.5rem 0 0.75rem; border-radius: 999px; background: var(--rule); overflow: hidden; }
.meter-fill { height: 100%; border-radius: 999px; background: var(--sage); }
.meter-low .meter-fill { background: var(--cream); }
.meter p { margin: 0; color: var(--muted); font-size: 0.95rem; }
.ingredient .meter { margin-top: 0.75rem; }
.report-pattern, .ingredient, .report-step { margin-bottom: 1rem; padding: 1.1rem 1.25rem; border-radius: var(--radius); background: var(--alt); }
.report-pattern p, .report-step p { margin: 0; }
.report-summary { margin: 1.25rem 0 1rem; padding: 1.1rem 1.25rem; border-radius: var(--radius); border: 1px solid var(--sage); background: var(--surface); }
.report-summary h3 { margin: 0 0 0.6rem; }
.report-summary dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.6rem 1.5rem; margin: 0 0 0.5rem; }
.report-summary dt { font-size: 0.85rem; color: var(--muted); }
.report-summary dd { margin: 0.1rem 0 0; font-weight: 700; font-size: 1.1rem; }
.report-summary .report-small { margin: 0; }
.report-tension { margin: 1rem 0; padding: 1.1rem 1.25rem; border-radius: var(--radius); background: var(--cream-soft); }
.report-tension h3 { margin-top: 0; }
.report-tension p { margin: 0; }
.ingredients { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.ingredient { margin: 0; }
.ingredient ul { margin: 0.25rem 0 0.75rem; padding-left: 1.1rem; }
.ingredient p { margin: 0.25rem 0; }
.lived-tag { color: var(--muted); font-size: 0.85rem; }
.report-statement { margin: 2.25rem 0 1rem; }
.report-statement h3, .report-step h3 { margin-top: 0; }
.report-signup { margin: 2rem 0 1rem; padding: 1.5rem; border-radius: var(--radius); border: 1px solid var(--sage); background: var(--surface); }
.report-signup h3 { margin-top: 0; }
.signup-form { display: grid; gap: 0.4rem; }
.signup-form label { font-weight: 600; }
.signup-form input[type="email"], .signup-form input[type="text"] { width: 100%; box-sizing: border-box; padding: 0.7rem; border: 1px solid var(--rule); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; }
.signup-form .signup-consent { display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 400; margin-top: 0.5rem; }
.signup-form .signup-consent input { margin-top: 0.3rem; flex: none; }
.signup-form .signup-privacy, .signup-form .signup-status { font-size: 0.9rem; color: var(--muted); }
.signup-form .signup-field-error { margin: 0; color: var(--ink); font-weight: 600; }
.signup-form .signup-field-error:empty { display: none; }
.signup-form button { justify-self: start; margin-top: 0.5rem; }
.signup-form [aria-invalid="true"] { border-color: var(--ink); border-width: 2px; }
.signup-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* Quiz engine v2 (quiz-engine.cjs) */
.quiz-notice { margin: 0 0 1.5rem; padding: 1rem 1.25rem; border-radius: var(--radius); background: var(--alt); font-size: 0.95rem; }
.quiz-form { display: grid; gap: 1.25rem; }
.quiz-q { margin: 0; padding: 0; border: 0; }
.quiz-q legend { font-weight: 600; margin-bottom: 0.5rem; }
.quiz-n { color: var(--sage); }
.quiz-options { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.quiz-options label { display: flex; gap: 0.4rem; align-items: center; }
.quiz-missing { margin: 0; font-weight: 600; }
.quiz-form button { justify-self: start; }
.quiz-report h2 { margin-top: 2rem; }
.quiz-step { padding: 0.75rem 1rem; border-left: 3px solid var(--sage); background: var(--surface); }
.after-signup { margin: 2rem 0 1rem; padding: 1.5rem; border-radius: var(--radius); border: 1px solid var(--rule); background: var(--surface); }
.after-signup h3 { margin-top: 0; }
.after-gift h4, .after-offer h4 { margin: 1rem 0 0.25rem; }
.after-offer { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.report-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.report-deeper { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.dive { margin-top: 1.5rem; }
.dive h3 { margin: 0 0 0.5rem; font-size: 1.15rem; }
.report-small { color: var(--ink); opacity: 0.85; font-size: 0.9rem; }
.assess-intro { margin: 0 0 1.5rem; padding: 1rem 1.25rem 1rem 2.25rem; border-radius: var(--radius); background: var(--alt); }
.assess-intro li { margin: 0.25rem 0; }
.report-hard, .report-urgent { margin: 1.5rem 0; padding: 1.25rem 1.5rem; border-radius: var(--radius); background: var(--cream-soft); border: 1px solid var(--cream); }
.report-urgent { border-width: 2px; }
.report-hard h3, .report-urgent h3 { margin-top: 0; }
.assess-help { margin: 1rem 0 0; color: var(--muted); font-size: 0.85rem; }
.assess-step h2:focus:not(:focus-visible) { outline: none; }
.fit { margin: 0.75rem 0 0; font-size: 0.85rem; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.fit button { font: inherit; min-height: 44px; padding: 0.15rem 0.9rem; border-radius: 999px; border: 1px solid var(--rule); background: var(--surface); color: var(--ink); cursor: pointer; }
.fit button:hover { border-color: var(--sage); }
.basis { margin-top: 0.6rem; font-size: 0.85rem; color: var(--muted); }
.basis summary { cursor: pointer; color: var(--sage); }
.basis ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.report-details { margin: 2rem 0; }
.report-details > summary { cursor: pointer; font: 700 1.2rem/1.3 var(--display); color: var(--ink); margin-bottom: 1rem; }
.report-details .ingredients { margin-top: 1rem; }
.check-paper-title { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--rule); }
@media (max-width: 44rem) {
  .agree-scale { grid-template-columns: 1fr; }
  .agree-scale label { flex-direction: row; text-align: left; }
  .meters, .ingredients { grid-template-columns: 1fr; }
}
.report-tools { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0; }
.size-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.75rem; font-size: 0.9rem; }
.size-switch button[aria-pressed="true"] { background: var(--teal); color: var(--ink); border-color: var(--teal); }
.report-chart { margin: 1rem 0; }
.report-chart svg { width: 100%; height: auto; display: block; }
.report-chart .chart-label { fill: currentColor; font-size: 13px; }
.glance { list-style: none; margin: 0 0 0.5rem; padding: 0; display: grid; gap: 0.55rem; }
.glance li { display: grid; grid-template-columns: minmax(9rem, 13rem) 1fr 5.5rem; align-items: center; gap: 0.75rem; font-size: 0.95rem; }
.glance-track { height: 10px; border-radius: 999px; background: var(--rule); overflow: hidden; }
.glance-fill { display: block; height: 100%; border-radius: 999px; background: var(--sage); }
.glance-fill.glance-low { background: var(--cream); }
.glance-word { font-weight: 600; }
.glance-explore .glance-word { grid-column: 2 / 4; }
@media (max-width: 34rem) {
  .glance li { grid-template-columns: 1fr auto; gap: 0.25rem 0.75rem; }
  .glance-track { grid-column: 1 / -1; grid-row: 2; }
  .glance-explore .glance-word { grid-column: auto; }
}
.size-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.size-switch > span { flex-basis: 100%; }
.size-switch button { flex: 1 1 0; min-width: 0; padding-inline: 0.5rem; max-width: 10rem; }
.report-step .report-tools { margin-top: 1rem; }
.report-step .size-switch { margin-top: 1rem; }
.report-details > summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.9rem; border: 1px solid var(--muted); border-radius: var(--radius); list-style: none; }
.report-details > summary::-webkit-details-marker { display: none; }
.report-details > summary::before { content: "\25B8"; transition: transform 0.15s; }
.report-details[open] > summary::before { transform: rotate(90deg); }
.report-more > summary, .workshop > summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.9rem; border: 1px solid var(--muted); border-radius: var(--radius); color: var(--ink); list-style: none; }
.report-more > summary::-webkit-details-marker, .workshop > summary::-webkit-details-marker { display: none; }
.report-more > summary::before, .workshop > summary::before { content: "\25B8"; transition: transform 0.15s; }
.report-more[open] > summary::before, .workshop[open] > summary::before { transform: rotate(90deg); }
.workshop > summary { border-color: currentColor; color: inherit; }
.report-more .report-ai, .report-more .report-share { margin: 1rem 0; }
.report-chart .chart-track { fill: var(--rule); }
.report-chart .chart-bar { fill: var(--sage); }
.report-chart .chart-bar-low { fill: var(--cream); }
.report-chart .chart-word { fill: currentColor; font-size: 13px; font-weight: 600; }
.book-quote { margin: 0.75rem 0 0; padding-left: 0.9rem; border-left: 3px solid var(--cream); font-style: italic; }
.book-quote cite { display: block; font-style: normal; font-size: 0.8rem; color: var(--muted); margin-top: 0.25rem; }
.report-lite [data-full] { display: none !important; }
.workshop { margin-top: 1rem; }
.workshop textarea { width: 100%; box-sizing: border-box; font: inherit; padding: 0.75rem; border-radius: var(--radius); border: 1px solid var(--rule); background: var(--surface); color: var(--ink); }
.workshop textarea:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.workshop-frames button[aria-pressed="true"] { background: var(--teal); border-color: var(--teal); color: #fff; }
.report-banner { margin: 0 0 1.5rem; padding: 1rem 1.25rem; border-radius: var(--radius); background: var(--cream-soft); }
.report-banner p { margin: 0 0 0.5rem; }
.how-it-works { margin: 2rem 0; }
.how-it-works summary { cursor: pointer; font-weight: 600; }
.print-card { display: none; }
@media print {
  body.printing-card .check-header, body.printing-card .check > :not(.print-card), body.printing-card .check-paper, body.printing-card .author-box { display: none !important; }
  body.printing-card .print-card { display: block; }
  .print-card h2 { margin-top: 0; }
  .print-card .card-lines { height: 8rem; border-bottom: 1px solid #999; background: repeating-linear-gradient(transparent 0 1.9rem, #ccc 1.9rem 2rem); }
  .report-tools, .size-switch, .workshop-frames, .report-share, .report-ai button, .how-it-works { display: none; }
  .assess, .report-actions, .report-deeper, .report-full { display: none; }
  body:has(.report:not([hidden])) .check-paper { display: none; }
  .meter, .report-pattern, .ingredient, .report-step { break-inside: avoid; }
  .fit, .basis summary { display: none; }
}

.footer-line { height: 2.5rem; max-width: calc(var(--wide) + 2.5rem); margin: 0 auto; padding: 1.5rem 1.25rem 0; box-sizing: content-box; }
.footer-line .steady-line path { stroke: var(--teal); opacity: 0.5; }

@media (max-width: 60rem) {
  .topics, .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards-feature .card-featured { grid-row: auto; }
}

@media (max-width: 44rem) {
  body { font-size: 1rem; }
  .hero { padding-block: 1rem 3rem; }
  .hero-grid { grid-template-columns: 1fr; gap: 2rem; }
  .portrait { justify-self: start; width: min(100%, 18rem); order: -1; }
  .topics, .cards, .shows, .topics-small { grid-template-columns: 1fr; }
  .cards-feature .card-featured { grid-column: auto; min-height: 0; padding: 1.5rem; padding-top: 6rem; }
  .card-featured .steady-line { top: 1.75rem; left: 1.5rem; width: calc(100% - 3rem); height: 3rem; }
  .hero-line { height: 2.5rem; margin-top: 1.5rem; }
  .quote-band { padding-block: 3rem; }
  .portrait::after { inset: auto -0.75rem -0.75rem auto; }
  .book { grid-template-columns: 1fr; gap: 1.5rem; padding: 1.75rem 1.25rem; border-radius: 0; }
  .book-cover { max-width: 9rem; }
  .about-strip { grid-template-columns: 1fr; gap: 1.25rem; }
  .about-strip img { width: 7rem; height: 7rem; }
  .footer-grid { grid-template-columns: 1fr; }
  .site-header nav { gap: 0.25rem 1rem; }
  .prose { font-size: 1.0625rem; }
  .section { padding-block: 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .card, .topic, .book-art .book-cover, .book-3d { transition: none; }
  .card:hover, .topic:hover { transform: none; }
  .hero-line .steady-line path { animation: none; stroke-dashoffset: 0; }
  .progress { display: none; }
}
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.report-statement .book-quote { border-left-color: currentColor; }
.report-statement .book-quote cite { color: inherit; opacity: 0.85; }

/* Social proof (content/social-proof.json) */
.reader-count { margin: 0.75rem 0 0; font-size: 0.95rem; color: var(--muted); }
.consent-banner { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 50; max-width: 40rem; margin: 0 auto; padding: 1rem 1.25rem; background: var(--surface); color: inherit; border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow); }
.consent-banner p { margin: 0 0 0.75rem; }
.consent-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; }

/* Free-book line under an article's header (jumps to the form at the end). */
.optin-teaser { margin-top: 0; margin-bottom: 1.5rem; padding: .75rem 1rem; border-left: 3px solid var(--teal); background: var(--surface); font-size: .95rem; }
.optin-teaser a { white-space: nowrap; }

/* ---------- Stronger voice (2 Nov 2026): bigger, tighter display type, one ink, centred bands
   with a kicker, a proof row and one clear call to action, after the Claricraft OS showcase. */
:root { --ink: #16202d; }
@media (prefers-color-scheme: dark) { :root { --ink: #eef0ec; } }
h1, h2, h3 { letter-spacing: -0.015em; }
h2 { line-height: 1.1; }

/* Kicker: sentence case, accent colour, like the showcase */
.eyebrow { font-size: 0.95rem; letter-spacing: 0; text-transform: none; font-weight: 600; }

/* Buttons: ink pills, one big size for the main calls */
.button { background: var(--ink); border-color: var(--ink); }
.button.ghost { color: var(--ink); border-color: var(--ink); }
.button.ghost:hover { background: var(--ink); border-color: var(--ink); }
.button-big { padding: 0.95rem 1.6rem; font-size: 1.05rem; }
.button-light { background: #ffffff; border-color: #ffffff; color: #16202d; }
.button-light:hover { background: var(--cream); border-color: var(--cream); color: #16202d; }

/* Hero: centred statement */
.hero { padding-block: 2rem 1rem; }
.hero::before { inset: -30% auto auto 50%; transform: translateX(-50%); width: 70rem; height: 40rem; background: radial-gradient(closest-side, color-mix(in srgb, var(--teal) 18%, transparent), transparent 72%); }
.hero-center { max-width: 56rem; text-align: center; }
.hero-portrait { width: 6.5rem; height: 6.5rem; margin: 0 auto 1.25rem; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px var(--surface), 0 10px 30px rgba(22, 32, 45, 0.18); }
.hero h1 { font-size: clamp(2.7rem, 7.2vw, 5.4rem); line-height: 1.02; letter-spacing: -0.03em; margin: 0 auto 1.25rem; max-width: 15ch; }
.hero .lead { font-size: clamp(1.12rem, 2.2vw, 1.35rem); color: var(--ink); max-width: 46ch; margin: 0 auto; opacity: 0.86; }
.hero .actions { justify-content: center; margin-top: 2rem; }
.hero-micro { margin: 0.9rem 0 0; font-size: 0.92rem; color: var(--muted); }

/* Proof row */
.stats { list-style: none; margin: 2.75rem auto 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 2rem; max-width: 46rem; text-align: left; }
.stats li { border-top: 3px solid var(--sage); padding-top: 0.75rem; color: var(--muted); font-size: 0.95rem; line-height: 1.35; }
.stats b { display: block; font: 700 clamp(2rem, 4.4vw, 2.9rem)/1 var(--display); letter-spacing: -0.03em; color: var(--ink); margin-bottom: 0.35rem; }
.hero-line { height: 3rem; margin-top: 2.5rem; }
.steady-line path { stroke-width: 4; }

/* Centred section heads with a kicker */
.band-head { text-align: center; max-width: 46rem; margin: 0 auto 2.25rem; }
.band-head h2 { margin: 0; font-size: clamp(2rem, 4.6vw, 3.1rem); letter-spacing: -0.025em; }
.band-head .sub { margin: 0.9rem auto 0; color: var(--muted); font-size: 1.1rem; max-width: 48ch; }
.band-more { text-align: center; margin: 2.25rem 0 0; }
.section { padding-block: clamp(3.5rem, 7vw, 5.5rem); }

/* Topic cards: one promise and one link each */
.topic h3 { font-size: 1.5rem; }
.topic p { margin-bottom: 1.25rem; }
.portrait::after { display: none; }

/* The self-check as the page's one strong band */
.check-band { padding: 0; background: var(--deep); color: #e6ecf2; }
.check-band-inner, .wrap.check-band-inner { display: block; max-width: 48rem; padding: clamp(3.5rem, 8vw, 5.5rem) 1.25rem; text-align: center; background: none; border: 0; border-radius: 0; }
.check-band h2 { color: #ffffff; font-size: clamp(2.1rem, 5vw, 3.4rem); letter-spacing: -0.025em; margin: 0 0 1rem; }
.check-band .eyebrow { color: var(--teal); }
.check-band .sub { margin: 0 auto; max-width: 44ch; color: #d3dde7; font-size: 1.15rem; }
.check-band .actions { justify-content: center; margin-top: 2rem; }
.check-band .hero-micro { color: #b9c7d6; }
@media (prefers-color-scheme: dark) { .check-band { background: #1f3247; } }

@media (max-width: 44rem) {
  .hero { padding-block: 1rem 0.5rem; }
  .hero-portrait { width: 5rem; height: 5rem; }
  .hero .actions { flex-direction: column; align-items: stretch; }
  .stats { grid-template-columns: 1fr; gap: 0.9rem; margin-top: 2rem; }
  .stats li { display: flex; align-items: baseline; gap: 0.9rem; }
  .stats b { margin: 0; min-width: 2.2ch; }
  .check-band-inner, .wrap.check-band-inner { padding: 3rem 1.25rem; }
}

/* ---------- Round 2 (2 Nov 2026): one primary call, a bigger proof row, a lighter featured card,
   the stronger header and the same centred treatment on the inner pages. */
.button-light { color: var(--deep); }
.button-light:hover { color: var(--deep); }

/* Header: brand bolder, nav in ink, the current page as a pill */
.site-header nav { gap: 0.25rem 0.5rem; }
.site-header nav a { color: var(--ink); font-weight: 600; padding: 0.35rem 0.85rem; border: 0; border-radius: 999px; }
.site-header nav a:hover { background: color-mix(in srgb, var(--teal) 18%, transparent); }
.site-header nav a[aria-current="page"] { background: var(--ink); color: var(--paper); }

/* Hero */
.hero { padding-block: 2.5rem clamp(2rem, 5vw, 3.5rem); }
.hero-portrait { width: 9rem; height: 9rem; margin-bottom: 1.5rem; box-shadow: 0 0 0 4px var(--surface), 0 0 0 7px var(--ring), 0 14px 36px rgba(22, 32, 45, 0.2); }
.hero-center { max-width: 66rem; }
.hero h1 { max-width: none; font-size: clamp(2.6rem, 6vw, 4.6rem); }
.hero .lead, .hero .stats { margin-inline: auto; }
.hero h1 em { padding-inline: 0.08em; }
.hero-alt { margin: 1rem 0 0; font-size: 1rem; }
.hero-alt a { color: var(--ink); font-weight: 600; text-decoration-color: var(--teal); text-underline-offset: 0.2em; }
.stats { margin-top: 3rem; max-width: 52rem; text-align: center; gap: 1rem 2.5rem; }
.stats li { border-top-width: 4px; padding-top: 1rem; }
.stats b { font-size: clamp(2.5rem, 5vw, 3.5rem); font-weight: 800; margin-bottom: 0.4rem; color: var(--sage); }

/* Topics: cards top-aligned, two article titles each */
.topics { align-items: stretch; }
.topic ul { margin-bottom: 1rem; }
.topic-more { margin: auto 0 0; font-weight: 600; }

/* Quote: one oversized sentence between "Start here" and the self-check */
.quote-band { background: var(--paper); padding-block: clamp(3rem, 7vw, 5rem); border-top: 1px solid var(--rule); }
.quote-band blockquote p { color: var(--ink); font-size: clamp(2rem, 4.6vw, 3.3rem); line-height: 1.12; letter-spacing: -0.02em; max-width: 22ch; margin-inline: auto; }
.quote-band blockquote p::before { color: var(--sage-light); font-size: 5rem; }
.quote-band footer { color: var(--muted); }
@media (prefers-color-scheme: dark) { .quote-band { background: var(--paper); } }

/* Latest writing: a light featured card, three cards in all */
.card-featured { background: var(--surface); border: 1px solid var(--rule); border-left: 5px solid var(--sage); color: var(--ink); min-height: 0; justify-content: center; }
.card-featured .card-meta { color: var(--muted); }
.card-featured h2 a, .card-featured h3 a { color: var(--ink); }
.card-featured h2 a:hover, .card-featured h3 a:hover { color: var(--sage); }
.card-featured p, .card-featured p:last-child { color: var(--muted); }
.card-featured .read-more { color: var(--sage); }
@media (prefers-color-scheme: dark) { .card-featured { background: var(--surface); border-color: var(--rule); border-left-color: var(--sage-light); } }

/* Inner pages: the same centred head as the home bands */
.page-header { text-align: center; padding-top: clamp(2.5rem, 6vw, 4rem); padding-bottom: 1.5rem; }
.page-header h1 { font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1.05; letter-spacing: -0.03em; }
.page-header .standfirst { margin-inline: auto; max-width: 46ch; font-size: clamp(1.1rem, 2vw, 1.25rem); }
/* About (6 Nov 2026): the portrait is a 4:5 photo, not a third circle. */
.page-header .page-portrait { display: block; margin-inline: auto; width: min(20rem, 100%); height: auto; aspect-ratio: 4 / 5; border-radius: 10px; }
.jump { justify-content: center; }

@media (max-width: 44rem) {
  .hero-portrait { width: 6.5rem; height: 6.5rem; }
  .hero h1 br { display: none; }
  .hero .lead { font-size: 1.05rem; }
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin-top: 2rem; }
  .stats li { display: block; text-align: center; font-size: 0.8rem; padding-top: 0.6rem; }
  .stats b { margin: 0 0 0.25rem; min-width: 0; font-size: 2.2rem; }
  .site-header nav a { padding: 0.3rem 0.65rem; font-size: 0.95rem; }
}

/* Round 3 (2 Nov 2026): heavier figures, a highlighted quote, a one-row mobile nav, denser bands. */
.hero h1 { font-size: clamp(2.6rem, 6.6vw, 5.2rem); line-height: 1; }
.stats li { border-top: 1px solid var(--rule); }
.stats b { font-size: clamp(3rem, 6vw, 4.5rem); color: var(--ink); }
.quote-band blockquote p { font-size: clamp(2.25rem, 5.2vw, 3.8rem); }
.quote-band blockquote em { font-style: normal; background: linear-gradient(transparent 62%, color-mix(in srgb, var(--cream) 70%, transparent) 62%, color-mix(in srgb, var(--cream) 70%, transparent) 92%, transparent 92%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.section, .quote-band { padding-block: clamp(3rem, 6vw, 4.5rem); }
.topic { height: 100%; }
.hero-portrait { width: 11rem; height: 11rem; }
@media (max-width: 44rem) { .hero-portrait { width: 7rem; height: 7rem; } }
@media (max-width: 44rem) {
  .hero h1 { font-size: clamp(2.3rem, 10.5vw, 3rem); }
  .site-header nav { flex-wrap: nowrap; overflow-x: auto; gap: 0.25rem; width: 100%; scrollbar-width: none; }
  .site-header nav a { white-space: nowrap; padding: 0.3rem 0.6rem; }
  .stats b { font-size: 2.4rem; }
}
.quote-band blockquote p { font-size: clamp(1.9rem, 4vw, 2.9rem); }
.post-meta .badge { background: none; border: 0; padding: 0; color: var(--muted); font-size: 0.85rem; font-style: italic; }

/* Round 4 (2 Nov 2026): inner pages carry the home page's voice. */
.about-stats .stats { margin-top: 0.5rem; margin-bottom: 1rem; }
.page-header:has(.page-portrait) .standfirst { color: var(--ink); font: 700 clamp(1.4rem, 2.8vw, 1.9rem)/1.25 var(--display); letter-spacing: -0.01em; max-width: 30ch; }
.section-head .section-title { font-size: clamp(1.8rem, 3.6vw, 2.5rem); letter-spacing: -0.02em; }
.pill-link { padding: 0.4rem 0.95rem; border-radius: 999px; border: 1px solid var(--rule); background: var(--surface); color: var(--ink); font-weight: 600; font-size: 0.92rem; text-decoration: none; }
.pill-link:hover { border-color: var(--sage); color: var(--sage); }
.free-book .book h1 { font-size: clamp(2.3rem, 5vw, 3.6rem); line-height: 1.05; letter-spacing: -0.03em; }
.free-book .book .actions { margin-top: 1.5rem; }
.badge { background: none; border: 1px solid var(--rule); color: var(--muted); font-weight: 500; }
.about-stats { margin-bottom: 2rem; }

/* Round 5 (2 Nov 2026): sticky header, calls to action on every page, no orphan cards, a calmer self-check form. */
.site-header { position: sticky; top: 0; z-index: 15; background: color-mix(in srgb, var(--paper) 86%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding-block: 0.85rem; border-bottom: 1px solid color-mix(in srgb, var(--rule) 60%, transparent); }
.card-featured { justify-content: flex-start; }
.about-stats { text-align: center; }
.about-stats .actions { justify-content: center; margin-top: 2rem; }
.stats li { font-size: 0.95rem; }
.stats b { border: 0; }
/* Writing: a lone article spans the row; four articles sit two by two */
.topic-group .cards > .card:only-child { grid-column: 1 / -1; }
.topic-group .cards:has(> .card:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Free book: the reading list centres its last row */
#reading .cards { display: flex; flex-wrap: wrap; justify-content: center; }
#reading .cards > .card { flex: 0 1 calc((100% - 2.5rem) / 3); }
.free-book .book .soon { margin-top: 1.25rem; }
.free-book .book-3d { box-shadow: 22px 34px 60px -14px rgba(22, 32, 45, 0.4), 4px 6px 12px rgba(22, 32, 45, 0.18); }
/* Self-check form */
.pick { padding: 0.85rem 1rem; font-size: 1rem; border-radius: 12px; }
.pick:has(input:checked) { background: var(--cream-soft); border-color: var(--sage); }
.assess-bar { height: 8px; }
input[data-import] { font-size: 0.9rem; color: var(--muted); }
input[data-import]::file-selector-button { margin-right: 0.6rem; padding: 0.35rem 0.85rem; border-radius: 999px; border: 1px solid var(--rule); background: var(--surface); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
/* Article: ink contents list, key lines as pull quotes */
.toc a { color: var(--ink); }
.prose blockquote { font: 700 clamp(1.3rem, 2.4vw, 1.55rem)/1.3 var(--display); border-left: 4px solid var(--sage); padding-left: 1.25rem; margin-inline: 0; color: var(--ink); }
@media (max-width: 44rem) {
  #reading .cards > .card { flex-basis: 100%; }
  .topic-group .cards:has(> .card:nth-child(4):last-child) { grid-template-columns: 1fr; }
}
@media (prefers-color-scheme: dark) { .site-header { background: color-mix(in srgb, var(--paper) 86%, transparent); } }
@media print { .site-header { position: static; } }
/* Round 5, second reviewer */
.topic-group { padding-block: 1.5rem 2.5rem; }
.topic-group .section-head { align-items: center; margin-bottom: 1rem; }
.topic-group .section-title, .section-head .section-title { font-size: clamp(1.5rem, 2.6vw, 1.9rem); }
span.pill-link { color: var(--muted); font-weight: 500; }
.jump a { border: 0; background: none; padding: 0.2rem 0.5rem; color: var(--sage); font-weight: 600; }
.jump a:hover { text-decoration: underline; }
.card h3 { font-size: 1.4rem; letter-spacing: -0.015em; }
.check-header { text-align: center; }
.check-header .standfirst, .check-header .hero-facts { margin-inline: auto; justify-content: center; }
.check-header h1 { font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1.05; letter-spacing: -0.03em; }
.assess-intro { font-size: 0.95rem; color: var(--muted); }
.assess-nav .button, [data-next] { font-size: 1.05rem; padding: 0.9rem 1.8rem; }
.free-book .band-head h2 { font-size: clamp(1.8rem, 3.4vw, 2.4rem); }
.toc-title { text-transform: none; letter-spacing: 0; font-size: 0.95rem; }
.about-stats { margin-bottom: 1.25rem; }
@media (max-width: 44rem) {
  .hero h1 { font-size: clamp(2.5rem, 11vw, 3.2rem); }
  .stats b { font-size: 2rem; }
}

/* Round 6 (2 Nov 2026) */
:root { --ink: #0f1823; }
@media (prefers-color-scheme: dark) { :root { --ink: #eef0ec; } }
.card-featured { justify-content: space-between; }
.card-featured h3 { font-size: clamp(1.75rem, 3vw, 2.4rem); }
.card-featured .read-more { margin-top: auto; padding-top: 1.25rem; }
.stats li { border-top: 2px solid var(--ink); }
.topic-group .cards > .card:only-child p { max-width: 60ch; }
.assess-intro { background: transparent; border-left: 3px solid var(--sage); border-radius: 0; padding: 0.25rem 0 0.25rem 2rem; font-size: 0.9rem; }
.pick:hover { border-color: var(--sage); }
.prose p { margin-block: 0 1.3rem; }
/* Round 6, both reviewers */
.cards-feature { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards-feature .card-featured { grid-column: 1 / -1; grid-row: auto; }
.card-featured > p:not(.card-meta):not(.read-more) { max-width: 44rem; }
.stats .short { display: none; }
.about-body { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--rule); }
.topic-group .cards:has(> .card:only-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.topic-group .cards > .card:only-child { grid-column: span 2; }
.assess-nav .button { min-width: 12rem; }
@media (max-width: 44rem) {
  .stats .long { display: none; }
  .stats .short { display: inline; }
  .cards-feature { grid-template-columns: 1fr; }
  .topic-group .cards:has(> .card:only-child) { grid-template-columns: 1fr; }
  .topic-group .cards > .card:only-child { grid-column: auto; }
}
/* Round 7 (2 Nov 2026) */
.quote-band blockquote p { font-size: clamp(2.2rem, 5vw, 3.6rem); }
.section-dark { background: #1d2f43; color: #dfe6ee; }
.section-dark .band-head h2 { color: #ffffff; }
.section-dark .eyebrow { color: var(--teal); }
.section-dark .button.ghost { color: #ffffff; border-color: #ffffff; }
.section-dark .button.ghost:hover { background: #ffffff; color: var(--deep); }
@media (prefers-color-scheme: dark) { .section-dark { background: #1f3247; } }
.book h2 { font-size: clamp(2rem, 4.2vw, 3rem); line-height: 1.08; letter-spacing: -0.025em; }
.free-book .book h1 { font-size: clamp(2.4rem, 5vw, 3.75rem); }
.free-book .book .soon { border: 1px solid var(--sage); }
.jump a { text-decoration: underline; text-underline-offset: 0.3em; text-decoration-color: color-mix(in srgb, var(--sage) 45%, transparent); }
.topic-group .cards:has(> .card:only-child) { grid-template-columns: 1fr; }
.topic-group .cards > .card:only-child { grid-column: auto; }
.assess-intro { font-size: 0.95rem; color: var(--ink); }
.pick:has(input:checked) { font-weight: 600; }
@media (min-width: 64rem) { .post-layout.has-toc .toc { top: 6rem; } }
/* Round 7, second reviewer */
.book h2 { font-size: clamp(1.9rem, 3.8vw, 2.6rem); }
.book .actions, .free-book .book .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; }
.book .actions .soon, .free-book .book .actions .soon { margin: 0; }
.pick input { width: 1.1rem; height: 1.1rem; accent-color: var(--sage); }
.check-header .hero-facts .badge { border: 0; padding: 0; background: none; font-size: inherit; color: var(--muted); }
.how-it-works .report-small { margin-top: 1rem; }
@media (max-width: 44rem) {
  .topic-group .card p:last-child { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .free-book .book h1 { font-size: clamp(2rem, 9vw, 2.4rem); }
}
/* Round 8 (2 Nov 2026) */
.site-footer { border-top: 1px solid rgba(255, 255, 255, 0.12); }
.stats li { color: color-mix(in srgb, var(--ink) 78%, transparent); }
.quote-band footer { font-size: 0.95rem; }
.post-header h1 { font-size: clamp(2.4rem, 5vw, 3.5rem); line-height: 1.05; letter-spacing: -0.025em; text-wrap: balance; }
.sources > details > summary { cursor: pointer; font: 700 1.25rem/1.3 var(--display); color: var(--ink); }
.writing-stats .stats { margin-top: 1.5rem; }
/* Round 8, second reviewer */
.check fieldset legend { font: 700 1.1rem/1.3 var(--display); letter-spacing: -0.01em; color: var(--ink); }
.assess-intro { list-style: none; }
.assess-intro li { margin: 0.35rem 0; }
.free-book #reading .band-head { text-align: left; margin-left: 0; }
.free-book #reading .band-head .sub { margin-left: 0; }
.writing-stats { margin-bottom: 2rem; }
.writing-stats + .wrap-narrow .jump { padding-top: 0.5rem; }
.topic-group .cards > .card:only-child { max-width: none; }
.free-book #reading .cards > .card { display: flex; flex-direction: column; }
.assess-nav:has(> [hidden]:first-child) { justify-content: center; }
.assess-nav:has(> [hidden]:first-child) > [hidden] { display: none; }

/* Heading face (2 Nov 2026): Bricolage Grotesque, SIL Open Font License (fonts/bricolage-grotesque-OFL.txt),
   self-hosted. It has the extra-bold weight that Clockwise lacks; headings use 800, small heads 700. */
@font-face { font-family: "Bricolage Grotesque"; src: url("fonts/bricolage-grotesque-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("fonts/bricolage-grotesque-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
:root { --display: "Bricolage Grotesque", "Clockwise", "Avenir Next", "Segoe UI", system-ui, sans-serif; }
h1, h2, .stats b, .quote-band blockquote p { font-weight: 800; }
h1, h2 { letter-spacing: -0.025em; }
.hero h1 { letter-spacing: -0.035em; }
.about-body > blockquote:first-child { text-align: center; border: 0; padding: 0; margin: 0 auto 2.5rem; max-width: 30ch; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; letter-spacing: -0.02em; }
/* Round 11 (2 Nov 2026) */
.hero h1 { line-height: 1.06; }
.hero h1 em { background: linear-gradient(transparent 66%, color-mix(in srgb, var(--cream) 70%, transparent) 66%, color-mix(in srgb, var(--cream) 70%, transparent) 90%, transparent 90%); }
.check-q::before { font-weight: 800; color: var(--sage); margin-right: 0.35em; text-decoration: none; }
.check-header .standfirst { max-width: 38rem; font-size: 1.1rem; }
.assess-bar { height: 10px; }
.topic-group .cards > .card:only-child { max-width: 66%; }
.post-meta .badge { font-style: normal; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid var(--rule); border-radius: 999px; padding: 0.15rem 0.6rem; }
@media (max-width: 44rem) {
  .topic-group .cards > .card:only-child { max-width: none; }
  .topic-group .card p:last-child { -webkit-line-clamp: 3; }
}
.about-body > blockquote:first-child { background: none; }
.quote-band blockquote p { max-width: 18ch; }
@media (prefers-color-scheme: dark) { .check-band, .section-dark { background: #1d2f43; } }
.check-q::before { font-family: var(--sans); font-weight: 700; letter-spacing: 0; font-variant-numeric: lining-nums; }

/* ---------- Audit fixes (5 Nov 2026): Isak's UI/UX audit of the preview. */
/* C4: the light button keeps dark ink in both colour schemes (--deep turns light in dark mode). */
.button-light, .button-light:hover { color: #16202d; }

/* C3: the self-check's Back / Next row wraps on phones; messages sit above the buttons. */
@media (max-width: 30rem) {
  .assess-nav { flex-wrap: wrap; gap: 0.75rem; }
  .assess-nav .button { flex: 1 1 0; min-width: 0; padding-inline: 1rem; }
  .assess-nav .assess-progress { order: -1; flex: 1 0 100%; text-align: center; margin: 0; }
  .assess-nav:has(> [hidden]:first-child) .button { flex: 1 1 100%; }
}
.assess-restart { margin: 0.75rem 0 0; text-align: center; }
.link-button { background: none; border: 0; padding: 0.6rem 0.5rem; min-height: 44px; font: inherit; font-size: 0.92rem; color: var(--muted); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
.link-button:hover, .link-button[data-armed] { color: var(--ink); }
.link-button[data-armed], .button[data-armed] { font-weight: 700; }
.report-banner[data-resume] .report-tools { margin-bottom: 0; }
.fit-thanks { display: inline-block; padding: 0.35rem 0.8rem; border-radius: 999px; background: color-mix(in srgb, var(--teal) 18%, transparent); color: var(--ink); font-weight: 600; }
.fit-thanks::before { content: "✓ "; }
.report-actions { margin-top: 2rem; }
.report-actions > p { margin: 0 0 0.75rem; }

.report-more .report-tools { margin-top: 0.5rem; }

/* L1: long addresses wrap instead of pushing the page sideways (tablet footer). */
.site-footer a, .site-footer p { overflow-wrap: anywhere; }

/* M8 + L1: on phones the header scrolls away instead of staying on top, and the nav wraps so
   every link is visible at 320px. */
@media (max-width: 44rem) {
  .site-header { position: static; padding-block: 0.6rem; }
  .site-header nav { flex-wrap: wrap; overflow: visible; gap: 0.25rem; }
  .site-header nav a { padding: 0.55rem 0.7rem; }
}

/* L2: bigger tap targets for small text links. */
.hero-alt a, .topic-more a, .footer-base a, .footer-grid nav a, .site-footer p a, .toc a, .jump a { display: inline-block; padding-block: 0.4rem; }
.toc li { margin: 0; }
@media (max-width: 44rem) {
  .hero-alt a, .topic-more a, .footer-base a, .footer-grid nav a, .site-footer p a, .toc a, .jump a { padding-block: 0.6rem; }
}

/* M5: one line tying the energy headline to the self-check. */
.hero-bridge { margin: 1.5rem 0 0.25rem; color: var(--muted); font-size: 1.05rem; }

/* M6: "Coming soon" reads as a label, not a button. */
.book .soon { background: none; border: 0; padding: 0; margin-right: 1rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.8rem; }

/* L6: the home book card keeps side margins on phones. */
@media (max-width: 44rem) { .wrap.book { margin-inline: 1rem; width: auto; } }

/* Re-audit (5 Nov): eyebrows reach 4.5:1 on every light background. */
@media (prefers-color-scheme: light) { .eyebrow { color: #3d6559; } .section-dark .eyebrow, .check-band .eyebrow { color: var(--teal); } }

/* ---------- The mark (5 Nov 2026): "Then and again", the energy line with Isak's initials in it.
   Old days as dots at the old height (the last is the dot of an i), the drop and slow climb (a V)
   to today, then open dots back to exactly the old height. The dashed old pace stops short.
   The hero draws it once; everything else is still, and so is the hero for reduced motion. */
:root { --line: #b4713f; --line-soft: color-mix(in srgb, var(--line) 60%, transparent); }
@media (prefers-color-scheme: dark) { :root { --line: #e7bea0; --line-soft: color-mix(in srgb, #e7bea0 45%, transparent); } }
.energy-line { display: block; overflow: visible; }
.energy-line path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.energy-line .el-path { stroke: var(--line); stroke-width: 4.5; }
.energy-line path.el-old { stroke: var(--line); stroke-opacity: 0.5; stroke-width: 3; stroke-dasharray: 6 10; }
.energy-line circle.el-old, .energy-line .el-dot, .energy-line .el-open { fill: var(--line); }
.energy-line.compact .el-path { stroke-width: 6; }
.steady-line { display: none; }

/* Hero: one 4.4 s draw, reviewed frame by frame by two models. Old days, a still beat, a fast fall,
   a slow climb, today growing out of the line's tip, the open dots a little slower each time, a
   pause, then the last dot lands level with the first. Backwards fill only, so the resting mark is
   the plain SVG. The line's dasharray lives only in the keyframes; the first segment is the drop
   and the bottom turn (57.8 of 204 path units), the second the climb. */
.hero-mark { width: min(22rem, 78%); height: auto; margin: 0.25rem auto 1.5rem; }
@media (prefers-reduced-motion: no-preference) {
  .hero-mark .el-dot { transform-box: fill-box; transform-origin: center; }
  .hero-mark circle.el-old { animation: el-fade 420ms ease-out backwards; }
  .hero-mark path.el-old { animation: el-fade 800ms 680ms ease backwards; }
  .hero-mark .el-path { animation: el-draw 1720ms 680ms linear backwards; }
  .hero-mark .el-dot { animation: el-grow 460ms 2400ms cubic-bezier(0.2, 0.7, 0.3, 1) backwards, el-fade 1ms 2400ms backwards; }
  .hero-mark .el-open circle { animation: el-fade 200ms ease-out backwards; }
  .hero-mark .el-open circle:nth-child(1) { animation-delay: 2940ms; }
  .hero-mark .el-open circle:nth-child(2) { animation-delay: 3030ms; }
  .hero-mark .el-open circle:nth-child(3) { animation-delay: 3130ms; }
  .hero-mark .el-open circle:nth-child(4) { animation-delay: 3240ms; }
  .hero-mark .el-open circle:nth-child(5) { animation-delay: 3360ms; }
  .hero-mark .el-open circle:nth-child(6) { animation-delay: 3490ms; }
  .hero-mark .el-open circle:nth-child(7) { animation-delay: 4020ms; animation-duration: 420ms; }
}
@keyframes el-draw {
  0% { stroke-dasharray: 1 2; stroke-dashoffset: 1; animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.6); }
  18.6% { stroke-dasharray: 1 2; stroke-dashoffset: 0.7165; animation-timing-function: cubic-bezier(0.3, 0.22, 0.4, 0.92); }
  100% { stroke-dasharray: 1 2; stroke-dashoffset: 0; }
}
@keyframes el-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes el-grow { from { transform: scale(0.32); } to { transform: none; } }

/* Footer: the same mark, quiet, centred over the footer. */
.footer-line { display: flex; justify-content: center; padding-top: 2.5rem; height: auto; }
.footer-mark { width: min(16rem, 60%); height: auto; }
.footer-mark .el-path, .footer-mark circle.el-old, .footer-mark .el-dot, .footer-mark .el-open { opacity: 0.85; }
.site-footer { --line: #e7bea0; --line-soft: color-mix(in srgb, #e7bea0 45%, transparent); }

/* Band heads: a small mark above the kicker, as a section divider. */
.band-head::before { content: ""; display: block; width: 1.9rem; height: 1.45rem; margin: 0 auto 0.9rem; background: var(--line); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='3.2 11.2 57.6 43.84'%3E%3Ccircle cx='10' cy='18' r='3.8'/%3E%3Cpath d='M12.86 27.16 L18.96 46.66 Q20.2 50.6 23 48 C26.5 45.65 32.5 39.4 36 36' fill='none' stroke='black' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='36' cy='36' r='5.6'/%3E%3Ccircle cx='45.64' cy='26.36' r='3.8'/%3E%3Ccircle cx='54' cy='18' r='3.8'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='3.2 11.2 57.6 43.84'%3E%3Ccircle cx='10' cy='18' r='3.8'/%3E%3Cpath d='M12.86 27.16 L18.96 46.66 Q20.2 50.6 23 48 C26.5 45.65 32.5 39.4 36 36' fill='none' stroke='black' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='36' cy='36' r='5.6'/%3E%3Ccircle cx='45.64' cy='26.36' r='3.8'/%3E%3Ccircle cx='54' cy='18' r='3.8'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Reading progress on articles: the line's colour, with its point travelling at the head. */
.progress { height: 3px; background: var(--line); transform: none; width: 0; border-radius: 0 3px 3px 0; }
.progress::after { content: ""; position: absolute; right: -5px; top: -3.5px; width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .progress { display: block; animation: el-read linear both; animation-timeline: scroll(root); }
  }
}
@keyframes el-read { from { width: 0; } to { width: 100%; } }

/* Self-check progress: dashed track (the old pace), solid line with its point as you go. */
.assess-bar { background: none; height: 10px; position: relative; overflow: visible; }
.assess-bar::before { content: ""; position: absolute; inset: 4px 0 auto; border-top: 2px dashed var(--line-soft); }
.assess-bar-fill { position: relative; height: 3px; margin-top: 3.5px; background: var(--line); border-radius: 3px; transition: width 0.6s cubic-bezier(0.45, 0, 0.25, 1); }
.assess-bar-fill::after { content: ""; position: absolute; right: -5px; top: -3.5px; width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
@media (prefers-reduced-motion: reduce) { .assess-bar-fill { transition: none; } }

/* ---------- Energy check-in (5 Nov 2026, energy.js). The answer sets data-energy on <html>. */
.energy-check { margin: 1.75rem auto 0.5rem; max-width: 34rem; padding: 1.25rem 1.25rem 1rem; border-radius: 20px; background: var(--surface); border: 1px solid var(--rule); }
.energy-q { margin: 0 0 0.85rem; font-family: var(--display); font-weight: 700; font-size: 1.25rem; color: var(--ink); }
.energy-options, .energy-menu { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.energy-options button, .energy-menu button { font: inherit; font-weight: 600; font-size: 0.98rem; min-height: 44px; padding: 0.55rem 1.1rem; border-radius: 999px; border: 1.5px solid var(--rule); background: var(--paper); color: var(--ink); cursor: pointer; transition: background 0.3s ease, border-color 0.3s ease; }
.energy-options button:hover, .energy-menu button:hover { border-color: var(--line); }
.energy-options button[aria-pressed="true"], .energy-menu button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.energy-note { margin: 0.75rem 0 0; font-size: 0.85rem; color: var(--muted); }
html[data-energy] .energy-check { padding-block: 0.9rem 0.75rem; }
html[data-energy] .energy-check .energy-note { display: none; }

/* Header switch: the mini mark and the current answer; a small menu to change it. */
.energy-switch { position: relative; }
.energy-switch[hidden] { display: none; }
.energy-toggle { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 40px; padding: 0.3rem 0.8rem; font: inherit; font-size: 0.88rem; font-weight: 600; color: var(--muted); background: none; border: 1px solid var(--rule); border-radius: 999px; cursor: pointer; }
.energy-toggle:hover, .energy-toggle[aria-expanded="true"] { color: var(--ink); border-color: var(--line); }
.mini-mark { width: 1.1rem; height: auto; }
.energy-menu { position: absolute; right: 0; top: calc(100% + 0.5rem); z-index: 30; flex-direction: column; align-items: stretch; width: 13rem; padding: 0.5rem; border-radius: 16px; background: var(--paper); border: 1px solid var(--rule); box-shadow: 0 12px 32px rgba(15, 24, 35, 0.14); }
.energy-menu[hidden] { display: none; }

/* Low energy on the home page: one sentence, one suggestion, one button; the rest folds away. */
.energy-low-only { display: none; }
html[data-energy="low"]:not([data-energy-all]) .energy-low-only { display: block; margin-top: 1.25rem; }
html[data-energy="low"]:not([data-energy-all]) .home-more,
html[data-energy="low"]:not([data-energy-all]) .hero .lead > p + p,
html[data-energy="low"]:not([data-energy-all]) .hero-bridge,
html[data-energy="low"]:not([data-energy-all]) .hero .energy-low-only ~ .actions,
html[data-energy="low"]:not([data-energy-all]) .hero-alt,
html[data-energy="low"]:not([data-energy-all]) .hero .stats { display: none; }
.energy-low-lead { margin: 0 auto 0.5rem; max-width: 30rem; font-size: 1.15rem; color: var(--ink); }
.energy-low-meta { margin: 0.5rem 0 0; color: var(--muted); font-size: 0.92rem; }
/* In the middle: the page, slightly trimmed. */
html[data-energy="mid"] .hero .stats, html[data-energy="mid"] .quote-band { display: none; }

/* Articles on a low day: larger, calmer text and a shortcut to the one thing to try. */
html[data-energy="low"] .post .prose { font-size: 1.08em; line-height: 1.75; }
.energy-shortcut { margin: 1rem 0 0; padding: 0.7rem 1rem; border-radius: 12px; background: color-mix(in srgb, var(--line) 14%, transparent); font-size: 0.98rem; }
html[data-energy="low"] .progress { display: none; }

/* Self-check: the lengths a low day folds away. */
.assess .choice label[hidden] { display: none; }

@media (max-width: 44rem) {
  .energy-check { padding: 1rem 0.9rem 0.85rem; }
  .energy-options button { flex: 1 1 auto; padding-inline: 0.8rem; }
  .energy-toggle span { font-size: 0.85rem; }
}
@media print { .energy-check, .energy-switch, .energy-shortcut { display: none; } }
/* Header with the energy switch: nav stays right on wide screens; on phones the switch sits on
   the brand row and the nav takes its own row. */
.header-inner .energy-switch { margin-left: 0.5rem; }
.site-header nav { margin-left: auto; }
@media (max-width: 44rem) {
  .header-inner .brand { order: 1; }
  .header-inner .energy-switch { order: 2; margin-left: auto; }
  .site-header nav { order: 3; margin-left: 0; width: 100%; }
  .energy-toggle { min-height: 36px; padding: 0.25rem 0.65rem; }
}
@media (max-width: 23rem) { .energy-toggle span { display: none; } .energy-toggle { padding-inline: 0.5rem; } }

/* Re-audit B (5 Nov): contrast and tap targets. */
@media (prefers-color-scheme: light) { .book .soon { color: #4a5760; } }
@media (prefers-color-scheme: dark) {
  .check-band .eyebrow { color: #8fc2b3; }
  .button.ghost[aria-pressed="true"] { color: #0f1823; background: var(--teal); border-color: var(--teal); }
}
.post-header .eyebrow a, .post-meta a, .topic li a, .author-box a, .about-body a, .prose p a { padding-block: 0.3rem; }
.post-header .eyebrow a, .post-meta a, .topic li a, .author-box a { display: inline-block; }

/* Final-review fixes (5 Nov 2026): the check-in sits under the headline; a low day is calm and
   short from the first screen; a middle day is visibly trimmed. */
.energy-check { margin-top: 0.5rem; margin-bottom: 1.25rem; }
html[data-energy="low"]:not([data-energy-all]) .hero .lead { display: none; }
html[data-energy="low"]:not([data-energy-all]) .hero-portrait { width: 4.5rem; height: 4.5rem; margin-bottom: 0.75rem; }
html[data-energy="low"] .hero-mark *, html[data-energy="low"] .hero-mark { animation: none !important; stroke-dashoffset: 0 !important; opacity: 1 !important; transform: none !important; }
html[data-energy="mid"] .hero .lead > p + p, html[data-energy="mid"] .hero-alt { display: none; }
html[data-energy="mid"] .topic ul li + li { display: none; }
.energy-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* The opt-in AI report box and the report it returns (assets/ai-report.js). */
.report-ai-full { margin: 2rem 0; padding: 1.25rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); }
.report-ai-full h3 { margin-top: 0; }
.report-ai-full .consent-line label { display: flex; gap: 0.6rem; align-items: flex-start; min-height: 44px; }
.report-ai-full .consent-line input { width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; flex: none; }
.report-ai-text { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.report-ai-text h4 { margin: 1.75rem 0 0.5rem; font-family: var(--display); font-size: 1.15rem; font-weight: 700; }