/*
Theme Name: PornAIShorts
Theme URI: https://pornaishorts.com/
Author: PornAIShorts Team
Description: Editorial theme for pornaishorts.com: three platform sections, tracked buttons, SEO and the sitemap in the theme. No builder, no jQuery, no build step.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: pashorts
*/

/* Tokens: SPEC 10, pink accent #dc1f57 with white text (Ale, 2026-10-02). Contrast on the page background,
   light / dark: text 16.9 / 16.6, text-2 9.4 / 10.4, soft 5.9 / 6.6, link 6.2 / 8.8, link hover 8.8 / 11.7,
   accent text 5.7 / 7.7 (5.3 / 6.7 on the tint). White text on the pink buttons 4.8 (5.8 on hover), the
   button shape 4.5 / 4.0 against the page. Hero on #0f0a0c: white 19.6, lede 15.9, note 12.4, the light
   pink accent 9.2 (4.8 at the top of the hero text over a white image). */
:root {
  --c-page: #fbf7f8;
  --c-panel: #ffffff;
  --c-tint: #fdebf0;
  --c-rule: #efdfe4;
  --c-rule-2: #e0c8d0;
  --c-text: #1c1518;
  --c-text-2: #4d3f45;
  --c-soft: #6d5c63;
  --c-link: #b5164a;
  --c-link-hover: #8c0f37;
  --c-accent: #dc1f57;
  --c-accent-hover: #c41a4d;
  --c-on-accent: #ffffff;
  --c-accent-text: #c0164c;
  --c-accent-on-dark: #ff8fb0;
  --c-hero: #0f0a0c;
  --c-hero-text: #f1e4e8;
  --c-hero-note: #dcc8cf;
  --c-chip: rgba(20, 14, 17, .82);
  --lift: 0 1px 2px rgba(28, 21, 24, .05), 0 10px 30px rgba(28, 21, 24, .08);
  --round: 16px;
  --round-sm: 12px;
  --f-head: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-text: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bar-h: 64px;
  --drawer-w: 256px;
  --read-w: 740px;
  --wide-w: 1120px;
  color-scheme: light;
}
:root[data-scheme="dark"] {
  --c-page: #150f12; --c-panel: #1e171a; --c-tint: #2a1a20; --c-rule: #322429; --c-rule-2: #46333a;
  --c-text: #f6eef1; --c-text-2: #cbbcc2; --c-soft: #a6939b; --c-link: #ff8fb0; --c-link-hover: #ffb8cc;
  --c-accent-text: #ff7aa0; --lift: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .38);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-scheme="light"]) {
    --c-page: #150f12; --c-panel: #1e171a; --c-tint: #2a1a20; --c-rule: #322429; --c-rule-2: #46333a;
    --c-text: #f6eef1; --c-text-2: #cbbcc2; --c-soft: #a6939b; --c-link: #ff8fb0; --c-link-hover: #ffb8cc;
    --c-accent-text: #ff7aa0; --lift: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .38);
    color-scheme: dark;
  }
}

/* Fonts: variable woff2, latin subset (SIL OFL 1.1, assets/fonts). Neither font has a "calt" feature
   (checked with HarfBuzz on 2026-10-02): "12-month" and "2-3" keep the hyphen, so calt stays on. */
