/* ============================================================
   Kevin Joseph — Portfolio V2
   "Empty repo → full house." Dark, cinematic, spotlight-lit.
   Bricolage Grotesque (display) · Instrument Sans (body) · Space Mono (data)
   Near-black canvas · vermilion + amber stage-light glow.
   ============================================================ */

:root{
  --bg:      #0c0c0f;
  --bg2:     #121218;
  --surface: #17171f;
  --surface2:#1e1e28;
  --line:    #262630;
  --line2:   #34343f;

  --ink:     #f3efe8;
  --muted:   #a49e93;
  --dim:     #726d64;

  --accent:  #ff4d2e;   /* vermilion spotlight */
  --accent-2:#ffb03a;   /* amber stage warmth */
  --accent-ink:#ff6a4d;

  --display:"Bricolage Grotesque","Space Grotesk",sans-serif;
  --body:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"Space Mono",ui-monospace,monospace;

  --maxw:1180px;
  --r:16px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
::selection{background:var(--accent); color:#0c0c0f;}

/* ambient grain/vignette on the whole page */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255,77,46,.10), transparent 60%),
    radial-gradient(80% 60% at 100% 0%, rgba(255,176,58,.05), transparent 55%);
}
main,.nav,.foot{position:relative; z-index:1;}

h1,h2,h3,h4{font-family:var(--display); font-weight:600; line-height:1.02; letter-spacing:-.02em; margin:0;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 26px;}

.eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink);}
.mono{font-family:var(--mono);}
.dim{color:var(--dim);} .muted{color:var(--muted);}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
.reveal.in{opacity:1; transform:none;}
.reveal.d1{transition-delay:.08s} .reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s} .reveal.d4{transition-delay:.32s}

/* ---------- nav ---------- */
.nav{position:sticky; top:0; z-index:50; background:rgba(12,12,15,.72); backdrop-filter:saturate(1.4) blur(14px); border-bottom:1px solid var(--line);}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; height:64px;}
.nav .brand{font-family:var(--display); font-weight:600; font-size:19px; letter-spacing:-.01em;}
.nav .brand .dot{color:var(--accent);}
.nav .links{display:flex; gap:26px; align-items:center;}
.nav .links a{font-family:var(--mono); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); transition:color .2s;}
.nav .links a:hover{color:var(--ink);}
.nav .links a.cta{border:1px solid var(--line2); border-radius:999px; padding:8px 15px; color:var(--ink);}
.nav .links a.cta:hover{border-color:var(--accent); color:var(--accent-ink); box-shadow:0 0 24px -6px var(--accent);}
@media(max-width:720px){.nav .links a:not(.cta){display:none;}}

/* ---------- hero ---------- */
.hero{position:relative; padding:96px 0 40px; overflow:hidden;}
.hero .beam{position:absolute; top:-30%; left:50%; width:120vw; height:90vh; transform:translateX(-50%);
  background:conic-gradient(from 210deg at 50% 0%, transparent 0deg, rgba(255,77,46,.10) 20deg, rgba(255,176,58,.06) 32deg, transparent 46deg);
  filter:blur(6px); pointer-events:none; animation:sway 12s ease-in-out infinite alternate;}
@keyframes sway{from{transform:translateX(-52%) rotate(-3deg)} to{transform:translateX(-48%) rotate(3deg)}}
.hero .eyebrow{display:inline-flex; align-items:center; gap:9px;}
.hero .eyebrow::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 12px var(--accent); animation:pulse 2.4s infinite;}
@keyframes pulse{50%{opacity:.35}}
.hero h1{font-size:clamp(44px,8.5vw,104px); max-width:14ch; margin:22px 0 0; font-weight:600;}
.hero h1 .lit{color:var(--accent); position:relative;}
.hero .lede{font-size:clamp(17px,2.1vw,21px); color:var(--muted); max-width:56ch; margin-top:24px;}
.hero .lede b{color:var(--ink); font-weight:600;}
.hero .actions{margin-top:32px; display:flex; gap:13px; flex-wrap:wrap;}

