/* Kettlekite shared base: the sky at the hour the kettle goes on. Night and dusk for the ground,
   ivory for the words, the kite's gold and teal only on the kite itself. Every Kettlekite site
   copies this file (scripts/sync-shared.sh); a game site sets its own colours in theme.css. */
:root {
  --night: #0d0f22;
  --dusk: #1d2150;
  --dusk-2: #2d2a5c;
  --plum: #57405f;
  --ember: #e9a06b;
  --ivory: #f4ebdd;
  --ivory-2: rgba(244, 235, 221, 0.74);
  --ivory-3: rgba(244, 235, 221, 0.5);
  --line: rgba(244, 235, 221, 0.14);
  --gold: #f0a92e;
  --teal: #5fa59a;
  --bg: var(--night);
  --ink: #1a1424; /* type on ivory */
  --display: "Fraunces", "Iowan Old Style", "Palatino", Georgia, serif;
  --body: "Nunito Sans", ui-rounded, system-ui, sans-serif;
  --gutter: clamp(1.25rem, 4.5vw, 4rem);
  --max: 92rem;
  --measure: 38rem;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; color-scheme: dark; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  font: 400 1.125rem/1.6 var(--body);
  color: var(--ivory);
  background: var(--bg);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: var(--ivory-3); }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--ivory); outline-offset: 4px; border-radius: 6px; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 340; line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance; font-variation-settings: "opsz" 144; }
p { margin: 0 0 1rem; text-wrap: pretty; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.quiet { color: var(--ivory-3); font-size: 0.95rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Top bar. Fixed over the page; it gains a veil once the page has scrolled. */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem var(--gutter);
  transition: background 0.5s var(--ease), padding 0.5s var(--ease);
}
/* long pages have no script to veil the bar, so it is veiled from the start */
.bar.veiled, body:has(.doc) .bar { background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding-top: 0.75rem; padding-bottom: 0.75rem; }
.brand { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; font-family: var(--display); font-weight: 450; font-size: 1.3rem; letter-spacing: -0.01em; font-variation-settings: "opsz" 48; }
.brand img { width: 34px; height: 34px; border-radius: 9px; }
.brand .kite { width: 22px; height: 22px; }
.nav { display: flex; gap: clamp(1rem, 2.4vw, 2.2rem); font-size: 0.98rem; color: var(--ivory-2); }
.nav a { text-decoration: none; }
.nav a:hover { color: var(--ivory); }

/* Buttons take the shape of Apple's App Store badge that sits among them: 48 px tall, corners of 8 px
   (the badge's own, measured). One solid ivory button per view, everything else outlined or a plain link */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: 3rem; padding: 0.8rem 1.35rem; border-radius: 8px;
  font: 600 1rem/1 var(--body); text-decoration: none; white-space: nowrap;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.btn.solid { background: var(--ivory); color: var(--ink); }
.btn.solid:hover { background: #fff8ee; transform: translateY(-1px); }
.btn.line { color: var(--ivory); box-shadow: inset 0 0 0 1px var(--ivory-3); }
.btn.line:hover { box-shadow: inset 0 0 0 1px var(--ivory); }
.btn.soon { color: var(--ivory-2); box-shadow: inset 0 0 0 1px var(--line); cursor: default; }
/* A row of them, centred on one line; the gap is the badge's clear space (a quarter of its height).
   Apple's own badge, unaltered, for a game that is out; "coming soon" holds its place until then */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.store-badge { display: inline-flex; border-radius: 8px; }
.store-badge img { width: auto; height: 3rem; }

/* Long-form pages: privacy, terms, support */
.doc { max-width: var(--measure); padding-top: clamp(7rem, 14vw, 10rem); padding-bottom: 3rem; }
.doc h1 { font-size: clamp(2.6rem, 6vw, 4rem); margin-bottom: 0.8rem; }
.doc h2 { font-size: 1.6rem; margin: 2.6rem 0 0.6rem; font-weight: 400; }
.doc h3 { font-family: var(--body); font-size: 1.05rem; font-weight: 700; letter-spacing: 0; margin: 1.6rem 0 0.35rem; }
.doc p, .doc li { color: var(--ivory-2); }
.doc .quiet { margin-bottom: 2rem; }
.doc a { text-decoration-color: var(--ivory-3); }

/* Footer */
.foot { position: relative; border-top: 1px solid var(--line); padding: 2.4rem 0 3rem; font-size: 0.92rem; color: var(--ivory-3); }
.foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2.5rem; }
.foot p { margin: 0; }
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--ivory); }

/* Phone frame for real screen recordings */
.phone {
  position: relative; width: min(300px, 64vw); aspect-ratio: 496 / 1080;
  padding: 10px; border-radius: 48px; background: #0b0a10;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.14), 0 50px 100px -30px rgba(0, 0, 0, 0.7), 0 20px 40px -20px rgba(0, 0, 0, 0.5);
}
.phone::before { content: ""; position: absolute; z-index: 2; top: 20px; left: 50%; width: 28%; height: 22px; border-radius: 99px; background: #0b0a10; transform: translateX(-50%); }
.phone video, .phone img { width: 100%; height: 100%; object-fit: cover; border-radius: 38px; background: #222; }

/* Reveal on scroll: home.js / game.js add .in when an element enters the view */
.rise { opacity: 0; transform: translateY(2.2rem); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.rise.in { opacity: 1; transform: none; }

@media (max-width: 760px) {
  .nav { gap: 1rem; font-size: 0.92rem; }
  .nav:has(a:not([href^="#"])) a[href^="#"] { display: none; } /* game sites keep Support on phones */
  .brand { font-size: 1.15rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rise { opacity: 1; transform: none; }
}