/* ═══════════════════════════════════════════════════════════
   TrumpCate — comic book press sheet
   Palette : ink #120E1A · newsprint #F7E9C4 · gold #FFC01F
             rust #E03127 · navy #17235E
   Type    : Titan One (shout) · Bangers (lettering) · Archivo (body)
   ═══════════════════════════════════════════════════════════ */

:root{
  --ink:#120E1A;
  --ink-soft:#2A2136;
  --paper:#F7E9C4;
  --paper-2:#EBD59A;
  --gold:#FFC01F;
  --gold-deep:#C4880A;
  --rust:#E03127;
  --navy:#17235E;
  --navy-deep:#0C1238;

  --border:4px;
  --drop:10px;
  --nav-h:74px;
}

*,*::before,*::after{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  margin:0;
  font-family:'Archivo',system-ui,sans-serif;
  color:var(--ink);
  background:var(--navy-deep);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block;}

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

/* ─── Global halftone / newsprint grain ─── */
.halftone{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:60;
  opacity:.20;
  background-image:radial-gradient(var(--ink) 1px, transparent 1.15px);
  background-size:4px 4px;
  mix-blend-mode:multiply;
}

.wrap{
  width:min(1180px,92vw);
  margin-inline:auto;
  position:relative;
  z-index:2;
}

/* ═══════════════ NAV ═══════════════ */
.nav{
  position:sticky;
  top:0;
  z-index:50;
  height:var(--nav-h);
  display:flex;
  align-items:center;
  gap:18px;
  padding:0 clamp(14px,3vw,34px);
  background:var(--ink);
  border-bottom:var(--border) solid var(--gold);
}

.nav-brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex-shrink:0;}

.nav-coin{
  width:44px;height:44px;
  border-radius:50%;
  border:3px solid var(--gold);
  box-shadow:0 0 0 3px var(--ink);
}

.nav-name{
  font-family:'Titan One',cursive;
  font-size:1.42rem;
  color:var(--gold);
  letter-spacing:.4px;
  line-height:1;
}

.nav-ticker{
  font-family:'Bangers',cursive;
  font-size:.82rem;
  letter-spacing:1.6px;
  color:var(--paper);
  background:var(--rust);
  border:2px solid var(--paper);
  padding:1px 7px 0;
  transform:rotate(-3deg);
}

.nav-links{
  display:flex;
  gap:clamp(12px,2.4vw,30px);
  margin-left:auto;
}

.nav-links a{
  font-family:'Bangers',cursive;
  font-size:1.14rem;
  letter-spacing:1.5px;
  color:var(--paper);
  text-decoration:none;
  padding:4px 2px;
  border-bottom:3px solid transparent;
  transition:color .18s ease,border-color .18s ease;
}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--gold);border-bottom-color:var(--gold);}

.nav-actions{display:flex;align-items:center;gap:9px;}

.icon-btn{
  width:40px;height:40px;
  display:grid;place-items:center;
  color:var(--ink);
  background:var(--paper);
  border:3px solid var(--ink);
  box-shadow:3px 3px 0 var(--gold);
  font-size:1.02rem;
  text-decoration:none;
  transition:transform .15s ease,background .15s ease;
}
.icon-btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--gold);background:var(--gold);}

/* ═══════════════ BUTTONS ═══════════════ */
.btn{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:'Bangers',cursive;
  font-size:1.16rem;
  letter-spacing:1.6px;
  text-decoration:none;
  padding:11px 21px 8px;
  border:3px solid var(--ink);
  box-shadow:5px 5px 0 var(--ink);
  transition:transform .14s ease,box-shadow .14s ease,background .14s ease;
  cursor:pointer;
}
.btn:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--ink);}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink);}

