/* johncorry.dev — v4. Self-contained, no external dependencies. */
:root{
  --ink:#0e1319;
  --ink-soft:#2b3644;
  --muted:#5d6a7a;
  --line:#e2e8f0;
  --line-soft:#eef2f7;
  --bg:#fbfcfe;
  --panel:#f4f7fb;
  --accent:#1f3a63;
  --accent-2:#2f6fb5;
  --accent-ink:#16304f;
  --accent-soft:#e9f0f9;
  --gold:#b08d57;
  --radius:16px;
  --radius-sm:11px;
  --shadow:0 1px 2px rgba(16,32,64,.05), 0 8px 30px rgba(16,32,64,.07);
  --shadow-lg:0 2px 6px rgba(16,32,64,.07), 0 22px 60px rgba(16,32,64,.14);
  --max:830px;
  --display:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --ink:#eef2f7; --ink-soft:#c4cfdc; --muted:#94a1b2;
    --line:#222b36; --line-soft:#1b232d;
    --bg:#0a0e13; --panel:#111923;
    --accent:#8fb8ea; --accent-2:#6fa8e6; --accent-ink:#d6e6fa; --accent-soft:#152233;
    --gold:#cbab74;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 34px rgba(0,0,0,.42);
    --shadow-lg:0 2px 8px rgba(0,0,0,.55), 0 26px 70px rgba(0,0,0,.55);
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; color:var(--ink); background:var(--bg);
  font:16px/1.68 var(--display);
  padding:0 22px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* ambient top wash */
body::before{
  content:""; position:fixed; inset:0 0 auto 0; height:46vh; z-index:-1; pointer-events:none;
  background:
    radial-gradient(120% 70% at 78% 0%, rgba(47,111,181,.16), transparent 62%),
    radial-gradient(90% 60% at 12% 0%, rgba(31,58,99,.10), transparent 60%);
}
@media (prefers-color-scheme: dark){
  body::before{background:
    radial-gradient(120% 70% at 78% 0%, rgba(111,168,230,.16), transparent 62%),
    radial-gradient(90% 60% at 12% 0%, rgba(80,140,220,.10), transparent 60%)}
}
.wrap{max-width:var(--max); margin:0 auto; padding:6.5vh 0 6vh}
a{color:var(--accent-2); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:3px}
img{max-width:100%; height:auto}
h1{font-size:clamp(1.75rem,5.2vw,2.5rem); line-height:1.14; letter-spacing:-.022em; margin:0 0 .55rem; font-weight:700}
h2{font-size:.79rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
   margin:3.1rem 0 1.05rem; font-weight:700}
h3{font-size:1.06rem; margin:0 0 .3rem; letter-spacing:-.008em; font-weight:650}
p{margin:.62rem 0}
.muted{color:var(--muted)}

/* ---------- top nav ---------- */
.topnav{display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.5rem 0 1.4rem; border-bottom:1px solid var(--line); margin-bottom:3rem; flex-wrap:wrap}
.topnav .brand{display:flex; align-items:center; gap:.55rem; font-weight:700;
  letter-spacing:-.02em; color:var(--ink); font-size:1.02rem}
.topnav .brand:hover{text-decoration:none}
.topnav .brand svg{color:var(--accent-2)}
.topnav nav{display:flex; gap:1.25rem; font-size:.92rem; flex-wrap:wrap}
.topnav nav a{color:var(--muted); padding:.2rem 0; border-bottom:2px solid transparent}
.topnav nav a:hover{text-decoration:none; color:var(--ink)}
.topnav nav a[aria-current="page"]{color:var(--ink); font-weight:650; border-bottom-color:var(--accent-2)}

/* ---------- hero ---------- */
.hero{display:grid; grid-template-columns:1fr auto; gap:2.4rem; align-items:center}
.eyebrow{font-size:.76rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); font-weight:700; margin-bottom:.75rem}
.lede{font-size:clamp(1.02rem,2.6vw,1.16rem); color:var(--muted); margin-top:.5rem; max-width:54ch}
.hero-actions{margin-top:1.5rem; display:flex; gap:.65rem; flex-wrap:wrap}
.btn{display:inline-block; padding:.62rem 1.12rem; border-radius:999px; font-size:.92rem;
  border:1px solid var(--line); color:var(--ink); background:var(--bg); font-weight:550;
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease}
.btn:hover{text-decoration:none; border-color:var(--accent-2); transform:translateY(-1px);
  box-shadow:var(--shadow)}
