/*
  ============================================================
  YOUR SITE — style.css
  ============================================================

  This file controls everything visual: colors, fonts,
  spacing, layout, borders, glows.

  HOW TO FIND THINGS:
  Use Ctrl+F / Cmd+F to search.

    Search "EDIT:"   to find values you might want to tweak
    Search "ASSET:"  to find image file references

  SECTIONS IN THIS FILE:
    1.  Variables       — all colors and fonts in one place
    2.  Reset           — clears browser defaults
    3.  Base            — body, links, images
    4.  Phosphor tint   — the green CRT cast over the page
    5.  Scanlines       — the animated line effect
    6.  Page wrapper    — the fixed-width centering container
    7.  Banner          — top header image area
    8.  Navigation      — the link bar below the banner
    9.  Body row        — the sidebar + main content layout
    10. Sidebar         — left column styles
    11. Section shared  — rules applied to ALL content sections
    12. About section
    13. Discography / Music section
    14. Live / Shows section
    15. Contact section
    16. Footer
    17. Shared components — pixel labels, quotes, rules, badges
    18. Animations
    19. Mobile / responsive overrides
  ============================================================
*/

/* ============================================================
  1. VARIABLES
  Change a value here and it updates everywhere it's used.
  ============================================================ */

:root {
    /* --- COLORS --- */
    /* EDIT: Tweak any of these to shift the palette */
    --bg: #0a0a0f; /* near-black: page background */
    --surface: #12121e; /* slightly lighter: sidebar, nav, footer */
    --green: #39ff14; /* acid green: links, titles, active states */
    --violet: #7b2fff; /* UV violet: borders, glows, dividers */
    --orange: #ff6b00; /* cathode orange: dates, heat accents */
    --teal: #00cfcf; /* spectral teal: visited links, sigils */
    --white: #e8e4d9; /* off-white: all body text */
    --grey: #7a8090; /* blue-grey: secondary text, meta */

    /* --- GLOW PRESETS --- */
    /* Used as text-shadow and box-shadow values */
    --glow-g: 0 0 6px #39ff14, 0 0 18px rgba(57, 255, 20, 0.35);
    --glow-v: 0 0 6px #7b2fff, 0 0 18px rgba(123, 47, 255, 0.35);
    --glow-t: 0 0 6px #00cfcf, 0 0 14px rgba(0, 207, 207, 0.3);
    --glow-o: 0 0 6px #ff6b00, 0 0 18px rgba(255, 107, 0, 0.35);

    /* --- FONTS --- */
    --font-display: "VT323", monospace; /* hero titles */
    --font-heading: "Orbitron", sans-serif; /* nav, section heads */
    --font-body: "Share Tech Mono", monospace; /* all body text */
    --font-pixel: "Press Start 2P", cursive; /* small labels/badges */
    --font-spiritual: "Cinzel", serif; /* quotes, epigraphs */
}

/* ============================================================
  HIDDEN UTILITY CLASS
  Adding class="hidden" to any element makes it completely
  invisible — it takes up no space and has no effect on layout.

  Used to hide optional sections (Discography, Live Dates,
  Affiliates) when you have nothing to put in them yet.

  TO HIDE A SECTION:    add    hidden    to its class attribute
  TO RESTORE A SECTION: remove hidden   from its class attribute

  Example:
    VISIBLE: <div class="content-section" id="music">
    HIDDEN:  <div class="content-section hidden" id="music">
  ============================================================ */

.hidden {
    display: none;
}

/* ============================================================
  2. RESET
  Clears browser margin/padding defaults so our layout is
  consistent across Chrome, Firefox, Safari, etc.
  ============================================================ */

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

html {
    scroll-behavior: smooth; /* smooth scroll when clicking anchor links */
}

/* ============================================================
  3. BASE STYLES
  ============================================================ */

body {
    background-color: var(--bg);
    color: var(--white);
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.6;

    /*
    Noise grain — a tiny SVG rendered as a data URI.
    Tiles over the whole page at very low opacity.
    Simulates phosphor grain / CRT noise.
    No external file needed.

    EDIT: Change opacity='.055' to adjust grain intensity.
    Set to 0 to disable grain entirely.
  */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 300px 300px;
}

