/* The 2026-11-01 visual refresh, moved to the warm paper theme on 2026-11-03
   (branch redesign-2026-11-03-paper). Linked last on every public page, so it
   wins over each page's inline style. Colours and fonts come from site.css.
   Nothing here changes content, URLs or tool logic; refresh.js adds the motion. */

/* ---------- Paper grain, printed into the ground (never over the text) ---------- */
body::before { content: none !important; display: none !important; }
body {
    background-color: var(--bg-deep);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .18 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Readability ---------- */
body { color: var(--white); font-size: var(--text-base); line-height: var(--lh-body); }
h1, h2, h3, h4, .section-heading, .section-title { color: var(--ink); font-family: var(--font-display); font-optical-sizing: auto; }
h1 { letter-spacing: -.022em !important; font-weight: 600; }
h2, .section-heading, .section-title { letter-spacing: -.018em !important; font-weight: 560; }
h3, h4 { letter-spacing: -.01em !important; }
main p, section p, main li, section li { max-width: 68ch; }
main p, section p, section li, details p, .faq-answer { line-height: 1.6; text-wrap: pretty; }
h1, h2, h3, h4, .section-heading, .section-title, .vp-home .principles strong, .hub-topic-name { text-wrap: balance; }
.hub-topic-line, .hub-tool-line, .hub-step-line, .video-title, .hub-rel-title, .hub-video-title { text-wrap: pretty; }
.section-heading, .section-title, .content-section h2, section > h2 { font-size: clamp(32px, 4.2vw, 52px); line-height: 1.12; }
.section-body, .hero-description, .vp-home .hero-description, .hub-lead, .vp-hub .hub-lead { color: var(--white-dim); font-size: clamp(17px, 1.5vw, 19px); line-height: 1.6; }
.nav-wordmark { font-weight: 600; letter-spacing: -.01em; }
[id$="Value"], [id^="result"], .results-score, .score-number { font-variant-numeric: lining-nums tabular-nums; }

/* Long-standing text blocks in generated pages keep the same measure. */
.vp-hub .hub-prose p, .tool-tile p, .hub-tool-line, .hub-topic-line, .hub-step-line { color: var(--white-dim); font-size: 17px; line-height: 1.6; }

/* Long reading text on the tool, About and lesson pages. Their inline rules set
   smaller, dimmer copy, so this names them. */
.seo-content p, .seo-content li, .seo-content .faq-a, .about-section p, .author-body p, .understand p, main article p, .panel .explanation, .vp-home .tool-tile p { color: var(--white); font-size: 17px; line-height: 1.6; }
.seo-content h2, .about-section h2 { font-size: clamp(26px, 2.8vw, 34px); line-height: 1.2; margin-top: 56px; }
.seo-content h3 { font-size: 20px; }
.hub-related .hub-related-foot { font-size: 16px; }

/* ---------- Section rhythm ---------- */
.vp-home .section, .vp-hub .section { padding-block: clamp(72px, 9vw, 128px); }
.vp-home .latest-section { padding-top: 32px; }
.vp-home .section-top { margin-bottom: clamp(36px, 4vw, 56px); }
.vp-home .eyebrow, .vp-home .section-label { color: var(--gold); }

/* ---------- Fewer borders ---------- */
.nav, .nav.scrolled { background: rgba(247, 241, 227, .92); border-bottom: 1.5px solid rgba(43, 39, 32, .15); }
.vp-home .tool-tile, .hub-tool, .hub-step-card, .framework-card, .tool-card:not(.video-card) { border-color: transparent; background: var(--bg-card); }
.vp-home .tile-visual { border-color: transparent; background: var(--bg-primary); }
.vp-home .compact-tool { border: 0; border-top: 1px solid var(--border-subtle); border-radius: 0; padding: 22px 0; }
.vp-home .compact-tool:hover { color: var(--gold-light); }
.vp-home .principles { border-block: 0; padding-block: 8px; }
.vp-home .principles .wrap { border-block: 1px solid var(--border-subtle); padding-block: 22px; }
.vp-home .principles strong { font: 500 clamp(19px, 2vw, 25px)/1.3 var(--font-display); color: var(--ink); }
.vp-home .lesson { border-color: transparent; background: var(--bg-card); box-shadow: 0 1px 0 rgba(0, 0, 0, .05), 0 14px 30px -18px rgba(60, 40, 10, .35); }
.vp-home .closing p { font-weight: 500; }

/* ---------- One big featured video ---------- */
.vp-home .latest-grid { grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); gap: 20px 40px; }
.vp-home .latest-grid > .video-card:first-child .video-thumb { border: 0; border-radius: 12px; }
.vp-home .latest-grid > .video-card:first-child .video-title { font-size: clamp(24px, 2.8vw, 36px); line-height: 1.18; font-weight: 560; letter-spacing: -.015em; }
.vp-home .latest-grid > .video-card:not(:first-child) { grid-template-columns: 148px minmax(0, 1fr); background: none; border-color: transparent; border-bottom-color: var(--border-subtle); border-radius: 0; }
.vp-home .latest-grid > .video-card:not(:first-child) .video-thumb { border: 0; }
.vp-home .latest-grid > .video-card:not(:first-child) .video-title { font-size: 16px; line-height: 1.4; }
.vp-home .video-card, .vp-home .video-card.tool-card { background: none; }
.vp-home .latest-grid > .video-card:first-child { border-color: transparent; }