.btn-buy{background:var(--gold);color:var(--ink);}
.btn-buy:hover{background:#FFD35E;}

.btn-ghost{background:var(--paper);color:var(--ink);}
.btn-ghost:hover{background:#fff;}

.btn-x{background:var(--ink);color:var(--paper);border-color:var(--paper);box-shadow:5px 5px 0 var(--gold);}
.btn-x:hover{box-shadow:8px 8px 0 var(--gold);background:#000;}

.nav-buy{padding:9px 16px 6px;font-size:1.05rem;box-shadow:4px 4px 0 var(--paper);}
.nav-buy:hover{box-shadow:6px 6px 0 var(--paper);}

/* ═══════════════ PAGE MARKS (comic page numbering) ═══════════════ */
.page-mark{
  position:absolute;
  top:clamp(90px,12vh,150px);
  left:-4px;
  z-index:6;
  font-family:'Bangers',cursive;
  font-size:.95rem;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--ink);
  background:var(--gold);
  border:3px solid var(--ink);
  padding:4px 14px 2px;
  transform:rotate(-90deg);
  transform-origin:0 0;
  translate:0 100%;
}
.page-mark-light{background:var(--paper);}

/* ═══════════════ HERO ═══════════════ */
.hero{
  position:relative;
  min-height:calc(100svh - var(--nav-h));
  display:flex;
  align-items:center;
  padding:clamp(48px,9vh,96px) 0 96px;
  overflow:hidden;
  border-bottom:var(--border) solid var(--ink);
}

.hero-art{
  position:absolute;
  inset:0;
  background-image:url('../1.png');
  background-size:cover;
  background-position:52% center;
  filter:saturate(1.12) contrast(1.05);
  animation:heroDrift 28s ease-in-out infinite alternate;
}

@keyframes heroDrift{
  from{transform:scale(1.06) translate3d(0,0,0);}
  to  {transform:scale(1.13) translate3d(-1.6%,-1.2%,0);}
}

.hero-wash{
  position:absolute;
  inset:0;
  background:
    linear-gradient(258deg, rgba(12,18,56,.94) 0%, rgba(12,18,56,.80) 34%, rgba(12,18,56,.18) 62%, rgba(12,18,56,.42) 100%),
    repeating-linear-gradient(72deg, rgba(255,192,31,.10) 0 3px, transparent 3px 26px);
}

.hero-inner{
  width:min(1180px,92vw);
  margin-inline:auto;
  position:relative;
  z-index:3;
  display:flex;
  justify-content:flex-end;
}

.hero-copy{
  width:min(620px,100%);
  padding:clamp(22px,3vw,34px);
  background:rgba(18,14,26,.55);
  border:var(--border) solid var(--gold);
  box-shadow:var(--drop) var(--drop) 0 rgba(18,14,26,.85);
  backdrop-filter:blur(3px);
}

.kicker{
  font-family:'Bangers',cursive;
  letter-spacing:2.6px;
  font-size:.95rem;
  color:var(--gold);
  margin:0 0 14px;
  text-transform:uppercase;
}
.kicker i{color:var(--rust);}

.hero-title{
  margin:0 0 22px;
  font-family:'Titan One',cursive;
  font-weight:400;
  line-height:.92;
  font-size:clamp(2.9rem,7.6vw,5.1rem);
  text-transform:uppercase;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
}

.hero-title .line{
  display:block;
  padding:0 .14em;
  color:var(--paper);
  text-shadow:
    4px 4px 0 var(--ink),
    -2px -2px 0 var(--ink),
    2px -2px 0 var(--ink),
    -2px 2px 0 var(--ink);
  animation:pop .5s cubic-bezier(.2,1.4,.4,1) both;
}
.line-1{animation-delay:.05s;transform:rotate(-2.2deg);}
.line-2{animation-delay:.15s;color:var(--gold);transform:rotate(1.2deg) translateX(.18em);}
.line-3{animation-delay:.25s;color:var(--rust);transform:rotate(-1.4deg) translateX(.05em);
        text-shadow:4px 4px 0 var(--ink),-2px -2px 0 var(--paper),2px -2px 0 var(--paper),-2px 2px 0 var(--paper);}
.line-4{animation-delay:.35s;transform:rotate(1.8deg) translateX(.3em);}

@keyframes pop{
  from{opacity:0;transform:scale(.72) rotate(-6deg);}
}

.bubble{
  position:relative;
  background:var(--paper);
  color:var(--ink);
  border:3px solid var(--ink);
  border-radius:22px;
  padding:15px 20px;
  margin:0 0 26px;
  max-width:480px;
  box-shadow:5px 5px 0 var(--ink);
}
.bubble p{margin:0;font-size:1.03rem;font-weight:600;line-height:1.5;}
.bubble::after{
  content:'';
  position:absolute;
  left:38px;bottom:-17px;
  width:0;height:0;
  border:9px solid transparent;
  border-top:16px solid var(--ink);
}
.bubble::before{
  content:'';
  position:absolute;
  left:41px;bottom:-9px;
  z-index:1;
  width:0;height:0;
  border:6px solid transparent;
  border-top:12px solid var(--paper);
}
.bubble-solid{background:var(--gold);}
.bubble-solid::before{border-top-color:var(--gold);}

.hero-btns{display:flex;flex-wrap:wrap;gap:12px;}

/* ─── CA caption box ─── */
.ca-strip{
  position:absolute;
  left:0;right:0;bottom:0;
  z-index:4;
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  padding:11px clamp(14px,4vw,40px);
  background:var(--ink);
  border-top:3px solid var(--gold);
}

.ca-label{
  font-family:'Bangers',cursive;
  letter-spacing:2px;
  font-size:.95rem;
  color:var(--ink);
  background:var(--gold);
  padding:3px 10px 1px;
  text-transform:uppercase;
  flex-shrink:0;
}

.ca-value{
  font-family:'Archivo',monospace;
  font-size:clamp(.72rem,1.9vw,.95rem);
  font-weight:600;
  letter-spacing:.4px;
  color:var(--paper);
  word-break:break-all;
  flex:1 1 220px;
  min-width:0;
}

.ca-copy{
  font-family:'Bangers',cursive;
  letter-spacing:1.4px;
  font-size:.98rem;
  color:var(--ink);
  background:var(--paper);
  border:3px solid var(--gold);
  padding:5px 13px 3px;
  cursor:pointer;
  flex-shrink:0;
  transition:background .15s ease,transform .15s ease;
}
.ca-copy:hover{background:var(--gold);transform:translateY(-2px);}

/* ═══════════════ MARQUEE ═══════════════ */
.marquee{
  background:var(--rust);
  border-block:var(--border) solid var(--ink);
  overflow:hidden;
  padding:9px 0;
  position:relative;
  z-index:3;
}
.marquee-track{
  display:flex;
  align-items:center;
  gap:26px;
  white-space:nowrap;
  width:max-content;
  animation:slide 26s linear infinite;
}
.marquee-track span{
  font-family:'Bangers',cursive;
  font-size:1.28rem;
  letter-spacing:2.4px;
  color:var(--paper);
  text-transform:uppercase;
}
.marquee-track i{color:var(--gold);font-size:.8rem;}
@keyframes slide{to{transform:translateX(-50%);}}

/* ═══════════════ SHEETS (sections) ═══════════════ */
.sheet{
  position:relative;
  padding:clamp(64px,10vw,120px) 0;
  scroll-margin-top:var(--nav-h);
  border-bottom:var(--border) solid var(--ink);
  overflow:hidden;
}

.sheet-about{
  background:
    repeating-linear-gradient(135deg, rgba(18,14,26,.05) 0 2px, transparent 2px 16px),
    radial-gradient(circle at 22% 12%, #FFDE86 0%, var(--paper) 46%, var(--paper-2) 100%);
}

.sheet-community{
  background:
    repeating-linear-gradient(-38deg, rgba(255,192,31,.07) 0 4px, transparent 4px 30px),
    radial-gradient(circle at 78% 18%, #24357F 0%, var(--navy) 40%, var(--navy-deep) 100%);
}

.sheet-buy{background:var(--ink);}
.buy-art{
  position:absolute;
  inset:0;
  background-image:url('../2.png');
  background-size:cover;
  background-position:center 30%;
  opacity:.34;
}
.sheet-buy::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(18,14,26,.90) 0%, rgba(18,14,26,.55) 42%, rgba(18,14,26,.94) 100%);
}
.sheet-buy .wrap{z-index:3;}

/* ─── Section heads ─── */
.sheet-head{margin-bottom:clamp(34px,5vw,58px);}

.eyebrow{
  font-family:'Bangers',cursive;
  letter-spacing:3.4px;
  text-transform:uppercase;
  font-size:1rem;
  margin:0 0 6px;
  color:var(--rust);
}
.sheet-head-light .eyebrow{color:var(--gold);}

.shout{
  margin:0;
  font-family:'Titan One',cursive;
  font-weight:400;
  font-size:clamp(2.3rem,5.6vw,4rem);
  line-height:1;
  text-transform:uppercase;
  color:var(--ink);
  text-shadow:5px 5px 0 var(--gold);
  transform:rotate(-1.4deg);
  display:inline-block;
}
.shout-light{color:var(--paper);text-shadow:5px 5px 0 var(--rust);}

/* ═══════════════ PANEL SYSTEM + PERSPECTIVE ═══════════════ */
.stage{
  perspective:1500px;
  perspective-origin:50% 42%;
}

.panel{
  position:relative;
  background:var(--paper);
  border:var(--border) solid var(--ink);
  box-shadow:var(--drop) var(--drop) 0 var(--ink);
  transform-style:preserve-3d;
  transition:transform .45s cubic-bezier(.2,.8,.3,1), box-shadow .45s ease;
}

.tilt-left {transform:rotateY(6.5deg)  rotateX(2deg)  rotateZ(-.7deg);}
.tilt-right{transform:rotateY(-6.5deg) rotateX(2deg)  rotateZ(.7deg);}
.panel:hover{transform:rotateY(0) rotateX(0) rotateZ(0) translateZ(26px);box-shadow:16px 16px 0 var(--ink);}

/* Scroll reveal wrapper */
.rise{opacity:0;transform:translateY(34px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.3,1);}
.rise.in{opacity:1;transform:none;}

/* ═══════════════ ABOUT GRID ═══════════════ */
.about-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(22px,3vw,38px);
  align-items:start;
}

.panel-cover{grid-column:span 7;margin:0;overflow:hidden;}
.panel-cover img{width:100%;height:100%;object-fit:cover;}

.panel-story{grid-column:span 5;padding:clamp(22px,3vw,32px);}
.panel-story h3{
  margin:0 0 12px;
  font-family:'Titan One',cursive;
  font-weight:400;
  font-size:clamp(1.35rem,2.4vw,1.85rem);
  line-height:1.1;
  text-transform:uppercase;
  color:var(--navy);
}
.panel-story p{margin:0 0 13px;font-size:1.04rem;line-height:1.62;font-weight:500;}
.story-sig{
  font-family:'Bangers',cursive;
  letter-spacing:1.5px;
  font-size:1rem;
  color:var(--rust);
  margin-bottom:0 !important;
}

.panel-coin{
  grid-column:span 4;
  margin:0;
  padding:22px 22px 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  background:radial-gradient(circle at 50% 40%, #FFE9A8 0%, var(--paper) 70%);
}
.panel-coin img{width:min(230px,72%);}
.coin-spin{animation:bob 4.5s ease-in-out infinite;}
@keyframes bob{50%{transform:translateY(-11px) rotate(-4deg);}}

figure figcaption{
  font-family:'Bangers',cursive;
  letter-spacing:1.5px;
  font-size:1rem;
  text-transform:uppercase;
  color:var(--paper);
  background:var(--ink);
  padding:7px 14px 5px;
  margin:0;
  width:100%;
  text-align:center;
}
.panel-coin figcaption{margin-top:16px;}

.stat-row{
  grid-column:span 8;
  list-style:none;
  margin:0;padding:0;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(14px,2vw,22px);
  align-content:start;
}
.stat{
  background:var(--ink);
  border:3px solid var(--gold);
  box-shadow:6px 6px 0 rgba(18,14,26,.35);
  padding:16px 18px;
  display:flex;
  flex-direction:column;
  gap:3px;
  transition:transform .2s ease;
}
.stat:hover{transform:translate(-3px,-3px);}
.stat-k{
  font-family:'Bangers',cursive;
  letter-spacing:2.4px;
  font-size:.85rem;
  text-transform:uppercase;
  color:var(--gold);
}
.stat-v{
  font-family:'Titan One',cursive;
  font-size:clamp(1.05rem,1.9vw,1.35rem);
  color:var(--paper);
  line-height:1.15;
}

/* ═══════════════ HOW TO BUY ═══════════════ */
.steps{
  list-style:none;
  margin:0;padding:0;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(24px,3.4vw,42px);
}

.step{padding:clamp(24px,3vw,34px) clamp(22px,3vw,30px) clamp(24px,3vw,30px);}

.step-no{
  position:absolute;
  top:-24px;left:-16px;
  font-family:'Titan One',cursive;
  font-size:2.7rem;
  line-height:1;
  color:var(--gold);
  background:var(--ink);
  border:3px solid var(--gold);
  padding:8px 15px 4px;
  transform:rotate(-6deg);
  box-shadow:5px 5px 0 rgba(0,0,0,.4);
}

.step-icon{
  font-size:1.9rem;
  color:var(--rust);
  display:block;
  margin:8px 0 12px;
}

.step h3{
  margin:0 0 10px;
  font-family:'Titan One',cursive;
  font-weight:400;
  font-size:clamp(1.2rem,2.1vw,1.55rem);
  line-height:1.12;
  text-transform:uppercase;
  color:var(--navy);
}
.step p{margin:0;font-size:1.01rem;line-height:1.6;font-weight:500;}
.step-btn{margin-top:18px;}

.buy-note{
  margin:clamp(34px,4vw,52px) 0 0;
  display:flex;
  align-items:center;
  gap:11px;
  font-family:'Bangers',cursive;
  letter-spacing:1.7px;
  font-size:1.1rem;
  color:var(--paper);
  background:var(--rust);
  border:3px solid var(--paper);
  box-shadow:7px 7px 0 var(--gold);
  padding:14px 20px 11px;
}
.buy-note i{font-size:1.3rem;color:var(--gold);flex-shrink:0;}

/* ═══════════════ COMMUNITY ═══════════════ */
.community-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(24px,3.4vw,40px);
  align-items:start;
}
.panel-shot{margin:0;overflow:hidden;}
.panel-shot img{width:100%;aspect-ratio:16/9;object-fit:cover;}

.panel-cta{
  grid-column:span 2;
  padding:clamp(26px,3.4vw,40px);
  background:linear-gradient(140deg,#FFE9A8 0%,var(--paper) 55%,var(--paper-2) 100%);
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.panel-cta .bubble{margin-bottom:30px;}
.panel-cta .bubble p{font-family:'Bangers',cursive;letter-spacing:1.6px;font-size:1.3rem;}
.cta-copy{
  margin:0 0 22px;
  font-size:1.08rem;
  font-weight:600;
  line-height:1.6;
  max-width:56ch;
}
.cta-btns{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;}

/* ═══════════════ FOOTER ═══════════════ */
.foot{
  background:var(--ink);
  padding:clamp(44px,6vw,68px) 0 34px;
  color:var(--paper);
}
.foot-wrap{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;}

.foot-brand{display:flex;align-items:center;gap:13px;}
.foot-brand img{width:56px;height:56px;border-radius:50%;border:3px solid var(--gold);}
.foot-name{margin:0;font-family:'Titan One',cursive;font-size:1.35rem;color:var(--gold);line-height:1.1;text-align:left;}
.foot-tick{margin:0;font-family:'Bangers',cursive;letter-spacing:2px;font-size:.92rem;text-align:left;}

.foot-links{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;}
.foot-links a{
  display:inline-flex;align-items:center;gap:7px;
  font-family:'Bangers',cursive;letter-spacing:1.6px;font-size:1.02rem;
  color:var(--ink);background:var(--paper);
  border:3px solid var(--gold);
  padding:6px 15px 4px;
  text-decoration:none;
  transition:background .15s ease,transform .15s ease;
}
.foot-links a:hover{background:var(--gold);transform:translateY(-3px);}

.foot-legal{
  margin:8px 0 0;
  max-width:76ch;
  font-size:.83rem;
  line-height:1.65;
  color:#B9AFC6;
}
.foot-copy{margin:0;font-family:'Bangers',cursive;letter-spacing:2px;font-size:.9rem;color:var(--gold);}

/* ═══════════════ TOAST ═══════════════ */
.toast{
  position:fixed;
  left:50%;bottom:26px;
  transform:translate(-50%,140%);
  z-index:70;
  font-family:'Bangers',cursive;
  letter-spacing:1.8px;
  font-size:1.05rem;
  color:var(--ink);
  background:var(--gold);
  border:3px solid var(--ink);
  box-shadow:6px 6px 0 var(--ink);
  padding:11px 22px 8px;
  transition:transform .3s cubic-bezier(.2,1.3,.4,1);
}
.toast.show{transform:translate(-50%,0);}

/* ═══════════════ FOCUS ═══════════════ */
a:focus-visible,button:focus-visible{
  outline:4px solid var(--gold);
  outline-offset:3px;
}

/* ═══════════════ RESPONSIVE ═══════════════ */
@media (max-width:980px){
  .panel-cover,.panel-story,.panel-coin,.stat-row{grid-column:span 12;}
  .stat-row{grid-template-columns:repeat(2,1fr);}
  .panel-coin{max-width:420px;}
  .steps{grid-template-columns:1fr;}
  .community-grid{grid-template-columns:1fr;}
  .panel-cta{grid-column:span 1;}
  .nav-links{display:none;}
  .hero-inner{justify-content:center;}
  .tilt-left,.tilt-right{transform:none;}
  .panel:hover{transform:translateZ(0) translateY(-4px);}
}

@media (max-width:560px){
  :root{--drop:7px;}
  .nav-ticker{display:none;}
  .page-mark{display:none;}
  .hero{min-height:auto;padding-bottom:150px;}
  .hero-copy{width:100%;}
  .hero-btns .btn{flex:1 1 100%;justify-content:center;}
  .stat-row{grid-template-columns:1fr;}
  .step-no{top:-18px;left:-10px;font-size:2.1rem;}
  .foot-brand{flex-direction:column;text-align:center;}
  .foot-name,.foot-tick{text-align:center;}
}

/* ═══════════════ REDUCED MOTION ═══════════════ */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}
  .rise{opacity:1;transform:none;}
  .hero-art{transform:scale(1.05);}
}