:root{--paper:#fdfcf7;--paper-alt:#f2efe4;--paper-deep:#e6e1d0;--ink:#15181d;--ink-muted:#4c5563;--verde:#0f5132;--teal:#0d5c6e;--rosa:#a51f57;--oro:#8a6200;--oro-fill:#ffc933;--ladrillo:#a6431c}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{background:var(--paper);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:Archivo,system-ui,sans-serif;letter-spacing:-0.02em}

/* ── SKIP LINK ── */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100}
.skip-link:focus{left:12px;top:12px;background:var(--ink);color:#fff;padding:12px 18px;font-weight:800;border:3px solid var(--oro-fill)}

/* ── FOCUS ── */
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
a,button{-webkit-tap-highlight-color:transparent}
a{color:var(--verde)}
a:hover{color:var(--rosa)}

/* ── NEOBRUTALIST SURFACES ── */
.nb{background:#fff;border:2.5px solid var(--ink);box-shadow:5px 5px 0 var(--ink)}
.nb-sm{background:#fff;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.nb-lg{background:#fff;border:3px solid var(--ink);box-shadow:8px 8px 0 var(--ink)}
.nb-flat{background:#fff;border:2.5px solid var(--ink)}
.nb-hover{transition:transform .14s cubic-bezier(.2,.8,.3,1),box-shadow .14s cubic-bezier(.2,.8,.3,1)}
.nb-hover:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--ink)}
.nb-press{transition:transform .1s ease,box-shadow .1s ease}
.nb-press:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.nb-tape{border-top:8px solid var(--ink)}

/* ── EYEBROW ── */
.eyebrow{font-family:Archivo,sans-serif;font-weight:800;font-size:11px;letter-spacing:.14em;text-transform:uppercase}

/* ── INTERESTING BACKGROUNDS ── */
.bg-canvas{background-color:var(--paper);background-image:radial-gradient(rgba(21,24,29,.13) 1.5px,transparent 1.5px);background-size:22px 22px}
.bg-graph{background-color:var(--paper-alt);background-image:linear-gradient(var(--ink) 1.5px,transparent 1.5px),linear-gradient(90deg,var(--ink) 1.5px,transparent 1.5px);background-size:64px 64px;background-position:-1px -1px;position:relative}
.bg-graph::before{content:"";position:absolute;inset:0;background:var(--paper-alt);opacity:.9;pointer-events:none}
.bg-graph>*{position:relative}
.bg-diag{background-color:var(--paper);background-image:repeating-linear-gradient(45deg,rgba(21,24,29,.055) 0 2px,transparent 2px 14px)}
.bg-stripe-oro{background-color:var(--oro-fill);background-image:repeating-linear-gradient(-45deg,rgba(21,24,29,.11) 0 8px,transparent 8px 20px)}

/* hero collage ground */
.hero-ground{background-color:var(--paper);background-image:radial-gradient(rgba(21,24,29,.14) 1.6px,transparent 1.6px),radial-gradient(circle at 88% 8%,rgba(255,201,51,.5) 0,transparent 34%),radial-gradient(circle at 4% 76%,rgba(191,230,239,.62) 0,transparent 38%);background-size:24px 24px,100% 100%,100% 100%}

/* ── MARQUEE ── */
@keyframes slideX{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee{display:flex;width:max-content;animation:slideX 32s linear infinite}

/* ── FIGURES ── */
.fig{position:relative;overflow:hidden;background:var(--paper-alt);border:2.5px solid var(--ink)}
.fig img{width:100%;height:100%;object-fit:cover;display:block}
.fig figcaption{background:#fff;border-top:2.5px solid var(--ink)}

/* ── REVEAL ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.reveal{opacity:0}
.reveal.is-visible{animation:fadeUp .5s cubic-bezier(.22,.61,.36,1) forwards}

/* ── STEPPER ── */
.step-line{background:linear-gradient(to right,var(--rosa) var(--progress,0%),#fff var(--progress,0%));border:2.5px solid var(--ink);transition:background 500ms cubic-bezier(.22,.61,.36,1)}

.tabular{font-variant-numeric:tabular-nums}
.rot-l{transform:rotate(-1.4deg)}
.rot-r{transform:rotate(1.4deg)}

/* ── SCROLLBARS ── */
::-webkit-scrollbar{height:12px;width:12px}
::-webkit-scrollbar-track{background:var(--paper-alt);border-left:2px solid var(--ink)}
::-webkit-scrollbar-thumb{background:var(--ink)}
.scrollbar-hide::-webkit-scrollbar{display:none}
.scrollbar-hide{scrollbar-width:none}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1}
  .marquee{animation:none}
}