/* LocalTake design system (docs/design-system.md, draft 3, Oct 3 2026). The one stylesheet every reader page loads.
   §2 tokens live here and nowhere else: no page uses a literal color or font name outside this file.
   Fonts: one Google Fonts <link> per page (Bricolage Grotesque + Newsreader), loaded beside this file. */
:root,.lt-theme{ /* .lt-theme: until every page is on the system, the new page carries the tokens on its own element */
  --paper:#F6F3EC;                 /* page background */
  --card:#FFFFFF;                  /* inputs; rare panels; never event cards */
  --ink:#1C1B18;                   /* text, primary button */
  --ink-2:#5F5A50;                 /* meta, labels, secondary nav (7:1 on paper) */
  --rule:rgba(28,27,24,0.14);      /* hairlines */
  --rule-strong:rgba(28,27,24,0.32); /* input and chip borders */
  --accent:#D25A2E;                /* terracotta: the dot, link underlines, nav rule, up-thumb; marks only */
  --accent-text:#A33E16;           /* eyebrows, link hover (5.4:1 on paper) */
  --complement:#2B4A6F;            /* slate blue: down-thumb, tags that tell two things apart, dark panels */
  --head:"Bricolage Grotesque",system-ui,sans-serif;
  --body:Newsreader,Georgia,serif;
  --radius:6px;                    /* buttons, inputs */
  --radius-pill:999px;             /* chips, vote buttons */
  --measure:720px;                 /* max width of any text column */
  --page:1120px;                   /* max width of the page container */
  --scrim:rgba(28,27,24,0.45);     /* behind a sheet or dialog: ink at an opacity */
}
:root,.lt-theme{color-scheme:light}
/* §6 Partner skin: one override block on <html data-theme="…">. Only these keys change; layout, spacing,
   radius and the eyebrow pattern never do. No partner skin ships until there is an agreement.
:root[data-theme="example"]{
  --paper:#F0EAE4; --ink:#111018; --ink-2:#2A2830;
  --rule:rgba(17,16,24,0.15); --rule-strong:rgba(17,16,24,0.35);
  --accent:#C4452F; --accent-text:#9E3220;
  --head:Figtree,system-ui,sans-serif; --body:"Source Serif 4",Georgia,serif;
  --brand:"Partner"; --footer-line:"Powered by LocalTake";
}
*/

/* §8 focus, everywhere */
:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px}

/* §4 components. Prefixed lt- so they never collide with a page's older classes. */
.lt-page{max-width:var(--page);margin:0 auto;padding:0 20px}
.lt-measure{max-width:var(--measure)}
.lt-eyebrow{font-family:var(--head);font-weight:600;font-size:12px;line-height:1.3;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.lt-eyebrow.cat{color:var(--accent-text)}
/* Status (Oct 15): a cancelled, postponed or rescheduled card is dimmed and says so where the time was; a sold-out one wears a tag. */
.lt-row.lt-off,.lt-pick.lt-off{opacity:.55}
.lt-row .d span.state,.lt-pick .lt-meta b.state{font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink)}
.lt-tag.sold{background:var(--ink-2)}
.lt-tag{display:inline-flex;align-items:center;height:24px;padding:0 8px;border-radius:4px;background:var(--complement);color:var(--paper);font-family:var(--head);font-weight:600;font-size:11px;line-height:1;letter-spacing:.06em;text-transform:uppercase}
.lt-meta{font-family:var(--head);font-weight:500;font-size:14px;line-height:1.4;color:var(--ink-2)}
a.lt-u,.lt-u a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:1.5px;text-underline-offset:3px}
a.lt-u:hover,.lt-u a:hover{color:var(--accent-text)}

.lt-btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:var(--radius);border:1.5px solid var(--ink);background:var(--ink);color:var(--paper);font-family:var(--head);font-weight:600;font-size:15px;letter-spacing:.01em;line-height:1.2;text-decoration:none;cursor:pointer;width:auto}
.lt-btn.ghost{background:transparent;color:var(--ink)}
.lt-btn.ghost:hover{background:var(--card)}
.lt-btn.sm{min-height:40px}
.lt-btn.text{background:transparent;border-color:transparent;color:var(--accent-text)}
.lt-btn.text:hover{background:var(--card)}
.lt-notice{max-width:var(--page);margin:12px auto 0;padding:10px 20px;font-family:var(--head);font-weight:600;font-size:15px;color:var(--ink)}

