:root{--paper:#f5f2ec;--raised:#fbf9f5;--sunk:#ece7dd;--ink:#1a1815;--soft:#4a453d;--faint:#7d7669;--line:#ddd6c9;--strong:#c8bfae;--gold:#9a7b43;--night:#14120f;--pos:#2f6b4f;--neg:#9b3b2f;--serif:'Iowan Old Style',Palatino,Georgia,serif;--sans:ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.018em;margin:0;line-height:1.1}
h1{font-size:clamp(1.8rem,3.6vw,2.7rem)}h2{font-size:1.05rem;font-family:var(--sans);font-weight:600;letter-spacing:.02em}
.eyebrow{font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:0}
.lede{color:var(--soft);max-width:60ch}.muted{color:var(--faint)}.small{font-size:.85rem}
.note{font-size:.85rem;color:var(--faint);border-left:2px solid var(--gold);padding-left:.85rem;max-width:60ch}
.pos{color:var(--pos)}.neg{color:var(--neg)}
header.gh{display:flex;align-items:center;gap:1rem;padding:.9rem clamp(1rem,4vw,2.5rem);border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(245,242,236,.92);backdrop-filter:blur(8px);z-index:20}
header.gh a.brand{font-family:var(--serif);font-size:1.2rem;text-decoration:none;color:var(--ink);margin-right:auto}
header.gh b{font-weight:400}
#credits{font-size:.82rem;color:var(--faint);border:1px solid var(--line);padding:.35rem .7rem}
main{max-width:1180px;margin:0 auto;padding:clamp(1.25rem,3vw,2.5rem) clamp(1rem,4vw,2.5rem) 5rem}
section+section,.cols{margin-top:2.25rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background:var(--gold);color:#fff;border:1px solid transparent;padding:.8rem 1.35rem;font:inherit;font-size:.92rem;font-weight:500;cursor:pointer;text-decoration:none}
.btn:hover{background:#86682f}.btn:disabled{opacity:.55;cursor:default}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--strong)}.btn-outline:hover{background:var(--sunk)}
.btnrow{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.5rem}
.link{background:none;border:0;color:var(--faint);text-decoration:underline;cursor:pointer;font:inherit;font-size:.85rem}
.panel{background:var(--raised);border:1px solid var(--line);padding:clamp(1.1rem,2vw,1.6rem)}
/* picker */
.resume{border:1px solid var(--gold);background:var(--raised);padding:1.1rem 1.3rem}
.rrow{display:flex;gap:1rem;align-items:center;text-decoration:none;color:inherit;padding:.6rem 0;border-top:1px solid var(--line)}
.rrow:first-of-type{border-top:0}.rrow .arrow{margin-left:auto;color:var(--gold)}
.pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:1.1rem;margin-top:1.5rem}
.pcard{background:var(--raised);border:1px solid var(--line);padding:1.25rem;display:flex;flex-direction:column;gap:.55rem}
.pcard.locked{border-style:dashed;border-color:var(--strong)}
.pcard .tag{font-family:var(--serif);font-style:italic;color:var(--gold);margin:0;font-size:.95rem}
.pcard h3{font-size:1.15rem}
.pcard .btn{margin-top:auto}
.pill{align-self:flex-start;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--strong);color:var(--faint);padding:.2rem .5rem}
.alloc{display:grid;gap:.2rem;margin:.4rem 0 .8rem;font-size:.8rem}
.alloc div{display:flex;justify-content:space-between;gap:1rem;color:var(--faint)}
.alloc dt{text-transform:capitalize}.alloc dd{margin:0;font-variant-numeric:tabular-nums;color:var(--soft)}
/* hud */
.hud{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:1rem;border-bottom:1px solid var(--line);padding-bottom:1.1rem}
.hud .k{display:block;font-size:.63rem;letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
.hud b{font-family:var(--serif);font-size:1.6rem;font-variant-numeric:tabular-nums;display:block}
.hud i{font-style:normal;font-size:.75rem}
/* layout */
.cols{display:grid;grid-template-columns:minmax(0,17rem) minmax(0,1fr);gap:1.5rem;align-items:start}
@media(max-width:56rem){.cols{grid-template-columns:1fr}}
.bar{position:relative;display:flex;justify-content:space-between;gap:.75rem;font-size:.82rem;padding:.45rem 0 .55rem;border-bottom:1px solid var(--line)}
.bar span{color:var(--faint);text-transform:capitalize}.bar b{font-variant-numeric:tabular-nums;font-weight:500}
.bar i{position:absolute;left:0;bottom:0;height:2px;background:var(--gold);transition:width .4s ease}
.bar.debt i{background:var(--neg)}.bar.metric i{background:var(--soft)}
/* event */
.stage{min-height:22rem;display:flex;flex-direction:column}
.evh{display:flex;justify-content:space-between;font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:1rem}
.ev h1{margin-bottom:.8rem}
.prose{color:var(--soft);white-space:pre-wrap;min-height:3rem}
blockquote{margin:1.1rem 0 0;border-left:2px solid var(--gold);padding-left:1rem;font-family:var(--serif);font-style:italic;color:var(--soft)}
blockquote .who{display:block;font-family:var(--sans);font-style:normal;font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;color:var(--faint);margin-bottom:.35rem}
.choices{display:grid;gap:.6rem;margin-top:1.6rem}
.choice{position:relative;display:grid;gap:.2rem;text-align:left;background:var(--paper);border:1px solid var(--line);padding:.85rem 2.4rem .85rem 1.05rem;font:inherit;cursor:pointer}
.choice:hover:not(:disabled){border-color:var(--gold);background:var(--raised)}
.choice:disabled{opacity:.5;cursor:default}
.choice .cl{font-weight:600;font-size:.95rem}.choice .cp{font-size:.83rem;color:var(--faint)}
.choice .arrow{position:absolute;right:1rem;top:50%;transform:translateY(-50%);color:var(--gold)}
.loading{margin:auto;text-align:center;color:var(--faint)}
.dots{display:inline-block;width:2.5rem;height:2px;background:var(--strong);position:relative;overflow:hidden;margin-bottom:1rem}
.dots::after{content:'';position:absolute;inset:0;background:var(--gold);animation:sweep 1.1s ease-in-out infinite}
@keyframes sweep{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
/* history */
.hist table{width:100%;border-collapse:collapse;font-size:.86rem}
.hist td{border-bottom:1px solid var(--line);padding:.55rem .4rem;color:var(--soft)}
.hist td.d{width:2.5rem;color:var(--faint);font-variant-numeric:tabular-nums}
.hist td.c{font-style:italic;color:var(--faint)}
.hist td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
/* modal */
#modal{position:fixed;inset:0;display:none;place-items:center;background:rgba(20,18,15,.72);z-index:60;padding:1.25rem}
#modal.open{display:grid}
.sheet{background:var(--paper);border:1px solid var(--strong);padding:clamp(1.4rem,3vw,2.2rem);max-width:38rem;width:100%;display:grid;gap:.7rem}
.sheet h2{font-family:var(--serif);font-size:1.5rem;font-weight:400}
.packs{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.7rem;margin-top:.6rem}
.pack{position:relative;display:grid;gap:.15rem;background:var(--raised);border:1px solid var(--line);padding:1rem .8rem;font:inherit;cursor:pointer;text-align:left}
.pack:hover{border-color:var(--gold)}.pack.featured{border-color:var(--gold)}
.pack em{position:absolute;top:-.6rem;left:.7rem;background:var(--gold);color:#fff;font-style:normal;font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;padding:.15rem .45rem}
.pack b{font-size:.95rem}.pack span{font-size:.8rem;color:var(--faint)}
.pack i{font-family:var(--serif);font-style:normal;font-size:1.3rem;margin-top:.2rem}
/* toast */
#toast{position:fixed;left:50%;bottom:1.5rem;transform:translate(-50%,150%);background:var(--night);color:var(--paper);padding:.8rem 1.2rem;font-size:.88rem;transition:transform .28s ease;z-index:70;max-width:90vw}
#toast.show{transform:translate(-50%,0)}
/* --------------------------------------------------------------- account */
#account { display: flex; align-items: center; gap: .6rem; font-size: .85rem; }
#account .who { color: var(--faint); max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gbtn {
  display: inline-flex; align-items: center; gap: .5rem;
  border: 1px solid var(--line); background: var(--raised); color: var(--ink);
  padding: .45rem .8rem; font-size: .84rem; text-decoration: none;
}
.gbtn:hover { border-color: var(--strong); background: var(--paper); }
.note.guest { margin-top: 1.1rem; }
/* Persona card photography (mirrors the landing-page treatment). */
.pcard { padding: 0; overflow: hidden; }
.pcard > *:not(.pcard-media) { margin-left: 1.25rem; margin-right: 1.25rem; }
.pcard > .btn { margin-bottom: 1.25rem; }
.pcard-media { height: 13rem; overflow: hidden; border-bottom: 1px solid var(--line); }
.pcard-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pcard.locked .pcard-media img { filter: grayscale(.55) brightness(.82); }

/* --------------------------------------------------------------- imagery */
/* Identity band: keeps "who you are" visible for the whole run. */
.idband {
  display: flex; align-items: stretch; gap: 0;
  border: 1px solid var(--line); background: var(--raised);
  overflow: hidden; margin-bottom: 1.25rem;
}
.idband img { width: 7rem; height: 5rem; object-fit: cover; flex: none; display: block; }
.idmeta { display: flex; flex-direction: column; justify-content: center; padding: .6rem 1rem; }
.idmeta .k { font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.idmeta b { font-family: var(--serif); font-weight: 400; font-size: 1.2rem; }

/* Day card artwork. Wide and short so it sets mood without pushing the choices
   below the fold — the options must stay reachable without scrolling. */
.evmedia {
  margin: calc(-1 * clamp(1.1rem, 2vw, 1.6rem));
  margin-bottom: 1.1rem;
  /* NOT aspect-ratio + max-height: clamping the height makes the ratio
     back-solve the width, which collapsed this to 411px inside an 800px card. */
  width: auto; height: clamp(7.5rem, 15vw, 11rem); overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.evmedia img { width: 100%; height: 100%; object-fit: cover; display: block; }
.evmedia.dim img { filter: brightness(.55) saturate(.7); }
.ev.done .evmedia { height: clamp(6.5rem, 12vw, 9rem); }


/* Speaker portrait. `onerror` removes the element and the modifier class, so a
   missing asset collapses cleanly to a name-only quote rather than a broken icon. */
blockquote.has-face { display: grid; grid-template-columns: 3.25rem 1fr; gap: .9rem; align-items: start; border-left: 0; padding-left: 0; }
blockquote.has-face .who { grid-column: 2; }
blockquote.has-face .face {
  grid-row: 1 / span 2; width: 3.25rem; height: 3.25rem;
  object-fit: cover; border: 1px solid var(--line); display: block;
}

/* Landing page carried a choice through ?persona= — make it unmistakable which
   identity was picked, without auto-starting anything. */
.pcard.picked {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold) inset, 0 8px 30px -14px rgba(26,24,21,.4);
}
.pcard.picked .btn { background: #86682f; }

/* ------------------------------------------------------------- sign-in gate */
/* Shown before any model call. The identities stay visible so the offer is
   concrete before the ask, and the one chosen on the landing page is echoed back. */
.gate { max-width: 34rem; margin: 3rem auto; text-align: center; }
.gate h2 { font-size: 1.9rem; margin: 0.2rem 0 0.8rem; }
.gate .tagline { color: var(--gold); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; margin: 0; }
.gate .muted { margin-bottom: 1.6rem; }
.gbtn-lg { font-size: 1rem; padding: 0.85rem 1.5rem; gap: .6rem; }
.gate .small { margin-top: 1rem; }
.gate-cast { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin-top: 2.4rem; }
.gate-cast figure { margin: 0; width: 120px; opacity: .45; transition: opacity 200ms ease; }
.gate-cast figure.picked { opacity: 1; }
.gate-cast figure.picked img { outline: 2px solid var(--gold); outline-offset: 2px; }
.gate-cast img { width: 100%; height: auto; border-radius: 3px; display: block; }
.gate-cast figcaption { font-size: .7rem; color: var(--ink-faint); margin-top: .4rem; }