/* badmuffins site: shared chrome and type. Each page adds its own world on top. */
:root {
  --bg: #111111; --fg: #eceae4; --dim: color-mix(in srgb, var(--fg) 55%, transparent); --hair: color-mix(in srgb, var(--fg) 16%, transparent);
  --sans: 'Manrope', system-ui, sans-serif; --serif: 'Cormorant Garamond', Georgia, serif;
  --pad: clamp(24px, 8vw, 140px); --ease: cubic-bezier(.2, .8, .2, 1); --slow: cubic-bezier(.16, 1, .3, 1);
}
* { box-sizing: border-box; }
html { background: var(--bg); transition: background-color 1.1s ease; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; color: var(--fg); font: 16px/1.65 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: color 1.1s ease; }
a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; display: block; }
::selection { background: var(--fg); color: var(--bg); }
.skip { position: absolute; left: -999px; top: 10px; z-index: 100; background: var(--fg); color: var(--bg); padding: 8px 14px; }
.skip:focus { left: 10px; }
:focus-visible { outline: 1.5px solid currentColor; outline-offset: 4px; }

/* type */
.lab { font: 600 11px/1.4 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--dim); }
.display { font: 300 clamp(64px, 10vw, 168px)/.88 var(--serif); letter-spacing: -.035em; margin: 18px 0 26px; }
.display i, .h2 i { font-style: italic; }
.h2 { font: 300 clamp(44px, 5.4vw, 84px)/.95 var(--serif); letter-spacing: -.03em; margin: 14px 0 22px; }
.log { font: 300 clamp(22px, 2.2vw, 30px)/1.35 var(--serif); max-width: 600px; margin: 0 0 16px; }
.body { max-width: 480px; margin: 0; color: var(--dim); }
.serif { font-family: var(--serif); font-weight: 300; }

/* header */
.top { position: fixed; inset: 0 0 auto; z-index: 60; display: flex; align-items: center; justify-content: space-between; padding: 22px 30px; pointer-events: none; }
.top > * { pointer-events: auto; }
.top::before { content: ''; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); opacity: 0; transition: opacity .5s, background-color 1.1s ease; }
.scrolled .top::before { opacity: 1; }
.open .top::before { opacity: 0; }
.brand { display: flex; gap: 10px; align-items: center; font: 600 15px var(--sans); letter-spacing: .01em; }
.brand .bm-mark { transition: transform .8s var(--ease); }
.brand:hover .bm-mark { transform: rotate(-120deg); }
.menu { display: flex; gap: 26px; font-size: 14px; }
.menu a { position: relative; opacity: .8; transition: opacity .3s; }
.menu a:hover, .menu a[aria-current="page"] { opacity: 1; }
.menu a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.menu a:hover::after, .menu a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.burger { display: none; width: 40px; height: 40px; border: 0; background: none; color: inherit; cursor: pointer; position: relative; }
.burger i { position: absolute; left: 10px; right: 10px; height: 1.5px; background: currentColor; transition: transform .4s var(--ease), top .4s var(--ease); }
.burger i:nth-child(1) { top: 16px; } .burger i:nth-child(2) { top: 23px; }
.open .burger i:nth-child(1) { top: 19.5px; transform: rotate(45deg); }
.open .burger i:nth-child(2) { top: 19.5px; transform: rotate(-45deg); }
.sheet { position: fixed; inset: 0; z-index: 55; background: var(--bg); display: flex; flex-direction: column; justify-content: center; padding: 0 30px; gap: 4px; clip-path: inset(0 0 100% 0); transition: clip-path .7s var(--slow); }
.sheet a { font: 300 52px/1.1 var(--serif); letter-spacing: -.02em; opacity: 0; transform: translateY(20px); transition: opacity .6s, transform .6s var(--ease); }
.open .sheet { clip-path: inset(0 0 0 0); }
.open .sheet a { opacity: 1; transform: none; }
.open .sheet a:nth-child(2) { transition-delay: .05s; } .open .sheet a:nth-child(3) { transition-delay: .1s; } .open .sheet a:nth-child(4) { transition-delay: .15s; } .open .sheet a:nth-child(5) { transition-delay: .2s; }
@media (max-width: 760px) { .menu { display: none; } .burger { display: block; } }
@media (min-width: 761px) { .sheet { display: none; } }

