:root{
  --bg:#0d2420;--cream:#f0e8d8;--accent:#e8735a;
  --af:rgba(232,115,90,0.28);--aw:rgba(232,115,90,0.14);
  --muted:#8ab0a4;--border:rgba(168,196,184,0.12);
  --nav:rgba(8,22,18,0.94);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--cream);font-family:"DM Mono",monospace;overflow-x:hidden;}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:52;opacity:0.048;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:256px 256px;}

/* NAV */
nav{position:sticky;top:0;z-index:500;background:var(--nav);backdrop-filter:blur(14px);border-bottom:0.5px solid var(--border);}
.ni{display:flex;justify-content:space-between;align-items:center;padding:.8rem 2rem;max-width:1100px;margin:0 auto;}
.nl{display:flex;align-items:center;gap:.7rem;text-decoration:none;cursor:pointer;}
.nlogo{
  width:34px;height:34px;
  border-radius:50%;object-fit:cover;
  background:transparent; /* no square bg */
}
.nlogo.spinning{animation:nspin .75s cubic-bezier(.4,0,.2,1) forwards;}
@keyframes nspin{
  0%{transform:rotate(0) scale(1);}
  45%{transform:rotate(162deg) scale(1.12);}
  100%{transform:rotate(360deg) scale(1);}
}
.nn{font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:.88rem;letter-spacing:.08em;text-transform:uppercase;color:var(--cream);}
.nr{display:flex;align-items:center;gap:1.8rem;}
.nlink{font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);text-decoration:none;transition:color .2s;}
.nlink:hover{color:var(--accent);}
.ncta{font-size:.57rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);border:.5px solid var(--af);padding:.4rem 1rem;text-decoration:none;transition:all .2s;border-radius:4px;}
.ncta:hover{background:var(--aw);border-color:var(--accent);}

.wrap{max-width:1100px;margin:0 auto;padding:0 2rem;}

/* HERO */
.hero{padding:4rem 0 5rem;position:relative;overflow:visible;}
.htop{display:flex;justify-content:space-between;margin-bottom:2.5rem;}
.corner{font-size:.55rem;letter-spacing:.25em;text-transform:uppercase;color:var(--muted);line-height:1.9;opacity:.65;}
.corner.r{text-align:right;}

/* HERO LAYOUT: badge left, headline right — flex row, badge 45%, headline 55% */
.hbody{display:flex;flex-direction:row;align-items:center;gap:0;margin-bottom:0;padding-left:7%;}
.hhed-col{position:relative;z-index:2;flex:0 0 55%;width:55%;padding-left:1rem;animation:drift 7s ease-in-out 1.2s infinite;}
.hhed{font-family:"Barlow Condensed",sans-serif;font-weight:900;text-transform:uppercase;animation:fu .9s ease .15s both;}
.hhed .l1{display:block;font-size:clamp(2.2rem,8.2vw,8.8rem);font-weight:900;color:var(--accent);letter-spacing:-.01em;line-height:.92;margin-bottom:.1em;}
.hhed .l2{display:block;font-size:clamp(1rem,3vw,2.6rem);font-weight:900;color:#8ab0a4;line-height:.92;letter-spacing:-.01em;}
@keyframes fu{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
@keyframes drift{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}
@keyframes breathe{0%,100%{transform:scale(1);}50%{transform:scale(1.035);}}

/* BADGE CLICK TEXT EFFECT */
@keyframes splitUp{0%{transform:translateY(0);}40%{transform:translateY(-20px);}100%{transform:translateY(0);}}
@keyframes splitDown{0%{transform:translateY(0);}40%{transform:translateY(20px);}100%{transform:translateY(0);}}
.hhed.fx-split .l1{animation:splitUp .55s cubic-bezier(.25,.46,.45,.94) forwards;}
.hhed.fx-split .l2{animation:splitDown .55s cubic-bezier(.25,.46,.45,.94) forwards;}
.hsub{display:none;}

/* BADGE FLIP CARD */
.hbadge-wrap {
  position: relative;
  z-index: 1;
  flex: 0 0 45%;
  width: 45%;
  animation: bi .9s ease .1s both;
}
@keyframes bi{from{opacity:0;transform:scale(.85) rotate(-6deg);}to{opacity:1;transform:scale(1) rotate(0);}}

.hbadge {
  width: 100%; height: auto;
  aspect-ratio: 1;
  perspective: 900px;
  cursor: pointer;
  border-radius: 50%;
}
.hbadge-inner {
  width: 100%; height: 100%;
  animation: breathe 4s ease-in-out 1.2s infinite;
}
.hbadge-card {
  width: 100%;
  aspect-ratio: 1;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 1s cubic-bezier(0.15, 0.85, 0.3, 1);
}
.hbadge-front,
.hbadge-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.hbadge-back { transform: rotateY(180deg); }

.hbadge-front img,
.hbadge-back img {
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
  clip-path: circle(50%);
}

/* BADGE GLOW — pseudo-element sits behind the 3D card, safe from preserve-3d */
.hbadge::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,115,90,0.55) 0%, transparent 68%);
  animation: badgeGlow 3s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}
