:root {
    --ink: #0B0C0A;
    --volt: #D7FF3E;
    --volt-dim: rgba(215, 255, 62, 0.09);
    --smoke: #8A8A8E;
    --bone: #F2F2EA;
    --display: 'Archivo Black', sans-serif;
    --mono: 'Space Mono', monospace;
  }

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

  html { scroll-behavior: smooth; }

  body {
    background: var(--ink);
    color: var(--bone);
    font-family: var(--mono);
    overflow-x: hidden;
  }

  ::selection { background: var(--volt); color: var(--ink); }

  /* film grain over everything */
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 50;
    opacity: 0.07;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* ---------- top strip ---------- */
  .strip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 28px;
    font-size: 13px;
    letter-spacing: 3px;
    color: var(--smoke);
    text-transform: uppercase;
  }
  .strip b { color: var(--volt); font-weight: 700; }

  .strip-book {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--ink);
    background: var(--volt);
    padding: 11px 20px 10px 23px;
    text-decoration: none;
    transition: background 0.18s ease;
  }
  .strip-book:hover { background: var(--bone); }

  /* ---------- hero ---------- */
  .hero {
    position: relative;
    min-height: 92vh;
    display: flex;
    align-items: center;
    padding: 40px 28px 72px;
  }

  .ghost {
    position: absolute;
    right: -4vw;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--display);
    font-size: 64vh;
    line-height: 1;
    letter-spacing: 0.02em;
    color: transparent;
    -webkit-text-stroke: 2px var(--volt-dim);
    user-select: none;
    pointer-events: none;
  }

  .lockup {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: clamp(16px, 3vw, 44px);
  }

  .bar {
    width: clamp(8px, 1vw, 14px);
    background: var(--volt);
    box-shadow: 0 0 32px rgba(215, 255, 62, 0.5);
    margin: 2vw 0;
    animation: hum 4s ease-in-out infinite;
  }
  @keyframes hum {
    0%, 100% { box-shadow: 0 0 24px rgba(215, 255, 62, 0.4); }
    50%      { box-shadow: 0 0 58px rgba(215, 255, 62, 0.75); }
  }

  .rad {
    font-family: var(--display);
    font-size: clamp(88px, 17vw, 260px);
    line-height: 0.88;
    letter-spacing: -0.03em;
    color: var(--bone);
  }
  .ninetyseven {
    font-family: var(--display);
    font-size: clamp(88px, 17vw, 260px);
    line-height: 0.95;
    letter-spacing: 0.03em;
    color: transparent;
    -webkit-text-stroke: 4px var(--volt);
    text-shadow: 0 0 46px rgba(215, 255, 62, 0.55), 0 0 120px rgba(215, 255, 62, 0.3);
  }

  .hero-foot {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 34px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 13px;
    letter-spacing: 6px;
    color: var(--smoke);
    text-transform: uppercase;
  }

  /* ---------- marquee ---------- */
  .marquee {
    border-top: 1px solid rgba(215, 255, 62, 0.25);
    border-bottom: 1px solid rgba(215, 255, 62, 0.25);
    overflow: hidden;
    padding: 14px 0;
    white-space: nowrap;
  }
  .marquee-track {
    display: inline-block;
    animation: slide 22s linear infinite;
    font-family: var(--display);
    font-size: 22px;
    letter-spacing: 4px;
    color: var(--volt);
    text-transform: uppercase;
  }
  @keyframes slide {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }

  /* ---------- photo ---------- */
  .photo-block {
    padding: 128px 28px 40px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 56px;
    align-items: end;
  }

  .photo-side {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 40px;
  }
  .photo-main {
    display: flex;
    flex-direction: column;
    gap: 22px;
  }
  .photo-frame.photo-frame-sq {
    aspect-ratio: 1 / 1;
    width: 100%;
  }
  .photo-frame.photo-frame-tall {
    aspect-ratio: 3 / 4;
  }

  .photo-caption {
    font-size: 13px;
    line-height: 2;
    letter-spacing: 2px;
    color: var(--smoke);
    text-transform: uppercase;
    padding-bottom: 8px;
  }
  .photo-caption b { color: var(--volt); font-weight: 700; }

  .photo-frame {
    position: relative;
    aspect-ratio: 4 / 5;
    outline: 1px solid rgba(215, 255, 62, 0.35);
    outline-offset: 14px;
    overflow: hidden;
    background: repeating-linear-gradient(
      -45deg,
      rgba(215, 255, 62, 0.05) 0 18px,
      transparent 18px 36px
    );
  }
  .photo-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* ---------- links ---------- */
  .links {
    padding: 176px 0 64px;
  }
  .links-label {
    padding: 0 28px 26px;
    font-size: 13px;
    letter-spacing: 6px;
    color: var(--smoke);
    text-transform: uppercase;
  }
  .link-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 24px;
    padding: 30px 28px;
    border-top: 1px solid rgba(242, 242, 234, 0.16);
    text-decoration: none;
    transition: background 0.18s ease, color 0.18s ease;
  }
  .link-row:last-of-type { border-bottom: 1px solid rgba(242, 242, 234, 0.16); }
  .link-name {
    font-family: var(--display);
    font-size: clamp(40px, 7.5vw, 104px);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--bone);
    text-transform: uppercase;
    transition: color 0.18s ease;
  }
  .link-tag {
    flex-shrink: 0;
    font-family: 'Archivo', Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.5px;
    color: #BDBDB6;
    transition: color 0.18s ease;
  }
  .link-row:hover { background: var(--volt); }
  .link-row:hover .link-name,
  .link-row:hover .link-tag { color: var(--ink); }

  /* ---------- festival ---------- */
  .festival-block {
    padding: 96px 28px 24px;
    display: flex;
    justify-content: center;
  }
  .festival-block .photo-frame {
    width: min(520px, 100%);
  }

  /* ---------- footer ---------- */
  footer {
    display: flex;
    justify-content: space-between;
    padding: 72px 28px 30px;
    font-size: 12px;
    letter-spacing: 3px;
    color: var(--smoke);
    text-transform: uppercase;
  }
  footer a { color: var(--volt); text-decoration: none; }

  @media (max-width: 760px) {
    .photo-block { grid-template-columns: 1fr; align-items: start; }
    .photo-main { order: -1; }
    .photo-frame.photo-frame-sq { width: 100%; }
    .ghost { font-size: 40vh; right: -16vw; }
    .hero { min-height: 78vh; }
    .links { padding-top: 112px; }
    .link-name { font-size: clamp(26px, 10vw, 64px); }
    .hero-foot { font-size: 10px; letter-spacing: 2px; white-space: nowrap; }

    /* mobile renderers blow the big glows out into a blob; go solid + tame */
    .ninetyseven {
      color: var(--volt);
      -webkit-text-stroke: 0;
      text-shadow: 0 0 24px rgba(215, 255, 62, 0.35);
    }
    .bar {
      animation: none;
      box-shadow: 0 0 14px rgba(215, 255, 62, 0.4);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .marquee-track { animation: none; }
    .bar { animation: none; }
  }