/* ==========================================================
   NOTEBOOK

   Shared structure for the Notebook browser + reader.

   Personality files:
   - style-notebook-wodehouse.css
   - style-notebook-mad.css
   - style-notebook-johnson.css
   - style-notebook-newspaper.css

   This file owns:
   - page structure
   - sidebar
   - controls
   - reader mechanics
   - responsive behavior
   - font-size states
   - shared variable contract
   ========================================================== */


/* ==========================================================
   SHARED VARIABLE CONTRACT
   ========================================================== */

.tb-notebook {
    --tb-notebook-paper: #f6f0e5;
    --tb-notebook-paper-soft: #eee5d7;
    --tb-notebook-paper-selected: #eadfd0;

    --tb-notebook-ink: #27241f;
    --tb-notebook-ink-soft: #514c44;
    --tb-notebook-muted: #81796f;

    --tb-notebook-rule: rgb(67 57 46 / 18%);
    --tb-notebook-rule-strong: rgb(67 57 46 / 30%);

    --tb-notebook-accent: #536854;
    --tb-notebook-accent-soft: #dce3d8;
    --tb-notebook-accent-warm: #aa6049;

    --tb-notebook-selection:
            color-mix(
                    in srgb,
                    var(--tb-notebook-accent-warm) 12%,
                    transparent
            );

    --tb-notebook-display-font:
            "Newsreader",
            Georgia,
            "Times New Roman",
            serif;

    --tb-notebook-body-font:
            "Iowan Old Style",
            "Palatino Linotype",
            Palatino,
            Georgia,
            serif;

    --tb-notebook-interface-font:
            "IBM Plex Sans",
            Arial,
            Helvetica,
            sans-serif;

    --tb-notebook-body-weight: 500;

    --tb-notebook-body-size: 2.05rem;
    --tb-notebook-body-leading: 1.5;
    --tb-notebook-paragraph-gap: 1.05em;

    --tb-notebook-title-weight: 500;
    --tb-notebook-title-leading: 0.98;

    --tb-notebook-entry-title-weight: 600;

    --tb-notebook-reader-max: 86rem;
    --tb-notebook-body-max: 76rem;

    --tb-notebook-columns: 1;
    --tb-notebook-column-gap: 4rem;
    --tb-notebook-column-rule: 0 solid transparent;

    --tb-notebook-reader-padding-left: 3rem;

    --tb-notebook-radius: 0.35rem;

    --tb-notebook-paper-texture-opacity: 0.018;

    --tb-notebook-title-accent-display: block;
    --tb-notebook-title-accent-width: 8rem;
    --tb-notebook-title-accent-height: 0.32rem;

    --tb-notebook-personality-display: flex;
    --tb-notebook-epigram-display: block;
    --tb-notebook-ornament-display: flex;

    position: relative;

    width: 100%;
    min-height: 100vh;

    background:
            var(--tb-notebook-paper);

    color:
            var(--tb-notebook-ink);
}


/* ==========================================================
   SUBTLE PAPER TEXTURE
   ========================================================== */

.tb-notebook::before {
    position: absolute;
    z-index: 0;
    inset: 0;

    content: "";

    pointer-events: none;

    background-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.22' numOctaves='2' seed='8' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");

    background-repeat: repeat;
    background-size: 220px 220px;

    opacity:
            var(--tb-notebook-paper-texture-opacity);
}

.tb-notebook > * {
    position: relative;
    z-index: 1;
}


/* ==========================================================
   BOX MODEL
   ========================================================== */

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


/* ==========================================================
   HIDDEN STATES
   ========================================================== */

.tb-notebook [hidden] {
    display: none !important;
}

.tb-notebook-reader__empty[hidden],
.tb-notebook-reader__content[hidden],
.tb-notebook-list__empty[hidden] {
    display: none !important;
}


/* ==========================================================
   INTRO
   ========================================================== */

.tb-notebook__intro {
    width: 100%;

    padding:
            5.5rem
            3rem
            3.2rem;
}

.tb-notebook__introInner {
    width: 100%;
    max-width: var(--fr-masthead-max-width);

    margin: 0 auto;
}


/* ==========================================================
   BREADCRUMB
   ========================================================== */

.tb-notebook__breadcrumb {
    display: flex;
    align-items: center;

    gap: 0.65rem;

    margin-bottom: 1.5rem;

    color:
            var(--tb-notebook-muted);

    font-family:
            var(--tb-notebook-interface-font);

    font-size: 1.35rem;
    font-weight: 500;
    line-height: 1.3;
}

.tb-notebook__breadcrumb a {
    color:
            var(--tb-notebook-accent);

    text-decoration: none;
}

.tb-notebook__breadcrumb a:hover {
    text-decoration: underline;
}


/* ==========================================================
   INTRO GRID
   ========================================================== */

.tb-notebook__introGrid {
    display: grid;

    grid-template-columns:
            minmax(0, 1fr)
            minmax(22rem, 30rem);

    align-items: end;

    gap: 5rem;
}

.tb-notebook__introCopy {
    min-width: 0;
}