@keyframes badgeGlow {
  0%, 100% { opacity: 0.15; transform: scale(0.88); }
  50%       { opacity: 0.85; transform: scale(1.1);  }
}
.hbadge:hover::before {
  opacity: 1;
  transform: scale(1.15);
  animation-play-state: paused;
}

/* HERO IMAGE — clean cut, no overlay */
.himgwrap{overflow:hidden;border-radius:12px;animation:fu .9s ease .5s both;}
.himgwrap img{
  width:100%;
  height:clamp(240px,42vw,500px);
  object-fit:cover;
  object-position:center 35%;
  display:block;
  filter:saturate(.9) contrast(1.04);
}

/* SECTIONS */
.srule{border:none;border-top:.5px solid var(--border);margin:0;}
.section{padding:4rem 0;}
.ey{font-size:.55rem;letter-spacing:.35em;text-transform:uppercase;color:var(--muted);opacity:.5;margin-bottom:2rem;display:flex;align-items:center;gap:1rem;}
.ey::after{content:"";flex:1;height:.5px;background:var(--border);}

/* WORK CARDS */
.wgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;}
.wcard{cursor:pointer;text-decoration:none;color:inherit;display:block;}
.wthumb{
  width:100%;aspect-ratio:16/10;
  position:relative;overflow:hidden;
  border:.5px solid var(--af);border-radius:10px;
  transition:border-color .3s;
  background:#071812;
}
.wcard:hover .wthumb{border-color:var(--accent);}
.wthumb img.bg{width:100%;height:100%;object-fit:cover;object-position:center;display:block;transition:transform .55s ease;filter:saturate(.82);}
.wcard:hover .wthumb img.bg{transform:scale(1.04);filter:saturate(1.05);}
.wthumb video{width:100%;height:100%;object-fit:cover;display:block;border-radius:10px;}
.wthumb.has-img::after{content:"";position:absolute;bottom:0;left:0;right:0;height:50%;
  background:linear-gradient(to top,rgba(7,24,18,.72) 0%,transparent 100%);
  pointer-events:none;border-radius:0 0 10px 10px;}
.wbar{position:absolute;bottom:0;left:0;right:0;height:2.5px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .4s ease;z-index:3;border-radius:0 0 10px 10px;}
.wcard:hover .wbar{transform:scaleX(1);}
.wbody{padding:.85rem 0 0;}
.wname{font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:1.1rem;letter-spacing:.05em;text-transform:uppercase;color:var(--cream);margin-bottom:.18rem;}
.wdesc{font-family:"Crimson Pro",serif;font-size:.87rem;font-style:italic;color:var(--muted);line-height:1.5;margin-bottom:.42rem;}
.wtag{font-size:.52rem;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);opacity:.8;}
.wattr{display:block;font-size:.5rem;color:var(--muted);opacity:.32;letter-spacing:.1em;margin-top:.2rem;}

