/* Inter, self-hosted (assets/fonts, OFL; preloaded in inc/setup.php): Latin letters, digits and basic
   punctuation only (unicode-range), so Japanese always falls through to the gothic stack below. */
@font-face {
  font-family: "Inter Choice";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/inter-latin-var.woff2) format("woff2-variations"), url(../fonts/inter-latin-var.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Light theme: white is the main colour; the red accent marks what matters (CTA, current item, focus). */
  --bg: #fff;
  --surface: #fff;            /* cards, header, sheets */
  --surface-2: #f3f4f6;       /* quiet fills: hover, image placeholders */
  --surface-soft: #f9fafb;    /* panels on the white page (genre search, footer) */
  --border: #e5e7eb;
  --border-strong: #d1d5db;
  --hairline: #eceef1;        /* header / side nav edges: lighter than card borders */
  --text: #1f2328;
  --text-nav: #3d434b;        /* side nav rows: a step softer than body text */
  --text-muted: #6b7280;
  /* Catalogue type: Inter for Latin and digits, then the device's Japanese gothic, Noto Sans JP first
     (Android, Linux, Windows with it installed), Hiragino on Apple, BIZ UDPGothic / Yu Gothic / Meiryo on Windows. */
  --font-sans: "Inter Choice", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", "Yu Gothic", "YuGothic", Meiryo, system-ui, sans-serif;
  --weight-body: 400;
  --weight-ui: 500;           /* nav, buttons, chips */
  --weight-heading: 700;
  --text-subtle: #9ca3af;
  --accent: #e5484d;          /* filled CTA, indicators, borders, focus rings */
  --accent-hover: #b5323a;
  --accent-strong: #cf3b40;   /* filled buttons/badges with white text (4.6:1) */
  --accent-ink: #c4353a;      /* the accent as small text on white (>= 4.5:1) */
  --accent-soft: #fdeced;     /* selected / hover tint */
  --accent-text: #fff;
  --overlay-ink: #fff;        /* text on dark image overlays (duration, rank, Shorts info) */
  --badge-new: #1f7a52;
  --badge-sale: #c2412b;
  --badge-trending: #6a48f5;
  --badge-label-rank: #b45309; /* レーベル内N位: amber, white text 5:1 */
  --shadow-sm: 0 1px 2px rgb(17 24 39 / 0.04);
  --shadow-header: 0 1px 0 rgb(17 24 39 / 0.02), 0 4px 14px -6px rgb(17 24 39 / 0.08);
  --shadow-hover: 0 4px 12px rgb(17 24 39 / 0.08);
  --radius: 8px;
  --cols: 4;                  /* .video-grid columns; set per breakpoint (Responsive section) */
  --grid-gap-x: 14px;
  --grid-gap-y: 18px;
  --header-h: 64px;
  --site-disclosure-h: 27px; /* .site-disclosure: 18px line + 8px padding + 1px border; kept out of the Shorts height */
  --sidenav-w: 200px;
  --bottomnav-h: 56px;
  --gutter: 16px;
  /* Search box: a soft grey field at rest (clearly an input, not loud), white with a red ring when in use. */
  --search-bg: #f5f6f8;
  --search-border: #e1e4e8;
  --search-border-hover: #c4c9d0;
  --search-icon: #374151;
  --search-button-hover: #e5e7eb;
  color-scheme: light;
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: var(--weight-body) 15px/1.6 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Headings: firm, a touch of proportional kana spacing so short Japanese titles sit tight. */
h1,
h2,
h3 {
  font-weight: var(--weight-heading);
  font-feature-settings: "palt" 1;
  letter-spacing: 0.02em;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img,
video {
  display: block;
  max-width: 100%;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: -9999px;
}

.skip-link:focus {
  left: var(--gutter);
  top: 8px;
  z-index: 100;
  padding: 8px 12px;
  background: var(--surface-2);
  border-radius: 8px;
}

.icon {
  width: 22px;
  height: 22px;
  fill: currentColor;
  flex: none;
}

/* ---------- Age gate (template-parts/age-gate.php, age-gate.js) ----------
   Shown only while <html> has .age-pending (set in <head> without the age cookie). The page under it
   is the normal page, dimmed and blurred; nothing is removed from it. */
.age-gate {
  display: none;
}

.age-pending .age-gate {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px var(--gutter);
  background: rgb(255 255 255 / 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.age-pending,
.age-pending body {
  overflow: hidden;
}

.age-gate [hidden] {
  display: none;
}

.age-gate__card {
  width: 100%;
  max-width: 360px;
  padding: 28px 24px 24px;
  border: 1px solid var(--border);
  border-top: 4px solid var(--accent);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 12px 32px rgb(17 24 39 / 0.14);
  text-align: center;
}

.age-gate__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  font-weight: 700;
}

.age-gate__brand .brand__mark {
  width: 26px;
  height: 26px;
}

.age-gate__title {
  margin: 0 0 8px;
  font-size: 18px;
}

.age-gate__text,
.age-gate__denied {
  margin: 0;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.6;
}

.age-gate__denied {
  color: var(--text);
}

.age-gate__denied:focus {
  outline: none;
}

.age-gate__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 14px;
  margin: 18px 0 0;
  font-size: 12px;
}

.age-gate__links a {
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.age-gate__actions {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}

.age-gate__yes,
.age-gate__no {
  min-height: 48px;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.age-gate__yes {
  border: 0;
  background: var(--accent-strong);
  color: var(--accent-text);
}

.age-gate__yes:hover {
  background: var(--accent-hover);
}

.age-gate__no {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-weight: 400;
}

.age-gate__no:hover {
  border-color: var(--search-border-hover);
  color: var(--text);
}

/* No JS: no gate, just a plain notice above the page. */
.age-notice {
  margin: 0;
  padding: 8px var(--gutter);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 12px;
  text-align: center;
}

/* ---------- Header ---------- */

/*
 * Header + ad line as one sticky block: the masthead and .site-disclosure scroll (and stick) together, so the ad
 * line can never end up scrolled away under the header. 56px + 27px tall (--header-h + --site-disclosure-h).
 */
.site-top {
  position: sticky;
  top: 0;
  z-index: 20;
}

.masthead {
  position: relative; /* the containing block for its absolutely positioned parts (search suggestions); sticky is .site-top's */
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--header-h);
  /* viewport-fit=cover: keep clear of the notch in landscape. */
  padding: 0 max(calc(var(--gutter) + 8px), env(safe-area-inset-right)) 0 max(calc(var(--gutter) + 4px), env(safe-area-inset-left));
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--hairline);
  box-shadow: var(--shadow-header);
}

.brand {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
  min-width: calc(var(--sidenav-w) - var(--gutter) - 4px);
  white-space: nowrap;
}

.brand:hover {
  text-decoration: none;
}

/* Logo: two catalogue cards, the front (red) one checked; the name beside it, 素人 in the same red. */
.brand__mark {
  display: block;
  flex: none;
  width: 32px;
  height: 32px;
}

.brand__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.brand__name {
  color: var(--text);
  font-size: 20px;
  font-weight: 800;
  font-feature-settings: "palt" 1;
  letter-spacing: 0.05em;
  line-height: 1;
}

.brand__accent {
  color: var(--accent-strong);
}

/* 素人作品カタログ: small, spaced out, grey; says "catalogue" without competing with the name. */
.brand__tagline {
  color: var(--text-subtle);
  font-size: 10px;
  font-weight: var(--weight-ui);
  letter-spacing: 0.22em;
  line-height: 1;
}

/* PC: one quiet action at the right end of the header. */
.masthead__action {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text-nav);
  font-size: 13px;
  font-weight: var(--weight-ui);
  white-space: nowrap;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.masthead__action .icon {
  width: 17px;
  height: 17px;
  color: var(--accent);
}

.masthead__action:hover {
  border-color: var(--border-strong);
  background: var(--surface-soft);
  color: var(--text);
  text-decoration: none;
}

.masthead__action[aria-current="page"] {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: var(--accent-soft);
  color: var(--accent-ink);
  text-decoration: none;
}

/* 探す sheet (#explore, header.php). On PC it is invisible plumbing: both wrappers are
   display: contents, so form.search lays out in the header exactly as a direct child would;
   the rest of the sheet and the phone search icon are not rendered. Phones: see the 760px block. */
.masthead__search,
.explore__backdrop,
.explore__head,
.explore__menu {
  display: none;
}

.explore,
.explore__sheet {
  display: contents;
}

/* form.search: WordPress also puts "search" on <body> of result pages. */
/* The search is the header's main element: wide, a little taller, a firmer border. */
form.search {
  position: relative;
  display: flex;
  flex: 1;
  min-width: 0;
  max-width: 640px;
  margin-inline: auto;
}

/* A soft grey field with a small red button inside (EC-style): readable at rest, never louder than the logo. */
.search__box {
  display: flex;
  flex: 1;
  align-items: center;
  min-width: 0;
  height: 44px;
  padding: 4px;
  border: 1px solid var(--search-border);
  border-radius: 12px;
  background: var(--search-bg);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.search__box:hover {
  border-color: var(--search-border-hover);
}

/* The ring goes round the whole control, whether the input or the button has focus. */
.search__box:focus-within {
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}

.search__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14px;
}

.search__input::placeholder {
  color: #8a9099;
  opacity: 1;
}

.search__input:focus-visible,
.search__button:focus-visible {
  outline: none; /* shown by .search__box:focus-within instead */
}

.search__button {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 100%;
  border: 0;
  border-radius: 8px;
  background: var(--accent-strong);
  color: var(--accent-text);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.search__button .icon {
  width: 18px;
  height: 18px;
}

.search__button:hover,
.search__button:focus-visible {
  background: var(--accent-hover);
  color: var(--accent-text);
}

/* Search suggestions (search.js) */
.suggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 40;
  max-height: min(70vh, 520px);
  overflow-y: auto;
  padding: 6px 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 10px 28px rgb(17 24 39 / 0.12);
}

.suggest__heading {
  padding: 8px 16px 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.suggest__option {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 16px;
  overflow-wrap: anywhere;
}

.suggest__option:hover,
.suggest__option[aria-selected="true"] {
  background: var(--accent-soft);
  text-decoration: none;
}

/* 品番 search: 【SMUK-345】title, the label on a second quiet line. */
.suggest__option--work {
  flex-direction: column;
  gap: 1px;
}

.suggest__code {
  margin-right: 2px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.suggest__brand {
  color: var(--text-muted);
  font-size: 12px;
}

.suggest__count {
  flex: none;
  color: var(--text-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* ---------- Layout ---------- */

.layout {
  display: grid;
  grid-template-columns: var(--sidenav-w) minmax(0, 1fr);
}

/*
 * 「広告｜当サイトはアフィリエイト広告を利用しています。」 under the header on every page: small but plainly
 * readable. It sticks with the masthead as part of .site-top.
 */
.site-disclosure {
  min-height: var(--site-disclosure-h);
  margin: 0;
  padding: 4px var(--gutter);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  overflow-wrap: anywhere;
}

.site-disclosure__label {
  color: var(--text);
  font-weight: 700;
}

.site-disclosure a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.site-disclosure a:hover,
.site-disclosure a:focus-visible {
  color: var(--text);
}

/* Sticks below .site-top (masthead + ad line), filling the rest of the viewport. */
/* Main routes only (genres are found on the front page and /genres/); compact rows. */
.sidenav {
  border-right: 1px solid var(--hairline);
  position: sticky;
  top: calc(var(--header-h) + var(--site-disclosure-h));
  height: calc(100vh - var(--header-h) - var(--site-disclosure-h));
  overflow-y: auto;
  padding: 16px 12px;
}

.sidenav__list {
  display: grid;
  gap: 2px;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
}

/* The genre entrance under a hairline, like any other row. */
.sidenav__list--entry {
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
}

.sidenav__link {
  position: relative; /* the current row's accent bar */
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--text-nav);
  font-size: 14px;
  font-weight: var(--weight-ui);
  letter-spacing: 0.02em;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.sidenav__link .icon {
  width: 19px;
  height: 19px;
  color: #8a9099;
  transition: color 0.15s ease;
}

.sidenav__link:hover {
  background: var(--surface-soft);
  color: var(--text);
  text-decoration: none;
}

.sidenav__link:hover .icon {
  color: var(--text-nav);
}

/* Current page: a pale red tint, a short red bar on the left, red label and icon. */
.sidenav__link[aria-current="page"] {
  background: color-mix(in srgb, var(--accent-soft) 70%, var(--surface));
  color: var(--accent-ink);
  font-weight: var(--weight-heading);
  text-decoration: none;
}

.sidenav__link[aria-current="page"] .icon {
  color: var(--accent);
}

.sidenav__link[aria-current="page"]::before {
  content: "";
  position: absolute;
  top: 9px;
  bottom: 9px;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
}

/* ジャンルから探す: an ordinary row (no box), so it sits with the list instead of floating. */
.sidenav__link.sidenav__link--entry {
  margin-bottom: 8px;
}

.content {
  min-width: 0;
  padding: 20px 24px 48px;
}

.bottomnav {
  display: none;
}

/* ---------- Shelves & grid ---------- */

.shelf + .shelf {
  margin-top: 30px;
}

/* 注目メーカー / 人気ジャンル: chip rows, closer together. */
.shelf--discover + .shelf--discover {
  margin-top: 20px;
}

/* 最近見た作品 stays hidden without history; it must not push the next shelf down. */
.shelf[hidden] + .shelf {
  margin-top: 0;
}

.shelf__title,
.page-header__title {
  margin: 0 0 12px;
  font-size: 20px;
  line-height: 1.35;
}

/* Section headings: a slim rounded red bar on the left; the text itself stays dark. */
.shelf__title {
  position: relative;
  padding-left: 12px;
  font-size: 18px;
}

.shelf__title::before {
  content: "";
  position: absolute;
  top: 0.18em;
  bottom: 0.18em;
  left: 0;
  width: 3px;
  border-radius: 3px;
  background: var(--accent);
}

.page-header {
  margin-bottom: 16px;
}

.page-header__desc {
  color: var(--text-muted);
}

/* Maker / genre archive facts (template-parts/term-summary.php): one quiet row under the h1, wraps on phones. */
.term-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: -6px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
}

.term-summary__item {
  min-width: 0;
  overflow-wrap: anywhere;
}

.term-summary strong {
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.term-summary a {
  color: var(--text);
}

/* Square-cover cards: --cols per breakpoint (Responsive section); two a row on phones. */
.video-grid {
  display: grid;
  gap: var(--grid-gap-y) var(--grid-gap-x);
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
}

.empty {
  color: var(--text-muted);
}

/* ---------- Discovery chips (front page 注目メーカー / 人気ジャンル) ---------- */

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Maker: name + work count in one rounded chip. */
.maker-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  max-width: 260px;
  min-height: 40px;
  padding: 9px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.maker-chip__name {
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.maker-chip__count {
  flex: none;
  color: var(--text-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* Genre: a plain pill. */
.genre-pill {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.maker-chip:hover,
.genre-pill:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-ink);
  text-decoration: none;
}

.maker-chip:active,
.genre-pill:active {
  border-color: var(--accent-strong);
  background: var(--accent-strong);
  color: var(--accent-text);
}

.maker-chip:active .maker-chip__count {
  color: inherit;
}

/* ---------- Makers (メーカーから探す, /makers/) ---------- */

.maker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.maker-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.maker-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-hover);
  text-decoration: none;
}

/* Long maker names wrap (even without spaces) and stop at two lines; the full name is in title. */
.maker-card__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.maker-card__count {
  color: var(--text-muted);
  font-size: 13px;
}

/* ---------- VideoCard ----------
   A product-style card for FANZA's square covers: white, a thin border, a light lift on hover. */

.video-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.video-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-hover);
}

.video-card__thumb {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--surface-2);
}

.video-card__thumb img,
.video-card__thumb video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-card__thumb video {
  opacity: 0;
  transition: opacity 0.2s;
}

.video-card__thumb video.is-playing {
  opacity: 1;
}

.video-card__duration {
  position: absolute;
  right: 6px;
  bottom: 6px;
  z-index: 1;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgb(17 24 39 / 0.78);
  color: var(--overlay-ink);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.video-card__badges {
  position: absolute;
  left: 6px;
  top: 6px;
  z-index: 1;
  display: flex;
  gap: 4px;
}

.badge {
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}

.badge--new { background: var(--badge-new); }
.badge--sale { background: var(--badge-sale); }
.badge--trending { background: var(--badge-trending); }
.badge--label-rank { background: var(--badge-label-rank); }

.video-card__body {
  padding: 8px 10px 10px;
}

.video-card__title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
}

.video-card__title a:hover {
  color: var(--accent-ink);
  text-decoration: none;
}

/* Clamp the link itself, so the clipped lines don't stay clickable over the names below. */
.video-card__title a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.video-card__meta {
  /* Keeps the name links' 24px target area clear of the title link (WCAG 2.5.8). */
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--text-muted);
  /* Several or very long names: one line, so cards in a row stay aligned. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Maker first, then the names, on the one line above (cut with …). */
.video-card__maker {
  color: var(--text);
}

.video-card__maker + .video-card__names::before {
  content: "・";
  color: var(--text-subtle);
}

/* メーカー品番 (search results, label pages only): small, quiet, never louder than the title. */
.video-card__code {
  margin: 3px 0 0;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-card__code + .video-card__meta {
  margin-top: 2px;
}

/* 関連作品 only: why the work is related (同じシリーズ, …). Plain muted text, below the names. */
.video-card__reason {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Watch page ---------- */

.watch {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 28px;
  max-width: 1600px;
}

.player {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius);
  background: #000;
}

/* MGS sample movie script: the player sizes itself ("自動調整"), so no fixed ratio or clipping. */
.player.player--embed {
  aspect-ratio: auto;
  overflow: visible;
  background: none;
}

.player--embed iframe {
  display: block;
  max-width: 100%;
  margin-inline: auto; /* the script sizes it a little narrower than the column */
  border: 0;
}

/*
 * FANZA sample player: FANZA's 「自動調整」 embed (size=1280_720), a 4:3 box with the iframe filling it. The player
 * inside is a fixed 720px high, so the box stops at 960px wide (= 720px high) and is centred: wider, the page
 * would show white below the player (checked 2026-10-28). 4:3 via aspect-ratio rather than padding-top: 75%,
 * so the phones' edge-to-edge width (negative margins, below) keeps the ratio too. MGS keeps the 16:9 .player.
 */
.player.player--fanza {
  aspect-ratio: 4 / 3;
  max-width: 960px;
  margin-inline: auto;
}

.player--fanza .player__frame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.player__video,
.player__poster {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.player__note {
  position: absolute;
  left: 12px;
  bottom: 12px;
  margin: 0;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgb(17 24 39 / 0.75);
  color: var(--overlay-ink);
  font-size: 13px;
}

/* Breadcrumb above the work title: small, muted, one line; the work title (last) is cut first. */
.breadcrumb {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--text-muted);
}

.breadcrumb__list {
  display: flex;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
}

.breadcrumb__item {
  flex: none;
  max-width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.breadcrumb__item:last-child {
  flex: 1 1 auto;
  max-width: none;
  min-width: 0;
}

.breadcrumb__item + .breadcrumb__item::before {
  content: "›";
  margin: 0 6px;
  color: var(--search-border-hover);
}

.breadcrumb a {
  color: var(--text-muted);
}

.breadcrumb a:hover {
  color: var(--text);
}

.watch__title {
  margin: 14px 0 6px;
  font-size: 20px;
  line-height: 1.4;
}

.breadcrumb + .watch__title {
  margin-top: 6px;
}

.watch__actresses {
  margin: 0 0 12px;
  color: var(--text-muted);
}

.watch__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* 注目ポイント: small outlined labels with a muted note, quieter than the title and the purchase button.
   The border colour only echoes the card badges; the label text carries the meaning. */
.highlights {
  margin: 0 0 12px;
}

.highlights__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  line-height: 1.5;
}

.highlight {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  min-width: 0;
}

.highlight__label {
  padding: 1px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
}

.highlight--trending .highlight__label { border-color: var(--badge-trending); }
.highlight--maker-rank .highlight__label { border-color: var(--accent-strong); }
.highlight--new .highlight__label { border-color: var(--badge-new); }

.highlight__note {
  color: var(--text-muted);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.chip:hover {
  border-color: var(--accent);
  color: var(--accent-ink);
}

/* お気に入り on: the accent. */
.chip[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: 600;
}

/* Purchase block: the button and its note as one group (no price, no panel), centred in the work's
   column, then a hairline and room before 次に見るなら, so buying and browsing on read as two steps.
   Phones (760px block): the button spans the column instead. */
.cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 24px 0 32px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--hairline);
}

/* 「FANZAで続きを見る」: the page's strongest action (#CF3B40 / #B5323A, white text 4.6:1 / 6.2:1). */
.cta__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: min(500px, 100%);
  min-height: 56px;
  padding: 0 32px;
  border-radius: 12px;
  background: var(--accent-strong);
  box-shadow: 0 1px 2px rgb(17 24 39 / 0.08), 0 6px 16px -6px color-mix(in srgb, var(--accent-strong) 55%, transparent);
  color: var(--accent-text);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.cta__button:hover,
.cta__button:focus-visible {
  background: var(--accent-hover);
  box-shadow: 0 1px 2px rgb(17 24 39 / 0.1), 0 8px 20px -6px color-mix(in srgb, var(--accent-hover) 60%, transparent);
  text-decoration: none;
}

.cta__button:active {
  transform: translateY(1px);
}

.cta__icon {
  flex: none;
  width: 16px;
  height: 16px;
  opacity: 0.9;
}

/* A plain fact, not a push: the latest price and availability are FANZA's. */
.cta__note {
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}

.details {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 10px 16px;
  align-items: baseline;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 14px;
}

.details dt {
  color: var(--text-muted);
}

.details dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Maker / series / genre links as small chips that wrap (single-work.php). */
.details__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.details__chips a {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  line-height: 1.3;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.details__chips a:hover {
  border-color: var(--accent);
  color: var(--accent-ink);
  text-decoration: none;
}

/* 品番: plain text (no copy button since 2026-10-26). */
.work-id {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* Sample stills: 6 columns on wide screens, a swipeable row on phones.
   Tiles load the full still scaled down with object-fit: cover (sharper than an upscaled small thumbnail). */
.gallery {
  margin: 0 0 18px;
}

.gallery__title {
  margin: 0 0 10px;
  font-size: 16px;
}

.gallery__list {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gallery__item {
  display: block;
  overflow: hidden;
  border-radius: 6px;
  background: var(--surface-2);
}

.gallery__item img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.15s ease;
}

.gallery__item:hover img {
  transform: scale(1.04);
}

.gallery__more {
  display: block;
  margin: 10px auto 0;
  padding: 8px 20px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.gallery__more:hover {
  background: var(--surface-2);
}

.gallery__more[hidden] {
  display: none;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 56px 40px;
  background: rgb(0 0 0 / 0.9);
}

.lightbox[hidden] {
  display: none;
}

.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.lightbox__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.12);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.lightbox__btn:hover {
  background: rgb(255 255 255 / 0.24);
}

.lightbox__close { top: 8px; right: 8px; }
.lightbox__prev { left: 6px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 6px; top: 50%; transform: translateY(-50%); }

.lightbox__count {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
  pointer-events: none;
}

.is-lightbox-open,
.is-lightbox-open body {
  overflow: hidden;
}

/* 関連作品 beside the player: the same square cards, two a row (a normal grid under the player below 1100px).
   Doubled class so the breakpoint --cols rules don't override it. */
.video-grid.video-grid--list {
  --cols: 2;
  --grid-gap-x: 10px;
  --grid-gap-y: 12px;
}

.video-grid--list .video-card__title {
  font-size: 13px;
}

/* ---------- Shelves (front page) ---------- */

/* Section header: title on the left, the "more" link on the right, a thin rule under both (catalogue style). */
.shelf__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.shelf__head .shelf__title {
  margin: 0;
}

.shelf__more {
  flex: none;
  color: var(--text-muted);
  font-size: 13px;
}

.shelf__more:hover {
  color: var(--accent-ink);
}

/* 新着/メーカーをもっと見る (front page), このメーカー/シリーズをもっと見る (watch page):
   a quiet pill, a bit easier to spot than the plain links. */
.shelf__more.shelf__more--pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  white-space: nowrap;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.shelf__more.shelf__more--pill:hover {
  border-color: var(--accent);
  color: var(--accent-ink);
  text-decoration: none;
}

/* 最近見た作品に近い作品を見る: shown by home.js only. */
.shelf__more[hidden] {
  display: none;
}

/* おすすめ heading: the jump target above, clear of the sticky header and ad line; focused only programmatically. */
#shelf-recommend {
  scroll-margin-top: calc(var(--header-h) + var(--site-disclosure-h) + 16px);
}

/* Front-page shelves show two full rows (three rows of two on phones): the per-breakpoint rules in the
   Responsive section hide the rest. おすすめ renders all candidates (home.js re-orders them), so the same
   rules hide those too. */

/* 最近見た作品 / work-page shelves: one scrolling row; each card as wide as a grid column, so a lone card stays small. */
.video-grid.video-grid--row {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--cols) - 1) * var(--grid-gap-x)) / var(--cols));
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding-bottom: 6px;
}

