/* The Dream — page styles. Brand tokens come from ../styles.css (--paper, --char, --rust, --ember, fonts). */

.dream{position:relative;height:calc(100svh - var(--dream-top, 118px));min-height:520px;background:#2a1f18;color:var(--paper);overflow:hidden;isolation:isolate}
.dream .stage{position:absolute;inset:0;overflow:hidden;background:#3b2c20}
.still{position:absolute;inset:0;overflow:hidden;transition:opacity 1.1s ease .15s,visibility 0s linear 1.3s}
.still-img{position:absolute;left:0;top:0;width:100%;height:100%;transition:transform 1.1s cubic-bezier(.65,0,.35,1)}
.still-img img{width:100%;height:100%;object-fit:cover;max-width:none}
.gl-loading .still-img img{animation:kb 22s ease-in-out infinite alternate}
@keyframes kb{to{transform:scale(1.06) translate(-1%,-1%)}}
.gl{position:absolute;inset:0;opacity:0;transition:opacity .9s ease}
.gl canvas{cursor:grab}
.gl canvas:active{cursor:grabbing}
.gl-on .gl{opacity:1}
.gl-on .still{opacity:0;visibility:hidden}
.veil{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(22,18,16,.42),rgba(22,18,16,0) 46%),linear-gradient(0deg,rgba(22,18,16,.5),rgba(22,18,16,0) 22%)}
.fade{position:absolute;inset:0;background:var(--char);opacity:0;pointer-events:none;transition:opacity .16s ease}
.fading .fade{opacity:1}

/* loading pill */
.loading{position:absolute;right:20px;top:18px;display:none;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--paper);background:rgba(22,18,16,.66);padding:9px 14px;border-radius:30px;pointer-events:none}
.loading i{width:8px;height:8px;border-radius:50%;background:var(--ember);box-shadow:0 0 12px var(--ember);animation:pulse 1.1s ease-in-out infinite alternate}
.gl-loading .loading{display:flex}
@keyframes pulse{from{opacity:.35}to{opacity:1}}

/* ---------- hotspots (labels like the ones on Russell's rendering) */
.hotspots{position:absolute;inset:0;pointer-events:none;z-index:3}
.hs{position:absolute;left:0;top:0;width:0;height:0;border:0;padding:0;background:none;color:var(--paper);cursor:pointer;pointer-events:auto;transition:opacity .35s ease}
.hs i{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;background:var(--ember);border:2px solid var(--paper);box-shadow:0 0 0 0 rgba(232,137,74,.7);animation:ring 2.6s ease-out infinite}
.hs span{position:absolute;left:0;bottom:calc(14px + var(--lift, 0px));transform:translateX(-50%);white-space:nowrap;font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:.06em;text-transform:uppercase;line-height:1.05;text-align:center;padding:8px 13px 9px;background:rgba(22,18,16,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(242,233,216,.28);border-radius:3px;transition:transform .22s cubic-bezier(.3,1.6,.5,1),background .2s,color .2s,box-shadow .2s}
.hs span::after{content:"";position:absolute;left:50%;top:100%;width:1px;height:calc(8px + var(--lift, 0px));background:rgba(242,233,216,.6)}
.hs small{display:block;font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:.14em;color:#e8d9bd;margin-top:3px}
.hs:hover span,.hs:focus-visible span,.hs.hot span{transform:translateX(-50%) translateY(-5px) scale(1.06);background:var(--paper);color:var(--ink);box-shadow:5px 5px 0 var(--rust)}
.hs:hover small,.hs:focus-visible small,.hs.hot small{color:var(--rust)}
.hs:hover i,.hs.hot i{background:var(--paper);border-color:var(--ember);transform:scale(1.3)}
.hs:focus-visible{outline:none}
.hs:focus-visible span{outline:3px solid var(--ember);outline-offset:2px}
.hs.off{opacity:0;pointer-events:none}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(232,137,74,.7)}70%,100%{box-shadow:0 0 0 14px rgba(232,137,74,0)}}
/* labels only on the wide views; at a stop the story card does the talking */
.dream:not([data-stop="hero"]):not([data-stop="finale"]) .hs{opacity:0;pointer-events:none}
.dream[data-stop="hall"] .hs[data-key="pergola"],.dream[data-stop="hall"] .hs[data-key="hall"]{opacity:0}
/* no-WebGL: the hotspots ride on the rendering itself */
.no-gl .still-img .hotspots{position:absolute;inset:0}
.no-gl .still-img .hs{left:var(--fx);top:var(--fy);transform:scale(calc(1 / var(--z, 1)))}
.no-gl .still{opacity:1;visibility:visible}

