/* ---------- Fonts (self-hosted, SIL OFL) ---------- */
@font-face { font-family: 'Quicksand'; font-weight: 500; font-display: swap; src: url(/fonts/quicksand-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Quicksand'; font-weight: 600; font-display: swap; src: url(/fonts/quicksand-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Quicksand'; font-weight: 700; font-display: swap; src: url(/fonts/quicksand-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'EB Garamond'; font-weight: 400; font-display: swap; src: url(/fonts/eb-garamond-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'EB Garamond'; font-weight: 400; font-style: italic; font-display: swap; src: url(/fonts/eb-garamond-latin-400-italic.woff2) format('woff2'); }
@font-face { font-family: 'EB Garamond'; font-weight: 500; font-display: swap; src: url(/fonts/eb-garamond-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'EB Garamond'; font-weight: 600; font-display: swap; src: url(/fonts/eb-garamond-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Pinyon Script'; font-weight: 400; font-display: swap; src: url(/fonts/pinyon-script-latin-400-normal.woff2) format('woff2'); }

/* ---------- Tokens ---------- */
:root {
  color-scheme: dark;
  --night: #1c1626;
  --dusk-1: #2a1f3a;
  --dusk-2: #4a2f4f;
  --dusk-3: #8a4e57;
  --dusk-4: #c27f5c;
  --text: #eadcf2;
  --text-strong: #fff1e4;
  --text-soft: #cdbfe0;
  --text-mute: #b9a8cf;
  --peach: #f4b183;
  --peach-hi: #ffd3b0;
  --lilac: #c9b3e6;
  --glass: rgba(28, 20, 38, 0.62);
  --glass-line: rgba(201, 179, 230, 0.18);
  --paper: #eee4d0;
  --ink: #2e241c;
  --ink-soft: #45372b;
  --ink-mute: #6a5a4a;
  --oxblood: #8b2a22;
  --dd: #7d2420;
  /* Paper theme. "Night paper" (below) swaps these: dark sepia, cream ink, gold leaf instead of oxblood. */
  --sky: linear-gradient(180deg, var(--night) 0%, var(--dusk-1) 28%, var(--dusk-2) 60%, var(--dusk-3) 85%, var(--dusk-4) 100%);
  --accent: var(--oxblood);
  --accent-deep: #6e231c;
  --accent-ink: var(--paper);
  --accent-line: rgba(139, 42, 34, 0.45);
  --accent-tint: rgba(139, 42, 34, 0.06);
  --gilt: none;
  --gilt-color: var(--accent);
  --gilt-text: none; /* Night: shimmer on the selected tab, drop cap and warning labels. */
  --line-faint: rgba(70, 55, 43, 0.15);
  --line: rgba(70, 55, 43, 0.25);
  --line-strong: rgba(70, 55, 43, 0.35);
  --warn: var(--oxblood);
  --warn-ink: #3a2c22;
  --warn-line: rgba(125, 36, 32, 0.4);
  --warn-tint: rgba(125, 36, 32, 0.07);
  --stain: rgba(150, 105, 55, 0.14);
  --sheen: rgba(255, 255, 255, 0.4);
  --corner: #2b2230;
  --sans: 'Quicksand', system-ui, sans-serif;
  --serif: 'EB Garamond', Garamond, Georgia, serif;
  --script: 'Pinyon Script', 'Snell Roundhand', cursive;
  --mono: ui-monospace, Menlo, Consolas, 'Liberation Mono', monospace;
  --radius: 16px;
  --gutter: clamp(16px, 4vw, 40px);
}

/* Night paper: follows the reader's system setting unless they've picked one with the header toggle. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='day']) {
    --sky: linear-gradient(180deg, #120d18 0%, var(--night) 34%, var(--dusk-1) 68%, var(--dusk-2) 92%, #6a3c4b 100%);
    --paper: #2c1b14;
    --ink: #ece0c8;
    --ink-soft: #d4c5a8;
    --ink-mute: #ab9a7e;
    --accent: #f4d27a;
    --accent-deep: #f6d887;
    --accent-ink: #2c1b14;
    --accent-line: rgba(244, 210, 122, 0.5);
    --accent-tint: rgba(244, 210, 122, 0.08);
    --gilt: linear-gradient(100deg, #b98f3e 0%, #f3dc95 38%, #c99a45 62%, #f0d488 100%);
    --gilt-color: transparent;
    --gilt-text: linear-gradient(100deg, #c9973f 0%, #fbe7a6 40%, #d9a94c 65%, #f6dc8e 100%);
    --gilt-text-color: transparent;
    --line-faint: rgba(236, 224, 200, 0.1);
    --line: rgba(236, 224, 200, 0.18);
    --line-strong: rgba(236, 224, 200, 0.28);
    --warn: var(--accent);
    --warn-ink: var(--ink);
    --warn-line: var(--accent-line);
    --warn-tint: var(--accent-tint);
    --stain: rgba(0, 0, 0, 0.22);
    --sheen: rgba(255, 214, 150, 0.06);
    --corner: #b08a3e;
  }
}
:root[data-theme='night'] {
  --sky: linear-gradient(180deg, #120d18 0%, var(--night) 34%, var(--dusk-1) 68%, var(--dusk-2) 92%, #6a3c4b 100%);
  --paper: #2c1b14;
  --ink: #ece0c8;
  --ink-soft: #d4c5a8;
  --ink-mute: #ab9a7e;
  --accent: #f4d27a;
  --accent-deep: #f6d887;
  --accent-ink: #2c1b14;
  --accent-line: rgba(244, 210, 122, 0.5);
  --accent-tint: rgba(244, 210, 122, 0.08);
  --gilt: linear-gradient(100deg, #b98f3e 0%, #f3dc95 38%, #c99a45 62%, #f0d488 100%);
  --gilt-color: transparent;
  --gilt-text: linear-gradient(100deg, #c9973f 0%, #fbe7a6 40%, #d9a94c 65%, #f6dc8e 100%);
  --gilt-text-color: transparent;
  --line-faint: rgba(236, 224, 200, 0.1);
  --line: rgba(236, 224, 200, 0.18);
  --line-strong: rgba(236, 224, 200, 0.28);
  --warn: var(--accent);
  --warn-ink: var(--ink);
  --warn-line: var(--accent-line);
  --warn-tint: var(--accent-tint);
  --stain: rgba(0, 0, 0, 0.22);
  --sheen: rgba(255, 214, 150, 0.06);
  --corner: #b08a3e;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--sans);
  font-weight: 500;
  color: var(--text);
  background: var(--night) var(--sky) fixed;
  line-height: 1.5;
}
a { color: var(--peach); }
a:hover { color: var(--peach-hi); }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--peach); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 50; background: var(--peach); color: #2a1622; padding: 8px 14px; border-radius: 8px; }
.skip:focus { left: 8px; }
.muted { color: var(--text-mute); }

@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  * { scroll-behavior: auto !important; }
}

/* ---------- Header / footer ---------- */
.page { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1; }
.site-header {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px;
  padding: 16px var(--gutter);
  background: rgba(20, 14, 28, 0.6);
  border-bottom: 1px solid var(--glass-line);
  backdrop-filter: blur(8px);
}
.brand { font-size: 21px; font-weight: 700; letter-spacing: 0.04em; color: var(--text); text-decoration: none; }
.brand:hover { color: var(--text-strong); }
.site-nav { display: flex; flex-wrap: wrap; gap: 4px 22px; font-weight: 600; }
.site-nav a { color: var(--text-soft); text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
.site-nav a[aria-current='page'] { color: var(--text-strong); border-bottom-color: var(--peach); }
.site-nav a:hover { color: var(--text-strong); }
.theme-toggle {
  margin-left: auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--glass-line); color: var(--text-soft);
}
.theme-toggle:hover { border-color: var(--peach); color: var(--text-strong); }
.theme-toggle[aria-pressed='true'] { color: var(--accent); border-color: var(--accent-line); }
/* Shows the theme that's on: sun for day paper, moon for night. */
.theme-toggle[aria-pressed='true'] .icon-sun, .theme-toggle:not([aria-pressed='true']) .icon-moon { display: none; }
.site-footer { padding: 28px var(--gutter) 32px; text-align: center; font-size: 13px; color: #ffe8d6; }

/* ---------- Shared bits ---------- */
.panel { padding: 20px; border-radius: var(--radius); background: var(--glass); border: 1px solid var(--glass-line); }
.panel-label { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-mute); }
.panel-heading { margin: 0 0 14px; font-size: 18px; color: var(--text-strong); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; padding: 10px 20px; border-radius: 12px; border: 1px solid transparent;
  font-weight: 700; text-decoration: none; cursor: pointer;
}
.btn-primary { background: var(--peach); color: #2a1622; }
.btn-primary:hover { background: var(--peach-hi); color: #2a1622; }
.btn-ghost { background: rgba(255, 255, 255, 0.06); border-color: var(--glass-line); color: var(--text); }
.btn-ghost:hover { border-color: var(--peach); color: var(--text-strong); }
.btn:disabled { opacity: 0.6; cursor: progress; }
.link-btn { background: none; border: 0; padding: 4px 0; color: var(--peach); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.link-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-weight: 600; }
.divider { display: flex; align-items: center; gap: 14px; color: var(--accent); margin: 30px 0 4px; }
.divider span { flex: 1; height: 1px; background: var(--line-strong); }
.status { padding: 12px 16px; border-radius: 10px; font-weight: 600; margin: 0 0 16px; }
.status.ok { background: rgba(120, 190, 140, 0.15); border: 1px solid rgba(120, 190, 140, 0.45); color: #d6f3de; }
.status.bad { background: rgba(200, 80, 70, 0.15); border: 1px solid rgba(220, 110, 100, 0.5); color: #ffd9d4; }

/* Paper */
.paper {
  color: var(--ink);
  background:
    radial-gradient(circle at 14% 18%, var(--stain), transparent 32%),
    radial-gradient(circle at 78% 64%, var(--stain), transparent 40%),
    radial-gradient(circle at 40% 92%, var(--stain), transparent 30%),
    radial-gradient(circle at 60% 8%, var(--sheen), transparent 28%),
    var(--paper);
}
.torn {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), 97.5% 100%, 95% calc(100% - 7px), 92% calc(100% - 2px), 89% calc(100% - 9px), 86% 100%, 83% calc(100% - 5px), 80% calc(100% - 11px), 77% calc(100% - 3px), 74% 100%, 71% calc(100% - 8px), 68% calc(100% - 2px), 65% calc(100% - 10px), 62% calc(100% - 4px), 59% 100%, 56% calc(100% - 9px), 53% calc(100% - 3px), 50% calc(100% - 11px), 47% 100%, 44% calc(100% - 6px), 41% calc(100% - 1px), 38% calc(100% - 10px), 35% calc(100% - 4px), 32% 100%, 29% calc(100% - 8px), 26% calc(100% - 2px), 23% calc(100% - 11px), 20% calc(100% - 5px), 17% 100%, 14% calc(100% - 9px), 11% calc(100% - 3px), 8% calc(100% - 10px), 5% 100%, 2.5% calc(100% - 6px), 0 calc(100% - 2px));
}

/* Photo with corners */
.photo { position: relative; padding: 7px; background: #14101a; box-shadow: 0 10px 24px rgba(10, 6, 16, 0.55); }
.photo img, .photo .ph { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.ph { background: linear-gradient(160deg, var(--dusk-2), var(--dusk-4)); }
.corner { position: absolute; width: 20px; height: 20px; background: var(--corner); z-index: 2; }
.tl { top: 0; left: 0; clip-path: polygon(0 0, 100% 0, 0 100%); }
.tr { top: 0; right: 0; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.bl { bottom: 0; left: 0; clip-path: polygon(0 0, 0 100%, 100% 100%); }
.br { bottom: 0; right: 0; clip-path: polygon(100% 0, 100% 100%, 0 100%); }

/* Chips */
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; line-height: 1.5; }
.chip.dd { background: var(--dd); color: var(--text-strong); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 10.5px; display: inline-flex; align-items: center; }
.chip.core { border: 1px solid rgba(244, 177, 131, 0.55); color: #ffd9bd; background: rgba(244, 177, 131, 0.1); }
.chip.genre { border: 1px solid rgba(201, 179, 230, 0.3); color: #ddd0ef; background: rgba(201, 179, 230, 0.07); }
.chip.fandom { border: 1px dashed rgba(244, 177, 131, 0.7); color: #ffd9bd; }
.chip.pcore { border: 1px solid var(--accent-line); color: var(--accent-deep); background: var(--accent-tint); font-size: 12.5px; }
.chip.pgenre { border: 1px solid var(--line-strong); color: var(--ink-soft); background: var(--line-faint); font-size: 12.5px; }
.chip.pfandom { border: 1px dashed var(--accent-line); color: var(--accent-deep); font-size: 12.5px; }

/* ---------- Gallery ---------- */
.gallery-wrap {
  max-width: 1400px; margin: 0 auto; padding: 32px var(--gutter) 56px;
  display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start;
}
.filters { flex: 1 1 250px; max-width: 100%; padding: 0; }
.filters > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; font-weight: 700; color: var(--text-strong); min-height: 48px;
}
.filters > summary::-webkit-details-marker { display: none; }
.filters > summary::after { content: '▾'; color: var(--text-mute); }
.filters[open] > summary::after { content: '▴'; }
.filter-count { margin-left: auto; margin-right: 10px; background: var(--peach); color: #2a1622; border-radius: 999px; font-size: 12px; padding: 1px 8px; }
.filters-body { display: flex; flex-direction: column; gap: 20px; padding: 0 20px 22px; }
.filters-head { display: none; justify-content: space-between; align-items: baseline; }
.filters-head h2 { margin: 0; font-size: 17px; color: var(--text-strong); }
.filter-group { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.filter-group legend { float: left; width: 100%; padding: 0; margin-bottom: 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-mute); }
.filter-group legend + * { clear: both; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  font-size: 13px; font-weight: 600; padding: 6px 13px; min-height: 36px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(244, 177, 131, 0.35); background: rgba(255, 255, 255, 0.05); color: var(--text);
}
.pill:hover { border-color: var(--peach); }
.pill[aria-pressed='true'] { background: rgba(244, 177, 131, 0.24); border-color: var(--peach); color: var(--text-strong); }
.filter-warnings { padding-top: 16px; border-top: 1px solid var(--glass-line); }
.check { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; min-height: 36px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--peach); }

@media (min-width: 900px) {
  .filters { position: sticky; top: 16px; }
  .filters > summary { display: none; }
  .filters-body { padding-top: 20px; }
  .filters-head { display: flex; }
}

.gallery { flex: 999 1 600px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.gallery-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
.gallery-head h1 { margin: 0; font-size: 28px; color: var(--text-strong); }
.gallery-head p { margin: 4px 0 0; font-size: 14px; }
.gallery-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; flex: 1 1 320px; justify-content: flex-end; }
.search {
  display: flex; align-items: center; gap: 10px; flex: 1 1 220px; max-width: 360px;
  padding: 0 14px; min-height: 44px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--glass-line); color: var(--text-soft);
}
.search:focus-within { border-color: var(--peach); }
.search input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--text); font-size: 14px; }
.search input::placeholder { color: var(--text-mute); }
.sort { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-soft); }
.sort select { background: rgba(255, 255, 255, 0.06); border: 1px solid var(--glass-line); border-radius: 10px; padding: 8px 10px; min-height: 44px; color: var(--text); }
.sort select option { background: var(--dusk-1); }
.result-count { margin: 0; font-size: 13px; }
.empty { padding: 40px 0; text-align: center; color: var(--text-soft); }

.tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 22px; }
.tile {
  display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 14px;
  background: rgba(32, 22, 44, 0.55); border: 1px solid rgba(201, 179, 230, 0.16); transition: border-color 0.15s, transform 0.15s;
}
.tile:hover { border-color: rgba(244, 177, 131, 0.5); transform: translateY(-2px); }
.tile-link { display: flex; flex-direction: column; gap: 12px; color: inherit; text-decoration: none; }
.label { margin: 0 -2px; padding: 10px 14px 13px; border-radius: 3px; box-shadow: 0 4px 12px rgba(10, 6, 16, 0.35); display: flex; flex-direction: column; }
.tile-title { font-family: var(--serif); font-variant: small-caps; letter-spacing: 0.12em; font-size: 13px; font-weight: 500; color: var(--ink-mute); }
.tile-name { font-family: var(--script); font-size: 29px; line-height: 1.15; background: var(--gilt); -webkit-background-clip: text; background-clip: text; color: var(--gilt-color); }
.tile-blurb { margin: 6px 0 0; font: italic 400 15px/1.4 var(--serif); color: var(--ink-soft); }
.tile-foot { display: flex; justify-content: space-between; font-size: 11.5px; font-weight: 600; color: var(--text-mute); letter-spacing: 0.05em; margin-top: auto; }

/* ---------- Card page ---------- */
.card-page { max-width: 1400px; margin: 0 auto; padding: 24px var(--gutter) 64px; display: flex; flex-direction: column; gap: 18px; }
.back { font-weight: 600; font-size: 14px; text-decoration: none; align-self: flex-start; padding: 6px 0; }
.card-layout { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.sheet { flex: 999 1 620px; min-width: 0; padding: clamp(24px, 4vw, 44px) clamp(18px, 4.5vw, 52px) 64px; box-shadow: 0 18px 40px rgba(10, 6, 16, 0.5); }
.sheet-head { display: flex; flex-wrap: wrap-reverse; gap: 28px; align-items: flex-start; }
.sheet-intro { flex: 999 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.sheet-title { margin: 0; font-family: var(--serif); font-variant: small-caps; font-weight: 600; font-size: 17px; letter-spacing: 0.14em; color: var(--ink-mute); }
.sheet-name { margin: 0; font-family: var(--script); font-weight: 400; font-size: clamp(48px, 8vw, 72px); line-height: 1.05; background: var(--gilt); -webkit-background-clip: text; background-clip: text; color: var(--gilt-color); overflow-wrap: anywhere; }
.sheet-blurb { margin: 0; font: italic 400 20px/1.45 var(--serif); color: var(--ink-soft); }
.portrait-col { flex: 1 1 220px; max-width: 300px; display: flex; flex-direction: column; gap: 20px; }
.photo.tilt { transform: rotate(1.5deg); padding: 8px; box-shadow: 0 10px 26px rgba(20, 12, 6, 0.45); }
.photo.tilt .corner { width: 24px; height: 24px; }
/* Extra-portrait picker under the card page portrait. */
.art-pick-label { margin: 0 0 8px; text-align: center; font: 600 15px var(--serif); font-variant: small-caps; letter-spacing: 0.1em; color: var(--ink-mute); }
.art-pick ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.art-pick a { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 68px; text-decoration: none; color: var(--ink-soft); font: 400 13px/1.2 var(--serif); text-align: center; overflow-wrap: anywhere; }
.art-pick img, .art-pick .ph { width: 60px; height: 80px; object-fit: cover; border-radius: 3px; outline: 1px solid var(--line); outline-offset: 2px; opacity: 0.75; transition: opacity 0.15s; }
.art-pick a:hover img { opacity: 1; }
.art-pick a[aria-current='true'] { color: var(--accent); font-weight: 600; }
.art-pick a[aria-current='true'] img { outline: 2px solid var(--accent); opacity: 1; }
/* The label sits on the box's top border like a tab, so the text gets the full width. */
.warning { position: relative; display: flex; flex-direction: column; gap: 6px; margin-top: 11px; padding: 20px 14px 12px; border: 1px solid var(--warn-line); border-radius: 6px; background: var(--warn-tint); }
.warning:not(:has(.warning-text)) { margin-top: 0; padding: 12px 14px; }
.warning-text { display: flex; flex-direction: column; gap: 6px; }
.warning-text strong { color: var(--gilt-text-color, var(--warn)); background: var(--gilt-text); -webkit-background-clip: text; background-clip: text; }
.warning-text.folded { max-height: 132px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
.warning-more { flex: none; align-self: center; background: none; border: 0; padding: 6px 0 2px; min-height: 36px; cursor: pointer; color: var(--warn); font: 600 15px var(--serif); font-variant: small-caps; letter-spacing: 0.08em; text-decoration: underline; text-underline-offset: 3px; }
.warning p { margin: 0; font: 400 16.5px/1.45 var(--serif); color: var(--warn-ink); }
.badge-dd, .badge-cw { flex: none; align-self: flex-start; font: 700 11px var(--sans); letter-spacing: 0.12em; text-transform: uppercase; padding: 5px 9px; border-radius: 5px; background: var(--dd); color: var(--text-strong); }
.warning:has(.warning-text) > :is(.badge-dd, .badge-cw) { position: absolute; top: -11px; left: 12px; }

.tabs { display: flex; flex-wrap: wrap; gap: 4px 24px; border-bottom: 1px solid var(--line); }
.tab {
  font: 600 16px var(--serif); font-variant: small-caps; letter-spacing: 0.08em; padding: 10px 2px; min-height: 44px;
  background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--ink-mute); cursor: pointer;
}
.tab:hover { color: var(--ink); }
.tab[aria-selected='true'] { color: var(--gilt-text-color, var(--accent)); border-bottom-color: var(--accent); background: var(--gilt-text); -webkit-background-clip: text; background-clip: text; }
.panel-tab { padding-top: 26px; }
.subtabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 720px; margin: 0 auto 24px; padding-bottom: 22px; border-bottom: 1px dashed var(--line); }
.subtab {
  font: 600 15px var(--serif); font-variant: small-caps; letter-spacing: 0.07em; padding: 4px 14px; min-height: 36px; border-radius: 999px;
  background: var(--line-faint); border: 1px solid var(--line-strong); color: var(--ink-soft); cursor: pointer;
}
.subtab:hover { color: var(--ink); border-color: var(--ink-mute); }
.subtab[aria-selected='true'] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

.prose { max-width: 720px; margin: 0 auto; font: 400 18px/1.65 var(--serif); color: var(--ink); overflow-wrap: break-word; }
.prose p { margin: 0 0 0.75em; }
.prose-greeting > p { text-indent: 1.4em; text-align: justify; hyphens: auto; }
.prose-greeting > p:first-child,
.prose-greeting > .scene:first-child + p { text-indent: 0; }
.prose-greeting > p:first-child::first-letter,
.prose-greeting > .scene:first-child + p::first-letter { float: left; font: 500 3.4em/0.8 var(--serif); color: var(--gilt-text-color, var(--accent)); padding: 0.08em 0.1em 0 0; background: var(--gilt-text); -webkit-background-clip: text; background-clip: text; }
/* Scene header: a greeting's `Country || Place, Region || Location || Day, HH:MM` line. */
.scene { margin: 0.2em 0 1.4em; text-align: center; }
.scene p { margin: 0; text-indent: 0; text-align: center; }
.scene-rule { display: flex; align-items: center; gap: 0.75em; color: var(--ink-mute); font-size: 1.2em; line-height: 1; }
.scene-rule::before, .scene-rule::after { content: ''; flex: 1; border-top: 1px solid var(--line-strong); }
.scene .scene-place { margin-top: 0.55em; font-size: 1.15em; font-variant: small-caps; letter-spacing: 0.12em; color: var(--ink); }
.scene-region { font-style: italic; color: var(--ink-soft); }
.scene .scene-time { margin-top: 0.15em; font-size: 0.85em; letter-spacing: 0.08em; color: var(--ink-mute); }
.prose p.aside { font-style: italic; color: var(--ink-soft); }
.prose em { color: var(--ink-soft); }
.prose .q { color: var(--accent); }
.prose .macro { font-variant: small-caps; letter-spacing: 0.06em; }
.prose h3 { font-size: 1.05em; font-variant: small-caps; letter-spacing: 0.1em; margin: 1.2em 0 0.4em; text-align: center; }
.prose hr { border: 0; text-align: center; margin: 1.2em 0; }
.prose hr::after { content: '✦'; color: var(--accent); }
.prose a { color: var(--accent); }
.prose ul { padding-left: 1.3em; margin: 0 0 0.75em; }
.prose blockquote { margin: 0 0 0.75em; padding-left: 1em; border-left: 2px solid var(--accent-line); color: var(--ink-soft); }
.prose ol { padding-left: 1.6em; margin: 0 0 0.75em; }
.prose code { padding: 1px 4px; border-radius: 3px; background: var(--line-faint); }
.prose pre { margin: 0 0 0.75em; padding: 10px 12px; border-radius: 6px; background: var(--line-faint); }
/* Shared by paper, the dusk pages and the admin's message list. */
:is(.prose, .prose-dark, .msg-body) :is(code, pre) { font-family: var(--mono); font-size: 0.85em; }
:is(.prose, .prose-dark, .msg-body) pre { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
:is(.prose, .prose-dark, .msg-body) pre code { font-size: 1em; padding: 0; background: none; }
:is(.prose, .prose-dark, .msg-body) li > :is(ul, ol) { margin: 0.25em 0 0; }
/* Quoted lines (texts, letters) sit closer together than paragraphs. */
:is(.prose, .prose-dark, .msg-body) blockquote p { margin: 0 0 0.25em; text-indent: 0; text-align: left; }
:is(.prose, .prose-dark, .msg-body) blockquote > :last-child { margin-bottom: 0; }
.clamped { max-height: 820px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 75%, transparent); mask-image: linear-gradient(#000 75%, transparent); }
.btn-ghost-paper { display: flex; margin: 8px auto 0; background: transparent; color: var(--accent); border: 1px solid var(--accent-line); font-family: var(--serif); font-variant: small-caps; letter-spacing: 0.08em; font-size: 16px; }
.btn-ghost-paper:hover { background: var(--accent-tint); color: var(--accent); }
/* Greetings: stacked without JS; site.js turns them into a swipeable carousel (.live). */
.swiper-slide + .swiper-slide { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line-faint); }
.swiper-slide-label { max-width: 720px; margin: 0 auto 14px; font: 600 16px var(--serif); font-variant: small-caps; letter-spacing: 0.1em; color: var(--ink-mute); }
.swiper.live .swiper-track {
  display: flex; align-items: flex-start; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.swiper.live .swiper-track::-webkit-scrollbar { display: none; }
.swiper.live .swiper-slide { flex: 0 0 100%; min-width: 0; margin: 0; padding: 0 2px; border: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.swiper.live .swiper-slide-label { display: none; }
@media (prefers-reduced-motion: no-preference) { .swiper.live .swiper-track { transition: height 0.25s ease; } }
.swiper-bar { max-width: 720px; margin: 0 auto 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.swiper-arrow {
  flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--accent-line); background: transparent;
  color: var(--accent); font: 500 26px/1 var(--serif); padding: 0 0 3px; cursor: pointer;
}
.swiper-arrow:hover { background: var(--accent-tint); }
.swiper-status { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; text-align: center; }
.swiper-label { font: 600 16px var(--serif); font-variant: small-caps; letter-spacing: 0.1em; color: var(--accent); }
.swiper-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.swiper-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: background 0.2s; }
.swiper-dot.on { background: var(--accent); }
.swiper-foot { margin-top: 22px; }
.sheet-foot { margin: 34px 0 0; text-align: center; font: italic 400 14px var(--serif); color: var(--ink-mute); }

.card-side { flex: 1 1 280px; max-width: 100%; display: flex; flex-direction: column; gap: 16px; }
.dl-panel { display: flex; flex-direction: column; gap: 12px; }
.btn-dl { width: 100%; min-height: 50px; font-size: 16px; }
.dl-alt { text-align: center; font-size: 14px; font-weight: 600; }
.facts { margin: 4px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 13.5px; }
.facts dt { color: var(--text-mute); }
.facts dd { margin: 0; }
.versions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.versions li { padding-bottom: 12px; border-bottom: 1px solid rgba(201, 179, 230, 0.12); display: flex; flex-direction: column; gap: 4px; }
.versions li:last-child { border-bottom: 0; padding-bottom: 0; }
.version-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 14px; }
.version-head a { font-size: 13px; font-weight: 600; }
.versions p { margin: 0; font-size: 13.5px; color: #d8cbe6; }

.dl-mobile { display: none; flex-direction: column; gap: 8px; }
.dl-mobile .dl-alt { color: var(--accent); }
@media (max-width: 899px) {
  .dl-mobile { display: flex; }
  .dl-panel .btn-dl, .dl-panel .dl-alt { display: none; }
  .portrait-col { max-width: none; width: 100%; }
  .photo.tilt { width: 100%; max-width: 260px; margin: 0 auto; }
}

/* ---------- About / contact ---------- */
.narrow { max-width: 760px; margin: 0 auto; padding: 32px var(--gutter) 56px; display: flex; flex-direction: column; gap: 20px; }
.page-title { margin: 0; font-size: 30px; color: var(--text-strong); }
.prose-dark { font-size: 16px; line-height: 1.7; color: var(--text); }
.prose-dark p { margin: 0 0 0.8em; }
.prose-dark p:last-child { margin-bottom: 0; }
.prose-dark em { color: var(--text-soft); }
.prose-dark .q { color: var(--peach-hi); }
.prose-dark hr { border: 0; text-align: center; margin: 1em 0; }
.prose-dark blockquote { margin: 0 0 0.8em; padding-left: 1em; border-left: 2px solid var(--glass-line); color: var(--text-soft); }
.prose-dark :is(ul, ol) { margin: 0 0 0.8em; padding-left: 1.4em; }
.prose-dark code { padding: 1px 4px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); }
.prose-dark pre { margin: 0 0 0.8em; padding: 10px 12px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); }
.prose-dark hr::after { content: '✦'; color: var(--peach); }
.notice { margin: 0 0 14px; padding: 12px 16px; border-left: 3px solid var(--peach); border-radius: 6px; background: rgba(244, 177, 131, 0.08); color: var(--peach-hi); font-size: 14.5px; }
.write-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.write-table th, .write-table td { text-align: left; padding: 11px 10px; border-bottom: 1px solid rgba(201, 179, 230, 0.12); font-weight: 500; }
.write-table tr:last-child th, .write-table tr:last-child td { border-bottom: 0; }
.write-table .mark { width: 3em; text-align: center; font-size: 17px; }
.mark-yes { color: #a8e0b8; }
.mark-no { color: #f0a8a0; }
.mark-some { color: var(--text-mute); }
.contact-intro { padding: 0 2px; }
.ask-hint { margin: -6px 0 16px; font-size: 14px; }
.form-hint { margin: -8px 0 0; font-size: 13px; }
.form-hint code { padding: 0 4px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); font: 12px var(--mono); }
.qa { padding: 26px clamp(18px, 4vw, 36px) 40px; box-shadow: 0 14px 30px rgba(10, 6, 16, 0.45); }
.qa-q { margin: 0 0 16px; padding: 0 0 14px 14px; border-left: 2px solid var(--accent-line); border-bottom: 1px solid var(--line); font: italic 400 19px/1.5 var(--serif); color: var(--ink-soft); overflow-wrap: anywhere; }
.qa-q p { margin: 0 0 0.4em; }
.qa-q > :last-child { margin-bottom: 0; }
.qa-a { margin: 0; }
.qa-a p:last-child { margin-bottom: 0; }
.qa-date { margin: 14px 0 0; text-align: right; font: italic 400 14px var(--serif); color: var(--ink-mute); }
.qa-pages { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-weight: 600; }

.form { display: flex; flex-direction: column; gap: 16px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 14px; }
.form input:not([type='checkbox']):not([type='radio']):not([type='file']), .form textarea, .form select {
  width: 100%; padding: 11px 14px; border-radius: 10px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--glass-line); color: var(--text); font-weight: 500; font-size: 15px;
}
.form input:focus, .form textarea:focus, .form select:focus { outline: none; border-color: var(--peach); }
.form textarea { resize: vertical; line-height: 1.5; }
.form .btn { align-self: flex-start; }
.hp { position: absolute !important; left: -9999px; }
.char-count { align-self: flex-end; margin-top: -2px; font-size: 12.5px; font-weight: 500; color: var(--text-mute); font-variant-numeric: tabular-nums; }
.char-count.near { color: var(--peach-hi); font-weight: 700; }

/* ---------- Age gate ---------- */
body.gated { overflow: hidden; }
body.gated .page { filter: blur(14px) saturate(0.7); pointer-events: none; user-select: none; }
.age-gate { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgba(16, 10, 22, 0.6); }
.age-card { max-width: 480px; width: 100%; padding: 32px clamp(20px, 5vw, 36px); border-radius: 4px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); text-align: center; }
.age-site { margin: 0; font-family: var(--serif); font-variant: small-caps; letter-spacing: 0.16em; color: var(--ink-mute); }
.age-card h1 { margin: 4px 0 12px; font-family: var(--script); font-weight: 400; font-size: 52px; line-height: 1.1; background: var(--gilt); -webkit-background-clip: text; background-clip: text; color: var(--gilt-color); }
.age-card p { font: 400 17px/1.55 var(--serif); color: var(--ink); margin: 0 0 22px; }
.age-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.age-actions .btn-ghost { background: transparent; color: var(--ink-soft); border-color: var(--line-strong); }
.age-actions .btn-ghost:hover { color: var(--ink); border-color: var(--ink-soft); }

/* Phones: two compact columns so browsing isn't one card per screen. */
@media (max-width: 599px) {
  /* Keeps the brand, nav and day/night button on one line down to 360px. */
  .site-header { column-gap: 10px; }
  .brand { font-size: 18px; letter-spacing: 0.02em; }
  .site-nav { column-gap: 9px; font-size: 14.5px; }
  .theme-toggle { width: 34px; height: 34px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .tile { padding: 8px; gap: 8px; border-radius: 12px; }
  .tile-link { gap: 8px; }
  .tile .photo { padding: 4px; }
  .tile .corner { width: 13px; height: 13px; }
  .label { padding: 7px 9px 9px; }
  .tile-title { font-size: 11px; letter-spacing: 0.08em; }
  .tile-name { font-size: 23px; }
  .tile-blurb { font-size: 13.5px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  .tile .chips { gap: 4px; }
  .tile .chip { font-size: 10.5px; padding: 2px 7px; }
  .tile .chip.dd { font-size: 9.5px; }
  .tile-foot { font-size: 10.5px; }
  .gallery-tools { justify-content: stretch; }
  .search { max-width: none; }
}