:root { --yellow: #ffcf00; --black: #050505; --white: #fff; --red: #e51a14; }
* { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; }
body { min-width: 320px; margin: 0; overflow-x: hidden; background: var(--white); color: var(--black); font-family: "Times New Roman", Times, serif; }
a { color: inherit; }
button, a { font: inherit; }
@media (pointer: fine) {
  html,
  body,
  a,
  button { cursor: url("./assets/suscat-cursor.png") 8 8, auto; }
}
.topbar { position: absolute; inset: 0 0 auto; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: 22px 26px; mix-blend-mode: multiply; }
.wordmark { font-size: clamp(1.1rem, 2vw, 1.65rem); font-weight: 900; text-decoration: none; }
.topbar nav { display: flex; align-items: center; gap: 18px; font-family: Arial, Helvetica, sans-serif; font-size: .72rem; font-weight: 900; }
.topbar a, .topbar button { border: 0; padding: 0; background: transparent; color: var(--black); text-decoration: none; }
.topbar [aria-disabled="true"], .topbar button:disabled { opacity: .65; }
.hero { position: relative; min-height: 100svh; overflow: hidden; background: conic-gradient(from 214deg at 54% 63%, #ff4b4b, #ff9f43, #ffe94a, #68de67, #45d9ed, #4775ff, #a550ff, #ff4fa3, #ff4b4b); isolation: isolate; }
.sun { position: absolute; inset: -40%; z-index: -2; background: repeating-conic-gradient(from 4deg at 54% 63%, rgba(255,255,255,.46) 0 7deg, rgba(255,255,255,0) 7deg 15deg); transform: rotate(-8deg); }
.hero::after { position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 54% 64%, rgba(255,255,255,.8) 0 5%, rgba(255,255,255,.18) 23%, transparent 49%); content: ""; }
.hero h1 { position: absolute; top: 11%; left: 5%; z-index: 4; margin: 0; font-size: clamp(5.6rem, 17vw, 17rem); font-style: italic; font-weight: 900; letter-spacing: -.09em; line-height: .69; text-shadow: 5px 5px 0 var(--white); transform: rotate(-4deg); }
.hero-cat { position: absolute; right: -4vw; bottom: -9vw; width: min(68vw, 880px); height: auto; filter: saturate(.82) contrast(1.08) drop-shadow(-12px 12px 0 rgba(0,0,0,.22)); transform: rotate(4deg); }
.tiny-warning { position: absolute; top: 20%; right: 4%; margin: 0; font: 900 .68rem/1 Arial, sans-serif; letter-spacing: .16em; transform: rotate(3deg); }
.court-note { position: absolute; bottom: 24px; left: 24px; z-index: 6; margin: 0; border: 2px solid var(--black); padding: 8px 10px; background: var(--white); font-family: "Comic Sans MS", "Comic Sans", cursive; font-size: .88rem; transform: rotate(-2deg); }
.ca-tape { position: relative; z-index: 10; overflow: hidden; border-block: 3px solid var(--white); background: var(--black); color: var(--white); white-space: nowrap; }
.ca-tape span { display: block; width: max-content; padding: 13px 0; font: 900 .82rem/1 Arial, sans-serif; letter-spacing: .11em; }
.lore { position: relative; min-height: 100svh; padding: clamp(70px, 10vw, 150px) 6vw; border-block: 8px solid var(--black); background: var(--yellow); }
.stamp { display: inline-block; margin: 0 0 30px; border: 4px solid var(--red); padding: 10px 14px 7px; color: var(--red); font: 900 clamp(.8rem, 2vw, 1.2rem)/1 Arial, sans-serif; letter-spacing: .08em; transform: rotate(-4deg); }
.lore h2 { margin: 0; font-size: clamp(5rem, 17vw, 15rem); font-style: italic; letter-spacing: -.09em; line-height: .68; }
.lore-copy { display: grid; max-width: 1100px; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 80px 0 45px; border: 3px solid var(--black); background: var(--white); box-shadow: 12px 12px 0 var(--black); }
.lore-copy p { margin: 0; padding: 28px; font-size: clamp(1.05rem, 1.8vw, 1.35rem); line-height: 1.25; }
.lore-copy p + p { border-left: 3px solid var(--black); }
.lore-copy b { text-decoration: underline; }
.source { font: 900 .76rem/1 Arial, sans-serif; letter-spacing: .08em; }
.final-look { position: relative; min-height: 140svh; overflow: hidden; background: var(--black); color: var(--white); }
.final-look h2 { position: relative; z-index: 2; margin: 0; padding: 35vh 5vw 0; font-size: clamp(5rem, 18vw, 17rem); font-style: italic; letter-spacing: -.09em; line-height: .68; }
.final-look img { position: absolute; right: -12vw; bottom: -12vw; width: min(68vw, 880px); height: auto; opacity: .72; transform: rotate(-8deg); }
.final-look a { position: absolute; right: 30px; bottom: 24px; z-index: 3; font: 900 .72rem/1 Arial, sans-serif; }
.awkward-footer { position: relative; display: flex; min-height: 72vh; flex-direction: column; align-items: center; justify-content: space-between; padding: 9vh 24px 20px; border-top: 6px solid var(--black); background: var(--white); color: var(--black); text-align: center; }
.awkward-footer p { margin: 0; }
.awkward-footer .dots { font-size: 4rem; }
.awkward-footer .scroll-joke { font: 700 .7rem/1 Arial, sans-serif; }
.footer-meta { display: flex; width: 100%; justify-content: space-between; gap: 20px; font: 700 .67rem/1.2 Arial, sans-serif; }
:focus-visible { outline: 4px solid var(--red); outline-offset: 4px; }
@media (max-width: 760px) {
  .topbar { align-items: flex-start; padding: 15px 14px; }
  .wordmark { font-size: 1rem; }
  .topbar nav { flex-direction: column; align-items: flex-end; gap: 7px; font-size: .58rem; }
  .hero { min-height: 690px; }
  .sun { inset: -25% -80%; background-position: center; }
  .hero h1 { top: 88px; left: 14px; font-size: clamp(5rem, 28vw, 7.2rem); line-height: .72; text-shadow: 3px 3px 0 var(--white); }
  .hero-cat { right: -18%; bottom: -1%; width: 112%; max-width: none; filter: saturate(.82) contrast(1.08) drop-shadow(-7px 7px 0 rgba(0,0,0,.22)); }
  .tiny-warning { top: 290px; right: 13px; font-size: .54rem; }
  .court-note { bottom: 14px; left: 12px; max-width: 145px; padding: 6px 7px; font-size: .7rem; }
  .ca-tape span { padding-block: 11px; font-size: .68rem; }
  .lore { min-height: auto; padding: 65px 18px 75px; border-block-width: 6px; }
  .stamp { margin-bottom: 25px; border-width: 3px; padding: 8px 10px 6px; font-size: .72rem; }
  .lore h2 { font-size: clamp(4.4rem, 24vw, 6.2rem); line-height: .72; }
  .lore-copy { grid-template-columns: 1fr; margin: 42px 0 32px; box-shadow: 7px 7px 0 var(--black); }
  .lore-copy p { padding: 20px; font-size: 1rem; }
  .lore-copy p + p { border-top: 3px solid var(--black); border-left: 0; }
  .source { font-size: .64rem; }
  .final-look { min-height: 820px; }
  .final-look h2 { padding: 155px 14px 0; font-size: clamp(4.8rem, 25vw, 6.6rem); line-height: .72; }
  .final-look img { right: -27%; bottom: -3%; width: 122%; max-width: none; }
  .final-look a { right: 14px; bottom: 14px; }
  .awkward-footer { min-height: 55vh; padding: 7vh 14px 15px; }
  .awkward-footer .dots { font-size: 3rem; }
  .footer-meta { flex-direction: column; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }