/* ============================================================
   Jason Lamport — Rigging / Electric / Lighting
   Cinematic "tungsten on black" art direction
   ============================================================ */

/* ---- TOKENS ---- */
:root {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.85rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.4rem);
  --text-xl: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 3vw, 3.4rem);
  --text-3xl: clamp(2.6rem, 1rem + 6vw, 5.5rem);

  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem;
  --space-12:3rem; --space-16:4rem; --space-20:5rem; --space-24:6rem; --space-32:8rem;

  --radius-sm:.375rem; --radius-md:.5rem; --radius-lg:.875rem; --radius-full:9999px;
  --transition-interactive: 200ms cubic-bezier(.16,1,.3,1);

  --content-default: 1180px;

  --font-display: 'Clash Display', 'Arial Narrow', sans-serif;
  --font-body: 'Satoshi', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* DARK (default) — film black + tungsten amber */
:root, [data-theme="dark"] {
  --color-bg: #0c0b0a;
  --color-surface: #141210;
  --color-surface-2: #1b1815;
  --color-surface-offset: #211d19;
  --color-border: #2c2823;
  --color-divider: #221f1b;

  --color-text: #ece7df;
  --color-text-muted: #9c948a;
  --color-text-faint: #6a655d;
  --color-text-inverse: #14110d;

  --color-primary: #f0a93b;       /* tungsten amber */
  --color-primary-hover: #ffbe55;
  --color-primary-soft: rgba(240,169,59,.14);
  --color-primary-line: rgba(240,169,59,.32);

  --shadow-md: 0 8px 28px rgba(0,0,0,.5);
  --shadow-lg: 0 22px 60px rgba(0,0,0,.6);
  --hero-overlay: linear-gradient(180deg, rgba(8,7,6,.42) 0%, rgba(8,7,6,.55) 45%, rgba(8,7,6,.98) 100%);
  --hero-overlay-side: linear-gradient(90deg, rgba(8,7,6,.86) 0%, rgba(8,7,6,.55) 42%, rgba(8,7,6,.05) 75%);
}

/* LIGHT — warm paper + burnt amber */
[data-theme="light"] {
  --color-bg: #f4f0e8;
  --color-surface: #fbf8f2;
  --color-surface-2: #ffffff;
  --color-surface-offset: #efe9dd;
  --color-border: #ddd5c6;
  --color-divider: #e6dfd1;

  --color-text: #1f1b15;
  --color-text-muted: #6c645860;
  --color-text-muted: #6f665a;
  --color-text-faint: #a89e8e;
  --color-text-inverse: #fbf8f2;

  --color-primary: #b86a14;
  --color-primary-hover: #9a570d;
  --color-primary-soft: rgba(184,106,20,.12);
  --color-primary-line: rgba(184,106,20,.3);

  --shadow-md: 0 8px 24px rgba(60,40,15,.12);
  --shadow-lg: 0 22px 50px rgba(60,40,15,.16);
  --hero-overlay: linear-gradient(180deg, rgba(20,15,8,.34) 0%, rgba(20,15,8,.42) 45%, rgba(244,240,232,.97) 100%);
  --hero-overlay-side: linear-gradient(90deg, rgba(15,11,5,.82) 0%, rgba(15,11,5,.5) 42%, rgba(15,11,5,.04) 75%);
}

/* ---- BASE ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;scroll-behavior:smooth;scroll-padding-top:5rem;
}
body{
  min-height:100dvh;line-height:1.6;font-family:var(--font-body);
  font-size:var(--text-base);color:var(--color-text);background:var(--color-bg);
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}
h1,h2,h3{text-wrap:balance;line-height:1.05;font-family:var(--font-display);font-weight:600;}
p{text-wrap:pretty;}
::selection{background:var(--color-primary-soft);color:var(--color-primary);}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;border-radius:var(--radius-sm);}
a,button{transition:color var(--transition-interactive),background var(--transition-interactive),border-color var(--transition-interactive),transform var(--transition-interactive),opacity var(--transition-interactive);}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}}

.skip-link{position:absolute;left:-999px;top:0;background:var(--color-primary);color:var(--color-text-inverse);padding:.6rem 1rem;border-radius:0 0 var(--radius-md) 0;z-index:200;}
.skip-link:focus{left:0;}

/* ---- SHARED ---- */
.eyebrow{
  font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.22em;
  text-transform:uppercase;color:var(--color-primary);
}
.accent{color:var(--color-primary);}