/* ABOUT */
.agrid{display:grid;grid-template-columns:1fr 2fr;gap:4rem;align-items:start;}
.acall{font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:2.4rem;letter-spacing:.03em;text-transform:uppercase;color:var(--accent);opacity:.18;line-height:1.1;}
.ap{font-family:"Crimson Pro",serif;font-size:1.1rem;color:rgba(138,176,164,.88);line-height:1.88;margin-bottom:1.2rem;font-weight:300;}
.ap em{color:var(--cream);font-style:italic;}
.asm{font-family:"Crimson Pro",serif;font-size:.93rem;color:var(--muted);opacity:.48;line-height:1.7;font-style:italic;}
.pills{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem;}
.pill{font-size:.5rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);opacity:.65;border:.5px solid var(--af);padding:.2rem .6rem;}

/* REDDIT */
.rhed{font-family:"Crimson Pro",serif;font-size:1.4rem;font-style:italic;font-weight:300;color:var(--muted);margin-bottom:2rem;max-width:480px;line-height:1.5;}
.rgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--border);border-radius:8px;overflow:hidden;}
.rcard{background:var(--bg);padding:1.2rem 1.35rem;transition:background .2s;}
.rcard:hover{background:#0f2e28;}
.rmeta{font-size:.53rem;letter-spacing:.15em;color:var(--muted);opacity:.4;text-transform:uppercase;margin-bottom:.65rem;}
.rblur{display:inline-block;filter:blur(3px);background:rgba(255,255,255,.07);border-radius:2px;padding:0 .2em;}
.rtxt{font-family:"Crimson Pro",serif;font-size:.97rem;font-style:italic;color:var(--muted);opacity:.78;line-height:1.65;}

/* CONTACT */
#contact{scroll-margin-top:4rem;}
.cgrid{display:grid;grid-template-columns:1fr 1.8fr;gap:4rem;align-items:start;}
.cnote-primary{font-family:"Crimson Pro",serif;font-size:1.05rem;font-style:italic;color:var(--muted);opacity:.5;line-height:1.6;margin-top:1rem;}
.cnote-secondary{font-family:"Crimson Pro",serif;font-size:.62rem;font-style:italic;color:var(--muted);opacity:.2;margin-top:.75rem;line-height:1.5;}
.scol{margin-top:2rem;display:flex;flex-direction:column;gap:.6rem;}
.slink{font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);opacity:.65;text-decoration:none;display:flex;align-items:center;gap:.6rem;transition:opacity .2s;}
.slink::before{content:"";display:block;width:16px;height:.5px;background:var(--af);}
.slink:hover{opacity:1;}
.fl{display:block;font-size:.53rem;letter-spacing:.25em;text-transform:uppercase;color:var(--muted);opacity:.38;margin-bottom:.4rem;}
.ff{margin-bottom:1rem;}
.fi{width:100%;background:rgba(255,255,255,.025);border:.5px solid var(--border);padding:.58rem .75rem;color:var(--cream);font-family:"DM Mono",monospace;font-size:.77rem;outline:none;transition:border-color .2s;border-radius:6px;}
.fi:focus{border-color:var(--af);}
.fta{resize:vertical;min-height:88px;}
.fbtn{margin-top:1rem;padding:.62rem 2rem;border:.5px solid var(--af);color:var(--accent);background:transparent;font-family:"DM Mono",monospace;font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;cursor:pointer;transition:all .2s;border-radius:6px;}
.fbtn:hover{background:var(--aw);color:var(--cream);}
.foot{border-top:.5px solid var(--border);margin-top:3.5rem;padding-top:1.5rem;display:flex;justify-content:space-between;}
.ftxt{font-size:.5rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);opacity:.22;}

/* SCROLL REVEAL */
.rev{opacity:0;transform:translateY(22px);transition:opacity .75s cubic-bezier(.22,1,.36,1),transform .75s cubic-bezier(.22,1,.36,1);}
.rev.d1{transition-delay:.08s;}.rev.d2{transition-delay:.17s;}.rev.d3{transition-delay:.27s;}
.rev.on{opacity:1;transform:translateY(0);}