/*
  ASSET: T-01 — if you make a real scanned grain texture,
  you can replace the data URI above with:
    background-image: url('assets/textures/t01-noise.png');
  and remove the background-size line (or set it to your tile size).
*/

a {
    color: var(--green);
    text-decoration: underline;
}

a:visited {
    color: var(--teal);
}

a:hover {
    color: var(--green);
    text-shadow: var(--glow-g);
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* ============================================================
  4. PHOSPHOR TINT
  A faint green cast over the entire page — simulates the
  colour of a CRT phosphor screen in a dark room.
  Implemented as a fixed pseudo-element so it covers
  everything including while scrolling.

  EDIT: Adjust the rgba alpha (currently .025) to strengthen
  or weaken the tint. Set to 0 to disable it.
  ============================================================ */

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9998;
    background: rgba(57, 255, 20, 0.025);
    mix-blend-mode: screen;
}

/* ============================================================
  5. SCANLINES
  Applied selectively — only on elements with the
  class="has-scanlines" attribute. Text areas are NOT affected.

  Elements that have scanlines applied in index.html:
    #banner-bg, #sidebar-anim, .section-head-bar,
    .img-box, .release-thumb

  To add scanlines to any other element:
    Add class="has-scanlines" to it in index.html.

  To remove scanlines from a specific element:
    Remove class="has-scanlines" from it in index.html.

  EDIT: Adjust the rgba alpha on line ~4 of ::after to
  change scanline intensity. Currently .55 (quite heavy).

  The jumpiness/stutter is intentional — background-position
  animation on CSS gradients misfires across browsers,
  producing an irregular broken drift. That is the look.
  ============================================================ */

.has-scanlines {
    position: relative; /* required for the ::after to position inside it */
}

.has-scanlines::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 10;
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 1px,
        rgba(0, 0, 0, 0.55) 1px,
        /* EDIT: change .55 to adjust darkness of lines */ rgba(0, 0, 0, 0.55)
            2px
    );
    animation: scan-drift 12s linear infinite; /* EDIT: change 12s to adjust speed */
}

/* ============================================================
  6. PAGE WRAPPER
  Everything sits inside a fixed-width centered column.
  780px is the classic late-90s "safe" width.

  EDIT: Change 780px if you want a wider or narrower layout.
  If you go wider, update the @media breakpoint below too.
  ============================================================ */

#page-wrap {
    width: 780px;
    margin: 0 auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

@media (max-width: 820px) {
    #page-wrap {
        width: 100%;
        padding: 0 8px;
    }
}

/* ============================================================
  7. BANNER
  The full-width header image at the very top.
  ============================================================ */

#top-banner {
    width: 100%;
    background: #06060c;
    border: 2px solid var(--violet);
    border-bottom: none; /* nav bar provides the bottom border */
    box-shadow:
        0 0 24px rgba(123, 47, 255, 0.4),
        inset 0 0 40px rgba(10, 10, 15, 0.8);
    overflow: hidden;
}

#banner-bg {
    width: 100%;
    height: 220px; /* EDIT: change this to make the banner taller or shorter */
    position: relative;
    overflow: hidden;

    /* ASSET: R-01 hero render. Drop r01-hero.jpg into assets/renders/ to activate. */
    background-image: url('assets/renders/r01-hero.jpg');
    background-size: cover;
    background-position: center;
}

/* Subtle perspective grid over the banner */
#banner-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(
            90deg,
            rgba(123, 47, 255, 0.09) 0px,
            transparent 1px,
            transparent 52px
        ),
        repeating-linear-gradient(
            0deg,
            rgba(123, 47, 255, 0.09) 0px,
            transparent 1px,
            transparent 52px
        );
    mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 55%);
    pointer-events: none;
}

