/* ============================================================
   BestTransPorn
   Palette   ink plum ground, with sky and pink used only where
             something is live, chosen or playing.
   Type      Bricolage Grotesque for headings and the wordmark,
             the system face for everything that is read in bulk.
   Signature the reel strip: a row of frames that lights up as a
             preview plays, echoed in the logo and the active tab.
   ============================================================ */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-var.woff2") format("woff2");
  font-weight: 400 800;
  font-stretch: 100%;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #1b1422;
  --bg-2: #241a2e;
  --bg-3: #30233c;
  --line: #3f2f4e;
  --text: #f4eff7;
  --muted: #b5a8c1;
  --sky: #7fd6ff;
  --pink: #ff8fbf;
  --on-accent: #1b1422;
  --reel: linear-gradient(90deg, var(--sky), var(--pink));
  --shade: rgba(12, 8, 16, .78);

  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --r: 10px;
  --r-s: 6px;
  --gap: clamp(10px, 1.4vw, 18px);
  --pad: clamp(12px, 3vw, 32px);
  --max: 1680px;
  color-scheme: dark;
}

[data-theme="light"] {
  --bg: #fbf7fd;
  --bg-2: #ffffff;
  --bg-3: #f1e8f6;
  --line: #e0d2ea;
  --text: #1f1727;
  --muted: #65566f;
  --sky: #0b78ad;
  --pink: #c9357a;
  --on-accent: #ffffff;
  --shade: rgba(20, 12, 26, .74);
  color-scheme: light;
}

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 72px; }

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; }

:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; border-radius: 4px; }

.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; }

/* ---------- 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); }
.top-in {
  display: flex; align-items: center; gap: 14px;
  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: 9px; flex: none; transition: transform .12s; }
.logo-mark rect { fill: var(--line); transition: fill .15s; transform-box: fill-box; transform-origin: center; }
.logo-mark .f4 { fill: var(--sky); }
.logo-mark .f5 { fill: var(--pink); }
.logo-word { font: 800 1.32rem/1 var(--display); letter-spacing: -.035em; transition: color .15s; }
/* Feedback on the logo (owner's request, 2026-10-01): the bars light up on
   hover, the logo presses in on a click, and the bars ripple until the
   home page arrives. */
.logo:hover .logo-mark .f1, .logo:focus-visible .logo-mark .f1, .logo:hover .logo-mark .f3, .logo:focus-visible .logo-mark .f3 { fill: var(--sky); }
.logo:hover .logo-mark .f2, .logo:focus-visible .logo-mark .f2 { fill: var(--pink); }
.logo:hover .logo-word, .logo:focus-visible .logo-word { color: var(--sky); }
.logo:active { transform: scale(.95); }
.logo.going .logo-mark rect { animation: logo-wave .8s ease-in-out infinite; }
.logo.going .logo-mark .f2 { animation-delay: .1s; }
.logo.going .logo-mark .f3 { animation-delay: .2s; }
.logo.going .logo-mark .f4 { animation-delay: .3s; }
.logo.going .logo-mark .f5 { animation-delay: .4s; }
.logo.going .logo-word { color: var(--sky); }
@keyframes logo-wave { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.4); fill: var(--pink); } }
/* The mark strokes left and right all the time, faster under the pointer
   (owner's request, 2026-10-08; sideways, not up and down, since
   2026-10-10). The word stays still so it can be read.
   Visitors who ask for reduced motion get none (rule at the end of this file). */
.logo-mark { animation: logo-stroke .5s ease-in-out infinite; }
.logo:hover .logo-mark, .logo:focus-visible .logo-mark { animation-duration: .28s; }
/* It also goes fast while the pointer is on a menu item, a sort tab, a
   category or a video (owner's request, 2026-10-08). A rule of its own: a
   browser without :has() drops it and keeps the one above. */
body:has(.nav a:hover, .tab:hover, .chip:hover, .tile:hover, .card:hover) .logo-mark { animation-duration: .28s; }
@keyframes logo-stroke { 0%, 100% { transform: translateX(-4px); } 50% { transform: translateX(4px); } }

