/* Playmade — the studio's own front door.

   The palette is the games' own: the cream the PWA paints behind the shop,
   the amber of its theme colour, the ink of its title scrim, and two accents
   that the pans in the case already carry. One light theme, on purpose: this
   is a painted world, and it is painted in daylight. */

:root {
  --cream: #fbf3e4;
  --cream-deep: #f3e6cd;
  --paper: #fffaf0;
  --ink: #2e2119;
  --ink-soft: #5c4a3c;
  --ink-mute: #8a7462;
  --amber: #d9a05b;
  --amber-deep: #b97a2f;
  --strawberry: #d64a6a;
  --mint: #4f9e7c;
  --line: #e4d4b8;
  --shadow: 0 1px 2px rgba(46, 33, 25, 0.08), 0 10px 30px rgba(46, 33, 25, 0.1);
  --radius: 14px;
  --measure: 62ch;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "Atkinson Hyperlegible", "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .wordmark {
  font-family: "Young Serif", Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.005em;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: clamp(38px, 6.2vw, 74px); line-height: 1.02; }
h2 { font-size: clamp(28px, 3.6vw, 42px); line-height: 1.1; }
h3 { font-size: 23px; line-height: 1.2; }
p { margin: 0; max-width: var(--measure); }
p + p { margin-top: 0.9em; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
img { max-width: 100%; height: auto; display: block; }
.wrap { width: min(1120px, 100% - 40px); margin-inline: auto; }
.eyebrow {
  font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--amber-deep); font-weight: 700; margin-bottom: 14px;
}
.lede { font-size: 20px; color: var(--ink-soft); }
.small { font-size: 14px; color: var(--ink-mute); }

/* buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-radius: 999px; text-decoration: none;
  font-weight: 700; font-size: 17px; line-height: 1;
  border: 2px solid transparent; transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-primary { background: var(--ink); color: var(--cream); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.hero .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, 0.85); }

/* header */
.top {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--cream) 88%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
}
.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 20px; }
.wordmark { font-size: 26px; text-decoration: none; display: flex; align-items: center; gap: 10px; }
.wordmark img { width: 30px; height: 30px; }
.top nav { display: flex; gap: 22px; font-size: 15px; }
.top nav a { text-decoration: none; color: var(--ink-soft); }
.top nav a:hover { color: var(--ink); }
@media (max-width: 720px) { .top nav { display: none; } }

/* hero: the doorway plate, the words on the sky and on the sand */
.hero { position: relative; overflow: hidden; color: #fff; background: var(--ink); }
.hero .plate { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 62%; min-height: 520px; }
.hero .scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(46, 33, 25, 0.78) 0%, rgba(46, 33, 25, 0.42) 32%, rgba(46, 33, 25, 0) 56%),
    linear-gradient(to top, rgba(46, 33, 25, 0.82) 0%, rgba(46, 33, 25, 0.3) 30%, rgba(46, 33, 25, 0) 55%);
}
.hero .words { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; }
.hero .words .wrap { padding-block: 44px 36px; }
.hero h1 { max-width: 14ch; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35); }
.hero .lede { color: rgba(255, 250, 240, 0.92); max-width: 48ch; margin-top: 18px; font-size: clamp(17px, 2vw, 21px); }
.hero .cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero .cta .btn-primary { background: var(--amber); color: var(--ink); }
.hero .cta .small { color: rgba(255, 250, 240, 0.8); width: 100%; }
@media (max-width: 720px) {
  .hero .plate { min-height: 640px; }
  .hero .words .wrap { padding-block: 30px 28px; }
}

/* the crowd walks past */
.crowd { overflow: hidden; background: var(--cream-deep); border-block: 1px solid var(--line); padding: 18px 0 8px; }
.crowd .lane { display: flex; gap: 46px; width: max-content; align-items: flex-end; animation: walk 90s linear infinite; }
.crowd img { height: 150px; width: auto; }
@keyframes walk { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .crowd .lane { animation: none; } }
.crowd .caption { text-align: center; margin-top: 10px; }

/* sections */
section { padding-block: 84px; }
section + section { border-top: 1px solid var(--line); }
.two { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
@media (max-width: 860px) { .two { grid-template-columns: 1fr; gap: 32px; } }

/* the three doors */
.doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 40px; }
@media (max-width: 860px) { .doors { grid-template-columns: 1fr; } }
.door {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 26px 26px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--shadow);
}
.door .tag { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; }
.door.shops .tag { color: var(--strawberry); }
.door.events .tag { color: var(--amber-deep); }
.door.families .tag { color: var(--mint); }
.door ul { margin: 6px 0 0; padding-left: 18px; color: var(--ink-soft); }
.door li + li { margin-top: 6px; }
.door .foot { margin-top: auto; padding-top: 10px; }

