/* ==========================================================================
   ANONYMOUS ON WAR — $ZOnWar
   Palette pulled straight from the source photo: khaki paper bag, dusty
   olive-drab smoke, bone-grey sky, warm sepia grade, brass accent.
   ========================================================================== */

:root{
  --bg:            #0b0906;
  --bg-soft:       #14100a;
  --paper:         #d9c49c;
  --paper-dark:    #a9895c;
  --paper-darker:  #7a6039;
  --olive:         #6c6a49;
  --olive-dark:    #34331f;
  --khaki:         #c3b285;
  --cream:         #efe7d2;
  --ink:           #171310;
  --ink-soft:      #2a231a;
  --brass:         #cf9a4d;
  --brass-bright:  #f0c674;
  --danger:        #b5502f;
  --line:          rgba(239,231,210,0.16);
  --line-strong:   rgba(239,231,210,0.32);

  --font-display:  'Oswald', 'Arial Narrow', sans-serif;
  --font-body:     'Barlow Condensed', 'Segoe UI', sans-serif;
  --font-mono:     'JetBrains Mono', 'Courier New', monospace;

  --container: 1180px;
  --header-h: 78px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{
  scroll-behavior: auto; /* Lenis handles smoothing via JS */
  background: var(--bg);
}
body{
  margin:0;
  background: var(--bg);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.4;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
html.no-scroll, body.no-scroll{ overflow:hidden; height:100%; }

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; background:none; border:none; color:inherit; }
h1,h2,h3{ font-family: var(--font-display); text-transform:uppercase; margin:0; letter-spacing:0.01em; }
p{ margin:0; }
.visually-hidden{ position:absolute!important; width:1px;height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------------- shared decorative bits ---------------- */
.eyebrow{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--brass);
  margin-bottom: 14px;
  display:flex; align-items:center; gap:8px;
}
.eyebrow::before{ content:""; width:18px; height:1px; background:var(--brass); display:inline-block; }
.eyebrow.center{ justify-content:center; }
.eyebrow.center::before{ display:none; }

.section-title{
  font-size: clamp(34px, 5.6vw, 64px);
  line-height: 1.02;
  color: var(--cream);
  margin-bottom: 28px;
}
.section-title.center{ text-align:center; }

.corner{ position:absolute; width:18px; height:18px; border:2px solid var(--brass); opacity:0.85; }
.corner.tl{ top:-1px; left:-1px; border-right:none; border-bottom:none; }
.corner.tr{ top:-1px; right:-1px; border-left:none; border-bottom:none; }
.corner.bl{ bottom:-1px; left:-1px; border-right:none; border-top:none; }
.corner.br{ bottom:-1px; right:-1px; border-left:none; border-top:none; }

/* ---------------- reveal animation base state ---------------- */
.reveal-up{ opacity:0; transform: translateY(36px); will-change:transform,opacity; }
.reveal-up.is-visible{ opacity:1; transform:none; transition: opacity .9s cubic-bezier(.16,.8,.24,1), transform .9s cubic-bezier(.16,.8,.24,1); }

/* ==========================================================================
   NOISE / SCANLINE OVERLAYS (pure CSS/SVG — no image weight)
   ========================================================================== */
.grain-layer{
  position:fixed; inset:0; z-index:998; pointer-events:none;
  mix-blend-mode:overlay; opacity:0.16;
  filter:url(#filmGrain);
}
.scan-layer{
  position:fixed; inset:0; z-index:999; pointer-events:none;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0.09) 0px, rgba(0,0,0,0.09) 1px, transparent 2px, transparent 3px);
  mix-blend-mode:multiply; opacity:0.35;
}
.grain-layer, .scan-layer{ display:none; }
@media (min-width: 641px){
  .grain-layer, .scan-layer{ display:block; }
}

/* ==========================================================================
   LOADER
   ========================================================================== */
