/* Journey House light cube. CSS 3D (text stays real, crisp and readable), no libraries.
   Design reference: an illuminated lightbox cube sitting on a table, lit from inside, with an LED strip
   under it whose cool light spills across the table (Danny's After Dark photo). Branding not copied.
   Rules from research: no overflow/filter/mask on any preserve-3d container (they flatten 3D);
   glow = several stacked shadows of growing size and falling strength (light fades fast, then slowly). */
:root{
  --ink:#f6efe9;--muted:#c9bcc0;--night:#08070b;--amber:#ffb45e;--cyan:#5fd8ff;--well:#141317;
  --s:min(58vw,300px);
  --led-core:#eef5ff;--led-mid:#a9c6ff;--led-out:#6f93ff;--tint:#ffd1a3;
}
*{box-sizing:border-box}
html{touch-action:pan-y;overflow-x:clip}
body{margin:0;min-height:100vh;color:var(--ink);overflow-x:hidden;
  font:400 16px/1.6 'Manrope','DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:radial-gradient(ellipse 120% 70% at 50% 28%,#1d1117 0%,#0d090d 52%,var(--night) 100%)}
a{color:inherit}
:focus-visible{outline:3px solid var(--cyan);outline-offset:4px}

/* warm out-of-focus lights in the room behind, very dim so the cube stays the brightest thing */
.room{position:fixed;inset:0;pointer-events:none;z-index:0}
.bokeh{position:absolute;border-radius:50%;background:radial-gradient(circle,#ffb877 0%,#ff9a4a55 45%,transparent 70%);opacity:.16;filter:blur(6px)}
.b1{width:26vmin;height:26vmin;left:4%;top:6%}.b2{width:18vmin;height:18vmin;left:24%;top:2%;opacity:.1}
.b3{width:22vmin;height:22vmin;right:22%;top:5%;opacity:.12}.b4{width:28vmin;height:28vmin;right:2%;top:10%}
.b5{width:14vmin;height:14vmin;left:46%;top:1%;opacity:.08}

.top{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;padding:16px clamp(16px,5vw,64px)}
.brand{font-weight:800;letter-spacing:-.02em;font-size:18px;text-decoration:none}

.wrap{position:relative;z-index:2;display:grid;grid-template-columns:1fr;gap:8px;padding:0 16px 48px;max-width:1180px;margin:0 auto}
@media (min-width:900px){.wrap{grid-template-columns:1.05fr 1fr;align-items:center;gap:48px;padding:12px 48px 64px;min-height:calc(100vh - 80px)} :root{--s:min(29vw,340px)}}

/* ---------- 3D stage ---------- */
.stage-col{display:flex;flex-direction:column;align-items:center;max-width:100%}
.stage{position:relative;width:100%;height:calc(var(--s) * 1.62);display:grid;place-items:center;perspective:calc(var(--s) * 3.4);
  perspective-origin:50% 30%;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.stage.dragging{cursor:grabbing}
.halo{position:absolute;left:50%;top:44%;width:calc(var(--s) * 2.5);height:calc(var(--s) * 2.1);transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(closest-side,#ff8a4a73 0%,#e0477a40 36%,#7a2c8a1c 62%,transparent 100%)}
.scene{position:relative;width:var(--s);height:var(--s);transform-style:preserve-3d;transform:translateY(calc(var(--s) * -0.1)) rotateX(-17deg)}
.cube{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(var(--ry,0deg))}

/* table the cube stands on: a big dark plane, light lands on it */
.table{position:absolute;left:calc(var(--s) * -1.6);top:calc(var(--s) * -1.6);width:calc(var(--s) * 4.2);height:calc(var(--s) * 4.2);
  transform:rotateX(90deg) translateZ(calc(var(--s) * -0.5 - 3px));
  background:radial-gradient(closest-side,#24161b 0%,#170f14 30%,#100b0e80 52%,#0d090d00 70%);pointer-events:none}
/* light pool: the LED light landing on the table, brightest at the cube, fading fast then slowly */
.pool{position:absolute;left:calc(var(--s) * -0.9);top:calc(var(--s) * -0.9);width:calc(var(--s) * 2.8);height:calc(var(--s) * 2.8);
  transform:rotateX(90deg) translateZ(calc(var(--s) * -0.5 - 2px));pointer-events:none;
  background:radial-gradient(closest-side,#b9d0ff66 0%,#8fb0ff4d 22%,#6d8cff2e 40%,#7a5cff17 58%,#ff7a5a0a 74%,transparent 100%)}

/* the LED base under the cube. Its stacked shadows are the light spill on the table (perspective-correct
   because the base itself lies flat in 3D). Inner layers: hot near-white core. Outer: cool blue, then a
   faint warm wash from the glowing faces, then the topic's colour. */
.base{position:absolute;inset:2%;transform:rotateX(90deg) translateZ(calc(var(--s) * -0.5 - 1px));border-radius:4%;
  background:var(--led-core);
  box-shadow:
    0 0 calc(var(--s) * .015) calc(var(--s) * .012) var(--led-core),
    0 0 calc(var(--s) * .06) calc(var(--s) * .04) #d2e2fff2,
    0 0 calc(var(--s) * .18) calc(var(--s) * .09) #a3c0ffb8,
    0 0 calc(var(--s) * .4) calc(var(--s) * .16) #7896ff70,
    0 0 calc(var(--s) * .75) calc(var(--s) * .26) #ff8a5a2e,
    0 0 calc(var(--s) * 1.1) calc(var(--s) * .36) color-mix(in srgb,var(--tint) 16%,transparent)}

/* faces: a lit diffuser. Gradient sampled from the reference photo: indigo top-left, magenta, coral,
   orange, peach, cream; the bottom picks up the cool LED light. */
.face{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  display:flex;flex-direction:column;padding:8.5% 8.5% 12%;border-radius:2px;color:#2a0f22;
  border:1px solid #ffd6c080;
  background:
    linear-gradient(to top,transparent 4.5%,#d8e6ffcc 4.5%,#a9c4ff5c 8.5%,transparent 19%),
    radial-gradient(ellipse 70% 55% at 50% 72%,#fff1dc8c 0%,transparent 70%),
    radial-gradient(ellipse 60% 40% at 24% 26%,#ff6fb04d 0%,transparent 70%),
    radial-gradient(ellipse 55% 45% at 82% 40%,#ff5a3c47 0%,transparent 70%),
    linear-gradient(166deg,#2b2f9e 0%,#6d2393 12%,#b02a7a 22%,#e8485f 32%,#ff7d4c 45%,#ffa860 60%,#ffcf9e 80%,#ffe8c8 100%);
  border-color:#ffe9dcd9;
  /* inside: light leaking at the seams. outside: light blooming off the face into the room */
  box-shadow:inset 0 0 calc(var(--s) * .035) #ffffff73,inset 0 0 calc(var(--s) * .12) #fff3e033,
    0 0 calc(var(--s) * .06) #ffa07a8c,0 0 calc(var(--s) * .2) #ff7a6a4d,0 0 calc(var(--s) * .45) #e0508a26}
/* the light source behind the diffuser: a bright core that falls off toward the corners, breathing slowly */
.bulb{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 72% 62% at 50% 54%,#fff8e8a6 0%,#ffe2c066 30%,#ffc8a01f 55%,transparent 72%),
    radial-gradient(ellipse 90% 90% at 50% 52%,transparent 58%,#3a0a3a4d 100%);
  animation:breathe 5.5s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.86}50%{opacity:1}}
.face>:not(.bulb):not(.art){position:relative}
.face::before{content:'';position:absolute;left:0;right:0;bottom:0;height:4.5%;z-index:2;pointer-events:none;
  /* the separation: a dark base band between the lit panel and the LED strip, so the light reads as coming from under it */
  background:linear-gradient(to top,var(--led-core) 0 3px,#ffffff 3px 4px,#2a1530 4px,#1a0c20 calc(100% - 2px),#ffe9dc 100%);
  box-shadow:0 5px 14px 3px #b9d0ffcc,0 0 4px #ffffff}
/* art on every side: blue-violet colour meshing in from the left corner, a flowing magenta shape,
   a fine arc and a few stars. Position and accent change per topic. */
.art{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 16% 36%,#fff 0 .9px,transparent 1.8px),radial-gradient(circle at 72% 30%,#fff 0 .8px,transparent 1.7px),
    radial-gradient(circle at 90% 46%,#fffd 0 .7px,transparent 1.6px),radial-gradient(circle at 44% 33%,#fffc 0 .6px,transparent 1.4px),
    radial-gradient(circle at 8% 52%,#fffb 0 .7px,transparent 1.5px),
    radial-gradient(circle at var(--ax) var(--ay),transparent calc(var(--ar) - .5%),#ffffff59 var(--ar),transparent calc(var(--ar) + .6%)),
    radial-gradient(ellipse 58% 34% at var(--wx) var(--wy),#ff4fa57a 0%,#c03ad04d 45%,transparent 75%),
    radial-gradient(ellipse 52% 30% at calc(var(--wx) + 24%) calc(var(--wy) + 12%),color-mix(in srgb,var(--acc) 38%,transparent) 0%,transparent 70%),
    radial-gradient(ellipse 42% 95% at 0% 46%,#5b3fe08c 0%,#7a34c440 45%,transparent 75%),
    radial-gradient(ellipse 80% 66% at 0% 0%,#343ee0e6 0%,#5d33cfb3 26%,#a1349f5c 50%,transparent 72%),
    linear-gradient(to bottom,#3a12584d 0%,#3a125833 18%,transparent 30%)}
.face>*{transition:opacity .16s ease}
.face.fade>:not(.bulb):not(.art){opacity:0}
.face::after{content:'';position:absolute;inset:0;background:#0a0410;opacity:var(--dim,0);pointer-events:none;transition:none}
.face[data-slot="0"]{transform:rotateY(0deg) translateZ(calc(var(--s) / 2))}
.face[data-slot="1"]{transform:rotateY(90deg) translateZ(calc(var(--s) / 2))}
.face[data-slot="2"]{transform:rotateY(180deg) translateZ(calc(var(--s) / 2))}
.face[data-slot="3"]{transform:rotateY(270deg) translateZ(calc(var(--s) / 2))}
.lid{position:absolute;inset:0;display:grid;place-items:center;transform:rotateX(90deg) translateZ(calc(var(--s) / 2));border:1px solid #ffd6c080;
  background:radial-gradient(ellipse at 50% 50%,#fff6e6 0%,#ffd2a6 26%,#ff9a72 52%,#e8607a 80%,#9a3a8c 100%);box-shadow:inset 0 0 calc(var(--s) * .05) #ffffff88,0 0 calc(var(--s) * .12) #ffb08a40}

.f-top{display:flex;align-items:center;gap:calc(var(--s) * .03);color:#ffffff;text-shadow:0 1px 2px #2a0a3a80}
.mono{display:grid;place-items:center;width:calc(var(--s) * .12);height:calc(var(--s) * .12);border-radius:26%;
  font:italic 700 calc(var(--s) * .075)/1 Georgia,serif;color:#fff1e2;background:#ffffff1f;border:1px solid #ffffff59;box-shadow:inset 0 1px 0 #ffffff59}
.f-label{font-size:max(9.5px,calc(var(--s) * .033));font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.f-num{margin-left:auto;font-size:max(9.5px,calc(var(--s) * .032));font-weight:700;letter-spacing:.08em;color:#ffe7f2}
.f-title{margin-top:auto;font-weight:800;font-size:calc(var(--s) * .148);line-height:.94;letter-spacing:-.045em;color:#2a0f22;
  text-shadow:0 1px 0 #ffe6d066}
.f-sub{margin-top:calc(var(--s) * .05);font-size:max(12px,calc(var(--s) * .05));font-weight:700;color:#2a0f22}
.f-foot{margin-top:calc(var(--s) * .05);padding-top:calc(var(--s) * .025);border-top:1px solid #2a0f2240;font-size:max(9px,calc(var(--s) * .03));font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#2a0f22}

.hint{margin:6px 0 0;font-size:12px;letter-spacing:.04em;color:#c3b6bd;text-align:center}

/* ---------- info + controls ---------- */
.info-col{position:relative}
.kicker{margin:0;text-transform:uppercase;letter-spacing:.24em;font-size:11px;font-weight:800;color:var(--amber)}
.info-col h1{margin:10px 0 0;font-weight:800;letter-spacing:-.045em;line-height:1.02;font-size:clamp(32px,4.6vw,56px);text-wrap:balance}
.lead{margin:12px 0 0;color:var(--muted);font-size:clamp(15px,1.4vw,18px);max-width:44ch}
.info-col .swap{transition:opacity .35s ease,transform .35s ease}
.info-col.out .swap{opacity:0;transform:translateY(6px)}
.go{margin-top:22px}
.picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:26px}
@media (min-width:520px){.picker{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Uniform button family (same as the intro): dark machined metal ring, sunken well, LED dot */
.metal-btn{--ring:conic-gradient(from 210deg,#cfcdd4,#5a5860 22%,#a9a6ae 40%,#3a383e 62%,#bdbac2 82%,#cfcdd4);--led:#5fd8ff;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 22px;border-radius:999px;border:0;cursor:pointer;
  font:800 14px/1.1 inherit;font-family:inherit;letter-spacing:.01em;color:#eef6ff;text-decoration:none;isolation:isolate;
  background:var(--ring);box-shadow:0 10px 22px #000a,0 2px 0 #000,inset 0 1px 0 #fff6;transition:transform .16s ease,box-shadow .16s ease}
.metal-btn::before{content:'';position:absolute;inset:4px;border-radius:inherit;z-index:-1;background:radial-gradient(ellipse at 50% 18%,#3a3842 0%,var(--well) 62%);box-shadow:inset 0 3px 7px #000e,inset 0 -1px 0 #ffffff1f}
.metal-btn::after{content:'';position:absolute;inset:-6px;border-radius:inherit;z-index:-2;border:1px solid #ffffff14;transition:box-shadow .25s ease,border-color .25s ease}
.metal-btn:hover{transform:translateY(-2px)}
.metal-btn:hover::after,.metal-btn:focus-visible::after,.metal-btn[aria-pressed=true]::after{border-color:color-mix(in srgb,var(--led) 70%,transparent);box-shadow:0 0 18px color-mix(in srgb,var(--led) 45%,transparent)}
.metal-btn[aria-pressed=true]{color:#fff;text-shadow:0 0 10px color-mix(in srgb,var(--led) 60%,transparent)}
.metal-btn[aria-pressed=true]::before{box-shadow:inset 0 5px 10px #000,inset 0 -1px 0 #ffffff12}   /* pressed in */
.metal-btn:active{transform:translateY(2px) scale(.985)}
.led{width:9px;height:9px;border-radius:50%;flex:none;background:var(--led);box-shadow:0 0 6px var(--led),0 0 14px var(--led),inset 0 -1px 2px #0006;opacity:.45}
.metal-btn[aria-pressed=true] .led{opacity:1}
.metal-btn--glow{color:#1a1205}
.metal-btn--glow::before{background:radial-gradient(ellipse at 50% 20%,#ffd9a0 0%,#ffae52 55%,#e2872e 100%);box-shadow:inset 0 2px 4px #fff8,inset 0 -3px 6px #a0541d}
.metal-btn--small{min-height:42px;padding:0 18px;font-size:13px}
.picker .metal-btn{padding:0 12px;font-size:13.5px}

@media (prefers-reduced-motion:reduce){.info-col .swap{transition:none}.bulb{animation:none;opacity:1}}

/* top of the cube carries the main mark */
.lid-mark{display:flex;flex-direction:column;align-items:center;gap:calc(var(--s) * .01)}
.lid-mark .glass{font:italic 800 calc(var(--s) * .3)/1 Georgia,'Times New Roman',serif}
.lid-mark small{font-size:calc(var(--s) * .05);font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:#4a1236}

/* glass letters (Danny's GZ reference): iridescent fill, a lit bevel from an SVG lighting filter, soft glow.
   The filter sits on the text element itself (a leaf), never on a 3D container. */
.glass{color:#d9e6ff;background:linear-gradient(100deg,#8ff1ff 0%,#b9c4ff 26%,#f2b8ff 48%,#ffd6ec 64%,#ffffff 78%,#9fe9ff 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:url(#glass)}
.info-col h1.glass{padding-bottom:.08em}