/* =====================================================================
   Dither Weather — marketing site
   Tokens and layout lifted from the Claude Design source
   ("Dither Weather - Marketing Site.dc.html"), which authored everything
   as inline styles. Extracted to a real stylesheet here so the page has
   hover/focus states, media queries and reduced-motion support — none of
   which an inline-style export can carry.

   Palette is the APP's palette (aw.css / weather.css): paper, ink, the
   electric blue accent and the coral alert red. Keep them in sync.
   ===================================================================== */

:root {
  --paper:  #F4F2EA;
  --ink:    #1B1A16;
  --muted:  #6B6A62;
  --blue:   #1E1EE6;
  --coral:  #EB5337;
  /* Same hue (9.3°), darkened until it clears 4.5:1 on paper — measured: the brand coral is
     3.22:1, this is 4.52:1. Used for CORAL TEXT ONLY (eyebrows, section numbers, the FAQ marker).
     Graphic uses of coral — the feature rules, the note's left border — keep --coral, because a
     4px bar is not text and the brand colour should stay exact where it reads as brand. */
  --coral-text: #D03215;
  --line:   1.5px solid var(--ink);
  --shadow: 4px 4px 0 var(--ink);
  --shadow-lg: 8px 8px 0 var(--ink);
  --maxw:   1280px;
  --gutter: 28px;

  --display: 'Anton', Impact, sans-serif;
  --sans:    'Archivo', system-ui, -apple-system, sans-serif;
  --mono:    'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* The app is paper-on-ink in both its day and night palettes and the product
   IS the light artwork, so the site stays light in a dark-mode browser rather
   than inverting into a theme the product doesn't have. Declared explicitly so
   the UA doesn't auto-darken form controls out from under it. */
:root { color-scheme: light; }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;           /* the offset shadows can overhang at narrow widths */
}

::selection { background: var(--blue); color: var(--paper); }

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

/* A single visible focus ring for keyboard users across every interactive element.
   The design had no focus states at all — an inline-style export cannot express one. */
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* height:auto is load-bearing, not tidiness. Every <img> carries intrinsic width/height attributes
   (so the layout reserves space and nothing shifts on load); without height:auto a shrunk image
   keeps the literal height attribute and renders vertically stretched. It did — the press shots. */
img { max-width: 100%; height: auto; display: block; }

/* ── layout ───────────────────────────────────────────────────────── */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(56px, 8vw, 96px); }
.section + .section { border-top: var(--line); }

/* ── type ─────────────────────────────────────────────────────────── */
.eyebrow {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .16em; color: var(--coral-text);
  margin: 0 0 16px;
}
.eyebrow .cursor { animation: blink 1s steps(1) infinite; }
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

.h1 {
  font-family: var(--sans); font-weight: 800;
  font-size: clamp(30px, 4.4vw, 50px); line-height: 1.1; letter-spacing: -.01em;
  margin: 0 0 20px;
}
.h2 { font-family: var(--sans); font-weight: 800; font-size: clamp(24px, 3vw, 34px); line-height: 1.15; margin: 0; }
.h3 { font-family: var(--sans); font-weight: 700; font-size: 19px; line-height: 1.25; margin: 0 0 8px; }

.lede  { font-family: var(--mono); font-size: 14px; line-height: 1.7; color: var(--muted); max-width: 52ch; margin: 0 0 28px; }
.body  { font-family: var(--mono); font-size: 13.5px; line-height: 1.7; color: var(--muted); margin: 0; }
.small { font-family: var(--mono); font-size: 12px; line-height: 1.6; color: var(--muted); }

/* Numbered section headers: "02 — Twelve scenes, one forecast" */
.sec-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.sec-num {
  font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--coral-text);
  letter-spacing: .12em;
}

