/* ── tokens, from brand@2.1.0. Obsidian ground for the entry, because the
   hero is the one full-bleed dark surface the system allows and the green
   reads as a fill on it. ───────────────────────────────────────────────── */
:root{
  --obsidian-0:#060607; --obsidian-1:#0B0B0D; --obsidian-2:#121214;
  --obsidian-3:#1A1A1D; --obsidian-4:#242427; --obsidian-5:#33332F;
  --ivory-0:#FBF9F4; --ivory-1:#F2EEE6; --ivory-2:#DAD5C9;
  --ivory-3:#B4AE9F; --ivory-4:#8B8578; --ivory-5:#605B51;
  --green-500:#1DB954; --green-600:#17A44A; --green-300:#4CD787;
  --amber-500:#E9602A; --teal-500:#1E9BE0;

  --text-primary:var(--ivory-1); --text-secondary:var(--ivory-3);
  --text-muted:var(--ivory-4); --text-faint:var(--ivory-5);
  --text-on-accent:var(--obsidian-1);
  --border-hairline:color-mix(in oklab, var(--ivory-1) 10%, transparent);
  --border-soft:color-mix(in oklab, var(--ivory-1) 16%, transparent);
  --border-strong:color-mix(in oklab, var(--ivory-1) 28%, transparent);
  --focus-ring:color-mix(in oklab, var(--green-300) 60%, transparent);

  --font-display:"Newsreader",Georgia,serif;
  --font-sans:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
  --font-mono:"Geist Mono",ui-monospace,SFMono-Regular,monospace;
  --tracking-label:0.18em;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--obsidian-1); color:var(--text-primary);
  font:400 1rem/1.65 var(--font-sans);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  min-height:100vh;
}


/* The scene. A stage seen from the wings, drawn rather than photographed, so there
   is no asset to licence and nothing to clear. It is `cover` and anchored right, because
   the lit floor and the rig are on that side and the headline sets from the left. */
.stage{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:#0B0B0D url("/static/backstage.jpg") center / cover no-repeat;
}
/* A last veil over the whole thing. The scene already carries its own protection
   gradients; this is the margin that keeps body copy safe at any viewport. */
.stage::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,
      color-mix(in oklab, var(--obsidian-1) 74%, transparent) 0%,
      color-mix(in oklab, var(--obsidian-1) 30%, transparent) 42%,
      transparent 70%),
    linear-gradient(0deg,
      color-mix(in oklab, var(--obsidian-1) 66%, transparent) 0%,
      transparent 34%);
}

.page{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 32px}

/* ── top bar ─────────────────────────────────────────────────────────── */
.bar{padding:26px 0 0}
.bar .wrap{display:flex;align-items:baseline;justify-content:space-between;gap:24px}
.mark{font:500 0.9375rem/1 var(--font-sans);letter-spacing:-.01em;color:var(--ivory-1)}
.mark .d{color:var(--green-500);margin-right:.5em}
.mark .sep{color:var(--text-muted);margin:0 .55em;font-weight:300}
.mark .sub{color:var(--text-muted);font-weight:400}
.where{font:500 .6875rem/1 var(--font-mono);letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--text-muted)}

/* ── hero ────────────────────────────────────────────────────────────── */
.hero{flex:1;display:flex;align-items:center;padding:72px 0 40px}
.hero .wrap{display:flex;justify-content:flex-start;align-items:center}
.panel{width:min(392px,100%)}


/* ── the form ────────────────────────────────────────────────────────── */
.panel{
  background:color-mix(in oklab,var(--obsidian-2) 88%,transparent);
  border:1px solid var(--border-soft); border-radius:10px;
  padding:34px 32px 30px; backdrop-filter:blur(14px);
  box-shadow:0 24px 60px -22px rgba(0,0,0,.7);
}
.panel h2{font:500 1.0625rem/1.3 var(--font-sans);letter-spacing:-.008em;
  margin:0 0 6px;color:var(--ivory-1)}
.panel .note{font:400 .8125rem/1.55 var(--font-sans);color:var(--text-muted);
  margin:0 0 24px}
.err{font:500 .8125rem/1.5 var(--font-sans);color:var(--ivory-1);margin:0 0 20px;
  padding:10px 12px;border:1px solid var(--border-soft);
  border-left:2px solid var(--amber-500);border-radius:3px;
  background:color-mix(in oklab,var(--amber-500) 8%,transparent)}
label{display:block;font:500 .6875rem/1 var(--font-mono);
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--text-muted);margin:0 0 8px}
input{
  width:100%;padding:11px 12px;margin:0 0 18px;
  background:var(--obsidian-1);color:var(--ivory-1);
  border:1px solid var(--border-soft);border-radius:4px;
  font:400 .9375rem/1.3 var(--font-sans);
  transition:border-color 160ms cubic-bezier(.2,0,0,1);
}
input:hover{border-color:var(--border-strong)}
input:focus{outline:2px solid var(--focus-ring);outline-offset:1px;
  border-color:var(--green-600)}
button{
  width:100%;padding:12px;margin:6px 0 0;border:0;border-radius:4px;
  background:var(--green-500); color:var(--text-on-accent);
  font:600 .875rem/1 var(--font-sans);letter-spacing:.005em;cursor:pointer;
  transition:background 160ms cubic-bezier(.2,0,0,1);
}
button:hover{background:var(--green-600)}
button:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.panel .foot{font:400 .75rem/1.5 var(--font-sans);color:var(--text-muted);
  margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--border-hairline)}

/* ── footer ──────────────────────────────────────────────────────────── */
.foot-bar{padding:26px 0 30px}
.foot-bar .wrap{display:flex;justify-content:space-between;gap:20px;
  font:400 .75rem/1.5 var(--font-sans);color:var(--text-muted)}
.foot-bar .d{color:var(--green-500)}

@media (max-width:900px){
  .wrap{padding:0 22px}
}
/* The photographer, given his due without competing with anything. */
.credit a{color:var(--text-secondary);text-decoration:none;
  border-bottom:1px solid var(--border-soft)}
.credit a:hover{color:var(--text-primary);border-bottom-color:var(--border-strong)}