/* Hangstone website: shared base for every page (home, support, privacy, press).
   One family (Nunito, self-hosted), the game's Paper palette by day and its Ink palette by night.
   Works under the site's strict CSP (Website/cloudflare/_headers): no external files, no inline script. */

:root {
  /* game palette */
  --paper: #F0EAE0;
  --paper-2: #E8E1D5;
  --board: #FBF8F2;
  --ink: #24212B;
  --muted: #5F5966;
  --night: #17161F;
  --saffron: #FFB21A;
  --jade: #14B87F;
  --coral: #F2504A;
  --azure: #2B6DEB;
  --plum: #55308F;

  /* roles */
  --ground: var(--paper);
  --ground-2: var(--paper-2);
  --panel: var(--board);
  --panel-lip: #D9D1C3;
  --text: var(--ink);
  --soft: var(--muted);
  --rule: #DCD4C6;
  --line-dot: #958D81;   /* practice-board dots: 3:1 on the board (WCAG 1.4.11), they tell you where you can pin */
  --bezel: var(--night);
  --deep: var(--ink);
  --on-deep: var(--paper);
  --stone: #ABA397;
  --stone-lip: #8E877C;
  --focus: var(--azure);

  /* type: five sizes */
  --fs-xl: clamp(2.6rem, 0.85rem + 7.2vw, 6.5rem);
  --fs-l: clamp(2rem, 1.15rem + 3.2vw, 3.75rem);
  --fs-m: clamp(1.25rem, 1rem + 0.9vw, 1.75rem);
  --fs-body: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);
  --fs-small: 0.9375rem;

  --m: clamp(16px, 3.9vw, 56px);          /* page margin */
  --gap: clamp(16px, 1.8vw, 28px);        /* column gap */
  --section: clamp(104px, 13vw, 200px);   /* between sections */
  --r: 16px;                              /* the one radius */
  --max: 1328px;                          /* widest content */

  --font: "Nunito", ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --gravity: cubic-bezier(.5, 0, .75, .3);

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: var(--night);
    --ground-2: #1E1C27;
    --panel: #23212D;
    --panel-lip: #0E0D13;
    --text: #EFE9DF;
    --soft: #A8A1AE;
    --rule: #33303D;
    --line-dot: #74707E;
    --bezel: #33303D;
    --deep: #2A2834;
    --on-deep: #EFE9DF;
    --stone: #5D5A66;
    --stone-lip: #4A4752;
    --focus: #6E9BFF;
  }
}
:root[data-theme="dark"] {
  --ground: var(--night);
  --ground-2: #1E1C27;
  --panel: #23212D;
  --panel-lip: #0E0D13;
  --text: #EFE9DF;
  --soft: #A8A1AE;
  --rule: #33303D;
  --line-dot: #74707E;
  --bezel: #33303D;
  --deep: #2A2834;
  --on-deep: #EFE9DF;
  --stone: #5D5A66;
  --stone-lip: #4A4752;
  --focus: #6E9BFF;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* the hidden attribute always wins, also over components that set their own display */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 24px; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 { font-weight: 900; letter-spacing: -0.025em; line-height: 1.02; text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
strong, b { font-weight: 800; }
::selection { background: var(--saffron); color: var(--ink); }

a { color: inherit; text-decoration-line: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); transition: text-decoration-color .2s; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
button { font: inherit; color: inherit; }

.wrap { padding-inline: max(var(--m), env(safe-area-inset-left)) max(var(--m), env(safe-area-inset-right)); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: absolute; left: var(--m); top: -100px; z-index: 10; background: var(--text); color: var(--ground); padding: 10px 16px; border-radius: 999px; font-weight: 800; text-decoration: none; }
.skip:focus { top: 12px; }
.nb { white-space: nowrap; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* a game tile used as a bullet or marker */
.tile-ico { width: 1em; height: 1em; flex: none; }

/* ---------- bar: wordmark + nav ---------- */
.bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; max-width: calc(var(--max) + 2 * var(--m)); margin-inline: auto; }
/* The wordmark is real text, "hangstone": the "o" is a transparent letter with the coral tile laid over it,
   so search engines, screen readers and copy-paste all get the name, and nobody gets "hangstne". */
.wordmark {
  display: inline-block;
  font-size: 1.75rem; font-weight: 900; letter-spacing: -0.035em; line-height: 1;
  text-decoration: none; padding: 6px 0; white-space: nowrap;
}
.wordmark .o, .foot-mark .o { position: relative; color: transparent; padding-inline: .06em .05em; }
.wordmark .o svg, .foot-mark .o svg {
  position: absolute; left: 50%; top: var(--o-top, .43em);
  width: .6em; height: .6em; margin-left: -.3em;
}
.bar nav ul { display: flex; gap: clamp(18px, 2.2vw, 36px); }
.bar nav a { display: block; font-weight: 750; font-size: var(--fs-small); text-decoration: none; padding: 12px 0; }
.bar nav a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.bar nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--coral); }
@media (max-width: 859px) { .bar .opt { display: none; } }
@media (max-width: 359px) { .wordmark { font-size: 1.5rem; } .bar nav ul { gap: 14px; } }