.search { position: relative; flex: 1; display: flex; max-width: 640px; margin-inline: auto; }
.search input {
  width: 100%; min-width: 0; height: 42px; padding: 0 46px 0 16px;
  background: var(--bg-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 21px;
  font: inherit; font-size: 1rem;
}
.search input::placeholder { color: var(--muted); }
.search input:focus { outline: none; border-color: var(--sky); }
.search button {
  position: absolute; right: 3px; top: 3px; width: 36px; height: 36px;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  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: 0 18px 40px rgba(0, 0, 0, .45);
}
/* 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; }
.chip-off { opacity: .35; cursor: default; }
.suggest a:hover, .suggest a[aria-selected="true"] { background: var(--bg-3); }
.suggest small { color: var(--muted); margin-left: auto; white-space: nowrap; }

.theme { flex: none; width: 42px; height: 42px; display: grid; place-items: center; background: transparent; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); }
.theme:hover { color: var(--text); border-color: var(--muted); }
/* The heart beside it, phones only (rule below); the badge is the number
   of videos saved in this browser, filled in by app.js. */
.top-fav { display: none; }
.top-fav-n {
  position: absolute; right: -5px; top: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--pink); color: var(--on-accent); font: 700 .68rem/18px var(--body); text-align: center; font-variant-numeric: tabular-nums;
}
.top-fav-n[hidden] { display: none; }

/* On a phone (2026-10-17): the name in a smaller size beside the mark, the
   search box taking what room is left, then the heart and the theme button,
   none of them over another at 320 px. The suggestion list takes the full
   width of the header bar instead of the box's width, and each count sits
   under its name. The search button is in the row, drawn inside the box's
   right end: positioned against the bar (the box is not positioned here, so
   the list can be that wide), it sat on top of the theme button. */
@media (max-width: 600px) {
  .top-in { position: relative; gap: 8px; }
  .top .logo { gap: 7px; }
  .top .logo-word { font-size: 1.05rem; }
  .search { position: static; min-width: 0; }
  .search input { padding: 0 38px 0 14px; }
  .search button { position: relative; right: auto; top: auto; flex: none; margin: 3px 0 0 -39px; }
  .top-fav, .theme { width: 38px; height: 38px; }
  .top-fav { position: relative; flex: none; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); }
  .top-fav:hover, .top-fav[aria-current="page"] { color: var(--pink); border-color: var(--muted); }
  .suggest { left: var(--pad); right: var(--pad); top: calc(100% - 4px); }
  .suggest a { flex-direction: column; align-items: flex-start; gap: 2px; }
  .suggest small { margin-left: 0; }
}
/* Narrower still, a smaller mark; at 380 px and below the name alone, so
   the box keeps room for "Search"; at 340 px and below the box is too short
   for any of the word, so it shows only its button. The age notice's logo
   (.gate-logo) is not the bar's and keeps its size. */
@media (max-width: 400px) { .top .logo { gap: 5px; } .top .logo-mark { width: 30px; height: 16px; } }
@media (max-width: 380px) { .top .logo-mark { display: none; } }
@media (max-width: 340px) { .search input::placeholder { color: transparent; } }

.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 {
  display: block; padding: 10px; white-space: nowrap; color: var(--muted);
  font: 600 .93rem/1.2 var(--display); border-bottom: 3px solid transparent;
}
.nav a:hover { color: var(--text); }
.nav a[aria-current="page"] { color: var(--text); border-image: var(--reel) 1; }
.nav-live::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--pink); vertical-align: 1px; }

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

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

.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 0; color: var(--muted); font-size: .85rem; }
.crumbs li + li::before { content: "/"; margin: 0 8px; color: var(--line); }
.crumbs a:hover { color: var(--text); text-decoration: underline; }

/* The videos are the front page. The masthead says what the site is in one
   breath and gets out of the way. */