/* ── buttons ──────────────────────────────────────────────────────── */
.btn {
  font-family: var(--mono); font-weight: 700; font-size: 13px;
  text-transform: uppercase; letter-spacing: .07em;
  border: var(--line); background: var(--ink); color: var(--paper);
  padding: 14px 24px; display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; cursor: pointer; box-shadow: var(--shadow);
  transition: transform .08s ease, box-shadow .08s ease, background .12s ease;
}
.btn:hover { background: var(--blue); border-color: var(--blue); color: var(--paper); text-decoration: none; }
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.btn.small { padding: 9px 14px; font-size: 11px; letter-spacing: .05em; box-shadow: none; }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--paper); }
.btn[disabled], .btn[aria-disabled='true'] { opacity: .45; cursor: not-allowed; box-shadow: none; }
.btn[disabled]:hover, .btn[aria-disabled='true']:hover { background: var(--ink); border-color: var(--ink); }

/* ── chips / tags ─────────────────────────────────────────────────── */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  border: var(--line); padding: 5px 10px; display: inline-flex; align-items: center;
}
.chip.quiet { border-color: var(--muted); color: var(--muted); font-weight: 400; text-transform: none; letter-spacing: 0; }

/* ── framed media ─────────────────────────────────────────────────── */
.frame { position: relative; border: var(--line); box-shadow: var(--shadow-lg); background: var(--paper); overflow: hidden; }
.frame img { width: 100%; height: auto; }
/* The blue corner tick from the design — a small crop mark on the hero frame. */
.frame::before {
  content: ''; position: absolute; top: 6px; left: 6px; width: 11px; height: 11px;
  border-top: 1.5px solid var(--blue); border-left: 1.5px solid var(--blue);
  opacity: .6; z-index: 3; pointer-events: none;
}
.frame.flat { box-shadow: var(--shadow); }
.frame.plain::before { display: none; }

.cap { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: 9px; line-height: 1.5; }

/* ── header ───────────────────────────────────────────────────────── */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper); border-bottom: 2px solid var(--ink);
}
.site-head .wrap { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; row-gap: 8px; padding-block: 12px; }
.brand { display: flex; align-items: center; gap: 9px; flex: none; text-decoration: none; color: var(--ink); }
.brand img { width: 24px; height: 24px; image-rendering: pixelated; }
.brand span { font-family: var(--display); font-size: 18px; text-transform: uppercase; }
.brand:hover { text-decoration: none; }
.site-nav { display: flex; gap: 20px; flex-wrap: wrap; font-family: var(--mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
.site-nav a { color: var(--ink); text-decoration: none; }
.site-nav a:hover { color: var(--blue); }
.site-head .btn { margin-left: auto; flex: none; }
@media (max-width: 860px) { .site-nav { display: none; } .site-head .btn { margin-left: auto; } }

/* ── hero ─────────────────────────────────────────────────────────── */
.hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 56px; align-items: center; padding-block: clamp(40px, 7vw, 88px) 72px; }
.hero-cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }

/* ── generic grids ────────────────────────────────────────────────── */
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 34px; }
/* auto-fit would give THREE columns to a four-child grid at desktop width (the poems section did
   exactly that, shrinking each interface shot to a third). Pinned to two, collapsing at 720px. */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 22px; }
@media (max-width: 720px) { .grid-2 { grid-template-columns: 1fr; gap: 34px; } }

.feature .rule { width: 34px; height: 4px; background: var(--coral); margin-bottom: 14px; }

/* scene tiles */
/* Four columns, not auto-fit: twelve scenes divide evenly by 4, 3 and 2, so every breakpoint gets
   full rows. auto-fit chose five at desktop and left an orphan row of two. */