@font-face {
  font-family: "Sora"; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url(assets/fonts/sora-latin.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: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url(assets/fonts/figtree-latin.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;
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--bar-h) + 16px); }
body { margin: 0; background: var(--c-page); color: var(--c-text); font: 400 17px/1.7 var(--f-text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--c-link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--c-link-hover); }
:focus-visible { outline: 3px solid var(--c-link); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3, h4 { margin: 0; color: var(--c-text); font-family: var(--f-head); font-weight: 800; line-height: 1.2; letter-spacing: -.02em; }
h1 { font-size: clamp(1.9rem, 1.35rem + 2.1vw, 2.65rem); line-height: 1.15; }
p, ul, ol, dl, table, figure { margin: 0 0 1.1em; }
button { font: inherit; }
.icon { flex: none; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -80px; z-index: 200; padding: 10px 16px; border-radius: 999px; background: var(--c-panel); color: var(--c-text); box-shadow: var(--lift); font-weight: 700; }
.skip-link:focus { top: 12px; }

/* Top bar: sticky at every width, with the button of the page's platform. Phones below 520px get the
   text-only logo and the short label; below 360px the button loses its icon. Measured with the real fonts
   (HarfBuzz, 2026-10-02): 274px of 320 used, the widest full bar (Secrets AI, 520px) 447px. */
.masthead { position: sticky; top: 0; z-index: 40; height: var(--bar-h); display: flex; align-items: center; gap: 10px; padding: 0 16px; background: var(--c-panel); border-bottom: 1px solid var(--c-rule); }
.round-btn { width: 42px; height: 42px; flex: none; display: grid; place-items: center; padding: 0; border: 1px solid var(--c-rule-2); border-radius: 50%; background: var(--c-panel); color: var(--c-text); cursor: pointer; transition: border-color .15s; }
.round-btn:hover { border-color: var(--c-text-2); }
.round-btn svg { width: 20px; height: 20px; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; color: var(--c-text); text-decoration: none; font: 800 1.08rem/1 var(--f-head); letter-spacing: -.01em; white-space: nowrap; }
.brand:hover { color: var(--c-text); }
.brand-seal { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--c-accent); color: var(--c-on-accent); }
.brand-seal svg { width: 18px; height: 18px; }
.brand-tone { color: var(--c-accent-text); }
.masthead-act { margin-left: auto; display: flex; }
.label-tight { display: none; }
@media (max-width: 519px) {
  .masthead { gap: 8px; padding: 0 12px; }
  .brand { font-size: clamp(.8rem, 4vw, 1.08rem); }
  .brand .brand-seal { display: none; }
  .masthead .pill { padding: 0 14px; }
  .masthead .label-full { display: none; }
  .masthead .label-tight { display: inline; }
}
@media (max-width: 359px) { .masthead .pill svg { display: none; } }

/* Frame: drawer and main column. Below 1024px the drawer slides in over a veil. */
.frame { display: grid; grid-template-columns: minmax(0, 1fr); min-height: calc(100vh - var(--bar-h)); }
.drawer { position: fixed; z-index: 50; top: var(--bar-h); bottom: 0; left: 0; width: min(86vw, 320px); overflow-y: auto; padding: 4px 12px 28px; background: var(--c-panel); border-right: 1px solid var(--c-rule); transform: translateX(-102%); visibility: hidden; transition: transform .22s ease, visibility .22s; }
.drawer-open .drawer { transform: none; visibility: visible; }
.veil { position: fixed; inset: var(--bar-h) 0 0 0; z-index: 45; background: rgba(15, 10, 12, .5); opacity: 0; pointer-events: none; transition: opacity .2s; }
.drawer-open .veil { opacity: 1; pointer-events: auto; }
@media (min-width: 1024px) {
  .frame { grid-template-columns: var(--drawer-w) minmax(0, 1fr); }
  .drawer { position: sticky; top: var(--bar-h); z-index: 1; height: calc(100vh - var(--bar-h)); width: auto; transform: none; visibility: visible; transition: none; }
  .veil, .nav-toggle { display: none; }
}
.drawer-head { margin: 22px 12px 6px; font-size: .7rem; font-weight: 800; line-height: 1.4; letter-spacing: .1em; text-transform: uppercase; color: var(--c-soft); }
.drawer ul { margin: 0; padding: 0; list-style: none; }
.drawer li > a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 12px; border-radius: var(--round-sm); color: var(--c-text-2); text-decoration: none; font-size: .92rem; font-weight: 600; line-height: 1.35; }
.drawer li > a:hover { background: var(--c-tint); color: var(--c-text); }
.drawer li > a[aria-current="page"] { background: var(--c-tint); color: var(--c-text); font-weight: 800; box-shadow: inset 3px 0 0 var(--c-accent); }
.tally { flex: none; min-width: 26px; padding: 1px 8px; border-radius: 999px; background: var(--c-accent); color: var(--c-on-accent); font-size: .72rem; font-weight: 800; text-align: center; }
.scheme-toggle { display: flex; align-items: center; gap: 10px; width: 100%; margin: 20px 0 0; padding: 9px 12px; border: 0; border-radius: var(--round-sm); background: none; color: var(--c-text-2); font-size: .92rem; font-weight: 600; line-height: 1.35; text-align: left; cursor: pointer; }
.scheme-toggle:hover { background: var(--c-tint); color: var(--c-text); }
.scheme-toggle svg { width: 18px; height: 18px; }
.icon-moon { display: none; }
:root[data-scheme="dark"] .icon-sun { display: none; }
:root[data-scheme="dark"] .icon-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-scheme="light"]) .icon-sun { display: none; }
  :root:not([data-scheme="light"]) .icon-moon { display: block; }
}
.toggle-track { position: relative; flex: none; width: 40px; height: 22px; margin-left: auto; border-radius: 999px; background: var(--c-rule-2); transition: background .15s; }
.toggle-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .15s; }
.scheme-toggle[aria-pressed="true"] .toggle-track { background: var(--c-accent); }
.scheme-toggle[aria-pressed="true"] .toggle-track::after { transform: translateX(18px); }
.drawer-note { margin: 24px 4px 0; padding: 16px; border-radius: var(--round); background: var(--c-tint); color: var(--c-text-2); font-size: .85rem; line-height: 1.5; }
.drawer-note p { margin: 0 0 12px; }
.pill-wide { width: 100%; }

