/* Public welcome page dreamiko.com: vision, what you can do, one big button into the menu.
   Built in the console's own design, menu v2 "Kino" (docs/design/2026-10-18-menu-v2.md, console/menu/menu.css): a game's key art is the
   whole room (graded, out of focus, slow drift, soft light from the upper right), the shelf of key art tiles on top with the focus ring,
   the details big at the bottom left (Lexend 600 title, Lexend 300 second line), pill buttons with the filled milk one first.
   Same tokens and fonts as the console; the fonts are the console's own files (Caddy serves /fonts/ from console/menu/fonts,
   deploy/Caddyfile). Static: no script, no cookie, nothing from elsewhere, no inline style (CSP style-src 'self'; tests/site.test.js).
   No colour gradients, no gradient text, no accent bars, no centred hero. Reduced motion stops the drift and the entrance. */
@font-face { font-family: 'Unbounded'; src: url('/fonts/unbounded.woff2') format('woff2'); font-weight: 200 900; font-display: swap; }
@font-face { font-family: 'Lexend'; src: url('/fonts/lexend.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
:root {
  --ink: #07080c; --space: #101117; --milk: #f3ead8; --milk-2: rgba(243, 234, 216, .72); --milk-3: rgba(243, 234, 216, .46);
  --sun: #ffc76b; --accent: #ffc76b; --glass: rgba(30, 31, 36, .62);
  --font-brand: 'Unbounded', 'Avenir Next', 'Futura', sans-serif; --font-text: 'Lexend', 'Avenir Next', 'Futura', sans-serif;
  --out: cubic-bezier(.3, 0, .2, 1); --spring: cubic-bezier(.2, .9, .25, 1.12);
  --side: max(5vw, 20px);
}
* { box-sizing: border-box; }
html { background: var(--ink); color-scheme: dark; }
body { margin: 0; color: var(--milk); font: 300 18px/1.6 var(--font-text); -webkit-text-size-adjust: 100%; overflow-x: hidden; }
a { color: var(--milk); text-decoration-color: rgba(243, 234, 216, .4); text-underline-offset: .2em; }
a:hover, a:focus-visible { text-decoration-color: var(--milk); }
:focus-visible { outline: 3px solid var(--milk); outline-offset: 4px; border-radius: 4px; }
svg { width: 1em; height: 1em; flex: none; }

/* ---------- the stage: the room, the top bar, the shelf, the details ---------- */
.stage { position: relative; min-height: 100vh; min-height: 100svh; padding: 0 var(--side) clamp(36px, 7vh, 72px); display: flex; flex-direction: column; overflow: hidden; isolation: isolate; }
.room { position: absolute; inset: 0; z-index: -1; }
.room i { position: absolute; inset: 0; display: block; }
.room .art { inset: -6%; background: var(--ink) url('/img/crew.webp') center / cover no-repeat; filter: blur(14px) saturate(1.08) brightness(.62); transform: scale(1.04); animation: drift 38s ease-in-out infinite alternate; }
.room .light { background: radial-gradient(ellipse 50% 60% at 86% 4%, rgba(255, 232, 190, .22), transparent 70%); }
/* the darkening where the words sit (bottom left) and a vignette: light falling off, not a gradient between two hues */
.room .shade { background: radial-gradient(ellipse 85% 70% at 12% 100%, rgba(7, 8, 12, .86), rgba(7, 8, 12, .2) 70%, transparent), radial-gradient(ellipse 120% 90% at 50% 40%, transparent 55%, rgba(7, 8, 12, .7)); }
@keyframes drift { to { transform: scale(1.1) translate3d(-1.5%, 1%, 0); } }

.top { display: flex; align-items: center; gap: 16px; padding: clamp(20px, 3.4vh, 36px) 0 0; }
.brand { display: inline-flex; align-items: center; gap: 12px; margin-right: auto; font: 500 clamp(19px, 1.5vw, 24px)/1 var(--font-brand); color: var(--milk); text-decoration: none; }
.mark { width: .8em; height: .8em; background: var(--sun); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); filter: drop-shadow(0 0 .3em rgba(255, 199, 107, .6)); }
.top nav { display: flex; align-items: center; gap: 10px; }
.pill, .go { display: inline-flex; align-items: center; height: 44px; padding: 0 20px; border-radius: 999px; font-size: 16px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: transform 460ms var(--spring), background 180ms; }
.pill { background: var(--glass); color: var(--milk); }
.go { background: var(--milk); color: var(--ink); }
.pill:hover, .pill:focus-visible { background: rgba(243, 234, 216, .16); }
.go:hover, .go:focus-visible { transform: scale(1.06); }

/* the shelf: key art tiles as on the console; the first one has the focus (milk ring and a light), the others step back */
.shelf { list-style: none; margin: clamp(-20px, -1vh, 0px) calc(-1 * var(--side)) -40px; padding: 52px var(--side); display: flex; gap: clamp(12px, 1.4vw, 22px); overflow-x: auto; scrollbar-width: none; align-items: center; }
.shelf::-webkit-scrollbar { display: none; }
.shelf li { flex: none; width: clamp(150px, 15vw, 270px); }
.shelf li:first-child { width: clamp(220px, 23vw, 420px); }
.tile { position: relative; display: block; border-radius: 10px; transition: transform 640ms var(--spring); }
.tile img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: inherit; filter: brightness(.58); transition: filter 360ms var(--out); }
.tile::before { content: ''; position: absolute; inset: -7px; border-radius: 16px; box-shadow: 0 0 0 3px var(--milk), 0 0 46px 2px rgba(255, 199, 107, .4); opacity: 0; transform: scale(.985); transition: opacity 220ms var(--out), transform 520ms var(--spring); pointer-events: none; }
.tile.is-focus img, .tile:hover img, .tile:focus-visible img { filter: none; }
.tile.is-focus::before, .tile:hover::before, .tile:focus-visible::before { opacity: 1; transform: none; }
.tile:focus-visible { outline: none; }

