/* ============================================================================
   Where Did My Sock Go? — site styles
   Design system transcribed verbatim from the locked design guide (design/).
   Tokens live in :root; every rule references them. Edit :root to reskin.
   ============================================================================ */

/* ---- Design tokens ---- */
:root {
  /* Brand palette — pulled from the cover + Sunny logo */
  --white:     #FFFFFF;   /* canvas (hard requirement)             */
  --sand:      #F0EDE6;   /* soft warm neutral (cover background)  */
  --sand-soft: #FBF8F1;   /* faint warm tint for alt sections      */
  --gold:      #EFB121;   /* PRIMARY accent — brand + CTA          */
  --gold-deep: #C98F0C;   /* darker gold — borders / hover / shadow*/
  --teal:      #167796;   /* deep contrast / structure / footer    */
  --sky:       #2B9AE3;   /* bright sky pop (Videos)               */
  --coral:     #F4502A;   /* energetic pop (Shop)                  */
  --green:     #39C24C;   /* palm-frond pop                        */
  --ink:       #0E323D;   /* body text — deep teal-charcoal        */
  --muted:     #5B7077;   /* secondary text                        */
  --line:      rgba(14, 50, 61, .12);   /* hairline borders        */

  /* Typography */
  --font-display: 'Fredoka', system-ui, -apple-system, sans-serif;
  --font-body:    'Nunito Sans', system-ui, -apple-system, sans-serif;

  /* Radii — rounded shape language */
  --r-sm: 12px; --r-md: 18px; --r-lg: 26px; --r-xl: 34px; --pill: 999px;

  /* Elevation — soft, warm-tinted shadows */
  --sh-1: 0 2px 8px rgba(14, 50, 61, .06);
  --sh-2: 0 8px 24px rgba(14, 50, 61, .10);
  --sh-3: 0 18px 48px rgba(14, 50, 61, .16);
  --sh-gold: 0 6px 0 var(--gold-deep);   /* logo-style hard offset */

  /* Spacing — 8-point grid */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  /* Layout */
  --maxw: 1180px;
  --nav-h: 72px;
}

