/* ==========================================================================
   Bowtie Capital - screen.css

   Almost brutalist. The structure shows because the record is the product.
   Everything is built from plain parts: type, rules, boxes, underlined links.

   Rules of the system
   - 8px rule: masthead and footer. 2px: sections, boxes, table edges. 1px: rows.
   - Square corners. No shadows, gradients or decorative images.
   - Links are underlined. Buttons are boxes. Nothing else is clickable.
   - Section names hang in a 280px left column; on phones the name stacks above.
   - Libre Franklin for text. DM Mono only for figures, timestamps and tables.

   Contents
    1. Fonts            6. Components        11. Koenig editor cards
    2. Tokens           7. Home sections     12. Error pages
    3. Base             8. Record rows       13. Print
    4. Links, focus     9. Entries
    5. Masthead, footer 10. Editor content
   ========================================================================== */


/* 1. Fonts
   Self-hosted, latin subset, SIL Open Font License 1.1 (texts in assets/fonts/OFL-*.txt).
   No font preload on purpose: {{asset}} adds a ?v= query, so a preload would not match these URLs.
   -------------------------------------------------------------------------- */

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

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

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

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

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

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

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


/* 2. Tokens
   Light is the default. Dark follows the reader's setting.
   -------------------------------------------------------------------------- */

:root {
    color-scheme: light dark;

    --ink: #000000;
    --paper: #FFFFFF;
    --muted: #4D4D4D;      /* graphite: captions and notes */
    --link: #0000EE;       /* links only */
    --visited: #551A8B;    /* links already read */

    /* Ghost sets --gh-font-body and --gh-font-heading when a custom font is picked in
       Settings > Design & branding. With nothing picked, Libre Franklin is used. */
    --font-text: var(--gh-font-body, "Libre Franklin"), "Franklin Gothic Medium", "Helvetica Neue", Arial, sans-serif;
    --font-heading: var(--gh-font-heading, "Libre Franklin"), "Franklin Gothic Medium", "Helvetica Neue", Arial, sans-serif;
    --font-figures: "DM Mono", ui-monospace, Menlo, Consolas, monospace;

    --gutter: clamp(16px, 5.6vw, 80px);
    --max: 1440px;
    --hang: 280px;         /* the hanging column */
    --hang-gap: 48px;
    --measure: 48rem;      /* longest line of running text: 62ch at body size in Libre Franklin, but the same for every element */
}

@media (prefers-color-scheme: dark) {
    :root {
        --ink: #FFFFFF;
        --paper: #000000;
        --muted: #B3B3B3;
        --link: #8AB4FF;
        --visited: #C9A2FF;
    }
}


/* 3. Base
   -------------------------------------------------------------------------- */

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

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

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-text);
    font-size: 18px;
    line-height: 1.5;
    overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-family: var(--font-heading);
    text-wrap: balance;
}

p, dl, dd, figure, blockquote, pre {
    margin: 0;
}

img, svg, video, iframe {
    max-width: 100%;
}

img, video {
    height: auto;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
}

.skip-link {
    position: absolute;
    top: 0;
    left: 16px;
    z-index: 100;
    padding: 12px 16px;
    transform: translateY(-120%);
}

.skip-link:focus {
    transform: none;
}

.skip-link,
.skip-link:visited {
    background: var(--ink);
    color: var(--paper);
    font-weight: 700;
    text-decoration: none;
}

.skip-link:focus-visible {
    outline-color: var(--ink);
}


/* 4. Links and focus
   Always underlined. Visited links turn purple. Hover thickens the underline to 3px.
   Focus is a 3px outline offset 3px.
   -------------------------------------------------------------------------- */

a {
    color: var(--link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

a:visited {
    color: var(--visited);
}

a:hover {
    text-decoration-thickness: 3px;
}

:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 3px;
}

/* A filled button has paper-colored text, so currentColor would draw an invisible ring. */
.btn:focus-visible {
    outline-color: var(--ink);
}


/* 5. Masthead and footer
   -------------------------------------------------------------------------- */

.wrap {
    width: 100%;
    max-width: var(--max);
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--gutter);
    padding-left: var(--gutter);
}

.site-main {
    flex: 1 0 auto;
}

.site-header {
    border-bottom: 8px solid var(--ink);
}

.site-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 40px;
    max-width: var(--max);
    margin: 0 auto;
    padding: 16px var(--gutter);
}

.brand,
.brand:visited {
    color: var(--ink);
    font-size: 26px;
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1;
    text-decoration: none;
}

.brand:hover {
    text-decoration: none;
}

.site-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 24px;
    font-size: 17px;
}

/* The two masthead lists (the links, then Sign in and the join button) flow as one row, as they do on a desktop.
   A phone wraps them together, so no link is left alone on a line. Both lists carry role="list" in the markup
   because some browsers drop the list semantics of an element with display: contents. */
.site-nav > .nav {
    display: contents;
}

/* On the narrowest phones a slightly tighter gap keeps the masthead to two rows: four links, then Help, Sign in and the button. */
@media (max-width: 389px) {
    .site-nav {
        column-gap: 16px;
    }
}

.nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.nav [aria-current="page"] {
    font-weight: 700;
}

.site-footer {
    border-top: 8px solid var(--ink);
}

.site-footer__inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: 40px var(--gutter) 56px;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 32px 48px;
    font-size: 17px;
}

.footer-brand {
    margin: 0 0 12px;
    font-size: 26px;
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1;
}

.footer-text {
    max-width: 44ch;
    margin: 0 0 12px;
    text-wrap: pretty;
}

.footer-text:last-child {
    margin-bottom: 0;
}

.footer-nav {
    display: flex;
    flex-direction: column;
}

.footer-nav .nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

.footer-copy {
    margin: 40px 0 0;
    color: var(--muted);
    font-size: 15px;
}


/* 6. Components
   -------------------------------------------------------------------------- */

/* Buttons are boxes. One filled button per screen. */
.btn,
.btn:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 24px;
    border: 2px solid var(--ink);
    border-radius: 0;
    font-family: inherit;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.btn--primary,
.btn--primary:visited {
    background: var(--ink);
    color: var(--paper);
}

.btn--secondary,
.btn--secondary:visited {
    background: transparent;
    color: var(--ink);
}

.btn--primary:hover,
.btn--secondary:hover {
    background: var(--paper);
    color: var(--ink);
    text-decoration: none;
}

.btn--secondary:hover {
    background: var(--ink);
    color: var(--paper);
}

.btn--compact {
    min-height: 44px;
    padding: 0 18px;
}

/* Status: every strategy, lesson and number carries one. Only Live is filled. */
.tag {
    display: inline-block;
    flex: 0 0 auto;
    padding: 1px 8px;
    border: 2px solid var(--ink);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
}

.tag--live {
    background: var(--ink);
    color: var(--paper);
}

.tag--retired {
    border-color: var(--muted);
    color: var(--muted);
}

.inline-flex {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

/* Tables: 2px under the head, 1px between rows, 2px under the last row (on the scroller).
   .t is the theme's own table. The same cells style a bare table pasted into a post or page. */
.table-scroll {
    overflow-x: auto;
    border-bottom: 2px solid var(--ink);
}

.t,
.gh-content table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.t th,
.gh-content table th {
    padding: 14px 20px 12px 0;
    border-bottom: 2px solid var(--ink);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
    vertical-align: bottom;
}

.t td,
.gh-content table td {
    padding: 16px 20px 16px 0;
    border-bottom: 1px solid var(--ink);
    font-size: 17px;
    line-height: 1.4;
    vertical-align: top;
}

.t tbody th,
.gh-content table tbody th {
    padding: 16px 20px 16px 0;
    border-bottom: 1px solid var(--ink);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
    vertical-align: top;
}

.t tbody tr:last-child td,
.t tbody tr:last-child th,
.gh-content table tbody tr:last-child td,
.gh-content table tbody tr:last-child th {
    border-bottom: 0;
}

/* Figures and timestamps: DM Mono, digits aligned. */
.t .n {
    font-family: var(--font-figures);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.t .r {
    text-align: right;
}

.t--record { min-width: 620px; }
.t--free { min-width: 760px; }
.t--numbers { min-width: 760px; }

.w-16 { width: 16%; }
.w-28 { width: 28%; }

.table-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px 32px;
    margin: 16px 0 0;
    font-size: 17px;
}

/* The disclosure: printed in full, at body size, directly under the numbers it covers. */
.disclosure {
    max-width: 880px;
    padding: 24px 28px;
    border: 2px solid var(--ink);
}

.disclosure__title {
    margin: 0 0 12px;
    font-size: 21px;
    font-weight: 800;
    line-height: 1.2;
}

.disclosure p {
    text-wrap: pretty;
}

/* The paywall: shown under the free preview of a members-only post or page. */
.paywall {
    max-width: 880px;
    margin: 40px 0 0;
    padding: 24px 28px;
    border: 2px solid var(--ink);
}

.gh-content > .paywall {
    margin-top: 40px;
}

.paywall__title {
    margin: 0 0 20px;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.015em;
    line-height: 1.1;
}

.paywall__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
}

