/* Page bounds in the 1440×900 design coordinate system (2× PNG exports scale identically).
   Keep the flipbook over the drawn pages; transparent PNG alpha defines the visible outline.
   Extend 5 logical pixels left and bottom while keeping the illustrated spine at x=720. */
:root {
 --about-page-x: 24.6527778%; /* 355 / 1440 */
 --about-page-y: 35.5555556%; /* 320 / 900 */
 --about-page-w: 50.6944444%; /* 730 / 1440 */
 --about-page-h: 48.3333333%; /* 435 / 900 */
}
.about-illustrated {
  max-width: none;
  width: 100%;
  padding: 0;
  margin: 0;
}
/* Preserve the drawing's 16:10 proportions while filling the viewport width. */
.about-table-scene {
  width: 100%;
}
.about-table-scene {position:relative;width:100%;aspect-ratio:1440/900;overflow:hidden}
.about-layer {position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.about-book-base {z-index:1}
.about-flipbook {
 position:absolute;z-index:2;
 left:var(--about-page-x);top:var(--about-page-y);
 width:var(--about-page-w);height:var(--about-page-h);
}
.about-page {position:relative;overflow:hidden;background:transparent!important}
/* StPageFlip creates its own page wrappers: don't paint an opaque rectangle
   behind the irregular transparent paper illustrations. */
.about-flipbook .stf__item,
.about-flipbook .stf__page,
.about-flipbook .stf__wrapper {background:transparent!important}
.about-page img {
 position:absolute;display:block;pointer-events:none;
 /* Each image remains a transparent full-scene PNG. The clipped viewport
    is one 365×435 page; shifts are measured against the same original canvas. */
 width:394.5205479%; /* 1440 / 365 */
 height:206.8965517%; /* 900 / 435 */
 top:-73.5632184%; /* -320 / 435 */
}
.about-page-left img {left:-97.2602740%;} /* -355 / 365 */
.about-page-right img {left:-197.2602740%;} /* -720 / 365 */
.about-arrow {
 position:absolute;inset:0;width:100%;height:100%;z-index:5;
 background:transparent;border:0;padding:0;pointer-events:none;
}
.about-arrow img {position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* Arrow artwork lives on the shared full-scene PNGs, not beside the book.
   Match the real pink arrows (approximately x=18–21% and x=76–80%,
   y=54–64%) with comfortably padded clickable areas. */
.about-arrow-hit {position:absolute;top:50%;width:10%;height:18%;pointer-events:auto;cursor:pointer}
.about-prev .about-arrow-hit {left:14%}
.about-next .about-arrow-hit {right:16%}
.about-arrow:focus-visible {outline:0}
.about-arrow:focus-visible .about-arrow-hit {outline:2px solid var(--accent);outline-offset:3px}
.about-arrow:disabled .about-arrow-hit {pointer-events:none;cursor:default}
.about-arrow:disabled img {opacity:.35}
.about-spread-count {
 position:absolute;
 left:50%;
 bottom:4%;
 transform:translateX(-50%);
 z-index:6;
 margin:0;
 font-size:clamp(10px,1vw,14px);
 color:var(--muted);
 text-align:center;
 white-space:nowrap;
 pointer-events:none;
}
.about-transcript {text-align:left;max-width:700px;margin:10px auto;color:var(--muted)}
.about-transcript summary {cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.about-transcript p {line-height:1.65}
.about-flipbook.is-fallback {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));cursor:pointer}
.about-flipbook.is-fallback .about-page {display:none}
.about-flipbook.is-fallback .about-page.is-visible {display:block}
@media(max-width:760px){
 .about-illustrated{padding-inline:0}
 /* Preserve artwork-relative positions on narrow screens; increase touch size
    around each arrow without moving the center of the hit target. */
 .about-arrow-hit{width:12%;height:22%;top:48%}
 .about-prev .about-arrow-hit{left:13%}
 .about-next .about-arrow-hit{right:15%}
}

/* All artwork uses the same full canvas as table.png. Hit bounds are measured
   from each PNG's alpha by about-table-objects.js, with fallback coordinates. */
.about-table-object {
  position:absolute; inset:0; display:block;
  pointer-events:none; z-index:7;
  transform-origin:var(--art-x) var(--art-y);
  transition:transform .3s ease;
}
.about-art-hit {
  position:absolute; display:grid; place-items:center;
  left:var(--art-x); top:var(--art-y);
  width:var(--art-w); height:var(--art-h);
  min-width:44px; min-height:44px;
  transform:translate(-50%,-50%);
  pointer-events:auto; border-radius:6px;
}
a.about-table-object .about-art-hit { cursor:pointer; }
.about-card-base { z-index:0; }
.about-contact-icon { z-index:1; }
.about-table-object:focus-visible { outline:none; }
.about-table-object:focus-visible > .about-art-hit {
  outline:2px solid var(--accent); outline-offset:4px;
}
.about-art-fallback {
  background:var(--paper); color:var(--ink);
  padding:6px 10px; border:1px solid var(--line);
  font-size:clamp(10px,1vw,14px); white-space:nowrap;
}
[data-table-art].has-art > .about-art-hit > .about-art-fallback { display:none; }
[data-table-art]:not(.has-art) > img { visibility:hidden; }
.about-contact-icon:not(.has-art) { --art-w:8% !important; }
@media (hover:hover) and (pointer:fine) {
  .about-gallery-ticket:hover { transform:translateY(-4px) rotate(-2deg); }
  .about-contact-card:hover { transform:translateY(-3px); }
  .about-contact-icon:hover { transform:scale(1.12); }
}
.about-gallery-ticket:focus-visible { transform:translateY(-4px) rotate(-2deg); }
.about-contact-card:focus-within { transform:translateY(-3px); }
.about-contact-icon:focus-visible { transform:scale(1.12); }
@media (prefers-reduced-motion:reduce) {
  .about-table-object { transition:none; transform:none !important; }
}

/* StPageFlip injects .stf__parent { position:relative } after our stylesheet.
   Keep this viewport anchored to the full-scene book drawing regardless of
   injection order. With autoSize:false, its wrapper must fill this viewport. */
.about-table-scene > .about-flipbook.stf__parent {
 position:absolute;
}
.about-flipbook > .stf__wrapper {
 position:relative;
 width:100%;
 height:100%;
}