/* Shared styling for the SNG Designs site. Mirrors the app's Ceramic palette. */
:root {
  --background-top: #FDF4E3;
  --background-bottom: #EFD8B8;
  --ink: #2C1D0F;
  --body: #3B2917;
  --muted: #6B5334;
  --accent: #C25714;
  /* Theme.segmentColor in the app's light/Ceramic mode — the stick the puzzle
     is drawn with, which the daily board below reuses verbatim. */
  --stick: #8F3B0D;
  --card: rgba(255, 252, 240, 0.88);
  --border: rgba(115, 77, 41, 0.28);
  /* Theme.successStick / Theme.failStick, light mode — the solved green and the
     strike the game puts through a puzzle it has just beaten. */
  --success: #1E7B3C;
  --fail: #B8211A;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  padding: 40px 20px 72px;
  background: linear-gradient(var(--background-top), var(--background-bottom));
  background-attachment: fixed;
  color: var(--ink);
  font: 16px/1.65 -apple-system, "SF Pro Text", system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
}
main { max-width: 680px; margin: 0 auto; }
a { color: var(--accent); }
/* Every page carries the same centred lockup, so on the legal pages the lockup
   is made a link back to the landing page — the mark is the way home. */
a.lockup-link { display: block; text-decoration: none; color: inherit; }

.mark { display: block; }
/* One type scale, anchored to the 24 px brand line in the lockup and the 16 px
   body: 22 page title, 18 section, 16 subsection, 14 supporting, 13 meta, 12 and
   10 for the tracked kickers. Every heading stays inside the brand's size, so
   nothing on a page out-shouts the identity block above it — and the steps are
   3 px apart rather than the old 30/20/17, where a subsection sat 1 px off body
   text while the page title towered over the mark. */
h1 { font-size: 22px; letter-spacing: -0.2px; margin: 0 0 6px; }
h2 { font-size: 18px; margin: 30px 0 8px; }
h3 { font-size: 16px; font-weight: 800; margin: 22px 0 6px; }
p, li { color: var(--body); }
ul { padding-left: 22px; }
li { margin-bottom: 7px; }
.subtitle { color: var(--muted); font-size: 14px; margin: 0 0 22px; }
.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 16px; padding: 20px; margin: 26px 0;
  /* Panel copy is the same 14 px as the hero's lede, so the intro paragraph and
     the cards below it agree. The kickers, chips and headings inside a card set
     their own sizes, so this only moves the prose. */
  font-size: 14px;
}
/* A card's outermost children drop their outside margin so its padding *is* the
   gap: h2's 30 px top margin inside a 20 px card was opening a hole above the
   first heading that nothing filled. */
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
/* …including a list's final item, whose own margin would otherwise push the
   card's bottom edge out. Scoped to .card so it outranks the per-list rules
   further down (.how li). */
.card li:last-child { margin-bottom: 0; }
.lede { font-size: 14px; }
footer {
  margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 18px; font-size: 14px;
}

/* Landing page. */
.eyebrow {
  text-transform: uppercase; letter-spacing: 0.16em;
  font-size: 12px; font-weight: 800; color: var(--accent); margin: 0 0 10px;
}
/* The hero repeats the game's own lockup, centred and stacked: the mark, then
   ONE STICK, MATH CHALLENGE and the tagline. Everything but MATH CHALLENGE is
   sized in em of it, so the whole stack scales from one font-size (the
   narrow-phone rule below changes that single value). */
.hero { text-align: center; }
/* The stack is a fixed size, stepped at two viewport heights. It used to be
   `min(28px, 3.2vh)`, which made the whole hero breathe with the window: only a
   875 px tall viewport got the intended 28 px, a 660 px one got 21.1 px, and a
   phone on its side got 12.5 px. Fixed px means the hero looks the same at every
   window of a given size class. The height steps exist because a short window, or
   a phone lying on its side, cannot give the hero 368 px of a 390 px fold and
   still leave the preview visible beneath it. Measured: 28 px at 1440x900 and
   1024x1366; 24 px at 1440x768, 1440x660 and 1280x600; 20 px at 844x390 and
   667x375. The narrow-phone rule at the end of the sheet overrides these steps, so
   a 390 px wide phone stays 23 px whatever its height. */
.lockup {
  display: flex; flex-direction: column; align-items: center; gap: 0.28em;
  font-size: 28px; line-height: 1.1; margin: 2px 0 18px;
}
/* Discrete steps, not a continuous shrink. Declared before the narrow-phone rule
   below so that width wins for phones: a 375x667 phone is 23 px, not 24. */
@media (max-height: 700px) {
  .lockup { font-size: 24px; }
}
@media (max-height: 460px) {
  .lockup { font-size: 20px; }
}
/* The mark's canvas is centred on its stick row, so it needs no optical offset. */
.lockup .mark { height: 1.6em; width: auto; }
/* letter-spacing adds its unit after the last character, which drags centred
   text half a unit left; the matching half-unit indent recentres it. */
.lockup-top {
  font-size: 0.55em; font-weight: 800; letter-spacing: 0.35em;
  text-transform: uppercase; color: var(--accent); margin: 0;
  /* slightly more than half the tracking: the first glyph's left side bearing
     eats into the compensation, and this is the widest tracking in the lockup */
  text-indent: 0.25em;
}
.lockup-main {
  font-size: 1em; font-weight: 900; letter-spacing: 0.01em;
  text-transform: uppercase; color: var(--ink); margin: 0;
  text-indent: 0.005em;
}
.lockup-tag {
  font-size: 0.36em; font-weight: 800; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--muted); text-indent: 0.09em;
  /* the two margins below are in the child's font-size, so they add to the gap */
  margin: 0.35em 0 0;
}
/* A hairline rule closes the lockup before the platform line, in the same 1px
   --border the cards and footer use. Sized in em of the lockup, so it scales
   with the stack like everything above it. */
