/*
Theme Name: Folio
Description: Dark theme with a side rail on desktop and a slide-in drawer on phones, a full-bleed front-page banner and poster tiles. Near-black tones, pink highlights, Outfit and Figtree. No build tools, no jQuery.
Author: Folio
Version: 1.3.6
Requires at least: 6.5
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: folio
Update URI: false
*/

/* == design tokens == */
:root {
  --bg: #0d0a0f;
  --surface: #17161a;
  --chip: #1e1d22;
  --chip-hover: #27252c;
  --line: #2b2930;
  --line-2: #3a3740;
  --fg: #ffffff;
  --fg-2: #d1d1d1;
  --fg-3: #b9b0bb;
  --fg-4: #6e6873;
  --pink: #ff94be;
  --pink-hi: #ffb3d2;
  --on-pink: #22101b;
  --alert-bg: #2a1218; --alert-line: #5c2433; --alert-fg: #ffb3c2;
  --good-bg: #10221b; --good-line: #22503d; --good-fg: #9fe3c4;
  --tip-bg: #1f1426; --tip-line: #4a2c5c; --tip-fg: #e2c2ff;
  --cta: linear-gradient(90deg, #ffb0d0 0%, #ff8cba 100%);
  --cta-hi: linear-gradient(90deg, #ffc2dc 0%, #ff97c1 100%);
  --glow: 0 2px 18px 0 rgba(255, 140, 186, .32);
  --glow-2: 0 3px 22px 0 rgba(255, 140, 186, .48);
  --drop: 0 6px 18px rgba(0, 0, 0, .5);
  --veil: .14;
  --r-sm: 10px;
  --r: .7rem;
  --r-lg: .95rem;
  --edge: 16px;
  /* spacing scale (4px base) and the three roles it is used for */
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.25rem;
  --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem;
  --gap-tight: var(--space-2);                    /* parts of one item: label, title, line */
  --gap-related: var(--space-5);                  /* pieces that belong together: answer and its button */
  --gap-section: clamp(2.75rem, 7vw, 3.5rem);     /* separate sections: Q&A, Keep reading, footer */
  --rail-w: 236px;
  --bar-h: 60px;
  --body-font: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --head-font: "Outfit", "Figtree", ui-sans-serif, system-ui, sans-serif;
}
@media (min-width: 768px) { :root { --edge: 28px; } }
@media (min-width: 1024px) { :root { --bar-h: 72px; } }

/* == base == */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--bar-h) + 1rem); }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 15px/1.6 var(--body-font); color-scheme: dark; overflow-wrap: break-word; }
img, svg, video { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
a { color: var(--pink); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; }
h1, h2, h3, h4 { margin: 0 0 .5em; font-family: var(--head-font); color: var(--fg); text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 4.2vw, 3.1rem); font-weight: 800; line-height: 1.05; letter-spacing: -.03em; }
h2 { margin-top: .25em; font-size: clamp(1.35rem, 2.3vw, 1.7rem); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }
h3 { font-size: 1.05rem; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
p, ul, ol { margin: 0 0 1em; }
ul, ol { padding-left: 1.25em; }
li + li { margin-top: .3em; }
:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }

/* == page frame == */
.frame { width: 100%; padding-inline: var(--edge); }
.split .frame { padding-inline: 0; }
.block { padding-block: clamp(1.75rem, 4vw, 3rem); }
.block--snug { padding-block: clamp(1rem, 2.5vw, 1.5rem); }
.entry { padding-top: clamp(1.25rem, 3vw, 2rem); }
main { container: content / inline-size; }
.copy p, .copy li { font-size: 1.0625rem; line-height: 1.7; color: var(--fg-2); }
.copy li + li { margin-top: .5em; }
.copy p strong, .copy li strong { color: var(--fg); }
.copy h2 { margin-top: 2.2em; scroll-margin-top: calc(var(--bar-h) + 1rem); }
.copy h3 { margin-top: 1.6em; }

.rowhead { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.rowhead h2 { display: flex; align-items: center; gap: .45rem; margin: 0; font-weight: 800; }
.rowhead .hl { color: var(--pink); }
.rowhead__more { flex: none; font-size: .8125rem; font-weight: 500; color: var(--fg-3); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; }
.rowhead__more:hover { color: var(--pink); text-decoration-color: var(--pink); }
.rowhead__intro { margin-bottom: var(--gap-related); color: var(--fg-2); }

/* == masthead == */
.masthead { position: sticky; top: 0; z-index: 40; background: rgba(13, 10, 15, .94); border-bottom: 1px solid var(--line); backdrop-filter: blur(10px); }
@media screen and (min-width: 601px) and (max-width: 782px) { body.admin-bar .masthead { top: 46px; } }
@media screen and (min-width: 783px) { body.admin-bar .masthead { top: 32px; } }
.masthead__bar { display: flex; align-items: center; gap: .75rem; min-height: var(--bar-h); }
.logo { font-family: var(--head-font); font-size: 1.4rem; font-weight: 800; line-height: 1; letter-spacing: -.035em; color: var(--fg); }
.logo:hover { text-decoration: none; }
.logo span { color: var(--pink); }
.masthead .menu-btn { order: 1; }
.masthead .logo { order: 2; flex: 1 1 auto; font-size: 1.35rem; text-align: center; }
@media (min-width: 1024px) { .masthead .logo { flex: none; font-size: 1.45rem; text-align: left; } }

/* == buttons == */
.button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .8rem 1.5rem; border: 0; border-radius: var(--r-sm); font-size: .9rem; font-weight: 700; line-height: 1.1; text-align: center; white-space: nowrap; cursor: pointer; transition: box-shadow .25s, transform .2s, color .15s, background .15s; }
.button:hover { text-decoration: none; }
.button--main { background: var(--cta); color: var(--on-pink); box-shadow: var(--glow); }
.button--main:hover { color: var(--on-pink); box-shadow: var(--glow-2); transform: translateY(-1px); }
.button--ring { background: transparent; color: var(--pink); box-shadow: inset 0 0 0 1.5px var(--pink); }
.button--ring:hover { background: var(--pink); color: var(--on-pink); }
.button--soft { background: var(--chip); color: var(--fg); box-shadow: inset 0 0 0 1px var(--line); }
.button--soft:hover { background: var(--chip-hover); color: var(--fg); }
.button--compact { padding: .55rem 1.1rem; font-size: .8125rem; }
.button--wide { width: 100%; }
.button-set { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1rem 0; }

/* == front-page banner == */
.spot { padding: 0 0 clamp(1rem, 2.5vw, 1.5rem); }
.spot__stage { position: relative; display: flex; align-items: center; min-height: clamp(440px, 46cqw, 820px); min-height: clamp(440px, 46cqw, min(820px, calc(100svh - var(--bar-h)))); margin-inline: calc(-1 * var(--edge)); overflow: hidden; background: var(--bg); border-bottom: 1px solid var(--line); isolation: isolate; }
.spot__img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 12%; }
.spot__shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(13, 10, 15, .96) 0%, rgba(13, 10, 15, .86) 28%, rgba(13, 10, 15, .5) 52%, rgba(13, 10, 15, .08) 78%, transparent 100%); }
.spot__body { position: relative; z-index: 2; max-width: 40rem; padding: clamp(1.5rem, 4cqw, 3.5rem); color: #fff; }
.spot h1 { margin-bottom: .55em; font-size: clamp(2.4rem, 5.2cqw, 4rem); font-weight: 800; letter-spacing: -.035em; color: #fff; }
.spot h1 .hl { color: var(--pink-hi); }
.spot__tagline { max-width: 30rem; margin: -.2em 0 .8rem; font-size: clamp(1.1rem, 1.7cqw, 1.4rem); font-weight: 700; letter-spacing: -.02em; color: #fff; text-wrap: balance; }
.spot__intro { max-width: 40rem; margin: 0 0 1.5rem; font-size: clamp(.95rem, 1.35cqw, 1.05rem); font-weight: 500; line-height: 1.6; color: rgba(255, 255, 255, .86); }
.spot__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin: 0 0 1.25rem; }
.spot__actions:last-child { margin-bottom: 0; }
.spot .button--main { background: var(--cta-hi); color: var(--on-pink); box-shadow: 0 2px 24px 0 rgba(255, 140, 186, .5); }
.spot .button--soft { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); backdrop-filter: blur(6px); }
.spot .button--soft:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.spot__fine { margin: 0; font-size: 11px; color: rgba(255, 255, 255, .6); }
@media (max-width: 639px) {
  .spot__stage { min-height: 520px; align-items: flex-end; }
  .spot__img { object-position: 66% 20%; }
  .spot__shade { background: linear-gradient(180deg, rgba(13, 10, 15, .05) 0%, rgba(13, 10, 15, .6) 45%, rgba(13, 10, 15, .97) 100%); }
  .spot__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spot__actions .button { width: 100%; padding-inline: .75rem; }
  .spot__actions .button--main { grid-column: 1 / -1; }
}

/* == poster tiles == */
.shelf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@container content (min-width: 440px) { .shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container content (min-width: 680px) { .shelf { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; } }
@container content (min-width: 900px) { .shelf { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5rem; } }
@supports not (container-type: inline-size) {
  @media (min-width: 640px) { .shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (min-width: 1280px) { .shelf { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; } }
}
.shelf__item { display: block; }
.shelf__link { position: relative; display: block; width: 100%; aspect-ratio: 2 / 3; overflow: hidden; border-radius: 12px; background: var(--bg); box-shadow: var(--drop); transition: box-shadow .3s; }
.shelf__link:hover { box-shadow: 0 0 0 2px rgba(255, 140, 186, .8), var(--glow); text-decoration: none; }
.shelf__link img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s cubic-bezier(0, 0, .2, 1); }
.shelf__link:hover img { transform: scale(1.04); }
.shelf__link::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: rgba(0, 0, 0, var(--veil)); }
.shelf__caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; flex-direction: column; gap: .3rem; padding: 4.5rem .85rem .85rem; background: linear-gradient(to top, rgba(6, 4, 8, .94) 0%, rgba(6, 4, 8, .7) 38%, rgba(6, 4, 8, .2) 72%, transparent 100%); color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.shelf__title { margin: 0; font-size: 1rem; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; color: #fff; }
.shelf__info { font-size: 11px; font-weight: 500; color: rgba(255, 255, 255, .8); }
.shelf__flag { position: absolute; top: .7rem; left: .7rem; z-index: 2; padding: .2rem .5rem; border-radius: 5px; background: var(--pink); color: var(--on-pink); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

/* == tag filter (catalogue) == */
.tagbar { display: flex; gap: .55rem; margin: 0 0 1.4rem; padding: .15rem .1rem .5rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.tagbar::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) { .tagbar { flex-wrap: wrap; overflow: visible; } }
.tagbar__chip { display: inline-flex; flex: none; align-items: center; gap: .4rem; padding: .55rem 1.05rem; border: 0; border-radius: 999px; background: var(--chip); color: var(--fg-2); box-shadow: inset 0 0 0 1px var(--line); font-size: .875rem; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; }
.tagbar__chip:hover { background: var(--chip-hover); color: var(--fg); }
.tagbar__chip .glyph { width: 15px; height: 15px; color: currentColor; }
.tagbar__chip.is-on { background: var(--pink); color: var(--on-pink); box-shadow: none; }
.tagbar__empty { color: var(--fg-3); }
.taglinks { gap: .35rem; }
.taglinks__item { display: inline-block; padding: .15rem .55rem; border-radius: 999px; background: var(--chip); box-shadow: inset 0 0 0 1px var(--line); color: var(--fg); font-size: .8125rem; font-weight: 600; }
.taglinks__item:hover { color: var(--on-pink); background: var(--pink); text-decoration: none; }

/* == show and creator profiles == */
.profile { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; margin-bottom: 1.75rem; }
@container content (min-width: 640px) { .profile { grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); gap: 2rem; align-items: start; } }
@container content (max-width: 639px) {
  .profile { justify-items: center; text-align: center; }
  .profile__cover { max-width: 320px; }
  .profile__main { display: flex; flex-direction: column; align-items: center; }
  .factlist { justify-content: center; }
}
.profile__cover { position: relative; width: 100%; max-width: 300px; aspect-ratio: 2 / 3; overflow: hidden; border-radius: 12px; background: var(--bg); box-shadow: var(--drop); }
.profile__cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.profile__cover::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: rgba(0, 0, 0, var(--veil)); }
.profile__main h1 { margin-bottom: .4em; }
.profile__intro { margin: 0 0 .5rem; font-size: 1.0625rem; line-height: 1.7; color: var(--fg-2); }
.profile__action { margin: 1.1rem 0 .75rem; }
.factlist { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .55rem 1.5rem; align-items: center; margin: 1.25rem 0 0; }
.factlist dt { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }
.factlist dd { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; font-weight: 600; color: var(--fg); }
.chip { display: inline-block; padding: .18rem .45rem; border-radius: 5px; background: var(--pink); color: var(--on-pink); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; vertical-align: middle; }

/* == link tiles == */
.tilegrid, .linkset { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin: 1rem 0 1.5rem; padding: 0; list-style: none; }
.tile, .linkset__item { position: relative; display: flex; flex-direction: column; justify-content: flex-start; gap: .25rem; margin: 0; padding: 1.3rem 1.35rem; border-radius: var(--r-lg); background: var(--chip); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .15s, transform .15s; }
.tile:hover, .linkset__item:hover { box-shadow: inset 0 0 0 1.5px var(--pink); transform: translateY(-1px); }
.tile h3, .linkset__item a { margin: 0 0 .3rem; font-size: 1rem; font-weight: 700; letter-spacing: -.01em; color: var(--fg); }
.linkset__item a::after { content: ""; position: absolute; inset: 0; }
.linkset__item a:hover { text-decoration: none; }
.tile p, .linkset__item p { margin: 0; font-size: .875rem; line-height: 1.55; color: var(--fg-2); }
.tile .tile__go { margin-top: .5rem; font-size: .8125rem; font-weight: 600; }
.tile__kind, .linkset__kind { margin-bottom: .25rem; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pink); }

