/* Word Vice site styles. Warm cream ground and deep brown ink from the app,
   one hot red accent. Kept deliberately plain and compact, in the same spirit
   as mixlet.app: system fonts, small type, flat surfaces, tight rhythm. */

:root {
  --bg: #f7f2e9;
  --panel: #efe6d6;
  --ink: #2b1d18;
  --muted: #6f5f56;
  --accent: #cb3339;
  --line: #ded3c2;
  --rounded: ui-rounded, "SF Pro Rounded", "Avenir Next", -apple-system,
    BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--rounded);
  font-size: 16px;
  line-height: 1.5;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* height:auto keeps the intrinsic width/height attributes on the screenshots
   from fighting max-width when the column is narrower than the image. */
img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.page {
  max-width: 980px;
  margin: 0 auto;
  padding: 24px 16px 36px;
}

.narrow { max-width: 680px; }

/* ---------- nav ---------- */

.nav {
  display: flex;
  gap: 18px;
  justify-content: flex-end;
  margin: 0 0 8px;
  font-size: 13px;
}

.nav a { color: var(--muted); }
.nav a:hover { color: var(--accent); text-decoration: none; }

/* ---------- hero ---------- */

/* Generous lead-in above the wordmark. The title is the loudest thing on the
   page and needs room to land before the subtitle picks up. */
.hero { padding-top: 40px; }