#banner-sigil {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -60%);
    width: 200px;
    height: 200px;
    opacity: 0.85;
    filter: drop-shadow(0 0 12px var(--orange))
        drop-shadow(0 0 30px rgba(255, 107, 0, 0.35));
}

/* Title text block inside the banner */
#banner-title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    padding: 60px 20px 18px;
    /* gradient ensures text is always readable over the image */
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(6, 6, 12, 0.95) 70%
    );
}

#banner-title h1 {
    font-family: var(--font-display);
    font-size: 5.5rem; /* EDIT: adjust banner title size */
    color: var(--green);
    text-shadow: var(--glow-g);
    letter-spacing: 0.06em;
    line-height: 1;
    text-shadow:
        0 0 2px #39ff14,
        0 0 40px rgba(57, 255, 20, 0.2);
}

/* Banner title is a home link — keep it looking like a title, not a hyperlink */
#banner-home-link {
    color: inherit;
    text-decoration: none;
}
#banner-home-link:visited {
    color: inherit;
}
#banner-home-link:hover {
    color: inherit;
    text-shadow: inherit;
    text-decoration: none;
}

#banner-subtitle {
    font-family: var(--font-spiritual);
    font-style: italic;
    font-size: 0.95rem;
    color: var(--white);
    letter-spacing: 0.1em;
    opacity: 0.75;
    margin-top: 4px;
}

/* ============================================================
  8. NAVIGATION BAR
  ============================================================ */

#main-nav {
    width: 100%;
    background: var(--surface);
    border: 2px solid var(--violet);
    border-top: none; /* banner above provides the top border */
    box-shadow: 0 4px 20px rgba(123, 47, 255, 0.25);
    text-align: center;
}

#main-nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

#main-nav li {
    border-right: 1px solid rgba(123, 47, 255, 0.4);
}

#main-nav li:last-child {
    border-right: none;
}

#main-nav a {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.65rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--grey);
    text-decoration: none;
    padding: 10px 22px;
    transition:
        background 0.15s,
        color 0.15s;
}

#main-nav a:hover,
#main-nav a:focus {
    background: rgba(57, 255, 20, 0.08);
    color: var(--green);
    text-shadow: var(--glow-g);
}

#main-nav a:visited {
    color: var(--grey); /* override default visited colour in nav */
}

/* ============================================================
  9. BODY ROW — sidebar + main content
  ============================================================ */

#body-row {
    display: flex;
    flex: 1; /* grows to fill space between banner and footer */
    align-items: stretch;
    border-left: 2px solid var(--violet);
    border-right: 2px solid var(--violet);
    border-bottom: 2px solid var(--violet);
}

#main-content {
    flex: 1;
    min-width: 0; /* prevents flex blowout on narrow content */
}

/* Landing page — main content fills sidebar height */
.page-landing #main-content {
    display: flex;
    flex-direction: column;
}

#landing-gif {
    line-height: 0; /* collapse gap below inline img */
}

#landing-gif img {
    width: 100%;
    display: block;
}

/* Landing page — typewriter welcome text */
#welcome-type {
    text-align: center;
    padding: 1.5rem 0 2rem;
    font-family: var(--font-display);
    font-size: 3.5rem;
    letter-spacing: 0.25em;
}

/* On landing page, welcome text grows to fill remaining height */
.page-landing #welcome-type {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

#welcome-text::after {
    content: '_';
    animation: blink 0.65s step-end infinite;
}

.welcome-orange { color: var(--orange); text-shadow: var(--glow-o); }
.welcome-violet { color: var(--violet); text-shadow: var(--glow-v); }
.welcome-teal   { color: var(--teal);   text-shadow: var(--glow-t); }
.welcome-green  { color: var(--green);  text-shadow: var(--glow-g); }

/* ============================================================
  10. SIDEBAR
  ============================================================ */

#sidebar-placeholder {
    display: flex;
    flex-direction: column;
}

#sidebar {
    flex: 1; /* fill the full height of #sidebar-placeholder */
    width: 185px;
    min-width: 185px;
    flex-shrink: 0;
    background: var(--surface);
    border-right: 1px solid rgba(123, 47, 255, 0.5);
    display: flex;
    flex-direction: column;
}

