/* Homepage: sections in the order of Gary's October 2026 mockup. */
/* Background: Gary's black-and-white static pirate-flag loop. The video is compressed small, and a sharp film-grain
   layer drawn by the browser restores the static texture at any screen size. A still sits underneath for slow
   connections, reduce-motion, data-saver and iPhone Low Power Mode. Fixed layers, so it stays put while scrolling. */
body.home-page { background:#050505; }
body.home-page::before { content:""; position:fixed; inset:0; z-index:-2; background:#050505 url('/images/home/bg-static-poster-landscape.webp') center / cover no-repeat; pointer-events:none; }
@media (max-aspect-ratio: 1/1) { body.home-page::before { background-image:url('/images/home/bg-static-poster-portrait.webp'); } }
.bg-video { position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.bg-video video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .8s ease; }
.bg-video video.is-playing { opacity:1; }
.bg-tint { position:absolute; inset:0; background:linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.32)); }
/* Live TV static: a noise tile jumped to a new spot every frame (24 fps), plus scanlines. */
/* The grain fills the screen exactly and jiggles by moving its pattern, not the layer: a layer drawn past the edges made
   iPhone Safari treat the page as wider than the phone and zoom it out. */
.bg-grain { position:absolute; inset:0; background:url('/images/home/grain-160.png') repeat; background-size:160px 160px; opacity:.5; mix-blend-mode:overlay; animation:static-noise .34s steps(8) infinite; }
.bg-grain::after { content:""; position:absolute; inset:0; background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px); }
@keyframes static-noise { 0% { background-position:0 0; } 12.5% { background-position:-61px 23px; } 25% { background-position:37px -49px; } 37.5% { background-position:-17px 67px; } 50% { background-position:71px 11px; } 62.5% { background-position:-43px -31px; } 75% { background-position:13px 53px; } 87.5% { background-position:-73px -7px; } 100% { background-position:0 0; } }
/* Glitch hits: brief horizontal tears and a picture jolt, a few times per cycle (never more than 3 a second). */
.bg-glitch { position:absolute; inset:0; opacity:0; mix-blend-mode:screen; background:linear-gradient(transparent 0 18%,rgba(220,220,220,.35) 18% 19.2%,transparent 19.2% 47%,rgba(255,255,255,.22) 47% 51%,transparent 51% 72%,rgba(200,200,200,.4) 72% 72.8%,transparent 72.8%); animation:glitch-tear 6.2s steps(1) infinite; }
@keyframes glitch-tear { 0%,100% { opacity:0; transform:none; } 31% { opacity:1; transform:translate(-14px,0); } 32.5% { opacity:.6; transform:translate(9px,-38px) scaleY(1.4); } 34% { opacity:0; transform:none; } 74% { opacity:.8; transform:translate(18px,64px); } 75.5% { opacity:0; transform:none; } 88% { opacity:1; transform:translate(-8px,-120px) scaleY(.6); } 89% { opacity:0; transform:none; } }
.bg-video video.is-playing { animation:glitch-jolt 6.2s steps(1) infinite; }
@keyframes glitch-jolt { 0%,100% { transform:none; filter:none; } 31% { transform:translateX(10px) skewX(-3deg); filter:contrast(1.4) brightness(1.3); } 32.5% { transform:translateX(-6px); filter:none; } 34% { transform:none; } 74% { transform:translateX(-12px); filter:contrast(1.3) brightness(1.2); } 75.5% { transform:none; filter:none; } 88% { transform:translateX(7px) skewX(2deg); } 89% { transform:none; } }
@media (prefers-reduced-motion: reduce) { .bg-grain,.bg-glitch,.bg-video video.is-playing { animation:none; } }
.home-main { max-width:1240px; padding-top:28px; padding-bottom:40px; }
.home-main section { margin:0 0 clamp(56px,7vw,96px); }