/* == editorial pieces ==
 * For hand-written page HTML:
 *   <div class="brief"><div class="brief__label">Label</div><p>Text</p></div>
 *   <div class="callout callout--warn|callout--ok|callout--info"><p>Text</p></div>
 *   <div class="figures"><div class="figures__cell"><b>12</b><span>episodes</span></div></div>
 *   <div class="table-wrap"><table class="datatable">...</table></div>
 *   <figure class="media"><img src="{theme_url}/static/media/fill-wide.svg" alt=""><figcaption>...</figcaption></figure>
 *   <ul class="linkset"><li class="linkset__item"><span class="linkset__kind">Tag</span><a href="...">Title</a><p>Line</p></li></ul>
 */
.standfirst { max-width: 46rem; margin: 0 0 1.25rem; font-size: 1.15rem; font-weight: 500; line-height: 1.6; color: var(--fg-2); }
.brief { margin: var(--space-5) 0 var(--space-8); padding: 1.2rem 1.35rem; border-left: 4px solid var(--pink); border-radius: var(--r-lg); background: var(--chip); box-shadow: inset 0 0 0 1px var(--line); }
.brief__label { margin-bottom: var(--gap-tight); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--pink); }
.brief p { margin: 0; font-size: 1.0625rem; font-weight: 500; line-height: 1.65; color: var(--fg); }
.byline { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 0 0 1.5rem; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
.eyebrow { display: inline-block; margin-bottom: .6rem; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--pink); }
.callout { margin: 1.4rem 0; padding: 1rem 1.2rem; border-radius: var(--r); background: var(--chip); box-shadow: inset 0 0 0 1px var(--line); }
.callout p:last-child { margin-bottom: 0; }
.callout--warn { background: var(--alert-bg); box-shadow: inset 0 0 0 1px var(--alert-line); color: var(--alert-fg); }
.callout--ok { background: var(--good-bg); box-shadow: inset 0 0 0 1px var(--good-line); color: var(--good-fg); }
.callout--info { background: var(--tip-bg); box-shadow: inset 0 0 0 1px var(--tip-line); color: var(--tip-fg); }
figure.media { margin: 1.8rem 0; }
figure.media img { width: 100%; border-radius: 12px; background: var(--chip); box-shadow: var(--drop); }
figure.media img.media__portrait { max-width: 300px; }
figure.media img.media__wide { aspect-ratio: 16 / 9; object-fit: cover; }
figure.media figcaption { margin-top: .5rem; font-size: 11px; font-weight: 500; color: var(--fg-3); }
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem; margin: 1.25rem 0 1.5rem; }
.figures__cell { display: flex; flex-direction: column; gap: .2rem; padding: .95rem 1rem 1rem; border-radius: var(--r); background: var(--chip); box-shadow: inset 0 0 0 1px var(--line); }
.figures__cell b { font-size: 1.6rem; font-weight: 800; line-height: 1.1; letter-spacing: -.03em; color: var(--fg); }
.figures__cell span { font-size: .8125rem; color: var(--fg-3); }