/* ---------- Topics as a list, not a third card grid ---------- */
.vp-home .hub-topics { display: block; border-bottom: 1px solid var(--border-subtle); }
.vp-home .hub-topic { display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1.4fr) auto; align-items: start; column-gap: 24px; padding: 26px 0; border: 0; border-top: 1px solid var(--border-subtle); border-radius: 0; background: none; overflow: visible; transition: padding-left 320ms var(--ease-out), color 200ms; }
.vp-home .hub-topic:hover { transform: none; padding-left: 14px; }
.vp-home .hub-topic-name { margin: 0; font-size: clamp(24px, 2.6vw, 34px); font-weight: 560; letter-spacing: -.015em; }
.vp-home .hub-topic:hover .hub-topic-name { color: var(--gold-light); }
.vp-home .hub-topic-line { margin: 0; }
.vp-home .hub-topic-meta { grid-column: 3; margin: 6px 0 0; color: var(--gold); }
.vp-home .hub-topic-thumbs { grid-column: 4; grid-row: 1 / span 2; width: 190px; margin: 0; padding: 0; }
.vp-home .hub-topic-thumbs img { box-shadow: -6px 0 14px rgba(60, 40, 10, .18); border-radius: 4px; border: 1.5px solid var(--ink); }
.vp-home .hub-topic-thumbs img:nth-child(2), .vp-home .hub-topic-thumbs img:nth-child(3) { transform: none; }
.vp-home .hub-index { grid-row: 1 / span 2; padding-top: .95em; }
.vp-home .hub-topic-name { grid-row: 1 / span 2; }
.hub-rel-video img { align-self: start; height: auto; }

/* ---------- Scout gets the full width ---------- */
.vp-home .mission-section { background: var(--bg-primary); border-block: 0; padding-block: clamp(80px, 10vw, 136px); }
.vp-home .buddy-card, .vp-home .quest-log { border-color: transparent; background: var(--bg-card); }
@media (min-width: 801px) { .vp-home .buddy-card { position: sticky; top: 100px; } }
.vp-home .hub-subscribe p { margin-inline: auto; }