/* ---------- Apple badge ----------
   Apple's artwork, unmodified. Height >= 40 px on screen, clear space of a quarter of its height
   on every side (given by the gaps and margins around it). No other button on the site looks like it.
   Apple: "Don't modify, angle, or animate the App Store badge", so no hover lift, no press scale, no entrance. */
.badge { display: inline-block; flex: none; border-radius: 9px; }
.badge img { height: 54px; width: auto; }

/* ---------- App Store text link ----------
   Apple allows one App Store badge per layout, and it sits in the hero. Every other spot that leads
   to the App Store is this plain link in the site's own style: an outline pill in the current text
   color, no Apple logo, never filled black, so nothing else on the page imitates the badge. */
.store-link {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 0 18px 0 22px;
  border: 2px solid currentColor; border-radius: 999px;
  font-weight: 850; font-size: var(--fs-small); line-height: 1.2;
  text-decoration: none; color: inherit; text-wrap: balance;
  transition: background-color .2s;
}
.store-link:hover { background: color-mix(in srgb, currentColor 9%, transparent); }
.store-link svg { width: 18px; height: 18px; flex: none; }
.store-link-l { min-height: 54px; font-size: var(--fs-body); padding-inline: 26px 22px; }
/* below ~400 px the large label wraps ("…on the App / Store"), so phones get the regular size */
@media (max-width: 400px) { .store-link-l { min-height: 48px; font-size: var(--fs-small); padding-inline: 22px 18px; } }

/* placeholder values in legal and press texts: impossible to miss until filled in */
mark.ph {
  background: var(--saffron); color: var(--ink);
  outline: 2px dashed var(--coral); outline-offset: 1px;
  border-radius: 4px; padding: 0 .3em; font-weight: 800;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.ph-banner {
  position: sticky; top: 0; z-index: 20;
  background: #C23632; color: #fff; font-weight: 800; font-size: var(--fs-small); /* darker coral: white text 5.4:1 (plain coral is only 3.5:1) */
  padding: 10px var(--m); text-align: center;
}

/* ---------- footer ---------- */
.foot { padding-block: clamp(64px, 8vw, 112px) 32px; font-size: var(--fs-small); max-width: calc(var(--max) + 2 * var(--m)); margin-inline: auto; }
.foot-mark {
  display: block;
  font-size: clamp(3.4rem, 18.5vw, 15rem); font-weight: 900; letter-spacing: -0.05em; line-height: .9;
  white-space: nowrap; margin-bottom: clamp(36px, 5vw, 64px);
}
.foot-line { display: grid; gap: 10px; }
.foot-line ul { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.foot-line a { display: inline-block; font-weight: 800; padding-block: 6px; }
.foot-line p, .tm { color: var(--soft); }
.tm { margin-top: 28px; max-width: 80ch; }
.tm + .tm { margin-top: 10px; }
@media (min-width: 960px) {
  .foot-line { grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 24px; }
  .foot-year { text-align: right; }
}

/* the footer "o" drops into place once (home page script adds .is-in) */
@keyframes o-drop {
  0% { transform: translateY(-2.2em) rotate(-14deg); opacity: 0; }
  12% { opacity: 1; }
  70% { transform: translateY(0) rotate(0deg) scale(1, 1); animation-timing-function: var(--ease-out); }
  82% { transform: translateY(0) scale(1.1, .86); }
  100% { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .foot-mark[data-drop] .o svg { opacity: 0; transform-origin: 50% 100%; }
  .js .foot-mark[data-drop].is-in .o svg { animation: o-drop .9s var(--gravity) .15s both; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0s !important; }
}

@media print {
  .bar nav, .skip, .ph-banner { display: none; }
  body { background: #fff; color: #000; }
}