/* The existing paper, type, colors and page gutters remain the design system. */
.folio { --folio-shadow: 0 18px 30px -18px rgb(0 0 0 / .35); border-bottom: 1px solid var(--border); padding: 64px 80px; scroll-margin-top: 90px; }
.folio-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.folio-heading h2 { font-family: var(--font-serif); font-size: clamp(2rem, 3.5vw, 3.5rem); font-weight: 400; line-height: 1.1; margin: 0 0 12px; }
.folio-heading p { font-size: .9rem; color: var(--gray-dark); }
.folio-options { display: flex; gap: 24px; align-items: center; padding-top: 9px; }
.folio a, .folio button, .folio-dialog button { color: var(--fg); text-underline-offset: 5px; }
.folio-options a, .folio-options button, .folio-footer, .folio-close { font-family: var(--font-sans); font-size: .75rem; }
.folio button, .folio-dialog button { background: none; border: 0; cursor: pointer; }
.folio-options button { text-decoration: underline; text-underline-offset: 5px; }
.folio-options a { text-decoration: none; }
.folio a:focus-visible, .folio button:focus-visible, .folio-dialog button:focus-visible { outline: 2px solid var(--fg); outline-offset: 6px; }
.folio ::selection { background: var(--fg); color: var(--bg); }
.folio-stage { position: relative; }
.folio-group { margin-top: 48px; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 28px; }
.folio-group h2 { grid-column: 1/-1; font-family: var(--font-serif); font-size: 1.7rem; font-weight: 400; }
.folio-card { display: block; text-decoration: none; min-width: 0; }
.folio-card img { display: block; width: 100%; height: auto; object-fit: cover; background: var(--card-bg); }
.folio-card.asset-unavailable img { visibility: hidden; }
.folio-photo img { aspect-ratio: 4 / 5; }
.folio-caption { display: flex; justify-content: space-between; gap: 12px; font-size: .68rem; line-height: 1.4; padding-top: 12px; }
.folio-caption > span:last-child { white-space: nowrap; color: var(--gray-dark); }
.folio-browser { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--card-bg); color: var(--gray-dark); font-size: .54rem; padding: 5px 9px; }
.folio-browser-dots { font-size: 1rem; line-height: 1; letter-spacing: 2px; }
.folio-website img { aspect-ratio: 1.44; }
.folio-video-image { display: block; position: relative; }
.folio-video img { aspect-ratio: 16 / 9; }
.folio-play { position: absolute; left: 12px; bottom: 12px; display: grid; place-items: center; width: 32px; height: 32px; background: var(--bg); color: var(--fg); }
.folio-play svg { width: 18px; height: 18px; fill: currentColor; }
.folio-footer { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 40px; }
.folio-chapters { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; }
.folio-chapters a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--gray-dark); position: relative; }
.folio-chapters a[aria-current="step"] { color: var(--fg); }
.folio-chapters a[aria-current="step"]::after { content: ''; position: absolute; height: 1px; background: currentColor; bottom: 7px; left: 0; right: 0; }
.folio-chapters a:first-child, .folio-chapters a:last-child { font-family: var(--font-serif); font-style: italic; font-size: 1rem; }
.folio-scroll, .folio-thread, .jf-sculpture { display: none; }
#folio-explore { white-space: nowrap; }
#about { scroll-margin-top: 88px; }
/* Enhancement is applied only after successful initialization. Static HTML is the fallback. */
.folio.is-spatial { height: 480svh; padding: 0 80px; }
.is-spatial .folio-sticky { position: sticky; top: calc(var(--nav-height) + 14px); height: calc(100svh - var(--nav-height) - 30px); min-height: 450px; max-height: 1000px; display: flex; flex-direction: column; padding: 35px 0 18px; }
.is-spatial .folio-stage { flex: 1; min-height: 0; perspective: 1400px; perspective-origin: 50% 45%; isolation: isolate; }
.is-spatial .folio-group { display: contents; }
.is-spatial .folio-group h2 { display: none; }
.is-spatial .folio-card { position: absolute; top: 50%; left: 50%; width: 22%; transform-origin: 50% 50%; backface-visibility: hidden; }
.is-spatial .folio-card img { box-shadow: var(--folio-shadow); }
.is-spatial .folio-photo { width: 19%; }
.is-spatial .folio-photo:nth-of-type(1) img { aspect-ratio: 5 / 4; }
.is-spatial .folio-website { width: 29%; }
.is-spatial .folio-video { width: 24%; }
.is-spatial .folio-footer { margin-top: 0; min-height: 60px; }
.is-spatial .folio-scroll { display: block; color: var(--gray-dark); }
.is-spatial .folio-thread { display: block; position: absolute; width: 100%; height: 100%; inset: 0; overflow: visible; pointer-events: none; color: var(--fg); opacity: .42; }
.folio-thread path { stroke: currentColor; fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; }
.is-spatial .jf-sculpture { display: block; position: absolute; width: 305px; height: 218px; top: 50%; left: 50%; transform-style: preserve-3d; pointer-events: none; }
.jf-block { position: absolute; left: calc(var(--x) * 4px); top: calc(var(--y) * 4px); width: calc(var(--w) * 4px); height: calc(var(--h) * 4px); transform-style: preserve-3d; }
.jf-face { position: absolute; display: block; background: var(--fg); backface-visibility: hidden; }
.jf-front, .jf-back { inset: 0; }
.jf-front { transform: translateZ(10px); }
.jf-back { transform: rotateY(180deg) translateZ(10px); }
.jf-left, .jf-right { width: 20px; height: 100%; left: calc(50% - 10px); background: var(--gray-dark); }
.jf-left { transform: rotateY(-90deg) translateZ(calc(var(--w) * 2px)); }
.jf-right { transform: rotateY(90deg) translateZ(calc(var(--w) * 2px)); }
.jf-top, .jf-bottom { height: 20px; width: 100%; top: calc(50% - 10px); background: var(--gray-mid); }
.jf-top { transform: rotateX(90deg) translateZ(calc(var(--h) * 2px)); }
.jf-bottom { transform: rotateX(-90deg) translateZ(calc(var(--h) * 2px)); }
.folio-dialog { position: fixed; margin: auto; width: min(1000px,92vw); max-height: 90svh; padding: 20px; border: 1px solid var(--border); background: var(--bg); color: var(--fg); }
.folio-dialog::backdrop { background: rgb(0 0 0 / .75); }
.folio-dialog-heading { display: flex; justify-content: space-between; gap: 24px; align-items: center; margin-bottom: 14px; }
.folio-dialog h2 { font-family: var(--font-serif); font-size: 1.6rem; margin: 0; }
.folio-close { min-height: 44px; padding: 8px; }
.folio-dialog video { display: block; width: 100%; max-height: 70svh; background: #0a0a0a; }
.folio-video-error { padding-top: 16px; }
.folio-video-error a { color: inherit; }
@media (max-width: 900px) {
 .folio, .folio.is-spatial { padding-left: 24px; padding-right: 24px; }
 .folio-options { gap: 16px; }
 .folio-chapters { gap: 20px; }
 .folio-caption > span:last-child { display: none; }
 .folio-group { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .is-spatial .folio-card { width: 38%; }
 .is-spatial .folio-photo { width: 31%; }
 .is-spatial .folio-website { width: 38%; }
 .is-spatial .folio-video { width: 38%; }
 .is-spatial .folio-scroll { display: none; }
}
@media (max-width: 600px) {
 .folio { padding-top: 40px; padding-bottom: 40px; }
 .folio.is-spatial { height: 400svh; }
 .folio-heading { gap: 18px; flex-direction: column; }
 .folio-heading h2 { font-size: 2rem; margin-bottom: 8px; }
 .folio-heading p { font-size: .8rem; }
 .folio-options { width: 100%; justify-content: space-between; padding: 0; }
 .folio-options button, .folio-options a { min-height: 30px; display: inline-flex; align-items: center; }
 .is-spatial .folio-sticky { padding-top: 22px; }
 .is-spatial .folio-footer, .folio-footer { flex-wrap: wrap; gap: 6px; padding-top: 12px; }
 .folio-chapters { width: 100%; justify-content: space-between; gap: 6px; }
 #folio-explore { font-size: .72rem; }
 .folio-caption { font-size: .61rem; padding-top: 8px; }
 .folio-browser { font-size: .4rem; padding: 3px 5px; gap: 3px; }
 .folio-group { gap: 24px 16px; }
 .folio-group h2 { font-size: 1.5rem; }
 .folio-play { width: 26px; height: 26px; left: 6px; bottom: 6px; }
}
@media (prefers-reduced-motion: reduce) {
 html { scroll-behavior: auto; }
 .folio *, .folio-dialog * { animation: none !important; transition: none !important; }
 #intro-bg, #intro-icon-wrap { display: none !important; }
}
@media print {
 .folio-options, .folio-chapters, .folio-scroll { display: none; }
 .folio { break-inside: auto; }
}
/* Captions remain readable when panels overlap. */
.folio-caption { font-size: .75rem; }
.folio-browser { font-size: .6875rem; }
.is-spatial .folio-website .folio-caption { background: var(--bg); padding: 9px 10px; }
@media (max-width: 600px) {
 .is-spatial .folio-photo { width: 39%; }
 .folio-caption { font-size: .75rem; }
 .folio-browser > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .folio-browser { font-size: .6875rem; }
 .is-spatial .folio-browser > span:nth-child(2) { visibility: hidden; }
 .is-spatial .folio-website .folio-caption { padding: 8px 0; }
}