/* ============================================================
   SANTA OLIVER — Global shell, primitives, nav, footer
   ============================================================ */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* Anchor targets must clear the fixed nav. Without this, jumping to a section
   parks it flush against the viewport top and the nav covers the eyebrow and
   heading -- the very text that tells you where you landed. The nav is ~80px
   expanded and ~68px once scrolled (.nav.solid), so this leaves a margin over
   the taller state. */
section[id] { scroll-margin-top: 96px; }
@media (max-width: 620px) {
  section[id] { scroll-margin-top: 80px; }
}
body {
  margin: 0;
  background: var(--snow);
  color: var(--ink);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
body.mmenu-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4, h5 { margin: 0; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 40px; }
section { position: relative; }

/* ---------------- PRIMITIVES ---------------- */

.so-eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
}
.so-eyebrow--ink   { color: var(--red); }
.so-eyebrow--green { color: var(--green); }

.so-display { font-family: var(--display); font-weight: 500; line-height: 0.98; letter-spacing: -0.01em; color: var(--cream); }
.so-body    { font-family: var(--body); color: var(--ink-soft); line-height: 1.65; }

/* Gold hairline rule with center ornament diamond */
.so-rule { display: flex; align-items: center; gap: 14px; }
.so-rule::before, .so-rule::after {
  content: ''; height: 1px; flex: 1;
  background: linear-gradient(90deg, transparent, var(--hairline), transparent);
}
.so-rule .so-rule-dot {
  width: 6px; height: 6px; transform: rotate(45deg);
  background: var(--gold); box-shadow: var(--glow-gold);
}
.so-rule--ink::before, .so-rule--ink::after {
  background: linear-gradient(90deg, transparent, var(--hairline-ink), transparent);
}
.so-rule--ink .so-rule-dot { background: var(--red); box-shadow: none; }

/* Primary CTA — deep red */
.so-btn {
  font-family: var(--body); font-weight: 700; font-size: 15px;
  letter-spacing: 0.01em; text-decoration: none;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 28px; border-radius: 999px;
  border: 0; cursor: pointer; color: var(--cream);
  background: linear-gradient(180deg, var(--red-500), var(--red-700));
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 14px 30px -12px rgba(143,31,34,0.8);
  transition: transform .25s ease, box-shadow .25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .so-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 1px 0 rgba(255,255,255,0.22) inset, 0 20px 40px -12px rgba(143,31,34,0.9);
  }
}
.so-btn:active { transform: translateY(1px) scale(0.98); }

/* Secondary CTA — gold outline glass */
.so-btn-ghost {
  font-family: var(--body); font-weight: 600; font-size: 15px; text-decoration: none;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px; border-radius: 999px; cursor: pointer;
  color: var(--gold-200);
  background: var(--glass);
  border: 1px solid var(--hairline);
  backdrop-filter: blur(8px);
  transition: all .25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .so-btn-ghost:hover { background: var(--glass-strong); border-color: var(--gold); color: var(--gold-300); }
}
.so-btn-ghost:active { transform: scale(0.98); background: var(--glass-strong); }

/* Green CTA (used on light sections) */
.so-btn-green {
  font-family: var(--body); font-weight: 700; font-size: 15px; text-decoration: none;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 28px; border-radius: 999px; border: 0; cursor: pointer;
  color: var(--snow);
  background: linear-gradient(180deg, var(--green-bright), var(--green));
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 14px 30px -12px rgba(23,107,67,0.7);
  transition: transform .25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .so-btn-green:hover { transform: translateY(-2px); }
}
.so-btn-green:active { transform: translateY(1px) scale(0.98); }

/* Ink outline button (light sections, secondary) */
.so-btn-ink {
  font-family: var(--body); font-weight: 600; font-size: 15px; text-decoration: none;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px; border-radius: 999px; cursor: pointer;
  color: var(--ink); background: transparent;
  border: 1px solid var(--hairline-ink);
  transition: all .25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .so-btn-ink:hover { border-color: var(--green); color: var(--green); }
}
.so-btn-ink:active { transform: scale(0.98); border-color: var(--green); color: var(--green); }

