/* ============================================================================
   PUBLIC EDITORIAL LAYER — BASE + COMPONENTS
   ----------------------------------------------------------------------------
   The type primitives and components every Bootstrap-free public page shares
   (the homepage and the festival campaign page). Moved verbatim out of
   css/home/home.css (2026-10-22, plan-fiesta-mahal-tana Phase 3); loaded right
   before the page stylesheet, so the homepage cascade is unchanged.
   Reads css/public/tokens.css only.
   ============================================================================ */

/* ---------- 1. BASE (page only) ---------- */
main > section { overflow-x: clip; } /* elements may enter from beyond the edge; clip (not hidden) keeps position: sticky working */
/* visually hidden, still read by assistive tech (the shell's twin is .pub-sr) */
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }


/* film grain: one fixed, composited layer; no blend mode, so it costs a single texture */
body::after {
  content: ""; position: fixed; inset: -60px; z-index: var(--z-grain); pointer-events: none;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  body::after { opacity: .055; will-change: transform; animation: grain 1.4s steps(4) infinite; }
}
@keyframes grain { 0% { transform: translate(0, 0); } 25% { transform: translate(-22px, 14px); } 50% { transform: translate(16px, -20px); } 75% { transform: translate(-10px, -8px); } 100% { transform: translate(0, 0); } }

/* type primitives */
.label { font-family: var(--f-sans); font-size: var(--fs-label); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; line-height: 1.4; margin: 0; }
.display {
  font-family: var(--f-display); font-weight: 800; text-transform: uppercase;
  font-variation-settings: "SOFT" 100, "WONK" 0, "opsz" 144;
  line-height: .86; letter-spacing: -.035em; margin: 0; text-wrap: balance;
}
.display em { font-style: italic; font-weight: 500; font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144; letter-spacing: -.02em; }
.display .lc { text-transform: none; }
.lead { font-size: var(--fs-lead); line-height: 1.55; max-width: var(--w-text); }
.serif-it { font-family: var(--f-display); font-style: italic; font-weight: 400; font-variation-settings: "SOFT" 100, "WONK" 1; }

/* ---------- 2. COMPONENTS ---------- */
/* photo frame — square corners by default; radius is the exception, not the rule */
.ph { margin: 0; position: relative; overflow: hidden; background: var(--paper-3); }
.ph img, .ph video { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--e-out), scale 1.4s var(--e-out); }
a:hover .ph img, a:focus-visible .ph img { transform: scale(1.045) translate(-1%, -1%); }
.cap { font-size: .78rem; letter-spacing: .02em; color: var(--ink-3); margin-top: 10px; }
.cap b { font-weight: 600; color: var(--ink); }

/* buttons: the arrow slides out and a twin slides in */
.btn {
  display: inline-flex; align-items: center; gap: 16px; padding: 17px 24px 16px;
  font-size: .76rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
  border-radius: var(--r1); transition: background var(--d-ui), color var(--d-ui), box-shadow var(--d-ui);
}
.btn-solid { background: var(--red); color: #fff; }
.btn-solid:hover { background: #B81616; }
.btn-ghost { box-shadow: inset 0 0 0 1px currentColor; }
.btn-ghost:hover { background: rgba(255, 255, 255, .1); }
.arw { position: relative; width: 22px; height: 12px; overflow: hidden; flex: none; }
.arw svg { position: absolute; inset: 0; width: 22px; height: 12px; transition: transform var(--d-ui) var(--e-out); }
.arw svg + svg { transform: translateX(-130%); }
a:hover > .arw svg:first-child, a:focus-visible > .arw svg:first-child, button:hover > .arw svg:first-child { transform: translateX(130%); }
a:hover > .arw svg + svg, a:focus-visible > .arw svg + svg, button:hover > .arw svg + svg { transform: translateX(0); }
.link-arrow { display: inline-flex; align-items: center; gap: 12px; font-weight: 600; text-decoration: none; position: relative; padding-bottom: 4px; }
.link-arrow::after { content: ""; position: absolute; left: 0; right: 34px; bottom: 0; height: 1px; background: currentColor; transform-origin: left; transition: transform var(--d-ui) var(--e-out); }
.link-arrow:hover::after { transform: scaleX(.3); }

/* scroll reveals (transition tier) — only when scripts can run, so nothing stays hidden without JS */
@media (scripting: enabled) {
  [data-reveal] { opacity: 0; transform: translateY(32px); transition: opacity 1s var(--e-out), transform 1.2s var(--e-out); }
  .js [data-reveal="mask"] { opacity: 1; transform: none; clip-path: inset(100% 0 0 0); transition: clip-path 1.5s var(--e-out); }
  .js [data-reveal="right"] { transform: translateX(14vw); }
  .js [data-reveal="left"] { transform: translateX(-14vw); }
  [data-reveal].in { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
  [data-reveal][data-delay="1"] { transition-delay: .12s; }
  [data-reveal][data-delay="2"] { transition-delay: .24s; }
  [data-reveal][data-delay="3"] { transition-delay: .36s; }
}

/* ambient tier: paused unless the section is on screen */
.amb { animation-play-state: paused !important; }
.live .amb { animation-play-state: running !important; }