/* Gallery of time — corridor, period gates and timeline rail. */
#time-gallery #filters{margin:5px 0 20px}
.tg-stage{position:relative;height:clamp(440px,46vw,660px);overflow:hidden;perspective:1100px;perspective-origin:50% 36%;background:radial-gradient(ellipse 70% 62% at 50% 38%,#1c1a16 0%,#0c0b0a 62%,#080807 100%);border:1px solid #ffffff12;outline:none;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.tg-stage:active{cursor:grabbing}
.tg-stage:focus-visible{border-color:#bda78380}
.tg-world{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;transform-style:preserve-3d;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.tg-floor{position:absolute;left:50%;top:0;transform-origin:top center;pointer-events:none;background-image:linear-gradient(to bottom,#e9e4d916 0 1px,transparent 1px),linear-gradient(90deg,transparent calc(50% - 1px),#c2ac8726 calc(50% - 1px),#c2ac8726 calc(50% + 1px),transparent calc(50% + 1px));background-repeat:repeat-y,no-repeat;-webkit-mask-image:linear-gradient(#000 0%,#000 30%,transparent 100%);mask-image:linear-gradient(#000 0%,#000 30%,transparent 100%)}
.tg-gate{position:absolute;left:50%;top:0;border:1px solid #e9e4d924;border-bottom:0;pointer-events:none;transition:opacity .9s}
.tg-gate span{position:absolute;left:50%;top:14px;transform:translateX(-50%);font-family:Cormorant,Georgia,serif;font-size:22px;letter-spacing:.24em;color:#c9b894;white-space:nowrap}
.tg-panel{position:absolute;left:50%;top:0;padding:0;display:flex;flex-direction:column;background:#0d0c0b;border:1px solid #ffffff14;box-shadow:none;text-align:left;cursor:pointer;transition:opacity .9s,visibility 0s,border-color .4s}
.tg-panel.is-gone,.tg-gate.is-gone{visibility:hidden;opacity:0!important;transition:none!important}
.tg-panel:hover{border-color:#bda78366}
.tg-panel.is-current{border-color:#bda783a6}
.tg-img{flex:1;min-height:0;display:block;background:#080909;overflow:hidden}
.tg-img img{width:100%;height:100%;object-fit:contain;padding:9%;box-sizing:border-box;}
.tg-img img.cover{object-fit:cover;padding:0}

.tg-cap{flex:none;display:flex;flex-direction:column;gap:6px;padding:12px 14px 14px;border-top:1px solid #ffffff10}
.tg-cap small,.tg-cap strong,.tg-cap em{display:block;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tg-cap small{font-size:9px;line-height:1.5;letter-spacing:.2em;color:#b5a489}
.tg-cap strong{font-family:Cormorant,Georgia,serif;font-weight:400;font-size:19px;letter-spacing:.06em;color:#e9e4d9;line-height:1.25}
.tg-cap em{font-style:normal;font-size:9px;line-height:1.5;letter-spacing:.16em;color:#9e978b}
.tg-hud{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;background:linear-gradient(transparent,#080807d9);pointer-events:none}
.tg-status{font-size:10px;letter-spacing:.2em;color:#c2bbae;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tg-nav{display:flex;gap:8px;pointer-events:auto}
.tg-nav button{width:44px;height:44px;border:1px solid #ffffff30;color:#e9e4d9;font-size:15px;transition:border-color .3s,opacity .3s}
.tg-nav button:hover{border-color:#bda783}
.tg-nav button:disabled{opacity:.3;cursor:default}
.tg-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);margin-top:18px;border-top:1px solid #ffffff25}
.tg-era{min-width:0;margin-top:-1px;padding-top:14px;box-shadow:inset 1px 0 0 #ffffff1a;padding-left:8px;border-top:1px solid transparent;transition:border-color .4s}
.tg-era.is-current{border-top-color:#c2ac87}
.tg-era-label{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:0;text-align:left;font-size:10px;letter-spacing:.18em;color:#9e978b;min-height:32px}
.tg-era-label b{font-family:Cormorant,Georgia,serif;font-weight:400;font-size:17px;letter-spacing:.1em;color:#9e978b}.tg-era.is-current .tg-era-label b{color:#e6ddcb}
.tg-era-label i{font-style:normal;font-size:9px;letter-spacing:.16em;color:#77705f}
.tg-era.is-current .tg-era-label{color:#e6ddcb}
.tg-era-label:hover{color:#e6ddcb}
.tg-ticks{display:flex;gap:0;margin:2px 0 0;padding-right:12px}
.tg-tick{position:relative;width:13px;height:32px}
.tg-tick:before{content:'';position:absolute;left:50%;top:50%;width:6px;height:6px;transform:translate(-50%,-50%) rotate(45deg);border:1px solid #9e978b;transition:background .3s,border-color .3s}
.tg-tick:hover:before{border-color:#e6ddcb}
.tg-tick[aria-current=true]:before{background:#c2ac87;border-color:#c2ac87}
.tg-tick.is-dim:before{opacity:.3}
#detail-image.contain{object-fit:contain;background:#080909;padding:12px}
@media(max-width:800px){.tg-tick{width:26px!important}.tg-rail{grid-auto-columns:minmax(110px,1fr);overflow-x:auto;scrollbar-width:none}.tg-rail::-webkit-scrollbar{display:none}.tg-tick{width:30px;height:44px}.tg-gate span{font-size:12px}}
@media(max-width:520px){.tg-stage{height:clamp(420px,120vw,540px)}.tg-hud{padding:10px 12px}.tg-status{font-size:9px}}
@media(prefers-reduced-motion:reduce){.tg-world,.tg-panel,.tg-gate{transition:none}}
.tg-shade{position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;inset:-1px;background:#080807;opacity:var(--shade,0);pointer-events:none;transition:opacity .9s}
@media(prefers-reduced-motion:reduce){.tg-shade{transition:none}}
#time-gallery{margin-top:8px}
@media(prefers-reduced-motion:reduce){.tg-floor{transition:none}}

/* Horizontal gestures leave vertical page scrolling available. */
.tg-stage{touch-action:pan-y pinch-zoom;cursor:grab}
.tg-stage.is-dragging,.tg-stage.is-dragging .tg-panel{cursor:grabbing}
.tg-panel,.tg-panel img{user-select:none;-webkit-user-drag:none}
.tg-world{transition:translate .25s ease,transform .95s cubic-bezier(.22,.61,.36,1)}
.is-dragging .tg-world{transition:none}

.tg-cap strong{white-space:normal;overflow-wrap:anywhere;font-size:16px;line-height:1.3}

/* Touch devices use a native horizontal strip: no 3D camera crossings or delayed reveals. */
@media(max-width:800px){
 .tg-stage{perspective:none;touch-action:pan-x pan-y pinch-zoom}
 .tg-world{display:flex;gap:16px;align-items:center;top:0;right:0;bottom:70px;left:0;inset:0 0 70px;padding:0 var(--edge-space,9%);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;touch-action:pan-x pan-y pinch-zoom;transform:none!important;translate:none!important;transform-style:flat;transition:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
 .tg-world::-webkit-scrollbar{display:none}
 .tg-world .tg-panel{position:relative;left:auto;top:auto;flex:0 0 var(--card-width,82%);height:calc(100% - 28px)!important;max-height:460px;transform:none!important;scroll-snap-align:center;visibility:visible!important;opacity:1!important;transition:border-color .2s;touch-action:pan-x pan-y pinch-zoom}
 .tg-gate,.tg-floor{display:none}
 .tg-shade{top:0;right:0;bottom:0;left:0;inset:0;transition:none}
 .tg-img img{pointer-events:none}
}

/* No transitions while (re)placing the corridor — prevents the load/resize flash. */
.tg-still .tg-world,.tg-still .tg-panel,.tg-still .tg-gate,.tg-still .tg-shade,.tg-still .tg-floor{transition:none!important}

/* Flicker pass: leaving items fade instead of vanishing; long jumps dip the corridor; images appear once decoded. */
.tg-panel.is-out,.tg-gate.is-out{opacity:0!important;pointer-events:none;transition:opacity .35s ease-out!important}
.tg-world{transition:translate .25s ease,transform .95s cubic-bezier(.22,.61,.36,1),opacity .4s ease-out}
.tg-world.tg-dip{opacity:0;transition:opacity .2s ease-in}
.is-dragging .tg-world{transition:none}
.tg-img img{transition:opacity .45s ease-out}.tg-img img.tg-wait{opacity:0}
@media(prefers-reduced-motion:reduce){.tg-world,.tg-world.tg-dip,.tg-panel.is-out,.tg-gate.is-out,.tg-img img{transition:none!important}}