/* 395local design system -- tokens + generic components (395-244, Batch FZ PR 2).

   WHAT THIS IS: the shared design tokens (colour roles, type scale, spacing,
   radii, shadow) and a small set of GENERIC components, from the approved
   proposal (DH design review 2026-09-29; Andrew approved proposals 1-4 on
   2026-10-02). The token names and values are the mockup's, verbatim.

   WHO USES IT: the event cards on index.html (home + landing pages) use
   .ds-card / .ds-tag. The event page (detail.html) is being moved onto
   it in the same batch and will use .ds-btn / .ds-notice / .ds-quiet-row too.
   Other pages adopt it one at a time; nothing else depends on it today.

   RULES FOR THIS FILE (tests/ds-395-244-ds.test.js enforces the testable ones):
   - Component classes are ds- prefixed so they cannot collide with a page's own CSS.
   - NO global element rules (no *{}, body{}, h1{}, a{} ...). Every existing page
     has its own base styles; this file must be safe to include anywhere.
   - --accent (#cf9c34, bright gold) is a FILL only (buttons, badges), never a text
     colour. Gold text/links use --accent-ink (#8a6414, 5.1:1 on paper; the old
     #a87a1f was 3.6:1).
   - Fonts are NOT loaded here (no @import: it would block rendering). The including
     page loads Fraunces (18px and up) + Public Sans (below 18px) itself, as every
     page does today; the stacks below fall back to Georgia / system-ui.
   - A page that defines its own :root variable with one of these names wins if it
     comes later in the cascade. index.html defines --line and --shadow itself
     (slightly different values), so on index.html the cards use those two.

   OUT OF SCOPE: dark mode (DH B2 item 19). The colour roles make it one extra
   block later; it is deliberately not here. */

:root{
  /* colour roles (brand kept: pinyon, sage, gold, paper) */
  --bg:#fbf8f0;           /* paper: page */
  --surface:#ffffff;      /* cards, fact block */
  --surface-2:#f1ebdd;    /* paper-dim: quiet panels, placeholders */
  --ink:#222820;          /* body text 14.2:1 */
  --ink-2:#3b5a43;        /* sage: secondary text 7.3:1 */
  --brand:#2a3b2e;        /* pinyon: headings, category tag, dark panels */
  --brand-deep:#1d2a21;   /* header / footer */
  --accent:#cf9c34;       /* gold: fills only (buttons, badges), never text on paper */
  --accent-ink:#8a6414;   /* NEW: gold for text/links on paper, 5.1:1 (today's #a87a1f is 3.6:1) */
  --line:#e2dccb;
  --ok:#3b6d11;
  /* type scale: 7 sizes (today detail.html uses 24) */
  --t-xs:12px; --t-sm:14px; --t-md:16px; --t-lg:18px; --t-xl:22px; --t-2xl:28px; --t-3xl:36px;
  /* spacing: 4-pt steps */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  /* radius: 3 values (today 15+) */
  --r-sm:8px; --r-md:14px; --r-pill:999px;
  --shadow:0 1px 2px rgba(29,42,33,.06),0 4px 14px rgba(29,42,33,.06);
}

/* ---- button: two styles, both pills. One primary per screen (gold = the next step). ---- */
.ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;border-radius:var(--r-pill);padding:11px 18px;font:700 var(--t-sm)/1.2 "Public Sans",system-ui,sans-serif;text-decoration:none;border:1px solid transparent;white-space:nowrap;cursor:pointer}
.ds-btn--primary{background:var(--accent);color:var(--brand-deep)}
.ds-btn--secondary{background:var(--surface);color:var(--brand);border-color:var(--line)}
.ds-btn svg{width:17px;height:17px}

/* ---- tag: small label. Only what helps a reader choose; cards show at most one. ---- */
.ds-tag{display:inline-block;box-sizing:border-box;max-width:100%;font:700 var(--t-xs)/1.3 "Public Sans",system-ui,sans-serif;border-radius:var(--r-pill);padding:var(--s1) 10px;background:var(--surface-2);color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ds-tag--cat{background:var(--brand);color:var(--bg)}
/* the mockup's #f3e6c4 under --accent-ink is 4.33:1 (< 4.5 for 12px text); this lighter tint is 4.68:1 */
.ds-tag--free{background:#f8efd8;color:var(--accent-ink)}

/* ---- notice: the ONE shared notice style (replaces the inline-styled banners) ----
        Deliberately a plain BLOCK, not flex/grid: the 395-200 lapsed-series banner is a sentence of mixed inline content
        ("<strong>...</strong> Check with <a>Org</a> for future dates."); a flex container would turn each piece into its own
        column and trim the spaces between them. If an icon is ever wanted, flex goes on an icon wrapper INSIDE the notice only. ---- */
.ds-notice{box-sizing:border-box;background:#f6ecd2;border:1px solid #e9d9a8;border-radius:var(--r-sm);padding:10px var(--s3);font:400 var(--t-sm)/1.45 "Public Sans",system-ui,sans-serif;color:var(--brand)}
.ds-notice a{color:var(--accent-ink);font-weight:600}

/* ---- card: event card. Phones and lists: a row (thumbnail left). Add .ds-stack to the
        container and from 600px up the cards stack (image on top), as in the grid. ---- */
.ds-card{display:grid;grid-template-columns:84px minmax(0,1fr);gap:var(--s3);box-sizing:border-box;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s3);text-decoration:none;color:var(--ink);box-shadow:var(--shadow);font-family:"Public Sans",system-ui,sans-serif}
.ds-card:hover{box-shadow:0 2px 4px rgba(29,42,33,.08),0 10px 24px rgba(29,42,33,.1)}
.ds-card-th{width:84px;height:105px;border-radius:10px;overflow:hidden;background:var(--surface-2);display:grid;place-items:center}
.ds-card-th img{display:block;width:100%;height:100%;object-fit:cover}
/* no image: the category Chalky pose (index.html's chalkyImg / detail.html's) in the same thumbnail slot, shown whole on the
   Chalky paper tint (--chalky-bg is each page's own token; the fallback is its value) rather than cropped like a poster. */
.ds-card-th--chalky{background:var(--chalky-bg,#fcf7ec)}
.ds-card-th--chalky img{width:auto;height:82%;max-width:100%;object-fit:contain}
.ds-card-body{min-width:0}
.ds-card-when{font-size:var(--t-sm);font-weight:700;line-height:1.35;color:var(--accent-ink)}
.ds-card-title{font:600 var(--t-lg)/1.2 "Fraunces",Georgia,serif;color:var(--brand);margin:2px 0 3px;overflow-wrap:anywhere}
.ds-card-where{font-size:var(--t-sm);line-height:1.4;color:var(--ink-2);overflow-wrap:anywhere}
.ds-card-bits{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
@media(min-width:600px){
  .ds-stack .ds-card{grid-template-columns:minmax(0,1fr);padding:0;overflow:hidden}
  .ds-stack .ds-card-th{width:100%;height:180px;border-radius:0}
  .ds-stack .ds-card-body{padding:0 var(--s4) var(--s4)}
}

/* ---- quiet row: small low-emphasis links ("Report a correction", "Share" ...) ---- */
.ds-quiet-row{display:flex;gap:var(--s4);flex-wrap:wrap;margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line);font:400 var(--t-sm)/1.4 "Public Sans",system-ui,sans-serif}
.ds-quiet-row a{color:var(--ink-2);font-weight:600}