.lt-chip{appearance:none;display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:var(--radius-pill);border:1px solid var(--rule-strong);background:transparent;color:var(--ink);font-family:var(--head);font-weight:600;font-size:13px;cursor:pointer}
.lt-chip.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* Vote buttons (decided Oct 3): terracotta up, slate down, line icons, no emoji, no counts. */
.lt-vote{appearance:none;display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;padding:0;border-radius:var(--radius-pill);border:1.5px solid currentColor;background:transparent;cursor:pointer}
.lt-vote svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.lt-vote svg .w{stroke-linecap:butt} /* the wrist: cuff and hand stay two shapes when filled */
.lt-vote.up{color:var(--accent)}
.lt-vote.down{color:var(--complement)}
.lt-vote:hover{border-width:2px}
.lt-vote.on{background:currentColor}
.lt-vote.on svg{stroke:var(--paper);fill:var(--paper)}
.lt-vote.on svg .w{stroke:currentColor}
.lt-vote.sm{width:36px;height:36px}
.lt-vote.sm svg{width:22px;height:22px}
.lt-vote.xs{width:28px;height:28px} /* the Events page's rows (Oct 8) */
.lt-vote.xs svg{width:17px;height:17px}
.lt-votes{display:inline-flex;gap:6px;align-items:center}

/* List row: day column, body, vote pair. Hairlines, no box. */
.lt-row{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:16px;padding:16px 0;border-top:1px solid var(--rule);align-items:center}
.lt-rows>.lt-row:last-child{border-bottom:1px solid var(--rule)}
.lt-row .d{align-self:start;padding-top:3px;font-family:var(--head);font-weight:700;font-size:13px;line-height:1.3;text-transform:uppercase;color:var(--ink-2)}
.lt-row .d span{display:block;font-weight:500;text-transform:none}
.lt-row .b{display:flex;flex-direction:column;gap:4px;min-width:0}
.lt-row .t{font-family:var(--head);font-weight:700;font-size:18px;line-height:1.25;letter-spacing:-.01em}
.lt-row .r{font-family:var(--body);font-size:16px;line-height:1.5;color:var(--ink)}
.lt-row .m{font-family:var(--head);font-weight:500;font-size:13px;line-height:1.4;color:var(--ink-2)}

