:root {
    --hot:    #FF2E93;
    --pink-l: #FFB8D8;
    --red:    #E11D24;
    --red-d:  #A6121A;
    --black:  #0A0A0A;
    --ink:    #161514;
    --char:   #2A2725;
    --cream:  #F2E7C9;
    --off:    #FAF6E8;
  }

  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; min-height: 100%; }
  body {
    font-family: "IM Fell English", Georgia, serif;
    background: var(--cream);
    color: var(--ink);
    overflow-x: hidden;
    min-height: 100vh;
  }

  /* Newsprint texture */
  body::before {
    content: "";
    position: fixed; inset: 0;
    pointer-events: none; z-index: 1000;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='n'><feTurbulence baseFrequency='0.85' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0 0.06 0'/></filter><rect width='400' height='400' filter='url(%23n)'/></svg>");
    background-size: 240px 240px;
    mix-blend-mode: multiply;
    opacity: 0.5;
  }

  /* Diagonal red stripes accent in upper-left */
  body::after {
    content: "";
    position: fixed;
    top: -100px; left: -100px;
    width: 380px; height: 380px;
    background: repeating-linear-gradient(
      135deg,
      var(--red) 0 18px,
      transparent 18px 28px
    );
    opacity: 0.18;
    pointer-events: none;
    z-index: 0;
  }

  .page {
    position: relative;
    min-height: 100vh;
    z-index: 1;
    display: grid;
    grid-template-rows: auto 1fr auto;
  }

  /* ===== Top bar ===== */
  .topbar {
    border-bottom: 4px solid var(--black);
    background: var(--black);
    color: var(--off);
  }
  .topbar-inner {
    max-width: 1280px; margin: 0 auto;
    padding: 14px 32px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px;
  }
  .site-nav {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
    gap: 10px 18px;
  }
  .nav-link {
    font-family: "Archivo Black", sans-serif;
    font-size: 14px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--off);
    text-decoration: none;
    padding: 8px 14px;
    border: 2px solid var(--hot);
    background: transparent;
    transition: background .12s, color .12s, transform .12s;
  }
  .nav-link:hover {
    background: var(--hot);
    color: var(--black);
    transform: rotate(-2deg);
  }
  .nav-link:focus-visible,
  .btn:focus-visible,
  .episode-card-link:focus-visible,
  .footer-brand:focus-visible,
  .soc:focus-visible {
    outline: 3px solid var(--hot);
    outline-offset: 4px;
  }
  .mark {
    display: flex; align-items: center; gap: 12px;
    font-family: "Bowlby One SC", sans-serif;
    font-size: 18px; letter-spacing: -0.02em;
    color: var(--off);
  }
  .mark .glyph {
    width: 32px; height: 32px;
    background: var(--hot); color: var(--black);
    display: grid; place-items: center;
    font-family: "Archivo Black", sans-serif;
    border: 2px solid var(--off);
    transform: rotate(-4deg);
    font-size: 14px;
  }
  .mark .pink { color: var(--hot); }

  /* ===== Hero / Main ===== */
  /* .main plays all three roles the outer hero/centered container/two-column
     grid would separately have in a deeper markup: it IS the hero section,
     its own max-width:1280px centered container, and the 2-column grid.
     min-width: 0 prevents its own intrinsic content (including the banner
     image) from being able to force it wider than its own constraints. */
  /* .main is both the outer hero section and its own centered 1280px
     container — there is no separate inner wrapper in this markup.
     isolation: isolate contains the ::before's z-index: -1 to this element's
     own stacking context (so it can't slip behind unrelated siblings like
     the header), and background-color is the fallback shown only if the
     image fails to load or before it decodes. */
  .main {
    max-width: 1280px;
    margin: 0 auto;
    padding: 56px 32px 72px;
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 64px;
    align-items: center;
    position: relative;
    isolation: isolate;
    background-color: #111111;
  }

  /* Full-bleed riot-grrrl hero background: breaks out of .main's 1280px
     max-width to span the full viewport (100vw) via the standard
     left:50% + translateX(-50%) breakout technique. At z-index: -1, it
     paints above .main's own background but below all of .main's real
     in-flow content (.hero-top-banner-wrap, .left, .right) — no z-index
     or position changes are needed on those for correct stacking. Bounded
     to .main's own height, so it starts beneath the header and ends at
     .main's bottom edge, before the Episodes section begins. */
  .main::before {
    content: "";
    position: absolute;
    inset: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background-color: #111111;
    background-image: url("../images/wstd-riot-background.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    pointer-events: none;
    z-index: -1;
  }

  /* Burst rays SVG covering the hero — hidden so it doesn't compete with
     the new full-bleed riot-grrrl background image (markup preserved,
     not deleted). */
  .rays {
    display: none;
    position: absolute;
    top: -40px; left: -160px;
    width: 1100px; height: 1100px;
    z-index: -1;
    opacity: 0.85;
    pointer-events: none;
  }
  .rays svg { width: 100%; height: 100%; }

  /* ----- Left column: copy ----- */
  /* .left is the actual direct grid item (child of .main); min-width: 0
     overrides the grid default of min-width: auto, which would otherwise
     let the image's intrinsic width force this column wider. */
  /* align-self: start overrides .main's shared align-items: center for
     this grid item only — .right (taller, containing the player card)
     is untouched, since it already fills the full row height and centering
     an item that fills its row has no visible effect. */
  .left {
    min-width: 0;
    align-self: start;
  }
  /* ----- Full-width top banner -----
     New direct child of .main (the hero grid), placed before .left/.right.
     grid-column: 1/-1 is required in addition to the requested rules below:
     without it, this would auto-place into a single grid cell (column 1)
     and push .left to column 2 / wrap .right to a new row, breaking the
     two-column layout beneath it. */
  .hero-top-banner-wrap {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0 0 32px;
    padding: 0;
    box-sizing: border-box;
    grid-column: 1 / -1;
  }
  .hero-top-banner {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;
    max-height: none;
    margin: 0;
    padding: 0;
    object-fit: contain;
    position: static;
    transform: none;
    box-sizing: border-box;
  }
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .stamp {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: "Archivo Black", sans-serif;
    font-size: 18px; letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #C40A12;
    margin-bottom: 18px;
    text-shadow: 2px 2px 0 rgba(0,0,0,0.08);
  }
  .stamp .dot { color: var(--hot); font-size: 16px; }

  .title {
    font-family: "Archivo Black", sans-serif;
    font-size: clamp(56px, 8vw, 132px);
    line-height: 0.86;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    margin: 0;
    text-wrap: balance;
  }
  .title .line1 { color: var(--black); }
  .title .line2 {
    color: var(--red);
    display: inline-block;
    transform: rotate(-1deg);
    font-family: "Knewave", cursive;
    letter-spacing: 0;
    font-size: 0.78em;
  }
  .title .line3 {
    display: inline-block;
    background: var(--black);
    color: var(--hot);
    padding: 4px 18px;
    transform: rotate(1.5deg);
    margin-top: 6px;
    font-size: clamp(18px, 3.6vw, 34px);
    line-height: 1.3;
    letter-spacing: 0;
    max-width: 100%;
  }

  /* Left-column text recolored for readability against the dark hero
     background (previously inherited body's --ink dark text color,
     designed for the original light hero). */
  .lede {
    margin: 36px 0 0;
    font-family: "IM Fell English", serif;
    font-size: 19px;
    line-height: 1.6;
    letter-spacing: 0.01em;
    max-width: 700px;
    font-weight: 400;
    text-align: left;
    color: #E6C98A;
  }
  .lede a {
    color: #FF5AA5;
  }
  .lede p { margin: 0 0 0.9em; }
  .lede p:last-child { margin-bottom: 0; }
  .lede p:empty { display: none; }
  .lede em { font-style: italic; color: var(--red-d); }

  /* meta line */
  .meta {
    margin: 32px 0 0;
    display: flex; gap: 22px; flex-wrap: wrap;
    font-family: "Special Elite", monospace;
    font-size: 13px; letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #D9B97E;
  }
  .meta .star { color: #FF2E93; }

  /* ----- Hero CTAs ----- */
  .hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 40px;
  }
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: "Archivo Black", sans-serif;
    font-size: 16px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    border: 3px solid var(--black);
    padding: 14px 26px;
    transition: transform .12s, box-shadow .12s, background .12s, color .12s;
  }
  .btn-primary {
    background: var(--hot);
    color: var(--black);
    box-shadow: 6px 6px 0 var(--black);
  }
  .btn-primary:hover {
    background: var(--red);
    transform: translate(-2px, -2px);
    box-shadow: 8px 8px 0 var(--black);
  }
  /* Text color only (per instructions): its transparent background now
     reveals the dark hero, so var(--black) text was unreadable. Border,
     background, shadow, dimensions, and position are all untouched. */
  .btn-secondary {
    background: transparent;
    color: #E8D3A4;
    box-shadow: 6px 6px 0 var(--hot);
  }
  .btn-secondary:hover {
    background: var(--black);
    color: var(--hot);
    transform: translate(-2px, -2px);
    box-shadow: 8px 8px 0 var(--hot);
  }

  /* ===== Episodes ===== */
  .episodes {
    background: var(--cream);
    border-top: 4px solid var(--black);
    padding: 64px 32px 72px;
  }
  .episodes-inner {
    max-width: 1080px;
    margin: 0 auto;
  }
  .episodes-kicker,
  .topics-kicker,
  .about-kicker,
  .contact-kicker {
    font-family: "Special Elite", monospace;
    color: var(--red);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    font-size: 12px;
    margin: 0 0 12px;
  }
  .episodes-inner > h2,
  .topics-inner > h2,
  .about-show h2,
  .contact-hero h1,
  .contact-form-inner h2,
  .contact-reasons-inner h2 {
    font-family: "Archivo Black", sans-serif;
    text-transform: uppercase;
    font-size: clamp(36px, 5vw, 64px);
    line-height: 0.94;
    letter-spacing: -0.03em;
  }
  .episodes-inner > h2,
  .topics-inner > h2 {
    margin: 0 0 48px;
  }
  .contact-hero h1,
  .contact-form-inner h2,
  .contact-reasons-inner h2 {
    margin: 0 0 20px;
  }

  /* Latest episode feature */
  .latest-episode {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 48px;
    align-items: center;
    margin-bottom: 72px;
  }
  .latest-episode-art {
    width: 100%;
    aspect-ratio: 1/1;
  }
  .latest-episode-art img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    border: 4px solid var(--black);
    box-shadow: 8px 8px 0 var(--hot);
  }
  .latest-episode-label {
    font-family: "Special Elite", monospace;
    font-size: 12px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--red);
    margin: 0 0 8px;
  }
  .latest-episode-body h3 {
    font-family: "Archivo Black", sans-serif;
    font-size: clamp(24px, 3vw, 36px);
    line-height: 1.05;
    letter-spacing: -0.01em;
    margin: 0 0 12px;
  }
  .episode-date {
    font-family: "Special Elite", monospace;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--char);
    margin: 0 0 16px;
  }
  .episode-desc {
    font-size: 18px;
    line-height: 1.6;
    margin: 0 0 28px;
  }

  /* Recent episodes */
  .recent-episodes-title {
    font-family: "Archivo Black", sans-serif;
    text-transform: uppercase;
    font-size: clamp(22px, 2.6vw, 30px);
    letter-spacing: -0.01em;
    margin: 0 0 28px;
  }
  .episode-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .episode-card {
    background: var(--off);
    border: 3px solid var(--black);
    box-shadow: 6px 6px 0 var(--black);
  }
  .episode-card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
  }
  .episode-card-art {
    aspect-ratio: 1/1;
    overflow: hidden;
    border-bottom: 3px solid var(--black);
  }
  .episode-card-art img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
  .episode-card-body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .episode-card-title {
    font-family: "Archivo Black", sans-serif;
    font-size: 17px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0;
  }
  .episode-card-desc {
    font-size: 14.5px;
    line-height: 1.5;
    margin: 0;
    color: var(--ink);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .episode-card-link:hover .episode-card-title,
  .episode-card-link:focus-visible .episode-card-title {
    color: var(--red-d);
  }
  @media (max-width: 980px) {
    .episode-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 560px) {
    .latest-episode { grid-template-columns: 1fr; gap: 32px; }
    .episode-grid { grid-template-columns: 1fr; }
    .latest-episode-body .btn-primary { width: 100%; justify-content: center; }
  }

  /* ----- Right column: cover + signup ----- */
  .right {
    position: relative;
    min-width: 0;
    display: flex; flex-direction: column;
    align-items: center;
    gap: 36px;
  }
  /* ----- Newest-episode player card (replaces the old cover-art block) ----- */
  .hero-player-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 20px;
    background: #151515;
    border: 3px solid #FF2E93;
    box-shadow: 8px 8px 0 #0A0A0A;
    color: #F2E7C9;
  }
  .hero-player-kicker {
    margin: 0 0 10px;
    color: #FF2E93;
  }
  .hero-player-title {
    margin: 0 0 16px;
    color: #F2E7C9;
  }
  .hero-player-embed {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
  }
  .hero-player-embed iframe {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: 200px;
    border: 0;
  }
  .hero-player-link {
    display: inline-block;
    margin-top: 12px;
    color: #FF2E93;
  }
  /* ----- Signup card ----- */
  .signup {
    width: 100%;
    max-width: 480px;
    background: var(--off);
    border: 4px solid var(--black);
    box-shadow: 8px 8px 0 var(--black);
    padding: 28px;
    transform: rotate(1deg);
    position: relative;
  }
  .signup .head {
    font-family: "Special Elite", monospace;
    font-size: 12px; letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 8px;
  }
  .signup h2 {
    font-family: "Archivo Black", sans-serif;
    font-size: 28px; line-height: 0.95;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    margin: 0 0 16px;
  }
  .signup h2 em {
    font-style: normal;
    color: var(--red);
    font-family: "Knewave", cursive;
    display: inline-block;
    transform: rotate(-2deg);
    letter-spacing: 0;
  }
  .signup form {
    display: flex;
    gap: 8px;
  }
  .signup input {
    flex: 1 1 auto; min-width: 0;
    padding: 14px 16px;
    border: 2px solid var(--black);
    background: var(--cream);
    font-family: "Special Elite", monospace;
    font-size: 16px;
  }
  .signup input:focus {
    outline: none; background: var(--off);
    box-shadow: inset 0 0 0 2px var(--hot);
  }
  .signup button {
    flex: 0 0 auto;
    font-family: "Archivo Black", sans-serif;
    text-transform: uppercase; letter-spacing: 0.06em;
    background: var(--black); color: var(--hot);
    border: 0;
    padding: 0 22px;
    font-size: 16px;
    cursor: pointer;
    transition: background .12s, color .12s;
  }
  .signup button:hover { background: var(--hot); color: var(--black); }
  .signup .fineprint {
    margin-top: 14px;
    font-family: "Special Elite", monospace;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--char);
    opacity: 0.78;
  }
  .signup .success {
    display: none;
    background: var(--hot);
    color: var(--black);
    padding: 12px 14px;
    font-family: "Archivo Black", sans-serif;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 2px solid var(--black);
    text-align: center;
  }
  .signup.sent form { display: none; }
  .signup.sent .success { display: block; }

  /* ===== Listen Now strip ===== */
  .listen-strip {
    background: var(--black);
    color: var(--off);
    padding: 36px 0 40px;
    border-top: 4px solid var(--hot);
    position: relative;
  }
  .listen-strip::before {
    content: "";
    position: absolute; left: 0; right: 0; top: -4px; height: 4px;
    background: var(--hot);
    filter: url(#torn-edge);
  }
  .listen-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 48px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 36px;
    align-items: center;
  }
  .listen-strip h2 {
    font-family: "Archivo Black", sans-serif;
    text-transform: uppercase;
    font-size: clamp(34px, 4vw, 56px);
    line-height: 0.9;
    letter-spacing: -0.03em;
    margin: 0;
    color: var(--off);
    transform: rotate(-1deg);
  }
  .listen-strip h2 em {
    font-style: normal;
    font-family: "Knewave", cursive;
    color: var(--hot);
    letter-spacing: 0;
    display: inline-block;
    transform: rotate(-2deg);
  }
  .listen-strip h2 .arrow { color: var(--red); margin-left: 8px; }
  .platforms {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .plat {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    background: var(--off);
    color: var(--black);
    padding: 12px 22px 12px 16px;
    border: 3px solid var(--off);
    box-shadow: 5px 5px 0 var(--hot);
    transition: transform .12s, box-shadow .12s, background .12s;
    position: relative;
  }
  .plat:hover {
    transform: translate(-2px, -2px) rotate(-1deg);
    box-shadow: 8px 8px 0 var(--red);
    background: var(--hot);
  }
  .plat .icon {
    width: 42px; height: 42px;
    display: grid; place-items: center;
    flex-shrink: 0;
  }
  .plat .icon svg { width: 100%; height: 100%; display: block; }
  .plat .lbl-row {
    display: flex; flex-direction: column;
    line-height: 1.1;
  }
  .plat .lbl-small {
    font-family: "Special Elite", monospace;
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--char);
  }
  .plat .lbl-big {
    font-family: "Archivo Black", sans-serif;
    font-size: 18px;
    letter-spacing: -0.01em;
    text-transform: uppercase;
  }
  .plat:hover .lbl-small { color: var(--black); }
  @media (max-width: 860px) {
    .listen-inner { grid-template-columns: 1fr; gap: 20px; padding: 0 24px; }
    .platforms { justify-content: flex-start; }
  }

  /* ===== Bottom ticker ===== */
  .ticker {
    background: var(--hot);
    color: var(--black);
    border-top: 4px solid var(--black);
    overflow: hidden; white-space: nowrap;
  }
  .ticker-track {
    display: inline-block;
    padding: 12px 0;
    font-family: "Special Elite", monospace;
    font-size: 14px; letter-spacing: 0.22em;
    text-transform: uppercase;
    animation: scroll 36s linear infinite;
  }
  .ticker-track span { margin: 0 28px; }
  .ticker-track .dot { color: var(--red); }
  @keyframes scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }

  /* ===== Socials row (under Listen Now) ===== */
  .social-row {
    grid-column: 1 / -1;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 2px dashed rgba(250, 246, 232, 0.25);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
  }
  .social-label {
    font-family: "Special Elite", monospace;
    font-size: 12px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--hot);
  }
  .social-icons {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
  }
  .soc {
    width: 52px; height: 52px;
    display: grid; place-items: center;
    border: 3px solid var(--off);
    background: var(--off);
    box-shadow: 4px 4px 0 var(--hot);
    transition: transform .14s, box-shadow .14s;
    text-decoration: none;
  }
  .soc svg { width: 100%; height: 100%; display: block; }
  .soc:nth-child(2n) { transform: rotate(-2deg); }
  .soc:nth-child(3n) { transform: rotate(1.5deg); }
  .soc:hover {
    transform: translate(-3px, -3px) rotate(-4deg);
    box-shadow: 7px 7px 0 var(--red);
  }
  @media (max-width: 600px) {
    .social-row { justify-content: center; text-align: center; }
    .social-icons { justify-content: center; }
  }

  /* ===== Coverage Topics ===== */
  .topics {
    background: var(--off);
    border-top: 4px solid var(--black);
    padding: 64px 32px 72px;
    scroll-margin-top: 100px;
  }
  .topics-inner {
    max-width: 1080px;
    margin: 0 auto;
  }
  .topic-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .topic-card {
    height: 100%;
    background: var(--cream);
    border: 2px solid var(--black);
    border-top: 6px solid var(--hot);
    box-shadow: 4px 4px 0 var(--black);
    padding: 28px 24px;
  }
  .topic-card-title {
    font-family: "Archivo Black", sans-serif;
    text-transform: uppercase;
    font-size: 21px;
    letter-spacing: -0.01em;
    margin: 0 0 12px;
  }
  .topic-card-desc {
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--ink);
    margin: 0;
  }
  @media (max-width: 980px) {
    .topic-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 560px) {
    .topic-grid { grid-template-columns: 1fr; }
    .topics { scroll-margin-top: 180px; }
  }

  /* ===== About / SEO content ===== */
  .about-show {
    background: var(--off);
    border-top: 4px solid var(--black);
    padding: 64px 32px;
  }
  .about-inner {
    max-width: 1080px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.7fr 1.3fr;
    gap: 48px;
    align-items: start;
  }
  .about-show h2 {
    margin: 0;
  }
  .about-copy {
    font-size: 19px;
    line-height: 1.65;
  }
  .about-copy p { margin: 0 0 1em; }
  .about-copy a {
    color: var(--red-d);
    font-weight: 700;
    text-underline-offset: 3px;
  }
  .skip-link {
    position: fixed;
    left: 12px;
    top: -80px;
    z-index: 10000;
    background: var(--hot);
    color: var(--black);
    border: 3px solid var(--black);
    padding: 10px 14px;
    font-family: "Archivo Black", sans-serif;
    text-transform: uppercase;
  }
  .skip-link:focus { top: 12px; }
  @media (max-width: 760px) {
    .about-inner { grid-template-columns: 1fr; gap: 24px; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      scroll-behavior: auto !important;
      transition-duration: 0.01ms !important;
    }
  }

  /* ===== Responsive ===== */
  @media (max-width: 980px) {
    .main {
      grid-template-columns: 1fr;
      gap: 44px;
      padding: 40px 24px 64px;
    }
    .rays { top: -60px; left: -200px; width: 800px; height: 800px; }
  }
  @media (max-width: 700px) {
    .nav-link { padding: 6px 10px; font-size: 12px; }
  }
  @media (max-width: 560px) {
    .topbar-inner { flex-direction: column; gap: 10px; align-items: flex-start; }
    .site-nav { justify-content: flex-start; }
    .signup form { flex-direction: column; }
    .signup button { padding: 14px; }
    .hero-ctas { flex-direction: column; align-items: stretch; }
    .hero-top-banner-wrap { margin-bottom: 20px; }
  }
  /* ===== Contact page ===== */
  .contact-hero {
    background: var(--cream);
    padding: 64px 32px 48px;
  }
  .contact-hero-inner {
    max-width: 720px;
    margin: 0 auto;
  }
  .contact-intro {
    font-size: 19px;
    line-height: 1.65;
    margin: 0;
  }
  .contact-form-section {
    background: var(--off);
    border-top: 4px solid var(--black);
    padding: 64px 32px 72px;
  }
  .contact-form-inner {
    max-width: 780px;
    margin: 0 auto;
  }
  .jotform-embed {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }
  .jotform-embed iframe {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    border: 0;
  }
  .contact-form-note {
    font-family: "Special Elite", monospace;
    font-size: 12px;
    letter-spacing: 0.1em;
    color: var(--char);
    margin: 12px 0 0;
  }
  .contact-privacy {
    font-family: "Special Elite", monospace;
    font-size: 12px;
    letter-spacing: 0.1em;
    color: var(--char);
    opacity: 0.78;
    margin: 20px 0 0;
  }
  .contact-reasons {
    background: var(--cream);
    border-top: 4px solid var(--black);
    padding: 64px 32px 80px;
  }
  .contact-reasons-inner {
    max-width: 1080px;
    margin: 0 auto;
  }
  .reason-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .reason-chip {
    font-family: "Archivo Black", sans-serif;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--black);
    background: var(--off);
    border: 2px solid var(--black);
    padding: 10px 18px;
  }

  /* ===== Footer ===== */
  .site-footer {
    background: var(--black);
    color: var(--off);
    border-top: 4px solid var(--hot);
    padding: 48px 32px 40px;
  }
  .site-footer-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    text-align: center;
  }
  .footer-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
  }
  .footer-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px 18px;
  }
  .footer-socials {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 14px;
  }
  .footer-copyright {
    font-family: "Special Elite", monospace;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--off);
    opacity: 0.65;
    margin: 0;
  }