.hero { margin-top: auto; padding-top: clamp(32px, 6vh, 64px); display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.hero > div { max-width: 1000px; }
.kicker { margin: 0; font-size: clamp(16px, 1.25vw, 21px); font-weight: 500; color: var(--sun); letter-spacing: .01em; }
h1 { margin: 12px 0 0; font: 600 clamp(46px, 6.4vw, 100px)/.98 var(--font-text); letter-spacing: -.04em; text-wrap: balance; }
h1 span { display: block; margin-top: .14em; font-weight: 300; font-size: .44em; letter-spacing: -.02em; color: rgba(243, 234, 216, .86); }
.lead { margin: 22px 0 0; max-width: 36em; font-size: clamp(18px, 1.45vw, 25px); line-height: 1.5; color: var(--milk-2); }
.actions { display: flex; flex-wrap: wrap; gap: 14px; margin: clamp(26px, 4vh, 38px) 0 0; }
.cta, .act { display: inline-flex; align-items: center; gap: 14px; height: clamp(58px, 6.6vh, 76px); padding: 0 clamp(28px, 2.4vw, 38px); border-radius: 999px; font-size: clamp(18px, 1.4vw, 24px); font-weight: 500; text-decoration: none; white-space: nowrap; transition: transform 460ms var(--spring), background 180ms, color 180ms, box-shadow 220ms var(--out); }
.cta { background: var(--milk); color: var(--ink); padding-left: clamp(24px, 2vw, 30px); }
.act { background: var(--glass); color: var(--milk); }
.cta:hover, .cta:focus-visible, .act:hover, .act:focus-visible { background: var(--milk); color: var(--ink); transform: scale(1.07); outline: none; box-shadow: 0 0 0 4px var(--ink), 0 0 0 7px var(--milk), 0 10px 56px rgba(255, 199, 107, .4); }
.note { margin: 18px 0 0; max-width: 40em; font-size: 15px; color: var(--milk-3); }
.facts { display: grid; grid-template-columns: max-content auto; gap: 8px 18px; margin: 0; align-items: baseline; flex: none; }
.facts dt { font-size: 14px; color: var(--milk-3); text-align: right; }
.facts dd { margin: 0; font-size: 16px; color: var(--milk-2); }

/* the details come in line by line: up on a spring with a short blur (as the console's #hero) */
.hero > div > *, .facts { animation: rise 760ms var(--spring) both; }
.hero > div > :nth-child(2) { animation-delay: 50ms; } .hero > div > :nth-child(3) { animation-delay: 100ms; }
.hero > div > :nth-child(4) { animation-delay: 150ms; } .hero > div > :nth-child(5), .facts { animation-delay: 200ms; }
@keyframes rise { from { opacity: 0; transform: translateY(22px); filter: blur(6px); } 45% { opacity: 1; filter: blur(0); } to { opacity: 1; transform: none; filter: blur(0); } }

/* ---------- below the stage: the same type, spacing instead of lines ---------- */
.wrap { padding-left: var(--side); padding-right: var(--side); }
main.wrap { max-width: 1400px; }
section { padding: clamp(64px, 11vh, 128px) 0 0; }
.kick { margin: 0 0 12px; font-size: clamp(15px, 1.1vw, 18px); font-weight: 500; color: var(--milk-2); }
h2 { margin: 0 0 26px; max-width: 24ch; font: 600 clamp(30px, 3.4vw, 54px)/1.06 var(--font-text); letter-spacing: -.035em; text-wrap: balance; }
h2.big { max-width: 26ch; font-size: clamp(30px, 3.6vw, 58px); }
section p { max-width: 62ch; font-size: clamp(18px, 1.3vw, 22px); color: var(--milk-2); margin: 0 0 18px; }
.mission { margin-top: 44px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); counter-reset: step; }
.steps li { counter-increment: step; color: var(--milk-2); }
.steps li::before { content: counter(step); display: block; margin-bottom: 14px; font: 200 clamp(56px, 5vw, 84px)/1 var(--font-text); color: var(--sun); }
.steps strong { display: block; margin-bottom: 8px; font-weight: 600; font-size: clamp(20px, 1.6vw, 26px); color: var(--milk); letter-spacing: -.01em; }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); }
.list { list-style: none; margin: 0; padding: 0; }
.list li { margin: 0 0 16px; font-size: clamp(17px, 1.2vw, 20px); color: var(--milk-2); }
.faq { margin: 0; max-width: 70ch; }
.faq dt { margin: 28px 0 6px; font-weight: 600; font-size: clamp(19px, 1.4vw, 23px); }
.faq dt:first-child { margin-top: 0; }
.faq dd { margin: 0; color: var(--milk-2); }
.last { padding-bottom: clamp(72px, 12vh, 128px); }
.last .actions { margin-top: 10px; }

footer.wrap { padding-top: 32px; padding-bottom: 48px; display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; font-size: 15px; color: var(--milk-3); }
footer nav { display: flex; flex-wrap: wrap; gap: 12px 24px; }
footer a { color: var(--milk-3); }

@media (max-width: 860px) {
  body { font-size: 17px; }
  .top .pill { display: none; }
  .go { height: 40px; padding: 0 16px; font-size: 15px; }
  .hero { flex-direction: column; align-items: flex-start; }
  .facts { display: none; }
  .steps, .two { grid-template-columns: 1fr; }
  .shelf li { width: 42vw; }
  .shelf li:first-child { width: 62vw; }
}
@media (prefers-reduced-motion: reduce) { .room .art, .hero > div > *, .facts { animation: none; } .tile, .tile::before, .go, .cta, .act { transition: none; } }
/* The visit count of this page (tools/site-stats.js): one tiny invisible picture from our own server (Caddy hands /hit to it), no script,
   no cookie. A visitor's browser keeps nothing; the server keeps only numbers per day. */
body::after { content: ''; position: absolute; width: 1px; height: 1px; bottom: 0; left: 0; background: url('/hit') no-repeat; pointer-events: none; }