/* ============================================================
   A little world — pale green/grey void, hyperlink blue text
   ============================================================ */

:root{
  --void-top:#26347F;
  --void-mid:#8FA6DD;
  --void-low:#F7F2E8;

  --ink:#161C2B;            /* near-black tilted blue, to sit in the same world */
  --ink-2:#4A5468;
  --ink-3:#7B879C;

  --blue:#1A1AE6;           /* hyperlink blue — the only saturated colour */
  --blue-deep:#1212A8;
  --blue-soft:#E6E7FD;

  --rule:#D5DDEA;
  --glass:rgba(252,253,255,.82);
  --copper:#B26A3C;
  --copper-deep:#8A4E2A;
  --copper-lt:#E0A46A;
  --link-ondark:#A9C6FF;
  --glass-edge:rgba(255,255,255,.9);

  --gutter:clamp(20px,4vw,54px);
  --maxw:1240px;
}

*{box-sizing:border-box}
html{scroll-behavior:auto}
body{
  margin:0;background:var(--void-low);color:var(--ink);
  font:400 16px/1.6 Inter,system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

img{max-width:100%;display:block}
a{color:var(--blue);text-underline-offset:2px}
a:hover{color:var(--blue-deep)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:3px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:14px;top:14px;z-index:300;background:#fff;padding:10px 16px;border-radius:100px}

/* ---------------- the canvas + scroll track ---------------- */
#worldCanvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block;cursor:default}
body.is-pointing #worldCanvas{cursor:pointer}
#worldCanvas{cursor:grab}
body.is-dragging #worldCanvas{cursor:grabbing}
body.worldpage{overflow:hidden;height:100%}
.worldlabels{position:fixed;inset:0;z-index:6;pointer-events:none}

/* ---------------- floating blue labels ---------------- */
.wlabel{
  position:absolute;top:0;left:0;
  display:inline-flex;align-items:baseline;gap:8px;
  text-decoration:none;white-space:nowrap;
  font:400 15px/1 'Instrument Serif',Georgia,serif;color:var(--blue);
  background:rgba(255,253,249,.92);
  -webkit-backdrop-filter:blur(12px) saturate(1.3);backdrop-filter:blur(12px) saturate(1.3);
  box-shadow:0 1px 2px rgba(28,22,60,.14), 0 8px 22px rgba(28,22,60,.2);
  border:1px solid rgba(26,26,230,.18);border-radius:100px;
  padding:7px 13px;opacity:0;transition:opacity .35s ease, background .18s ease;
}
.wlabel:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.wlabel:hover i{color:rgba(255,255,255,.7)}
.wlabel i{font-family:'IBM Plex Mono',monospace;font-style:normal;font-size:9.5px;color:rgba(26,26,230,.5);position:relative;top:-1px}
.wlabel b{font-weight:400;letter-spacing:.005em}

/* ---------------- nav ---------------- */
.wnav{
  position:fixed;top:0;left:0;right:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px var(--gutter);
}
.wbrand{
  font-family:'Instrument Serif',Georgia,serif;font-size:20px;
  color:var(--ink);text-decoration:none;letter-spacing:-.01em;
}
.wnav__links{display:flex;gap:24px}
.wnav__links a{font:500 13px/1 Inter;color:var(--blue);text-decoration:none}
.wnav__links a:hover{text-decoration:underline}
@media (max-width:720px){.wnav__links{gap:14px}}

/* ---------------- the scroll-driven beat ---------------- */
.intro{
  position:fixed;left:var(--gutter);bottom:clamp(46px,8vh,92px);z-index:20;
  max-width:min(40ch,42vw);
  transition:opacity .35s ease, transform .35s ease;
}
.intro__head{
  font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:clamp(34px,4.6vw,62px);line-height:1.02;letter-spacing:-.015em;
  color:var(--ink);margin:0 0 16px;
}
.intro__sub{font:300 16px/1.6 Inter;color:var(--ink-2);margin:0 0 18px;max-width:38ch}
.intro__how{font:400 13.5px/1.6 Inter;color:var(--ink-3);margin:0}
.intro__how span{color:var(--blue);font-weight:500}
/* the statement steps aside once you're looking at a project */
body.is-focused .intro{opacity:0;transform:translateY(8px);pointer-events:none}

.hint{
  position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:20;margin:0;
  font:400 11px/1 'IBM Plex Mono',monospace;letter-spacing:.1em;
  color:var(--ink-3);transition:opacity .4s ease;
}
body.is-focused .hint{opacity:0}

/* only appears once you've wandered off the rail's aim */
.recenter{
  position:fixed;right:var(--gutter);bottom:56px;z-index:65;
  display:inline-flex;align-items:center;gap:9px;
  font:500 11.5px/1 Inter;color:var(--blue);cursor:pointer;
  background:rgba(253,254,255,.72);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid rgba(26,26,230,.2);border-radius:100px;padding:9px 15px;
  opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.recenter.is-on{opacity:1;pointer-events:auto}
.recenter:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.recenter span{
  font-family:'IBM Plex Mono',monospace;font-size:10px;
  border:1px solid currentColor;border-radius:4px;padding:2px 5px;opacity:.7;
}

.wcredit{
  position:fixed;right:var(--gutter);bottom:18px;z-index:20;margin:0;
  font:400 10px/1.5 Inter;color:var(--ink-3);text-align:right;max-width:40ch;
}

/* ---------------- glass card ---------------- */
.glasscard{
  position:fixed;z-index:60;right:var(--gutter);top:50%;
  width:min(400px,42vw);
  transform:translateY(-50%) translateX(16px);
  background:linear-gradient(160deg, rgba(255,255,255,.88), rgba(240,246,255,.76));
  -webkit-backdrop-filter:blur(30px) saturate(1.5);backdrop-filter:blur(30px) saturate(1.5);
  border:1px solid var(--glass-edge);border-radius:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 2px 10px rgba(30,44,38,.06), 0 36px 80px rgba(30,44,38,.18), 0 0 60px rgba(26,26,230,.06);
  padding:30px 30px 28px;
  opacity:0;pointer-events:none;
  transition:opacity .3s ease, transform .35s cubic-bezier(.22,.8,.28,1);
}
.glasscard.is-open{opacity:1;pointer-events:auto;transform:translateY(-50%) translateX(0)}
.gc__close{
  position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;
  border:1px solid var(--rule);background:rgba(255,255,255,.7);color:var(--ink-2);
  font-size:12px;line-height:1;cursor:pointer;
}
.gc__close:hover{border-color:var(--blue);color:var(--blue)}
.gc__role{
  font:500 10.5px/1 'IBM Plex Mono',monospace;letter-spacing:.15em;text-transform:uppercase;
  color:var(--blue);margin:2px 0 12px;
}
.gc__title{
  font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:clamp(25px,2.7vw,34px);line-height:1.06;margin:0 0 14px;color:var(--ink);
}
.gc__blurb{font:300 15px/1.6 Inter;color:var(--ink-2);margin:0 0 18px}
.gc__out{
  font:500 13px/1.55 Inter;color:var(--ink);
  border-left:2px solid var(--blue);padding:2px 0 2px 12px;margin:0 0 22px;
}
.gc__link{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--blue);color:#fff;text-decoration:none;
  font:500 13.5px/1 Inter;padding:13px 22px;border-radius:100px;
  transition:background .18s ease,transform .18s ease;
}
.gc__link:hover{background:var(--blue-deep);color:#fff;transform:translateY(-1px)}
.gc__link span{transition:transform .2s ease}
.gc__link:hover span{transform:translateX(3px)}
@media (max-width:720px){.glasscard{width:min(400px,84vw)}}

/* when a card is open the beat steps back */
body.card-open .beat{opacity:.25}

.noscript{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:var(--void-mid);padding:40px;text-align:center}


/* ============================================================
   The studio runs on a deep lapis field, so its overlay type is
   light. Dark ink and mid-blue links vanish against it — the same
   wash-out that made hyperlink blue unusable over pale plaster,
   just from the other direction.
   Copper stays a material in the 3D; blue stays the interactive
   colour, lightened so it reads on the dark ground.
   ============================================================ */
.worldpage .wbrand{color:#F7F1E5}
.worldpage .wnav__links a{color:var(--link-ondark)}
.worldpage .wnav__links a:hover{color:#D7E4FF}
.worldpage .intro__head{color:#FAF5EA;text-shadow:0 2px 30px rgba(18,24,64,.5)}
.worldpage .intro__sub{color:rgba(240,240,252,.9);text-shadow:0 1px 16px rgba(18,24,64,.55)}
.worldpage .intro__how{color:rgba(214,218,240,.82)}
.worldpage .intro__how span{color:var(--link-ondark);font-weight:500}
.worldpage .hint{color:rgba(210,215,238,.7)}
.worldpage .wcredit{color:rgba(206,212,236,.66)}
.worldpage .wcredit a{color:rgba(226,232,252,.86)}
.worldpage .recenter{
  background:rgba(255,252,246,.9);color:var(--copper);
  border-color:rgba(178,106,60,.45);
}
.worldpage .recenter:hover{background:var(--copper);color:#fff;border-color:var(--copper)}

/* A ground for everything anchored to the bottom. The gradient ends in
   alabaster down there, so light type needs something under it or it
   fails on exactly the edge where the hint and credit live. */
.worldpage::before{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(78% 58% at 4% 100%, rgba(20,26,66,.66), transparent 64%),
    linear-gradient(to top, rgba(20,26,66,.5) 0%, rgba(20,26,66,.16) 9%, transparent 20%);
}

/* the label pills pick up a copper hairline */
.worldpage .wlabel{border-color:rgba(178,106,60,.4)}
.worldpage .wlabel i{color:var(--copper)}

/* ============================================================
   Ovidius — RPG dialogue. Bottom-anchored box, nameplate, numbered
   choices. The studio keeps rendering behind it, dimmed and blurred.
   ============================================================ */
/* the room recedes but keeps running */
.dlgscrim{
  position:fixed;inset:0;z-index:60;opacity:0;pointer-events:none;
  /* Clear over the right edge, where he leans in — dimming the speaker
     along with the room is what made him disappear when it opened. */
  background:
    radial-gradient(30% 52% at 84% 46%, rgba(18,22,54,0) 30%, rgba(18,22,54,.4) 100%),
    linear-gradient(to top, rgba(18,22,54,.6) 0%, rgba(18,22,54,.32) 48%, rgba(18,22,54,.16) 100%);
  -webkit-backdrop-filter:blur(1.8px);backdrop-filter:blur(1.8px);
  transition:opacity .4s ease;
}
.dlgscrim.is-on{opacity:1;pointer-events:auto}

.dlg{
  /* Left-anchored, leaving the right third to him — a centred box wide
     enough to read put the speaker behind the speech. */
  position:fixed;left:var(--gutter);bottom:26px;z-index:80;
  width:min(760px, calc(100vw - 2*var(--gutter) - 300px));
  transform:translateY(18px);opacity:0;pointer-events:none;
  background:linear-gradient(168deg, rgba(255,251,243,.97), rgba(246,234,215,.95));
  border:1px solid rgba(178,106,60,.5);border-radius:14px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 3px rgba(178,106,60,.14),
    0 3px 14px rgba(30,20,10,.2), 0 40px 100px rgba(30,20,10,.4);
  padding:22px 26px 20px;
  transition:opacity .3s ease, transform .34s cubic-bezier(.22,.8,.28,1);
}
.dlg.is-open{opacity:1;pointer-events:auto;transform:none}

.dlg__x{
  position:absolute;top:14px;right:16px;width:28px;height:28px;border-radius:50%;
  cursor:pointer;font-size:12px;line-height:1;color:#6B5136;
  border:1px solid rgba(178,106,60,.35);background:rgba(255,255,255,.6);
}
.dlg__x:hover{border-color:var(--copper);color:var(--copper)}

.dlg__name{
  margin:0 0 12px;font:500 10.5px/1 'IBM Plex Mono',monospace;
  letter-spacing:.2em;text-transform:uppercase;color:var(--copper);
}
.dlg__body{cursor:pointer;min-height:5.6em}
.dlg__text{
  margin:0;font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:clamp(17px,1.55vw,21px);line-height:1.6;color:#33261A;
}
.dlg__text b{font-weight:600}
.dlg__more{
  margin:8px 0 0;font:400 11px/1 'IBM Plex Mono',monospace;
  letter-spacing:.12em;color:#A08258;animation:dlgblink 1.1s steps(2,start) infinite;
}
@keyframes dlgblink{0%,60%{opacity:1}61%,100%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.dlg__more{animation:none}}

.dlg__choices[hidden],.dlg__ask[hidden]{display:none}
.dlg__choices{
  list-style:none;margin:16px 0 0;padding:14px 0 0;
  border-top:1px solid rgba(178,106,60,.24);
  display:flex;flex-direction:column;gap:2px;
}
.dlg__choice{
  width:100%;text-align:left;cursor:pointer;background:none;border:0;
  display:flex;align-items:baseline;gap:12px;padding:8px 10px;border-radius:7px;
  font:400 15px/1.45 Inter;color:#4A3826;
  transition:background .14s ease,color .14s ease;
}
.dlg__choice:hover{background:rgba(178,106,60,.12);color:#2E2114}
.dlg__num{
  flex:none;width:19px;height:19px;border-radius:4px;
  display:inline-grid;place-items:center;
  font:500 10.5px/1 'IBM Plex Mono',monospace;
  background:rgba(178,106,60,.16);color:var(--copper);
}
.dlg__choice:hover .dlg__num{background:var(--copper);color:#fff}

.dlg__ask{display:flex;gap:9px;margin-top:14px;padding-top:14px;border-top:1px solid rgba(178,106,60,.24)}
.dlg__input{
  flex:1;font:400 15px/1 Inter;color:#2E2114;
  background:rgba(255,255,255,.8);border:1px solid rgba(178,106,60,.4);
  border-radius:100px;padding:13px 18px;outline:none;
}
.dlg__input:focus{border-color:var(--copper);box-shadow:0 0 0 3px rgba(178,106,60,.14)}
.dlg__input::placeholder{color:#9C8B72}
.dlg__send{
  cursor:pointer;border-radius:100px;padding:0 22px;
  font:500 13.5px/1 Inter;background:var(--copper);color:#fff;border:1px solid var(--copper);
}
.dlg__send:hover{background:var(--copper-deep)}

/* his label in the world */
.worldpage .wlabel--wiz{
  background:linear-gradient(160deg, rgba(255,246,232,.95), rgba(247,230,208,.92));
  border-color:rgba(178,106,60,.55);cursor:pointer;
}
.worldpage .wlabel--wiz b{color:#3A2A1C}
.worldpage .wlabel--wiz i{color:var(--copper)}
body.dlg-open .wlabel{opacity:0!important;pointer-events:none!important}

/* below this there isn't room for both, so the box takes the width and
   he simply stays at the edge behind it */
@media (max-width:1040px){
  .dlg{width:calc(100vw - 2*var(--gutter))}
}
@media (max-width:720px){
  .dlg{bottom:12px;padding:18px 18px 16px}
  .dlg__text{font-size:16px}
}


/* ============================================================
   His speech bubble — parked beside his head at the right edge
   ============================================================ */
.wizbubble{
  position:fixed;top:0;left:0;z-index:58;
  max-width:206px;text-align:left;cursor:pointer;
  display:flex;flex-direction:column;gap:3px;
  padding:10px 13px;border-radius:12px 12px 3px 12px;
  background:linear-gradient(160deg, rgba(255,251,243,.97), rgba(247,235,218,.95));
  border:1px solid rgba(178,106,60,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 3px 10px rgba(30,20,10,.16), 0 20px 46px rgba(30,20,10,.26);
  opacity:0;pointer-events:none;
  transition:opacity .45s ease;
}
.wizbubble.is-on{opacity:1;pointer-events:auto;animation:wizfloat 4.2s ease-in-out infinite}
.wizbubble:hover{border-color:var(--copper)}
.wizbubble b{
  font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:15.5px;line-height:1.15;color:#33261A;
}
.wizbubble span{font:400 11px/1.45 Inter;color:#6B5136}
/* the tail, pointing down-right toward him */
.wizbubble::after{
  content:"";position:absolute;right:-1px;bottom:-9px;
  width:13px;height:9px;
  background:linear-gradient(160deg, rgba(250,240,224,.97), rgba(247,235,218,.95));
  border-right:1px solid rgba(178,106,60,.45);
  border-bottom:1px solid rgba(178,106,60,.45);
  border-radius:0 0 6px 0;
  transform:skewX(-22deg);
}
@keyframes wizfloat{0%,100%{translate:0 0}50%{translate:0 -5px}}
@media (prefers-reduced-motion:reduce){.wizbubble.is-on{animation:none}}
body.dlg-open .wizbubble,body.is-focused .wizbubble{opacity:0;pointer-events:none}

@media (max-width:720px){
  .wizbubble{max-width:168px;padding:9px 11px}
  .wizbubble b{font-size:14px}
}