/* RESPONSIVE */
@media(max-width:768px){
  /* HERO — full-screen stacked layout: badge top, headline below, garland peeks */
  .hero{min-height:100svh;padding:2rem 0 0;display:flex;flex-direction:column;justify-content:flex-start;}
  .hbody{padding-left:0;flex-direction:column;align-items:center;text-align:center;gap:1.5rem;}
  .hbadge-wrap{flex:none;width:78vw;max-width:360px;animation:bi .9s ease .1s both;}
  .hhed-col{flex:none;width:100%;padding-left:0;animation:none;}
  .hhed .l1{font-size:clamp(2.6rem,11vw,5rem);}
  .hhed .l2{font-size:clamp(1rem,4.5vw,1.8rem);}
  .wrap + .garland-wrap{margin-top:-8rem;}

  /* REST */
  .wgrid,.rgrid{grid-template-columns:1fr;}
  .agrid,.cgrid{grid-template-columns:1fr;gap:2rem;}
  .nr .nlink{display:none;}
  .htop{display:none;}
  .wrap{padding:0 1.25rem;}
  .ni{padding:.75rem 1.25rem;}
}
@media(max-width:480px){
  .hbadge-wrap{width:88vw;}
}
@media(max-width:480px){
  .himgwrap img{height:200px;}
}

/* TYPING CURSOR */
.hhed .l2::after {
  content: '_';
  display: inline-block;
  color: var(--accent);
  animation: blink 0.7s step-end 3, fadeout 0.1s 2.1s forwards;
  margin-left: 2px;
}
@keyframes blink {
  0%,100% { opacity: 1; }
  50%      { opacity: 0; }
}
@keyframes fadeout { to { opacity: 0; display: none; } }

/* PARALLAX HERO */
.himgwrap { will-change: transform; }

/* SCREENSHOT REDDIT CARDS */
.rgrid { background: transparent; gap: 1.2rem; }
.rcard {
  background: #1a1a1b;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  transition: transform .2s, box-shadow .2s;
  box-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.rcard::before {
  content: '';
  display: block;
  height: 6px;
  background: linear-gradient(90deg, #ff4500, #ff6534);
  border-radius: 6px 6px 0 0;
}
.rcard:nth-child(1) { transform: rotate(-0.8deg); }
.rcard:nth-child(2) { transform: rotate(0.5deg); }
.rcard:nth-child(3) { transform: rotate(1.1deg); }
.rcard:nth-child(4) { transform: rotate(-0.4deg); }
.rcard:hover { transform: rotate(0deg) translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.5); }
.rcard .rmeta { color: #818384; font-size: .52rem; letter-spacing: .12em; }
.rcard .rtxt { color: #d7dadc; opacity: .92; font-size: .93rem; }

/* GARLAND DIVIDER */
.garland-wrap {
  width: 100%;
  line-height: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
}
/* First garland pulls up into hero space */
.garland-wrap:first-of-type {
  margin-top: -7rem;
}
.garland-wrap img {
  display: block;
  width: 100%;
}

#work { position: relative; }

/* FIX: ensure circular clip on nav logo */
.nlogo { clip-path: circle(50%); background: transparent; }


/* ── BACKGROUND DEPTH SYSTEM ────────────────────────────────────────────── */

/* Layer 1: Vignette — darkens corners, creates center focus */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 51;
  background: radial-gradient(
    ellipse 80% 70% at 50% 40%,
    transparent 30%,
    rgba(4, 12, 10, 0.35) 70%,
    rgba(2, 8, 6, 0.65) 100%
  );
}

/* Layer 2: Warm organic secondary noise — different scale, slight amber tint */
/* (scan lines removed — too subtle to justify the overhead) */

/* Layer 3: Warm organic secondary noise — different scale, slight amber tint */
.noise-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n2'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.28' numOctaves='6' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='1 0.4 0 0 0 0.8 1 0 0 0 0 0 0.6 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n2)'/%3E%3C/svg%3E");
  background-size: 512px 512px;
}

/* Layer 4: Content section lift — sections feel like they float above bg */
.section {
  position: relative;
}

/* Hero gets special treatment — deeper, more cinematic */
.hero::before {
  content: '';
  position: absolute;
  inset: -4rem -2rem;
  background:
    radial-gradient(ellipse 60% 80% at 30% 50%, rgba(232,115,90,0.03) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 80% 30%, rgba(138,176,164,0.04) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* Work section: slight warm lift */  
#work::before {
  background: linear-gradient(
    180deg,
    rgba(232,115,90,0.015) 0%,
    rgba(255,255,255,0.01) 100%
  ) !important;
}

/* Nav gets glass treatment */
nav {
  border-bottom: 0.5px solid rgba(138,176,164,0.15) !important;
  box-shadow: 0 1px 32px rgba(2,8,6,0.4);
}



/* ════════════════════════════════════════════════════
   BACKGROUND MESH — visible drifting color field
   No blend modes. Just light on dark.
   ════════════════════════════════════════════════════ */

/* Wrapper divs are just positioning contexts */
.bg-mesh, .bg-mesh-b, .bg-mesh-c {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}

/* ── BLOB 1: coral, top-left ── */
.bg-mesh::before {
  content: '';
  position: fixed;
  width: 60vw;
  height: 60vw;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(220, 80, 50, 0.22) 0%,
    rgba(200, 60, 30, 0.12) 35%,
    transparent 70%
  );
  filter: blur(80px);
  top: -20vw;
  left: -15vw;
  animation: m1 24s ease-in-out infinite alternate;
  will-change: transform;
}

/* ── BLOB 2: sage, bottom-right ── */
.bg-mesh::after {
  content: '';
  position: fixed;
  width: 55vw;
  height: 55vw;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(100, 180, 160, 0.18) 0%,
    rgba(80, 155, 135, 0.09) 40%,
    transparent 70%
  );
  filter: blur(90px);
  bottom: -10vw;
  right: -10vw;
  animation: m2 30s ease-in-out infinite alternate;
  will-change: transform;
}