.canvas { min-width: 0; padding: 24px 16px 72px; }
@media (min-width: 768px) { .canvas { padding: 36px 40px 88px; } }
.column { max-width: var(--read-w); margin: 0 auto; }
.column-wide { max-width: var(--wide-w); margin: 0 auto; }

/* Page head: breadcrumb, kicker, H1, lede, then (guides, hubs) button, image and byline (SPEC 4.1) */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin: 0 0 14px; padding: 0; list-style: none; font-size: .95rem; line-height: 1.5; font-variant-caps: all-small-caps; letter-spacing: .05em; color: var(--c-soft); }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--c-link); }
.crumbs li + li::before { content: "\203A"; margin-right: 8px; color: var(--c-rule-2); font-variant-caps: normal; }
.overline { margin: 0 0 8px; font-size: .76rem; font-weight: 800; line-height: 1.5; letter-spacing: .1em; text-transform: uppercase; color: var(--c-accent-text); }
.standfirst { max-width: 62ch; margin: 12px 0 18px; font-size: 1.17rem; line-height: 1.6; color: var(--c-text-2); }
.opener { margin: 0 0 26px; }
.fine-print { max-width: 62ch; margin: 8px 0 0; font-size: .82rem; line-height: 1.45; color: var(--c-soft); }
.opener-media { margin: 22px 0 0; }
.opener-media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--round); background: var(--c-rule); }
.dateline { display: flex; flex-wrap: wrap; gap: 2px 10px; margin: 16px 0 0; font-size: .86rem; line-height: 1.5; color: var(--c-soft); }
.dateline span { white-space: nowrap; }
.dateline span + span::before { content: "\00B7"; margin-right: 10px; }
/* Phones: the date gets the first line, so no line starts with the dot. */
@media (max-width: 519px) {
  .dateline span:first-child { flex-basis: 100%; }
  .dateline span:nth-child(2)::before { content: none; margin: 0; }
}
/* Below 360px a slightly smaller H1 and lede keep the button in the first screen at 320x548 (SPEC 4.1):
   measured with the real fonts, a 65-character H1 and a 35-word lede end the button 29px above the fold. */
@media (max-width: 359px) {
  h1 { font-size: 1.75rem; }
  .standfirst { font-size: 1.06rem; }
}
/* Hero of guides and hubs (Ale, 2026-10-02): the art fills the box, kicker, H1 and standfirst sit over it
   on a dark gradient, the button follows below. Colors are fixed, like the home hero, in both themes.
   Phones: edge to edge, the art shows above the text. Wider screens: inside the column, rounded. */
