/* Game pages and their documents, in the poster style of the home page */
:root{
  color-scheme:light;
  --bg:#ffffff;--ink:#10131a;--paper:#ffffff;
  --yellow:#ffd34d;--blue:#2457c5;--orange:#ff8a1f;--night:#141a3a;
  --display:"Unbounded",system-ui,sans-serif;
  --text:"Onest",system-ui,sans-serif;
  --step-small:0.875rem;
  --step-body:1.125rem;
  --step-lead:1.5rem;
  --step-head:clamp(1.5rem,5.6vw,5.5rem);
  --step-display:clamp(3rem,10vw,9.5rem);
  --m:24px;
  --ease-out:cubic-bezier(.16,1,.3,1);
}
.g-truck{--field:var(--blue);--on-field:var(--paper)}
.g-vet{--field:var(--orange);--on-field:var(--ink)}
.g-pumpkin{--field:var(--night);--on-field:var(--paper)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--step-body)/1.5 var(--text);overflow-x:hidden}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,figure{margin:0}
strong,b{font-weight:500}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.display{font:800 var(--step-display)/.9 var(--display);text-transform:uppercase;letter-spacing:-0.03em}
.head{font:800 var(--step-head)/1 var(--display);text-transform:uppercase;letter-spacing:-0.03em}
.lead{font:500 var(--step-lead)/1.25 var(--text)}

/* Bar */
.bar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px var(--m)}
.mark{font:800 var(--step-body)/1 var(--display);text-transform:uppercase;letter-spacing:-0.02em;text-decoration:none}
.bar nav{display:flex;gap:28px}
.bar nav a{font-weight:500;text-decoration:none}
.bar nav a:hover,.bar nav a[aria-current]{text-decoration:underline;text-underline-offset:4px}

/* The game in its colour field */
.folder-body{background:var(--field);color:var(--on-field);padding:28px var(--m) 64px;display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;row-gap:48px}
.folder-body h1{grid-column:1/-1}
.folder-body>figure{grid-column:1/8;overflow:hidden}
.folder-body>figure img,.folder-body>figure video{width:100%;aspect-ratio:2/1;object-fit:cover}
.about{grid-column:9/13;display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.stores{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.play img{height:56px;width:auto;transition:transform .2s var(--ease-out)}
.play:hover img{transform:translateY(-2px)}
.play:active img{transform:translateY(1px)}

/* A day in the game: frames step down like the hours */
.day{padding:140px var(--m) 160px}
.day h2{margin-bottom:56px}
.frames{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start}
.frames figure:nth-child(2){margin-top:72px}
.frames figure:nth-child(3){margin-top:144px}
.frames .pic{overflow:hidden}
.frames img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .9s var(--ease-out)}
.frames figure:hover img{transform:scale(1.03)}
.frames figcaption{margin-top:14px;font-weight:500;max-width:30ch}

/* Tap the friend: the game's own narrator line */
.field{background:var(--yellow);color:var(--ink);min-height:76svh;padding:28px var(--m);display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;grid-template-rows:auto 1fr auto}
.field>p{grid-column:1/6;grid-row:1;max-width:30ch;margin-top:20px}
.field>.display{grid-column:1/-1;grid-row:3;align-self:end}
.voice{grid-column:7/13;grid-row:1/3;align-self:center;display:flex;flex-direction:column;align-items:flex-end;gap:16px;padding:32px 0}
.said{display:inline-flex;align-items:center;gap:10px;background:var(--paper);font-weight:500;padding:12px 20px;border-radius:999px;min-height:48px}
.said svg{width:22px;height:22px;flex:none;color:var(--orange)}
.friend{display:block;width:clamp(160px,22vw,320px);transition:transform .25s var(--ease-out)}
.friend:hover{transform:translateY(-6px) rotate(-3deg)}
.friend:active{transform:scale(.94)}
.friend.is-talking{animation:hop .9s var(--ease-out)}
@keyframes hop{30%{transform:translateY(-18px) rotate(-4deg)}60%{transform:translateY(0) rotate(2deg)}}

/* For parents: the documents as big links */
.docs{padding:140px var(--m) 140px;display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;row-gap:32px}
.docs h2,.docs>p{grid-column:1/6}
.docs>p{max-width:34ch}
.doclinks{grid-column:7/13;grid-row:1/3;display:flex;flex-direction:column}
.doclinks a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;font:800 var(--step-lead)/1.1 var(--display);text-transform:uppercase;letter-spacing:-0.02em;text-decoration:none;transition:transform .25s var(--ease-out)}
.doclinks a::after{content:"→";font-family:var(--text);font-weight:500}
.doclinks a:hover{transform:translateX(10px)}