.btn{display:inline-flex; align-items:center; gap:9px; padding:13px 24px; border-radius:999px; font-family:var(--mono); font-size:13px; letter-spacing:.04em; text-transform:uppercase; border:1px solid var(--line2); transition:.22s var(--ease);}
.btn.primary{background:var(--accent); color:#0c0c0f; border-color:var(--accent); font-weight:700;}
.btn.primary:hover{box-shadow:0 0 40px -6px var(--accent); transform:translateY(-2px);}
.btn.ghost:hover{border-color:var(--ink); color:var(--ink); transform:translateY(-2px);}

/* ---------- now-showing reel (marquee) ---------- */
.reel{margin-top:64px; position:relative;}
.reel .label{font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); margin-bottom:16px; display:flex; align-items:center; gap:12px;}
.reel .label::after{content:""; flex:1; height:1px; background:var(--line);}
.reel-track{display:flex; gap:20px; width:max-content; animation:scrollx 42s linear infinite;}
.reel:hover .reel-track{animation-play-state:paused;}
@keyframes scrollx{to{transform:translateX(-50%)}}
.reel-card{width:300px; flex:0 0 auto; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--surface); position:relative;}
.reel-card img{width:100%; height:190px; object-fit:cover; object-position:top center; opacity:.9; transition:.3s;}
.reel-card:hover img{opacity:1;}
.reel-mask{position:absolute; inset:0; pointer-events:none;
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.reel-fade{position:absolute; top:0; bottom:0; width:120px; z-index:2; pointer-events:none;}
.reel-fade.l{left:0; background:linear-gradient(90deg,var(--bg),transparent);}
.reel-fade.r{right:0; background:linear-gradient(270deg,var(--bg),transparent);}

/* ---------- metrics ---------- */
.metrics{border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:70px;}
.metrics .wrap{display:grid; grid-template-columns:repeat(4,1fr);}
.metric{padding:34px 22px; border-right:1px solid var(--line);}
.metric:last-child{border-right:0;}
.metric .n{font-family:var(--display); font-size:clamp(34px,4.4vw,52px); line-height:1; letter-spacing:-.03em;}
.metric .n .u{color:var(--accent);}
.metric .l{font-family:var(--mono); font-size:11.5px; letter-spacing:.03em; color:var(--dim); margin-top:12px; line-height:1.5;}
@media(max-width:760px){.metrics .wrap{grid-template-columns:1fr 1fr;} .metric:nth-child(2){border-right:0;} .metric:nth-child(1),.metric:nth-child(2){border-bottom:1px solid var(--line);}}

/* ---------- section scaffold ---------- */
.section{padding:96px 0;}
.section-head{margin-bottom:52px;}
.section-head .eyebrow{display:block; margin-bottom:14px;}
.section-head h2{font-size:clamp(30px,5vw,52px); max-width:16ch;}
.section-head p{color:var(--muted); max-width:52ch; margin-top:16px; font-size:16px;}

/* ---------- featured rows (top 3) ---------- */
.feature{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; padding:70px 0; border-top:1px solid var(--line);}
.feature:nth-child(even) .feature-media{order:2;}
.feature-media{position:relative;}
.feature-media .shot{position:relative; border:1px solid var(--line2); border-radius:var(--r); overflow:hidden; background:var(--surface); box-shadow:0 40px 90px -50px #000;}
.feature-media .shot img{width:100%; display:block; max-height:540px; object-fit:cover; object-position:top center;}
.feature-media::before{content:""; position:absolute; inset:-14% -10%; z-index:-1;
  background:radial-gradient(60% 55% at 50% 45%, rgba(255,77,46,.30), rgba(255,176,58,.10) 45%, transparent 70%);
  filter:blur(30px); opacity:.55; transition:opacity .5s;}
.feature:hover .feature-media::before{opacity:.9;}
.feature-body .fnum{font-family:var(--mono); font-size:13px; color:var(--accent-ink); letter-spacing:.1em;}
.feature-body h3{font-size:clamp(28px,3.6vw,42px); margin:14px 0 0;}
.feature-body .tag{display:inline-block; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); border:1px solid var(--line2); border-radius:999px; padding:4px 11px; margin-top:16px;}
.feature-body p{color:var(--muted); font-size:16px; margin:18px 0 0; max-width:46ch;}
.feature-body .flink{display:inline-flex; align-items:center; gap:9px; margin-top:24px; font-family:var(--mono); font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink); border-bottom:1px solid var(--accent); padding-bottom:5px; transition:.2s;}
.feature-body .flink:hover{gap:14px; color:var(--accent-ink);}
@media(max-width:840px){.feature{grid-template-columns:1fr; gap:30px; padding:48px 0;} .feature:nth-child(even) .feature-media{order:0;}}