.video-grid--row > .video-card {
  scroll-snap-align: start;
}

/* Watch page: 同じメーカー / 同じシリーズ rows under the details (on phones too, as a scrolling row). */
.watch__shelf {
  margin-top: 28px;
}

/* Watch page 「次に見るなら」: one quiet linked card between the purchase button and the stills. */
.next-work {
  margin: 0 0 20px;
}

.next-work__label {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
}

.next-work__link {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
}

.next-work__link:hover {
  text-decoration: none;
  border-color: var(--accent);
  box-shadow: var(--shadow-hover);
}

.next-work__thumb {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 6px;
  background: var(--surface-2);
}

.next-work__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.next-work__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.next-work__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}

.next-work__reason {
  font-size: 12px;
  color: var(--text-muted);
}

/* Maker archive 「このメーカーで今人気」: three numbered cards above the list. */
.maker-popular {
  margin: 0 0 28px;
}

.maker-popular__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin-bottom: 12px;
}

.maker-popular__title {
  margin: 0;
  font-size: 18px;
}

.maker-popular__note {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
}

.maker-popular__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 200px));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.maker-popular__link {
  display: grid;
  gap: 8px;
  color: var(--text);
}

.maker-popular__link:hover {
  text-decoration: none;
}

.maker-popular__rank {
  justify-self: start;
  padding: 1px 8px;
  border: 1px solid var(--accent);
  color: var(--accent-ink);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.maker-popular__thumb {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface-2);
}