/* ==========================================================
   INTRO TITLE
   ========================================================== */

.tb-notebook__heading {
    max-width: 86rem;

    margin: 0;

    color:
            var(--tb-notebook-ink);

    font-family:
            var(--tb-notebook-display-font);

    font-size:
            clamp(
                    5.8rem,
                    6vw,
                    8.4rem
            );

    font-weight: 500;
    line-height: 0.94;

    letter-spacing: -0.045em;
}


/* ==========================================================
   INTRO DECK
   ========================================================== */

.tb-notebook__deck {
    max-width: 72rem;

    margin:
            2.1rem
            0
            0;

    color:
            var(--tb-notebook-muted);

    font-family:
            var(--tb-notebook-body-font);

    font-size: 1.75rem;
    font-style: italic;
    font-weight: 400;
    line-height: 1.48;
}


/* ==========================================================
   HEADER PERSONALITY SLOT
   ========================================================== */

.tb-notebook__personality {
    display:
            var(--tb-notebook-personality-display);

    align-items: center;
    justify-content: flex-end;

    gap: 2rem;

    min-width: 0;

    padding-bottom: 0.6rem;
}


/* ==========================================================
   HEADER VIGNETTE
   ========================================================== */

.tb-notebook__vignette {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 6.4rem;
    height: 6.4rem;

    border:
            1px solid
            var(--tb-notebook-rule);

    border-radius: 50%;

    color:
            var(--tb-notebook-accent);

    background:
            color-mix(
                    in srgb,
                    var(--tb-notebook-paper-soft) 76%,
                    transparent
            );
}

.tb-notebook__vignetteMark {
    transform:
            rotate(-8deg);

    font-family:
            var(--tb-notebook-display-font);

    font-size: 2.8rem;
    line-height: 1;
}


/* ==========================================================
   HEADER MOTTO
   ========================================================== */

.tb-notebook__motto {
    min-width: 0;
    max-width: 18rem;
}

.tb-notebook__mottoText {
    margin: 0;

    color:
            var(--tb-notebook-accent);

    font-family:
            var(--tb-notebook-body-font);

    font-size: 1.55rem;
    font-style: italic;
    font-weight: 500;
    line-height: 1.32;
}

.tb-notebook__mottoRule {
    display: block;

    width: 3.8rem;
    height: 1px;

    margin-top: 1.1rem;

    background:
            var(--tb-notebook-accent);
}


/* ==========================================================
   WORKSPACE
   ========================================================== */

.tb-notebook__workspace {
    width:
            calc(100% - 6rem);

    max-width:
            var(--fr-masthead-max-width);

    margin:
            0
            auto
            8rem;

    border-top:
            1px solid
            var(--tb-notebook-rule);
}

.tb-notebook__slider {
    display: grid;

    grid-template-columns:
            minmax(28rem, 31%)
            minmax(0, 69%);

    width: 100%;
    min-height: 68rem;
}


/* ==========================================================
   LIST PANEL
   ========================================================== */

.tb-notebook-list {
    min-width: 0;

    padding:
            2.8rem
            2.5rem
            4rem
            0;

    border-right:
            1px solid
            var(--tb-notebook-rule-strong);
}

.tb-notebook-list__header {
    display: flex;
    flex-direction: column;

    gap: 1.2rem;

    margin-bottom: 1.2rem;
}


/* ==========================================================
   ENTRIES HEADING
   ========================================================== */

.tb-notebook-list__headingRow {
    display: flex;
    align-items: baseline;

    gap: 1rem;
}

.tb-notebook-list__heading {
    margin: 0;

    color:
            var(--tb-notebook-ink);

    font-family:
            var(--tb-notebook-display-font);

    font-size: 2.15rem;
    font-weight: 600;
    line-height: 1.15;
}

.tb-notebook-list__count {
    color:
            var(--tb-notebook-muted);

    font-family:
            var(--tb-notebook-body-font);

    font-size: 1.25rem;
    font-style: italic;
    line-height: 1.2;
}


/* ==========================================================
   SEARCH
   ========================================================== */

.tb-notebook-list__search {
    display: flex;
    align-items: center;

    gap: 0.8rem;

    width: 100%;
    min-height: 4rem;

    padding:
            0
            1.25rem;

    border:
            1px solid
            var(--tb-notebook-rule-strong);

    border-radius:
            999px;

    background:
            rgb(255 255 255 / 15%);

    transition:
            border-color 140ms ease,
            background-color 140ms ease;
}

.tb-notebook-list__search:focus-within {
    border-color:
            var(--tb-notebook-accent);

    background:
            rgb(255 255 255 / 30%);
}

.tb-notebook-list__searchIcon {
    flex: 0 0 auto;

    color:
            var(--tb-notebook-accent);

    font-family:
            var(--tb-notebook-interface-font);

    font-size: 1.3rem;
}

.tb-notebook-list__searchInput {
    width: 100%;

    margin: 0;
    padding: 0;

    border: 0;
    outline: 0;

    background: transparent;

    color:
            var(--tb-notebook-ink);

    font-family:
            var(--tb-notebook-interface-font);

    font-size: 1.4rem;
    line-height: 1.2;
}

