/* =====================================================
   BUSTEDNOW 2.0 — SHARED STYLESHEET
   One file styles every page. Change a colour here
   once and the whole site updates.
   ===================================================== */

/* ---------- LOCAL FONTS ---------- */
@font-face {
    font-family: 'Titan One';
    src: url('TitanOne-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Breton Weights Mapping */
@font-face { font-family: 'Breton'; src: url('Breton-Hair.ttf') format('truetype'); font-weight: 100; font-display: swap; }
@font-face { font-family: 'Breton'; src: url('Breton-Thin.ttf') format('truetype'); font-weight: 200; font-display: swap; }
@font-face { font-family: 'Breton'; src: url('Breton-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Breton'; src: url('Breton-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Breton'; src: url('Breton-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Breton'; src: url('Breton-Black.ttf') format('truetype'); font-weight: 900; font-display: swap; }

/* Master volume knob for type size — uncomment and adjust
   (default 16px) if you ever want EVERYTHING bigger/smaller:
   html { font-size: 18px; }
*/

/* ---------- COLOUR PALETTE ---------- */
:root {
    --bg-dark: #201110;        /* darkest edges of the background */
    --bg-mid: #33201d;         /* mid maroon-brown */
    --bg-warm: #8a6154;        /* warm glow, like the old Wix photo */
    --panel-red: #7d2027;      /* the dark red content boxes */
    --panel-red-dark: #5c161c; /* nav + footer red */
    --border-red: #4a1116;     /* dark red borders */
    --text-main: #ffffff;
    --text-dim: #e8d3cd;
    --link-blue: #8fc1e3;
    --btn-top: #6f94b2;        /* glossy button gradient */
    --btn-mid: #2d5f8a;
    --btn-bot: #14446c;
    --btn-border: #0d3050;
    --mag-yellow: #ffe800;     /* Smash Hits yellow */
    --mag-pink: #e6007e;       /* Smash Hits pink */
    --mag-pink-dark: #a80058;
    --mag-cyan: #29abe2;       /* Smash Hits cyan */
    --ink: #111111;            /* marker black */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Breton', 'Arial Narrow', Arial, sans-serif;
    font-weight: 400;
    color: var(--text-main);
    line-height: 1.6;
    background-color: var(--bg-mid);
    background-image: radial-gradient(circle at 75% 30%, var(--bg-warm) 0%, var(--bg-mid) 45%, var(--bg-dark) 100%);
    background-attachment: fixed;
}

/* ---------- BRETON BLACK OVERRIDES ---------- */
/* Forces the heavy Black weight onto the punchy stuff */
nav, nav a, .panel p, .star-banner, footer, .btn {
    font-weight: 900;
}

/* Keeps blog post bodies readable (Medium weight) */
.blog-post p, .blog-post .date {
    font-weight: 500;
}

/* ---------- SCANLINE OVERLAY (CRT effect) ----------
   Z-INDEX MAP: nav 1000 | scanlines 9999 | video cards 10000 */
.scanlines {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    pointer-events: none;
    z-index: 9999;
    background: repeating-linear-gradient(0deg,
        rgba(0, 0, 0, 0.11), rgba(0, 0, 0, 0.11) 1px,
        transparent 1px, transparent 3px);
    box-shadow: inset 0 0 140px rgba(0, 0, 0, 0.42);
}

/* ---------- NAVIGATION (hides when scrolling down) ---------- */
nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    background-color: var(--panel-red-dark);
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid var(--border-red);
    transition: transform 0.3s ease-in-out;
}
nav.hidden { transform: translateY(-100%); }
nav h1 {
    color: var(--text-main);
    font-size: 1.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}
nav ul { list-style: none; display: flex; gap: 2rem; }
nav a {
    color: var(--text-dim);
    text-decoration: none;
    transition: color 0.3s;
    text-transform: uppercase;
    font-weight: 900;
    font-size: 1.05rem;
    letter-spacing: 1px;
}
nav a:hover { color: var(--link-blue); }

/* ---------- RED PANEL BOXES ---------- */
.panel {
    background-color: var(--panel-red);
    max-width: 900px;
    margin: 0 auto;
    padding: 2.5rem 2rem;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    border: 1px solid var(--border-red);
}
.panel p {
    font-size: 1.15rem;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.45);
}

/* ---------- SMASH HITS HEADLINE (the only Titan One left) ---------- */
.zine-title {
    font-family: 'Titan One', 'Arial Rounded MT Bold', 'Helvetica Rounded', Arial, sans-serif;
    font-size: 3.2rem;
    line-height: 1.15;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--mag-yellow);
    transform: rotate(-2deg);
    margin-bottom: 1.5rem;
    text-shadow:
         0.045em  0       0 var(--mag-pink),
        -0.045em  0       0 var(--mag-pink),
         0        0.045em 0 var(--mag-pink),
         0       -0.045em 0 var(--mag-pink),
         0.032em  0.032em 0 var(--mag-pink),
        -0.032em  0.032em 0 var(--mag-pink),
         0.032em -0.032em 0 var(--mag-pink),
        -0.032em -0.032em 0 var(--mag-pink),
         0.07em   0.07em  0 var(--mag-pink),
         0.09em   0.09em  0 var(--mag-pink),
         0.11em   0.11em  0 var(--mag-pink),
         0.13em   0.13em  0 var(--mag-pink-dark);
}

/* ---------- MAGAZINE CUTOUT LINK (taped paper) ---------- */
a.cutout, a.cutout:visited {
    display: inline-block;
    position: relative;
    padding: 0.3em 0.7em;
    background-color: #f8f5e6;
    color: var(--ink);
    font-family: 'Courier New', Courier, monospace; /* deliberate: it's a paper prop */
    font-weight: 900;
    font-size: 1.05em;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 1px;
    border: 2px solid var(--ink);
    box-shadow: 4px 4px 0px var(--ink);
    transform: rotate(-2.5deg);
    transition: all 0.2s ease-in-out;
    margin: 15px 5px 5px 5px;
}
a.cutout::before {  /* the scotch tape */
    content: "";
    position: absolute;
    top: -12px; left: 50%;
    width: 55px; height: 22px;
    background: rgba(255, 255, 220, 0.6);
    border-left: 1px dashed rgba(0, 0, 0, 0.15);
    border-right: 1px dashed rgba(0, 0, 0, 0.15);
    transform: translateX(-50%) rotate(2deg);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    pointer-events: none;
}
a.cutout:hover {
    transform: rotate(0deg) translateY(-3px);
    background-color: #ffeb3b;
    box-shadow: 6px 6px 0px var(--ink);
}

/* ---------- GLOSSY BLUE BUTTONS ---------- */
.btn-row { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; }
.btn {
    display: inline-block;
    padding: 1rem 2.6rem;
    background: linear-gradient(to bottom, var(--btn-top) 0%, var(--btn-mid) 55%, var(--btn-bot) 100%);
    color: #ffffff;
    text-decoration: none;
    border: 1px solid var(--btn-border);
    border-radius: 3px;
    font-weight: 900;
    font-size: 1.15rem;
    letter-spacing: 1px;
    transition: filter 0.2s, transform 0.2s;
}
.btn:hover { filter: brightness(1.25); transform: translateY(-2px); }

/* ---------- PAGE SPACERS ---------- */
.hero { padding: 8rem 2rem 3rem; }
.page-header { padding: 8rem 2rem 2rem; }
.page-header .panel p { font-size: 1.2rem; }

/* ---------- BLOG POSTS ---------- */
.blog-post {
    background-color: var(--panel-red);
    max-width: 900px;
    margin: 2rem auto;
    padding: 3rem 2.5rem;
    text-align: left;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    border: 1px solid var(--border-red);
}
.blog-post h3 {
    font-size: 2.3rem;
    font-weight: 900;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    color: var(--link-blue);
}
.blog-post .date {
    display: block;
    color: var(--text-dim);
    font-weight: 600;
    margin-bottom: 1.5rem;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid var(--border-red);
    padding-bottom: 1rem;
}
.blog-post p {
    margin-bottom: 1.2rem;
    font-size: 1.25rem;
    line-height: 1.75;
}

/* ---------- VIDEO GRID ---------- */
.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}
.video-card {
    position: relative;
    z-index: 10000; /* above the scanlines = crisp videos */
    background-color: var(--panel-red);
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid var(--border-red);
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}
.video-card:hover {
    transform: translateY(-5px);
    border-color: var(--link-blue);
    box-shadow: 0 0 20px rgba(143, 193, 227, 0.3);
}
.video-card video {
    width: 100%;
    display: block;
    aspect-ratio: 16 / 9;
    object-fit: contain;   /* respects the video's true ratio */
    background-color: #000;
}
video:fullscreen {
    aspect-ratio: auto;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background-color: #000;
}
.video-info { padding: 1rem; }
.video-info h3 {
    font-size: 1.4rem;
    font-weight: 900;
    margin-bottom: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.video-info p { font-size: 1.05rem; line-height: 1.6; color: var(--text-dim); }

/* ---------- STAR TICKER + FOOTER ---------- */
.star-banner {
    margin-top: 3rem;
    background: var(--mag-pink);
    border-top: 3px solid var(--ink);
    padding: 0.6rem 1rem;
    text-align: center;
    font-family: 'Breton', 'Arial Narrow', Arial, sans-serif; /* now Breton Black */
    font-weight: 900;
    font-size: 1.2rem;
    text-transform: uppercase;
    color: var(--ink);
    letter-spacing: 1px;
}
.star-banner .star { color: var(--mag-yellow); font-size: 1.2em; margin: 0 0.7em; vertical-align: -0.1em; }
.star-banner a, .star-banner a:visited { color: var(--ink); text-decoration: none; transition: color 0.2s; }
.star-banner a:hover {
    color: var(--mag-yellow);
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-underline-offset: 4px;
}
footer {
    text-align: center;
    padding: 2rem;
    background-color: var(--panel-red-dark);
    border-top: 2px solid var(--border-red);
    color: var(--text-dim);
}
footer p { font-size: 1.05rem; }

/* ---------- MAG EXTRAS (optional classes, use anywhere) ---------- */
.speech-bubble {
    display: inline-block;
    position: relative;
    background: #ffffff;
    color: var(--ink);
    font-weight: 900;
    font-size: 1rem;
    padding: 0.5em 0.9em;
    border: 2px solid var(--ink);
    border-radius: 10px;
    box-shadow: 2px 2px 0 var(--ink);
    transform: rotate(-2deg);
    margin: 0.6rem 0.3rem;
}
.speech-bubble::after {
    content: "";
    position: absolute;
    bottom: -11px; left: 16px;
    border-style: solid;
    border-width: 11px 9px 0 0;
    border-color: var(--ink) transparent transparent transparent;
}
.speech-bubble::before {
    content: "";
    position: absolute;
    bottom: -7px; left: 18px;
    border-style: solid;
    border-width: 8px 7px 0 0;
    border-color: #ffffff transparent transparent transparent;
    z-index: 1;
}
.credit-bar {
    display: inline-block;
    background: var(--mag-cyan);
    color: var(--ink);
    font-weight: 900;
    padding: 0.15em 0.6em;
    transform: rotate(-1deg);
}
.shout-caps {
    font-family: 'Breton', 'Arial Narrow', Arial, sans-serif; /* now Breton Black */
    font-weight: 900;
    text-transform: uppercase;
    color: #ffffff;
    letter-spacing: 1px;
    line-height: 1.15;
    text-shadow: 2px 2px 0 var(--ink);
}
.pull-quote {
    font-family: 'Breton', 'Arial Rounded MT Bold', Arial, sans-serif; /* now Breton Black */
    font-weight: 900;
    color: var(--mag-pink);
    font-size: 2rem;
    line-height: 1.1;
    text-shadow: 2px 2px 0 var(--ink);
}
.cutout-cyan { box-shadow: 0 0 0 6px var(--mag-cyan), 8px 10px 0 6px var(--ink); transform: rotate(-1.5deg); }
.cutout-pink { box-shadow: 0 0 0 6px var(--mag-pink), 8px 10px 0 6px var(--ink); transform: rotate(1.5deg); }

/* ---------- MOBILE ---------- */
@media (max-width: 768px) {
    nav { flex-direction: column; gap: 1rem; padding: 1rem; }
    .hero { padding: 12rem 1rem 3rem; }
    .page-header { padding: 12rem 1rem 2rem; }
    .zine-title { font-size: 2rem; }
    .video-grid { grid-template-columns: 1fr; padding: 1rem; }
    .blog-post { margin: 1.5rem 1rem; padding: 1.5rem; }
    .blog-post h3 { font-size: 1.8rem; }
    .blog-post p { font-size: 1.1rem; }
}

/* ---------- 404 PAGE ---------- */
/* Torn paper card holding the ripped photo */
.logo-card {
    position: relative;
    display: inline-block;
    color: var(--ink);
    padding: 14px;              /* the white paper border peeking around the photo */
    transform: rotate(-1.5deg); /* also keeps the torn layer stacked correctly */
    margin: 1rem auto 2rem;
    width: min(560px, 92%);
}
/* The paper layer — big ripped edges + hard shadow */
.logo-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #f8f5e6;
    box-shadow: 8px 8px 0 var(--ink);
    z-index: -1;
    filter: url(#torn-edge);
}
/* The photo — fine-grain tear on the edges, plus a slight
   askew tilt so it looks hand-glued instead of machine-printed */
.logo-card img {
    display: block;
    width: 100%;
    height: auto;
    filter: url(#photo-tear);
    transform: rotate(0.7deg);
}
/* A strip of tape holding the photo down (uses the spare
   ::after, since ::before is already the paper) */
.logo-card::after {
    content: "";
    position: absolute;
    top: 2px; left: 50%;
    width: 90px; height: 26px;
    background: rgba(255, 255, 220, 0.6);
    border-left: 1px dashed rgba(0, 0, 0, 0.15);
    border-right: 1px dashed rgba(0, 0, 0, 0.15);
    transform: translateX(-50%) rotate(-3deg);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    pointer-events: none;
}
/* Tiny typewriter caption, like a magazine exhibit tag */
.photo-caption {
    font-family: 'Courier New', Courier, monospace;
    font-weight: 900;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--ink);
    background: #f8f5e6;
    display: inline-block;
    padding: 0.2em 0.6em;
    margin-top: 10px;
    transform: rotate(-1deg);
}

/* ---------- GLOBAL LINK COLOUR ---------- */
/* Every plain hyperlink on the site: Smash Hits yellow */
a, a:visited {
    color: var(--mag-yellow);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    transition: color 0.2s;
}
a:hover, a:active {
    color: #ffffff;
    text-shadow: 0 0 8px rgba(255, 232, 0, 0.9); /* little yellow glow on hover */
}

/* ---------- GALLERY SECTION SEPARATORS ---------- */
/* Usage: <h2 class="vid-divider"><span>Remasters</span></h2>
   above each .video-grid block */
.vid-divider {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    max-width: 1400px;
    margin: 3.5rem auto 1.2rem;
    padding: 0 2rem;
}
/* Dashed pink rules running out to both edges */
.vid-divider::before,
.vid-divider::after {
    content: "";
    flex: 1;
    border-top: 4px dashed var(--mag-pink);
}
/* The title: Breton Black, yellow with pink extrude, star-flanked */
.vid-divider span {
    font-family: 'Breton', 'Arial Narrow', Arial, sans-serif;
    font-weight: 900;
    font-size: 2.2rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--mag-yellow);
    text-shadow: 3px 3px 0 var(--mag-pink), 5px 5px 0 var(--mag-pink-dark);
    transform: rotate(-1deg);
}
/* Flat yellow stars hugging the title */
.vid-divider span::before { content: "★ "; text-shadow: none; }
.vid-divider span::after  { content: " ★"; text-shadow: none; }

@media (max-width: 768px) {
    .vid-divider { padding: 0 1rem; margin: 2.5rem auto 1rem; gap: 0.8rem; }
    .vid-divider span { font-size: 1.5rem; letter-spacing: 1px; }
}

/* OPTIONAL STICKER VARIANT — if you'd rather have the title on a
   pink sticker than floating yellow text, swap the ".vid-divider span"
   rule above for this one:
.vid-divider span {
    font-family: 'Breton', 'Arial Narrow', Arial, sans-serif;
    font-weight: 900;
    font-size: 1.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    background: var(--mag-pink);
    color: #ffffff;
    border: 3px solid var(--ink);
    box-shadow: 6px 6px 0 var(--ink);
    padding: 0.25em 0.8em;
    transform: rotate(-1.5deg);
    text-shadow: none;
}
*/
/* ---------- CASCADE PATCH ---------- */
/* Stops the global a:hover rule painting the taped cutout's
   text white-on-yellow and glowing up the glossy buttons */
a.cutout:hover, a.cutout:active {
    color: var(--ink);
    text-shadow: none;
}
.btn:hover, .btn:active {
    color: #ffffff;
    text-shadow: none;
}