/* Thunk's page: the toy box of its store frame. A chalk page with a dot grid
   and toy blocks lying about, words on white toy-key labels with a thick
   edge and a hard shadow, the phone in a chunky casing turned a little.
   Rubik, heavy. At night the same toys on the board's dark slate. */

@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/fonts/rubik/rubik-400-800-latin.woff2) format("woff2");
}

.app-thunk {
  --body: "Rubik", var(--sys);
  --display: "Rubik", var(--sys);
  --page: #eceef3;
  --dots: #d3d7e1;
  --surface: #ffffff;
  --ink: #1d1d27;
  --dim: #50536a;
  --rule: rgba(29, 29, 39, 0.16);
  --link: #c0352b;
  --focus: #3d86ff;
  --edge: #1d1d27;
  --label-shadow: #1d1d27;
  --card: #ffffff;

  --stage-bg: transparent;
  --stage-ink: var(--ink);
  --stage-dim: var(--dim);
  --store-bg: #ffffff;
  --store-ink: #1d1d27;
  --store-border: 3px solid var(--edge);
  --store-radius: 14px;
  --store-shadow: 0 4px 0 var(--edge);
  --device-fill: #262633;
}

@media (prefers-color-scheme: dark) {
  .app-thunk {
    --page: #1c1c26;
    --dots: #2e2e3c;
    --surface: #262633;
    --ink: #f2f2f7;
    --dim: #b4b6c8;
    --rule: rgba(255, 255, 255, 0.13);
    --link: #ff8f86;
    --focus: #4fd0ff;
    --edge: #0b0b10;
    --label-shadow: #ff5a4e;
    --card: #262633;
    --store-shadow: 0 4px 0 #ff5a4e;
  }
}

.app-thunk { background: radial-gradient(circle, var(--dots) 1.4px, transparent 1.7px) 0 0 / 18px 18px, var(--page); }
.app-thunk h1, .app-thunk h2 { font-weight: 800; letter-spacing: -0.02em; }
.app-thunk h2 { font-size: clamp(28px, 4.4vw, 42px); }
.app-thunk h3 { font-weight: 700; }

/* The white toy-key label: thick edge, hard shadow, turned a little. */
.app-thunk .label {
  display: inline-block; padding: 0.08em 0.34em 0.12em; border-radius: 0.2em;
  background: #ffffff; color: #1d1d27; border: 3px solid #1d1d27;
  box-shadow: 0 5px 0 var(--label-shadow); transform: rotate(-2.5deg);
}
.app-thunk .label.tilt { transform: rotate(2deg); }

/* ---- the stage ---- */

.app-thunk .toy { position: absolute; width: 102px; height: 102px; filter: drop-shadow(0 3px 0 rgba(29, 29, 39, 0.85)); }
.app-thunk .toy-1 { left: -34px; top: 70px; }
.app-thunk .toy-2 { right: -30px; top: 40px; }
.app-thunk .toy-3 { left: 44%; bottom: -46px; }
.app-thunk .toy-4 { right: -40px; top: 58%; }
.app-thunk .toy-5 { left: -46px; bottom: 60px; }
.app-thunk .toy-6 { right: 18%; bottom: -60px; }
@media (max-width: 859px) {
  .app-thunk .toy-1, .app-thunk .toy-3, .app-thunk .toy-4, .app-thunk .toy-5 { display: none; }
  .app-thunk .toy-2 { top: 92px; right: -46px; }
}

.app-thunk .hero { padding-bottom: 80px; }
.app-thunk .hero-text { display: flex; flex-direction: column; align-items: flex-start; }
.app-thunk .app-icon { width: 76px; height: 76px; border: 3px solid var(--edge); box-shadow: 0 4px 0 var(--edge); }
.app-thunk .hero h1 { margin: 28px 0 0 -0.04em; font-size: clamp(64px, 12vw, 120px); line-height: 1; }
.app-thunk .hero h1 .label { box-shadow: 0 8px 0 var(--label-shadow); border-width: 4px; }
.app-thunk .kind { margin-top: 26px; font-size: 18px; font-weight: 500; }
.app-thunk .promise { margin-top: 6px; font-size: clamp(28px, 3.8vw, 38px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.app-thunk .lede { margin-top: 14px; font-size: 18px; }
.app-thunk .store b { font-family: var(--body); font-weight: 800; }

/* The chunky casing, turned a little, with a tomato hard shadow. */
.app-thunk .device {
  width: min(282px, 70vw); border: 11px solid #1d1d27; border-radius: 46px; overflow: hidden;
  transform: rotate(2deg); box-shadow: 16px 16px 0 #ff5a4e;
}
@media (prefers-color-scheme: dark) { .app-thunk .device { border-color: #0b0b10; box-shadow: 0 0 0 2px #3a3a4a, 16px 16px 0 #ff5a4e; } }

/* ---- what's in the box: four toy cards ---- */

.app-thunk .good h2 { font-size: clamp(26px, 3.8vw, 36px); }
.app-thunk .good .section-head p { margin-top: 22px; }
.app-thunk .toys { display: grid; gap: 22px; margin: 40px 0 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .app-thunk .toys { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (min-width: 1040px) { .app-thunk .toys { grid-template-columns: repeat(4, 1fr); } }
.app-thunk .toys li {
  padding: 22px 22px 26px; border-radius: 18px;
  background: var(--card); border: 3px solid var(--edge); box-shadow: 0 6px 0 var(--edge);
}
.app-thunk .toys li:nth-child(odd) { transform: rotate(-1deg); }
.app-thunk .toys li:nth-child(even) { transform: rotate(1deg); }
.app-thunk .piece { height: 44px; width: auto; margin-bottom: 16px; }
.app-thunk .toys h3 { margin: 0 0 6px; font-size: 20px; line-height: 1.2; }
.app-thunk .toys p { margin: 0; color: var(--dim); font-size: 16px; line-height: 1.5; }

/* ---- the daily board ---- */

.app-thunk .daily-wrap { text-align: center; }
.app-thunk .daily h2 { font-size: clamp(30px, 6vw, 60px); }
.app-thunk .daily p { margin: 32px auto 0; max-width: 52ch; color: var(--dim); font-size: 18px; }

.app-thunk .shots-row img { border-radius: 16px; border: 3px solid var(--edge); box-shadow: 0 5px 0 var(--edge); }
.app-thunk .faq summary { font-weight: 700; }
.app-thunk .faq-list details { border-color: var(--rule); }