.tb-notebook-list__searchInput::placeholder {
    color:
            color-mix(
                    in srgb,
                    var(--tb-notebook-muted) 76%,
                    transparent
            );
}


/* ==========================================================
   LIST CONTROLS
   ========================================================== */

.tb-notebook-list__viewControls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 1rem;

    width: 100%;

    margin-top: 0.8rem;
}


/* ==========================================================
   SEGMENTED CONTROLS
   ========================================================== */

.tb-notebook-list__segmented {
    display: inline-flex;
    align-items: stretch;

    overflow: hidden;

    border:
            1px solid
            var(--tb-notebook-rule-strong);

    border-radius:
            999px;

    background:
            rgb(255 255 255 / 10%);
}

.tb-notebook-list__segment {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 2.7rem;

    margin: 0;

    padding:
            0.5rem
            0.9rem;

    border: 0;

    border-right:
            1px solid
            var(--tb-notebook-rule);

    background: transparent;

    color:
            var(--tb-notebook-muted);

    font-family:
            var(--tb-notebook-interface-font);

    font-size: 1rem;
    font-weight: 600;
    line-height: 1;

    cursor: pointer;

    transition:
            background-color 140ms ease,
            color 140ms ease;
}

.tb-notebook-list__segment:last-child {
    border-right: 0;
}

.tb-notebook-list__segment:hover {
    color:
            var(--tb-notebook-accent);

    background:
            var(--tb-notebook-accent-soft);
}

.tb-notebook-list__segment.is-active,
.tb-notebook-list__segment[aria-pressed="true"] {
    color:
            var(--tb-notebook-accent);

    background:
            var(--tb-notebook-accent-soft);
}

.tb-notebook-list__segment:focus-visible {
    position: relative;
    z-index: 1;

    outline:
            2px solid
            var(--tb-notebook-accent);

    outline-offset: -2px;
}


/* ==========================================================
   ENTRY LIST
   ========================================================== */

.tb-notebook-list__entries {
    display: flex;
    flex-direction: column;
}

.tb-notebook-entry {
    position: relative;

    display: block;

    width: 100%;

    margin: 0;

    padding:
            1.05rem
            3.5rem
            1.05rem
            1.25rem;

    border: 0;

    border-left:
            3px solid
            transparent;

    background: transparent;

    color: inherit;

    text-align: left;

    cursor: pointer;

    transition:
            background-color 140ms ease,
            border-color 140ms ease,
            color 140ms ease,
            padding 140ms ease;
}

.tb-notebook-entry:hover {
    background:
            rgb(255 255 255 / 18%);
}

.tb-notebook-entry.is-active {
    border-left-color:
            var(--tb-notebook-accent-warm);

    background:
            var(--tb-notebook-selection);
}

.tb-notebook-entry:focus-visible {
    outline:
            2px solid
            var(--tb-notebook-accent);

    outline-offset: -2px;
}


/* ==========================================================
   ENTRY DATE
   ========================================================== */

.tb-notebook-entry__date {
    display: block;

    margin-bottom: 0.38rem;

    color:
            var(--tb-notebook-muted);

    font-family:
            var(--tb-notebook-interface-font);

    font-size: 1.3rem;
    font-weight: 500;
    line-height: 1.2;
}


/* ==========================================================
   ENTRY TITLE
   ========================================================== */

.tb-notebook-entry__title {
    display: block;

    margin-bottom: 0.45rem;

    color:
            var(--tb-notebook-ink);

    font-family:
            var(--tb-notebook-body-font);

    font-size: 1.85rem;
    font-weight:
            var(--tb-notebook-entry-title-weight);

    line-height: 1.2;
}

.tb-notebook-entry.is-active
.tb-notebook-entry__title {
    color:
            var(--tb-notebook-accent-warm);
}


/* ==========================================================
   ENTRY EXCERPT
   ========================================================== */

.tb-notebook-entry__excerpt {
    display: -webkit-box;

    overflow: hidden;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    color:
            var(--tb-notebook-muted);

    font-family:
            var(--tb-notebook-body-font);

    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.38;
}


/* ==========================================================
   ENTRY ARROW
   ========================================================== */

.tb-notebook-entry__arrow {
    position: absolute;

    top: 50%;
    right: 1.2rem;

    transform:
            translateY(-50%);

    color:
            color-mix(
                    in srgb,
                    var(--tb-notebook-muted) 65%,
                    transparent
            );

    font-family:
            var(--tb-notebook-display-font);

    font-size: 1.9rem;
    font-weight: 400;
}

.tb-notebook-entry.is-active
.tb-notebook-entry__arrow {
    color:
            var(--tb-notebook-accent-warm);
}


/* ==========================================================
   COMPACT ENTRY MODE
   ========================================================== */

.tb-notebook.is-compact
.tb-notebook-entry {
    padding-top: 0.72rem;
    padding-bottom: 0.72rem;
}

.tb-notebook.is-compact
.tb-notebook-entry__excerpt {
    display: none;
}