/* Disabled / in-flight state — shared across every CTA */
.so-btn:disabled,      .so-btn[aria-disabled="true"],
.so-btn-green:disabled, .so-btn-green[aria-disabled="true"],
.so-btn-ghost:disabled, .so-btn-ghost[aria-disabled="true"],
.so-btn-ink:disabled,   .so-btn-ink[aria-disabled="true"],
.nav-book:disabled,     .nav-book[aria-disabled="true"],
.btn-candy:disabled,    .btn-candy[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none;
  pointer-events: none;
}

/* Inline spinner for buttons in a loading state */
.so-spinner {
  width: 16px; height: 16px; flex: none;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: so-spin .7s linear infinite;
}
@keyframes so-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .so-spinner { animation-duration: 1.6s; }
}

/* Frosted glass card */
.so-glass {
  background: linear-gradient(180deg, rgba(246,239,223,0.08), rgba(246,239,223,0.03));
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-lg);
  backdrop-filter: blur(16px) saturate(1.1);
  box-shadow: var(--shadow-card);
}

/* Light card */
.so-card-light {
  background: #fff; border: 1px solid var(--hairline-ink);
  border-radius: var(--r-lg);
  box-shadow: 0 18px 50px -34px rgba(22,34,28,0.4);
}

/* Trust badge pill */
.so-badge {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--body); font-weight: 600; font-size: 13px;
  color: var(--ink-soft);
  padding: 9px 16px; border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--hairline-soft);
}
.so-badge svg { width: 15px; height: 15px; color: var(--gold); flex: none; }
.so-badge--light {
  color: var(--ink); background: #fff;
  border: 1px solid var(--hairline-ink);
  box-shadow: 0 4px 14px -8px rgba(22,34,28,0.25);
}
.so-badge--light svg { color: var(--red); }

/* Photo placeholder (until real images land) */
.so-photo {
  position: relative; overflow: hidden;
  background:
    repeating-linear-gradient(135deg, rgba(200,162,74,0.07) 0 12px, rgba(200,162,74,0.02) 12px 24px),
    linear-gradient(160deg, var(--forest-700), var(--forest-850));
  display: flex; align-items: center; justify-content: center;
}
.so-photo .so-photo-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold); opacity: 0.6; text-align: center; padding: 0 20px;
}
.so-photo::after {
  content: ''; position: absolute; inset: 0;
  box-shadow: inset 0 0 80px -10px rgba(0,0,0,0.6);
  pointer-events: none;
}
.so-photo--light {
  background:
    repeating-linear-gradient(135deg, rgba(23,107,67,0.06) 0 12px, rgba(23,107,67,0.02) 12px 24px),
    linear-gradient(160deg, #eef3ee, #e3ece4);
}
.so-photo--light .so-photo-label { color: var(--green); opacity: 0.7; }
.so-photo--light::after { box-shadow: inset 0 0 0 1px rgba(23,107,67,0.10); }

/* ---------------- NAV ---------------- */

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: max(20px, env(safe-area-inset-top)) max(40px, env(safe-area-inset-right)) 20px max(40px, env(safe-area-inset-left));
  transition: background .4s ease, padding .4s ease, border-color .4s ease;
}
.nav.solid {
  background: rgba(9,17,12,0.82);
  backdrop-filter: blur(14px) saturate(1.2);
  padding: max(14px, env(safe-area-inset-top)) max(40px, env(safe-area-inset-right)) 14px max(40px, env(safe-area-inset-left));
  border-bottom: 1px solid var(--hairline-soft);
}
.nav-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.nav-logo .seal {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--hairline);
  display: grid; place-items: center;
  color: var(--gold); background: rgba(246,239,223,0.06);
  flex: none;
}
.nav-logo .wm {
  font-family: var(--display); font-size: 23px; color: var(--cream);
  letter-spacing: 0.02em; line-height: 1;
}
.nav-logo .wm small {
  display: block; font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.24em; color: var(--gold); margin-top: 4px;
}
.nav-links { display: flex; gap: 30px; align-items: center; }
.nav-links a {
  font-size: 14px; font-weight: 600; color: var(--ink-soft);
  text-decoration: none; letter-spacing: 0.01em;
  opacity: 0.88; transition: color .2s, opacity .2s;
}
@media (hover: hover) and (pointer: fine) {
  .nav-links a:hover { color: var(--gold-200); opacity: 1; }
}
.nav-links a:active { color: var(--gold-200); opacity: 1; }
.nav-book:active { transform: scale(0.97); }

