.cylinder-intro{padding-bottom:40px}
body.culture-page .cylinder-intro h1{max-width:880px;font-size:48px;line-height:1.2;margin:16px 0 24px;text-wrap:balance}
.cylinder-intro .culture-lead{max-width:680px}
.cylinder-intro .culture-text-link{display:inline-flex;align-items:center;gap:16px;min-height:44px;margin-top:16px;color:var(--rust)}
.cylinder-gallery{padding-bottom:80px;--cylinder-ease:cubic-bezier(.22,1,.36,1)}
.cylinder-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.cylinder-toolbar[hidden],.cylinder-hint[hidden],.cylinder-summary[hidden]{display:none}
.cylinder-navigation,.cylinder-options{display:flex;align-items:center;gap:8px}
.cylinder-toolbar button,.cylinder-dialog button{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:8px 16px;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--ink);font:inherit;font-size:14px;line-height:20px;cursor:pointer;transition:background-color .3s var(--cylinder-ease),color .3s var(--cylinder-ease),transform .5s var(--cylinder-ease)}
.cylinder-navigation button{padding-inline:12px;font-size:20px}
.cylinder-toolbar button:hover,.cylinder-dialog button:hover{background:rgba(123,102,86,.08);color:var(--rust)}
.cylinder-toolbar button:active,.cylinder-dialog button:active{transform:translateY(1px)}
.cylinder-toolbar button:focus-visible,.cylinder-photo:focus-visible,.cylinder-stage:focus-visible,.cylinder-dialog button:focus-visible{outline:3px solid var(--rust);outline-offset:4px}
.cylinder-toolbar button:disabled,.cylinder-dialog button:disabled{cursor:default;opacity:.4}
.cylinder-position{font-size:12px;line-height:16px;font-variant-numeric:tabular-nums;padding-inline:8px;min-width:80px;text-align:center;color:var(--muted)}
.cylinder-hint{font-size:12px;line-height:20px;color:var(--muted);margin:0 0 16px}
.cylinder-ring{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 24px}
.cylinder-figure{margin:0;min-width:0}
.cylinder-photo{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;border:1px solid var(--line);border-radius:8px;background:#eee8df;color:var(--ink)}
.cylinder-photo img{display:block;width:100%;height:100%;object-fit:cover}
.cylinder-photo img[hidden]{display:none}
.cylinder-photo img[src$="/hearth-gathering.jpg"]{object-position:center 85%}
.cylinder-figure figcaption{display:grid;gap:8px;margin-top:16px;font-size:14px;line-height:20px}
.cylinder-figure figcaption strong{font-weight:500}
.cylinder-figure figcaption span{color:var(--muted);font-size:12px;line-height:20px}
.cylinder-image-error{position:absolute;inset:0;padding:24px;align-content:center;font-size:14px;line-height:24px;text-align:center}
.cylinder-image-error:not([hidden]){display:grid}
.cylinder-image-error[hidden]{display:none}
.cylinder-gallery.is-enhanced:not(.is-flat) .cylinder-stage{position:relative;height:560px;overflow:hidden;isolation:isolate;border:1px solid var(--line);border-radius:16px;background:#f1eee7;perspective:1100px;touch-action:pan-y pinch-zoom;cursor:grab;--tile-width:clamp(240px,27vw,320px);--tile-height:calc(var(--tile-width)*1.25);--cylinder-radius:calc(var(--tile-width)*1.35)}
.cylinder-gallery.is-enhanced:not(.is-flat) .cylinder-stage:before{content:"";position:absolute;inset:auto 8% 32px;height:80px;border:1px solid rgba(123,102,86,.16);border-radius:50%;pointer-events:none}
.cylinder-gallery.is-enhanced:not(.is-flat).is-dragging .cylinder-stage{cursor:grabbing}
.cylinder-gallery.is-enhanced:not(.is-flat) .cylinder-ring{display:block;position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;transform:translateZ(calc(var(--cylinder-radius)*-1)) rotateX(-4deg) rotateY(var(--cylinder-angle,0deg));will-change:transform}
.cylinder-gallery.is-enhanced:not(.is-flat).is-stepping .cylinder-ring{transition:transform .7s var(--cylinder-ease)}
.cylinder-gallery.is-enhanced:not(.is-flat) .cylinder-figure{position:absolute;left:calc(var(--tile-width)*-.5);top:calc(var(--tile-height)*-.5);width:var(--tile-width);height:var(--tile-height);transform:rotateY(var(--photo-angle)) translateZ(var(--cylinder-radius));backface-visibility:hidden;-webkit-backface-visibility:hidden;opacity:.65;transition:opacity .3s var(--cylinder-ease)}
.cylinder-gallery.is-enhanced:not(.is-flat) .cylinder-figure.is-current{opacity:1}
.cylinder-gallery.is-enhanced:not(.is-flat) .cylinder-photo{width:100%;height:100%;aspect-ratio:auto;box-shadow:0 16px 32px rgba(68,49,30,.12);pointer-events:none}
.cylinder-gallery.is-enhanced:not(.is-flat) .cylinder-figure.is-current .cylinder-photo{pointer-events:auto}
.cylinder-gallery.is-enhanced:not(.is-flat) .cylinder-figure figcaption{display:none}
.cylinder-summary{text-align:center;max-width:680px;margin:24px auto 0}
body.culture-page .cylinder-summary h2{font-size:24px;line-height:32px;margin:0 0 8px}
.cylinder-summary p{font-size:14px;line-height:24px;color:var(--muted);margin:0}
.cylinder-announcement{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.cylinder-dialog{width:min(1100px,calc(100% - 32px));max-height:calc(100dvh - 32px);padding:16px 24px;border:1px solid var(--line);border-radius:16px;background:var(--paper,#fbfaf7);color:var(--ink);overflow:auto;overscroll-behavior:contain}
.cylinder-dialog::backdrop{background:rgba(31,31,31,.82)}
.cylinder-dialog-toolbar,.cylinder-dialog-footer{display:flex;justify-content:space-between;align-items:center;gap:16px}
.cylinder-dialog-toolbar>span{font-size:12px;line-height:16px;font-variant-numeric:tabular-nums;color:var(--muted)}
.cylinder-dialog-stage{display:grid;place-items:center;min-height:160px;margin-block:16px}
.cylinder-dialog-stage img{display:block;max-width:100%;max-height:calc(100dvh - 224px);width:auto;height:auto;object-fit:contain;touch-action:pan-y pinch-zoom}
.cylinder-dialog-stage img[hidden]{display:none}
.cylinder-dialog-stage p{font-size:16px;line-height:24px;color:var(--muted)}
.cylinder-dialog-footer p{font-size:14px;line-height:24px;text-align:center;margin:0}
@media(max-width:1000px){.cylinder-ring{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){
 body.culture-page .cylinder-intro h1{font-size:36px;line-height:1.25}
 .cylinder-intro{padding-bottom:32px}
 .cylinder-gallery{padding-bottom:48px}
 .cylinder-toolbar{gap:12px}
 .cylinder-options{flex-wrap:wrap}
 .cylinder-toolbar button{padding:8px 12px}
 .cylinder-ring{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}
 .cylinder-gallery.is-enhanced:not(.is-flat) .cylinder-stage{height:400px;perspective:800px;--tile-width:224px}
 .cylinder-gallery.is-enhanced:not(.is-flat) .cylinder-stage:before{bottom:24px;height:64px;inset-inline:0}
 .cylinder-figure figcaption{margin-top:12px;font-size:14px}
 body.culture-page .cylinder-summary h2{font-size:20px;line-height:28px}
 .cylinder-dialog{padding:12px}
 .cylinder-dialog-footer{gap:8px}
 .cylinder-dialog-footer p{font-size:12px;line-height:20px}
}
@media(max-width:400px){.cylinder-gallery.is-enhanced:not(.is-flat) .cylinder-stage{height:360px;--tile-width:192px}.cylinder-options{width:100%;justify-content:flex-end}}
@media(prefers-reduced-motion:reduce){.cylinder-gallery *{transition:none!important}.cylinder-gallery.is-enhanced:not(.is-flat) .cylinder-ring{will-change:auto}}

/* Image continuity uses a named browser snapshot; it is absent on older engines. */
::view-transition-group(xiangxi-cylinder-image){animation-duration:.45s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
@supports (transition-behavior:allow-discrete){
 @media(prefers-reduced-motion:no-preference){
  html:not(.cylinder-photo-transition) .cylinder-dialog{opacity:0;transform:translateY(8px) scale(.985);transition:opacity .28s cubic-bezier(.22,1,.36,1),transform .4s cubic-bezier(.22,1,.36,1),display .4s allow-discrete,overlay .4s allow-discrete}
  html:not(.cylinder-photo-transition) .cylinder-dialog[open]{opacity:1;transform:none}
  html:not(.cylinder-photo-transition) .cylinder-dialog::backdrop{opacity:0;transition:opacity .28s cubic-bezier(.22,1,.36,1),display .4s allow-discrete,overlay .4s allow-discrete}
  html:not(.cylinder-photo-transition) .cylinder-dialog[open]::backdrop{opacity:1}
  html:not(.cylinder-photo-transition) .cylinder-dialog:not([open]),html:not(.cylinder-photo-transition) .cylinder-dialog:not([open])::backdrop{pointer-events:none}
  @starting-style{
   html:not(.cylinder-photo-transition) .cylinder-dialog[open]{opacity:0;transform:translateY(8px) scale(.985)}
   html:not(.cylinder-photo-transition) .cylinder-dialog[open]::backdrop{opacity:0}
  }
 }
}