@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("fonts/fredoka-normal-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Self-hosted from Google Fonts (SIL Open Font License). Latin subset covers English and Spanish. */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/bricolage-grotesque-normal-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/literata-italic-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/literata-normal-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------------
   Two looks on one site.
   The studio (header, footer, Home, About, Press, Contact): flat and clean,
   warm off-white, ink and one yellow; Fredoka headings like the logo.
   The game (Four Four Nine page, and the window into it on Home):
   made of the same paper as the game.
   Sections are layers of card with wavy top edges; each throws a
   shadow on the layer behind it. Light comes from the top left.
   Motion is stepped (stop-motion), never eased; none at all with
   prefers-reduced-motion.
   ------------------------------------------------------------------ */
:root{
  /* studio */
  --s-ground:#F4F1EA; --s-ink:#24201E; --s-soft:#5B554F; --s-line:#DCD5C7; --s-panel:#EAE4D8; --s-yellow:#F5C21B;
  --round:"Fredoka", "Trebuchet MS", sans-serif;
  /* palette from the game (BodyArt.cs); placeholder art colours until the final art */
  --paper:#FFFAF0; --card:#E9D8BD; --ink:#3B2A2E; --ink-soft:#6E5A55;
  --carb:#F4C12F; --protein:#E0574D; --fat:#F8E2A6;
  --heart:#B83A30; --brain:#EE93AA; --stomach:#E58096; --gut:#F1B0A3;
  --floor:#4A2A33; --deep:#2E1A20; --p1:#2F7286; --p2:#F08A6E;
  --display:"Bricolage Grotesque", "Arial Black", sans-serif;
  --text:"Literata", Georgia, serif;
  --lift:5px 7px 0 rgb(46 26 32/.16), 10px 14px 18px rgb(46 26 32/.24);
  --lift-up:8px 12px 0 rgb(46 26 32/.14), 16px 24px 28px rgb(46 26 32/.28);
  --lift-dark:5px 7px 0 rgb(0 0 0/.25), 10px 14px 18px rgb(0 0 0/.4);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .23 0 0 0 0 .16 0 0 0 0 .18 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --steps:.3s steps(3,end);
}
*{box-sizing:border-box}
html{color-scheme:light;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--s-ground);color:var(--s-ink);font:400 1.125rem/1.6 var(--text);overflow-x:hidden}
[data-lang="en"] [lang="es"], [data-lang="es"] [lang="en"]{display:none!important}
h1,h2,h3{font-family:var(--display);line-height:.98;margin:0;letter-spacing:-.02em;text-wrap:balance}
p{margin:0}
a{color:inherit}
img,video{max-width:100%;display:block}
:focus-visible{outline:3px solid currentColor;outline-offset:4px}
.wrap{max-width:74rem;margin:0 auto;padding-inline:max(1.1rem,env(safe-area-inset-left))}
.skip{position:absolute;left:1rem;top:-4rem;background:var(--paper);color:var(--ink);padding:.6rem 1rem;z-index:10;font:700 1rem var(--display)}
.skip:focus{top:1rem}
.ph{opacity:.6}

/* ---------- a layer of card ---------- */
.layer{position:relative;background:var(--bg) var(--grain);color:var(--fg,var(--ink))}
.layer > .edge{position:absolute;left:0;right:0;bottom:calc(100% - 1px);height:clamp(18px,3.5vw,42px);width:100%;
  color:var(--bg);filter:drop-shadow(5px -6px 7px rgb(20 8 12/.35));clip-path:inset(-80px -80px 0 -80px);pointer-events:none}
.layer > .edge use{fill:currentColor}
.l-floor{--bg:var(--floor);--fg:var(--paper)}
.l-stomach{--bg:var(--stomach)}
.l-gut{--bg:var(--gut)}
.l-brain{--bg:var(--brain)}
.l-paper{--bg:var(--paper)}
.l-card{--bg:var(--card)}
.l-carb{--bg:var(--carb)}
.l-deep{--bg:var(--deep);--fg:var(--paper)}
.thin{padding-top:1.4rem}
@media (min-width:56rem){.thin{padding-top:2.2rem}}

