/* Tech & Skills Council · "Night" theme for the inner pages.
   Loaded after main.css: re-skins tokens, type and components to match the homepage.
   Markup and form behaviour are untouched; this file only changes how things look. */
:root {
  --ground: #07050a;
  --ground-2: #0d0810;
  --surface: rgba(18, 11, 20, .72);
  --surface-2: rgba(28, 16, 26, .8);
  --line: rgba(244, 238, 240, .14);
  --line-soft: rgba(244, 238, 240, .08);
  --text: #f4eef0;
  --muted: rgba(244, 238, 240, .72);
  --muted-dim: rgba(244, 238, 240, .5);
  --display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --body: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --pad: clamp(20px, 5vw, 80px);
  --r: 20px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

html { background: #07050a; color-scheme: dark; overflow-x: clip; }
body {
  font-family: var(--body); font-size: 16.5px; line-height: 1.62; color: var(--text);
  background:
    radial-gradient(48vmax 48vmax at 82% 8%, rgba(255, 198, 39, .2), rgba(226, 96, 62, .12) 28%, rgba(140, 29, 64, .1) 46%, transparent 68%),
    linear-gradient(180deg, #0f0812 0%, #07050a 55%) fixed;
  background-attachment: fixed;
  overflow-x: clip;
}
/* film grain, same feel as the homepage world */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
main, .tnav, .tfoot, header.hero { position: relative; z-index: 1; }
::selection { background: var(--gold); color: #140a0f; }

/* type */
h1, h2, h3 { font-family: var(--display); font-weight: 500; text-transform: none; letter-spacing: -.02em; line-height: 1.04; }
h4, h5 { font-family: var(--body); font-weight: 600; text-transform: none; letter-spacing: -.005em; }
em { font-style: italic; color: var(--gold); }
a { color: var(--gold); }
a:hover { color: #fff3c4; }
.eyebrow { font-family: var(--mono); letter-spacing: .2em; }

/* nav (same as the homepage) */
.tnav { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 24px; padding: 18px var(--pad); background: linear-gradient(180deg, rgba(7, 5, 10, .9), rgba(7, 5, 10, 0)); }
.tnav .brand { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; font-weight: 600; letter-spacing: -.01em; }
.tnav .brand svg { width: 30px; height: 30px; }
.tnav .links { display: flex; gap: 26px; margin-left: auto; }
.tnav .links a { color: var(--muted); text-decoration: none; font: 500 12.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.tnav .links a:hover, .tnav .links a[aria-current] { color: var(--gold); }

/* buttons */
.btn, .nav-links a.btn {
  display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 26px; border: 0; border-radius: 999px;
  background: var(--gold); color: #140a0f; font: 600 15.5px var(--body); letter-spacing: -.005em; text-transform: none;
  text-decoration: none; cursor: pointer; white-space: nowrap; box-shadow: none; transition: box-shadow .4s, background .3s, transform .3s;
}
.btn:hover { color: #140a0f; background: #ffd34f; box-shadow: 0 12px 44px -10px rgba(255, 198, 39, .6); }
.btn.big { height: 58px; padding: 0 32px; font-size: 16.5px; }
.btn.ghost { background: rgba(244, 238, 240, .06); color: var(--text); border: 1px solid var(--line); }
.btn.ghost:hover { background: rgba(244, 238, 240, .12); color: var(--text); box-shadow: none; }
.btn-sm { height: 40px; padding: 0 18px; font-size: 14px; margin-left: 6px; }
.btn[disabled], .btn[aria-busy="true"] { opacity: .6; cursor: progress; }

/* page header */
header.hero { background: transparent !important; padding: 72px 0 40px !important; border: 0; overflow: visible; }
header.hero::after, header.hero::before { display: none !important; }
.hero .wrap, .wrap { max-width: 1180px; padding: 0 var(--pad); }
.hero-tag { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.tag, .tag.solid, .tag.gold { background: transparent; border: 1px solid var(--line); color: var(--muted); border-radius: 999px; padding: 6px 12px; font: 500 10.5px var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.tag.gold, .tag.solid { border-color: rgba(255, 198, 39, .45); color: var(--gold); }
h1.hero-title { font-family: var(--display); font-weight: 500; font-size: clamp(56px, 9vw, 128px) !important; line-height: .95; letter-spacing: -.03em; text-transform: none; padding-bottom: .1em; color: var(--text); }
h1.hero-title .gold, h1.hero-title em { display: inline; color: var(--gold); font-style: italic; }
.hero-lede { max-width: 44ch; font-size: clamp(17px, 1.5vw, 20px); color: var(--muted); margin-top: 22px; }
.hero-note { margin-top: 18px; font: 500 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }

section { background: transparent; border-bottom: 1px solid var(--line-soft); }
.sec-head h2 { font-size: clamp(36px, 4.6vw, 64px); }
.sec-head p { color: var(--muted); }

/* forms */
.form-wrap { max-width: 820px; }
.form-intro { color: var(--muted); font-size: 17px; max-width: 60ch; margin-bottom: 30px; }
fieldset { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 26px 26px 8px; margin: 0 0 20px; }
legend { font: 500 11px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); padding: 0 10px; background: transparent; }
.field > label, .checkline label { font: 500 15px/1.5 var(--body); color: var(--text); text-transform: none; letter-spacing: 0; }
.field input:not([type="radio"]):not([type="checkbox"]), .field select, .field textarea {
  background: rgba(244, 238, 240, .045); border: 1px solid var(--line); border-radius: 12px; color: var(--text);
  font: 400 16px var(--body); padding: 14px 16px; transition: border-color .25s, box-shadow .25s, background .25s;
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted-dim); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); background: rgba(244, 238, 240, .07); box-shadow: 0 0 0 4px rgba(255, 198, 39, .14); }
.field select option { background: #140b12; color: var(--text); }
.field .hint { color: var(--muted-dim); font-size: 14px; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: #e0457b; box-shadow: 0 0 0 4px rgba(224, 69, 123, .14); }
.field .err { color: #ff8fb1; font-size: 14px; }
.req { color: var(--gold); }
.checkline input { accent-color: var(--gold); width: 18px; height: 18px; }
.field .radio-card { background: rgba(244, 238, 240, .04); border: 1px solid var(--line); border-radius: 14px; color: var(--text); }
.field .radio-card.checked, .field .radio-card:focus-within { border-color: var(--gold); background: rgba(255, 198, 39, .08); }
.counter { color: var(--muted-dim); font: 500 11px var(--mono); }
.form-status { border-radius: 14px; font-size: 15px; }
.form-status.ok { background: rgba(90, 200, 130, .1); border: 1px solid rgba(90, 200, 130, .4); color: #b9f0cd; }
.form-status.bad { background: rgba(224, 69, 123, .1); border: 1px solid rgba(224, 69, 123, .45); color: #ffc2d4; }

/* gates, steps, cards */
.auth-gate { background: var(--surface); border: 1px solid rgba(255, 198, 39, .3); border-radius: var(--r); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.auth-gate h3 { font-size: clamp(30px, 3.4vw, 44px); }
.auth-gate p { color: var(--muted); }
.auth-eyebrow { font: 500 11px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); background: transparent; border: 1px solid rgba(255, 198, 39, .4); border-radius: 999px; padding: 5px 11px; }
.beat { border-color: var(--line-soft); }
.beat .t { font: 500 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.beat h4 { font-family: var(--display); font-weight: 500; font-size: 26px; }
.beat p { color: var(--muted); }
.cell, .door, .bd, .yr, .cal .m { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.cell h3, .door h3, .yr h3 { font-size: clamp(26px, 2.4vw, 34px); }
.cell .num { font: 500 12px var(--mono); color: var(--gold); }
.cell p, .door p, .bd p { color: var(--muted); }
.stat .k { font-family: var(--display); font-weight: 500; color: var(--gold); }
.stat .v { color: var(--muted); }
details { border-color: var(--line); }
summary { font-family: var(--body); font-weight: 500; text-transform: none; }
summary::after { color: var(--gold); }
details p { color: var(--muted); }

/* legal pages */
.legal h2 { font-size: clamp(30px, 3vw, 42px); margin-top: 44px; }
.legal p, .legal li { color: var(--muted); }
.legal .callout { background: var(--surface); border: 1px solid rgba(255, 198, 39, .3); border-radius: 16px; }

/* footer (same as the homepage) */
.tfoot { padding: 60px var(--pad) 36px; border-top: 1px solid var(--line); background: rgba(7, 5, 10, .86); margin-top: 40px; }
.tfoot .foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; max-width: 1400px; }
.tfoot .foot-brand { font: 500 32px/1 var(--display); margin: 0; color: var(--text); }
.tfoot .foot-sub { color: var(--muted-dim); margin: 8px 0 0; }
.tfoot nav { display: flex; flex-direction: column; gap: 10px; }
.tfoot nav a { color: var(--muted); text-decoration: none; font-size: 15px; }
.tfoot nav a:hover { color: var(--gold); }
.tfoot .legal-line { color: var(--muted-dim); font-size: 13px; margin: 44px 0 0; max-width: 90ch; }

@media (max-width: 900px) {
  .tnav .links { display: none; }
  .tnav .btn-sm { margin-left: auto; }
  .tfoot .foot-grid { grid-template-columns: 1fr 1fr; }
  .tfoot .foot-grid > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .tnav .brand span { display: none; }
  fieldset { padding: 20px 16px 4px; }
  header.hero { padding: 40px 0 28px !important; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }