/* Wasatch Creations landing page.
   A deliberately different identity from the BuddyCube product site: this is
   the parent channel, not a toy. Vintage outdoor sticker language, soft
   blurred shadows and rounded badges, rather than BuddyCube's moulded
   plastic hard-offset shadows.

   Palette below is the brand's current color list, given directly rather
   than sampled from the logo file (the old logo asset is out of date and
   is being replaced separately). Every text/background pairing that uses
   it is checked against WCAG AA (4.5:1 normal text, 3:1 large bold text,
   22.4px+ or 18.66px+ bold) with a script, not eyeballed, exact numbers are
   in the comment next to each derived shade. */

@import url("https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=Nunito+Sans:wght@400;600;700;800&display=swap");

:root {
  --font-display: "Baloo 2", ui-rounded, "Segoe UI", sans-serif;
  --font-body: "Nunito Sans", -apple-system, "Segoe UI", system-ui, sans-serif;

  /* Given brand colors, exact. */
  --ink: #534230;         /* mountain brown. On offwhite 9.09:1, on mtn-white 7.16:1, used as-is. */
  --rock: #534230;        /* same brown, used for dark surfaces (footer, video). White text on it: 9.59:1. */
  --paper: #FFF9E3;       /* offwhite, page background */
  --cream: #E4DFC7;       /* mountain white, card / panel surfaces */
  --sky: #7BA4B6;
  --red: #C25953;
  --orange: #D98346;
  --yellow: #E2B653;
  --green: #6A8D64;
  --blue: #4A748C;
  --purple: #6E5574;

  /* ink-soft: mountain brown mixed 85% toward offwhite, not a fixed guess.
     6.00:1 on paper, 4.73:1 on cream, since .muted/.lede/.follow-sub text
     appears on both surfaces. */
  --ink-soft: #6d5d4b;

  /* Several of the raw brand colors above are too light, or too close in
     lightness to white or to --ink, to carry text at 4.5:1 by themselves.
     Rather than silently substituting a different color, each has a named
     derived variant here, used only where the raw color would fail, with
     the checked number attached. Decorative uses (borders, icon fills with
     no text on top, large logo art) use the raw brand color throughout. */

  --red-strong: #b2524c;      /* red, darkened 8%. White text: 4.99:1 (raw red only reaches 4.33:1). */
  --red-strong-deep: #954540; /* red, darkened 23%, hover state. White text: 6.56:1. */
  --sky-deep: #5b7987;        /* sky, darkened 26%. White text: 4.64:1 (raw sky only reaches 2.68:1). */
  --green-tint: #c6caae;      /* green, lightened 75% toward cream, for small text chips. Ink text: 5.69:1 (ink on raw green is only 2.56:1). */

  --gutter: clamp(16px, 4vw, 40px);
  --measure: 1180px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 90px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }
img { height: auto; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  padding: 12px 16px;
  border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 3px solid var(--sky-deep); outline-offset: 3px; }

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* ---------- Topographic texture ---------- */
.contour-bg {
  background-color: var(--paper);
  background-image:
    repeating-radial-gradient(circle at 15% 20%, transparent 0 34px, rgba(91, 121, 135, 0.05) 35px 36px),
    repeating-radial-gradient(circle at 85% 75%, transparent 0 46px, rgba(194, 89, 83, 0.05) 47px 48px);
}

/* ---------- Nav bar ----------

   A diagonal blend across the full brand rainbow, not blocks of color: a
   plain linear-gradient with no explicit stop positions blends evenly from
   each color into the next, and the angle carries it corner-to-corner
   rather than left-to-right.

   Text does not sit directly on that gradient. Contrast against it would
   vary wildly band to band, white on yellow alone is 1.9:1, on orange
   2.88:1, on sky 2.68:1, all well under 4.5:1. Every clickable label gets
   its own solid brown chip instead, opaque enough (checked against the
   worst-case band, yellow) that contrast holds at 6.36:1 or better no
   matter which color sits behind it, while the gaps between chips and the
   bar's rounded ends still show the gradient clearly. */

.site-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  padding: 14px var(--gutter) 0;
  background: linear-gradient(var(--paper) 60%, rgba(255, 249, 227, 0));
}
.site-bar-inner {
  max-width: var(--measure);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: linear-gradient(120deg,
    var(--red), var(--orange), var(--yellow), var(--green), var(--blue), var(--purple));
  border-radius: 999px;
  padding: 8px 10px;
  box-shadow: 0 6px 18px rgba(83, 66, 48, 0.28);
}