.cover { position: relative; isolation: isolate; overflow: hidden; margin: 6px -16px 0; padding: 132px 20px 22px; background: var(--c-hero); color: #fff; }
.cover-art { position: absolute; inset: 0; z-index: -2; }
.cover-img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.cover-wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.cover-wall img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
.cover-wall img:nth-child(n+7) { display: none; }
/* The art changes on every visit, so the gradient is set for the worst case, a white image: from the top of
   the kicker down it is at least 78% dark, enough for the small kicker in --c-accent-on-dark (4.5:1 needs 73%). */
.cover::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(15, 10, 12, .08) 0, rgba(15, 10, 12, .3) 60px, rgba(15, 10, 12, .78) 126px, rgba(15, 10, 12, .9) 220px, var(--c-hero) 100%); }
.cover .overline { color: var(--c-accent-on-dark); text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.cover h1 { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .45); }
.cover .standfirst { margin: 12px 0 0; color: var(--c-hero-text); text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.opener-hero .opener-act { margin-top: 18px; }
@media (max-width: 519px) {
  .cover .standfirst { font-size: 1.06rem; line-height: 1.5; }
}
/* Short screens (small phones with the browser bars): less art above the text, so the button stays in view. */
@media (max-width: 519px) and (max-height: 620px) {
  .cover { padding-top: 64px; }
  .cover::before { background: linear-gradient(180deg, rgba(15, 10, 12, .3) 0, rgba(15, 10, 12, .78) 58px, rgba(15, 10, 12, .92) 140px, var(--c-hero) 100%); }
}
/* 320 px wide phones: the least art above the text. */
@media (max-width: 359px) {
  .cover { padding-top: 40px; }
  .cover::before { background: linear-gradient(180deg, rgba(15, 10, 12, .5) 0, rgba(15, 10, 12, .8) 34px, rgba(15, 10, 12, .92) 120px, var(--c-hero) 100%); }
  .cover .standfirst { font-size: 1rem; }
}
@media (min-width: 768px) {
  .cover { margin: 8px 0 0; padding: 150px 36px 30px; border-radius: var(--round); }
  .cover-wall { grid-template-columns: repeat(6, 1fr); }
  .cover-wall img:nth-child(n+7) { display: block; }
  .cover::before { background: linear-gradient(180deg, rgba(15, 10, 12, .1) 0, rgba(15, 10, 12, .35) 80px, rgba(15, 10, 12, .78) 144px, rgba(15, 10, 12, .9) 240px, var(--c-hero) 100%); }
  .opener-hero .opener-act { margin-top: 22px; }
}
/* Phones: the main button takes the full width, its note sits centered under it. */
@media (max-width: 639px) {
  .pill-block { width: 100%; }
  .opener-act .fine-print { margin-left: auto; margin-right: auto; text-align: center; }
}

/* Short answer */
.tldr { margin: 0 0 34px; padding: 16px 18px 17px; background: var(--c-tint); border: 1.5px solid var(--c-accent); border-radius: var(--round); }
.tldr-label { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: .76rem; font-weight: 800; line-height: 1.4; letter-spacing: .1em; text-transform: uppercase; color: var(--c-accent-text); }
.tldr-label svg { width: 15px; height: 15px; }
.tldr p + p { margin: 0; font-size: 1.03rem; line-height: 1.65; color: var(--c-text); }

/* Body text */
.prose > :first-child { margin-top: 0; }
.prose h2 { margin: 2.2em 0 .6em; font-size: clamp(1.38rem, 1.18rem + .8vw, 1.72rem); }
.prose h3 { margin: 1.8em 0 .45em; font-size: 1.14rem; font-weight: 700; }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li { margin: 0 0 .45em; }
.prose li::marker { color: var(--c-accent-text); }
.prose strong { font-weight: 700; }
.prose blockquote { margin: 1.4em 0; padding: 2px 0 2px 18px; border-left: 3px solid var(--c-accent); color: var(--c-text-2); }
.prose figure { margin: 30px 0; }
.prose figure img { width: 100%; border-radius: var(--round); background: var(--c-rule); }
.prose figcaption { margin-top: 8px; font-size: .85rem; color: var(--c-soft); }
.table-wrap { overflow-x: auto; margin: 0 0 1.3em; border: 1px solid var(--c-rule); border-radius: var(--round-sm); background: var(--c-panel); }
.table-wrap table { margin: 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: .93rem; line-height: 1.5; }
.prose th { text-align: left; font-weight: 800; background: var(--c-tint); white-space: nowrap; }
.prose th, .prose td { padding: 11px 14px; border-bottom: 1px solid var(--c-rule); vertical-align: top; }
.prose tr:last-child td { border-bottom: 0; }

/* Buttons */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px; border: 1.5px solid transparent; border-radius: 999px; font: 800 .95rem/1.2 var(--f-text); text-align: center; text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s, transform .15s; }
.pill:active { transform: translateY(1px); }
.pill svg { width: 16px; height: 16px; }
.pill-solid { background: var(--c-accent); color: var(--c-on-accent); }
.pill-solid:hover { background: var(--c-accent-hover); color: var(--c-on-accent); }
.pill-outline { background: transparent; border-color: var(--c-rule-2); color: var(--c-text); }
.pill-outline:hover { border-color: var(--c-text-2); color: var(--c-text); }
.pill-ghost { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .7); color: #fff; }
.pill-ghost:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.pill-small { min-height: 40px; padding: 0 16px; font-size: .88rem; }
.pill-row { display: flex; flex-wrap: wrap; gap: 10px; }
.pitch { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; margin: 38px 0; padding: 20px 22px; background: var(--c-panel); border: 1px solid var(--c-rule); border-left: 4px solid var(--c-accent); border-radius: var(--round); box-shadow: var(--lift); }
.pitch-title { max-width: 46ch; margin: 0; font-weight: 700; line-height: 1.5; }
.pitch-note { display: block; margin-top: 4px; font-size: .84rem; font-weight: 500; color: var(--c-soft); }
@media (max-width: 639px) { .pitch .pill { width: 100%; } }