/* Nav block grows to fill space, pushing visitors counter to the bottom */
#sidebar-nav {
    flex: 1;
}

/* Each block/widget inside the sidebar */
.sidebar-block {
    padding: 14px 12px;
    border-bottom: 1px solid rgba(123, 47, 255, 0.3);
}

.sidebar-block:last-child {
    border-bottom: none;
}

/* Sidebar block headings */
.sidebar-title {
    font-family: var(--font-heading);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--teal);
    text-shadow: var(--glow-t);
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(0, 207, 207, 0.25);
}

/* Animated loop slot */
#sidebar-anim {
    padding: 0;
    background: #000;
    border-bottom: 1px solid rgba(123, 47, 255, 0.3);
    text-align: center;
    display: flex;
    justify-content: center;
}

/* The box that contains R-05 or the placeholder SVG */
.anim-placeholder {
    width: 80px;
    height: 80px;
    margin: 0 auto;
    border: 1px solid var(--green);
    box-shadow:
        0 0 12px rgba(57, 255, 20, 0.3),
        inset 0 0 12px rgba(57, 255, 20, 0.05);
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.anim-placeholder svg {
    filter: drop-shadow(0 0 5px var(--green));
}

/*
  When you swap in the real R-05 GIF (an <img> tag),
  the anim-placeholder div goes away. Add this to target
  the image directly if you need to tweak its sizing:

  #sidebar-anim img {
    width: 80px;
    height: 80px;
    display: block;
    margin: 0 auto;
    border: 1px solid var(--green);
    box-shadow: 0 0 12px rgba(57,255,20,.3);
    filter: drop-shadow(0 0 5px var(--green));
  }
*/

/* Sidebar link list */
.sidebar-links {
    list-style: none;
}

.sidebar-links li {
    padding: 3px 0;
    border-bottom: 1px dotted rgba(123, 47, 255, 0.2);
}

.sidebar-links li:last-child {
    border-bottom: none;
}

.sidebar-links a {
    font-size: 0.78rem;
    color: var(--teal);
    text-decoration: none;
    letter-spacing: 0.04em;
}

.sidebar-links a::before {
    content: "\00BB "; /* » character */
    color: var(--violet);
}

.sidebar-links a:hover {
    color: var(--green);
    text-shadow: 0 0 5px var(--green);
}

.sidebar-links a:visited {
    color: var(--teal); /* keep teal in sidebar regardless of visited state */
}

.sidebar-links a.current {
    color: var(--green);
    text-shadow: var(--glow-g);
    pointer-events: none; /* no click on the page you're already on */
}

/* Hit counter */
#hit-counter {
    text-align: center;
}

.counter-label {
    font-family: var(--font-pixel);
    font-size: 0.38rem;
    color: var(--grey);
    letter-spacing: 0.1em;
    margin-bottom: 8px;
}

.counter-digits {
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--orange);
    text-shadow:
        0 0 8px var(--orange),
        0 0 20px rgba(255, 107, 0, 0.3);
    letter-spacing: 0.15em;
    background: #000;
    padding: 4px 10px;
    border: 1px solid rgba(255, 107, 0, 0.4);
    display: inline-block;
}

/* Affiliate badges */
.badge-area {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
}

.badge {
    width: 80px;
    height: 28px;
    border: 1px solid var(--violet);
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-pixel);
    font-size: 0.28rem;
    color: var(--violet);
    text-shadow: 0 0 3px var(--violet);
    letter-spacing: 0.04em;
    text-align: center;
    padding: 2px 4px;
    line-height: 1.4;
}

.badge.green {
    border-color: var(--green);
    color: var(--green);
    text-shadow: 0 0 3px var(--green);
}

.badge.teal {
    border-color: var(--teal);
    color: var(--teal);
    text-shadow: 0 0 3px var(--teal);
}

/* ============================================================
  11. SECTION SHARED STYLES
  Rules applied to ALL content sections (#about, #music, etc.)
  ============================================================ */