.mast { padding: 2px 0 12px; }
.mast h1 { font: 800 clamp(1.3rem, 1rem + 1.3vw, 2rem)/1.08 var(--display); letter-spacing: -.03em; text-wrap: balance; }
.hl { background: var(--reel); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mast-s { margin-top: 6px; color: var(--muted); font-size: .9rem; }
.mast-s strong { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

.head { padding: 12px 0 14px; }
.head h1 { font: 800 clamp(1.4rem, 1rem + 1.7vw, 2.2rem)/1.08 var(--display); letter-spacing: -.03em; text-wrap: balance; }
.head-n { margin-top: 6px; color: var(--muted); 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:not(.btn), .foot-base a { color: var(--sky); text-decoration: underline; text-underline-offset: 2px; }
/* A category's first page on a phone (2026-10-17, listing.php): the
   related categories as one row under the heading, and the intro's first
   two lines with "More" over the end of the second, fading the words under
   it. Open, the whole intro shows and "Less" sits under it. Undoing the
   clamp needs :has(), so a browser without it shows the whole intro and no
   "More", as before. Wider screens get neither the row nor the clamp. */
.rail-rel, .head-x { display: none; }
.head-x summary { display: block; padding: .25em 0; line-height: 1.5; color: var(--sky); font-weight: 600; cursor: pointer; list-style: none; }
.head-x summary::-webkit-details-marker { display: none; }
.head-x summary:hover { text-decoration: underline; }
.head-x[open] .x-more, .head-x:not([open]) .x-less { display: none; }
@media (max-width: 600px) {
  .rail-rel { display: block; margin-top: 12px; }
  @supports selector(:has(*)) {
    .head:has(> .head-x) { position: relative; }
    .head:has(> .head-x:not([open])) > .head-c { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
    .head-x { display: block; }
    /* Its line of text level with the intro's second line: the intro ends
       the header's 14 px of padding above its foot. */
    .head-x:not([open]) { position: absolute; right: 0; bottom: calc(14px - .25em); }
    .head-x:not([open]) summary { padding-left: 3em; background: linear-gradient(90deg, transparent, var(--bg) 2.5em); }
  }
}

.block { margin-top: clamp(28px, 4vw, 48px); }
.block-h { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.block-h h2 { font: 700 clamp(1.15rem, 1rem + .6vw, 1.5rem)/1.15 var(--display); letter-spacing: -.02em; }
.more { color: var(--sky); font-weight: 600; white-space: nowrap; }
.more:hover { text-decoration: underline; }

/* ---------- 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 14px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 18px;
  font-size: .9rem; white-space: nowrap;
}
.chip:hover { border-color: var(--muted); }
.chip-n { color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
.chip-on, .chip-btn[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.chip-on .chip-n { color: inherit; }
.letters, .jump { margin: 4px 0 18px; }
.letters .chip { min-width: 36px; justify-content: center; padding-inline: 10px; }

/* The front-page category row scrolls sideways rather than pushing the videos down. */
.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 16px; }
.tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); flex: 1 1 auto; min-width: 0; }
.tabs::-webkit-scrollbar { display: none; }
.tab { padding: 10px 12px; white-space: nowrap; color: var(--muted); font: 600 .93rem/1.2 var(--display); border-bottom: 3px solid transparent; margin-bottom: -1px; }
.tab:hover { color: var(--text); }
.tab-on { color: var(--text); border-image: var(--reel) 1; }

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

.grid { display: grid; gap: clamp(16px, 2vw, 26px) var(--gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@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. */
.blank { position: absolute; inset: 0; display: block; background: linear-gradient(135deg, hsl(var(--h) 38% 30%), hsl(calc(var(--h) + 40) 45% 18%)); }
.tile .blank { z-index: -2; }
.card-a:hover .thumb img { filter: brightness(1.06); }

.dur, .badges .b, .live {
  position: absolute; padding: 2px 7px; border-radius: 5px;
  font: 600 .74rem/1.45 var(--body); font-variant-numeric: tabular-nums; letter-spacing: .01em;
}
.dur { right: 7px; bottom: 9px; background: var(--shade); color: #fff; }
.badges { position: absolute; left: 7px; top: 7px; display: flex; gap: 5px; }
.badges .b { position: static; background: var(--shade); color: #fff; }
.b-hd { color: #bfeaff !important; }
.b-ai { color: #ffd9a1 !important; }
.b-paid { color: #ffc6de !important; }
.pick-row .pick-img { width: 132px; }
.live { left: 7px; top: 7px; background: var(--pink); color: #1b1422; text-transform: uppercase; letter-spacing: .06em; }
.tag-sp { margin-left: 8px; padding: 2px 7px; border: 1px solid var(--line); border-radius: 5px; color: var(--muted); font: 600 .7rem/1.4 var(--body); letter-spacing: .04em; text-transform: uppercase; vertical-align: 3px; }

/* The reel strip. Empty until a preview starts; one segment per still. */
.scrub { position: absolute; left: 6px; right: 6px; bottom: 4px; display: flex; gap: 2px; height: 3px; opacity: 0; transition: opacity .15s; }
.scrub i { flex: 1; border-radius: 2px; background: rgba(255, 255, 255, .28); }
.scrub i.on { background: var(--reel); background-size: 1500% 100%; background-position: calc(var(--k, 0) * 7.14%) 0; }
.card.playing .scrub { opacity: 1; }

.card-t {
  margin-top: 9px; 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(--sky); }
.card-a:visited .card-t { color: var(--muted); }
.card.seen .thumb::after { content: "Watched"; position: absolute; left: 7px; bottom: 9px; padding: 2px 7px; border-radius: 5px; background: var(--shade); color: #fff; font: 600 .74rem/1.45 var(--body); }

.card-m { margin-top: 4px; padding-right: 58px; color: var(--muted); font-size: .8rem; line-height: 1.4; display: flex; flex-wrap: wrap; gap: 0 6px; }
.card-m > * + *::before { content: "·"; margin-right: 6px; }
.m-src { color: inherit; font-weight: inherit; }
.m-src:hover { color: var(--text); text-decoration: underline; }
.m-rate { font-variant-numeric: tabular-nums; }

.card-x { position: absolute; right: -4px; bottom: -6px; 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(--pink); }
.x-fav[aria-pressed="true"] .i { fill: currentColor; }

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

/* ---------- 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: 12px; 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(12, 8, 16, .92) 8%, rgba(12, 8, 16, .25) 60%, rgba(12, 8, 16, .05)); }
.tile-t { font: 700 1.02rem/1.15 var(--display); letter-spacing: -.01em; }
.tile-n { font-size: .78rem; opacity: .82; font-variant-numeric: tabular-nums; }
.tile:hover img { filter: brightness(1.1); }
.tile:hover .tile-t { text-decoration: underline; text-decoration-color: var(--pink); text-underline-offset: 3px; }

/* ---------- 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; }
.pg { min-width: 44px; height: 44px; padding: 0 14px; display: inline-grid; place-items: center; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--bg-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.pg:hover { border-color: var(--muted); }
.pg-on { background: var(--text); color: var(--bg); border-color: var(--text); }
.pg-gap { align-self: center; color: var(--muted); }
.pg-next { background: var(--text); color: var(--bg); 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 h2, .note h1, .note h2 { font: 700 1.4rem/1.15 var(--display); letter-spacing: -.02em; 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: 74ch; padding-top: 10px; }
.prose-wide { max-width: 1200px; }
.prose h1 { font: 800 clamp(1.6rem, 1.1rem + 2vw, 2.4rem)/1.08 var(--display); letter-spacing: -.03em; text-wrap: balance; }
.prose h2 { font: 700 1.3rem/1.2 var(--display); letter-spacing: -.02em; margin-top: 34px; }
.prose h3 { font: 700 1.05rem/1.3 var(--display); 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 + li { margin-top: 6px; }
.prose-d { color: var(--muted); font-size: .9rem; }
.prose address { font-style: normal; margin-top: 12px; padding: 14px 16px; background: var(--bg-2); border-left: 3px solid var(--sky); border-radius: 0 var(--r-s) var(--r-s) 0; }

/* The advertise page: wider than a legal page, text kept to reading width. */
.prose-kit { max-width: 1040px; }
.prose-kit > p, .prose-kit > ul:not(.stats), .prose-kit > ol:not(.steps), .prose-kit > details, .prose-kit > h3 { max-width: 74ch; }
/* On a phone the spec table scrolls sideways rather than breaking words. */
.prose-kit .tbl table { min-width: 640px; }
.prose-kit .tbl td:first-child { white-space: nowrap; }
.kit-hero { margin-top: 16px; padding: clamp(18px, 3vw, 28px); border: 1px solid var(--line); border-radius: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--sky) 8%, var(--bg-2)), color-mix(in srgb, var(--pink) 10%, var(--bg-2))); }
.kit-hero p { max-width: 70ch; }
.kit-hero > p:first-child { margin-top: 0; font-size: 1.08rem; }
.kit-go { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.kit-new { padding: 12px 16px; border-left: 3px solid var(--sky); background: var(--bg-2); border-radius: 0 var(--r-s) var(--r-s) 0; }
.slots { display: grid; gap: 14px; margin-top: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }
.slot { padding: 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-2); }
.slot h3 { margin-top: 12px; }
.slot p { margin-top: 6px; font-size: .92rem; }
.slot-pic svg { display: block; width: 100%; height: auto; max-height: 150px; }
.sk-bg { fill: var(--bg-3); }
.sk-ui { fill: var(--line); }
.sk-card { fill: var(--line); opacity: .55; }
.sk-hot { fill: var(--pink); }
.sk-edge { fill: none; stroke: var(--line); stroke-width: 1.5; }
.prose .slot-f { list-style: none; padding: 0; margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.prose .slot-f li { margin: 0; padding: 2px 8px; border: 1px solid var(--line); border-radius: 5px; color: var(--muted); font-size: .78rem; }
.prose .steps { list-style: none; padding: 0; counter-reset: step; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.prose .steps li { margin: 0; padding: 14px 16px 14px 52px; position: relative; counter-increment: step; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-2); }
.prose .steps li::before { content: counter(step); position: absolute; left: 14px; top: 13px; width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 50%; background: var(--pink); color: var(--on-accent); font: 800 .85rem/1 var(--display); }
.prose details { margin-top: 8px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--bg-2); }
.prose summary { cursor: pointer; padding: 12px 14px; font-weight: 600; }
.prose details[open] summary { border-bottom: 1px solid var(--line); }
.prose details > :not(summary) { margin: 10px 14px 12px; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 20px; border: 1px solid var(--line); border-radius: 23px; background: var(--bg-2); font-weight: 600; }
.btn:hover { border-color: var(--muted); }
.btn-main { background: var(--text); color: var(--bg); border-color: var(--text); }
.btn-main:hover { opacity: .9; }
.btn-s { min-height: 32px; padding: 0 12px; font-size: .82rem; }
.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); border-radius: var(--r-s); font: inherit; font-size: 1rem;
}
.form input:focus, .form textarea:focus { outline: none; border-color: var(--sky); }
.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(--pink); 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(--pink); }
.form-about span { display: block; color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }
.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); 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(--pink); }

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

.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: 800 1.5rem/1.1 var(--display); 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-weight: 600; font-size: .8rem; 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; }

/* ---------- ads ----------
   A slot has a fixed height before its ad arrives, so the page never
   jumps when one does. */

.ad { position: relative; display: grid; place-items: center; margin: 18px auto; max-width: 100%; overflow: hidden; }
/* Every ad says it is one (the label sits above anything the network draws:
   ExoClick's native picture has its own z-index 2). The EU's Digital Services Act asks for this and
   ExoClick's publisher rules require it; it also keeps visitors' trust. */
.ad[data-filled]::before {
  content: "Ad"; position: absolute; left: 6px; top: 6px; z-index: 5; padding: 1px 6px; border-radius: 4px;
  background: var(--shade); color: #fff; font: 600 .68rem/1.5 var(--body); letter-spacing: .04em; pointer-events: none;
}
.ad-top, .ad-footer { min-height: 90px; max-width: min(100%, 970px); padding-inline: var(--pad); }
.ad-mid { min-height: 250px; margin-top: 40px; }
.ad-sticky { display: none; }
.card-ad { margin: 0; aspect-ratio: auto; align-self: stretch; min-height: 0; border-radius: var(--r); }
.ad-empty { border: 1px dashed var(--line); border-radius: var(--r); color: var(--muted); font-size: .8rem; }
.ad-empty.ad-top, .ad-empty.ad-footer { margin-inline: auto; width: min(100% - var(--pad) * 2, 728px); padding: 0; }
.ad-empty.ad-mid { width: 300px; }
.ad-ph { padding: 8px; text-align: center; }
/* A visitor who refused ads (or whose browser sends Global Privacy Control)
   gets none: the boxes kept for them fold away. Our own notices stay. */
.ads-off .ad:not(.ad-house) { display: none !important; }
/* Off the front page, a native cell no ad can fill (app.js, 2026-10-23)
   folds only while it is below the screen: out of the page, so the cards
   close up, and never filled (no ad is drawn where nobody can see it).
   One left on the screen keeps its place and has no "Ad" label once the
   network's script has failed. The front page is held: neither applies
   there. */
body:not(.k-home) .ad-native[data-fold] { display: none; }
body:not(.k-home) .ad-native[data-dead]::before { content: none; }
/* A network ad in the grid: the card takes the ad's own height. ExoClick's
   native widget (its "Recommendation Widget", 1 x 1) draws itself 800 px
   wide with black titles on a fixed text block and its own stylesheet; in a
   card it takes the card's width, the site's type and colours in either
   theme, and a text block only as tall as its lines. */
.ad-native[data-filled] { display: block; overflow: visible; }
.ad-native .exo-native-widget { display: flex !important; width: 100% !important; }
/* The widget sizes itself to the advertiser's picture, so a small picture
   left a 100 px ad adrift in the card (seen 2026-10-07). Every box from the
   slot down to the picture takes the card's full width instead. */
.ad-native[data-filled] > div, .ad-native[data-filled] > div > div { display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; }
.ad-native .exo-native-widget-outer-container { width: 100% !important; max-width: none !important; margin: 0 !important; }
.ad-native .exo-native-widget-item-container { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; padding: 0 !important; }
.ad-native .exo-native-widget-item { width: 100% !important; max-width: 100% !important; margin: 0 !important; }
.ad-native .exo-native-widget-header:empty { display: none !important; }
.ad-native .exo-native-widget-item-content { height: auto !important; max-height: none !important; padding: 9px 0 0 !important; }
.ad-native .exo-native-widget-item-content-box { position: static !important; }
.ad-native .exo-native-widget-item-title {
  color: var(--text) !important; font: 500 .92rem/1.32 var(--body) !important;
  display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.ad-native .exo-native-widget-item:hover .exo-native-widget-item-title { color: var(--sky) !important; }
.ad-native .exo-native-widget-item-brand {
  margin-top: 4px; color: var(--muted) !important; font: 400 .8rem/1.4 var(--body) !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Our own "Advertise here" notice, in spots no ad has been sold for yet. */
.house {
  justify-self: stretch; align-self: stretch; display: grid; place-content: center; gap: 4px; padding: 12px 16px; text-align: center;
  border: 1px dashed var(--line); border-radius: var(--r); color: var(--text);
  background: linear-gradient(135deg, color-mix(in srgb, var(--sky) 9%, var(--bg-2)), color-mix(in srgb, var(--pink) 12%, var(--bg-2)));
}
.house:hover, .house:focus-visible { border-color: var(--pink); }
.house-k { font: 800 1.05rem/1.1 var(--display); letter-spacing: -.01em; }
.house-t { font-size: .9rem; line-height: 1.35; }
.house-s { color: var(--muted); font-size: .78rem; overflow-wrap: anywhere; }
.ad-house.ad-top, .ad-house.ad-footer { width: min(100% - var(--pad) * 2, 728px); padding: 0; }
.ad-house.ad-mid { width: min(100% - var(--pad) * 2, 300px); height: 250px; }
/* In the grid: shaped like a video card, but plainly not one. */
.ad-house.card-ad { display: block; }
.ad-house.card-ad .house { display: block; padding: 0; border: 0; background: none; text-align: left; }
.ad-house.card-ad .house-k {
  display: grid; place-items: center; aspect-ratio: 16 / 9; border: 1px dashed var(--line); border-radius: var(--r);
  background: linear-gradient(135deg, color-mix(in srgb, var(--sky) 9%, var(--bg-2)), color-mix(in srgb, var(--pink) 12%, var(--bg-2)));
}
.ad-house.card-ad .house:hover .house-k, .ad-house.card-ad .house:focus-visible .house-k { border-color: var(--pink); }
.ad-house.card-ad .house-t { display: block; margin-top: 9px; font: 500 .92rem/1.32 var(--body); }
.ad-house.card-ad .house-s { display: block; margin-top: 4px; }
/* The phone bar: one line, "Advertise here" and the address. */
.ad-house.ad-sticky .house {
  display: flex; align-items: center; justify-content: center; gap: 10px; height: 100%; padding: 0 12px;
  border: 0; border-radius: 0; white-space: nowrap;
}
.ad-house.ad-sticky .house-k { flex: none; font-size: 1rem; }
.ad-house.ad-sticky .house-t { display: none; }
.ad-house.ad-sticky .house-s { min-width: 0; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
@media (max-width: 760px) {
  /* Nothing above the heading and first row on a phone: that space decides
     whether the visitor stays, and it is where Google measures page speed. */
  .ad-top { display: none; }
  .ad-footer { min-height: 100px; }
  .ad-sticky.ad-house, .ad-sticky[data-filled] { display: grid; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; margin: 0; min-height: 50px; background: var(--bg); border-top: 1px solid var(--line); }
  body:has(.ad-sticky.ad-house, .ad-sticky[data-filled]) { padding-bottom: 54px; }
}

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

.foot { margin-top: 40px; border-top: 1px solid var(--line); background: var(--bg-2); }
.foot-in { max-width: var(--max); margin: 0 auto; padding: 36px var(--pad) 12px; display: grid; gap: 28px 32px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 800px) { .foot-in { grid-template-columns: 1fr 2fr 1fr 1fr; } }
.foot-wide { grid-column: 1 / -1; }
@media (min-width: 800px) { .foot-wide { grid-column: auto; } }
.foot h2 { font: 700 .82rem/1.2 var(--display); text-transform: uppercase; letter-spacing: .09em; color: var(--muted); margin-bottom: 10px; }
.foot li a, .foot .linkish { display: inline-block; padding: 5px 0; color: var(--text); }
.foot li a:hover { text-decoration: underline; }
.foot-2 { columns: 2; column-gap: 24px; }
.foot-base { max-width: var(--max); margin: 0 auto; padding: 18px var(--pad) 40px; color: var(--muted); font-size: .85rem; display: grid; gap: 10px; }
.foot-base p { max-width: 96ch; }
.foot-base strong { color: var(--text); }
.rta { display: inline-block; padding: 1px 6px; margin-right: 4px; border: 1px solid var(--muted); border-radius: 4px; font: 700 .72rem/1.5 var(--display); letter-spacing: .08em; color: var(--text); }

/* ---------- pop-up player ----------
   A video from a site that publishes an embed player opens here, over the
   page, instead of in a new tab. Built by js/app.js; without it a card is
   the plain link it always was. The video area is black in both themes. */

html.player-open { overflow: hidden; overscroll-behavior: none; }
/* The box is centred by its own auto margins, not by the grid: when it is
   taller than the screen (a small phone on its side, or large text) it then
   starts at the top and scrolls, instead of losing its title and Close
   button above the edge. */
.player {
  position: fixed; inset: 0; z-index: 85; display: grid;
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  background: var(--shade); overflow-y: auto; overscroll-behavior: contain;
}
.player[hidden] { display: none; }
/* As wide as the screen allows, but never so wide that the 16:9 video and
   the rows around it (about 190px) would be taller than the screen. */
.player-box {
  margin: auto;
  width: min(100%, 1120px, calc((100vh - 190px) * 16 / 9));
  width: min(100%, 1120px, calc((100dvh - 190px) * 16 / 9));
  min-width: min(100%, 300px); overflow: hidden;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
.player-top { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; }
.player-t { flex: 1; min-width: 0; font: 700 1rem/1.25 var(--display); letter-spacing: -.01em;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.player-x { flex: none; width: 42px; height: 42px; display: grid; place-items: center; background: transparent; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); }
.player-x:hover { color: var(--text); border-color: var(--muted); }
.player-stage { position: relative; aspect-ratio: 16 / 9; background: #000; }
/* The picture is shown whole and as the source serves it: no crop, no filter. */
.player-poster, .player-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player-poster { object-fit: contain; }
.player-go { position: absolute; inset: 0; display: grid; place-items: center; background: transparent; border: 0; color: var(--on-accent); }
.player-go-i { width: 76px; height: 76px; display: grid; place-items: center; border-radius: 50%; background: var(--reel); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); transition: transform .12s; }
.player-go-i .i { width: 34px; height: 34px; margin-left: 4px; fill: currentColor; stroke: none; }
.player-go:hover .player-go-i { transform: scale(1.06); }
.player-go:focus-visible { outline: none; }
/* White ring with a dark one under it: the picture behind may be light. */
.player-go:focus-visible .player-go-i { outline: 2px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 5px rgba(0, 0, 0, .6), 0 10px 30px rgba(0, 0, 0, .5); }
/* Asking the server. Dimmed first, so the press shows where motion is
   switched off; the pulse is extra. */
.player-go[aria-busy="true"] .player-go-i { opacity: .55; animation: player-wait .9s ease-in-out infinite; }
@keyframes player-wait { 50% { opacity: 1; } }
/* Under the frame, never over it. */
.player-wait, .player-gone { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; text-align: center; color: #fff; }
.player-wait { color: rgba(255, 255, 255, .75); font-size: .9rem; }
.player-gone:focus { outline: none; }
.player-note { padding: 10px 16px 0; color: var(--muted); font-size: .85rem; }
.player-note[hidden] { display: none; }
.player-more { color: var(--sky); text-decoration: underline; white-space: nowrap; }
.player-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding: 6px 16px 12px; font-size: .88rem; }
.player-keep { display: flex; align-items: center; gap: 8px; min-height: 36px; margin-right: auto; color: var(--muted); cursor: pointer; }
.player-keep[hidden] { display: none; }
.player-keep input { flex: none; width: 18px; height: 18px; accent-color: var(--pink); }
.player-out, .player-flag { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; }
.player-out { color: var(--sky); font-weight: 600; }
.player-out:hover { text-decoration: underline; }
.player-flag { color: var(--muted); }
.player-flag:hover { color: var(--text); }
.player-out .i, .player-flag .i { width: 17px; height: 17px; }
/* Fingers: bigger targets, and Report (which leaves the page and ends the
   video) at the far end of its row, away from "Open on". */
@media (pointer: coarse) {
  .player-keep, .player-out, .player-flag { min-height: 44px; }
  .player-flag { margin-left: auto; }
}

/* A phone on its side: the video takes the height, the words sit beside it. */
@media (orientation: landscape) and (max-height: 520px) {
  .player-box { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) clamp(170px, 26vw, 240px); grid-template-rows: auto auto 1fr; }
  .player-stage { grid-column: 1; grid-row: 1 / -1; align-self: center; justify-self: center; width: min(100%, calc((100vh - 18px) * 16 / 9)); width: min(100%, calc((100dvh - 18px) * 16 / 9)); }
  .player-top { grid-column: 2; grid-row: 1; align-items: flex-start; padding: 6px 6px 0 12px; }
  .player-t { font-size: .9rem; }
  .player-note { grid-column: 2; grid-row: 2; padding: 6px 12px 0; font-size: .78rem; }
  .player-bar { grid-column: 2; grid-row: 3; flex-direction: column; align-items: flex-start; align-content: start; padding: 8px 12px; }
  .player-flag { margin-left: 0; }
}

/* The line in "Cookie choices" that lists players set to load right away. */
.consent-play { font-size: .85rem; }
.consent-play[hidden] { display: none; }
.consent-play .linkish { color: var(--sky); text-decoration: underline; }

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

/* "gate-off" is what the server gives a verified Google crawler in place of
   the notice (2026-10-17, gate_skipped() in region.php): no overlay, no
   scroll lock, no blur. It is not "age-ok": app.js starts nothing on it. */
.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: 20px;
  background: color-mix(in srgb, var(--bg) 86%, 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 { width: min(100%, 520px); padding: clamp(22px, 5vw, 38px); background: var(--bg-2); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.gate-logo { display: flex; align-items: center; gap: 9px; margin-bottom: 20px; }
.gate h2 { font: 800 1.9rem/1.05 var(--display); letter-spacing: -.03em; }
.gate p { margin-top: 12px; color: var(--muted); }
.gate-go { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.gate-go .btn-main { flex: 1 1 220px; }
.gate-small { font-size: .82rem; }
.gate-small a { color: var(--sky); text-decoration: underline; }

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

.consent {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 80; max-width: 560px; margin-left: auto;
  padding: 18px 20px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
}
.consent[hidden] { display: none; }
.consent h2 { font: 700 1.1rem/1.2 var(--display); }
.consent p { margin-top: 8px; color: var(--muted); font-size: .9rem; }
.consent a { color: var(--sky); text-decoration: underline; }
.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; }
}