.tb-notebook.is-compact
.tb-notebook-entry__title {
    margin-bottom: 0;
}

.tb-notebook.is-compact
.tb-notebook-entry__date {
    margin-bottom: 0.28rem;
}


/* ==========================================================
   EMPTY SEARCH
   ========================================================== */

.tb-notebook-list__empty {
    padding:
            3rem
            1.25rem;

    color:
            var(--tb-notebook-muted);

    font-family:
            var(--tb-notebook-interface-font);

    font-size: 1.4rem;
}


/* ==========================================================
   SIDEBAR EPIGRAM
   ========================================================== */

.tb-notebook-list__epigram {
    display:
            var(--tb-notebook-epigram-display);

    margin:
            4rem
            1.25rem
            0;

    padding-top: 2.2rem;

    border-top:
            1px solid
            var(--tb-notebook-rule);
}

.tb-notebook-list__epigramOrnament {
    display: block;

    margin-bottom: 0.8rem;

    color:
            var(--tb-notebook-accent);

    font-family:
            var(--tb-notebook-display-font);

    font-size: 2rem;
    line-height: 1;
}

.tb-notebook-list__epigramText {
    margin: 0;

    color:
            var(--tb-notebook-muted);

    font-family:
            var(--tb-notebook-body-font);

    font-size: 1.45rem;
    font-style: italic;
    line-height: 1.35;
}

.tb-notebook-list__epigramRule {
    display: block;

    width: 4rem;
    height: 1px;

    margin-top: 1.1rem;

    background:
            var(--tb-notebook-accent);
}


/* ==========================================================
   READER PANEL
   ========================================================== */

.tb-notebook-reader {
    position: relative;

    min-width: 0;

    padding:
            3rem
            0
            6rem
            var(--tb-notebook-reader-padding-left);
}

.tb-notebook-reader__mobileBack {
    display: none;
}


/* ==========================================================
   EMPTY READER
   ========================================================== */

.tb-notebook-reader__empty {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 56rem;
}

.tb-notebook-reader__emptyInner {
    text-align: center;
}

.tb-notebook-reader__emptyLabel {
    margin-bottom: 1rem;

    color:
            var(--tb-notebook-accent);

    font-family:
            var(--tb-notebook-interface-font);

    font-size: 1.1rem;
    font-weight: 700;

    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.tb-notebook-reader__emptyText {
    margin: 0;

    color:
            var(--tb-notebook-muted);

    font-family:
            var(--tb-notebook-body-font);

    font-size: 1.9rem;
    font-style: italic;
    line-height: 1.4;
}


/* ==========================================================
   READER CONTENT
   ========================================================== */

.tb-notebook-reader__content {
    width: 100%;

    max-width:
            var(--tb-notebook-reader-max);
}


/* ==========================================================
   READER HEADER
   ========================================================== */

.tb-notebook-reader__header {
    margin-bottom: 1.5rem;
}


/* ==========================================================
   READER META ROW
   ========================================================== */

.tb-notebook-reader__metaRow {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 2rem;

    margin-bottom: 1rem;
}

.tb-notebook-reader__date {
    color:
            var(--tb-notebook-muted);

    font-family:
            var(--tb-notebook-interface-font);

    font-size: 1.35rem;
    font-weight: 500;
    line-height: 1.2;
}


/* ==========================================================
   READER CONTROLS
   ========================================================== */

.tb-notebook-reader__controls {
    display: flex;
    align-items: center;

    gap: 0.55rem;
}

.tb-notebook-reader__favorite,
.tb-notebook-reader__fontButton {
    appearance: none;
    -webkit-appearance: none;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 3.7rem;
    height: 3.7rem;

    margin: 0;

    padding:
            0
            0.85rem;

    border:
            1px solid
            var(--tb-notebook-rule-strong);

    border-radius:
            999px;

    background:
            rgb(255 255 255 / 10%);

    color:
            var(--tb-notebook-ink-soft);

    font-family:
            var(--tb-notebook-interface-font);

    font-size: 1.3rem;

    cursor: pointer;

    transition:
            border-color 140ms ease,
            color 140ms ease,
            background-color 140ms ease;
}

.tb-notebook-reader__favorite {
    color:
            var(--tb-notebook-accent-warm);

    font-family: Georgia, serif;
    font-size: 2.1rem;
}

.tb-notebook-reader__favorite:hover,
.tb-notebook-reader__fontButton:hover {
    border-color:
            var(--tb-notebook-accent);

    color:
            var(--tb-notebook-accent);

    background:
            var(--tb-notebook-accent-soft);
}

.tb-notebook-reader__favorite.is-active {
    color:
            var(--tb-notebook-accent-warm);
}

.tb-notebook-reader__favorite:focus-visible,
.tb-notebook-reader__fontButton:focus-visible {
    outline:
            2px solid
            var(--tb-notebook-accent);

    outline-offset: 2px;
}

.tb-notebook-reader__controlDivider {
    width: 1px;
    height: 2.4rem;

    margin:
            0
            0.25rem;

    background:
            var(--tb-notebook-rule);
}


/* ==========================================================
   STYLE BAR
   ========================================================== */

.tb-notebook-reader__styleBar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap:
            0.8rem
            1.1rem;

    width: 100%;

    margin:
            0
            0
            2rem;

    padding:
            1.1rem
            0;

    border-top:
            1px solid
            var(--tb-notebook-rule);

    border-bottom:
            1px solid
            var(--tb-notebook-rule);
}

