/* ==========================================================================
   LAVASOCKS
   Desktop (>= 860px): every section is a 992px-wide design canvas. An art
   plate sits behind live HTML that is positioned in design pixels, and the
   whole .stage is scaled to the viewport with `zoom` (index.html / script.js).
   Mobile (< 860px): plates are hidden and the same HTML flows as a stack.
   ========================================================================== */

@font-face { font-family: 'Fredoka'; font-weight: 300 700; font-stretch: 75% 125%; font-display: swap; src: url('/assets/fonts/fredoka.woff2') format('woff2'); }
@font-face { font-family: 'Baloo 2'; font-weight: 400 800; font-display: swap; src: url('/assets/fonts/baloo-2.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/outfit.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-weight: 800; font-display: swap; src: url('/assets/fonts/nunito-800.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-weight: 900; font-display: swap; src: url('/assets/fonts/nunito-900.woff2') format('woff2'); }
@font-face { font-family: 'Andika'; font-weight: 400; font-display: swap; src: url('/assets/fonts/andika.woff2') format('woff2'); }
@font-face { font-family: 'Patrick Hand'; font-weight: 400; font-display: swap; src: url('/assets/fonts/patrick-hand.woff2') format('woff2'); }

:root {
  --cream: #fcf4eb;
  --cream-2: #faf1e8;
  --card: #fcf3e9;
  --ink: #1f1f21;
  --navy: #101c2c;
  --hand-ink: #243040;
  --lava: #e83f17;
  --lava-hi: #f2582c;
  --dark: #2e2f2f;
  --foot: #282c30;
  --sky: #b2e1fa;
  --display: 'Fredoka', 'Baloo 2', system-ui, sans-serif;
  --title: 'Baloo 2', 'Fredoka', system-ui, sans-serif;
  --ui: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hand: 'Patrick Hand', 'Comic Sans MS', cursive;
  --soft: 'Andika', 'Trebuchet MS', system-ui, sans-serif;
  --head: 'Nunito', 'Fredoka', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--foot); color: var(--ink); font-family: var(--ui); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
h1, h2, h3, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--lava); outline-offset: 2px; border-radius: 4px; }
.skip { position: absolute; left: -999px; top: 0; z-index: 99; background: #fff; padding: 8px 12px; }
.skip:focus { left: 8px; top: 8px; }

.hand { font-family: var(--hand); color: var(--hand-ink); letter-spacing: .055em; word-spacing: .22em; -webkit-text-stroke: .3px currentColor; }
/* Soft humanist sans used for the longer body copy (careers, news, features). */
.soft { font-family: var(--soft); letter-spacing: 0; word-spacing: 0; -webkit-text-stroke: 0; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: 999px; font-family: var(--ui); font-weight: 600; white-space: nowrap; transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease; }
.btn .arrow { width: 14px; height: 9px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s ease; }
.btn:hover .arrow, .post a:hover .arrow { transform: translateX(3px); }
.btn-primary { background: var(--lava); color: #fff; font-weight: 500; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 2px 5px rgba(180,50,10,.22); }
.btn-primary:hover { background: var(--lava-hi); transform: translateY(-1px); }
.btn-ghost { background: #fdfcfb; color: var(--navy); font-weight: 700; box-shadow: 0 0 0 1px #d8d3cb, 0 2px 5px rgba(60,40,20,.10); }
.btn-ghost:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px #c9c2b8, 0 4px 9px rgba(60,40,20,.14); }
.play { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }

/* ---------- shared card internals (always laid out in design pixels) ---------- */
.card { position: relative; height: 240px; background: var(--card); border-radius: 9px; box-shadow: 0 0 0 1px rgba(255,255,255,.55), 0 3px 10px rgba(0,0,0,.28); transition: transform .22s ease, opacity .22s ease, filter .22s ease; }
.card > a { display: block; height: 100%; }
.card:hover { transform: translateY(-4px) rotate(var(--tilt, 0deg)); }
.card.is-dim { opacity: .22; filter: saturate(.4); pointer-events: none; }
.card-art { position: absolute; left: 3px; top: 3px; width: calc(100% - 5px); height: var(--ah, 120px); object-fit: cover; border-radius: 7px 7px 0 0; }
.card-logo { position: absolute; max-width: none; left: var(--lx); top: var(--ly); width: var(--lw); height: var(--lh); }
.card p { position: absolute; left: var(--px); top: calc(var(--py) + .5px); font-size: var(--ps, 11.4px); line-height: 14px; letter-spacing: .035em; word-spacing: .12em; -webkit-text-stroke: 0; white-space: nowrap; }
.tags { position: absolute; left: var(--tx); top: var(--ty); display: flex; gap: var(--tg, 8px); }
.tags i { font: 500 10px/21px var(--ui); font-style: normal; color: #232d38; padding: 0 var(--tp, 9.5px); border-radius: 99px; background: var(--tag); }
.t-green { --tag: #dce5d6; } .t-pink { --tag: #f9d3c8; } .t-tan { --tag: #f2d9c2; } .t-yellow { --tag: #fbdeae; } .t-peach { --tag: #f9d9b9; }
.c1 { --lx: 5px;  --ly: 124px; --lw: 124px; --lh: 36px; --px: 15px; --py: 162px; --tx: 14px; --ty: 213px; --tp: 10px; --ps: 11.6px; }
.c2 { --lx: 16px; --ly: 127px; --lw: 108px; --lh: 44px; --px: 14px; --py: 172px; --tx: 17px; --ty: 214px; --ps: 11.5px; }
.c3 { --lx: 18px; --ly: 124px; --lw: 104px; --lh: 49px; --ah: 121px; --px: 12px; --py: 171px; --tx: 22px; --ty: 213px; --ps: 10.7px; }
.c4 { --lx: 17px; --ly: 126px; --lw: 114px; --lh: 42px; --px: 23px; --py: 169px; --tx: 23px; --ty: 214px; --ps: 10.6px; }
.c5 { --lx: 7px;  --ly: 129px; --lw: 132px; --lh: 35px; --px: 26px; --py: 166px; --tx: 18px; --ty: 212px; --ps: 11.8px; --tilt: -.6deg; transform: rotate(-.6deg); }

.post { position: relative; background: var(--card); border-radius: 7px; box-shadow: 0 3px 12px rgba(30,70,110,.22); transition: transform .22s ease; }
.post > a { display: block; height: 100%; }
.post:hover { transform: translateY(-4px) rotate(var(--tilt, 0deg)); }
.post img { position: absolute; left: 4px; top: 3px; width: calc(100% - 7px); height: 95px; object-fit: cover; border-radius: 5px; }
.post time { position: absolute; left: 16px; top: 104px; font: 500 8.6px/10px var(--ui); letter-spacing: .02em; color: #1d2735; }
.post h3 { position: absolute; left: 16px; top: 116px; font: 800 14.3px/17.4px var(--head); letter-spacing: -.01em; color: var(--navy); white-space: nowrap; }
.post p { position: absolute; left: 17px; top: 153px; font-size: 10.7px; line-height: 14.4px; white-space: nowrap; }
.post .more { position: absolute; left: 17px; top: 200px; display: inline-flex; align-items: center; gap: 6px; font: 600 10.6px/14px var(--ui); color: var(--lava); }
.post .more .arrow { width: 11px; height: 8px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s ease; }

.features h3 { font: 800 13.4px/16px var(--head); color: var(--navy); white-space: nowrap; }
.features p { font-size: 10.9px; line-height: 14.2px; white-space: nowrap; }

.logo { display: inline-flex; align-items: center; font: 700 27px/1 var(--display); font-stretch: 75%; letter-spacing: -.02em; color: var(--ink); }
.logo span { transform: scaleX(.95); transform-origin: 0 50%; }
.logo img { width: 46px; height: auto; }
.logo-foot { color: #fff; }

.social { display: flex; align-items: center; }
.social a { display: grid; place-items: center; color: #f2efe9; transition: color .15s ease, transform .15s ease; }
.social a:hover { color: var(--lava-hi); transform: translateY(-1px); }
.social svg { width: 100%; height: 100%; fill: currentColor; }
.social svg.stroke { fill: none; stroke: currentColor; stroke-width: 2; }
.social svg.stroke .dot { fill: currentColor; stroke: none; }

.nav-links a, .foot-links a { transition: color .15s ease; }
.nav-links a:hover { color: var(--lava); }
.foot-links a:hover { color: #fff; }
.filters button { transition: background-color .15s ease, color .15s ease; }

/* ==========================================================================
   DESKTOP - design canvas
   ========================================================================== */
@media (min-width: 860px) {
  .stage { width: 992px; margin: 0 auto; }
  .sec { position: relative; width: 992px; }
  .sec > *:not(.plate), .nav > * { position: absolute; }
  .plate { position: absolute; left: 0; top: 0; width: 992px; height: auto; max-width: none; z-index: 0; pointer-events: none; user-select: none; }
  .sec > *:not(.plate) { z-index: 1; }
  .m-art, .m-only, .burger { display: none !important; }

  .hero { height: 420px; background: var(--cream); }
  .worlds { height: 318px; background: var(--dark); }
  .curiosity { height: 262px; background: var(--cream-2); }
  .news { height: 248px; background: var(--sky); }
  .careers { height: 204px; background: var(--cream-2); }
  .footer { height: 134px; background: var(--foot); }

  /* hero */
  .nav { left: 0; top: 0; width: 992px; height: 48px; }
  .nav .logo { left: 37px; top: 2px; }
  .nav .logo span { margin-left: -1px; margin-top: -3px; }
  .nav-links { left: 220px; top: 15px; display: flex; gap: 22.5px; font: 500 10.4px/16px var(--ui); color: #1a2230; }
  .nav-cta { left: 727px; top: 7px; width: 137px; height: 32px; font-size: 10.4px; }
  .hero-title { left: 37px; top: 72px; font: 700 75px/57px var(--display); font-stretch: 94%; letter-spacing: -.015em; color: var(--ink); white-space: nowrap; }
  .hero-title span { display: block; }
  .hero-title .l2 { color: var(--lava); font-size: 66px; }
  .hero-title .l3 { margin-left: 14px; font-size: 79px; }
  .hero-copy { left: 59px; top: 263px; font-size: 14.7px; line-height: 19.2px; transform: rotate(-2.2deg); transform-origin: 0 50%; white-space: nowrap; }
  .hero-actions { left: 0; top: 0; }
  .hero-actions .btn { position: absolute; font-size: 12px; }
  .hero-actions .btn-primary { left: 45px; top: 365px; width: 162px; height: 37px; transform: rotate(-1.6deg); }
  .hero-actions .watch { left: 216px; top: 358px; width: 137px; height: 38px; transform: rotate(-2deg); gap: 8px; }
  .hero-actions .btn-primary:hover { transform: rotate(-1.6deg) translateY(-1px); }
  .hero-actions .watch:hover { transform: rotate(-2deg) translateY(-1px); }

  /* worlds */
  .worlds-title { left: 35px; top: 25px; font: 700 61px/48px var(--display); font-stretch: 90%; letter-spacing: -.045em; color: #fbf5ee; }
  .worlds-title .l1 { letter-spacing: -.01em; font-size: 64px; }
  .worlds-copy { left: 41px; top: 142px; font-size: 16.4px; line-height: 22px; color: #fbf5ee; transform: rotate(-3deg); transform-origin: 0 50%; white-space: nowrap; }
  .filters { left: 646px; top: 17px; display: flex; align-items: center; gap: 0; font: 500 10.2px/25px var(--ui); color: #f6f2ec; }
  .filters button { height: 25px; padding: 0 11.4px; border-radius: 99px; }
  .filters button:first-child { padding: 0 17px; margin-right: 2px; }
  .filters button:hover { color: #fff; background: rgba(255,255,255,.09); }
  .filters .is-active, .filters .is-active:hover { background: var(--lava); color: #fff; }
  .cards { left: 226px; top: 57px; width: 731px; display: grid; grid-template-columns: 137fr 139fr 139fr 144fr 142fr; column-gap: 7.5px; }
  .c4 { top: -1px; height: 242px; } .c5 { top: -3px; }

  /* curiosity */
  .cur-title { left: 47px; top: 10.5px; font: 700 53px/48px var(--display); font-stretch: 104%; letter-spacing: -.015em; color: var(--navy); white-space: nowrap; }
  .cur-title em { font-style: normal; color: var(--lava); }
  .cur-copy { left: 50px; top: 123px; font-size: 13.4px; line-height: 19px; transform: rotate(-.8deg); transform-origin: 0 50%; white-space: nowrap; }
  .features { left: 0; top: 0; }
  .features li { position: absolute; }
  .features img { position: absolute; width: 56px; height: 56px; max-width: none; left: var(--ix); top: var(--iy); }
  .features p { margin-top: 1px; }
  .f1 { left: 601px; top: 61px; --ix: -1px; --iy: -54px; }
  .f2 { left: 752px; top: 61px; --ix: 1px; --iy: -54px; }
  .f3 { left: 594px; top: 186px; --ix: 10px; --iy: -57px; }
  .f4 { left: 778px; top: 188px; --ix: -5px; --iy: -57px; }

  /* news */
  .news-title { left: 45px; top: 13px; font: 900 29px/33px var(--head); letter-spacing: -.02em; color: var(--navy); white-space: nowrap; transform: rotate(-1.2deg); transform-origin: 0 50%; }
  .news-title .l1 { font-size: 33px; letter-spacing: -.01em; }
  .news-copy { left: 48px; top: 88px; font-size: 14.4px; line-height: 17.4px; transform: rotate(-2deg); transform-origin: 0 50%; white-space: nowrap; }
  .news-all { left: 45px; top: 150px; width: 156px; height: 40px; font-size: 13.2px; gap: 12px; transform: rotate(-1.2deg); }
  .news-all:hover { transform: rotate(-1.2deg) translateY(-1px); }
  .posts { left: 0; top: 0; }
  .posts .post { position: absolute; }
  .p1 { left: 303px; top: 16px; width: 188px; height: 221px; }
  .p2 { left: 501px; top: 14px; width: 190px; height: 222px; }
  .p3 { left: 698px; top: 15px; width: 186px; height: 225px; --tilt: .9deg; transform: rotate(.9deg); }

  /* careers */
  .car-title { left: 52px; top: 16px; font: 900 27.7px/27.5px var(--head); letter-spacing: -.02em; color: var(--navy); white-space: nowrap; transform: none; transform-origin: 0 50%; }
  .car-title em { font-style: normal; color: #4d6a63; }
  .car-copy { left: 55px; top: 84px; font-size: 12.1px; line-height: 14.4px; white-space: nowrap; }
  .car-cta { left: 53px; top: 141px; width: 176px; height: 37px; font-size: 12.6px; gap: 12px; }

  /* footer */
  .logo-foot { left: 36px; top: 6px; }
  .logo-foot span { margin-left: -2px; margin-top: 2px; font-size: 25px; }
  .foot-tag { left: 41px; top: 59px; font-size: 10.2px; line-height: 12px; letter-spacing: .1em; text-transform: uppercase; color: #f4f0e9; -webkit-text-stroke: 0; transform: rotate(-2.6deg); transform-origin: 0 50%; white-space: nowrap; }
  .foot-links { left: 281px; top: 35px; display: flex; gap: 17.1px; font: 400 10.2px/16px var(--ui); color: #ece8e1; }
  .social { left: 597px; top: 35px; gap: 14.5px; }
  .social a { width: 15.5px; height: 15.5px; }
  .footer hr { left: 39px; top: 83px; width: 915px; height: 1px; margin: 0; border: 0; background: rgba(255,255,255,.17); }
  .copy { left: 40px; top: 104px; font: 400 9.8px/12px var(--ui); color: #8b8d8f; }
}

/* ==========================================================================
   MOBILE - stacked flow
   ========================================================================== */
@media (max-width: 859.98px) {
  .plate { display: none; }
  .sec { position: relative; padding: 44px 22px; overflow: hidden; }

  /* hero */
  .hero { background: var(--cream); padding-top: 0; padding-bottom: 28px; }
  .nav { display: flex; align-items: center; justify-content: space-between; height: 64px; margin: 0 -8px; position: relative; z-index: 5; }
  .nav .logo { font-size: 27px; }
  .nav .logo img { width: 50px; }
  .nav-cta { display: none; }
  .burger { width: 44px; height: 44px; display: grid; place-content: center; gap: 5px; }
  .burger span { display: block; width: 22px; height: 2.5px; border-radius: 2px; background: var(--ink); transition: transform .2s ease, opacity .2s ease; }
  .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
  .nav-links { position: absolute; left: 0; right: 0; top: 60px; display: none; flex-direction: column; background: #fffaf3; border-radius: 16px; padding: 8px; box-shadow: 0 12px 30px rgba(40,25,10,.18), 0 0 0 1px #eadfd2; font: 600 17px/1 var(--ui); }
  .nav-links.is-open { display: flex; }
  .nav-links a { padding: 14px 16px; border-radius: 10px; }
  .nav-links a:active { background: #f6ebdf; }

  .hero-title { margin-top: 18px; font: 700 clamp(44px, 14.4vw, 88px)/.84 var(--display); font-stretch: 94%; letter-spacing: -.015em; }
  .hero-title span { display: block; }
  .hero-title .l2 { color: var(--lava); }
  .hero-copy { margin-top: 22px; font-size: 20px; line-height: 1.3; transform: rotate(-1.2deg); transform-origin: 0 50%; }
  .hero-copy br, .cur-copy br, .car-copy br, .news-copy br { display: none; }
  .hero-actions { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }
  .btn-lg { height: 52px; padding: 0 26px; font-size: 16px; }
  .hero .m-art { width: calc(100% + 44px); max-width: none; margin: 26px -22px 0; height: auto; }

  /* worlds */
  .worlds { background: var(--dark); border-radius: 22px 22px 0 0; margin-top: -14px; padding-right: 0; }
  .worlds-title { font: 700 56px/.88 var(--display); font-stretch: 108%; color: #fbf5ee; }
  .worlds-title br { display: none; }
  .worlds-copy { margin-top: 14px; font-size: 21px; line-height: 1.25; color: #fbf5ee; transform: rotate(-2deg); transform-origin: 0 50%; }
  .filters { margin: 26px 0 0 -22px; padding: 2px 22px; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; font: 500 15px/38px var(--ui); color: #f6f2ec; }
  .filters::-webkit-scrollbar { display: none; }
  .filters button { flex: none; height: 38px; padding: 0 18px; border-radius: 99px; }
  .filters .is-active { background: var(--lava); color: #fff; }
  .cards { margin: 18px 0 0 -22px; padding: 8px 22px 18px; display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; zoom: 1.5; }
  .cards::-webkit-scrollbar { display: none; }
  .card { flex: none; width: 140px; scroll-snap-align: center; }
  .card.is-dim { display: none; }
  .c5 { transform: none; }

  /* curiosity */
  .curiosity { background: var(--cream-2); border-radius: 22px 22px 0 0; margin-top: -20px; }
  .cur-title { font: 700 clamp(44px, 13vw, 80px)/.86 var(--display); font-stretch: 108%; color: var(--navy); }
  .cur-title em { font-style: normal; color: var(--lava); }
  .cur-copy { margin-top: 18px; font-size: 19px; line-height: 1.35; }
  .m-mascot { width: min(100%, 380px); height: auto; margin: 10px auto 0; }
  .features { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 26px 16px; }
  .features img { width: 64px; height: 64px; margin: 0 0 4px -6px; }
  .features h3 { font-size: 17px; line-height: 1.15; white-space: normal; }
  .features p { margin-top: 4px; font-size: 15.5px; line-height: 1.25; white-space: normal; }
  .features p br { display: none; }

  /* news */
  .news { background: linear-gradient(#a9dcf8, #c6e9fb); padding-right: 0; }
  .news-title { font: 900 36px/1 var(--head); letter-spacing: -.02em; color: var(--navy); }
  .news-copy { margin-top: 12px; padding-right: 22px; font-size: 19px; line-height: 1.3; }
  .news-all { margin-top: 20px; }
  .posts { margin: 22px 0 0 -22px; padding: 8px 22px 18px; display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; zoom: 1.45; }
  .posts::-webkit-scrollbar { display: none; }
  .post { flex: none; width: 188px; height: 222px; scroll-snap-align: center; }

  /* careers */
  .careers { background: var(--cream-2); padding-bottom: 0; }
  .car-title { font: 900 34px/1.02 var(--head); letter-spacing: -.02em; color: var(--navy); }
  .car-title em { font-style: normal; color: #4d6a63; }
  .car-copy { margin-top: 14px; font-size: 18px; line-height: 1.35; }
  .car-cta { margin-top: 22px; }
  .m-careers { width: calc(100% + 44px); max-width: none; height: 230px; object-fit: cover; object-position: 38% 100%; margin: 26px -22px 0; }

  /* footer */
  .footer { background: var(--foot); padding: 36px 22px 28px; }
  .logo-foot { font-size: 28px; margin-left: -8px; }
  .logo-foot img { width: 52px; }
  .foot-tag { margin-top: 6px; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: #f4f0e9; transform: rotate(-1.5deg); transform-origin: 0 50%; }
  .foot-links { margin-top: 26px; display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 16px 30px; font: 400 16px/1 var(--ui); color: #ece8e1; }
  .social { margin-top: 28px; gap: 20px; }
  .social a { width: 24px; height: 24px; }
  .foot-note { margin-top: 26px; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: #f4f0e9; }
  .footer hr { margin: 22px 0 16px; border: 0; height: 1px; background: rgba(255,255,255,.17); }
  .copy { font: 400 13px/1.4 var(--ui); color: #8b8d8f; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}