/* ==========================================================
   NOTEBOOK — WODEHOUSE

   Personality layer for:

   data-notebook-style="wodehouse"

   Shared structure remains in:
   style-notebook.css

   Temporary typography audition system:
   data-notebook-wodehouse-variant

   Default:
   Publico Text Semibold + STIX Two Text Regular
   ========================================================== */


/* ==========================================================
   WODEHOUSE BASE VARIABLES
   ========================================================== */

.tb-notebook[data-notebook-style="wodehouse"] {
    --tb-notebook-paper: #f6efe0;
    --tb-notebook-paper-soft: #ece2d0;
    --tb-notebook-paper-selected: #ecd8c8;

    --tb-notebook-ink: #27231d;
    --tb-notebook-ink-soft: #544c41;
    --tb-notebook-muted: #807468;

    --tb-notebook-rule: rgb(72 61 45 / 17%);
    --tb-notebook-rule-strong: rgb(72 61 45 / 31%);

    --tb-notebook-accent: #4d684f;
    --tb-notebook-accent-soft: #d9e2d5;
    --tb-notebook-accent-warm: #c2674b;

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

    --tb-notebook-display-font:
            "Fraunces",
            "Bookman Old Style",
            Georgia,
            serif;

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


    /* ------------------------------------------------------
       DEFAULT TYPE PAIRING
       ------------------------------------------------------ */

    --tb-wodehouse-headline-font:
            "Publico Text",
            "Times New Roman",
            Georgia,
            serif;

    --tb-wodehouse-headline-weight: 600;
    --tb-wodehouse-headline-tracking: -0.012em;
    --tb-wodehouse-headline-scale-x: 1;
    --tb-wodehouse-headline-stroke: 0;

    --tb-wodehouse-body-font:
            "STIX Two Text",
            "Times New Roman",
            Georgia,
            serif;

    --tb-wodehouse-body-weight: 400;
    --tb-wodehouse-body-tracking: 0;
    --tb-wodehouse-body-leading: 1.42;


    /* ------------------------------------------------------
       SHARED NOTEBOOK CONTRACT
       ------------------------------------------------------ */

    --tb-notebook-headline-font:
            var(--tb-wodehouse-headline-font);

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

    --tb-notebook-body-weight:
            var(--tb-wodehouse-body-weight);

    --tb-notebook-body-leading:
            var(--tb-wodehouse-body-leading);

    --tb-notebook-paragraph-gap: 0.92em;

    --tb-notebook-title-weight:
            var(--tb-wodehouse-headline-weight);

    --tb-notebook-title-leading: 0.92;

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

    --tb-notebook-reader-max: 88rem;
    --tb-notebook-body-max: 74rem;

    --tb-notebook-columns: 1;

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

    --tb-notebook-title-accent-display: block;
    --tb-notebook-title-accent-width: 11rem;
    --tb-notebook-title-accent-height: 0.38rem;

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


/* ==========================================================
   TEMP TYPOGRAPHY VARIANTS
   ========================================================== */

.tb-notebook[
    data-notebook-style="wodehouse"
][
    data-notebook-wodehouse-variant="publico-stix"
] {
    --tb-wodehouse-headline-font:
            "Publico Text",
            "Times New Roman",
            Georgia,
            serif;

    --tb-wodehouse-headline-weight: 600;
    --tb-wodehouse-headline-tracking: -0.012em;
    --tb-wodehouse-headline-scale-x: 1;
    --tb-wodehouse-headline-stroke: 0;

    --tb-wodehouse-body-font:
            "STIX Two Text",
            "Times New Roman",
            Georgia,
            serif;

    --tb-wodehouse-body-weight: 400;
    --tb-wodehouse-body-tracking: 0;
    --tb-wodehouse-body-leading: 1.42;
}

.tb-notebook[
    data-notebook-style="wodehouse"
][
    data-notebook-wodehouse-variant="gowun-source"
] {
    --tb-wodehouse-headline-font:
            "Gowun Batang",
            Georgia,
            serif;

    --tb-wodehouse-headline-weight: 700;
    --tb-wodehouse-headline-tracking: -0.012em;
    --tb-wodehouse-headline-scale-x: 0.88;
    --tb-wodehouse-headline-stroke: 0.55px;

    --tb-wodehouse-body-font:
            "Source Serif 4",
            Georgia,
            serif;

    --tb-wodehouse-body-weight: 400;
    --tb-wodehouse-body-tracking: 0;
    --tb-wodehouse-body-leading: 1.38;
}

.tb-notebook[
    data-notebook-style="wodehouse"
][
    data-notebook-wodehouse-variant="gowun-stix"
] {
    --tb-wodehouse-headline-font:
            "Gowun Batang",
            Georgia,
            serif;

    --tb-wodehouse-headline-weight: 700;
    --tb-wodehouse-headline-tracking: -0.012em;
    --tb-wodehouse-headline-scale-x: 0.88;
    --tb-wodehouse-headline-stroke: 0.55px;

    --tb-wodehouse-body-font:
            "STIX Two Text",
            "Times New Roman",
            Georgia,
            serif;

    --tb-wodehouse-body-weight: 400;
    --tb-wodehouse-body-tracking: 0;
    --tb-wodehouse-body-leading: 1.42;
}

.tb-notebook[
    data-notebook-style="wodehouse"
][
    data-notebook-wodehouse-variant="publico-source"
] {
    --tb-wodehouse-headline-font:
            "Publico Text",
            "Times New Roman",
            Georgia,
            serif;

    --tb-wodehouse-headline-weight: 600;
    --tb-wodehouse-headline-tracking: -0.012em;
    --tb-wodehouse-headline-scale-x: 1;
    --tb-wodehouse-headline-stroke: 0;

    --tb-wodehouse-body-font:
            "Source Serif 4",
            Georgia,
            serif;

    --tb-wodehouse-body-weight: 400;
    --tb-wodehouse-body-tracking: 0;
    --tb-wodehouse-body-leading: 1.38;
}

.tb-notebook[
    data-notebook-style="wodehouse"
][
    data-notebook-wodehouse-variant="fraunces-source"
] {
    --tb-wodehouse-headline-font:
            "Fraunces",
            "Bookman Old Style",
            Georgia,
            serif;

    --tb-wodehouse-headline-weight: 800;
    --tb-wodehouse-headline-tracking: -0.035em;
    --tb-wodehouse-headline-scale-x: 0.94;
    --tb-wodehouse-headline-stroke: 0;

    --tb-wodehouse-body-font:
            "Source Serif 4",
            Georgia,
            serif;

    --tb-wodehouse-body-weight: 400;
    --tb-wodehouse-body-tracking: 0;
    --tb-wodehouse-body-leading: 1.38;
}

.tb-notebook[
    data-notebook-style="wodehouse"
][
    data-notebook-wodehouse-variant="fraunces-stix"
] {
    --tb-wodehouse-headline-font:
            "Fraunces",
            "Bookman Old Style",
            Georgia,
            serif;

    --tb-wodehouse-headline-weight: 800;
    --tb-wodehouse-headline-tracking: -0.035em;
    --tb-wodehouse-headline-scale-x: 0.94;
    --tb-wodehouse-headline-stroke: 0;

    --tb-wodehouse-body-font:
            "STIX Two Text",
            "Times New Roman",
            Georgia,
            serif;

    --tb-wodehouse-body-weight: 400;
    --tb-wodehouse-body-tracking: 0;
    --tb-wodehouse-body-leading: 1.42;
}

.tb-notebook[
    data-notebook-style="wodehouse"
][
    data-notebook-wodehouse-variant="instrument-source"
] {
    --tb-wodehouse-headline-font:
            "Instrument Serif",
            Georgia,
            serif;

    --tb-wodehouse-headline-weight: 400;
    --tb-wodehouse-headline-tracking: -0.018em;
    --tb-wodehouse-headline-scale-x: 1;
    --tb-wodehouse-headline-stroke: 0.55px;

    --tb-wodehouse-body-font:
            "Source Serif 4",
            Georgia,
            serif;

    --tb-wodehouse-body-weight: 400;
    --tb-wodehouse-body-tracking: 0;
    --tb-wodehouse-body-leading: 1.38;
}

.tb-notebook[
    data-notebook-style="wodehouse"
][
    data-notebook-wodehouse-variant="spectral-source"
] {
    --tb-wodehouse-headline-font:
            "Spectral",
            Georgia,
            serif;

    --tb-wodehouse-headline-weight: 600;
    --tb-wodehouse-headline-tracking: -0.018em;
    --tb-wodehouse-headline-scale-x: 0.95;
    --tb-wodehouse-headline-stroke: 0;

    --tb-wodehouse-body-font:
            "Source Serif 4",
            Georgia,
            serif;

    --tb-wodehouse-body-weight: 400;
    --tb-wodehouse-body-tracking: 0;
    --tb-wodehouse-body-leading: 1.38;
}

.tb-notebook[
    data-notebook-style="wodehouse"
][
    data-notebook-wodehouse-variant="times-source"
] {
    --tb-wodehouse-headline-font:
            "Times New Roman",
            Times,
            serif;

    --tb-wodehouse-headline-weight: 700;
    --tb-wodehouse-headline-tracking: -0.018em;
    --tb-wodehouse-headline-scale-x: 0.96;
    --tb-wodehouse-headline-stroke: 0;

    --tb-wodehouse-body-font:
            "Source Serif 4",
            Georgia,
            serif;

    --tb-wodehouse-body-weight: 400;
    --tb-wodehouse-body-tracking: 0;
    --tb-wodehouse-body-leading: 1.38;
}

.tb-notebook[
    data-notebook-style="wodehouse"
][
    data-notebook-wodehouse-variant="publico-times"
] {
    --tb-wodehouse-headline-font:
            "Publico Text",
            "Times New Roman",
            Georgia,
            serif;

    --tb-wodehouse-headline-weight: 600;
    --tb-wodehouse-headline-tracking: -0.012em;
    --tb-wodehouse-headline-scale-x: 1;
    --tb-wodehouse-headline-stroke: 0;

    --tb-wodehouse-body-font:
            "Times New Roman",
            Times,
            serif;

    --tb-wodehouse-body-weight: 400;
    --tb-wodehouse-body-tracking: 0;
    --tb-wodehouse-body-leading: 1.42;
}


/* ==========================================================
   PAGE ATMOSPHERE
   ========================================================== */

.tb-notebook[data-notebook-style="wodehouse"] {
    background:
            radial-gradient(
                    circle at 13% 8%,
                    rgb(255 255 255 / 30%),
                    transparent 24rem
            ),
            radial-gradient(
                    circle at 88% 15%,
                    rgb(194 103 75 / 5%),
                    transparent 28rem
            ),
            linear-gradient(
                    180deg,
                    rgb(255 255 255 / 8%),
                    transparent 24rem
            ),
            var(--tb-notebook-paper);
}


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

.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook__intro {
    padding-top: 4.8rem;
    padding-bottom: 3.3rem;
}


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

.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook__breadcrumb {
    color: #756a5f;

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

    font-size: 1.3rem;
    font-style: italic;

    letter-spacing: 0;
}

.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook__breadcrumb a {
    color:
            var(--tb-notebook-accent);

    font-style: normal;
    font-weight: 600;
}


/* ==========================================================
   MAIN PAGE HEADING
   ========================================================== */

.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook__heading {
    position: relative;

    display: inline-block;

    width: fit-content;
    max-width: none;

    font-family:
            var(--tb-wodehouse-headline-font);

    font-size:
            clamp(
                    5.9rem,
                    6.1vw,
                    8.6rem
            );

    font-weight:
            var(--tb-wodehouse-headline-weight);

    line-height: 0.91;

    letter-spacing:
            var(--tb-wodehouse-headline-tracking);

    font-kerning: normal;
    font-feature-settings: "kern" 1;

    text-rendering: optimizeLegibility;

    -webkit-text-stroke:
            var(--tb-wodehouse-headline-stroke)
            currentColor;

    text-shadow:
            0.02em
            0.02em
            0
            rgb(255 255 255 / 45%);

    transform:
            scaleX(
                    var(--tb-wodehouse-headline-scale-x)
            );

    transform-origin:
            left center;
}

.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook__heading::before {
    position: absolute;

    z-index: -1;

    left: -0.03em;
    right: -0.08em;
    bottom: 0.02em;

    height: 0.13em;

    content: "";

    background:
            #eadb78;

    transform:
            rotate(-1deg);

    opacity: 0.62;
}

.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook__heading::after {
    position: absolute;

    left: 0.06em;
    bottom: -0.24em;

    width: 5.6rem;
    height: 0.3rem;

    content: "";

    border-radius: 999px;

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

    transform:
            rotate(-2deg);

    opacity: 0.9;
}


/* ==========================================================
   INSTRUMENT SERIF — LARGER / FATTER HEADLINE
   ========================================================== */

.tb-notebook[
    data-notebook-style="wodehouse"
][
    data-notebook-wodehouse-variant="instrument-source"
]
.tb-notebook__heading {
    font-size:
            clamp(
                    6.5rem,
                    6.65vw,
                    9.35rem
            );
}

.tb-notebook[
    data-notebook-style="wodehouse"
][
    data-notebook-wodehouse-variant="instrument-source"
]
.tb-notebook-reader__title {
    font-size:
            clamp(
                    5.25rem,
                    5.15vw,
                    7.15rem
            );
}


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

.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook__deck {
    max-width: 67rem;

    margin-top: 2.5rem;

    color: #70665b;

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

    font-size: 1.88rem;

    font-weight:
            var(--tb-wodehouse-body-weight);

    font-style: italic;

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

    letter-spacing:
            var(--tb-wodehouse-body-tracking);
}


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

.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook__personality {
    position: relative;

    align-self: center;

    gap: 1.7rem;

    padding-right: 0.5rem;

    transform:
            rotate(-0.35deg);
}


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

.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook__vignette {
    position: relative;

    width: 7.8rem;
    height: 7.8rem;

    border:
            1px solid
            color-mix(
                    in srgb,
                    var(--tb-notebook-accent) 52%,
                    transparent
            );

    border-radius:
            48%
            52%
            45%
            55%;

    background:
            linear-gradient(
                    145deg,
                    rgb(255 255 255 / 36%),
                    rgb(77 104 79 / 7%)
            );

    box-shadow:
            inset
            0
            0
            0
            0.45rem
            rgb(255 255 255 / 14%),
            0
            0.3rem
            0.8rem
            rgb(65 50 35 / 7%);
}

.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook__vignette::before {
    position: absolute;

    top: -0.55rem;
    left: -0.5rem;

    content: "✦";

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

    font-size: 1.4rem;

    transform:
            rotate(-11deg);
}

.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook__vignette::after {
    position: absolute;

    right: -0.6rem;
    bottom: -0.4rem;

    content: "·";

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

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

.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook__vignetteMark {
    color:
            var(--tb-notebook-accent);

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

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

    transform:
            rotate(-12deg);
}


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

.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook__motto {
    max-width: 19rem;
}

.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook__mottoText {
    color:
            var(--tb-notebook-accent);

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

    font-size: 1.68rem;

    font-weight:
            var(--tb-wodehouse-body-weight);

    font-style: italic;
    line-height: 1.3;

    letter-spacing:
            var(--tb-wodehouse-body-tracking);
}

.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook__mottoRule {
    position: relative;

    width: 5.5rem;

    margin-top: 1.15rem;

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

    transform:
            rotate(-1deg);
}

.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook__mottoRule::after {
    position: absolute;

    right: -1.6rem;
    top: -0.65rem;

    content: "•";

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

    font-size: 1.7rem;
}


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

.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook__workspace {
    border-top:
            1px solid
            color-mix(
                    in srgb,
                    var(--tb-notebook-accent) 34%,
                    transparent
            );
}


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

.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook-list {
    position: relative;

    padding-right: 2.8rem;

    background:
            linear-gradient(
                    90deg,
                    transparent 0%,
                    transparent 93%,
                    rgb(77 104 79 / 3%) 100%
            );
}


/* ==========================================================
   SIDEBAR HEADING
   ========================================================== */

.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook-list__heading {
    font-family:
            var(--tb-notebook-display-font);

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

    letter-spacing: -0.035em;
}

.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook-list__count {
    color:
            var(--tb-notebook-accent);

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

    font-size: 1.35rem;

    font-weight:
            var(--tb-wodehouse-body-weight);
}


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

.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook-list__search {
    border-color:
            color-mix(
                    in srgb,
                    var(--tb-notebook-accent) 44%,
                    transparent
            );

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

    box-shadow:
            inset
            0
            1px
            0
            rgb(255 255 255 / 40%);
}


/* ==========================================================
   SIDEBAR CONTROLS
   ========================================================== */

.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook-list__segmented {
    border-radius: 0.55rem;

    transform:
            rotate(-0.15deg);
}

.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook-list__segment {
    font-family:
            var(--tb-notebook-body-font);

    font-size: 1.08rem;

    font-weight:
            var(--tb-wodehouse-body-weight);

    font-style: italic;
}

.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook-list__segment.is-active,
.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook-list__segment[aria-pressed="true"] {
    color:
            #fffaf1;

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


/* ==========================================================
   ENTRY ROWS
   ========================================================== */

.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook-entry {
    margin:
            0.18rem
            0;

    border-left: 0;

    border-radius:
            0.4rem;

    padding-left: 1.5rem;
}

.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook-entry:hover {
    background:
            rgb(255 255 255 / 27%);
}


/* ==========================================================
   ACTIVE ENTRY
   ========================================================== */

.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook-entry.is-active {
    position: relative;

    background:
            linear-gradient(
                    92deg,
                    color-mix(
                            in srgb,
                            var(--tb-notebook-accent-warm) 21%,
                            transparent
                    ),
                    color-mix(
                            in srgb,
                            var(--tb-notebook-accent-warm) 7%,
                            transparent
                    )
            );

    transform:
            translateX(0.35rem)
            rotate(-0.18deg);

    box-shadow:
            0
            0.18rem
            0
            rgb(0 0 0 / 4%);
}

.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook-entry.is-active::before {
    position: absolute;

    top: 0.7rem;
    bottom: 0.7rem;
    left: 0;

    width: 0.32rem;

    content: "";

    border-radius: 999px;

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


/* ==========================================================
   ENTRY TYPOGRAPHY
   ========================================================== */

.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook-entry__date {
    color: #84786a;

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

    font-size: 1.3rem;

    font-weight:
            var(--tb-wodehouse-body-weight);

    font-style: italic;
}

.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook-entry__title {
    font-family:
            var(--tb-notebook-body-font);

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

    line-height: 1.15;

    letter-spacing: -0.008em;
}

.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook-entry.is-active
.tb-notebook-entry__title {
    color: #914b39;
}

.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook-entry__excerpt {
    color: #766c61;

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

    font-size: 1.55rem;

    font-weight:
            var(--tb-wodehouse-body-weight);

    line-height: 1.35;

    letter-spacing:
            var(--tb-wodehouse-body-tracking);
}


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

.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook-entry__arrow {
    font-family:
            var(--tb-notebook-display-font);

    font-size: 2.15rem;

    transform:
            translateY(-50%)
            rotate(-5deg);
}


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

.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook-list__epigram {
    margin-top: 4.8rem;

    padding:
            2.6rem
            1.1rem
            0;

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

.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook-list__epigramOrnament {
    color:
            var(--tb-notebook-accent-warm);

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

    font-size: 2.7rem;

    transform:
            rotate(-6deg);
}

.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook-list__epigramText {
    color:
            var(--tb-notebook-accent);

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

    font-size: 1.62rem;

    font-weight:
            var(--tb-wodehouse-body-weight);

    font-style: italic;
    line-height: 1.3;
}

.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook-list__epigramRule {
    width: 5.6rem;

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

    transform:
            rotate(-1deg);
}


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

.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook-reader {
    padding-left: 3.5rem;
}


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

.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook-reader__date {
    color: #807467;

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

    font-size: 1.38rem;

    font-weight:
            var(--tb-wodehouse-body-weight);

    font-style: italic;
}


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

.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook-reader__favorite,
.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook-reader__fontButton {
    background:
            rgb(255 255 255 / 18%);

    box-shadow:
            0
            1px
            0
            rgb(255 255 255 / 32%);
}

.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook-reader__favorite:hover,
.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook-reader__fontButton:hover {
    background:
            var(--tb-notebook-accent-soft);

    transform:
            translateY(-1px);
}


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

.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook-reader__styleBar {
    position: relative;

    padding:
            1.2rem
            0;

    border-top:
            1px solid
            color-mix(
                    in srgb,
                    var(--tb-notebook-accent) 30%,
                    transparent
            );

    border-bottom:
            1px solid
            color-mix(
                    in srgb,
                    var(--tb-notebook-accent) 30%,
                    transparent
            );
}

.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook-reader__styleLabel {
    color:
            var(--tb-notebook-accent);

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

    font-size: 1.38rem;

    font-weight:
            var(--tb-wodehouse-body-weight);

    font-style: italic;
}


/* ==========================================================
   STYLE BUTTONS
   ========================================================== */

.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook-reader__styleChoice {
    border-radius: 0.55rem;

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

    font-size: 1.12rem;

    font-weight:
            var(--tb-wodehouse-body-weight);

    font-style: italic;

    transform:
            rotate(-0.3deg);
}

.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook-reader__styleChoice:nth-child(even) {
    transform:
            rotate(0.3deg);
}

.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook-reader__styleChoice.is-active,
.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook-reader__styleChoice[aria-pressed="true"] {
    color:
            #fffaf1;

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

    box-shadow:
            0
            0.18rem
            0
            rgb(0 0 0 / 8%);
}


/* ==========================================================
   TEMP WODEHOUSE TYPOGRAPHY DROPDOWN
   ========================================================== */

.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook-reader__variantBar {
    display: flex;

    align-items: center;

    gap: 0.8rem;

    margin-top: 1rem;

    padding-top: 0.9rem;

    border-top:
            1px dashed
            color-mix(
                    in srgb,
                    var(--tb-notebook-accent) 24%,
                    transparent
            );
}

.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook-reader__variantBar[hidden] {
    display: none !important;
}

.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook-reader__variantLabel {
    flex: 0 0 auto;

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

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

    font-size: 1.14rem;
    font-weight: 600;
    font-style: italic;

    white-space: nowrap;
}

.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook-reader__variantSelect {
    min-width: 27rem;
    max-width: 100%;

    padding:
            0.62rem
            2.8rem
            0.62rem
            0.9rem;

    border:
            1px solid
            color-mix(
                    in srgb,
                    var(--tb-notebook-accent) 32%,
                    transparent
            );

    border-radius: 0.45rem;

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

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

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

    font-size: 1.1rem;
    line-height: 1.2;

    cursor: pointer;
}


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

.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook-reader__titleWrap {
    margin-bottom: 1.8rem;
}

.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook-reader__title {
    position: relative;

    display: inline-block;

    width: max-content;
    max-width: none;

    white-space: nowrap;

    font-family:
            var(--tb-wodehouse-headline-font);

    font-size:
            clamp(
                    4.65rem,
                    4.55vw,
                    6.35rem
            );

    font-weight:
            var(--tb-wodehouse-headline-weight);

    line-height: 0.91;

    letter-spacing:
            var(--tb-wodehouse-headline-tracking);

    font-kerning: normal;
    font-feature-settings: "kern" 1;

    text-rendering: optimizeLegibility;

    -webkit-text-stroke:
            var(--tb-wodehouse-headline-stroke)
            currentColor;

    transform:
            scaleX(
                    var(--tb-wodehouse-headline-scale-x)
            );

    transform-origin:
            left center;
}

.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook-reader__title::after {
    display: inline-block;

    margin-left: 0.2em;

    content: "✦";

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

    font-size: 0.32em;

    vertical-align: top;

    transform:
            translateY(0.25em)
            rotate(12deg);
}


/* ==========================================================
   TITLE ACCENT
   ========================================================== */

.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook-reader__titleAccent {
    width: 12rem;
    height: 0.45rem;

    margin-top: 1.15rem;

    background:
            linear-gradient(
                    90deg,
                    var(--tb-notebook-accent-warm),
                    #d9a66b
            );

    transform:
            rotate(-1.4deg);

    opacity: 0.72;
}


/* ==========================================================
   ARTICLE BODY
   ========================================================== */

.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook-reader__body {
    color: #29231d;

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

    font-weight:
            var(--tb-wodehouse-body-weight);

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

    letter-spacing:
            var(--tb-wodehouse-body-tracking);

    font-kerning: normal;

    text-rendering: optimizeLegibility;
}


/* ==========================================================
   BODY PARAGRAPHS
   ========================================================== */

.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook-reader__body p,
.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook-reader__body li {
    font-family:
            var(--tb-wodehouse-body-font) !important;

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

    letter-spacing:
            var(--tb-wodehouse-body-tracking);
}


/* ==========================================================
   FIRST PARAGRAPH
   ========================================================== */

.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook-reader__body > p:first-child {
    font-weight:
            var(--tb-wodehouse-body-weight) !important;

    line-height:
            calc(
                    var(--tb-wodehouse-body-leading) - 0.03
            ) !important;
}


/* ==========================================================
   DROP CAP REMOVED
   ========================================================== */

.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook-reader__body > p:first-child::first-letter {
    float: none;

    margin: 0;

    color: inherit;

    font-family: inherit;

    font-size: inherit;
    font-weight: inherit;

    line-height: inherit;
}


/* ==========================================================
   LINKS
   ========================================================== */

.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook-reader__body a {
    color:
            var(--tb-notebook-accent);

    text-decoration-color:
            color-mix(
                    in srgb,
                    var(--tb-notebook-accent-warm) 65%,
                    transparent
            );

    text-decoration-thickness: 1px;
    text-underline-offset: 0.16em;
}


/* ==========================================================
   EMPHASIS
   ========================================================== */

.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook-reader__body strong {
    color: #25211c;

    font-weight: 600;
}

.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook-reader__body em {
    color:
            var(--tb-notebook-accent);
}


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

.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook-reader__body h2,
.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook-reader__body h3,
.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook-reader__body h4 {
    color:
            var(--tb-notebook-accent);

    font-family:
            var(--tb-wodehouse-headline-font);

    font-weight:
            var(--tb-wodehouse-headline-weight);

    letter-spacing: -0.015em;
}


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

.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook-reader__body blockquote {
    position: relative;

    margin:
            1.8em
            1.5rem;

    padding:
            1.3rem
            1.8rem
            1.3rem
            2.3rem;

    border-left: 0;

    color: #51493f;

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

    box-shadow:
            inset
            0.3rem
            0
            0
            color-mix(
                    in srgb,
                    var(--tb-notebook-accent-warm) 55%,
                    transparent
            );

    font-family:
            var(--tb-wodehouse-body-font) !important;

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

    font-style: italic;

    transform:
            rotate(-0.25deg);
}

.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook-reader__body blockquote::before {
    position: absolute;

    top: -0.25rem;
    left: 0.45rem;

    content: "“";

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

    font-family:
            var(--tb-wodehouse-headline-font);

    font-size: 4.4rem;
    line-height: 1;

    opacity: 0.68;
}


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

.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook-reader__body img {
    border:
            0.7rem solid
            rgb(255 255 255 / 25%);

    box-shadow:
            0
            0.45rem
            1.5rem
            rgb(61 49 34 / 9%);
}


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

.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook-reader__ornament {
    width: 22rem;

    gap: 1.2rem;

    margin-top: 3.5rem;

    transform:
            rotate(-0.5deg);
}

.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook-reader__ornamentRule {
    background:
            color-mix(
                    in srgb,
                    var(--tb-notebook-accent) 42%,
                    transparent
            );
}

.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook-reader__ornamentMark {
    color:
            var(--tb-notebook-accent-warm);

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

    font-size: 2.7rem;

    transform:
            rotate(-6deg);
}


/* ==========================================================
   FOOTER NAV
   ========================================================== */

.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook-reader__footer {
    border-top:
            1px solid
            color-mix(
                    in srgb,
                    var(--tb-notebook-accent) 27%,
                    transparent
            );
}

.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook-reader__navDirection {
    color:
            var(--tb-notebook-accent-warm);

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

    font-size: 1.18rem;

    font-weight:
            var(--tb-wodehouse-body-weight);

    font-style: italic;

    letter-spacing: 0;
    text-transform: none;
}

.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook-reader__navTitle {
    color:
            var(--tb-notebook-accent);

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

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

    line-height: 1.18;
}


/* ==========================================================
   SMALL HEADER FLOURISH
   ========================================================== */

.tb-notebook[data-notebook-style="wodehouse"]
.tb-notebook-reader__header::after {
    display: block;

    width: 2rem;
    height: 2rem;

    margin:
            -0.8rem
            0
            0
            auto;

    content: "•";

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

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

    font-size: 2.6rem;
    line-height: 1;

    transform:
            rotate(12deg);

    opacity: 0.62;
}


/* ==========================================================
   RESPONSIVE HEADLINE
   ========================================================== */

@media (max-width: 1100px) {

    .tb-notebook[data-notebook-style="wodehouse"]
    .tb-notebook-reader__title {
        width: auto;
        max-width: 100%;

        white-space: normal;

        transform: none;
    }
}


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

@media (max-width: 760px) {

    .tb-notebook[data-notebook-style="wodehouse"]
    .tb-notebook__heading {
        max-width: 100%;

        transform: none;
    }

    .tb-notebook[data-notebook-style="wodehouse"]
    .tb-notebook__heading::after {
        width: 4rem;
    }

    .tb-notebook[data-notebook-style="wodehouse"]
    .tb-notebook-reader {
        padding-left: 0;
    }

    .tb-notebook[data-notebook-style="wodehouse"]
    .tb-notebook-reader__title::after {
        display: none;
    }

    .tb-notebook[data-notebook-style="wodehouse"]
    .tb-notebook-reader__variantBar {
        align-items: stretch;
        flex-direction: column;

        gap: 0.45rem;
    }

    .tb-notebook[data-notebook-style="wodehouse"]
    .tb-notebook-reader__variantSelect {
        width: 100%;
        min-width: 0;
    }

    .tb-notebook[data-notebook-style="wodehouse"]
    .tb-notebook-reader__styleChoice,
    .tb-notebook[data-notebook-style="wodehouse"]
    .tb-notebook-reader__styleChoice:nth-child(even),
    .tb-notebook[data-notebook-style="wodehouse"]
    .tb-notebook-entry.is-active,
    .tb-notebook[data-notebook-style="wodehouse"]
    .tb-notebook-reader__body blockquote {
        transform: none;
    }
}