/* 白鹿堂 · 怪异美学参考 · 预览样式 */
@font-face { font-family: "Noto Serif SC"; src: url("fonts/NotoSerifSC-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Noto Sans SC"; src: url("fonts/NotoSansSC-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/IBMPlexMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --paper: #F3F0E8; --ink: #1F1E1B; --grey: #6B6862; --hair: #CFCAC0; --accent: #8C3A2B;
  --serif: "Noto Serif SC", "Noto Serif CJK SC", "Source Han Serif SC", "Songti SC", serif;
  --sans: "Noto Sans SC", "Noto Sans CJK SC", "Source Han Sans SC", "PingFang SC", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Noto Sans Mono CJK SC", monospace;
  --pad: 48px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.8 var(--sans); }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; margin: 0; line-height: 1.3; }
p { margin: 0; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--pad); }
.num { color: var(--accent); margin-right: .32em; }

/* top bar */
.topbar-in { display: flex; justify-content: space-between; align-items: baseline; padding-top: 22px; padding-bottom: 16px; border-bottom: 1px solid var(--hair); background-clip: content-box; position: relative; }
.topbar-in::after { content: ""; position: absolute; left: var(--pad); right: var(--pad); bottom: -1px; border-bottom: 1px solid var(--hair); }
.topbar-in { border-bottom: 0; }
.brand { font-family: var(--serif); font-weight: 600; font-size: 24px; letter-spacing: .04em; }
.toplink { font-family: var(--serif); font-weight: 600; font-size: 18px; color: var(--accent); }
.toplink:hover, .brand:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }

/* frames */
.frame { position: relative; width: 100%; overflow: hidden; background: var(--paper); }
.frame.r169 { aspect-ratio: 16 / 9; }
.frame.r43 { aspect-ratio: 4 / 3; }
.frame.r11 { aspect-ratio: 1 / 1; }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame.empty { border: 1px solid var(--hair); display: flex; align-items: center; justify-content: center; }
.frame.empty span { color: var(--grey); font-size: 14px; letter-spacing: .2em; }

/* home */
.page-title { font-size: clamp(34px, 4.2vw, 56px); letter-spacing: .02em; margin: 64px 0 48px; }
.rows { list-style: none; margin: 0; padding: 0; }
.rows li + li { margin-top: 40px; }
.row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.row-text h2 { font-size: clamp(28px, 2.8vw, 40px); }
.row-text p { margin-top: 10px; font-size: 15px; color: var(--ink); }
.row:hover .row-text h2 { text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 1px; text-decoration-color: var(--hair); }
.about { margin-top: 96px; padding-top: 32px; }
.about h2 { font-size: 22px; padding-top: 32px; border-top: 1px solid var(--hair); }
.about p { margin-top: 10px; max-width: 36em; font-size: 15px; }

/* entry */
.hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); gap: 36px; align-items: center; margin-top: 56px; }
.hero-text h1 { font-size: clamp(34px, 3.6vw, 52px); }
.hero-text p { margin-top: 12px; font-size: 15px; }
.secs { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 72px; margin-top: 96px; }
.sec h2 { font-size: 21px; }
.sec p { margin-top: 12px; font-size: 15px; line-height: 1.9; }
.figs { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 40px; margin-top: 96px; padding-top: 48px; border-top: 1px solid var(--hair); align-items: start; }
figure { margin: 0; }
figcaption { margin-top: 10px; font-size: 14px; line-height: 1.7; color: var(--grey); }
.prompts { margin-top: 64px; border: 1px solid var(--hair); }
.prompts summary { list-style: none; cursor: pointer; padding: 14px 18px; display: flex; justify-content: space-between; align-items: center; font-size: 16px; }
.prompts summary::-webkit-details-marker { display: none; }
.prompts summary::after { content: ""; width: 8px; height: 8px; border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: rotate(-45deg); margin-right: 4px; transition: transform .15s; }
.prompts[open] summary::after { transform: rotate(45deg); }
.prompts[open] summary { border-bottom: 1px solid var(--hair); }
.prompt-list { padding: 8px 18px 24px; }
.prompt { padding-top: 24px; }
.prompt + .prompt { margin-top: 24px; border-top: 1px solid var(--hair); }
.prompt h3 { font-size: 17px; }
.prompt .todo { font-family: var(--sans); font-weight: 400; font-size: 14px; color: var(--grey); margin-left: .3em; }
.prompt pre { margin: 12px 0 0; font: 400 13px/1.7 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); }