/* == tables == */
.table-wrap { margin: .25rem 0 1.5rem; overflow-x: auto; border-radius: var(--r); background: var(--chip); box-shadow: inset 0 0 0 1px var(--line), var(--drop); -webkit-overflow-scrolling: touch; }
.datatable { width: 100%; min-width: 560px; margin: 0; border-collapse: separate; border-spacing: 0; font-size: .9375rem; }
.datatable thead th { padding: .75rem 1.1rem; background: var(--surface); border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-align: left; text-transform: uppercase; color: var(--fg-3); }
.datatable thead th:first-child { border-top-left-radius: var(--r); }
.datatable thead th:last-child { border-top-right-radius: var(--r); }
.datatable tbody td { padding: .85rem 1.1rem; border-bottom: 1px solid var(--line); color: var(--fg-2); vertical-align: top; }
.datatable tbody tr:last-child td { border-bottom: 0; }
.datatable tbody tr:hover td { background: var(--chip-hover); }
.datatable td:first-child { font-weight: 600; color: var(--fg); }
.datatable td:first-child a { color: var(--fg); }
.datatable td:first-child a:hover { color: var(--pink); text-decoration: none; }

/* == reader q&a and buttons in the text == */
.qanda { margin-top: var(--gap-section); }
.more-reading { margin-top: var(--gap-section); }
.qanda h2 { margin-bottom: 1rem; }
.qanda details { margin-bottom: var(--space-3); padding: 0 1.1rem; border-radius: var(--r); background: var(--chip); box-shadow: inset 0 0 0 1px var(--line); }
.qanda summary { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 0; font-size: .95rem; font-weight: 700; letter-spacing: -.01em; list-style: none; cursor: pointer; }
.qanda summary::-webkit-details-marker { display: none; }
.qanda summary::after { content: "+"; flex: none; font-weight: 700; color: var(--pink); }
.qanda details[open] summary::after { content: "\2212"; }
.qanda details p { margin: 0 0 .95rem; font-size: .875rem; color: var(--fg-2); }
.lead-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); margin: 0 0 var(--space-10); }
.brief:has(+ .lead-cta) { margin-bottom: var(--gap-related); }
.shelf + .brief { margin-top: var(--gap-section); }
.lead-cta span { font-size: .85rem; color: var(--fg-3); }
@media (max-width: 560px) { .lead-cta .button { width: 100%; text-align: center; } }
.end-cta { margin: var(--space-6) 0; }

/* == footer == */
.basement { margin-top: var(--gap-section); padding-block: 2rem 2.5rem; background: var(--surface); border-top: 1px solid var(--line); font-size: .8125rem; color: var(--fg-3); }
.basement a { color: var(--fg-3); }
.basement a:hover { color: var(--pink); }
.basement__links { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: .9rem; }
.notice { margin-bottom: 1.3rem; padding: .9rem 1.1rem; border-radius: var(--r); background: var(--chip); box-shadow: inset 0 0 0 1px var(--line); font-size: .8125rem; color: var(--fg-2); }
.notice strong { color: var(--fg); }

/* == helpers == */
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 100; padding: .6rem 1rem; border-radius: 8px; background: var(--pink); color: var(--on-pink); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.trail { margin-bottom: 1rem; font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); }
.trail a { color: var(--fg-3); }
.trail a:hover { color: var(--pink); }