/* ---------- studio header ---------- */
.site-top{background:var(--s-ground);color:var(--s-ink);border-bottom:1px solid var(--s-line)}
body.game .site-top{border-bottom:0}
body.game .top{padding-bottom:2rem}
.top{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.6rem 1rem;padding-block:.9rem 1rem}
/* studio logo (placeholder): "kicoke" + yellow dot, "studio" under it; on light ground the dot gets an ink ring */
.mark{display:inline-flex;flex-direction:column;align-items:flex-start;gap:.1rem;font-family:var(--round);text-decoration:none;justify-self:start;padding:.3rem 0;color:inherit}
.mk-w{display:flex;align-items:flex-end;gap:.12em;font-size:2.1rem;font-weight:600;line-height:.85;letter-spacing:-.02em}
.mk-dot{display:block;width:.26em;height:.26em;border-radius:50%;background:var(--s-yellow);margin-bottom:.09em;box-shadow:0 0 0 .055em var(--s-ink)}
.mk-s{font-size:.7rem;font-weight:500;letter-spacing:.32em;padding-left:.12em}
.mark.small .mk-w{font-size:1.4rem}.mark.small .mk-s{font-size:.6rem}
.site-foot .mk-dot{box-shadow:none}
.top nav{grid-column:1/-1}
.lang{grid-row:1;grid-column:2;display:flex;gap:2px}
.menu{display:flex;flex-wrap:wrap;gap:.2rem 1.3rem;margin:0;padding:0;list-style:none}
.menu a{display:block;text-decoration:none;font:500 1.05rem/1 var(--round);padding:.7rem 0 .55rem;border-bottom:4px solid transparent}
.menu a:hover{border-bottom-color:var(--s-ink)}
.menu a[aria-current="page"]{border-bottom-color:var(--s-yellow);font-weight:600}
.lang button{font:600 .95rem var(--round);border:0;background:transparent;color:var(--s-ink);padding:.45rem .6rem;cursor:pointer;min-width:44px;min-height:44px;border-radius:8px}
.lang button[aria-pressed="true"]{background:var(--s-yellow)}
@media (min-width:52rem){
  .top{grid-template-columns:auto 1fr auto;gap:1rem 2rem;padding-block:1.1rem}
  .top nav{grid-column:auto}
  .lang{grid-row:auto;grid-column:auto}
  .menu{justify-content:flex-end;flex-wrap:nowrap;gap:1.8rem}
}

/* ---------- the front sheet (page opening) ---------- */
.front{--bg:var(--paper);padding-block:1.6rem 3rem}
.front .wrap{display:grid;gap:2rem}
.front h1{font-size:clamp(3rem,15vw,8.5rem);font-weight:800;max-width:7ch}
.lede{font-size:1.25rem;max-width:26rem;margin-top:1.2rem}
.clipbox{position:relative;z-index:3;transform:rotate(1.8deg)}
.clip{aspect-ratio:16/9;background:var(--card);margin:0;border:10px solid var(--paper);
  box-shadow:7px 9px 0 rgb(46 26 32/.18), 16px 22px 28px rgb(46 26 32/.30)}
