html:has(.scroll-preview),body.scroll-preview{height:100%;overflow:hidden}
.scroll-preview > .site-header{display:none}
.scroll-preview .section-menu{position:absolute;inset:0 0 auto;z-index:5;background:var(--paper)}
.scroll-preview .book{position:fixed;inset:0;overflow:hidden}
.scroll-preview .book>section,.scroll-preview .book>footer{position:absolute;inset:0;width:100%;height:100%;min-height:0;overflow-y:auto;overscroll-behavior-y:none;background:var(--paper)}
.scroll-preview .book>.hero{padding-top:calc(var(--book-header-height,89px) + 56px);overflow:hidden}
.scroll-preview .book>.work,.scroll-preview .book>.method,.scroll-preview .book>.about{padding-top:calc(var(--book-header-height,89px) + 78px)}
.scroll-preview .book>footer{padding-top:calc(var(--book-header-height,89px) + 56px)}
.scroll-preview.work-detail-open #work{padding-top:28px}
.scroll-preview .book>footer{background:#143748}
.scroll-preview .book>[hidden]{display:none!important}
.scroll-preview .site-header[data-page="hero"]{background:transparent}
.scroll-preview .site-header[data-page="contact"]{background:#143748}
.scroll-preview .book>section:focus,.scroll-preview .book>footer:focus{outline:none}
.scroll-preview .book.is-sliding>section:not([hidden]),.scroll-preview .book.is-sliding>footer:not([hidden]){will-change:transform}
.scroll-preview .book.is-sliding{pointer-events:none}
.scroll-preview.work-detail-open .book{top:0}
/* The disabled music control must stay hidden without the old book controller. */
.scroll-preview #player:has(#player-toggle:disabled){display:none}
.scroll-preview .book>section,.scroll-preview .book>footer{transform:translate3d(0,0,0)}
/* Preserve the existing typeface and placement; increase the Home hierarchy. */
.scroll-preview .hero h1{font-size:clamp(40px,4.4vw,56px)}
.scroll-preview .hero-copy{font-size:18px}
.scroll-preview .section-menu .brand,
.scroll-preview .section-menu .nav-links{font-size:17px}
.scroll-preview .section-menu .nav-links{gap:32px}
.scroll-preview .book>section,.scroll-preview .book>footer{scroll-behavior:auto}
@media(max-width:760px){
  .scroll-preview .hero h1{font-size:40px}
  .scroll-preview .hero-copy{font-size:17px}
  .scroll-preview .section-menu .brand,
  .scroll-preview .section-menu .nav-links,
  .scroll-preview .section-menu .nav-links a{font-size:16px}
  .scroll-preview .section-menu .nav-links{gap:8px}
}
/* overscroll-behavior-y: none (was contain): no bounce at a page's end, which
   is also what lets scroll-mode.js listen for the swipe to the next page
   without cancelling touches (a passive listener keeps the scroll native). */
/* Contact on a phone: the same parts in the same order as the desktop (times,
   links, note), stacked, from the top, the times centred. The same layout the
   book used (book-phone.css), here without the book's .book-sheet class. */
@media(max-width:760px){
  .scroll-preview .book>footer{align-items:flex-start}
  .scroll-preview .footer-grid{grid-template-columns:minmax(0,1fr);gap:48px;align-items:start}
  .scroll-preview #contact-sun{justify-self:stretch}
  .scroll-preview .sun{display:block}
  .scroll-preview .sun-grid{grid-template-columns:1fr max-content max-content 1fr}
  .scroll-preview .sun-grid>.sun-key:not([data-col]),.scroll-preview .sun-key[data-row]{grid-column:1}
  .scroll-preview .sun-key[data-col="0"],.scroll-preview .sun-cell[data-col="0"]{grid-column:2}
  .scroll-preview .sun-key[data-col="1"],.scroll-preview .sun-cell[data-col="1"]{grid-column:3}
}
/* Phones: the menu button and the list of rooms (scroll-mode.js phoneMenu),
   the same menu as the book's. Wider screens keep the row of links. */
.scroll-preview .menu-toggle,.scroll-preview .room-menu{display:none}
@media(max-width:760px){
  .scroll-preview .section-menu .nav{min-height:56px;padding:0;flex-wrap:nowrap;justify-content:flex-start;gap:0}
  .scroll-preview .section-menu .brand,.scroll-preview .section-menu .nav-links{display:none}
  .scroll-preview .menu-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-left:-12px;padding:0;border:0;background:none;color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent}
  .scroll-preview .menu-toggle svg{width:20px;height:14px;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round}
  .scroll-preview .menu-line{transform-origin:10px 7px;transition:transform .2s cubic-bezier(0.23,1,0.32,1),opacity .15s ease}
  .scroll-preview .menu-open .menu-line--1{transform:translateY(6px) rotate(45deg)}
  .scroll-preview .menu-open .menu-line--2{opacity:0}
  .scroll-preview .menu-open .menu-line--3{transform:translateY(-6px) rotate(-45deg)}
  .scroll-preview .section-menu[data-page="hero"] .menu-toggle{color:var(--sky-ink);filter:drop-shadow(0 0 6px var(--sky-halo,transparent))}
  .scroll-preview .section-menu[data-page="contact"] .menu-toggle{color:#dfe4e3}
  .scroll-preview .room-menu:not([hidden]){position:absolute;top:100%;left:0;right:0;display:flex;flex-direction:column;padding:4px 20px 12px;background:var(--paper);border-bottom:1px solid rgba(23,51,68,.12);box-shadow:0 16px 32px rgba(9,24,33,.10)}
  .scroll-preview .room-menu a{display:flex;align-items:baseline;gap:18px;min-height:44px;padding:11px 0;border-top:1px solid rgba(23,51,68,.08);color:var(--ink);font-size:1.05rem;line-height:1.3;text-decoration:none;-webkit-tap-highlight-color:transparent}
  .scroll-preview .room-menu a:first-child{border-top:0}
  .scroll-preview .room-menu-no{min-width:2.2em;color:#6f8793;font-size:.6875rem;letter-spacing:.16em;font-variant-numeric:tabular-nums}
  .scroll-preview .room-menu a[aria-current] .room-menu-name{font-weight:700}
  .scroll-preview .section-menu[data-page="hero"] .room-menu{background:var(--sky-base,#1b2a44);border-bottom-color:rgba(255,255,255,.10)}
  .scroll-preview .section-menu[data-page="hero"] .room-menu a{color:var(--sky-ink);border-top-color:rgba(255,255,255,.08)}
  .scroll-preview .section-menu[data-page="hero"] .room-menu-no{color:var(--sky-faint,#8fabb9)}
  .scroll-preview .section-menu[data-page="contact"] .room-menu{background:#143748;border-bottom-color:#416371}
  .scroll-preview .section-menu[data-page="contact"] .room-menu a{color:#dfe4e3;border-top-color:rgba(255,255,255,.08)}
  .scroll-preview .section-menu[data-page="contact"] .room-menu-no{color:#8fabb9}
}
@media(max-width:760px) and (prefers-reduced-motion:reduce){.scroll-preview .menu-line{transition:none}}
/* Touch screens: Home's name block gets its own layer, so Safari keeps it as
   one painted surface above the water while the page slides (it sat in a layer
   shared with the canvas and was drawn only after the slide). */
@media(hover:none) and (pointer:coarse){
  .scroll-preview .hero-introduction{transform:translateZ(0)}
}