.tb-notebook-reader__styleLabel {
    flex: 0 0 auto;

    color:
            var(--tb-notebook-muted);

    font-family:
            var(--tb-notebook-body-font);

    font-size: 1.25rem;
    font-style: italic;
    line-height: 1.2;
}

.tb-notebook-reader__styleChoices {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 0.55rem;
}


/* ==========================================================
   STYLE CHOICES
   ========================================================== */

.tb-notebook-reader__styleChoice {
    appearance: none;
    -webkit-appearance: none;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 3rem;

    margin: 0;

    padding:
            0.5rem
            1rem;

    border:
            1px solid
            var(--tb-notebook-rule-strong);

    border-radius:
            999px;

    background: transparent;

    color:
            var(--tb-notebook-muted);

    font-family:
            var(--tb-notebook-interface-font);

    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1;

    cursor: pointer;

    transition:
            background-color 140ms ease,
            border-color 140ms ease,
            color 140ms ease;
}

.tb-notebook-reader__styleChoice:hover {
    border-color:
            var(--tb-notebook-accent);

    color:
            var(--tb-notebook-accent);
}

.tb-notebook-reader__styleChoice.is-active,
.tb-notebook-reader__styleChoice[aria-pressed="true"] {
    border-color:
            var(--tb-notebook-accent);

    color:
            var(--tb-notebook-paper);

    background:
            var(--tb-notebook-accent);
}

.tb-notebook-reader__styleChoice:focus-visible {
    outline:
            2px solid
            var(--tb-notebook-accent);

    outline-offset: 2px;
}


/* ==========================================================
   ARTICLE TITLE
   ========================================================== */

.tb-notebook-reader__titleWrap {
    position: relative;

    max-width: 80rem;

    margin-bottom: 1.8rem;
}

.tb-notebook-reader__title {
    margin: 0;

    color:
            var(--tb-notebook-ink);

    font-family:
            var(--tb-notebook-display-font);

    font-size:
            clamp(
                    3.7rem,
                    3.7vw,
                    5.3rem
            );

    font-weight:
            var(--tb-notebook-title-weight);

    line-height:
            var(--tb-notebook-title-leading);

    letter-spacing: -0.035em;
}

.tb-notebook-reader__titleAccent {
    display:
            var(--tb-notebook-title-accent-display);

    width:
            var(--tb-notebook-title-accent-width);

    height:
            var(--tb-notebook-title-accent-height);

    margin-top: 1.1rem;

    border-radius:
            999px;

    background:
            var(--tb-notebook-accent-warm);

    opacity: 0.78;
}


/* ==========================================================
   READER BODY FRAME
   ========================================================== */

.tb-notebook-reader__bodyFrame {
    width: 100%;

    max-width:
            var(--tb-notebook-body-max);

    margin: 0;
}


/* ==========================================================
   READER BODY
   ========================================================== */

.page-template
.tb-notebook-reader__body,
.page-template
.tb-notebook-reader__body p,
.page-template
.tb-notebook-reader__body li,
.page-template
.tb-notebook-reader__body blockquote,
.tb-notebook-reader__body,
.tb-notebook-reader__body p,
.tb-notebook-reader__body li,
.tb-notebook-reader__body blockquote {
    font-family:
            var(--tb-notebook-body-font) !important;

    font-weight:
            var(--tb-notebook-body-weight) !important;
}


/* ==========================================================
   GHOST ARTICLE OVERRIDE
   ========================================================== */

.page-template
.tb-notebook-reader__body p,
.page-template
.tb-notebook-reader__body li,
.page-template
.tb-notebook-reader__body blockquote,
.tb-notebook-reader__body p,
.tb-notebook-reader__body li,
.tb-notebook-reader__body blockquote {
    font-size: inherit !important;
    line-height: inherit !important;
}


/* ==========================================================
   BODY TEXT
   ========================================================== */

.tb-notebook-reader__body {
    width: 100%;

    max-width:
            var(--tb-notebook-body-max);

    color:
            var(--tb-notebook-ink);

    font-size:
            var(--tb-notebook-body-size);

    line-height:
            var(--tb-notebook-body-leading);

    column-count:
            var(--tb-notebook-columns);

    column-gap:
            var(--tb-notebook-column-gap);

    column-rule:
            var(--tb-notebook-column-rule);
}

.tb-notebook-reader__body > p,
.page-template
.tb-notebook-reader__body > p {
    margin:
            0
            0
            var(--tb-notebook-paragraph-gap)
    !important;

    text-indent: 0 !important;
    text-align: left;
}

.tb-notebook-reader__body > p + p,
.page-template
.tb-notebook-reader__body > p + p {
    text-indent: 0 !important;
}


