/* Lil' Phil's public pages (built by scripts/site/build-site.mjs). The app's own night sky,
   gold and rounded type, on pages a grown-up reads before handing the tablet over. */
@font-face { font-family: "Phil Story"; src: url("/site/phil-story.woff2") format("woff2"); font-weight: 200 1000; font-display: swap; }

:root {
  color-scheme: light;
  --night: #161b3e; --night-deep: #0f1330; --night-ink: #ffe7a1; --night-muted: #c9c6dd; --star: #fff0ad;
  --gold: #ffc33a; --gold-deep: #f39605; --on-gold: #2b2a26;
  --paper: #fff8ea; --surface: #ffffff; --soft: #ede5d6; --ink: #2b2a26; --muted: #5f584b; --link: #765000;
  --leaf: #daedca; --leaf-ink: #304c28;
  --card-shadow: 0 6px 18px #76500014, 0 2px 4px #7650000d;
  --radius: 24px;
  --gutter: clamp(16px, 4vw, 40px);
  --measure: 1180px;
}
@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; --paper: #1d1e1e; --surface: #2a2c2c; --soft: #3a3b36; --ink: #fff1ca; --muted: #cbc6b5; --link: #ffd36b; --leaf: #2d3d25; --leaf-ink: #e0edcf; --card-shadow: 0 4px 0 #111212; }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--night); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 18px/1.6 "Phil Story", ui-rounded, "Trebuchet MS", system-ui, sans-serif; overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-underline-offset: .18em; text-decoration-thickness: .08em; }
a:hover { text-decoration-thickness: .14em; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 8px; }
h1, h2, h3 { line-height: 1.12; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
h1 { font-weight: 900; font-size: clamp(2.5rem, 7vw, 4.6rem); letter-spacing: -.045em; }
h2 { font-weight: 850; font-size: clamp(1.8rem, 4.4vw, 2.7rem); letter-spacing: -.035em; }
h3 { font-weight: 800; font-size: 1.25rem; }
p { margin: 0; text-wrap: pretty; }
.wrap { width: 100%; max-width: var(--measure); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 20; padding: 10px 16px; border-radius: 12px; background: var(--gold); color: var(--on-gold); font-weight: 800; }
.skip:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Header: the name, five shelves and the one way in. */
.top { position: absolute; inset: 0 0 auto; z-index: 5; color: var(--night-ink); }
.top .wrap { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; padding-top: max(14px, env(safe-area-inset-top)); padding-bottom: 14px; }
.brand { display: inline-flex; align-items: center; gap: 8px; color: var(--night-ink); text-decoration: none; font-weight: 900; font-size: 1.45rem; letter-spacing: -.03em; }
.brand img { width: 44px; height: 44px; margin: -6px -2px -6px -6px; }
.nav { display: flex; flex-wrap: wrap; gap: 2px 4px; margin-left: auto; font-size: 1rem; }
.nav a { color: var(--night-ink); text-decoration: none; padding: 8px 12px; border-radius: 999px; font-weight: 700; }
.nav a:hover, .nav a[aria-current="page"] { background: #ffffff1c; }
.nav a[aria-current="page"] { box-shadow: inset 0 0 0 2px #ffe7a155; }
@media (max-width: 760px) {
  .top .wrap { gap: 6px 12px; }
  .nav { order: 3; width: calc(100% + 2 * var(--gutter)); margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 2px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav { padding-right: 48px; mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
  .nav a { flex: none; background: #0f1330b8; box-shadow: inset 0 0 0 1px #ffe7a126; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .top .button { margin-left: auto; }
}

.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 12px 24px; border-radius: 18px; background: var(--gold); color: var(--on-gold); font-weight: 850; font-size: 1.08rem; text-decoration: none; border: 0; cursor: pointer; box-shadow: 0 4px 0 #b37a00; transition: transform .16s cubic-bezier(.2, .8, .2, 1), box-shadow .16s; touch-action: manipulation; font-family: inherit; }
.button:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #b37a00; }
.button:active { transform: translateY(3px); box-shadow: 0 1px 0 #b37a00; }
.button.small { min-height: 44px; padding: 8px 16px; font-size: .98rem; border-radius: 14px; box-shadow: 0 3px 0 #b37a00; }
.button.quiet { background: transparent; color: var(--night-ink); box-shadow: inset 0 0 0 2px #ffe7a180; }
.button.quiet:hover { background: #ffffff14; }

/* The night sky the app opens on, with Lil' Phil floating in it. */
.sky { position: relative; isolation: isolate; color: var(--night-ink); background: var(--night) url("/site/night-wide.webp") center top / cover no-repeat; padding: clamp(150px, 20vw, 190px) 0 clamp(64px, 9vw, 112px); overflow: hidden; }
.sky::after { content: ""; position: absolute; inset: auto 0 0; height: 90px; background: linear-gradient(transparent, #161b3e99); z-index: -1; }
@media (max-width: 700px) { .sky { background-image: url("/site/night-tall.webp"); background-position: center 30%; } }
.hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: center; gap: clamp(16px, 4vw, 56px); }
.hero.solo { grid-template-columns: minmax(0, 1fr); text-align: center; justify-items: center; }
.hero h1 { color: var(--night-ink); text-shadow: 0 2px 24px #0f133099; }
.lede { margin-top: 18px; max-width: 38rem; font-size: clamp(1.1rem, 2.2vw, 1.3rem); color: #f4efe0; text-shadow: 0 1px 2px #0f1330, 0 0 18px #0f1330cc; }
.hero.solo .lede { margin-inline: auto; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero.solo .actions { justify-content: center; }
.promise-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; font-size: .95rem; font-weight: 700; }
.promise-chips li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 10px; border-radius: 999px; background: #ffffff17; color: var(--night-ink); }
.promise-chips li::before { content: ""; width: 14px; height: 14px; background: var(--gold); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }

.phil { position: relative; width: min(100%, 340px); aspect-ratio: 1; margin-inline: auto; border: 0; padding: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.phil img { width: 100%; height: 100%; animation: float 5.5s ease-in-out infinite; transform-origin: 50% 85%; filter: drop-shadow(0 18px 40px #ffb90040); }
.phil.boop img { animation: boop .62s cubic-bezier(.3, 1.6, .5, 1); }
.phil-say { position: absolute; left: 50%; top: -4px; translate: -50% 0; padding: 8px 14px; border-radius: 16px 16px 16px 4px; background: var(--paper); color: var(--ink); font-weight: 800; font-size: 1rem; white-space: nowrap; box-shadow: 0 6px 18px #0004; opacity: 0; transform: translateY(8px) scale(.9); transition: opacity .2s, transform .28s cubic-bezier(.3, 1.4, .5, 1); pointer-events: none; }
.phil.boop .phil-say, .phil:hover .phil-say { opacity: 1; transform: none; }
.hero.solo .phil { width: 150px; margin-bottom: 4px; }
.hero.solo .phil-say { display: none; }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-14px) rotate(1.5deg); } }
@keyframes boop { 0% { transform: scale(1); } 30% { transform: scale(1.12, .86) translateY(10px); } 60% { transform: scale(.94, 1.1) translateY(-26px); } 100% { transform: scale(1); } }
.twinkle { position: absolute; z-index: -1; width: 18px; aspect-ratio: 1; background: var(--star); clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); animation: twinkle 3.2s ease-in-out infinite; opacity: .8; }
@keyframes twinkle { 0%, 100% { transform: scale(.55) rotate(0); opacity: .35; } 50% { transform: scale(1) rotate(20deg); opacity: 1; } }
@media (max-width: 760px) {
  .hero { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .hero .phil { width: 190px; grid-row: 1; margin-bottom: -10px; }
  .hero .lede { margin-inline: auto; }
  .hero .actions, .hero .promise-chips { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .phil img, .twinkle, .phil.boop img { animation: none; } }

.crumbs { margin: 0 0 18px; font-size: .95rem; font-weight: 700; }
.crumbs ol { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px; margin: 0; padding: 0; list-style: none; }
.crumbs li + li::before { content: "›"; margin-right: 8px; opacity: .7; }
.crumbs a { color: var(--night-ink); }

/* Paper sections. */
.section { padding: clamp(56px, 8vw, 104px) 0; }
.section + .section { padding-top: 0; }
.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 8px 24px; margin-bottom: 28px; }
.section-head p { max-width: 36rem; color: var(--muted); font-size: 1.08rem; }
.section-head .count { color: var(--muted); font-weight: 800; }
.kicker { display: block; margin-bottom: 8px; color: var(--link); font-weight: 850; font-size: .95rem; letter-spacing: .02em; }

/* Tiles: the app's own picture tiles, tilted a little as if just tipped out of a box. */
.grid { display: grid; gap: clamp(14px, 2vw, 22px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); margin: 0; padding: 0; list-style: none; }
.grid.books { grid-template-columns: repeat(auto-fill, minmax(min(46%, 168px), 1fr)); }
.card { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--soft); box-shadow: var(--card-shadow); color: var(--ink); text-decoration: none; transition: transform .22s cubic-bezier(.2, .8, .2, 1), box-shadow .22s; }
a.card:hover { transform: translateY(-4px) rotate(-.6deg); box-shadow: 0 14px 30px #7650001f, 0 3px 6px #7650000f; }
.grid > li:nth-child(even) a.card:hover { transform: translateY(-4px) rotate(.6deg); }
.card .art { position: relative; aspect-ratio: 3 / 2; background: var(--soft); overflow: hidden; }
.books .card .art { aspect-ratio: 2 / 3; }
.card .art img { width: 100%; height: 100%; object-fit: cover; }
.card .body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 18px; flex: 1; }
.card h3 { font-size: 1.12rem; }
.card p { color: var(--muted); font-size: .98rem; line-height: 1.45; }
.books .card .body { padding: 10px 12px 14px; }
.books .card h3 { font-size: 1rem; }
.books .card p { font-size: .9rem; }
.meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px; }
.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--leaf); color: var(--leaf-ink); font-weight: 800; font-size: .82rem; }
.pill.gold { background: #ffe9a8; color: #5c3e00; }
@media (prefers-color-scheme: dark) { .pill.gold { background: #5c4710; color: #ffe7a1; } }
@media (prefers-reduced-motion: reduce) { .card, a.card:hover, .grid > li:nth-child(even) a.card:hover { transition: none; transform: none; } }

/* Shelves on the grown-ups page: a fan of real tiles per shelf. */
.shelves { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); margin: 0; padding: 0; list-style: none; }
.shelf { display: grid; grid-template-rows: auto 1fr; height: 100%; padding: 18px 18px 22px; border-radius: 28px; background: var(--surface); border: 1px solid var(--soft); box-shadow: var(--card-shadow); color: var(--ink); text-decoration: none; transition: transform .22s cubic-bezier(.2, .8, .2, 1); }
a.shelf:hover { transform: translateY(-4px); }
.fan { position: relative; aspect-ratio: 2.3; margin-bottom: 14px; }
.fan img { position: absolute; top: 8%; width: 46%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 14px; border: 3px solid var(--surface); box-shadow: 0 6px 16px #0002; transition: transform .3s cubic-bezier(.3, 1.3, .5, 1); }
.fan.tall img { width: 27%; aspect-ratio: 2 / 3; top: 2%; }
.fan img:nth-child(1) { left: 2%; transform: rotate(-7deg); }
.fan img:nth-child(2) { left: 27%; z-index: 1; top: 0; transform: rotate(1deg); }
.fan img:nth-child(3) { left: 52%; transform: rotate(6deg); }
.fan.tall img:nth-child(2) { left: 36.5%; top: 0; }
.fan.tall img:nth-child(3) { left: 71%; }
a.shelf:hover .fan img:nth-child(1) { transform: rotate(-11deg) translateX(-6px); }
a.shelf:hover .fan img:nth-child(3) { transform: rotate(10deg) translateX(6px); }
.shelf strong { display: block; font-size: 2rem; font-weight: 900; letter-spacing: -.04em; line-height: 1; color: var(--link); }
.shelf h3 { margin: 6px 0 4px; font-size: 1.3rem; }
.shelf p { color: var(--muted); }
.shelf .go { margin-top: 10px; font-weight: 800; color: var(--link); }
@media (prefers-reduced-motion: reduce) { .shelf, .fan img { transition: none; } }

/* Steps and promises. */
.steps { counter-reset: step; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); margin: 0; padding: 0; list-style: none; }
.steps li { position: relative; padding: 64px 22px 24px; border-radius: 26px; background: var(--surface); border: 1px solid var(--soft); box-shadow: var(--card-shadow); }
.steps li::before { counter-increment: step; content: counter(step); position: absolute; left: 22px; top: 18px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--gold); color: var(--on-gold); font-weight: 900; font-size: 1.2rem; }
.steps h3 { margin-bottom: 6px; }
.steps p { color: var(--muted); }

.night { position: relative; isolation: isolate; color: var(--night-ink); background: radial-gradient(1200px 500px at 85% -10%, #3b2f7a66, transparent 60%), radial-gradient(900px 500px at 0% 110%, #2a3c8a55, transparent 60%), var(--night); padding: clamp(64px, 9vw, 112px) 0; }
.night h2 { color: var(--night-ink); }
.night .section-head p { color: var(--night-muted); }
.night a:not(.button) { color: var(--night-ink); }
.promises { display: grid; gap: 14px 28px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); margin: 0; padding: 0; list-style: none; }
.promises li { padding: 20px 0 0 46px; position: relative; border-top: 1px solid #ffe7a133; }
.promises li::before { content: ""; position: absolute; left: 2px; top: 22px; width: 26px; height: 26px; background: var(--gold); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.promises h3 { color: var(--night-ink); margin-bottom: 4px; }
.promises p { color: var(--night-muted); }

/* A wonder you can hear. */
.listen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: center; padding: clamp(18px, 3vw, 28px); border-radius: 32px; background: var(--surface); border: 1px solid var(--soft); box-shadow: var(--card-shadow); }
.listen .art { border-radius: 22px; overflow: hidden; aspect-ratio: 3 / 2; background: var(--soft); }
.listen .art img { width: 100%; height: 100%; object-fit: cover; }
.listen h3 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); letter-spacing: -.03em; margin: 4px 0 10px; }
.listen p { color: var(--muted); font-size: 1.08rem; }
@media (max-width: 760px) { .listen { grid-template-columns: minmax(0, 1fr); } }
.play { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; min-height: 48px; padding: 8px 18px 8px 10px; border: 0; border-radius: 999px; background: var(--gold); color: var(--on-gold); font: inherit; font-weight: 850; cursor: pointer; box-shadow: 0 3px 0 #b37a00; touch-action: manipulation; transition: transform .16s; }
.play:active { transform: translateY(2px); box-shadow: 0 1px 0 #b37a00; }
.play i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--on-gold); }
.play i::before { content: ""; width: 0; height: 0; margin-left: 3px; border-left: 11px solid var(--gold); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.play[aria-pressed="true"] i::before { width: 10px; height: 11px; margin: 0; border: 0; background: linear-gradient(90deg, var(--gold) 35%, transparent 35% 65%, var(--gold) 65%); }
.play[aria-pressed="true"] { animation: glow 1.4s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: 0 3px 0 #b37a00, 0 0 0 8px #ffc33a40; } }
@media (prefers-reduced-motion: reduce) { .play[aria-pressed="true"] { animation: none; } }
.spoken .word { transition: color .12s; }

/* A wonder's own page: each Why? one rung deeper. */
.wonder-art { margin: clamp(-72px, -6vw, -40px) auto 0; max-width: 900px; border-radius: 30px; overflow: hidden; box-shadow: 0 18px 50px #161b3e40; border: 6px solid var(--surface); aspect-ratio: 3 / 2; background: var(--soft); position: relative; z-index: 2; }
.wonder-art img { width: 100%; height: 100%; object-fit: cover; }
.ladder { max-width: 760px; margin: 0 auto; padding: 0; list-style: none; }
.rung { position: relative; padding: 28px 0 28px 64px; }
.rung::before { content: ""; position: absolute; left: 21px; top: 0; bottom: 0; width: 4px; border-radius: 4px; background: repeating-linear-gradient(var(--gold) 0 10px, transparent 10px 18px); opacity: .55; }
.rung:first-child::before { top: 40px; }
.rung:last-child::before { bottom: auto; height: 40px; }
.rung .step { position: absolute; left: 0; top: 26px; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--gold); color: var(--on-gold); font-weight: 900; box-shadow: 0 3px 0 #b37a00; }
.rung h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin-bottom: 8px; }
.rung .says { font-size: clamp(1.12rem, 2.2vw, 1.3rem); line-height: 1.6; }
.rung .source { margin-top: 12px; color: var(--muted); font-size: .95rem; }
.rung .play { margin-top: 14px; }
.found { max-width: 760px; margin: 8px auto 0; padding: 20px 22px; border-radius: 24px; background: var(--leaf); color: var(--leaf-ink); font-weight: 700; display: flex; gap: 14px; align-items: center; }
.found img { width: 54px; height: 54px; flex: none; }

/* Questions and answers. */
.faq { max-width: 820px; }
.faq details { border-bottom: 1px solid var(--soft); }
.faq summary { display: flex; justify-content: space-between; gap: 16px; padding: 20px 4px; cursor: pointer; font-weight: 850; font-size: 1.15rem; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--soft); font-size: 1.3rem; line-height: 1; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 4px 22px; color: var(--muted); max-width: 44rem; }

/* Closing invitation and footer. */
.closing { text-align: center; }
.closing h2 { margin: 10px 0 12px; }
.closing p { max-width: 34rem; margin: 0 auto; color: var(--night-muted); font-size: 1.1rem; }
.closing .actions { justify-content: center; }
.closing img { width: 110px; height: 110px; margin: 0 auto; animation: float 5.5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .closing img { animation: none; } }
.foot { background: var(--night-deep); color: var(--night-muted); padding: 40px 0 max(40px, env(safe-area-inset-bottom)); font-size: .98rem; }
.foot .wrap { display: grid; gap: 22px; grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr)); }
.foot a { color: var(--night-ink); }
.foot ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.foot h2 { font-size: 1rem; letter-spacing: 0; color: var(--night-ink); margin-bottom: 10px; }
.foot .brand { margin-bottom: 8px; }
@media (max-width: 700px) { .foot .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .foot .about { grid-column: 1 / -1; } }

/* The grown-ups' front page: a readable sky, and Lil' Phil as it looks on a tablet and phone. */
.sky.front::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #0f1330f2 0%, #0f1330d9 34%, #0f133080 58%, #0f133033 100%); }
.front .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.front h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); }
.hero-art { position: relative; padding: 24px 28px 56px 8px; }
.hero-art .phil { position: absolute; z-index: 3; width: 128px; left: -34px; top: -46px; margin: 0; }
.hero-art .phil-say { top: -18px; left: 110%; translate: 0 0; border-radius: 16px 16px 16px 4px; }
.showcase { position: relative; }
.tablet { position: relative; border-radius: 30px; padding: 12px; background: #0b0e24; box-shadow: 0 34px 70px #0009, inset 0 0 0 2px #ffffff26; transform: rotate(-2deg); }
.tablet .screen { aspect-ratio: 4 / 3; border-radius: 19px; overflow: hidden; padding: clamp(10px, 1.6vw, 18px); background: linear-gradient(#dceff8, #fff8ea 70%); }
.mini-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: #2b2a26; font-weight: 900; font-size: clamp(.95rem, 1.8vw, 1.35rem); }
.mini-head img { width: 34px; height: 34px; }
.mini-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(6px, 1vw, 10px); }
.mini-grid img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 12px; box-shadow: 0 3px 8px #0002; }
.phone { position: absolute; z-index: 2; right: -6px; bottom: -48px; width: 40%; border-radius: 26px; padding: 7px; background: #0b0e24; box-shadow: 0 26px 50px #000a, inset 0 0 0 2px #ffffff26; transform: rotate(5deg); }
.phone .screen { display: grid; gap: 6px; padding: 12px 8px 14px; border-radius: 20px; background: #fff8ea; color: #2b2a26; }
.phone-title { font-size: .85rem; padding: 0 4px 2px; }
.pick { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 7px; padding: 5px 6px; border-radius: 11px; background: #fff; box-shadow: 0 1px 3px #0000001a; }
.pick img { width: 34px; height: 24px; object-fit: cover; border-radius: 6px; }
.pick b { display: block; overflow: hidden; font-size: .68rem; line-height: 1.15; white-space: nowrap; text-overflow: ellipsis; }
.pick small { display: block; font-size: .6rem; line-height: 1.2; color: #686052; }
.toggle { position: relative; width: 26px; height: 15px; border-radius: 99px; background: #d7cfbf; }
.toggle::after { content: ""; position: absolute; left: 2px; top: 2px; width: 11px; height: 11px; border-radius: 50%; background: #fff; }
.toggle.on { background: #4f9a3c; }
.toggle.on::after { left: 13px; }
@media (max-width: 760px) {
  .sky.front::before { background: linear-gradient(180deg, #0f1330e6 0%, #0f1330cc 55%, #0f133099 100%); }
  .front .hero { grid-template-columns: minmax(0, 1fr); }
  .hero-art { grid-row: 2; margin-top: 28px; padding: 30px 18px 56px 0; }
  .hero-art .phil { width: 96px; left: -10px; top: -24px; }
  .phone { width: 46%; }
}

/* How it works: three steps, each with a picture of the screen it happens on. */
.flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 36px); margin: 0; padding: 0; list-style: none; }
.flow li { position: relative; }
.flow li:not(:last-child)::after { content: ""; position: absolute; top: 120px; right: calc(-1 * clamp(18px, 3vw, 36px)); width: clamp(18px, 3vw, 36px); height: 3px; background: repeating-linear-gradient(90deg, var(--gold) 0 6px, transparent 6px 11px); }
.visual { position: relative; display: grid; place-items: center; height: 240px; margin-bottom: 18px; overflow: hidden; border-radius: 28px; background: radial-gradient(260px 200px at 25% 15%, #4a3a9a88, transparent 70%), linear-gradient(160deg, #222a66, #161b3e); }
.step-no { display: inline-grid; place-items: center; width: 34px; height: 34px; margin-bottom: 10px; border-radius: 50%; background: var(--gold); color: var(--on-gold); font-weight: 900; }
.flow h3 { margin-bottom: 6px; font-size: 1.3rem; }
.flow p { color: var(--muted); }
.mock { color: #2b2a26; background: #fff8ea; box-shadow: 0 18px 40px #0008; }
.tablet-mock { display: grid; align-content: start; gap: 8px; width: 82%; aspect-ratio: 4 / 3; padding: 10px; border: 8px solid #0b0e24; border-radius: 18px; transform: rotate(-3deg); background: linear-gradient(#dceff8, #fff8ea 70%); }
.tablet-mock b { font-size: .9rem; }
.mock-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.mock-tiles span { position: relative; overflow: hidden; border-radius: 8px; }
.mock-tiles img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.mock-tiles .locked::after { content: ""; position: absolute; inset: 0; background: #2b2a2680 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M7 11V8a5 5 0 0 1 10 0v3M5 11h14v10H5z'/%3E%3C/svg%3E") center / 18px no-repeat; }
.phone-mock { display: grid; align-content: center; justify-items: center; gap: 10px; width: 120px; height: 210px; padding: 12px 10px; border: 7px solid #0b0e24; border-radius: 24px; transform: rotate(3deg); }
.phone-mock .qr { width: 82px; }
.phone-mock b { font-size: .75rem; }
.pin { display: flex; gap: 6px; }
.pin i { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); }
.phone-mock.picks { align-content: start; justify-items: stretch; gap: 6px; width: 170px; padding-top: 16px; }
.chip { padding: 5px 8px; border-radius: 99px; background: #ffe9a8; color: #5c3e00; font-size: .62rem; font-weight: 850; text-align: center; }
@media (max-width: 860px) {
  .flow { grid-template-columns: minmax(0, 1fr); }
  .flow li:not(:last-child)::after { display: none; }
}

/* Run by you: the features a grown-up controls, the biggest first. */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; margin-bottom: 44px; }
.feature { grid-column: span 2; display: flex; flex-direction: column; gap: 8px; padding: 24px; overflow: hidden; border-radius: 28px; background: #ffffff0d; border: 1px solid #ffe7a124; }
.feature.wide { grid-column: span 4; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: 24px; }
.feature h3 { color: var(--night-ink); font-size: 1.5rem; margin-bottom: 4px; }
.feature p { color: var(--night-muted); }
.feature .kicker { color: var(--gold); }
.feature-copy { display: grid; gap: 8px; }
.feature-art { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 20px; }
.feature-art img { width: 100%; height: 100%; object-fit: cover; }
.badge { position: absolute; left: 12px; bottom: 12px; padding: 6px 12px; border-radius: 99px; background: #161b3ed9; color: var(--night-ink); font-weight: 800; font-size: .85rem; }
.badge.two { left: auto; right: 12px; top: 12px; bottom: auto; background: var(--gold); color: var(--on-gold); }
.meters { display: grid; gap: 12px; margin-top: auto; padding-top: 12px; }
.meters div { display: grid; gap: 5px; color: var(--night-ink); font-weight: 800; font-size: .85rem; }
.meters i { position: relative; height: 10px; overflow: hidden; border-radius: 99px; background: #ffffff1c; }
.meters i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--fill); border-radius: inherit; background: linear-gradient(90deg, var(--gold), #ffe27a); }
.bubbles { display: grid; gap: 8px; margin-top: auto; padding-top: 12px; }
.bubble { justify-self: start; padding: 8px 14px; border-radius: 18px 18px 18px 4px; background: #fff8ea; color: #2b2a26; font-weight: 800; font-size: .92rem; }
.bubble.reply { justify-self: end; display: flex; align-items: center; gap: 6px; border-radius: 18px 18px 4px 18px; background: var(--gold); }
.bubble.reply svg { width: 24px; height: 24px; }
.friend-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.friend-row img { width: calc(25% - 8px); height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 4px solid var(--night); box-shadow: 0 6px 16px #0006; transition: transform .25s cubic-bezier(.3, 1.4, .5, 1); }
.friend-row img:hover { transform: translateY(-6px) rotate(-4deg); }
.also { margin-top: 30px; color: var(--night-muted); }
@media (max-width: 900px) {
  .bento { grid-template-columns: minmax(0, 1fr); }
  .feature, .feature.wide { grid-column: auto; grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .friend-row img { transition: none; } }

/* Activities: ideas Lil' Phil carries, shaped like the speech bubbles they arrive in. */
.ideas-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.ideas-board > div { padding: 22px; border-radius: 28px; background: var(--surface); border: 1px solid var(--soft); box-shadow: var(--card-shadow); }
.ideas { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.idea { padding: 10px 16px; border-radius: 18px 18px 18px 4px; background: #ffe9a8; color: #5c3e00; font-weight: 800; }
.idea.hunt { background: var(--leaf); color: var(--leaf-ink); }
a.pill { text-decoration: none; }
@media (max-width: 760px) { .ideas-board { grid-template-columns: minmax(0, 1fr); } }

/* Inner pages: a soft pool of night behind the headline so it reads over the stars. */
.sky:not(.front)::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 58% 62% at 50% 64%, #0f1330e0 0%, #0f13309c 55%, #0f133000 88%); }
.sky:not(.front) { padding-bottom: clamp(48px, 6vw, 84px); }
@media (max-width: 760px) {
  .sky:not(.front)::before { background: linear-gradient(180deg, #0f133059 0%, #0f1330c7 38%, #0f1330eb 100%); }
  .hero.solo .phil { width: 116px; }
}

/* Compact grids: two across on a phone, so long lists stay a short scroll. */
@media (max-width: 560px) {
  .grid.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .grid.compact .card { border-radius: 18px; }
  .grid.compact .card .body { gap: 4px; padding: 10px 12px 12px; }
  .grid.compact .card h3 { font-size: .98rem; }
  .grid.compact .card p { font-size: .86rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .grid.compact .pill { font-size: .74rem; }
  .grid.compact .pill.who { display: none; }
}

/* Stories: a bar to jump between shelves, a pick per shelf and a row of covers to scroll. */
.shelf-nav { position: sticky; top: 0; z-index: 4; background: color-mix(in srgb, var(--paper) 88%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--soft); }
.shelf-nav ul { display: flex; gap: 8px; margin: 0 calc(-1 * var(--gutter)); padding: 12px 56px 12px var(--gutter); list-style: none; overflow-x: auto; scrollbar-width: none; mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); }
.shelf-nav ul::-webkit-scrollbar { display: none; }
.shelf-nav a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--soft); color: var(--ink); font-weight: 800; font-size: .95rem; text-decoration: none; white-space: nowrap; transition: background .2s, color .2s; }
.shelf-nav a span { color: var(--muted); font-weight: 700; font-size: .85rem; }
.shelf-nav a[aria-current] { background: var(--night); border-color: var(--night); color: var(--night-ink); }
.shelf-nav a[aria-current] span { color: var(--night-muted); }
.shelf-section { scroll-margin-top: 64px; }
.shelf-nav + .shelf-section { padding-top: clamp(40px, 6vw, 72px); }
.shelf-row { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: clamp(18px, 2.4vw, 28px); align-items: start; }
.spotlight { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; align-items: center; padding: 20px; border-radius: var(--radius); background: var(--night) url("/site/night-wide.webp") center / cover; box-shadow: var(--card-shadow); color: var(--night-ink); isolation: isolate; position: relative; overflow: hidden; }
.spotlight::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #0f1330c4; }
.spotlight .cover { aspect-ratio: 2 / 3; overflow: hidden; border-radius: 14px; box-shadow: 0 12px 26px #0008; transform: rotate(-2.5deg); }
.spotlight .cover img { width: 100%; height: 100%; object-fit: cover; }
.spot-copy { display: flex; flex-direction: column; align-items: start; gap: 8px; }
.spot-copy .tag { color: var(--gold); font-weight: 850; font-size: .85rem; letter-spacing: .02em; }
.spot-copy h3 { color: var(--night-ink); font-size: 1.35rem; }
.spot-copy p { color: #e6e2f1; font-size: .98rem; line-height: 1.5; }
.rail { position: relative; min-width: 0; }
.rail ul { display: grid; grid-auto-flow: column; grid-auto-columns: 164px; gap: 18px; margin: 0; padding: 4px 4px 16px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 4px; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--soft) transparent; }
.rail li { display: flex; flex-direction: column; gap: 4px; scroll-snap-align: start; }
.rail .cover { position: relative; aspect-ratio: 2 / 3; margin-bottom: 6px; overflow: hidden; border-radius: 16px; background: var(--soft); box-shadow: var(--card-shadow); }
.rail .cover img { width: 100%; height: 100%; object-fit: cover; }
.rail .age { position: absolute; left: 8px; bottom: 8px; padding: 3px 9px; border-radius: 99px; background: #161b3ee6; color: var(--night-ink); font-weight: 800; font-size: .78rem; }
.rail h3 { font-size: 1rem; }
.rail p { color: var(--muted); font-size: .88rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.rail-btn { position: absolute; top: 127px; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; translate: 0 -50%; border: 0; border-radius: 50%; background: var(--surface); color: var(--ink); box-shadow: 0 6px 18px #0003; font: 900 1.6rem/1 inherit; cursor: pointer; transition: opacity .2s, transform .16s; }
.rail-btn:hover { transform: scale(1.06); }
.rail-btn.prev { left: -12px; }
.rail-btn.next { right: -12px; }
.rail[data-start] .prev, .rail[data-end] .next { opacity: 0; pointer-events: none; }
@media (hover: none) { .rail-btn { display: none; } }
@media (max-width: 980px) { .shelf-row { grid-template-columns: minmax(0, 1fr); } .spotlight { max-width: 620px; } }
@media (max-width: 560px) {
  .spotlight { grid-template-columns: 108px minmax(0, 1fr); gap: 16px; padding: 16px; }
  .spot-copy h3 { font-size: 1.15rem; }
  .spot-copy p { font-size: .92rem; }
  .rail p { display: none; }
  .rail ul { grid-auto-columns: 132px; gap: 12px; margin: 0 calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
}
@media (prefers-reduced-motion: reduce) { .shelf-nav a, .rail-btn { transition: none; } }

/* Peek: a fan of the page's own pictures under an inner headline. */
.peek { display: flex; justify-content: center; align-items: flex-start; margin-top: clamp(26px, 4vw, 40px); }
.peek img { width: clamp(120px, 15vw, 196px); aspect-ratio: 3 / 2; margin-inline: -10px; object-fit: cover; border-radius: 16px; border: 3px solid var(--paper); box-shadow: 0 14px 30px #0009; background: var(--soft); }
.peek.tall img { width: clamp(84px, 9.5vw, 124px); aspect-ratio: 2 / 3; margin-inline: -6px; }
.peek img:nth-child(1) { transform: rotate(-8deg) translateY(16px); }
.peek img:nth-child(2) { transform: rotate(-4deg) translateY(5px); z-index: 1; }
.peek img:nth-child(3) { transform: translateY(-4px); z-index: 2; }
.peek img:nth-child(4) { transform: rotate(4deg) translateY(5px); z-index: 1; }
.peek img:nth-child(5) { transform: rotate(8deg) translateY(16px); }
@media (max-width: 560px) {
  .peek img { width: 36vw; }
  .peek.tall img { width: 27vw; }
  .peek img:nth-child(1), .peek img:nth-child(5) { display: none; }
}

/* Grown-ups shelves on a phone: two across, the fan and the name, the whole card a link. */
@media (max-width: 560px) {
  .shelves { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .shelf { padding: 12px 12px 14px; border-radius: 20px; }
  .fan { margin-bottom: 10px; }
  .fan img { border-width: 2px; border-radius: 9px; }
  .shelf strong { font-size: 1.5rem; }
  .shelf h3 { margin: 4px 0 0; font-size: 1rem; }
  .shelf p { display: none; }
}
/* Inner heroes sit tighter on wide screens so the peek shows above the fold. */
@media (min-width: 761px) {
  .sky:not(.front) { padding-top: clamp(112px, 11vw, 132px); }
  .hero.solo .phil { width: 112px; margin-bottom: 0; }
  .hero.solo .lede { margin-top: 14px; }
}
.hero.solo { row-gap: 0; }
.hero.solo .kicker { margin: 10px 0 8px; }
.hero.solo .crumbs { margin-bottom: 10px; }

/* A phone's first screen: say it, show the screen it opens on, then the promises. */
@media (max-width: 760px) {
  .sky { padding-top: 124px; }
  .front .hero { display: flex; flex-direction: column; align-items: center; }
  .front .hero-copy { display: contents; }
  .front h1 { order: 1; font-size: clamp(2.3rem, 11vw, 2.8rem); }
  .front .lede { order: 2; margin-top: 12px; font-size: 1.1rem; }
  .front .lede .more { display: none; }
  .front .actions { order: 3; flex-wrap: nowrap; width: 100%; margin-top: 18px; gap: 10px; }
  .front .actions .button { flex: 1 1 0; padding-inline: 12px; font-size: 1rem; white-space: nowrap; }
  .front .hero-art { order: 4; width: 100%; margin-top: 18px; padding: 34px 14px 44px 0; }
  .front .promise-chips { order: 5; margin-top: 0; }
  .sky:not(.front) { padding-bottom: 40px; }
  .hero.solo .phil { width: 84px; }
  .hero.solo .kicker { margin-top: 6px; }
  .hero.solo .lede { margin-top: 12px; font-size: 1.04rem; line-height: 1.5; }
  .hero.solo .crumbs { margin-bottom: 4px; }
}
@media (max-width: 560px) {
  .peek img { width: 34vw; }
  .peek.tall img { width: 28vw; }
}

/* Coming soon: learning games grouped by stage, each tile marked so nothing looks playable yet. */
.soon-group + .soon-group { margin-top: clamp(32px, 5vw, 52px); }
.soon-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-bottom: 16px; }
.soon-head h3 { font-size: clamp(1.3rem, 3vw, 1.6rem); }
.soon-head p { color: var(--muted); }
.soon-tag { position: absolute; right: 10px; bottom: 10px; padding: 3px 11px; border-radius: 99px; background: #161b3ee6; color: var(--night-ink); font-weight: 800; font-size: .78rem; }
.card.soon .art img { filter: saturate(.85); }
@media (max-width: 560px) { .soon-tag { right: 6px; bottom: 6px; padding: 2px 9px; font-size: .7rem; } }

/* Grown-ups on a phone: the header already opens Lil' Phil, so the hero keeps three promises on one row. */
@media (max-width: 760px) {
  .front .actions { display: none; }
  .front .promise-chips { flex-wrap: nowrap; justify-content: center; gap: 6px; font-size: .84rem; }
  .front .promise-chips li { padding: 5px 10px 5px 8px; white-space: nowrap; }
}
@media (max-width: 380px) {
  .front .promise-chips { gap: 4px; font-size: .76rem; }
  .front .promise-chips li { gap: 4px; padding: 4px 8px 4px 6px; }
  .front .promise-chips li::before { width: 11px; height: 11px; }
}