.paywall__signin {
    margin: 0;
    font-size: 17px;
}

.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 32px;
    margin: 32px 0 0;
    padding: 16px 0 0;
    border-top: 2px solid var(--ink);
    font-size: 17px;
}

.pagination__count {
    color: var(--muted);
    font-family: var(--font-figures);
    font-size: 15px;
}

.empty {
    margin: 0;
    padding: 16px 0;
    border-top: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
    color: var(--muted);
}


/* 7. Home sections
   Each section is a 2px rule, then the name hanging at the left and the content at the right.
   The row wraps by itself, so the name stacks above the content when there is no room for both.
   -------------------------------------------------------------------------- */

.hero {
    padding: clamp(48px, 8vw, 120px) 0 clamp(48px, 6vw, 96px);
}

.hero__title {
    font-size: clamp(44px, 8.4vw, 124px);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 0.94;
}

.hero__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px 64px;
    margin-top: clamp(32px, 4vw, 56px);
}

.hero__lead {
    max-width: 48ch;
    margin: 0;
    font-size: 21px;
    line-height: 1.45;
    text-wrap: pretty;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.section {
    padding: 32px 0 72px;
    border-top: 2px solid var(--ink);
}

.hang {
    display: flex;
    flex-wrap: wrap;
    gap: 24px 48px;
}

.hang__side {
    flex: 0 1 var(--hang);
    margin: 0;
}

.hang__main {
    flex: 999 1 640px;
    min-width: 0;
}

.section-name {
    font-size: 36px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.05;
}

.lead {
    max-width: 52ch;
    margin: 0 0 32px;
    font-size: 21px;
    line-height: 1.45;
    text-wrap: pretty;
}

.lead--roomy {
    margin-bottom: 40px;
}

/* What we teach */
.courses {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
    gap: 48px;
}

.course__name {
    margin: 0 0 16px;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.015em;
    line-height: 1.1;
}

.course__text {
    max-width: 60ch;
    margin: 0 0 16px;
    text-wrap: pretty;
}

.course__text--last {
    margin-bottom: 28px;
}

.lessons {
    margin: 0;
    padding: 0;
    border-top: 2px solid var(--ink);
    list-style: none;
}

.lessons li {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--ink);
}

.lessons li:last-child {
    border-bottom-width: 2px;
}

.lessons__n {
    flex: 0 0 28px;
    font-weight: 700;
}

.lessons__t {
    flex: 1 1 auto;
    min-width: 0;
}

/* Join. auto-fill, not auto-fit: a lone tier keeps the width of one card instead of stretching across the row. */
.tiers {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr));
    gap: 24px;
}

.tier {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 32px;
    border: 2px solid var(--ink);
}

.tier__name {
    margin: 0;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.015em;
    line-height: 1.1;
}

.tier__price {
    margin: 0;
    font-size: 21px;
}

.tier__amount {
    font-weight: 800;
}

.tier__list {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--ink);
    list-style: none;
}

.tier__list li {
    padding: 12px 0;
    border-bottom: 1px solid var(--ink);
}

.tier__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
    margin-top: auto;
}

.tier__alt {
    font-size: 17px;
}

.tier__note {
    margin: 0;
    font-size: 15px;
    line-height: 1.45;
    color: var(--muted);
}

.note {
    margin: 0;
    color: var(--muted);
    font-size: 17px;
}

.note--below {
    margin-top: 20px;
}

/* House rules */
.rules {
    margin: 0;
    padding: 0;
    border-top: 2px solid var(--ink);
    list-style: none;
}

.rules li {
    display: flex;
    align-items: baseline;
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid var(--ink);
    font-size: clamp(22px, 2.2vw, 30px);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.rules li:last-child {
    border-bottom-width: 2px;
}

.rules__n {
    flex: 0 0 40px;
}

.rules__t {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 34ch;
}

/* The numbers */
.numbers-note {
    max-width: 62ch;
    margin: 24px 0 32px;
    text-wrap: pretty;
}

.archive-link {
    margin: 24px 0 0;
    font-size: 17px;
}


/* 8. Record rows
   A row in a list of posts: time first, the read, then who can open it.
   -------------------------------------------------------------------------- */

.rows {
    margin: 0;
    padding: 0;
    border-top: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
    list-style: none;
}

.row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 20px;
    padding: 16px 0;
    border-bottom: 1px solid var(--ink);
}

.row:last-child {
    border-bottom: 0;
}

.row__time {
    flex: 0 0 auto;
    font-family: var(--font-figures);
    font-size: 17px;
    white-space: nowrap;
}

.row__body {
    flex: 1 1 24ch;
    min-width: 0;
}

.row__title {
    font-size: 21px;
    font-weight: 700;
    line-height: 1.25;
}

.row__excerpt {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.4;
}

/* The record table on a phone: each row stacks as time, read, detail, so nothing needs a sideways scroll.
   The header row stays in the page for screen readers, and the markup carries table roles for the same reason. */
@media (max-width: 640px) {
    .t--record {
        min-width: 0;
    }

    .t--record thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .t--record,
    .t--record tbody,
    .t--record tr,
    .t--record td {
        display: block;
    }

    .t--record tbody {
        border-top: 2px solid var(--ink);
    }

    /* On the record page the entry body already draws the rule above the list. */
    .entry-body .t--record tbody {
        border-top: 0;
    }

    .t--record tr {
        padding: 16px 0;
        border-bottom: 1px solid var(--ink);
    }

    .t--record tbody tr:last-child {
        border-bottom: 0;
    }

    .t--record td {
        padding: 0;
        border: 0;
    }

    .t--record td + td {
        margin-top: 4px;
    }

    .t--record td.n {
        font-size: 15px;
    }
}


/* 9. Entries: posts, pages and archives
   Meta hangs at the left of the title from 1100px up; below that everything stacks.
   -------------------------------------------------------------------------- */

.entry-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px 48px;
    padding: clamp(40px, 6vw, 88px) 0 clamp(32px, 4vw, 56px);
}

.entry-title {
    font-size: clamp(36px, 5.2vw, 76px);
    font-weight: 900;
    letter-spacing: -0.035em;
    line-height: 0.97;
}

.entry-head__main .lead {
    margin: 24px 0 0;
}

.meta {
    border-top: 2px solid var(--ink);
    font-size: 15px;
    line-height: 1.4;
}

.meta__row {
    display: grid;
    grid-template-columns: 6.6em minmax(0, 1fr);
    gap: 0 12px;
    align-items: baseline;
    padding: 10px 0;
    border-bottom: 1px solid var(--ink);
}

.meta dt {
    color: var(--muted);
}

.meta dd {
    margin: 0;
    min-width: 0;
}

.meta time {
    font-family: var(--font-figures);
    white-space: nowrap;
}

.entry-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding: 32px 0 clamp(56px, 8vw, 112px);
    border-top: 2px solid var(--ink);
}

@media (min-width: 1100px) {
    .entry-head,
    .entry-body {
        grid-template-columns: var(--hang) minmax(0, 1fr);
        column-gap: var(--hang-gap);
    }

    .entry-head > .meta {
        grid-column: 1;
        grid-row: 1;
    }

    .entry-head > .entry-head__main {
        grid-column: 2;
        grid-row: 1;
    }

    .entry-body > * {
        grid-column: 2;
    }
}

/* The backtest archive gets the whole width: no hanging column, the table scrolls in its own box. */
.entry--archive .entry-head,
.entry--archive .entry-body {
    display: block;
}

.archive-note {
    margin: 24px 0 0;
    font-size: 21px;
    line-height: 1.35;
}

.entry--archive .disclosure {
    margin: 0;
}

.entry--archive .gh-content {
    margin: 32px 0;
    overflow-x: auto;
}

.entry--archive .gh-content > * {
    max-width: none;
}

.entry--archive .gh-content > table {
    display: table;
    overflow: visible;
    border-bottom: 0;
}

.entry--archive .gh-content table th,
.entry--archive .gh-content table td {
    white-space: nowrap;
}


/* 10. Editor content
   Everything written in the Ghost editor lands inside .gh-content.
   -------------------------------------------------------------------------- */

.gh-content {
    min-width: 0;
}

.gh-content > * {
    max-width: var(--measure);
}

.gh-content > * + * {
    margin-top: 1.1em;
}

.gh-content > h2 {
    margin-top: 2em;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.015em;
    line-height: 1.1;
}

.gh-content > h3 {
    margin-top: 1.8em;
    font-size: 21px;
    font-weight: 800;
    line-height: 1.2;
}

.gh-content > h4,
.gh-content > h5,
.gh-content > h6 {
    margin-top: 1.6em;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}

.gh-content > h2 + *,
.gh-content > h3 + *,
.gh-content > h4 + *,
.gh-content > h5 + *,
.gh-content > h6 + * {
    margin-top: 0.6em;
}

.gh-content > :first-child {
    margin-top: 0;
}

.gh-content ul,
.gh-content ol {
    padding-left: 1.4em;
}

.gh-content li + li {
    margin-top: 0.4em;
}

