/* Midnight & Neon — stefred.com
   Tokens are copied from the design system (tokens/*.css) so the site ships as one file. */

/* ---------- tokens: color ---------- */
:root{
  --navy-900:#050f2a;
  --navy-800:#0a1430;
  --navy-700:#14224a;
  --navy-600:#132a63;
  --green-400:#39ff8c;
  --green-300:#8affbe;
  --mint-050:#e8f6ee;
  --slate-200:#cfdcee;
  --slate-300:#b7c8de;
  --slate-400:#8b9cb8;
  --slate-500:#6f82a8;

  --canvas:var(--navy-800);
  --surface-block:var(--navy-700);
  --surface-feature:var(--navy-600);
  --surface-bar:var(--navy-900);

  --text-1:var(--mint-050);
  --text-2:var(--slate-300);
  --text-3:var(--slate-400);
  --text-on-accent:var(--navy-900);
  --text-on-feature:var(--slate-200);
  --text-caption:var(--slate-500);

  --accent:var(--green-400);
  --accent-hover:var(--green-300);
}

/* ---------- tokens: type ---------- */
:root{
  --font-display:"Archivo Black",system-ui,sans-serif;
  --font-ui:Archivo,system-ui,sans-serif;
  --font-quote:Spectral,Georgia,serif;
  --font-mono:"Space Mono",ui-monospace,monospace;

  --type-page-size:54px;    --type-page-lh:.95;  --type-page-ls:-.035em;
  --type-section-size:30px; --type-section-ls:-.02em;
  --type-title-size:34px;   --type-title-lh:1.05; --type-title-ls:-.02em;
  --type-quote-size:26px;   --type-quote-lh:1.38;
  --type-meta-size:11px;    --type-meta-ls:.16em;
  --type-label-size:11.5px; --type-label-ls:.12em;
}

/* ---------- tokens: spacing, borders, motion ---------- */
:root{
  --space-3:14px; --space-4:20px; --space-5:26px; --space-6:40px; --space-7:56px; --space-8:72px;
  --gap-block:20px;
  --gap-section:64px;
  --page-max:1100px;
  --page-gutter:40px;

  --border:2px solid rgba(232,246,238,.22);
  --border-inner:2px solid rgba(232,246,238,.16);
  --border-feature:3px solid rgba(57,255,140,.55);
  --motion:160ms ease-out;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{color-scheme:dark;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--text-1);font-family:var(--font-ui);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:var(--accent);transition:color var(--motion),border-color var(--motion),background-color var(--motion)}
a:hover{color:var(--accent-hover)}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.wrap{max-width:var(--page-max);margin:0 auto;padding:0 var(--page-gutter)}
.mono{font-family:var(--font-mono);font-size:var(--type-meta-size);letter-spacing:var(--type-meta-ls);text-transform:uppercase}

/* ---------- nav ---------- */
.nav{display:flex;justify-content:space-between;align-items:center;min-height:var(--space-7);padding:0 var(--page-gutter);background:var(--surface-bar)}
.nav__mark{color:var(--text-1);font-weight:600;font-size:14px;text-decoration:none}
.nav__mark:hover{color:var(--text-1)}
.nav__links{display:flex;gap:26px;font-size:12.5px;font-weight:500}
.nav__links a{color:var(--text-3);text-decoration:none;padding:12px 0}
.nav__links a[aria-current]{color:var(--accent)}

/* ---------- hero ---------- */
/* Full-bleed band; left padding lines the copy up with .wrap on wide screens,
   while the portrait column stays flush to the right edge. */
.hero{display:grid;grid-template-columns:1fr 380px;background:var(--surface-feature);padding-left:max(0px,calc(50% - var(--page-max)/2))}
.hero__copy{padding:var(--space-7) var(--page-gutter) 52px}
.hero__eyebrow{color:var(--accent);letter-spacing:.18em;margin-bottom:24px}
.hero h1{font-family:var(--font-display);font-weight:400;font-size:var(--type-page-size);line-height:var(--type-page-lh);letter-spacing:var(--type-page-ls);text-transform:uppercase;margin:0 0 var(--space-5);max-width:16em;text-wrap:pretty}
.hero__intro{font-size:18px;line-height:1.6;margin:0;max-width:33em;color:var(--text-on-feature)}
.hero__side{display:flex;flex-direction:column;background:var(--surface-block)}
.hero__portrait{position:relative;flex:1;min-height:260px;margin:0}
.hero__portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 30%}
.hero__quote{border-top:var(--border);padding:24px 28px;margin:0}
.hero__quote p{font-family:var(--font-quote);font-weight:300;font-size:20px;line-height:1.4;margin:0}

