/* ============================================================
   BestFetishPorn
   Palette   lacquer black and oxblood. Surfaces are dark hide;
             crimson is kept for links, focus and anything live.
   Type      Archivo, one variable file, cut two ways: heavy condensed
             caps for the wordmark and headings (72 % width, club-flyer
             loud, tight as a strap), and semibold tracked caps a touch
             wider (75 %) for labels and controls, so they look the same
             on every system. The system face for everything read in bulk.
   Signature hardware: a glossy O-ring for the mark, and a row of
             studs that light up as a preview plays. "Gloss" (an
             oxblood fill with a specular top edge, like light on
             latex) marks whatever is selected or primary.
   Ad boxes (.ad, .ad-*) are styled in ads.css, not here. The one
   shared piece is .ad-label, near the end of this file.
   ============================================================ */

/* The one downloaded file (OFL, see assets/fonts/FONTS.txt): Archivo,
   variable in weight (100-900) and width (62-125 %). It is declared three
   times from the same URL, so it is fetched once. "BFP Display" and
   "BFP Label" pin the width in the face itself, so no rule needs
   font-stretch and the system fallbacks are never squeezed. Headings and
   labels may show a fallback while it loads; the wordmark waits for it
   rather than flash in the wrong face. Roman only: nothing is italic. */