/* Questions and answers */
.faq-stack { margin: 44px 0 0; }
.faq-stack h2, .strip h2 { margin: 0 0 16px; font-size: clamp(1.38rem, 1.18rem + .8vw, 1.72rem); }
.faq-item { margin: 0 0 10px; background: var(--c-panel); border: 1px solid var(--c-rule); border-radius: var(--round); overflow: hidden; }
.faq-item summary { position: relative; list-style: none; cursor: pointer; padding: 15px 52px 15px 20px; font-weight: 700; line-height: 1.45; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: ""; position: absolute; right: 22px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--c-accent-text); border-bottom: 2px solid var(--c-accent-text); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.faq-item[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.faq-item summary:hover { color: var(--c-accent-text); }
.faq-body { padding: 0 20px 18px; color: var(--c-text-2); }
.faq-body p:last-child { margin: 0; }

/* Blocks with a heading: related pages, grids */
.strip { margin: 48px 0 0; }
.strip-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin: 0 0 16px; }
.strip-head h2 { margin: 0; }
.strip-link { display: inline-flex; align-items: center; gap: 6px; font-size: .93rem; font-weight: 800; text-decoration: none; }
.strip-link:hover { text-decoration: underline; }
.strip-link svg { width: 15px; height: 15px; }
.see-also { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.see-card { display: block; height: 100%; padding: 16px 18px 18px; background: var(--c-panel); border: 1px solid var(--c-rule); border-radius: var(--round); color: var(--c-text); text-decoration: none; transition: border-color .15s, transform .15s; }
.see-card:hover { border-color: var(--c-accent); color: var(--c-text); transform: translateY(-2px); }
.see-card strong { display: block; margin: 0 0 4px; font: 800 1rem/1.35 var(--f-head); }
.see-card span { display: block; font-size: .88rem; line-height: 1.5; color: var(--c-soft); }

/* Poster grid: 2 columns, 3 from 640px, 5 from 1180px in the wide column */
.poster-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .poster-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 18px; } }
@media (min-width: 1180px) { .poster-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.poster-card { display: block; color: var(--c-text); text-decoration: none; }
.poster-card:hover { color: var(--c-text); }
.poster-frame { position: relative; display: block; aspect-ratio: 2 / 3; overflow: hidden; border-radius: var(--round); background: var(--c-rule); }
.poster-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.poster-card:hover .poster-frame img { transform: scale(1.04); }
.poster-title { display: block; margin: 10px 0 2px; font: 800 .98rem/1.3 var(--f-head); letter-spacing: -.01em; }
.poster-sub { display: block; font-size: .84rem; line-height: 1.4; color: var(--c-soft); }
.badge { position: absolute; left: 10px; top: 10px; padding: 3px 9px; border-radius: 999px; background: var(--c-accent); color: var(--c-on-accent); font-size: .7rem; font-weight: 800; line-height: 1.4; letter-spacing: .04em; text-transform: uppercase; }
.badge-spicy { background: #fff; color: #1c1518; }
.level-chip { display: inline-flex; align-items: center; gap: 7px; font-size: .78rem; font-weight: 800; line-height: 1; }
.poster-frame .level-chip, .site-chip { position: absolute; left: 10px; bottom: 10px; padding: 6px 10px 6px 8px; border-radius: 999px; background: var(--c-chip); color: #fff; }
.level-dots { display: inline-flex; gap: 3px; }
.level-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--c-rule-2); }
.poster-frame .level-dots i { background: rgba(255, 255, 255, .32); }
.level-dots i.lit, .poster-frame .level-dots i.lit { background: var(--c-accent); }
.site-chip { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 800; line-height: 1; }
.site-chip svg { width: 13px; height: 13px; }

/* Home hero. Phones: the photo fills a 4:5 frame at the top, framed with Customizer > hero focus, and the
   text starts over its lower part, as high as the first screen needs to show the first button
   (100svh minus 470px: top bar plus the text down to that button), never above 38% of the frame.
   From 768px: photo behind, text on the left, overlay stops in px that follow the 52-640px text column.
   Hero colors stay the same in both themes. The phone overlay is 62% dark where the H1 starts: measured on the
   home image at 10 phone sizes (320x548 to 430x750), the pink H1 word keeps 3.2:1 or more on 90% of the pixels
   behind it (1.7:1 at 390x664 with the earlier overlay). */
.splash { --frame: min(125vw, 76vh); --start: calc(var(--frame) * .56); position: relative; isolation: isolate; margin: -24px -16px 40px; overflow: hidden; background: var(--c-hero); color: #fff; }
@supports (height: 100svh) {
  .splash { --start: clamp(calc(var(--frame) * .38), calc(100svh - 470px - var(--wpbar, 0px)), calc(var(--frame) * .56)); }
}
.admin-bar .splash { --wpbar: 46px; }
.splash-img { position: absolute; top: 0; left: 0; z-index: -2; width: 100%; height: var(--frame); object-fit: cover; object-position: var(--focus, 50%) 50%; }
.splash::before { content: ""; position: absolute; top: 0; left: 0; right: 0; z-index: -1; height: var(--frame); background: linear-gradient(180deg, rgba(15, 10, 12, 0) 0, rgba(15, 10, 12, .06) calc(var(--start) - 64px), rgba(15, 10, 12, .62) var(--start), rgba(15, 10, 12, .82) calc(var(--start) + 40px), rgba(15, 10, 12, .92) calc(var(--start) + 110px), var(--c-hero) var(--frame)); }
.splash-text { max-width: 640px; padding: var(--start) 22px 34px; }
@media (min-width: 768px) {
  .splash { display: flex; align-items: center; min-height: clamp(480px, 64vh, 640px); margin: -36px -40px 48px; }
  .splash-img { height: 100%; object-position: 50% 50%; }
  .splash::before { bottom: 0; height: auto; background: linear-gradient(90deg, rgba(15, 10, 12, .88) 0, rgba(15, 10, 12, .78) 440px, rgba(15, 10, 12, .55) 640px, rgba(15, 10, 12, .2) 840px, rgba(15, 10, 12, 0) 1040px); }
  .splash-text { padding: 64px 52px; }
}
.splash h1, .splash-tagline, .splash-lede, .splash-note { text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.splash h1 { color: #fff; font-size: clamp(2.1rem, 1.4rem + 3vw, 3.3rem); line-height: 1.08; letter-spacing: -.025em; }
.splash h1 em { font-style: normal; color: var(--c-accent-on-dark); }
.splash-tagline { margin: 14px 0 8px; font-size: 1.1rem; font-weight: 800; line-height: 1.4; }
.splash-lede { max-width: 46ch; margin: 0 0 24px; color: var(--c-hero-text); font-size: 1.06rem; line-height: 1.6; }
.splash-note { margin: 20px 0 0; font-size: .8rem; line-height: 1.5; color: var(--c-hero-note); }
@media (max-width: 359px) { .splash .pill { padding: 0 16px; } }

/* Home: the platforms side by side */
.platforms { margin-top: 0; }
.platform-list { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 720px) { .platform-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.platform { display: flex; flex-direction: column; gap: 8px; padding: 14px 14px 18px; background: var(--c-panel); border: 1px solid var(--c-rule); border-radius: var(--round); }
.platform-media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--round-sm); background: var(--c-rule); }
.platform-name { margin: 6px 0 0; font-size: 1.2rem; }
.platform-name a { color: var(--c-text); text-decoration: none; }
.platform-name a:hover { color: var(--c-link); }
.platform-line, .platform-free { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--c-text-2); }
.platform-free strong { color: var(--c-text); }
.platform .pill-row { margin-top: auto; padding-top: 8px; }
.home-body { margin-top: 44px; }

/* Question box (home and hubs) */
.question-box { margin: 0 0 34px; padding: 20px; background: var(--c-panel); border: 1px solid var(--c-rule); border-radius: var(--round); }
.question-box h2 { margin: 0 0 14px; font-size: 1.25rem; }
.question-box ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 720px) { .question-box ul { grid-template-columns: 1fr 1fr; } }
.question-box a { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--round-sm); background: var(--c-page); color: var(--c-text); text-decoration: none; font-weight: 700; line-height: 1.35; }
.question-box a:hover { background: var(--c-tint); color: var(--c-text); }
.question-box a::before { content: "?"; flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--c-accent); color: var(--c-on-accent); font: 800 .85rem/1 var(--f-head); }
.hub-series { margin: 0 0 34px; }