.gh-content li > ul,
.gh-content li > ol {
    margin-top: 0.4em;
}

.gh-content blockquote {
    padding-left: 24px;
    border-left: 2px solid var(--ink);
    font-size: 21px;
    line-height: 1.45;
}

.gh-content hr {
    margin: 2.5em 0;
    border: 0;
    border-top: 2px solid var(--ink);
}

.gh-content small {
    color: var(--muted);
    font-size: 15px;
}

/* Figures typed in the editor as inline code are set in DM Mono: prices, levels, results. */
.gh-content code,
.gh-content kbd,
.gh-content samp,
.gh-content pre {
    font-family: var(--font-figures);
}

.gh-content code,
.gh-content kbd,
.gh-content samp {
    font-size: 0.94em;
}

.gh-content pre {
    overflow-x: auto;
    padding: 16px 20px;
    border: 2px solid var(--ink);
    font-size: 15px;
    line-height: 1.5;
}

.gh-content pre code {
    font-size: inherit;
}

.gh-content figcaption {
    margin-top: 8px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.4;
}

.gh-content img.kg-image,
.gh-content .kg-gallery-image img {
    border: 1px solid var(--ink);
}

.gh-content iframe {
    border: 0;
}

/* A bare table (pasted in the editor) scrolls inside its own box. Tables the theme draws use .table-scroll.
   The closing 2px rule belongs to the last row, so it scrolls with the table. */
.gh-content > table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

.gh-content > table tbody tr:last-child td,
.gh-content > table tbody tr:last-child th {
    border-bottom: 2px solid var(--ink);
}

/* Cells of an editor table hold times, prices and results, so they are set in the figure face. */
.gh-content table td {
    font-family: var(--font-figures);
    font-size: 16px;
}


/* 11. Koenig editor cards
   .kg-width-wide reaches the full content column. .kg-width-full reaches the full width of the
   page container, under the hanging column on wide screens. The theme asks Ghost for its card
   stylesheet (card_assets), which loads after this file, so the overrides below are scoped to
   .gh-content to win on specificity.
   -------------------------------------------------------------------------- */

.gh-content > .kg-width-wide,
.gh-content > .kg-width-full {
    max-width: none;
}

.gh-content > .kg-width-full {
    width: auto;
}

@media (min-width: 1100px) {
    .gh-content > .kg-width-full {
        margin-left: calc(-1 * (var(--hang) + var(--hang-gap)));
    }

    .entry--archive .gh-content > .kg-width-full {
        margin-left: 0;
    }
}

.kg-width-wide img,
.kg-width-full img {
    width: 100%;
}

/* Pairs of images keep the same gap as the page rows. */
.gh-content .kg-gallery-card,
.gh-content .kg-image-card {
    --gap: 12px;
}

/* Alternative blockquote: ruled above and below instead of centered italics. */
.gh-content blockquote.kg-blockquote-alt {
    padding: 24px 0;
    border-top: 2px solid var(--ink);
    border-right: 0;
    border-bottom: 2px solid var(--ink);
    border-left: 0;
    font-size: clamp(22px, 2.2vw, 30px);
    font-style: normal;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
    text-align: left;
}

/* Bookmark */
.gh-content .kg-bookmark-card a.kg-bookmark-container,
.gh-content .kg-bookmark-card a.kg-bookmark-container:hover {
    border: 2px solid var(--ink);
    border-radius: 0;
    background: var(--paper);
    color: var(--ink);
    text-decoration: none;
}

.gh-content .kg-bookmark-content {
    font-family: var(--font-text);
}

.gh-content .kg-bookmark-title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

.gh-content .kg-bookmark-container:hover .kg-bookmark-title {
    text-decoration-thickness: 3px;
}

.gh-content .kg-bookmark-description {
    color: var(--muted);
    font-size: 15px;
    opacity: 1;
}

.gh-content .kg-bookmark-metadata > *:not(img) {
    opacity: 1;
}

.gh-content .kg-bookmark-thumbnail img {
    border-radius: 0;
}

/* Button card */
.gh-content .kg-button-card a.kg-btn,
.gh-content .kg-button-card a.kg-btn-accent {
    height: auto;
    min-height: 52px;
    padding: 0 24px;
    border: 2px solid var(--ink);
    border-radius: 0;
    background-color: var(--ink);
    color: var(--paper);
    font-family: var(--font-text);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    transition: none;
}

.gh-content .kg-button-card a.kg-btn:hover {
    background-color: var(--paper);
    color: var(--ink);
    opacity: 1;
}

.gh-content .kg-button-card a.kg-btn:focus-visible {
    outline-color: var(--ink);
}

/* Callout: a ruled box, whatever color was picked in the editor. */
.gh-content .kg-callout-card {
    padding: 20px 24px;
    border: 2px solid var(--ink);
    border-radius: 0;
    color: var(--ink);
}

.gh-content .kg-callout-card-grey,
.gh-content .kg-callout-card-white,
.gh-content .kg-callout-card-blue,
.gh-content .kg-callout-card-green,
.gh-content .kg-callout-card-yellow,
.gh-content .kg-callout-card-red,
.gh-content .kg-callout-card-pink,
.gh-content .kg-callout-card-purple,
.gh-content .kg-callout-card-accent {
    background: transparent;
    box-shadow: none;
    color: var(--ink);
}

.gh-content .kg-callout-card.kg-callout-card-accent a {
    color: var(--link);
}

.gh-content .kg-callout-card div.kg-callout-text {
    font-size: 1em;
}

/* File */
.gh-content .kg-file-card a.kg-file-card-container,
.gh-content .kg-file-card a.kg-file-card-container:hover {
    border: 2px solid var(--ink);
    border-radius: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-text);
    transition: none;
}

.gh-content .kg-file-card-title {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

.gh-content .kg-file-card a.kg-file-card-container:hover .kg-file-card-title {
    text-decoration-thickness: 3px;
}

.gh-content .kg-file-card-caption,
.gh-content .kg-file-card-filesize {
    opacity: 1;
}

.gh-content .kg-file-card-icon:before {
    border-radius: 0;
}

.gh-content .kg-file-card-icon svg {
    color: var(--ink);
}

/* Toggle. Without JavaScript the toggle cannot open, so show every answer. */
.gh-content .kg-toggle-card {
    border: 2px solid var(--ink);
    border-radius: 0;
    box-shadow: none;
}

.gh-content .kg-toggle-heading svg {
    color: var(--ink);
}

@media (scripting: none) {
    .gh-content .kg-toggle-card[data-kg-toggle-state="close"] .kg-toggle-content {
        height: auto;
        overflow: visible;
        opacity: 1;
        top: 0;
    }
}

/* Other boxed cards: product, audio, NFT, call to action, signup, header. Square, ruled, flat. */
.gh-content .kg-product-card .kg-product-card-container,
.gh-content .kg-audio-card,
.gh-content .kg-cta-card,
.gh-content .kg-nft-card a.kg-nft-card-container {
    border: 2px solid var(--ink);
    border-radius: 0;
    box-shadow: none;
}

.gh-content .kg-cta-card.kg-cta-bg-grey,
.gh-content .kg-cta-card.kg-cta-bg-white,
.gh-content .kg-cta-card.kg-cta-bg-blue,
.gh-content .kg-cta-card.kg-cta-bg-green,
.gh-content .kg-cta-card.kg-cta-bg-yellow,
.gh-content .kg-cta-card.kg-cta-bg-red,
.gh-content .kg-cta-card.kg-cta-bg-pink,
.gh-content .kg-cta-card.kg-cta-bg-purple {
    background: transparent;
    box-shadow: none;
}

.gh-content .kg-product-card a.kg-product-card-button,
.gh-content .kg-cta-card a.kg-cta-button,
.gh-content .kg-header-card a.kg-header-card-button,
.gh-content .kg-header-card.kg-v2 .kg-header-card-button,
.gh-content .kg-signup-card-button,
.gh-content .kg-signup-card-fields,
.gh-content .kg-nft-image,
.gh-content .kg-audio-thumbnail,
.gh-content .kg-cta-image-container img {
    border-radius: 0;
}

.gh-content .kg-signup-card-form.error .kg-signup-card-fields {
    box-shadow: none;
}

.gh-content .kg-embed-card {
    max-width: 100%;
}


/* 12. Error pages
   -------------------------------------------------------------------------- */

.error {
    padding: clamp(48px, 8vw, 120px) 0 clamp(56px, 8vw, 120px);
}

.error__code {
    margin: 0 0 16px;
    font-family: var(--font-figures);
    font-size: 17px;
}

.error__message {
    font-size: clamp(44px, 8.4vw, 124px);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 0.94;
}

.error__link {
    margin: 32px 0 0;
    font-size: 21px;
}

.error__details {
    max-width: 880px;
    margin-top: 48px;
    padding: 24px 28px;
    border: 2px solid var(--ink);
}

.error__details-title {
    margin: 0 0 12px;
    font-size: 21px;
    font-weight: 800;
    line-height: 1.2;
}

.error__details ul {
    margin: 0;
    padding-left: 1.2em;
}


/* Small phones: give boxed content the room that 32px of padding would take. */
@media (max-width: 480px) {
    .tier {
        padding: 24px 20px;
    }

    .disclosure,
    .paywall,
    .error__details {
        padding: 20px;
    }

    .rules li {
        gap: 12px;
    }

    .rules__n {
        flex-basis: 28px;
    }
}


/* 13. Print
   The archive is the page people print. Let tables run across pages instead of scrolling.
   -------------------------------------------------------------------------- */

@media print {
    :root {
        --ink: #000000;
        --paper: #FFFFFF;
        --muted: #4D4D4D;
        --link: #000000;
        --visited: #000000;
    }

    body {
        min-height: 0;
        font-size: 11pt;
    }

    .skip-link,
    .site-nav,
    .hero__actions,
    .tier__actions,
    .paywall__actions,
    .pagination {
        display: none !important;
    }

    .table-scroll,
    .entry--archive .gh-content,
    .gh-content > table {
        overflow: visible;
    }

    .t,
    .gh-content table {
        min-width: 0;
    }

    .entry--archive .gh-content table th,
    .entry--archive .gh-content table td {
        white-space: normal;
    }

    /* A long trade log has to fit the paper width. */
    .t th,
    .t td,
    .t tbody th,
    .gh-content table th,
    .gh-content table td,
    .gh-content table tbody th {
        padding: 5px 8px 5px 0;
        font-size: 8.5pt;
    }

    thead {
        display: table-header-group;
    }

    tr,
    .disclosure,
    .tier,
    .row {
        break-inside: avoid;
    }
}


/* What we teach: blades (30 Oct). Each rule is a full-width bar; the open one is inverted and shows its body. */
.blades {
    border-top: 8px solid var(--ink);
}

.blade {
    border-bottom: 2px solid var(--ink);
}

.blade__bar {
    display: grid;
    grid-template-columns: 44px minmax(0, auto) minmax(0, 1fr) auto 24px;
    align-items: baseline;
    gap: 8px 20px;
    padding: 20px 16px;
    cursor: pointer;
    list-style: none;
}

.blade__bar::-webkit-details-marker {
    display: none;
}

.blade__bar:hover {
    background: var(--ink);
    color: var(--paper);
}

.blade[open] > .blade__bar {
    background: var(--ink);
    color: var(--paper);
}

.blade__bar:focus-visible {
    outline: 3px solid var(--ink);
    outline-offset: 3px;
}

.blade__n {
    font-family: var(--font-figures);
    font-size: 15px;
}

.blade__name {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.015em;
    line-height: 1.1;
    white-space: nowrap;
}

.blade__line {
    min-width: 0;
    font-size: 17px;
    line-height: 1.35;
}

.blade__meta {
    font-family: var(--font-figures);
    font-size: 14px;
    white-space: nowrap;
}

/* plus / minus drawn with two bars, so it inverts with the bar */
.blade__icon {
    position: relative;
    align-self: center;
    width: 18px;
    height: 18px;
}

.blade__icon::before,
.blade__icon::after {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 18px;
    height: 2px;
    background: currentColor;
}

.blade__icon::after {
    transform: rotate(90deg);
}

.blade[open] .blade__icon::after {
    display: none;
}

.blade__body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: 32px 48px;
    padding: 32px 16px 40px;
}