.brand {
  margin: 0 0 18px;
  font-size: clamp(46px, 6.4vw, 64px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.02;
  color: var(--accent);
}

.subtitle { margin: 0 0 8px; font-size: 17px; color: var(--muted); }

/* The one-line explanation of the whole game, sitting between the subtitle and
   the supporting copy. The punchline takes the accent so the eye lands on it. */
.payoff {
  margin: 16px 0 14px;
  font-size: clamp(21px, 2.5vw, 26px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.payoff span { color: var(--accent); }

.tagline { margin: 0 0 10px; color: var(--muted); }

/* Groups the badge with the terms it comes with, so the offer reads as one
   thing. Shrink-wrapped, not full-bleed; an empty-looking box would be worse
   than no box. */
.cta {
  display: inline-block;
  max-width: 100%;
  margin-top: 18px;
  padding: 18px 20px;
  background: #fdfbf7;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.cta .app-store-badge { margin-top: 0; }
.cta .coming { margin-top: 14px; }

/* Apple's official badge artwork. Do not restyle or recolor it. */
.app-store-badge { display: inline-block; margin-top: 12px; }
.app-store-badge:hover { text-decoration: none; }
.app-store-badge img { width: 190px; height: auto; }

/* Pre-launch: the badge is shown but is not a link, because there is nothing
   to link to yet. Held back so it reads as "not yet" rather than "broken".
   When the app ships, drop .is-pending and restore the <a href> wrapper. */
.app-store-badge.is-pending { cursor: default; }
.app-store-badge.is-pending img { opacity: 0.45; filter: saturate(0.4); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Availability and the offer are different kinds of fact, so they get separate
   lines, tight to each other and looser from the spec line below. */
.coming { margin: 14px 0 0; font-size: 14px; color: var(--ink); }
/* Three scannable terms rather than a paragraph. Next to a download button
   people read the shape, not the sentence. Small accent dots instead of the
   browser's bullets, to stay in the site's palette. */
.terms {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  color: var(--ink);
  max-width: 34em;
}

.terms li { position: relative; margin: 3px 0; padding-left: 16px; }

.terms li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

.meta { margin: 12px 0 0; font-size: 12px; color: var(--muted); }

/* Floated, not gridded, so the story prose wraps around it instead of waiting
   for it to end. #how clears it. */
.hero-shot {
  float: right;
  width: 320px;
  max-width: 100%;
  margin: 0 0 22px 44px;
}

/* The hero capture is a full-height device screenshot with dead space below the
   found-words list; crop to the part that carries the game. */
.hero-shot img {
  aspect-ratio: 1206 / 2250;
  object-fit: cover;
  object-position: top;
  border-radius: 24px;
  box-shadow:
    0 1px 0 rgba(43, 29, 24, 0.16),
    0 2px 5px rgba(43, 29, 24, 0.07),
    0 20px 44px rgba(43, 29, 24, 0.16);
}

/* ---------- sections ---------- */

/* No rules between sections. The red 27px headings carry the break, and
   whitespace does the rest. */
section {
  margin: 0;
  padding: 48px 0 6px;
}

/* The story follows the hero directly, so it needs less lead-in than the rest. */
section:first-of-type { padding-top: 30px; }

h2 {
  margin: 0 0 12px;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--accent);
}

h3 { margin: 12px 0 2px; font-size: 16px; font-weight: 600; }

p { margin: 0 0 10px; }

.story p { color: var(--muted); max-width: 44em; }
.pull-mark { margin-left: 8px; font-size: 0.85em; white-space: nowrap; }

.story .pull { margin: 16px 0; }

.story .pull p {
  margin: 0;
  color: var(--ink);
  font-size: 20px;
  font-weight: 600;
}

/* Everything past the story starts below the floated hero shot. */
#how { clear: both; }

/* ---------- feature cards ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  margin-top: 4px;
}

.card {
  background: #fdfbf7;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
}

.card .glyph { font-size: 22px; line-height: 1; margin-bottom: 8px; }

/* Borrowed from the game's found-words list: label left, score right, on a
   tinted row. The joke only works if it looks like real scoring, so the chip
   and the accent "+N" match what the app actually shows. */
.score { list-style: none; margin: 2px 0 0; padding: 0; }

.score li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-top: 4px;
  padding: 4px 9px;
  border-radius: 7px;
  background: var(--bg);
  font-size: 14px;
  color: var(--muted);
}

.score .plus { font-weight: 700; font-size: 13px; color: var(--accent); }

.note { margin: 14px 0 0; font-size: 14px; color: var(--muted); }
.card h3 { margin: 0 0 4px; font-size: 16px; font-weight: 700; }
.card p { margin: 0; font-size: 15px; color: var(--muted); }

/* ---------- shots ---------- */

.shots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 10px;
}

figure { margin: 0; }

figure img { width: 100%; border-radius: 10px; }

.shots img {
  border-radius: 16px;
  box-shadow:
    0 1px 0 rgba(43, 29, 24, 0.14),
    0 2px 5px rgba(43, 29, 24, 0.06),
    0 14px 32px rgba(43, 29, 24, 0.13);
}

figcaption {
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}

/* ---------- long-form pages ---------- */

.doc h1 { margin: 0 0 4px; font-size: 30px; font-weight: 700; letter-spacing: -0.02em; }
.doc .updated { margin: 0 0 18px; font-size: 13px; color: var(--muted); }
.doc h1 , .doc h2 { color: var(--ink); }
.doc h2 { margin-top: 22px; font-size: 21px; }
.doc p, .doc li { color: var(--muted); }
.doc ul { margin: 6px 0 10px; padding-left: 16px; }
.doc li { margin: 4px 0; }

/* ---------- 404 ---------- */

.notfound { padding-top: 40px; }

.notfound-code {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--accent);
}

.notfound h1 { font-size: clamp(34px, 5vw, 46px); letter-spacing: -0.03em; color: var(--accent); }
.notfound p { max-width: 34em; }

/* ---------- footer ---------- */

.footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  margin-top: 24px;
  font-size: 12px;
  color: var(--muted);
}

.footer-credit { grid-column: 1; }

.footer-mark { grid-column: 2; text-align: center; }

.footer-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--ink);
}

.footer-badge:hover { text-decoration: none; }
.footer-badge img { width: 96px; height: 96px; border-radius: 20px; }
.footer-badge span { font-size: 14px; }

.footer-links { grid-column: 3; text-align: right; display: flex; gap: 14px; justify-content: flex-end; }
.footer-links a { color: var(--muted); }

/* Too narrow to wrap prose beside a 320px shot: stack it instead. */
@media (max-width: 899px) {
  .hero { display: flex; flex-direction: column; padding-top: 28px; }
  .hero > div { order: -1; max-width: 34em; }
  .hero-shot { float: none; width: 260px; margin: 26px auto 20px; }
}

@media (max-width: 760px) {
  .hero-shot { width: 240px; }
  .shots { grid-template-columns: 1fr; max-width: 300px; margin-inline: auto; }
  .footer { grid-template-columns: 1fr; text-align: center; }
  .footer-credit, .footer-mark, .footer-links { grid-column: 1; }
  .footer-links { justify-content: center; text-align: center; }
}