/* TATAZO landing page: production responsive layer, loaded after styles.css.
   The mockup (styles.css) was authored at a fixed 1440px design width. This file makes the same
   markup work fluidly from 360px to 1920px, adds the mobile nav, focus styles and keyboard
   navigation, and a few small production touches (honeypot field, form messages). Nothing in
   styles.css is edited, so the mockup stays diffable against design/landing-mockups/. */

/* ============================================================================================
   Base: accessibility, focus, motion, skip link
   ============================================================================================ */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: #14285F; color: #FCE7A8; padding: 10px 18px; border-radius: 8px;
  font: 700 15px/1.2 "Nunito", sans-serif; text-decoration: none; transition: top .15s ease;
}
.skip-link:focus { top: 12px; }

a:focus-visible, button:focus-visible, input:focus-visible, [role="tab"]:focus-visible,
.nav-toggle:focus-visible {
  outline: 3px solid #22C3D6; outline-offset: 3px; border-radius: 6px;
}
.btn:focus-visible { outline-offset: 4px; }

/* ============================================================================================
   Fluid page frame (was a fixed 1440px design)
   ============================================================================================ */
/* overflow-x must be hidden on html (the actual scrolling root), not just body: a body-only clip
   still lets overflowing descendants inflate the initial containing block that position:fixed
   elements (the mobile nav) measure themselves against, pushing it off to one side. */
html { overflow-x: hidden; }
body { width: 100%; max-width: 1440px; margin: 0 auto; overflow-x: hidden; }
.wrap { width: 100%; max-width: 1280px; padding: 0 40px; }
.foot-in, .foot-note { width: 100%; max-width: 1300px; padding-left: 40px; padding-right: 40px; }
.ribbon { width: 100%; max-width: 1240px; }
.band .in { width: 100%; max-width: 1280px; padding: 0 40px; box-sizing: border-box; }

/* Decorative flourishes that intentionally bleed past their container at the 1440px design width
   (corner palm fronds, the small gold dividers) become real horizontal overflow once that
   container is narrower than their own fixed pixel size. */
.divider, .bg-alt::before, .bg-alt::after {
  width: min(420px, 86vw) !important; left: 50% !important; margin-left: 0 !important;
  transform: translateX(-50%);
}
@media (max-width: 900px) {
  .leaves { display: none; }
}

/* ============================================================================================
   Header + mobile nav
   ============================================================================================ */