/* ── BLOB 3: deep coral, center wander ── */
.bg-mesh-b::before {
  content: '';
  position: fixed;
  width: 45vw;
  height: 45vw;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(200, 70, 40, 0.14) 0%,
    transparent 65%
  );
  filter: blur(110px);
  top: 25%;
  left: 30%;
  animation: m3 38s ease-in-out infinite alternate;
  will-change: transform;
}

/* ── BLOB 4: cool teal, top-right ── */
.bg-mesh-b::after {
  content: '';
  position: fixed;
  width: 50vw;
  height: 40vw;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(80, 170, 150, 0.15) 0%,
    transparent 65%
  );
  filter: blur(100px);
  top: -5vw;
  right: 5vw;
  animation: m4 22s ease-in-out infinite alternate;
  will-change: transform;
}

/* ── BLOB 5: warm amber, bottom-left ── */
.bg-mesh-c::before {
  content: '';
  position: fixed;
  width: 50vw;
  height: 35vw;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(180, 95, 55, 0.13) 0%,
    transparent 65%
  );
  filter: blur(120px);
  bottom: 5vw;
  left: -5vw;
  animation: m5 42s ease-in-out infinite alternate;
  will-change: transform;
}

/* ── BLOB 6: sage, mid-left ── */
.bg-mesh-c::after {
  content: '';
  position: fixed;
  width: 35vw;
  height: 50vw;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(120, 190, 165, 0.12) 0%,
    transparent 65%
  );
  filter: blur(95px);
  top: 15%;
  left: -8vw;
  animation: m6 28s ease-in-out infinite alternate;
  will-change: transform;
}

/* ── KEYFRAMES ── */
@keyframes m1 {
  0%   { transform: translate(0vw, 0vw) scale(1); }
  33%  { transform: translate(10vw, 8vw) scale(1.08); }
  66%  { transform: translate(5vw, 16vw) scale(0.93); }
  100% { transform: translate(16vw, 4vw) scale(1.05); }
}
@keyframes m2 {
  0%   { transform: translate(0vw, 0vw) scale(1); }
  40%  { transform: translate(-10vw, -8vw) scale(1.1); }
  100% { transform: translate(-6vw, -14vw) scale(0.92); }
}
@keyframes m3 {
  0%   { transform: translate(0vw, 0vw) scale(1); }
  50%  { transform: translate(-12vw, 10vw) scale(1.07); }
  100% { transform: translate(8vw, -12vw) scale(0.95); }
}
@keyframes m4 {
  0%   { transform: translate(0vw, 0vw) scale(1); }
  60%  { transform: translate(-8vw, 12vw) scale(1.05); }
  100% { transform: translate(6vw, 8vw) scale(0.97); }
}
@keyframes m5 {
  0%   { transform: translate(0vw, 0vw) scale(1); }
  40%  { transform: translate(12vw, -6vw) scale(1.06); }
  100% { transform: translate(6vw, -10vw) scale(0.94); }
}
@keyframes m6 {
  0%   { transform: translate(0vw, 0vw) scale(1); }
  55%  { transform: translate(10vw, 8vw) scale(1.09); }
  100% { transform: translate(4vw, 14vw) scale(0.92); }
}