.btn{
  display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-mono);
  font-size:var(--text-sm);font-weight:500;letter-spacing:.04em;text-transform:uppercase;
  padding:.85rem 1.6rem;border-radius:var(--radius-full);border:1px solid transparent;
}
.btn--primary{background:var(--color-primary);color:var(--color-text-inverse);}
.btn--primary:hover{background:var(--color-primary-hover);transform:translateY(-2px);}
.btn--ghost{border-color:var(--color-border);color:var(--color-text);}
.btn--ghost:hover{border-color:var(--color-primary);color:var(--color-primary);transform:translateY(-2px);}

/* ---- HEADER ---- */
.header{
  position:sticky;top:0;z-index:100;display:flex;align-items:center;gap:var(--space-6);
  padding:var(--space-4) clamp(var(--space-5),5vw,var(--space-16));
  background:color-mix(in oklab,var(--color-bg) 78%,transparent);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--color-divider);
}
.brand{display:flex;align-items:center;gap:.6rem;margin-right:auto;color:var(--color-text);}
.brand__mark{color:var(--color-primary);flex:none;}
.brand__name{font-family:var(--font-display);font-weight:600;font-size:var(--text-lg);letter-spacing:.01em;}
.nav{display:flex;align-items:center;gap:var(--space-6);}
.nav a{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-text-muted);letter-spacing:.03em;}
.nav a:hover{color:var(--color-text);}
.nav__cta{color:var(--color-primary)!important;}
.theme-toggle{
  display:grid;place-items:center;width:40px;height:40px;border-radius:var(--radius-full);
  border:1px solid var(--color-border);color:var(--color-text-muted);flex:none;
}
.theme-toggle:hover{color:var(--color-primary);border-color:var(--color-primary);}
@media(max-width:760px){
  .nav a:not(.nav__cta){display:none;}
}

/* ---- HERO ---- */
.hero{position:relative;min-height:92vh;display:flex;flex-direction:column;justify-content:center;
  padding:var(--space-24) clamp(var(--space-5),5vw,var(--space-16)) var(--space-20);overflow:hidden;}
.hero__media{position:absolute;inset:0;z-index:-2;}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 35%;}
.hero__scrim{position:absolute;inset:0;z-index:-1;background:var(--hero-overlay);}
.hero__scrim::before{content:"";position:absolute;inset:0;background:var(--hero-overlay-side);}
.hero__inner{max-width:880px;}
/* Hero text sits over a dark cinematic image — always light, both themes */
.hero h1{font-size:var(--text-3xl);font-weight:600;letter-spacing:-.01em;margin:var(--space-5) 0 var(--space-6);
  color:#f3efe7;text-shadow:0 4px 40px rgba(0,0,0,.6);}
.hero__lead{max-width:46ch;font-size:var(--text-lg);color:#d9d2c7;
  text-shadow:0 2px 18px rgba(0,0,0,.6);}
.hero .hero__meta{color:#cabfae;}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-top:var(--space-8);}
.hero__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);margin-top:var(--space-16);
  font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-muted);}
.hero__meta .dot{color:var(--color-primary);}

/* ---- MARQUEE ---- */
.marquee{overflow:hidden;border-block:1px solid var(--color-divider);background:var(--color-surface);padding-block:var(--space-4);}
.marquee__track{display:flex;align-items:center;gap:var(--space-6);width:max-content;
  animation:scroll 30s linear infinite;font-family:var(--font-display);font-weight:500;
  font-size:var(--text-lg);text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-muted);}
.marquee .sep{color:var(--color-primary);font-size:.6em;}
@keyframes scroll{to{transform:translateX(-50%);}}
@media(prefers-reduced-motion:reduce){.marquee__track{animation:none;}}

/* ---- SECTIONS ---- */
.section{max-width:var(--content-default);margin-inline:auto;
  padding:clamp(var(--space-16),9vw,var(--space-32)) clamp(var(--space-5),5vw,var(--space-8));}
.section__head{display:flex;align-items:baseline;gap:var(--space-4);margin-bottom:var(--space-8);}
.section__num{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-primary);letter-spacing:.1em;}
.section h2{font-size:var(--text-2xl);}
.section__intro,.section__head + .section__intro{color:var(--color-text-muted);max-width:60ch;margin-bottom:var(--space-10);}
.section__intro a{color:var(--color-primary);border-bottom:1px solid var(--color-primary-line);}
.section__intro a:hover{color:var(--color-primary-hover);}

