/* ==========================================================================
   1Hundred Year Family — the manifesto
   Extends 1hyf-landing.css. Every colour, font and radius below comes from
   the tokens defined there; nothing new is introduced.

   The printed document alternates dark and parchment spreads. On the web
   those become full-bleed "sheets" in one continuous scroll, using --ink as
   the dark ground (the same warm near-black the site footer already uses)
   and --bg / --surface as the light one.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Sheets — the alternating grounds
   -------------------------------------------------------------------------- */
.doc-page { overflow-x: hidden; }

.m-sheet {
    padding: clamp(72px, 12vw, 150px) 0;
    scroll-margin-top: 0;
}
.m-sheet--warm { color: var(--ink); background: var(--bg); }
.m-sheet--warm + .m-sheet--warm { padding-top: 0; }

.m-sheet--dark {
    color: var(--cream);
    background: var(--ink);
}
.m-sheet--dark + .m-sheet--dark { padding-top: 0; }

/* A hairline rule between consecutive light sheets, so sections read as
   separate pages without a hard colour change. */
.m-sheet--warm + .m-sheet--warm .m-inner::before {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    margin-bottom: clamp(56px, 8vw, 96px);
    background: var(--line);
}

.m-inner { width: min(100% - 40px, 720px); margin-inline: auto; }

/* --------------------------------------------------------------------------
   2. Reading progress — a 2px brass hairline, nothing more
   -------------------------------------------------------------------------- */
.read-progress {
    position: fixed;
    z-index: 50;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: transparent;
    pointer-events: none;
}
.read-progress-bar {
    display: block;
    width: 0;
    height: 100%;
    background: var(--brass);
    transition: width .12s linear;
}

/* --------------------------------------------------------------------------
   3. Header on the document
   -------------------------------------------------------------------------- */
.topbar--doc {
    position: absolute;
    background: transparent;
}

/* --------------------------------------------------------------------------
   4. Cover
   -------------------------------------------------------------------------- */
.m-cover { padding-top: clamp(170px, 24vw, 260px); }

/* The cover carries four elements and nothing else: what this is, the
   thesis, one line of orientation, and who wrote it. The headline is meant
   to dominate, so it takes the room the runner and the second orientation
   block used to occupy. */
.m-cover h1 {
    margin: 22px 0 34px;
    color: var(--cream);
    font-size: clamp(50px, 10vw, 104px);
    line-height: 1;
    letter-spacing: -.03em;
}
.m-cover h1 em {
    display: block;
    margin-top: .2em;
    color: var(--brass-light);
    font-size: .44em;
    font-style: italic;
    font-weight: 400;
    line-height: 1.2;
}

/* One line of orientation. Not a pull quote — it needs no rule and no
   quotation marks, only enough weight to be read before the byline. */
.m-cover-lead {
    max-width: 46ch;
    text-wrap: pretty;
    color: var(--brass-light) !important;
    font-family: var(--font-display);
    font-size: clamp(21px, 2.6vw, 27px) !important;
    font-style: italic;
    line-height: 1.45 !important;
}

