/* NicNacMeet — LIGHT lane (cream · daylight · gold), Fraunces + Inter self-hosted.
   The call stage is a deep slate "stage" inside the light page — the cinematic
   plate the guest's video and Beam's presence read against. */
@font-face{font-family:Fraunces;src:url(assets/fonts/fraunces-400.woff2) format("woff2");font-weight:400}
@font-face{font-family:Fraunces;src:url(assets/fonts/fraunces-500.woff2) format("woff2");font-weight:500}
@font-face{font-family:Fraunces;src:url(assets/fonts/fraunces-400-italic.woff2) format("woff2");font-weight:400;font-style:italic}
@font-face{font-family:Inter;src:url(assets/fonts/inter-300.woff2) format("woff2");font-weight:300}
@font-face{font-family:Inter;src:url(assets/fonts/inter-400.woff2) format("woff2");font-weight:400}
@font-face{font-family:Inter;src:url(assets/fonts/inter-600.woff2) format("woff2");font-weight:600}
:root{
  --cream:#faf7ef; --paper:#fffdf8; --ink:#211d13; --ink2:#5d5747; --faint:#8a8271;
  --gold:#b89350; --gold2:#d4a017; --line:#e7ddc8; --good:#2e6e4c; --warn:#9a6a12;
  --stage:#0d1320; --stage2:#131d31; --stage-ink:#eef1f7; --stage-dim:#9fb0c9;
  --radius:16px; --shadow:0 18px 50px rgba(60,45,10,.10);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--cream);color:var(--ink);font-family:Inter,system-ui,sans-serif;font-weight:400;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:Fraunces,Georgia,serif;font-weight:500;line-height:1.15}
