/* Warm Editorial design language for PNG. Chosen 2026-10-19.
   One language, applied with discipline. See DESIGN-LANGUAGE.md. */

:root {
  --we-ground: #FAF8F4;
  --we-cream: #F5F1E8;
  --we-ink: #2A2620;
  --we-muted: #6B6259;
  --we-green: #1E3D2B;
  --we-terracotta: #C67B5C;
  --we-sage: #A3B18A;
  --we-line: #E8E0D2;
  --we-serif: Georgia, 'Times New Roman', serif;
  --we-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Eyebrows: small caps, letterspaced, ink-colored. One style everywhere. */
.we-eyebrow {
  font-family: var(--we-sans);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--we-ink);
  font-weight: 600;
  margin: 0 0 12px;
}

/* Headlines: serif roman, at most one italic accent word. */
.we-headline {
  font-family: var(--we-serif);
  font-weight: 400;
  color: var(--we-ink);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
}
.we-headline em {
  font-style: italic;
  color: var(--we-terracotta);
}
.we-headline-xl { font-size: clamp(2.5rem, 5vw, 4rem); }
.we-headline-lg { font-size: clamp(1.8rem, 3.5vw, 2.5rem); }
.we-headline-md { font-size: 1.4rem; }

/* Stats band: 3 big numbers, small-caps labels, generous whitespace. */
.we-stats {
  display: flex;
  gap: 48px;
  padding: 40px 0;
  border-top: 1px solid var(--we-line);
  border-bottom: 1px solid var(--we-line);
  margin: 48px 0;
}
.we-stat { flex: 1; text-align: left; }
.we-stat-number {
  font-family: var(--we-serif);
  font-size: 2.8rem;
  color: var(--we-ink);
  line-height: 1;
  margin-bottom: 8px;
}
.we-stat-label {
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--we-muted);
}

/* Collection cards: identical structure, image-led, editorial rail names. */
.we-collections {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 32px 0 64px;
}
.we-collection {
  background: #fff;
  border: 1px solid var(--we-line);
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: block;
}
.we-collection img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
}
.we-collection-body { padding: 20px; }
.we-collection-body .we-eyebrow { margin-bottom: 8px; }
.we-collection-title {
  font-family: var(--we-serif);
  font-size: 1.25rem;
  margin: 0 0 8px;
}
.we-collection-desc {
  font-size: 14px;
  color: var(--we-muted);
  line-height: 1.5;
  margin: 0;
}

/* Event rows: strict rhythm. Title, group (eyebrow), date/venue. */
.we-event {
  padding: 20px 0;
  border-bottom: 1px solid var(--we-line);
}
.we-event-title {
  font-family: var(--we-serif);
  font-size: 1.2rem;
  margin: 0 0 6px;
  color: var(--we-ink);
}
.we-event-title a { color: inherit; text-decoration: none; }
.we-event-title a:hover { text-decoration: underline; }
.we-event-group {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--we-terracotta);
  font-weight: 600;
  margin-bottom: 6px;
}
.we-event-meta {
  font-size: 14px;
  color: var(--we-muted);
}

/* Numbered sequences, never bullets. */
.we-steps { list-style: none; padding: 0; margin: 24px 0; counter-reset: step; }
.we-steps li {
  counter-increment: step;
  padding: 16px 0 16px 56px;
  position: relative;
  border-bottom: 1px solid var(--we-line);
  font-size: 15px;
  line-height: 1.6;
}
.we-steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  font-family: var(--we-serif);
  font-size: 1.1rem;
  color: var(--we-terracotta);
}

/* Section rhythm: eyebrow + headline + content. */
.we-section { padding: 64px 0; }
.we-section + .we-section { border-top: 1px solid var(--we-line); }

/* Filter chips: border, small caps labels. Not dropdowns. */
.we-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0; }
.we-chip {
  font-family: var(--we-sans);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--we-ink);
  background: transparent;
  border: 1px solid var(--we-line);
  border-radius: 999px;
  padding: 10px 16px;
  min-height: 44px;
  cursor: pointer;
}
.we-chip[aria-pressed="true"], .we-chip.is-active {
  background: var(--we-green);
  border-color: var(--we-green);
  color: #fff;
}