/* ==========================================================
   BODY HEADINGS
   ========================================================== */

.tb-notebook-reader__body h2,
.tb-notebook-reader__body h3,
.tb-notebook-reader__body h4 {
    break-after: avoid;

    margin:
            1.65em
            0
            0.65em;

    color:
            var(--tb-notebook-ink);

    font-family:
            var(--tb-notebook-display-font);

    font-weight: 600;
    line-height: 1.12;
}


/* ==========================================================
   BLOCKQUOTES
   ========================================================== */

.tb-notebook-reader__body blockquote {
    break-inside: avoid;

    margin:
            1.7em
            0;

    padding-left: 1.8rem;

    border-left:
            2px solid
            var(--tb-notebook-accent);

    color:
            var(--tb-notebook-ink-soft);

    font-style: italic;
}


/* ==========================================================
   IMAGES
   ========================================================== */

.tb-notebook-reader__body figure,
.tb-notebook-reader__body img {
    break-inside: avoid;
}

.tb-notebook-reader__body img {
    display: block;

    max-width: 100%;
    height: auto;

    margin:
            2.2rem
            0;
}


/* ==========================================================
   READER ORNAMENT
   ========================================================== */

.tb-notebook-reader__ornament {
    display:
            var(--tb-notebook-ornament-display);

    align-items: center;
    justify-content: center;

    gap: 1rem;

    width: 18rem;

    margin:
            3rem
            auto
            0;

    color:
            var(--tb-notebook-accent);
}

.tb-notebook-reader__ornamentRule {
    display: block;

    flex: 1 1 auto;

    height: 1px;

    background:
            var(--tb-notebook-rule-strong);
}

.tb-notebook-reader__ornamentMark {
    flex: 0 0 auto;

    font-family:
            var(--tb-notebook-display-font);

    font-size: 1.9rem;
    line-height: 1;
}


/* ==========================================================
   FONT SIZE STATES — 9 STEPS

   IMPORTANT:
   Sizes are applied directly to the reader body and Ghost
   content elements so global article typography cannot block
   A− / A+.
   ========================================================== */

.tb-notebook[data-notebook-font-size="xxsmall"]
.tb-notebook-reader__body,
.tb-notebook[data-notebook-font-size="xxsmall"]
.tb-notebook-reader__body p,
.tb-notebook[data-notebook-font-size="xxsmall"]
.tb-notebook-reader__body li,
.tb-notebook[data-notebook-font-size="xxsmall"]
.tb-notebook-reader__body blockquote {
    font-size: 1.55rem !important;
}

.tb-notebook[data-notebook-font-size="xsmall"]
.tb-notebook-reader__body,
.tb-notebook[data-notebook-font-size="xsmall"]
.tb-notebook-reader__body p,
.tb-notebook[data-notebook-font-size="xsmall"]
.tb-notebook-reader__body li,
.tb-notebook[data-notebook-font-size="xsmall"]
.tb-notebook-reader__body blockquote {
    font-size: 1.7rem !important;
}

.tb-notebook[data-notebook-font-size="small"]
.tb-notebook-reader__body,
.tb-notebook[data-notebook-font-size="small"]
.tb-notebook-reader__body p,
.tb-notebook[data-notebook-font-size="small"]
.tb-notebook-reader__body li,
.tb-notebook[data-notebook-font-size="small"]
.tb-notebook-reader__body blockquote {
    font-size: 1.85rem !important;
}

.tb-notebook[data-notebook-font-size="normal"]
.tb-notebook-reader__body,
.tb-notebook[data-notebook-font-size="normal"]
.tb-notebook-reader__body p,
.tb-notebook[data-notebook-font-size="normal"]
.tb-notebook-reader__body li,
.tb-notebook[data-notebook-font-size="normal"]
.tb-notebook-reader__body blockquote {
    font-size: 2.05rem !important;
}

.tb-notebook[data-notebook-font-size="large"]
.tb-notebook-reader__body,
.tb-notebook[data-notebook-font-size="large"]
.tb-notebook-reader__body p,
.tb-notebook[data-notebook-font-size="large"]
.tb-notebook-reader__body li,
.tb-notebook[data-notebook-font-size="large"]
.tb-notebook-reader__body blockquote {
    font-size: 2.2rem !important;
}

.tb-notebook[data-notebook-font-size="xlarge"]
.tb-notebook-reader__body,
.tb-notebook[data-notebook-font-size="xlarge"]
.tb-notebook-reader__body p,
.tb-notebook[data-notebook-font-size="xlarge"]
.tb-notebook-reader__body li,
.tb-notebook[data-notebook-font-size="xlarge"]
.tb-notebook-reader__body blockquote {
    font-size: 2.4rem !important;
}

.tb-notebook[data-notebook-font-size="xxlarge"]
.tb-notebook-reader__body,
.tb-notebook[data-notebook-font-size="xxlarge"]
.tb-notebook-reader__body p,
.tb-notebook[data-notebook-font-size="xxlarge"]
.tb-notebook-reader__body li,
.tb-notebook[data-notebook-font-size="xxlarge"]
.tb-notebook-reader__body blockquote {
    font-size: 2.65rem !important;
}

