:root { --black:#050505; --white:#fff; --cyan:#00f0ff; --blue:#178cff; --yellow:#fff500; --red:#ff2b18; --pink:#ff2cc3; --purple:#6d34ff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--black); background:var(--white); font-family:Arial,Helvetica,sans-serif; font-size:1rem; line-height:1.4; overflow-x:hidden; }
button,a { font:inherit; }
button { color:inherit; }
.skip-link { position:fixed; z-index:100; top:-5rem; left:1rem; padding:.75rem 1rem; color:var(--white); background:var(--black); }
.skip-link:focus { top:0; }
.breaking-bar { position:relative; z-index:5; display:flex; height:2.5rem; color:var(--white); background:var(--black); overflow:hidden; font:900 .82rem/2.5rem Arial,sans-serif; letter-spacing:.08em; white-space:nowrap; }
.breaking-bar>strong { z-index:2; padding:0 1rem; background:var(--red); transform:skew(-8deg); }
.ticker { flex:1; overflow:hidden; }
.ticker span { display:inline-block; min-width:max-content; padding-left:2rem; animation:ticker 22s linear infinite; }
@keyframes ticker { to { transform:translateX(-50%); } }
.site-header { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1rem; padding:1rem clamp(1rem,4vw,4rem); border-bottom:5px solid var(--black); background:var(--cyan); }
.logo { display:flex; align-items:center; width:fit-content; color:var(--black); font:900 clamp(1.5rem,4vw,3.3rem)/.78 Impact,"Arial Black",sans-serif; letter-spacing:-.06em; text-decoration:none; transform:skew(-4deg) rotate(-1deg); }
.logo b { margin:0 .08em; color:var(--red); font-size:.7em; text-shadow:2px 2px 0 var(--white); }
.site-header p { margin:0; font:900 .72rem/1.2 "Arial Black",sans-serif; text-align:center; }
.header-button { justify-self:end; border:3px solid var(--black); padding:.65rem .9rem; background:var(--yellow); box-shadow:5px 5px 0 var(--black); font-weight:900; cursor:pointer; transform:rotate(1deg); }
.hero { padding:clamp(3rem,7vw,6rem) max(1rem,calc(50% - 590px)); background:linear-gradient(135deg,var(--white) 0 52%,#e8e8e8 52% 100%); }
.hero-label { width:fit-content; margin:0 auto 1rem; padding:.45rem .8rem; color:var(--white); background:var(--red); font-weight:900; transform:rotate(-2deg); box-shadow:4px 4px 0 var(--black); }
h1 { margin:0 auto; font:900 clamp(4.2rem,13vw,10.5rem)/.73 Impact,"Arial Black",sans-serif; letter-spacing:-.045em; text-align:center; text-transform:uppercase; text-shadow:.035em .035em 0 var(--cyan),.07em .07em 0 var(--pink); }
h1 mark { padding:0 .06em; color:var(--black); background:var(--yellow); }
.deck { max-width:760px; margin:2rem auto 3rem; font:900 clamp(1.2rem,3vw,2rem)/1.05 "Arial Black",Arial,sans-serif; text-align:center; text-transform:uppercase; }
.rage-layout { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(260px,.55fr); gap:1.5rem; align-items:start; }
.post-card { border:4px solid var(--black); border-radius:1.25rem; padding:clamp(1rem,3vw,1.5rem); background:var(--white); box-shadow:12px 12px 0 var(--blue); }
.post-head { display:grid; grid-template-columns:auto 1fr auto; gap:.8rem; align-items:center; }
.avatar { display:grid; place-items:center; width:3.4rem; aspect-ratio:1; border-radius:50%; color:var(--white); background:var(--black); font-weight:900; }
.post-head div:nth-child(2) { display:grid; }
.post-head strong { font-size:1rem; }
.post-head span { color:#565656; font-size:.9rem; }
.dots { align-self:start; letter-spacing:.1em; }
.post-copy { margin:1.2rem 0; font-size:clamp(1.15rem,2vw,1.5rem); line-height:1.3; }
.video-tease { position:relative; display:block; width:100%; border:3px solid var(--black); border-radius:.9rem; padding:0; overflow:hidden; background:var(--black); cursor:pointer; }
.video-tease img { display:block; width:100%; height:auto; filter:contrast(1.18) saturate(1.25); }
.play { position:absolute; inset:50% auto auto 50%; display:grid; place-items:center; width:5rem; aspect-ratio:1; border:4px solid var(--black); border-radius:50%; color:var(--black); background:var(--yellow); font-size:2rem; transform:translate(-50%,-50%); box-shadow:5px 5px 0 var(--pink); }
.exclusive { position:absolute; left:0; bottom:0; padding:.4rem .65rem; color:var(--white); background:var(--red); font-weight:900; letter-spacing:.05em; }
.engagement { display:flex; justify-content:space-between; padding:1rem .4rem 0; color:#4f4f4f; font-size:.9rem; }
.sidebar-chaos { display:grid; gap:1.5rem; }
.community-note { border:2px solid #a9a9a9; border-left:5px solid var(--blue); border-radius:.7rem; padding:1rem; background:#f1f3f5; font-size:.9rem; }
.community-note p { margin:.4rem 0; }
.community-note a { color:#135fbd; }
.screaming-sticker { display:flex; flex-direction:column; padding:1rem; border:4px solid var(--black); color:var(--black); background:var(--pink); box-shadow:8px 8px 0 var(--yellow); font:900 clamp(1.8rem,4vw,3.6rem)/.76 Impact,"Arial Black",sans-serif; text-align:center; transform:rotate(3deg); }
.screaming-sticker b { color:var(--yellow); -webkit-text-stroke:2px var(--black); font-size:1.25em; }
.receipt { border:4px solid var(--black); padding:1rem; color:var(--white); background:var(--purple); box-shadow:7px 7px 0 var(--black); font-weight:900; cursor:pointer; transform:rotate(-1deg); }
.services { padding:6rem max(1rem,calc(50% - 590px)); border-top:5px solid var(--black); background:var(--yellow); }
.section-tag { width:fit-content; padding:.35rem .6rem; color:var(--white); background:var(--black); font-weight:900; transform:rotate(-1deg); }
h2 { margin:1.2rem 0 2.5rem; font:900 clamp(3rem,8vw,7rem)/.82 Impact,"Arial Black",sans-serif; letter-spacing:-.03em; }
.service-grid { display:grid; grid-template-columns:repeat(4,1fr); border:4px solid var(--black); box-shadow:12px 12px 0 var(--red); }
.service-grid article { display:flex; flex-direction:column; min-height:320px; padding:1.25rem; background:var(--white); }
.service-grid article+article { border-left:3px solid var(--black); }
.service-grid article:nth-child(even) { background:var(--cyan); }
.service-grid span { width:fit-content; padding:.15rem .45rem; color:var(--white); background:var(--red); font-weight:900; }
.service-grid h3 { margin:2.5rem 0 .75rem; font:900 1.8rem/.9 "Arial Black",Arial,sans-serif; text-transform:uppercase; }
.service-grid p { margin:0; }
.service-grid b { margin-top:auto; padding-top:1rem; font-size:.75rem; }
.alert-section { overflow:hidden; border-block:5px solid var(--black); background:var(--red); }
.warning-tape { width:120%; margin-left:-10%; padding:.55rem; color:var(--black); background:var(--yellow); font-weight:900; text-align:center; white-space:nowrap; transform:rotate(-2deg); }
.warning-bottom { transform:rotate(2deg); }
.alert-content { padding:5rem 1rem; color:var(--white); text-align:center; }
.alert-content>p { margin:0; font-weight:900; letter-spacing:.12em; }
.alert-content h2 { max-width:1000px; margin-inline:auto; text-shadow:6px 6px 0 var(--black); }
.mega-button { border:5px solid var(--black); padding:1rem 1.4rem; background:var(--cyan); box-shadow:8px 8px 0 var(--black); font:900 1.1rem/1 "Arial Black",sans-serif; cursor:pointer; transform:rotate(-2deg); }
.fake-comments { padding:6rem max(1rem,calc(50% - 590px)); background:var(--cyan); }
.comments { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
blockquote { margin:0; border:4px solid var(--black); border-radius:1rem; padding:1.25rem; background:var(--white); box-shadow:6px 6px 0 var(--black); }
blockquote p { margin:0 0 1.2rem; font:700 1.25rem/1.25 Arial,sans-serif; }
blockquote footer { color:#555; font-size:.85rem; }
body>footer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; padding:2rem clamp(1rem,4vw,4rem); color:var(--white); background:var(--black); font-size:.75rem; font-weight:900; }
dialog { width:min(760px,calc(100% - 1.5rem)); max-height:calc(100dvh - 1.5rem); border:5px solid var(--black); padding:0; color:var(--black); background:var(--white); box-shadow:14px 14px 0 var(--pink); }
dialog::backdrop { background:rgba(0,240,255,.75); backdrop-filter:blur(4px); }
.modal-top { position:sticky; z-index:2; top:0; display:flex; justify-content:space-between; align-items:center; padding:.55rem .7rem .55rem 1rem; color:var(--white); background:var(--red); font-weight:900; }
.dialog-close { display:grid; place-items:center; width:2.5rem; aspect-ratio:1; border:3px solid var(--black); background:var(--yellow); font:900 1.7rem/1 Arial,sans-serif; cursor:pointer; }
.modal-body { padding:clamp(1rem,4vw,2.5rem); text-align:center; }
.live { width:fit-content; margin:0 auto; padding:.2rem .5rem; color:var(--white); background:var(--red); font-weight:900; }
.modal-body h2 { margin-block:1rem; }
.modal-deck { margin:-1rem auto 1.5rem; font-weight:700; }
video { display:block; width:100%; border:4px solid var(--black); background:var(--black); }
.reveal { padding-top:1.5rem; }
.reveal>p { margin:0; font:900 clamp(3.2rem,10vw,6.5rem)/.78 Impact,"Arial Black",sans-serif; letter-spacing:-.04em; }
.reveal>p i { display:inline-block; padding:0 .08em; color:var(--red); background:var(--yellow); font-style:normal; transform:rotate(-4deg); }
.reveal>span { font:900 clamp(1.2rem,4vw,2rem)/1 "Arial Black",sans-serif; }
.nikki-reveal { margin-top:2rem; border:4px solid var(--black); padding:1.5rem 1rem; background:var(--cyan); box-shadow:8px 8px 0 var(--pink); transform:rotate(-1deg); }
.nikki-reveal small { display:inline-block; padding:.2rem .4rem; color:var(--white); background:var(--red); font-weight:900; }
.nikki-reveal p { margin:1rem 0 .4rem; font:900 clamp(1.8rem,6vw,3.6rem)/.86 Impact,"Arial Black",sans-serif; }
.nikki-reveal strong { display:block; font-size:clamp(1.1rem,3vw,1.6rem); }
.nikki-reveal em { display:block; margin-top:1rem; font-family:"Comic Sans MS",cursive; font-size:1.3rem; }
.dialog-open { overflow:hidden; }
button:hover { filter:brightness(.94); transform:translateY(-2px) rotate(-1deg); }
:focus-visible { outline:4px solid var(--purple); outline-offset:4px; }
@media (max-width:850px) {
  .site-header { grid-template-columns:1fr auto; }
  .site-header p { display:none; }
  .rage-layout { grid-template-columns:1fr; }
  .sidebar-chaos { grid-template-columns:1fr 1fr; align-items:stretch; }
  .receipt { grid-column:1/-1; }
  .service-grid { grid-template-columns:1fr 1fr; }
  .service-grid article:nth-child(3) { border-left:0; border-top:3px solid var(--black); }
  .service-grid article:nth-child(4) { border-top:3px solid var(--black); }
  .comments { grid-template-columns:1fr; }
}
@media (max-width:540px) {
  .site-header { padding:.85rem 1rem; }
  .header-button { padding:.45rem .55rem; font-size:.68rem; box-shadow:3px 3px 0 var(--black); }
  h1 { font-size:clamp(3.6rem,20vw,5.7rem); }
  .hero { padding-top:3rem; }
  .hero-label { font-size:.75rem; }
  .post-card { box-shadow:7px 7px 0 var(--blue); }
  .sidebar-chaos { grid-template-columns:1fr; }
  .receipt { grid-column:auto; }
  .service-grid { grid-template-columns:1fr; box-shadow:7px 7px 0 var(--red); }
  .service-grid article+article { border-left:0; border-top:3px solid var(--black); }
  .service-grid article { min-height:270px; }
  .alert-content { padding-block:4rem; }
  body>footer { flex-direction:column; }
  .modal-top { font-size:.68rem; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .ticker span { animation:none; }
  *,*::before,*::after { transition:none!important; }
}
