:root { --bg: #fbf8f2; --ink: #1a1a1a; --muted: #8a8174; --rule: rgba(26,26,26,.25); }
* { margin: 0; box-sizing: border-box; }
html, body { background: var(--bg); color: var(--ink); }
body { overflow-x: clip; }   /* clip (not hidden) so the sticky stage keeps working */
body { font-family: Inter, "Helvetica Neue", Arial, sans-serif; }
canvas.scene { display: block; width: 100%; height: 100%; touch-action: pan-y; }
.caption { position: absolute; left: 32px; top: 28px; pointer-events: none; }
.caption .num { font: 400 34px/1 "Instrument Serif", Georgia, serif; display: block; }
.caption .num::after { content: ""; display: block; width: 28px; height: 1px; background: var(--ink); margin: 10px 0 12px; }
.caption .num, .ch-num { display: none !important; }
.caption .txt { font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--ink); max-width: 15ch; display: block; line-height: 1.7; }
.foot { position: absolute; left: 50%; top: max(22px, env(safe-area-inset-top)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; width: max-content; font-size: 9px; letter-spacing: .28em; text-transform: uppercase; color: var(--muted); pointer-events: none; opacity: .78; transition: opacity .45s ease; }
.foot.is-hidden { opacity: 0; }
.scroll-arrow { position: relative; width: 18px; height: 27px; animation: scroll-cue 1.8s cubic-bezier(.4,0,.2,1) infinite; }
.scroll-arrow::before { content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 22px; background: currentColor; transform: translateX(-50%); }
.scroll-arrow::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 8px; height: 8px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateX(-50%) rotate(45deg); }
.fallback { position: absolute; inset: 0; display: none; place-items: center; color: var(--muted); font-size: 14px; }
@media (max-width: 640px) {
  .caption { left: 16px; top: 18px; } .caption .num { font-size: 40px; } .caption .txt { font-size: 13px; letter-spacing: .22em; }
  .foot { top: max(18px, env(safe-area-inset-top)); font-size: 9px; letter-spacing: .22em; }
}

/* glass copy — real HTML placed on the 3D card (sizes are in a 1000px-wide card space) */
.glass-copy { box-sizing: border-box; padding: 64px 72px; color: #111;
  /* soft frosting behind the type so it reads over dark art; strongest top-left where the text sits */
  background: radial-gradient(130% 95% at 22% 26%, rgba(255,255,255,.74), rgba(255,255,255,.36) 52%, rgba(255,255,255,.12) 100%); font-family: Inter, "Helvetica Neue", Arial, sans-serif; position: relative; pointer-events: none; }
.gc-tag { font: 600 27px/1 "Instrument Sans", Inter, Arial, sans-serif; letter-spacing: .07em; color: #161616; }
.gc-head { color: #0b0b0b; text-shadow: 0 1px 0 rgba(255,255,255,.55); font: 600 84px/1.07 "Instrument Sans", Inter, Arial, sans-serif; letter-spacing: -0.035em; margin: 34px 0 0; max-width: 12.5ch; }
.gc-accent { font: italic 400 1.14em/1 "Instrument Serif", Georgia, serif; letter-spacing: -0.01em; }
.gc-rest { visibility: hidden; }
.gc-caret { display: inline-block; width: 5px; height: .86em; margin: 0 2px -0.06em; background: #111; animation: gc-blink 1s steps(1) infinite; }
.gc-sub { font: 500 33px/1.38 "Instrument Sans", Inter, Arial, sans-serif; color: #1c1c1c; margin-top: 28px; text-shadow: 0 1px 0 rgba(255,255,255,.5); }
.gc-w { display: inline-block; transform-origin: 50% 100%; will-change: transform, opacity; }
.gc-num { position: absolute; right: 72px; bottom: 52px; font: italic 400 30px "Instrument Serif", Georgia, serif; }
@keyframes gc-blink { 50% { opacity: 0; } }
@keyframes scroll-cue { 0%, 100% { transform: translateY(0); opacity: .45; } 50% { transform: translateY(6px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .gc-caret, .scroll-arrow { animation: none; } }