/* ==========================================================
   NOTEBOOK — SAMUEL JOHNSON

   Personality layer for:

   data-notebook-style="johnson"

   Shared structure remains in:
   style-notebook.css
   ========================================================== */


/* ==========================================================
   JOHNSON VARIABLES
   ========================================================== */

.tb-notebook[data-notebook-style="johnson"] {
    --tb-notebook-paper: #efe5d3;
    --tb-notebook-paper-soft: #e4d6bf;
    --tb-notebook-paper-selected: #dfccb0;

    --tb-notebook-ink: #282119;
    --tb-notebook-ink-soft: #51483d;
    --tb-notebook-muted: #776a5a;

    --tb-notebook-rule: rgb(74 56 37 / 24%);
    --tb-notebook-rule-strong: rgb(74 56 37 / 42%);

    --tb-notebook-accent: #714a34;
    --tb-notebook-accent-soft: #ded0ba;
    --tb-notebook-accent-warm: #714a34;

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

    --tb-notebook-display-font:
            Baskerville,
            "Iowan Old Style",
            Georgia,
            serif;

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

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

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

    --tb-notebook-body-leading: 1.49;
    --tb-notebook-paragraph-gap: 0.95em;

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

    --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.045;

    --tb-notebook-title-accent-display: block;
    --tb-notebook-title-accent-width: 7rem;
    --tb-notebook-title-accent-height: 0.16rem;

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


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

.tb-notebook[data-notebook-style="johnson"] {
    background:
            linear-gradient(
                    90deg,
                    rgb(96 69 42 / 2.5%),
                    transparent 18%,
                    transparent 82%,
                    rgb(96 69 42 / 2.5%)
            ),
            var(--tb-notebook-paper);
}


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

.tb-notebook[data-notebook-style="johnson"]
.tb-notebook__intro {
    padding-top: 5rem;
}


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

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

    font-size: 1.2rem;

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


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

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

    width: fit-content;

    max-width: 100%;

    font-size:
            clamp(
                    5.6rem,
                    5.8vw,
                    8rem
            );

    letter-spacing: -0.035em;
}

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

    left: 0;

    content: "";

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

.tb-notebook[data-notebook-style="johnson"]
.tb-notebook__heading::before {
    bottom: -1.2rem;

    width: 9rem;
    height: 1px;
}

.tb-notebook[data-notebook-style="johnson"]
.tb-notebook__heading::after {
    bottom: -1.55rem;

    width: 4.5rem;
    height: 1px;
}


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

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

    margin-top: 2.8rem;

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

    font-size: 1.65rem;
    font-style: normal;

    letter-spacing: 0.015em;
}


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

.tb-notebook[data-notebook-style="johnson"]
.tb-notebook__personality {
    gap: 1.5rem;
}


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

.tb-notebook[data-notebook-style="johnson"]
.tb-notebook__vignette {
    width: 7rem;
    height: 7rem;

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

    border-radius: 0;

    background:
            transparent;

    box-shadow:
            inset
            0
            0
            0
            0.35rem
            rgb(113 74 52 / 4%);
}

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

    font-size: 2.6rem;

    transform: none;
}


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

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

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

    font-size: 1.45rem;
    font-style: normal;

    letter-spacing: 0.04em;

    text-transform: uppercase;
}