.tb-notebook[data-notebook-font-size="xxxlarge"]
.tb-notebook-reader__body,
.tb-notebook[data-notebook-font-size="xxxlarge"]
.tb-notebook-reader__body p,
.tb-notebook[data-notebook-font-size="xxxlarge"]
.tb-notebook-reader__body li,
.tb-notebook[data-notebook-font-size="xxxlarge"]
.tb-notebook-reader__body blockquote {
    font-size: 2.95rem !important;
}

.tb-notebook[data-notebook-font-size="huge"]
.tb-notebook-reader__body,
.tb-notebook[data-notebook-font-size="huge"]
.tb-notebook-reader__body p,
.tb-notebook[data-notebook-font-size="huge"]
.tb-notebook-reader__body li,
.tb-notebook[data-notebook-font-size="huge"]
.tb-notebook-reader__body blockquote {
    font-size: 3.3rem !important;
}


/* ==========================================================
   OLDER / NEWER
   ========================================================== */

.tb-notebook-reader__footer {
    display: grid;

    grid-template-columns:
            1fr
            1fr;

    gap: 2rem;

    margin-top: 4.5rem;

    padding-top: 2.2rem;

    border-top:
            1px solid
            var(--tb-notebook-rule);
}

.tb-notebook-reader__previous,
.tb-notebook-reader__next {
    display: flex;
    flex-direction: column;

    gap: 0.45rem;

    min-width: 0;

    margin: 0;
    padding: 0;

    border: 0;

    background: transparent;

    cursor: pointer;
}

.tb-notebook-reader__previous {
    align-items: flex-start;

    text-align: left;
}

.tb-notebook-reader__next {
    align-items: flex-end;

    text-align: right;
}

.tb-notebook-reader__previous:disabled,
.tb-notebook-reader__next:disabled {
    opacity: 0.25;

    cursor: default;
}