.content-section {
    border-bottom: 1px solid rgba(123, 47, 255, 0.3);
}

.content-section:last-child {
    border-bottom: none;
}

/* The coloured heading bar at the top of each section */
.section-head-bar {
    background: linear-gradient(
        90deg,
        var(--surface) 0%,
        rgba(123, 47, 255, 0.15) 50%,
        var(--surface) 100%
    );
    border-bottom: 1px solid rgba(123, 47, 255, 0.5);
    border-top: 1px solid rgba(123, 47, 255, 0.2);
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.section-head-bar h2 {
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--white);
}

/* Small sigil icon to the left of each heading */
.sec-sigil {
    flex-shrink: 0;
    opacity: 1;
    filter: drop-shadow(0 0 4px var(--orange))
        drop-shadow(0 0 10px rgba(255, 107, 0, 0.4));
}

/* Dashed/alternating colour rule under the heading bar */
.section-rule {
    height: 3px;
    background: repeating-linear-gradient(
        90deg,
        var(--violet) 0px,
        var(--violet) 8px,
        transparent 8px,
        transparent 14px,
        var(--teal) 14px,
        var(--teal) 20px,
        transparent 20px,
        transparent 26px
    );
    opacity: 0.5;
}

/* Inner padding for section content */
.section-body {
    padding: 20px 18px;
}

/* Clears floated elements (used in the about section) */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* ============================================================
  12. ABOUT SECTION
  ============================================================ */

/* Left-floated image container */
#about-img-float {
    float: left;
    margin: 0 18px 12px 0;
    width: 160px;
}

.img-box {
    width: 160px;
    height: 200px;
    border: 2px solid var(--violet);
    box-shadow:
        3px 3px 0 var(--violet),
        0 0 20px rgba(123, 47, 255, 0.2);
    background: linear-gradient(145deg, #0d0a1a 0%, #1a1030 60%, #0a1020 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.img-box::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse at 50% 50%,
        rgba(0, 207, 207, 0.07) 0%,
        transparent 70%
    );
    pointer-events: none;
}

/* The SVG placeholder inside .img-box */
.img-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.img-caption {
    font-size: 0.72rem;
    color: var(--grey);
    text-align: center;
    margin-top: 5px;
    font-style: italic;
    letter-spacing: 0.04em;
}

#about .section-body p {
    margin-bottom: 0.9em;
    font-size: 0.88rem;
}

/* Live rig list */
.rig-section {
    margin-top: 1.4rem;
}

.rig-heading {
    font-family: var(--font-heading);
    color: var(--teal);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    margin-bottom: 0.7rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid rgba(0, 207, 207, 0.2);
}

.rig-list {
    list-style: none;
    padding: 0;
}

.rig-list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.3rem 0;
    border-bottom: 1px dotted rgba(123, 47, 255, 0.15);
    font-size: 0.88rem;
}

.rig-list li:last-child {
    border-bottom: none;
}

.rig-item {
    color: var(--white);
    font-family: var(--font-body);
}

.rig-role {
    color: var(--grey);
    font-size: 0.8rem;
}

/* ============================================================
  13. DISCOGRAPHY / MUSIC SECTION
  ============================================================ */

.discog-table {
    width: 100%;
    border-collapse: collapse;
}

.discog-table thead tr {
    background: rgba(123, 47, 255, 0.12);
    border-bottom: 1px solid rgba(123, 47, 255, 0.5);
}

.discog-table th {
    font-family: var(--font-heading);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--teal);
    text-shadow: var(--glow-t);
    padding: 8px 10px;
    text-align: left;
}

.discog-table td {
    padding: 10px 10px;
    font-size: 0.83rem;
    border-bottom: 1px solid rgba(123, 47, 255, 0.15);
    vertical-align: middle;
}

.discog-table tr:hover td {
    background: rgba(57, 255, 20, 0.04);
}

.discog-table tr:last-child td {
    border-bottom: none;
}

/* Thumbnail cell */
.td-thumb {
    width: 54px;
}

