/* Ghost Pepper Diva
   A backstage dressing room. The photo stays behind everything, the hot sauce
   rack is the menu, and all reading happens on solid paper in dark ink.

   1. Fonts      2. Colors and type   3. Base        4. Header and hero
   5. Rack menu  6. Panels, shelves   7. Cards       8. Post and pages
   9. Content    10. About and Links  11. Search     12. Footer, 404, misc
   (Ghost card and lightbox styles from Source follow in screen.css) */

/* 1. Fonts (SIL Open Font License, files and licenses in assets/fonts) */
@font-face { font-family: "Bagel Fat One"; font-weight: 400; font-display: swap;
    src: url("../fonts/bagel-fat-one-latin-400-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bagel Fat One"; font-weight: 400; font-display: swap;
    src: url("../fonts/bagel-fat-one-latin-ext-400-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Nunito"; font-weight: 700; font-display: swap; src: url("../fonts/nunito-latin-700-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nunito"; font-weight: 700; font-display: swap; src: url("../fonts/nunito-latin-ext-700-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Nunito"; font-weight: 800; font-display: swap; src: url("../fonts/nunito-latin-800-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nunito"; font-weight: 800; font-display: swap; src: url("../fonts/nunito-latin-ext-800-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Nunito"; font-weight: 900; font-display: swap; src: url("../fonts/nunito-latin-900-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nunito"; font-weight: 900; font-display: swap; src: url("../fonts/nunito-latin-ext-900-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Playfair Display"; font-weight: 900; font-style: italic; font-display: swap; src: url("../fonts/playfair-display-latin-900-italic.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Playfair Display"; font-weight: 900; font-style: italic; font-display: swap; src: url("../fonts/playfair-display-latin-ext-900-italic.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* 2. Colors and type */
:root {
    --ink: #1d0b2b;          /* all text, 17.8:1 on paper */
    --ink-soft: #3b1f50;     /* secondary text, 13.5:1 on paper */
    --paper: #fffaf5;
    --paper-pink: #ffeef7;
    --line: #e8c9dd;
    --night: #2a1238;
    --pink: #ff5fae;
    --lav: #c9b6ff;
    --orange: #ff9a3d;
    --rose: #ff7cc0;
    --sky: #7fd6ff;
    --grape: #b88cff;
    --gold: #ffd24d;
    --display: var(--gh-font-heading, "Bagel Fat One", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif);
    --body: var(--gh-font-body, "Nunito", "Trebuchet MS", Verdana, sans-serif);
    --romance: "Playfair Display", Georgia, serif;
    --c: var(--pink);        /* the current section's color */
}
.s-glitter-doom { --c: var(--lav); }
.s-diva-delights { --c: var(--orange); }
.s-diva-designs { --c: var(--rose); }
.s-diva-diary { --c: var(--sky); }
.s-diva-drama { --c: var(--grape); }
.s-diva-drawings { --c: var(--gold); }
.s-fresh { --c: var(--pink); }

/* 3. Base */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--night); -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--body);
    font-weight: 700;
    font-size: 20px;
    line-height: 1.55;
    color: var(--ink);
    background: var(--night);
    overflow-x: hidden;
}
img { max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 4px solid var(--gold); outline-offset: 3px; border-radius: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 50; background: #fff; color: var(--ink); font-weight: 900; padding: 10px 16px; border: 3px solid var(--ink); border-radius: 12px; }
.skip:focus { top: 12px; }

.room {
    position: fixed;
    inset: 0;
    z-index: 0;
    background: var(--night) var(--room-wide) center 18% / cover no-repeat;
}
@media (max-width: 760px) {
    .room { background-image: var(--room-phone); background-position: center 12%; }
}
.site {
    position: relative;
    z-index: 1;
    max-width: 1180px;
    margin-inline: auto;
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.site > main { flex: 1 0 auto; }

/* cel-shaded bubble letters */
.bubble {
    font-family: var(--display);
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.05;
    color: var(--fill, #fff);
    -webkit-text-stroke: 0.12em var(--ink);
    paint-order: stroke fill;
    text-shadow: 0.05em 0.07em 0 var(--ink);
    text-wrap: balance;
    overflow-wrap: anywhere;
    margin: 0;
}
.sticker {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    background: #fff;
    color: var(--ink);
    border: 3px solid var(--ink);
    border-radius: 999px;
    box-shadow: 3px 4px 0 var(--ink);
    font-family: var(--body);
    font-weight: 900;
    font-size: 17px;
    line-height: 1.15;
    padding: 0.45em 0.95em;
    margin: 0;
    text-decoration: none;
}
a.sticker:hover, button.sticker:hover { transform: translate(-1px, -2px); box-shadow: 4px 6px 0 var(--ink); }
button.sticker { cursor: pointer; }
.icon { width: 1.1em; height: 1.1em; flex: none; }
.date { font-weight: 900; font-size: 17px; color: var(--ink); font-variant-numeric: tabular-nums; }
.kind {
    font-size: 15px;
    font-weight: 900;
    line-height: 1.3;
    color: var(--ink);
    border: 2.5px solid var(--ink);
    border-radius: 8px;
    padding: 2px 8px;
    background: #fff;
}
.kind-food { background: var(--orange); }
.kind-soda { background: var(--sky); }
.kind-romance { background: var(--rose); }
.kind-drama { background: var(--gold); }
.kind-horror { background: #d8d0c4; }

/* 4. Header and hero */
.top {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    align-items: center;
    justify-content: space-between;
    padding-block: 12px 6px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.brand-logo { width: 46px; height: auto; flex: none; }
.brand .bubble { font-size: 28px; }
.home-template .brand { visibility: hidden; }
.top-nav { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.nav { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.nav .is-current { background: var(--gold); }

.hero { display: grid; justify-items: center; gap: 8px; text-align: center; padding-block: 0 6px; }
.hero-logo { width: clamp(110px, 16vw, 170px); height: auto; filter: drop-shadow(0 6px 0 rgba(29, 11, 43, 0.55)); }
.hero h1 { font-size: clamp(42px, 7.4vw, 86px); --fill: #fff; }
.hero-last { color: var(--pink); }
.hero-tag { background: var(--gold); font-size: 18px; }

/* 5. Rack menu */
.rack {
    position: relative;
    width: min(100%, 620px);
    margin: 14px auto 22px;
    container-type: inline-size;
    filter: drop-shadow(0 10px 0 rgba(29, 11, 43, 0.45));
}
body:not(.home-template) .rack { width: min(100%, 470px); margin-top: 4px; }
.rack-img { display: block; width: 100%; height: auto; }
.bottles { list-style: none; margin: 0; padding: 0; }
.bottle {
    position: absolute;
    left: calc(var(--x) - 13%);
    width: 26%;
    bottom: calc(100% - var(--base));
    height: 37%;
}
.bottle a {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    text-decoration: none;
    transition: transform 0.15s;
}
.bottle img { height: 100%; width: auto; filter: drop-shadow(2px 3px 0 rgba(29, 11, 43, 0.35)); }
.bottle a:hover { transform: translateY(-5px) rotate(-3deg); }
.bottle a[aria-current] img { filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 3px #fff); }
.bottle .tag {
    position: absolute;
    bottom: 14%;
    left: 50%;
    transform: translateX(-50%) rotate(var(--tilt, -3deg));
    background: #fff;
    color: var(--ink);
    border: 2.5px solid var(--ink);
    border-top: 7px solid var(--c);
    border-radius: 10px;
    box-shadow: 2px 3px 0 var(--ink);
    padding: 3px 6px 4px;
    text-align: center;
    font-weight: 900;
    line-height: 1.02;
    white-space: nowrap;
    font-size: clamp(15px, 3.4cqw, 20px);
}
.bottle .tag small { display: block; font-size: 0.8em; font-weight: 900; color: var(--ink-soft); }
.bottle a[aria-current] .tag { background: var(--gold); }

/* 6. Panels and shelves */
.panel {
    background: var(--paper);
    border: 4px solid var(--ink);
    border-radius: 30px;
    box-shadow: 8px 10px 0 rgba(29, 11, 43, 0.85);
    padding: clamp(18px, 3.4vw, 40px);
    margin-bottom: 28px;
    min-width: 0;
}
.shelf + .shelf { margin-top: 44px; padding-top: 34px; border-top: 4px dashed var(--line); }
.shelf-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 24px; }
.sec-bottle { height: 64px; width: auto; }
.shelf-head h2, .shelf-head h1 { font-size: clamp(32px, 4.6vw, 52px); --fill: var(--c); }
.shelf-head .see-all { margin-left: auto; }
.shelf-head p { flex-basis: 100%; margin: 0; font-size: 19px; color: var(--ink-soft); }
.empty { font-size: 19px; color: var(--ink-soft); margin: 0; }
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 36px 28px;
    align-items: stretch;
}
@media (max-width: 560px) {
    .grid { grid-template-columns: 1fr; justify-items: center; }
    .grid .card { width: min(100%, 290px); }
    .shelf-head .see-all { margin-left: 0; }
}

/* 7. Cards */
.card {
    position: relative;
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 12px;
    color: var(--ink);
    text-decoration: none;
    container-type: inline-size;
    min-width: 0;
    width: 100%;
    max-width: 340px;
    justify-self: center;
}
.card .obj { position: relative; align-self: end; transition: transform 0.18s; }
.card .obj > img:not([class]) { display: block; width: 100%; height: auto; }
.card:hover .obj { transform: translateY(-4px) rotate(-1deg); }
.card h3 { margin: 0; font-weight: 900; }
.cap { display: grid; gap: 6px; justify-items: center; text-align: center; }
.cap h3 { font-size: 21px; line-height: 1.2; min-height: 2.4em; display: flex; align-items: flex-end; justify-content: center; text-wrap: balance; overflow-wrap: anywhere; }
.cap .row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }
.ov {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow-wrap: anywhere;
    text-wrap: balance;
}
.shot { position: absolute; object-fit: cover; }

/* Glitter Doom: glitter vinyl sliding out of a sleeve */
.c-record .obj { aspect-ratio: 1.28; }
.c-record .rec { position: absolute; right: 0; top: 3%; width: 72%; height: auto; }
.c-record .slv { position: absolute; left: 0; top: 0; width: 78%; height: auto; }
.c-record .shot { left: 4.6%; top: 4.6%; width: 68.8%; aspect-ratio: 1; height: auto; border-radius: 2px; }
.c-record .slv-title { position: absolute; left: 7%; top: 8%; width: 64%; height: 62%; display: flex; align-items: center; justify-content: center; text-align: center; font-size: clamp(18px, 9cqw, 30px); --fill: var(--lav); }
.c-record .cap { justify-items: start; text-align: left; }
.c-record .cap h3 { justify-content: flex-start; }

/* Diva Delights: takeout box, or a cup for sodas */
.c-box .obj { width: 84%; margin-inline: auto; }
.c-box .ov { left: 16%; right: 16%; top: 44%; bottom: 12%; font-size: clamp(15px, 8.6cqw, 24px); line-height: 1.12; }
.c-cup .obj { width: 58%; margin-inline: auto; }
.c-cup .ov { left: 20%; right: 20%; top: 44%; bottom: 18%; font-size: clamp(15px, 8cqw, 22px); line-height: 1.12; }
.dot {
    position: absolute;
    width: 36%;
    aspect-ratio: 1;
    height: auto;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #fff;
    box-shadow: 0 0 0 3px var(--ink), 3px 4px 0 3px var(--ink);
    right: -6%;
    top: 4%;
}
.c-cup .dot { right: -34%; top: 20%; width: 52%; }
.heat { display: inline-flex; align-items: center; gap: 2px; }
.heat img { height: 30px; width: auto; }
.heat img.off { filter: grayscale(1) brightness(1.5); opacity: 0.35; }
.heat b { margin-left: 8px; font-size: 17px; font-weight: 900; }

/* Diva Designs: Polaroids clipped to a gold rail */
.c-polaroid { padding-top: 26px; }
.c-polaroid::before {
    content: "";
    position: absolute;
    left: -16px;
    right: -16px;
    top: 0;
    height: 22px;
    background: url("../images/rod-mid.webp") center / auto 100% repeat-x;
}
.c-polaroid .obj { width: 90%; margin-inline: auto; transform: rotate(-2deg); }
.grid > .c-polaroid:nth-child(even) .obj { transform: rotate(1.5deg); }
.grid > .c-polaroid:nth-child(3n) .obj { transform: rotate(-1deg); }
.c-polaroid:hover .obj { transform: rotate(0) translateY(-3px) !important; }
.c-polaroid .clip { position: absolute; top: -14%; left: 50%; width: 9%; height: auto; transform: translateX(-50%); z-index: 2; }
.c-polaroid .shot { left: 5.6%; top: 5.3%; width: 88.5%; height: 74.3%; }
.c-polaroid .shot-empty { object-fit: contain; background: #f3eef2; padding: 12%; }
.c-polaroid .ov { left: 6%; right: 6%; top: 81%; bottom: 2%; font-size: clamp(15px, 7.6cqw, 21px); line-height: 1.1; }

/* Diva Diary: a phone in a ring light */
.c-phone .obj { width: 92%; margin-inline: auto; aspect-ratio: 884 / 1000; overflow: hidden; }
.c-phone .obj > img { width: 100%; }
.c-phone .screen {
    position: absolute;
    left: 33.6%;
    right: 33%;
    top: 17.5%;
    height: 62%;
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    display: grid;
    grid-template-rows: auto 1fr auto;
    container-type: inline-size;
}
.c-phone .who { display: flex; align-items: center; gap: 4%; padding: 6% 6% 5%; font-size: 11.5cqw; font-weight: 900; white-space: nowrap; overflow: hidden; line-height: 1.1; }
.c-phone .who span { overflow: hidden; text-overflow: ellipsis; }
.c-phone .who i { flex: none; width: 1.3em; height: 1.3em; border-radius: 50%; background: var(--pink); border: 2px solid var(--ink); }
.c-phone .pic { position: relative; min-height: 0; }
.c-phone .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.c-phone .pic .pic-empty { object-fit: contain; padding: 10%; background: var(--paper-pink); }
.c-phone .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 34%; aspect-ratio: 1; border-radius: 50%; background: rgba(29, 11, 43, 0.82); border: 2px solid #fff; display: grid; place-items: center; }
.c-phone .play svg { width: 45%; fill: #fff; }
.c-phone .act { display: flex; gap: 6px; padding: 5% 6%; }
.c-phone .act svg { width: 16cqw; max-width: 20px; height: auto; }

/* Diva Drama: romance paperback, gossip magazine, creepy doll */
.c-paperback .obj { width: 72%; margin-inline: auto; }
.c-paperback .shot { left: 13%; top: 3%; width: 84%; height: 58%; -webkit-mask: linear-gradient(#000 70%, transparent); mask: linear-gradient(#000 70%, transparent); }
.c-paperback .ov {
    left: 15%; right: 5%; top: 52%; bottom: 5%;
    font-family: var(--romance); font-style: italic; font-weight: 900;
    font-size: clamp(18px, 10cqw, 28px); line-height: 1.04;
    color: var(--gold); -webkit-text-stroke: 0.14em var(--ink); paint-order: stroke fill;
}
.c-paperback .ov-full { top: 10%; }
.c-paperback .ov small { font-family: var(--body); font-style: normal; font-size: 0.46em; color: var(--ink); -webkit-text-stroke: 0; margin-top: 6px; letter-spacing: 0.08em; text-transform: uppercase; }
.c-magazine .obj { width: 76%; margin-inline: auto; }
.c-magazine .shot { left: 4.5%; top: 12%; width: 92.5%; height: 86%; }
.c-magazine .mast {
    position: absolute; left: 4.5%; right: 3%; top: 1.5%; height: 11%;
    display: grid; place-items: center; white-space: nowrap; overflow: hidden; line-height: 1;
    font-family: var(--display); font-size: clamp(14px, 8.5cqw, 26px); text-transform: uppercase;
    color: var(--pink); -webkit-text-stroke: 0.1em var(--ink); paint-order: stroke fill;
}
.c-magazine .ex { position: absolute; left: 8%; top: 50%; background: var(--gold); border: 3px solid var(--ink); font-weight: 900; font-size: clamp(13px, 6cqw, 17px); padding: 1px 8px; transform: rotate(-5deg); text-transform: uppercase; }
.c-magazine .ov { left: 4.5%; right: 3%; bottom: 2%; background: var(--ink); color: #fff; padding: 5% 6%; font-size: clamp(15px, 8cqw, 22px); line-height: 1.1; }
.c-doll .obj { width: 84%; margin-inline: auto; }
.c-doll .ov { left: 24%; right: 13%; top: 48.5%; bottom: 31.5%; color: #2b1306; font-size: clamp(14px, 7.6cqw, 22px); line-height: 1.08; }

/* Diva Drawings: sketchbook pages taped up */
.c-sketch .obj { width: 84%; margin-inline: auto; transform: rotate(1.5deg); }
.grid > .c-sketch:nth-child(even) .obj { transform: rotate(-1.5deg); }
.c-sketch .shot { left: 9%; top: 11%; width: 82%; height: 58%; object-fit: contain; background: #fff; }
.c-sketch .tape { position: absolute; width: 44%; height: auto; top: -1%; }
.c-sketch .t1 { left: -10%; transform: rotate(-24deg); }
.c-sketch .t2 { right: -10%; transform: rotate(22deg); }
.c-sketch .ov { left: 8%; right: 8%; top: 72%; bottom: 5%; font-size: clamp(15px, 8.4cqw, 23px); line-height: 1.1; }
.c-sketch .ov-full { top: 15%; font-size: clamp(18px, 10cqw, 28px); }

/* Posts with no section: a sticker note */
.c-note .obj.note { background: #fff; border: 3px solid var(--ink); border-radius: 18px; box-shadow: 4px 5px 0 var(--ink); padding: 14px; display: grid; gap: 10px; }
.c-note .note-img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 10px; }
.c-note h3 { font-size: 21px; line-height: 1.2; text-align: center; }

/* 8. Post and pages */
.post { max-width: 860px; margin-inline: auto; width: 100%; }
.post .post-head, .post .more-tags, .post-pager, .post .comments { max-width: 720px; margin-left: auto; margin-right: auto; }
.post .more-tags { margin-top: 34px; }
.post-head { display: grid; gap: 14px; margin-bottom: 26px; }
.post-meta { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.sec-sticker { border-top: 7px solid var(--c); }
.post-title { font-size: clamp(36px, 6vw, 64px); --fill: var(--c); }
.page-template .post-title { --fill: var(--pink); }
.post-excerpt { margin: 0; font-size: 22px; color: var(--ink-soft); max-width: 40ch; }
.verdict { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; background: var(--paper-pink); border: 3px solid var(--ink); border-radius: 18px; padding: 12px 18px; justify-self: start; }
.verdict-label { font-family: var(--display); font-size: 24px; }
.verdict .heat img { height: 40px; }
.feat { margin: 8px 0 0; }
.feat img { display: block; width: 100%; height: auto; border: 4px solid var(--ink); border-radius: 20px; box-shadow: 6px 7px 0 var(--ink); }
.feat figcaption, figcaption { margin-top: 12px; font-size: 17px; color: var(--ink-soft); text-align: center; }
.more-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 34px 0 0; }
.pager { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-top: 34px; }
.pager-count { font-weight: 900; font-size: 17px; }
.post-pager .sticker { border-radius: 18px; flex-direction: column; align-items: flex-start; gap: 2px; max-width: min(100%, 360px); }
.post-pager .sticker span { font-size: 15px; color: var(--ink-soft); }
.post-pager [rel="next"] { margin-left: auto; align-items: flex-end; text-align: right; }
.comments { border-top: 4px dashed var(--line); margin-top: 34px; padding-top: 26px; }
.comments h2 { font-size: 34px; --fill: var(--c); margin-bottom: 14px; }
.comments-box { font-size: 18px; }

/* 9. Content written in the editor */
.post-body {
    --content: min(720px, 100%);
    display: grid;
    grid-template-columns:
        [full-start] minmax(0, 1fr)
        [wide-start] minmax(0, 60px)
        [main-start] var(--content) [main-end]
        minmax(0, 60px) [wide-end]
        minmax(0, 1fr) [full-end];
}
.post-body > * { grid-column: main; min-width: 0; }
.post-body > .kg-width-wide { grid-column: wide; }
.post-body > .kg-width-full { grid-column: full; }
.gh-content { font-size: 20px; line-height: 1.65; overflow-wrap: break-word; }
.gh-content > * { margin-top: 0; margin-bottom: 0; }
.gh-content > * + * { margin-top: 26px; }
.gh-content > :is(h2, h3, h4) { margin-top: 44px; }
.gh-content > :is(h2, h3, h4) + * { margin-top: 12px; }
.gh-content h2, .gh-content h3 { font-family: var(--display); font-weight: 400; line-height: 1.15; color: var(--ink); }
.gh-content h2 { font-size: 34px; }
.gh-content h3 { font-size: 27px; }
.gh-content h4 { font-size: 22px; font-weight: 900; }
.gh-content a { color: var(--ink); font-weight: 900; text-decoration: underline; text-decoration-color: var(--ghost-accent-color, var(--pink)); text-decoration-thickness: 3px; text-underline-offset: 3px; }
.gh-content a:hover { background: var(--paper-pink); }
.gh-content :is(ul, ol) { padding-left: 28px; }
.gh-content li + li { margin-top: 8px; }
.gh-content li::marker { color: var(--ink); }
.gh-content blockquote:not([class]), .gh-content blockquote.kg-blockquote-alt {
    margin-inline: 0;
    padding: 14px 20px;
    background: var(--paper-pink);
    border-left: 8px solid var(--pink);
    border-radius: 0 16px 16px 0;
    font-size: 22px;
}
.gh-content blockquote.kg-blockquote-alt { text-align: center; border-left: 0; border-radius: 16px; font-style: normal; }
.gh-content hr { width: 100%; height: 0; border: 0; border-top: 4px dashed var(--line); margin-block: 40px; }
.gh-content :not(pre) > code { background: var(--paper-pink); border-radius: 6px; padding: 0.1em 0.35em; font-size: 0.9em; }
.gh-content pre { overflow: auto; padding: 16px; font-size: 16px; line-height: 1.5; background: var(--ink); color: #fff; border-radius: 12px; }
.gh-content figure { margin-left: 0; margin-right: 0; }
.gh-content img { border-radius: 12px; }
.gh-content .gh-table, .gh-content table { display: block; overflow-x: auto; }
.gh-content table { border-collapse: collapse; font-size: 18px; }
.gh-content :is(th, td) { padding: 6px 12px; border-bottom: 2px solid var(--line); text-align: left; }
.gh-content iframe { max-width: 100%; border: 0; border-radius: 12px; }
.gh-content .kg-embed-card, .gh-content .kg-video-card, .gh-content .kg-audio-card { border-radius: 16px; }

/* 10. About and Links */
.program {
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: clamp(20px, 4vw, 48px);
    align-items: start;
}
.headshot { margin: 0; background: #fff; border: 4px solid var(--ink); padding: 14px 14px 18px; box-shadow: 6px 8px 0 var(--ink); transform: rotate(-2deg); }
.headshot .ph { background: radial-gradient(circle at 50% 35%, #ffd3ea, var(--lav) 70%); aspect-ratio: 4 / 5; display: grid; place-items: end center; overflow: hidden; }
.headshot .ph img { width: 100%; height: 100%; object-fit: cover; }
.headshot .ph .ph-mascot { width: auto; height: 96%; object-fit: contain; }
.headshot figcaption { margin-top: 10px; font-weight: 900; font-size: 18px; color: var(--ink); }
.billing { display: grid; gap: 4px; margin-bottom: 22px; }
.eyebrow { font-weight: 900; font-size: 16px; letter-spacing: 0.14em; text-transform: uppercase; }
.billing h1 { font-size: clamp(46px, 7vw, 78px); --fill: var(--pink); }
.as { margin: 0; font-family: var(--romance); font-style: italic; font-weight: 900; font-size: 26px; line-height: 1.2; }
.program-text { min-width: 0; }
@media (max-width: 700px) {
    .program { grid-template-columns: 1fr; }
    .headshot { width: min(100%, 290px); margin-inline: auto; }
}

.links-page { max-width: 760px; margin-inline: auto; width: 100%; }
.links-head { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.links-logo { width: 84px; height: auto; flex: none; }
.links-head h1 { font-size: clamp(40px, 6vw, 64px); --fill: var(--sky); }
.links-head p { margin: 8px 0 0; font-size: 20px; color: var(--ink-soft); }
.links-body > :is(h2, h3) { font-family: var(--body); font-weight: 900; font-size: 18px; letter-spacing: 0.12em; text-transform: uppercase; margin-top: 30px; }
.links-body ul { list-style: none; padding: 0; display: grid; gap: 14px; }
.links-body li { position: relative; margin: 0; display: flex; align-items: center; gap: 14px; background: #fff; border: 3px solid var(--ink); border-radius: 18px; box-shadow: 4px 5px 0 var(--ink); padding: 12px 18px 12px 14px; }
.links-body li + li { margin-top: 0; }
.links-body li::before { content: ""; flex: none; width: 24px; height: 44px; background: url("../images/pepper.webp") center / contain no-repeat; }
.links-body li:hover { transform: translate(-1px, -2px); box-shadow: 5px 7px 0 var(--ink); }
.links-body li a { font-size: 22px; font-weight: 900; text-decoration: none; line-height: 1.2; }
.links-body li a::after { content: ""; position: absolute; inset: 0; border-radius: 16px; }
.links-body li a:hover { background: none; }
.links-body li a:focus-visible { outline: none; }
.links-body li:focus-within { outline: 4px solid var(--gold); outline-offset: 3px; }
.links-body li strong { font-size: 15px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; background: var(--gold); border: 2.5px solid var(--ink); border-radius: 8px; padding: 1px 8px; }
.links-body .host { display: block; font-size: 17px; font-weight: 800; color: var(--ink-soft); }
.links-body .link-text { min-width: 0; overflow-wrap: anywhere; }

/* 11. Search */
.search {
    position: fixed;
    inset: 0;
    z-index: 30;
    background: rgba(29, 11, 43, 0.72);
    display: grid;
    align-items: start;
    justify-items: center;
    padding: calc(64px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 16px max(16px, env(safe-area-inset-left, 0px));
    overflow-y: auto;
}
.search[hidden] { display: none; }
.search-box { width: min(100%, 640px); background: var(--paper); border: 4px solid var(--ink); border-radius: 30px; box-shadow: 8px 10px 0 rgba(29, 11, 43, 0.85); padding: clamp(18px, 4vw, 30px); }
.search-close { float: right; }
.search label { display: block; font-size: 34px; --fill: var(--pink); margin-bottom: 14px; }
.search input { width: 100%; font: inherit; font-weight: 900; font-size: 22px; color: var(--ink); background: #fff; border: 4px solid var(--ink); border-radius: 16px; padding: 12px 16px; }
.search-status { margin: 10px 0 0; font-size: 17px; color: var(--ink-soft); }
.search-status:empty { display: none; }
.search-results { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 6px; }
.search-results a { display: grid; gap: 2px; padding: 10px 12px; border: 3px solid transparent; border-radius: 14px; text-decoration: none; }
.search-results a:hover, .search-results a:focus-visible { border-color: var(--ink); background: var(--paper-pink); }
.search-results b { font-size: 20px; font-weight: 900; line-height: 1.25; }
.search-results span { font-size: 16px; font-weight: 900; color: var(--ink-soft); }
html.search-open { overflow: hidden; }

/* 12. Footer, 404, misc */
.foot { display: grid; justify-items: center; gap: 14px; text-align: center; padding-block: 4px calc(30px + env(safe-area-inset-bottom, 0px)); }
.foot-plate { font-size: 16px; }
.foot-nav .nav { justify-content: center; }
.foot-nav .sticker { font-size: 15px; }
.lost { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 24px; align-items: center; }
.lost-img { width: 100%; height: auto; }
.lost h1 { font-size: clamp(40px, 6vw, 60px); --fill: var(--orange); margin-bottom: 12px; }
.lost p { margin: 0 0 16px; }
@media (max-width: 560px) { .lost { grid-template-columns: 1fr; justify-items: center; text-align: center; } .lost-img { width: 140px; } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}


/* 13. Ghost editor cards (adapted from Source) */
/* Image */

.kg-image {
    margin-right: auto;
    margin-left: auto;
}

/* Embed */

.kg-embed-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* Gallery */

.kg-image[width][height],
.kg-gallery-image,
.gh-feature-image {
    cursor: pointer;
}

.kg-image-card a:hover,
.kg-gallery-image a:hover {
    opacity: 1 !important;
}

/* Toggle */

.kg-card.kg-toggle-card .kg-toggle-heading-text {
    font-size: 24px;
    font-weight: 700;
}

/* Callout */

.kg-callout-card.kg-card {
    border-radius: 0.25em;
}

.kg-callout-card-accent a {
    text-decoration: underline;
}

/* Blockquote */

blockquote:not([class]) {
    padding-left: 2rem;
    border-left: 4px solid var(--ghost-accent-color);
}

/* Button */

.kg-card.kg-button-card .kg-btn {
    height: unset;
    padding: .6em 1.2em;
    text-align: center;
    font-size: 1em;
    line-height: 1.2em;
}

/* Bookmark */

.kg-bookmark-card .kg-bookmark-container {
    border-radius: 0.25em !important;
}

.kg-bookmark-card .kg-bookmark-container:hover {
    opacity: 1;
}

.kg-bookmark-card a.kg-bookmark-container,
.kg-bookmark-card a.kg-bookmark-container:hover {
    background: #fff !important;
    color: var(--ink) !important;
}

.kg-bookmark-card .kg-bookmark-content {
    padding: 1.15em;
}

.kg-bookmark-card .kg-bookmark-title {
    font-size: 0.9em;
}

.kg-bookmark-card .kg-bookmark-description {
    max-height: none;
    margin-top: 0.3em;
    font-size: 0.8em;
}

.kg-bookmark-card .kg-bookmark-metadata {
    font-size: 0.8em;
}

.kg-bookmark-card .kg-bookmark-thumbnail img {
    border-radius: 0 0.2em 0.2em 0;
}

/* Product */

.kg-product-card.kg-card .kg-product-card-image {
    margin-bottom: 12px;
}

.kg-product-card.kg-card a.kg-product-card-button {
    height: 2.8em;
    margin-top: 12px;
}

/* File */

.kg-file-card.kg-card .kg-file-card-container {
    padding: 0.6em;
}

.kg-file-card.kg-card .kg-file-card-contents {
    margin: 4px 8px 6px;
}

.kg-file-card.kg-card .kg-file-card-metadata {
    font-size: 0.9em;
}

.kg-file-card.kg-card .kg-file-card-filesize::before {
    margin-right: 6px;
    margin-left: 6px;
}

/* Caption */

figcaption {
    margin-top: 12px;
    font-size: 1.4rem;
    text-align: center;
}



/* 22. Lightbox
/* ---------------------------------------------------------- */

.pswp {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3999999;
    display: none;
    width: 100%;
    height: 100%;
    overflow: hidden;
    -ms-touch-action: none;
    touch-action: none;
    outline: none;
    backface-visibility: hidden;
    -webkit-text-size-adjust: 100%;
}

.pswp img {
    max-width: none;
}

.pswp--animate_opacity {
    opacity: 0.001;
    transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
    will-change: opacity;
}

.pswp--open {
    display: block;
}

.pswp--zoom-allowed .pswp__img {
    cursor: zoom-in;
}

.pswp--zoomed-in .pswp__img {
    cursor: grab;
}

.pswp--dragging .pswp__img {
    cursor: grabbing;
}

.pswp__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    opacity: 0;
    transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: opacity;
}

.pswp__scroll-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.pswp__container,
.pswp__zoom-wrap {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    touch-action: none;
    backface-visibility: hidden;
}

.pswp__container,
.pswp__img {
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

.pswp__zoom-wrap {
    position: absolute;
    width: 100%;
    transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
    transform-origin: left top;
}

.pswp--animated-in .pswp__bg,
.pswp--animated-in .pswp__zoom-wrap {
    transition: none;
}

.pswp__item {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
}

.pswp__img {
    position: absolute;
    top: 0;
    left: 0;
    width: auto;
    height: auto;
}

.pswp__img--placeholder {
    backface-visibility: hidden;
}

.pswp__img--placeholder--blank {
    background: var(--color-black);
}

.pswp--ie .pswp__img {
    top: 0;
    left: 0;
    width: 100% !important;
    height: auto !important;
}

.pswp__error-msg {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    margin-top: -8px;
    font-size: 14px;
    line-height: 16px;
    color: var(--color-secondary-text);
    text-align: center;
}

.pswp__error-msg a {
    color: var(--color-secondary-text);
    text-decoration: underline;
}

.pswp__button {
    position: relative;
    display: block;
    float: right;
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0;
    overflow: visible;
    appearance: none;
    cursor: pointer;
    background: none;
    border: 0;
    box-shadow: none;
    transition: opacity 0.2s;
}

.pswp__button:focus,
.pswp__button:hover {
    opacity: 1;
}

.pswp__button:active {
    outline: none;
    opacity: 0.9;
}

.pswp__button::-moz-focus-inner {
    padding: 0;
    border: 0;
}

.pswp__ui--over-close .pswp__button--close {
    opacity: 1;
}

.pswp__button,
.pswp__button--arrow--left::before,
.pswp__button--arrow--right::before {
    width: 44px;
    height: 44px;
    background: url("../images/default-skin.png") 0 0 no-repeat;
    background-size: 264px 88px;
}

@media (-webkit-min-device-pixel-ratio: 1.1), (-webkit-min-device-pixel-ratio: 1.09375), (min-resolution: 105dpi), (min-resolution: 1.1dppx) {
    .pswp--svg .pswp__button,
    .pswp--svg .pswp__button--arrow--left::before,
    .pswp--svg .pswp__button--arrow--right::before {
        background-image: url("../images/default-skin.svg");
    }

    .pswp--svg .pswp__button--arrow--left,
    .pswp--svg .pswp__button--arrow--right {
        background: none;
    }
}

.pswp__button--close {
    background-position: 0 -44px;
}

.pswp__button--share {
    background-position: -44px -44px;
}

.pswp__button--fs {
    display: none;
}

.pswp--supports-fs .pswp__button--fs {
    display: block;
}

.pswp--fs .pswp__button--fs {
    background-position: -44px 0;
}

.pswp__button--zoom {
    display: none;
    background-position: -88px 0;
}

.pswp--zoom-allowed .pswp__button--zoom {
    display: block;
}

.pswp--zoomed-in .pswp__button--zoom {
    background-position: -132px 0;
}

.pswp--touch .pswp__button--arrow--left,
.pswp--touch .pswp__button--arrow--right {
    visibility: hidden;
}

.pswp__button--arrow--left,
.pswp__button--arrow--right {
    position: absolute;
    top: 50%;
    width: 70px;
    height: 100px;
    margin-top: -50px;
    background: none;
}

.pswp__button--arrow--left {
    left: 0;
}

.pswp__button--arrow--right {
    right: 0;
}

.pswp__button--arrow--left::before,
.pswp__button--arrow--right::before {
    position: absolute;
    top: 35px;
    width: 32px;
    height: 30px;
    content: "";
}

.pswp__button--arrow--left::before {
    left: 6px;
    background-position: -138px -44px;
}

.pswp__button--arrow--right::before {
    right: 6px;
    background-position: -94px -44px;
}

.pswp__counter {
    position: absolute;
    top: 0;
    left: 0;
    height: 44px;
    padding: 0 15px;
    font-size: 11px;
    font-weight: 700;
    line-height: 44px;
    color: var(--color-white);
    user-select: none;
}

.pswp__caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    min-height: 44px;
}

.pswp__caption__center {
    max-width: 420px;
    padding: 25px 15px 30px;
    margin: 0 auto;
    font-size: 11px;
    line-height: 1.6;
    color: var(--color-white);
    text-align: center;
}

.pswp__caption__center .post-caption-title {
    margin-bottom: 7px;
    font-size: 15px;
    font-weight: 500;
    text-transform: uppercase;
}

.pswp__caption__center .post-caption-meta-item + .post-caption-meta-item::before {
    padding: 0 4px;
    content: "\02022";
}

.pswp__caption--empty {
    display: none;
}

.pswp__caption--fake {
    visibility: hidden;
}

.pswp__preloader {
    position: absolute;
    top: 0;
    left: 50%;
    width: 44px;
    height: 44px;
    margin-left: -22px;
    opacity: 0;
    transition: opacity 0.25s ease-out;
    direction: ltr;
    will-change: opacity;
}

.pswp__preloader__icn {
    width: 20px;
    height: 20px;
    margin: 12px;
}

.pswp__preloader--active {
    opacity: 1;
}

.pswp__preloader--active .pswp__preloader__icn {
    background: url("../images/preloader.gif") 0 0 no-repeat;
}

.pswp--css_animation .pswp__preloader--active {
    opacity: 1;
}

.pswp--css_animation .pswp__preloader--active .pswp__preloader__icn {
    animation: clockwise 500ms linear infinite;
}

.pswp--css_animation .pswp__preloader--active .pswp__preloader__donut {
    animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite;
}

.pswp--css_animation .pswp__preloader__icn {
    position: absolute;
    top: 15px;
    left: 15px;
    width: 14px;
    height: 14px;
    margin: 0;
    background: none;
    opacity: 0.75;
}

.pswp--css_animation .pswp__preloader__cut {
    position: relative;
    width: 7px;
    height: 14px;
    overflow: hidden;
}

.pswp--css_animation .pswp__preloader__donut {
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    margin: 0;
    background: none;
    border: 2px solid var(--color-white);
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-radius: 50%;
}

@media screen and (max-width: 1024px) {
    .pswp__preloader {
        position: relative;
        top: auto;
        left: auto;
        float: right;
        margin: 0;
    }
}

@keyframes clockwise {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes donut-rotate {
    0% {
        transform: rotate(0);
    }

    50% {
        transform: rotate(-140deg);
    }

    100% {
        transform: rotate(0);
    }
}

.pswp__ui {
    z-index: 1550;
    visibility: visible;
    opacity: 1;
    -webkit-font-smoothing: auto;
}

.pswp__top-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 44px;
}

.pswp__caption,
.pswp__top-bar,
.pswp--has_mouse .pswp__button--arrow--left,
.pswp--has_mouse .pswp__button--arrow--right {
    backface-visibility: hidden;
    transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
    will-change: opacity;
}

.pswp--has_mouse .pswp__button--arrow--left,
.pswp--has_mouse .pswp__button--arrow--right {
    visibility: visible;
}

.pswp__ui--idle .pswp__top-bar {
    opacity: 0;
}

.pswp__ui--idle .pswp__button--arrow--left,
.pswp__ui--idle .pswp__button--arrow--right {
    opacity: 0;
}

.pswp__ui--hidden .pswp__top-bar,
.pswp__ui--hidden .pswp__caption,
.pswp__ui--hidden .pswp__button--arrow--left,
.pswp__ui--hidden .pswp__button--arrow--right {
    opacity: 0.001;
}

.pswp__ui--one-slide .pswp__button--arrow--left,
.pswp__ui--one-slide .pswp__button--arrow--right,
.pswp__ui--one-slide .pswp__counter {
    display: none;
}

.pswp__element--disabled {
    display: none !important;
}

.pswp--minimal--dark .pswp__top-bar {
    background: none;
}

/* SHARE */
.gh-meta-share {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
}

.has-light-text .gh-button-share {
    border-color: rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.85);
}

.has-light-text .gh-button-share:hover {
    border-color: rgba(255, 255, 255, 0.85);
}

.gh-button-share {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 999px;
    color: rgba(0, 0, 0, 0.85);
    background: transparent;
    cursor: pointer;
    transition: all 0.4s ease;
    white-space: nowrap;
}

.gh-button-share:hover {
    border-color: rgba(0, 0, 0, 0.5);
}