h1{font-size:clamp(1.7rem,3.4vw,2.4rem);margin:.2rem 0 .6rem}
h3{font-size:1.15rem;margin:1.1rem 0 .4rem}
h4{margin:.2rem 0 .5rem;font-size:.95rem;letter-spacing:.02em}
a{color:#7c5c14}
button{font-family:inherit}

/* header + stepper + legs */
.topbar{display:flex;justify-content:space-between;align-items:center;gap:1rem;max-width:1240px;margin:0 auto;padding:18px 22px 6px}
.brand{display:flex;align-items:center;gap:14px}
.brand-logo{width:54px;height:54px;object-fit:contain}
.brand-name{font-family:Fraunces,serif;font-size:1.5rem;display:block;line-height:1}
.brand-sub{color:var(--ink2);font-size:.85rem}
.mode-chip{border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:6px 14px;font-size:.8rem;color:var(--ink2)}
.stepper{display:flex;gap:6px;flex-wrap:wrap;max-width:1240px;margin:8px auto 0;padding:0 22px}
.stepper button{border:1px solid var(--line);background:transparent;color:var(--ink2);border-radius:999px;padding:7px 13px;font-size:.83rem;cursor:pointer}
.stepper button.on{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.stepper button.done{border-color:var(--gold);color:#7c5c14}
.legs{display:flex;gap:8px;flex-wrap:wrap;align-items:center;max-width:1240px;margin:10px auto 0;padding:0 22px;font-size:.78rem;color:var(--ink2)}
.legs-label{font-weight:600;color:var(--ink)}
.leg{border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:4px 11px}
.leg b{font-weight:600}
.leg b.live{color:var(--good)} .leg b.proto{color:var(--warn)} .leg b.off{color:var(--faint)}

main{max-width:1240px;margin:0 auto;padding:18px 22px 30px}
.screen{display:none}.screen.on{display:block;animation:rise .45s ease both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.cols{display:grid;grid-template-columns:1.9fr 1fr;gap:20px;align-items:start}
@media(max-width:900px){.cols{grid-template-columns:1fr}}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:26px 28px}
.kicker{text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;color:var(--gold);font-weight:600;margin:0}
.lede{color:var(--ink2);max-width:56ch}
.fineprint{font-size:.8rem;color:var(--faint);margin-top:14px}
.hint{font-size:.78rem;color:var(--faint);font-weight:300}
.row{display:flex;align-items:center}.gap{gap:12px}.wrap{flex-wrap:wrap}

/* forms + buttons */
.form label{display:block;font-size:.88rem;font-weight:600;margin:14px 0 0}
.form input,.form select,.form textarea{width:100%;margin-top:5px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;font:inherit;font-weight:400;color:var(--ink)}
.form textarea{resize:vertical}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:640px){.grid2{grid-template-columns:1fr}}
.btn{display:inline-block;border:1px solid var(--ink);background:transparent;color:var(--ink);border-radius:999px;padding:10px 20px;font-size:.92rem;cursor:pointer;text-decoration:none}
.btn.primary{background:var(--gold2);border-color:var(--gold2);color:#221a02;font-weight:600}
.btn.ghost{border-color:var(--line);color:var(--ink2)}
.btn.big{font-size:1.05rem;padding:13px 28px}
.btn.small{padding:6px 14px;font-size:.83rem}
.btn:hover{filter:brightness(1.05)}
.ticks{list-style:none;padding:0;margin:.4rem 0}
.ticks li{padding:5px 0 5px 22px;position:relative;font-size:.92rem;color:var(--ink2)}
.ticks li::before{content:"";position:absolute;left:2px;top:12px;width:8px;height:8px;border-radius:50%;background:var(--gold2)}

/* Beam presence */
.beam-stage{display:flex;justify-content:center;padding:8px 0 2px}
.beam-stage.big .beam-img{width:min(300px,70vw)}
.beam-stage.sm .beam-img{width:120px}
.beam-img{width:min(210px,55vw);height:auto;filter:drop-shadow(0 14px 24px rgba(120,85,10,.22))}
.breathe{animation:breathe 5.2s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:translateY(0);filter:drop-shadow(0 14px 24px rgba(120,85,10,.20)) brightness(1)}50%{transform:translateY(-5px);filter:drop-shadow(0 20px 30px rgba(120,85,10,.30)) brightness(1.06)}}
@media(prefers-reduced-motion:reduce){.breathe{animation:none}.screen.on{animation:none}}
.beam-line{font-family:Fraunces,serif;font-style:italic;font-size:1.06rem;text-align:center;color:var(--ink);margin:10px 6px 2px}
.beam-line.lg{text-align:left;font-size:1.2rem}
.beam-sign{text-align:center;color:var(--faint);font-size:.82rem;margin:2px 0 0}
.beam-card{text-align:center}

/* email preview */
.email-preview{border:1px solid var(--line);border-radius:12px;background:#fff;padding:22px 24px;margin:16px 0;font-size:.95rem}
.email-preview .em-head{border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:12px;font-size:.85rem;color:var(--ink2)}
.email-preview h3{margin:.4rem 0}
.linkbox{word-break:break-all;background:var(--cream);border:1px dashed var(--gold);border-radius:10px;padding:12px 14px;font-size:.86rem}
.deposit{border:1px solid var(--gold);background:#fdf6e3;border-radius:12px;padding:14px 18px;margin-top:16px}
.deposit h4{color:#7c5c14}
.recap{background:var(--cream);border-radius:12px;padding:14px 18px;font-size:.94rem}
.recap li{margin:3px 0}

/* join / AV */
.avbox{position:relative;border-radius:14px;overflow:hidden;background:var(--stage);aspect-ratio:16/8.2;margin:14px 0}
.avbox video{width:100%;height:100%;object-fit:cover;display:block}
.av-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--stage-dim);padding:24px;font-size:.95rem}
.av-fallback.hide{display:none}
.mic-meter{position:absolute;left:14px;bottom:12px;display:flex;gap:10px;align-items:center;color:var(--stage-ink);font-size:.8rem;background:rgba(10,14,24,.55);padding:6px 12px;border-radius:999px}
.meter{width:110px;height:8px;background:rgba(255,255,255,.18);border-radius:99px;overflow:hidden}
.meter i{display:block;height:100%;width:0;background:var(--gold2);transition:width .08s linear}
.namein{font-size:.88rem;font-weight:600}
.namein input{margin-left:8px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;font:inherit;font-weight:400}
.consent{border-left:3px solid var(--gold);background:var(--cream);padding:12px 16px;border-radius:0 12px 12px 0;margin:16px 0;font-size:.93rem}

/* lobby */
.lobby-grid{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center}
@media(max-width:700px){.lobby-grid{grid-template-columns:1fr}}
.prep-card{background:var(--cream);border-radius:12px;padding:14px 18px;margin-top:12px;font-size:.93rem}
.prep-card dt{font-weight:600;color:#7c5c14;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;margin-top:8px}
.prep-card dd{margin:2px 0 0}

/* the call */
.call-shell{display:grid;grid-template-columns:1.85fr 1fr;gap:18px;align-items:start}
@media(max-width:980px){.call-shell{grid-template-columns:1fr}}
.call-stage{background:var(--stage);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.stage-main{position:relative;aspect-ratio:16/9.4;background:radial-gradient(120% 130% at 50% 0%,var(--stage2),var(--stage))}
.stage-main video#stageVideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stage-share[hidden]{display:none!important}
.stage-share{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:34px 40px;color:var(--stage-ink);background:linear-gradient(120deg,rgba(13,19,32,.96),rgba(19,29,49,.92))}
.stage-share .share-kicker{text-transform:uppercase;letter-spacing:.16em;font-size:.7rem;color:var(--gold2);margin:0}
.stage-share h3{color:#fff;font-size:1.7rem;margin:.3rem 0}
.stage-share p{color:var(--stage-dim);max-width:46ch}
.stage-self{position:absolute;right:14px;bottom:14px;width:168px;aspect-ratio:4/3;border-radius:12px;overflow:hidden;border:2px solid rgba(255,255,255,.25);background:#000}
.stage-self video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.self-name{position:absolute;left:8px;bottom:6px;color:#fff;font-size:.72rem;text-shadow:0 1px 4px #000}
.stage-status{position:absolute;left:14px;bottom:14px;max-width:60%;color:var(--stage-ink);background:rgba(10,14,24,.62);border:1px solid rgba(255,255,255,.14);font-size:.76rem;padding:6px 12px;border-radius:999px}
.call-controls{display:flex;gap:8px;flex-wrap:wrap;padding:12px;background:var(--stage2)}
.ctl{border:1px solid rgba(255,255,255,.25);background:transparent;color:var(--stage-ink);border-radius:999px;padding:8px 16px;cursor:pointer;font-size:.86rem}
.ctl.off{background:rgba(255,255,255,.14)}
.ctl.danger{border-color:#b4503f;color:#ffb4a3}
.call-side{display:flex;flex-direction:column;gap:14px}
.beam-panel,.agenda,.chat{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow)}
.beam-state{text-align:center;font-weight:600;font-size:.85rem;margin:6px 0 2px;color:#7c5c14}
.beam-caption{font-family:Fraunces,serif;font-style:italic;text-align:center;margin:2px 4px 4px;font-size:.98rem}
.agenda ol{margin:0;padding-left:20px;font-size:.9rem;color:var(--ink2)}
.agenda li{padding:4px 0}
.agenda li.on{color:var(--ink);font-weight:600}
.agenda li.done{color:var(--faint);text-decoration:line-through}
.chat-log{max-height:230px;overflow:auto;display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.msg{border-radius:12px;padding:8px 12px;font-size:.9rem;max-width:92%}
.msg.beam{background:var(--cream);align-self:flex-start}
.msg.you{background:#eef3e8;align-self:flex-end}
.msg .who{display:block;font-size:.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-bottom:2px}
.chat-form{display:flex;gap:8px}
.chat-form input{flex:1;padding:9px 12px;border:1px solid var(--line);border-radius:999px;font:inherit;font-size:.9rem}
.share-tiles{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:12px}
.tile{border:1px solid var(--gold);color:#7c5c14;background:#fdf6e3;border-radius:999px;padding:5px 12px;font-size:.8rem;cursor:pointer}

.foot{max-width:1240px;margin:0 auto;padding:8px 22px 34px;color:var(--faint);font-size:.8rem}