@font-face { font-family:"Barlow Condensed"; src:url("/assets/fonts/barlow-condensed-latin.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Source Sans 3"; src:url("/assets/fonts/source-sans-3-latin.woff2") format("woff2"); font-weight:400 700; font-style:normal; font-display:swap; }
:root {
  color-scheme:light;
  --paper:#fff; --ink:#151515; --ink-soft:#414141; --muted:#606060;
  --line:#d8d8d8; --panel:#f3f3f1; --coral:#d92c20; --coral-dark:#a91c13;
  --body:"Source Sans 3","Hiragino Kaku Gothic ProN","PingFang TC","Apple SD Gothic Neo",sans-serif;
  --display:var(--body); --folio:"Barlow Condensed",sans-serif;
  --page-width:1440px; --gutter:clamp(1.25rem,4vw,4rem);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:2rem; }
body { margin:0; background:var(--paper); color:var(--ink); font:1.0625rem/1.65 var(--body); -webkit-font-smoothing:antialiased; }
[hidden] { display:none !important; }
a { color:inherit; text-decoration:none; }
a,button,input,select { -webkit-tap-highlight-color:transparent; }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid var(--coral-dark); outline-offset:4px; }
button,input,select { font:inherit; }
button { cursor:pointer; }
img { display:block; max-width:100%; height:auto; }
p { margin:0 0 1rem; }
h1,h2,h3 { margin:0; font-family:var(--display); font-weight:600; letter-spacing:-.035em; line-height:1.12; text-wrap:balance; }
h1 { font-size:clamp(2.75rem,4.6vw,4.75rem); }
h2 { font-size:clamp(2rem,3vw,3rem); }
h3 { font-size:1.5rem; letter-spacing:-.02em; }
.site-wrap { overflow:clip; }
.skip-link { position:absolute; left:-999px; top:.5rem; z-index:10; padding:.6rem 1rem; background:var(--ink); color:white; }
.skip-link:focus { left:.5rem; }
.site-header,.site-footer,.page-grid,.section,.article-shell,.simple-page { max-width:var(--page-width); margin:auto; }
.site-header { display:grid; grid-template-columns:auto 1fr auto; gap:2rem; align-items:center; padding:.8rem var(--gutter); border-bottom:1px solid var(--ink); }
.wordmark { display:inline-flex; align-items:center; min-height:44px; font:600 2.45rem/1 var(--folio); letter-spacing:-.025em; }
.accent-dot { color:var(--coral); }
.main-nav,.lang-switch { display:flex; align-items:center; gap:1.8rem; }
.main-nav { justify-content:center; font-size:1rem; }
.main-nav a,.lang-switch a { display:inline-flex; align-items:center; min-height:44px; min-width:44px; border-bottom:2px solid transparent; }
.lang-switch a { justify-content:center; }
.main-nav a:hover,.main-nav a[aria-current=page],.lang-switch a:hover,.lang-switch a[aria-current=page] { border-color:var(--coral); }
.header-end { display:flex; align-items:center; gap:.75rem; }
.lang-switch { gap:.8rem; font-size:.875rem; }
.age-mark { border-left:1px solid var(--line); padding-left:.75rem; font-size:.75rem; white-space:nowrap; }
.age-short { display:none; }
.eyebrow,.path-number { margin:0 0 1.4rem; color:var(--muted); font-size:.8rem; font-weight:600; line-height:1.5; letter-spacing:.09em; text-transform:uppercase; }
.square { display:none; }
.button,.store-button,.listing-link { display:inline-flex; align-items:center; justify-content:space-between; min-height:48px; gap:1rem; padding:.8rem 1rem; border:1px solid var(--ink); background:var(--ink); color:white; font-size:1rem; font-weight:600; line-height:1.4; }
.button:hover,.store-button:hover,.listing-link:hover { background:var(--coral-dark); border-color:var(--coral-dark); color:white; }
.button-outline,.store-button-ink { background:transparent; color:var(--ink); border-color:var(--line); }
.text-link { display:inline-flex; align-items:center; min-height:44px; gap:.75rem; text-decoration:underline; text-decoration-color:var(--coral); text-underline-offset:5px; font-size:1rem; }
.text-link:hover { color:var(--coral-dark); }
/* Homepage: one promise, then a visual explanation of the information gap. */
.hero.purpose-hero { display:grid; grid-template-columns:1.1fr 1fr; grid-template-areas:"intro diagram" "languages languages"; gap:2.5rem 4rem; align-items:center; padding:4rem var(--gutter) 1.5rem; border-bottom:1px solid var(--line); }
.purpose-intro { grid-area:intro; min-width:0; }
.purpose-hero h1 { font-size:clamp(3rem,5.7vw,5.7rem); line-height:1.04; max-width:12ch; margin-bottom:1.6rem; }
.hero-lead { max-width:35rem; color:var(--ink-soft); font-size:1.125rem; line-height:1.65; }
.hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:.7rem 1.5rem; margin-top:1.6rem; }
.format-shortcuts { display:flex; align-items:center; flex-wrap:wrap; gap:.5rem 1rem; margin-top:1rem; font-size:1rem; }
.format-shortcuts>span { color:var(--muted); }
.format-shortcuts a { display:inline-flex; align-items:center; min-height:44px; text-decoration:underline; text-underline-offset:5px; }
.language-diagram { grid-area:diagram; min-width:0; margin:0; padding:2rem; background:var(--ink); color:white; }
.diagram-kicker,.diagram-label { font-size:.75rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase; }
.diagram-kicker { margin-bottom:1.6rem; color:#bfbfbf; }
.language-pair { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:1rem; align-items:stretch; }
.language-pair>div { display:flex; flex-direction:column; justify-content:space-between; min-height:230px; padding:1rem; background:#292929; }
.language-pair strong { font:600 clamp(2.5rem,3.6vw,3.75rem)/1.2 var(--folio); }
.language-pair strong[lang] { font:600 clamp(1.65rem,2.6vw,2.5rem)/1.3 var(--body); white-space:nowrap; }
.language-pair strong>span,.language-divider { color:#ff796b; }
.language-pair p { margin:0; color:#d4d4d4; font-size:.9375rem; line-height:1.5; }
.language-divider { align-self:center; font-size:2rem; }
.language-diagram figcaption { margin-top:1.4rem; color:#d4d4d4; font-size:1rem; line-height:1.55; }
.content-languages { grid-area:languages; display:flex; flex-wrap:wrap; align-items:center; gap:.3rem 2rem; border-top:1px solid var(--line); padding-top:1rem; }
.content-languages>p { margin:0; color:var(--muted); font-size:.8rem; letter-spacing:.05em; text-transform:uppercase; }
.content-languages>div { display:flex; flex-wrap:wrap; gap:1.5rem; }
.content-languages a { display:inline-flex; min-height:44px; align-items:center; font-size:1rem; text-decoration:underline; text-underline-offset:5px; }
.section { padding:4rem var(--gutter); }
.section-heading { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:end; margin-bottom:2rem; }
.section-heading h2 { max-width:22ch; }
.section-heading .eyebrow { margin-bottom:1rem; }
.section-heading>p { margin:0; max-width:35rem; color:var(--ink-soft); }
.purchase-section { border-bottom:1px solid var(--line); }
.purchase-questions { display:grid; grid-template-columns:1fr 1fr; gap:0 3rem; list-style:none; margin:0; padding:0; }
.purchase-questions>li { display:grid; grid-template-columns:2rem 1fr; gap:1rem; padding:1.6rem 0; border-top:1px solid var(--ink); }
.question-number { color:var(--coral-dark); font:600 1.4rem/1.2 var(--folio); }
.purchase-questions h3 { margin-bottom:.6rem; font-size:1.6rem; }
.purchase-questions p { margin:0; max-width:36rem; color:var(--ink-soft); }
.shelf-grid,.lang-row { display:grid; grid-template-columns:1fr 1fr; gap:3rem; }
.shelf-card { display:block; border-top:1px solid var(--ink); border-bottom:1px solid var(--line); padding:1.3rem 0; }
.shelf-copy { display:block; }
.path-number { display:block; margin-bottom:1rem; }
.shelf-text h3 { margin-bottom:.8rem; font-size:1.7rem; }
.shelf-text p { margin:0; color:var(--ink-soft); }
.shelf-open { display:inline-flex; min-height:44px; align-items:center; margin-top:.5rem; text-decoration:underline; text-underline-offset:5px; font-size:1rem; }
.shelf-card:hover .shelf-open { color:var(--coral-dark); }
.lang-row { margin-top:2rem; }
.lang-row>a { display:block; border-bottom:1px solid var(--line); padding-bottom:1.3rem; }
.lang-copy { display:flex; flex-direction:column; gap:.4rem; }
.lang-copy>span,.lang-copy small { color:var(--muted); font-size:.9rem; }
.lang-copy strong { font-size:1.5rem; font-weight:600; line-height:1.3; }
.art-note { margin:1.8rem 0 0; max-width:56rem; color:var(--muted); font-size:.9375rem; }
.art-note a { text-decoration:underline; text-underline-offset:3px; }
.other-guides { padding-top:1rem; padding-bottom:1rem; border-top:1px solid var(--line); }
.other-guides summary { cursor:pointer; padding:.6rem 0; font-size:1rem; }
.other-guides summary>span { margin-left:1rem; color:var(--muted); }
.secondary-guide { display:grid; grid-template-columns:1fr 1fr; gap:1rem 3rem; padding:1.5rem 0; }
.secondary-guide>.text-link { grid-column:1; }
.secondary-guide>.hero-mosaic { grid-column:2; grid-row:1/3; }
.hero-mosaic { margin:0; }
.mosaic-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.65rem; }
.mosaic-grid a,.jacket-cover { display:block; aspect-ratio:240/340; background:var(--ink); border:1px solid var(--line); }
.mosaic-grid img,.jacket-cover img { width:100%; height:100%; object-fit:contain; }
.hero-mosaic figcaption { margin-top:.8rem; color:var(--muted); font-size:.875rem; line-height:1.6; }
.hero-mosaic figcaption a { text-decoration:underline; text-underline-offset:3px; }
.pr-tag { display:inline-block; padding:0 .35rem; margin-right:.3rem; border:1px solid var(--coral-dark); color:var(--coral-dark); font-size:.75rem; font-weight:600; }
.site-footer { border-top:1px solid var(--ink); padding:2.5rem var(--gutter) 1rem; }
.footer-top,.footer-bottom { display:flex; align-items:start; justify-content:space-between; flex-wrap:wrap; gap:1.5rem 3rem; }
.footer-brand { font:600 clamp(3.5rem,7vw,6.5rem)/1 var(--folio); letter-spacing:-.03em; }
.footer-top p { max-width:25rem; margin:0; color:var(--ink-soft); font-size:1rem; }
.footer-bottom { align-items:center; margin-top:2rem; border-top:1px solid var(--line); padding-top:.5rem; color:var(--muted); font-size:.875rem; }
.footer-bottom nav { display:flex; flex-wrap:wrap; gap:1rem; }
.footer-bottom a { display:inline-flex; min-height:44px; min-width:44px; align-items:center; text-decoration:underline; text-underline-offset:4px; }
/* Guide spreads use conceptual plates; the records beneath remain unchanged. */
.article-shell { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:0 4rem; padding:3.5rem var(--gutter) 5rem; }
.article-header { min-width:0; align-self:center; }
.article-header h1 { max-width:22ch; }
.article-deck { margin:1.4rem 0; max-width:40rem; color:var(--ink-soft); font-size:1.125rem; line-height:1.65; }
.article-meta { display:flex; flex-wrap:wrap; gap:.6rem 1.2rem; border-top:1px solid var(--line); padding:1rem 0 0; color:var(--muted); font-size:.875rem; }
.information-plate { min-width:0; margin:0; padding:1.8rem; background:var(--ink); color:white; }
.article-figure { grid-column:2; grid-row:1; align-self:center; }
.plate-kicker { margin:0 0 1.3rem; color:#c7c7c7; font-size:.75rem; font-weight:600; letter-spacing:.09em; }
.plate-row { display:grid; grid-template-columns:3.3rem 1fr; align-items:center; gap:1.2rem; border-top:1px solid #4f4f4f; padding:1.4rem 0; }
.plate-index { color:#ff796b; font:600 2.4rem/1 var(--folio); }
.plate-row strong { display:block; font-size:1.25rem; font-weight:600; line-height:1.3; }
.plate-row div>span { display:block; margin-top:.4rem; color:#c7c7c7; font-size:.9375rem; line-height:1.5; }
.information-plate figcaption { margin-top:.5rem; color:#d4d4d4; font-size:.9375rem; line-height:1.6; }
.article-layout { grid-column:1/-1; display:grid; grid-template-columns:minmax(0,1fr) 220px; align-items:start; gap:4rem; margin-top:3.5rem; }
.article-content { grid-column:1; grid-row:1; min-width:0; }
.article-rail { grid-column:2; grid-row:1; position:sticky; top:1.5rem; border-top:1px solid var(--ink); padding-top:1rem; }
.article-rail>.eyebrow { margin-bottom:.5rem; }
.article-rail>a { display:flex; align-items:center; min-height:46px; border-bottom:1px solid var(--line); color:var(--ink-soft); font-size:.9375rem; }
.article-rail>a:hover { color:var(--coral-dark); }
.rail-card { margin-top:1.5rem; padding:1rem; border:1px solid var(--line); }
.rail-card>span { font-size:.75rem; letter-spacing:.07em; color:var(--muted); }
.rail-card p { margin:.7rem 0; font-size:1rem; }
.rail-card a { display:flex; align-items:center; min-height:44px; font-size:.9375rem; text-decoration:underline; text-underline-offset:4px; }
.article-content section { margin-bottom:3.5rem; scroll-margin-top:2rem; }
.article-content h2 { margin-bottom:1.2rem; }
.article-content h3 { margin:1.5rem 0 1rem; font-size:1.55rem; line-height:1.3; }
.article-content p,.article-content li { color:var(--ink-soft); font-size:1.0625rem; line-height:1.75; }
.article-content section>p { max-width:72ch; }
.article-content strong { color:var(--ink); }
.article-content a:not(.listing-link):not(.store-button) { text-decoration:underline; text-decoration-color:var(--coral-dark); text-underline-offset:.2em; }
.article-content a:not(.listing-link):not(.store-button):hover { color:var(--coral-dark); }
.article-content ul { padding-left:1.25rem; }
.article-content li { margin-bottom:.7rem; }
.article-content .eyebrow { font-size:.8rem; margin-bottom:.75rem; }
.listing { display:grid; grid-template-columns:minmax(0,1fr) minmax(230px,.8fr); gap:.6rem 2rem; border-top:1px solid var(--line); padding:1.5rem 0; }
.listing-head { grid-column:1/-1; display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem; color:var(--muted); font-size:.8rem; letter-spacing:.04em; }
.listing h3 { grid-column:1; grid-row:2; margin:0; font-size:1.5rem; overflow-wrap:anywhere; }
.listing>p { grid-column:1; grid-row:3; margin:0; font-size:1rem; }
.listing>dl { grid-column:2; grid-row:2/4; margin:0; }
.listing dl>div { margin-bottom:.7rem; font-size:.9375rem; line-height:1.55; }
.listing dt { color:var(--muted); }
.listing dd { margin:0; font-weight:600; }
.listing-link { grid-column:2; width:100%; background:transparent; color:var(--ink); border-color:var(--line); }
.store-button { display:flex; margin:0 0 .7rem; }
.article-content .small-note { color:var(--muted); font-size:.9375rem; }
.checklist { list-style:none; padding:0; counter-reset:checks; }
.checklist li { counter-increment:checks; position:relative; padding:1.1rem 0 1.1rem 2.5rem; border-top:1px solid var(--line); }
.checklist li::before { content:counter(checks,decimal-leading-zero); position:absolute; left:0; top:1.25rem; color:var(--coral-dark); font:600 1.25rem/1 var(--folio); }
.sources { border-top:1px solid var(--ink); padding-top:1.5rem; }
.sources h2 { font-size:1.6rem; }
.sources li,.sources p { font-size:.9375rem; }
.catalogue-filter { position:sticky; top:1rem; z-index:3; display:grid; grid-template-columns:1.4fr 1fr auto; align-items:end; gap:.8rem 1rem; padding:1.2rem; margin:1.7rem 0 2.5rem; background:var(--panel); border:1px solid var(--line); }
.catalogue-filter label { display:block; margin-bottom:.45rem; font-size:.875rem; font-weight:600; }
.catalogue-filter input,.catalogue-filter select { display:block; width:100%; min-width:0; min-height:48px; padding:.65rem .75rem; border:1px solid var(--muted); border-radius:0; background:white; color:var(--ink); font-size:1rem; }
.catalogue-filter input::placeholder { color:var(--muted); opacity:1; }
.filter-reset { min-height:48px; padding:.65rem .8rem; border:1px solid var(--ink); background:white; color:var(--ink); font-size:.9375rem; }
.filter-reset:hover { background:var(--ink); color:white; }
.catalogue-filter output { grid-column:1/-1; color:var(--muted); font-size:.875rem; }
.catalogue-empty { padding:1.5rem; border:1px solid var(--line); background:var(--panel); }
.catalogue-group { margin-bottom:3rem; }
.catalogue-group [id] { scroll-margin-top:calc(var(--catalogue-filter-height,0px) + 1.5rem); }
.article-content .work-list { display:grid; grid-template-columns:1fr 1fr; gap:0 2rem; list-style:none; margin:1rem 0 0; padding:0; }
.article-content .work-list li { display:block; margin:0; padding:1rem 0; border-bottom:1px solid var(--line); overflow-wrap:anywhere; }
.article-content .work-list a { font-size:1rem; font-weight:600; line-height:1.5; }
.article-content .work-list small { display:block; margin-top:.4rem; color:var(--muted); font-size:.875rem; line-height:1.6; }
.simple-page { padding:3.5rem var(--gutter) 5rem; }
.document-header { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); align-items:center; gap:4rem; margin-bottom:3rem; }
.document-header>div { min-width:0; }
.simple-lead { margin:1.5rem 0 0; max-width:40rem; font-size:1.125rem; line-height:1.65; color:var(--ink-soft); }
.simple-page section { display:grid; grid-template-columns:220px minmax(0,1fr); gap:1.5rem 3rem; padding:2rem 0; border-top:1px solid var(--line); }
.simple-page section h2 { font-size:1.7rem; }
.simple-page section>p,.simple-page section>dl { grid-column:2; margin:0; max-width:65ch; }
.simple-page section>p { color:var(--ink-soft); }
.simple-page>h2 { font-size:1.8rem; margin:2rem 0 1rem; }
.simple-page>p { max-width:75ch; color:var(--ink-soft); }
.simple-page>ul { margin:1.5rem 0; padding-left:1.25rem; max-width:80ch; }
.simple-page li { padding:.7rem 0; color:var(--ink-soft); overflow-wrap:anywhere; }
.simple-page>.store-button { max-width:75ch; }
.visual-language-page h1 { font-size:clamp(2.2rem,3.6vw,3.25rem); letter-spacing:-.045em; line-height:1.25; }
.keep-phrase { white-space:nowrap; }
.verification-levels>div { display:grid; grid-template-columns:10rem minmax(0,1fr); gap:1.5rem; border-top:1px solid var(--line); padding:1rem 0; }
.verification-levels>div:first-child { border-top:0; padding-top:0; }
.verification-levels dt { font-weight:600; }
.verification-levels dd { margin:0; color:var(--ink-soft); }
/* Existing retailer embeds retain their original proportions and disclosures. */
.duga-shelf { grid-column:1/-1; padding:2rem; margin-top:2rem; background:var(--panel); }
.duga-shelf h2 { margin-bottom:1rem; }
.duga-shelf-head p { max-width:65ch; color:var(--ink-soft); }
.jacket-row { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:1rem; margin:1.8rem 0; }
.jacket-card { display:flex; flex-direction:column; min-width:0; gap:.4rem; }
.jacket-card h3 { font-size:1rem; line-height:1.4; letter-spacing:0; margin:.5rem 0 0; }
.jacket-ja { margin:0; color:var(--muted); font-size:.8125rem; line-height:1.5; overflow-wrap:anywhere; }
.jacket-open { display:flex; align-items:center; min-height:44px; margin-top:auto; font-size:.875rem; text-decoration:underline; text-underline-offset:4px; }
.duga-note { max-width:80ch; color:var(--ink-soft); font-size:.9375rem; }
.duga-media { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; align-items:center; margin:1.5rem 0; }
.duga-player { min-width:0; margin:0; }
.duga-player-frame { width:100%; aspect-ratio:540/300; background:var(--ink); }
.duga-player-frame>div { width:100%; max-width:100%; }
.duga-player-frame iframe,.duga-player-frame video,.duga-player-frame object,.duga-player-frame embed { width:100% !important; max-width:100%; height:auto !important; aspect-ratio:540/300; }
.duga-player figcaption { margin-top:.6rem; color:var(--muted); font-size:.875rem; }
.duga-banner { display:block; border:1px solid var(--line); }
.duga-banner img { width:100%; height:auto; }
/* On sale now: DLsite's own time-limited discounts, official covers shown whole. */
.sale-section { border-top:1px solid var(--line); }
.sale-inline { margin:0 0 3rem; padding:1.5rem; background:var(--panel); }
.sale-inline h2 { margin-bottom:.75rem; }
.sale-inline>p:not(.sale-disclosure) { color:var(--ink-soft); }
.sale-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(15rem,1fr)); gap:1.5rem; margin:1.5rem 0; }
.sale-card { display:flex; flex-direction:column; min-width:0; background:var(--paper); border:1px solid var(--line); }
.sale-cover { display:block; aspect-ratio:4/3; background:var(--ink); }
.sale-cover img { width:100%; height:100%; object-fit:contain; }
.sale-copy { display:flex; flex-direction:column; flex:1; gap:.35rem; padding:1rem; }
.sale-copy h3 { font-size:1rem; line-height:1.4; letter-spacing:0; margin:0; overflow-wrap:anywhere; }
.sale-off { margin:0; color:var(--coral-dark); font-weight:700; font-size:.9375rem; }
.sale-off span { color:var(--ink-soft); font-weight:600; }
.sale-circle,.sale-note { margin:0; color:var(--muted); font-size:.875rem; line-height:1.5; }
.sale-price { margin:.2rem 0 0; font-size:1rem; }
.sale-price s { color:var(--muted); }
.sale-price strong { font-size:1.25rem; }
.sale-price span { display:block; color:var(--muted); font-size:.8125rem; }
.sale-open { display:flex; align-items:center; min-height:44px; margin-top:auto; font-size:.9375rem; font-weight:600; text-decoration:underline; text-underline-offset:4px; }
.sale-disclosure { max-width:80ch; color:var(--ink-soft); font-size:.9375rem; }
@media(max-width:1100px) {
  .age-long { display:none; } .age-short { display:inline; }
  .site-header { gap:1.3rem; }
  .hero.purpose-hero,.article-shell,.document-header { column-gap:2rem; }
  .language-diagram { padding:1.5rem; }
  .language-pair { gap:.6rem; }
  .language-pair>div { padding:.75rem; min-height:200px; }
  .article-layout { grid-template-columns:minmax(0,1fr) 190px; gap:2.5rem; }
  .catalogue-filter { grid-template-columns:1.3fr 1fr; }
  .filter-reset { grid-column:2; grid-row:2; }
  .catalogue-filter output { grid-column:1; grid-row:2; align-self:center; }
  .listing { grid-template-columns:1fr; }
  .listing h3,.listing>p,.listing>dl,.listing-link { grid-column:1; grid-row:auto; }
  .listing>dl { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:.5rem; }
  .article-content .work-list { grid-template-columns:1fr; }
  .jacket-row { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:900px) {
  .site-header { grid-template-columns:1fr auto; gap:.2rem 1rem; padding-bottom:0; }
  .main-nav { grid-column:1/-1; grid-row:2; justify-content:flex-start; gap:1.5rem; }
  .header-end { gap:.5rem; }
  .hero.purpose-hero { grid-template-columns:1fr; grid-template-areas:"intro" "diagram" "languages"; gap:2rem; padding-top:2.5rem; }
  .purpose-hero h1 { font-size:clamp(2.9rem,7.5vw,4.5rem); }
  .language-diagram { max-width:680px; }
  .language-pair>div { min-height:180px; }
  .language-pair strong { font-size:3.5rem; }
  .language-pair strong[lang] { font-size:2.5rem; }
  .article-shell { display:block; }
  .article-figure { margin-top:2rem; max-width:680px; }
  .article-layout { display:flex; flex-direction:column; gap:2rem; margin-top:2.5rem; }
  .article-rail { position:static; width:100%; display:flex; flex-wrap:wrap; gap:.1rem 1.2rem; padding:.75rem 0; border-bottom:1px solid var(--line); }
  .article-rail>.eyebrow { width:100%; margin:0; }
  .article-rail>a { border:0; }
  .rail-card { display:none; }
  .article-content { width:100%; }
  .document-header { grid-template-columns:1fr; gap:2rem; }
  .document-figure { max-width:680px; }
  .simple-page section { grid-template-columns:180px minmax(0,1fr); gap:1rem 2rem; }
  .verification-levels>div { display:block; }
  .verification-levels dt { margin-bottom:.5rem; }
  .duga-media { grid-template-columns:1fr; }
  .duga-player { max-width:540px; }
}
@media(max-width:650px) {
  .sale-inline { padding:1rem; }
  .sale-grid { grid-template-columns:1fr; }
  :root { --gutter:1.25rem; }
  body { font-size:1rem; }
  h1 { font-size:2.55rem; } h2 { font-size:2rem; }
  .site-header { gap:.2rem .4rem; }
  .wordmark { font-size:2.1rem; }
  .lang-switch { gap:.2rem; font-size:.8125rem; }
  .age-mark { padding-left:.4rem; font-size:.75rem; }
  .main-nav { gap:1.4rem; font-size:.9375rem; }
  .eyebrow { font-size:.75rem; margin-bottom:1.1rem; }
  .hero.purpose-hero { padding-top:2rem; gap:1.7rem; }
  .purpose-intro>.eyebrow { max-width:29ch; }
  .purpose-hero h1 { font-size:clamp(2.65rem,12vw,3.5rem); margin-bottom:1.2rem; }
  .hero-lead,.article-deck,.simple-lead { font-size:1.0625rem; }
  .hero-actions { display:block; margin-top:1.2rem; }
  .hero-actions .button { width:100%; }
  .hero-actions .text-link { margin-top:.6rem; }
  .format-shortcuts { margin-top:.3rem; }
  .language-diagram { padding:1.15rem; }
  .diagram-kicker { font-size:.75rem; margin-bottom:1.2rem; }
  .language-pair { gap:.5rem; }
  .language-pair>div { min-height:170px; padding:.65rem; }
  .diagram-label { font-size:.75rem; letter-spacing:.015em; }
  .language-pair strong { font-size:clamp(1.75rem,8.2vw,2.8rem); }
  .language-pair strong[lang] { font-size:clamp(1.05rem,5.4vw,1.65rem); }
  .language-pair p { font-size:.875rem; }
  .language-divider { font-size:1.5rem; }
  .language-diagram figcaption { font-size:.9375rem; }
  .content-languages { display:block; }
  .content-languages>div { gap:1.3rem; }
  .section { padding-top:3rem; padding-bottom:3rem; }
  .section-heading { display:block; }
  .section-heading>p { margin-top:1rem; }
  .purchase-questions,.shelf-grid,.lang-row { grid-template-columns:1fr; gap:0; }
  .purchase-questions>li { grid-template-columns:1.5rem 1fr; gap:.75rem; }
  .shelf-card+.shelf-card { border-top:0; }
  .lang-row { gap:1.5rem; }
  .secondary-guide { display:block; }
  .secondary-guide>.hero-mosaic { margin-top:1.2rem; }
  .other-guides summary>span { margin-left:.5rem; }
  .footer-top,.footer-bottom { display:block; }
  .footer-top p { margin-top:1rem; }
  .footer-bottom { margin-top:1.5rem; }
  .footer-bottom nav { margin:.3rem 0; }
  .article-shell,.simple-page { padding-top:2rem; padding-bottom:3.5rem; }
  .article-header h1 { font-size:clamp(2.1rem,9.6vw,3rem); }
  .article-deck { margin:1.2rem 0; }
  .article-meta { font-size:.875rem; }
  .information-plate { padding:1.25rem; }
  .plate-row { grid-template-columns:2.5rem 1fr; gap:.85rem; padding:1.15rem 0; }
  .plate-index { font-size:2rem; }
  .plate-row strong { font-size:1.15rem; }
  .plate-row div>span,.information-plate figcaption { font-size:.9375rem; }
  .listing>dl { display:block; }
  .article-content h3,.listing h3 { font-size:1.35rem; }
  .article-content p,.article-content li { font-size:1.0625rem; }
  .catalogue-filter { position:static; grid-template-columns:1fr 1fr; padding:1rem; gap:.8rem; }
  .catalogue-search { grid-column:1/-1; }
  .catalogue-language { grid-column:1; }
  .filter-reset { grid-column:2; grid-row:2; }
  .catalogue-filter output { grid-column:1/-1; grid-row:3; }
  .catalogue-group [id] { scroll-margin-top:2rem; }
  .simple-page section { display:block; padding:1.5rem 0; }
  .simple-page section h2 { margin-bottom:1rem; }
  .simple-page section>p+ p { margin-top:1rem; }
  .simple-page section>dl { margin-bottom:1rem; }
  .visual-language-page h1 { font-size:clamp(1.7rem,7.3vw,2.5rem); }
  .duga-shelf { padding:1.25rem; }
  .jacket-row { grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.2rem 1rem; }
}
@media(max-width:360px) {
  .site-header { padding-left:1rem; padding-right:1rem; }
  .wordmark { font-size:1.9rem; }
  .header-end { gap:.2rem; }
  .main-nav { gap:1.25rem; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none !important; transition:none !important; }
}
.comic-cover { display:block; width:100%; max-width:320px; height:auto; margin:0 0 1rem; }
.comic-genres { display:flex; flex-wrap:wrap; gap:.4rem; list-style:none; padding:0; margin:1rem 0 0; }
.comic-genres li { border:1px solid var(--line); padding:.2rem .6rem; font-size:.9rem; }
.detail-link { margin-left:.5rem; font-size:.9rem; white-space:nowrap; }
.faq div { border-top:1px solid var(--line); padding:1rem 0; }
.faq dt { font-weight:600; }
.faq dd { margin:.4rem 0 0; }

/* 2026-11-04: from a reference LP ryo liked: a topic strip under the header, and an index + store button that stay in view. */
.home-tags { overflow:hidden; max-width:var(--page-width); margin:auto; border-bottom:1px solid var(--line); -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); }
.home-tags-track { display:flex; width:max-content; animation:home-ticker 55s linear infinite; }
.home-tags:hover .home-tags-track,.home-tags:focus-within .home-tags-track { animation-play-state:paused; }
.home-tags-track a { display:inline-flex; align-items:center; gap:.4rem; min-height:46px; padding:0 1.1rem; font-size:.875rem; font-weight:600; white-space:nowrap; }
.home-tags-track a::before { content:'#'; color:var(--coral); }
.home-tags-track a:hover { color:var(--coral-dark); }
@keyframes home-ticker { to { transform:translateX(-50%); } }
.home-rail,.home-dock { display:none; }
@media(min-width:1280px) {
  main:has(.home-rail) { padding-right:212px; }
  .home-rail { display:block; position:fixed; right:clamp(20px,2.5vw,40px); top:50%; transform:translateY(-50%); width:176px; z-index:5; opacity:0; visibility:hidden; transition:opacity 240ms,visibility 240ms; }
  html.rail-on .home-rail { opacity:1; visibility:visible; }
  .home-rail-label { margin:0 0 .6rem; font-size:.7rem; font-weight:700; letter-spacing:.12em; color:var(--muted); }
  .home-index { list-style:none; margin:0 0 1.2rem; padding:0 0 1rem; border-bottom:1px solid var(--line); }
  .home-index li { margin:0; padding:0; }
  .home-index a { display:flex; align-items:baseline; gap:.6rem; min-height:36px; padding:.35rem 0; font-size:.875rem; color:var(--muted); }
  .home-index a span { font-family:var(--folio); font-size:.8rem; }
  .home-index a:hover,.home-index a[aria-current] { color:var(--ink); }
  .home-index a[aria-current] span { color:var(--coral); font-weight:700; }
  .home-rail .button { width:100%; min-height:48px; padding:.6rem .8rem; font-size:.8rem; line-height:1.35; }
  .home-rail-note { margin:.5rem 0 0; font-size:.7rem; color:var(--muted); }
}
@media(max-width:650px) {
  .home-tags-track a { min-height:42px; padding:0 .9rem; font-size:.8rem; }
  .home-dock { display:flex; position:fixed; left:0; right:0; bottom:0; z-index:20; padding:.6rem 1rem calc(.6rem + env(safe-area-inset-bottom)); background:rgb(255 255 255 / .94); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-top:1px solid var(--line); transform:translateY(110%); transition:transform 240ms; }
  html.rail-on:not(.dock-off) .home-dock { transform:none; }
  .home-dock .button { flex:1; min-height:48px; font-size:.9rem; }
  body:has(.home-dock) { padding-bottom:76px; }
}
@media(prefers-reduced-motion:reduce) {
  .home-tags { overflow-x:auto; -webkit-mask-image:none; mask-image:none; }
  .home-tags-track { animation:none; }
  .home-tags-track a[aria-hidden] { display:none; }
  .home-rail,.home-dock { transition:none; }
}

/* 2026-11-10: title-anchor index lists linking the hubs to every comic page. */
.comic-index-list { display:grid; grid-template-columns:1fr 1fr; gap:0 2rem; list-style:none; margin:1rem 0 1.5rem; padding:0; }
.comic-index-list li { display:block; margin:0; padding:.6rem 0; border-bottom:1px solid var(--line); overflow-wrap:anywhere; }
.comic-index-list a { font-weight:600; line-height:1.5; }
@media(max-width:1100px) {
  .comic-index-list { grid-template-columns:1fr; }
}