/* how it's made */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 40px; counter-reset: step; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }
.step { position: relative; padding-top: 8px; }
.step::before {
  counter-increment: step; content: counter(step);
  font-family: "Young Serif", Georgia, serif; font-size: 44px; color: var(--amber); line-height: 1; display: block; margin-bottom: 10px;
}
.step .art { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); aspect-ratio: 4 / 3; display: grid; place-items: center; margin-bottom: 16px; overflow: hidden; }
.step .art img { max-height: 78%; width: auto; }
.step .art.plate img { max-height: none; width: 100%; height: 100%; object-fit: cover; }
.step .art.props { gap: 0; grid-template-columns: repeat(3, auto); }
.step .art.props img { max-height: 120px; }
.step .art.photos { background: repeating-linear-gradient(135deg, var(--paper) 0 14px, var(--cream-deep) 14px 16px); }
.step .art.photos span { font-family: "Young Serif", Georgia, serif; color: var(--ink-mute); font-size: 20px; text-align: center; padding: 0 20px; }
.step h3 { margin-bottom: 8px; }

/* the rules */
.rules { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 36px; }
@media (max-width: 860px) { .rules { grid-template-columns: repeat(2, 1fr); } }
.rule { border-top: 3px solid var(--amber); padding-top: 14px; }
.rule h3 { font-size: 21px; margin-bottom: 6px; }
.rule p { color: var(--ink-soft); font-size: 16px; }

/* the case */
.case .plate { border-radius: var(--radius); box-shadow: var(--shadow); }
.quote { border-left: 4px solid var(--strawberry); padding: 6px 0 6px 20px; margin-top: 24px; font-family: "Young Serif", Georgia, serif; font-size: 21px; line-height: 1.35; color: var(--ink-soft); }
.quote cite { display: block; font-family: "Atkinson Hyperlegible", sans-serif; font-style: normal; font-size: 14px; color: var(--ink-mute); margin-top: 8px; }

/* the case, in pans */
.pans { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 26px; }
.pans img { width: 92px; }

/* cost */
.cost dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 36px 0 0; }
@media (max-width: 860px) { .cost dl { grid-template-columns: 1fr; } }
.cost dt { font-family: "Young Serif", Georgia, serif; font-size: 22px; margin-bottom: 8px; }
.cost dd { margin: 0; color: var(--ink-soft); }

/* contact */
.contact { background: var(--ink); color: var(--cream); }
.contact h2, .contact p { color: inherit; }
.contact .lede { color: rgba(251, 243, 228, 0.85); }
.contact .btn-primary { background: var(--amber); color: var(--ink); margin-top: 26px; }
.contact .small { color: rgba(251, 243, 228, 0.6); margin-top: 18px; }

footer { padding: 28px 0 40px; font-size: 14px; color: var(--ink-mute); }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }

/* the founder */
.founder { display: grid; place-items: center; }
.portrait { width: min(300px, 70%); aspect-ratio: 1; border-radius: 50%; object-fit: cover; box-shadow: var(--shadow); }
.portrait.placeholder { display: grid; place-items: center; background: var(--cream-deep); border: 1px dashed var(--line); color: var(--ink-mute); font-family: "Young Serif", Georgia, serif; font-size: 22px; }

/* typographic hero */
.hero-type { padding-block: 96px 56px; }
.hero-type h1 { max-width: 12ch; font-size: clamp(44px, 7vw, 88px); }
.hero-type .lede { max-width: 52ch; margin-top: 22px; }
.hero-type .cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.wordmark img { width: 28px; height: 28px; border-radius: 7px; }

/* the work carousel: scroll-snap, no library */
.work { padding-block: 40px 84px; }
.work-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 26px; }
.carousel-nav { display: flex; gap: 8px; }
.carousel-nav button { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--ink); background: transparent; color: var(--ink); font-size: 18px; cursor: pointer; }
.carousel-nav button:hover { background: var(--ink); color: var(--cream); }
.carousel { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px max(20px, calc((100% - 1120px) / 2)) 18px; scrollbar-width: none; }
.carousel::-webkit-scrollbar { display: none; }
.carousel:focus-visible { outline: 3px solid var(--amber); outline-offset: -3px; }
.card { flex: 0 0 min(520px, 82vw); scroll-snap-align: start; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.card .cap { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 4px; }
.card .cap h3 { font-size: 20px; }
.card .cap p { color: var(--ink-soft); font-size: 15px; }
.card .cap .tag { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber-deep); font-weight: 700; }

/* the why section's art */
.why-art { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.why-art img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); }
.why-art img:nth-child(2) { margin-top: 28px; }
@media (max-width: 860px) { .why-art { margin-top: 10px; } }

/* the escape-room card, until a room still replaces it */
.card-dark .art-dark { aspect-ratio: 16 / 10; background: radial-gradient(ellipse at 50% 60%, #2a1710 0%, #0c0705 70%); display: grid; place-content: center; text-align: center; font-family: "IBM Plex Mono", "Courier New", monospace; letter-spacing: 0.18em; }
.card-dark .glow { color: #f0864a; font-size: 34px; text-shadow: 0 0 18px rgba(240, 134, 74, 0.6); }
.card-dark .sub { color: #d9a05b; font-size: 12px; margin-top: 8px; }