/* The coloured square that holds release artwork */
.release-thumb {
    width: 44px;
    height: 44px;
    border: 1px solid rgba(123, 47, 255, 0.5);
    box-shadow: 2px 2px 0 rgba(123, 47, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

/* Colour variants for release thumbnails */
.rt1 {
    background: radial-gradient(
        ellipse at 40% 40%,
        rgba(123, 47, 255, 0.6) 0%,
        #000 70%
    );
}
.rt2 {
    background: radial-gradient(
        ellipse at 60% 40%,
        rgba(0, 207, 207, 0.5) 0%,
        #000 70%
    );
}
.rt3 {
    background: radial-gradient(
        ellipse at 50% 60%,
        rgba(57, 255, 20, 0.4) 0%,
        #000 70%
    );
}
.rt4 {
    background: radial-gradient(
        ellipse at 30% 50%,
        rgba(255, 107, 0, 0.5) 0%,
        #000 70%
    );
}

/* Release title and sub-description */
.td-title strong {
    display: block;
    color: var(--white);
    font-weight: normal;
    letter-spacing: 0.04em;
    font-size: 0.88rem;
}

.td-title span {
    font-size: 0.75rem;
    color: var(--grey);
}

/* Year column */
.td-year {
    width: 56px;
    color: var(--orange);
    font-size: 0.82rem;
    letter-spacing: 0.06em;
}

/* Label column */
.td-label {
    font-size: 0.8rem;
    color: var(--grey);
}

/* Play link column */
.td-link a {
    font-family: var(--font-heading);
    font-size: 0.55rem;
    letter-spacing: 0.14em;
    color: var(--green);
    border: 1px solid var(--green);
    padding: 3px 8px;
    text-decoration: none;
    white-space: nowrap;
    display: inline-block;
}

.td-link a:hover {
    background: var(--green);
    color: var(--bg);
    text-shadow: none;
}

/* The NEW badge that appears next to a release title */
.new-badge {
    font-family: var(--font-pixel);
    font-size: 0.35rem;
    background: var(--orange);
    color: #000;
    padding: 2px 5px;
    letter-spacing: 0.06em;
    text-shadow: none;
    vertical-align: middle;
    margin-left: 6px;
}

/* ============================================================
  14. LIVE / SHOWS SECTION
  ============================================================ */

.show-list {
    list-style: none;
}

.show-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0;
    width: 100%;
    padding: 8px 0;
    border-bottom: 1px dotted rgba(123, 47, 255, 0.25);
    font-size: 0.85rem;
}

.show-row:last-child {
    border-bottom: none;
}

.s-date {
    font-family: var(--font-body);
    color: var(--orange);
    min-width: 106px;
    font-size: 0.83rem;
    flex-shrink: 0;
    letter-spacing: 0.03em;
}

.s-pipe {
    color: rgba(123, 47, 255, 0.5);
    padding: 0 6px;
    flex-shrink: 0;
}

.s-venue {
    font-family: var(--font-heading);
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--white);
    flex: 0 0 180px;
}

.s-city {
    color: var(--grey);
    font-size: 0.8rem;
    padding: 0 10px;
    min-width: 100px;
    flex: 1;
}

.s-ticket a {
    font-family: var(--font-heading);
    font-size: 0.5rem;
    letter-spacing: 0.12em;
    color: var(--green);
    text-decoration: none;
    border: 1px solid rgba(57, 255, 20, 0.4);
    padding: 2px 6px;
}

.s-ticket a:hover {
    background: var(--green);
    color: #000;
}

/* Past shows — greyed out and date struck through */
.show-row.past {
    opacity: 0.36;
    pointer-events: none;
}

.show-row.past .s-date {
    text-decoration: line-through;
}

/* ============================================================
  15. CONTACT SECTION
  ============================================================ */

.contact-line {
    color: var(--grey);
    font-size: 0.85rem;
    margin-bottom: 0.6rem;
}

.contact-email a {
    font-family: var(--font-body);
    color: var(--teal);
    text-decoration: none;
    font-size: 1rem;
    letter-spacing: 0.04em;
}

.contact-email a:hover {
    color: var(--orange);
}

/* ============================================================
  16. FOOTER
  ============================================================ */

#site-footer {
    background: var(--surface);
    border-top: 2px solid var(--violet);
    box-shadow: 0 -2px 20px rgba(123, 47, 255, 0.2);
    padding: 20px 16px;
    text-align: center;
}

#footer-copy {
    display: block;
    font-size: 0.75rem;
    color: var(--grey);
    letter-spacing: 0.07em;
    margin-top: 8px;
}

/* ============================================================
  17. SHARED COMPONENTS
  Small elements used across multiple sections.
  ============================================================ */

/* Press Start 2P small label / badge */
.pixel-label {
    font-family: var(--font-pixel);
    font-size: 0.5rem;
    color: var(--green);
    text-shadow: 0 0 4px var(--green);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    display: inline-block;
}

/* Row of decorative pixel characters used as a divider */
.pixel-divider {
    text-align: center;
    margin: 16px 0 8px;
    font-family: var(--font-pixel);
    font-size: 0.5rem;
    color: var(--violet);
    text-shadow: 0 0 4px var(--violet);
    letter-spacing: 0.4em;
    opacity: 0.6;
    user-select: none;
}

/* ============================================================
  18. ANIMATIONS
  ============================================================ */

@keyframes blink {
    50% { opacity: 0; }
}

/* The deliberately broken scanline drift */
@keyframes scan-drift {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 0 80px;
    }
}

/* ============================================================
  19. MOBILE / RESPONSIVE
  These rules only activate when the screen is narrower
  than the breakpoint value. They override the rules above.
  ============================================================ */

/* Tablet — sidebar stacks above main content */
@media (max-width: 700px) {
    #body-row {
        flex-direction: column;
    }

    #sidebar {
        width: 100%;
        min-width: unset;
        border-right: none;
        border-bottom: 1px solid rgba(123, 47, 255, 0.5);
    }

    /* Side-by-side badges on sidebar in tablet view */
    .badge-area {
        flex-direction: row;
    }
}

/* Mobile — tighten up show rows, reduce nav padding */
@media (max-width: 500px) {
    #main-nav a {
        padding: 9px 12px;
        font-size: 0.55rem;
    }

    .show-row {
        flex-direction: column;
        gap: 2px;
        padding: 10px 0;
    }

    .s-pipe {
        display: none;
    }

    .s-city {
        padding: 0;
    }

    #banner-title h1 {
        font-size: 3.5rem;
    }
}


/* ============================================================
   BLOG — post previews, archive tree, individual posts
   ============================================================ */

/* Post preview cards (blog.html) */
.post-preview { display: block; text-decoration: none; margin-bottom: 1.6rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--violet); }
.post-preview-title { font-family: var(--font-body); color: var(--orange); font-size: 1rem; display: block; }
.post-preview:hover .post-preview-title { text-shadow: var(--glow-o); }
.post-preview-date { font-family: var(--font-body); color: var(--teal); font-size: 0.75rem; margin: 0.2rem 0 0.5rem; }
.post-preview-excerpt { color: var(--white); font-size: 0.9rem; line-height: 1.5; }

/* Archive tree (details/summary, no JS) */
.archive-tree { margin-top: 2rem; }
.archive-tree summary { font-family: var(--font-body); color: var(--violet); cursor: pointer; user-select: none; }
.archive-tree ul { list-style: none; padding-left: 1rem; margin: 0.4rem 0; }
.archive-tree li a { color: var(--white); text-decoration: none; font-size: 0.85rem; }
.archive-tree li a:hover { color: var(--orange); }