.tb-notebook[data-notebook-style="johnson"]
.tb-notebook__mottoRule {
    width: 6rem;

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


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

.tb-notebook[data-notebook-style="johnson"]
.tb-notebook__workspace {
    border-top:
            2px solid
            var(--tb-notebook-accent);
}


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

.tb-notebook[data-notebook-style="johnson"]
.tb-notebook-list {
    border-right:
            1px solid
            var(--tb-notebook-rule-strong);

    background:
            rgb(113 74 52 / 2.5%);
}


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

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

    font-size: 2.1rem;

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


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

.tb-notebook[data-notebook-style="johnson"]
.tb-notebook-list__search {
    border-radius: 0;

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


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

.tb-notebook[data-notebook-style="johnson"]
.tb-notebook-list__segmented {
    border-radius: 0;
}

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

    font-size: 0.95rem;

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

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

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


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

.tb-notebook[data-notebook-style="johnson"]
.tb-notebook-entry {
    border-left:
            2px solid
            transparent;

    border-radius: 0;

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

.tb-notebook[data-notebook-style="johnson"]
.tb-notebook-entry.is-active {
    border-left-color:
            var(--tb-notebook-accent);

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


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

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

    font-size: 1.15rem;

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


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

.tb-notebook[data-notebook-style="johnson"]
.tb-notebook-entry__title {
    font-size: 1.8rem;

    letter-spacing: -0.01em;
}


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

.tb-notebook[data-notebook-style="johnson"]
.tb-notebook-entry__excerpt {
    color:
            var(--tb-notebook-ink-soft);

    font-size: 1.45rem;
}


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

.tb-notebook[data-notebook-style="johnson"]
.tb-notebook-list__epigram {
    border-top:
            1px solid
            var(--tb-notebook-rule-strong);
}

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

    font-size: 2.1rem;
}

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

    font-size: 1.4rem;
    font-style: normal;

    letter-spacing: 0.035em;

    text-transform: uppercase;
}


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

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

    font-size: 1.15rem;

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


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

.tb-notebook[data-notebook-style="johnson"]
.tb-notebook-reader__favorite,
.tb-notebook[data-notebook-style="johnson"]
.tb-notebook-reader__fontButton {
    border-radius: 0;

    background:
            transparent;
}


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

.tb-notebook[data-notebook-style="johnson"]
.tb-notebook-reader__styleBar {
    border-top:
            1px solid
            var(--tb-notebook-rule-strong);

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

.tb-notebook[data-notebook-style="johnson"]
.tb-notebook-reader__styleLabel {
    font-style: normal;

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


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

.tb-notebook[data-notebook-style="johnson"]
.tb-notebook-reader__styleChoice {
    border-radius: 0;

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

    font-size: 0.95rem;

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

.tb-notebook[data-notebook-style="johnson"]
.tb-notebook-reader__styleChoice.is-active,
.tb-notebook[data-notebook-style="johnson"]
.tb-notebook-reader__styleChoice[aria-pressed="true"] {
    color:
            var(--tb-notebook-paper);

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


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

.tb-notebook[data-notebook-style="johnson"]
.tb-notebook-reader__title {
    max-width: 73rem;

    font-size:
            clamp(
                    3.8rem,
                    3.8vw,
                    5.4rem
            );

    letter-spacing: -0.025em;
}


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

.tb-notebook[data-notebook-style="johnson"]
.tb-notebook-reader__titleAccent {
    width: 7rem;
    height: 1px;

    margin-top: 1.3rem;

    border-radius: 0;

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

    opacity: 1;
}

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

    width: 3.5rem;
    height: 1px;

    margin-top: 0.4rem;

    content: "";

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


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

.tb-notebook[data-notebook-style="johnson"]
.tb-notebook-reader__body {
    color:
            #302920;

    letter-spacing: 0.003em;
}


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

.tb-notebook[data-notebook-style="johnson"]
.tb-notebook-reader__body > p:first-child {
    font-size: 1.02em !important;
}


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

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

    margin:
            0.06em
            0.1em
            0
            0;

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

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

    font-size: 4em;
    font-weight: 600;

    line-height: 0.7;
}


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

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

    letter-spacing: 0.04em;

    text-transform: uppercase;
}


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

.tb-notebook[data-notebook-style="johnson"]
.tb-notebook-reader__body blockquote {
    margin:
            1.8em
            2rem;

    padding:
            1.4rem
            2rem;

    border-left:
            3px double
            var(--tb-notebook-accent);

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

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

    background:
            rgb(113 74 52 / 3.5%);

    font-style: normal;
}


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

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

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


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

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

    gap: 1rem;
}

.tb-notebook[data-notebook-style="johnson"]
.tb-notebook-reader__ornamentRule {
    background:
            var(--tb-notebook-rule-strong);
}

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

    font-size: 2.1rem;
}


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

.tb-notebook[data-notebook-style="johnson"]
.tb-notebook-reader__footer {
    border-top:
            1px solid
            var(--tb-notebook-rule-strong);
}

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

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

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


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

@media (max-width: 760px) {

    .tb-notebook[data-notebook-style="johnson"]
    .tb-notebook-reader__body > p:first-child::first-letter {
        font-size: 3.2em;
    }

    .tb-notebook[data-notebook-style="johnson"]
    .tb-notebook__heading::before,
    .tb-notebook[data-notebook-style="johnson"]
    .tb-notebook__heading::after {
        display: none;
    }
}