/* Wayfinding. aria-current is the single source of truth for "you are here" —
   set by initWayfinding() in magic.js for both the current page and the
   section being read — so the visible state and the accessible state cannot
   drift apart. The underline is absolutely positioned so switching it on adds
   no height and the nav never shifts as you scroll. */
.nav-links a { position: relative; }
.nav-links a[aria-current] { color: var(--gold-200); opacity: 1; }
.nav-links a[aria-current]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px;
  height: 2px; border-radius: 2px; background: var(--gold-200);
}
.mmenu a[aria-current] { color: var(--gold-200); }

/* ---- Elf Training Academy: occasional sparkle ----------------------------
   The Academy link sat among five plain nav items and read as just another
   section anchor, when it is actually the whole children's playground. This
   tints it gold and lets a small star wink over it now and then.

   Targeted by href rather than a class so no page markup changes — the same
   rule covers the desktop nav and the mobile menu across all four pages.

   :not([aria-current]) matters: on north-pole.html this link IS the current
   page, and sparkling at someone who already arrived is just noise. It also
   keeps this clear of the [aria-current]::after underline, which owns ::after
   there.

   The 9s cycle is deliberate. The star is visible for well under a second of
   it, so the eye catches it in peripheral vision without the nav ever feeling
   busy — "occasional" is the whole point. Two stars at different delays and
   offsets read as a twinkle rather than a blinking dot. */
.nav-links a[href="north-pole.html"]:not([aria-current]),
.mmenu a[href="north-pole.html"]:not([aria-current]) {
  color: var(--gold-200);
  opacity: 1;
  /* Same 5.4s clock as the stars, so the text warms on the beat each one
     fires rather than drifting on its own schedule. */
  animation: np-academy-tint 5.4s ease-in-out infinite;
}
/* Hover should still feel like a direct response, so the drift stops and the
   link settles on plain gold while the pointer is on it. */
@media (hover: hover) and (pointer: fine) {
  .nav-links a[href="north-pole.html"]:not([aria-current]):hover,
  .mmenu a[href="north-pole.html"]:not([aria-current]):hover {
    animation: none;
    color: var(--gold-200);
  }
}
/* Deliberately gentle. The tints sit close to --gold-200 in luminance, so the
   text reads as warming and cooling rather than blinking between colours, and
   it spends most of the cycle back at plain gold. Literal values rather than
   the --red/--green tokens: those are saturated enough to look like an error
   state or a broken link at nav size. */