/* footer */
.foot { margin-top: 96px; padding-bottom: 56px; }
.foot .brand { display: inline-block; margin-top: 24px; }
.home .foot { margin-top: 48px; }
.pager { display: flex; justify-content: space-between; gap: 24px; padding-top: 20px; border-top: 1px solid var(--hair); font-size: 16px; }
.pager .prev { color: var(--grey); }
.pager .prev.off { opacity: .7; }
.pager .next { color: var(--accent); font-family: var(--serif); font-weight: 600; margin-left: auto; }
.pager a:hover { text-decoration: underline; text-underline-offset: 5px; }

/* phone */
@media (max-width: 760px) {
  :root { --pad: 20px; }
  .topbar-in { padding-top: 16px; padding-bottom: 12px; }
  .brand { font-size: 22px; }
  .toplink { font-size: 16px; }
  .page-title { font-size: 32px; margin: 36px 0 28px; }
  .row { grid-template-columns: 1fr; gap: 14px; }
  .rows li + li { margin-top: 36px; }
  .row-text h2 { font-size: 28px; }
  .row-text p { margin-top: 6px; }
  .hero { grid-template-columns: 1fr; gap: 20px; margin: 0 calc(-1 * var(--pad)); }
  .hero .frame.empty { border-left: 0; border-right: 0; border-top: 0; }
  .hero-text { padding: 0 var(--pad); }
  .hero-text h1 { font-size: 36px; }
  .secs { grid-template-columns: 1fr; gap: 28px; margin-top: 48px; }
  .sec h2 { font-size: 19px; }
  .sec p { margin-top: 6px; }
  .figs { grid-template-columns: 1fr; gap: 28px; margin-top: 48px; padding-top: 32px; }
  .prompts { margin-top: 40px; }
  .prompt-list { padding: 4px 14px 20px; }
  .prompt pre { font-size: 12px; }
  .foot { margin-top: 56px; padding-bottom: 40px; }
  .about { margin-top: 64px; }
}
.figs .frame.r11 { width: 56.25%; }
@media (max-width: 760px) { .figs .frame.r11 { width: 100%; } }

/* Public collection navigation; preserve the established reference layout. */
.header-actions { display:flex; align-items:center; gap:24px; flex-wrap:wrap; justify-content:flex-end; }
.languages { display:flex; gap:16px; font-size:14px; }
.languages a { padding:8px 0; text-underline-offset:5px; }
.languages a[aria-current] { color:var(--accent); text-decoration:underline; }
.languages a:hover { text-decoration:underline; }
a:focus-visible, summary:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
.hero-text, .row-text { min-width:0; overflow-wrap:anywhere; }
html[lang="en"] .hero-text, html[lang="en"] .row-text { overflow-wrap:normal; word-break:normal; }
html[lang="en"] .hero-text h1 { font-size:clamp(30px,3vw,42px); }
@media(min-width:761px) {
  html[lang="en"] .hero { grid-template-columns:minmax(0,3fr) minmax(320px,2fr); }
  html[lang="en"] .row { grid-template-columns:minmax(0,2fr) minmax(clamp(280px,28vw,400px),1fr); }
}
.provenance { margin-top:20px; font-size:13px; color:var(--grey); max-width:65em; }
.pager { margin-top:64px; gap:24px; }
.frame img { object-fit:contain; }
@media(max-width:640px) { .topbar-in { align-items:flex-start; gap:18px; } .header-actions { gap:4px 16px; } .toplink { font-size:14px; } .languages { gap:12px; } .brand { white-space:nowrap; } .hero-text h1 { font-size:32px; } }
html[lang="ja"] { --sans:"Noto Sans JP",sans-serif; --serif:"Noto Serif JP",serif; }
@font-face { font-family:"Noto Sans JP"; src:url("fonts/NotoSansJP-Regular.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Noto Serif JP"; src:url("fonts/NotoSerifJP-SemiBold.woff2") format("woff2"); font-weight:600; font-display:swap; }

/* 漫游入口：标题右侧 */
.title-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin: 64px 0 48px; }
.title-row .page-title { margin: 0; }
.play-link { display: inline-flex; align-items: center; padding: 14px 26px; border: 1.5px solid var(--accent); background: var(--accent); color: var(--paper); font-size: clamp(17px, 1.5vw, 21px); letter-spacing: .06em; text-decoration: none; white-space: nowrap; transition: background .2s, color .2s; }
.play-link:hover, .play-link:focus-visible { background: var(--paper); color: var(--accent); }
.play-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 760px) {
  .title-row { margin: 36px 0 28px; gap: 16px; }
  .play-link { padding: 12px 20px; font-size: 16px; }
}