@media (max-width: 800px) {
  .we-collections { grid-template-columns: repeat(2, 1fr); }
  .we-stats { gap: 24px; }
  .we-stat-number { font-size: 2rem; }
  .we-section { padding: 40px 0; }
}

/* Events page is a listing (database virtues), not a reading page.
   Widen past the trust-page 68ch measure for event rows. */
.trust-page:has(.gx-grid) .page-body { max-width: none; }

/* Finish push 2026-10-21 (plan item 3, residue b): the static /events/
   index lists poster cards (.poster-grid), not gx rows, so the rule
   above never widened it and the listing sat in the 68ch text column.
   Same treatment for the poster listing. */
.trust-page:has(.poster-grid) .page-body { max-width: none; }

/* Graphical Editorial components (2026-10-19 redesign). New build only.
   These extend, never alter, the .we- classes above. */
.gx-about .page-body { max-width: 1100px; }

.gx-mission {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 40px;
  align-items: center;
  margin: 8px 0 48px;
}
.gx-mission-title {
  font-family: var(--we-serif);
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--we-ink);
  margin: 0 0 16px;
}
.gx-mission-title em { font-style: italic; color: var(--we-terracotta); }
.gx-mission-kicker {
  font-family: var(--we-serif);
  font-size: 1.4rem;
  color: var(--we-green);
  margin: 0 0 12px;
}
.gx-mission-copy p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--we-muted);
  max-width: 44ch;
  margin: 0;
}
.gx-mission-photo {
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 44px rgba(42, 38, 32, 0.16);
}
.gx-mission-photo img {
  width: 100%;
  height: 100%;
  min-height: 340px;
  object-fit: cover;
  display: block;
}

.gx-section-title {
  font-family: var(--we-serif);
  font-size: 2rem;
  line-height: 1.15;
  color: var(--we-ink);
  margin: 0 0 24px;
}

/* Oversized graphic stat blocks. Reads from across the room. */
.gx-statband {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 48px 0 64px;
}
.gx-stat {
  border-radius: 18px;
  padding: 32px 28px;
  color: var(--we-ink);
}
.gx-stat-cream { background: var(--we-cream); }
.gx-stat-sage { background: var(--we-sage); }
.gx-stat-terra { background: #F7E3D6; }
.gx-stat svg { width: 32px; height: 32px; margin-bottom: 16px; color: var(--we-green); }
.gx-stat-number {
  font-family: var(--we-serif);
  font-size: 4.4rem;
  line-height: 1;
  color: var(--we-ink);
}
.gx-stat-label {
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--we-ink);
  margin-top: 10px;
}

/* 4 big numbered graphic cards. Identical structure, always. */
.gx-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 0 0 64px;
}
.gx-step {
  background: #fff;
  border: 1px solid var(--we-line);
  border-radius: 18px;
  padding: 28px 24px;
  box-shadow: 0 10px 28px rgba(42, 38, 32, 0.08);
}
.gx-step-num {
  font-family: var(--we-serif);
  font-size: 3.4rem;
  line-height: 1;
  color: var(--we-terracotta);
}
.gx-step svg {
  width: 30px;
  height: 30px;
  margin: 16px 0 12px;
  color: var(--we-green);
}
.gx-step h3 {
  font-size: 1.1rem;
  line-height: 1.3;
  color: var(--we-ink);
  margin: 0 0 8px;
}
.gx-step p {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--we-muted);
  margin: 0;
}

/* Short note panels with icon lead. No wall of words. */
.gx-panel {
  background: #fff;
  border: 1px solid var(--we-line);
  border-radius: 18px;
  padding: 28px 32px;
  margin: 0 0 40px;
}
.gx-panel-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.gx-panel-head svg { width: 28px; height: 28px; color: var(--we-green); flex: none; }
.gx-panel h2 {
  font-family: var(--we-serif);
  font-size: 1.6rem;
  color: var(--we-ink);
  margin: 0;
}
.gx-panel p {
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--we-ink);
  max-width: 70ch;
}
.gx-panel p + p { margin-top: 12px; }

