@charset "UTF-8";
:root {
  color-scheme: dark;
  --ink: #f3efff;
  --muted: #c9c2df;
  --accent: #d9b8e8;
  --accent2: #9ad9dc;
  --panel: rgba(15, 19, 57, .78);
  --line: rgba(211, 190, 239, .32);
  --deep: #080d2b;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 1rem; }
body {
  margin: 0; color: var(--ink);
  background:
    radial-gradient(ellipse at 15% 8%, rgba(35, 93, 155, .36), transparent 34rem),
    radial-gradient(ellipse at 88% 28%, rgba(119, 44, 123, .24), transparent 34rem),
    linear-gradient(160deg, #080d2b 0%, #111238 52%, #080d2b 100%);
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  line-height: 1.95; letter-spacing: .035em;
}
a { color: #c7e8ef; text-underline-offset: .22em; }
a:hover { color: #fff; }
.skip-link { position: absolute; left: -9999px; top: 0; }
.skip-link:focus { left: 1rem; z-index: 99; background: #fff; color: #111; padding: .5rem; }
.site-header, main, .site-footer { width: min(100% - 2rem, 960px); margin-inline: auto; }
.site-header { text-align: center; padding: 1.5rem 0 2rem; }
.header-art, .footer-art { width: 100%; aspect-ratio: 16 / 5; margin: 0 auto 1.5rem; }
.placeholder-art, .image-placeholder, .cover-placeholder, .banner-placeholder {
  display: grid; place-items: center; color: rgba(240, 229, 255, .72);
  border: 1px dashed rgba(211, 190, 239, .45);
  background: linear-gradient(135deg, rgba(28, 69, 117, .55), rgba(104, 49, 117, .42));
  text-align: center;
}
.placeholder-art { letter-spacing: .22em; font: .75rem/1.5 sans-serif; }
.site-kicker { color: var(--muted); font-size: .85rem; margin: .5rem 0; }
h1 { font-size: clamp(2rem, 7vw, 3.5rem); font-weight: 500; letter-spacing: .16em; margin: .2rem 0; }
.site-subtitle { margin: 0 0 1.4rem; color: var(--muted); letter-spacing: .2em; }
.main-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem 1.1rem; padding: 1rem .5rem; border-block: 1px solid var(--line); }
.main-nav a { font: .76rem/1.4 sans-serif; letter-spacing: .12em; text-decoration: none; color: #e8d9f4; }
.poem-section { padding: 3.5rem .5rem 4rem; text-align: center; color: #eee5f6; line-height: 2.4; font-size: clamp(.9rem, 2.7vw, 1.08rem); }
.content-section { margin: 0 auto 3.5rem; padding: 1.3rem clamp(1rem, 4vw, 2rem) 2rem; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 12px 42px rgba(0,0,0,.16); }
.content-section > h2 { text-align: center; font-size: 1.45rem; font-weight: 500; letter-spacing: .24em; margin: .1rem 0 1.6rem; color: #f1d9f4; }
.subheading { text-align: center; font-size: 1rem; font-weight: 500; letter-spacing: .2em; margin: 2.2rem 0 1rem; color: var(--accent2); }
.section-intro { text-align: center; color: var(--muted); }
.accordion, .series-item { border-top: 1px solid var(--line); }
.accordion:last-child, .series-item:last-child { border-bottom: 1px solid var(--line); }
summary { cursor: pointer; list-style: none; position: relative; padding: 1rem 2rem 1rem .25rem; color: #f0dff5; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: .3rem; top: .9rem; color: var(--accent2); font: 1.2rem/1.5 sans-serif; }
details[open] > summary::after { content: "−"; }
.accordion-body { padding: .2rem .3rem 1.5rem; }
.nested-accordion { margin-left: .7rem; border-top: 1px solid rgba(211,190,239,.17); }
.nested-accordion summary { font-size: .93rem; }
.placeholder-note { color: #c5bdd6; font-style: italic; }
.work-meta, .age-label { color: #f4d9f1; font-size: .78rem; letter-spacing: .08em; }
.notice { color: #d8c8df; font-size: .86rem; }
.series-item summary { padding-block: 1.1rem; }
.series-title { display: block; color: #f5dff7; font-size: 1.02rem; }
.series-copy { display: block; color: #d9d0e8; font-size: .87rem; margin-top: .45rem; padding-right: .5rem; }
.age-label { display: inline-block; margin-top: .55rem; padding: .05rem .5rem; border: 1px solid rgba(232,190,227,.45); border-radius: 2rem; }
.age-r18 { color: #f0c0da; border-color: rgba(240,160,202,.55); }
.cover-placeholder { width: min(65%, 240px); aspect-ratio: 640 / 900; margin: 0 auto 1.5rem; padding: .5rem; }
.credit { border-top: 1px solid var(--line); padding-top: 1rem; color: var(--muted); font-size: .85rem; }
.gallery-grid { display: grid; grid-template-columns: 1fr; gap: 1.2rem; }
.gallery-card { border: 0; padding: 0; background: transparent; color: var(--ink); cursor: zoom-in; display: grid; gap: .55rem; text-align: center; font: inherit; }
.image-placeholder { width: 100%; aspect-ratio: 4 / 5; }
.gallery-card:nth-child(3) .image-placeholder, .gallery-card:nth-child(4) .image-placeholder { aspect-ratio: 3 / 2; }
.link-grid, .contact-grid { display: grid; grid-template-columns: 1fr; gap: .8rem; }
.banner-placeholder { min-height: 76px; padding: .8rem; text-decoration: none; border-radius: 3px; letter-spacing: .08em; }
.text-link { display: inline-block; margin-top: .7rem; }
.site-footer { text-align: center; padding: 1rem 0 3rem; color: var(--muted); font-size: .85rem; }
.site-footer a { font: .75rem/1.5 sans-serif; letter-spacing: .12em; }
.lightbox { border: 0; padding: 3.5rem 3rem 2.5rem; width: 100vw; max-width: none; height: 100dvh; max-height: none; background: rgba(4, 6, 22, .96); color: var(--ink); }
.lightbox[open] { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) 2.5rem; grid-template-rows: minmax(0, 1fr) auto; align-items: center; gap: .4rem; animation: lightbox-in .22s ease-out both; }
.lightbox::backdrop { background: rgba(0,0,0,.8); }
@keyframes lightbox-in { from { opacity: 0; } to { opacity: 1; } }
.lightbox-figure { grid-column: 2; grid-row: 1; margin: 0; min-width: 0; min-height: 0; display: grid; justify-items: center; align-content: center; gap: .7rem; }
.lightbox-image { display: block; max-width: 100%; max-height: calc(100dvh - 8rem); width: auto; height: auto; object-fit: contain; transition: opacity .18s ease; }
.lightbox-image.is-changing { opacity: 0; }
.lightbox-caption { text-align: center; color: #e6d7ef; }
.lightbox-count { grid-column: 2; grid-row: 2; text-align: center; color: var(--muted); font: .75rem/1.5 sans-serif; }
.lightbox-close, .lightbox-prev, .lightbox-next { border: 1px solid var(--line); color: #fff; background: rgba(30, 27, 66, .7); cursor: pointer; }
.lightbox-close { position: absolute; top: 1rem; right: 1rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; font-size: 1.5rem; }
.lightbox-prev, .lightbox-next { width: 2.3rem; height: 3.2rem; border-radius: 3px; font-size: 2rem; }
.lightbox-prev { grid-column: 1; grid-row: 1; }
.lightbox-next { grid-column: 3; grid-row: 1; }
@media (min-width: 680px) {
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
  .link-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .content-section { padding-inline: 2.5rem; }
}
@media (max-width: 480px) {
  .site-header, main, .site-footer { width: min(100% - 1.2rem, 960px); }
  .main-nav { gap: .7rem .85rem; }
  .lightbox { padding: 3.5rem 1rem 2rem; }
  .lightbox[open] { grid-template-columns: 2rem minmax(0, 1fr) 2rem; }
  .lightbox-prev, .lightbox-next { width: 1.8rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}