.scene-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 30px; }
@media (max-width: 1000px) { .scene-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .scene-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
.scene { border: var(--line); background: var(--paper); }
.scene img { width: 100%; height: auto; }
.scene .label {
  font-family: var(--mono); font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; padding: 8px 10px; border-top: var(--line);
}

.note {
  margin-top: 26px; border: var(--line); border-left: 5px solid var(--coral);
  padding: 14px 18px; font-family: var(--mono); font-size: 12.5px; line-height: 1.65;
}
.note strong { color: var(--coral-text); }

/* ── pricing ──────────────────────────────────────────────────────── */
.pricing { text-align: center; }
.price { font-family: var(--display); font-size: clamp(56px, 9vw, 92px); line-height: 1; }
.price-sub { font-family: var(--mono); font-size: 13px; color: var(--muted); margin: 10px 0 24px; }
.pricing .chips { justify-content: center; margin-bottom: 30px; }
.platforms { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 38px; text-align: left; }
.platform { border: var(--line); padding: 18px 20px; }
.platform .name { font-family: var(--sans); font-weight: 800; font-size: 16px; margin-bottom: 6px; }

/* ── waitlist ─────────────────────────────────────────────────────── */
.waitlist { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin: 0 auto; max-width: 520px; }
.waitlist input[type='email'] {
  flex: 1 1 260px; min-width: 0;
  font-family: var(--mono); font-size: 13px; color: var(--ink);
  background: var(--paper); border: var(--line); padding: 14px 14px;
}
.waitlist input[type='email']::placeholder { color: var(--muted); }
.form-msg { font-family: var(--mono); font-size: 12px; line-height: 1.6; margin-top: 12px; min-height: 1.2em; }
.form-msg[data-tone='ok']   { color: var(--blue); }
.form-msg[data-tone='err']  { color: var(--coral-text); }   /* error text, so it needs the AA variant too */
.form-msg[data-tone='info'] { color: var(--muted); }

/* ── FAQ ──────────────────────────────────────────────────────────── */
.faq { border-top: var(--line); margin-top: 22px; }
.faq details { border-bottom: var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 18px 2px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  font-family: var(--sans); font-weight: 700; font-size: 15px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: var(--mono); font-size: 18px; color: var(--coral-text); flex: none; }
.faq details[open] summary::after { content: '\2212'; }
.faq summary:hover { color: var(--blue); }
.faq .answer { padding: 0 2px 20px; font-family: var(--mono); font-size: 13px; line-height: 1.75; color: var(--muted); max-width: 72ch; }

/* ── press ────────────────────────────────────────────────────────── */
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 10px 22px; font-family: var(--mono); font-size: 13px; }
.facts dt { font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing: .06em; color: var(--muted); align-self: center; }
.facts dd { margin: 0; }
.press-shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 20px; }
.press-shots img { border: var(--line); }

