html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 9.5rem; }
.font-headline { font-variation-settings: "SOFT" 100, "WONK" 1; }

/* Primary color stripe across the top of the header */
.tri-stripe { background: linear-gradient(90deg, #D7352B 0 33.33%, #F4B731 33.33% 66.66%, #1E4FA3 66.66% 100%); }

/* Painted underline behind a word */
.brush-mark { position: relative; white-space: nowrap; z-index: 0; }
.brush-mark::after {
    content: ''; position: absolute; left: -0.1em; right: -0.1em; bottom: 0.05em; height: 0.38em; z-index: -1;
    background: var(--brush, #F4B731);
    border-radius: 40% 60% 55% 45% / 60% 40% 60% 40%;
    transform: rotate(-1.5deg);
}

/* Header nav: red tab bar */
.nav-tabs { scrollbar-width: none; }
.nav-tabs::-webkit-scrollbar { display: none; }
.nav-tab {
    flex-shrink: 0; white-space: nowrap; padding: 0.6rem 1.1rem; color: #fff; background: #B02820;
    border: 2px solid #141414; border-bottom: 0; border-radius: 0.75rem 0.75rem 0 0;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}
.nav-tab:hover { background: #F4B731; color: #141414; }
.nav-tab[aria-current="page"] { background: #FBF7EE; color: #141414; }
.nav-tab:focus-visible { outline: 3px solid #F4B731; outline-offset: -5px; }

/* Canvas-style card with offset "shadow" block */
.canvas-card { position: relative; background: #fff; border: 2px solid #141414; transition: transform .2s ease, box-shadow .2s ease; box-shadow: 6px 6px 0 var(--shadow, #141414); }
.canvas-card:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--shadow, #141414); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border: 2px solid #141414; font-weight: 700; transition: transform .15s ease, box-shadow .15s ease; box-shadow: 4px 4px 0 #141414; }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #141414; }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #141414; }

/* Subtle paper grain */
.paper-grain { background-color: #FBF7EE; background-image: radial-gradient(rgba(20,20,20,.035) 1px, transparent 1px); background-size: 4px 4px; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; transition: none; }
}