/* Document pages */
.band{background:var(--field);color:var(--on-field);padding:28px var(--m) 56px}
.band .lead{margin-top:28px}
.band .lead a{text-underline-offset:5px}
.prose{max-width:calc(44rem + 2 * var(--m));padding:64px var(--m) 140px;margin-left:max(0px,min(25%,100% - 47rem))}
.prose h2{font:500 var(--step-lead)/1.25 var(--text);margin-top:56px}
.prose h3{font:500 var(--step-body)/1.4 var(--text);margin-top:32px}
.prose p,.prose ul,.prose ol{margin-top:16px}
.prose h3+p{margin-top:6px}
.prose ul,.prose ol{padding-left:1.25rem}
.prose li+li{margin-top:6px}
.prose a{text-underline-offset:3px}
.prose a:hover{text-decoration-thickness:2px}
.prose .lead{margin-top:0}
.eff{font-size:var(--step-small)}
.embed .bar,.embed .band .lead,.embed .foot{display:none}
.embed .band{padding:16px var(--m)}
.embed .band h1{font-size:var(--step-lead)}
.embed .prose{margin-left:0;padding-top:24px;padding-bottom:48px}

/* Footer: write to us */
.foot{background:var(--ink);color:var(--paper);padding:56px var(--m) 28px}
.foot>p{font-size:var(--step-lead);line-height:1.3;max-width:24ch}
.mail{display:block;font:800 var(--step-head)/1 var(--display);letter-spacing:-0.03em;text-decoration:none;margin:48px 0 96px;transition:color .25s}
.mail span{display:block}
.mail:hover{color:var(--yellow)}
.corners{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:var(--step-small)}
.corners nav{display:flex;gap:20px;flex-wrap:wrap}
.corners a{text-decoration:none}
.corners a:hover{text-decoration:underline}

/* Motion */
.lines .line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.lines [data-line]{display:block}
@media (prefers-reduced-motion:no-preference){
  .js .lines [data-line]{transform:translateY(105%);animation:line-up 900ms var(--ease-out) forwards;animation-delay:calc(var(--i)*110ms + 150ms)}
  .js [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity 700ms var(--ease-out),transform 900ms var(--ease-out);transition-delay:calc(var(--d,0)*80ms)}
  .js [data-reveal].is-in{opacity:1;transform:none}
}
@keyframes line-up{to{transform:none}}

/* Phone */
@media (max-width:900px){
  :root{--m:16px;--step-display:10vw}
  .bar nav{display:none}
  .folder-body{display:flex;flex-direction:column;row-gap:28px;padding-bottom:48px}
  .day{padding:96px var(--m)}
  .frames{grid-template-columns:1fr;gap:40px}
  .frames figure:nth-child(n){margin-top:0}
  .field{display:flex;flex-direction:column;min-height:64svh;padding:20px var(--m)}
  .field>p{max-width:none;margin-top:0}
  .voice{align-self:stretch;align-items:flex-start;padding:32px 0 0}
  .friend{width:52vw}
  .field>.display{align-self:stretch;margin-top:auto;padding-top:48px}
  .docs{display:flex;flex-direction:column;padding:96px var(--m)}
  .doclinks{margin-top:8px}
  .prose{margin-left:0;padding-top:40px;padding-bottom:96px}
  .corners{flex-direction:column}
}