.maker-popular__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
 * FANZA works (mgs_video_thumb_class(), cards.js): every thumb box is square now, so the near-square cover
 * fills it (cover, centred) over the light placeholder. No black bars. After the boxes' own img rules.
 */
.thumb--fanza {
  background: var(--surface-2);
}

.thumb--fanza img {
  object-fit: cover;
  object-position: center;
}

.maker-popular__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

/* ---------- Label page (template-parts/label-page.php) ---------- */

.label-header__lead {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.7;
}

.label-section {
  margin-bottom: 28px;
}

.label-genres {
  margin: 0 0 26px;
}

.label-genres__title {
  margin: 0 0 10px;
  font-size: 16px;
}

.genre-pill__count {
  margin-left: 6px;
  color: var(--text-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.genre-pill[aria-current="page"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: 600;
}

.genre-pill[aria-current="page"] .genre-pill__count {
  color: inherit;
}

.label-all__head {
  flex-wrap: wrap;
}

.label-all__head .tabs--sort {
  margin-top: 0;
}

.label-all__count {
  margin-left: 6px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: var(--weight-body);
  font-variant-numeric: tabular-nums;
}

/* ---------- 画像から探す (listing-images.php) ---------- */

/* Variable-height gallery: CSS columns, each image at its own shape (width 100%, height auto; no cropping).
   width/height attributes (or --ar) reserve the space before the image arrives. */
.image-gallery {
  column-count: 5;
  column-gap: 12px;
  margin: 0 0 20px;
}

.image-tile {
  break-inside: avoid;
  margin: 0 0 12px;
  display: block;
}

.image-tile__link {
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface-2);
}

.image-tile__link img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--ar, auto);
  transition: opacity 0.15s ease;
}

