/* 今夜の一本. Self-hosted font subset + system fonts only; no third-party requests besides DMM images. */
@font-face { font-family: "Shippori Mincho Sub"; src: url("/public/fonts/mincho-sub.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --bg: #f6f3ee; --text: #201c1a; --muted: #6a625c; --line: #d9d1c6; --soft: #ebe5dc;
  --accent: #9b1c31; --accent-ink: #fff; --radius: 2px; color-scheme: light;
  --serif: "Shippori Mincho Sub", "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  --sans: system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Yu Gothic UI", Meiryo, sans-serif;
}
/* Dark: the OS setting unless the visitor chose light; or the visitor's explicit choice (theme.js sets data-theme). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #161312; --text: #eee8e4; --muted: #a39a94; --line: #3a3331; --soft: #251f1e; --accent: #e5677b; --accent-ink: #1a0a0e; color-scheme: dark; }
}
:root[data-theme="dark"] { --bg: #161312; --text: #eee8e4; --muted: #a39a94; --line: #3a3331; --soft: #251f1e; --accent: #e5677b; --accent-ink: #1a0a0e; color-scheme: dark; }
* { box-sizing: border-box; }
[hidden] { display: none !important; } /* rows are grids; the filter bar hides them with the hidden attribute */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; scroll-padding-bottom: 6rem; } /* the sticky button must not cover a focused element */
body { margin: 0; background: var(--bg); color: var(--text); min-height: 100vh; display: flex; flex-direction: column; font: 16px/1.75 var(--sans); }
main { flex: 1; padding-bottom: 56px; }
img { max-width: 100%; height: auto; }
a { color: var(--accent); }
h1, h2, h3, h4 { line-height: 1.4; margin: 0; text-wrap: balance; word-break: auto-phrase; } /* auto-phrase: no breaks inside Japanese words */
p { margin: 0 0 1em; }
.wrap { width: 100%; max-width: 960px; margin: 0 auto; padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); }

.skip-link { position: absolute; left: -999px; top: 8px; background: var(--accent); color: var(--accent-ink); padding: 8px 14px; z-index: 60; }
.skip-link:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Masthead: a ruled newspaper-style bar, not a card. */
.masthead { position: sticky; top: 0; z-index: 30; background: var(--bg); border-bottom: 2px solid var(--text); } /* nav stays in reach while scrolling */
.masthead-row { display: flex; align-items: baseline; gap: 20px; padding-top: 14px; padding-bottom: 10px; }
.sitename { font: 700 1.6rem/1.2 var(--serif); letter-spacing: .04em; color: var(--text); text-decoration: none; }
.mainnav { display: flex; gap: 16px; margin-left: auto; font-size: .85rem; }
.mainnav a { color: var(--muted); text-decoration: none; }
.mainnav a:hover { color: var(--accent); text-decoration: underline; }
/* Light/dark switch. The sun-to-crescent icon (an inset box-shadow that bites the disc) is adapted from
   uiverse.io JkHuger/old-falcon-20 (MIT License), redrawn small in this site's colours. */
