/* Shared styles for every page on JudeBarclay.com */
: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%}
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 */
.yt{position:relative; display:block; border-radius:14px; overflow:hidden; background:#111; aspect-ratio:16/9; cursor:pointer; border:1px solid rgba(255,255,255,.06); padding:0; width:100%; color:inherit; text-align:left; font:inherit}
.yt.v{aspect-ratio:9/16}
.yt img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease)}
.yt:hover img{transform:scale(1.04)}
.yt::after{content:""; position:absolute; inset:0; background:linear-gradient(transparent 45%, rgba(0,0,0,.82))}
.yt .pl{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:1; width:54px; height:54px; border-radius:50%; background:rgba(255,255,255,.2); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); display:grid; place-items:center; transition:background .3s}
.yt:hover .pl{background:rgba(255,255,255,.95)}
.yt .pl::before{content:""; margin-left:4px; border-left:15px solid #fff; border-top:9px solid transparent; border-bottom:9px solid transparent; transition:border-color .3s}
.yt:hover .pl::before{border-left-color:#000}
.yt .cap{position:absolute; left:14px; right:14px; bottom:12px; z-index:1; font-size:15px; font-weight:500; line-height:1.25}
.yt .cap small{display:block; font:500 11px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--soft); margin-bottom:6px}
.yt .tag{position:absolute; top:12px; left:12px; z-index:1; font:600 10px/1 var(--mono); letter-spacing:.12em; padding:5px 8px; border-radius:6px; background:rgba(0,0,0,.55); backdrop-filter:blur(8px); color:#fff}
.yt .tag.live{background:var(--red)}
.yt .len{position:absolute; top:12px; right:12px; z-index:1; font:500 11px/1 var(--mono); padding:5px 7px; border-radius:6px; background:rgba(0,0,0,.6); color:#fff}
/* No thumbnail yet: a designed title card instead of an empty box */
.yt.nothumb{background:radial-gradient(120% 90% at 0% 0%, #2b2b31 0%, #0c0c0e 60%)}
.yt.nothumb::before{content:attr(data-t); position:absolute; inset:0; display:flex; align-items:center; padding:22px 22px 60px; font-size:clamp(18px,2vw,30px); font-weight:800; letter-spacing:-.045em; line-height:.95; color:rgba(255,255,255,.2); text-transform:uppercase; overflow:hidden}
.yt iframe{position:absolute; inset:0; width:100%; height:100%; border:0; z-index:3}

/* footer */
footer{border-top:1px solid var(--line); padding-block:64px 90px}
.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(40px); transition:opacity 1s var(--ease), transform 1.1s var(--ease)}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1; transform:none; transition:none} }