/* ===== CSS VARIABLES (tweak per issue) ===== */
    :root{
      --bg: #0a0a0a;
      --fg: #f5f5f5;
      --muted: #b9b9b9;
      --accent: #3b82f6;   /* links / highlights */
      --accent-2: #ec4899; /* subtle pride pop option */
      --paper: #111;       /* page panels */
      --tape: #e5e7eb;     /* for the “tape” on images */
      --maxw: 1100px;
      --gutter: 1.1rem;
    }

    html, body { height: 100%; }
    body{
      margin:0; color:var(--fg); background:var(--bg);
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell,
                   Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
      line-height:1.6;
    }
    a{ color:var(--accent); text-decoration: underline; text-decoration-thickness: .08em; }
    a:hover{ text-decoration: none; }

    /* ===== LAYOUT ===== */
    .wrap{ max-width:var(--maxw); margin-inline:auto; padding: clamp(12px, 3vw, 32px); }

    header.cover{
      position: relative; border:2px solid var(--fg); background:var(--paper);
      min-height:40vh; display:grid; place-items:center; overflow:hidden;
    }
    .cover-img{ position:absolute; inset:0; object-fit:cover; width:100%; height:100%; object-position: 50% 35%; filter:contrast(1.1) saturate(0.9) brightness(0.9); opacity:.45; }

    .cover-inner{ position:relative; z-index:1; text-align:center; padding:clamp(12px,3vw,32px); }
    .title{
      display:inline-block; text-transform:lowercase; font-style:italic; font-weight:800;
      font-size: clamp(28px, 6vw, 64px); letter-spacing: .5px;
      border: 3px solid var(--fg); padding:.35em .5em; background: rgba(0,0,0,.55);
    }
    .subtitle{ margin-top:.7rem; color:var(--muted); font-size: clamp(14px, 2.6vw, 18px); }

    /* quick meta strip */
    .meta{ display:flex; gap:.8rem; flex-wrap:wrap; color:var(--muted); font-size:.9rem; padding:.6rem 0 0; }
    .badge{ border:1px solid var(--muted); padding:.1rem .45rem; border-radius:999px; }

    /* ===== PAGE GRID ===== */
    .grid{
      display:grid; gap: var(--gutter);
      grid-template-columns: 1fr; /* mobile first */
    }
    @media (min-width: 860px){
      .grid{ grid-template-columns: 2fr 1fr; align-items:start; }
      .sidebar{ position: sticky; top: 12px; }
    }

    .panel{ background:var(--paper); border:2px solid var(--fg); padding:clamp(12px,2.2vw,22px); }
    .panel + .panel{ margin-top: var(--gutter); }

    /* In‑This‑Issue list */
    .toc{ list-style:none; padding:0; margin:.4rem 0 0 0; }
    .toc li{ margin:.25rem 0; }
    .toc a{ text-decoration:none; border-bottom:1px dotted var(--accent); }
    .toc a:hover{ border-bottom-style:solid; }

    /* Headings */
    h2, h3{ margin: .1rem 0 .4rem; text-transform: lowercase; font-style: italic; }
    h2{ font-size: clamp(20px, 3.2vw, 28px); }
    h3{ font-size: clamp(18px, 2.6vw, 22px); color: var(--muted); }

    /* Polaroid-style figure */
    figure.polaroid{ background:#fff; color:#111; border:1px solid #ddd; width:min(100%, 520px);
      margin: 1rem auto; box-shadow:0 10px 24px rgba(0,0,0,.35); position:relative; }
    figure.polaroid img{ display:block; width:100%; height:auto;  object-fit:cover; }
    figure.polaroid figcaption{ font-family: "Patrick Hand", system-ui, sans-serif; /* falls back if not loaded */
      font-size: .95rem; padding:.8rem .9rem 1.1rem; }
    .tape{ position:absolute; width:70px; height:18px; background:var(--tape); opacity:.8; transform:rotate(-6deg); top:10px; left:10px; box-shadow:0 2px 6px rgba(0,0,0,.25); }
    .tape.right{ left:auto; right:16px; transform: rotate(8deg); }

    /* List components */
    .playlist ol{ padding-left: 1.2rem; }
    .rec-list{ list-style:none; padding:0; margin:0; }
    .rec-list li + li{ margin-top:.5rem; }

    /* “Randomness” bucket */
    .randomness{ display:grid; gap: .8rem; }
    .note{
      border:1px dashed var(--fg); padding:.6rem .8rem; font-size:.95rem; background: repeating-linear-gradient( 0deg, rgba(255,255,255,.03), rgba(255,255,255,.03) 2px, transparent 2px, transparent 24px );
    }

    /* Back page / signoff */
    footer.back{ margin: 1.2rem 0 3rem; text-align:center; color:var(--muted); }
    .stamp{ display:inline-block; border:2px solid var(--fg); padding:.35rem .7rem; transform: rotate(-2deg);
            text-transform:uppercase; letter-spacing:.12em; font-weight:700; }

    /* Print friendly */
    @media print{
      body{ background:#fff; color:#000; }
      .panel, header.cover{ page-break-inside: avoid; border-color:#000; background:#fff; }
      a{ color:#000; text-decoration: underline; }
      .cover-img{ display:none; }
    }

    .sparkle *{ filter: drop-shadow(0 0 0.25rem rgba(236,72,153,.35)); }

    ul{list-style-type:none;}
    
    li{margin-top:10px; margin-bottom:10px;}