/* ============================================================
   GENRE: SADBOY skin — MGK x Trippie Redd "genre : sadboy" era
   (March 2024). Lo-fi direct-flash intimacy: warm off-white wall,
   salmon pink, soft rounded lowercase UI, the spaced colon " : "
   as a graphic device. Gentle, diffused, melancholy — never loud.
   Loaded after styles.css; everything scoped under body.sadboy.
   ADMIN-ONLY until Jordan releases it.
   ============================================================ */

/* ---- base: warm off-white flash-photo wall, film grain + vignette ---- */
body.sadboy {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background:
    radial-gradient(120% 95% at 50% 42%, transparent 58%, rgba(70, 48, 44, .13) 100%) fixed,
    repeating-linear-gradient(0deg, rgba(20, 20, 20, .018) 0 1px, transparent 1px 3px) fixed,
    repeating-linear-gradient(90deg, rgba(20, 20, 20, .012) 0 1px, transparent 1px 4px) fixed,
    #F4F1EC;
  background-image:
    radial-gradient(120% 95% at 50% 42%, transparent 58%, rgba(70, 48, 44, .13) 100%),
    repeating-linear-gradient(0deg, rgba(20, 20, 20, .018) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(20, 20, 20, .012) 0 1px, transparent 1px 4px);
  background-color: #F4F1EC;
  color: #141414;
  --accent: #E8898B;        /* salmon — the "genre :" title pink */
  --accent-deep: #C96B6E;   /* deeper salmon */
  --accent-soft: #F5C6C8;   /* blush salmon wash */
  --peach: #F0A35E;         /* trippie peach pants */
  --leaf: #2E6B4F;          /* green drop-shadow accent */
  --ink: #141414;           /* near-black clothing */
  --card: #FFFEFA;          /* soft white card */
  --card2: #FBF7F0;         /* warm paper */
  --line: #E3D8CC;          /* soft warm rule */
  --text: #141414;          /* ink on card */
  --muted: #8A8078;         /* warm gray */
  --ink-muted: #6F6860;     /* muted ink on card */
  --radius: 16px;
  --shadow: 0 10px 30px rgba(120, 70, 66, .14);
  --font-display: 'Oswald', sans-serif;
}
body.sadboy input, body.sadboy select,
body.sadboy textarea, body.sadboy button {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
body.sadboy .muted { color: #8A8078; }
body.sadboy input::placeholder, body.sadboy textarea::placeholder { text-transform: lowercase; }

/* ---- soft salmon scrollbars ---- */
body.sadboy::-webkit-scrollbar { width: 12px; height: 12px; }
body.sadboy::-webkit-scrollbar-track { background: #EDE7DC; }
body.sadboy::-webkit-scrollbar-thumb { background: #E8898B; border: 3px solid #EDE7DC; border-radius: 7px; }

/* ============================================================
   BUTTONS — rounded-full pills, lowercase; primary is near-black
   with salmon text, secondary is salmon fill with dark text
   ============================================================ */
body.sadboy .btn {
  background: #141414;
  color: #F4B4B6;
  border: 1px solid #141414;
  border-radius: 999px;
  box-shadow: 0 3px 10px rgba(20, 20, 20, .22);
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: lowercase;
  padding: 11px 22px;
  min-height: 42px;
}
body.sadboy .btn:hover { background: #2A2A2A; box-shadow: 0 4px 14px rgba(20, 20, 20, .28); }
body.sadboy .btn:active { background: #000; transform: translateY(1px); box-shadow: 0 1px 5px rgba(20,20,20,.3); }
body.sadboy .btn.primary { background: #141414; color: #F4B4B6; }
body.sadboy .btn.secondary { background: #E8898B; border-color: #C96B6E; color: #141414; box-shadow: 0 3px 10px rgba(232, 137, 139, .4); }
body.sadboy .btn.secondary:hover { background: #F0A0A2; }
body.sadboy .btn.ghost { background: transparent; color: #141414; border: 1px solid #E8898B; box-shadow: none; }
body.sadboy .btn.ghost:hover { background: rgba(232, 137, 139, .14); }
body.sadboy .btn.danger { background: #B4433F; border-color: #8E3230; color: #FFF6F4; }
body.sadboy .btn:disabled { background: #D8D0C4; color: #9A9187; border-color: #D8D0C4; box-shadow: none; opacity: 1; }
body.sadboy .btn.tiny { font-size: 11px; padding: 6px 14px; min-height: 0; }

/* icon-ish buttons */
body.sadboy .icon-btn, body.sadboy .sheet-x, body.sadboy .wl-popup-x, body.sadboy .modal-x {
  background: #FFFEFA;
  color: #C96B6E;
  border: 1px solid #E3D8CC;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(120, 70, 66, .12);
  min-width: 30px;
  min-height: 28px;
}
body.sadboy .icon-btn:hover, body.sadboy .sheet-x:hover { border-color: #E8898B; color: #141414; }

/* ============================================================
   POPUPS — soft white polaroids, salmon border, green title accent
   ============================================================ */
body.sadboy .modal { backdrop-filter: none; background: rgba(60, 42, 40, .45); }
body.sadboy .modal-card,
body.sadboy .wl-popup-card {
  position: relative;
  background: #FFFEFA;
  color: #141414;
  border: 1px solid #E3D8CC;
  outline: 5px solid #fff;
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(60, 42, 40, .35);
  text-align: left;
  animation: none;
}
body.sadboy .modal-card h2, body.sadboy .modal-card h3,
body.sadboy .wl-popup-card h2, body.sadboy .wl-popup-card h3 {
  font-family: 'Oswald', sans-serif;
  color: #141414;
  letter-spacing: .04em;
  text-transform: lowercase;
  border-bottom: 3px solid #2E6B4F;
  padding-bottom: 6px;
}
body.sadboy .modal-card .muted, body.sadboy .wl-popup-card .muted { color: #6F6860; }

/* ============================================================
   FORM FIELDS — warm inset on soft white
   ============================================================ */
body.sadboy input[type="text"], body.sadboy input[type="search"],
body.sadboy input[type="email"], body.sadboy input[type="password"],
body.sadboy input[type="number"], body.sadboy input[type="date"],
body.sadboy select, body.sadboy textarea {
  background: #FBF7F0;
  color: #141414;
  border: 1px solid #E3D8CC;
  border-radius: 12px;
  box-shadow: inset 0 2px 5px rgba(120, 90, 80, .1);
}
body.sadboy input::placeholder, body.sadboy textarea::placeholder { color: #A89E92; }

/* ============================================================
   NAV TABS — warm gray, active tab is salmon with dark text
   ============================================================ */
body.sadboy .tab {
  color: #8A8078;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: lowercase;
  border-radius: 999px;
}
body.sadboy .tab:hover { color: #C96B6E; }
body.sadboy .tab.active {
  background: #E8898B;
  color: #141414;
  border: 1px solid #C96B6E;
  border-radius: 999px;
  box-shadow: 0 3px 10px rgba(232, 137, 139, .4);
}

/* ============================================================
   CARDS & PANELS — soft white, generous radius, green underline titles
   ============================================================ */
body.sadboy .card, body.sadboy .panel, body.sadboy .sheet,
body.sadboy .show-card, body.sadboy .thread-card {
  background: #FFFEFA;
  color: #141414;
  border: 1px solid #E3D8CC;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(120, 70, 66, .12);
}
body.sadboy .card .muted, body.sadboy .panel .muted,
body.sadboy .show-card .muted { color: #6F6860; }
body.sadboy .card h2, body.sadboy .panel h2, body.sadboy .sheet h2,
body.sadboy .show-card h2, body.sadboy .thread-card h2 {
  font-family: 'Oswald', sans-serif;
  text-transform: lowercase;
  letter-spacing: .04em;
  border-bottom: 3px solid #2E6B4F;
  padding-bottom: 6px;
}

/* ============================================================
   HEADER — off-white bar, lowercase wordmark echoing the cover:
   dark ink with salmon + green drop-shadow treatment
   ============================================================ */
body.sadboy .brand-name, body.sadboy .site-title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  color: #141414;
  text-shadow: 2px 2px 0 #E8898B, 4px 4px 0 rgba(46, 107, 79, .4);
  letter-spacing: .05em;
  text-transform: lowercase;
}
body.sadboy header, body.sadboy .topbar {
  background: #F4F1EC;
  border-bottom: 2px solid #E8898B;
  box-shadow: 0 2px 10px rgba(120, 70, 66, .08);
}

/* header controls — keep the uniform 40px boxes, soft-pilled in theme */
body.sadboy .topbar-actions { gap: 8px; }
body.sadboy .topbar-actions .icon-btn, body.sadboy .topbar-actions .notif-bell {
  min-width: 40px; min-height: 40px;
  border-radius: 999px;
  background: #FFFEFA;
  border: 1px solid #E3D8CC;
  color: #C96B6E;
  box-shadow: 0 2px 6px rgba(120, 70, 66, .12);
}
body.sadboy .topbar-actions .icon-btn:hover, body.sadboy .topbar-actions .notif-bell:hover {
  border-color: #E8898B; color: #141414;
}
body.sadboy .topbar-actions .user-chip {
  min-height: 40px;
  border-radius: 999px;
  background: #141414;
  color: #F4B4B6;
  border: 1px solid #141414;
  font-family: 'Oswald', sans-serif;
  text-transform: lowercase;
  box-shadow: 0 3px 10px rgba(20, 20, 20, .22);
}

/* ============ GENRE: SADBOY HOMEPAGE ============ */
body.sadboy .home-wrap { max-width: 860px; margin: 0 auto; padding: 18px 14px 40px; display: flex; flex-direction: column; gap: 18px; }

/* polaroid window chrome: white frame, slight tilt, salmon colon bullet */
body.sadboy .mac-window {
  background: #FFFEFA;
  border: 1px solid #E3D8CC;
  outline: 8px solid #fff;
  border-radius: 10px;
  box-shadow: 0 14px 36px rgba(60, 42, 40, .2);
  overflow: hidden;
  transform: rotate(-.4deg);
}
body.sadboy .mac-titlebar {
  display: flex; align-items: center; gap: 8px;
  background: #FBF7F0;
  border-bottom: 1px solid #E3D8CC;
  padding: 7px 14px;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: #141414;
  letter-spacing: .06em;
  text-transform: lowercase;
}
body.sadboy .mac-titlebar::before { content: ":"; color: #E8898B; font-weight: 700; }
body.sadboy .mac-titlebar::after { content: ":"; color: #E8898B; font-weight: 700; }
body.sadboy .mac-lights { display: none; }
body.sadboy .mac-filename { flex: 1; text-align: left; }

/* flash-photo frame treatment for featured images */
body.sadboy .flash-photo, body.sadboy .home-hero-img {
  background: #fff;
  padding: 10px 10px 28px;
  border: 1px solid #E3D8CC;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(60, 42, 40, .18);
  transform: rotate(1.2deg);
}

/* Masthead — blush gradient dusk, lowercase wordmark */
body.sadboy .home-masthead-body {
  padding: 30px 18px 34px; text-align: center;
  background:
    radial-gradient(600px 300px at 50% 110%, rgba(240, 163, 94, .25) 0%, transparent 60%),
    linear-gradient(#FDEEF0 0%, #F9DFDF 55%, #F4D3D4 100%);
}
body.sadboy .home-kicker {
  display: inline-block; margin: 0 0 14px; padding: 6px 18px;
  background: #141414; color: #F4B4B6;
  font-family: 'Oswald', sans-serif; font-weight: 600; letter-spacing: .2em; font-size: 12px;
  transform: rotate(-2deg); border-radius: 999px;
  box-shadow: 3px 3px 0 rgba(232, 137, 139, .55);
  text-transform: lowercase;
}
body.sadboy .home-logo {
  margin: 0; font-family: 'Oswald', sans-serif;
  font-size: clamp(34px, 8vw, 68px); font-weight: 700;
  letter-spacing: .03em; color: #141414;
  text-shadow: 3px 3px 0 #E8898B, 6px 6px 0 rgba(46, 107, 79, .4);
  line-height: 1.05;
  text-transform: lowercase;
}
body.sadboy .home-logo span { display: block; font-size: .5em; letter-spacing: .3em; color: #C96B6E; }
body.sadboy .home-tagline { margin: 16px 0 0; color: #6F6860; font-size: 15px; font-style: italic; }

/* spaced-colon motif as a section divider */
body.sadboy .colon-divider {
  text-align: center;
  font-family: 'Permanent Marker', cursive;
  font-size: 22px;
  color: #E8898B;
  letter-spacing: .4em;
  margin: 4px 0;
}
body.sadboy .colon-divider::before { content: ": : :"; }

/* home tiles — soft white polaroids */
body.sadboy .tile {
  background: #FFFEFA; color: #141414;
  border: 1px solid #E3D8CC; border-radius: 16px;
  box-shadow: 0 10px 30px rgba(120, 70, 66, .12);
}
body.sadboy .tile:hover { border-color: #E8898B; transform: translateY(-2px); }
body.sadboy .tile .tile-label { color: #141414; font-family: 'Oswald', sans-serif; font-weight: 600; letter-spacing: .05em; text-transform: lowercase; }
body.sadboy .tile .tile-sub { color: #6F6860; }

/* readme window body */
body.sadboy .home-readme-body { padding: 16px 18px 18px; font-size: 14px; color: #141414; }
body.sadboy .home-readme-body p { margin: 0 0 10px; }
body.sadboy .home-readme-body p:last-child { margin-bottom: 0; }

/* ticker — salmon marquee */
body.sadboy .home-ticker {
  background: #141414; border: 1px solid #141414; border-radius: 999px;
  color: #F4B4B6; overflow: hidden; white-space: nowrap; padding: 8px 0;
  font-family: 'Oswald', sans-serif; font-weight: 600; letter-spacing: .08em; font-size: 13px;
  text-transform: lowercase;
}

/* ============================================================
   CHAT — white bubbles; own messages are salmon
   ============================================================ */
body.sadboy .chat-bubble, body.sadboy .msg {
  background: #FFFEFA; color: #141414;
  border: 1px solid #E3D8CC; border-radius: 18px;
}
body.sadboy .chat-bubble.own, body.sadboy .msg.own {
  background: #E8898B; color: #141414; border-color: #C96B6E;
}
body.sadboy .chat-launcher {
  background: #141414; color: #F4B4B6;
  border: 1px solid #141414; border-radius: 999px;
  box-shadow: 0 4px 14px rgba(20, 20, 20, .3);
}

/* ============================================================
   NOTIFICATIONS — soft ledger, salmon selection
   ============================================================ */
body.sadboy .notif-list, body.sadboy .notif-item {
  background: #FFFEFA; color: #141414;
  border-color: #E3D8CC;
}
body.sadboy .notif-item.unread { border-left: 4px solid #E8898B; }
body.sadboy .notif-item:hover { background: #FBF7F0; }

/* ============================================================
   FOOTER — handwritten green stamp on off-white
   ============================================================ */
body.sadboy .site-footer, body.sadboy footer {
  border-top: 2px solid #E8898B;
  background: #F4F1EC;
  color: #8A8078;
}
body.sadboy .est-stamp, body.sadboy .footer-est {
  font-family: 'Permanent Marker', cursive;
  color: #2E6B4F;
  border: 2px solid #2E6B4F;
  border-radius: 12px;
  letter-spacing: .12em;
  transform: rotate(-3deg);
  text-transform: lowercase;
}
body.sadboy .foot-donate a, body.sadboy .donate-link {
  color: #C96B6E;
}

/* ============================================================
   DE-PINK — hard-coded pink glows in the base stylesheet
   become sadboy salmon. (var(--accent) already flips; these are
   the literal pink values the variable swap can't reach.)
   ============================================================ */
body.sadboy .attend-btn.on { box-shadow: 0 4px 14px rgba(232,137,139,.4); }
body.sadboy .alert-btn.on { background: rgba(232,137,139,.16); }
body.sadboy .chip.active { box-shadow: 0 4px 16px rgba(232,137,139,.45); }
body.sadboy .stat-card.hero { background: linear-gradient(135deg, rgba(232,137,139,.24), #FFFEFA 65%); }
body.sadboy .badge-pick.sel { box-shadow: 0 0 0 1px var(--accent), 0 0 14px rgba(232,137,139,.35); }
body.sadboy .dm-row.unread { box-shadow: 0 0 12px rgba(232,137,139,.24); }
body.sadboy .filters input[type="search"]:focus,
body.sadboy .search-wrap input:focus,
body.sadboy .auth-card input:focus,
body.sadboy .form-grid input:focus,
body.sadboy .form-grid textarea:focus { box-shadow: 0 0 0 3px rgba(232,137,139,.24); }
body.sadboy .home-logo { text-shadow: 3px 3px 0 #E8898B, 6px 6px 0 rgba(46, 107, 79, .4); }

/* ============================================================
   My Shows tiles + hero + install banner — soft white cards,
   salmon icon chips, green underline accents, matching the
   genre: sadboy theme.
   ============================================================ */
body.sadboy .my-subnav-card {
  background: #FFFEFA;
  color: #141414;
  border: 1px solid #E3D8CC;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(120, 70, 66, .12);
}
body.sadboy .my-subnav-card::before {
  background: radial-gradient(120% 90% at 50% 0%, rgba(232, 137, 139, .16), transparent 70%);
}
body.sadboy .my-subnav-card[data-goto="songs"] { --tile-glow: rgba(232, 137, 139, .2); }
body.sadboy .my-subnav-card[data-goto="states"] { --tile-glow: rgba(232, 137, 139, .2); }
body.sadboy .my-subnav-card:hover { border-color: #E8898B; }
body.sadboy .my-subnav-emoji {
  background: linear-gradient(140deg, #F0A0A2, #E8898B);
  border: 1px solid #C96B6E;
  box-shadow: 0 4px 10px rgba(232, 137, 139, .4), inset 0 1px 0 rgba(255, 255, 255, .4);
  border-radius: 999px;
}
body.sadboy .my-subnav-txt b { color: #141414; font-family: 'Oswald', sans-serif; text-transform: lowercase; letter-spacing: .05em; }
body.sadboy .my-subnav-txt small { color: #6F6860; }
body.sadboy .songpct {
  background: linear-gradient(160deg, rgba(232, 137, 139, .14), rgba(255, 254, 250, .02)), #FFFEFA;
  color: #141414;
  border: 1px solid #E3D8CC;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(120, 70, 66, .12);
}
body.sadboy .songpct-num { color: #C96B6E; font-family: 'Oswald', sans-serif; }
body.sadboy .songpct-txt .muted { color: #6F6860; }
body.sadboy .songpct-bar { background: rgba(232, 137, 139, .18); }
body.sadboy .install-banner {
  background: linear-gradient(135deg, rgba(232, 137, 139, .16), rgba(240, 163, 94, .12));
  border: 1px solid #E8898B;
  border-radius: 16px;
  color: #141414;
}

/* ============================================================
   ERA-AUTHENTICITY SWEEP v133 (Sep 17 2026) — genre: sadboy
   Black-and-white documentary: lowercase typewriter keys,
   film-strip cards with sprocket holes, text-message tabs,
   clapperboard popups, REC viewfinder masthead, duo split.
   ============================================================ */
/* documentary viewfinder masthead with REC dot */
body.sadboy .home-masthead-body { position: relative; }
body.sadboy .home-masthead-body::before {
  content: "● REC";
  position: absolute; left: 14px; top: 10px;
  font-family: 'Oswald', sans-serif; font-size: 12px; letter-spacing: .2em;
  color: #ff6b6b;
  pointer-events: none;
}
body.sadboy .home-masthead-body::after {
  content: "";
  position: absolute; inset: 8px;
  border: 2px solid rgba(255,255,255,.25);
  clip-path: polygon(0 0, 22px 0, 22px 6px, 6px 6px, 6px 22px, 0 22px,
                     0 0, 100% 0, 100% 22px, calc(100% - 6px) 22px, calc(100% - 6px) 6px, calc(100% - 22px) 6px, calc(100% - 22px) 0,
                     100% 0, 100% 100%, calc(100% - 22px) 100%, calc(100% - 22px) calc(100% - 6px), calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) calc(100% - 22px), 100% calc(100% - 22px),
                     100% 100%, 0 100%, 0 calc(100% - 22px), 6px calc(100% - 22px), 6px calc(100% - 6px), 22px calc(100% - 6px), 22px 100%, 0 100%);
  pointer-events: none;
}
/* duo split backdrop */
body.sadboy {
  background-image:
    linear-gradient(105deg, rgba(0,0,0,.55) 0 50%, rgba(255,255,255,.06) 50% 100%),
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.12), transparent 60%),
    radial-gradient(2px 2px at 70% 60%, rgba(255,255,255,.1), transparent 60%);
}
/* lowercase typewriter-key buttons */
body.sadboy .btn {
  text-transform: none;
  font-family: 'Oswald', sans-serif;
  letter-spacing: .04em;
  background: linear-gradient(#2b2b2b, #161616);
  color: #f0ebe2;
  border: 1px solid #4a4a4a;
  border-bottom-width: 4px;
  border-radius: 6px;
  box-shadow: 0 2px 0 #000;
}
body.sadboy .btn.primary {
  background: linear-gradient(#f0a58a, #e08a6d);
  border-color: #7d4a38;
  color: #1c1210;
}
body.sadboy .btn:active { border-bottom-width: 1px; transform: translateY(3px); }
/* text-message nav tabs */
body.sadboy .tab {
  text-transform: none;
  border-radius: 18px;
  background: #232323;
  border: 1px solid #3d3d3d;
  color: #f0ebe2;
  padding: 8px 16px;
  font-size: 13px;
}
body.sadboy .tab.active {
  background: #f0a58a;
  border-color: #f0a58a;
  color: #1c1210;
  border-bottom-right-radius: 4px;
}
/* film-strip cards with sprocket holes */
body.sadboy .show-card, body.sadboy .thread-card {
  position: relative;
  background: #101010;
  color: #e8e4da;
  border: none;
  border-radius: 2px;
  padding-top: 26px;
  padding-bottom: 26px;
  filter: saturate(.6);
  box-shadow: 0 10px 30px rgba(0,0,0,.6);
}
body.sadboy .show-card::before, body.sadboy .thread-card::before,
body.sadboy .show-card::after, body.sadboy .thread-card::after {
  content: "";
  position: absolute; left: 0; right: 0; height: 16px;
  background: repeating-linear-gradient(90deg, #e8e4da 0 10px, transparent 10px 22px);
  background-size: 100% 8px;
  background-repeat: repeat-x;
  background-position: center;
  opacity: .85;
}
body.sadboy .show-card::before, body.sadboy .thread-card::before { top: 5px; }
body.sadboy .show-card::after, body.sadboy .thread-card::after { bottom: 5px; }
/* clapperboard popups */
body.sadboy .wl-popup-card, body.sadboy .modal-card {
  background: #141414;
  color: #e8e4da;
  border: 2px solid #e8e4da;
  border-top: 26px solid transparent;
  border-image: repeating-linear-gradient(-45deg, #e8e4da 0 18px, #141414 18px 36px) 26;
  border-radius: 4px;
  filter: saturate(.65);
  box-shadow: 0 18px 50px rgba(0,0,0,.7);
}
body.sadboy .wl-popup-card h2, body.sadboy .wl-popup-card h3 {
  text-transform: none;
  font-family: 'Oswald', sans-serif;
  letter-spacing: .02em;
}
/* typewriter form fields */
body.sadboy input, body.sadboy select, body.sadboy textarea {
  background: #0d0d0d;
  border: 1px solid #4a4a4a;
  border-left: 4px solid #f0a58a;
  color: #e8e4da;
  font-family: 'Courier New', monospace;
}
body.sadboy .foot::after {
  content: "xx • est • 19xx • genre: sadboy";
  display: block; text-align: center;
  font-family: 'Courier New', monospace; font-size: 13px;
  color: #8a8a8a; margin-top: 10px;
}

/* ============================================================
   ERA RESEARCH PASS v134 (Sep 17 2026) — GENRE: SADBOY
   Sourced: web research (Hypebeast, Discogs, NYS Music, Hot
   Topic). MGK × Trippie Redd collab; short black-and-white
   documentary intro; ALL track titles styled in lowercase
   (mirrored below); "lost boys", "beauty", "time travel",
   "struggles", "suddenly", "half dead", "hiding in the
   hills", "no more", "who do i call", "summer's gone";
   dark, dreamy, fairytale-like sound; black-and-white
   portrait merch repeating "genre: sadboy".
   ============================================================ */
body.sadboy .foot::before {
  content: "★ MGK × TRIPPIE REDD ★ GENRE: SADBOY ★";
  display: block; text-align: center;
  font-family: 'Oswald', 'Arial Narrow', sans-serif;
  font-size: 11px; letter-spacing: .3em;
  color: #b9b9b9; opacity: .9; margin-bottom: 8px;
}
body.sadboy .home-ticker::after {
  content: "lost boys • beauty • time travel • struggles • suddenly • half dead • hiding in the hills • no more • who do i call • summer's gone";
  display: block; text-align: center;
  font-family: 'Courier New', monospace;
  font-size: 12px; letter-spacing: .1em;
  color: #d6d6d6; margin-top: 6px;
}
body.sadboy .home-section-title::before {
  content: "genre: sadboy ✕ genre: sadboy ✕ ";
  font-family: 'Courier New', monospace;
  font-size: 11px; letter-spacing: .28em;
  color: #8f8f8f;
}
/* documentary filmstrip: sprocket holes along the ticker */
body.sadboy .home-ticker {
  background-image: radial-gradient(circle, #000 2.4px, transparent 3px);
  background-size: 18px 10px;
  background-repeat: repeat-x;
  background-position: top center;
  padding-top: 8px;
}