.lockup-rule {
  width: 3.4em; height: 1px; border-radius: 999px;
  background: var(--border); margin-top: 0.55em;
}
/* The platform line is a supporting line, so it sits a touch under the title's
   width (10 px + 0.1 em tracking lands within a few px of it) rather than
   being the widest thing in the stack. Scoped to .lockup, not .hero: the legal
   pages carry the same lockup without a .hero around it, and they must not fall
   back to the larger generic .eyebrow the daily card uses. */
/* Sized in em of the lockup, not in px. A fixed size drifted: when the stack came
   down, the platform line stopped coming down with it and ended up 29 px *wider*
   than the title on desktop and 65 px wider on a phone — the exact "supporting
   line out-shouts the brand" problem the scale was introduced to fix. At 0.36em it
   tracks the title to within ~2% at every size, on all three pages. */
.lockup .eyebrow {
  margin: 0.8em 0 0; font-size: 0.36em; letter-spacing: 0.1em;
  text-indent: 0.05em; line-height: 1.1;
}
.hero .lede { max-width: 38em; margin: 12px auto; }
.hero .meta { margin: 10px 0 0; font-size: 12px; }
.button {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--accent); color: #FFFCF0; text-decoration: none;
  font-weight: 800; font-size: 14px; padding: 12px 22px; border-radius: 999px;
  box-shadow: 0 10px 24px rgba(194, 87, 20, 0.28);
}
.button.small { font-size: 13px; padding: 10px 18px; }
.meta { font-size: 13px; color: var(--muted); margin: 14px 0 0; }
.preview { display: flex; flex-direction: column; align-items: center; margin: 34px 0 4px; }
/* Sized from the viewport height, not the width: the capture is 886 x 1920, so a
   width-driven size made it ~650 px tall and swallowed the whole fold on both a
   phone and a desktop. Height cap keeps it under two thirds of the viewport and
   the intrinsic ratio sets the width. */
.phone {
  height: min(62vh, 520px); width: auto; aspect-ratio: 886 / 1920;
  border-radius: 30px; overflow: hidden;
  border: 1px solid var(--border); background: #000;
  box-shadow: 0 26px 60px rgba(60, 34, 10, 0.22);
}
.phone video { display: block; width: 100%; height: 100%; object-fit: cover; }
.caption { font-size: 13px; color: var(--muted); margin: 14px 0 0; text-align: center; }
/* The clip autoplays muted (browsers block an unmuted start), so the voiceover
   needs a gesture: this is it, and it is the only way to hear the narration. */
.sound-toggle {
  display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 0;
  font: inherit; font-size: 13px; font-weight: 800; letter-spacing: .02em;
  color: var(--ink); background: var(--card); cursor: pointer;
  border: 1px solid var(--border); border-radius: 999px; padding: 9px 16px;
}
.sound-toggle:hover, .sound-toggle:focus-visible { border-color: var(--accent); color: var(--accent); }
.sound-toggle svg { width: 15px; height: 15px; display: block; }
.shots {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
  max-width: 540px; margin: 28px auto 4px;
}
.shots img {
  width: 100%; height: auto; display: block; border-radius: 14px;
  border: 1px solid var(--border); box-shadow: 0 12px 28px rgba(60, 34, 10, 0.14);
}
.daily.hidden { display: none; }
/* The daily equation is drawn the way the game draws it: the same seven-segment
   sticks, from SegmentGeometry.swift. Lit sticks take the app's stick color and
   the empty slots the ink at 16%, exactly as SegmentStick renders them, so the
   card reads like the puzzle screen. The board is an SVG in cell units, so it
   scales to the card without measuring anything. */
.daily-board { margin: 12px 0 14px; }
.daily-board svg { display: block; width: 100%; max-width: 380px; height: auto; margin: 0 auto; }
.daily-board .lit { fill: var(--stick); }
.daily-board .unlit { fill: rgba(44, 29, 15, 0.16); }
/* The answer card is the game's own solved sheet, not a diagram of one: the same
   board renderer as the daily card draws both equations, the puzzle keeps the
   real stick colour with the fail-coloured strike the app puts through it, and the
   answer takes the solved green. Nothing here is dimmed or invented — an earlier
   pass faded the puzzle to 50% behind a decorative arrow, which read as a mockup
   because no such treatment exists anywhere in the game. */
.solution.hidden { display: none; }
.solution .daily-board { margin: 12px 0 0; }
.solution .daily-board + p { margin-top: 16px; }
/* Same hierarchy as the solved sheet, where the beaten equation is set smaller
   than the answer that replaced it. */
.solution #solution-before svg { max-width: 300px; }
.solution #solution-after svg { max-width: 380px; }
.daily-board .resolved { fill: var(--success); }
.daily-board .strike { fill: var(--fail); opacity: 0.6; }
.chip {
  display: inline-block; font-size: 11px; font-weight: 900; letter-spacing: 0.12em;
  text-transform: uppercase; color: #FFFCF0; padding: 6px 12px;
  border-radius: 999px; background: var(--accent);
}
.how li { margin-bottom: 10px; }
.note { font-size: 13px; color: var(--muted); }
@media (max-width: 520px) {
  /* Declared last on purpose: a narrow phone keeps this fixed size whatever its
     height, so the height steps above never apply to a phone in portrait. */
  .lockup { font-size: 23px; }
  /* The brand line drops to 20 px on a narrow screen, so the page title follows
     it down: a 22 px title over a 20 px lockup was the same out-of-scale the
     desktop rules just fixed. */
  h1 { font-size: 20px; }
  .shots { gap: 8px; }
}