/* Dreamlet Games — the studio site. The colours are the game's own (Skin.cs): the sun, the HUD's
   night blue, the melt ring's ice. Display type: Bagel Fat One; text: Atkinson Hyperlegible, the
   font the game itself uses. */
:root {
  --noon: #ffc23a;
  --noon-deep: #f5a300;
  --night: #1b2247;
  --dusk: #262f5e;
  --ice: #a6e4f2;
  --paper: #fff7e3;
  --mist: #c6c9e0;
  --shade: rgba(27, 34, 71, 0.9);
  --display: "Bagel Fat One", "Arial Rounded MT Bold", system-ui, sans-serif;
  --text: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gutter: clamp(16px, 5vw, 64px);
  /* Content sits in a 1200px column on wide screens; the colour fields still run edge to edge. */
  --side: max(var(--gutter), calc((100% - 1200px) / 2));
  --measure: 62ch;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--night);
  color: var(--paper);
  font: 400 18px/1.6 var(--text);
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 2px; }
a:hover { text-decoration-color: var(--noon); }
:focus-visible { outline: 3px solid var(--ice); outline-offset: 3px; border-radius: 6px; }

/* ---------- the top bar ---------- */
.bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px var(--side);
  position: relative; z-index: 2;
}
.brand { display: inline-flex; align-items: center; gap: 10px; font: 400 20px/1 var(--display); text-decoration: none; white-space: nowrap; }
.brand img { width: 34px; height: 34px; border-radius: 9px; }
.bar nav { display: flex; gap: 22px; font-weight: 700; font-size: 16px; }
.bar nav a { text-decoration: none; }
.bar nav a:hover { text-decoration: underline; text-decoration-color: currentColor; }

/* ---------- the noon hero: a title that casts the sun's shadow ---------- */
.noon {
  position: relative;
  background: var(--noon);
  color: var(--night);
  overflow: hidden;
  isolation: isolate;
}
.noon::after { /* the street's warmth pooling at the bottom */
  content: ""; position: absolute; inset: auto 0 0 0; height: 40%;
  background: linear-gradient(to bottom, transparent, rgba(245, 163, 0, 0.45));
  z-index: -1;
}
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: center;
  gap: 24px var(--gutter);
  padding: clamp(24px, 6vw, 72px) var(--side) clamp(56px, 9vw, 120px);
}
.cast {
  font: 400 clamp(60px, 11vw, 164px)/0.88 var(--display);
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--paper);
  -webkit-text-stroke: 0.02em var(--night);
  paint-order: stroke fill;
  /* The shadow is set from script as the sun moves; this is where it rests without script. */
  text-shadow: var(--shadow, 6px 6px 0 var(--night));
}
.cast span { display: block; }
.hero .lede {
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.4;
  max-width: 26ch;
  margin: 28px 0 0;
  font-weight: 700;
}
.hero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  background: var(--night); color: var(--paper);
  font-weight: 700; text-decoration: none;
  border: 2px solid var(--night);
}
.btn:hover { background: var(--dusk); }
.btn.quiet { background: transparent; color: var(--night); }
.btn.quiet:hover { background: rgba(27, 34, 71, 0.08); }

/* The sky: the ring the sun is dragged on, as in the game. */
.sky { position: relative; justify-self: center; width: min(100%, 440px); aspect-ratio: 1; touch-action: none; }
.sky svg { width: 100%; height: 100%; overflow: visible; }
.sky .ring { fill: none; stroke: var(--night); stroke-opacity: 0.22; stroke-width: 2; stroke-dasharray: 3 9; stroke-linecap: round; }
.sky .glow { fill: #fff3c4; opacity: 0.55; }
.sky .sun { fill: #fff1b8; stroke: var(--night); stroke-width: 3; cursor: grab; }
.sky .rays line { stroke: var(--night); stroke-width: 3; stroke-linecap: round; }
.sky .grip { cursor: grab; }
.sky .grip:active { cursor: grabbing; }
.sky .grip:focus-visible { outline: none; }
.sky .grip:focus-visible .sun { stroke: var(--ice); stroke-width: 5; }
.sky .hint {
  position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%);
  font-size: 15px; font-weight: 700; white-space: nowrap; opacity: 0.8;
}

/* ---------- the calm, night-blue rest of the page ---------- */
.section { padding: clamp(56px, 8vw, 104px) var(--side); }
.section + .section { padding-top: 0; }
.section h2 {
  font: 400 clamp(34px, 4.6vw, 56px)/1.02 var(--display);
  margin: 0 0 20px;
  color: var(--paper);
}
.prose { max-width: var(--measure); }
.prose p { margin: 0 0 1em; color: var(--mist); }
.prose p strong { color: var(--paper); }
.prose ul { margin: 0 0 1em; padding-left: 1.1em; color: var(--mist); }
.prose li { margin: 0.35em 0; }
.prose li::marker { color: var(--noon); }

/* Three phones, each playing one of the test videos. */
.phones {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 3vw, 40px);
  margin-top: 40px;
}
.phone { margin: 0; }
.phone .frame {
  position: relative;
  border-radius: 34px;
  padding: 10px;
  background: #0f1430;
  box-shadow: 0 0 0 2px #39427a inset, 18px 22px 0 rgba(8, 11, 30, 0.55);
}
.phone video {
  width: 100%; aspect-ratio: 9 / 16; object-fit: cover;
  border-radius: 25px; background: var(--dusk);
}
.phone figcaption { margin-top: 18px; }
.phone figcaption b { display: block; font-size: 19px; }
.phone figcaption span { display: block; color: var(--mist); font-size: 16px; line-height: 1.45; }
.phone figcaption a { font-size: 15px; font-weight: 700; color: var(--ice); }