/* in-world labels at the Games stop, lettered like the rendering's */
.tags3d{position:absolute;inset:0;pointer-events:none;z-index:2}
.t3{position:absolute;left:0;top:0;opacity:0;transition:opacity .5s ease;font-family:var(--display);font-weight:800;font-size:18px;letter-spacing:.07em;text-transform:uppercase;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.8),0 0 12px rgba(0,0,0,.45);white-space:nowrap;translate:-50% -50%}
.dream[data-stop="games"] .t3:not(.off){opacity:1}
.no-gl .tags3d{display:none}

/* the "original sketch" button */
.sketch-open{position:absolute;right:clamp(16px,2vw,28px);bottom:88px;z-index:4;display:flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper);background:rgba(22,18,16,.66);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(242,233,216,.3);border-radius:30px;cursor:pointer;transition:background .2s,color .2s}
.sketch-open svg{width:18px;height:18px}
.sketch-open:hover{background:var(--paper);color:var(--ink)}
.no-gl .sketch-open{display:none}

/* ---------- story card + navigation (desktop: card over the scene, bottom-left) */
.story{display:contents}
.cards{position:absolute;z-index:5;left:clamp(16px,3vw,44px);bottom:92px;width:min(480px,40vw);max-height:calc(100% - 118px);overflow:auto;scrollbar-width:thin}
.dcard{background:var(--paper);color:var(--ink);border:2px solid var(--ink);box-shadow:8px 8px 0 rgba(22,18,16,.92);padding:24px 28px 24px;animation:cardIn .55s cubic-bezier(.2,.8,.2,1)}
@keyframes cardIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.dcard .eyebrow{color:var(--rust);margin-bottom:12px;display:flex;align-items:center;gap:10px}
.dcard .eyebrow::before{content:"";width:26px;height:2px;background:currentColor}
.dcard .eyebrow b{font-weight:700}
.dcard h1,.dcard h2{font-family:var(--display);font-weight:900;text-transform:uppercase;line-height:.88;letter-spacing:0}
.dcard h2{font-size:clamp(40px,3.6vw,56px);margin-bottom:14px}
.dcard h1{font-size:clamp(50px,4.8vw,78px);margin-bottom:16px}
.dcard .rust{color:var(--rust-hot)}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:-2px 0 16px}
.tags span{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;border:1px solid currentColor;padding:5px 9px;color:var(--rust)}
.q{position:relative;margin:0;padding-left:26px}
.q::before{content:"“";position:absolute;left:-4px;top:-14px;font-family:var(--serif);font-size:64px;line-height:1;color:var(--rust)}
.q p{font-family:var(--serif);font-size:clamp(20px,1.55vw,24px);line-height:1.34;letter-spacing:-.005em}
.q-sm{margin-top:14px}
.q-sm::before{font-size:44px;top:-8px}
.q-sm p{font-size:17px;line-height:1.42;color:#3a302a}
.q-lg p{font-size:clamp(22px,1.8vw,28px)}
.ell{color:var(--muted)}
.cite{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:14px;padding-left:26px}
.note{margin-top:16px;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;line-height:1.6;color:var(--muted);border-top:1px dashed var(--line);padding-top:12px}
.dcard .cta-row{margin-top:20px;gap:12px}
.dcard .btn{padding:13px 20px;font-size:18px;cursor:pointer}
.dcard .btn-ghost{background:transparent}
.dcard .btn svg{width:16px;height:16px}
/* hero + finale: dark cards, bigger voice */
.hero-card,.finale-card{background:rgba(22,18,16,.86);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--paper);border-color:rgba(242,233,216,.25);box-shadow:8px 8px 0 var(--rust)}
.hero-card .eyebrow,.finale-card .eyebrow{color:var(--ember)}
.hero-card .q::before,.finale-card .q::before{color:var(--ember)}
.hero-card .cite,.finale-card .cite,.hero-card .note,.finale-card .note{color:#b9ab98}
.hero-card .note,.finale-card .note{border-top-color:rgba(242,233,216,.2)}
.hero-card .btn-ghost,.finale-card .btn-ghost{color:var(--paper);border-color:var(--paper)}
.hero-card .btn-ghost:hover,.finale-card .btn-ghost:hover{background:var(--paper);color:var(--ink)}
.hero-card .btn-rust,.finale-card .btn-rust{box-shadow:4px 4px 0 var(--paper)}
.hero-card .btn-rust:hover,.finale-card .btn-rust:hover{box-shadow:6px 6px 0 var(--paper)}
.why-card .note-q p{font-style:italic}
.more{display:none}
.next-hint{display:flex;align-items:center;gap:10px;width:100%;margin-top:18px;padding:12px 0 0;min-height:44px;border:0;border-top:1px dashed var(--line);background:none;color:var(--ink);font-family:var(--display);font-weight:800;font-size:18px;letter-spacing:.05em;text-transform:uppercase;text-align:left;cursor:pointer}
.next-hint span{font-family:var(--mono);font-weight:700;font-size:10.5px;letter-spacing:.16em;color:var(--rust)}
.next-hint svg{width:18px;height:18px;margin-left:auto;color:var(--rust);transition:transform .2s}
.next-hint:hover svg{transform:translateX(4px)}
.sketch{margin-top:18px;display:grid;grid-template-columns:132px 1fr;gap:14px;align-items:center}
.sketch-thumb{display:block;padding:0;border:2px solid var(--paper);background:none;cursor:zoom-in;box-shadow:4px 4px 0 var(--rust);transition:transform .2s}
@media (hover:hover){.sketch-thumb:hover{transform:translate(-2px,-2px) rotate(-1deg)}}
.sketch-thumb img{width:100%;height:auto;aspect-ratio:1408/768;object-fit:cover}
.sketch figcaption{font-family:var(--serif);font-size:14.5px;line-height:1.4;color:#d8cbb6}
.sketch figcaption b{display:block;font-family:var(--mono);font-weight:700;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ember);margin-bottom:4px}

/* tour progress */
.progress{position:absolute;z-index:6;left:clamp(16px,3vw,44px);bottom:88px;width:min(480px,40vw);height:4px;background:rgba(242,233,216,.2);opacity:0;transition:opacity .3s}
.progress i{display:block;height:100%;background:var(--ember);transform-origin:left;transform:scaleX(0)}
.touring .progress{opacity:1}

.storynav{position:absolute;z-index:5;left:clamp(16px,3vw,44px);right:clamp(16px,2vw,28px);bottom:20px;display:flex;align-items:center;gap:10px}
.nav-btn{flex:none;display:grid;place-items:center;width:52px;height:52px;border:2px solid var(--ink);background:var(--paper);color:var(--ink);cursor:pointer;box-shadow:4px 4px 0 var(--ink);transition:transform .15s,box-shadow .15s,background .15s}
.nav-btn svg{width:22px;height:22px}
@media (hover:hover){.nav-btn:hover:not(:disabled){transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink);background:#fff8ea}}
.nav-btn:disabled{opacity:.45;cursor:default;box-shadow:none}
.nav-btn.next{background:var(--rust);color:var(--paper);border-color:var(--ink)}
@media (hover:hover){.nav-btn.next:hover:not(:disabled){background:var(--rust-hot)}}
.nav-btn.tour{width:auto;padding:0 16px;display:flex;gap:8px;font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:.08em;text-transform:uppercase}
.nav-btn.tour svg{width:16px;height:16px}
.nav-btn.tour .i-pause,.touring .nav-btn.tour .i-play{display:none}
.touring .nav-btn.tour .i-pause{display:block}
.rail{display:flex;gap:4px;list-style:none;margin:0 6px;padding:5px;background:rgba(22,18,16,.66);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:40px;overflow-x:auto;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail button{min-height:40px;padding:0 13px;border:0;border-radius:30px;background:none;color:#e6d9c4;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:background .2s,color .2s}
.rail button:hover{background:rgba(242,233,216,.14);color:var(--paper)}
.rail button[aria-current="step"]{background:var(--paper);color:var(--ink);font-weight:700}
.storynav .rail{order:0;margin:0 auto 0 0}.storynav .nav-btn.prev{order:1}.storynav .nav-btn.tour{order:2}.storynav .nav-btn.next{order:3}

/* the sketch lightbox */
.sketch-dialog{margin:auto;padding:0;border:2px solid var(--paper);background:var(--char);color:var(--paper);max-width:min(1200px,94vw);width:100%;box-shadow:10px 10px 0 var(--rust)}
.sketch-dialog::backdrop{background:rgba(10,8,7,.82)}
.sketch-dialog img{width:100%;height:auto}
.sketch-dialog p{padding:14px 18px 16px;font-size:16px;color:#d8cbb6}
.sketch-dialog p b{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ember);margin-right:6px}
.sketch-dialog .close{position:absolute;right:10px;top:10px;width:44px;height:44px;border-radius:50%;background:rgba(22,18,16,.8);color:var(--paper);border:1px solid rgba(242,233,216,.4);font-size:18px;cursor:pointer}

@media (max-width:1100px) and (min-width:761px) and (orientation:landscape){
  .cards,.progress{width:min(430px,52vw)}
  .rail{padding:4px 8px}
  .rail button{width:22px;padding:0;font-size:0;color:transparent;position:relative}
  .rail button::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:rgba(242,233,216,.45)}
  .rail button[aria-current="step"]{background:none}
  .rail button[aria-current="step"]::after{background:var(--ember);transform:scale(1.5)}
}

/* ---------- phones (and portrait tablets): 3D on top, the story as a bottom sheet */
@media (max-width:760px),(max-width:1100px) and (orientation:portrait){
  .dream{display:grid;grid-template-rows:minmax(0,45fr) minmax(0,55fr);min-height:560px}
  .dream .stage{position:relative;inset:auto}
  .veil{background:linear-gradient(0deg,rgba(22,18,16,.35),rgba(22,18,16,0) 30%)}
  .story{display:flex;flex-direction:column;position:relative;z-index:5;min-height:0;margin-top:-16px;background:var(--paper);color:var(--ink);border-top:2px solid var(--ink);border-radius:16px 16px 0 0;box-shadow:0 -10px 30px rgba(22,18,16,.25)}
  .story::before{content:"";position:absolute;left:50%;top:7px;width:38px;height:4px;margin-left:-19px;border-radius:2px;background:rgba(28,23,20,.22)}
  .cards{position:relative;left:auto;bottom:auto;width:auto;max-height:none;flex:1 1 auto;min-height:0;padding:22px 18px 20px;overscroll-behavior:contain;-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 16px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 16px),transparent)}
  .dcard,.hero-card,.finale-card{background:none;border:0;box-shadow:none;padding:0;color:var(--ink);-webkit-backdrop-filter:none;backdrop-filter:none}
  .hero-card .eyebrow,.finale-card .eyebrow{color:var(--rust)}
  .hero-card .q::before,.finale-card .q::before{color:var(--rust)}
  .hero-card .cite,.finale-card .cite,.hero-card .note,.finale-card .note{color:var(--muted)}
  .hero-card .note,.finale-card .note{border-top-color:var(--line)}
  .hero-card .btn-ghost,.finale-card .btn-ghost{color:var(--ink);border-color:var(--ink)}
  .hero-card .btn-rust,.finale-card .btn-rust{box-shadow:4px 4px 0 var(--ink)}
  .sketch figcaption{color:#3a302a}
  .sketch-thumb{border-color:var(--ink)}
  .dcard h1{font-size:38px;margin-bottom:10px}
  .hero-card .q p{font-size:18px}
  .dcard h2{font-size:38px;margin-bottom:10px}
  .dcard .eyebrow{margin-bottom:8px;font-size:11px}
  .q{padding-left:20px}
  .q::before{font-size:48px;top:-10px;left:-4px}
  .q p{font-size:19px;line-height:1.36}
  .q-sm p{font-size:16px}
  .cite{padding-left:20px;margin-top:10px}
  .dcard .cta-row{margin-top:14px;gap:10px;flex-wrap:nowrap}
  .dcard .btn{padding:0 12px;min-height:48px;font-size:16px;flex:1 1 auto;justify-content:center;white-space:nowrap}
  .note{margin-top:12px}
  .sketch{grid-template-columns:104px 1fr;gap:12px}
  .progress{position:absolute;left:0;right:0;top:0;bottom:auto;width:auto;height:3px;border-radius:16px 16px 0 0;overflow:hidden}
  .storynav{position:relative;left:auto;right:auto;bottom:auto;flex:none;gap:6px;padding:8px 12px calc(8px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--paper)}
  .storynav .rail{order:1;margin:0 auto;padding:0;background:none;gap:0;-webkit-backdrop-filter:none;backdrop-filter:none}
  .storynav .nav-btn.prev{order:0;margin:0}
  .rail button{min-height:44px;width:24px;padding:0;font-size:0;color:transparent;position:relative;border-radius:0}
  .rail button::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:rgba(28,23,20,.25);transition:transform .2s,background .2s}
  .rail button[aria-current="step"]{background:none}
  .rail button[aria-current="step"]::after{background:var(--rust);transform:scale(1.5)}
  .rail button:hover{background:none}
  .nav-btn{width:48px;height:48px;box-shadow:3px 3px 0 var(--ink)}
  .nav-btn.tour{width:48px;padding:0;justify-content:center}
  .nav-btn.tour span{display:none}
  .hs span{font-size:13px;padding:6px 10px 7px;min-height:0}
  .hs small{display:none}
  .sketch-open{top:10px;bottom:auto;right:10px;padding:0 12px}
  .sketch-open span{display:none}
  .loading{top:auto;bottom:28px;right:12px}
  body.dream-page.dream-inview .mbar{display:none}
  .next-hint{display:none}
  .more{display:flex;position:absolute;left:50%;bottom:calc(var(--nav-h, 74px) + 8px);transform:translate(-50%,6px);z-index:6;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--ink);border-radius:20px;background:var(--paper);color:var(--ink);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;box-shadow:2px 2px 0 var(--ink);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
  .has-more .more{opacity:1;transform:translate(-50%,0);pointer-events:auto}
}
@media (min-width:761px) and (max-width:1100px) and (orientation:portrait){
  .dream{grid-template-rows:minmax(0,60fr) minmax(0,40fr)}
  .cards{padding:26px 32px 12px}
}
@media (max-width:760px) and (max-height:700px){
  .dream{grid-template-rows:minmax(0,38fr) minmax(0,62fr)}
}

/* reduced motion: crossfades instead of moves */
.reduced .dcard{animation:fadeIn .3s ease}
.reduced .still-img{transition:none}
.reduced .hs i{animation:none}
.reduced .gl-loading .still-img img,.reduced.gl-loading .still-img img{animation:none}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .dcard{animation:fadeIn .3s ease}
  .hs i{animation:none}
  .gl-loading .still-img img{animation:none}
  .still-img{transition:none}
}