/* ==========================================================
   NOTEBOOK — MAD MAGAZINE

   Personality layer for:

   data-notebook-style="mad"

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


/* ==========================================================
   MAD VARIABLES
   ========================================================== */

.tb-notebook[data-notebook-style="mad"] {
    --tb-notebook-paper: #f4ecd8;
    --tb-notebook-paper-soft: #e8dcc2;
    --tb-notebook-paper-selected: #f0c997;

    --tb-notebook-ink: #29231e;
    --tb-notebook-ink-soft: #4a4139;
    --tb-notebook-muted: #75695d;

    --tb-notebook-rule: rgb(75 54 35 / 18%);
    --tb-notebook-rule-strong: rgb(75 54 35 / 34%);

    --tb-notebook-accent: #c25136;
    --tb-notebook-accent-soft: #f3d8a5;
    --tb-notebook-accent-warm: #d46b32;

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

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

    --tb-notebook-body-font:
            "Trebuchet MS",
            Arial,
            Helvetica,
            sans-serif;

    --tb-notebook-interface-font:
            "Trebuchet MS",
            Arial,
            sans-serif;

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

    --tb-notebook-body-leading: 1.44;
    --tb-notebook-paragraph-gap: 0.9em;

    --tb-notebook-title-weight: 900;
    --tb-notebook-title-leading: 0.95;

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

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

    --tb-notebook-columns: 1;

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

    --tb-notebook-title-accent-display: block;
    --tb-notebook-title-accent-width: 14rem;
    --tb-notebook-title-accent-height: 0.72rem;

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


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

.tb-notebook[data-notebook-style="mad"] {
    background:
            radial-gradient(
                    circle at 15% 10%,
                    rgb(255 221 91 / 14%),
                    transparent 24rem
            ),
            radial-gradient(
                    circle at 88% 18%,
                    rgb(209 76 46 / 8%),
                    transparent 28rem
            ),
            var(--tb-notebook-paper);
}


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

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

    width: fit-content;

    max-width: 100%;

    font-size:
            clamp(
                    5.6rem,
                    6.4vw,
                    9rem
            );

    letter-spacing: -0.055em;

    transform: rotate(-0.6deg);
}

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

    z-index: -1;

    left: -0.05em;
    right: -0.12em;
    bottom: 0.05em;

    height: 0.22em;

    content: "";

    background: #efd664;

    transform: rotate(-1.5deg);

    opacity: 0.62;
}


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

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

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

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

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

    letter-spacing: 0.025em;

    text-transform: uppercase;
}


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

.tb-notebook[data-notebook-style="mad"]
.tb-notebook__personality {
    align-items: center;

    transform: rotate(0.5deg);
}


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

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

    border:
            0.25rem solid
            var(--tb-notebook-ink);

    border-radius:
            47%
            53%
            45%
            55%;

    background:
            #f1d25d;

    box-shadow:
            0.35rem
            0.35rem
            0
            rgb(0 0 0 / 10%);

    transform: rotate(-5deg);
}

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

    font-size: 3.3rem;

    transform: rotate(11deg);
}


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

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

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

    font-size: 1.5rem;
    font-style: normal;
    font-weight: 800;

    line-height: 1.22;

    text-transform: uppercase;

    transform: rotate(-1deg);
}

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

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

    transform: rotate(2deg);
}


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

.tb-notebook[data-notebook-style="mad"]
.tb-notebook-list {
    background:
            linear-gradient(
                    90deg,
                    rgb(255 255 255 / 8%),
                    rgb(255 229 159 / 8%)
            );
}


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

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

    font-size: 2.5rem;

    transform: rotate(-1deg);
}


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

.tb-notebook[data-notebook-style="mad"]
.tb-notebook-list__search {
    border:
            2px solid
            var(--tb-notebook-ink);

    border-radius: 0.6rem;

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

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

    transform: rotate(-0.3deg);
}


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

.tb-notebook[data-notebook-style="mad"]
.tb-notebook-list__segmented {
    border:
            2px solid
            var(--tb-notebook-ink);

    border-radius: 0.45rem;

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

.tb-notebook[data-notebook-style="mad"]
.tb-notebook-list__segment {
    font-weight: 800;
}

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

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


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

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

    border-left: 0;

    border-radius: 0.3rem;
}