/* Shared neon pieces */
.neon-title { font-family:Anton,Impact,"Arial Narrow",sans-serif; color:#ff4433; text-shadow:var(--neon-glow); letter-spacing:.01em; }
.neon-outline { font-family:Arial,Helvetica,sans-serif; font-weight:700; color:transparent; -webkit-text-stroke:2px #ff4433; text-shadow:0 0 10px rgba(255,42,31,.7), 0 0 26px rgba(255,42,31,.45); font-size:clamp(2.6rem,5vw,4.4rem); }
.neon-button,.neon-box { display:inline-flex; align-items:center; justify-content:center; gap:10px; border:2px solid var(--neon); border-radius:6px; background:rgba(20,0,0,.55); color:#fff; font-weight:700; text-decoration:none; box-shadow:0 0 8px rgba(255,42,31,.75), inset 0 0 8px rgba(255,42,31,.45); transition:background .15s, box-shadow .15s, color .15s; }
.neon-button:hover,.neon-box:hover,.neon-button:focus-visible,.neon-box:focus-visible { background:var(--neon); color:#000; box-shadow:0 0 14px rgba(255,42,31,1), 0 0 34px rgba(255,42,31,.7); }
.slab-button { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:8px 18px; font-family:var(--slab); font-size:1.15rem; color:#fff; text-decoration:none; border:3px solid #ff4433; border-radius:4px; box-shadow:0 0 8px rgba(255,42,31,.85), inset 0 0 6px rgba(255,42,31,.5); background:rgba(0,0,0,.45); transition:background .15s, color .15s; }
.slab-button:hover,.slab-button:focus-visible { background:#ff4433; color:#000; }

/* 1. Sign-up hero + ticker fill the first screen; the ticker sits on its bottom edge. */
.home-intro { display:flex; flex-direction:column; min-height:calc(100svh - var(--header-h,124px) - 28px); margin-bottom:clamp(48px,6vw,80px); }
.home-intro .signup-hero { flex:1; display:flex; flex-direction:column; justify-content:center; margin:0; }
.home-intro .news-ticker { margin-top:24px; margin-bottom:0; }
.signup-hero { text-align:center; padding:clamp(28px,5vw,64px) 0 8px; }
.neon-headline { font-family:Anton,Impact,"Arial Narrow",sans-serif; text-transform:uppercase; font-size:clamp(2.6rem,7vw,5.6rem); line-height:.98; color:#ff3b2b; text-shadow:0 0 6px rgba(255,42,31,.7), 0 0 22px rgba(255,42,31,.4); max-width:18ch; margin:0 auto 16px; }
.hero-price { font-size:clamp(1.1rem,2vw,1.45rem); font-weight:700; margin:0 auto 6px; color:#fff; }
.hero-note { font-size:.85rem; color:#ddd; margin:0 auto 18px; }
.hero-signup { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
.hero-email { width:min(100%,360px); min-height:52px; padding:10px 16px; border-radius:6px; border:2px solid #36c6d6; background:rgba(0,0,0,.65); color:#fff; box-shadow:0 0 10px rgba(54,198,214,.55); font-size:1rem; }
.hero-email::placeholder { color:#aaa; }
.hero-signup .neon-button,.hero-cta { min-height:52px; padding:10px 22px; font-size:1.2rem; }
.hero-cta { align-self:center; width:min(100%,330px); margin-top:8px; }
.member-welcome span { display:block; }

/* 2. Ticker */
.news-ticker { overflow:hidden; border-bottom:3px solid var(--neon); box-shadow:0 4px 12px -4px rgba(255,42,31,.8); margin:0 calc(50% - 50vw) clamp(48px,6vw,80px); width:100vw; padding:10px 0; background:rgba(0,0,0,.35); }
.ticker-track { display:flex; width:max-content; animation:ticker-scroll 38s linear infinite; }
.ticker-track p { display:flex; gap:48px; margin:0; padding-right:48px; max-width:none; white-space:nowrap; }
.ticker-title,.ticker-note { font-family:Anton,Impact,"Arial Narrow",sans-serif; font-size:clamp(1.4rem,2.6vw,2.1rem); letter-spacing:-.01em; background:linear-gradient(180deg,#9fd8ff 0%,#6f9fff 45%,#c7a2ff 100%); -webkit-background-clip:text; background-clip:text; color:transparent; animation:ticker-flicker 5.5s steps(1) infinite; }
.ticker-note { background:linear-gradient(180deg,#b8f0ff 0%,#77a8ff 55%,#9b8cff 100%); -webkit-background-clip:text; background-clip:text; }
@keyframes ticker-scroll { to { transform:translateX(-50%); } }
@keyframes ticker-flicker { 0%,100% { opacity:1; transform:none; } 7% { opacity:.55; } 8% { opacity:1; transform:translateX(2px) skewX(-6deg); } 9% { transform:none; } 43% { opacity:.8; } 44% { opacity:1; } 71% { transform:translateX(-3px); filter:hue-rotate(40deg); } 72% { transform:none; filter:none; } }

/* 3. Latest from the street */
.street-heading { font-family:Anton,Impact,sans-serif; font-style:italic; font-size:clamp(2.2rem,4.6vw,3.6rem); color:#fff; text-shadow:3px 3px 0 #b3140c, 0 0 14px rgba(0,0,0,.8); transform:skewX(-6deg); margin-bottom:20px; }
.lead-feature { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(24px,4vw,56px); align-items:center; }
.tv-set { position:relative; padding:clamp(10px,1.6vw,18px); border-radius:4%/6%; background:linear-gradient(145deg,#3a3a3a,#111 55%,#2a2a2a); box-shadow:0 0 0 2px #050505, 0 0 0 4px #4a4a4a, 0 18px 40px rgba(0,0,0,.8), 0 0 30px rgba(255,255,255,.08); }
.tv-screen { position:relative; aspect-ratio:1000/685; overflow:hidden; background:#000; -webkit-mask:url('/images/home/tv-screen-mask.png') center/100% 100% no-repeat; mask:url('/images/home/tv-screen-mask.png') center/100% 100% no-repeat; }
.tv-picture,.tv-picture img,.tv-picture .generic-cover,.tv-screen iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.tv-picture img { object-fit:cover; }
.tv-scanlines { position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px); box-shadow:inset 0 0 60px rgba(0,0,0,.85); }
.tv-screen.is-playing .tv-scanlines { opacity:.25; }
.tv-play { position:absolute; z-index:2; left:50%; top:50%; transform:translate(-50%,-50%); padding:12px 20px; border:2px solid #fff; border-radius:999px; background:rgba(0,0,0,.65); color:#fff; font-weight:700; letter-spacing:.04em; box-shadow:0 0 18px rgba(0,0,0,.8); cursor:pointer; }
.tv-play:hover,.tv-play:focus-visible { background:var(--neon); border-color:var(--neon); }
.lead-copy { text-align:center; }
.lead-title { font-family:Anton,Impact,sans-serif; font-size:clamp(2.2rem,4.4vw,3.8rem); line-height:1.14; margin:0 0 6px; }
.lead-title a { color:#fff; text-decoration:none; }
.lead-highlight { background:linear-gradient(transparent 8%,#c8140c 8% 92%,transparent 92%); box-decoration-break:clone; -webkit-box-decoration-break:clone; padding:0 .12em; }
.lead-kicker { font-family:Anton,Impact,sans-serif; font-size:clamp(1.8rem,3.4vw,2.9rem); margin:0 auto 10px; color:#fff; max-width:none; }
.lead-copy .story-deck { color:#ddd; font-size:.92rem; margin:0 auto 10px; max-width:52ch; }
.lead-copy .story-access { font-family:var(--slab); font-size:.85rem; color:#ccc; margin:0 auto 14px; }
/* Coming-soon films: the status line takes the place of the old "Official Trailer" line, big and neon. */
.lead-copy .story-access.is-coming-soon { font-family:Anton,Impact,"Arial Narrow",sans-serif; font-size:clamp(1.8rem,3.4vw,2.9rem); line-height:1.05; text-transform:uppercase; letter-spacing:.02em; color:#ff3b2b; text-shadow:0 0 6px rgba(255,42,31,.7), 0 0 22px rgba(255,42,31,.4); margin:4px auto 16px; }
.opening-statement { display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:center; }
.opening-statement .lead-title { text-align:left; }
.opening-statement .lead-copy { text-align:left; }
.opening-art { margin:0; }
.opening-art figcaption { font-size:.75rem; color:#ccc; margin-top:8px; }

/* 4. Fund the next story */

/* 5. Videos */
.videos-section { display:grid; grid-template-columns:auto 1fr; gap:24px 36px; align-items:center; }
.videos-heading { display:flex; flex-direction:column; align-items:center; gap:14px; }
.videos-heading h2 { margin:0; }
.video-tiles { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.video-tile { position:relative; display:block; aspect-ratio:16/9; overflow:hidden; border:2px solid #ff3b2b; border-radius:4px; box-shadow:0 0 8px rgba(255,42,31,.7); background:#000; color:#fff; text-decoration:none; transition:box-shadow .15s, transform .15s; }
.video-tile img,.video-tile .generic-cover { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:sepia(.35) saturate(1.2) brightness(.85); transition:filter .2s; }
.video-tile::after { content:""; position:absolute; inset:0; background:linear-gradient(transparent 45%,rgba(0,0,0,.85)); }
.video-tile-title { position:absolute; z-index:1; left:10px; right:10px; bottom:8px; font-size:.8rem; font-weight:700; line-height:1.25; text-shadow:0 1px 3px #000; }
.video-tile:hover,.video-tile:focus-visible { box-shadow:0 0 16px rgba(255,42,31,1), 0 0 32px rgba(255,42,31,.5); transform:translateY(-2px); }
.video-tile:hover img { filter:none; }
.video-tile .access-badge { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.videos-section .catalog-note { grid-column:2; color:#ddd; }

/* 6. Shop */
.shop-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:16px; }
.shop-heading h2 { font-size:clamp(2.2rem,4.2vw,3.4rem); margin:0; }
.shop-link { font-family:var(--typewriter); font-size:.9rem; color:#fff; text-decoration:none; border-bottom:1px solid #777; padding:8px 0; }
.shop-link:hover { color:#ff4433; border-color:#ff4433; }
.shop-banner { display:flex; justify-content:center; align-items:center; gap:.4em; min-height:120px; padding:24px; border:2px solid #ff3b2b; border-radius:6px; background:rgba(0,0,0,.55); color:#fff; font-family:Anton,Impact,sans-serif; font-size:clamp(1.4rem,3vw,2.2rem); text-decoration:none; box-shadow:0 0 10px rgba(255,42,31,.6); transition:box-shadow .15s; }
.shop-banner:hover,.shop-banner:focus-visible { color:#fff; box-shadow:0 0 18px rgba(255,42,31,1), 0 0 40px rgba(255,42,31,.55); }

/* Products pulled from streetgonzo.shop; red glow on hover like the video tiles. Phones swipe sideways. */
/* position:relative keeps the cards' hidden screen-reader notes inside the row; otherwise they widen the phone page. */
.shop-products { position:relative; list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
.shop-product { display:flex; flex-direction:column; height:100%; border:2px solid #ff3b2b; border-radius:4px; background:rgba(0,0,0,.6); color:#fff; text-decoration:none; overflow:hidden; box-shadow:0 0 8px rgba(255,42,31,.55); transition:box-shadow .15s, transform .15s; }
/* No backdrop: product photos with a transparent background sit straight on the card. */
.shop-product-image { display:block; aspect-ratio:1; overflow:hidden; }
.shop-product-image img { width:100%; height:100%; object-fit:cover; transition:transform .25s; }
.shop-product-title { padding:10px 10px 2px; font-size:.82rem; font-weight:700; line-height:1.25; }
.shop-product-price { margin-top:auto; padding:2px 10px 10px; font-family:var(--typewriter); font-size:.9rem; color:#ff6a5a; }
.shop-product:hover,.shop-product:focus-visible { color:#fff; box-shadow:0 0 16px rgba(255,42,31,1), 0 0 32px rgba(255,42,31,.55); transform:translateY(-2px); }
.shop-product:hover .shop-product-image img { transform:scale(1.04); }
@media (max-width: 991.98px) {
    .shop-products { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 2px 12px; margin:0 -2px; scrollbar-width:thin; scrollbar-color:#ff3b2b transparent; }
    .shop-products li { flex:0 0 min(44vw,220px); scroll-snap-align:start; }
}
@media (prefers-reduced-motion: reduce) { .shop-product,.shop-product-image img { transition:none; } .shop-product:hover { transform:none; } .shop-product:hover .shop-product-image img { transform:none; } }

/* 7. Support Uncredentialed Press */
.fringe-paper { display:grid; grid-template-columns:1.25fr 1fr; gap:24px 40px; align-items:center; padding:clamp(36px,5vw,64px) clamp(28px,5vw,72px); background:url('/images/home/torn-paper-2000.webp') center / 100% 100% no-repeat; color:#141414; filter:drop-shadow(0 10px 22px rgba(0,0,0,.6)); }
.fringe-pitch h2 { font-family:Anton,Impact,"Arial Narrow",sans-serif; font-size:clamp(2rem,4vw,3.3rem); color:#111; margin:0 0 6px; letter-spacing:-.02em; }
.fringe-pitch p,.fringe-join p { color:#222; font-family:Georgia,"Times New Roman",serif; font-size:.95rem; margin:0; max-width:none; }
.fringe-red { color:#b3140c; }
.fringe-catalog { font-weight:700; }
.fringe-stamp { display:inline-block; width:min(300px,100%); margin-bottom:12px; transform:rotate(-2deg); filter:drop-shadow(2px 3px 2px rgba(0,0,0,.35)); transition:transform .15s, filter .15s; }
.fringe-stamp img { width:100%; height:auto; }
.fringe-cta { position:relative; display:inline-block; margin-bottom:12px; }
.fringe-cta .fringe-stamp { margin-bottom:0; }
.fringe-arrow { position:absolute; width:78px; height:auto; right:100%; top:50%; margin:-46px 2px 0 0; pointer-events:none; }
.fringe-stamp:hover,.fringe-stamp:focus-visible { transform:rotate(-2deg) scale(1.05); filter:drop-shadow(3px 5px 4px rgba(0,0,0,.45)); }
.fringe-join .fringe-member { margin-top:10px; font-family:Arial,Helvetica,sans-serif; font-size:.8rem; }
.fringe-member a { color:#b3140c; font-weight:700; }

/* 8. Hire us + 9. Anonymous tips, sized together from the section width (cqw) to match Gary's reference. */
.hire-section,.tips-section { container-type:inline-size; }
.hire-section { position:relative; margin-bottom:0 !important; }
.hire-text { position:relative; z-index:1; width:fit-content; padding:5cqw 0 7cqw; }
.hire-section h2 { font-family:Anton,Impact,"Arial Narrow",sans-serif; text-transform:uppercase; font-size:8cqw; line-height:1.1; color:#eee; margin:0 0 3cqw; text-shadow:0 2px 10px rgba(0,0,0,.8); }
.hire-section h2 span { display:block; white-space:nowrap; }
.hire-red { color:#e3241a; border-bottom:2px solid #e3241a; padding-bottom:1.2cqw; }
.hire-button { display:inline-flex; align-items:center; gap:2cqw; padding:1.4cqw 6cqw; border:4px solid #ff3b2b; border-radius:4px; background:rgba(150,0,0,.35); color:#ff6a55; font-family:Anton,Impact,sans-serif; font-size:7cqw; line-height:1.2; text-transform:uppercase; text-decoration:none; text-shadow:0 0 8px rgba(255,42,31,.9); box-shadow:0 0 14px rgba(255,42,31,.9), inset 0 0 14px rgba(255,42,31,.6); transition:background .15s, color .15s; }
.hire-button:hover,.hire-button:focus-visible { background:#ff3b2b; color:#000; text-shadow:none; }
.hire-photo { position:absolute; z-index:0; top:0; bottom:0; right:0; }
.hire-photo img { height:100%; width:auto; max-width:none; }

.tips-section { display:grid; grid-template-columns:19cqw minmax(0,1fr); column-gap:6cqw; align-items:start; }
.home-main .tips-section { margin-top:1vw; }
.tips-mask { width:100%; position:relative; z-index:1; }
.tips-body { text-align:center; }
.tips-body h2 { font-family:Anton,Impact,"Arial Narrow",sans-serif; font-size:7.6cqw; line-height:1; color:#ccc6bc; white-space:nowrap; letter-spacing:-.02em; margin:0 0 2.4cqw; text-shadow:2px 2px 0 rgba(0,0,0,.6); }
.tips-form { display:grid; grid-template-columns:minmax(0,1fr); gap:1.6cqw; justify-items:center; min-width:0; }
.tips-body { min-width:0; }
.tips-select { min-width:0; max-width:100%; }
.tips-form > .tips-select,.tips-form > .tips-message,.tips-form > .tips-files,.tips-form > .tips-privacy,.tips-form > .outreach-status,.tips-form > .outreach-error { width:100%; }
.tips-message { min-height:96px; padding:12px 16px; font-family:var(--typewriter); font-size:clamp(.9rem,1.6cqw,1.15rem); color:#eee; background:rgba(0,0,0,.6); border:3px double #bbb; border-radius:2px; resize:vertical; }
.tips-files { display:grid; gap:6px; text-align:left; font-size:.85rem; color:#ddd; }
.tips-files input { font-size:.85rem; color:#ccc; }
.tips-files input::file-selector-button { margin-right:10px; padding:6px 12px; border:1px solid #ff3b2b; border-radius:4px; background:rgba(60,0,0,.5); color:#fff; cursor:pointer; }
.tips-privacy { margin:0; text-align:left; font-size:.75rem; color:#aaa; max-width:none; }
.tips-body .outreach-done { font-family:Arial Black,Arial,Helvetica,sans-serif; text-transform:uppercase; }
.tips-select { width:100%; min-height:max(56px,9cqw); padding:12px 20px; font-family:var(--typewriter); font-size:clamp(.95rem,2.2cqw,1.6rem); color:#eee; background:rgba(0,0,0,.6); border:3px double #bbb; border-radius:2px; }
.submit-button { min-width:min(100%,34cqw); padding:.6cqw 4cqw; font-family:Arial Black,Arial,Helvetica,sans-serif; font-weight:900; font-size:5cqw; text-transform:uppercase; color:#ff4433; background:rgba(60,0,0,.4); border:4px solid #ff3b2b; border-radius:10px; text-shadow:0 0 8px rgba(255,42,31,.9); box-shadow:0 0 12px rgba(255,42,31,.8), inset 0 0 10px rgba(255,42,31,.5); transition:box-shadow .15s, background .15s; }
.submit-button:not(:disabled):hover,.submit-button:not(:disabled):focus-visible { background:#ff3b2b; color:#000; text-shadow:none; box-shadow:0 0 20px rgba(255,42,31,1), 0 0 44px rgba(255,42,31,.7); }

/* Phones and tablets */
@media (max-width: 991.98px) {
    .lead-feature,.opening-statement,.videos-section { grid-template-columns:1fr; }
    /* Hire us + tips keep the desktop composition, scaled to the screen (sizes are in cqw). */
    .videos-heading { flex-direction:row; justify-content:space-between; }
    .videos-section .catalog-note { grid-column:1; }
    .fringe-paper { grid-template-columns:1fr; text-align:center; padding:48px 28px 84px; }
}
@media (max-width: 575.98px) {
    .video-tiles { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .hero-signup .neon-button { width:min(100%,360px); }
    .home-main .tips-section { margin-top:2vw; margin-bottom:0; }
    .home-main .fringe-section { margin-bottom:24px; }
    .fringe-cta .fringe-stamp { width:220px; }
    .fringe-cta { margin-left:30px; }
    .fringe-arrow { width:62px; margin-top:-40px; }
    .fringe-catalog { display:block; }
    .fringe-catalog + br { display:none; }
    .fringe-paper { background:none; border:solid transparent; border-width:44px 30px; border-image:url('/images/home/torn-paper-tall-760.webp') 120 80 fill / 44px 30px / 0 stretch; padding:6px 0; }
    .home-main { padding-bottom:28px; }
    .hire-text { padding-bottom:9cqw; }
    .tips-select { min-height:44px; padding:6px 6px; font-size:.64rem; }
    .tips-message { font-size:.8rem; min-height:80px; padding:8px; }
    .tips-files,.tips-privacy { font-size:.7rem; }
    .submit-button { font-size:6.6cqw; padding:2px 7cqw; }
}
@media (prefers-reduced-motion: reduce) {
    .ticker-track { animation-duration:120s; }
    .ticker-title,.ticker-note { animation:none; }
}

/* Contact page: the tip form sizes itself to its own panel (its sizes are made for the homepage section), and its
   heading matches the other two panels instead of the giant homepage title (Gary, Nov 5). */
.contact-page .tips-body { container-type:inline-size; text-align:left; }
.contact-page .tips-body h2.outreach-title { font-family:Anton,Impact,sans-serif; font-size:clamp(1.8rem,4vw,2.6rem); line-height:1.1; color:#ff4433; text-shadow:var(--neon-glow); white-space:normal; letter-spacing:0; margin:0 40px 6px 0; }
/* /Shop: the store's products in a grid, then the button to the full store (Gary, Nov 5). */
.shop-page-products { grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:18px; margin:8px 0 28px; }
.shop-page-foot { display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; margin-bottom:40px; }
.shop-page-foot .muted { margin:0; }
@media (max-width:767px) { .shop-page-products { display:grid; overflow:visible; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:0; margin:8px 0 24px; } .shop-page-products li { flex:none; } }

/* Shop page (Gary, Nov 6): products sit straight on the page with the white cut away and a red glow
   following each item's outline; desktop fits on one screen without scrolling. */
.shop-cutout .shop-product { background:transparent; border:0; box-shadow:none; overflow:visible; }
.shop-cutout .shop-product:hover,.shop-cutout .shop-product:focus-visible { box-shadow:none; }
.shop-cutout .shop-product-image { overflow:visible; }
.shop-cutout .shop-product-image img { object-fit:contain; opacity:0; transition:opacity .25s, transform .25s, filter .2s; }
.shop-cutout .shop-product-image.is-cut img { opacity:1; }
.shop-cutout .shop-product-image.has-cutout img { filter:drop-shadow(0 0 5px rgba(255,42,31,.9)) drop-shadow(0 0 14px rgba(255,42,31,.45)); }
.shop-cutout .shop-product:hover .has-cutout img,.shop-cutout .shop-product:focus-visible .has-cutout img { filter:drop-shadow(0 0 7px rgba(255,42,31,1)) drop-shadow(0 0 22px rgba(255,42,31,.7)); }
.shop-cutout .shop-product-title,.shop-cutout .shop-product-price { text-align:center; }
@keyframes shop-show { to { opacity:1; } }
.shop-cutout .shop-product-image:not(.is-cut) img { animation:shop-show .3s 3s forwards; }
.store-main .store-heading { max-width:none; margin-inline:auto; text-align:center; }
.store-main .store-heading h1 { max-width:none; }
.store-main .shop-page-foot { justify-content:center; }
@media (min-width:768px) {
    .page-main.store-main { padding-block:8px 24px; }
    body.brand-page .store-heading { padding:12px 0 8px; }
    body.brand-page .store-heading h1 { font-size:clamp(2.4rem,4.6vw,4rem); margin-bottom:0; }
    .store-main .shop-page-products { grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:20px 24px; margin:12px 0 16px; }
    .store-main .shop-page-products .shop-product-image { max-height:min(26vh,230px); aspect-ratio:auto; height:min(26vh,230px); }
    .store-main .shop-page-foot { margin-bottom:12px; }
}

/* Contact: the switchboard (Gary, Nov 6). Three neon "lines" pick which form shows. */
.switchboard { --cyan:#19f0ff; --green:#39ff6a; --red:#ff2a1f; max-width:1040px; gap:22px; }
.switchboard .line-cyan { --line:var(--cyan); --line-glow:rgba(25,240,255,.55); }
.switchboard .line-green { --line:var(--green); --line-glow:rgba(57,255,106,.5); }
.switchboard .line-red { --line:var(--red); --line-glow:rgba(255,42,31,.6); }
.switchboard .line-gold { --line:#ffc83d; --line-glow:rgba(255,200,61,.5); }
.switch-head { text-align:center; padding:clamp(8px,3vw,28px) 0 0; }
.switch-kicker { display:inline-flex; align-items:center; gap:8px; margin:0 0 6px; font-family:var(--typewriter); font-size:.85rem; letter-spacing:.14em; text-transform:uppercase; color:#cfcfcf; }
.switch-dot { width:9px; height:9px; border-radius:50%; background:var(--red); box-shadow:0 0 8px var(--red); animation:switch-blink 1.6s steps(2,start) infinite; }
@keyframes switch-blink { to { visibility:hidden; } }
body.brand-page .switch-head h1 { margin:0; font:400 clamp(2.8rem,8vw,6rem)/.92 Anton,Impact,sans-serif; text-transform:uppercase; color:#f4efe6; text-shadow:0 2px 0 #000; letter-spacing:.01em; }
.switch-head h1 span { color:#ff4433; text-shadow:var(--neon-glow); }
.switch-sub { margin:10px auto 0; max-width:52ch; color:#d9d4ca; font-size:1.02rem; }
.switch-lines { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
@media (max-width:1099px) and (min-width:768px) { .switch-lines { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.switch-line { position:relative; display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:14px; align-items:center; padding:18px 18px 16px; border:2px solid color-mix(in srgb,var(--line) 45%,transparent); border-radius:10px; background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 2px,transparent 2px 4px),rgba(6,6,6,.88); color:#eee; text-decoration:none; transition:border-color .15s, box-shadow .15s, transform .15s; }
.switch-line:hover,.switch-line:focus-visible { color:#fff; border-color:var(--line); box-shadow:0 0 14px var(--line-glow); transform:translateY(-2px); }
.switch-line.is-on { border-color:var(--line); box-shadow:0 0 16px var(--line-glow), inset 0 0 14px color-mix(in srgb,var(--line) 18%,transparent); }
.switch-num { grid-row:1; font:400 2.6rem/1 Anton,Impact,sans-serif; color:var(--line); text-shadow:0 0 10px var(--line-glow); opacity:.9; }
.switch-line strong { font:400 1.4rem/1.05 Anton,Impact,sans-serif; text-transform:uppercase; letter-spacing:.02em; }
.switch-note { grid-column:1 / -1; margin-top:8px; color:#b4b4b4; font-family:var(--typewriter); font-size:.8rem; line-height:1.3; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-clamp:3; overflow:hidden; }
.switch-line.is-on::after { content:""; position:absolute; left:50%; bottom:-12px; width:14px; height:14px; transform:translateX(-50%) rotate(45deg); background:#090909; border-right:2px solid var(--line); border-bottom:2px solid var(--line); }
.switch-panel { border:2px solid color-mix(in srgb,var(--line) 70%,transparent); box-shadow:0 0 18px color-mix(in srgb,var(--line) 22%,transparent); }
.switch-panel[hidden] { display:none; }
.switchboard:not(.is-switching) .switch-panels { display:grid; gap:24px; }
.switch-panel .outreach-title { outline:none; }
@media (max-width:767px) {
    .switch-lines { grid-template-columns:1fr; gap:10px; }
    .switch-line { padding:12px 14px; }
    .switch-num { font-size:2rem; }
    .switch-line strong { font-size:1.3rem; }
    .switch-line.is-on::after { display:none; }
}
@media (prefers-reduced-motion: reduce) { .switch-dot { animation:none; } .switch-line { transition:none; } .switch-line:hover { transform:none; } }

/* Sponsor page (Gary approved the mockup, Nov 6). Softer green than the first draft. */
.sponsor-page { --sp-green:#2fd866; --sp-glow:rgba(47,216,102,.45); max-width:1080px; margin:0 auto; display:grid; gap:30px; padding:18px 0 40px; }
.sp-hero { text-align:center; }
.sp-kick { margin:0 0 6px; font-family:var(--typewriter); letter-spacing:.14em; text-transform:uppercase; color:#cfcfcf; font-size:.85rem; }
body.brand-page .sp-hero h1 { margin:0; font:400 clamp(2.6rem,8vw,6rem)/.92 Anton,Impact,sans-serif; text-transform:uppercase; color:#f4efe6; }
.sp-hero h1 span { color:var(--sp-green); text-shadow:0 0 6px rgba(47,216,102,.55),0 0 18px rgba(47,216,102,.3); }
.sp-lead { max-width:60ch; margin:12px auto 0; color:#ddd6cb; font-size:1.05rem; }
.sp-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; }
.sp-stat { position:relative; border:1px solid #2b2b2b; border-radius:10px; padding:16px; text-align:center; background:rgba(8,8,8,.85); }
.sp-stat b { display:block; font:400 2.4rem/1 Anton,Impact,sans-serif; color:#ff4433; text-shadow:0 0 10px rgba(255,42,31,.6); }
.sp-stat span { color:#a9a9a9; font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; }
.sp-aside { position:absolute; right:8px; bottom:4px; font-size:.5rem; letter-spacing:.06em; color:#4a4a4a; text-transform:lowercase; }
.sp-h2 { font:400 2rem Anton,Impact,sans-serif; text-transform:uppercase; color:#f4efe6; margin:0 0 12px; }
.sp-tiers { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.sp-tier { position:relative; display:grid; gap:10px; align-content:start; padding:22px 20px; border:2px solid color-mix(in srgb,var(--sp-green) 45%,transparent); border-radius:12px; background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 2px,transparent 2px 4px),rgba(6,6,6,.9); color:#eee; }
.sp-tier.is-top { border-color:var(--sp-green); box-shadow:0 0 16px var(--sp-glow); }
.sp-tag { position:absolute; top:-12px; left:18px; padding:3px 8px; border-radius:4px; background:var(--sp-green); color:#001a06; font:700 .7rem Arial,sans-serif; letter-spacing:.12em; text-transform:uppercase; }
.sp-tier h3 { margin:0; font:400 1.7rem Anton,Impact,sans-serif; text-transform:uppercase; color:var(--sp-green); }
.sp-tier ul { margin:0; padding-left:18px; display:grid; gap:4px; color:#cfcfcf; font-size:.92rem; }
.sp-ask { justify-self:start; margin-top:6px; padding:8px 16px; border:2px solid var(--sp-green); border-radius:6px; color:var(--sp-green); font:400 1.1rem Anton,Impact,sans-serif; text-decoration:none; box-shadow:0 0 10px rgba(47,216,102,.3); }
.sp-ask:hover,.sp-ask:focus-visible { background:var(--sp-green); color:#001a06; }
.sp-form { justify-self:center; width:100%; max-width:640px; padding:24px; border:2px solid color-mix(in srgb,var(--sp-green) 70%,transparent); border-radius:12px; background:rgba(8,8,8,.9); box-shadow:0 0 16px rgba(47,216,102,.18); scroll-margin-top:90px; }
.sp-form .outreach-form { max-width:none; }
.sp-package { display:flex; align-items:center; gap:10px; margin:0 0 12px; color:#bdbdbd; font-size:.9rem; }
.sp-package select { width:auto; min-width:0; padding:4px 8px; border:1px solid #333; border-radius:6px; background:#050505; color:var(--sp-green); font-weight:700; }
.sp-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px 14px; }
.sp-grid .sp-full { grid-column:1 / -1; }
.sp-form .outreach-field { margin:0; }
.sp-form .outreach-field input, .sp-form .outreach-field textarea { padding:7px 10px; }
.sp-send { margin-top:16px; border:2px solid var(--sp-green) !important; background:rgba(0,22,6,.6) !important; color:var(--sp-green) !important; font:400 1.3rem Anton,Impact,sans-serif !important; padding:8px 26px !important; border-radius:6px; box-shadow:0 0 12px rgba(47,216,102,.4) !important; }
@media (max-width:767px) { .sp-tiers { grid-template-columns:1fr; } .sp-grid { grid-template-columns:1fr; } .sp-form { padding:18px; } }

/* 04 Partnerships on the Switchboard (Gary, Nov 7): the Sponsor page form, in gold. */
.sp-panel { --sp-green:#ffc83d; }
.sp-panel .sp-h2 { color:#ffc83d; text-shadow:0 0 10px rgba(255,200,61,.45); font-size:clamp(1.8rem,4vw,2.6rem); }
.sp-panel .sp-send { border-color:#ffc83d !important; background:rgba(24,18,0,.6) !important; color:#ffc83d !important; box-shadow:0 0 12px rgba(255,200,61,.35) !important; }
.sp-more { margin:14px 0 0; font-size:.9rem; }
.sp-more a { color:#ffc83d; }
/* Affiliate button on the Sponsor page (Gary, Nov 7). */
.sp-affiliate { display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:18px; padding:14px 20px; border:2px dashed #ffc83d; border-radius:12px; background:rgba(24,18,0,.45); color:#ffe39a; font:400 clamp(1.2rem,2.6vw,1.6rem)/1.1 Anton,Impact,sans-serif; text-transform:uppercase; text-decoration:none; letter-spacing:.02em; }
.sp-affiliate span { padding:3px 8px; border-radius:4px; background:#ffc83d; color:#1a1200; font:700 .7rem Arial,sans-serif; letter-spacing:.14em; }
.sp-affiliate b { color:#ffc83d; font-weight:400; }
.sp-affiliate:hover, .sp-affiliate:focus-visible { border-style:solid; color:#fff; box-shadow:0 0 16px rgba(255,200,61,.4); }
/* Shop items sit in the middle of the page (Gary, Nov 7): rows are centred instead of filling from the left. */
@media (min-width:768px) {
    .shop-page-products, .store-main .shop-page-products { display:flex; flex-wrap:wrap; justify-content:center; }
    .shop-page-products li { flex:0 1 200px; }
    .store-main .shop-page-products li { flex-basis:180px; }
}
@media (max-width:767px) { .shop-page-products li:last-child:nth-child(odd) { grid-column:1 / -1; justify-self:center; width:calc(50% - 6px); } }

/* Media kit (Gary, Nov 7): the combined following is the headline number. */
.sp-stat.is-total { grid-column:1 / -1; border-color:color-mix(in srgb,var(--sp-green) 60%,transparent); box-shadow:0 0 16px var(--sp-glow); }
.sp-stat.is-total b { font-size:clamp(3rem,8vw,4.6rem); color:var(--sp-green); text-shadow:0 0 12px var(--sp-glow); }
/* The platform numbers share one even row under the total (Gary, Nov 7). */
.sp-stats { display:flex; flex-wrap:wrap; justify-content:center; }
.sp-stat { flex:1 1 170px; }
.sp-stat.is-total { flex-basis:100%; }

/* Platform numbers link to the accounts (Gary, Nov 7). */
a.sp-stat.is-link { color:inherit; text-decoration:none; transition:border-color .15s, box-shadow .15s; }
a.sp-stat.is-link:hover, a.sp-stat.is-link:focus-visible { border-color:var(--sp-green); box-shadow:0 0 14px var(--sp-glow); }
a.sp-stat.is-link:hover span, a.sp-stat.is-link:focus-visible span { color:#fff; }
.shop-affiliate { max-width:1120px; margin:34px auto 8px; }
@media (max-width:767px) { .shop-affiliate { margin:26px 16px 4px; text-align:center; } }