/* The loop and the facts, side by side on a wide screen. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.facts { margin: 0; border-top: 2px solid var(--dusk); }
.facts div { display: grid; grid-template-columns: 9.5em 1fr; gap: 12px; padding: 14px 0; border-bottom: 2px solid var(--dusk); }
.facts dt { color: var(--mist); font-size: 16px; }
.facts dd { margin: 0; font-weight: 700; }

/* The honest note: set apart on a paper-coloured sheet, like a note pinned to the page. */
.note {
  max-width: 760px;
  background: var(--paper); color: var(--night);
  border-radius: 20px;
  padding: clamp(24px, 4vw, 40px);
  box-shadow: 14px 16px 0 var(--noon);
}
.note h2 { color: var(--night); font-size: clamp(28px, 3.4vw, 40px); }
.note p { margin: 0 0 0.8em; }
.note p:last-child { margin-bottom: 0; }

/* The studio's own page: a single statement, then the game's still. */
.teaser {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}
.teaser + .teaser { margin-top: clamp(56px, 8vw, 112px); }
@media (min-width: 861px) { .teaser.flip .shot { order: 2; } }
/* The phone hangs below the still; the bottom margin (a share of the width) leaves room for it. */
.shot { position: relative; margin-bottom: 19%; }
.shot > img { border-radius: 22px; box-shadow: 16px 18px 0 rgba(8, 11, 30, 0.55); }
/* A phone standing in front of the still, playing a few silent seconds of the game on a loop. */
.pocket {
  position: absolute; right: 5%; top: 15%;
  width: 34%;
  padding: 5px;
  border-radius: 20px;
  background: #0f1430;
  box-shadow: 0 0 0 2px #39427a inset, 10px 12px 0 rgba(8, 11, 30, 0.55);
}
.teaser.flip .pocket { right: auto; left: 5%; }
.pocket video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 15px; background: var(--dusk); }
.status { display: inline-block; margin-bottom: 14px; padding: 6px 14px; border-radius: 999px; background: var(--dusk); color: var(--ice); font-weight: 700; font-size: 15px; }

/* ---------- plain text pages (privacy, support) ---------- */
.page { padding: clamp(32px, 6vw, 72px) var(--side) 96px; }
.page h1 { font: 400 clamp(40px, 6vw, 64px)/1 var(--display); margin: 0 0 16px; }
.page h2 { font-size: 22px; margin: 36px 0 8px; color: var(--noon); }
.page h3 { font-size: 18px; margin: 24px 0 6px; color: var(--paper); }
.page .prose p, .page .prose li { color: var(--mist); }
.page .meta { font-size: 15px; }

/* ---------- the foot ---------- */
.foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px;
  padding: 28px var(--side) 40px;
  border-top: 2px solid var(--dusk);
  color: var(--mist); font-size: 15px;
}
.foot nav { display: flex; flex-wrap: wrap; gap: 20px; }

/* ---------- narrow screens ---------- */
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; }
  .sky { order: -1; width: min(56vw, 220px); margin-bottom: 4px; }
  .split, .teaser { grid-template-columns: 1fr; }
  .shot { margin-bottom: 30%; }
  .pocket { width: 40%; }
  .phones {
    grid-template-columns: repeat(3, 78%);
    overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 24px;
    scrollbar-width: none;
  }
  .phones::-webkit-scrollbar { display: none; }
  .phone { scroll-snap-align: center; }
  .bar nav { gap: 16px; }
}
@media (max-width: 420px) {
  .brand { font-size: 17px; }
  .brand img { width: 30px; height: 30px; }
  .facts div { grid-template-columns: 1fr; gap: 2px; }
  .bar nav a.wide { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}