/* ---- Reset ---- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); line-height: 1.08; font-weight: 700; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; border-radius: 4px; }

/* ---- Utility layout ---- */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s6); }
.eyebrow {
  font-family: var(--font-display); font-weight: 600; font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-display); font-weight: 600; font-size: 17px;
  border-radius: var(--pill); padding: 14px 26px; min-height: 48px; line-height: 1;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease, color .14s ease;
}
.btn-sm { font-size: 15px; padding: 10px 18px; min-height: 40px; }
.btn-primary { background: var(--gold); color: var(--ink); box-shadow: var(--sh-gold); }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 9px 0 var(--gold-deep); }
.btn-primary:active { transform: translateY(2px); box-shadow: 0 3px 0 var(--gold-deep); }
.btn-secondary { background: transparent; color: var(--teal); box-shadow: inset 0 0 0 2px var(--teal); }
.btn-secondary:hover { background: var(--teal); color: #fff; transform: translateY(-2px); }
.btn-on-photo { background: rgba(255, 255, 255, .85); backdrop-filter: blur(3px); }
.btn[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; }

/* ---- Cards ---- */
.card { border-radius: var(--r-lg); transition: transform .2s ease, box-shadow .2s ease; }
.card-hover:hover { transform: translateY(-3px); box-shadow: var(--sh-3); }

/* ============================================================================
   Site navigation (sticky) — kept in sync across every page
   ============================================================================ */
.site-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-nav .inner {
  display: flex; align-items: center; justify-content: space-between;
  max-width: var(--maxw); margin: 0 auto; padding: 14px var(--s6); gap: var(--s5);
}
.site-nav .logo img { height: 38px; width: auto; }
.nav-right { display: flex; align-items: center; gap: 22px; }
.navlinks { display: flex; gap: 24px; list-style: none; align-items: center; }
.navlinks a {
  font-family: var(--font-display); font-weight: 500; font-size: 15.5px; color: var(--ink);
}
.navlinks a:hover, .navlinks a[aria-current="page"] { color: var(--teal); }
.navlinks .soon {
  font-size: 10px; background: var(--sand); color: var(--muted); border-radius: var(--pill);
  padding: 2px 7px; margin-left: 5px; font-weight: 800; letter-spacing: .03em; vertical-align: middle;
}
.burger { display: none; font-size: 24px; color: var(--ink); line-height: 1; }
/* Mobile dropdown */
.mobile-menu { display: none; border-top: 1px solid var(--line); padding: var(--s2) var(--s6) var(--s4); }
.mobile-menu.open { display: block; }
.mobile-menu a {
  display: block; padding: 12px 4px; font-family: var(--font-display); font-weight: 600;
  font-size: 17px; color: var(--ink); border-bottom: 1px solid var(--line);
}
.mobile-menu .btn { width: 100%; margin-top: var(--s4); }

/* ============================================================================
   Hero (parallax) — NO grain, NO vignette. White subtext.
   ============================================================================ */
.hero {
  position: relative; height: 624px; overflow: hidden;
  display: flex; align-items: center; justify-content: flex-start;
}
.hero .layer {
  position: absolute; inset: -6%; width: 112%; height: 112%;
  object-fit: cover; will-change: transform;
}
/* bg exactly covers the hero box (inset:0/100% → object-fit:cover never gaps);
   scale() is purely parallax headroom. */
.hero .layer.bg {
  z-index: 1; inset: 0; width: 100%; height: 100%; transform: scale(1.16);
}
.hero .layer.char {
  z-index: 2; object-position: left bottom; transform: translate(5%, 13%);
}
.hero .hero-in {
  position: relative; z-index: 3; max-width: 560px;
  padding: 0 var(--s5) 0 clamp(28px, 6vw, 76px);
  margin-left: 160px;  /* nudge the headline + CTA block right (reset on mobile) */
}
.hero .hero-in .logo {
  width: min(420px, 86%); height: auto; margin: 0 0 var(--s4);
  filter: drop-shadow(0 8px 18px rgba(14, 50, 61, .22));
}
.hero .sub {
  font-weight: 700; font-size: 16.5px; color: #fff; max-width: 430px; line-height: 1.45;
  text-shadow: 0 1px 8px rgba(14, 50, 61, .45);
}
.hero .cta-row { display: flex; gap: 14px; margin-top: var(--s5); flex-wrap: wrap; }

/* ============================================================================
   Bento showcase (Home) — two natural-height masonry columns
   ============================================================================ */
.bento-wrap { padding: var(--s7) 0 var(--s8); }
/* Flex columns instead of a fixed grid: each tile sizes to its own content, so
   short tiles (Author/Game) never get inflated to fill a shared row and the Book
   never floats in a tall, half-empty box. The two columns come out near-equal
   height (Book+Author+Game ≈ Videos+Shop) and balance on their own. */
.bento { display: flex; gap: 18px; align-items: flex-start; }
.bento-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.tile {
  border-radius: var(--r-lg); padding: 22px; display: flex; flex-direction: column;
  text-align: left;
}
.tile .eyebrow { margin-bottom: var(--s2); }
.tile-link { cursor: pointer; }
/* Book (largest) */
.t-book { background: var(--sand-soft); border: 1px solid var(--line); }
.t-book .inner { display: flex; gap: 18px; align-items: center; margin-top: 12px; flex: 1; flex-wrap: wrap; }
.t-book .book-cover {
  width: 176px; height: 176px; border-radius: var(--r-sm); object-fit: cover;
  box-shadow: 0 12px 28px rgba(14, 50, 61, .18); flex: none;
}
.t-book .book-copy { flex: 1; min-width: 180px; }
.t-book h3 { font-size: 24px; }
.t-book p { color: var(--muted); font-size: 14.5px; line-height: 1.55; margin-top: var(--s2); }
.badges { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.badge {
  font-size: 12px; font-weight: 700; color: var(--teal); background: var(--white);
  border: 1px solid var(--line); border-radius: var(--pill); padding: 4px 11px;
}
.t-book .book-cta { width: 100%; margin-top: 18px; }
/* Videos / Shop / Game / Author */
.t-videos { background: var(--sky); color: #fff; }
.t-shop   { background: var(--coral); color: #fff; }
.t-game   { background: var(--teal); color: #fff; }
.t-author { background: var(--sand); color: var(--ink); flex-direction: row; align-items: center; gap: var(--s4); }
.t-game h3, .t-game .eyebrow { color: #fff; }
.t-videos .eyebrow, .t-shop .eyebrow { color: rgba(255, 255, 255, .9); }
.tile .thumb-row { display: grid; gap: 10px; margin: 12px 0 14px; }
.tile .thumb-row.two { grid-template-columns: 1fr 1fr; }
.tile .thumb-row.three { grid-template-columns: repeat(3, 1fr); }
.tile .thumb {
  height: 62px; border-radius: var(--r-sm); background: rgba(255, 255, 255, .28);
  display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--ink);
}
/* Shop tile: taller thumbs so the merch shows fully (not cropped to a strip). */
.t-shop .thumb { height: 150px; background-color: var(--sand); background-position: center top; }
.tile .more { font-family: var(--font-display); font-weight: 600; }
.t-game .big { font-size: 28px; margin-top: var(--s2); }
.t-author .avatar {
  width: 64px; height: 64px; border-radius: var(--pill); background: var(--white);
  border: 1px solid var(--line); display: flex; align-items: center; justify-content: center;
  font-size: 26px; flex: none;
}

/* ============================================================================
   Generic page header
   ============================================================================ */
.page-head { padding: var(--s8) 0 var(--s4); }
.page-head .eyebrow { font-size: 12px; }
.page-head h1 { font-size: clamp(32px, 5vw, 44px); margin-top: var(--s2); }
.page-head p { color: var(--muted); font-size: 16px; margin-top: var(--s2); max-width: 560px; }
.section { padding: var(--s5) 0 var(--s8); }

/* ---- Retailer popover ("Get the Book") ---- */
.buy { position: relative; display: inline-block; }
.buy.full { display: block; }
.buy.full > .btn { width: 100%; }
.retailers {
  position: absolute; top: calc(100% + 8px); z-index: 60; width: 252px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--sh-3); padding: 8px; display: none;
}
.buy[data-align="right"] .retailers { right: 0; }
.buy[data-align="left"]  .retailers { left: 0; }
.buy.open .retailers { display: block; }
.retailers .head {
  font-family: var(--font-display); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); padding: 6px 10px 8px;
}
.retailers a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px; border-radius: var(--r-sm);
}
.retailers a:hover { background: var(--sand-soft); }
.retailers .r-name { font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.retailers .r-note { display: block; font-size: 11.5px; color: var(--muted); }
.retailers .foot { font-size: 11px; color: var(--muted); padding: 6px 10px 4px; }

/* ============================================================================
   Videos page
   ============================================================================ */
.video-featured { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16 / 9; background: var(--sky); }
.video-featured iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-featured .poster {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  cursor: pointer; background: var(--sky); background-size: cover; background-position: center;
}
.video-featured .poster::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(14, 50, 61, .5), transparent 55%);
}
.video-featured .poster > * { position: relative; z-index: 1; }
.video-featured .play {
  width: 76px; height: 76px; border-radius: var(--pill); background: rgba(255, 255, 255, .92);
  display: flex; align-items: center; justify-content: center; font-size: 30px; color: var(--ink);
}
.video-featured .meta { position: absolute; left: 18px; bottom: 16px; color: #fff; z-index: 1; }
.video-featured .meta .k { font-family: var(--font-display); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.video-featured .meta .t { font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 3vw, 26px); }
.video-featured .dur {
  position: absolute; right: 16px; bottom: 16px; background: rgba(14, 50, 61, .7); color: #fff;
  font-size: 12px; padding: 3px 8px; border-radius: 6px;
}
.video-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); margin-top: var(--s5); }
.vcard {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 14px; display: flex; flex-direction: column; gap: 12px; text-align: left;
}
.vcard .vthumb {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-sm); overflow: hidden;
  background: var(--sand); background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center;
}
.vcard .vthumb .vplay {
  width: 54px; height: 54px; border-radius: var(--pill); background: rgba(255, 255, 255, .92);
  color: var(--ink); display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.vcard .vthumb.soon { color: var(--muted); font-size: 26px; }
/* Home Videos tile — a single 16:9 thumbnail (one video for now) */
.t-videos .video-thumb {
  position: relative; aspect-ratio: 16 / 9; width: 100%; margin: 12px 0 14px;
  border-radius: var(--r-sm); overflow: hidden;
  background: rgba(255, 255, 255, .28); background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center;
}
.t-videos .video-thumb .play {
  width: 56px; height: 56px; border-radius: var(--pill); background: rgba(255, 255, 255, .92);
  color: var(--ink); display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.vcard .vthumb .dur { position: absolute; right: 8px; bottom: 8px; background: rgba(14, 50, 61, .72); color: #fff; font-size: 10.5px; padding: 2px 6px; border-radius: 5px; }
.vcard .k { font-family: var(--font-display); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.vcard .t { font-family: var(--font-display); font-weight: 600; font-size: 16.5px; margin-top: 4px; }
.vcard .play-lbl { font-size: 12.5px; font-weight: 700; color: var(--teal); margin-top: 6px; }
.vcard .soon-lbl {
  display: inline-block; margin-top: 6px; font-size: 11.5px; font-weight: 800; color: var(--muted);
  background: var(--sand-soft); border: 1px solid var(--line); border-radius: var(--pill); padding: 3px 10px;
}
.vcard.is-soon { cursor: default; }

/* ============================================================================
   Video Game — Coming Soon
   ============================================================================ */
.cs-hero { background: var(--teal); color: #fff; text-align: center; padding: clamp(56px, 9vw, 96px) var(--s6); }
.cs-hero .tag {
  display: inline-block; font-family: var(--font-display); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .35);
  border-radius: var(--pill); padding: 6px 14px;
}
.cs-hero h1 { color: #fff; font-size: clamp(44px, 9vw, 76px); margin: 18px 0 6px; line-height: 1; }
.cs-hero p { font-size: clamp(16px, 2vw, 19px); opacity: .9; max-width: 520px; margin: 0 auto; line-height: 1.5; }
.notify { max-width: 460px; margin: 28px auto 0; display: flex; gap: 10px; }
.notify input {
  flex: 1; padding: 14px 18px; border-radius: var(--pill); border: none; font-size: 16px;
  font-family: var(--font-body); color: var(--ink); outline: none;
}
.notify .ok {
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .4);
  border-radius: var(--r-md); padding: 16px 18px; font-family: var(--font-display); font-weight: 600;
}

/* ============================================================================
   Shop — product cards linking out to BLNKXT Shopify
   ============================================================================ */
.shop-source {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 12px;
  background: var(--sand-soft); border: 1px solid var(--line); border-radius: var(--pill);
  padding: 6px 14px; font-size: 13px; color: var(--muted);
}
.shop-source .dot { width: 8px; height: 8px; border-radius: var(--pill); background: var(--green); }
.product-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); margin-top: var(--s5); }
.product {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden; display: flex; flex-direction: column;
}
.product .pimg { aspect-ratio: 1 / 1; background: var(--sand); position: relative; }
.product .pimg img { width: 100%; height: 100%; object-fit: cover; }
.product .pimg .ph {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 6px; color: var(--muted); font-size: 26px;
}
.product .pbody { padding: 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.product .pname { font-family: var(--font-display); font-weight: 600; font-size: 15.5px; line-height: 1.2; }
.product .pprice { color: var(--muted); font-weight: 700; font-size: 14px; }
.product .btn { margin-top: auto; width: 100%; }
.product .pimg .soldout {
  position: absolute; top: 8px; left: 8px; background: var(--ink); color: #fff;
  font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: var(--pill);
}
/* Skeleton + fallback for the live Shopify fetch */
@keyframes shimmer { 0% { background-position: -300px 0; } 100% { background-position: 300px 0; } }
.sk { background: linear-gradient(90deg, var(--sand) 25%, var(--sand-soft) 50%, var(--sand) 75%);
  background-size: 600px 100%; animation: shimmer 1.3s infinite linear; border-radius: 6px; }
.product.skeleton .pimg { background: var(--sand); }
.shop-fallback {
  grid-column: 1 / -1; text-align: center; padding: 44px 20px; background: var(--sand-soft);
  border: 1px solid var(--line); border-radius: var(--r-lg);
}
.shop-fallback p { color: var(--muted); margin-bottom: 16px; font-size: 16px; }

/* ============================================================================
   About
   ============================================================================ */
.about-grid { display: grid; gap: 40px; grid-template-columns: 280px 1fr; align-items: start; }
.about-portrait {
  aspect-ratio: 4 / 5; border-radius: var(--r-md); background: var(--sand);
  display: flex; align-items: center; justify-content: center; color: var(--muted); overflow: hidden;
}
.about-portrait img { width: 100%; height: 100%; object-fit: cover; }
.about-card { background: var(--sand-soft); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px; margin-top: 14px; }
.about-body h2 { font-size: 24px; font-weight: 600; }
.about-body p { font-size: 16px; line-height: 1.7; margin-top: 14px; }
.buy-row {
  background: var(--sand-soft); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px;
  margin-top: 24px; display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
}
.buy-row img { width: 96px; height: 96px; border-radius: var(--r-sm); object-fit: cover; box-shadow: 0 10px 24px rgba(14, 50, 61, .16); }
.buy-row .grow { flex: 1; min-width: 180px; }

/* ============================================================================
   Footer — BLNKXT copyright + YouTube only
   ============================================================================ */
.site-footer { background: var(--teal); color: #fff; padding: var(--s7) 0 var(--s6); margin-top: var(--s7); }
.site-footer .cols { display: flex; flex-wrap: wrap; gap: var(--s5); justify-content: space-between; align-items: flex-start; }
.site-footer .brand { max-width: 320px; }
.site-footer .brand .name { font-family: var(--font-display); font-weight: 700; font-size: 22px; }
.site-footer .brand p { opacity: .85; font-size: 14px; margin-top: var(--s2); line-height: 1.55; }
.site-footer .group-label {
  font-family: var(--font-display); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  opacity: .7; margin-bottom: 10px;
}
.site-footer .links { display: flex; gap: 40px; flex-wrap: wrap; }
.site-footer .links a { display: block; opacity: .9; font-size: 14px; padding: 4px 0; }
.site-footer .links a:hover { opacity: 1; }
.site-footer .yt { display: inline-flex; align-items: center; gap: 8px; }
.site-footer .legal {
  border-top: 1px solid rgba(255, 255, 255, .2); margin-top: 22px; padding-top: 16px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 13px; opacity: .85;
}

/* ============================================================================
   Responsive
   ============================================================================ */
@media (max-width: 860px) {
  .navlinks { display: none; }
  .burger { display: block; }
  .nav-right { gap: 12px; }
  .hero { height: 576px; }
  /* Character: on narrow screens object-fit:cover crops the sock (it lives in the
     right-center of the artwork) out of view. The <picture> swaps in the trimmed
     sock; here we pin it to the bottom-right with a FIXED 20px gap, so as the
     screen shrinks it stays 20px from the edge and just scales down.
     transform:none overrides the JS parallax, which would otherwise nudge it off
     that 20px. */
  .hero .layer.char {
    inset: auto; left: auto; top: auto;
    right: 20px; bottom: 0;
    width: 70vw; max-width: 360px; height: auto;
    object-fit: contain; transform: none !important;
  }
  .hero .hero-in { max-width: 320px; padding-top: 12px; margin-left: 0; }

  /* Unwrap the two columns (display:contents) so all tiles become direct flex
     children of .bento and stack in one column, sequenced by their `order`:
     Book(0) › Videos(2) › Shop(3) › Author(4) › Game(5). */
  /* Stretch (not the desktop flex-start) so every stacked card fills the width. */
  .bento { flex-direction: column; align-items: stretch; }
  .bento-col { display: contents; }
  .t-book .book-cover { width: 138px; height: 138px; }

  .video-grid { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: 1fr 1fr; }
  .about-grid { grid-template-columns: 1fr; gap: 22px; }
  .notify { flex-direction: column; }
}
@media (max-width: 480px) {
  .container { padding: 0 var(--s4); }
  .product-grid { grid-template-columns: 1fr 1fr; }
}

/* Respect reduced motion — parallax JS also checks this. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .card { transition: none; }
}