.tb-notebook-reader__navDirection {
    color:
            var(--tb-notebook-accent);

    font-family:
            var(--tb-notebook-interface-font);

    font-size: 1.05rem;
    font-weight: 700;

    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.tb-notebook-reader__navTitle {
    max-width: 32rem;

    color:
            var(--tb-notebook-ink-soft);

    font-family:
            var(--tb-notebook-body-font);

    font-size: 1.55rem;
    line-height: 1.25;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 760px) {

    .tb-notebook__intro {
        padding:
                3.5rem
                2rem
                2.5rem;
    }

    .tb-notebook__introInner {
        width: 100%;
        max-width: none;
    }

    .tb-notebook__introGrid {
        display: block;
    }

    .tb-notebook__heading {
        font-size:
                clamp(
                        4.6rem,
                        14vw,
                        6.5rem
                );
    }

    .tb-notebook__deck {
        margin-top: 1.6rem;

        font-size: 1.55rem;
    }

    .tb-notebook__personality {
        display: none;
    }

    .tb-notebook__workspace {
        width:
                calc(100% - 4rem);

        max-width: none;

        margin-bottom: 5rem;

        overflow: hidden;
    }

    .tb-notebook__slider {
        display: flex;

        width: 200%;
        min-height: 0;

        transform:
                translateX(0);

        transition:
                transform
                300ms
                cubic-bezier(
                        0.4,
                        0,
                        0.2,
                        1
                );
    }

    .tb-notebook.is-reader-open
    .tb-notebook__slider {
        transform:
                translateX(-50%);
    }

    .tb-notebook-list,
    .tb-notebook-reader {
        flex:
                0
                0
                50%;

        width: 50%;
        min-width: 0;
    }

    .tb-notebook-list {
        padding:
                2.5rem
                0
                4rem;

        border-right: 0;
    }

    .tb-notebook-list__viewControls {
        gap: 0.8rem;
    }

    .tb-notebook-list__segmented {
        max-width: 100%;
    }

    .tb-notebook-list__epigram {
        display: none;
    }

    .tb-notebook-reader {
        padding:
                1.5rem
                0
                5rem;
    }

    .tb-notebook-reader__mobileBack {
        display: block;

        margin-bottom: 2rem;
    }

    .tb-notebook-reader__backButton {
        display: inline-flex;
        align-items: center;

        gap: 0.7rem;

        margin: 0;
        padding: 0;

        border: 0;

        background: transparent;

        color:
                var(--tb-notebook-accent);

        font-family:
                var(--tb-notebook-interface-font);

        font-size: 1.35rem;
        font-weight: 600;

        cursor: pointer;
    }

    .tb-notebook-reader__empty {
        min-height: 45rem;
    }

    .tb-notebook-reader__content {
        max-width: none;
    }

    .tb-notebook-reader__metaRow {
        align-items: flex-start;
    }

    .tb-notebook-reader__controls {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .tb-notebook-reader__styleBar {
        align-items: flex-start;

        margin-bottom: 1.7rem;
    }

    .tb-notebook-reader__styleLabel {
        width: 100%;
    }

    .tb-notebook-reader__styleChoices {
        gap: 0.45rem;
    }

    .tb-notebook-reader__styleChoice {
        min-height: 2.8rem;

        padding:
                0.45rem
                0.8rem;

        font-size: 0.95rem;
    }

    .tb-notebook-reader__title {
        font-size:
                clamp(
                        3.3rem,
                        8.5vw,
                        4.5rem
                );
    }

    .tb-notebook-reader__bodyFrame,
    .tb-notebook-reader__body {
        max-width: none;
    }

    .tb-notebook-reader__body {
        --tb-notebook-columns: 1;

        line-height:
                var(--tb-notebook-body-leading);
    }


    /* ------------------------------------------------------
       MOBILE FONT SIZE STATES
       ------------------------------------------------------ */

    .tb-notebook[data-notebook-font-size="xxsmall"]
    .tb-notebook-reader__body,
    .tb-notebook[data-notebook-font-size="xxsmall"]
    .tb-notebook-reader__body p,
    .tb-notebook[data-notebook-font-size="xxsmall"]
    .tb-notebook-reader__body li,
    .tb-notebook[data-notebook-font-size="xxsmall"]
    .tb-notebook-reader__body blockquote {
        font-size: 1.45rem !important;
    }

    .tb-notebook[data-notebook-font-size="xsmall"]
    .tb-notebook-reader__body,
    .tb-notebook[data-notebook-font-size="xsmall"]
    .tb-notebook-reader__body p,
    .tb-notebook[data-notebook-font-size="xsmall"]
    .tb-notebook-reader__body li,
    .tb-notebook[data-notebook-font-size="xsmall"]
    .tb-notebook-reader__body blockquote {
        font-size: 1.55rem !important;
    }

    .tb-notebook[data-notebook-font-size="small"]
    .tb-notebook-reader__body,
    .tb-notebook[data-notebook-font-size="small"]
    .tb-notebook-reader__body p,
    .tb-notebook[data-notebook-font-size="small"]
    .tb-notebook-reader__body li,
    .tb-notebook[data-notebook-font-size="small"]
    .tb-notebook-reader__body blockquote {
        font-size: 1.7rem !important;
    }

    .tb-notebook[data-notebook-font-size="normal"]
    .tb-notebook-reader__body,
    .tb-notebook[data-notebook-font-size="normal"]
    .tb-notebook-reader__body p,
    .tb-notebook[data-notebook-font-size="normal"]
    .tb-notebook-reader__body li,
    .tb-notebook[data-notebook-font-size="normal"]
    .tb-notebook-reader__body blockquote {
        font-size: 1.9rem !important;
    }

    .tb-notebook[data-notebook-font-size="large"]
    .tb-notebook-reader__body,
    .tb-notebook[data-notebook-font-size="large"]
    .tb-notebook-reader__body p,
    .tb-notebook[data-notebook-font-size="large"]
    .tb-notebook-reader__body li,
    .tb-notebook[data-notebook-font-size="large"]
    .tb-notebook-reader__body blockquote {
        font-size: 2.05rem !important;
    }

    .tb-notebook[data-notebook-font-size="xlarge"]
    .tb-notebook-reader__body,
    .tb-notebook[data-notebook-font-size="xlarge"]
    .tb-notebook-reader__body p,
    .tb-notebook[data-notebook-font-size="xlarge"]
    .tb-notebook-reader__body li,
    .tb-notebook[data-notebook-font-size="xlarge"]
    .tb-notebook-reader__body blockquote {
        font-size: 2.25rem !important;
    }

    .tb-notebook[data-notebook-font-size="xxlarge"]
    .tb-notebook-reader__body,
    .tb-notebook[data-notebook-font-size="xxlarge"]
    .tb-notebook-reader__body p,
    .tb-notebook[data-notebook-font-size="xxlarge"]
    .tb-notebook-reader__body li,
    .tb-notebook[data-notebook-font-size="xxlarge"]
    .tb-notebook-reader__body blockquote {
        font-size: 2.5rem !important;
    }

    .tb-notebook[data-notebook-font-size="xxxlarge"]
    .tb-notebook-reader__body,
    .tb-notebook[data-notebook-font-size="xxxlarge"]
    .tb-notebook-reader__body p,
    .tb-notebook[data-notebook-font-size="xxxlarge"]
    .tb-notebook-reader__body li,
    .tb-notebook[data-notebook-font-size="xxxlarge"]
    .tb-notebook-reader__body blockquote {
        font-size: 2.75rem !important;
    }

    .tb-notebook[data-notebook-font-size="huge"]
    .tb-notebook-reader__body,
    .tb-notebook[data-notebook-font-size="huge"]
    .tb-notebook-reader__body p,
    .tb-notebook[data-notebook-font-size="huge"]
    .tb-notebook-reader__body li,
    .tb-notebook[data-notebook-font-size="huge"]
    .tb-notebook-reader__body blockquote {
        font-size: 3rem !important;
    }

    .tb-notebook-reader__footer {
        margin-top: 4rem;
    }
}