/* Series and creator head. Phones: text and buttons, poster, byline and data. From 768px: poster left. */
.dossier { display: grid; gap: 20px; margin: 0 0 30px; }
.dossier .standfirst { margin-bottom: 18px; }
.dossier-media { position: relative; width: 100%; max-width: 250px; aspect-ratio: 2 / 3; overflow: hidden; border-radius: var(--round); background: var(--c-rule); box-shadow: var(--lift); }
.dossier-media img { width: 100%; height: 100%; object-fit: cover; }
.dossier-meta .dateline { margin: 0 0 14px; }
@media (min-width: 768px) {
  .dossier { grid-template-columns: 250px minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "media text" "media meta"; gap: 16px 34px; align-items: start; }
  .dossier-text { grid-area: text; }
  .dossier-media { grid-area: media; }
  .dossier-meta { grid-area: meta; }
}
.spec-sheet { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 9px 20px; margin: 0; padding: 16px 18px; background: var(--c-panel); border: 1px solid var(--c-rule); border-radius: var(--round); font-size: .94rem; line-height: 1.5; }
.spec-sheet dt { color: var(--c-soft); font-weight: 600; }
.spec-sheet dd { margin: 0; font-weight: 700; }
.spec-sheet a { font-weight: 800; }
.twin-strip { margin: 0 0 40px; }
.after-grid { margin-top: 44px; }
.column .poster-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .column .poster-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Footer */
.colophon { padding: 30px 16px 34px; background: var(--c-panel); border-top: 1px solid var(--c-rule); font-size: .88rem; color: var(--c-soft); }
@media (min-width: 1024px) { .colophon { padding-left: calc(var(--drawer-w) + 40px); padding-right: 40px; } }
.colophon-in { max-width: var(--wide-w); display: grid; gap: 14px; }
.colophon nav ul { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; }
.colophon nav a { color: var(--c-text-2); text-decoration: none; font-weight: 600; }
.colophon nav a:hover { color: var(--c-link); }
.colophon p { max-width: 88ch; margin: 0; line-height: 1.6; }

