@font-face { font-family: "VT Sticker"; src: url(../assets/fonts/sticker.woff2) format("woff2"); font-display: swap; }
/* Sections 04–06: The Exhibition, The Consumption Shelf, Think Second Order.
   Motion values measured from stympaul.com; the art, covers and garden are original. */

:root {
  --pan: cubic-bezier(.4, .1, .2, 1);
  --shrink: cubic-bezier(.5, 0, .75, .4);
  --lift: cubic-bezier(.3, .7, .25, 1);
  --ret: cubic-bezier(.4, .1, .3, 1);
  --turn: cubic-bezier(.45, .05, .2, 1);
  --hair: color-mix(in srgb, var(--ink) 22%, transparent);
  --floor: color-mix(in srgb, var(--bg) 95.5%, var(--ink));
}
body { transition: background-color .6s ease, color .6s ease; }

/* shared section heading */
.xhead { position: absolute; top: 0; left: 0; right: 0; z-index: 4; text-align: center; padding: 3svh 24px 0; pointer-events: none; }
.ex .xhead { height: 19.5%; background: linear-gradient(var(--bg) 86%, color-mix(in srgb, var(--bg) 0%, transparent)); }
.xhead .sub { line-height: 1.32; }

/* ---------- 04 · the exhibition ---------- */
.ex { position: relative; height: 100svh; min-height: 600px; overflow: hidden; user-select: none; -webkit-user-select: none; }
.xs { position: absolute; inset: 0; cursor: grab; touch-action: pan-y; }
.xs.grab { cursor: grabbing; }
.xv { position: absolute; inset: 0; pointer-events: none; transform-style: preserve-3d; transition: transform .6s var(--pan); }
.xv.drag { transition: none; }
.xcam { position: absolute; left: 50%; width: 0; height: 0; transform-style: preserve-3d; transition: transform 1.1s var(--camera); }
.xroom { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; }
.xw, .xfl, .xce { position: absolute; transform-style: preserve-3d; backface-visibility: hidden; pointer-events: none; }
.xa { pointer-events: auto; }
.xw { left: -650px; top: -310px; width: 1300px; height: 620px; background: var(--bg); box-shadow: inset 0 0 0 1.4px var(--hair); transition: background-color .6s; }
.xfl, .xce { left: -650px; width: 1300px; height: 1300px; }
.xfl { top: -340px; background: var(--floor); transform: translateY(650px) translateY(-310px) rotateX(90deg) translateZ(0); top: 0; margin-top: -650px; transition: background-color .6s; }
.xce { top: 0; margin-top: -650px; background: var(--bg); box-shadow: inset 0 0 0 1.4px var(--hair); transition: background-color .6s; }
/* corner hairlines where walls meet floor */
.xw::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1.4px; background: var(--hair); }
.xw::before { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1.4px var(--hair); transform: translateZ(.6px); pointer-events: none; }