.brand,
.site-nav a {
  /* mountain brown at 78% opacity: 6.36:1 white-text contrast against the
     worst band (yellow) underneath, 7 to 9:1 against the rest. */
  background: rgba(83, 66, 48, 0.78);
  border-radius: 999px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #fff;
  flex-shrink: 0;
  padding: 5px 14px 5px 5px;
}
.brand img { width: 32px; height: 32px; display: block; border-radius: 50%; }
.brand-word {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.01em;
  color: #fff;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-wrap: wrap;
}
.site-nav a {
  color: #fff;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  padding: 9px 14px;
}
.site-nav a:hover { background: rgba(83, 66, 48, 0.92); }
.site-nav .nav-cta {
  /* red-strong, not the raw brand red: white text on raw red is 4.33:1,
     just under the 4.5:1 this 13px bold label needs. red-strong checks
     4.99:1, red-strong-deep on hover checks 6.56:1. */
  background: var(--red-strong);
}
.site-nav .nav-cta:hover { background: var(--red-strong-deep); }

/* ---------- Type ---------- */

h1, h2, h3 { font-family: var(--font-display); font-weight: 800; margin: 0; }

.hero-title {
  font-size: clamp(30px, 6vw, 54px);
  line-height: 1.12;
  letter-spacing: -0.01em;
}
/* Raw green, unmodified: at this size (30px+, bold) the large-text
   threshold applies, 3:1 rather than 4.5:1, and green on paper checks
   3.55:1. */
.hero-title .accent { color: var(--green); }

.section-title {
  font-size: clamp(22px, 3.6vw, 30px);
  line-height: 1.25;
  margin-bottom: 8px;
}

/* For an interior page's own h1, one step down from .hero-title, which is
   reserved for the homepage. */
.page-title {
  font-size: clamp(28px, 5vw, 42px);
  line-height: 1.2;
  margin-bottom: 10px;
}

.lede {
  font-size: clamp(16px, 2vw, 19px);
  max-width: 56ch;
  color: var(--ink-soft);
  margin: 14px 0 0;
}
p { max-width: 68ch; }

a { color: var(--sky-deep); }
a:hover { text-decoration-thickness: 2px; }

.muted { color: var(--ink-soft); font-size: 14.5px; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  padding: 14px 24px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  color: #fff;
  background: var(--sky-deep);
  box-shadow: 0 6px 16px rgba(83, 66, 48, 0.22);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(83, 66, 48, 0.26); }
.btn:active { transform: translateY(0); }
.btn svg { width: 1.25em; height: 1.25em; flex-shrink: 0; }
/* red-strong: same reasoning as .nav-cta above, raw red falls just short
   of 4.5:1 for this size of text. */
.btn--primary { background: var(--red-strong); }
.btn--primary:hover { background: var(--red-strong-deep); }
/* blue, unmodified: white text on raw blue checks 5.04:1 already. Used for
   the secondary CTAs (watch the full channel, see all creations) so they
   read as a different action from the red primary buttons. */
.btn--secondary { background: var(--blue); }
.btn--secondary:hover { background: #3c5f71; }
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 2.5px solid var(--ink);
  box-shadow: none;
}
.btn--ghost:hover { background: var(--ink); color: #fff; }

.button-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 28px; }

/* ---------- Hero ---------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
  padding-block: clamp(40px, 7vw, 84px) clamp(30px, 5vw, 60px);
}
@media (max-width: 840px) {
  .hero { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .hero-lede { margin-inline: auto; }
  .button-row { justify-content: center; }
  .hero-badge { order: -1; max-width: 260px; margin-inline: auto; }
}
.hero-badge { width: 100%; display: block; filter: drop-shadow(0 18px 30px rgba(83, 66, 48, 0.22)); }

/* ---------- Sections ---------- */

.section { padding-block: clamp(30px, 6vw, 56px); }
.section-head { max-width: 62ch; margin-bottom: clamp(24px, 4vw, 38px); }
/* sky-deep, not raw sky: this section carries body text (.lede, .fill-in)
   as small as 16px regular weight, and white on raw sky only checks
   2.68:1. sky-deep checks 4.64:1. */