.clip video{width:100%;height:100%;object-fit:cover}
.placeholder{display:grid;place-items:center;text-align:center;padding:1rem;color:var(--ink-soft);font-size:1rem;background:var(--card)}
.placeholder strong{display:block;color:var(--ink);font:700 1.3rem var(--display)}
.cta{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.wish{display:inline-block;background:var(--heart);color:var(--paper);font:700 1.2rem var(--display);text-decoration:none;padding:1rem 1.5rem;
  box-shadow:var(--lift);transition:transform var(--steps), box-shadow var(--steps)}
.wish:hover{transform:translate(-2px,-5px) rotate(-1.2deg);box-shadow:var(--lift-up)}
.status{font-size:.95rem;color:var(--ink-soft)}
@media (min-width:56rem){
  .front .wrap{grid-template-columns:1fr 1.25fr;align-items:start}
  .front h1{font-size:clamp(5rem,9vw,8rem);max-width:5ch}
  .clipbox{margin-top:-6rem;margin-right:-3rem;grid-row:span 2}
}

/* ---------- the 4 4 9 boxes (carb yellow, protein red, fat cream and big) ---------- */
.trio{display:flex;align-items:flex-end;gap:.9rem}
.bx{border-radius:12px;display:grid;place-items:center;font:800 2.4rem/1 var(--display);color:var(--ink);box-shadow:var(--lift-dark)}
.bx.c{width:4.8rem;height:4.8rem;background:var(--carb);transform:rotate(2deg)}
.bx.p{width:4.8rem;height:4.8rem;background:var(--protein);transform:rotate(-2.5deg)}
.bx.f{width:8.2rem;height:8.2rem;background:var(--fat);font-size:4.6rem;transform:rotate(1deg)}

/* ---------- a plain band of text ---------- */
.band{padding-block:3rem 4rem}
.band .wrap{display:grid;gap:2rem}
.band h2{font-size:clamp(2rem,7vw,3.6rem);font-weight:800;max-width:18ch}
.band p{font-size:1.2rem;max-width:34rem}
.band h2 + p{margin-top:1rem}
@media (min-width:56rem){.band .split{grid-template-columns:1fr auto;align-items:center}}

/* ---------- Four Four Nine page ---------- */
.learn-list{list-style:none;margin:0;padding:0;display:grid;gap:1.4rem;max-width:40rem}
.learn-list li{font:700 clamp(1.4rem,4.5vw,2rem)/1.1 var(--display)}
.learn-list li:nth-child(2){margin-left:clamp(0rem,6vw,4rem)}
.learn-list li:nth-child(3){margin-left:clamp(0rem,12vw,8rem)}

.modes{display:grid;gap:2.5rem}
.mode{display:grid;grid-template-columns:auto 1fr;gap:0 1.2rem;align-items:start}
.mode .num{font:800 clamp(5rem,20vw,8rem)/.8 var(--display);grid-row:span 2}
.mode h3{font-size:clamp(1.5rem,4.5vw,2rem);padding-top:.3rem}
.mode p{margin-top:.5rem;max-width:26rem}
.mode.two .num{color:var(--p1)}
.mode.one .num{color:var(--ink)}
@media (min-width:56rem){.modes{grid-template-columns:1fr 1fr}.mode.one{margin-top:4rem}}

.shots{display:grid;gap:1.4rem}
.shot{margin:0;aspect-ratio:16/9;border:8px solid var(--paper);box-shadow:var(--lift);transition:transform var(--steps), box-shadow var(--steps)}
.shot:nth-child(1){transform:rotate(-1.2deg)}
.shot:nth-child(2){transform:rotate(1.6deg)}
.shot:nth-child(3){transform:rotate(-.6deg)}
.shot:hover{transform:translate(-2px,-5px) rotate(-2deg);box-shadow:var(--lift-up)}
.shot img{width:100%;height:100%;object-fit:cover}
@media (min-width:56rem){
  .shots{grid-template-columns:1.6fr 1fr;align-items:start}
  .shot:nth-child(1){grid-row:span 2}
  .shot:nth-child(3){margin-left:-3rem;position:relative}
}

.facts{display:grid;grid-template-columns:auto 1fr;gap:.7rem 1.4rem;margin:0;max-width:40rem;font-size:1.1rem}
.facts dt{font:700 1.05rem/1.5 var(--display)}
.facts dd{margin:0}
.end .wrap{gap:2.2rem}

/* ---------- studio footer ---------- */
.site-foot{background:var(--s-ink);color:var(--s-ground);padding-block:2.5rem 3rem;font-size:1rem}
.site-foot .wrap{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:1.2rem}
.foot-id{display:flex;flex-direction:column;gap:.6rem}
.site-foot a{color:inherit}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ------------------------------------------------------------------
   studio pages
   ------------------------------------------------------------------ */
body:not(.game) h1, body:not(.game) h2, .s-sec h2{font-family:var(--round);font-weight:600;letter-spacing:-.01em;line-height:1.05}
.s-hero{padding-block:clamp(2.5rem,8vw,5.5rem) clamp(2rem,6vw,4rem)}
.s-hero h1{font-size:clamp(2.4rem,7.5vw,5rem);max-width:17ch}
.s-hero .lede{max-width:34rem;font-size:1.3rem}
.s-tall{min-height:55vh}
.s-label{font:600 1.05rem var(--round);margin-bottom:1rem}
.s-sec{border-top:1px solid var(--s-line);padding-block:clamp(2.5rem,6vw,4.5rem)}
.s-grid{display:grid;gap:1.2rem 3rem}
.s-sec h2{font-size:clamp(1.8rem,4.5vw,2.8rem);max-width:16ch}
.s-sec p{max-width:36rem;font-size:1.15rem}
.s-sec p + p, .s-sec p + figure, .s-sec figure + p{margin-top:1rem}
@media (min-width:56rem){.s-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);align-items:start}}
.s-quote, .s-sec .s-quote{font:600 clamp(1.4rem,4vw,2rem)/1.25 var(--round);margin-block:.2rem .8rem}
.s-quote mark{background:var(--s-yellow);color:var(--s-ink);padding:.05em .25em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.s-yellow{background:var(--s-yellow);border-top:0}
.s-yellow + .s-sec{border-top:0}
.s-photo{margin:1.6rem 0 0;aspect-ratio:4/3;max-width:34rem;border-radius:14px;background:var(--s-panel)}
.s-photo img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.s-photo.placeholder{background:var(--s-panel)}
.cares{list-style:none;margin:0;padding:0;display:grid;gap:1.6rem;max-width:40rem}
.cares li{font-size:1.15rem}
.cares strong{display:block;font:600 clamp(1.35rem,3.5vw,1.7rem)/1.15 var(--round);margin-bottom:.3rem}
.go, .see{font:600 1.2rem var(--round);text-decoration-color:var(--s-yellow);text-decoration-thickness:4px;text-underline-offset:.25em}
.go:hover, .see:hover{text-decoration-color:currentColor}
.s-links{display:flex;flex-wrap:wrap;gap:1rem 2rem}
.mail, .s-sec .mail{font:600 clamp(1.5rem,6vw,2.6rem)/1.15 var(--round);overflow-wrap:anywhere;margin-top:.6rem}
.mail a{color:inherit;text-decoration-color:var(--s-yellow);text-decoration-thickness:4px;text-underline-offset:.18em}
.mail a:hover{text-decoration-color:currentColor}

/* ---------- the window into the game (Home) ---------- */
.s-feature{padding-block:0 clamp(3rem,7vw,5rem)}
.portal{background:var(--floor) var(--grain);padding-top:1.6rem;border-radius:4px;overflow:hidden;box-shadow:0 1px 0 var(--s-line)}
.portal .layer.thin{padding-top:1.1rem}
.portal-body{padding:1.8rem clamp(1.1rem,4vw,3rem) 2.6rem}
.portal-grid{display:grid;gap:2rem}
.s-feature .portal h2{font:800 clamp(2.8rem,10vw,5.5rem)/.95 var(--display);letter-spacing:-.02em;max-width:6ch}
.portal .lede{margin-top:1rem}
.portal-more{margin-top:1rem;max-width:30rem}
.portal .cta{margin-top:1.6rem}
.portal .status{display:block;margin-top:1rem}
.portal .see{font-family:var(--display);font-weight:700;text-decoration-color:var(--carb)}
.portal .clipbox{transform:rotate(1.5deg);margin:0}
@media (min-width:56rem){
  .portal-grid{grid-template-columns:1fr 1.2fr;align-items:center}
}

/* ---------- press ---------- */
.s-facts{font-size:1.1rem}
.s-facts dt{font:600 1.05rem/1.5 var(--round)}
.s-facts a{color:inherit;text-decoration-color:var(--s-yellow);text-decoration-thickness:3px;text-underline-offset:.2em}
.dls{list-style:none;margin:1.8rem 0 0;padding:0;display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,8.5rem),1fr))}
.dl.placeholder{aspect-ratio:4/3;border-radius:14px;background:var(--s-panel)}
.dl.placeholder strong{font:600 1.2rem var(--round)}
.dl-all{margin-top:1.2rem}