/* Sanjog Studios — shared design tokens. Edit palette/type here once; every page inherits. */
:root{
  --ivory:#f8f2e9;
  --cream:#fdf8f0;
  --blush:#efd6d0;
  --rose:#d9a8a4;
  --gold:#b68b52;
  --gold-text:#85643a; /* darker gold ONLY for normal-size text on ivory/cream (Req 3): ~4.86:1 on --ivory, ~5.12:1 on --cream */
  --gold-lt:#cba978;
  --gold-br:#e3c98f;
  --mulberry:#6b2d46;
  --mulberry-dp:#4f1f34;
  --ink:#2b2320;
  --muted:#7a6a62;
  --line:#e9dccd;
  --charcoal:#1a1512;
}

/* ==========================================================================
   Page-level horizontal-overflow guard (responsive-layout e2e gate).
   Entrance/reveal animations set transient off-canvas transforms (e.g. the
   about section's translateX(±34px) before IntersectionObserver adds `.in`).
   Those transforms momentarily push content a few px past the viewport,
   creating a transient horizontal scrollbar (scrollWidth - innerWidth = 4 at
   768px). `overflow-x:clip` clips that horizontal spill WITHOUT establishing a
   scroll container — so position:sticky and the position:fixed nav are
   unaffected, and vertical scrolling still works normally (unlike
   overflow:hidden, which would create a scroll container). Shared file loaded
   by every page, so this fixes all pages/breakpoints at once. */
html{overflow-x:clip}
body{overflow-x:clip}

/* ==========================================================================
   Accessibility (a11y) shared styles — accessibility-remediation spec.
   Class-based styles delivered to all 12 pages via the existing tokens.css
   <link>. Structural markup is added per page; behavior lives in a11y.js.
   ========================================================================== */

/* Skip link (design §C2 / Req 2.4): visually off-screen until it receives
   keyboard focus, then revealed on-screen with a high-contrast focus ring.
   gold-br (#e3c98f) on the mulberry (#6b2d46) background measures ~6.2:1 (>=3:1). */
.skip-link{
  position:absolute;
  left:8px;
  top:-48px;                     /* parked off-screen */
  z-index:1000;
  background:var(--mulberry);
  color:#fff;
  padding:10px 16px;
  border-radius:7px;
  font-family:'Jost',system-ui,sans-serif;
  font-size:14px;
  text-decoration:none;
  transition:top .15s ease;
}
.skip-link:focus{
  top:8px;                       /* revealed on focus */
  outline:3px solid var(--gold-br);
  outline-offset:2px;
}

/* Universal visible focus indicator (steering §2.2, §0.4 / Req 6.4).
   Replaces the UA default with a clearer, never-removed ring. Mulberry
   reads ~9:1 against the site's ivory/cream surfaces (>=3:1). Controls that
   sit on dark surfaces (skip link, back-to-top, hero pause) override with a
   light gold-br ring below. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible{
  outline:3px solid var(--mulberry);
  outline-offset:2px;
  border-radius:2px;
}

/* Native back-to-top button (design §C6 / Req 6.4). Reset native button
   chrome so it matches the former footer <span> (color:#a99b8f, hover #fff).
   The dark footer needs the light gold-br focus ring. */
.backtop{
  background:none;
  border:none;
  margin:0;
  padding:0;
  font:inherit;
  color:#a99b8f;
  cursor:pointer;
}
.backtop:hover{color:#fff}
.backtop:focus-visible{
  outline:3px solid var(--gold-br);
  outline-offset:3px;
  border-radius:2px;
}

/* Hero pause control (design §C5 / Req 5.6). Small and unobtrusive over the
   hero, legible regardless of the video frame behind it: white text on an
   >=0.85-opacity mulberry-tinted background stays well above 4.5:1. Visible
   gold-br focus ring over the dark hero. */
.hero-pause{
  position:absolute;
  right:16px;
  bottom:16px;
  z-index:5;
  min-height:24px;               /* target-size floor (steering §2.5) */
  padding:8px 14px;
  font-family:'Jost',system-ui,sans-serif;
  font-size:12px;
  letter-spacing:.08em;
  color:#fff;
  background:rgba(43,20,30,.85);
  border:1px solid rgba(255,255,255,.55);
  border-radius:7px;
  cursor:pointer;
}
.hero-pause:hover{background:rgba(43,20,30,.95)}
.hero-pause:focus-visible{
  outline:3px solid var(--gold-br);
  outline-offset:2px;
}

/* ==========================================================================
   Mobile nav menu — shared across every page. The hamburger button is injected
   by a11y.js (initMobileMenu); it toggles `nav.open`, which reveals the primary
   links as a dropdown under 760px. Hidden entirely on desktop (links stay inline).
   ========================================================================== */
.nav-toggle{
  display:none;
  background:none;border:0;cursor:pointer;
  padding:10px;margin-left:8px;
  color:#f4ece2; /* light over the transparent hero nav */
}
nav.solid .nav-toggle{color:var(--mulberry);} /* dark once nav goes opaque */
.nav-toggle .bars,
.nav-toggle .bars::before,
.nav-toggle .bars::after{display:block;width:24px;height:2px;background:currentColor;border-radius:2px;}
.nav-toggle .bars{position:relative;}
.nav-toggle .bars::before,
.nav-toggle .bars::after{content:"";position:absolute;left:0;}
.nav-toggle .bars::before{top:-7px;}
.nav-toggle .bars::after{top:7px;}

@media(max-width:760px){
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;}
  /* The links become a dropdown panel anchored under the fixed nav bar. */
  nav .navlinks{
    position:absolute;top:calc(100% - 6px);left:16px;right:16px;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--ivory);border:1px solid var(--line);border-radius:12px;
    box-shadow:0 24px 60px -28px rgba(43,20,30,.55);
    padding:8px;display:none;
  }
  nav.open .navlinks{display:flex;}
  /* Reveal the text links inside the panel (overrides the desktop "hide on mobile"). */
  nav .navlinks .lnk{display:block;padding:13px 14px;color:var(--ink);border-radius:8px;font-size:15px;}
  nav .navlinks .lnk:hover{background:var(--cream);}
  nav .navlinks .nav-inq{margin:6px 8px 8px;text-align:center;background:var(--mulberry,#6b2d46);border-color:var(--mulberry,#6b2d46);color:#fff!important;}
}