/* ---------- sections ---------- */
.sec{padding-top:var(--gap-section)}
.shead{border-bottom:var(--border);padding-bottom:var(--space-3);margin-bottom:var(--space-5);display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-4)}
.shead h2{font-family:var(--font-display);font-weight:400;font-size:var(--type-section-size);line-height:1;letter-spacing:var(--type-section-ls);text-transform:uppercase;margin:0}
.shead span{color:var(--text-3);font-size:11.5px;letter-spacing:0}
.stack{display:grid;gap:var(--gap-block)}
.two{display:grid;grid-template-columns:1.4fr 1fr;gap:var(--gap-block)}

/* ---------- project block ---------- */
.project{border:var(--border);background:var(--surface-block);display:grid;grid-template-columns:1.1fr 1fr}
.project--feature{border:var(--border-feature)}
.project__body{padding:32px 34px}
.project h3{font-size:var(--type-title-size);font-weight:600;letter-spacing:var(--type-title-ls);line-height:var(--type-title-lh);margin:0 0 var(--space-3)}
.project p{font-size:16.5px;line-height:1.6;margin:0 0 18px;color:var(--text-2);max-width:34em}
.project p:last-child{margin-bottom:0}
.project__media{position:relative;min-height:240px;margin:0;background:var(--surface-feature)}
.project__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.chip{display:inline-block;margin-bottom:16px;padding:6px 12px;border:2px solid rgba(232,246,238,.34);color:var(--text-2);font-size:var(--type-label-size);font-weight:600;letter-spacing:var(--type-label-ls);text-transform:uppercase}
.chip--current{background:var(--accent);border-color:var(--accent);color:var(--text-on-accent)}

.btn{display:inline-flex;align-items:center;min-height:44px;padding:11px 24px;border:2px solid var(--accent);color:var(--accent);font-size:14px;font-weight:600;text-decoration:none}
.btn:hover{border-color:var(--accent-hover);color:var(--accent-hover)}
.btn:active{background:rgba(5,15,42,.35)}

/* ---------- quotes ---------- */
.quote{margin:0;border:var(--border);background:var(--surface-block);padding:30px 32px}
.quote--feature{border:var(--border-feature);background:var(--surface-feature)}
.quote p{font-family:var(--font-quote);font-weight:300;font-size:var(--type-quote-size);line-height:var(--type-quote-lh);margin:0 0 16px;text-wrap:pretty}
.quote footer{color:var(--text-3);letter-spacing:.14em}
.quote--feature footer{color:var(--text-on-feature)}

/* ---------- footer ---------- */
.site-foot{margin-top:var(--gap-section);padding:var(--space-5) 0 var(--space-6);border-top:var(--border-inner);color:var(--text-caption)}

/* ---------- error page ---------- */
.notfound{padding:var(--space-8) 0 var(--space-6)}
.notfound h1{font-family:var(--font-display);font-weight:400;font-size:var(--type-page-size);line-height:var(--type-page-lh);letter-spacing:var(--type-page-ls);text-transform:uppercase;margin:0 0 var(--space-5)}
.notfound p{color:var(--text-2);margin:0 0 var(--space-5);max-width:34em}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .hero{grid-template-columns:1fr;padding-left:0}
  .hero h1,.notfound h1{font-size:34px}
  .hero__portrait{flex:none;min-height:0;aspect-ratio:4/3}
  .two,.project{grid-template-columns:1fr}
  .project__media{min-height:0;aspect-ratio:16/10}
  .quote p{font-size:22px}
}
@media (max-width:560px){
  :root{--page-gutter:20px;--gap-section:48px}
  .project__body,.quote{padding:24px 22px}
  .project h3{font-size:28px}
}
@media (prefers-reduced-motion:reduce){
  a{transition:none}
}