.loader{
  position:fixed; inset:0; z-index:2000;
  display:flex; align-items:center; justify-content:center;
  background: var(--ink);
  transition: clip-path 1.1s cubic-bezier(.76,0,.24,1);
}
.loader.loader-hide{ clip-path: inset(0 0 100% 0); pointer-events:none; }
.loader-bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  filter: blur(6px) saturate(0.7) brightness(0.55);
  transform:scale(1.1);
}
.loader-tint{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(11,9,6,0.75), rgba(11,9,6,0.92)); }
.loader-content{ position:relative; z-index:2; width:min(90vw,460px); text-align:center; padding:20px; }
.loader-frame{ position:relative; border:1px solid var(--line-strong); padding:38px 24px; background:rgba(11,9,6,0.35); backdrop-filter: blur(2px); }
.loader-eyebrow{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.24em; color:var(--brass); margin:0 0 14px; }
.loader-title{ font-size: clamp(28px,7vw,42px); color:var(--cream); line-height:1.02; margin:0 0 10px; }
.loader-ticker{ font-family:var(--font-mono); color:var(--khaki); letter-spacing:0.08em; margin:0 0 26px; font-size:14px; }
.loader-bar{ height:3px; background:rgba(239,231,210,0.14); position:relative; overflow:hidden; margin-bottom:12px; }
.loader-bar-fill{ position:absolute; inset:0 100% 0 0; background: var(--brass); width:0%; transition:width .15s linear; }
.loader-pct{ font-family:var(--font-mono); font-size:12px; letter-spacing:0.08em; color:var(--khaki); }
.loader-status{ opacity:0.65; margin-left:6px; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:500;
  height: var(--header-h);
  display:flex; align-items:center;
  background: linear-gradient(to bottom, rgba(11,9,6,0.85), rgba(11,9,6,0));
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background: rgba(11,9,6,0.92);
  border-bottom:1px solid var(--line);
  box-shadow:0 8px 30px rgba(0,0,0,0.35);
}
.header-inner{
  width:100%; max-width:var(--container); margin:0 auto; padding:0 24px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand-avatar{
  width:40px; height:40px; border-radius:50%;
  background-size:cover; background-position:center 35%;
  border:2px solid var(--brass); flex:none;
}
.brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.brand-name{ font-family:var(--font-display); font-size:14px; letter-spacing:0.04em; color:var(--cream); }
.brand-ticker{ font-family:var(--font-mono); font-size:11px; color:var(--brass); letter-spacing:0.06em; }

.main-nav{ display:flex; align-items:center; gap:6px; }
.nav-link{
  font-family:var(--font-display); font-size:13px; letter-spacing:0.05em;
  padding:9px 14px; color:var(--khaki); display:flex; align-items:center; gap:7px;
  border:1px solid transparent; transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.nav-link span{ font-family:var(--font-mono); font-size:10px; color:var(--brass); opacity:0.8; }
.nav-link:hover{ color:var(--cream); border-color:var(--line); background:rgba(239,231,210,0.04); }

.header-actions{ display:flex; align-items:center; gap:8px; }
.icon-btn{
  width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line-strong); color:var(--khaki);
  transition: color .2s ease, border-color .2s ease, transform .2s ease, background .2s ease;
}
.icon-btn svg{ width:18px; height:18px; }
.icon-btn:hover{ color:var(--ink); background:var(--brass); border-color:var(--brass); transform:translateY(-2px); }

.hamburger{ display:none; flex-direction:column; gap:5px; width:38px; height:38px; align-items:center; justify-content:center; border:1px solid var(--line-strong); }
.hamburger span{ width:18px; height:2px; background:var(--cream); display:block; }

/* mobile nav drawer */
.mobile-nav{
  position:fixed; top:var(--header-h); left:0; right:0; z-index:480;
  background:rgba(11,9,6,0.98); border-bottom:1px solid var(--line);
  display:flex; flex-direction:column; padding:10px 24px 18px;
  transform:translateY(-120%); transition: transform .35s cubic-bezier(.16,.8,.24,1);
}
.mobile-nav.open{ transform:translateY(0); }
.mobile-nav a{ font-family:var(--font-display); font-size:20px; padding:12px 0; border-bottom:1px solid var(--line); color:var(--khaki); }
.mobile-nav-actions{ display:flex; gap:14px; margin-top:14px; }
.mobile-nav-actions a{ font-family:var(--font-mono); font-size:12px; letter-spacing:0.06em; color:var(--brass); border:1px solid var(--line-strong); padding:10px 14px; }

/* ==========================================================================
   BUTTONS / CA ROW / COPY / TOAST
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-size:15px; letter-spacing:0.04em;
  padding:16px 26px; border:1px solid var(--line-strong);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
  position:relative;
}
.btn-glyph{ font-size:13px; }
.btn-primary{
  background: linear-gradient(180deg, #dcae5f, var(--brass));
  color: var(--ink); border-color: var(--brass);
  box-shadow: 0 10px 30px -10px rgba(207,154,77,0.55);
}
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 16px 34px -8px rgba(207,154,77,0.7); }
.btn-ghost{ background:rgba(239,231,210,0.03); color:var(--cream); }
.btn-ghost:hover{ background:rgba(239,231,210,0.1); border-color:var(--line-strong); transform:translateY(-3px); }

.cta-row{ display:flex; gap:16px; flex-wrap:wrap; margin-top:26px; }
.cta-row.center{ justify-content:center; }

.ca-row{
  display:inline-flex; align-items:center; gap:12px;
  border:1px dashed var(--line-strong); padding:10px 10px 10px 16px;
  margin-top:22px; background:rgba(0,0,0,0.25);
  max-width:100%;
}
.ca-row-center{ margin-left:auto; margin-right:auto; }
.ca-label{ font-family:var(--font-mono); font-size:11px; color:var(--brass); letter-spacing:0.1em; }
.ca-value{
  font-family:var(--font-mono); font-size:13px; color:var(--khaki);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:220px;
}
.copy-btn{
  display:flex; align-items:center; gap:6px;
  border:1px solid var(--line-strong); padding:8px 12px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em; color:var(--cream);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.copy-btn svg{ width:14px; height:14px; }
.copy-btn:hover{ background:var(--brass); color:var(--ink); border-color:var(--brass); }
.copy-btn.copied{ background:var(--olive); color:var(--cream); border-color:var(--olive); }

.toast{
  position:fixed; left:50%; bottom:32px; transform:translate(-50%,20px);
  background:var(--brass); color:var(--ink); font-family:var(--font-mono);
  font-size:12px; letter-spacing:0.1em; padding:12px 18px; z-index:1500;
  opacity:0; pointer-events:none; transition: opacity .3s ease, transform .3s ease;
}
.toast.show{ opacity:1; transform:translate(-50%,0); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  overflow:hidden; padding-top:var(--header-h);
}
.hero-bg-wrap{ position:absolute; inset:0; z-index:0; }
.hero-bg{
  position:absolute; inset:-10% -5%; background-size:cover; background-position:center 30%;
}
.hero-vignette{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(11,9,6,0.05), rgba(11,9,6,0.55) 60%, rgba(11,9,6,0.92) 100%),
    linear-gradient(to top, rgba(11,9,6,0.98) 0%, rgba(11,9,6,0.45) 42%, rgba(11,9,6,0.15) 70%);
}
.hero-inner{ position:relative; z-index:2; width:100%; max-width:var(--container); margin:0 auto; padding:0 24px 96px; }
.hero-title{ perspective:900px; }
.tilt-3d{
  display:inline-block; font-size:clamp(46px,9.2vw,116px); line-height:0.94; color:var(--cream);
  text-shadow: 0 2px 0 rgba(0,0,0,0.4), 0 22px 46px rgba(0,0,0,0.55);
  transform-style:preserve-3d; will-change:transform;
}
.ticker-chip{
  display:inline-flex; margin-top:18px; font-family:var(--font-mono); font-size:14px; letter-spacing:0.08em;
  color:var(--ink); background:var(--khaki); padding:7px 14px; border:1px solid var(--paper-darker);
}
.hero-tag{ margin-top:18px; font-size:20px; color:var(--khaki); max-width:520px; }

.scroll-cue{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:10px; letter-spacing:0.2em; color:var(--khaki); z-index:2;
}
.scroll-cue i{
  width:1px; height:34px; background:linear-gradient(to bottom, var(--brass), transparent);
  position:relative; overflow:hidden;
}
.scroll-cue i::after{
  content:""; position:absolute; left:-1px; top:-34px; width:3px; height:14px; background:var(--brass);
  animation: scrollDrop 1.8s ease-in-out infinite;
}
@keyframes scrollDrop{ 0%{ transform:translateY(0); opacity:0;} 20%{opacity:1;} 100%{ transform:translateY(68px); opacity:0; } }

/* ==========================================================================
   MARQUEE
   ========================================================================== */
.marquee-strip{
  background:var(--brass); color:var(--ink); overflow:hidden; white-space:nowrap;
  border-top:1px solid var(--olive-dark); border-bottom:1px solid var(--olive-dark);
  position:relative; z-index:3;
}
.marquee-track{ display:inline-flex; animation: marqueeScroll 26s linear infinite; }
.marquee-track span{
  font-family:var(--font-display); font-size:15px; letter-spacing:0.06em; padding:12px 0;
  display:inline-block; white-space:nowrap;
}
@keyframes marqueeScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ==========================================================================
   GENERIC SECTION SHELL
   ========================================================================== */
.section{ position:relative; padding:120px 0; overflow:hidden; }
.section-bg{ position:absolute; inset:-8%; background-size:cover; background-position:center; z-index:0; }
.section-scrim{ position:absolute; inset:0; z-index:1; background: linear-gradient(180deg, var(--bg) 0%, rgba(11,9,6,0.78) 16%, rgba(11,9,6,0.86) 84%, var(--bg) 100%); }
.section-scrim.scrim-dark{ background: linear-gradient(180deg, var(--bg) 0%, rgba(6,5,3,0.9) 14%, rgba(6,5,3,0.94) 86%, var(--bg) 100%); }
.section-inner{ position:relative; z-index:2; max-width:var(--container); margin:0 auto; padding:0 24px; }

/* ==========================================================================
   LORE
   ========================================================================== */
.lore-grid{ display:grid; grid-template-columns: 1.1fr 1fr; gap:64px; align-items:start; }
.field-note{ display:flex; gap:16px; padding:18px 0; border-top:1px solid var(--line); }
.field-note:last-child{ border-bottom:1px solid var(--line); }
.field-tag{ font-family:var(--font-mono); color:var(--brass); font-size:13px; flex:none; padding-top:2px; }
.field-note p{ font-size:19px; color:var(--khaki); line-height:1.5; }

.lore-gallery{ display:grid; grid-template-columns:1fr 1fr; gap:20px; perspective:1000px; }
.dossier-photo{
  margin:0; background:var(--ink-soft); padding:10px 10px 34px;
  border:1px solid var(--line-strong); box-shadow:0 20px 40px -18px rgba(0,0,0,0.7);
  transform: rotate(var(--rot)); transition: transform .4s ease, box-shadow .4s ease;
  position:relative;
}
.dossier-photo:nth-child(2){ margin-top:34px; }
.dossier-photo:nth-child(4){ margin-top:-14px; }
.dossier-photo img{ width:100%; height:auto; filter:contrast(1.05); }
.dossier-photo figcaption{
  position:absolute; left:10px; right:10px; bottom:10px;
  font-family:var(--font-mono); font-size:10px; letter-spacing:0.14em; color:var(--brass); text-align:center;
}
.tilt-card:hover{ transform: rotate(0deg) scale(1.035) translateY(-6px); box-shadow:0 28px 50px -16px rgba(0,0,0,0.8); z-index:3; }

/* ==========================================================================
   HOW TO BUY
   ========================================================================== */
.steps-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:12px; }
.step-card{
  border:1px solid var(--line); padding:26px 20px 24px; background:rgba(20,16,10,0.55);
  position:relative; transition: transform .3s ease, border-color .3s ease, background .3s ease;
}
.step-card:hover{ transform:translateY(-8px); border-color:var(--line-strong); background:rgba(20,16,10,0.85); }
.step-num{ font-family:var(--font-mono); color:var(--brass); font-size:13px; letter-spacing:0.1em; }
.step-card h3{ font-size:20px; margin:14px 0 10px; color:var(--cream); }
.step-card p{ color:var(--khaki); font-size:17px; line-height:1.45; }