/* ceiling track and lamps (hang 190px out from each wall) */
.ex .xrail { transition: opacity .5s; } .ex.near .xrail { opacity: 0; }
.xrail { position: absolute; left: 0; top: 0; width: 1300px; height: 0; transform-style: preserve-3d; transform: translateZ(64px); pointer-events: none; }
.xtrack { position: absolute; left: 40px; right: 40px; top: -3px; height: 6px; background: color-mix(in srgb, var(--ink) 18%, var(--bg)); transform: rotateX(90deg); border-radius: 3px; }
.xlt { position: absolute; top: 0; width: 30px; height: 46px; margin-left: -15px; scale: .8; transform-origin: 50% 0; transform: rotateX(-32deg); transform-style: preserve-3d; }
.xlt::before { content: ""; position: absolute; left: 13px; top: -2px; width: 4px; height: 12px; background: color-mix(in srgb, var(--ink) 30%, var(--bg)); border-radius: 2px; }
.xlt i { position: absolute; left: 0; top: 9px; width: 30px; height: 37px; border-radius: 9px 9px 7px 7px;
  background: linear-gradient(90deg, #d9d6cf, #fbfaf7 38%, #eceae4 70%, #cfccc4); box-shadow: inset 0 -5px 0 -1px #bdb9b0; transition: filter .35s, box-shadow .35s; }
.xlt b { position: absolute; left: 4px; bottom: -3px; width: 22px; height: 7px; border-radius: 50%; background: #8c877c; transition: background .35s, box-shadow .35s; }
.xlt.on i { filter: drop-shadow(0 0 10px rgba(255, 214, 120, .9)); }
.xlt.on b { background: #fff1c2; box-shadow: 0 0 14px 6px rgba(255, 214, 120, .85); }

/* prints */
.xa { position: absolute; display: block; padding: 0; border: 0; background: #fff; cursor: zoom-in; transform-style: flat;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .1), 0 6px 14px rgba(0, 0, 0, .08); animation: xsway var(--d, 7s) ease-in-out var(--dl, 0s) infinite alternate; }
.xa img, .xa video { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; background: #ddd; }
.xa.p { padding: 5px; } .xa.p img { height: 100%; }
.xa:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }
@keyframes xsway { from { transform: translateZ(3px) translateY(0) rotate(-.25deg); } to { transform: translateZ(3px) translateY(3px) rotate(.25deg); } }   /* lifted 3px off the wall: no z-fighting */

/* hover light: room dims, a warm cone falls from the nearest lamp */
.xdim, .xbeam { position: fixed; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s ease; }
.xdim { z-index: 24; background:
  radial-gradient(ellipse var(--rx, 300px) var(--ry, 300px) at var(--cx, 50%) var(--cy, 50%), rgba(255, 192, 52, .5) 0%, rgba(255, 204, 92, .24) 36%, rgba(18, 14, 8, 0) 56%, rgba(18, 14, 8, .5) 100%); }
.xbeam { z-index: 25; mix-blend-mode: screen; filter: blur(2.5px); }
.xbeam i { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 186, 50, .95) var(--ly, 0px), rgba(255, 196, 70, .62) calc(var(--ly, 0px) + 70px), rgba(255, 206, 100, .26) var(--by, 100%), rgba(255, 220, 140, 0) calc(var(--by, 100%) + 20px)); }
.xon .xdim, .xdim.on, .xbeam.on { opacity: 1; }
.xcard { position: fixed; z-index: 26; left: 0; top: 0; max-width: 240px; background: #2c2c2c; color: #fff; padding: 10px 12px; border-radius: 3px; box-shadow: 0 6px 20px rgba(0, 0, 0, .2);
  font: .7rem/1.4 var(--sans); pointer-events: none; opacity: 0; transform: rotate(-2deg) translateY(6px); transition: opacity .2s, transform .2s; }
.xcard.on { opacity: 1; transform: rotate(-2deg); }
.xcard b { display: block; font: italic .9rem var(--italic); margin-bottom: 2px; }

.xb { position: absolute; top: 59%; z-index: 6; width: 48px; height: 58px; margin-top: -29px; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--bg); color: var(--ink);
  display: grid; place-items: center; cursor: pointer; transition: border-color .2s, transform .2s, opacity .3s; padding: 0; }
.xb svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.xb:hover { border-color: var(--red); }
.xb[aria-disabled="true"]:hover { border-color: var(--ink); transform: none; }
.xprev { left: 18px; } .xprev:hover { transform: rotate(-3deg); }
.xnext { right: 18px; } .xnext:hover { transform: rotate(3deg); }
.xb[aria-disabled="true"] { opacity: .3; cursor: default; }
.xb:focus-visible, .xdots button:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.xhint { position: absolute; left: 0; right: 0; bottom: 40px; z-index: 5; text-align: center; margin: 0; font: italic .82rem var(--italic); color: var(--soft); pointer-events: none;
  opacity: 0; transition: opacity .8s; }
.xhint.show { opacity: 1; } .xhint.gone { opacity: 0; }
.xdots { position: absolute; left: 50%; bottom: 15px; z-index: 6; transform: translateX(-50%); display: flex; gap: 9px; }
.xdots button { width: 11px; height: 11px; padding: 0; border-radius: 50%; border: 1.4px solid var(--ink); background: transparent; cursor: pointer; transition: background .3s; }
.xdots button[aria-pressed="true"] { background: var(--ink); }
.xz { z-index: 6; }

.xlb { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: rgba(20, 14, 8, .62); padding: 5svh 24px; opacity: 0; transition: opacity .3s; }
.xlb.on { opacity: 1; }
.xlb[hidden] { display: none; }
.xlb figure { margin: 0; display: flex; flex-direction: column; align-items: center; max-height: 100%; transform: scale(.96); transition: transform .5s var(--settle); }
.xlb.on figure { transform: none; }
.xlb img { max-width: min(86vw, 1100px); max-height: 78svh; background: #fff; padding: 8px; box-shadow: 0 20px 50px rgba(0, 0, 0, .35); }
.xlb figcaption { margin-top: 14px; color: #f7f1e6; font: italic 1rem var(--italic); text-align: center; }
.xlb figcaption span { display: block; font: .75rem var(--sans); color: #d9d1c3; font-style: normal; margin-top: 3px; }
.xlb > button, .fbx { position: fixed; top: 20px; right: 20px; z-index: 2; font: 1rem var(--serif); color: #fff8ec; background: none; border: 1.5px solid #fff8ec; border-radius: 50% / 60%; padding: .3em 1em; cursor: pointer; transition: border-color .2s; }
.xlb > button:hover, .fbx:hover { border-color: #ffe2a0; }

/* ---------- 05 · the consumption shelf ---------- */
.shelf { position: relative; height: 100svh; min-height: 640px; overflow: hidden; }
.srow { position: absolute; left: 0; right: 0; bottom: calc(19.4svh + 0px); height: 500px; overflow-x: auto; overflow-y: visible; scrollbar-width: none; cursor: grab; }
.srow::-webkit-scrollbar { display: none; }
.srow.grab { cursor: grabbing; }
.sbooks { display: flex; align-items: flex-end; gap: 6px; height: 100%; min-width: 100%; width: max-content; justify-content: center; padding: 0 7vw; }
.plank { position: absolute; left: 0; right: 0; bottom: calc(19.4svh - 38px); height: 38px; z-index: 2;
  background: linear-gradient(rgba(255, 236, 205, .35), rgba(255, 236, 205, 0) 16%, rgba(0, 0, 0, 0) 72%, rgba(60, 30, 10, .25)), url(../assets/img/wood.jpg) center / auto 100% repeat-x, #b57b43;
  box-shadow: 0 10px 14px -8px rgba(60, 30, 10, .35); }
.plank::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(#d39a5c, #b57b43); }
.shint { bottom: calc(19.4svh - 80px); }

.bk { position: relative; flex: 0 0 auto; padding: 0; border: 0; background: none; cursor: pointer; transform-style: preserve-3d; transform-origin: 100% 50%;
  transform: perspective(900px) translateY(0) translateZ(0) rotateY(0); transition: transform .38s var(--settle); }
.bk:hover, .bk:focus-visible { transform: perspective(900px) translateY(-14px) translateZ(46px) rotateY(-34deg); z-index: 3; }
.bk:focus-visible { outline: none; }
.bk:focus-visible .sp { outline: 2px solid var(--red); outline-offset: 3px; }
.bk.out { visibility: hidden; }
.bk .sp, .bk .cvw { position: absolute; top: 0; height: 100%; backface-visibility: hidden; overflow: hidden; }
.bk .sp { left: 0; width: 100%; box-shadow: inset -1px 0 0 rgba(0, 0, 0, .12), inset 1px 0 0 rgba(255, 255, 255, .25); }
.bk .cvw { left: 100%; transform-origin: 0 50%; transform: rotateY(90deg); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.cvw .cov, .pgw > .cov, .pgw > .pg { transform-origin: 0 0; }

/* spine artwork */
.sp { display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 10px 0 12px; color: var(--si); background: var(--sb); font-family: var(--sans); }
.sp .v { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; line-height: 1; }
.sp .n { font: 500 11px/1 var(--sans); letter-spacing: .04em; text-transform: uppercase; }
.sp .y { font: 500 11px/1 var(--sans); }
.sp .m { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.sp .k { font: 400 13px/1 var(--serif); letter-spacing: .02em; }
.sp.stack .m .v { font: 400 46px/.86 var(--serif); letter-spacing: -.01em; }
.sp.repeat { background: var(--sb); }
.sp.repeat .m { flex-direction: row; gap: 2px; }
.sp.repeat .m .v { font: italic 15px/1 var(--italic); color: var(--sa); opacity: .95; }
.sp.outline .m .v { font: italic 52px/.9 var(--italic); color: transparent; -webkit-text-stroke: 1.3px var(--si); }
.sp.grid { background-image: linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px); background-size: 14px 14px; }
.sp.grid .m .v { font: 500 30px/1 var(--sans); text-transform: uppercase; letter-spacing: .06em; color: var(--sa); }
.sp.dots { background-image: radial-gradient(circle at 50% 50%, var(--si) 2.2px, transparent 2.6px); background-size: 12px 12px; }
.sp.dots .m .v { font: 500 34px/1 var(--sans); text-transform: uppercase; background: var(--sb); padding: 4px 3px; letter-spacing: .02em; }
.sp.stripe { background-image: repeating-linear-gradient(0deg, var(--si) 0 3px, transparent 3px 11px); }
.sp.stripe .m .v { font: italic 46px/.9 var(--italic); color: var(--sa); background: var(--sb); padding: 6px 4px; }
.sp.numeral .m { flex-direction: column; gap: 10px; }
.sp.numeral .m .big { font: 400 54px/.8 var(--serif); color: var(--sa); writing-mode: horizontal-tb; transform: none; }
.sp.numeral .m .v { font: italic 22px/1 var(--italic); }
.sp.wave { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='16'%3E%3Cpath d='M0 8 Q6 2 12 8 T24 8' fill='none' stroke='%23183c34' stroke-opacity='.28' stroke-width='1.4'/%3E%3C/svg%3E"); }
.sp.wave .m .v { font: italic 44px/.9 var(--italic); color: var(--si); }
.sp .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--sa); }

/* covers + pages are drawn at 460×575 and scaled */
.cov, .pg { position: absolute; left: 0; top: 0; width: 460px; height: 575px; overflow: hidden; color: var(--si); background: var(--sb); font-family: var(--sans); }
.cov .ct, .pg .ct { position: absolute; left: 26px; right: 26px; top: 24px; display: flex; justify-content: space-between; font: 500 11px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.cov .cb { position: absolute; left: 26px; right: 26px; bottom: 24px; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; font: 12px/1.35 var(--sans); }
.cov .cb i { font: italic 18px/1.1 var(--italic); max-width: 240px; }
.cov .cb b { font: 500 11px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; text-align: right; }
.cov .art { position: absolute; left: 0; right: 0; top: 60px; bottom: 96px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cov.stack .art { flex-direction: column; align-items: flex-start; padding: 0 22px; justify-content: center; }
.cov.stack .art span { font: 400 148px/.8 var(--serif); letter-spacing: -.03em; }
.cov.stack .art span:nth-child(2) { color: var(--sa); padding-left: 60px; }
.cov.stack .art em { position: absolute; right: 30px; top: 30px; width: 86px; height: 86px; border-radius: 50%; background: var(--sa); }
.cov.repeat .art { flex-direction: column; gap: 0; }
.cov.repeat .art span { font: italic 54px/.92 var(--italic); color: var(--sa); white-space: nowrap; }
.cov.repeat .art span:nth-child(odd) { color: var(--si); transform: translateX(-40px); }
.cov.outline .art span { font: italic 210px/.8 var(--italic); color: transparent; -webkit-text-stroke: 2px var(--si); writing-mode: vertical-rl; transform: rotate(180deg); }
.cov.outline .art em { position: absolute; left: 40px; top: 40px; font: 400 26px/1.1 var(--serif); font-style: normal; max-width: 170px; }
.cov.grid { background-image: linear-gradient(rgba(255,255,255,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.13) 1px, transparent 1px); background-size: 23px 23px; }
.cov.grid .art span { font: 500 132px/.84 var(--sans); text-transform: uppercase; color: var(--sa); letter-spacing: -.02em; text-align: center; }
.cov.dots { background-image: radial-gradient(circle, var(--si) 3.4px, transparent 3.9px); background-size: 23px 23px; background-position: 11px 11px; }
.cov.dots .art span { font: 500 120px/.86 var(--sans); text-transform: uppercase; background: var(--sb); padding: 10px 16px 4px; letter-spacing: -.03em; }
.cov.stripe { background-image: repeating-linear-gradient(0deg, var(--si) 0 5px, transparent 5px 19px); }
.cov.stripe .art span { font: italic 170px/.8 var(--italic); color: var(--sa); background: var(--sb); padding: 4px 18px 26px; }
.cov.numeral .art { flex-direction: column; }
.cov.numeral .art span { font: 400 330px/.75 var(--serif); color: var(--sa); letter-spacing: -.04em; }
.cov.numeral .art em { font: italic 40px/1 var(--italic); margin-top: 6px; }
.cov.wave { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='30'%3E%3Cpath d='M0 15 Q11.5 3 23 15 T46 15' fill='none' stroke='%23183c34' stroke-opacity='.25' stroke-width='2'/%3E%3C/svg%3E"); }
.cov.wave .art span { font: italic 132px/.82 var(--italic); text-align: center; }
.cov.wave .art em { position: absolute; width: 150px; height: 150px; border-radius: 50%; background: var(--sa); right: -30px; top: 10px; }
.cov .art span, .cov .art em { position: relative; z-index: 1; }
.cov.dots .ct span, .cov.dots .cb > *, .cov.stripe .ct span, .cov.stripe .cb > *, .cov.grid .ct span { background: var(--sb); padding: 3px 5px; }
.cov.wave .art em, .cov.stack .art em { z-index: 0; }

.pg { background: var(--pb); color: var(--pi); }
.pg .ph { position: absolute; left: 26px; right: 26px; top: 60px; font: 400 64px/.9 var(--serif); letter-spacing: -.02em; color: var(--sa); }
.pg .ol { position: absolute; left: 26px; right: 26px; top: 168px; list-style: none; margin: 0; padding: 0; }
.pg .ol li { display: grid; grid-template-columns: 34px 1fr; gap: 4px 10px; padding: 14px 0 15px; border-top: 1px solid color-mix(in srgb, var(--pi) 22%, transparent); }
.pg .ol li:last-child { border-bottom: 1px solid color-mix(in srgb, var(--pi) 22%, transparent); }
.pg .ol .i { font: 500 11px/1.9 var(--sans); letter-spacing: .06em; opacity: .7; }
.pg .ol b { display: block; font: 400 25px/1.08 var(--serif); }
.pg .ol small { display: block; font: italic 15px/1.3 var(--italic); opacity: .8; margin-top: 3px; }
.pg .ol p { margin: 6px 0 0; font: 12.5px/1.45 var(--sans); opacity: .85; }
.pg .pn { position: absolute; bottom: 20px; left: 26px; right: 26px; display: flex; justify-content: space-between; font: 500 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.pg .blob { position: absolute; border-radius: 50%; background: var(--sa); opacity: .12; width: 300px; height: 300px; right: -120px; bottom: -110px; }
.pg.img { background: #fff; } .pg.img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg.end { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 40px; }
.pg.end b { font: 400 44px/1 var(--serif); color: var(--sa); }
.pg.end i { font: italic 18px/1.4 var(--italic); margin-top: 14px; max-width: 280px; }

/* flipbook */
.fb { position: fixed; inset: 0; z-index: 60; background: rgba(20, 14, 8, .62); opacity: 0; transition: opacity .3s ease; }
.fb.on { opacity: 1; }
.fb[hidden] { display: none; }
.fbs { position: absolute; left: 50%; top: 50%; perspective: 2600px; }
.fbk { position: absolute; transform-style: preserve-3d; transition: transform .62s var(--turn); }
.fbk.snap, .fbk.snap .lf { transition: none; }
.lf { position: absolute; top: 0; transform-origin: 0 50%; transform-style: preserve-3d; transition: transform .62s var(--turn); cursor: pointer; }
.lf.t { transform: rotateY(-180deg); }
.fc { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.fbk::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--sl, 50%); right: var(--sr, 0%); box-shadow: 0 14px 34px rgba(0, 0, 0, .3); transform: translateZ(-2px); transition: left .62s var(--turn), right .62s var(--turn); }
.fc.bkf { transform: rotateY(180deg); }
.fc::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.fc.fr::after { background: linear-gradient(90deg, rgba(0, 0, 0, .14), rgba(0, 0, 0, 0) 7%); }
.fc.bkf::after { background: linear-gradient(270deg, rgba(0, 0, 0, .14), rgba(0, 0, 0, 0) 7%); }
.fc.first::after, .fc.last::after { background: none; }
.fbn { position: absolute; left: 0; right: 0; bottom: 28px; display: flex; justify-content: center; align-items: center; gap: 18px; color: #fff8ec; }
#fbc { min-width: 190px; text-align: center; font: italic 1rem var(--italic); }
.fbb { width: 48px; height: 58px; padding: 0; border-radius: 50%; border: 1.5px solid #fff8ec; background: none; color: #fff8ec; display: grid; place-items: center; cursor: pointer; transition: border-color .2s, opacity .3s; }
.fbb svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.fbb:hover { border-color: #ffe2a0; }
.fbb[aria-disabled="true"] { opacity: .3; cursor: default; }
.fbb:focus-visible, .fbx:focus-visible { outline: 2px solid #ffe2a0; outline-offset: 3px; }
.fly { position: fixed; inset: 0; z-index: 62; pointer-events: none; }
.fb.closing .fbn, .fb.closing .fbx { opacity: 0; transition: none; }
.reading .shint { opacity: 0 !important; }
.reading #toc, .reading #ct, .reading #ig { visibility: hidden; }
.fly .bk { position: absolute; transition: none; transform-origin: 100% 50%; }

/* ---------- 06 · think second order ---------- */
.gd { position: relative; height: 100svh; min-height: 560px; overflow: hidden; cursor: crosshair; background: var(--bg); color: var(--ink); }
#gcv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ghint { position: absolute; left: 24px; bottom: 22px; margin: 0; font: italic .85rem var(--italic); color: var(--soft); pointer-events: none; }
.gpal { position: absolute; right: 88px; bottom: 58px; display: flex; gap: 6px; padding: 4px; border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); border-radius: 999px; background: var(--bg); transition: background-color .6s; }
.gpal button { width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 0; cursor: pointer; background: radial-gradient(circle, var(--f) 0 4.2px, var(--b) 4.8px);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 18%, transparent); transition: transform .2s, box-shadow .2s; }
.gpal button:hover { transform: scale(1.12); }
.gpal button[aria-pressed="true"] { box-shadow: 0 0 0 1.5px var(--bg), 0 0 0 3px var(--ink); }
.gpal button:focus-visible, .gclr:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.gclr { position: absolute; right: 20px; bottom: 58px; height: 32px; padding: 0 1em; font: 13px var(--sans); color: var(--ink); background: var(--bg); border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); border-radius: 999px; cursor: pointer; transition: border-color .2s, background-color .6s; }
.gclr:hover { border-color: var(--ink); }
.gcred { position: absolute; right: 22px; bottom: 16px; margin: 0; font: 11.5px/1.55 var(--sans); color: var(--soft); text-align: right; }
.gcred a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: .18em; }
.gcred a:hover { color: var(--ink); }

@media (max-width: 700px) {
  .ex { height: 480px; min-height: 0; }
  .xb { top: auto; bottom: 4px; margin-top: 0; width: 36px; height: 42px; } .xprev { left: calc(50% - 100px); } .xnext { right: calc(50% - 100px); }
  .xdots { bottom: 18px; } .xhint { bottom: 54px; }
  .xz { display: none; }
  .xhead { padding-top: 56px; }
  .shelf { height: 88svh; min-height: 560px; }
  .srow { height: 420px; }
  .gd { height: 64svh; min-height: 520px; }
  .gpal { right: 16px; left: 16px; bottom: 58px; justify-content: space-between; gap: 4px; }
  .gpal button { width: 20px; height: 20px; }
  .gclr { right: 16px; bottom: 14px; } .gcred { left: 16px; right: auto; bottom: 96px; text-align: left; font-size: 11px; } .ghint { bottom: 22px; left: 14px; font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .xa { animation: none; }
  .xcam, .xv, .bk, .lf, .fbk { transition-duration: .01s !important; }
}
.sp.dots .n, .sp.dots .y, .sp.dots .k, .sp.stripe .n, .sp.stripe .y, .sp.stripe .k { background: var(--sb); padding: 3px 2px; }
.sp .tp { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.sp .h { font: 500 10px/1 var(--sans); letter-spacing: .04em; text-transform: uppercase; }
.sp .h.b { font: italic 15px/1 var(--italic); text-transform: none; }
.sp .ring { width: 16px; height: 16px; border-radius: 50%; border: 1.6px solid var(--sa); }
.sp.dots .h, .sp.grid .h { background: var(--sb); padding: 3px 2px; }
.ex.near .xs { clip-path: inset(21% 0 0 0); }   /* walking in never lets the walls ride up under the heading */
@media (max-width: 700px) {
  .ghint { left: 20px; } .gpal { left: 20px; right: 20px; } .gclr { right: 20px; }
}

/* clippings pages: whole screenshots, fitted to the page */
.pg.clips .shots { position: absolute; left: 22px; right: 22px; top: 58px; bottom: 44px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.pg.clips figure { margin: 0; flex: 0 1 auto; min-height: 0; display: flex; justify-content: center; transform: rotate(var(--r, 0deg)); }
.pg.clips figure img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; background: #fff; padding: 5px; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
/* wall text while the show is still being hung */
.xsoon { position: absolute; left: 0; right: 0; top: 50%; margin: 0; transform: translateY(-50%); text-align: center; pointer-events: none;
  font: italic 400 46px/1.2 var(--italic); color: rgba(27, 27, 27, .5); letter-spacing: .005em; }
.xsoon.sm { top: auto; bottom: 64px; transform: none; font: 500 13px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: rgba(27, 27, 27, .45); }
.tab .tico { height: 1.15em; width: auto; vertical-align: -.2em; margin-right: .35em; }