.m-byline {
    max-width: 56ch;
    margin-top: clamp(40px, 7vw, 72px);
    padding-top: 26px;
    border-top: 1px solid rgba(251, 248, 241, .22);
    color: rgba(251, 248, 241, .78);
    font-size: 14px;
    line-height: 1.7;
}
.m-byline b { color: #fff; font-weight: 600; }

/* --------------------------------------------------------------------------
   5. Type inside the document
   -------------------------------------------------------------------------- */
.m-sheet h2 {
    margin: 16px 0 28px;
    font-size: clamp(32px, 5.2vw, 56px);
    line-height: 1.08;
}
.m-sheet--dark h2 { color: var(--cream); }

/* Operating-system titles carry an italic subtitle, as in the document. */
.m-os h2 em {
    display: block;
    margin-top: .12em;
    color: var(--brass-text);
    font-size: .58em;
    font-style: italic;
    font-weight: 400;
}

.m-sheet p {
    margin-bottom: 20px;
    color: var(--ink-soft);
    font-size: 17px;
    line-height: 1.75;
}
.m-sheet--dark p { color: var(--on-dark-soft); }
.m-sheet strong { color: var(--ink); font-weight: 600; }
.m-sheet--dark strong { color: #fff; }
.m-sheet em { font-style: italic; }

/* The big serif statements that carry the dark spreads. */
.m-statement {
    margin-bottom: 32px !important;
    color: var(--cream) !important;
    font-family: var(--font-display);
    font-size: clamp(26px, 4vw, 40px) !important;
    font-weight: 400;
    line-height: 1.3 !important;
    letter-spacing: -.015em;
}
.m-statement em { color: var(--brass-light); font-style: italic; }

.m-lead {
    color: var(--ink) !important;
    font-family: var(--font-display);
    font-size: clamp(24px, 2.8vw, 27px) !important;
    font-style: italic;
    line-height: 1.5 !important;
}
.m-sheet--dark .m-lead { color: var(--cream) !important; }

/* Small letterspaced note, used where the document sets a line in caps. */
.m-note {
    margin-top: 36px;
    color: var(--brass-light) !important;
    font-size: 13px !important;
    font-weight: 700;
    letter-spacing: .16em;
    line-height: 1.7 !important;
    text-transform: uppercase;
}
.m-sheet--warm .m-note { color: var(--brass-text) !important; }

.m-close {
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid var(--line);
    color: var(--ink) !important;
    font-family: var(--font-display);
    font-size: clamp(24px, 2.6vw, 26px) !important;
    font-style: italic;
    line-height: 1.55 !important;
}

/* Section eyebrows, with the document's trailing rule. */
.m-rule {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 4px;
}
.m-rule::after {
    content: '';
    flex: 0 1 72px;
    height: 1px;
    background: currentColor;
    opacity: .5;
}
.m-num { font-variant-numeric: normal; }

/* Pull quotes — brass rule on the left, as printed. */
.m-quote {
    margin: 34px 0;
    padding-left: 22px;
    border-left: 2px solid var(--brass);
}
.m-quote p {
    margin: 0;
    color: var(--ink) !important;
    font-family: var(--font-display);
    font-size: clamp(24px, 2.9vw, 29px) !important;
    line-height: 1.45 !important;
}
.m-sheet--dark .m-quote { border-left-color: var(--brass-light); }
.m-sheet--dark .m-quote p { color: var(--cream) !important; }
.m-quote em { color: var(--brass-text); font-style: italic; }
.m-sheet--dark .m-quote em { color: var(--brass-light); }

/* --------------------------------------------------------------------------
   6. Contents
   -------------------------------------------------------------------------- */
.m-contents-sheet { padding-bottom: clamp(56px, 9vw, 110px); }
.m-contents {
    margin-top: 26px;
    border-top: 1px solid var(--line);
}
.m-contents li { border-bottom: 1px solid var(--line); }
.m-contents a {
    display: flex;
    align-items: baseline;
    gap: 18px;
    padding: 15px 2px;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 21px;
    text-decoration: none;
    transition: color .2s var(--ease), padding-left .2s var(--ease);
}
.m-contents a:hover { color: var(--olive); padding-left: 8px; }
.m-contents .m-num {
    flex: 0 0 auto;
    min-width: 3ch;
    color: var(--brass-text);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
}

/* --------------------------------------------------------------------------
   7. Paired comparison cards
   -------------------------------------------------------------------------- */
.m-pair {
    display: grid;
    gap: 2px;
    margin: 34px 0;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}
.m-sheet--dark .m-pair {
    background: var(--line-dark);
    border-color: var(--line-dark);
}
.m-card { padding: 28px 24px; background: var(--bg); }
.m-sheet--warm .m-card { background: var(--surface); }
.m-card--accent { background: var(--cream); }
.m-sheet--dark .m-card,
.m-sheet--dark .m-card--accent { background: var(--ink); }

.m-card-kicker {
    margin-bottom: 12px !important;
    color: var(--brass-text) !important;
    font-size: 12px !important;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.m-sheet--dark .m-card-kicker { color: var(--brass-light) !important; }
.m-card-title {
    margin-bottom: 12px !important;
    color: var(--ink) !important;
    font-family: var(--font-display);
    font-size: 24px !important;
    line-height: 1.25 !important;
}
.m-sheet--dark .m-card-title { color: var(--cream) !important; }
.m-card-body {
    margin-bottom: 0 !important;
    font-size: 15px !important;
    line-height: 1.68 !important;
}

/* Statistic cards */
.m-stat {
    margin-bottom: 10px !important;
    color: var(--brass-light) !important;
    font-family: var(--font-display);
    font-size: clamp(52px, 8vw, 68px) !important;
    font-weight: 400;
    line-height: 1 !important;
    letter-spacing: -.02em;
}
.m-sheet--warm .m-stat { color: var(--brass-text) !important; }

/* --------------------------------------------------------------------------
   8. The definition list
   -------------------------------------------------------------------------- */
.m-defs { margin: 30px 0; border-top: 1px solid var(--line); }
.m-def { padding: 26px 0; border-bottom: 1px solid var(--line); }
.m-def h3 {
    margin-bottom: 12px;
    font-size: clamp(26px, 3.2vw, 31px);
    line-height: 1.2;
}
.m-hl { color: var(--brass-text); }
.m-def p { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   9. The four wealth stages
   -------------------------------------------------------------------------- */
.m-stages {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 30px 0 34px;
}
.m-stage {
    position: relative;
    padding: 13px 20px;
    color: var(--brass-text);
    border: 1px solid var(--brass);
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.m-stage:not(:last-child)::after {
    content: '→';
    margin-left: 10px;
    opacity: .7;
}

/* --------------------------------------------------------------------------
   9b. The flywheel
   -------------------------------------------------------------------------- */
.flywheel { margin: 40px 0 34px; }
.flywheel-art {
    position: relative;
    width: min(100%, 460px);
    margin-inline: auto;
}
.flywheel-art svg { display: block; width: 100%; height: auto; }

/* The wordmark sits in the hub, over the SVG rather than inside it, so the
   existing logo asset is reused rather than duplicated as paths. */
.flywheel-mark {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 34%;
    height: auto;
    transform: translate(-50%, -50%);
}

.fw-stage text,
.fw-os text {
    font-family: var(--font-body);
    font-weight: 700;
    text-transform: uppercase;
}
.fw-stage text { font-size: 30px; letter-spacing: 5px; }
.fw-os text    { font-size: 26px; letter-spacing: 1px; }

.flywheel figcaption {
    max-width: 44ch;
    margin: 22px auto 0;
    color: var(--ink-soft);
    font-family: var(--font-display);
    font-size: 17px;
    font-style: italic;
    line-height: 1.5;
    text-align: center;
}

/* --------------------------------------------------------------------------
   10. The twelve-month path
   -------------------------------------------------------------------------- */
.m-months {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 30px 0 34px;
}
.m-month {
    padding: 16px 16px 18px;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-family: var(--font-display);
    font-size: 18px;
    line-height: 1.25;
}
.m-month-num {
    display: block;
    margin-bottom: 8px;
    color: var(--brass-text);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   11. The honest audit
   -------------------------------------------------------------------------- */
.audit { margin: 32px 0 34px; }
.audit fieldset { border: 0; }

.audit-scale-key {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0 !important;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
    color: var(--ink-faint) !important;
    font-size: 12px !important;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.audit-row {
    display: grid;
    gap: 14px;
    padding: 20px 0;
    border-bottom: 1px solid var(--line);
}
.audit-label { display: block; }
.audit-name {
    display: block;
    margin-bottom: 4px;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 22px;
    line-height: 1.2;
}
.audit-desc {
    display: block;
    max-width: 46ch;
    color: var(--ink-soft);
    font-size: 14px;
    line-height: 1.6;
}

.audit-scale {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
/* Each step is a real radio input, so keyboard and screen-reader support is
   native — arrow keys move through the scale with no JavaScript at all. */
.audit-box { position: relative; display: block; }
.audit-box input {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    margin: 0;
}
.audit-box span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: var(--ink-faint);
    background: transparent;
    border: 1px solid var(--brass);
    border-radius: 3px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s var(--ease), color .15s var(--ease);
}
.audit-box:hover span { background: rgba(138, 111, 75, .12); }
.audit-box input:focus-visible + span {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}
/* Filled up to and including the chosen score. */
.audit-box.is-filled span {
    color: var(--ink);
    background: var(--brass-light);
    border-color: var(--brass);
}

.audit-result {
    margin-top: 26px !important;
    margin-bottom: 0 !important;
    padding: 18px 20px;
    color: var(--ink) !important;
    background: var(--surface-2);
    border-left: 2px solid var(--brass);
    border-radius: var(--radius);
    font-family: var(--font-display);
    font-size: 20px !important;
    line-height: 1.5 !important;
}
.audit-result:empty { display: none; }
.audit-result b { color: var(--olive); font-weight: 500; }

/* --------------------------------------------------------------------------
   12. Invitation
   -------------------------------------------------------------------------- */
.m-invitation h2 {
    font-size: clamp(36px, 6vw, 62px);
}
.m-invitation h2 em {
    display: block;
    margin-top: .1em;
    color: var(--brass-light);
    font-style: italic;
    font-weight: 400;
}
/* The concrete offer, stated at the point of decision. The document spends
   2,000 words on the problem; this is the one place it says plainly what
   arrives, how long it takes and what it costs. Sits above the button so it
   is read rather than skimmed as fine print. */
.m-offer {
    margin: 36px 0 0 !important;
    padding-left: 18px;
    color: var(--brass-light) !important;
    border-left: 2px solid var(--brass);
    font-size: 17px !important;
    line-height: 1.6 !important;
}
.m-cta-wrap { margin: 20px 0 0 !important; }
.m-invitation .button {
    color: var(--olive-deep);
    background: var(--cream);
    border-color: var(--cream);
}
.m-invitation .button:hover { background: #ece2cd; border-color: #ece2cd; }

.m-signature {
    margin-top: 38px !important;
    padding-top: 26px;
    border-top: 1px solid rgba(251, 248, 241, .22);
    color: var(--cream) !important;
    font-family: var(--font-display);
    font-size: 24px !important;
    font-style: italic;
}
.m-signature small {
    display: block;
    margin-top: 10px;
    color: rgba(251, 248, 241, .7);
    font-family: var(--font-body);
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   13. ≥ 600px
   -------------------------------------------------------------------------- */
@media (min-width: 600px) {
    .m-pair { grid-template-columns: 1fr 1fr; }
    .m-months { grid-template-columns: repeat(3, 1fr); }
    .audit-row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 24px;
        align-items: center;
    }
    .audit-scale { flex-wrap: nowrap; }
}

/* --------------------------------------------------------------------------
   14. ≥ 1024px
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
    .m-inner { width: min(100% - 40px, 760px); }
    .m-months { grid-template-columns: repeat(4, 1fr); }
    .m-sheet p { font-size: 18px; }
}

/* --------------------------------------------------------------------------
   15. Motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .read-progress-bar { transition: none; }
    .m-contents a:hover { padding-left: 2px; }
}

/* --------------------------------------------------------------------------
   16. Print — the document should still print like a document
   -------------------------------------------------------------------------- */
@media print {
    .read-progress,
    .topbar--doc,
    .mobile-action,
    .m-cta-wrap { display: none !important; }

    .m-sheet--dark {
        color: #000 !important;
        background: #fff !important;
    }
    .m-sheet--dark h2,
    .m-sheet--dark p,
    .m-sheet--dark .m-statement,
    .m-sheet--dark .m-quote p,
    .m-signature { color: #000 !important; }
    .m-sheet { page-break-inside: avoid; padding: 24px 0; }
    /* Empty boxes, so a printed copy can still be filled in by hand. */
    .audit-box.is-filled span { background: transparent !important; }
}