/* ==========================================================================
   CHART
   ========================================================================== */
.hud-frame{
  position:relative; border:1px solid var(--line-strong); padding:16px; margin-top:8px;
  background:rgba(0,0,0,0.35);
}
.hud-label{
  display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:11px;
  letter-spacing:0.14em; color:var(--khaki); margin-bottom:12px;
}
.hud-label .dot{ width:7px; height:7px; border-radius:50%; background:var(--danger); box-shadow:0 0 0 3px rgba(181,80,47,0.25); animation: pulseDot 1.6s ease-in-out infinite; }
@keyframes pulseDot{ 0%,100%{opacity:1;} 50%{opacity:0.35;} }
.chart-embed-wrap{ position:relative; width:100%; padding-top:56%; background:var(--ink); border:1px solid var(--line); }
.chart-embed-wrap iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.chart-fallback{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  background:var(--ink); text-align:center; padding:20px;
}
.chart-fallback p{ font-family:var(--font-mono); font-size:12px; letter-spacing:0.1em; color:var(--khaki); }

/* ==========================================================================
   ROADMAP / TIMELINE
   ========================================================================== */
.timeline{ position:relative; max-width:820px; margin:0 auto; }
.timeline::before{ content:""; position:absolute; left:50%; top:0; bottom:0; width:1px; background:var(--line-strong); transform:translateX(-50%); }
.timeline-item{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; padding:34px 0; position:relative; }
.timeline-item:nth-child(odd) .timeline-marker{ grid-column:1; text-align:right; }
.timeline-item:nth-child(odd) .timeline-body{ grid-column:2; }
.timeline-item:nth-child(even) .timeline-marker{ grid-column:2; order:2; text-align:left; }
.timeline-item:nth-child(even) .timeline-body{ grid-column:1; order:1; text-align:right; }
.timeline-marker{
  font-family:var(--font-mono); font-size:22px; letter-spacing:0.08em; color:var(--brass);
  position:relative;
}
.timeline-marker::after{
  content:""; position:absolute; top:50%; width:10px; height:10px; background:var(--brass); border-radius:50%;
  transform:translateY(-50%); box-shadow:0 0 0 5px rgba(207,154,77,0.18);
}
.timeline-item:nth-child(odd) .timeline-marker::after{ right:-45px; }
.timeline-item:nth-child(even) .timeline-marker::after{ left:-45px; }
.timeline-body h3{ font-size:21px; color:var(--cream); margin-bottom:8px; }
.timeline-body p{ font-size:17px; color:var(--khaki); line-height:1.5; }