@font-face {
  font-family: "BFP Display";
  src: url("../fonts/archivo-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 72%;
  font-display: swap;
}
@font-face {
  font-family: "BFP Label";
  src: url("../fonts/archivo-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 75%;
  font-display: swap;
}
@font-face {
  font-family: "BFP Mark";
  src: url("../fonts/archivo-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: block;
}

:root {
  --bg: #0d0a0b;          /* lacquer */
  --bg-2: #161113;        /* hide: cards, inputs, footer */
  --bg-3: #221a1c;        /* welt: hover, empty thumbnails */
  --line: #372a2d;        /* seam */
  --line-strong: #756467; /* field edges: 3:1 against the ground */
  --text: #f3ece9;        /* bone */
  --muted: #ab9d9b;       /* ash */
  --crimson: #ef4057;     /* links, focus, live */
  --blood: #7c0d1e;       /* oxblood */
  --on-gloss: #fff6f4;
  --shade: rgba(8, 5, 6, .8);
  --float: 0 24px 64px rgba(0, 0, 0, .55);   /* panels that sit over the page */

  /* Latex: a lit top, a hard fold just past the middle, a little
     reflected light at the bottom. Used on fills, never on text. */
  --gloss: linear-gradient(180deg, #c42640 0%, #9a1429 46%, #780b1c 54%, #8e1225 100%);
  --gloss-edge: inset 0 1px 0 rgba(255, 214, 220, .38), inset 0 -1px 0 rgba(0, 0, 0, .3);
  --ring: linear-gradient(145deg, #ff8494 0%, #e0304a 40%, #8c0c20 58%, #c8213a 100%);
  --stud: radial-gradient(circle at 35% 30%, #ffe3e6 0 14%, #ef4057 40%, #7c0d1e 100%);
  /* The wordmark's gloss, as SVG stop colours. */
  --gl-1: #ff8a98;
  --gl-2: #ef3d53;
  --gl-3: #b8182f;
  --gl-4: #e5344b;
  --hl: linear-gradient(180deg, #ff8a98 0%, #ef4057 48%, #d4203a 52%, #ef4057 100%);

  /* After Archivo, the condensed faces the systems already have (macOS and
     iOS, Windows, Android), shown only until the file arrives. */
  --display: "BFP Display", "Avenir Next Condensed", "Bahnschrift Condensed", "Roboto Condensed", sans-serif-condensed, Impact, "Arial Narrow", sans-serif;
  --label: "BFP Label", "Avenir Next Condensed", "Bahnschrift SemiCondensed", "Roboto Condensed", sans-serif-condensed, "Arial Narrow", system-ui, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --r: 4px;
  --r-s: 3px;
  --gap: clamp(10px, 1.4vw, 18px);
  --row-gap: clamp(16px, 2vw, 26px);   /* between rows of cards */
  --pad: clamp(12px, 3vw, 32px);
  --max: 1680px;
  --head-h: 62px;         /* the sticky bar; sticky things below it start here */
  color-scheme: dark;
}

[data-theme="light"] {
  --bg: #f7f3f2;
  --bg-2: #ffffff;
  --bg-3: #eee7e6;
  --line: #e2d7d6;
  --line-strong: #8f7f81;
  --text: #1c1315;
  --muted: #685a5c;
  --crimson: #b3122e;
  --blood: #8a1024;
  --gl-1: #d4203a;
  --gl-2: #b3122e;
  --gl-3: #7c0d1e;
  --gl-4: #9e1128;
  --hl: linear-gradient(180deg, #c42640 0%, #a3122c 50%, #7c0d1e 100%);
  --float: 0 20px 50px rgba(40, 10, 16, .18);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--head-h) + 12px); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 .95rem/1.5 var(--body);
  min-height: 100vh;
  overflow-wrap: anywhere;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--blood); color: #fff; }

:focus-visible { outline: 2px solid var(--crimson); outline-offset: 2px; border-radius: var(--r-s); }

.sr, .hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--text); color: var(--bg); padding: 10px 16px; border-radius: var(--r-s); font-weight: 600; }
.skip:focus { left: 8px; }
.i { flex: none; }

/* Headings in the display face: heavy condensed capitals. Balanced, so a
   heading that needs two lines never leaves one short word on the second
   ("...ON OUR / SERVER") on a phone. */
.mast h1, .head h1, .block-h h2, .shelf-h h2, .about h2, .note h1, .note h2,
.prose h1, .prose h2, .gate h2, .consent h2, .tile-t {
  font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: .005em;
  text-wrap: balance;
}

/* ---------- header ---------- */

/* The bar sticks; the link row under it scrolls away with the page. */
.top { position: sticky; top: 0; z-index: 40; background: var(--bg); box-shadow: 0 1px 0 var(--line); }
.top-in {
  position: relative; display: flex; align-items: center; gap: 16px;
  max-width: var(--max); margin: 0 auto; padding: 10px var(--pad);
}
.nav-row { border-bottom: 1px solid var(--line); }

.logo { display: inline-flex; align-items: center; gap: 8px; flex: none; color: var(--text); }
.logo-mark { height: 31px; width: auto; }
.logo-word { height: 27px; width: auto; }
.logo-word text { font-family: "BFP Mark", var(--display); font-stretch: 72%; font-size: 30px; }
.logo-word .g1 { stop-color: var(--gl-1); }
.logo-word .g2 { stop-color: var(--gl-2); }
.logo-word .g3 { stop-color: var(--gl-3); }
.logo-word .g4 { stop-color: var(--gl-4); }
.logo:hover .logo-mark { filter: brightness(1.12); }

.search { position: relative; flex: 1; display: flex; max-width: 560px; margin-inline: auto; }
.search input {
  width: 100%; min-width: 0; height: 42px; padding: 0 46px 0 14px;
  background: var(--bg-2); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: var(--r);
  font: inherit; font-size: 1rem; -webkit-appearance: none; appearance: none;
}
.search input::placeholder { color: var(--muted); }
.search input:focus { outline: none; border-color: var(--crimson); box-shadow: 0 0 0 1px var(--crimson); }
.search button {
  position: absolute; right: 3px; top: 3px; width: 36px; height: 36px;
  display: grid; place-items: center; border: 0; border-radius: var(--r-s);
  background: transparent; color: var(--muted);
}
.search button:hover { color: var(--text); background: var(--bg-3); }

.suggest {
  position: absolute; left: 0; right: 0; top: 48px; z-index: 50;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r);
  padding: 6px; box-shadow: var(--float);
}
/* Names stay on one line; the page-wide overflow-wrap would break them letter by letter. */
.suggest a { display: flex; align-items: baseline; gap: 10px; padding: 9px 12px; border-radius: var(--r-s); overflow-wrap: normal; min-width: 0; }
.suggest a:hover, .suggest a[aria-selected="true"] { background: var(--bg-3); }
.suggest small { color: var(--muted); margin-left: auto; white-space: nowrap; font: 600 .78rem/1.3 var(--label); letter-spacing: .06em; text-transform: uppercase; }

.theme { flex: none; width: 42px; height: 42px; display: grid; place-items: center; background: transparent; border: 1px solid var(--line-strong); border-radius: var(--r); color: var(--muted); }
.theme:hover { color: var(--text); border-color: var(--text); }

/* On a phone the search box folds into a square beside the theme button,
   so the name keeps its room. Tapping it opens the field across the whole
   bar; tapping anywhere else folds it again. No script involved. */
@media (max-width: 599px) {
  .top-in { gap: 8px; }
  .logo { margin-right: auto; }
  .logo-word { height: 23px; }
  .search { flex: 0 0 42px; margin: 0; }
  .search input { padding: 0; color: transparent; caret-color: transparent; cursor: pointer; }
  .search input::placeholder { color: transparent; }
  .search button { pointer-events: none; color: var(--text); }
  .search:focus-within { position: absolute; left: var(--pad); right: var(--pad); top: 10px; z-index: 5; }
  .search:focus-within input { padding: 0 46px 0 14px; color: var(--text); caret-color: auto; cursor: text; }
  .search:focus-within input::placeholder { color: var(--muted); }
  .search:focus-within button { pointer-events: auto; color: var(--muted); }
  .suggest a { flex-direction: column; align-items: flex-start; gap: 2px; }
  .suggest small { margin-left: 0; }
}
@media (max-width: 359px) { .logo-mark { display: none; } }

.nav { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.nav ul { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; margin-inline: -10px; }
.nav ul::-webkit-scrollbar { display: none; }
.nav a {
  position: relative; display: flex; align-items: center; gap: 6px; padding: 11px 10px 13px; white-space: nowrap; color: var(--muted);
  font: 600 1.04rem/1.1 var(--label); letter-spacing: .07em; text-transform: uppercase;
}
.nav a:hover { color: var(--text); }
/* The current page wears a single stud. */
.nav a[aria-current="page"] { color: var(--text); }
.nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 50%; bottom: 3px; width: 6px; height: 6px; margin-left: -3px;
  border-radius: 50%; background: var(--stud);
}
/* Where the menu and the sort tabs run off a narrow screen, the last one
   fades out, which says "there is more this way" without an arrow. */
@media (max-width: 899px) {
  .nav ul, .tabs {
    padding-right: 28px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  }
}
.nav-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--crimson); box-shadow: 0 0 0 3px color-mix(in srgb, var(--crimson) 25%, transparent); }

/* ---------- page frame ---------- */

main { max-width: var(--max); margin: 0 auto; padding: 18px var(--pad) 48px; }
main:focus { outline: none; }

.crumbs { margin-bottom: 4px; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 0; color: var(--muted); font: 600 .86rem/1.4 var(--label); letter-spacing: .08em; text-transform: uppercase; }
.crumbs li + li::before { content: "/"; margin: 0 9px; color: var(--line-strong); }
.crumbs a:hover { color: var(--text); }

/* The videos are the front page. The masthead says what the site is in one
   breath and gets out of the way. */
.mast { padding: 4px 0 14px; }
.mast h1 { font-size: clamp(1.75rem, 1.2rem + 1.7vw, 2.75rem); line-height: 1; text-wrap: balance; }
.hl { background: var(--hl); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; }
.mast-s { margin-top: 8px; color: var(--muted); font: 600 .92rem/1.35 var(--label); letter-spacing: .06em; text-transform: uppercase; text-wrap: pretty; }
.mast-s strong { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
/* At .92rem the line is about 357 px wide, so a 360 px phone (the most
   common Android width) broke it as "...UPDATED / 13H AGO". A touch smaller
   and tighter on phones keeps it on one line down to 360. */
@media (max-width: 399px) { .mast-s { font-size: .84rem; letter-spacing: .035em; } }

.head { padding: 12px 0 14px; }
.head h1 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.9rem); line-height: 1; text-wrap: balance; }
.head-n { margin-top: 8px; color: var(--muted); font: 600 .92rem/1.35 var(--label); letter-spacing: .08em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.head-c { margin-top: 10px; max-width: 74ch; color: var(--muted); }
.head-c a, .about a, .note a, .prose a, .foot-base a, .gate-small a, .consent a {
  color: var(--crimson); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}

.block { margin-top: clamp(28px, 4vw, 48px); }
.block-h { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.block-h h2 { font-size: clamp(1.35rem, 1rem + 1vw, 1.9rem); line-height: 1.04; }
.more, .shelf-more {
  color: var(--crimson); white-space: nowrap;
  font: 600 .96rem/1.2 var(--label); letter-spacing: .08em; text-transform: uppercase;
}
.more::after, .shelf-more::after { content: " \2192"; font-family: var(--body); }
.more:hover, .shelf-more:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- chips, tabs, filters ---------- */

.chips, .filters, .letters, .jump { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 6px 13px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-s);
  font-size: .9rem; white-space: nowrap;
}
.chip:hover { border-color: var(--line-strong); background: var(--bg-3); }
.chip-n { color: var(--muted); font-size: .78rem; font-variant-numeric: tabular-nums; }
/* Selected: the gloss. The bright top edge keeps it distinct from the
   dark ground even where the fill alone would be too close. */
.chip-on, .chip-btn[aria-pressed="true"] {
  background: var(--gloss); color: var(--on-gloss); border-color: #c42640; box-shadow: var(--gloss-edge);
}
.chip-on:hover, .chip-btn[aria-pressed="true"]:hover { background: var(--gloss); border-color: #e0304a; }
.chip-on .chip-n { color: inherit; opacity: .85; }
.chip-off { opacity: .35; cursor: default; }
.chip-off:hover { background: var(--bg-2); border-color: var(--line); }
.filters .chip, .letters .chip, .jump .chip { font: 600 .94rem/1.2 var(--label); letter-spacing: .07em; text-transform: uppercase; }
.letters, .jump { margin: 4px 0 18px; }
.letters .chip { min-width: 38px; justify-content: center; padding-inline: 10px; }

/* The front-page category row scrolls sideways rather than pushing the videos down. */
main > section.rail { margin-top: clamp(26px, 3.5vw, 40px); }
.rail > .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); }
.rail > .chips::-webkit-scrollbar { display: none; }
.block-first { margin-top: 10px; }

.controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin: 4px 0 18px; }
.tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; flex: 1 1 auto; min-width: 0; padding: 2px; margin: -2px; }
.tabs::-webkit-scrollbar { display: none; }
/* The fade at the end of the row (above) needs its room back after the
   padding just set, or the last tab ("Longest") stays half faded even when
   the row is scrolled all the way across. */
@media (max-width: 899px) { .tabs { padding-right: 28px; } }
.tab {
  display: inline-flex; align-items: center; min-height: 38px; padding: 0 13px; white-space: nowrap; color: var(--muted);
  border: 1px solid transparent; border-radius: var(--r-s);
  font: 600 1rem/1 var(--label); letter-spacing: .07em; text-transform: uppercase;
}
.tab:hover { color: var(--text); border-color: var(--line); }
.tab-on, .tab-on:hover { color: var(--on-gloss); background: var(--gloss); border-color: #c42640; box-shadow: var(--gloss-edge); }

/* Period switch on a shelf: Today / This week / This month / All time. */
.periods { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.periods::-webkit-scrollbar { display: none; }
.periods .chip {
  min-height: 32px; padding: 0 11px; background: transparent; border-color: var(--line); color: var(--muted);
  font: 600 .9rem/1 var(--label); letter-spacing: .07em; text-transform: uppercase;
}
.periods .chip:hover { color: var(--text); border-color: var(--line-strong); }
/* On a list page the period row comes straight after the sort tabs. */
.controls + .periods { margin: -6px 0 18px; }
.periods .chip-on, .periods .chip[aria-pressed="true"], .periods .chip[aria-current] {
  color: var(--on-gloss); background: var(--gloss); border-color: #c42640; box-shadow: var(--gloss-edge);
}

/* ---------- the grid ---------- */

.grid { display: grid; gap: var(--row-gap) var(--gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* A list split around the mid-page ad reads as one grid when the ad is not shown. */
.grid + .grid { margin-top: var(--row-gap); }
@media (min-width: 560px)  { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px)  { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1400px) { .grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.card { position: relative; min-width: 0; }
.card-a { display: block; }
.thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r); background: var(--bg-3); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
/* Where pictures may not be shown: a colour field in the picture's place,
   pulled toward the house colours so a whole page of them still looks like us. */
.blank { position: absolute; inset: 0; display: block; background: linear-gradient(135deg, hsl(var(--h) 24% 24%), hsl(calc(var(--h) + 30) 30% 11%)); }
.tile .blank { z-index: -2; }
.card-a:hover .thumb { box-shadow: 0 0 0 1px var(--crimson); }
.card-a:hover .thumb img { filter: brightness(1.07); }

.dur, .badges .b, .live, .card.seen .thumb::after {
  position: absolute; padding: 2px 6px; border-radius: var(--r-s);
  font: 600 .84rem/1.3 var(--label); letter-spacing: .05em; font-variant-numeric: tabular-nums;
}
.dur { right: 6px; bottom: 6px; background: var(--shade); color: #fff; }
.badges { position: absolute; left: 6px; top: 6px; display: flex; gap: 4px; }
.badges .b { position: static; background: var(--shade); color: #fff; text-transform: uppercase; }
.badges .b-hd { background: var(--gloss); box-shadow: var(--gloss-edge); color: var(--on-gloss); }
.badges .b-ai { color: #ffd59a; }
.badges .b-paid { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); }
.live { left: 6px; top: 6px; background: var(--gloss); box-shadow: var(--gloss-edge); color: var(--on-gloss); text-transform: uppercase; letter-spacing: .1em; }
.card.seen .thumb::after { content: "Watched"; right: 6px; top: 6px; background: var(--shade); color: #fff; text-transform: uppercase; }

/* The studs. Empty until a preview starts; app.js adds one per still and
   lights them in turn, like the hardware on a collar. */
.scrub { position: absolute; left: 8px; bottom: 9px; display: flex; gap: 5px; opacity: 0; transition: opacity .15s; }
.scrub i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .32); box-shadow: 0 0 0 1px rgba(0, 0, 0, .45); }
.scrub i.on { background: var(--stud); }
.card.playing .scrub { opacity: 1; }

/* Room for two lines even when the title needs one, so the lines under it
   and the buttons beside the host name sit at the same height in every card. */
.card-t {
  margin-top: 9px; min-height: 2.64em; font: 500 .92rem/1.32 var(--body);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.card-a:hover .card-t { color: var(--crimson); }
.card-a:visited .card-t { color: var(--muted); }

/* Two quiet lines under the title: rating, views and age, then the host
   site on its own line beside the buttons. Neither line wraps, so every card
   in a row has the same height; on a narrow card the age gives way first. */
.card { container-type: inline-size; }
.card-m { margin-top: 4px; color: var(--muted); font-size: .8rem; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-m > * + *::before { content: "·"; margin: 0 5px; }
.m-src { display: block; width: fit-content; max-width: calc(100% - 66px); overflow: hidden; text-overflow: ellipsis; color: inherit; font-weight: inherit; }
.card-m > .m-src::before { content: none; }
@container (max-width: 239px) { .card-m time { display: none; } }
.m-src:hover { color: var(--text); text-decoration: underline; }
.m-rate { color: var(--text); font-variant-numeric: tabular-nums; }
/* Views gained this week or month: what a "Most viewed" period list is ranked by. */
.m-gain { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

.card-x { position: absolute; right: -4px; bottom: -9px; display: flex; }
.card-x button, .card-x a { width: 34px; height: 34px; display: grid; place-items: center; background: transparent; border: 0; border-radius: 50%; color: var(--muted); }
.card-x .i { width: 17px; height: 17px; }
.card-x button:hover, .card-x a:hover { color: var(--text); background: var(--bg-3); }
.x-fav[aria-pressed="true"] { color: var(--crimson); }
.x-fav[aria-pressed="true"] .i { fill: currentColor; }

.hide-ai .card.is-ai { display: none; }

/* ---------- shelves ----------
   One row of a ranking: "Most watched", "Top rated" and so on, each with
   a period switch and a link to the full list. On a phone the row scrolls
   sideways; with room it wraps into two rows. The column count follows the
   shelf's own width, so the same shelf works beside the rail or without it. */

.shelf { margin-top: clamp(28px, 4vw, 46px); container-type: inline-size; }
.shelf:first-child, .mast + .shelf { margin-top: 14px; }
.shelf-h { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 14px; }
.shelf-h h2 { font-size: clamp(1.35rem, 1rem + 1vw, 1.9rem); line-height: 1.04; }
.shelf-h p { flex-basis: 100%; order: 3; color: var(--muted); font-size: .88rem; }
.shelf-more { margin-left: auto; }
.shelf-h .periods { order: 4; flex-basis: 100%; }

.grid-shelf {
  display: grid; grid-auto-flow: column; grid-template-columns: none;
  grid-auto-columns: calc((100% - var(--gap) * 1.5) / 2.35);
  gap: var(--gap); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad);
  margin-inline: calc(var(--pad) * -1); padding: 0 var(--pad) 6px;
  scrollbar-width: none;
}
.grid-shelf::-webkit-scrollbar { display: none; }
.grid-shelf > * { scroll-snap-align: start; }

@container (min-width: 520px) {
  .shelf-h .periods { order: 1; flex-basis: auto; }
  .shelf-h .shelf-more { order: 2; }
}
@container (min-width: 560px) {
  .grid-shelf {
    grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-columns: auto;
    overflow: visible; margin-inline: 0; padding: 0; scroll-snap-type: none;
    gap: var(--row-gap) var(--gap);
  }
  .grid-shelf > :nth-child(n + 7) { display: none; }
}
@container (min-width: 900px) {
  .grid-shelf { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid-shelf > :nth-child(n + 7) { display: block; }
  .grid-shelf > :nth-child(n + 9) { display: none; }
}
@container (min-width: 1200px) {
  .grid-shelf { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .grid-shelf > :nth-child(n + 9) { display: block; }
  .grid-shelf > :nth-child(n + 13) { display: none; }
}

/* ---------- desktop rail ----------
   .with-rail holds the main column and one .rail: 336 px, room for a
   300-wide unit with a margin. Below 1280 px the rail is not shown at
   all. Put anything that should follow the reader in .rail-stick. */

.with-rail > .rail { display: none; }
.main-col { min-width: 0; }
@media (min-width: 1280px) {
  .with-rail { display: grid; grid-template-columns: minmax(0, 1fr) 336px; column-gap: clamp(24px, 2vw, 36px); align-items: start; }
  .with-rail > :not(.rail) { grid-column: 1; min-width: 0; }
  .with-rail > .rail {
    display: flex; flex-direction: column; gap: 22px;
    grid-column: 2; grid-row: 1 / span 40; align-self: stretch; min-width: 0;
  }
  .with-rail .grid:not(.grid-shelf) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1640px) {
  .with-rail .grid:not(.grid-shelf) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.rail-stick { position: sticky; top: calc(var(--head-h) + 16px); }

/* ---------- tiles ---------- */

.tiles { display: grid; gap: var(--gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 560px)  { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px)  { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1400px) { .tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.tile {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 16 / 10;
  padding: 10px 12px 11px; overflow: hidden; border-radius: var(--r); background: var(--bg-3); color: #fff; isolation: isolate;
}
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(10, 6, 7, .94) 6%, rgba(10, 6, 7, .3) 58%, rgba(10, 6, 7, 0)); }
.tile-t { font-size: clamp(1.1rem, 1rem + .4vw, 1.35rem); line-height: 1.02; letter-spacing: .015em; }
.tile-n { margin-top: 3px; font: 600 .8rem/1.2 var(--label); letter-spacing: .09em; text-transform: uppercase; color: rgba(255, 255, 255, .78); font-variant-numeric: tabular-nums; }
.tile:hover { outline: 2px solid var(--crimson); outline-offset: -2px; }
.tile:hover img { filter: brightness(1.12); }

/* ---------- pager ---------- */

.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 36px; }
.pg-nums { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
/* Flex, not grid: "Next" and its arrow are two pieces that stay on one line. */
.pg {
  min-width: 44px; height: 44px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--line); border-radius: var(--r-s); background: var(--bg-2);
  font: 600 1rem/1 var(--label); letter-spacing: .06em; text-transform: uppercase; font-variant-numeric: tabular-nums;
}
.pg:hover { border-color: var(--line-strong); background: var(--bg-3); }
.pg-on, .pg-on:hover { background: var(--gloss); color: var(--on-gloss); border-color: #c42640; box-shadow: var(--gloss-edge); }
.pg-gap { align-self: center; color: var(--muted); }
.pg-next { border-color: var(--text); }
@media (max-width: 560px) { .pg-step { flex: 1 1 40%; } .pg-nums { order: 3; flex: 1 1 100%; } }

/* ---------- text pages, notes, forms ---------- */

.about, .note { margin-top: clamp(32px, 5vw, 56px); max-width: 78ch; }
.about { padding-top: clamp(24px, 3vw, 32px); border-top: 1px solid var(--line); }
.about h2, .note h1, .note h2 { font-size: 1.6rem; line-height: 1.05; margin-bottom: 12px; }
.about p, .note p { color: var(--muted); margin-top: 10px; }
.about strong { color: var(--text); }
.note pre, .prose pre { margin-top: 12px; padding: 12px 14px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-s); overflow-x: auto; font-size: .88rem; }

.prose { max-width: 72ch; padding-top: 10px; }
.prose-wide { max-width: 1200px; }
.prose h1 { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.9rem); line-height: 1; text-wrap: balance; }
.prose h2 { font-size: 1.5rem; line-height: 1.06; margin-top: 36px; }
.prose h3 { font: 700 1.02rem/1.3 var(--body); margin-top: 24px; }
.prose p, .prose ul, .prose ol, .prose dl { margin-top: 12px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li::marker { color: var(--crimson); }
.prose li + li { margin-top: 6px; }
.prose-d { margin-top: 8px; color: var(--muted); font: 600 .88rem/1.4 var(--label); letter-spacing: .08em; text-transform: uppercase; }
.prose address { font-style: normal; margin-top: 12px; padding: 14px 16px; background: var(--bg-2); border-left: 3px solid var(--crimson); border-radius: 0 var(--r-s) var(--r-s) 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px;
  border: 1px solid var(--line-strong); border-radius: var(--r-s); background: var(--bg-2); color: var(--text);
  font: 600 1.06rem/1.1 var(--label); letter-spacing: .08em; text-transform: uppercase; text-align: center;
}
.btn:hover { border-color: var(--text); }
.btn-main { background: var(--gloss); color: var(--on-gloss); border-color: #c42640; box-shadow: var(--gloss-edge); }
.btn-main:hover { border-color: #ff8494; filter: brightness(1.08); }
.btn-s { min-height: 32px; padding: 0 12px; font-size: .86rem; }
.linkish { background: none; border: 0; padding: 0; color: inherit; text-align: left; }
.linkish:hover { text-decoration: underline; }

.form { margin-top: 20px; display: grid; gap: 8px; }
.form label, .form legend { font-weight: 600; margin-top: 12px; }
.form small { color: var(--muted); font-weight: 400; }
.form input[type="text"], .form input[type="email"], .form input[type="password"], .form textarea {
  width: 100%; padding: 12px 14px; background: var(--bg-2); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: var(--r-s); font: inherit; font-size: 1rem;
}
.form input:focus, .form textarea:focus { outline: none; border-color: var(--crimson); box-shadow: 0 0 0 1px var(--crimson); }
.form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 2px; }
.form .radio { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; margin: 0; padding: 9px 0; }
.form .radio input { margin-top: 3px; accent-color: var(--crimson); width: 18px; height: 18px; flex: none; }
.form .btn { justify-self: start; margin-top: 16px; }
.form-about { padding: 14px 16px; background: var(--bg-2); border-radius: var(--r-s); border-left: 3px solid var(--crimson); }
.form-about span { display: block; color: var(--muted); font: 600 .8rem/1.4 var(--label); text-transform: uppercase; letter-spacing: .1em; }
.inline { display: inline-block; margin: 2px; }
.in-s { width: 150px; padding: 5px 8px; background: var(--bg-2); color: var(--text); border: 1px solid var(--line-strong); border-radius: var(--r-s); font: inherit; font-size: .82rem; }
.form-inline { grid-template-columns: 1fr auto; align-items: center; gap: 10px; max-width: 640px; }
.form-inline .btn { margin-top: 0; }

/* Admin: category picture picker. */
.pick-list, .pick-grid { list-style: none !important; padding: 0 !important; display: grid; gap: 12px; margin-top: 18px !important; }
.pick-list { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.pick-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.pick-list li, .pick-grid li { margin: 0 !important; }
.pick-list a { display: grid; gap: 6px; color: var(--text); text-decoration: none; }
.pick-img { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-s); background: var(--bg-3); }
.pick-img img { width: 100%; height: 100%; object-fit: cover; }
.pick-now { max-width: 320px; margin: 14px 0; }
.pick-btn { display: grid; gap: 6px; width: 100%; padding: 0; background: none; border: 2px solid transparent; border-radius: var(--r); text-align: left; color: var(--muted); }
.pick-btn:hover, .pick-btn:focus-visible { border-color: var(--crimson); }

.alert { margin-top: 18px; padding: 14px 16px; border: 1px solid var(--crimson); border-radius: var(--r-s); background: color-mix(in srgb, var(--crimson) 10%, var(--bg)); }
.alert ul { margin-top: 6px; }
.alert > :first-child { margin-top: 0; }

.stats { list-style: none !important; padding: 0 !important; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-top: 20px !important; }
.stats li { margin: 0 !important; padding: 14px 16px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-s); }
.stats strong { display: block; font: 600 1.7rem/1.1 var(--label); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.stats span { color: var(--muted); font-size: .82rem; }

.tbl { overflow-x: auto; margin-top: 12px; border: 1px solid var(--line); border-radius: var(--r-s); }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font: 600 .82rem/1.3 var(--label); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wrap { max-width: 320px; }

/* ---------- the shared ad label ----------
   One look for "Ad" and "Sponsored" wherever they appear: small, plain,
   clearly a label and never a button. It sits beside or above a creative,
   never over it. .tag-sp is the older name, kept for the cam row; .nav-ad
   is the badge on a sponsored menu link. */

.ad-label, .tag-sp, .nav-ad {
  display: inline-flex; align-items: center; padding: 1px 6px; border: 1px solid var(--line-strong); border-radius: var(--r-s);
  background: transparent; color: var(--muted); white-space: nowrap; pointer-events: none;
  font: 600 .72rem/1.4 var(--label); letter-spacing: .12em; text-transform: uppercase; vertical-align: middle;
}
.tag-sp { margin-left: 8px; vertical-align: 4px; }
.nav-ad { padding: 0 5px; font-size: .66rem; }

/* ---------- footer ---------- */

.foot { margin-top: 48px; border-top: 1px solid var(--line); background: var(--bg-2); }
.foot-in {
  max-width: var(--max); margin: 0 auto; padding: 38px var(--pad) 14px;
  display: grid; gap: 28px 32px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense;
}
/* Phone: the name, then the two long lists full width in two columns each,
   then the short site and legal lists side by side. */
.foot-brand, .foot-wide, .foot-browse { grid-column: 1 / -1; }
.foot-browse ul { columns: 2; column-gap: 24px; }
@media (min-width: 800px) {
  .foot-in { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot-browse { grid-column: auto; }
  .foot-browse ul { columns: auto; }
}
@media (min-width: 1100px) {
  .foot-in { grid-template-columns: 1.35fr 1fr 1.7fr 1fr 1fr; }
  .foot-brand, .foot-wide { grid-column: auto; }
}
.foot-brand .logo-word { height: 25px; }
.foot-brand p { margin-top: 12px; max-width: 34ch; color: var(--muted); font-size: .9rem; }
.foot-brand .foot-18 { display: flex; align-items: center; gap: 10px; color: var(--text); }
.foot h2 { font: 600 .9rem/1.2 var(--label); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-bottom: 10px; }
.foot li a, .foot .linkish { display: inline-block; padding: 5px 0; color: var(--text); }
.foot li a:hover { color: var(--crimson); text-decoration: underline; text-underline-offset: 3px; }
.foot-2 { columns: 2; column-gap: 24px; }
/* Tablet: the category list runs the full width, so it can take three columns. */
@media (min-width: 800px) and (max-width: 1099px) { .foot-2 { columns: 3; } }
.foot-base {
  max-width: var(--max); margin: 0 auto; padding: 18px var(--pad) 40px; color: var(--muted); font-size: .85rem;
  display: grid; gap: 10px; border-top: 1px solid var(--line);
}
.foot-base p { max-width: 100ch; }
.foot-base strong { color: var(--text); }
.foot-c { font: 600 .84rem/1.4 var(--label); letter-spacing: .08em; text-transform: uppercase; }
.rta { display: inline-block; padding: 1px 6px; margin-right: 4px; border: 1px solid var(--line-strong); border-radius: var(--r-s); font: 600 .74rem/1.4 var(--label); letter-spacing: .12em; color: var(--text); }

/* The age seal: "18+" inside the O-ring. */
.seal {
  flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  border: 4px solid transparent; background: linear-gradient(var(--bg-2), var(--bg-2)) padding-box, var(--ring) border-box;
  color: var(--text); font: 600 .78rem/1 var(--label); letter-spacing: .02em;
}

/* ---------- age gate ---------- */

/* "gate-off" is what the server gives a verified search crawler in place of
   the gate (render_document, 2026-10-03): nothing here applies to it, as
   with age-ok, but app.js still treats the gate as not passed, so no ad
   loads. */
.gate { display: none; }
html:not(.age-ok):not(.gate-off) { overflow: hidden; }
html:not(.age-ok):not(.gate-off) .gate {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px;
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
  overflow-y: auto;
}
/* Belt and braces for browsers without backdrop-filter. */
html:not(.age-ok):not(.gate-off) main img, html:not(.age-ok):not(.gate-off) .tile img { filter: blur(26px) saturate(.6); }
.gate-box {
  position: relative; width: min(100%, 540px); padding: clamp(24px, 5vw, 40px);
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px;
  box-shadow: var(--float), inset 0 1px 0 rgba(255, 255, 255, .04);
}
.gate .gate-logo { display: flex; align-items: center; gap: 9px; margin: 0 0 26px; color: var(--text); }
.gate-logo .logo-mark { height: 34px; width: auto; }
.gate-logo .logo-word { height: 31px; }
.gate-h { display: flex; align-items: center; gap: 14px; }
.gate h2 { font-size: clamp(2rem, 1.5rem + 2vw, 2.6rem); line-height: 1; }
.gate-h .seal { width: 52px; height: 52px; border-width: 6px; font-size: 1.05rem; }
.gate p { margin-top: 14px; color: var(--muted); }
.gate p strong { color: var(--text); font-weight: 600; }
.gate-go { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.gate-go .btn-main { flex: 1 1 240px; }
.gate-go .btn:not(.btn-main) { flex: 1 1 110px; }
.gate-small { font-size: .84rem; }

/* ---------- consent ---------- */

.consent {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 80; max-width: 520px; margin-left: auto;
  padding: 18px 20px; background: var(--bg-2); border: 1px solid var(--line-strong); border-radius: 6px;
  box-shadow: var(--float);
}
.consent[hidden] { display: none; }
.consent h2 { font-size: 1.35rem; line-height: 1.06; }
.consent p { margin-top: 8px; color: var(--muted); font-size: .9rem; }
.consent-go { display: flex; gap: 10px; margin-top: 14px; }
/* Refusing is exactly as easy as allowing: same size, same row. */
.consent-go .btn { flex: 1; }

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