/* == side rail (drawer below 1024px) == */
.menu-btn { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border: 0; border-radius: 10px; background: var(--chip); color: var(--fg); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; }
.menu-btn svg { width: 20px; height: 20px; }
.rail { position: fixed; top: 0; bottom: 0; left: 0; z-index: 60; width: min(300px, 86vw); padding: .75rem 1rem 2rem; overflow-y: auto; overscroll-behavior: contain; background: var(--surface); box-shadow: 1px 0 0 var(--line), 0 24px 60px rgba(0, 0, 0, .7); transform: translateX(-100%); visibility: hidden; transition: transform .28s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .28s; -webkit-overflow-scrolling: touch; }
.rail-open .rail { transform: none; visibility: visible; transition: transform .28s cubic-bezier(.2, .7, .2, 1), visibility 0s; }
html.rail-open, html.rail-open body { overflow: hidden; }
@media (max-width: 1023px) { body.admin-bar .rail { z-index: 100001; } body.admin-bar .rail-backdrop { z-index: 100000; } }
.rail__head { display: flex; align-items: center; justify-content: flex-end; min-height: 44px; margin-bottom: .5rem; }
.rail__close { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border: 0; border-radius: 10px; background: var(--chip); color: var(--fg); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; }
.rail__close svg { width: 18px; height: 18px; }
.rail-backdrop { position: fixed; inset: 0; z-index: 55; background: rgba(4, 3, 6, .7); touch-action: none; }
.rail__heading { margin: 1.4rem 0 .5rem .25rem; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.rail__list { display: flex; flex-direction: column; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.rail__list li + li { margin-top: 0; }
.rail__link { display: flex; align-items: center; gap: .7rem; min-height: 48px; padding: .6rem .9rem; border-radius: 10px; background: var(--chip); box-shadow: inset 0 0 0 1px var(--line); font-size: .9rem; font-weight: 600; color: var(--fg); transition: background .15s, box-shadow .15s; }
.rail__link:hover { background: var(--chip-hover); color: var(--fg); text-decoration: none; }
.rail__link.is-current { box-shadow: inset 0 0 0 1.5px var(--pink); }
.rail__text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail__count { flex: none; padding: .15rem .45rem; border-radius: 999px; background: var(--pink); color: var(--on-pink); font-size: 10px; font-weight: 700; }
.glyph { flex: none; width: 18px; height: 18px; color: var(--fg); }
.rail__list--fine { margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.rail__action { margin: 1.4rem 0 0; }
.rail__small { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1.25rem 0 0 .25rem; font-size: 10px; color: var(--fg-3); }
.rail__small a { color: var(--fg-3); }
@media (min-width: 1024px) {
  .menu-btn, .rail__head { display: none; }
  .rail-backdrop { display: none !important; }
  html.rail-open, html.rail-open body { overflow: visible; }
  .split { position: relative; display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); gap: 12px; align-items: start; padding: 0 0 0 var(--edge); }
  .split::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--edge) + var(--rail-w) + 6px); width: 1px; background: var(--line); pointer-events: none; }
  .split > main { order: 2; min-width: 0; padding-inline: var(--edge); }
  .split > .rail { order: 1; inset: auto; position: sticky; top: calc(var(--bar-h) + 1.5rem); z-index: 1; width: auto; max-width: none; max-height: calc(100vh - var(--bar-h) - 3rem); padding: 1.5rem 0 0; overflow-y: auto; background: transparent; box-shadow: none; transform: none; transition: none; visibility: visible; scrollbar-width: thin; }
  body.admin-bar .split > .rail { top: calc(32px + var(--bar-h) + 1.5rem); max-height: calc(100vh - 32px - var(--bar-h) - 3rem); }
}

/* == adult check == */
#adult-check { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(13, 10, 15, .9); backdrop-filter: blur(8px); }
html.adult-ok #adult-check { display: none !important; }
html:not(.adult-ok) body { overflow: hidden; }
.adult-check__panel { max-width: 460px; padding: 2rem 1.5rem; border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), 0 20px 60px rgba(0, 0, 0, .6); text-align: center; }
.adult-check__panel p { font-size: .875rem; color: var(--fg-2); }
.adult-check__panel .adult-check__title { margin: 0 0 .5em; font-family: var(--head-font); font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; color: var(--fg); }
.adult-check__panel small { display: block; margin-top: 1rem; font-size: 11px; color: var(--fg-3); }
.adult-check__buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 1.2rem; }

/* == analytics consent == */
.privacy-bar { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 900; max-width: 520px; padding: 1rem 1.1rem; border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), 0 16px 40px rgba(0, 0, 0, .6); font-size: .875rem; color: var(--fg-2); }
@media (min-width: 1024px) { .privacy-bar { left: auto; right: 24px; } }
html.privacy-set .privacy-bar, html:not(.adult-ok) .privacy-bar { display: none; }
.privacy-bar p { margin: 0 0 .7rem; }
.privacy-bar strong { color: var(--fg); }
.privacy-bar .button-set { margin: 0; }

.notfound h1 { margin-bottom: .5rem; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }
@media print { .masthead, .rail, .privacy-bar, #adult-check, .menu-btn { display: none !important; } .split { display: block; } }