.btn.primary{background:linear-gradient(135deg,var(--accent) 0%,var(--accent-2) 100%);
  color:#fff; border-color:transparent}
.btn.primary:hover{box-shadow:var(--shadow-lg); filter:brightness(1.06)}
.portrait{
  width:174px; height:174px; border-radius:50%; overflow:hidden; flex:0 0 auto;
  border:1px solid var(--line); background:var(--panel);
  box-shadow:0 2px 10px rgba(16,32,64,.10), 0 18px 44px rgba(16,32,64,.14);
  outline:3px solid transparent;
}
.portrait img{width:100%; height:100%; object-fit:cover; object-position:50% 32%; display:block}
@media (max-width:640px){
  .hero{grid-template-columns:1fr; gap:1.35rem}
  .portrait{width:118px; height:118px; margin:0 auto}
  .hero .lede{max-width:none}
}

/* ---------- cards ---------- */
.grid{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
@media (max-width:640px){ .grid{grid-template-columns:1fr} }
.card{background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--radius);
  padding:1.15rem 1.25rem; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.card:hover{transform:translateY(-2px); box-shadow:var(--shadow); border-color:var(--line)}
.card p{margin:.35rem 0 0; color:var(--muted); font-size:.95rem}
.card h3{color:var(--ink)}

/* ---------- work list ---------- */
.work{list-style:none; padding:0; margin:0}
.work li{padding:1.05rem 0; border-bottom:1px solid var(--line-soft)}
.work li:last-child{border-bottom:0}
.work .role{font-weight:650; letter-spacing:-.008em}
.work .meta{font-size:.86rem; color:var(--muted); font-variant-numeric:tabular-nums}

/* ---------- chips ---------- */
.chips{display:flex; flex-wrap:wrap; gap:.45rem; margin:.65rem 0 0; padding:0; list-style:none}
.chips li{font-size:.81rem; background:var(--accent-soft); color:var(--accent-ink);
  border-radius:999px; padding:.22rem .72rem; font-weight:520}
@media (prefers-color-scheme: dark){ .chips li{color:var(--accent-ink)} }

/* ---------- contact ---------- */
.contact-list{list-style:none; padding:0; margin:.65rem 0 0}
.contact-list li{margin:.42rem 0}

/* ---------- film strands ---------- */
.strand{border:1px solid var(--line-soft); border-radius:var(--radius); overflow:hidden;
  background:var(--panel); margin:0 0 1.5rem; box-shadow:var(--shadow)}
.strand .hero-img{position:relative; aspect-ratio:16/9; overflow:hidden; background:#0a0f16}
.strand .hero-img img{width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.strand:hover .hero-img img{transform:scale(1.045)}
.strand .hero-img::after{content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(5,9,15,.88) 0%, rgba(5,9,15,.42) 42%, rgba(5,9,15,.02) 76%)}
.strand .hero-img .cap{position:absolute; left:1.3rem; right:1.3rem; bottom:1.05rem; z-index:2; color:#fff}
.strand .kicker{font-size:.72rem; letter-spacing:.17em; text-transform:uppercase;
  color:#c2d6ef; font-weight:700}
.strand .hero-img h3{font-size:clamp(1.2rem,3.6vw,1.55rem); margin:.25rem 0 0; color:#fff;
  letter-spacing:-.015em; text-shadow:0 1px 18px rgba(0,0,0,.5)}
.strand .body{padding:1.15rem 1.3rem 1.35rem}
.strand .body p{margin:.5rem 0; color:var(--muted)}
.episodes{list-style:none; padding:0; margin:.8rem 0 0; display:flex; flex-wrap:wrap; gap:.4rem}
.episodes li{font-size:.8rem; border:1px solid var(--line); border-radius:999px;
  padding:.22rem .72rem; color:var(--ink-soft); background:var(--bg)}

/* ---------- stats ---------- */
.stat-row{display:flex; gap:2rem; flex-wrap:wrap; margin:1.9rem 0 2.6rem;
  padding:1.15rem 1.3rem; border:1px solid var(--line-soft); border-radius:var(--radius);
  background:var(--panel)}
.stat-row div{min-width:96px}
.stat-row b{display:block; font-size:1.6rem; letter-spacing:-.03em; font-weight:700;
  background:linear-gradient(135deg,var(--accent) 0%,var(--accent-2) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.stat-row span{font-size:.82rem; color:var(--muted)}

/* ---------- video rails (generated films page) ---------- */
.rail{margin:2.4rem 0 0}
.railhead{display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1rem}
.railhead h2{margin:0}
.railhead p{margin:0; font-size:.83rem; color:var(--muted)}
.vgrid{display:grid; grid-template-columns:repeat(2,1fr); gap:1rem}
@media (max-width:640px){ .vgrid{grid-template-columns:1fr} }
.vcard{display:flex; flex-direction:column; border:1px solid var(--line-soft); border-radius:var(--radius);
  overflow:hidden; background:var(--panel); box-shadow:var(--shadow); color:inherit;
  transition:transform .18s ease, box-shadow .18s ease}
.vcard:hover{text-decoration:none; transform:translateY(-2px); box-shadow:var(--shadow-lg)}
.vthumb{position:relative; aspect-ratio:16/9; background:#0a0f16; overflow:hidden}
.vthumb img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease}
.vcard:hover .vthumb img{transform:scale(1.04)}
.vdur{position:absolute; right:.5rem; bottom:.5rem; z-index:2; font-size:.74rem;
  background:rgba(6,10,16,.82); color:#fff; padding:.14rem .45rem; border-radius:5px;
  font-variant-numeric:tabular-nums; font-weight:600}
.vmeta{padding:.72rem .8rem .85rem; display:flex; flex-direction:column; gap:.18rem}
.vt{font-weight:600; font-size:.94rem; line-height:1.32; letter-spacing:-.006em}
.vsub{font-size:.79rem; color:var(--muted); font-variant-numeric:tabular-nums}
.vchip{align-self:flex-start; font-size:.67rem; letter-spacing:.11em; font-weight:700;
  text-transform:uppercase; color:#fff; background:var(--gold); border-radius:4px;
  padding:.1rem .4rem; margin-bottom:.28rem}
.newbanner{display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; margin:2rem 0 0;
  padding:.85rem 1.1rem; border:1px solid var(--line-soft); border-left:3px solid var(--gold);
  border-radius:var(--radius-sm); background:var(--panel)}
.nb-tag{font-size:.7rem; letter-spacing:.13em; text-transform:uppercase; font-weight:700; color:var(--gold)}
.newbanner a{font-weight:650; letter-spacing:-.008em}
.nb-meta{font-size:.82rem; color:var(--muted); margin-left:auto; font-variant-numeric:tabular-nums}

/* ---------- pipeline page ---------- */
.flow{margin:1.6rem 0 0; display:flex; flex-direction:column; gap:.5rem}
.fstep{display:grid; grid-template-columns:44px 1fr; gap:1rem; align-items:start;
  border:1px solid var(--line-soft); border-radius:var(--radius); background:var(--panel);
  padding:.95rem 1.1rem}
.fnum{width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  font-weight:700; font-size:1.02rem; color:#fff;
  background:linear-gradient(135deg,var(--accent) 0%,var(--accent-2) 100%)}
.fstep h3{margin:0 0 .15rem; font-size:1rem}
.fstep p{margin:.2rem 0 0; color:var(--muted); font-size:.93rem}
.fstep .io{font-size:.79rem; color:var(--muted); margin-top:.4rem; font-variant-numeric:tabular-nums}
.fstep .io code{background:var(--accent-soft); color:var(--accent-ink); padding:.05rem .34rem;
  border-radius:5px; font-size:.76rem}
.shotrow{display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; margin:1.1rem 0 0}
@media (max-width:640px){ .shotrow{grid-template-columns:1fr} }
.shotrow figure{margin:0; border:1px solid var(--line-soft); border-radius:var(--radius-sm);
  overflow:hidden; background:var(--panel)}
.shotrow img{width:100%; display:block; aspect-ratio:16/9; object-fit:cover}
.shotrow figcaption{font-size:.79rem; color:var(--muted); padding:.5rem .6rem .6rem}
.figrow{display:grid; grid-template-columns:repeat(2,1fr); gap:.8rem; margin:1.2rem 0 0}
@media (max-width:640px){ .figrow{grid-template-columns:1fr} }
.figrow figure{margin:0; border:1px solid var(--line-soft); border-radius:var(--radius-sm);
  overflow:hidden; background:var(--panel)}
.figrow img{width:100%; display:block}
.figrow figcaption{font-size:.79rem; color:var(--muted); padding:.5rem .6rem .6rem}
.railtags{display:flex; flex-wrap:wrap; gap:.45rem; margin:.8rem 0 0; padding:0; list-style:none}
.railtags li{font-size:.8rem; border:1px solid var(--line); border-radius:999px; padding:.2rem .68rem;
  color:var(--ink-soft); background:var(--bg)}

/* ---------- prose pages ---------- */
.prose h2{font-size:1.02rem; text-transform:none; letter-spacing:-.01em; color:var(--ink);
  margin:2.4rem 0 .55rem; font-weight:700}
.prose h3{font-size:1.03rem; margin:1.7rem 0 .1rem}
.prose ul{padding-left:1.15rem}
.prose li{margin:.32rem 0}

/* ---------- misc ---------- */
.notice{font-size:.93rem; color:var(--muted); background:var(--panel);
  border:1px solid var(--line-soft); border-left:3px solid var(--accent-2);
  border-radius:var(--radius-sm); padding:1.05rem 1.2rem; margin:2.2rem 0}
footer.colophon{margin-top:3.4rem; padding-top:1.3rem; border-top:1px solid var(--line);
  font-size:.85rem; color:var(--muted); display:flex; justify-content:space-between;
  gap:1rem; flex-wrap:wrap}
footer.colophon a{margin-right:.95rem}

@media (max-width:560px){
  body{padding:0 17px}
  .wrap{padding:5vh 0 5vh}
  .stat-row{gap:1.3rem; padding:1rem}
  .stat-row b{font-size:1.4rem}
  .strand .hero-img .cap{left:1rem; right:1rem; bottom:.85rem}
}