/* ==========================================================================
   RALLY POINT / FOOTER CTA
   ========================================================================== */
.rally-tag{ text-align:center; color:var(--khaki); font-size:19px; margin-top:-10px; margin-bottom:40px; }
.rally-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.rally-btn{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  border:1px solid var(--line-strong); padding:26px 12px; color:var(--cream);
  background:rgba(20,16,10,0.5); transition: transform .25s ease, background .25s ease, border-color .25s ease, color .25s ease;
  font-family:var(--font-display); font-size:13px; letter-spacing:0.06em;
}
.rally-btn svg{ width:24px; height:24px; }
.rally-btn:hover{ transform:translateY(-6px); background:var(--brass); color:var(--ink); border-color:var(--brass); }

.jump-stamps{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:44px; }
.stamp{
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.14em; color:var(--khaki);
  border:1px dashed var(--line-strong); padding:9px 16px; transform:rotate(-2deg);
  transition: transform .2s ease, color .2s ease, border-color .2s ease;
}
.stamp:nth-child(even){ transform:rotate(2deg); }
.stamp:hover{ transform:rotate(0deg) scale(1.06); color:var(--brass); border-color:var(--brass); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ background:var(--bg-soft); border-top:1px solid var(--line); padding:48px 24px 34px; }
.footer-inner{ max-width:var(--container); margin:0 auto; text-align:center; display:flex; flex-direction:column; align-items:center; gap:16px; }
.disclaimer{ max-width:640px; font-size:14px; color:rgba(239,231,210,0.55); line-height:1.55; }
.copyright{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em; color:rgba(239,231,210,0.4); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 980px){
  .lore-grid{ grid-template-columns:1fr; gap:44px; }
  .steps-grid{ grid-template-columns:repeat(2,1fr); }
  .rally-grid{ grid-template-columns:repeat(3,1fr); }
  .timeline-item, .timeline-item:nth-child(even){ grid-template-columns:1fr; text-align:left!important; }
  .timeline-item .timeline-marker, .timeline-item:nth-child(even) .timeline-marker{ text-align:left!important; grid-column:1; order:0; }
  .timeline-item .timeline-body, .timeline-item:nth-child(even) .timeline-body{ grid-column:1; order:1; text-align:left!important; }
  .timeline::before{ left:8px; }
  .timeline-marker::after, .timeline-item:nth-child(even) .timeline-marker::after{ left:-33px!important; right:auto!important; }
  .timeline-item{ padding-left:30px; }
}
@media (max-width: 760px){
  body{ font-size:16px; }
  .main-nav{ display:none; }
  .hamburger{ display:flex; }
  .section{ padding:84px 0; }
  .rally-grid{ grid-template-columns:repeat(2,1fr); }
  .steps-grid{ grid-template-columns:1fr; }
  .ca-value{ max-width:140px; }
  .hero-inner{ padding-bottom:28px; }
  .hero{ min-height:auto; padding-bottom:56px; }
  .scroll-cue{ display:none; }
  .cta-row .btn{ width:100%; justify-content:center; }
  .rally-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-height: 720px) and (max-width: 500px){
  .scroll-cue{ display:none; }
}