.image-tile__link:hover img {
  opacity: 0.88;
}

.image-tile__caption {
  padding: 5px 2px 0;
  font-size: 12px;
  line-height: 1.45;
}

.image-tile__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--text);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.image-tile__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 8px;
  color: var(--text-muted);
  font-size: 11px;
}

.image-tile__code {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
}

.image-header__count {
  margin: -4px 0 0;
  color: var(--text-muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.image-header__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}

.image-header__actions .tabs--sort {
  margin-top: 0;
}

.image-labels {
  margin-top: 28px;
}

.label-header__images {
  margin: 10px 0 0;
}

.label-header__images .icon {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

@media (min-width: 1800px) {
  .image-gallery { column-count: 6; }
}

@media (min-width: 1100px) and (max-width: 1439.98px) {
  .image-gallery { column-count: 4; }
}

@media (min-width: 761px) and (max-width: 1099.98px) {
  .image-gallery { column-count: 3; }
}

@media (max-width: 760px) {
  .image-gallery { column-count: 2; column-gap: 8px; }
  .image-tile { margin-bottom: 8px; }
}

/* ---------- /genres/ ---------- */

.genre-search__count {
  margin-left: 8px;
  color: var(--text-muted);
  font-size: 15px;
  font-weight: 400;
}

.genre-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.genre-chips__label {
  color: var(--text-muted);
  font-size: 13px;
}

.genre-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 32px;
  padding: 0 8px 0 14px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--text);
  font-size: 14px;
  overflow-wrap: anywhere;
}