/* ── closing band ─────────────────────────────────────────────────── */
.closer { background: var(--ink); color: var(--paper); text-align: center; padding-block: clamp(48px, 7vw, 80px); }
.closer .h2 { color: var(--paper); margin-bottom: 26px; }
.closer .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); box-shadow: 4px 4px 0 var(--blue); }
.closer .btn:hover { background: var(--blue); color: var(--paper); border-color: var(--blue); }
.closer .small { color: #C2BDAF; }
/* The closer band inverts to ink, so the page's paper-tuned text colours stop working on it.
   Measured against #1B1A16 before this override: the blurb (--muted #6B6A62) was 3.2:1 and the
   fallback mail link (--blue #1E1EE6) was 1.98:1 — the link was effectively unreadable. Both are
   below the 4.5:1 AA floor for body text. Scoped here rather than changing the tokens, which are
   correct everywhere else on the page. */
.closer .form-msg[data-tone='info'] { color: #C2BDAF; }
.closer a:not(.btn) { color: var(--paper); text-decoration: underline; }
.closer a:not(.btn):hover { color: #fff; }

/* ── footer ───────────────────────────────────────────────────────── */
.site-foot { border-top: var(--line); padding-block: 48px 26px; }
.foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 36px; }
.foot-title { font-family: var(--mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 12px; }
.foot-links { display: flex; flex-direction: column; gap: 7px; font-family: var(--mono); font-size: 12.5px; }
.foot-links a { color: var(--ink); text-decoration: none; }
.foot-links a:hover { color: var(--blue); text-decoration: underline; }
.attrib { font-family: var(--mono); font-size: 12px; line-height: 1.85; color: var(--muted); }
.attrib a { color: var(--muted); }
.colophon {
  margin-top: 36px; padding-top: 18px; border-top: var(--line);
  display: flex; gap: 16px; flex-wrap: wrap; justify-content: space-between;
  font-family: var(--mono); font-size: 11px; color: var(--muted);
}

/* ── accessibility helpers ────────────────────────────────────────── */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 10px 16px;
  font-family: var(--mono); font-size: 12px; text-decoration: none;
  transition: top .12s ease;
}
.skip-link:focus { top: 8px; }

@media (max-width: 640px) {
  :root { --gutter: 16px; --shadow-lg: 5px 5px 0 var(--ink); }
  .hero { gap: 36px; }
  .press-shots { grid-template-columns: 1fr 1fr; }
  .facts { grid-template-columns: 1fr; gap: 2px 0; }
  .facts dd { margin-bottom: 12px; }
}

/* ── spacing + alignment utilities ─────────────────────────────────
   These exist because the site ships a strict CSP: `style-src 'self'` with no
   'unsafe-inline'. Inline `style="…"` ATTRIBUTES are blocked by that directive —
   measured on the live deployment, which logged 20+ "Applying inline style
   violates ... The action has been blocked." Localhost never caught it because
   the dev server sends no CSP at all.

   So there are no inline styles anywhere in this site, on purpose. If you need a
   one-off nudge, add a utility here rather than a style attribute — a style
   attribute will silently do nothing in production and look fine locally. */
.mt-14 { margin-top: 14px; }
.mt-18 { margin-top: 18px; }
.mt-22 { margin-top: 22px; }
.mt-26 { margin-top: 26px; }
.mt-28 { margin-top: 28px; }
.mt-34 { margin-top: 34px; }
.mt-38 { margin-top: 38px; }
.mb-12 { margin-bottom: 12px; }
.mb-14 { margin-bottom: 14px; }
.mb-22 { margin-bottom: 22px; }
.items-start { align-items: start; }
.measure-34 { max-width: 34ch; }
.ink { color: var(--ink); }

/* Footer link lists are the ONLY navigation on a phone — the header nav is
   hidden under 860px. Measured at 375px: the rows were 19px tall with 7px gaps,
   under the 24px WCAG 2.5.8 target-size floor. Padding rather than a taller
   font so the visual rhythm is unchanged. */
@media (max-width: 860px) {
  .foot-links { gap: 2px; }
  .foot-links a { padding-block: 5px; }
}

/* The companion grid is capped BELOW its own pixel size on purpose (owner, 2026-09-16).
   These sprites are the product's crown-jewel art on a flat background — shown large and clean,
   the image is an off-the-shelf sprite sheet for anyone who right-clicks it. It was reshot from
   222px/cell down to 110px/cell (1954px wide -> 1058px), and this cap keeps the browser from
   stretching it back up: displayed at or under its native size, a lift is never better quality
   than what a visitor already sees. Do not raise either number without deciding to accept that. */
.companions-frame { max-width: 1058px; margin-inline: auto; }

/* ── the contact address, as the call to action ────────────────────
   Replaces a mailto: button that did nothing for anyone without a mail client
   configured (owner, 2026-09-16). The address is selectable text, so it works
   with JavaScript off and in a screenshot; the Copy button is a convenience on
   top and reports only what actually happened. */
.email-cta {
  display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border: var(--line); box-shadow: var(--shadow); background: var(--paper);
  padding: 12px 12px 12px 18px;
}
.email-addr {
  font-family: var(--mono); font-size: clamp(14px, 2.2vw, 19px); font-weight: 700;
  color: var(--ink); letter-spacing: -.01em;
  user-select: all;                 /* one click selects the whole address */
}
.closer .email-cta { background: var(--paper); box-shadow: 4px 4px 0 var(--blue); }
@media (max-width: 480px) {
  .email-cta { padding: 12px 14px; width: 100%; justify-content: space-between; }
}