/* ═══════════════════════════════════════════════════════════════════════════
 * index.html — what is genuinely particular to this page
 *
 * Everything shared lives in platform.css, cards.css, motion.css and
 * scene.css. This file is only what this one page needs, and it loads
 * before the shared layer so the shared rules can still override it.
 * ═══════════════════════════════════════════════════════════════════════════ */


  :root{
    --font-body:'Hanken Grotesk','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif;
  }
  *{box-sizing:border-box}
  body{margin:0;min-height:100vh;background:
      radial-gradient(1200px 600px at 80% -10%,rgba(201,174,124,.10),transparent 60%),
      radial-gradient(900px 500px at -10% 110%,rgba(201,174,124,.05),transparent 55%),var(--bg);
    color:var(--parch);font-family:var(--font-body);-webkit-font-smoothing:antialiased;
    display:grid;place-items:center;padding:24px}
  .card{width:min(420px,100%);background:linear-gradient(180deg,var(--panel),var(--bg-2));
    border:1px solid var(--line);border-radius:20px;box-shadow:0 40px 90px -30px #000;padding:34px 30px}
  .eyebrow{font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--brass);font-weight:600;margin:0 0 12px;display:flex;align-items:center;gap:10px}
  .eyebrow .dash{width:30px;height:1px;background:var(--brass);opacity:.6}
  h1{font-family:var(--font-display);font-weight:500;font-size:30px;line-height:1.05;margin:0 0 6px;letter-spacing:-.01em}
  h1 em{color:var(--brass-hi);font-weight:600;font-style:normal}
  .lead{color:var(--muted);font-size:13.5px;line-height:1.5;margin:0 0 24px}
  label{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin-bottom:7px}
  input{width:100%;background:var(--bg-2);border:1px solid var(--line);color:var(--parch);font-family:inherit;font-size:15px;padding:12px 14px;border-radius:10px;outline:none;transition:border-color .18s}
  input:focus{border-color:var(--brass)}
  .err{color:var(--rose);font-size:12.5px;min-height:18px;margin:10px 2px 0}
  button{width:100%;margin-top:8px;font-family:inherit;font-size:14px;font-weight:700;color:#10141a;background:var(--brass);border:none;border-radius:10px;padding:13px;cursor:pointer;transition:background .15s}
  button:hover{background:var(--brass-hi)}
  button:disabled{opacity:.6;cursor:default}
  .foot{margin-top:22px;font-size:11px;color:var(--muted-2);text-align:center;letter-spacing:.04em}

  /* ===== refinements: scrollbars + rounded animated buttons ===== */
  ::selection{background:var(--brass);color:#0b0d10}
  html{scrollbar-width:thin;scrollbar-color:#323a45 transparent}
  ::-webkit-scrollbar{width:11px;height:11px}
  ::-webkit-scrollbar-track{background:transparent}
  ::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#39424f,#272d36);border:3px solid transparent;background-clip:padding-box;border-radius:99px}
  ::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--brass),#5f7da3);background-clip:padding-box}
  ::-webkit-scrollbar-corner{background:transparent}
  #btn{border-radius:999px !important;position:relative;overflow:hidden;transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s,background .15s}
  #btn::after{content:"";position:absolute;top:0;left:-135%;width:55%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg);transition:left .55s ease;pointer-events:none}
  #btn:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 12px 28px -8px var(--brass)}
  #btn:hover::after{left:135%}
  #btn:active{transform:scale(.97)}
  input{border-radius:12px !important}
  /* shiftly mark */
  .brandmark{position:fixed;left:15px;bottom:12px;z-index:30;display:flex;align-items:center;gap:6px;font-family:var(--font-display,'Inter Tight',system-ui,sans-serif);font-size:11.5px;letter-spacing:.04em;color:var(--muted);opacity:.62;pointer-events:none;user-select:none}
  .brandmark svg{color:var(--brass);opacity:.9;flex:0 0 auto}
  @media (max-width:560px){.brandmark{opacity:.42;font-size:10.5px;left:12px;bottom:10px}}

  /* ================= MOBILE OPTIMISATION ================= */
  html{-webkit-text-size-adjust:100%}
  html,body{overflow-x:hidden}
  @supports (overflow:clip){ html,body{overflow-x:clip} }
  *{-webkit-tap-highlight-color:rgba(201,174,124,.18)}
  @media (max-width:640px){
    body{font-size:16px}
    .card{padding:26px 22px}
    h1{font-size:28px}
    .lead{font-size:15px}
    label{font-size:12px}
    input{font-size:16px;padding:15px 16px;min-height:52px}
    button{font-size:16px;padding:16px;min-height:54px}
    .err{font-size:13.5px}
  }

  /* ================= A11Y & POLISH ================= */
  a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible{
    outline:2px solid var(--brass);outline-offset:2px;box-shadow:0 0 0 4px rgba(var(--glow-rgb),.28)}
  .brandmark{bottom:calc(12px + env(safe-area-inset-bottom))}
  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  }

  /* ================= MOTION POLISH ================= */
  @keyframes loginIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
  .card{animation:loginIn .55s cubic-bezier(.22,.61,.36,1) both}
  button{transition:background .15s,transform .12s ease}
  button:active{transform:scale(.98)}
  input:focus{box-shadow:0 0 0 3px rgba(var(--glow-rgb),.16)}
  /* ambient animated background */
  #bgfx{position:fixed;inset:0;z-index:-2;pointer-events:none;display:block}
  #bgvig{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 70% 60% at 50% 45%,transparent 0%,transparent 42%,rgba(7,8,11,.5) 100%)}
  .card{position:relative;z-index:1;background:linear-gradient(180deg,rgba(22,26,32,.72),rgba(9,10,13,.66));backdrop-filter:blur(16px) saturate(1.15);-webkit-backdrop-filter:blur(16px) saturate(1.15);border-color:rgba(255,255,255,.10);box-shadow:0 40px 90px -30px #000,inset 0 1px 0 rgba(255,255,255,.05)}
  @media (prefers-reduced-motion:reduce){ #bgfx{opacity:.85} }

  /* The guest page uses its serif for display text only — the greeting, the
     headline — and a sans for everything you press. Putting the serif on
     --font-display sent it to tabs, chips and buttons too, where a light
     high-contrast face at 13px reads as weak rather than elegant. So the
     serif is scoped to genuinely large text, and controls stay sans. */
  h1, h2, .pgreet, .greet, .pt, .hero-title, .big-num{font-family:'Fraunces','Cormorant Garamond',Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.004em;font-variation-settings:'SOFT' 0,'WONK' 0,'opsz' 40}

  .abtn:active,.dbtn:active,.repbtn:active,.act:active,.btn:active,.actbtn:active,
  .bt-btn:active,.navbtn:active,.sg-btn:active,.missbtn:active,.note-btn:active{
    transform:scale(.975);
  }
  .abtn:disabled,.dbtn:disabled,.repbtn:disabled,.act:disabled,.btn:disabled,.actbtn:disabled{
    opacity:.5;cursor:default;transform:none;
  }
  .abtn.sm,.dbtn.sm,.repbtn.sm,.act.sm,.btn.sm{border-radius:10px}
  /* a visible focus ring everywhere, for anyone driving this from a keyboard */
  .abtn:focus-visible,.dbtn:focus-visible,.repbtn:focus-visible,.act:focus-visible,
  .btn:focus-visible,.actbtn:focus-visible,.navbtn:focus-visible,.tab:focus-visible,
  .ftab:focus-visible{
    outline:2px solid var(--brass,#C9AE7C);outline-offset:2px;
  }