.genre-chip__x {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1;
}

.genre-chip:hover {
  text-decoration: none;
}

.genre-chip:hover .genre-chip__x {
  background: var(--accent-strong);
  color: var(--accent-text);
}

.genre-chips__clear {
  color: var(--text-muted);
  font-size: 13px;
  text-decoration: underline;
}

.genre-search {
  margin: 0 0 24px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.genre-search__toggle {
  cursor: pointer;
  color: var(--text-muted);
  font-size: 14px;
}

details[open] > .genre-search__toggle {
  margin-bottom: 12px;
}

.genre-search__options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

/* A checkbox styled as a toggle pill; the native input stays (keyboard, forms, no JS). */
.genre-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 12px 0 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 14px;
  cursor: pointer;
  user-select: none;
}

.genre-option input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent-strong);
}

.genre-option:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.genre-option:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.genre-option__count {
  color: var(--text-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.genre-search__submit {
  margin-top: 16px;
  min-height: 40px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: var(--accent-strong);
  color: var(--accent-text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* ---------- Ranking & trending ---------- */

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.tabs__link {
  padding: 6px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 14px;
}

.tabs__link:hover {
  border-color: var(--border-strong);
  text-decoration: none;
}

/* Selected tab: red outline and tint, red label. */
.tabs__link[aria-current="page"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: 600;
}

/* 新着順 / 人気順 on maker and genre archives: the same pills, a size smaller. */
.tabs--sort {
  gap: 6px;
  margin-top: 10px;
}

.tabs--sort .tabs__link {
  padding: 4px 12px;
  font-size: 13px;
}

.video-grid--ranked {
  counter-reset: rank;
}

.video-grid--ranked > .video-card {
  counter-increment: rank;
}

/* Rank badge on the cover's bottom-left corner: dark for 4th and below, larger and red for 1-3. */
.video-grid--ranked .video-card__thumb::before {
  content: counter(rank);
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  min-width: 32px;
  padding: 2px 8px;
  border-radius: 0 8px 0 0;
  background: rgb(17 24 39 / 0.78);
  color: var(--overlay-ink);
  font-size: 14px;
  font-weight: 800;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.video-grid--ranked:not(.video-grid--rank-rest) > .video-card:nth-child(-n + 3) .video-card__thumb::before {
  min-width: 44px;
  padding: 4px 10px;
  background: var(--accent-strong);
  font-size: 20px;
}

/* /ranking/: 1位 takes a 2x2 cell on PC, so the list does not read like an ordinary shelf. */
@media (min-width: 761px) {
  .listing-ranking .video-grid--ranked > .video-card:first-child {
    grid-column: span 2;
    grid-row: span 2;
    border-color: var(--accent);
  }

  .listing-ranking .video-grid--ranked > .video-card:first-child .video-card__title {
    font-size: 17px;
  }
}

/* Front page 今週の人気: 1-3 as ranking cards (1位 widest), then one row of cards numbered from 4. */
.podium {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 14px;
  margin: 0 0 var(--grid-gap-y);
  padding: 0;
  list-style: none;
}

.rank-card {
  display: grid;
  grid-template-columns: var(--rank-thumb, 130px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rank-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-hover);
}

.rank-card--1 {
  --rank-thumb: 170px;
  border-color: var(--accent);
  background: var(--accent-soft);
}

.rank-card__thumb {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 6px;
  background: var(--surface-2);
}

.rank-card__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rank-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.rank-card__rank {
  align-self: flex-start;
  margin: 0;
  padding: 2px 12px;
  border-radius: 999px;
  background: var(--accent-strong);
  color: var(--accent-text);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

.rank-card--1 .rank-card__rank {
  font-size: 18px;
}

.rank-card__title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
}

.rank-card--1 .rank-card__title {
  font-size: 17px;
}

.rank-card__title a {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rank-card__title a:hover {
  color: var(--accent-ink);
  text-decoration: none;
}

.rank-card__meta,
.rank-card__sub {
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.rank-card__meta a {
  color: var(--text);
}

/* The row after the podium: numbering goes on from 4; one row only (per-breakpoint rules below). */
.video-grid.video-grid--rank-rest {
  counter-reset: rank 3;
}

/* ---------- Shorts ---------- */

.listing-shorts .content {
  padding: 0;
}

.listing-shorts .site-footer {
  display: none;
}


.shorts {
  --shorts-h: calc(100vh - var(--header-h) - var(--site-disclosure-h));
  position: relative;
  display: flex;
  justify-content: center;
  gap: 16px;
}

@supports (height: 100dvh) {
  .shorts { --shorts-h: calc(100dvh - var(--header-h) - var(--site-disclosure-h)); }
}

.shorts__track {
  width: min(100%, calc(var(--shorts-h) * 9 / 16));
  height: var(--shorts-h);
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
}

.shorts__track::-webkit-scrollbar {
  display: none;
}

.short {
  position: relative;
  height: var(--shorts-h);
  padding: 12px 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.short__inner {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 12px;
  background: #111;
  color: var(--overlay-ink);
}

.short__media {
  position: absolute;
  inset: 0;
  background: #000;
}

.short__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Sample player (active item only), centred in the vertical card. MGS's script sizes its own 16:9 iframe. */
.short__player {
  display: flex;
  align-items: center;
  height: 100%;
}

.short__player iframe {
  display: block;
  max-width: 100%;
  margin-inline: auto;
  border: 0;
}

/*
 * FANZA's player page: 4:3 (its 「自動調整」 shape, see .player--fanza), as large as the card allows on both
 * axes and at most 960px wide (its inner player is 720px high), so there is no white area, clipping or scrollbar.
 */
.short__player--fanza {
  container-type: size;
  justify-content: center;
}

.short__player--fanza iframe {
  width: min(100cqw, 133.333cqh, 960px);
  aspect-ratio: 4 / 3;
  height: auto;
  margin: 0;
}

/* 「キーボード操作に戻る」 (shorts.js): desktop pointers only; stronger while the focus is in the player. */
.short__focus-return {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .short__focus-return {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1;
    display: block;
    padding: 6px 12px;
    border: 1px solid rgb(255 255 255 / 0.25);
    border-radius: 999px;
    background: rgb(0 0 0 / 0.6);
    color: var(--overlay-ink);
    font-size: 12px;
    opacity: 0.7;
    cursor: pointer;
  }

  .short__focus-return:hover,
  .short__focus-return:focus-visible,
  .is-frame-focused .short__focus-return {
    opacity: 1;
    background: var(--accent-strong);
    border-color: transparent;
  }
}

.short__info {
  position: absolute;
  inset: auto 0 0;
  padding: 64px 16px 20px;
  background: linear-gradient(transparent, rgb(0 0 0 / 0.85));
}

.short__badges {
  display: flex;
  gap: 4px;
  margin: 0 0 8px;
}

.short__title {
  margin: 0;
  font-size: 17px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.short__actress {
  margin: 4px 0 0;
  color: #d5d8df;
  font-size: 14px;
}

.short__cta {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  margin-top: 12px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--accent-strong);
  color: var(--accent-text);
  font-weight: 700;
  font-size: 14px;
}

.short__cta:hover {
  text-decoration: none;
}

.shorts__end {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-muted);
}

.shorts__nav {
  display: none;
}

/* Prev/next buttons need JS; on desktop they sit beside the feed. */
.shorts.is-enhanced .shorts__nav {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}

.shorts__button {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

.shorts__button:hover {
  border-color: var(--accent);
  color: var(--accent-ink);
}

/* ---------- Pagination & footer ---------- */

/* infinite-scroll.js adds this class; without JS the pagination stays visible. */
.has-infinite-scroll .pagination {
  display: none;
}

.infinite-sentinel {
  height: 1px;
}

.pagination {
  margin-top: 32px;
}

.nav-links {
  display: flex;
  flex-wrap: wrap; /* never wider than the screen; wraps only on very narrow ones */
  justify-content: center;
  gap: 6px;
}

.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

a.page-numbers:hover {
  border-color: var(--accent);
  color: var(--accent-ink);
  text-decoration: none;
}

.page-numbers.current {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: 700;
}

.page-numbers.dots {
  min-width: 0;
  padding: 0 2px;
  border-color: transparent;
  background: transparent;
  color: var(--text-muted);
}

.site-footer {
  padding: 24px var(--gutter) 32px calc(var(--sidenav-w) + 24px);
  border-top: 1px solid var(--border);
  background: var(--surface-soft);
  color: var(--text-muted);
  font-size: 12px;
}

/* Site information links: a quiet row that wraps on narrow screens. */
.footer-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.footer-nav a {
  display: inline-block;
  padding: 2px 0;
  color: var(--text-muted);
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-underline-offset: 3px;
}

.footer-nav a:hover {
  color: var(--text);
}

/* FANZA Webサービス credit: last line, readable but quiet (same colour as the rest of the footer). */
.site-footer__credit {
  margin: 4px 0 0;
  font-size: 11px;
}

.site-footer__credit a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-underline-offset: 3px;
}

.site-footer__credit a:hover {
  color: var(--text);
}

/* ---------- Site information pages (page-static.php) ---------- */

.static-page {
  max-width: 44em; /* about 40 full-width characters a line at 16px; ~80 half-width */
  padding-bottom: 24px;
}

.static-page__title {
  margin: 8px 0 20px;
  font-size: 26px;
  line-height: 1.35;
}

.prose {
  font-size: 16px;
  line-height: 1.85;
}

.prose p,
.prose ul {
  margin: 0 0 1em;
}

.prose h2 {
  margin: 2.2em 0 0.7em;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  font-size: 19px;
  line-height: 1.4;
}

.prose h3 {
  margin: 1.6em 0 0.5em;
  font-size: 16px;
}

.prose ul {
  padding-left: 1.4em;
}

.prose li + li {
  margin-top: 0.4em;
}

.prose a {
  color: var(--accent-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contact-pending {
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-soft);
  color: var(--text-muted);
}

/* お問い合わせ form (template-parts/pages/contact.php) */
.contact-form {
  max-width: 36em;
}

.contact-form__required-note {
  color: var(--text-muted);
  font-size: 13px;
}

.contact-form__field {
  margin: 0 0 20px;
}

.contact-form label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 15px;
  font-weight: 600;
}

.contact-form__required,
.contact-form__optional {
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
}

.contact-form__required {
  background: var(--accent-strong);
  color: var(--accent-text);
}

.contact-form__optional {
  background: var(--surface-2);
  color: var(--text-muted);
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--search-border);
  border-radius: 10px;
  background: var(--search-bg);
  color: var(--text);
  font: inherit;
  font-size: 16px; /* no zoom on focus in iOS */
}

.contact-form textarea {
  min-height: 200px;
  resize: vertical;
  line-height: 1.7;
}

.contact-form input:focus-visible,
.contact-form select:focus-visible,
.contact-form textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.contact-form [aria-invalid="true"] {
  border-color: #c62828;
}

.contact-form__hint {
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.6;
}

/* The removal hint only for 削除依頼・権利侵害 (browsers without :has show it always). */
.contact-form:has(#mgs-type option[value="removal"]:not(:checked)) .contact-form__hint--removal {
  display: none;
}

.contact-form__error {
  margin: 6px 0 0;
  color: #c62828;
  font-size: 13px;
}

.contact-form__trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-form__submit {
  min-width: 160px;
  min-height: 48px;
  padding: 0 28px;
  border: 0;
  border-radius: 999px;
  background: var(--accent-strong);
  color: var(--accent-text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.contact-notice {
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.contact-notice--sent {
  border-left: 3px solid var(--badge-new);
}

.contact-notice--error {
  border-left: 3px solid #c62828;
}

.contact-alt {
  color: var(--text-muted);
  font-size: 14px;
}

.static-page__dates {
  margin: 2.5em 0 0;
  color: var(--text-muted);
  font-size: 13px;
}

/* ---------- Responsive ----------
   Columns of square cards for the content width beside the 220px side nav (about 180-230px a card):
   6 from 1800px, 5 from 1440px, 4 from 1100px, 3 down to 761px; 2 on phones (760px block).
   Front-page shelves keep two full rows at each count (MGS_VIDEO_SHELF_SIZE = 12). */

@media (min-width: 1800px) {
  :root { --cols: 6; }
  .video-grid--shelf > .video-card:nth-child(n + 13),
  .video-grid--rank-rest > .video-card:nth-child(n + 7) { display: none; }
}

@media (min-width: 1440px) and (max-width: 1799.98px) {
  :root { --cols: 5; }
  .video-grid--shelf > .video-card:nth-child(n + 11),
  .video-grid--rank-rest > .video-card:nth-child(n + 6) { display: none; }
}

@media (min-width: 1100px) and (max-width: 1439.98px) {
  :root { --cols: 4; }
  .video-grid--shelf > .video-card:nth-child(n + 9),
  .video-grid--rank-rest > .video-card:nth-child(n + 5) { display: none; }
  .rank-card { --rank-thumb: 104px; gap: 10px; padding: 10px; }
  .rank-card--1 { --rank-thumb: 132px; }
}

@media (min-width: 761px) and (max-width: 1099.98px) {
  :root { --cols: 3; }
  .video-grid--shelf > .video-card:nth-child(n + 7),
  .video-grid--rank-rest > .video-card:nth-child(n + 4) { display: none; }
  .podium { gap: 10px; }
  .rank-card { --rank-thumb: 84px; gap: 10px; padding: 10px; }
  .rank-card--1 { --rank-thumb: 104px; }
  .rank-card__title { font-size: 14px; }
}

/* Narrower content: the podium becomes a list, 1位 first. */
@media (min-width: 761px) and (max-width: 900px) {
  .podium { grid-template-columns: minmax(0, 1fr); }
  .rank-card { --rank-thumb: 110px; }
  .rank-card--1 { --rank-thumb: 140px; }
}

@media (max-width: 1280px) {
  .watch { grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; }
}

/* Below this the player beside the related column gets too small: 関連作品 goes under it as a normal grid. */
@media (max-width: 1100px) {
  .watch { grid-template-columns: minmax(0, 1fr); }
  .video-grid.video-grid--list { --cols: 4; --grid-gap-x: 14px; --grid-gap-y: 18px; }
}

@media (min-width: 761px) and (max-width: 900px) {
  .video-grid.video-grid--list { --cols: 3; }
}

@media (max-width: 760px) {
  :root { --gutter: 16px; }

  .layout { display: block; }
  .sidenav { display: none; }
  .content { padding: 12px var(--gutter) calc(var(--bottomnav-h) + 24px + env(safe-area-inset-bottom)); }

  /* Header: logo + name on the left, a search icon on the right that opens the 探す sheet. */
  :root { --header-h: 56px; }
  .masthead { gap: 8px; background: var(--bg); backdrop-filter: none; } /* no filter: it would trap the fixed sheet */
  .masthead__action { display: none; }
  .brand { min-width: 0; }
  .brand__name { font-size: 18px; }
  .brand__tagline { display: none; } /* phones: the name alone, one line */
  .masthead__search { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 -10px 0 auto; border-radius: 50%; color: var(--text); }
  .masthead__search:hover { background: var(--surface-2); }
  .masthead__search .icon { width: 24px; height: 24px; } /* a touch larger than the shared 22px; the 44px target is unchanged */
  .search__input { padding-inline: 12px; }
  .search__button { width: 40px; }

  /* 探す: a bottom sheet over a dimmed page. .is-open with JS (mobile-explore.js), :target without. */
  .explore { display: none; position: fixed; inset: 0; z-index: 50; }
  .explore.is-open,
  .explore:target { display: block; }
  .site-top:has(.explore.is-open),
  .site-top:has(.explore:target) { z-index: 60; } /* the sticky header block is a stacking context: lift it over the bottom bar */
  .explore__backdrop { display: block; position: absolute; inset: 0; background: rgb(17 24 39 / 0.4); }
  .explore__sheet {
    display: block;
    position: absolute;
    inset: auto 0 0;
    max-height: 85vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 var(--gutter) calc(20px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border);
    border-radius: 16px 16px 0 0;
    background: var(--surface);
    box-shadow: 0 -8px 24px rgb(17 24 39 / 0.1);
  }
  .explore__head { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; position: relative; padding-top: 12px; margin-bottom: 8px; }
  .explore__handle { position: absolute; top: 8px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--search-border-hover); }
  .explore__title { grid-column: 2; margin: 0; font-size: 16px; text-align: center; }
  .explore__close { grid-column: 3; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--text-muted); font-size: 26px; line-height: 1; }
  .explore__close:hover { background: var(--surface-2); text-decoration: none; }
  .explore form.search { flex-wrap: wrap; max-width: none; margin: 0; }
  .explore .search__box { height: 44px; }
  /* Suggestions flow inside the sheet (it scrolls), so they never go under the bottom bar. */
  .explore .suggest { position: static; flex: 0 0 100%; max-height: none; margin-top: 8px; border-radius: 12px; }
  .explore__menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
  .explore__link { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 14px; border-radius: 12px; background: var(--surface-2); font-size: 14px; font-weight: 600; }
  .explore__link:hover { text-decoration: none; }
  .explore__link[aria-current="page"] { box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
  .explore__link .icon { flex: none; width: 20px; height: 20px; }
  .is-explore-open,
  .is-explore-open body { overflow: hidden; }
  .brand { gap: 8px; }
  .brand__mark { width: 28px; height: 28px; }
  .brand__name { letter-spacing: 0.04em; }
  .masthead { box-shadow: 0 1px 0 rgb(17 24 39 / 0.02); }

  /* Two square cards a row: the list stays scannable (one column would make each cover screen-wide). */
  :root { --cols: 2; --grid-gap-x: 10px; --grid-gap-y: 12px; }
  .video-grid.video-grid--list { --cols: 2; --grid-gap-x: 10px; --grid-gap-y: 12px; }
  .video-card__body { padding: 7px 8px 9px; }
  .video-card__title { font-size: 13px; }
  /* Less crowded cards: names smaller and closer, still one line under the two-line title. */
  .video-card__meta { margin-top: 4px; font-size: 11px; }
  /* Shelf heading and its pill on one calm line; three rows of two per shelf. */
  .shelf + .shelf { margin-top: 24px; }
  .shelf__head { margin-bottom: 10px; padding-bottom: 6px; }
  .shelf__head .shelf__title { font-size: 16px; }
  .video-grid--shelf > .video-card:nth-child(n + 7) { display: none; }
  /* 注目メーカー / 人気ジャンル: one swipeable row each, running to the screen edge. */
  .chip-list {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    margin-inline: calc(var(--gutter) * -1);
    padding: 0 var(--gutter) 2px;
    scrollbar-width: none;
  }
  .chip-list::-webkit-scrollbar { display: none; }
  .chip-list > li { flex: none; }
  .maker-chip { max-width: 70vw; }
  /* 今週の人気: podium as a list (1位 first), then two rows of two. */
  .podium { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .rank-card { --rank-thumb: 96px; gap: 12px; padding: 10px; }
  .rank-card--1 { --rank-thumb: 116px; }
  .rank-card__title { font-size: 14px; }
  .rank-card--1 .rank-card__title { font-size: 15px; }
  .video-grid--rank-rest > .video-card:nth-child(n + 5) { display: none; }

  .watch .player { margin-inline: calc(var(--gutter) * -1); border-radius: 0; }
  .next-work__link { grid-template-columns: 80px minmax(0, 1fr); gap: 10px; padding: 8px; }
  .next-work__title { font-size: 14px; }
  /* Three cards in one row would be tiny: a scrolling row like the shelves. */
  .maker-popular__list {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 42%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .maker-popular__list::-webkit-scrollbar { display: none; }
  .maker-popular__item { scroll-snap-align: start; }
  .genre-search { margin-inline: calc(var(--gutter) * -1); border-radius: 0; }
  .genre-search__submit { width: 100%; }
  .watch__title { font-size: 18px; }
  /* Real titles run to ~180 characters: keep the price/CTA near the top; tap to read it all. */
  .watch__title {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    cursor: pointer;
  }
  .watch__title:focus { -webkit-line-clamp: unset; outline: none; }
  /* Phones: the button spans the column (the note is centred under it as on PC). */
  .cta { align-items: stretch; margin: 16px 0 24px; padding-bottom: 20px; }
  .cta__button { width: 100%; min-height: 52px; padding: 0 16px; font-size: 16px; }
  .details { grid-template-columns: 6.5em minmax(0, 1fr); gap: 8px 10px; padding: 12px; }

  .site-footer { padding: 16px var(--gutter) calc(var(--bottomnav-h) + 24px + env(safe-area-inset-bottom)); }
  .footer-nav a { padding: 6px 0; } /* taller tap targets */
  .static-page__title { font-size: 22px; }
  .prose h2 { font-size: 18px; }

  .bottomnav {
    position: fixed;
    inset: auto 0 0;
    z-index: 30;
    display: flex;
    height: calc(var(--bottomnav-h) + env(safe-area-inset-bottom));
    padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    background: var(--surface);
    border-top: 1px solid var(--border);
  }

  .bottomnav__link {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 11px;
  }

  .bottomnav__link { color: var(--text-muted); }
  .bottomnav__link[aria-current="page"] { color: var(--accent); font-weight: 600; }
  .bottomnav__link:hover { text-decoration: none; }

  /* Shorts: edge to edge between header and bottom bar; swipe instead of buttons. */
  .shorts { --shorts-h: calc(100vh - var(--header-h) - var(--site-disclosure-h) - var(--bottomnav-h) - env(safe-area-inset-bottom)); }
  .shorts.is-enhanced .shorts__nav { display: none; }
  .shorts__track { width: 100%; }
  .short { padding: 0; }
  .short__inner { border-radius: 0; }
  /* 最近見た作品 / work-page shelves: to the screen edge, two cards with the next one peeking in. */
  .video-grid.video-grid--row {
    grid-template-columns: none;
    grid-auto-columns: 42%;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .video-grid--row::-webkit-scrollbar { display: none; }
  .maker-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  /* Pagination fits one row at 390px: arrows only for 前へ/次へ, compact numbers (still 44px tall on touch). */
  .pagination__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .nav-links { gap: 4px; }
  .nav-links .page-numbers { min-width: 36px; padding: 0 8px; }
  .nav-links .page-numbers.dots { min-width: 0; padding: 0; }
  .maker-card { padding: 12px; }

  .gallery__list {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 36%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .gallery__list > li { scroll-snap-align: start; }
  .lightbox { padding: 56px 0; }
  .lightbox__prev,
  .lightbox__next { top: auto; bottom: 4px; transform: none; }
  .lightbox__prev { left: 16px; }
  .lightbox__next { right: 16px; }
  .lightbox__count { bottom: 16px; }
}

@media (max-width: 760px) {
  @supports (height: 100dvh) {
    .shorts { --shorts-h: calc(100dvh - var(--header-h) - var(--site-disclosure-h) - var(--bottomnav-h) - env(safe-area-inset-bottom)); }
    .explore__sheet { max-height: 85dvh; } /* the visible height, with the browser bars shown */
  }
}

/* Touch screens: at least 44x44px for every control (WCAG 2.5.5 / platform guidelines). */
@media (pointer: coarse) {
  .search__box { height: 44px; }
  .chip { height: 44px; padding: 0 16px; }
  .tabs__link { display: inline-flex; align-items: center; min-height: 44px; }
  .short__cta { min-height: 44px; }
  .shelf__more { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 8px; margin-right: -8px; }
  .gallery__more { min-height: 44px; }
  .genre-option, .genre-chip, .genre-search__submit { min-height: 44px; }
  .page-numbers { min-width: 44px; height: 44px; }
  .shelf__more.shelf__more--pill { min-height: 40px; margin: 0; padding-inline: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .video-card__thumb video { transition: none; }
  .gallery__item img { transition: none; }
  .shorts__track { scroll-behavior: auto; }
  .cta__button { transition: none; }
  .cta__button:active { transform: none; }
}

/* Very narrow phones: the mark alone, so the search box keeps its room (the link keeps its aria-label). */
@media (max-width: 359px) {
  .brand__text { display: none; }
}