/* sections */
.ch { position: relative; min-height: 100svh; display: grid; align-items: center; padding: 120px var(--pad); overflow: hidden; }
.ch.short { min-height: auto; padding-block: 120px; }
.txt > * { opacity: 0; transform: translateY(26px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.txt.is-in > * { opacity: 1; transform: none; }
.txt.is-in > :nth-child(2) { transition-delay: .1s; }
.txt.is-in > :nth-child(3) { transition-delay: .2s; }
.txt.is-in > :nth-child(4) { transition-delay: .3s; }
.txt.is-in > :nth-child(5) { transition-delay: .4s; }
@media (prefers-reduced-motion: reduce) { .txt > * { opacity: 1; transform: none; } }

/* links */
.more { display: inline-flex; align-items: center; gap: 12px; margin-top: 30px; font: 600 12px var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.more i { display: block; width: 36px; height: 1px; background: currentColor; transition: width .6s var(--ease); }
.more:hover i { width: 70px; }

/* page hero */
.hero { min-height: 100svh; display: grid; align-items: end; padding: 140px var(--pad) 12vh; position: relative; overflow: hidden; }
.hero .display { font-size: clamp(76px, 13vw, 220px); }
.facts { display: flex; flex-wrap: wrap; gap: 10px 34px; margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--hair); max-width: 720px; }
.facts div { display: grid; gap: 4px; font-size: 14px; }

/* next project */
.next { display: block; padding: 120px var(--pad); border-top: 1px solid var(--hair); position: relative; overflow: hidden; }
.next .display { margin: 12px 0 0; transition: transform .9s var(--ease), letter-spacing .9s var(--ease); }
.next:hover .display { transform: translateX(20px); letter-spacing: -.02em; }

/* footer */
.foot { padding: 110px var(--pad) 36px; border-top: 1px solid var(--hair); }
.foot .say { font: 300 clamp(56px, 9vw, 150px)/.9 var(--serif); letter-spacing: -.04em; display: inline-block; transition: letter-spacing .8s var(--ease); }
.foot .say:hover { letter-spacing: -.015em; }
.foot .say i { font-style: italic; }
.foot .row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 18px; margin-top: 70px; font-size: 14px; }
.foot nav { display: flex; gap: 22px; flex-wrap: wrap; }
.foot nav a { opacity: .75; } .foot nav a:hover { opacity: 1; }

/* the Face's composer (used on the home page and the book page) */
.phone { justify-self: center; width: min(340px, 100%); border-radius: 44px; padding: 14px; background: #0b0a09; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 40px 80px rgba(0, 0, 0, .5); }
.phone .scr { border-radius: 32px; background: #f2ece2; color: #1b1815; padding: 22px 18px 18px; min-height: 520px; display: flex; flex-direction: column; }
.phone .who { text-align: center; font: 600 13px var(--sans); padding-bottom: 14px; border-bottom: 1px solid rgba(0, 0, 0, .08); }
.phone .who small { display: block; font-weight: 400; color: #8a8378; }
.phone .msgs { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 16px 0; }
.phone .b { max-width: 80%; padding: 9px 13px; border-radius: 18px; font-size: 14px; line-height: 1.4; background: #e2dbcf; align-self: flex-start; }
.composer .cmp-field { background: #fff; border-radius: 20px; padding: 12px 14px; font-size: 14.5px; line-height: 1.45; min-height: 46px; border: 1px solid rgba(0, 0, 0, .08); transition: border-color .4s, box-shadow .4s; }
.composer.is-face .cmp-field { border-color: #b7793a; box-shadow: 0 0 0 4px rgba(183, 121, 58, .14); }
.composer .cmp-text { border-radius: 3px; transition: background .3s; }
.composer.is-select .cmp-text { background: rgba(183, 121, 58, .3); }
.composer .cmp-caret { display: inline-block; width: 1.5px; height: 1em; background: #1b1815; vertical-align: -2px; margin-left: 1px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.composer .cmp-note { display: flex; gap: 7px; align-items: center; margin: 8px 4px 0; font-size: 11.5px; color: #8a8378; }
.composer .cmp-dot { width: 6px; height: 6px; border-radius: 50%; background: #c9c1b4; }
.composer.is-face .cmp-dot, .composer.is-select .cmp-dot { background: #b7793a; }

/* scroll-lit words */
[data-highlight] .hl { color: color-mix(in srgb, var(--fg) 18%, transparent); transition: color .5s; }
[data-highlight] .hl.on { color: var(--fg); }

@media (max-width: 760px) { .top { padding: 16px 18px; } .ch, .hero, .next, .foot { padding-left: 22px; padding-right: 22px; } }

/* links out to the game websites */
.links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 36px; }
.more.ext span { font-size: 15px; letter-spacing: 0; transition: transform .5s var(--ease); }
.more.ext:hover span { transform: translate(3px, -3px); }
.factlink { border-bottom: 1px solid var(--hair); transition: border-color .3s; }
.factlink:hover { border-color: currentColor; }
.foot .away { display: flex; gap: 22px; }
.foot .away a { opacity: .75; } .foot .away a:hover { opacity: 1; }