/* Graphic email action rows. */
.gx-action {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--we-cream);
  border-radius: 14px;
  padding: 16px 20px;
  margin-top: 14px;
  text-decoration: none;
  color: var(--we-ink);
}
.gx-action:hover { background: #EFE8D8; }
.gx-action svg { width: 24px; height: 24px; color: var(--we-green); flex: none; }
.gx-action strong { display: block; font-size: 1rem; }
.gx-action span { font-size: 0.85rem; color: var(--we-muted); }

.gx-editor {
  text-align: center;
  padding: 48px 0 8px;
}
.gx-editor .we-eyebrow { margin-bottom: 8px; }
.gx-editor-name {
  font-family: var(--we-serif);
  font-size: 2.4rem;
  color: var(--we-ink);
}

.gx-photo-credit {
  font-size: 0.75rem;
  color: var(--we-muted);
  text-align: center;
  margin: 32px 0 0;
}

@media (max-width: 800px) {
  .gx-mission { grid-template-columns: 1fr; gap: 24px; }
  .gx-statband { grid-template-columns: 1fr; }
  .gx-stat-number { font-size: 3.2rem; }
  .gx-steps { grid-template-columns: repeat(2, 1fr); }
}

/* Graphical event cards: bold, playful, dense. Cards share structure exactly. */
.gx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 32px 0 48px; }
.gx-card { background: #fff; border: 1px solid var(--we-line); border-radius: 10px; overflow: hidden; display: flex; min-width: 0; }
/* Date block: ONE component, shared by the /events/ cards and the homepage
   preview cards. The base rule carries no color; color comes only from the
   group modifier classes (.gx-c-*) below. See the color rule in
   DESIGN-STYLE-GRAPHICAL.md. The two context lines after the base rule set
   layout only (full-height rail on /events/, compact block on the homepage),
   never color. */
.gx-date { flex: none; width: 84px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; text-align: center; padding: 12px 6px; border-radius: 12px; }
.gx-card > .gx-date { align-self: stretch; border-radius: 0; }
.gx-event-card > .gx-date { align-self: flex-start; }
.gx-date-month { font-family: var(--we-sans); font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.gx-date-day { font-family: var(--we-serif); font-size: 2.3rem; line-height: 1.05; }
.gx-date-dow { font-family: var(--we-sans); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }

/* Group color modifiers: the only source of color for date blocks and chips. */
/* Chip colors: .gx-chip-qualified selectors outrank legacy .trust-page p rules. */
.gx-chip.gx-c-green { background: var(--we-green); color: #fff; }
.gx-chip.gx-c-terracotta { background: var(--we-terracotta); color: #fff; }
.gx-chip.gx-c-sage { background: var(--we-sage); color: var(--we-ink); }
.gx-chip.gx-c-cream { background: var(--we-cream); color: var(--we-ink); }
p.gx-chip { margin: 0; font-size: 11px; line-height: 1.5; }

.gx-card-body { padding: 18px 20px 16px; flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gx-card-title { font-family: var(--we-serif); font-weight: 400; font-size: 1.12rem; line-height: 1.3; margin: 0 0 10px; color: var(--we-ink); }
.gx-card-title a { color: inherit; text-decoration: none; }
.gx-card-title a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Group chip: ONE component, shared by both pages. No color in the base rule;
   the group modifier class (.gx-c-*) supplies background and text color. */
.gx-chip { display: inline-flex; align-items: center; align-self: flex-start; font-family: var(--we-sans); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; text-decoration: none; }
.gx-chip a { color: inherit; text-decoration: none; }
.gx-card-body > .gx-chip { margin: 0 0 10px; }
.gx-venue { font-size: 13px; line-height: 1.55; color: var(--we-muted); margin: 0 0 14px; }
.gx-facts { display: flex; flex-wrap: wrap; gap: 6px; margin: auto 0 0; padding: 0; }
.gx-fact { display: inline-flex; align-items: center; gap: 6px; font-family: var(--we-sans); font-size: 11px; font-weight: 600; letter-spacing: .03em; color: var(--we-ink); background: var(--we-ground); border: 1px solid var(--we-line); border-radius: 999px; padding: 6px 11px; text-decoration: none; white-space: nowrap; }
a.gx-fact:hover { border-color: var(--we-green); }
.gx-ico { font-style: normal; font-weight: 700; }

@media (max-width: 900px) { .gx-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .gx-grid { grid-template-columns: 1fr; } }

/* Graphical Editorial extensions (2026-10-19). See DESIGN-STYLE-GRAPHICAL.md.
   Every section leads with a visual. Cards share structure exactly. */

/* Event preview grid: big date blocks, title, meta, chips. 3 across. */
.gx-events{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:28px 0 8px}
.gx-event-card{display:flex;gap:16px;background:#fff;border:1px solid var(--we-line);border-radius:16px;padding:18px;box-shadow:0 2px 10px rgba(42,38,32,.05)}
.gx-event-body{min-width:0}
.gx-event-title{font-family:var(--we-serif);font-size:1.12rem;line-height:1.25;margin:2px 0 6px;color:var(--we-ink)}
.gx-event-title a{color:inherit;text-decoration:none}
.gx-event-title a:hover{text-decoration:underline}
.gx-event-meta{font-size:.875rem;color:var(--we-muted);margin:0 0 10px}
.gx-event-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.gx-more{margin:20px 0 0}

/* Tile component: the single tile implementation, moved here from the guides
   page so both pages share it. Tile bands use palette colors only (deep
   green, terracotta, sage, ink) set inline per tile with --band and
   --band-ink. Tile titles are heavy sans (weight 800): the tile component's
   house style, the sanctioned exception to the serif headline rule, tiles
   only. See DESIGN-STYLE-GRAPHICAL.md. */
.guide-tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--space-2);margin:var(--space-6) 0 0;padding:0;list-style:none}
.tile-hero{grid-column:span 4}
.tile-md{grid-column:span 3}
.tile-sm{grid-column:span 2}
.tile-link{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit;border-radius:var(--radius-sm);overflow:hidden;background:var(--band);transition:transform .16s ease,box-shadow .16s ease}
.tile-link:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.tile-link:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}
.tile-img{width:100%;display:block;object-fit:cover;background:var(--color-surface-soft)}
.tile-hero .tile-img{aspect-ratio:16/9}
.tile-md .tile-img{aspect-ratio:16/10}
.tile-sm .tile-img{aspect-ratio:4/3}
.tile-band{display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-4);background:var(--band);color:var(--band-ink);flex:1}
.tile-kicker{font-size:var(--font-size-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.tile-title{font-weight:800;line-height:var(--line-height-tight);letter-spacing:-.01em}
.tile-hero .tile-title{font-size:var(--font-size-2xl)}
.tile-md .tile-title{font-size:1.5rem}
.tile-sm .tile-title{font-size:1.25rem}
.tile-bandonly{min-height:220px}
.tile-bandonly .tile-title{font-size:1.5rem}
.tile-glyph{width:44px;height:44px;margin-bottom:var(--space-2)}
@media(max-width:1019px) and (min-width:620px){
  .guide-tiles{grid-template-columns:repeat(2,1fr)}
  .tile-hero{grid-column:span 2}
  .tile-md,.tile-sm{grid-column:span 1}
  .tile-md .tile-title,.tile-sm .tile-title{font-size:1.25rem}
}
@media(max-width:619px){
  .guide-tiles{grid-template-columns:1fr}
  .tile-hero,.tile-md,.tile-sm{grid-column:span 1}
  .tile-img{aspect-ratio:16/9}
  .tile-sm .tile-title{font-size:1.375rem}
}

/* Guides teaser: homepage tail module reusing the tile component above.
   Frame mirrors the homepage tail rhythm (hairline top, about 36px above),
   like .methodology and .more-panel. The honesty line lives in the caption
   under the grid, never inside a tile. */
.guides-teaser{border-top:1px solid var(--we-line);margin-top:36px;padding-top:36px}
.guides-teaser-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.guides-teaser-head .we-headline{margin-bottom:0}
.guides-teaser-more{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-family:var(--we-sans);font-size:.875rem;font-weight:650;color:var(--we-green);text-decoration:none;white-space:nowrap}
.guides-teaser-more svg{width:18px;height:18px;flex:none}
.guides-teaser-more:hover{text-decoration:underline;text-underline-offset:4px}
.guides-teaser-caption{font-family:var(--we-sans);font-size:.8125rem;line-height:1.6;color:var(--we-muted);margin:16px 0 0}
@media(max-width:619px){
  .guides-teaser-more{display:none}
}

/* Fit block: icon chips on a sage color block, no paragraph. */
.gx-fit{background:var(--we-sage);border-radius:16px;padding:22px 24px;margin:0 0 28px}
.gx-fit-title{font-family:var(--we-serif);font-size:1.3rem;margin:0 0 14px;color:var(--we-ink)}
.gx-fit-chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0}
.gx-fit-chip{display:inline-flex;align-items:center;gap:8px;background:#fff;border-radius:999px;padding:8px 14px;font-weight:600;font-size:.9rem;color:var(--we-green)}
.gx-fit-chip svg{width:18px;height:18px;flex:none}

/* About: photo plus one-line mission, no text block. */
.gx-about{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;padding:64px 0}
.gx-about-media img{width:100%;border-radius:16px;display:block;aspect-ratio:4/3;object-fit:cover}
.gx-about-credit{font-size:.75rem;color:var(--we-muted);margin:8px 0 0}
.gx-about-line{font-size:1.05rem;line-height:1.6;color:var(--we-ink);margin:0 0 16px}

/* Email signup: optional selects collapsed under details. */
.gx-personalize{border:1px dashed var(--we-line);border-radius:12px;padding:12px 16px}
.gx-personalize summary{cursor:pointer;font-weight:600;min-height:32px;display:flex;align-items:center}
.gx-personalize .field{margin-top:12px}

/* Resource cards: one-line compact cards. */
.gx-resource-line{font-size:.95rem;line-height:1.5;color:var(--we-muted);margin:0 0 12px}

@media (max-width:1000px){.gx-events{grid-template-columns:repeat(2,1fr)}}
@media (max-width:800px){
  .gx-about{grid-template-columns:1fr;padding:40px 0}
}
@media (max-width:560px){.gx-events{grid-template-columns:1fr}}

/* Section wrapper hooks (layout comes from .we-section). */
.gx-events-preview,.gx-guides-preview{display:block}
.gx-about-copy{min-width:0}

/* Calendar heatmap (Option 1, 2026-10-19): two compact mini months above an
   event-days-only agenda. Event days get a filled circle in the organizer
   group color; a second group on the same day shows as a dot beneath the
   number. Empty days are faint numbers, never labeled. Palette only. */
.gx-heat { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 28px 0 8px; }
.gx-heat-month { background: #fff; border: 1px solid var(--we-line); border-radius: 16px; padding: 20px 20px 14px; }
.gx-heat-title { font-family: var(--we-serif); font-weight: 400; font-size: 1.3rem; margin: 0 0 12px; color: var(--we-ink); }
.gx-heat-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.gx-heat-dow { font-family: var(--we-sans); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--we-muted); text-align: center; padding: 2px 0 6px; }
.gx-heat-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 46px; border-radius: 10px; font-family: var(--we-sans); font-size: .92rem; color: var(--we-ink); text-decoration: none; }
.gx-heat-cell.gx-heat-quiet { color: var(--we-muted); }
.gx-heat-cell.gx-heat-blank { min-height: 0; }
a.gx-heat-cell:hover { background: var(--we-ground); }
.gx-heat-day { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; font-weight: 700; line-height: 1; box-sizing: border-box; }
.gx-heat-dot { width: 6px; height: 6px; border-radius: 50%; margin-top: 3px; }
.gx-heat-fill-green { background: var(--we-green); color: #fff; }
.gx-heat-fill-terracotta { background: var(--we-terracotta); color: #fff; }
.gx-heat-fill-sage { background: var(--we-sage); color: var(--we-ink); }
.gx-heat-fill-cream { background: var(--we-cream); color: var(--we-ink); border: 1px solid var(--we-line); }

/* Calendar legend: one compact row under the heatmap decoding the group
   colors and the second-group dot. Small caps, palette only. */
.gx-heat-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 0; }
.gx-heat-legend-note { display: inline-flex; align-items: center; gap: 7px; font-family: var(--we-sans); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--we-muted); }
.gx-heat-legend-swatch { width: 8px; height: 8px; border-radius: 50%; background: var(--we-ink); flex: none; }

/* Calendar agenda: one section per event day, big serif date line, then the
   shared .gx-grid of event cards (same component as /events/). */
.gx-agenda-day { margin: 44px 0 0; scroll-margin-top: 90px; }
.gx-agenda-date { font-family: var(--we-serif); font-weight: 400; font-size: 1.55rem; color: var(--we-ink); margin: 0; }
.gx-agenda-num { font-size: 2.5rem; line-height: 1; }
.gx-agenda-day .gx-grid { margin-top: 20px; }
/* A day with a single event renders as one full-width row, never a stranded
   card in the 3-column grid. Multi-event days keep the grid. */
.gx-grid:has(> .gx-card:only-child) { grid-template-columns: 1fr; }

@media (max-width: 760px) { .gx-heat { grid-template-columns: 1fr; } }

/* ==========================================================================
   PORT LAYER: live production events page (poster cards).
   Graphical Editorial typography layered over the live poster system.
   The band colors (--band and --ink) are the live system's own category
   colors; the port layer never overrides them. Card data and markup are
   untouched: this layer only restyles type and the date chip.
   ========================================================================== */

/* One trust line under the page headline. */
.we-trust {
  font-family: var(--we-sans);
  font-size: 14px;
  color: var(--we-muted);
  line-height: 1.5;
  margin: 0 0 8px;
}
.we-trust a { color: var(--we-green); font-weight: 600; }

/* Event titles in serif, the editorial voice on a listing page. */
.poster-title {
  font-family: var(--we-serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* Date treatment: oversized serif day number inside the date chip,
   month as a small-caps label beneath it. The chip's own color comes
   from the band's --ink; nothing here recolors it. */
.poster-date-chip { text-align: center; }
.poster-date-chip b {
  display: block;
  font-family: var(--we-serif);
  font-weight: 700;
  font-size: 2.1rem;
  line-height: 1;
}
.poster-date-chip > span {
  display: block;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  margin-top: 2px;
}

/* Category kicker keeps its live style; portal polish only. */
.poster-kicker { letter-spacing: 0.1em; }

/* ==========================================================================
   PORT LAYER: calendar (heatmap + agenda) on live category colors.
   The calendar reads the same category colors as the /events/ poster
   bands: each class below pins one band's --band background and
   --band-ink text, exactly as the live poster markup defines them.
   ========================================================================== */
.gx-cat-pine { --band: #315d4e; --band-ink: #fff8e8; }
.gx-cat-linen { --band: #e2cdbc; --band-ink: #222725; }
.gx-cat-ink { --band: #222725; --band-ink: #fff8e8; }
.gx-cat-bark { --band: #655332; --band-ink: #fff8e8; }
.gx-cat-mist { --band: #dce5dd; --band-ink: #222725; }

/* One binding for every colored gx surface: date blocks, category chips,
   heatmap day circles. Two-class specificity outranks .trust-page p rules. */
:is(.gx-date, .gx-chip, .gx-heat-day):is(.gx-cat-pine, .gx-cat-linen, .gx-cat-ink, .gx-cat-bark, .gx-cat-mist) { background: var(--band); color: var(--band-ink); }
.gx-heat-dot:is(.gx-cat-pine, .gx-cat-linen, .gx-cat-ink, .gx-cat-bark, .gx-cat-mist) { background: var(--band); }
/* Light fills need a hairline edge on the white month card. */
.gx-heat-day.gx-cat-linen, .gx-heat-day.gx-cat-mist { border: 1px solid var(--we-line); }

/* it3-d4a (PNG-QA-0044): the gx About page is a designed layout, not a prose
   page. The 68ch prose cap (.trust-page .page-body in site-extras.css) was
   squeezing its designed grids (the four check-listings cards rendered at
   about 130px each). Widen this page only; prose trust pages keep 68ch.
   Panel heads become cream color-block bands so every lower section leads
   with a visual from the page's own design system. */
main.gx-about { display: block; padding: 32px 20px 48px; }
.gx-about .page-body { max-width: none; }
.gx-panel-head { margin: -28px -32px 20px; padding: 16px 32px; background: var(--we-cream); border-bottom: 1px solid var(--we-line); border-radius: 18px 18px 0 0; }
.gx-panel-head h2 { margin: 0; }
.gx-panel-head svg { width: 32px; height: 32px; }