.blade__soon {
    margin: 0;
    padding: 20px;
    border: 2px solid var(--ink);
    text-wrap: pretty;
}

@media (max-width: 760px) {
    .blade__bar {
        grid-template-columns: 36px minmax(0, 1fr) 20px;
        padding: 18px 12px;
    }
    .blade__n { grid-row: 1; grid-column: 1; }
    .blade__name { grid-row: 1; grid-column: 2; font-size: 24px; white-space: normal; }
    .blade__icon { grid-row: 1; grid-column: 3; }
    .blade__line { grid-row: 2; grid-column: 2 / 4; font-size: 16px; }
    .blade__meta { grid-row: 3; grid-column: 2 / 4; }
    .blade__body { padding: 24px 12px 32px; }
}

@media print {
    .blade__body { display: grid; }
}


/* ==========================================================================
   30 Oct additions: light/dark switch, header tools, reading progress, background charts, lesson links and progress, FAQ
   ========================================================================== */

/* The switch: a saved choice beats the device setting in both directions. */
:root[data-theme="light"] {
    color-scheme: light;
    --ink: #000000;
    --paper: #FFFFFF;
    --muted: #4D4D4D;
    --link: #0000EE;
    --visited: #551A8B;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --ink: #FFFFFF;
    --paper: #000000;
    --muted: #B3B3B3;
    --link: #8AB4FF;
    --visited: #C9A2FF;
}

/* Header tools: search and the light/dark switch */
.nav--tools {
    display: flex;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tool {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
    padding: 0 10px;
    border: 2px solid transparent;
    background: none;
    color: var(--ink);
    font: inherit;
    cursor: pointer;
}

.tool:hover {
    border-color: var(--ink);
}

.tool:focus-visible {
    outline: 3px solid var(--ink);
    outline-offset: 2px;
}

.tool__kbd {
    font-family: var(--font-figures);
    font-size: 13px;
    color: var(--muted);
}

@media (max-width: 640px) {
    .tool__kbd { display: none; }
}

/* Reading progress: a 2px rule across the top of posts */
.progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    height: 3px;
    background: var(--ink);
    transform: scaleX(0);
    transform-origin: 0 50%;
    pointer-events: none;
}

/* Background charts: decorative, behind the content, never in the way */
.hero,
.section--rules,
.entry-head--bg {
    position: relative;
    isolation: isolate;
}

.bgc {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    color: var(--ink);
}

.bgc svg {
    display: block;
    width: 100%;
    height: 100%;
}

.bgc--hero {
    opacity: 0.16;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18%, #000 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 18%, #000 100%);
}

.bgc__grid { stroke: currentColor; stroke-opacity: 0.35; stroke-width: 1; vector-effect: non-scaling-stroke; }
.bgc__sep { stroke: currentColor; stroke-opacity: 0.5; stroke-width: 1; stroke-dasharray: 2 6; vector-effect: non-scaling-stroke; }
.bgc__area { fill: currentColor; fill-opacity: 0.07; }
.bgc__line {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    vector-effect: non-scaling-stroke;
    stroke-linejoin: round;
}
/* the chart reveals left to right once, like a session printing */
.bgc--hero svg {
    animation: bgc-draw 5s cubic-bezier(.2, .6, .2, 1) both;
}
.bgc__dot {
    fill: currentColor;
    transform-box: fill-box;
    transform-origin: center;
    animation: bgc-pulse 2.4s ease-in-out 5s infinite;
}

@keyframes bgc-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes bgc-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.2; transform: scale(2.2); } }

.bgc--map {
    opacity: 0;
    transition: opacity 1.2s ease;
}
.bgc--map.is-in { opacity: 0.1; }
.bgc__wick { stroke: currentColor; stroke-width: 1; }
.bgc__up { fill: none; stroke: currentColor; stroke-width: 1; }
.bgc__dn { fill: currentColor; }
.bgc__lvl { stroke: currentColor; stroke-width: 1.5; stroke-dasharray: 6 4; }
.bgc__lvl--ch { stroke-width: 2.5; }
.bgc__zone { fill: currentColor; fill-opacity: 0.25; }
.bgc__pt { fill: currentColor; }
.bgc__lbl { fill: currentColor; font-family: var(--font-figures); font-size: 15px; }

/* page headers of the menu pages (partials/bg-*.hbs, from record-page/section_backgrounds.py): the House rules marks,
   clear behind the title on the left */
.bgc--fade {
    opacity: 0;
    transition: opacity 1.2s ease;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40%, #000 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 40%, #000 100%);
}
.bgc--fade.is-in { opacity: 0.1; }
.bgc__box { fill: none; stroke: currentColor; stroke-width: 1.5; }
.bgc__link { stroke: currentColor; stroke-width: 1.5; }
.bgc__bar { fill: currentColor; fill-opacity: 0.5; }
.bgc--help .bgc__dot { animation-delay: 1.2s; }

@media (scripting: none) {
    .bgc--map { opacity: 0.1; }
    .bgc--fade { opacity: 0.1; }
}

@media (prefers-reduced-motion: reduce) {
    .bgc--hero svg, .bgc__dot { animation: none; }
    .bgc--map, .bgc--fade { transition: none; }
}

/* House rules sit over the chart: give the text a solid footing */
.section--rules .rules li {
    background: linear-gradient(to right, var(--paper) 0, var(--paper) 60%, transparent 100%);
}

/* Lessons are links now; ticks for the ones opened in this browser */
.lessons a.lessons__t {
    color: inherit;
    text-decoration: none;
}
.lessons a.lessons__t:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
.lessons a.is-read::after,
.gh-content ol a.is-read::after {
    content: "\2713";
    margin-left: 8px;
    font-family: var(--font-figures);
    font-size: 0.85em;
}
.blade__progress {
    margin-left: 12px;
}
.blade__progress::before {
    content: "\00b7\00a0";
}

