@font-face {
  font-family: "Archivo Black";
  src: url("/assets/archivo-black.ttf") format("truetype");
  font-display: swap;
}
:root {
  color-scheme: dark;
  --black: #101010;
  --white: #faf7ee;
  --acid: #d5ff00;
  --pink: #ff67bd;
  --blue: #4541ff;
  --display: "Archivo Black", Impact, "Arial Black", sans-serif;
  --body: Arial, Helvetica, sans-serif;
  --mono: "Courier New", monospace;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--black); color: var(--white); font: 16px/1.5 var(--body); }
.wrap { max-width: 1500px; margin: auto; padding: 0 clamp(16px,4.5vw,76px); }
h1,h2,h3,p { margin: 0; }
a { color: inherit; text-underline-offset: .2em; }
a:hover, summary:hover { color: var(--acid); }
:focus-visible { outline: 3px solid #00dbff; outline-offset: 4px; }
.skip { position: absolute; z-index: 5; top: -5em; padding: 10px; background: black; color: white; }
.skip:focus { top: 6px; }
header,nav,footer,footer div,.profile-links,.caption { display: flex; align-items: center; }
header,footer,.caption { justify-content: space-between; }
header { min-height: 66px; }
.brand { text-decoration: none; color: var(--acid); font: 32px/.9 var(--display); letter-spacing: -.15em; transform: skew(-12deg); }
nav { gap: clamp(16px,3vw,44px); }
nav a,footer div a,.profile-links a,.caption,.mono,.kicker,summary { font: bold 13px/1.35 var(--mono); }
nav a { padding-block: 11px; text-transform: uppercase; text-decoration: none; }
nav a[aria-current] { color: var(--acid); text-decoration: underline; }
.mast {
  background: var(--acid); color: var(--black); position: relative; isolation: isolate;
  overflow: hidden; padding: clamp(18px,2.3vw,35px) clamp(16px,3.4vw,54px);
}
.mast p { display: table; background: var(--black); color: var(--white); padding: 4px 8px; font: bold clamp(10px,1.1vw,15px)/1.4 var(--mono); }
h1,h2,h3,.wordmark { font-family: var(--display); font-weight: 400; }
.mast h1,.about h1 {
  font-size: clamp(58px,7.8vw,120px); line-height: .78; letter-spacing: -.084em;
  text-transform: uppercase; margin: .17em 0 .2em; transform: skewX(-6deg); transform-origin: bottom left;
}
.mast h1 em,.about h1 em { display: block; font-style: normal; }
.profile-links { gap: 7px; flex-wrap: wrap; }
.profile-links a { border: 1px solid var(--black); padding: 4px 8px; color: var(--black); text-decoration: none; }
.profile-links a:hover { background: var(--black); color: var(--acid); }
#clips { padding-top: 22px; }
.social-row { padding-bottom: clamp(25px,4vw,56px); --edge: var(--pink); }
.social-row + .social-row { --edge: var(--acid); }
.subhead {
  display: flex; align-items: center; gap: 15px; text-transform: uppercase;
  font-size: clamp(25px,3vw,44px); line-height: 1.1; letter-spacing: -.07em; margin: 25px 0 20px;
}
.subhead::after { content: ""; flex: 1; height: 7px; background: repeating-linear-gradient(115deg,var(--edge,var(--blue)) 0 4px,transparent 4px 10px); }
.reels,.grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(15px,2vw,32px); }
.clip { border: 2px solid var(--white); background: var(--white); color: var(--black); box-shadow: 5px 5px var(--edge); }
.clip:nth-child(1) { transform: rotate(-.8deg); }
.clip:nth-child(2) { transform: rotate(.6deg); }
.clip:nth-child(3) { transform: rotate(-.35deg); }
.clip:focus-within,.clip:has(iframe) { transform: none; }
.portrait,.media { position: relative; background: #211e24; }
.portrait { aspect-ratio: 9/16; }
.media { aspect-ratio: 16/9; }
.reel,.screen,.reel img,.screen img,iframe { display: block; width: 100%; height: 100%; border: 0; }
.reel img,.screen img { object-fit: cover; }
.caption { gap: 8px; padding: 9px 10px; text-decoration: none; }
.caption:hover { background: var(--edge); color: var(--black); }
.play { position: absolute; left: 12px; bottom: 12px; width: 44px; height: 44px; display: grid; place-items: center; background: var(--acid); border: 2px solid black; color: black; box-shadow: 3px 3px black; }
.screen:hover .play,.reel:hover .play { background: var(--pink); }
.wide { display: grid; grid-template-columns: 1.15fr 1fr; gap: 6%; align-items: center; border-top: 2px solid white; padding: 32px 0; }
.wide h2,.wide h3,.about h1 { font-size: clamp(39px,5.6vw,86px); letter-spacing: -.075em; text-transform: uppercase; line-height: .94; }
.wide h2,.wide h3 { margin: 8px 0 14px; }
.mono,.kicker { color: var(--pink); text-transform: uppercase; }
.wide p:not(.mono),.grid p { max-width: 55ch; color: #e0ded7; }
.wide a:not(.screen),.fallback { display: inline-block; color: var(--acid); margin-top: 12px; }
.wide > .fallback { grid-column: 1/-1; order: 2; }
.grid h3 { font-size: 24px; line-height: 1.1; letter-spacing: -.055em; margin: 12px 0 6px; }
details { font-size: 14px; margin-top: 12px; } summary { cursor: pointer; color: var(--pink); } details p { margin-top: 6px; }
footer { gap: 14px; flex-wrap: wrap; padding: 22px 0 32px; border-top: 5px solid var(--acid); margin-top: 45px; }
footer div { gap: 16px; flex-wrap: wrap; }
.wordmark { text-transform: uppercase; text-decoration: none; letter-spacing: -.08em; font-size: 24px; }
.about { display: grid; grid-template-columns: 1fr 1.1fr; gap: 7%; align-items: center; background: var(--blue); padding: clamp(24px,4vw,60px); }
.about img { width: 100%; height: auto; border: 3px solid var(--black); box-shadow: 7px 7px var(--acid); transform: rotate(2deg); }
.about h1 { margin: 18px 0; }
.about .mono,.about .kicker { color: var(--acid); }
.about h2 { margin: 24px 0 3px; }
@media(max-width:650px) {
  header { min-height: 54px; }
  .mast { padding: 16px 12px; }
  .mast h1 { font-size: clamp(43px,9.4vw,64px); }
  .reels,.grid,.wide,.about { grid-template-columns: 1fr; }
  .reels { gap: 21px; }
  .wide,.about { gap: 20px; }
  .grid { gap: 28px; }
  .about h1 br { display: none; }
}

.tiktok-profile { display: inline-block; color: var(--acid); margin: 0 0 18px; font-weight: bold; }
.post-likes { font-size: 13px; padding: 0 10px 8px; }
.post-likes a:hover { color: #872456; }