/* ---------- Hand-drawn marks ---------- */
.ink { position: relative; white-space: nowrap; }
.nowrap { white-space: nowrap; }
.ink-line { position: absolute; left: -2%; bottom: -.14em; width: 104%; height: .3em; overflow: visible; pointer-events: none; }
.ink-line path { fill: none; stroke: var(--gold); stroke-width: 3.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.motion-ok .ink-line { clip-path: inset(-40% 100% -40% 0); transition: clip-path 1s var(--ease-out) .25s; }
.motion-ok .ink.drawn .ink-line { clip-path: inset(-40% -2% -40% 0); }
.vp-home .delay-control { position: relative; }
.ink-arrow { position: absolute; left: 132px; top: 14px; width: 46px; height: 36px; overflow: visible; pointer-events: none; }
.ink-arrow path { fill: none; stroke: var(--gold); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.vp-home .lesson-value { letter-spacing: -.02em; }
.vp-home .lesson-result strong { background: linear-gradient(transparent 68%, rgba(201, 168, 76, .28) 68%); padding-inline: 2px; }

/* ---------- Scroll reveals (classes only ever added by refresh.js) ---------- */
.rv { opacity: 0; transform: translateY(24px); transition: opacity .75s var(--ease-out), transform .75s var(--ease-out); transition-delay: calc(var(--rv-i, 0) * 60ms); }
.rv.in { opacity: 1; transform: none; }
.wipe { clip-path: inset(-10px 100% -10px 0); transition: clip-path 1.5s cubic-bezier(.65, 0, .15, 1); }
.wipe.in { clip-path: inset(-10px -10px -10px 0); }
.motion-ok #growth-line { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s cubic-bezier(.65, 0, .15, 1) .2s; }
.motion-ok #growth-line.in { stroke-dashoffset: 0; }

/* ---------- Micro-interactions ---------- */
.button, .nav-yt, .add-btn, .option-btn, .cta-primary, .cta-secondary, .quest-complete, .quest-reset, .start-btn { transition-property: transform, background, background-color, border-color, color; transition-duration: 180ms; }
.button:active, .nav-yt:active, .add-btn:active, .option-btn:active, .cta-primary:active, .cta-secondary:active, .quest-complete:active, .quest-reset:active, .start-btn:active { transform: scale(.97); }
.exiting, .exiting .option-btn { pointer-events: none; }
.exiting .option-btn:not(.selected) { opacity: .55; }

/* A hidden quiz label or share notice is not read aloud or found by search. */
.progress-wrapper:not(.visible), .share-toast:not(.visible) { visibility: hidden; }

/* Inline input messages on the tools */
.field-note { margin: 8px 0 0; color: var(--gold-light); font-size: 15px; line-height: 1.5; }
.field-note[hidden] { display: none; }

/* ---------- Hamburger to X, smooth menu ---------- */
.nav .nav-toggle { flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 0; }
.nav .nav-toggle span { display: block; width: 22px; height: 2.5px; margin: 0; background: var(--ink); border-radius: 2px; opacity: 1; transform-origin: center; transition: transform 260ms var(--ease-out), opacity 160ms; }
.nav .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(.3); }
.nav .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@keyframes nav-open { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

@media (max-width: 768px) {
    .nav .nav-toggle { display: flex; }
    .nav-links.open { animation: nav-open 280ms var(--ease-out); }
    .nav-link, .nav-dropdown-trigger { font-size: 16px; }
    .nav-dropdown-item { font-size: 15px; }
}

/* ---------- Small screens ---------- */
@media (max-width: 800px) {
    .vp-home .latest-grid { grid-template-columns: 1fr; }
    .vp-home .latest-grid > .video-card:not(:first-child) { grid-template-columns: 128px minmax(0, 1fr); column-gap: 14px; padding-bottom: 10px; }
    .vp-home .latest-grid > .video-card:not(:first-child) .video-title { margin-top: 0; }
    .vp-home .hub-topic { grid-template-columns: 34px minmax(0, 1fr); column-gap: 10px; padding: 20px 0; }
    .vp-home .hub-index { grid-row: 1; padding-top: 8px; }
    .vp-home .hub-topic-name { grid-row: 1; }
    .vp-home .hub-topic-line, .vp-home .hub-topic-meta { grid-column: 2; margin-top: 6px; }
    .vp-home .hub-topic-thumbs { display: none; }
    .ink-arrow { display: none; }
}
@media (max-width: 540px) {
    main p, section p, section li { font-size: max(1em, 16px); }
    .vp-home .principles .wrap { padding-block: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .rv, .wipe { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}

/* ==========================================================================
   2026-11-03 paper theme, the shared look on every public page.
   Ink on paper, red annotation, blue links, brand yellow as a fill only.
   Hand-drawn feel from CSS alone here (wobbly radii, ink outlines, offset
   shadows); the homepage adds rough.js on top. Tool maths are untouched.
   ========================================================================== */
:root { --wobble: 255px 15px 225px 15px / 15px 225px 15px 255px; --wobble-card: 6px 3px 7px 4px / 4px 7px 3px 6px; --paper-shadow: 0 1px 0 rgba(0, 0, 0, .05), 0 14px 24px -14px rgba(60, 40, 10, .35); }
::selection { background: var(--highlight); color: var(--ink); }

/* ---------- Nav ---------- */
.nav { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.nav-wordmark { color: var(--ink); font-weight: 650; }
.nav-wordmark:hover { color: var(--ink); }
.nav-wordmark::before { width: 34px; height: 29px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 34'%3E%3Cpath d='M3 31 17 5l9 13 4-5 8 18z' fill='%23ffd23f' stroke='%231c1a16' stroke-width='1.9' stroke-linejoin='round'/%3E%3Cpath d='M2.4 31.6 16.5 5.8l9.8 12.6 3.5-5.3 8.7 18.3' fill='none' stroke='%231c1a16' stroke-width='.9' opacity='.55'/%3E%3Cpath d='M8 31l7-12M13 31l7-13M19 31l6-9M25 31l5-8M31 31l3-5' stroke='%231c1a16' stroke-width='.8' opacity='.35'/%3E%3Ccircle cx='32.5' cy='6' r='3.7' fill='none' stroke='%23a33a12' stroke-width='1.6'/%3E%3C/svg%3E"); }
.nav-link, .nav-dropdown-trigger { color: var(--ink); font-weight: 500; }
.nav-link:hover, .nav-dropdown-trigger:hover, .nav-link.active { color: var(--ink); text-decoration: underline wavy var(--gold) 2px; text-underline-offset: .35em; }
.nav-dropdown-menu { background: var(--bg-card) !important; border: 1.5px solid var(--ink) !important; border-radius: var(--wobble-card) !important; box-shadow: 4px 4px 0 rgba(28, 26, 22, .9) !important; }
.nav-dropdown-item { color: var(--ink); }
.nav-dropdown-item:hover { color: var(--ink); background: rgba(255, 210, 63, .35); }
.nav .nav-toggle { border: 1.5px solid var(--ink); border-radius: var(--wobble-card); }

/* ---------- Buttons: the yellow fill with an ink outline, like a marker box ---------- */
.nav-yt, .cta-primary, .btn-gold, .add-btn, .vp-home .button.primary, .link-card.primary {
    background: var(--highlight) !important; color: var(--ink) !important;
    border: 2px solid var(--ink) !important; border-radius: var(--wobble) !important;
    box-shadow: 3px 3px 0 var(--ink); font-weight: 700;
}
.nav-yt:hover, .cta-primary:hover, .btn-gold:hover, .add-btn:hover, .vp-home .button.primary:hover, .link-card.primary:hover {
    background: var(--highlight-soft) !important; color: var(--ink) !important; transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink);
}
.nav-yt svg { fill: var(--ink); }
.cta-secondary, .vp-home .button:not(.primary) { background: transparent; color: var(--ink); border: 2px solid var(--ink); border-radius: var(--wobble); }
.cta-secondary:hover, .vp-home .button:not(.primary):hover { color: var(--ink); border-color: var(--ink); background: rgba(255, 210, 63, .3); }
.vp-home .text-link, .hub-tool-go, .hub-step-go, .tile-link { color: var(--link); font-weight: 600; }

/* ---------- Kickers and labels in the hand font ---------- */
.vp-home .eyebrow, .vp-home .section-label, .hub-related .hub-related-kicker, .hub-step-kind {
    font-family: var(--font-hand); font-weight: 700; font-size: 1.55rem; line-height: 1.2; letter-spacing: .01em; color: var(--gold); text-transform: none;
}
.hub-index { font-family: var(--font-hand); font-weight: 700; font-size: 1.9rem; letter-spacing: 0; color: var(--gold); }

/* ---------- Paper cards ---------- */
.hub-tool, .hub-step-card, .framework-card, .tool-card:not(.video-card), .hub-start-aside, .calculator, .chart-container, .result-card, .quiz-container {
    background: var(--bg-card); border: 1.5px solid rgba(28, 26, 22, .55); border-radius: var(--wobble-card); box-shadow: var(--paper-shadow);
}
.hub-tool:hover, .hub-step-card:hover, .framework-card:hover, .tool-card:not(.video-card):hover { border-color: var(--ink); }
.hub-step-card.hub-step-tool { border-left: 4px solid var(--gold); }
.hub-step-num { background: var(--highlight); color: var(--ink); border: 2px solid var(--ink); font-family: var(--font-hand); font-size: 1.6rem; }
.hub-step:not(:last-child)::before { background: repeating-linear-gradient(var(--ink) 0 3px, transparent 3px 10px); width: 2px; }
.hub-explain, .vp-hub .hub-hero { background-image: none; }
.vp-home .hub-subscribe { background-image: none; }

/* ---------- Thumbnails get an ink frame ---------- */
.hub-thumb, .vp-home .video-thumb, .hub-rel-video img, .vp-home .latest-grid > .video-card:first-child .video-thumb { border: 2px solid var(--ink) !important; border-radius: var(--wobble-card) !important; box-shadow: var(--paper-shadow); }
.hub-play, .vp-home .video-play { background: var(--highlight); border: 1.5px solid var(--ink); border-radius: 50%; box-shadow: 2px 2px 0 var(--ink); padding: 7px; }
.hub-play svg, .vp-home .video-play svg { fill: var(--ink); }
.vp-home .latest-grid > .video-card:first-child .video-thumb::after { background: var(--highlight); color: var(--ink); border: 1.5px solid var(--ink); font: 700 1.25rem/1 var(--font-hand); padding: 4px 10px 5px; }

/* ---------- Footer: the one ink band ---------- */
footer { background: var(--ink) !important; color: #e9e3d3; border-top: 0 !important; }
footer .footer-col-title { color: #fff; font-weight: 700; }
footer .footer-col a, footer .social-link { color: #f3efe4; }
footer .footer-col a:hover, footer .social-link:hover { color: var(--highlight); text-decoration: underline; }
footer .footer-text, footer .footer-disclaimer { color: #cfc8b8; }
footer a:focus-visible { outline-color: var(--highlight); }

/* ---------- Mobile menu ---------- */
@media (max-width: 768px) {
    .nav-links { background: var(--bg-deep) !important; border-bottom: 2px solid var(--ink) !important; }
    .nav-link, .nav-dropdown-trigger { border-bottom: 1px dashed rgba(43, 39, 32, .25); }
    .nav-dropdown-menu { background: transparent !important; border: 0 !important; border-left: 2px dashed rgba(43, 39, 32, .35) !important; border-radius: 0 !important; box-shadow: none !important; }
    .nav-yt { margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
    .nav-yt:hover, .cta-primary:hover, .btn-gold:hover, .add-btn:hover, .vp-home .button.primary:hover { transform: none; }
}

/* Headings print in solid ink. The 2026-07-04 premium layer faded every h1
   with a light gradient clipped to the text, which reads as grey on paper. */
h1 { background: none !important; -webkit-text-fill-color: currentColor !important; color: var(--ink); }
footer .social-link { background: transparent !important; border: 1.5px solid rgba(243, 239, 228, .45) !important; border-radius: var(--wobble) !important; padding: 8px 16px; }
footer .social-link svg { fill: currentColor; }

/* Chosen states read at a glance on paper: the highlighter fill and an ink edge (3:1 or better against the paper). */
.seg button[aria-pressed="true"], .chip[aria-pressed="true"], .option-btn.selected {
    background: var(--highlight) !important; color: var(--ink) !important; border-color: var(--ink) !important; box-shadow: 2px 2px 0 var(--ink);
}
footer a { color: #f3efe4; }
footer p, footer { color: #e9e3d3; }
.tag-seg button[aria-pressed="true"][data-tag="keep"] { background: var(--highlight-soft); border-color: var(--ink); }
.option-btn:not(.selected) { border: 1.5px solid var(--border-hover) !important; background: var(--bg-card); }
.option-btn:not(.selected):hover { border-color: var(--ink) !important; background: rgba(255, 210, 63, .18); }

/* Local thumbnails arrive as <picture class="thumb">; the box lays out the <img> as before. */
picture.thumb { display: contents; }