.section--sky { background: var(--sky-deep); color: #fff; }
.section--sky .section-title { color: #fff; }
.section--sky .lede { color: rgba(255, 255, 255, 0.9); }
.section--sky a:not(.btn) { color: #fff; text-decoration-color: rgba(255,255,255,0.5); }

/* .fill-in and .note are written for use on the light --paper background.
   Reused as-is on a sky-deep section they would sit dark-text-on-dark, so
   they get a solid light chip instead. Text is --ink, not --sky-deep: the
   composited chip color is a slightly blue-tinted near-white, and sky-deep
   on it only reached 4.31:1, just under 4.5:1. --ink checks 8.92:1. */
.section--sky .fill-in,
.section--sky .note {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(255, 255, 255, 0.6);
  color: var(--ink);
}

/* ---------- Video ---------- */

.video-card {
  max-width: 880px;
  margin-inline: auto;
  background: var(--cream);
  border-radius: 26px;
  padding: 14px;
  box-shadow: 0 14px 32px rgba(83, 66, 48, 0.16);
}
.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  background: var(--rock);
}
.video-lcd {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
  border: 0;
  cursor: pointer;
  color: #fff;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.08), transparent 60%),
    var(--rock);
}
.video-lcd iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.play-badge {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  /* red-strong: white icon on raw green (old choice) or raw red both read
     weak against the dark rock background at a glance; red-strong keeps it
     crisp and ties the play button to the same red as the primary CTA. */
  background: var(--red-strong);
  display: grid;
  place-items: center;
  transition: transform 0.15s ease;
}
.video-lcd:hover .play-badge { transform: scale(1.07); }
.play-badge svg { width: 30px; height: 30px; color: #fff; }
.video-note {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  margin: 0;
}
.video-caption { text-align: center; margin: 14px 4px 4px; font-size: 14px; }

/* ---------- Creations grid ---------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 20px;
}

.creation-card {
  display: flex;
  flex-direction: column;
  background: var(--cream);
  border-radius: 22px;
  padding: 22px;
  text-decoration: none;
  color: var(--ink);
  box-shadow: 0 10px 24px rgba(83, 66, 48, 0.12);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  border-top: 6px solid var(--green);
}
.creation-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(83, 66, 48, 0.18); }
.creation-card h3 {
  font-size: 19px;
  margin-bottom: 8px;
}
.creation-card p { font-size: 14.5px; color: var(--ink-soft); margin: 0; max-width: none; }
.creation-tag {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  /* green-tint, not raw green: ink text on raw green is only 2.56:1, the
     brand green is too saturated to carry small text under it directly.
     green-tint checks 5.69:1. */
  background: var(--green-tint);
  color: var(--ink);
  margin-bottom: 14px;
}

.creation-card--empty {
  border-top-color: var(--cream);
  border: 2.5px dashed #b9ad8f;
  background: transparent;
  box-shadow: none;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--ink-soft);
  min-height: 160px;
}
.creation-card--empty:hover { transform: none; box-shadow: none; }

.creations-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

/* Bigger cards, for the full creations page rather than the homepage
   preview grid. */
.creation-card--big { padding: 0; overflow: hidden; }
.creation-card--big .card-media {
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.creation-card--big .card-media svg,
.creation-card--big .card-media img { width: 100%; height: 100%; }
.creation-card--big .card-body { padding: 22px; }
.creation-card--big .card-media--empty {
  background: var(--paper);
  border-bottom: 2.5px dashed #b9ad8f;
  color: var(--ink-soft);
  flex-direction: column;
  gap: 8px;
}
.creation-card--big .card-media--empty svg { width: 40px; height: 40px; }

/* ---------- Bio ---------- */

.bio {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 40px);
  align-items: start;
}
@media (max-width: 700px) {
  .bio { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .bio-badge { max-width: 160px; margin-inline: auto; }
}
.bio-badge { width: 100%; display: block; }
.bio-copy p { font-size: 16px; }

.fill-in {
  background: rgba(123, 164, 182, 0.16);
  border: 2px dashed var(--sky);
  border-radius: 12px;
  padding: 2px 8px;
  color: var(--sky-deep);
  font-weight: 700;
}

/* ---------- Follow / social ---------- */

.follow-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.follow-card {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
  background: var(--cream);
  border-radius: 999px;
  padding: 10px 20px 10px 10px;
  box-shadow: 0 8px 20px rgba(83, 66, 48, 0.12);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.follow-card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(83, 66, 48, 0.18); }
.follow-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  flex-shrink: 0;
}
.follow-icon svg { width: 20px; height: 20px; }
.follow-name { font-family: var(--font-display); font-weight: 700; font-size: 14.5px; }
.follow-sub { display: block; font-size: 12px; color: var(--ink-soft); font-weight: 400; font-family: var(--font-body); }

/* ---------- Callouts ---------- */

.note {
  background: rgba(123, 164, 182, 0.14);
  border: 2px dashed var(--sky);
  border-radius: 14px;
  padding: 14px 16px;
  color: var(--sky-deep);
  margin: 18px 0 0;
  font-size: 14px;
  max-width: none;
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--rock);
  color: rgba(255, 255, 255, 0.86);
  padding: 34px 0 30px;
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  justify-content: space-between;
  align-items: center;
}
.footer-brand { display: inline-flex; align-items: center; gap: 10px; }
.footer-brand img { width: 30px; height: 30px; }
.footer-brand span { font-family: var(--font-display); font-weight: 700; color: #fff; font-size: 14px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer-links a { color: rgba(255, 255, 255, 0.82); text-decoration: none; font-size: 13.5px; }
.footer-links a:hover { color: #fff; }