/* Shared styles for every page on JudeBarclay.com */
@font-face{font-family:"Geist"; src:url(Geist.woff2) format("woff2"); font-weight:100 900; font-style:normal; font-display:swap}
@font-face{font-family:"Geist Mono"; src:url(GeistMono.woff2) format("woff2"); font-weight:100 900; font-style:normal; font-display:swap}
:root{
  color-scheme: dark;
  --black:#000; --panel:#0d0d0f; --panel-2:#161618;
  --text:#f5f5f7; --soft:#d2d2d7; --muted:#86868b; --faint:#3a3a3d;
  --line:rgba(255,255,255,.1);
  --red:#E3342F;
  --sans:"Geist", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --mono:"Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --gutter:clamp(16px,5vw,64px);
  --ease:cubic-bezier(.2,.7,.2,1);
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.55'/></svg>");
}
*{box-sizing:border-box}
html.lenis, html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
body{margin:0; background:var(--black); color:var(--text); font:17px/1.55 var(--sans); -webkit-font-smoothing:antialiased; overflow-x:clip}
img, video{display:block; max-width:100%; height:auto}
a{color:inherit; text-decoration:none}
a:focus-visible, button:focus-visible, input:focus-visible{outline:2px solid var(--text); outline-offset:3px; border-radius:6px}
.wrap{max-width:1240px; margin:0 auto; padding-inline:var(--gutter); position:relative}
.eyebrow{font:500 12px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
h1,h2,h3,h4{margin:0; font-weight:700; letter-spacing:-.035em; line-height:1.02; text-wrap:balance}
.sec-title{font-size:clamp(44px,6.4vw,92px)}
.sec-lede{color:#a1a1a6; font-size:clamp(18px,1.6vw,21px); max-width:48ch; margin:18px 0 0}
.btn{display:inline-flex; align-items:center; gap:8px; padding:12px 20px; border-radius:999px; font-size:15px; font-weight:500; background:var(--text); color:#000; border:0; cursor:pointer; font-family:inherit; white-space:nowrap}
.btn.ghost{background:rgba(255,255,255,.1); color:var(--text); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
.btn:hover{opacity:.86}
.arr{transition:transform .3s} a:hover .arr{transform:translateX(3px)}
.head{display:flex; justify-content:space-between; align-items:end; gap:24px; flex-wrap:wrap; margin-bottom:clamp(36px,5vw,60px)}
.head .acts{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
section{scroll-margin-top:52px}
.sect{padding-block:clamp(100px,12vw,170px); position:relative; isolation:isolate; overflow:hidden}
.grain::after{content:""; position:absolute; inset:0; background-image:var(--grain); opacity:.12; mix-blend-mode:overlay; pointer-events:none; z-index:5}

/* Blended photo backgrounds: a dim, softly blurred photo that fades into black at both edges */
.bgp{position:absolute; inset:0; z-index:-2; overflow:hidden; pointer-events:none}
.bgp img{position:absolute; left:0; top:-10%; width:100%; height:120%; object-fit:cover; filter:blur(4px) brightness(.3) saturate(1.25); will-change:transform}
.bgp::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,#000 0%, rgba(0,0,0,.15) 26%, rgba(0,0,0,.3) 72%, #000 100%)}
.bgp.warm::before{content:""; position:absolute; inset:0; z-index:1; background:radial-gradient(60% 50% at 75% 25%, rgba(255,170,90,.16), transparent 70%)}
.bgp.cool::before{content:""; position:absolute; inset:0; z-index:1; background:radial-gradient(60% 50% at 20% 30%, rgba(90,140,255,.16), transparent 70%)}

/* nav */
.nav{position:fixed; inset:0 0 auto 0; z-index:60; padding-top:env(safe-area-inset-top,0px); background:rgba(0,0,0,.5); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid var(--line)}
.nav .wrap{display:flex; align-items:center; gap:28px; height:52px}
.wordmark{font-weight:700; font-size:15px; letter-spacing:.18em; text-transform:uppercase; white-space:nowrap}
.nav .links{display:flex; gap:24px; margin-left:auto; font-size:13px; color:var(--soft)}
.nav .links a:hover, .nav .links a[aria-current]{color:#fff}
.nav .btn{padding:7px 14px; font-size:13px}
@media (max-width:900px){ .nav .links{display:none} .nav .btn{margin-left:auto} }

/* YouTube tiles: clean thumbnail, title underneath */
.yt{display:flex; flex-direction:column; gap:10px; padding:0; margin:0; border:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; width:100%; min-width:0}
.yt .media{position:relative; display:block; width:100%; aspect-ratio:16/9; border-radius:14px; overflow:hidden; background:#111; border:1px solid rgba(255,255,255,.07); box-shadow:0 30px 70px -40px #000}
.yt.v .media{aspect-ratio:9/16}
.yt .media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease), filter .4s}
.yt:hover .media img{transform:scale(1.035)}
.yt .pl{position:absolute; right:12px; bottom:12px; z-index:1; width:42px; height:42px; border-radius:50%; background:rgba(0,0,0,.45); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); display:grid; place-items:center; opacity:0; transform:scale(.85); transition:opacity .3s, transform .3s, background .3s}
.yt:hover .pl, .yt:focus-visible .pl{opacity:1; transform:none; background:rgba(255,255,255,.95)}
@media (hover:none){ .yt .pl{opacity:1; transform:none; width:34px; height:34px; right:10px; bottom:10px} }
.yt .pl::before{content:""; margin-left:3px; border-left:12px solid #fff; border-top:7px solid transparent; border-bottom:7px solid transparent}
.yt:hover .pl::before{border-left-color:#000}
.yt .cap{display:block; font-size:15px; font-weight:500; line-height:1.3; color:var(--soft); letter-spacing:-.01em}
.yt:hover .cap{color:#fff}
.yt .tag{position:absolute; top:10px; left:10px; z-index:1; font:600 10px/1 var(--mono); letter-spacing:.12em; padding:5px 7px; border-radius:6px; background:var(--red); color:#fff}
.yt.nothumb .media{background:radial-gradient(120% 90% at 0% 0%, #2b2b31 0%, #0c0c0e 60%)}
.yt .media video.yv{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
.yt iframe{position:absolute; inset:0; width:100%; height:100%; border:0; z-index:3}

/* shared blended background */
#ambient{position:fixed; inset:0; z-index:-5; pointer-events:none; opacity:0; transition:opacity 2.2s cubic-bezier(.4,0,.2,1)}
#ambient.show{opacity:1}
#ambient .amb{position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity 1.1s cubic-bezier(.4,0,.2,1), visibility 0s 1.1s}
#ambient .amb.on{opacity:1; visibility:visible; transition:opacity 1.1s cubic-bezier(.4,0,.2,1), visibility 0s}
#ambient img{width:100%; height:100%; object-fit:cover; transform:scale(1.06)} /* the files are already blurred and darkened (assets/amb) */
#ambient .amb.soft img{transform:scale(1.15)}
#ambient::after{content:""; position:absolute; inset:0; background:radial-gradient(120% 80% at 50% 50%, transparent 30%, rgba(0,0,0,.55)), linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.15) 40%, rgba(0,0,0,.45))}

/* footer */
footer{border-top:1px solid var(--line); padding-block:64px 90px}
.contact .eyebrow{display:block}
.contact{padding-bottom:56px; margin-bottom:40px; border-bottom:1px solid var(--line)}
.contact .mail{display:inline-block; margin-top:14px; font-size:clamp(28px,5.2vw,64px); font-weight:700; letter-spacing:-.04em; line-height:1; color:#fff; border-bottom:2px solid rgba(255,255,255,.25); padding-bottom:6px; transition:border-color .3s; overflow-wrap:anywhere}
.contact .mail:hover{border-color:#fff}
.contact p{color:var(--muted); font-size:15px; margin:16px 0 0}
.foot{display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; align-items:end}
.socials{display:flex; gap:22px; flex-wrap:wrap; font-size:14px; color:var(--soft)}
.socials a:hover{color:#fff}
.fine{color:var(--muted); font-size:13px; margin:0}

/* subpage header */
.pagehead{position:relative; padding:clamp(140px,18vw,220px) 0 clamp(50px,6vw,80px); isolation:isolate; overflow:hidden}
.pagehead h1{font-size:clamp(56px,10vw,150px); letter-spacing:-.055em; line-height:.9}
.pagehead p{color:var(--soft); font-size:clamp(18px,1.6vw,21px); max-width:52ch; margin:22px 0 0}
.back{display:inline-block; font:500 12px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--soft); margin-bottom:26px}

.reveal{opacity:0; transform:translateY(36px); transition:opacity .85s var(--ease), transform .9s var(--ease)}
.reveal.in{opacity:1; transform:none}


/* ---------- phone menu ---------- */
.mbtn{display:none}
@media (max-width:900px){
  .nav .btn{margin-left:auto}
  .mbtn{display:grid; place-content:center; gap:6px; width:42px; height:42px; margin-right:-10px; padding:0; border:0; background:none; cursor:pointer; -webkit-tap-highlight-color:transparent}
  .mbtn span{display:block; width:22px; height:1.8px; border-radius:2px; background:#fff; transition:transform .35s var(--ease)}
  .menu-open .mbtn span:first-child{transform:translateY(3.9px) rotate(45deg)}
  .menu-open .mbtn span:last-child{transform:translateY(-3.9px) rotate(-45deg)}
}
.mmenu{position:fixed; inset:0; z-index:59; background:#000; display:flex; flex-direction:column; justify-content:space-between; padding:calc(76px + env(safe-area-inset-top,0px)) var(--gutter) calc(28px + env(safe-area-inset-bottom,0px)); opacity:0; visibility:hidden; transition:opacity .3s ease, visibility 0s .3s; overflow-y:auto; overscroll-behavior:contain}
.mmenu.on{opacity:1; visibility:visible; transition:opacity .3s ease}
.mm-links{display:grid}
.mm-links a{display:flex; align-items:baseline; gap:14px; padding:9px 0; font-size:clamp(34px,10vw,52px); font-weight:700; letter-spacing:-.045em; line-height:1.05; color:#fff; border-bottom:1px solid var(--line); opacity:0; transform:translateY(18px); transition:opacity .45s var(--ease), transform .55s var(--ease); transition-delay:calc(var(--i) * 40ms + 60ms)}
.mm-links a span{font:500 11px/1 var(--mono); letter-spacing:.12em; color:var(--muted); min-width:22px}
.mm-links a[aria-current]{color:var(--muted)}
.mmenu.on .mm-links a{opacity:1; transform:none}
.mm-foot{display:grid; gap:18px; margin-top:32px; opacity:0; transition:opacity .5s ease .35s}
.mmenu.on .mm-foot{opacity:1}
.mm-foot .btn{justify-self:start}
.mm-soc{display:flex; flex-wrap:wrap; gap:18px; font-size:15px; color:var(--soft)}
.mm-mail{font-size:15px; color:var(--muted)}
html.menu-open, html.menu-open body{overflow:hidden}
.menu-open .pill{visibility:hidden}

/* ---------- smooth phones ---------- */
.is-off, .is-off *{animation-play-state:paused !important}
#ambient img, #ambient .amb.soft img{filter:none !important}
@media (max-width:900px){
  /* frosted glass is expensive to redraw while scrolling on a phone: use solid tints instead */
  *:not(.nav){backdrop-filter:none !important; -webkit-backdrop-filter:none !important}
  .nav{background:rgba(0,0,0,.86); backdrop-filter:none; -webkit-backdrop-filter:none}
  .grain::after{display:none}
  .reveal{transform:translateY(24px); transition:opacity .7s var(--ease), transform .75s var(--ease)}
}