.theme-toggle { position: relative; flex: none; width: 2.9rem; height: 1.5rem; padding: 0; border: 1px solid var(--line); border-radius: 999px; background: var(--soft); cursor: pointer; align-self: center; }
.theme-toggle:hover { border-color: var(--muted); }
.sw-knob { position: absolute; top: 2px; left: 2px; width: calc(1.5rem - 6px); height: calc(1.5rem - 6px); border-radius: 50%; background: var(--bg); box-shadow: 0 1px 2px rgb(0 0 0 / .25); display: grid; place-items: center; }
.sw-icon { width: .62rem; height: .62rem; border-radius: 50%; background: #d08a12; box-shadow: 0 0 0 2px rgb(208 138 18 / .25); }
.theme-toggle[aria-checked="true"] .sw-knob { transform: translateX(1.4rem); }
.theme-toggle[aria-checked="true"] .sw-icon { background: transparent; box-shadow: inset .2rem -.12rem 0 0 #e8d9a8; transform: rotate(-20deg); }
.badge-18 { border: 1px solid var(--muted); color: var(--muted); padding: 0 7px; font-size: .75rem; font-weight: 700; border-radius: 2px; }

.dateline { padding: 18px 0 14px; border-bottom: 1px solid var(--line); }
.dateline h1 { font: 700 1.1rem/1.4 var(--serif); margin-bottom: 2px; }
.dateline p { margin: 0; color: var(--muted); font-size: .8rem; }
.dateline strong, .pr-line strong, .pr-note strong, .muted strong { font-weight: 700; }
.dateline strong::before, .pr-line strong::before, .pr-note strong::before, .muted strong::before { content: "["; }
.dateline strong::after, .pr-line strong::after, .pr-note strong::after, .muted strong::after { content: "]"; }

.section-title { font: 700 1.5rem/1.3 var(--serif); margin: 44px 0 6px; padding-top: 10px; border-top: 2px solid var(--text); }
.source { color: var(--muted); font-size: .8rem; margin: 0 0 6px; }
.muted { color: var(--muted); font-size: .85rem; }

/* Work rows. Covers are never cropped (DMM allows only scaling): the box keeps 3:2 and the image sits inside it whole. */
.rows { list-style: none; margin: 0; padding: 0; }
.row { display: grid; grid-template-columns: 2.4rem 140px minmax(0, 1fr); gap: 0 12px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--line); }
.row:not(:has(.num)) { grid-template-columns: 140px minmax(0, 1fr); }
.num { font: 700 1.5rem/1 var(--serif); color: var(--muted); text-align: right; padding-top: 2px; }
.thumb { display: block; aspect-ratio: 3 / 2; background: var(--soft); border: 1px solid var(--line); overflow: hidden; }
.thumb img, .samples img { width: 100%; height: 100%; object-fit: contain; display: block; }
.row-body { min-width: 0; }
.row .title { font: 700 .98rem/1.55 var(--sans); margin: 0 0 4px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.row .title a { color: var(--text); text-decoration: none; }
.row .title a:hover { color: var(--accent); text-decoration: underline; }
.meta { margin: 0 0 2px; color: var(--muted); font-size: .82rem; }
.meta2 { margin: 0 0 6px; color: var(--muted); font-size: .78rem; display: flex; flex-wrap: wrap; gap: 0 12px; }
.sale-line { margin: 0 0 2px; color: var(--accent); font-size: .82rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.more-lists { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 10px 0 0; font-size: .88rem; }
/* Sort control: a ruled tab strip, the current order underlined in the accent colour. */
.sorter { display: flex; flex-wrap: wrap; gap: 0 22px; margin: 14px 0 0; border-bottom: 1px solid var(--line); font-size: .88rem; }
.sorter a { color: var(--muted); text-decoration: none; padding: 8px 0 7px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.sorter a:hover { color: var(--text); }
.sorter a[aria-current] { color: var(--text); font-weight: 700; border-bottom-color: var(--accent); }
.thumb.is-loading { background: var(--line); }
.btn:active { transform: translateY(1px); }
.h1-code { display: block; margin-bottom: 4px; font-size: .58em; color: var(--muted); }
.code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .92em; letter-spacing: .02em; color: var(--text); }
.meta a { color: inherit; }
.meta a:hover { color: var(--accent); }
/* Sample movie: a play button below the cover (never over the DMM image); DMM's player replaces it on press. */
.movie { margin: 10px 0 0; }
.play-btn { display: inline-flex; align-items: center; gap: 12px; font: 700 1rem/1.4 var(--sans); color: var(--text); background: var(--soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 18px 10px 10px; cursor: pointer; }
.play-btn:hover { border-color: var(--accent); }
.play-icon { position: relative; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--accent); flex: none; }
.play-icon::after { content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%); border-style: solid; border-width: .5rem 0 .5rem .8rem; border-color: transparent transparent transparent var(--accent-ink); }
.movie .muted { margin: 8px 0 0; }
.movie-frame { overflow: hidden; max-width: 100%; }
.movie-frame iframe { display: block; border: 0; background: #000; }
/* Quick filters: a ruled strip that follows the top of the screen. */
.filterbar { position: sticky; top: 58px; z-index: 20; margin: 24px 0 0; background: var(--bg); border-top: 1px solid var(--text); border-bottom: 1px solid var(--line); }
.filterbar.is-active { border-bottom-color: var(--accent); }
.fb-inner { padding: 8px 0; display: grid; gap: 6px; }
.fb-toggle { display: none; }
.fb-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: .85rem; }
.chk { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.chk input { accent-color: var(--accent); width: 1rem; height: 1rem; margin: 0; }
.range { display: inline-flex; align-items: center; gap: 6px; }
.range input { accent-color: var(--accent); width: 8.5rem; }
.range output { min-width: 4.6em; color: var(--muted); font-variant-numeric: tabular-nums; }
.fb-status { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: .78rem; color: var(--muted); }
.fb-tag b { color: var(--text); }
.fb-clear-tag, .fb-reset { font: inherit; color: var(--accent); background: none; border: 0; padding: 0 4px; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.fb-count { font-variant-numeric: tabular-nums; }
.fb-none { padding: 14px 0; margin: 0; }
/* Facts beside the cover (DMM images are never drawn over) and tag pills that filter the page. */
.badges { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 4px; }
.badge { font-size: .68rem; font-weight: 700; letter-spacing: .03em; padding: 0 6px; border: 1px solid currentColor; border-radius: 2px; line-height: 1.6; }
.badge-sale { color: var(--accent); }
.badge-deep { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); } /* 80% off or more */
.badge-new { color: var(--text); }
.badge-high { color: #7e5c0e; }
:root[data-theme="dark"] .badge-high { color: #e0b65a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .badge-high { color: #e0b65a; } }
.pills { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 6px; }
.pill { font: inherit; font-size: .72rem; color: var(--muted); background: var(--soft); border: 1px solid var(--line); border-radius: 999px; padding: 0 9px; line-height: 1.8; cursor: pointer; }
.pill:hover, .pill[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }
.fav { margin-left: auto; font: inherit; font-size: 1.05rem; line-height: 1; color: var(--muted); background: none; border: 0; padding: 4px 6px; cursor: pointer; }
.fav[aria-pressed="true"] { color: var(--accent); }
/* Saved works button and the two dialogs (quick view, saved list). */
.saved-open { position: fixed; right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); z-index: 30; font: 700 .82rem/1 var(--sans); color: var(--accent-ink); background: var(--accent); border: 0; border-radius: 999px; padding: 10px 16px; cursor: pointer; box-shadow: 0 2px 8px rgb(0 0 0 / .25); }
.sheet { width: min(860px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 1px solid var(--line); border-top: 4px solid var(--accent); background: var(--bg); color: var(--text); overflow: hidden; }
.sheet::backdrop { background: rgb(10 8 8 / .55); }
.sheet-body { max-height: calc(100dvh - 30px); overflow: auto; padding: 18px 18px 12px; overscroll-behavior: contain; }
.sheet-close { position: absolute; top: 6px; right: 8px; z-index: 2; font-size: 1.4rem; line-height: 1; color: var(--muted); background: var(--bg); border: 0; padding: 4px 8px; cursor: pointer; }
.sheet-title { font: 700 1.2rem/1.4 var(--serif); margin: 0 0 4px; }
.sheet-more { margin: 14px 0 0; font-size: .88rem; }
.sheet .breadcrumb { display: none; }
.compare-wrap { overflow-x: auto; }
.compare { width: 100%; border-collapse: collapse; font-size: .85rem; }
.compare th, .compare td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); white-space: nowrap; font-variant-numeric: tabular-nums; }
.compare th { color: var(--muted); font-weight: 400; font-size: .75rem; }
.c-work a { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; white-space: normal; min-width: 16rem; }
.c-work img { width: 72px; height: 48px; object-fit: contain; background: var(--soft); flex: none; }
.c-remove { font: inherit; font-size: .78rem; color: var(--muted); background: none; border: 1px solid var(--line); padding: 2px 8px; cursor: pointer; }
.genre-index { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); border-top: 1px solid var(--line); column-gap: 28px; }
.genre-index a { display: flex; justify-content: flex-start; align-items: baseline; gap: 8px; padding: 12px 4px; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; min-height: 44px; }
.genre-index a:hover { color: var(--accent); }
.gi-n { color: var(--muted); font-size: .8rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.note { margin: 6px 0 14px; padding: 10px 14px; border-left: 3px solid var(--accent); background: var(--soft); }
.note-label { font: 700 .75rem/1 var(--serif); color: var(--accent); }
.note p { margin: 4px 0 0; line-height: 1.8; }
.tv-note { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 16px; }
.tv-note p { margin: 0; flex: 1 1 16em; }
.tv-note .btn { padding: 8px 16px; font-size: .9rem; }
.search-form { display: flex; gap: 8px; margin: 16px 0 10px; }
.search-form input { flex: 1; min-width: 0; font: 1rem/1.4 var(--sans); color: var(--text); background: var(--bg); border: 1px solid var(--muted); border-radius: var(--radius); padding: 10px 12px; min-height: 44px; }
.search-form input:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.search-form .btn { padding: 10px 18px; }
.door { display: grid; grid-template-columns: 6em minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.door-h { margin: 0; font: 700 .85rem/2 var(--sans); color: var(--muted); }
.door-links { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; line-height: 2; }
.door-links a { color: var(--text); text-underline-offset: 3px; }
.door-links a:hover { color: var(--accent); }
.door-links .door-all { color: var(--accent); }
@media (max-width: 640px) { .door { grid-template-columns: 1fr; gap: 2px; } .door-links a { padding: 4px 0; } }
.list-lead { margin: 12px 0 4px; max-width: 46rem; line-height: 1.8; }
.go-line { margin: 0; display: flex; align-items: baseline; gap: 8px; font-size: .88rem; }
.go { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.go::after { content: "→"; display: inline-block; margin-left: .3em; }
.pr { color: var(--muted); font-size: .68rem; border: 1px solid var(--line); padding: 0 5px; }

.rows-feature .row { grid-template-columns: 3.4rem minmax(0, 300px) minmax(0, 1fr); gap: 0 20px; padding: 20px 0; }
.rows-feature .row:not(:has(.num)) { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
.rows-feature .num { font-size: 3rem; color: var(--accent); }
.rows-feature .title { font-size: 1.1rem; -webkit-line-clamp: 4; }
.rows-feature .go-line { font-size: .95rem; }
/* Dense lists are a grid of cards: the cover on top (whole, never drawn over), the facts under it, the rank beside the title.
   2 columns on phones, 3 on tablets, 4 on wide screens: about 4x the works per screen of the old one-per-line rows. */
.rows-dense { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
.rows-dense .row { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 0; } /* a column, so the link line can sit on the card bottom */
.rows-dense .num { font-size: 1.1rem; padding-top: 0; text-align: left; margin-bottom: -4px; } /* the rank sits under the cover, never on it */
.rows-dense .thumb { order: -1; }
.rows-dense .row-body { flex: 1; display: flex; flex-direction: column; }
.rows-dense .go-line { margin-top: auto; } /* neighbouring cards keep their links on one line */
.rows-dense .title { font-size: .88rem; line-height: 1.5; -webkit-line-clamp: 2; }
.rows-dense .meta { font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rows-dense .meta2 { font-size: .75rem; gap: 0 8px; margin-bottom: 4px; }
.rows-dense .m-date { display: none; } /* 新着 is grouped by day and the work page has the date */
.rows-dense .pills { flex-wrap: nowrap; overflow: hidden; -webkit-mask-image: linear-gradient(to right, #000 80%, transparent); mask-image: linear-gradient(to right, #000 80%, transparent); }
.rows-dense .pill { flex: none; }
.rows-dense .sale-line { font-size: .75rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rows-dense .sl-x { display: none; } /* cards keep the price and deadline; the % is in the badge, the rest on the work page */
.rows-dense .go-line { align-items: center; gap: 4px; font-size: .75rem; line-height: 1.4; }
.rows-dense .go { word-break: keep-all; overflow-wrap: anywhere; } /* breaks only after 「FANZAで」 (a wbr in the row) */
.rows-dense .go::after { content: none; } /* a narrow card fits the label and its PR mark only without the arrow */
.rows-dense .fav { min-width: 40px; }
.more-rows { margin: 12px 0 0; }
.more-rows > summary { display: block; list-style: none; cursor: pointer; padding: 12px 16px; min-height: 44px; text-align: center; font-weight: 700; font-size: .9rem; color: var(--accent); border: 1px solid var(--line); border-radius: var(--radius); }
.more-rows > summary::-webkit-details-marker { display: none; }
.more-rows > summary:hover { border-color: var(--accent); }
.more-rows[open] > summary { display: none; }
.day { font: 700 .95rem/1.4 var(--serif); color: var(--muted); margin: 26px 0 2px; }

.no-img { display: grid; place-items: center; }
.no-img::after { content: "画像を読み込めませんでした"; color: var(--muted); font-size: .75rem; padding: 8px; text-align: center; }

.guide-list { list-style: none; margin: 0; padding: 0; }
.guide-list li { padding: 12px 0; border-bottom: 1px solid var(--line); display: grid; gap: 2px; }
.guide-list a { font-weight: 700; }
.guide-list span { color: var(--muted); font-size: .85rem; }
.empty { padding: 48px 0; }
.empty h2 { font: 700 1.3rem/1.4 var(--serif); }

.breadcrumb { display: flex; gap: 8px; margin: 16px 0 6px; font-size: .8rem; color: var(--muted); }
.breadcrumb a { color: var(--muted); }

/* Work page */
.item-page h1 { font: 700 1.45rem/1.45 var(--sans); margin: 4px 0 6px; }
.pr-line { margin: 0 0 16px; font-size: .8rem; color: var(--muted); }
.item-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
.cover { margin: 0; border: 1px solid var(--line); background: var(--soft); }
.cover img { display: block; width: 100%; height: auto; }
.cover-small { display: grid; place-items: center; padding: 20px; }
.cover-small img { width: auto; max-width: 100%; }
.spec { margin: 0 0 18px; }
.spec div { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.spec dt { color: var(--muted); font-size: .85rem; }
.spec dd { margin: 0; }
.btn { display: inline-block; background: var(--accent); color: var(--accent-ink); text-decoration: none; font: 700 1rem/1.4 var(--sans); padding: 13px 24px; border: 0; border-radius: var(--radius); cursor: pointer; }
.btn:hover { text-decoration: underline; text-underline-offset: 3px; }
.cta-bar { position: sticky; bottom: 0; z-index: 10; display: flex; align-items: center; gap: 12px; margin: 12px 0; padding: 10px 0; background: linear-gradient(to top, var(--bg) 75%, transparent); }
.prose .cta-bar { position: static; background: none; } /* in articles a link sits after its paragraph, never over the text */
.cta-pr { color: var(--muted); font-size: .75rem; }
.samples { list-style: none; margin: 14px 0 0; padding: 0 0 8px; display: grid; grid-auto-flow: column; grid-auto-columns: min(420px, 82%); gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
.samples li { aspect-ratio: 16 / 9; background: var(--soft); border: 1px solid var(--line); overflow: hidden; scroll-snap-align: start; }
.samples a { display: block; width: 100%; height: 100%; }
.samples-note { margin-top: 6px; }
.dock { display: none; }
.costars { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.costars li { padding: 6px 0; }
.about-item p { margin: 0 0 8px; line-height: 1.8; }
.nav-pair { list-style: none; margin: 0 0 14px; padding: 0; font-size: .9rem; }
.nav-pair li { padding: 6px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.profile { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; margin: 8px 0 20px; }
.profile-img { width: 125px; height: auto; border: 1px solid var(--line); background: var(--soft); }
.profile .section-title { margin-top: 0; }
@media (max-width: 480px) { .profile { grid-template-columns: 1fr; } }
.more-link { margin: 8px 0 0; text-align: right; font-size: .9rem; }

/* Text pages */
.prose { max-width: 40rem; padding-top: 8px; }
.prose h1 { font: 700 1.8rem/1.4 var(--serif); margin: 14px 0 12px; }
.prose p { line-height: 1.95; text-wrap: pretty; }
.prose .section-title { font-size: 1.15rem; margin-top: 30px; border-top-width: 1px; }

.site-footer { border-top: 2px solid var(--text); padding: 20px 0 28px; font-size: .82rem; color: var(--muted); }
.site-footer a { display: inline-block; padding: 6px 0; } /* taller tap targets */
.footer-nav { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0; }
.footer-nav a { color: var(--muted); }
.copyright { margin: 8px 0 0; }

/* Age gate: the page stays in the HTML (crawlers and reviewers can read it); the overlay only hides it visually. */
#age-gate { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--bg); text-align: center; }
html.age-ok #age-gate { display: none; }
.age-box { max-width: 420px; }
.age-title { font: 700 1.7rem/1.3 var(--serif); margin: 0 0 12px; }
.age-actions { display: flex; flex-direction: column; gap: 10px; margin: 20px 0 12px; }
.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--line); }
.age-note { color: var(--muted); font-size: .85rem; }

@media (min-width: 760px) {
  .item-top { grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 28px; }
  .rows-dense { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 20px; }
  .rows-dense .title { font-size: .92rem; }
}
@media (min-width: 1100px) {
  .wrap { max-width: 1200px; } /* the old 960 column left a third of a laptop screen empty */
  .rows-dense { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .masthead-row { flex-wrap: wrap; gap: 6px 14px; }
  .masthead { top: -52px; } /* on phones the site name scrolls away; only the nav row stays */
  .filterbar { top: 49px; }
  html { scroll-padding-top: 64px; }
  .mainnav { order: 3; width: 100%; margin-left: 0; overflow-x: auto; scrollbar-width: none; white-space: nowrap; padding-bottom: 2px;
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent); mask-image: linear-gradient(to right, #000 88%, transparent); } /* fade hints more links */
  .mainnav a { padding: 6px 0; }
  .dock { display: flex; align-items: center; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; padding: 8px max(12px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); background: var(--bg); border-top: 1px solid var(--line); box-shadow: 0 -2px 10px rgb(0 0 0 / .15); transition: transform .25s ease; }
  .dock.away { transform: translateY(110%); }
  body:has(.dock.away) .saved-open { bottom: max(12px, env(safe-area-inset-bottom)); }
  .dock img { width: 64px; height: 43px; object-fit: contain; background: var(--soft); flex: none; }
  .dock-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 .85rem/1.3 var(--sans); }
  .dock .btn { padding: 11px 14px; font-size: .9rem; white-space: nowrap; min-height: 44px; }
  body:has(.dock) .saved-open { bottom: calc(76px + env(safe-area-inset-bottom)); }
  body:has(.dock) .site-footer { padding-bottom: 150px; }
  .item-side .cta-bar { position: static; }
  .site-footer { padding-bottom: 84px; } /* room for the saved-works button */
  .filterbar.open { position: relative; } /* opened controls scroll away instead of covering a quarter of the screen */
  /* Filter bar folds to one line; tap 絞り込み to open. */
  .fb-toggle { display: inline-flex; align-items: center; gap: 4px; justify-self: start; font: 700 .85rem/1 var(--sans); color: var(--text); background: var(--soft); border: 1px solid var(--line); border-radius: 999px; padding: 9px 14px; min-height: 40px; cursor: pointer; }
  .filterbar.is-active .fb-toggle { border-color: var(--accent); color: var(--accent); }
  .filterbar:not(.open) .fb-row { display: none; }
  .fb-inner { grid-template-columns: auto 1fr; align-items: center; }
  .fb-row { grid-column: 1 / -1; gap: 4px 6px; }
  .fb-status { justify-content: flex-end; }
  .chk { min-height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; }
  .chk:has(input:checked) { border-color: var(--accent); color: var(--accent); }
  .range { width: 100%; min-height: 40px; }
  .range input { flex: 1; width: auto; }
  .pill { line-height: 1; padding: 8px 11px; min-height: 32px; }
  .fav { font-size: 1.35rem; min-width: 44px; min-height: 44px; }
  .go-line { min-height: 44px; }
  .sorter a { padding: 11px 0 10px; }
  /* Dialogs become full-screen sheets. */
  .sheet { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-top: 4px solid var(--accent); }
  .sheet-body { max-height: 100%; height: 100%; padding: 14px max(14px, env(safe-area-inset-left)) calc(20px + env(safe-area-inset-bottom)); }
  .sheet-close { font-size: 1.7rem; min-width: 44px; min-height: 44px; }
  .mainnav::-webkit-scrollbar { display: none; }
  .badge-18 { margin-left: auto; }
  .section-title { font-size: 1.3rem; margin-top: 36px; }
  .row { grid-template-columns: 1.6rem 104px minmax(0, 1fr); gap: 0 10px; }
  .row:not(:has(.num)) { grid-template-columns: 104px minmax(0, 1fr); }
  .num { font-size: 1.15rem; }
  .rows-feature .row { grid-template-columns: 2.2rem minmax(0, 1fr); gap: 0 10px; }
  .rows-feature .thumb { grid-column: 2; }
  .rows-feature .row-body { grid-column: 2; padding-top: 8px; }
  .rows-feature .num { grid-row: 1; font-size: 2rem; }
  .rows-feature .row:not(:has(.num)) { grid-template-columns: minmax(0, 1fr); }
  .rows-feature .row:not(:has(.num)) .thumb, .rows-feature .row:not(:has(.num)) .row-body { grid-column: 1; }
  .item-page h1 { font-size: 1.25rem; }
}
/* Today's pick: a tear-off calendar page (日めくり) instead of a hero banner. */
.tonight { margin-top: 28px; }
.tonight-head { display: flex; align-items: center; gap: 16px; padding-bottom: 4px; }
.tonight-title { font: 700 1.5rem/1.3 var(--serif); }
.tonight-head .source { margin: 2px 0 0; }
.stamp { flex: none; width: 4.6rem; display: grid; justify-items: center; border: 1px solid var(--text); border-top: 6px solid var(--accent); background: var(--bg); padding: 2px 0 4px; transform-origin: 50% 0; }
.stamp-m, .stamp-w { font-size: .72rem; color: var(--muted); line-height: 1.4; }
.stamp-d { font: 700 2.3rem/1 var(--serif); font-variant-numeric: tabular-nums; }

/* Motion: small and purposeful. Nothing moves for visitors who ask for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; } /* page-to-page crossfade, no script */
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }
  body { transition: background-color .25s ease, color .25s ease; }
  .stamp { animation: tear-in .7s cubic-bezier(.2, .7, .2, 1) both .1s; }
  @keyframes tear-in { from { transform: perspective(400px) rotateX(-75deg); opacity: 0; } to { transform: none; opacity: 1; } }
  .sw-knob, .sw-icon { transition: transform .35s cubic-bezier(.2, .7, .2, 1), background-color .35s ease, box-shadow .35s ease; }
  .thumb.is-loading { animation: pulse .9s ease-in-out infinite alternate; }
  @keyframes pulse { from { opacity: .55; } to { opacity: 1; } }
  /* CTA: the fill darkens from left to right on hover instead of a glow. */
  .btn { background-image: linear-gradient(rgb(0 0 0 / .18), rgb(0 0 0 / .18)); background-repeat: no-repeat; background-size: 0 100%; transition: background-size .3s ease, transform .1s ease; }
  .btn:hover { background-size: 100% 100%; }
  .sorter a { transition: color .15s ease, border-color .2s ease; }
  .play-icon { transition: transform .2s ease; }
  .sheet[open] { animation: sheet-in .22s cubic-bezier(.2, .7, .2, 1); }
  @keyframes sheet-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  .fav { transition: transform .15s ease, color .15s ease; }
  .fav:active { transform: scale(.9); }
  .pill { transition: color .15s ease, border-color .15s ease; }
  .play-btn:hover .play-icon { transform: scale(1.08); }
  .go::after { transition: transform .18s ease; }
  .go:hover::after, .go:focus-visible::after { transform: translateX(4px); }
  .thumb { transition: border-color .18s ease; }
  .mainnav a, .more-lists a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .2s ease, color .2s ease; }
  .mainnav a:hover, .more-lists a:hover { background-size: 100% 1px; text-decoration: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

a, button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.num, .meta2, .spec dd { font-variant-numeric: tabular-nums; }
.spec dd, .item-page h1 { overflow-wrap: anywhere; }
.go:hover { text-decoration-thickness: 2px; }
.thumb:hover { border-color: var(--accent); }

/* Peek beside a list thumbnail (mouse only, explore.js). DMM images are only scaled, never cropped. */
.peek { position: fixed; z-index: 40; width: min(440px, 40vw); padding: 6px; background: var(--bg); border: 1px solid var(--line); box-shadow: 0 10px 28px rgb(0 0 0 / .28); pointer-events: none; animation: peek-in .14s ease-out; }
.peek img { display: block; width: 100%; height: auto; }
.peek-s { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 4px; }
.peek-s img { aspect-ratio: 3 / 2; object-fit: contain; background: var(--soft); }
@keyframes peek-in { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .peek { animation: none; } }