/* Ride — web theme, faithful to DESIGN.md ("The Feed-Store Board").
 *
 * Every value below traces to a token in DESIGN.md. The rules that govern this
 * world and that a web page can honour:
 *   - One light ground. NO dark variant, NO theme toggle, NO `prefers-color-scheme`.
 *   - 2px stencil-ink borders. Never a 1px hairline.
 *   - Flat. No drop shadows on cards, chips or bands (the topbar text-shadow is
 *     the deliberate "painted lettering" 1px sign shadow, not elevation).
 *   - The One Red Rule: price-tag red is the primary action and the price-tag
 *     pin, and nothing else. Inline links are stencil-ink, not red.
 *   - Big Shoulders (display/labels/buttons), Work Sans (prose), JetBrains Mono
 *     (figures only). No serifs anywhere — this world is retail-utilitarian.
 */

:root {
  /* Colours — verbatim from DESIGN.md */
  --kraft:         #E7CD9D;  /* base screen ground */
  --kraft-sunk:    #D3B785;
  --chalk:         #F8F1E2;  /* card / input surfaces, lettering on dark bands */
  --stencil:       #291D10;  /* text, every border, every stroke */
  --muted:         #6B4A2E;  /* secondary text on kraft/chalk */
  --band-tan:      #D8C090;  /* secondary lettering on dark bands */
  --barnwood:      #5C3C22;  /* structural chrome + section labels */
  --barnwood-deep: #442C18;
  --red:           #A83A2C;  /* price-tag red — THE one saturated colour */
  --red-pressed:   #973327;  /* fill at ~90% for :active */
  --seal-rust:     #7A331A;

  /* Radii */
  --r-md: 6px;   /* cards, fields, buttons */
  --r-lg: 8px;   /* larger feed cards */
  --r-full: 9999px;

  /* The signature border */
  --border: 2px solid var(--stencil);

  /* Type stacks */
  --font-display: "Big Shoulders Display", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Work Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--kraft);
  color: var(--stencil);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 44rem; margin: 0 auto; padding: 0 20px; }

/* Topbar — a barnwood band with woodgrain, no border, no radius --------------
 * The barnwood-to-kraft colour change is the division (DESIGN: bands have no
 * border). Woodgrain is a 2px-on / 5px-off stripe in stencil ink at 10%. */
.topbar {
  background-color: var(--barnwood);
  background-image: repeating-linear-gradient(
    to bottom, rgba(41, 29, 16, .10) 0 2px, transparent 2px 7px);
  padding: 14px 0 18px;
}
.topbar .wrap { display: flex; align-items: center; gap: .7rem; }

/* Seal — the app's own mark: a single-R glyph in a ring, rotated -2°, with a
 * concentric low-alpha halo (a ring, not elevation). WRL monogram is retired. */
.seal {
  width: 46px; height: 46px; flex: none;
  border: var(--border); border-radius: var(--r-full);
  background: var(--chalk); color: var(--stencil);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 900; font-size: 1.7rem;
  line-height: 1; transform: rotate(-2deg);
  box-shadow: 0 0 0 3px rgba(248, 241, 226, .16); /* halo ring */
}

/* Painted display title — chalk on barnwood with the hard 1px sign shadow. */
.topbar-title {
  font-family: var(--font-display); font-weight: 900; font-size: 1.35rem;
  text-transform: uppercase; letter-spacing: .01em; color: var(--chalk);
  text-shadow: 1px 1px 0 rgba(41, 29, 16, .30);
}

/* Section label — display face uppercase in barnwood, with a dashed barnwood
 * rule running to the end of its row (StitchDivider under a label). */
.section-label {
  font-family: var(--font-display); font-weight: 900; font-size: .9rem;
  text-transform: uppercase; letter-spacing: .06em; color: var(--barnwood);
  display: flex; align-items: center; gap: .8rem;
}
.section-label::after {
  content: ""; flex: 1; height: 2px;
  background: repeating-linear-gradient(
    to right, var(--barnwood) 0 5px, transparent 5px 9px);
}

/* Chips — pill, chalk fill, 2px stencil border, display face uppercase. */
.chip {
  font-family: var(--font-display); font-weight: 700; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .07em;
  background: var(--chalk); color: var(--stencil);
  border: var(--border); border-radius: var(--r-full);
  padding: 6px 14px; display: inline-block;
}

/* Price-tag card — chalk, 2px stencil border, 6px corners, flat. MUST sit on
 * kraft: the pin's halo is a kraft disc. `--tag` adds the red pin at top-left. */
.card {
  background: var(--chalk); border: var(--border); border-radius: var(--r-md);
  padding: 14px 16px;
}
.card--tag { position: relative; }
.card--tag::before {
  content: ""; position: absolute; top: -6px; left: 14px;
  width: 11px; height: 11px; border-radius: var(--r-full);
  background: var(--red);
  box-shadow: 0 0 0 4px var(--kraft); /* kraft halo disc — the comp's pin spread */
}
.card h3 {
  font-family: var(--font-display); font-weight: 900; font-size: .82rem;
  text-transform: uppercase; letter-spacing: .05em; color: var(--barnwood);
  margin-bottom: 6px;
}
.card p { font-family: var(--font-body); color: var(--stencil); font-size: .95rem; }

/* Primary button (App Store CTA) — price-tag red fill, chalk label, display
 * heavy uppercase. This is the one red action on the page.
 *
 * NOTE: Apple's marketing guidelines require the OFFICIAL black "Download on
 * the App Store" badge in production. At launch, swap this button for that
 * asset — that will visually override the One Red Rule here, which is an Apple
 * requirement, not a design regression. */
.btn-appstore {
  font-family: var(--font-display); font-weight: 900; font-size: 1rem;
  text-transform: uppercase; letter-spacing: .04em;
  background: var(--red); color: var(--chalk);
  border: 2px solid var(--red); border-radius: var(--r-md);
  padding: 12px 20px; display: inline-flex; align-items: center; gap: .65rem;
  text-decoration: none;
}
.btn-appstore:active { background: var(--red-pressed); border-color: var(--red-pressed); }
.btn-appstore svg { width: 22px; height: 22px; fill: var(--chalk); flex: none; }
.btn-appstore:focus-visible { outline: 3px solid var(--stencil); outline-offset: 3px; }

/* Stitch divider — the board's dashed rule, 2px tall, real dashes. */
.stitch {
  height: 2px; border: 0;
  background: repeating-linear-gradient(
    to right, var(--stencil) 0 6px, transparent 6px 11px);
}

/* Inline links — stencil-ink with a 2px underline (DESIGN: link text is
 * stencil-ink OR red; kept stencil so red stays reserved for action + pin). */
a { color: var(--stencil); text-decoration: underline;
    text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--stencil); outline-offset: 3px; border-radius: 2px; }

/* Figures — tabular mono, only where digits need to line up. */
.mono { font-family: var(--font-mono); font-feature-settings: "tnum"; }

/* Prose helpers */
.eyebrow {
  font-family: var(--font-display); font-weight: 700; font-size: .7rem;
  text-transform: uppercase; letter-spacing: .1em; color: var(--band-tan);
}
strong { font-weight: 600; }
.muted { color: var(--muted); }