/* Age check and analytics choice: rendered at the end of the DOM, opened by site.js */
.age-wall { position: fixed; inset: 0; z-index: 100; display: none; place-items: center; padding: 16px; background: rgba(15, 10, 12, .76); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.age-wall.shown { display: grid; }
.age-card { width: 100%; max-width: 440px; padding: 26px 24px 24px; background: var(--c-panel); color: var(--c-text); border-radius: 22px; box-shadow: var(--lift); }
.age-card .brand-seal { width: 44px; height: 44px; margin: 0 0 14px; }
.age-card .brand-seal svg { width: 24px; height: 24px; }
.age-title { margin: 0 0 8px; font: 800 1.4rem/1.25 var(--f-head); letter-spacing: -.015em; }
.age-card p { color: var(--c-text-2); font-size: .95rem; line-height: 1.6; }
.age-card .pill-row { margin-top: 18px; }
.cookie-bar { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 90; display: none; max-width: 560px; margin: 0 auto; padding: 16px 18px; background: var(--c-panel); border: 1px solid var(--c-rule); border-radius: 18px; box-shadow: var(--lift); }
.cookie-bar.shown { display: block; }
.cookie-bar p { margin: 0 0 12px; font-size: .9rem; line-height: 1.55; color: var(--c-text-2); }

.not-found { padding: 32px 0; }

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

/* Logged-in view: the top bar and the drawer stay below the WordPress admin bar */
@media (min-width: 601px) {
  .admin-bar .masthead { top: 46px; }
  .admin-bar .drawer, .admin-bar .veil { top: calc(var(--bar-h) + 46px); }
}
@media (min-width: 783px) {
  .admin-bar .masthead { top: 32px; }
  .admin-bar .drawer, .admin-bar .veil { top: calc(var(--bar-h) + 32px); }
}
@media (min-width: 1024px) { .admin-bar .drawer { height: calc(100vh - var(--bar-h) - 32px); } }