:root{
  --bg:#111110;
  --fg:#f5f5f0;
  --accent:#e8fe5a;
  --accent-ink:#3c4400;
  --ink:#141600;
  --muted:#8f8f88;
  --line:#2a2a27;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--fg);
  font-family:Inter,'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:400;-webkit-font-smoothing:antialiased;
  line-height:1.5;overflow-x:hidden;
}
a{color:inherit;text-decoration:none;transition:color .15s}
a:hover{color:var(--accent)}
.wrap{max-width:1560px;margin:0 auto;padding:0 40px}

/* nav */
nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 40px;mix-blend-mode:difference;
}
nav .mark{display:flex;align-items:center;mix-blend-mode:normal;line-height:0}
nav .mark svg{display:block}
nav .mark .cut{transition:stroke-width .18s ease}
nav .mark:hover .cut{stroke-width:10.5}
nav .links{display:flex;gap:26px;font-size:12px;letter-spacing:.12em;font-weight:500}

/* hero */
header.hero{
  min-height:100svh;display:grid;grid-template-columns:1fr 1fr;
  align-items:center;gap:40px;padding:120px 0 70px;
}
.hero-text{display:flex;flex-direction:column;align-items:flex-start}

/* ---- the mark that builds itself out of its own cut ----
   The cut is a real trim path: pathLength is normalised to 100 so the
   visible dash grows from the midpoint outward, angle untouched.
   The two halves are already inside their clips, so sliding them
   outward reads as the cut revealing them.                        */
.markstage{display:flex;align-items:center;justify-content:center}
.bigmark{width:min(40vw,460px);height:auto;overflow:visible}
.bigmark .grow{
  stroke-dasharray:0 100;stroke-dashoffset:-50;
  animation:trim .85s cubic-bezier(.36,0,.1,1) .05s forwards;
}
@keyframes trim{
  from{stroke-dasharray:0 100;   stroke-dashoffset:-50}
  to  {stroke-dasharray:100 100; stroke-dashoffset:0}
}
.bigmark .slide-l{transform:translateX(26px);opacity:0;animation:slideL 1s cubic-bezier(.22,.85,.18,1) .28s forwards}
.bigmark .slide-r{transform:translateX(-26px);opacity:0;animation:slideR 1s cubic-bezier(.22,.85,.18,1) .28s forwards}
@keyframes slideL{from{transform:translateX(26px);opacity:0}  to{transform:translateX(0);opacity:1}}
@keyframes slideR{from{transform:translateX(-26px);opacity:0} to{transform:translateX(0);opacity:1}}
@media(prefers-reduced-motion:reduce){
  .bigmark .grow{animation:none;stroke-dasharray:none;stroke-dashoffset:0}
  .bigmark .slide-l,.bigmark .slide-r{animation:none;transform:none;opacity:1}
}
h1{
  font-weight:700;line-height:.92;letter-spacing:-.03em;
  font-size:clamp(44px,10.5vw,190px);text-transform:uppercase;
}
h1 .acc{color:var(--accent)}
.hero-meta{
  display:flex;flex-wrap:wrap;gap:28px;margin-top:34px;
  font-size:13px;letter-spacing:.06em;color:var(--muted);
}
.hero-meta .live{color:var(--accent)}
.scroll{margin-top:70px;font-size:12px;letter-spacing:.14em;color:var(--muted)}

/* sections */
section{padding:110px 0}
.sec-head{
  display:flex;align-items:baseline;gap:18px;
  border-top:1px solid var(--line);padding-top:18px;margin-bottom:44px;
}
.sec-head h2{font-size:13px;letter-spacing:.16em;font-weight:500;text-transform:uppercase}
.sec-head span{font-size:12px;color:var(--muted)}

/* grid */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tile{display:block;cursor:pointer;border:none;background:none;padding:0;text-align:left;width:100%;font:inherit;color:inherit;text-decoration:none}
.tile:hover{color:inherit}
.tile .thumb{
  position:relative;aspect-ratio:16/9;overflow:hidden;background:#1a1a18;
}
.tile .thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease,opacity .3s}
.tile:hover .thumb img{transform:scale(1.03);opacity:.82}
.tile .badge{
  position:absolute;top:12px;left:12px;z-index:2;
  background:var(--accent);color:var(--accent-ink);
  font-size:10px;font-weight:700;letter-spacing:.1em;padding:4px 8px;
}
.tile .cap{padding:14px 2px 30px}
.tile .cap h3{font-size:clamp(17px,1.7vw,26px);font-weight:500;letter-spacing:-.01em;line-height:1.2}
.tile:hover .cap h3{color:var(--accent)}
.tile .cap p{font-size:12px;color:var(--muted);margin-top:6px;letter-spacing:.04em}

/* subsections */
.subsec{margin-bottom:96px}
.subsec:last-child{margin-bottom:0}
.sub-h{font-size:clamp(26px,3.6vw,50px);font-weight:700;text-transform:uppercase;letter-spacing:-.025em;line-height:1}
.sub-d{font-size:14px;color:var(--muted);margin:12px 0 32px;max-width:54ch;line-height:1.6}

/* about */
.about{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:70px}
.about .bio p{font-size:clamp(17px,1.6vw,23px);line-height:1.5;margin-bottom:22px;max-width:34ch;letter-spacing:-.01em}
.about .bio p.small{font-size:15px;color:var(--muted);max-width:46ch;line-height:1.65;letter-spacing:0}
.cvs{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}
.cvs a{
  border:1px solid var(--line);padding:13px 20px;font-size:14px;font-weight:500;
  display:inline-flex;align-items:center;gap:12px;transition:border-color .15s,color .15s;
}
.cvs a:hover{border-color:var(--accent);color:var(--accent)}
.cvs a span{font-size:11px;letter-spacing:.1em;color:var(--muted)}
.cvs a:hover span{color:var(--accent)}
.dl dt{font-size:11px;letter-spacing:.14em;color:var(--accent);margin-bottom:10px;text-transform:uppercase}
.dl dd{font-size:14px;color:var(--muted);line-height:1.85;margin-bottom:30px}

/* contact */
.contact-links{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.contact-links a{font-size:clamp(24px,4.2vw,60px);font-weight:500;letter-spacing:-.02em}
footer{border-top:1px solid var(--line);padding:26px 0 50px;font-size:12px;color:var(--muted);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

/* project overlay */
.overlay{
  position:fixed;inset:0;z-index:100;background:var(--bg);
  overflow-y:auto;display:none;
}
.overlay.on{display:block}
.ov-close{
  position:sticky;top:0;z-index:5;background:var(--bg);
  display:flex;justify-content:space-between;align-items:center;
  padding:22px 40px;border-bottom:1px solid var(--line);
}
.ov-actions{display:flex;gap:8px}
.ov-close button{
  background:none;border:1px solid var(--line);color:var(--fg);
  font:inherit;font-size:12px;letter-spacing:.12em;padding:9px 18px;cursor:pointer;
}
.ov-close button:hover{border-color:var(--accent);color:var(--accent)}
.ov-body{padding:60px 40px 120px;max-width:1200px;margin:0 auto}
.ov-body h2{font-size:clamp(30px,5.5vw,76px);font-weight:700;text-transform:uppercase;letter-spacing:-.03em;line-height:.98}
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin:44px 0}
.shots img{width:100%;height:auto;display:block;background:#1a1a18}
.shots img:first-child{grid-column:1/-1}
.players{display:flex;flex-wrap:wrap;gap:14px;margin:44px 0}
.players .player{margin:0;flex:1 1 320px}
.player{margin:44px 0;background:#1a1a18;position:relative}
.player iframe{width:100%;height:100%;border:0;display:block;position:absolute;inset:0}
.player.empty{
  display:flex;align-items:center;justify-content:center;text-align:center;
  border:1px dashed #3a3a35;padding:50px 24px;
}
.player.empty div{max-width:44ch}
.player.empty strong{display:block;color:var(--accent);font-size:12px;letter-spacing:.14em;margin-bottom:12px}
.player.empty span{font-size:14px;color:var(--muted);line-height:1.7}
.player.empty code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;color:var(--fg)}
.ov-desc{font-size:clamp(16px,1.7vw,22px);line-height:1.5;max-width:56ch;letter-spacing:-.01em}
.ov-credits{margin-top:34px;padding-top:20px;border-top:1px solid var(--line);font-size:13px;color:var(--muted);line-height:2;letter-spacing:.03em}
.ov-note{margin-top:22px;font-size:13px;color:var(--muted);max-width:60ch;line-height:1.7}

@media(max-width:820px){
  .wrap,nav,.ov-close{padding-left:22px;padding-right:22px}
  .ov-body{padding:40px 22px 90px}
  .grid{grid-template-columns:1fr;gap:6px}
  .about{grid-template-columns:1fr;gap:44px}
  h1{font-size:clamp(36px,13vw,80px)}
  header.hero{grid-template-columns:1fr;gap:56px;padding-top:110px}
  .markstage{justify-content:flex-start}
  .bigmark{width:min(66vw,300px)}
  nav .links{gap:16px;font-size:11px}
  section{padding:76px 0}
}

/* hero call to action */
.cta{
  display:inline-flex;align-items:center;gap:14px;margin-top:64px;align-self:flex-start;
  border:1px solid var(--line);padding:16px 26px;
  font-size:13px;font-weight:500;letter-spacing:.14em;
  transition:border-color .15s,color .15s,gap .18s;
}
.cta:hover{border-color:var(--accent);color:var(--accent);gap:22px}
.cta span{font-size:15px}

/* current page in nav */
nav .links a.on{color:var(--accent)}

/* works page has no hero, so it needs room under the fixed nav */
.works-page{padding-top:150px}
@media(max-width:820px){ .works-page{padding-top:110px} }

/* ============================================================
   NAV DROPDOWN
   ============================================================ */
.drop{position:relative}
.drop>a.on{color:var(--accent)}
.drop menu{
  position:absolute;top:calc(100% + 14px);left:-16px;min-width:196px;
  background:#0b0b0a;border:1px solid var(--line);padding:6px;list-style:none;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s,transform .16s,visibility .16s;
  mix-blend-mode:normal;
}
.drop:hover menu,.drop:focus-within menu{opacity:1;visibility:visible;transform:translateY(0)}
.drop menu a{display:block;padding:11px 14px;font-size:12px;letter-spacing:.1em}
.drop menu a:hover{background:#161614;color:var(--accent)}

/* ============================================================
   WORKS SPLIT SCREEN
   One number, --x, says where the diagonal crosses the top edge.
   The bottom is always 12 points left of it, so the angle holds.
   JS writes the clip-paths, so no @property needed.
   ============================================================ */
.split{position:relative;height:100svh;min-height:560px;overflow:hidden;background:var(--bg)}
.side{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  padding:0 7vw;text-decoration:none;color:var(--fg);
  transition:background-color .4s ease,color .32s ease;
}
.side .cnt{font-size:11px;letter-spacing:.16em;color:var(--accent);margin-bottom:20px;transition:color .32s}
.side .lab{
  white-space:nowrap;font-size:clamp(26px,4.5vw,62px);font-weight:700;
  text-transform:uppercase;letter-spacing:-.03em;line-height:.96;
  transition:font-size .5s cubic-bezier(.33,0,.1,1);
}
.side .desc{font-size:14px;margin-top:16px;max-width:34ch;line-height:1.6;color:var(--muted);transition:color .32s,opacity .3s}
.side .inner{max-width:46%;transition:opacity .3s ease}
.side.right{align-items:flex-end;text-align:right}
.side.right .inner{display:flex;flex-direction:column;align-items:flex-end}
.split .cut{position:absolute;inset:0;pointer-events:none;background:var(--accent);
  filter:drop-shadow(0 0 6px rgba(232,254,90,.5));
  transition:background-color .4s ease,filter .4s ease}

.split.on-l .left,.split.on-r .right{background:var(--accent);color:var(--ink)}
.split.on-l .left .desc,.split.on-r .right .desc{color:#41500a}
.split.on-l .left .cnt,.split.on-r .right .cnt{color:var(--ink)}
.split.on-l .left .lab,.split.on-r .right .lab{font-size:clamp(28px,5.2vw,74px)}
.split.on-l .right .inner,.split.on-r .left .inner{opacity:.35}
.split.on-l .cut,.split.on-r .cut{background:var(--bg);filter:drop-shadow(0 0 6px rgba(232,254,90,0))}

/* ---------- phones: no hover, so both states are shown at once ---------- */
@media(max-width:820px){
  .split{height:auto;min-height:0;display:block}
  .side{
    position:relative;inset:auto;clip-path:none !important;
    min-height:50svh;padding:64px 22px;justify-content:flex-end;
  }
  .side .inner{max-width:100% !important;opacity:1 !important}
  .side.right{align-items:flex-start;text-align:left}
  .side.right .inner{align-items:flex-start}
  .side .lab{white-space:normal;font-size:clamp(30px,11vw,52px) !important}
  /* one side reads dark on green, the other light on black */
  .side.left{background:var(--accent);color:var(--ink)}
  .side.left .cnt{color:var(--ink)}
  .side.left .desc{color:#41500a}
  .side.right{background:var(--bg);color:var(--fg);border-top:3px solid var(--accent)}
  .split .cut{display:none}
}