/* The three picks: top pick spans both columns on desktop, second and third side by side. */
.lt-picks{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.lt-pick{display:flex;flex-direction:column;gap:10px;padding:20px 0 22px;border-top:1px solid var(--rule)}
.lt-pick .hl{margin:0;font-family:var(--head);font-weight:700;font-size:24px;line-height:1.15;letter-spacing:-.015em}
.lt-pick .why{margin:0;font-family:var(--body);font-size:17px;line-height:1.5}
.lt-pick .acts{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:2px}
.lt-pick .acts .sp{flex:1 1 auto}
.lt-pick.lead{grid-column:1/-1;gap:12px;padding:22px 0 26px;border-top:2px solid var(--ink)}
.lt-pick.lead .hl{font-size:32px;line-height:1.1;letter-spacing:-.02em}
.lt-pick.lead .why{font-size:18px;max-width:640px}
@media (min-width:900px){ .lt-picks{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px} }

/* No field under 16px on a reader page (John, Oct 24): below that an iPhone zooms the page when the field is tapped. A floor for any field
   no rule sizes; rules that size a field are held to it by scripts/style.test.mjs. */
input,textarea,select{font-size:16px}
.lt-input{width:100%;min-height:44px;padding:0 14px;border-radius:var(--radius);border:1.5px solid var(--rule-strong);background:var(--card);color:var(--ink);font-family:var(--body);font-size:16px}
.lt-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.lt-sechead{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:10px}
.lt-sechead h2,.lt-sechead h3{margin:0}
.lt-sechead .all{font-family:var(--head);font-weight:600;font-size:14px;color:var(--ink-2);white-space:nowrap}
.lt-h2{margin:0;font-family:var(--head);font-weight:700;font-size:24px;line-height:1.2;letter-spacing:-.015em;color:var(--ink)}

/* Header: bubble mark + wordmark left, the nav (Events · Guides) centered. On phones the nav is a second row, centered; no hamburger.
   Oct 12 (John): with the My Take button gone the nav sat at the far right; now it is centered over the main content column on a wide
   screen — the header mirrors the Events page's grid from 1000px (see below), so the nav's box is the column's content box — and over the
   page between 900 and 1000px, where there is no rail. The same rule on every page that carries the header, prerendered ones too. */
.lt-header{border-bottom:1px solid var(--rule);background:var(--paper)}
.lt-header .in{box-sizing:border-box;position:relative;max-width:var(--page);margin:0 auto;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.lt-brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.lt-mark{position:relative;display:inline-flex;align-items:center;justify-content:center;width:38px;height:32px;border:2px solid var(--ink);border-radius:10px 10px 10px 2px;font-family:var(--head);font-weight:800;font-size:13px;letter-spacing:.04em;color:var(--ink)}
.lt-mark::after{content:"";position:absolute;top:-5px;right:-5px;width:10px;height:10px;border-radius:var(--radius-pill);background:var(--accent)}
.lt-word{font-family:var(--head);font-weight:800;font-size:22px;letter-spacing:-.02em}
.lt-nav{display:flex;justify-content:center;gap:22px;max-width:var(--page);margin:0 auto;padding:0 20px 12px;font-family:var(--head);font-weight:600;font-size:15px}
.lt-nav a{color:var(--ink-2);text-decoration:none;padding-bottom:2px;border-bottom:2px solid transparent}
.lt-nav a.on{color:var(--ink);border-bottom-color:var(--accent)}
/* The shared header (Oct 24, John — header.html, one copy in every reader page): logo left; on the right a line-drawn magnifying glass
   then Sign in / Sign out; the nav on a second row at every width. The glass opens the search pill in place in the top row (header.js);
   on a phone the pill takes the logo's room while it's open. */
.lt-hright{display:flex;align-items:center;gap:2px;margin-left:auto}
.lt-sicon{appearance:none;border:0;background:none;padding:0;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink);cursor:pointer;border-radius:var(--radius-pill)}
.lt-sicon:hover{background:var(--card)}
.lt-header .lt-hsearch{display:none}
body.search-open .lt-header .lt-hsearch{display:flex;flex:1;min-width:0;max-width:620px;margin-left:auto;padding-top:2.5px;padding-bottom:2.5px} /* 44px, the icon's height: the row doesn't jump */
body.search-open .lt-sicon{display:none}
@media (max-width:899px){ body.search-open .lt-brand{display:none} }
.searchbox{display:flex;gap:6px;align-items:center;background:var(--card);border:1.5px solid var(--rule-strong);border-radius:999px;padding:4px 6px 4px 14px}
.searchbox:focus-within{border-color:var(--ink)}
.searchbox input{flex:1;min-width:0;min-height:36px;padding:0 4px 0 0;border:0;border-radius:0;background:transparent;font:inherit;font-size:16px;color:var(--ink);outline:none} /* 16px: under it, an iPhone zooms the page when the field is tapped (John, Oct 24) */
.searchbox button{appearance:none;border:0;border-radius:999px;padding:7px 12px;font:inherit;font-family:var(--head);font-size:13px;font-weight:600;cursor:pointer;background:var(--ink);color:var(--paper);flex:none}
.searchbox button.x{background:transparent;color:var(--ink-2);padding:6px 6px;font-size:16px}
.lt-header .searchhint{max-width:var(--page);margin:-8px auto 8px;padding:0 20px;font-size:12px;color:var(--ink-2)}
.lt-header .searchhint:empty{display:none}
/* The account control (John, Oct 20): Sign in / Save profile / Sign out, across from the logo on a phone, at the right of the header row on a wide screen — the
   nav's face, a shade lighter, a utility not a fourth section. Its card hangs under the header, its right edge on the page container's (where the control sits, not the
   window's — John, Oct 20: on a wide screen it sat off at the window's edge); on a phone it is the width of the page minus the gutters. */
.lt-auth{appearance:none;background:none;border:0;margin:0;padding:0 2px;min-height:40px;font-family:var(--head);font-weight:500;font-size:14px;color:var(--ink-2);cursor:pointer;white-space:nowrap}
.lt-auth:hover{color:var(--accent-text)}
.lt-header{position:relative}
.lt-authcard{display:none;position:absolute;top:100%;right:max(20px,calc(50% - var(--page)/2 + 20px));z-index:30;box-sizing:border-box;width:320px;margin-top:-1px;background:var(--paper);border:1px solid var(--ink);border-radius:var(--radius);padding:16px;flex-direction:column;gap:12px;font-family:var(--body);font-size:16px;line-height:1.4;color:var(--ink)}
.lt-authcard.on{display:flex}
.lt-authcard .lt-authq{margin:0;font-family:var(--body);font-size:17px}
.lt-authcard .lt-btn{width:100%}
.lt-authcard hr{border:0;border-top:1px solid var(--rule);margin:2px 0}
.lt-authcard .lt-authx{appearance:none;position:absolute;top:8px;right:8px;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:var(--radius-pill);background:transparent;color:var(--ink-2);cursor:pointer}
.lt-authcard .lt-authx:hover{color:var(--ink);background:var(--card)}
.lt-authcard .lt-authx+.lt-authq{padding-right:36px}
.lt-authcard .lt-authnew{margin:0;font-family:var(--head);font-weight:500;font-size:14px;color:var(--ink-2)}
.lt-authcard .fine{margin:-6px 0 0;font-size:13px}
@media (max-width:899px){ .lt-authcard{left:16px;right:16px;width:auto} }

.lt-footer{border-top:1px solid var(--rule);background:var(--paper)}
.lt-footer .in{max-width:var(--page);margin:0 auto;padding:24px 20px 40px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--head);font-size:13px;color:var(--ink-2)}
.lt-footer .links{display:flex;gap:18px}
.lt-footer a{color:var(--ink-2)}