@keyframes np-academy-tint {
  0%,  100% { color: var(--gold-200); }
  6%        { color: #efb5a0; }   /* warm rose, with the red star  */
  18%       { color: var(--gold-200); }
  36%       { color: #bfd8c2; }   /* pale sage, with the green star */
  48%       { color: var(--gold-200); }
  66%       { color: var(--cream); } /* soft white, with the white star */
  78%       { color: var(--gold-200); }
}
.nav-links a[href="north-pole.html"]:not([aria-current])::before,
.nav-links a[href="north-pole.html"]:not([aria-current])::after,
.mmenu a[href="north-pole.html"]:not([aria-current])::before,
.mmenu a[href="north-pole.html"]:not([aria-current])::after {
  content: "\2726";                 /* ✦ */
  position: absolute;
  pointer-events: none;             /* never steal the tap target */
  opacity: 0;
  animation: np-sparkle 5.4s ease-in-out infinite;
  will-change: opacity, transform;
}
.nav-links a[href="north-pole.html"]:not([aria-current])::before,
.mmenu a[href="north-pole.html"]:not([aria-current])::before {
  top: -6px; right: -11px; font-size: 11px;
}
.nav-links a[href="north-pole.html"]:not([aria-current])::after {
  bottom: -3px; left: -10px; font-size: 8px;
  /* Offset by roughly a third of the cycle so the two stars are always on
     different colours as well as different beats. */
  animation-delay: 1.8s;
}
/* The mobile menu is 30px display type, so the same offsets would land the
   stars inside the text. Scale them out to match. */
.mmenu a[href="north-pole.html"]:not([aria-current]) { position: relative; }
.mmenu a[href="north-pole.html"]:not([aria-current])::before {
  top: 2px; right: 0; font-size: 16px;
}
.mmenu a[href="north-pole.html"]:not([aria-current])::after {
  bottom: 6px; left: 0; font-size: 12px;
  animation-delay: 1.8s;
}
/* Three flashes per cycle — red, green, then white — rather than one repeated
   colour. Each `color` change is scheduled while opacity is 0, so the hue is
   already swapped before the star becomes visible and you never see it
   crossfade between colours mid-flash. */
@keyframes np-sparkle {
  0%   { opacity: 0; color: var(--red-bright); transform: scale(0.35) rotate(-20deg); }
  6%   { opacity: 1; color: var(--red-bright); transform: scale(1)    rotate(10deg); }
  13%  { opacity: 0; color: var(--red-bright); transform: scale(0.6)  rotate(28deg); }

  30%  { opacity: 0; color: var(--green-bright); transform: scale(0.35) rotate(-20deg); }
  36%  { opacity: 1; color: var(--green-bright); transform: scale(1)    rotate(10deg); }
  43%  { opacity: 0; color: var(--green-bright); transform: scale(0.6)  rotate(28deg); }

  60%  { opacity: 0; color: var(--snow); transform: scale(0.35) rotate(-20deg); }
  66%  { opacity: 1; color: var(--snow); transform: scale(1)    rotate(10deg); }
  73%  { opacity: 0; color: var(--snow); transform: scale(0.6)  rotate(28deg); }

  100% { opacity: 0; color: var(--red-bright); transform: scale(0.35) rotate(-20deg); }
}
/* Honour the same contract as .reveal — no looping motion for anyone who has
   asked for less of it. The gold tint stays, so the link keeps its emphasis
   without anything moving. */
@media (prefers-reduced-motion: reduce) {
  .nav-links a[href="north-pole.html"]::before,
  .nav-links a[href="north-pole.html"]::after,
  .mmenu a[href="north-pole.html"]::before,
  .mmenu a[href="north-pole.html"]::after {
    animation: none !important;
    opacity: 0 !important;
  }
  /* The text tint is motion too — a link that changes colour on a loop is
     exactly what this preference is asking us not to do. It settles on plain
     gold, so the link keeps its emphasis with nothing animating. */
  .nav-links a[href="north-pole.html"],
  .mmenu a[href="north-pole.html"] {
    animation: none !important;
    color: var(--gold-200) !important;
  }
}
/* .nav-book is a filled CTA — the marker would read as damage on it, so the
   current-page state stays in the accessibility tree only. */
.nav-book[aria-current]::after { content: none; }
.nav-book {
  font-family: var(--body); font-weight: 700; font-size: 14px;
  color: var(--cream) !important;
  padding: 11px 22px; border-radius: 999px;
  background: linear-gradient(180deg, var(--red-bright), var(--red-deep));
  box-shadow: 0 10px 24px -10px rgba(158,31,32,0.7);
  opacity: 1 !important;
}
.nav-burger {
  display: none; background: none; border: 0; cursor: pointer;
  color: var(--cream); padding: 10px;
  min-width: 44px; min-height: 44px;
  align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* mobile menu overlay */
.mmenu {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(9,17,12,0.96); backdrop-filter: blur(10px);
  display: none; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 26px;
  overflow-y: auto;
  padding: max(76px, env(safe-area-inset-top)) 24px 40px;
}
.mmenu.open { display: flex; }
.mmenu a {
  font-family: var(--display); font-size: 30px; color: var(--cream); text-decoration: none;
  display: flex; align-items: center; justify-content: center;
  padding: 12px 24px; min-height: 48px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.mmenu .close {
  position: absolute; top: 14px; right: 14px;
  background: none; border: 0; color: var(--cream); cursor: pointer;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* ---------------- SECTION HEADERS ---------------- */

.sec { padding: 110px 0; }
.sec-head { text-align: center; max-width: 680px; margin: 0 auto 60px; }
.sec-head .so-rule { width: 130px; margin: 0 auto 22px; }
.sec-head .so-eyebrow { display: block; margin-bottom: 16px; }
.sec-head h2 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(36px, 4vw, 56px); line-height: 1.02; letter-spacing: -0.01em;
}
.sec-head p { font-size: 17px; line-height: 1.65; color: var(--ink-muted); margin: 18px 0 0; }

.sec--light { background: var(--snow); color: var(--ink); }
.sec--cream { background: var(--cream); color: var(--ink); }
.sec--dark  { background: var(--forest-900); color: var(--ink-soft); }
.sec--light h2, .sec--cream h2 { color: var(--ink); }
.sec--dark h2 { color: var(--cream); }
.sec--dark .sec-head p { color: var(--muted); }

/* ---------------- FOOTER ---------------- */

.footer {
  background: var(--forest-900);
  border-top: 1px solid var(--hairline-soft);
  padding: 70px 0 40px;
  color: var(--muted);
  position: relative;
  overflow: hidden;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  position: relative; z-index: 2;
}
.footer h5 {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 18px;
}
.footer a {
  display: block; color: var(--ink-soft);
  text-decoration: none; font-size: 14px;
  margin-bottom: 11px; opacity: 0.82;
  transition: opacity .2s, color .2s;
}
@media (hover: hover) and (pointer: fine) {
  .footer a:hover { opacity: 1; color: var(--gold-200); }
}
.footer a:active { opacity: 1; color: var(--gold-200); }
/* Placeholder links whose destination page doesn't exist yet */
.footer a.soon {
  opacity: 0.45; cursor: default; pointer-events: none;
}
.footer a.soon::after {
  content: 'Soon'; margin-left: 8px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em;
  text-transform: uppercase; opacity: 0.7; vertical-align: 1px;
}
.footer .fcol p { font-size: 14px; line-height: 1.65; color: var(--muted); }
.footer-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.footer-logo .seal {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--hairline);
  display: grid; place-items: center;
  color: var(--gold); background: rgba(246,239,223,0.06);
}
.footer-logo .wm { font-family: var(--display); font-size: 22px; color: var(--cream); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 56px; padding-top: 26px;
  border-top: 1px solid var(--hairline-soft);
  font-size: 13px; color: var(--muted-2);
  flex-wrap: wrap; gap: 12px;
  position: relative; z-index: 2;
}

/* ---------------- REVEAL ANIMATION ---------------- */

.reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity .8s ease, transform .8s ease;
}
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------------- RESPONSIVE ---------------- */

@media (max-width: 980px) {
  .nav-links { display: none; }
  .nav-burger { display: inline-flex; }
}
@media (max-width: 620px) {
  .wrap { padding: 0 22px; }
  .nav, .nav.solid { padding: max(14px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) 14px max(22px, env(safe-area-inset-left)); }
  .sec { padding: 72px 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  /* The bar runs out of room here: seal + wordmark + subtitle + "Book Santa"
     + burger is ~300px of content inside a 320px viewport, so the pill wrapped
     to two lines and collided with the logo. Dropping the subtitle also
     shortens the bar, which is what let the hero slide underneath it. */
  .nav, .nav.solid { padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left)); }
  .nav-logo { gap: 9px; }
  .nav-logo .wm small { display: none; }
  .nav-book { padding: 9px 15px; font-size: 13px; white-space: nowrap; }

  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
  .footer-bottom > div:last-child { font-size: 12px; opacity: 0.75; }
}

/* ---------------- TAP & FOCUS ---------------- */
a, button, .so-btn, .so-btn-ghost, .so-btn-green, .so-btn-ink, .nav-book {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--gold-200);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------------- Focus visibility ----------------
   A single guaranteed focus indicator for the whole site.

   25 rules across five stylesheets set `outline: none` and substituted a
   translucent gold glow. Measured against the backgrounds they actually sit
   on, those reached 1.02:1 over the map artwork and 1.45-2.63:1 elsewhere,
   against the 3:1 that WCAG 1.4.11 requires -- so a keyboard user could not
   see where they were anywhere on the site.

   Two tones on purpose: the dark ring carries the contrast on snow, paper and
   the pixel-art map; the light halo carries it on the dark evergreen page and
   the red buttons. No single colour clears 3:1 against both.

   !important is deliberate. Those 25 rules are more specific than any sane
   global selector, and a focus indicator is not something a component should
   be able to opt out of by accident. */
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid #101c2b !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 6px rgba(255, 248, 220, 0.95) !important;
}

/* Screen-reader-only label helper */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}