.tb-notebook[data-notebook-style="mad"]
.tb-notebook-entry:hover {
    background:
            rgb(239 214 100 / 14%);
}


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

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

    color:
            #fff7e8;

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

    transform:
            translateX(0.3rem)
            rotate(-0.4deg);

    box-shadow:
            0.35rem
            0.35rem
            0
            rgb(0 0 0 / 9%);
}

.tb-notebook[data-notebook-style="mad"]
.tb-notebook-entry.is-active
.tb-notebook-entry__date,
.tb-notebook[data-notebook-style="mad"]
.tb-notebook-entry.is-active
.tb-notebook-entry__title,
.tb-notebook[data-notebook-style="mad"]
.tb-notebook-entry.is-active
.tb-notebook-entry__excerpt,
.tb-notebook[data-notebook-style="mad"]
.tb-notebook-entry.is-active
.tb-notebook-entry__arrow {
    color:
            #fff7e8;
}


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

.tb-notebook[data-notebook-style="mad"]
.tb-notebook-entry__title {
    font-size: 1.85rem;
    font-weight: 800;
}


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

.tb-notebook[data-notebook-style="mad"]
.tb-notebook-reader__styleBar {
    border-top:
            2px solid
            var(--tb-notebook-ink);

    border-bottom:
            2px solid
            var(--tb-notebook-ink);
}


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

.tb-notebook[data-notebook-style="mad"]
.tb-notebook-reader__styleChoice {
    border:
            2px solid
            var(--tb-notebook-ink);

    border-radius: 0.45rem;

    font-weight: 800;

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

.tb-notebook[data-notebook-style="mad"]
.tb-notebook-reader__styleChoice:nth-child(odd) {
    transform: rotate(-0.5deg);
}

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

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

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

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


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

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

    max-width: 75rem;

    font-size:
            clamp(
                    4rem,
                    4.5vw,
                    6rem
            );

    letter-spacing: -0.045em;

    transform: rotate(-0.35deg);
}

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

    margin-left: 0.15em;

    content: "!!";

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

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

    font-size: 0.32em;
    font-weight: 900;

    transform:
            translateY(-0.5em)
            rotate(9deg);
}


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

.tb-notebook[data-notebook-style="mad"]
.tb-notebook-reader__titleAccent {
    width: 15rem;
    height: 0.75rem;

    margin-top: 0.9rem;

    border-radius: 0;

    background:
            #efd664;

    transform:
            rotate(-1.8deg);

    opacity: 0.75;
}


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

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

    letter-spacing: 0.002em;
}


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

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


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

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

    margin:
            0.05em
            0.08em
            0
            0;

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

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

    font-size: 3.7em;
    font-weight: 900;

    line-height: 0.72;

    transform: rotate(-4deg);
}


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

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

    font-weight: 700;

    text-decoration-thickness: 0.16em;
    text-underline-offset: 0.12em;
}


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

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

    margin:
            1.8em
            0.7rem;

    padding:
            1.4rem
            1.8rem;

    border-left:
            0;

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

    background:
            #f1d25d;

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

    font-style: normal;
    font-weight: 700 !important;

    box-shadow:
            0.35rem
            0.35rem
            0
            rgb(0 0 0 / 9%);

    transform: rotate(-0.6deg);
}


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

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

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

    font-weight: 900;

    transform: rotate(-0.25deg);
}


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

.tb-notebook[data-notebook-style="mad"]
.tb-notebook-list__epigram {
    border-top:
            2px dashed
            var(--tb-notebook-accent);
}

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

    font-size: 2.8rem;

    transform: rotate(-8deg);
}

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

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

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

    text-transform: uppercase;
}


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

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

    transform: rotate(-1deg);
}

.tb-notebook[data-notebook-style="mad"]
.tb-notebook-reader__ornamentRule {
    height: 0.2rem;

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

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

    font-size: 3rem;

    transform: rotate(-10deg);
}


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

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

    font-weight: 900;

    letter-spacing: 0.06em;
}


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

@media (max-width: 760px) {

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

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

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