/* ==========================================================================
   join.austinpranger.com
   Layer 1 (always works): .baseline list — no JS, reduced motion, save-data.
   Layer 2 (enhancement):  .wheel — only under html[data-mode="wheel"].ready
   ========================================================================== */
@property --pos { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --c   { syntax: "<color>";  inherits: true; initial-value: #a78bfa; }

:root {
  --bg: #0b0910;
  --bg-2: #13101c;
  --fg: #f6f3ff;
  --muted: #b3abc9;
  --faint: #7d7593;
  --line: #ffffff1a;
  --glass: linear-gradient(135deg, #ffffff12, #ffffff05);
  --radius: 20px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.4, .5, 1);
  --serif: "Instrument Serif", ui-serif, Georgia, serif;
  --sans: Geist, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --c: #a78bfa;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg); }
body { font: 16px/1.5 var(--sans); min-height: 100svh; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 10px; }
kbd { font: 600 .75em var(--sans); padding: .05em .4em; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; margin: 0 .1em; }

/* ---------- Atmosphere ---------- */
.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; transition: --c .9s var(--ease); }
.blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .7; }
.b1 { width: 70vmax; height: 70vmax; left: calc(22vw - 35vmax); top: calc(45svh - 35vmax); background: radial-gradient(circle, color-mix(in oklab, var(--c) 70%, transparent), transparent 65%); animation: drift 22s ease-in-out infinite alternate; }
.b2 { width: 55vmax; height: 55vmax; right: -20vmax; bottom: -25vmax; background: radial-gradient(circle, #3b1d6e, transparent 65%); animation: drift 28s ease-in-out infinite alternate-reverse; }
.b3 { width: 35vmax; height: 35vmax; right: 10vw; top: 5vh; background: radial-gradient(circle, color-mix(in oklab, var(--c) 35%, #1e3a8a), transparent 70%); opacity: .3; animation: drift 34s ease-in-out infinite alternate; }
.grain { position: absolute; inset: -50%; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@keyframes drift { to { transform: translate(6vmax, 4vmax) scale(1.1); } }

/* ---------- Layer 1: baseline list ---------- */
.stage { width: min(40rem, 100%); margin: 0 auto; padding: max(2.5rem, env(safe-area-inset-top)) 1rem 2rem; }
.hero { text-align: center; }
.portrait { position: relative; width: 8.5rem; height: 8.5rem; margin: 0 auto 1.1rem; border-radius: 50%; padding: 3px;
  background: conic-gradient(from 210deg, var(--c), #ffffff22, var(--c)); box-shadow: 0 20px 60px -20px color-mix(in oklab, var(--c) 70%, transparent); }
.portrait img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 50%; border: 3px solid var(--bg); }
.name { margin: 0; font: italic 400 clamp(2.6rem, 9vw, 3.6rem)/1 var(--serif); letter-spacing: -.01em; }
.tagline { margin: .5rem 0 0; color: var(--muted); }
.baseline { margin-top: 2rem; }
.notice { padding: .8rem 1rem; border-radius: 14px; background: #ffb4541a; border: 1px solid #ffb45455; color: #ffd9a8; }
.crumbs-static { color: var(--faint); font-size: .9rem; }
.crumbs-static a { color: var(--muted); }

.list { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.list.sub { margin: .65rem 0 .3rem .9rem; padding-left: .9rem; border-left: 1px dashed var(--line); }
.card { display: flex; align-items: center; gap: .9rem; padding: .9rem 1rem; border-radius: var(--radius); text-decoration: none; cursor: pointer;
  background: var(--glass), var(--bg-2); border: 1px solid var(--line); box-shadow: inset 0 1px #ffffff10;
  transition: transform .25s var(--ease), border-color .25s, background .25s; list-style: none; }
.card::-webkit-details-marker { display: none; }
.card:hover { border-color: color-mix(in oklab, var(--c) 55%, transparent); transform: translateY(-1px); }
.card:active { transform: scale(.99); }
.ico { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 13px; font-size: 1.25rem;
  background: color-mix(in oklab, var(--c) 22%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c) 40%, transparent); }
.txt { flex: 1; min-width: 0; display: grid; gap: .1rem; }
.ttl { font-weight: 600; font-size: 1.05rem; letter-spacing: -.01em; }
.blurb { color: var(--muted); font-size: .92rem; }
.meta { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .35rem; }
.pill { font-size: .72rem; font-weight: 600; letter-spacing: .02em; padding: .15rem .55rem; border-radius: 99px; background: color-mix(in oklab, var(--c) 85%, #000); color: #0b0910; }
.pill-next { background: #ffffff14; color: var(--fg); box-shadow: inset 0 0 0 1px #ffffff22; }
.pill-quiet { background: transparent; color: var(--faint); box-shadow: inset 0 0 0 1px var(--line); }
.kind { flex: none; color: var(--faint); font-size: 1.15rem; transition: transform .25s var(--ease); }
details[open] > summary .kind { transform: rotate(90deg); }
.card-sm { padding: .6rem .9rem; }
.card-sm .ico { width: 2rem; height: 2rem; font-size: 1rem; border-radius: 10px; }
li[aria-current] > .card, li[aria-current] > details > .card, .card:target { border-color: var(--c); box-shadow: 0 0 0 1px var(--c), 0 10px 40px -12px var(--c); }

.foot { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.2rem; padding: 1rem 1rem max(1.5rem, env(safe-area-inset-bottom)); color: var(--faint); font-size: .82rem; }
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--fg); }

/* ---------- Tools (QR / share / motion) ---------- */
.tools { position: fixed; z-index: 30; top: max(.8rem, env(safe-area-inset-top)); right: .8rem; display: flex; gap: .4rem; }
.tools[hidden] { display: none; }
.tool { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-width: 42px; height: 42px; padding: 0 .7rem; border-radius: 99px; cursor: pointer;
  background: #16121fcc; border: 1px solid var(--line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: border-color .2s, background .2s; }
.tool:hover { border-color: #ffffff44; }
.tool svg { width: 18px; height: 18px; }
.tool .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); transition: background .2s, box-shadow .2s; }
.tool[aria-pressed="true"] .dot { background: var(--c); box-shadow: 0 0 10px var(--c); }
.motion-label { font-size: .8rem; font-weight: 500; }

/* ---------- QR dialog ---------- */
.qr { border: 0; padding: 0; margin: 0; width: 100vw; height: 100svh; max-width: none; max-height: none; background: #0b0910f2; color: var(--fg); }
.qr::backdrop { background: #0008; backdrop-filter: blur(6px); }
.qr[open] { display: grid; place-items: center; animation: qr-in .35s var(--ease); }
.qr-card { width: min(26rem, calc(100vw - 2rem)); text-align: center; padding: 1.5rem; }
.qr-kicker { margin: 0; color: var(--muted); text-transform: uppercase; letter-spacing: .14em; font-size: .75rem; }
.qr-title { margin: .3rem 0 1.2rem; font: italic 400 2.4rem/1.05 var(--serif); }
.qr-code { background: #fff; border-radius: 28px; padding: 1.1rem; box-shadow: 0 30px 80px -30px var(--c), 0 0 0 6px color-mix(in oklab, var(--c) 30%, transparent); }
.qr-code img { width: 100%; height: auto; display: block; aspect-ratio: 1; image-rendering: pixelated; }
.qr-url { margin: 1rem 0; font: 500 .95rem var(--sans); color: var(--muted); word-break: break-all; }
.qr-scope { display: inline-flex; padding: 4px; border-radius: 99px; background: #ffffff0d; border: 1px solid var(--line); margin-bottom: 1rem; }
.qr-scope button { border: 0; background: none; padding: .45rem .9rem; border-radius: 99px; cursor: pointer; font-size: .85rem; color: var(--muted); }
.qr-scope button[aria-pressed="true"] { background: #ffffff1f; color: var(--fg); }
.qr-scope[hidden] { display: none; }
.qr-actions { display: flex; gap: .6rem; justify-content: center; }
.qr-actions button, .btn { min-height: 46px; padding: 0 1.2rem; border-radius: 99px; border: 1px solid var(--line); background: #ffffff0d; cursor: pointer; font-weight: 600; }
.qr-actions .primary { background: var(--fg); color: var(--bg); border-color: transparent; }
@keyframes qr-in { from { opacity: 0; transform: scale(.97); } }

.toast { position: fixed; z-index: 60; left: 50%; bottom: max(1.5rem, env(safe-area-inset-bottom)); transform: translate(-50%, 1rem); opacity: 0; pointer-events: none;
  padding: .6rem 1rem; border-radius: 99px; background: var(--fg); color: var(--bg); font-weight: 600; font-size: .9rem; transition: opacity .25s, transform .25s var(--ease); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ==========================================================================
   Layer 2: the wheel
   ========================================================================== */
/* Hold the list back briefly while app.js boots; reveal it anyway if it never does. */
html[data-mode="wheel"]:not(.ready) .stage { opacity: 0; animation: reveal .01s 1.6s forwards; }
@keyframes reveal { to { opacity: 1; } }

html[data-mode="wheel"].ready, html[data-mode="wheel"].ready body { height: 100%; overflow: hidden; overscroll-behavior: none; }
html[data-mode="wheel"].ready .baseline, html[data-mode="wheel"].ready .hero .portrait, html[data-mode="wheel"].ready .tagline { display: none; }
html[data-mode="wheel"].ready .foot { position: fixed; left: 0; bottom: 0; z-index: 5; padding: .5rem 1rem; font-size: .72rem; justify-content: flex-start; opacity: .7; display: none; }
html[data-mode="wheel"].ready .stage { position: fixed; inset: 0; width: auto; padding: 0; }
html[data-mode="wheel"].ready .hero { position: absolute; z-index: 6; left: 1.1rem; top: max(.9rem, env(safe-area-inset-top)); text-align: left; pointer-events: none; }
html[data-mode="wheel"].ready .name { font-size: clamp(1.9rem, 7vw, 2.6rem); }

.wheel[hidden] { display: none; }
.wheel {
  /* geometry — phone first */
  --px: 21vw;                                   /* hub centre x */
  --py: 45svh;                                  /* hub centre y */
  --pd: min(34vw, 22svh);                       /* portrait diameter */
  --r: calc(var(--pd) / 2 + 8vw);               /* spoke radius (to card's leading edge) */
  --step: 21;                                   /* degrees between cards */
  --cw: calc(100vw - var(--px) - var(--r) - 10px);
  position: absolute; inset: 0; touch-action: none; user-select: none; -webkit-user-select: none;
  transition: --pos .75s var(--ease), --c .9s var(--ease);
}
.wheel.instant, .wheel.dragging { transition: --c .9s var(--ease); }

.crumbs { position: absolute; z-index: 6; left: 1.1rem; right: 1.1rem; top: calc(max(.9rem, env(safe-area-inset-top)) + clamp(2.3rem, 8vw, 3rem)); display: flex; flex-wrap: wrap; align-items: center; gap: .2rem; font-size: .82rem; color: var(--faint); min-height: 1.8rem; }
.crumbs button { border: 0; background: none; padding: .2rem .35rem; border-radius: 8px; cursor: pointer; color: var(--muted); }
.crumbs button:hover { color: var(--fg); background: #ffffff10; }
.crumbs [aria-current] { color: var(--fg); font-weight: 600; }
.crumbs .sep { opacity: .5; }

/* hub: portrait + rotating dial */
.hub { position: absolute; z-index: 3; left: calc(var(--px) - var(--pd) / 2); top: calc(var(--py) - var(--pd) / 2); width: var(--pd); height: var(--pd); }
.ph { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: var(--bg-2);
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px color-mix(in oklab, var(--c) 80%, transparent), 0 25px 80px -15px color-mix(in oklab, var(--c) 80%, transparent); }
.ph-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity .7s var(--ease), transform 1.2s var(--ease); }
.ph-img.on { opacity: 1; transform: scale(1); }
.dial { position: absolute; inset: calc(var(--pd) * -.16); border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, #ffffff40 0 .5deg, transparent .5deg 7deg);
  -webkit-mask: radial-gradient(circle, transparent 64%, #000 65%, #000 69%, transparent 70%); mask: radial-gradient(circle, transparent 64%, #000 65%, #000 69%, transparent 70%);
  transform: rotate(calc(var(--pos) * var(--step) * -1deg)); }
.notch { position: absolute; right: calc(var(--pd) * -.18); top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--c); box-shadow: 0 0 14px 3px var(--c); }
.hub::after { content: ""; position: absolute; inset: calc(var(--pd) * -.3); border-radius: 50%; border: 1px solid #ffffff0d; }

/* spokes */
.spokes { position: absolute; z-index: 4; left: var(--px); top: var(--py); width: 0; height: 0; margin: 0; padding: 0; list-style: none; }
.spokes > li { --a: calc((var(--i) - var(--pos)) * var(--step) * 1deg); --dd: min(var(--d, 0), 4);
  position: absolute; left: 0; top: 0; width: 0; height: 0; transform: rotate(var(--a)); }
.spokes > li::before { content: ""; position: absolute; left: calc(var(--pd) / 2 + 8px); top: 0; width: calc(var(--r) - var(--pd) / 2 - 12px); height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--c) 70%, transparent)); opacity: calc(.9 - var(--dd) * .3); }
.spoke {
  position: absolute; left: var(--r); top: 0; width: var(--cw); max-width: 19rem; display: flex; align-items: center; gap: .65rem;
  padding: .55rem .7rem .55rem .55rem; border-radius: 16px; text-decoration: none; cursor: pointer; text-align: left;
  background: var(--glass), #15111fd9; border: 1px solid var(--line); box-shadow: inset 0 1px #ffffff12;
  transform-origin: left center;
  transform: translateY(-50%) rotate(calc(var(--a) * -1)) scale(calc(1 - var(--dd) * .09));
  opacity: calc(1 - var(--dd) * .24); filter: blur(calc(var(--dd) * .6px));
  transition: opacity .45s var(--ease), filter .45s var(--ease), transform .45s var(--ease), border-color .3s, background .3s, box-shadow .3s;
}
.wheel.dragging .spoke { transition: border-color .3s, background .3s; }
.spoke .ico { width: 2.3rem; height: 2.3rem; border-radius: 12px; font-size: 1.1rem; }
.spoke .lbl { flex: 1; min-width: 0; font-weight: 600; font-size: .95rem; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spoke .kind { display: inline-flex; align-items: center; gap: .2rem; font-size: .75rem; font-weight: 600; color: var(--faint); }
.spoke .kind svg { width: 14px; height: 14px; }
.spokes > li.active .spoke { --c: var(--sc); background: linear-gradient(135deg, color-mix(in oklab, var(--sc) 26%, transparent), #ffffff06), #17122a; border-color: color-mix(in oklab, var(--sc) 80%, transparent);
  box-shadow: inset 0 1px #ffffff1f, 0 0 0 1px color-mix(in oklab, var(--sc) 50%, transparent), 0 12px 40px -12px var(--sc); }
.spokes > li.active .spoke .kind { color: var(--fg); }
.spoke .ico { --c: var(--sc); }
.spokes > li.far { visibility: hidden; }
.spokes > li.far .spoke { opacity: 0; pointer-events: none; }
.spokes > li.visit .spoke { padding: .9rem 1rem; }
.spokes > li.visit .lbl { font: italic 400 1.5rem/1.1 var(--serif); white-space: normal; }

/* giant editorial title behind everything */
.ghost { position: absolute; z-index: 1; left: -.04em; right: 0; bottom: 18svh; margin: 0; pointer-events: none; white-space: nowrap; overflow: hidden;
  font: italic 400 clamp(6rem, 24vw, 22rem)/.9 var(--serif); letter-spacing: -.03em;
  background: linear-gradient(90deg, color-mix(in oklab, var(--c) 30%, transparent), transparent 85%); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .5; }
.ghost.in { animation: ghost-in 1s var(--ease) both; }
@keyframes ghost-in { from { opacity: 0; transform: translateX(6vw); filter: blur(8px); } }

/* rotate buttons */
.rot { position: absolute; z-index: 6; left: var(--px); top: calc(var(--py) + var(--pd) / 2 + var(--pd) * .3 + .4rem); transform: translateX(-50%); display: flex; gap: .45rem; }
.rot button { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; cursor: pointer; background: #16121fcc; border: 1px solid var(--line); backdrop-filter: blur(10px); }
.rot button:disabled { opacity: .35; cursor: default; }
.rot svg { width: 18px; height: 18px; }

/* detail sheet */
.detail { position: absolute; z-index: 7; left: .75rem; right: .75rem; bottom: max(.75rem, env(safe-area-inset-bottom)); padding: 1.05rem 1.1rem 1.1rem;
  border-radius: 24px; background: linear-gradient(160deg, color-mix(in oklab, var(--c) 14%, transparent), transparent 60%), #120f1bec;
  border: 1px solid #ffffff1f; box-shadow: 0 -10px 60px -20px #000, inset 0 1px #ffffff14; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.detail .kicker { margin: 0 0 .2rem; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.detail h2 { margin: 0; font: italic 400 clamp(1.7rem, 7vw, 2.3rem)/1.05 var(--serif); letter-spacing: -.01em; }
.detail .blurb { margin: .4rem 0 0; font-size: .95rem; }
.detail .meta { margin-top: .55rem; }
.detail .peek { margin: .55rem 0 0; font-size: .8rem; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.btn { white-space: nowrap; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; text-decoration: none; font-size: .95rem; transition: transform .2s var(--ease), background .2s; }
.btn:active { transform: scale(.97); }
.btn-go { flex: 1; background: var(--c); color: #0b0910; border-color: transparent; box-shadow: 0 10px 30px -10px var(--c); }
.btn-go:hover { filter: brightness(1.08); }
.btn-back { padding: 0 1rem; }
.btn svg { width: 16px; height: 16px; }
.detail.swap > * { animation: rise .45s var(--ease) both; }
.detail.swap > :nth-child(2) { animation-delay: .03s; } .detail.swap > :nth-child(3) { animation-delay: .06s; } .detail.swap > :nth-child(n+4) { animation-delay: .09s; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

.hint { position: absolute; z-index: 5; left: 0; right: 0; text-align: center; top: calc(var(--py) - var(--pd) / 2 - var(--pd) * .3 - 2.2rem); margin: 0; font-size: .78rem; color: var(--faint); transition: opacity .6s; pointer-events: none; }
.hint.gone { opacity: 0; }

/* ---------- larger screens ---------- */
@media (max-width: 480px) {
  .motion-label { display: none; }
  .tool-wide { padding: 0; width: 42px; }
  .btn-copy span { display: none; }
  .btn-copy { padding: 0 .9rem; }
  .ghost { bottom: auto; top: 11svh; }
}
@media (min-width: 900px) {
  .ghost { bottom: 4svh; }
  .wheel { --px: 27vw; --py: 52svh; --pd: min(22vw, 38svh); --r: calc(var(--pd) / 2 + 4.5vw); --step: 17; --cw: 17.5rem; }
  .spoke { padding: .65rem .85rem .65rem .65rem; }
  .spoke .lbl { font-size: 1rem; }
  .detail { left: auto; right: max(3vw, calc(50vw - 40rem)); top: 50%; bottom: auto; width: 25rem; transform: translateY(-50%); padding: 1.6rem; border-radius: 28px; }
  .detail h2 { font-size: 2.8rem; }
  .detail .blurb { font-size: 1.02rem; }
  html[data-mode="wheel"].ready .hero { left: 2rem; top: 1.6rem; }
  .crumbs { left: 2rem; top: calc(1.6rem + 3rem); }
  html[data-mode="wheel"].ready .foot { display: flex; }
  .hint { top: auto; bottom: 1.2rem; }
}
@media (min-width: 900px) and (max-width: 1150px) { .detail { width: 21rem; } .wheel { --px: 24vw; } }
/* short landscape phones */
@media (max-height: 520px) and (orientation: landscape) {
  .wheel { --px: 16vw; --py: 55svh; --pd: 34svh; --r: calc(var(--pd) / 2 + 5vw); --cw: 15rem; }
  .detail { left: auto; right: .75rem; top: .75rem; bottom: .75rem; width: 19rem; overflow: auto; }
  .crumbs { right: 21rem; }
  .hint { display: none; }
}

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
}