/* The Project - main site. High-contrast dark theme, shares the archive's family
   look (Spectral / Outfit / Fira Code, vermillion). Real text is bright off-white
   or red - never dim grey. Plain relative paths; runs in any folder. */

:root{
  --ink:        #0c0b0e;
  --ink-2:      #131217;
  --surface:    #16151b;
  --line:       #34313d;
  --line-soft:  #262430;
  --text:       #f4f1ea;   /* primary body - bright off-white */
  --text-bright:#ffffff;   /* headlines / max emphasis */
  --text-soft:  #c4bfb6;   /* tiny secondary text only; still AA on black */
  --accent:     #ef4a27;
  --accent-2:   #ff6a3d;
  --accent-dim: rgba(239,74,39,.16);
  --radius:     13px;
  --maxw:       1080px;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:
    radial-gradient(1200px 620px at 78% -12%, #1c1722 0%, transparent 60%),
    radial-gradient(900px 520px at -8% 4%, #1a1320 0%, transparent 55%),
    var(--ink);
  color:var(--text);
  font-family:"Outfit", system-ui, sans-serif;
  font-size:17px; line-height:1.65; min-height:100vh; overflow-x:hidden;
}

.grain{
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

a{ color:var(--accent-2); text-decoration:none; }
a:hover{ color:var(--text-bright); }

/* masthead / nav */
.masthead{
  position:sticky; top:0; z-index:30;
  background:linear-gradient(180deg, rgba(12,11,14,.97) 0%, rgba(12,11,14,.9) 100%);
  backdrop-filter:blur(14px) saturate(120%); -webkit-backdrop-filter:blur(14px) saturate(120%);
  border-bottom:1px solid var(--line);
}
.mast-inner{ max-width:var(--maxw); margin:0 auto; padding:15px 26px;
  display:flex; align-items:center; justify-content:space-between; gap:24px; }
.wordmark{ display:flex; align-items:baseline; gap:11px; line-height:1; }
.wordmark-main{ font-family:"Outfit",sans-serif; font-weight:700; letter-spacing:-.02em;
  font-size:clamp(21px,3.4vw,27px); color:var(--text-bright); }
.wordmark-main .dot{ color:var(--accent); }
.wordmark-tag{ font-family:"Fira Code",monospace; font-size:10.5px; font-weight:500;
  letter-spacing:.32em; color:var(--ink); background:var(--accent);
  padding:3px 8px 2px; border-radius:4px; transform:translateY(-2px); }
.wordmark:hover .wordmark-main{ color:var(--text-bright); }

.nav{ display:flex; align-items:center; gap:6px; }
.nav a{ font-family:"Outfit",sans-serif; font-size:14.5px; font-weight:500;
  color:var(--text); padding:8px 13px; border-radius:8px; transition:background .15s, color .15s; }
.nav a:hover{ background:var(--surface); color:var(--text-bright); }
.nav a.active{ color:var(--accent-2); }
.nav a.cta{ background:var(--accent); color:#0c0b0e; font-weight:600; }
.nav a.cta:hover{ background:var(--accent-2); color:#0c0b0e; }
.nav a.ext::after{ content:" \2197"; font-size:.8em; opacity:.7; }
.nav-toggle{ display:none; background:none; border:1px solid var(--line); border-radius:8px; padding:8px 10px; cursor:pointer; }
.nav-toggle svg{ width:20px; height:20px; stroke:var(--text); fill:none; stroke-width:2; }

/* layout */
.wrap{ position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding:0 26px; }
.section{ padding:64px 0; }
.section-sm{ padding:40px 0; }
h1,h2,h3{ font-family:"Spectral",Georgia,serif; color:var(--text-bright); line-height:1.15; font-weight:600; }
h1{ font-size:clamp(34px,6vw,60px); letter-spacing:-.015em; margin:0 0 18px; }
h2{ font-size:clamp(26px,4vw,38px); margin:0 0 16px; }
h3{ font-size:clamp(19px,2.4vw,23px); margin:0 0 10px; }
p{ margin:0 0 16px; }
.lead{ font-size:clamp(18px,2.4vw,22px); color:var(--text); line-height:1.6; }
.eyebrow{ font-family:"Fira Code",monospace; font-size:12.5px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--accent-2); margin:0 0 16px; }

.hero{ padding:84px 0 56px; }
.hero h1 .hl{ color:var(--accent-2); }
.hero .lead{ max-width:62ch; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }

.btn{ display:inline-flex; align-items:center; gap:9px; font-family:"Outfit",sans-serif;
  font-size:16px; font-weight:600; padding:13px 24px; border-radius:11px; cursor:pointer;
  border:1px solid transparent; transition:transform .12s, background .15s, border-color .15s, color .15s; }
.btn-primary{ background:var(--accent); color:#0c0b0e; }
.btn-primary:hover{ background:var(--accent-2); color:#0c0b0e; transform:translateY(-2px); }
.btn-ghost{ background:transparent; border-color:var(--line); color:var(--text); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--text-bright); transform:translateY(-2px); }
.btn .arrow{ transition:transform .15s; }
.btn:hover .arrow{ transform:translateX(3px); }

.grid{ display:grid; gap:20px; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 24px; transition:border-color .18s, transform .18s; }
.card:hover{ border-color:var(--accent); transform:translateY(-3px); }
.card h3{ color:var(--text-bright); }
.card p{ color:var(--text); margin-bottom:0; font-size:15.5px; }
.card .num{ font-family:"Fira Code",monospace; font-size:13px; color:var(--accent-2);
  letter-spacing:.1em; display:block; margin-bottom:12px; }

.band{ background:linear-gradient(180deg, var(--ink-2), var(--ink));
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.band .wrap{ padding:54px 26px; text-align:center; }
.band h2{ margin-bottom:12px; }
.band .lead{ margin:0 auto 26px; max-width:56ch; }

/* forms */
.form-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:32px 30px; max-width:640px; margin:0 auto; }
.form-row{ margin-bottom:18px; }
.form-row label{ display:block; margin-bottom:7px; font-family:"Outfit",sans-serif;
  font-weight:600; font-size:14.5px; color:var(--text); }
.form-row .req{ color:var(--accent-2); }
.form-row .hint{ font-size:13px; color:var(--text-soft); font-weight:400; }
.form-row input, .form-row select, .form-row textarea{
  width:100%; padding:13px 15px; font-family:"Outfit",sans-serif; font-size:16px;
  background:var(--ink-2); border:1px solid var(--line); border-radius:10px; color:var(--text);
  outline:none; transition:border-color .16s, box-shadow .16s; }
.form-row input::placeholder, .form-row textarea::placeholder{ color:var(--text-soft); }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{
  border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim); }
.form-row textarea{ min-height:130px; resize:vertical; }
.form-row select{ appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c4bfb6' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:18px; padding-right:42px; }
.form-row select option{ background:var(--ink-2); color:var(--text); }
.form-actions{ display:flex; gap:12px; margin-top:24px; }
.hp{ position:absolute; left:-9999px; }
.form-note{ font-size:13.5px; color:var(--text-soft); margin-top:18px; text-align:center; }

.msg-box{ max-width:600px; margin:60px auto; background:var(--surface);
  border:1px solid var(--accent); border-radius:var(--radius); padding:40px 34px; text-align:center; }
.msg-box h1{ color:var(--accent-2); font-size:34px; }
.msg-box p{ color:var(--text); }
.msg-icon{ width:54px; height:54px; margin:0 auto 18px; display:block; }
.msg-icon svg{ width:100%; height:100%; stroke:var(--accent); fill:none; stroke-width:2; }

.prose{ max-width:70ch; }
.prose p{ color:var(--text); }
.prose h2{ margin-top:40px; }
.prose ul{ margin:0 0 16px; padding-left:0; list-style:none; }
.prose li{ position:relative; padding-left:26px; margin-bottom:10px; color:var(--text); }
.prose li::before{ content:""; position:absolute; left:4px; top:11px; width:7px; height:7px;
  background:var(--accent); border-radius:2px; transform:rotate(45deg); }

.foot{ position:relative; z-index:1; border-top:1px solid var(--line); margin-top:40px; }
.foot-inner{ max-width:var(--maxw); margin:0 auto; padding:34px 26px;
  display:flex; flex-wrap:wrap; gap:18px; align-items:center; justify-content:space-between; }
.foot-brand{ font-family:"Spectral",serif; color:var(--text-bright); font-size:18px; }
.foot-links{ display:flex; flex-wrap:wrap; gap:18px; }
.foot-links a{ color:var(--text); font-size:14.5px; font-family:"Outfit",sans-serif; }
.foot-links a:hover{ color:var(--accent-2); }
.foot-fine{ width:100%; color:var(--text-soft); font-size:12.5px; font-family:"Fira Code",monospace; }

.reveal{ animation:rise .5s ease both; }
.reveal-2{ animation:rise .5s .08s ease both; }
.reveal-3{ animation:rise .5s .16s ease both; }
@keyframes rise{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }

@media (max-width:760px){
  body{ font-size:16px; }
  .grid-3,.grid-2{ grid-template-columns:1fr; }
  .nav{ position:fixed; inset:60px 0 auto 0; flex-direction:column; align-items:stretch;
    background:var(--ink-2); border-bottom:1px solid var(--line); padding:12px 18px 18px;
    gap:4px; transform:translateY(-130%); transition:transform .25s ease; z-index:25; }
  .nav.open{ transform:translateY(0); }
  .nav a{ padding:12px 14px; font-size:16px; }
  .nav-toggle{ display:inline-flex; }
  .hero{ padding:54px 0 40px; }
  .section{ padding:46px 0; }
  .form-card{ padding:24px 18px; }
  .foot-inner{ flex-direction:column; align-items:flex-start; }
}
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; scroll-behavior:auto; } }