@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,500;6..96,700;6..96,900&family=DM+Mono:wght@400;500&display=swap');
:root { --ink:#e8e3d8; --muted:#9c9a91; --acid:#d4ff35; --red:#ff4e3e; --black:#10110f; --line:rgba(232,227,216,.22); --mono:'DM Mono', monospace; --display:'Bodoni Moda', Georgia, serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--black); font-family:var(--mono); font-size:12px; line-height:1.5; overflow-x:hidden; }
body:before { content:''; position:fixed; inset:0; pointer-events:none; opacity:.12; background:radial-gradient(ellipse at 70% 15%,#38523b 0,transparent 40%),radial-gradient(ellipse at 15% 70%,#5b2921 0,transparent 35%); z-index:-2; }
.grain { position:fixed; inset:0; z-index:5; pointer-events:none; opacity:.08; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E"); mix-blend-mode:screen; }
a { color:inherit; text-decoration:none; } .site-header,.site-footer { display:flex; align-items:center; justify-content:space-between; padding:26px 4vw; position:relative; z-index:2; } .site-header { border-bottom:1px solid var(--line); }
.wordmark { font-size:16px; font-weight:500; letter-spacing:.08em; } .wordmark span,.toolbox-mark span { color:var(--red); } nav { display:flex; gap:32px; text-transform:uppercase; letter-spacing:.12em; } nav a { color:var(--muted); transition:color .2s; } nav a:hover,.site-footer a:hover { color:var(--acid); } .status { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.11em; } .status i { display:inline-block; width:6px; height:6px; margin-right:8px; border-radius:50%; background:var(--acid); box-shadow:0 0 12px var(--acid); }
.hero { min-height:calc(100vh - 77px); display:grid; grid-template-columns:1fr minmax(400px, 49vw); gap:3vw; align-items:center; padding:7vh 7vw 9vh; position:relative; } .hero-copy { padding-bottom:8vh; } .eyebrow { color:var(--acid); font-size:10px; letter-spacing:.17em; } .eyebrow span { color:var(--red); margin-left:8px; } h1,h2 { margin:24px 0; font-family:var(--display); font-weight:500; letter-spacing:-.07em; line-height:.82; } h1 { font-size:clamp(74px, 11vw, 160px); } h1 em,h2 em { color:var(--red); font-style:normal; } .intro { max-width:340px; margin:32px 0; color:var(--muted); line-height:1.8; } .arrow-link { display:inline-flex; gap:18px; color:var(--acid); border-bottom:1px solid var(--acid); padding:12px 0; text-transform:uppercase; letter-spacing:.12em; } .arrow-link span { font-size:18px; line-height:12px; }
.hero-image-wrap { position:relative; transform:rotate(1.5deg); } .hero-image-wrap:before { content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(140deg,rgba(212,255,53,.17),transparent 40%,rgba(255,78,62,.24)); mix-blend-mode:screen; } .hero-image-wrap:after { content:''; position:absolute; inset:18px -18px -18px 18px; border:1px solid var(--red); z-index:-1; } .hero-image { display:block; width:100%; aspect-ratio:795/966; object-fit:cover; filter:contrast(1.12) saturate(1.25) sepia(.12); } .image-note { position:absolute; z-index:1; top:-27px; left:-48px; color:var(--acid); font-size:9px; line-height:1.7; letter-spacing:.12em; transform:rotate(-90deg); transform-origin:bottom left; } .image-stamp { position:absolute; right:-32px; bottom:30px; width:82px; height:82px; border:1px solid var(--acid); border-radius:50%; display:grid; place-content:center; text-align:center; color:var(--acid); font-size:19px; font-weight:500; line-height:.65; transform:rotate(9deg); background:var(--black); } .image-stamp span { color:var(--red); font-size:14px; } .hero-index { position:absolute; left:4vw; bottom:7vh; color:var(--muted); } .hero-index span { color:var(--red); margin:0 8px; }
.section { padding:15vh 8vw; border-top:1px solid var(--line); } .section-heading h2 { font-size:clamp(64px, 9vw, 126px); } .gig-list { margin-top:8vh; border-top:1px solid var(--line); } .gig-row { display:grid; grid-template-columns:150px 1fr auto 32px; align-items:center; gap:30px; min-height:130px; border-bottom:1px solid var(--line); transition:padding .25s, background .25s; } .gig-row:hover { padding:0 20px; background:rgba(212,255,53,.04); } .gig-row time { display:flex; align-items:center; gap:13px; color:var(--acid); } .gig-row time b { font-family:var(--display); font-size:46px; font-weight:500; line-height:1; } .gig-row time span { font-size:9px; line-height:1.4; } .gig-row h3 { margin:0 0 6px; font-family:var(--display); font-size:30px; font-weight:500; } .gig-row p { margin:0; color:var(--muted); } .gig-type { color:var(--red); font-size:10px; letter-spacing:.14em; } .gig-row > a { color:var(--acid); font-size:22px; }
.split-heading { display:flex; justify-content:space-between; align-items:end; gap:8vw; } .section-note { max-width:250px; color:var(--muted); line-height:1.8; margin-bottom:30px; } .video-carousel { margin-top:7vh; position:relative; border:1px solid var(--line); background:#171914; overflow:hidden; } .carousel-toolbar { display:flex; justify-content:space-between; align-items:center; padding:18px 22px; border-bottom:1px solid var(--line); } .carousel-count { margin:0; color:var(--acid); font-size:10px; letter-spacing:.12em; } .carousel-count span { color:var(--ink); } .carousel-controls { display:flex; gap:8px; } .carousel-button { width:38px; height:32px; border:1px solid var(--line); color:var(--acid); background:transparent; font:inherit; font-size:18px; cursor:pointer; transition:background .2s, color .2s; } .carousel-button:hover,.carousel-button:focus-visible { color:var(--black); background:var(--acid); outline:none; } .video-track { display:flex; gap:18px; margin:0; padding:22px 22px 28px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-color:var(--acid) rgba(232,227,216,.16); scrollbar-width:auto; list-style:none; } .video-track::-webkit-scrollbar { height:12px; } .video-track::-webkit-scrollbar-track { margin:0 22px; background:rgba(232,227,216,.1); border:1px solid rgba(232,227,216,.18); } .video-track::-webkit-scrollbar-thumb { background:var(--acid); border:3px solid #171914; border-radius:12px; } .video-track::-webkit-scrollbar-thumb:hover { background:var(--ink); } .video-slide { flex:0 0 calc((100% - 36px) / 3); scroll-snap-align:start; border:1px solid var(--line); background:#0d0e0c; } .video-slide iframe { display:block; width:100%; aspect-ratio:16/9; border:0; opacity:.9; } .carousel-dots { display:flex; justify-content:center; gap:8px; padding:0 22px 22px; } .carousel-dot { width:28px; height:3px; padding:0; border:0; background:var(--line); cursor:pointer; } .carousel-dot.is-active,.carousel-dot:hover,.carousel-dot:focus-visible { background:var(--acid); outline:none; } .video-fallback { position:absolute; top:75px; right:44px; display:flex; align-items:center; gap:15px; padding:10px 14px; background:rgba(16,17,15,.92); border:1px solid var(--acid); box-shadow:4px 4px 0 var(--red); } .play { display:grid; place-items:center; width:32px; height:32px; color:var(--black); background:var(--red); font-size:11px; } .video-fallback p { margin:0; color:var(--muted); font-size:10px; } .video-fallback strong { color:var(--ink); font-size:12px; } .video-fallback a { color:var(--acid); font-size:10px; white-space:nowrap; }
.toolbox { display:grid; grid-template-columns:180px 1fr; gap:5vw; position:relative; isolation:isolate; overflow:hidden; background:var(--red); color:var(--black); } .toolbox:before { content:'04'; position:absolute; z-index:0; top:-.18em; right:-.03em; color:rgba(16,17,15,.12); font-family:var(--display); font-size:clamp(220px, 35vw, 560px); font-weight:900; letter-spacing:-.12em; line-height:1; pointer-events:none; } .toolbox:after { content:''; position:absolute; z-index:0; inset:0; opacity:.28; pointer-events:none; background:repeating-linear-gradient(135deg, transparent 0 22px, rgba(16,17,15,.22) 23px 24px); mask-image:linear-gradient(90deg, transparent, #000 32%, #000 76%, transparent); } .toolbox > * { position:relative; z-index:1; } .toolbox .eyebrow,.toolbox .section-note { color:rgba(16,17,15,.7); } .toolbox .eyebrow span { color:var(--black); } .toolbox h2 { position:relative; } .toolbox h2:after { content:'◈'; position:absolute; top:-.25em; margin-left:.25em; color:var(--black); font-family:var(--mono); font-size:.22em; letter-spacing:0; } .toolbox h2 em { color:var(--black); } .toolbox-mark { font-size:22px; letter-spacing:.05em; } .toolbox-mark span { color:var(--ink); } .tool-grid { grid-column:2; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; } .tool-card { min-height:190px; padding:20px; position:relative; overflow:hidden; border:1px solid rgba(232,227,216,.5); display:flex; flex-direction:column; justify-content:space-between; color:var(--ink); background:rgba(16,17,15,.94); box-shadow:6px 6px 0 rgba(16,17,15,.28); transition:transform .25s, box-shadow .25s, border-color .25s, background .25s; } .tool-card:before { content:''; position:absolute; top:0; right:0; width:48px; height:48px; border-left:1px solid rgba(212,255,53,.55); border-bottom:1px solid rgba(212,255,53,.55); background:linear-gradient(135deg, transparent 48%, var(--acid) 49% 52%, transparent 53%); opacity:.65; } .tool-card:hover,.tool-card:focus-within { transform:translate(-3px,-3px); border-color:var(--acid); box-shadow:9px 9px 0 rgba(16,17,15,.35); background:#11130f; } .tool-card span { position:relative; z-index:1; color:var(--acid); font-size:10px; letter-spacing:.12em; } .tool-card h3 { margin:20px 0 4px; color:var(--ink); font-family:var(--display); font-size:25px; font-weight:500; } .tool-card p { margin:0; color:rgba(232,227,216,.72); font-size:10px; } .tool-card.locked { opacity:.68; border-style:dashed; } .tool-card.locked:after { content:'SOON'; position:absolute; right:16px; bottom:16px; color:var(--red); font-size:9px; letter-spacing:.16em; } .tool-card-link:focus-visible { outline:2px solid var(--acid); outline-offset:4px; }
.site-footer { color:var(--muted); border-top:1px solid var(--line); font-size:10px; letter-spacing:.08em; } .site-footer b { color:var(--acid); font-size:16px; margin-left:8px; } .site-footer a { color:var(--acid); }
.video-fallback { position:static; width:fit-content; margin:0 22px 22px; }
@media (max-width:700px) { .video-fallback { margin-left:14px; margin-right:14px; } }

@media (max-width:900px) {
  .site-header { padding:20px 5vw; gap:20px; }
  .hero { grid-template-columns:minmax(0, 1fr) minmax(280px, 45vw); padding-left:5vw; padding-right:5vw; }
  .hero-image-wrap:after { right:-10px; bottom:-10px; }
  .toolbox { grid-template-columns:1fr; gap:5vh; }
  .tool-grid { grid-column:auto; }
}

@media (max-width:700px) {
  body { font-size:11px; }
  .site-header { flex-wrap:wrap; padding:18px 6vw 16px; }
  .wordmark { flex:1 0 auto; }
  nav { order:3; width:100%; justify-content:space-between; gap:12px; padding-top:14px; border-top:1px solid var(--line); font-size:10px; }
  .status { font-size:9px; }

  .hero { min-height:auto; display:flex; flex-direction:column; align-items:stretch; gap:9vh; padding:10vh 10vw 14vh; }
  .hero-copy { padding:0; }
  .eyebrow { font-size:9px; line-height:1.7; }
  h1 { margin:20px 0; font-size:clamp(68px, 20vw, 104px); }
  .intro { max-width:28em; margin:26px 0; line-height:1.7; }
  .hero-image-wrap { width:84%; margin:0 0 0 auto; }
  .image-note { left:-34px; top:-18px; font-size:8px; }
  .image-stamp { right:-18px; bottom:18px; width:68px; height:68px; font-size:16px; }
  .hero-index { left:auto; right:10vw; bottom:5vh; }

  .section { padding:12vh 8vw; }
  .section-heading h2 { margin-top:18px; font-size:clamp(58px, 17vw, 90px); }
  .gig-list { margin-top:6vh; }
  .gig-row { grid-template-columns:1fr 24px; gap:18px 12px; min-height:0; padding:22px 0; }
  .gig-row:hover { padding:22px 0; }
  .gig-row time { grid-column:1; grid-row:1; }
  .gig-row time b { font-size:38px; }
  .gig-row > div { grid-column:1 / -1; grid-row:2; }
  .gig-row h3 { font-size:24px; line-height:1.05; }
  .gig-type { grid-column:1; grid-row:3; align-self:end; }
  .gig-row > a { grid-column:2; grid-row:1; align-self:center; }

  .split-heading { display:block; }
  .section-note { margin:28px 0 0; }
  .video-carousel { margin-top:5vh; }
  .carousel-toolbar { padding:14px; }
  .carousel-button { width:42px; height:38px; }
  .video-track { gap:12px; padding:14px 14px 22px; }
  .video-slide { flex-basis:100%; }
  .video-track::-webkit-scrollbar-track { margin:0 14px; }
  .carousel-dots { gap:6px; padding:0 14px 18px; }
  .carousel-dot { width:22px; }
  .video-fallback { width:auto; margin:0 14px 14px; padding:10px; gap:10px; flex-wrap:wrap; }
  .video-fallback a { width:100%; margin-left:42px; }

  .toolbox { padding:12vh 8vw; gap:6vh; }
  .toolbox:before { font-size:62vw; top:0; }
  .tool-grid { grid-template-columns:1fr; gap:12px; }
  .tool-card { min-height:170px; padding:18px; }
  .tool-card h3 { font-size:23px; }
  .site-footer { flex-wrap:wrap; gap:14px 24px; padding:22px 8vw; }
  .site-footer span:nth-child(2) { order:3; width:100%; }
}