/* Individual post page */
.post-meta { font-family: var(--font-body); color: var(--teal); font-size: 0.8rem; margin-bottom: 1.5rem; }
.post-content { color: var(--white); line-height: 1.7; font-size: 0.95rem; }
.post-content h1 { font-family: var(--font-body); color: var(--orange); font-size: 1.2rem; margin: 1.5rem 0 0.5rem; }
.post-content h2 { font-family: var(--font-body); color: var(--orange); font-size: 1.05rem; margin: 1.3rem 0 0.4rem; }
.post-content h3 { font-family: var(--font-body); color: var(--orange); font-size: 0.95rem; margin: 1.1rem 0 0.3rem; }
.post-content p { margin-bottom: 1rem; }
.post-content ul, .post-content ol { margin: 0 0 1rem 1.4rem; }
.post-content li { margin-bottom: 0.25rem; }
.post-content a { color: var(--violet); }
.post-content a:hover { color: var(--orange); }
.post-content code { background: rgba(255,255,255,0.05); padding: 0.1em 0.4em; border-radius: 3px; font-family: var(--font-body); font-size: 0.85em; }
.post-content pre { background: rgba(0,0,0,0.4); border: 1px solid var(--violet); padding: 1rem; overflow-x: auto; margin-bottom: 1rem; }
.post-content pre code { background: none; padding: 0; }
.post-content blockquote { border-left: 3px solid var(--violet); margin-left: 0; padding-left: 1rem; color: rgba(232,228,217,0.7); }

/* Tables in post content */
.post-content table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; font-size: 0.88rem; }
.post-content th { font-family: var(--font-body); color: var(--teal); text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--violet); }
.post-content td { padding: 6px 10px; border-bottom: 1px dotted rgba(123,47,255,0.25); }
.post-content tr:last-child td { border-bottom: none; }

/* Post navigation */
.post-nav { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--violet); }
.post-nav a { font-family: var(--font-body); color: var(--teal); text-decoration: none; font-size: 0.85rem; }
.post-nav a:hover { color: var(--orange); }

/* ============================================================
  PAGE INTRO — short blurb at top of friends.html, tools.html
  ============================================================ */

.page-intro {
    color: var(--grey);
    font-size: 0.85rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid rgba(123, 47, 255, 0.25);
}

.page-intro a {
    color: var(--teal);
    text-decoration: none;
}

.page-intro a:hover {
    color: var(--orange);
}

/* ============================================================
  TOOL CATEGORIES — tools.html
  ============================================================ */

.tool-category {
    margin-bottom: 2rem;
}

.tool-category-heading {
    font-family: var(--font-heading);
    color: var(--teal);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    margin-bottom: 0.6rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid rgba(0, 207, 207, 0.2);
}

/* ============================================================
  LINK BOXES — links.html and card.html
  ============================================================ */

.link-box {
    display: block;
    padding: 1rem 1.2rem;
    margin-bottom: 0.75rem;
    border: 1px solid var(--violet);
    background: var(--surface);
    text-decoration: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.link-box:hover {
    border-color: var(--orange);
    box-shadow: 0 0 14px rgba(255, 107, 0, 0.2);
}
.link-box-name {
    font-family: var(--font-heading);
    color: var(--orange);
    font-size: 0.82rem;
    letter-spacing: 0.1em;
}
.link-box-desc {
    font-family: var(--font-body);
    color: var(--grey);
    font-size: 0.78rem;
    margin-top: 0.3rem;
}

/* ============================================================
  CARD PAGE — card.html
  Standalone shareable links page, no sidebar.
  ============================================================ */

.page-card #page-wrap {
    width: 480px;
}
@media (max-width: 520px) {
    .page-card #page-wrap { width: 100%; }
}
.page-card #banner-bg {
    height: 160px;
}
.page-card #banner-subtitle {
    display: none;
}
/* Remove scanline animation from banner on card page */
.page-card #banner-bg.has-scanlines::after {
    display: none;
}
/* Keep name on one line at the narrower card width */
.page-card #banner-title h1 {
    font-size: 2.8rem;
    white-space: nowrap;
}
#card-links {
    padding: 1.5rem 1rem 2rem;
}
#card-back {
    text-align: center;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(123, 47, 255, 0.3);
}
#card-back a {
    font-family: var(--font-body);
    color: var(--teal);
    text-decoration: none;
    font-size: 0.85rem;
}
#card-back a:hover { color: var(--orange); }