/* ABOUT */
.about__grid{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(var(--space-8),5vw,var(--space-16));align-items:start;}
.about__lead p{color:var(--color-text-muted);margin-bottom:var(--space-5);max-width:60ch;}
.about__lead strong{color:var(--color-text);font-weight:700;}
.about__facts{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--color-border);}
.about__facts li{display:flex;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) 0;border-bottom:1px solid var(--color-divider);}
.about__facts .k{font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-faint);}
.about__facts .v{text-align:right;font-weight:500;color:var(--color-text);}
@media(max-width:760px){.about__grid{grid-template-columns:1fr;}}

/* CREDITS */
.credit-list{display:flex;flex-direction:column;border-top:1px solid var(--color-border);}
.credit{display:grid;grid-template-columns:88px 1fr auto;gap:var(--space-4) var(--space-6);align-items:baseline;
  padding:var(--space-6) var(--space-2);border-bottom:1px solid var(--color-divider);position:relative;}
.credit:hover{background:var(--color-primary-soft);}
.credit__year{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-primary);}
.credit__title{font-family:var(--font-display);font-weight:600;font-size:var(--text-xl);line-height:1.05;}
.credit__role{grid-column:2;color:var(--color-text-muted);font-size:var(--text-sm);}
.credit__fmt{font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.1em;
  color:var(--color-text-faint);justify-self:end;align-self:center;white-space:nowrap;}
@media(max-width:680px){
  .credit{grid-template-columns:64px 1fr;}
  .credit__fmt{grid-column:2;justify-self:start;margin-top:.15rem;}
  .credit__role{grid-column:2;}
}

/* SKILLS */
.skills{position:relative;}
.skills .section__media{position:relative;border-radius:var(--radius-lg);overflow:hidden;margin-bottom:var(--space-12);
  border:1px solid var(--color-border);box-shadow:var(--shadow-lg);}
.skills .section__media img{width:100%;height:clamp(180px,28vw,340px);object-fit:cover;}
.skills__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--space-5);}
.skill-card{padding:var(--space-6);background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-lg);transition:border-color var(--transition-interactive),transform var(--transition-interactive);}
.skill-card:hover{border-color:var(--color-primary);transform:translateY(-4px);}
.skill-card h3{font-size:var(--text-lg);margin-bottom:var(--space-3);color:var(--color-primary);}
.skill-card p{color:var(--color-text-muted);font-size:var(--text-sm);}

/* UNION */
.union{background:var(--color-surface);border-block:1px solid var(--color-divider);max-width:none;}
.union__inner{max-width:var(--content-default);margin-inline:auto;}
.union__card{display:flex;align-items:center;gap:clamp(var(--space-6),4vw,var(--space-12));
  padding:clamp(var(--space-6),4vw,var(--space-10));background:var(--color-surface-2);
  border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);}
.union__badge{flex:none;display:grid;place-items:center;width:clamp(92px,16vw,140px);height:clamp(92px,16vw,140px);
  border-radius:var(--radius-full);border:2px solid var(--color-primary);color:var(--color-primary);
  font-family:var(--font-display);font-weight:700;font-size:clamp(2rem,6vw,3rem);
  background:var(--color-primary-soft);}
.union__body h3{font-size:var(--text-xl);margin:var(--space-2) 0 var(--space-3);}
.union__body p{color:var(--color-text-muted);max-width:52ch;}
@media(max-width:620px){.union__card{flex-direction:column;text-align:center;}.union__body p{margin-inline:auto;}}

/* CONTACT */
.contact__lead{color:var(--color-text-muted);max-width:56ch;font-size:var(--text-lg);margin-bottom:var(--space-8);}
.contact__actions{display:flex;flex-wrap:wrap;gap:var(--space-4);}

/* FOOTER */
.footer{border-top:1px solid var(--color-divider);padding:var(--space-8) clamp(var(--space-5),5vw,var(--space-16));}
.footer__inner{max-width:var(--content-default);margin-inline:auto;display:flex;flex-wrap:wrap;
  justify-content:space-between;gap:var(--space-3);align-items:center;
  font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.06em;}
.footer__muted{color:var(--color-text-faint);}

/* REVEAL */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);}
.reveal.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;}}