/* ---------- grid (rest) ---------- */
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.card{position:relative; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--surface); transition:.35s var(--ease);}
.card .thumb{position:relative; aspect-ratio:16/11; overflow:hidden; border-bottom:1px solid var(--line);}
.card .thumb img{width:100%; height:100%; object-fit:cover; object-position:top center; transition:transform .5s var(--ease), opacity .3s; opacity:.85;}
.card .num{position:absolute; top:12px; left:14px; z-index:2; font-family:var(--mono); font-size:11px; color:var(--ink); background:rgba(12,12,15,.7); border:1px solid var(--line2); border-radius:999px; padding:3px 9px; backdrop-filter:blur(6px);}
.card .cbody{padding:18px 20px 20px;}
.card .cbody h4{font-size:20px;}
.card .cbody .ctag{font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-ink);}
.card .cbody p{color:var(--muted); font-size:13.5px; margin:8px 0 0;}
.card:hover{transform:translateY(-5px); border-color:var(--line2); box-shadow:0 30px 70px -50px var(--accent), 0 20px 50px -40px #000;}
.card:hover .thumb img{transform:scale(1.05); opacity:1;}
@media(max-width:860px){.grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.grid{grid-template-columns:1fr;}}

/* ---------- approach ---------- */
.approach{border-top:1px solid var(--line); background:linear-gradient(180deg,var(--bg),var(--bg2));}
.approach .cells{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px;}
.cell{border:1px solid var(--line); border-radius:var(--r); padding:28px; background:var(--surface); transition:.3s;}
.cell:hover{border-color:var(--line2); transform:translateY(-4px);}
.cell .k{font-family:var(--mono); font-size:12px; color:var(--accent-ink); letter-spacing:.06em;}
.cell h4{font-size:21px; margin:12px 0 10px;}
.cell p{color:var(--muted); font-size:14.5px; margin:0;}
.tools{margin-top:40px; display:flex; flex-wrap:wrap; gap:9px;}
.tools span{font-family:var(--mono); font-size:12px; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:7px 14px;}
@media(max-width:820px){.approach .cells{grid-template-columns:1fr;}}

/* ---------- about ---------- */
.about{border-top:1px solid var(--line);}
.about .cols{display:grid; grid-template-columns:1.25fr .9fr; gap:56px; align-items:start;}
.about p{color:var(--muted); font-size:16.5px;}
.about .facts{border:1px solid var(--line); border-radius:var(--r); padding:6px 22px; background:var(--surface);}
.about .facts .row{display:flex; justify-content:space-between; gap:16px; padding:15px 0; border-bottom:1px solid var(--line); font-size:14.5px;}
.about .facts .row:last-child{border-bottom:0;}
.about .facts .row span:first-child{font-family:var(--mono); font-size:12px; color:var(--dim); text-transform:uppercase; letter-spacing:.05em;}
.about .facts .row span:last-child{text-align:right;}
@media(max-width:820px){.about .cols{grid-template-columns:1fr; gap:30px;}}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line); padding:70px 0 46px; position:relative; overflow:hidden;}
.foot::before{content:""; position:absolute; bottom:-40%; left:50%; transform:translateX(-50%); width:90vw; height:60vh; background:radial-gradient(50% 60% at 50% 100%, rgba(255,77,46,.16), transparent 70%); pointer-events:none;}
.foot .wrap{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; position:relative;}
.foot h3{font-size:clamp(30px,5.5vw,58px); max-width:15ch;}
.foot a.mail{color:var(--accent-ink); border-bottom:2px solid var(--accent);}
.foot .links{display:flex; gap:16px; margin-top:16px;}
.foot .links a{font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted);}
.foot .links a:hover{color:var(--ink);}
.foot .small{color:var(--dim); font-family:var(--mono); font-size:11.5px; margin-top:18px;}

.alsobuilt{margin-top:40px; padding-top:26px; border-top:1px solid var(--line); display:flex; gap:20px; align-items:baseline; flex-wrap:wrap;}
.alsobuilt p{margin:0; color:var(--muted); font-size:14.5px; max-width:72ch;}

/* ============================================================
   CASE PAGES
   ============================================================ */
.chero{position:relative; padding:60px 0 42px; overflow:hidden; border-bottom:1px solid var(--line);}
.chero .back{font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted);}
.chero .back:hover{color:var(--accent-ink);}
.chero h1{font-size:clamp(34px,6vw,72px); max-width:16ch; margin:20px 0 18px;}
.chero .sub{font-size:clamp(16px,2vw,20px); color:var(--muted); max-width:60ch;}
.chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:28px;}
.chip{font-family:var(--mono); font-size:12px; color:var(--muted); border:1px solid var(--line2); border-radius:999px; padding:8px 15px;}
.chip b{color:var(--ink); font-weight:400;}

