:root{
  --navy:#0E1B33;
  --navy-deep:#081020;
  --navy-mid:#152743;
  --gold:#C9A24A;
  --gold-bright:#E7CE87;
  --copper:#93542E;
  --copper-bright:#B4703F;
  --paper:#F6F1E5;
  --paper-dim:#EDE6D4;
  --ink:#1C1A16;
  --ink-soft:#4A463C;
  --rule:#D8CEB4;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Work Sans', sans-serif;
  -webkit-font-smoothing:antialiased;
}
.font-display{font-family:'Fraunces', serif;}
.rule{border-color:var(--rule);}

@keyframes riseIn{
  from{opacity:0; transform:translateY(18px);}
  to{opacity:1; transform:translateY(0);}
}
.rise-1{animation:riseIn .7s cubic-bezier(.2,.7,.2,1) .05s both;}
.rise-2{animation:riseIn .7s cubic-bezier(.2,.7,.2,1) .18s both;}
.rise-3{animation:riseIn .7s cubic-bezier(.2,.7,.2,1) .30s both;}
@media (prefers-reduced-motion: reduce){
  .rise-1,.rise-2,.rise-3{animation:none;}
}

.ticker-track{
  display:flex;
  width:max-content;
  animation:tick 38s linear infinite;
}
@media (prefers-reduced-motion: reduce){ .ticker-track{animation:none;} }
@keyframes tick{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

.underline-fade{
  background-image:linear-gradient(var(--gold), var(--gold));
  background-position:0 100%;
  background-repeat:no-repeat;
  background-size:0% 1.5px;
  transition:background-size .35s ease;
}
.underline-fade:hover{background-size:100% 1.5px;}

.texture-navy{
  background:
    radial-gradient(1100px 480px at 12% -10%, rgba(201,162,74,0.10), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(147,84,46,0.18), transparent 55%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
}

.lead-art{
  background:
    linear-gradient(155deg, rgba(8,16,32,.15), rgba(8,16,32,.72) 78%),
    linear-gradient(135deg, #274A6B 0%, #8A5B33 55%, #B98A4E 100%);
}
.duotone-copper{
  background:
    linear-gradient(160deg, rgba(14,27,51,.55), rgba(147,84,46,.55)),
    linear-gradient(135deg, #1B2E4C, #6B4327);
}
.duotone-navy{
  background:
    linear-gradient(160deg, rgba(14,27,51,.35), rgba(14,27,51,.75)),
    linear-gradient(135deg, #24406A, #12233F);
}

.stat-card{
  border:1px solid var(--rule);
  background:#FFFDF8;
}

.article-body p{ margin-bottom:1.15em; line-height:1.75; }
.article-body h2{ font-family:'Fraunces', serif; font-weight:600; font-size:1.4rem; margin-top:1.6em; margin-bottom:.6em; color:var(--navy); }
.article-body blockquote{ border-left:3px solid var(--copper); padding-left:1rem; font-style:italic; color:var(--ink-soft); margin:1.4em 0; }
.article-body img{ border-radius:2px; margin:1.4em 0; }
.article-body a{ color:var(--copper); text-decoration:underline; }

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

/* ---------- Mobile & touch fundamentals ---------- */
html{-webkit-tap-highlight-color:transparent;}
a,button{touch-action:manipulation;}
:focus-visible{outline:2px solid var(--gold); outline-offset:2px; border-radius:2px;}
img{max-width:100%;}

/* ---------- Image skeleton / fade-in ---------- */
.img-frame{ position:relative; overflow:hidden; background:var(--paper-dim); }
.img-frame::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg, var(--paper-dim) 30%, #F8F3E8 50%, var(--paper-dim) 70%);
  background-size:200% 100%;
  animation:shimmer 1.6s ease-in-out infinite;
}
.img-frame img{
  position:relative; opacity:0; transition:opacity .5s ease;
}
.img-frame img.is-loaded{opacity:1;}
.img-frame:has(img.is-loaded)::before{display:none;}
@keyframes shimmer{
  0%{background-position:180% 0;}
  100%{background-position:-20% 0;}
}
@media (prefers-reduced-motion: reduce){
  .img-frame::before{animation:none;}
}

/* ---------- Card lift ---------- */
@media (hover:hover){
  .card-lift{transition:transform .35s ease, box-shadow .35s ease;}
  .card-lift:hover{transform:translateY(-3px);}
}

/* ---------- Mobile refinements ---------- */
@media (max-width: 767px){
  h1.font-display{ letter-spacing:-0.01em; }
  .ticker-track{ animation-duration:22s; }
}