/* Animated grain — shifts every few frames so it feels alive not printed */
.bg-anim-grain {
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  z-index: 3;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 400px 400px;
  animation: grainshift 8s steps(2) infinite;
}
@keyframes grainshift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-3%, -5%); }
  50%  { transform: translate(5%, 3%); }
  75%  { transform: translate(-4%, 6%); }
  100% { transform: translate(0, 0); }
}

/* Shimmer — faint horizontal lines drifting down */
.bg-shimmer {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(138,176,164,0.015) 3px,
    rgba(138,176,164,0.015) 4px
  );
  animation: shimmer 14s linear infinite;
}
@keyframes shimmer {
  from { background-position: 0 0; }
  to   { background-position: 0 200px; }
}

/* Content z-index — above mesh (z:1), grain (z:3), below noise (z:50) */
.wrap { position: relative; z-index: 10; }
nav   { position: sticky; z-index: 500; }

/* EPISODE PAGES */
.ep-hero {
  padding: 4rem 0 2rem;
  border-bottom: 0.5px solid var(--border);
  margin-bottom: 3rem;
}
.ep-back {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .52rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: .5;
  text-decoration: none;
  margin-bottom: 2rem;
  transition: opacity .2s;
}
.ep-back:hover { opacity: 1; }
.ep-back::before { content: '←'; font-size: .7rem; }
.ep-title {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 900;
  font-size: clamp(2.8rem, 7vw, 5rem);
  text-transform: uppercase;
  letter-spacing: -.01em;
  color: var(--accent);
  line-height: .9;
  margin-bottom: .75rem;
}
.ep-desc {
  font-family: "Crimson Pro", serif;
  font-size: 1.15rem;
  font-style: italic;
  font-weight: 300;
  color: var(--muted);
  line-height: 1.6;
  max-width: 560px;
  margin-bottom: .5rem;
}
.ep-attr {
  font-size: .52rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: .4;
  margin-top: .5rem;
}
.ep-hero-img {
  margin-top: 2.5rem;
  border-radius: 12px;
  overflow: hidden;
}
.ep-hero-img img {
  width: 100%;
  display: block;
  filter: saturate(.9) contrast(1.04);
}
.ep-episodes { display: flex; flex-direction: column; gap: 3rem; padding-bottom: 4rem; }
.ep-embed-wrap { display: flex; flex-direction: column; gap: .75rem; }
.ep-embed-label {
  font-size: .52rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: .45;
}
.ep-embed {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 10px;
  overflow: hidden;
  border: .5px solid var(--border);
  background: #071812;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ep-embed iframe { width: 100%; height: 100%; border: none; display: block; }
.ep-embed-short { aspect-ratio: 9/16; max-width: 400px; }
.ep-embed-placeholder {
  font-size: .55rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: .3;
}
.ep-coming-soon {
  padding: 6rem 0;
  text-align: center;
}
.ep-coming-soon .acall {
  font-size: 3rem;
  text-align: left;
  display: inline-block;
}
.ep-cs-note {
  font-family: "Crimson Pro", serif;
  font-size: 1rem;
  font-style: italic;
  color: var(--muted);
  opacity: .5;
  margin-top: 1.5rem;
}

/* REDUCED MOTION — disable non-essential animations */
@media (prefers-reduced-motion: reduce) {
  .bg-mesh::before, .bg-mesh::after,
  .bg-mesh-b::before, .bg-mesh-b::after,
  .bg-mesh-c::before, .bg-mesh-c::after,
  .bg-anim-grain,
  .bg-shimmer,
  .hbadge-inner,
  .hbadge::before,
  .hhed, .hsub,
  .hhed-col,
  .hbadge-wrap { animation: none; }
  .hbadge-card { transition: none; }
  .rev { opacity: 1; transform: none; transition: none; }
}