/* FAQ blades: no number, question as the name, plain answer below */
.blade--faq .blade__bar {
    grid-template-columns: minmax(0, 1fr) 24px;
}
.blade--faq .blade__name {
    font-size: clamp(19px, 2vw, 22px);
    font-weight: 700;
    white-space: normal;
}
.blade__answer {
    max-width: 62ch;
    padding: 20px 16px 28px;
}
.blade__answer p {
    margin: 0;
    font-size: 18px;
    line-height: 1.5;
}
@media (max-width: 760px) {
    .blade--faq .blade__bar { grid-template-columns: minmax(0, 1fr) 20px; }
    .blade--faq .blade__name { grid-row: 1; grid-column: 1; font-size: 19px; }
    .blade--faq .blade__icon { grid-row: 1; grid-column: 2; }
}

/* The ledger (page-ledger.hbs): hashes as compact buttons that open to the full 64 characters, the check result as a tape. */
.ledger section { margin-top: clamp(32px, 5vw, 56px); }
.ledger__hash { font: inherit; font-family: var(--font-figures, ui-monospace, Menlo, monospace); background: none; border: 0; padding: 4px 0;
    min-height: 24px; color: inherit; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.ledger__full { font-family: var(--font-figures, ui-monospace, Menlo, monospace); word-break: break-all; font-size: .85em; }
.ledger__result { margin: 12px 0 0; padding: 12px 16px; border: 2px solid var(--ink); white-space: pre-wrap; min-height: 3em;
    font-family: var(--font-figures, ui-monospace, Menlo, monospace); font-size: 14px; line-height: 1.5; }
.ledger__result:empty { display: none; }
.t--ledger { min-width: 640px; }
.t--ledger td.n { white-space: nowrap; }

/* Telegram alerts box (page-daily-read.hbs, paid members; assets/js/alerts.js). */
.alerts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: 0 0 clamp(24px, 4vw, 40px);
    padding: 16px 20px; border: 2px solid var(--ink); }
.alerts__text { flex: 1 1 320px; margin: 0; font-size: 17px; line-height: 1.45; }
.alerts__btn { flex: 0 0 auto; }
.alerts__msg { flex: 1 1 100%; margin: 0; color: var(--muted); font-size: 15px; }
.alerts__msg:empty { display: none; }
.alerts[hidden], .alerts__btn[hidden] { display: none; }
.alerts + .alerts--pdfs, .alerts + .alerts--push { margin-top: calc(-1 * clamp(12px, 2vw, 24px)); }

/* Daily read, Detail column: {{content}} hands over the post's own headings, lists and charts, cut at a word count.
   Only the opening paragraph shows (plus The Close's Position and Position closed lines, marked by site.js), so every row reads the same. */
.dr__detail > * { display: none; }
.dr__detail > p:first-of-type,
.dr__detail > .dr__also { display: inline; margin: 0; font: inherit; }
.dr__detail > .tag--outcome { display: inline-block; }
.dr__detail strong { font-weight: inherit; }
@media (min-width: 641px) {
    .dr > td:nth-child(2) { white-space: nowrap; }
    .dr > td:nth-child(3) { width: 30%; }
}

