:root{
    --warm-white:#FFFFFF;
    --paper:#FFFFFF;
    --ink:#1C371A;       /* deep forest green — replaces near-black as the "ink" */
    --rose:#C4D7E7;      /* soft spring sky blue */
    --rose-deep:#A0A168; /* olive green for readable accent text */
    --gold:#EBCB75;      /* golden yellow */
    --teal:#A0A168;      /* olive green */
    --line:rgba(28,55,26,0.18);
    --pop1:#4A90F5;      /* cobalt blue — venue grid */
    --pop2:#FF5CAA;      /* hot pink — venue grid */
    --pop3:#FFD966;      /* golden yellow — venue grid */
    --pop4:#A78BFA;      /* violet — venue grid */
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--warm-white);
    color:var(--ink);
    font-family:'Inter', sans-serif;
    overflow-x:hidden;
    position:relative;
  }
  /* film grain overlay */
  body::before{
    content:"";
    position:fixed; inset:0;
    pointer-events:none;
    z-index:9999;
    opacity:.05;
    mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  }
  body::after{
    content:"";
    position:fixed; inset:0;
    pointer-events:none;
    z-index:9998;
    background:radial-gradient(ellipse at center, transparent 55%, rgba(20,19,17,.16) 100%);
  }
  h1,h2,h3,.display{
    font-family:'Archivo', sans-serif;
    font-optical-sizing:auto;
    letter-spacing:-0.01em;
    text-transform:none;
    font-weight:800;
    margin:0;
  }
  .eyebrow{
    font-family:'Courier Prime', monospace;
    letter-spacing:.25em;
    text-transform:uppercase;
    font-size:.7rem;
    color:var(--rose-deep);
  }
  em{font-family:'Inter', sans-serif; font-style:italic;}
  a{color:inherit;}
  .container{max-width:1040px; margin:0 auto; padding:0 24px;}
  .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);}

  /* ---------- MARQUEE TICKER ---------- */
  .marquee{
    background:var(--ink); color:var(--warm-white);
    overflow:hidden; white-space:nowrap; padding:10px 0;
    font-family:'Courier Prime',monospace; font-size:.72rem; letter-spacing:.2em;
  }
  .marquee span{display:inline-block; padding-left:100%; animation:scroll 28s linear infinite;}
  @keyframes scroll{ from{transform:translateX(0);} to{transform:translateX(-100%);} }

  /* ---------- NAV ---------- */
  nav{
    position:sticky; top:0; z-index:10000;
    background:var(--paper);
    border-bottom:1px solid var(--line);
  }
  .nav-critter{
    display:none; position:absolute; left:20px; top:50%; transform:translateY(-50%);
    width:150px; height:38px; overflow:hidden; pointer-events:none;
  }
  .nav-critter .film-strip{
    position:absolute; left:0; top:50%; width:200%; height:14px;
    transform:translateY(-50%);
    background:
      repeating-linear-gradient(to right, #000 0 8px, transparent 8px 18px) top/100% 4px no-repeat,
      repeating-linear-gradient(to right, #000 0 8px, transparent 8px 18px) bottom/100% 4px no-repeat,
      #1a1a1a;
    animation: filmScroll 2.4s linear infinite;
  }
  .nav-critter img{
    position:absolute; left:8px; bottom:2px; z-index:2;
    height:34px; width:auto;
    animation: catHop .5s ease-in-out infinite alternate;
  }
  @keyframes filmScroll{ from{transform:translateY(-50%) translateX(0);} to{transform:translateY(-50%) translateX(-50%);} }
  @keyframes catHop{ from{ transform:translateY(0); } to{ transform:translateY(-5px); } }
  @media (prefers-reduced-motion:reduce){
    .nav-critter .film-strip, .nav-critter img{ animation:none; }
  }
  /* .nav-critter is hidden (display:none by default) while we keep
     iterating on the cat-chasing-film-reel concept. Re-enable with:
     @media (min-width:860px){ .nav-critter{ display:block; } } */
  nav .container{
    display:flex; align-items:center; justify-content:center;
    padding:16px 24px;
  }
  .navlinks{
    display:flex; flex-wrap:wrap; justify-content:center;
    gap:10px 30px; font-family:'Archivo',sans-serif; font-weight:800;
    font-size:.95rem; letter-spacing:.06em;
  }
  .navlinks a{text-decoration:none; color:#000000; opacity:1; transition:opacity .2s;}
  .navlinks a:hover{opacity:1; color:var(--rose-deep);}
  .navlinks a.active{opacity:1; color:var(--rose-deep); border-bottom:2px solid var(--rose-deep); padding-bottom:2px;}
  .nav-toggle{
    display:none; background:none; border:none; font-size:1.5rem; line-height:1;
    color:#000000; cursor:pointer; padding:4px 8px;
  }
  .nav-film-reel{ display:none; }
  @media (max-width:720px){
    nav .container{ justify-content:flex-start; }
    .nav-toggle{ display:block; }
    .navlinks{
      display:none; position:absolute; top:100%; left:0; right:0;
      flex-direction:column; flex-wrap:nowrap; gap:0;
      background:var(--paper); border-bottom:1px solid var(--line);
      box-shadow:0 14px 24px -14px rgba(0,0,0,.25);
    }
    .navlinks.open{ display:flex; }
    .navlinks a{ padding:16px 24px; border-top:1px solid var(--line); font-size:.9rem; letter-spacing:.06em; }
    .nav-film-reel{
      display:block; height:40px; width:auto; margin-left:10px;
      pointer-events:none;
    }
  }

  /* ---------- PHOTO BOOTH STRIP BACKGROUND ---------- */
  .photobooth-bg{
    position:fixed; inset:0; z-index:-2;
    display:flex; gap:6px;
    overflow:hidden;
  }
  .strip-col{
    flex:1 0 auto; width:11vw; min-width:90px;
    overflow:hidden; position:relative;
  }
  .strip-col .track{
    display:flex; flex-direction:column;
    width:100%; height:200vh;
  }
  .strip-col .track img{ display:block; width:100%; height:100vh; object-fit:cover; }
  .strip-col.up .track{ animation:stripUp 55s linear infinite; }
  .strip-col.down .track{ animation:stripDown 55s linear infinite; }
  .strip-col:nth-child(1) .track{ animation-delay:-2s; }
  .strip-col:nth-child(2) .track{ animation-delay:-8s; }
  .strip-col:nth-child(3) .track{ animation-delay:-15s; }
  .strip-col:nth-child(4) .track{ animation-delay:-21s; }
  .strip-col:nth-child(5) .track{ animation-delay:-27s; }
  .strip-col:nth-child(6) .track{ animation-delay:-33s; }
  .strip-col:nth-child(7) .track{ animation-delay:-40s; }
  .strip-col:nth-child(8) .track{ animation-delay:-46s; }
  .strip-col:nth-child(9) .track{ animation-delay:-51s; }
  @keyframes stripUp{ from{ transform:translateY(0); } to{ transform:translateY(-50%); } }
  @keyframes stripDown{ from{ transform:translateY(-50%); } to{ transform:translateY(0); } }
  .photobooth-scrim{
    position:fixed; inset:0; z-index:-1;
    background:rgba(246,243,236,.62);
  }
  @media (prefers-reduced-motion: reduce){
    .strip-col .track{ animation:none !important; }
  }

  /* ---------- MARQUEE (theater canopy + reader board) ---------- */
  .marquee-hero{
    background:var(--ink);
    padding:30px 16px 44px;
    position:relative;
    overflow:hidden;
  }
  .marquee-hero::after{
    content:"";
    position:absolute; left:0; right:0; bottom:-1px; height:24px;
    background:
      linear-gradient(135deg, transparent 50%, var(--warm-white) 50%),
      linear-gradient(-135deg, transparent 50%, var(--warm-white) 50%);
    background-size:24px 24px;
    background-position:bottom;
    background-repeat:repeat-x;
  }
  .neon-arcs{
    position:absolute; top:-40px; right:-60px; width:280px; height:280px;
    pointer-events:none; opacity:.85;
  }
  @media (max-width:640px){ .neon-arcs{ width:180px; height:180px; right:-50px; top:-25px;} }
  .bulb-row{
    display:flex; justify-content:center; gap:13px;
    margin-bottom:22px; flex-wrap:wrap; padding:0 10px; position:relative; z-index:2;
  }
  .bulb-row span{
    width:8px; height:8px; border-radius:50%;
    background:#5FD4FF;
    box-shadow:0 0 4px 1px rgba(95,212,255,.4);
    animation:chase 1.6s infinite;
  }
  @keyframes chase{
    0%,100%{opacity:.25; box-shadow:0 0 2px 0 rgba(95,212,255,.2);}
    50%{opacity:1; box-shadow:0 0 10px 4px rgba(95,212,255,.85);}
  }
  .reader-board{
    position:relative; z-index:2;
    background:#F2EEE1;
    border:3px solid #171612;
    max-width:520px; margin:0 auto;
    padding:22px 22px 18px;
    box-shadow:0 14px 30px -12px rgba(0,0,0,.5);
    background-image:repeating-linear-gradient(to bottom, transparent 0 37px, rgba(0,0,0,.07) 37px 39px);
  }
  .rb-title{
    font-family:'Limelight', 'Bebas Neue', sans-serif;
    color:#15130F;
    text-align:center;
    font-size:clamp(1.7rem,7vw,2.5rem);
    letter-spacing:.02em;
    line-height:1.15;
    margin-bottom:14px;
  }
  .reader-line{
    display:flex; align-items:baseline; gap:8px;
    font-family:'Bebas Neue', sans-serif;
    color:#15130F; font-size:clamp(.95rem,3.4vw,1.15rem); letter-spacing:.03em;
    padding:5px 0;
  }
  .reader-line .rb-leader{
    flex:1; border-bottom:2px dotted rgba(21,19,15,.45); transform:translateY(-5px);
  }
  .marquee-tagline{
    text-align:center; font-family:'Courier Prime',monospace; color:var(--warm-white);
    opacity:.75; font-size:.66rem; letter-spacing:.25em; text-transform:uppercase; margin-top:16px; position:relative; z-index:2;
  }
  .mini-marquee{
    background:var(--ink);
    padding:24px 16px 30px;
    position:relative;
    max-width:560px; margin:0 auto;
  }
  .mini-marquee::after{
    content:"";
    position:absolute; left:0; right:0; bottom:-1px; height:18px;
    background:
      linear-gradient(135deg, transparent 50%, var(--warm-white) 50%),
      linear-gradient(-135deg, transparent 50%, var(--warm-white) 50%);
    background-size:18px 18px;
    background-position:bottom;
    background-repeat:repeat-x;
  }
  .bulb-row.small{ gap:10px; margin-bottom:16px; }
  .bulb-row.small span{ width:6px; height:6px; }
  .hero{
    padding:64px 20px 40px;
    display:flex; justify-content:center;
    background:
      radial-gradient(circle at 20% 20%, rgba(193,124,108,.10), transparent 45%),
      radial-gradient(circle at 80% 0%, rgba(185,154,75,.12), transparent 40%);
  }
  .hero.minimal{
    min-height:92vh;
    display:flex; align-items:center; justify-content:center;
    text-align:center; padding:60px 24px;
  }
  .home-viewport{
    height:100vh; height:100dvh; display:flex; flex-direction:column; overflow:hidden;
  }
  .home-viewport nav{ flex-shrink:0; }
  .home-viewport .hero.minimal{
    flex:1; min-height:0;
    align-items:flex-start; justify-content:center;
    padding-top:22vh;
  }
  .hero-inner{ animation:rise 1.1s ease both; }
  .landing-names{
    font-family:'Archivo', sans-serif;
    font-optical-sizing:auto;
    font-weight:700;
    font-size:clamp(2.6rem, 10vw, 6rem);
    line-height:1;
    letter-spacing:-0.01em;
    color:var(--ink);
  }
  .landing-names .amp{
    font-family:'Inter', sans-serif;
    font-style:italic;
    font-weight:600;
    font-size:.65em;
    color:#000000;
    padding:0 .12em;
  }
  .landing-names .name-chris{ color:#000000; }
  .landing-names .name-kathryn{ color:#000000; }
  .chip{
    position:relative;
    margin-top:22px;
    font-family:'Archivo', sans-serif;
    font-optical-sizing:auto;
    letter-spacing:.3em;
    text-transform:uppercase;
    font-size:1.25rem;
    font-weight:800;
    color:#000000;
    padding:12px 22px;
    background:var(--paper);
    border:1px solid var(--rose-deep);
    box-shadow:0 10px 24px -10px rgba(0,0,0,.35);
    display:inline-block;
  }
  .chip-wrap{ text-align:center; margin-top:16px; }
  .chip-wrap .chip{ margin-top:0; }
  .ticket{
    position:relative;
    background:var(--paper);
    max-width:480px; width:100%;
    padding:44px 34px 34px;
    text-align:center;
    border:1.5px solid var(--ink);
    box-shadow:0 30px 60px -20px rgba(28,24,17,.35);
    animation:rise 1s ease both;
  }
  @keyframes rise{ from{opacity:0; transform:translateY(24px);} to{opacity:1; transform:translateY(0);} }
  .ticket::before, .ticket::after{
    content:""; position:absolute; width:26px; height:26px;
    background:var(--warm-white); border-radius:50%;
    border:1.5px solid var(--ink);
    left:50%; transform:translateX(-50%);
  }
  .ticket::before{ top:-13px; }
  .ticket::after{ bottom:-13px; }
  .ticket .notch{
    border-top:1.5px dashed var(--line);
    margin-top:26px; padding-top:22px;
  }
  .kicker{font-family:'Inter',sans-serif; font-style:italic; font-size:.85rem; margin-bottom:14px; color:var(--rose-deep);}
  .names{font-size:clamp(1.5rem,6vw,2.15rem); line-height:1.35;}
  .names small{display:block; font-size:.55em; margin:6px 0; letter-spacing:.3em; color:var(--rose);}
  .venue-line{font-family:'Courier Prime',monospace; font-size:.72rem; letter-spacing:.18em; margin-top:16px; text-transform:uppercase; opacity:.8;}
  .the-date{font-size:clamp(1.3rem,5vw,1.7rem); margin:10px 0 4px; letter-spacing:.1em;}
  .rsvp-note{font-family:'Inter',sans-serif; font-style:italic; font-size:.8rem; opacity:.75;}

  .countdown{display:flex; justify-content:center; gap:16px; margin-top:10px;}
  .countdown div{display:flex; flex-direction:column; align-items:center;}
  .countdown .num{font-family:'Courier Prime',monospace; font-weight:700; font-size:1.6rem; background:var(--ink); color:var(--warm-white); padding:6px 10px; min-width:52px; border-radius:2px;}
  .countdown .lbl{font-family:'Courier Prime',monospace; font-size:.6rem; letter-spacing:.15em; margin-top:6px; text-transform:uppercase; opacity:.7;}
  .admit-one{
    margin-top:22px; display:inline-block; border:1px solid var(--ink);
    padding:9px 26px; font-family:'Archivo',sans-serif; font-size:.75rem; letter-spacing:.2em;
  }
  .site-url{font-family:'Courier Prime',monospace; font-size:.72rem; margin-top:14px; opacity:.7;}

  /* ---------- SECTION SCAFFOLD ---------- */
  section{padding:96px 0;}
  #venue{padding-top:40px;}
  .section-head{text-align:center; max-width:560px; margin:0 auto 48px; color:#000000;}
  .section-head h2{font-size:clamp(1.5rem,4vw,2.1rem); margin-top:10px;}
  .section-copy{ margin-top:20px; line-height:1.8; }
  .section-copy:first-of-type{ margin-top:22px; }
  .divider{
    height:1px; margin:0 auto; max-width:1040px;
    background-image:linear-gradient(to right, var(--line) 60%, transparent 0%);
    background-size:14px 1px; background-repeat:repeat-x;
  }
  .reveal{opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s ease;}
  .reveal.in{opacity:1; transform:translateY(0);}

  /* ---------- CHURCH PHOTO CARD ---------- */
  .photo-card{
    max-width:560px; margin:0 auto;
  }
  .photo-card img{
    display:block; width:100%; height:auto;
    box-shadow:0 20px 40px -24px rgba(28,24,17,.4);
  }
  .photo-pair{
    display:flex; flex-wrap:wrap; justify-content:center;
    gap:20px; max-width:640px; margin:16px auto 0;
  }
  .photo-pair .photo-card{ flex:1 1 240px; max-width:300px; margin:0; }
  .photo-pair .photo-card:only-child{ flex-basis:400px; max-width:500px; }

  /* ---------- CEREMONY / RECEPTION STOPS ---------- */
  .stop-block{ margin:32px 0; }
  #venue .stop-block:first-of-type{ margin-top:0; }
  .stop-title{
    text-align:center; margin:0;
    font-family:'Archivo', sans-serif;
    font-optical-sizing:auto;
    font-weight:800;
    letter-spacing:-0.01em;
    font-size:clamp(1.8rem, 6vw, 2.8rem);
    color:#000000;
  }
  .stop-name{
    text-align:center; margin:20px 0 0; font-size:1.3rem; color:#000000;
    font-family:'Archivo', sans-serif; font-weight:700; letter-spacing:-0.01em;
  }
  .stop-note{
    text-align:center; max-width:480px; margin:10px auto 0; color:#000000;
    font-family:'Archivo', sans-serif; font-weight:500; font-size:.9rem; line-height:1.6; opacity:.85;
  }
  .stop-transition{ text-align:center; margin:0; }
  .stop-transition-main{
    font-family:'Archivo', sans-serif; font-weight:500; font-size:1.05rem;
    line-height:1.9; color:#000000;
  }

  /* ---------- WARHOL VENUE GRID ---------- */
  .venue-grid{
    display:grid; grid-template-columns:repeat(2,1fr); gap:3px;
    max-width:560px; margin:0 auto;
  }
  .panel{
    position:relative; aspect-ratio:608/464; overflow:hidden;
    background-color:var(--gold);
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
    background-blend-mode:multiply;
  }
  .panel.p1{animation:tint1 4s infinite;}
  .panel.p2{animation:tint2 4s infinite;}
  .panel.p3{animation:tint3 4s infinite;}
  .panel.p4{animation:tint4 4s infinite;}
  @keyframes tint1{ 0%,20%{background-color:var(--pop1);} 25%,45%{background-color:var(--pop2);} 50%,70%{background-color:var(--pop3);} 75%,95%{background-color:var(--pop4);} 100%{background-color:var(--pop1);} }
  @keyframes tint2{ 0%,20%{background-color:var(--pop2);} 25%,45%{background-color:var(--pop3);} 50%,70%{background-color:var(--pop4);} 75%,95%{background-color:var(--pop1);} 100%{background-color:var(--pop2);} }
  @keyframes tint3{ 0%,20%{background-color:var(--pop3);} 25%,45%{background-color:var(--pop4);} 50%,70%{background-color:var(--pop1);} 75%,95%{background-color:var(--pop2);} 100%{background-color:var(--pop3);} }
  @keyframes tint4{ 0%,20%{background-color:var(--pop4);} 25%,45%{background-color:var(--pop1);} 50%,70%{background-color:var(--pop2);} 75%,95%{background-color:var(--pop3);} 100%{background-color:var(--pop4);} }
  @media (prefers-reduced-motion: reduce){
    .panel.p1,.panel.p2,.panel.p3,.panel.p4{animation:none;}
  }
  .venue-caption{text-align:center; font-family:'Archivo',sans-serif; font-style:italic; font-weight:400; font-size:.9rem; margin-top:8px; opacity:.75; color:#000000;}
  .venue-caption-strong{
    margin-top:10px; font-size:1.1rem; font-style:normal; font-weight:700;
    letter-spacing:0; text-transform:none; opacity:1;
  }

  /* ---------- DETAILS / TWO COL ---------- */
  .grid-2{display:grid; grid-template-columns:1fr 1fr; gap:40px;}
  .card{
    background:var(--paper); border:1px solid var(--line); padding:30px 26px;
    position:relative;
  }
  .card .eyebrow{margin-bottom:10px; display:block;}
  .card h3{font-size:1.1rem; margin-bottom:12px;}
  .card p{line-height:1.7; font-size:.95rem; margin:0 0 8px;}
  .tag{
    display:inline-block; font-family:'Courier Prime',monospace; font-size:.65rem;
    letter-spacing:.12em; text-transform:uppercase; border:1px solid var(--rose-deep);
    color:var(--rose-deep); padding:4px 10px; margin-top:10px;
  }

  .submit-btn{
    margin-top:8px; background:#000000; color:#FFFFFF; border:none; padding:14px 34px;
    font-family:'Archivo',sans-serif; font-weight:800; font-size:.78rem; letter-spacing:.18em;
    cursor:pointer; text-transform:uppercase;
    box-shadow:0 10px 24px -10px rgba(0,0,0,.4);
    transition:transform .15s ease;
  }
  .submit-btn:hover:not(:disabled){transform:translateY(-2px);}
  .submit-btn:disabled{opacity:.4; cursor:not-allowed;}

  /* ---------- ADMIN PANEL ---------- */
  .admin-overlay{
    position:fixed; inset:0; background:rgba(28,24,17,.92); z-index:1000;
    display:none; align-items:flex-start; justify-content:center; padding:60px 20px; overflow-y:auto;
  }
  .admin-overlay.open{display:flex;}
  .admin-box{background:var(--paper); max-width:640px; width:100%; padding:30px; border:1px solid var(--line);}
  .admin-box h3{margin-bottom:16px;}
  .admin-close{float:right; cursor:pointer; font-family:'Courier Prime',monospace; font-size:.7rem; letter-spacing:.1em;}
  .sub-item{border-top:1px solid var(--line); padding:16px 0; display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;}
  .sub-item .who{font-family:'Archivo',sans-serif; font-size:.85rem;}
  .sub-item .when{font-family:'Courier Prime',monospace; font-size:.65rem; opacity:.6;}
  .sub-item a.dl{font-family:'Courier Prime',monospace; font-size:.65rem; letter-spacing:.1em; border:1px solid var(--ink); padding:6px 12px; text-decoration:none;}
  .admin-pass{width:100%; padding:10px; font-family:'Courier Prime',monospace; margin-bottom:12px; border:1px solid var(--line);}
  .admin-overlay-static{ position:static; background:none; padding:60px 20px; }
  .admin-hint{ font-size:.75rem; opacity:.6; margin-top:10px; }
  .admin-loading{ font-size:.8rem; opacity:.7; }
  .admin-empty{ font-size:.85rem; }
  .admin-subheading{ font-family:'Archivo',sans-serif; font-size:.9rem; margin-bottom:8px; }
  .admin-videos{ margin-top:24px; }
  .admin-video{ width:100%; max-width:200px; background:#000; }
  .hidden{ display:none; }

  /* ---------- FILM LEADER INTRO ---------- */
  body.lock-scroll{overflow:hidden; height:100vh;}
  .leader-video{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover;
  }
  #countdownIntro{
    position:fixed; inset:0; z-index:100000;
    background:radial-gradient(circle at center, #7a7a7a 0%, #333230 75%, #262523 100%);
    display:flex; align-items:center; justify-content:center;
    transition:opacity .7s ease;
    filter:sepia(.12) contrast(1.12) brightness(.96);
    animation:frameJitter 2.6s steps(1) infinite;
  }
  @keyframes frameJitter{
    0%{transform:translate(0,0);} 4%{transform:translate(-1px,1px);}
    8%{transform:translate(0,0);} 19%{transform:translate(1px,0);}
    26%{transform:translate(0,-1px);} 27%{transform:translate(0,0);}
    52%{transform:translate(-1px,0);} 53%{transform:translate(0,0);}
    71%{transform:translate(1px,1px);} 72%{transform:translate(0,0);}
    88%{transform:translate(0,1px);} 100%{transform:translate(0,0);}
  }
  #countdownIntro::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,.55) 100%);
  }
  .grain-layer{
    position:absolute; inset:-10%; pointer-events:none; opacity:.5; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    background-size:180px 180px;
    animation:grainMove .4s steps(4) infinite;
  }
  @keyframes grainMove{
    0%{transform:translate(0,0);} 25%{transform:translate(-3%,2%);}
    50%{transform:translate(2%,-3%);} 75%{transform:translate(-2%,-2%);} 100%{transform:translate(0,0);}
  }
  .scanlines{
    position:absolute; inset:0; pointer-events:none; opacity:.28; mix-blend-mode:overlay;
    background-image:repeating-linear-gradient(to bottom, rgba(0,0,0,.5) 0px, rgba(0,0,0,.5) 1px, transparent 1px, transparent 3px);
    animation:scanRoll 6s linear infinite;
  }
  @keyframes scanRoll{ from{background-position:0 0;} to{background-position:0 -600px;} }
  #countdownIntro.video-mode{ filter:contrast(1.03); animation:none; }
  #countdownIntro.video-mode::after{ background:radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.3) 100%); }
  #countdownIntro.video-mode .grain-layer{ opacity:.12; }
  #countdownIntro.video-mode .scanlines{ opacity:.1; }
  .cue-mark{
    position:absolute; top:9%; right:11%; width:22px; height:22px; border-radius:50%;
    background:rgba(245,240,225,.95); opacity:0; pointer-events:none;
    box-shadow:0 0 10px 2px rgba(245,240,225,.5);
  }
  .cue-mark.blip{ animation:cueBlip .28s ease-out; }
  @keyframes cueBlip{ 0%{opacity:0;} 35%{opacity:1;} 100%{opacity:0;} }
  .flash-frame{
    position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none;
  }
  .flash-frame.flash{ animation:flashPop .18s ease-out; }
  @keyframes flashPop{ 0%{opacity:0;} 20%{opacity:.9;} 100%{opacity:0;} }
  .dust span{
    position:absolute; background:rgba(240,240,235,.8); border-radius:50%;
    width:2px; height:2px; opacity:0; animation:dustPop 3.6s infinite;
  }
  .dust span:nth-child(1){top:22%; left:30%; animation-delay:.4s;}
  .dust span:nth-child(2){top:64%; left:68%; width:3px; height:3px; animation-delay:1.6s;}
  .dust span:nth-child(3){top:40%; left:78%; animation-delay:2.5s;}
  .dust span:nth-child(4){top:75%; left:22%; width:1.5px; height:1.5px; animation-delay:.9s;}
  @keyframes dustPop{ 0%,94%,100%{opacity:0;} 95%,97%{opacity:1;} }
  #countdownIntro.fade-out{opacity:0; pointer-events:none;}
  #countdownIntro.skip-init{display:none;}
  .leader-frame{
    position:relative;
    width:min(58vmin, 420px); height:min(58vmin, 420px);
    animation:flicker 0.18s steps(2) infinite;
  }
  @keyframes flicker{
    0%{filter:brightness(1);} 50%{filter:brightness(1.05);} 100%{filter:brightness(0.97);}
  }
  .leader-line{position:absolute; background:rgba(235,235,230,.9);}
  .leader-v{left:50%; top:-40vh; width:2px; height:180vh; transform:translateX(-50%);}
  .leader-h{top:50%; left:-40vw; height:2px; width:180vw; transform:translateY(-50%);}
  .leader-circle-outer, .leader-circle-inner{
    position:absolute; inset:0; border-radius:50%;
    border:3px solid rgba(235,235,230,.9);
  }
  .leader-circle-inner{inset:8px; border-width:2px;}
  .leader-sweep{
    position:absolute; top:50%; left:50%; width:3px; height:50%;
    background:rgba(20,18,15,.92);
    transform-origin:top center;
    transform:translate(-50%,0) rotate(0deg);
  }
  @keyframes sweepRotate{
    from{ transform:translate(-50%,0) rotate(0deg); }
    to{ transform:translate(-50%,0) rotate(360deg); }
  }
  .leader-sweep.spin{animation:sweepRotate .8s steps(16, end);}
  .leader-number{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    font-family:'Arial Black', Arial, sans-serif; font-weight:900;
    font-size:min(20vmin,150px); color:#141210;
    -webkit-text-stroke:1px #141210;
    text-shadow:-1.5px 0 rgba(220,30,50,.35), 1.5px 0 rgba(30,180,220,.3);
  }
  .leader-scratches span{
    position:absolute; top:0; bottom:0; width:1px; background:rgba(230,230,225,.5);
    animation:scratchFlicker 2.4s infinite;
  }
  .leader-scratches span:nth-child(1){left:8%; width:1px; animation-delay:.1s; animation-duration:1.7s;}
  .leader-scratches span:nth-child(2){left:23%; width:2px; opacity:.6; animation-delay:.9s; animation-duration:3.1s;}
  .leader-scratches span:nth-child(3){left:41%; width:1px; animation-delay:.4s; animation-duration:2.3s;}
  .leader-scratches span:nth-child(4){left:64%; width:1px; animation-delay:1.6s; animation-duration:1.9s;}
  .leader-scratches span:nth-child(5){left:79%; width:2px; opacity:.5; animation-delay:.7s; animation-duration:2.8s;}
  .leader-scratches span:nth-child(6){left:93%; width:1px; animation-delay:2.1s; animation-duration:1.5s;}
  @keyframes scratchFlicker{
    0%,96%,100%{opacity:0;} 97%,99%{opacity:.7;}
  }
  .skip-intro{
    position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
    font-family:'Courier Prime',monospace; font-size:.65rem; letter-spacing:.15em;
    color:rgba(235,235,230,.75); text-transform:uppercase; background:none; border:1px solid rgba(235,235,230,.5);
    padding:8px 16px; cursor:pointer;
  }
  .sound-toggle{
    position:absolute; top:26px; right:26px;
    font-family:'Archivo',sans-serif; font-weight:700; font-size:.75rem; letter-spacing:.05em;
    color:#141210; text-transform:uppercase; background:rgba(245,240,225,.95);
    border:2px solid #141210; padding:10px 18px; cursor:pointer;
    display:flex; align-items:center; gap:8px;
    box-shadow:0 6px 16px -6px rgba(0,0,0,.5);
  }
  .sound-toggle .icon{ flex-shrink:0; }
  @media (prefers-reduced-motion:no-preference){
    .sound-toggle.needs-tap{ animation:soundPulse 1.8s ease-in-out infinite; }
  }
  @keyframes soundPulse{
    0%,100%{ transform:scale(1); box-shadow:0 6px 16px -6px rgba(0,0,0,.5); }
    50%{ transform:scale(1.06); box-shadow:0 8px 20px -4px rgba(0,0,0,.6); }
  }
  .sound-toggle .icon{font-size:.85rem;}

  @media (max-width:720px){
    .grid-2{grid-template-columns:1fr;}
    section{padding:64px 0;}
    .countdown{gap:8px;}
    .countdown .num{min-width:42px; font-size:1.2rem; padding:5px 6px;}
    .chip{
      font-size:.85rem; letter-spacing:.12em; padding:10px 14px; white-space:nowrap;
    }
    .home-viewport .hero.minimal{
      align-items:center; padding-top:0;
    }
  }