.nav-toggle {
  display: none; width: 42px; height: 42px; margin-left: auto; border: 0; border-radius: 10px;
  background: transparent; cursor: pointer; align-items: center; justify-content: center;
}
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
  content: ""; display: block; width: 24px; height: 3px; border-radius: 2px; background: var(--nav-ink, #14285F);
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle-bars::before { transform: translateY(-7px); }
.nav-toggle-bars::after { transform: translateY(4px); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(0) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: translateY(0) rotate(-45deg); }
.nav-cta { display: none; }

@media (max-width: 900px) {
  .bar { padding: 0 18px; gap: 12px; }
  .brand { width: 140px; background-size: 170px auto; }
  .nav-toggle { display: flex; }
  .top-cta { display: none; }
  .nav {
    position: fixed; inset: 0 0 0 auto; width: min(320px, 86vw); height: 100vh; z-index: 40;
    display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 4px; padding: 90px 24px 24px; background: linear-gradient(180deg, var(--hdr-a), var(--hdr-b));
    box-shadow: -8px 0 30px rgba(0,0,0,.35);
    transform: translateX(100%); transition: transform .25s ease;
  }
  .nav.open { transform: translateX(0); }
  .nav a { margin: 0; text-align: left; font-size: 18px; }
  .nav a.on { background: none; box-shadow: none; color: var(--kicker, #B07A1E); }
  .nav a + a::before { display: none; }
  .nav-cta { display: inline-flex; margin-top: 14px; }
  body.nav-open { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) { .nav, .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { transition: none; } }

/* ============================================================================================
   Newsletter form: honeypot, consent, status message
   ============================================================================================ */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.consent { display: flex; align-items: flex-start; gap: 10px; font: 14px/1.5 var(--sans); color: var(--ink-soft); margin: 4px 0; cursor: pointer; }
.consent input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--gold-2, #D9A441); }
.consent a { color: var(--link); }
.form-msg { min-height: 1.4em; margin: 6px 0 0; font: 700 14px var(--sans); }
.form-msg-success { color: var(--kicker-2, #2F6B33); }
.form-msg-error { color: #B43A3A; }
.form-msg-info { color: var(--ink-soft); font-weight: 600; }
.news input:disabled, .news button:disabled { opacity: .6; cursor: not-allowed; }

/* ============================================================================================
   Large desktop (>1440): body already caps and centers via max-width above; nothing else needed.
   ============================================================================================ */

/* ============================================================================================
   Laptop / small desktop (1024-1280): trim outer gutters only
   ============================================================================================ */
@media (max-width: 1280px) {
  .isles .wrap { grid-template-columns: 1fr 46%; gap: 40px; }
  .mapart { width: 100%; }
  .showcase .stage, .slide, .slide figure { height: 520px; }
  .slide h3 { font-size: 84px; }
}

/* ============================================================================================
   Tablet (768-1023)
   ============================================================================================ */
@media (max-width: 1023px) {
  .hero { height: auto; min-height: 620px; padding-bottom: 40px; }
  .hero-in { width: 100%; max-width: 560px; margin: 0 auto; padding: 40px 24px 0; }
  .hero-in .lockup { width: 100%; max-width: 460px; }
  /* On narrow screens the pitch sits over the busy key art: give it a soft parchment plate (navy at night). */
  .hero-in .pitch { background: rgba(255, 250, 238, .86); padding: 10px 14px; border-radius: 12px; box-shadow: 0 4px 14px rgba(20, 30, 60, .18); }
  [data-theme="night"] .hero-in .pitch { background: rgba(14, 26, 54, .8); }
  .ribbon { grid-template-columns: repeat(2, 1fr); margin-top: -40px; }
  .ribbon div + div { border-left: 0; }
  .ribbon div:nth-child(odd) { border-right: 1.5px solid var(--rule); }

  .isles { padding-top: 90px; }
  .isles .wrap { grid-template-columns: 1fr; gap: 36px; }
  .isles h2 { font-size: 46px; }
  .isles .facts { flex-wrap: wrap; gap: 10px 0; }

  .together { grid-template-columns: 1fr; gap: 36px; }
  .together .art { height: 360px; transform: none; }
  .sticker { display: none; }

  .showcase .stage { height: auto; }
  .slide { position: relative; height: auto; grid-template-columns: 1fr; opacity: 1 !important; visibility: visible !important; }
  .slide:not(.on) { display: none; }
  .slide figure { height: 320px; border-right: 0; border-bottom: 3px solid var(--gold-2); }
  .slide h3 { font-size: 64px; }
  .slide .txt { padding: 32px 28px 36px; }
  .picker { position: static; padding: 18px 24px; justify-content: center; flex-wrap: wrap; }

  .codex { grid-template-columns: repeat(3, 1fr); }
  .spot { grid-template-columns: 1fr; }
  .spot .body { border-left: 0; border-top: 3px solid var(--gold-2); }
  .wardrobe { grid-template-columns: repeat(4, 1fr); }

  .bosses { grid-template-columns: repeat(2, 1fr); }
  .film-wide { grid-template-columns: 1fr; }
  .film { grid-template-columns: repeat(2, 1fr); }
  .day { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .day::before { display: none; }

  .duo5 { grid-template-columns: 1fr; }
  .parents .head { grid-template-columns: 1fr; }
  .promise { grid-template-columns: repeat(2, 1fr); }

  /* Not `cover`: art_campfire.jpg is a promo poster with the TATAZO logo baked into its top half.
     Desktop crops that out with a fixed 1640px-wide background and a short 480px band; `cover`
     on a much shorter/squarer mobile band would show the whole image height (logo included), so
     keep the same "wide fixed background, anchored to the bottom" technique, just scaled down. */
  .band { height: 380px; background-size: 1500px auto; }
  .join3 { grid-template-columns: 1fr; }
  .join3 .avatar { border-right: 0; border-bottom: 1.5px solid var(--rule); }
  .join3 > div + div + div { border-left: 0; border-top: 1.5px solid var(--rule); }
}

/* ============================================================================================
   Mobile (360-767), checked at 390
   ============================================================================================ */
@media (max-width: 767px) {
  .wrap { padding: 0 20px; }
  .foot-in, .foot-note, .band .in { padding-left: 20px; padding-right: 20px; }
  .sec { padding: 56px 0; }

  .top .btn.top-cta { display: none; }
  .brand { width: 120px; background-size: 150px auto; }

  .hero-in .pitch { font-size: 17px; }
  .hero-in .cta-row { flex-direction: column; gap: 12px; }
  .hero-in .cta-row .btn { width: 100%; }
  .soon { white-space: normal; text-align: center; }

  .ribbon { grid-template-columns: 1fr; margin-top: -24px; }
  .ribbon div { border: 0 !important; }
  .ribbon div + div { border-top: 1.5px solid var(--rule) !important; }

  .isles h2 { font-size: 34px; }
  .isles .cta-row { flex-direction: column; gap: 12px; }
  .isles .cta-row .btn { width: 100%; }
  .isles .facts { flex-direction: column; gap: 14px; }
  .isles .facts div { border-left: 0 !important; padding: 0 !important; }

  .orn-h { font-size: 28px; gap: 10px; }
  .orn-h::before, .orn-h::after { width: 44px; }
  .sub { font-size: 16px; padding: 0 4px; }

  .todo { grid-template-columns: 1fr; }
  .together h2 { font-size: 40px; }
  .together .cta-row { flex-direction: column; gap: 12px; }
  .together .cta-row .btn { width: 100%; }

  .codex { grid-template-columns: repeat(2, 1fr); }
  .slide h3 { font-size: 48px; }
  .slide p { font-size: 18px; }
  .picker img { width: 48px; height: 48px; }
  .picker button span { font-size: 10px; }

  .ab div { grid-template-columns: 1fr; gap: 4px; }
  .tabs { gap: 6px; }
  .tabs button { padding: 6px 14px 6px 8px; font-size: 13px; }

  .wardrobe { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .wardrobe figure { height: 140px; }
  .wardrobe figure img { width: 108px; }

  .bosses { grid-template-columns: 1fr; }
  .film { grid-template-columns: 1fr; }
  .day { grid-template-columns: 1fr; }
  .dusk-card { grid-template-columns: 1fr; text-align: center; justify-items: center; }

  .duo5, .promise { grid-template-columns: 1fr; }
  .parents { padding: 32px 22px; }
  .parents .head h2 { font-size: 32px; }

  .band { height: 340px; }
  .band h2 { font-size: 34px; }

  .join3 .avatar img { width: 220px; }
  .social-l { flex-wrap: wrap; justify-content: center; }

  .foot-in { flex-wrap: wrap; justify-content: center; text-align: center; padding: 20px 0 6px; }
  .foot-links { justify-content: center; flex-wrap: wrap; }
}

@media (max-width: 420px) {
  .wardrobe { grid-template-columns: repeat(2, 1fr); }
  .isles h2 { font-size: 28px; }
  .together h2 { font-size: 32px; }
}

/* ============================================================================================
   Small fixes independent of breakpoint
   ============================================================================================ */
/* .gframe > img was written for a bare <img> child; production wraps every <img> in <picture>
   for the WebP + fallback sources, so re-target the rule at the nested img (higher specificity
   than the original, so this wins regardless of stylesheet order). */
.gframe picture { display: contents; }
.gframe picture > img { width: 100%; height: 100%; object-fit: cover; }
.spot .art picture { display: contents; }
.mapart .mat picture { display: contents; }
.slide figure picture { display: contents; }

/* ============================================================================================
   WebP for the four CSS background images (styles.css sets the JPG/PNG via the `background`
   shorthand; these longhand overrides swap in WebP only where the browser understands
   image-set(), and are simply ignored — falling back to the shorthand's plain url() — where it
   doesn't). The hero art is also preloaded in <head> since it is the page's LCP image.
   ============================================================================================ */
.hero {
  background-image: -webkit-image-set(url("img/art_library_hero.webp") 1x);
  background-image: image-set(url("img/art_library_hero.webp") type("image/webp") 1x);
}
.band {
  background-image: -webkit-image-set(url("img/art_campfire.webp") 1x);
  background-image: image-set(url("img/art_campfire.webp") type("image/webp") 1x);
}
.brand {
  background-image: -webkit-image-set(url("img/logo_primary.webp") 1x);
  background-image: image-set(url("img/logo_primary.webp") type("image/webp") 1x);
}
.leaves {
  background-image: -webkit-image-set(url("img/leaves.webp") 1x);
  background-image: image-set(url("img/leaves.webp") type("image/webp") 1x);
}

/* One logo at a time (owner, 2026-09-27): the header logo appears once the hero's big logo scrolls away. */
.top .brand { transition: opacity .25s ease, visibility .25s; }
html:not(.past-hero) .top .brand { opacity: 0; visibility: hidden; }