/* RULE-BACKGROUNDS:BEGIN (generated by record-page/rule_backgrounds.py) */
/* Faint per-rule charts from real MNQ bars: open: session of 2026-10-22; close: 70 daily closes around the dip of 2026-07-28 (-3.5% in 3 days); map: session of 2026-10-29, 15 swings. Drawn in the ink colour through a mask. */
.t--record tr.dr { position: relative; }
.rbg { position: absolute; inset: 0; pointer-events: none; background: var(--ink); opacity: .07; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.entry .entry-head { position: relative; isolation: isolate; }
.entry .entry-head > .rbg { z-index: -1; opacity: .09; }
.rbg--open { -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 120' preserveAspectRatio='none' fill='none' stroke='black' stroke-linejoin='round' stroke-linecap='round'><path d='M8,8.0 H592' stroke-width='1' stroke-dasharray='3 5'/><path d='M8,35.5 H592' stroke-width='1' stroke-dasharray='3 5'/><path d='M45.9,8 V112' stroke-width='1' stroke-dasharray='1 4'/><path d='M8.0,14.6 L15.6,15.6 L23.2,18.0 L30.8,22.2 L38.3,21.7 L45.9,13.5 L53.5,10.3 L61.1,22.2 L68.7,30.6 L76.3,31.6 L83.8,42.3 L91.4,51.2 L99.0,61.5 L106.6,64.2 L114.2,64.0 L121.8,66.7 L129.4,65.1 L136.9,61.9 L144.5,68.8 L152.1,70.6 L159.7,75.1 L167.3,63.6 L174.9,51.9 L182.4,65.6 L190.0,67.1 L197.6,66.7 L205.2,68.3 L212.8,68.4 L220.4,61.0 L227.9,54.6 L235.5,54.8 L243.1,51.8 L250.7,52.2 L258.3,50.3 L265.9,51.1 L273.5,55.6 L281.0,68.4 L288.6,70.3 L296.2,79.1 L303.8,90.6 L311.4,84.9 L319.0,75.9 L326.5,88.7 L334.1,87.8 L341.7,83.7 L349.3,82.1 L356.9,79.9 L364.5,82.1 L372.1,76.7 L379.6,80.5 L387.2,78.2 L394.8,86.5 L402.4,87.8 L410.0,92.6 L417.6,103.4 L425.1,97.1 L432.7,95.9 L440.3,85.1 L447.9,87.6 L455.5,100.0 L463.1,103.6 L470.6,104.2 L478.2,99.7 L485.8,104.5 L493.4,104.9 L501.0,108.5 L508.6,106.9 L516.2,109.1 L523.7,104.3 L531.3,102.5 L538.9,98.8 L546.5,93.7 L554.1,106.9 L561.7,112.0 L569.2,111.9 L576.8,110.2 L584.4,94.0 L592.0,95.1' stroke-width='2'/></svg>"); mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 120' preserveAspectRatio='none' fill='none' stroke='black' stroke-linejoin='round' stroke-linecap='round'><path d='M8,8.0 H592' stroke-width='1' stroke-dasharray='3 5'/><path d='M8,35.5 H592' stroke-width='1' stroke-dasharray='3 5'/><path d='M45.9,8 V112' stroke-width='1' stroke-dasharray='1 4'/><path d='M8.0,14.6 L15.6,15.6 L23.2,18.0 L30.8,22.2 L38.3,21.7 L45.9,13.5 L53.5,10.3 L61.1,22.2 L68.7,30.6 L76.3,31.6 L83.8,42.3 L91.4,51.2 L99.0,61.5 L106.6,64.2 L114.2,64.0 L121.8,66.7 L129.4,65.1 L136.9,61.9 L144.5,68.8 L152.1,70.6 L159.7,75.1 L167.3,63.6 L174.9,51.9 L182.4,65.6 L190.0,67.1 L197.6,66.7 L205.2,68.3 L212.8,68.4 L220.4,61.0 L227.9,54.6 L235.5,54.8 L243.1,51.8 L250.7,52.2 L258.3,50.3 L265.9,51.1 L273.5,55.6 L281.0,68.4 L288.6,70.3 L296.2,79.1 L303.8,90.6 L311.4,84.9 L319.0,75.9 L326.5,88.7 L334.1,87.8 L341.7,83.7 L349.3,82.1 L356.9,79.9 L364.5,82.1 L372.1,76.7 L379.6,80.5 L387.2,78.2 L394.8,86.5 L402.4,87.8 L410.0,92.6 L417.6,103.4 L425.1,97.1 L432.7,95.9 L440.3,85.1 L447.9,87.6 L455.5,100.0 L463.1,103.6 L470.6,104.2 L478.2,99.7 L485.8,104.5 L493.4,104.9 L501.0,108.5 L508.6,106.9 L516.2,109.1 L523.7,104.3 L531.3,102.5 L538.9,98.8 L546.5,93.7 L554.1,106.9 L561.7,112.0 L569.2,111.9 L576.8,110.2 L584.4,94.0 L592.0,95.1' stroke-width='2'/></svg>"); }
.rbg--close { -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 120' preserveAspectRatio='none' fill='none' stroke='black' stroke-linejoin='round' stroke-linecap='round'><path d='M8.0,91.4 L16.5,81.1 L24.9,64.7 L33.4,65.6 L41.9,47.2 L50.3,44.6 L58.8,51.8 L67.2,43.0 L75.7,37.1 L84.2,50.0 L92.6,53.9 L101.1,58.8 L109.6,45.5 L118.0,43.9 L126.5,40.8 L135.0,26.1 L143.4,26.9 L151.9,19.5 L160.3,16.7 L168.8,12.2 L177.3,8.0 L185.7,10.3 L194.2,14.4 L202.7,55.9 L211.1,43.7 L219.6,53.3 L228.1,69.3 L236.5,43.4 L245.0,37.8 L253.4,12.0 L261.9,27.6 L270.4,36.6 L278.8,16.1 L287.3,18.0 L295.8,46.0 L304.2,50.3 L312.7,44.4 L321.2,54.5 L329.6,35.0 L338.1,21.7 L346.6,33.9 L355.0,49.1 L363.5,38.2 L371.9,53.8 L380.4,51.6 L388.9,38.3 L397.3,35.6 L405.8,51.4 L414.3,42.5 L422.7,45.3 L431.2,58.5 L439.7,71.4 L448.1,71.2 L456.6,56.0 L465.0,59.8 L473.5,75.7 L482.0,85.3 L490.4,87.9 L498.9,95.5 L507.4,112.0 L515.8,86.6 L524.3,81.8 L532.8,68.0 L541.2,40.4 L549.7,47.5 L558.1,51.1 L566.6,41.2 L575.1,44.0 L583.5,47.2 L592.0,40.7' stroke-width='2'/><circle cx='507.4' cy='112.0' r='4' fill='black' stroke='none'/></svg>"); mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 120' preserveAspectRatio='none' fill='none' stroke='black' stroke-linejoin='round' stroke-linecap='round'><path d='M8.0,91.4 L16.5,81.1 L24.9,64.7 L33.4,65.6 L41.9,47.2 L50.3,44.6 L58.8,51.8 L67.2,43.0 L75.7,37.1 L84.2,50.0 L92.6,53.9 L101.1,58.8 L109.6,45.5 L118.0,43.9 L126.5,40.8 L135.0,26.1 L143.4,26.9 L151.9,19.5 L160.3,16.7 L168.8,12.2 L177.3,8.0 L185.7,10.3 L194.2,14.4 L202.7,55.9 L211.1,43.7 L219.6,53.3 L228.1,69.3 L236.5,43.4 L245.0,37.8 L253.4,12.0 L261.9,27.6 L270.4,36.6 L278.8,16.1 L287.3,18.0 L295.8,46.0 L304.2,50.3 L312.7,44.4 L321.2,54.5 L329.6,35.0 L338.1,21.7 L346.6,33.9 L355.0,49.1 L363.5,38.2 L371.9,53.8 L380.4,51.6 L388.9,38.3 L397.3,35.6 L405.8,51.4 L414.3,42.5 L422.7,45.3 L431.2,58.5 L439.7,71.4 L448.1,71.2 L456.6,56.0 L465.0,59.8 L473.5,75.7 L482.0,85.3 L490.4,87.9 L498.9,95.5 L507.4,112.0 L515.8,86.6 L524.3,81.8 L532.8,68.0 L541.2,40.4 L549.7,47.5 L558.1,51.1 L566.6,41.2 L575.1,44.0 L583.5,47.2 L592.0,40.7' stroke-width='2'/><circle cx='507.4' cy='112.0' r='4' fill='black' stroke='none'/></svg>"); }
.rbg--map { -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 120' preserveAspectRatio='none' fill='none' stroke='black' stroke-linejoin='round' stroke-linecap='round'><path d='M8.0,100.7 L15.6,96.7 L23.2,56.9 L30.8,94.2 L38.3,89.5 L45.9,57.9 L53.5,30.8 L61.1,52.5 L68.7,56.5 L76.3,39.4 L83.8,42.3 L91.4,47.6 L99.0,29.5 L106.6,33.7 L114.2,46.2 L121.8,86.8 L129.4,75.3 L136.9,65.7 L144.5,47.9 L152.1,38.8 L159.7,32.5 L167.3,39.3 L174.9,30.9 L182.4,31.6 L190.0,15.4 L197.6,24.9 L205.2,24.8 L212.8,40.3 L220.4,33.9 L227.9,16.1 L235.5,33.4 L243.1,39.9 L250.7,52.0 L258.3,49.5 L265.9,57.2 L273.5,49.8 L281.0,59.7 L288.6,54.7 L296.2,51.6 L303.8,60.1 L311.4,52.9 L319.0,40.9 L326.5,52.7 L334.1,62.2 L341.7,77.9 L349.3,69.9 L356.9,70.0 L364.5,65.1 L372.1,68.3 L379.6,70.2 L387.2,72.9 L394.8,82.1 L402.4,99.4 L410.0,90.6 L417.6,94.7 L425.1,85.4 L432.7,82.3 L440.3,85.9 L447.9,82.2 L455.5,87.3 L463.1,100.0 L470.6,101.9 L478.2,98.4 L485.8,96.3 L493.4,87.1 L501.0,89.9 L508.6,83.9 L516.2,91.1 L523.7,94.8 L531.3,89.1 L538.9,82.7 L546.5,78.6 L554.1,67.8 L561.7,80.8 L569.2,85.3 L576.8,74.3 L584.4,61.9 L592.0,50.7' stroke-width='1' stroke-opacity='.6'/><path d='M53.5,26.2 L129.4,96.3 L190.0,8.0 L220.4,46.0 L235.5,15.0 L281.0,68.6 L319.0,35.8 L349.3,79.8 L372.1,58.9 L402.4,101.5 L440.3,78.2 L478.2,105.3 L508.6,79.7 L523.7,98.3 L554.1,64.0' stroke-width='2'/><path d='M554.1,64.0 H584.4' stroke-width='1.5' stroke-dasharray='4 4'/></svg>"); mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 120' preserveAspectRatio='none' fill='none' stroke='black' stroke-linejoin='round' stroke-linecap='round'><path d='M8.0,100.7 L15.6,96.7 L23.2,56.9 L30.8,94.2 L38.3,89.5 L45.9,57.9 L53.5,30.8 L61.1,52.5 L68.7,56.5 L76.3,39.4 L83.8,42.3 L91.4,47.6 L99.0,29.5 L106.6,33.7 L114.2,46.2 L121.8,86.8 L129.4,75.3 L136.9,65.7 L144.5,47.9 L152.1,38.8 L159.7,32.5 L167.3,39.3 L174.9,30.9 L182.4,31.6 L190.0,15.4 L197.6,24.9 L205.2,24.8 L212.8,40.3 L220.4,33.9 L227.9,16.1 L235.5,33.4 L243.1,39.9 L250.7,52.0 L258.3,49.5 L265.9,57.2 L273.5,49.8 L281.0,59.7 L288.6,54.7 L296.2,51.6 L303.8,60.1 L311.4,52.9 L319.0,40.9 L326.5,52.7 L334.1,62.2 L341.7,77.9 L349.3,69.9 L356.9,70.0 L364.5,65.1 L372.1,68.3 L379.6,70.2 L387.2,72.9 L394.8,82.1 L402.4,99.4 L410.0,90.6 L417.6,94.7 L425.1,85.4 L432.7,82.3 L440.3,85.9 L447.9,82.2 L455.5,87.3 L463.1,100.0 L470.6,101.9 L478.2,98.4 L485.8,96.3 L493.4,87.1 L501.0,89.9 L508.6,83.9 L516.2,91.1 L523.7,94.8 L531.3,89.1 L538.9,82.7 L546.5,78.6 L554.1,67.8 L561.7,80.8 L569.2,85.3 L576.8,74.3 L584.4,61.9 L592.0,50.7' stroke-width='1' stroke-opacity='.6'/><path d='M53.5,26.2 L129.4,96.3 L190.0,8.0 L220.4,46.0 L235.5,15.0 L281.0,68.6 L319.0,35.8 L349.3,79.8 L372.1,58.9 L402.4,101.5 L440.3,78.2 L478.2,105.3 L508.6,79.7 L523.7,98.3 L554.1,64.0' stroke-width='2'/><path d='M554.1,64.0 H584.4' stroke-width='1.5' stroke-dasharray='4 4'/></svg>"); }
/* RULE-BACKGROUNDS:END */

/* Method page (/method/, page-method.hbs, generated by method-page/build.py): one block per course, its lessons open */
.method-course { margin: 0 0 clamp(40px, 6vw, 64px); }
.method-course__n { margin: 0 0 4px; font-family: var(--font-figures); font-size: 15px; color: var(--muted); }
.method-course__name { margin: 0 0 6px; font-size: clamp(28px, 4vw, 36px); font-weight: 800; letter-spacing: -0.015em; line-height: 1.1; }
.method-course__line { margin: 0 0 8px; font-size: 18px; }
.method-course__meta { margin: 0 0 4px; font-size: 15px; color: var(--muted); }
.method-course__meta .blade__progress { margin-left: 8px; }
.method-course__links { margin: 0 0 16px; font-size: 16px; font-weight: 600; }
.tag--locked { color: var(--muted); border-color: var(--muted); }

/* Waitlist card (partials/waitlist.hbs, theme setting "Waitlist mode"): Ghost's free signup form, square like the buttons. */
.waitlist { margin-top: auto; }
.waitlist__row { display: flex; flex-wrap: wrap; gap: 12px; }
.waitlist__email { flex: 1 1 240px; min-width: 0; min-height: 52px; padding: 0 16px; border: 2px solid var(--ink); border-radius: 0;
    background: var(--paper); color: var(--ink); font-family: inherit; font-size: 17px; }
.waitlist__email:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
.waitlist .btn { flex: 0 0 auto; }
.waitlist.loading .btn { opacity: .6; cursor: progress; }
.waitlist__msg { display: none; margin: 12px 0 0; font-size: 15px; line-height: 1.45; }
.waitlist.success .waitlist__msg--success,
.waitlist.error .waitlist__msg--error { display: block; }
.waitlist.success .waitlist__row { display: none; }
.waitlist__on { margin: 0; padding: 12px 0 0; font-weight: 600; }

/* Lesson simulators (assets/js/sims.js): the controls it adds above a still figure. Square, like the buttons. */
.sim__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 0 0 16px; font-size: 16px; }
.sim__field { display: inline-flex; align-items: center; gap: 8px; }
.sim__field input[type="range"] { width: 150px; accent-color: var(--ink); }
.sim__field output { min-width: 4ch; font-family: var(--font-figures); }
.sim__seg { min-height: 44px; padding: 0 14px; border: 2px solid var(--ink); border-radius: 0; background: var(--paper); color: var(--ink);
    font-family: inherit; font-size: 16px; cursor: pointer; }
.sim__seg + .sim__seg { margin-left: -2px; }
.sim__seg[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.sim__seg:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; position: relative; }
.sim__controls .btn { min-height: 44px; }
.sim__seg:disabled, .sim__controls .btn:disabled { opacity: .45; cursor: default; }
.sim__ask { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.sim__ask .sim__q { flex: 1 0 100%; margin: 0; font-weight: 700; }
.sim__ask .sim__seg + .sim__seg { margin-left: 0; }
.sim__seg.is-right, .check__opt.is-right { background: var(--ink); color: var(--paper); opacity: 1; }
.sim__seg.is-wrong, .check__opt.is-wrong { text-decoration: line-through; opacity: 1; }
figure[data-sim] svg { touch-action: pan-y; }
.sim__grab, .sim__handle { cursor: ns-resize; touch-action: none; }

/* Size calculators (sims.js, data-sim="size-*") */
.calc { margin: 16px 0 0; padding: 16px 0 0; border-top: 1px solid var(--ink); }
.calc__h { margin: 0 0 8px; font-weight: 700; }
.calc__f { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 10px; font-size: 16px; }
.calc__f span { flex: 1 0 100%; font-size: 15px; color: var(--muted); }
.calc__f input, .calc__f select { min-height: 44px; padding: 0 12px; border: 2px solid var(--ink); border-radius: 0; background: var(--paper); color: var(--ink);
    font-family: var(--font-figures); font-size: 16px; max-width: 100%; }
.calc__f input { width: 10ch; }
.calc__f em { font-style: normal; font-size: 15px; color: var(--muted); }
.calc__quick { display: flex; gap: 0; margin: -4px 0 10px; }
.calc__out { margin: 12px 0 0; font-size: 17px; line-height: 1.45; }

/* Check yourself (bowtie-site/checks.py): options become buttons */
.check__opts { list-style: none; padding-left: 0 !important; }
.check__opts li + li { margin-top: 6px; }
.check__opt { display: block; width: 100%; min-height: 44px; padding: 8px 12px; border: 2px solid var(--ink); border-radius: 0; background: var(--paper); color: var(--ink);
    font-family: inherit; font-size: 16px; line-height: 1.35; text-align: left; cursor: pointer; }
.check__opt:disabled { cursor: default; opacity: .55; }
.check__opt:focus-visible, .calc__f input:focus-visible, .calc__f select:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }

.check__opt.is-right:disabled, .check__opt.is-wrong:disabled, .sim__seg.is-right:disabled, .sim__seg.is-wrong:disabled { opacity: 1; }


/* ==========================================================================
   2 Nov 2026 additions (theme 1.4.0): editorial rhythm, the phone masthead, a kinder dark, outcome tags, day headers,
   the member's day, start here, figures, the lesson rail, the paywall, the Today box, print.
   ========================================================================== */

/* Dark: paper, not pitch; the hero chart visible on black. Applies to the device setting and the saved choice. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { --ink: #F2F2F2; --paper: #0A0A0A; --muted: #A6A6A6; --link: #9DC1FF; --visited: #CDB2FF; }
    :root:not([data-theme="light"]) .bgc--hero { opacity: 0.28; }
    :root:not([data-theme="light"]) .bgc--map.is-in, :root:not([data-theme="light"]) .bgc--fade.is-in { opacity: 0.16; }
}
:root[data-theme="dark"] { --ink: #F2F2F2; --paper: #0A0A0A; --muted: #A6A6A6; --link: #9DC1FF; --visited: #CDB2FF; }
:root[data-theme="dark"] .bgc--hero { opacity: 0.28; }
:root[data-theme="dark"] .bgc--map.is-in, :root[data-theme="dark"] .bgc--fade.is-in { opacity: 0.16; }

/* The hero line draws itself once per visit; later pages in the same tab show it at rest. The dot pulses eight times, then rests. */
html[data-seen] .bgc--hero svg { animation: none; }
html[data-seen] .bgc__dot { animation-delay: 0s; }
.bgc__dot { animation-iteration-count: 8; }

/* Mono running heads, separators, status lines */
.status__sep, .dateline__sep { display: inline-block; margin: 0 0.6em; opacity: 0.6; }
.running-head { margin: 0 0 12px; font-family: var(--font-figures); font-size: 13px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.running-head sup { letter-spacing: 0; }
.running-head sup a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
.status { margin: 0 0 16px; padding: 10px 0; border-top: 1px solid var(--ink); font-family: var(--font-figures); font-size: 14px; line-height: 1.5; color: var(--muted); }
.status time { color: var(--ink); white-space: nowrap; }
.dateline { display: block; margin: 0 0 clamp(24px, 4vw, 48px); font-family: var(--font-figures); font-size: 14px; line-height: 1.5; color: var(--muted); }
.dateline time { color: var(--ink); white-space: nowrap; }
.dateline .tag { font-family: var(--font-text); font-size: 12px; line-height: 1.4; padding: 0 6px; margin-right: 0.4em; vertical-align: 1px; }

/* Hero: the lead and its gloss */
.hero__text { flex: 1 1 32ch; min-width: 0; max-width: 56ch; }
.hero__gloss { max-width: 60ch; margin: 28px 0 0; padding-top: 14px; border-top: 1px solid var(--ink); font-size: 16px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.hero__gloss strong { color: var(--ink); }
.hero__actions { align-self: flex-end; }

/* The hanging column gets a job: a mono section number and a marginal note */
.section-n { display: block; margin: 0 0 10px; font-family: var(--font-figures); font-size: 13px; font-weight: 500; letter-spacing: 0.08em; color: var(--muted); }
.hang__note { max-width: 26ch; margin: 16px 0 0; font-size: 15px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
.hang__note a { color: inherit; }
.table-foot--left { justify-content: flex-start; }

/* A member's day: the clock in the left cell, one sentence each */
.day { margin: 0; padding: 0; border-top: 2px solid var(--ink); list-style: none; }
.day li { display: grid; grid-template-columns: 11em minmax(0, 1fr); gap: 4px 24px; padding: 18px 0; border-bottom: 1px solid var(--ink); }
.day li:last-child { border-bottom-width: 2px; }
.day__when { font-family: var(--font-figures); font-size: 15px; line-height: 1.6; }
.day__what { max-width: 60ch; font-size: 17px; line-height: 1.5; text-wrap: pretty; }
@media (max-width: 560px) { .day li { grid-template-columns: minmax(0, 1fr); } .day__when { color: var(--muted); } }

/* Start here: a numbered path */
.start { margin: 0; padding: 0; border-top: 2px solid var(--ink); list-style: none; }
.start li { display: flex; align-items: baseline; gap: 16px 20px; padding: 14px 0; border-bottom: 1px solid var(--ink); }
.start li:last-child { border-bottom-width: 2px; }
.start__n { flex: 0 0 2.2em; font-family: var(--font-figures); font-size: 14px; font-weight: 500; }
.start__body { flex: 1 1 24ch; min-width: 0; }
.start__t { display: block; font-size: 20px; font-weight: 700; line-height: 1.25; color: inherit; text-decoration: none; }
.start__t:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.start__d { display: block; margin-top: 4px; font-size: 16px; line-height: 1.45; color: var(--muted); max-width: 60ch; }
.start__k { flex: 0 0 auto; font-family: var(--font-figures); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.notes-start { margin: 0 0 clamp(40px, 6vw, 64px); }
.notes-start__title, .notes-all { margin: 0 0 16px; font-size: 24px; font-weight: 800; letter-spacing: -0.015em; line-height: 1.1; }

/* Figures: the headline numbers set large in mono, above the table they summarise */
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 0; margin: 0 0 32px; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink); }
.figures__item { padding: 14px 24px 16px 0; }
.figures__item + .figures__item { padding-left: 24px; border-left: 1px solid var(--ink); }
.figures dt { margin: 0 0 6px; font-size: 14px; line-height: 1.3; color: var(--muted); }
.figures dd { margin: 0; font-family: var(--font-figures); font-size: clamp(34px, 3.6vw, 52px); font-weight: 500; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.figures dd small { font-size: 0.42em; color: var(--muted); margin-left: 1px; vertical-align: 0.22em; }
.plain-words { max-width: 68ch; margin: 16px 0 24px; font-size: 16px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.plain-words strong { color: var(--ink); font-weight: 700; }
.archive-link { font-size: 17px; }

/* Outcome tags in the record rows (site.js) and the in-sample tag */
.tag--outcome { margin-right: 8px; vertical-align: baseline; font-family: var(--font-figures); font-weight: 500; font-size: 13px; }
.tag--quiet { border-color: var(--muted); color: var(--muted); }
.tag--pos { background: var(--ink); color: var(--paper); }
.tag--pts { font-variant-numeric: tabular-nums; }
.tag--neg { text-decoration: none; border-style: dashed; }
.t th .tag--locked { margin-left: 8px; font-size: 12px; vertical-align: middle; }

/* Day headers in the record tables (site.js) */
.t__day th { padding: 30px 0 6px; border-bottom: 1px solid var(--ink); font-family: var(--font-figures); font-size: 13px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.t tbody tr.t__day:first-child th { padding-top: 12px; }
@media (min-width: 641px) { .t--record { min-width: 560px; } }
@media (max-width: 640px) {
    .t--record .t__day, .t--record .t__day th { display: block; }
    .t--record .t__day { padding: 0; border: 0; }
    .t--record .t__day th { padding: 24px 0 8px; }
    .t--record tr.t__day + tr { border-top: 0; }
}

/* The numbers table stacks on phones like the record: no sideways scroll */
@media (max-width: 640px) {
    .t--numbers { min-width: 0; }
    .t--numbers thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
    .t--numbers, .t--numbers tbody, .t--numbers tr, .t--numbers td, .t--numbers tbody th { display: block; }
    .t--numbers tbody { border-top: 2px solid var(--ink); }
    .t--numbers tr { padding: 16px 0; border-bottom: 1px solid var(--ink); }
    .t--numbers tbody tr:last-child { border-bottom: 0; }
    .t--numbers td, .t--numbers tbody th { padding: 0; border: 0; }
    .t--numbers td + td, .t--numbers th + td { margin-top: 4px; }
    .t--numbers td.n { font-size: 14px; color: var(--muted); }
    .t--numbers td.n::before { content: attr(data-label) ": "; font-family: var(--font-text); }
}

/* Waitlist card, redrawn: the opening as the figure, two columns under the form */
.tiers--wait { grid-template-columns: minmax(0, 1fr); }
.tier--wait { max-width: 880px; gap: 24px; }
.tier__head { display: grid; gap: 8px; }
.tier__kicker { margin: 0; font-family: var(--font-figures); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.tier__opens { margin: 0; }
.tier__k { display: block; font-size: 15px; color: var(--muted); }
.tier__big { display: block; padding-bottom: 10px; border-bottom: 1px solid var(--ink); font-size: clamp(36px, 4vw, 52px); font-weight: 800; letter-spacing: -0.025em; line-height: 1; }
.tier__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px 40px; }
.tier__h { margin: 0 0 4px; font-family: var(--font-figures); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.tier__cols .tier__list li { padding: 10px 0; font-size: 17px; }
.waitlist__label { display: block; margin: 0 0 6px; font-size: 15px; font-weight: 700; }
.waitlist__email::placeholder { color: var(--muted); opacity: 1; }
@media (max-width: 480px) { .waitlist .btn { flex: 1 1 100%; } }

/* The paywall, with the lesson's place and the free path */
.paywall .running-head { margin-bottom: 8px; }
.paywall__text { max-width: 60ch; margin: 0 0 12px; font-size: 17px; line-height: 1.5; text-wrap: pretty; }
.paywall__free { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 20px; font-size: 16px; }
.paywall__free a { font-weight: 600; }

/* Lesson rail: position in the course and the neighbours (site.js) */
.lesson-rail { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 24px; padding: 10px 0; border-top: 1px solid var(--ink); font-size: 16px; }
.lesson-rail__pos { font-family: var(--font-figures); font-size: 14px; color: var(--muted); flex: 0 1 auto; }
@media (max-width: 640px) { .lesson-rail__pos { flex: 1 1 100%; } }
.lesson-rail__prev, .lesson-rail__next { font-weight: 600; }
.lesson-rail__next { margin-left: auto; text-align: right; }
@media (min-width: 1100px) { .lesson-rail { grid-column: 2; } .entry .lesson-rail { margin-left: calc(var(--hang) + var(--hang-gap)); } }

/* How to read this post: a quiet blade under a read */
.howto { max-width: 880px; margin: 40px 0 0; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.howto__bar { padding: 14px 0; font-weight: 700; cursor: pointer; list-style: none; }
.howto__bar::-webkit-details-marker { display: none; }
.howto__bar::before { content: "+"; display: inline-block; width: 1.4em; font-family: var(--font-figures); }
.howto[open] .howto__bar::before { content: "−"; }
.howto__body { padding: 0 0 20px 1.4em; }
.howto__body p { max-width: 62ch; margin: 0 0 12px; font-size: 17px; line-height: 1.5; }
.seal { margin: 16px 0 0; font-family: var(--font-figures); font-size: 14px; color: var(--muted); }

/* Today, on the daily read (site.js) */
.today { margin: 0 0 clamp(24px, 4vw, 40px); padding: 16px 20px; border: 2px solid var(--ink); }
.today__h { margin: 0 0 8px; font-family: var(--font-figures); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.today__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.today__list li { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); font-size: 17px; line-height: 1.45; }
.today__list strong { display: inline-block; min-width: 6.5em; }

/* The record page: a wall between the live table and the backtest body */
.record-divider { margin: clamp(40px, 6vw, 72px) 0 24px; padding: 10px 0; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.record-divider .running-head { margin: 0; }

/* Footer colophon */
.footer-colophon { margin: 40px 0 8px; font-family: var(--font-figures); font-size: 13px; line-height: 1.6; color: var(--muted); }
.footer-copy { margin-top: 0; }

/* Tap targets: the whole lesson row text, hashes, range thumbs */
.lessons li { padding: 0; }
.lessons__n, .lessons .tag { padding: 12px 0; }
.lessons__t { display: block; padding: 12px 0; }
.lessons .tag { align-self: center; padding: 1px 8px; }
.ledger__hash { display: inline-flex; align-items: center; min-height: 44px; }
.sim__field input[type="range"] { height: 44px; }

/* The join button has a short word for phones */
.btn__short { display: none; }

/* The phone masthead: one row of brand, the two tools, Sign in and the one button; then the links as a strip that scrolls sideways */
@media (max-width: 640px) {
    .site-header__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 14px var(--gutter) 2px; }
    .brand { flex: 1 1 auto; order: 1; font-size: 22px; }
    .site-nav { display: contents; }
    .site-nav > .nav:first-child { order: 4; flex: 1 1 70%; min-width: 0; display: flex; flex-wrap: nowrap; gap: 0 20px; margin: 4px 0 0 calc(-1 * var(--gutter)); padding: 0 12px 0 var(--gutter); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; font-size: 16px; }
    .site-nav > .nav:first-child::-webkit-scrollbar { display: none; }
    .site-nav > .nav:first-child { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
    .site-nav > .nav:first-child a { min-height: 40px; white-space: nowrap; }
    .site-nav > .nav--tools { order: 5; flex: 0 0 auto; display: flex; gap: 0 2px; margin-top: 4px; }
    .site-nav > .nav--tools .tool { min-width: 40px; min-height: 40px; }
    .site-nav > .nav--member { order: 3; flex: 0 0 auto; display: flex; align-items: center; gap: 0 10px; font-size: 15px; }
    .nav--member .btn--compact { min-height: 40px; padding: 0 12px; font-size: 15px; }
    .tool__kbd { display: none; }
    .nav--member .btn__long { display: none; }
    .nav--member .btn__short { display: inline; }
    .dateline__latest { display: none; }
    .t--record { min-width: 0; }
    .blade__meta { white-space: normal; }
    .hero { padding: 36px 0 40px; }
    .hero__title { font-size: clamp(40px, 12vw, 56px); }
    .hero__lead { font-size: 19px; }
    .hero__gloss { font-size: 15px; margin-top: 20px; }
    .bgc--hero { opacity: 0.09; }
    :root:not([data-theme="light"]) .bgc--hero, :root[data-theme="dark"] .bgc--hero { opacity: 0.16; }
    .hero__row { margin-top: 24px; }
    .hero__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
    .hero__actions .btn { padding: 0 12px; font-size: 16px; }
    .section-name { font-size: 30px; }
    .lead { font-size: 19px; }
    .figures dd { font-size: 34px; }
}

/* Headings inside summaries carry the bar's type, nothing of their own */
.blade__bar h3 { margin: 0; }

/* Print: no decoration, no form, URLs after links */
@media print {
    .bgc, .rbg, .progress, .waitlist, .tool, .alerts, .nav--tools, .today, .lesson-rail, .howto { display: none !important; }
    .gh-content a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: var(--muted); }
    .section--rules .rules li { background: none; }
    .blade, .method-course, .tier { break-inside: avoid; }
}