.cbody-wrap{padding:64px 0 30px;}
.col{max-width:900px; margin:0 auto;}

.cshot{position:relative; border:1px solid var(--line2); border-radius:var(--r); overflow:hidden; background:var(--surface); box-shadow:0 50px 110px -60px #000; margin:8px 0;}
.cshot::after{content:""; position:absolute; inset:-10% -6% auto -6%; height:60%; z-index:-1; background:radial-gradient(60% 100% at 50% 0%, rgba(255,77,46,.22), transparent 70%); filter:blur(26px);}
.cshot .bar{height:34px; display:flex; align-items:center; gap:7px; padding:0 14px; background:var(--surface2); border-bottom:1px solid var(--line);}
.cshot .bar i{width:9px; height:9px; border-radius:50%; background:#3a3a44; display:inline-block;}
.cshot .bar .url{margin-left:10px; font-family:var(--mono); font-size:11px; color:var(--dim); background:var(--bg); border:1px solid var(--line); border-radius:6px; padding:3px 12px; max-width:60%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.cshot img{width:100%; display:block; max-height:660px; object-fit:cover; object-position:top center;}
figure.snap{margin:34px 0 8px;}
figure.snap figcaption{font-family:var(--mono); font-size:12px; color:var(--dim); margin-top:14px; text-align:center;}
.snap-2{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.snap-2 figure.snap{margin:0;}
@media(max-width:720px){.snap-2{grid-template-columns:1fr;}}

.cblock{margin:0 0 44px;}
.cblock .eyebrow{display:block; margin-bottom:12px;}
.cblock h2{font-size:clamp(24px,3.4vw,34px); margin-bottom:14px;}
.cblock p{color:var(--muted); margin:0 0 14px;}
.cblock p b{color:var(--ink);}
.lead{font-size:clamp(18px,2.2vw,23px); color:var(--ink); font-family:var(--display); font-weight:400; line-height:1.35; letter-spacing:-.01em;}

/* decision cards — compact */
.decks{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:8px 0;}
.deck{border:1px solid var(--line); border-radius:14px; padding:22px; background:var(--surface); transition:.3s;}
.deck:hover{border-color:var(--line2); box-shadow:0 24px 60px -50px var(--accent);}
.deck .di{font-family:var(--mono); font-size:12px; color:var(--accent-ink);}
.deck h4{font-size:17px; margin:10px 0 8px; font-family:var(--display);}
.deck p{color:var(--muted); font-size:13.5px; margin:0;}
@media(max-width:760px){.decks{grid-template-columns:1fr;}}

/* outcome */
.outs{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.out{border:1px solid var(--line); border-radius:14px; padding:24px; background:linear-gradient(180deg,var(--surface),var(--bg2));}
.out .n{font-family:var(--display); font-size:34px; line-height:1;}
.out .n .u{color:var(--accent);}
.out .l{font-family:var(--mono); font-size:11.5px; color:var(--dim); margin-top:10px; line-height:1.5;}
@media(max-width:720px){.outs{grid-template-columns:1fr;}}

.tint{font-family:var(--mono); font-size:12px; color:var(--dim); border:1px dashed var(--line2); border-radius:10px; padding:12px 16px; background:var(--bg2);}
.ari-chip{font-family:var(--mono); font-size:11px; border:1px solid var(--line2); border-radius:6px; padding:4px 8px; color:var(--muted); margin:3px 3px 0 0; display:inline-block;}

.nextcase{border-top:1px solid var(--line); padding:52px 0; position:relative; overflow:hidden;}
.nextcase::before{content:""; position:absolute; top:-60%; right:-10%; width:60vw; height:120%; background:radial-gradient(50% 50% at 100% 50%, rgba(255,176,58,.12), transparent 70%); pointer-events:none;}
.nextcase .wrap{display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; position:relative;}
.nextcase .k{font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--dim);}
.nextcase h3{font-size:clamp(24px,4vw,40px); margin-top:10px; max-width:20ch;}
.nextcase a.go{font-family:var(--mono); font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink); border:1px solid var(--line2); border-radius:999px; padding:13px 24px; transition:.25s;}
.nextcase a.go:hover{border-color:var(--accent); color:var(--accent-ink); box-shadow:0 0 34px -8px var(--accent);}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important;}
  .reveal{opacity:1; transform:none;}
  .reel-track{animation:none; transform:none;}
}