/* ==========================================================================
   The Armchair Club — design system
   Brand: navy #2C569E, amber #F5A623 (sampled from the 2025 club logo)
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Brand */
  --navy-900: #0f1e3d;
  --navy-800: #16294f;
  --navy-700: #1e3c73;
  --navy-600: #24488a;
  --navy-500: #2c569e;
  --navy-400: #4d75bb;
  --navy-300: #8ea6d4;
  --navy-100: #dde5f3;
  --navy-50:  #eef2fa;

  --amber-600: #c47f0c;
  --amber-500: #f5a623;
  --amber-400: #f9bd55;
  --amber-100: #fdefd6;
  /* Text-safe amber: amber-600 only reaches 3.29:1 on white, which fails WCAG AA
     for normal-size text. This one clears 4.5:1 while staying on-brand. */
  --amber-text: #8a5a06;

  /* Neutrals */
  --ink:        #17202e;
  --ink-muted:  #55617a;
  --ink-faint:  #7d879b;
  --line:       #e2e6ee;
  --line-soft:  #eef0f5;
  --surface:    #ffffff;
  --surface-alt:#f6f8fc;

  --ok: #1c7c4a;
  --warn: #b4531b;

  /* Type */
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Barlow Condensed", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Type scale.
     Deliberately tight: the previous scale ran from 13px to 70px with big gaps,
     which is what made sizes look unrelated from one section to the next.
     Steps are roughly 1.25x, and only headings scale with the viewport. */
  --fs-xs:   0.8125rem;                                    /* 13px - captions, badges */
  --fs-sm:   0.9375rem;                                    /* 15px - meta, secondary  */
  --fs-base: 1.0625rem;                                    /* 17px - body, buttons    */
  --fs-md:   1.1875rem;                                    /* 19px - lead paragraphs  */
  --fs-lg:   clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);     /* 20-24px - h3            */
  --fs-xl:   clamp(1.5rem,  1.30rem + 0.90vw, 2rem);       /* 24-32px - h2            */
  --fs-2xl:  clamp(1.9rem,  1.60rem + 1.35vw, 2.6rem);     /* 30-42px - h1            */
  --fs-3xl:  clamp(2.2rem,  1.80rem + 1.80vw, 3.2rem);     /* 35-51px - hero h1       */

  /* Running text fills the content container rather than being capped, so text
     pages use the full 1200px like everything else on the page. Set this to a
     length (e.g. 62rem) to reintroduce a narrower measure. */
  --measure: none;

  /* Space */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 3rem;     --sp-8: 4rem;
  --sp-9: 6rem;
  --section-y: clamp(3rem, 2rem + 5vw, 6rem);

  /* Shell */
  --wrap: 1200px;
  --wrap-narrow: 760px;
  --radius: 14px;
  --radius-sm: 9px;
  --radius-lg: 22px;

  --shadow-sm: 0 1px 2px rgba(15,30,61,.06), 0 2px 6px rgba(15,30,61,.05);
  --shadow-md: 0 4px 10px rgba(15,30,61,.07), 0 12px 28px rgba(15,30,61,.08);
  --shadow-lg: 0 10px 24px rgba(15,30,61,.10), 0 28px 60px rgba(15,30,61,.12);

  --header-h: 76px;
  --ease: cubic-bezier(.4,0,.2,1);
}

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

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
p, li { overflow-wrap: break-word; }

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--navy-800);
  text-wrap: balance;
}
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }
h5, h6 { font-size: var(--fs-base); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); }

p { text-wrap: pretty; }
a { color: var(--navy-600); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--navy-500); }
strong, b { font-weight: 650; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-6) 0; }

::selection { background: var(--amber-100); color: var(--navy-800); }

/* ---------- Accessibility ---------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--amber-500);
  outline-offset: 2px;
  border-radius: 4px;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--navy-700); color: #fff; padding: var(--sp-3) var(--sp-5);
  border-radius: 0 0 var(--radius-sm) 0; font-weight: 600;
}
.skip-link:focus { left: 0; color: #fff; }
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- Layout primitives ---------- */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
@media (max-width: 480px) { .wrap { width: min(100% - 1.75rem, var(--wrap)); } }
.wrap-narrow { width: min(100% - 2.5rem, var(--wrap-narrow)); margin-inline: auto; }

/* Every page uses .wrap, so the banner, title and breadcrumbs land in exactly
   the same place site-wide. .wrap-prose is kept only as an alias in case any
   saved content still references it. */
.wrap-prose { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.section { padding-block: var(--section-y); }
.section--alt { background: var(--surface-alt); }
.section--navy {
  background: linear-gradient(160deg, var(--navy-800) 0%, var(--navy-600) 55%, var(--navy-700) 100%);
  color: #fff;
}
.section--navy h1, .section--navy h2, .section--navy h3 { color: #fff; }
.section--navy p { color: rgba(255,255,255,.86); }
.stack > * + * { margin-top: var(--sp-4); }

.section-head { max-width: var(--measure); margin-bottom: var(--sp-6); }
.section-head p { color: var(--ink-muted); font-size: var(--fs-base); margin-top: var(--sp-3); max-width: 60ch; }
.section--navy .section-head p { color: rgba(255,255,255,.82); }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-sm); font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--amber-text); margin-bottom: var(--sp-2);
}
.eyebrow::before { content: ""; width: 26px; height: 3px; border-radius: 2px; background: var(--amber-500); }
.section--navy .eyebrow { color: var(--amber-400); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: .72rem 1.5rem;
  font-family: var(--font-display);
  font-weight: 600; font-size: var(--fs-base); letter-spacing: .02em;
  border-radius: 999px; border: 2px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--amber-500); color: var(--navy-900); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--amber-400); color: var(--navy-900); box-shadow: var(--shadow-md); }
.btn--navy { background: var(--navy-600); color: #fff; }
.btn--navy:hover { background: var(--navy-500); color: #fff; }
.btn--ghost { border-color: currentColor; color: var(--navy-600); background: transparent; }
.btn--ghost:hover { background: var(--navy-600); color: #fff; border-color: var(--navy-600); }

/* Ghost buttons on any dark backdrop.
   This previously covered only .section--navy, so the same button was navy-on-
   navy in the hero (1.64:1) and in the CTA band it matched the background
   exactly (1:1) — effectively invisible. Every dark context is listed here. */
.section--navy .btn--ghost,
.hero .btn--ghost,
.page-hero .btn--ghost,
.cta-band .btn--ghost {
  color: #fff;
  border-color: rgba(255,255,255,.65);
}
.section--navy .btn--ghost:hover,
.hero .btn--ghost:hover,
.page-hero .btn--ghost:hover,
.cta-band .btn--ghost:hover {
  background: #fff;
  color: var(--navy-700);
  border-color: #fff;
}
.btn--sm { padding: .5rem 1.1rem; font-size: var(--fs-sm); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* ---------- Site header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .2s var(--ease);
}
.site-header.is-stuck { box-shadow: var(--shadow-md); }
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5);
  min-height: var(--header-h);
  max-width: 100%;
}
.site-brand { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; flex-shrink: 0; }
.site-brand img { height: 52px; width: auto; }
.site-brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.site-brand__name {
  font-family: var(--font-display); font-weight: 700; font-size: 1.4rem;
  color: var(--navy-600); letter-spacing: -.01em;
}
.site-brand__tag {
  font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600;
}

/* Desktop nav.
   min-width:0 lets the flex item shrink instead of forcing the header wider than
   the viewport — without it, a long menu pushes the page into horizontal scroll. */
.nav-primary { display: none; min-width: 0; }
@media (min-width: 1100px) { .nav-primary { display: block; } }
.nav-primary > ul { flex-wrap: wrap; justify-content: flex-end; }
.nav-primary ul { list-style: none; display: flex; align-items: center; gap: var(--sp-1); padding: 0; margin: 0; }

/* Tighten spacing on smaller desktops so more items fit before wrapping. */
@media (min-width: 1100px) and (max-width: 1320px) {
  .nav-primary a { padding: .5rem .55rem; font-size: .86rem; }
}
.nav-primary li { position: relative; }
.nav-primary a {
  display: block; padding: .55rem .78rem; border-radius: var(--radius-sm);
  font-weight: 550; font-size: var(--fs-sm); color: var(--navy-800); text-decoration: none;
  white-space: nowrap; transition: background-color .15s var(--ease), color .15s var(--ease);
}
.nav-primary a:hover { background: var(--navy-50); color: var(--navy-600); }
.nav-primary .current-menu-item > a,
.nav-primary .current_page_item > a,
.nav-primary .current-menu-ancestor > a,
.nav-primary .current_page_ancestor > a { color: var(--navy-600); background: var(--navy-50); }
.nav-primary .current-menu-item > a::after,
.nav-primary .current_page_item > a::after {
  content: ""; display: block; height: 3px; border-radius: 2px;
  background: var(--amber-500); margin: 4px .3rem -2px;
}

/* Dropdowns */
.nav-primary .menu-item-has-children > a::before {
  content: ""; float: right; margin: .55em 0 0 .4em;
  border: 4px solid transparent; border-top-color: currentColor; opacity: .55;
}
.nav-primary .sub-menu {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 250px;
  flex-direction: column; align-items: stretch; gap: 0;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: var(--sp-2);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
}
.nav-primary li:hover > .sub-menu,
.nav-primary li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-primary .sub-menu a { padding: .55rem .7rem; white-space: normal; }
.nav-primary .sub-menu .current-menu-item > a::after,
.nav-primary .sub-menu .current_page_item > a::after { display: none; }

.header-actions { display: flex; align-items: center; gap: var(--sp-3); }
.header-actions .btn { display: none; }
@media (min-width: 1180px) { .header-actions .btn { display: inline-flex; } }

/* Burger */
.nav-toggle {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 46px; height: 46px; padding: 0 11px;
  background: var(--navy-50); border: 1px solid var(--line); border-radius: var(--radius-sm);
  cursor: pointer;
}
@media (min-width: 1040px) { .nav-toggle { display: none; } }
.nav-toggle span {
  display: block; height: 2px; width: 100%; border-radius: 2px; background: var(--navy-700);
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.nav-mobile {
  position: fixed; inset: var(--header-h) 0 0 auto; width: min(90vw, 400px); z-index: 99;
  background: #fff; border-left: 1px solid var(--line); box-shadow: var(--shadow-lg);
  padding: var(--sp-5) var(--sp-5) var(--sp-8);
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(100%); visibility: hidden;
  transition: transform .3s var(--ease), visibility .3s;
}
.nav-mobile.is-open { transform: translateX(0); visibility: visible; }
@media (min-width: 1040px) { .nav-mobile, .nav-scrim { display: none !important; } }
.nav-mobile ul { list-style: none; padding: 0; margin: 0; }
.nav-mobile > ul > li { border-bottom: 1px solid var(--line-soft); }
.nav-mobile a {
  display: block; padding: .85rem .2rem; font-size: var(--fs-md); font-weight: 550;
  color: var(--navy-800); text-decoration: none;
}
.nav-mobile a:hover { color: var(--navy-500); }
.nav-mobile .sub-menu { padding-left: var(--sp-4); padding-bottom: var(--sp-3); }
.nav-mobile .sub-menu a { padding: .45rem .2rem; font-size: var(--fs-sm); color: var(--ink-muted); }
.nav-mobile .current-menu-item > a, .nav-mobile .current_page_item > a { color: var(--navy-500); font-weight: 650; }
.nav-mobile__cta { margin-top: var(--sp-5); }
.nav-mobile__cta .btn { width: 100%; }
.nav-scrim {
  position: fixed; inset: 0; z-index: 98; background: rgba(15,30,61,.45);
  opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s;
  border: 0; padding: 0; cursor: pointer;
}
.nav-scrim.is-open { opacity: 1; visibility: visible; }
body.nav-open { overflow: hidden; }

/* ---------- Hero ---------- */
.hero { position: relative; isolation: isolate; color: #fff; overflow: hidden; }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, rgba(15,30,61,.94) 0%, rgba(30,60,115,.86) 45%, rgba(44,86,158,.62) 100%);
}
.hero--plain::after { background: linear-gradient(160deg, var(--navy-800), var(--navy-600)); }
/* max-width sits on a child, not on .wrap itself. When both classes shared one
   element, .wrap's margin-inline:auto centred the 46rem box and the hero text
   started 232px right of every other section on the page. */
.hero__inner { padding-block: clamp(3.5rem, 2rem + 8vw, 7.5rem); }
.hero__content { max-width: 46rem; }
.hero h1 { color: #fff; font-size: var(--fs-3xl); margin-bottom: var(--sp-4); }
.hero__lede { font-size: var(--fs-lg); color: rgba(255,255,255,.9); margin-bottom: var(--sp-6); max-width: 40rem; }
.hero .btn-row { margin-top: var(--sp-5); }

/* Page banner (interior pages) */
.page-hero {
  background: linear-gradient(150deg, var(--navy-800) 0%, var(--navy-600) 100%);
  color: #fff; position: relative; overflow: hidden;
}
.page-hero::before {
  content: ""; position: absolute; right: -80px; top: -80px; width: 380px; height: 380px;
  border-radius: 50%; background: radial-gradient(circle, rgba(245,166,35,.22), transparent 68%);
}
.page-hero__inner { padding-block: clamp(2.5rem, 1.6rem + 4vw, 4.5rem); position: relative; }
.page-hero h1 { color: #fff; margin-bottom: var(--sp-2); }
.page-hero p { color: rgba(255,255,255,.85); max-width: 60ch; }

.breadcrumbs { font-size: var(--fs-sm); color: rgba(255,255,255,.72); margin-bottom: var(--sp-3); }
.breadcrumbs a { color: rgba(255,255,255,.92); text-decoration: none; }
.breadcrumbs a:hover { color: #fff; text-decoration: underline; }
.breadcrumbs span[aria-hidden] { margin: 0 .45rem; opacity: .5; }

/* ---------- Stats ---------- */
.stats { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.stat {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius); padding: var(--sp-5); text-align: center;
}
.stat__num {
  font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 700;
  color: var(--amber-400); line-height: 1; display: block;
}
.stat__label { font-size: var(--fs-sm); color: rgba(255,255,255,.8); margin-top: var(--sp-2); display: block; }

/* ---------- Grant stats ---------- */
.grant-stats {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin: var(--sp-6) 0 var(--sp-7);
  max-width: none;
}
.grant-stat {
  background: linear-gradient(150deg, var(--navy-700), var(--navy-500));
  color: #fff;
  border-radius: var(--radius);
  padding: var(--sp-5);
  box-shadow: var(--shadow-sm);
}
.grant-stat__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 1.8rem + 1.6vw, 3rem);
  font-weight: 700;
  line-height: 1;
  color: var(--amber-400);
}
.grant-stat__label {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  color: rgba(255,255,255,.85);
}

/* Long grant tables get a capped, scrollable body with a sticky header. */
.entry-content .table-scroll { max-width: none; }
.entry-content .tablepress { font-size: var(--fs-sm); }
.entry-content .tablepress td:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- Cards ---------- */
.card-grid { display: grid; gap: var(--sp-5); }
.card-grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.card-grid--3 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.card-grid--4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }

.card {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--navy-100); }
.card__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--navy-50); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.card:hover .card__media img { transform: scale(1.045); }
.card__body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.card__title { font-size: var(--fs-lg); }
.card__title a { color: inherit; text-decoration: none; }
.card__title a:hover { color: var(--navy-500); }
.card__excerpt { color: var(--ink-muted); font-size: var(--fs-sm); flex: 1; }
.card__foot { margin-top: auto; padding-top: var(--sp-2); }
.card__link {
  font-family: var(--font-display); font-weight: 600; color: var(--navy-600);
  text-decoration: none; display: inline-flex; align-items: center; gap: .4rem;
}
.card__link::after { content: "\2192"; transition: transform .2s var(--ease); }
.card__link:hover::after { transform: translateX(4px); }

/* ---------- Events ---------- */
.event-list { display: grid; gap: var(--sp-4); }
.event-item {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-5); align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--sp-5); box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.event-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--navy-100); }
@media (max-width: 720px) {
  .event-item { grid-template-columns: auto 1fr; gap: var(--sp-4); }
  .event-item__action { grid-column: 1 / -1; }
  .event-item__action .btn { width: 100%; }
}

.date-chip {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 82px; min-height: 86px; border-radius: var(--radius-sm); flex-shrink: 0;
  background: linear-gradient(160deg, var(--navy-600), var(--navy-700)); color: #fff;
  box-shadow: var(--shadow-sm); padding: var(--sp-2);
}
.date-chip__month {
  font-family: var(--font-display); font-size: .78rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--amber-400);
}
.date-chip__day { font-family: var(--font-display); font-size: 2rem; font-weight: 700; line-height: 1; }
.date-chip__year { font-size: .7rem; opacity: .75; letter-spacing: .08em; }
.date-chip--tba { background: linear-gradient(160deg, var(--ink-faint), var(--ink-muted)); }
.date-chip--tba .date-chip__day { font-size: 1.05rem; letter-spacing: .04em; }

.event-item__title { font-size: var(--fs-lg); margin-bottom: var(--sp-1); }
.event-item__title a { color: inherit; text-decoration: none; }
.event-item__title a:hover { color: var(--navy-500); }
.event-item__meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  font-size: var(--fs-sm); color: var(--ink-muted);
}
.event-item__meta span { display: inline-flex; align-items: center; gap: .35rem; }
.event-item__meta svg { width: 15px; height: 15px; flex-shrink: 0; opacity: .65; }

.badge {
  display: inline-block; padding: .18rem .6rem; border-radius: 999px;
  font-size: var(--fs-xs); font-weight: 650; letter-spacing: .04em; text-transform: uppercase;
}
.badge--postponed { background: #fdeaea; color: #a32222; }
.badge--soon { background: var(--amber-100); color: var(--amber-text); }
.badge--open { background: #e5f5ec; color: var(--ok); }

/* ---------- The Events Calendar ----------
   TEC 6 exposes its palette as custom properties, so rebranding is a matter of
   redefining them rather than fighting its stylesheets with !important. */
/* The buttons are driven by --tec-color-button-*, NOT --tec-color-accent-*.
   Overriding only the accent family left "Find Events" on Tribe's default
   #334aff. Both families are set here, at :root so nothing inherits the old
   value from a wrapper further up the tree. */
:root,
.tribe-common,
.tribe-events,
.tribe-theme-armchair-club {
  --tec-color-accent-primary: var(--navy-500);
  --tec-color-accent-primary-hover: var(--navy-600);
  --tec-color-accent-primary-active: var(--navy-700);
  --tec-color-accent-primary-background: var(--navy-50);

  --tec-color-button-primary: var(--navy-500);
  --tec-color-button-primary-hover: var(--navy-600);
  --tec-color-button-primary-active: var(--navy-700);
  --tec-color-button-primary-background: var(--navy-500);
  --tec-color-button-secondary: var(--navy-100);
  --tec-color-button-secondary-hover: var(--navy-300);

  --tec-color-link-primary: var(--navy-800);
  --tec-color-link-accent: var(--navy-600);
  --tec-color-link-accent-hover: var(--amber-600);
  --tec-color-background-events-bar: var(--surface-alt);
  --tec-color-border-active-month-grid-hover: var(--navy-300);
  --tec-font-family-sans-serif: var(--font-body);
  --tec-font-family-base: var(--font-body);
}

/* Match Tribe's container to .wrap so the calendar lines up with the banner
   above it. Left to itself it renders 1260px wide starting 30px further left. */
.tribe-common__legacy-content,
.tribe-events .tribe-events-l-container,
.tribe-events-view .tribe-common {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 0;
}

/* Tribe's own .tribe-common-l-container already matches .wrap (1200px, centred),
   so adding padding here only pushed the calendar in from the banner above it. */
.tribe-events-view {
  padding-block: var(--section-y) !important;
  padding-inline: 0 !important;
}
.tribe-events .tribe-common-l-container {
  padding-inline: 1.25rem;
}
.tribe-common .tribe-common-h1,
.tribe-common .tribe-common-h2,
.tribe-common .tribe-common-h3,
.tribe-common .tribe-common-h4 {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
  color: var(--navy-800);
}
.tribe-events .tribe-events-c-view-switcher__list-item--active .tribe-events-c-view-switcher__list-item-link {
  color: var(--navy-600);
}
.tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date {
  color: var(--navy-600);
  font-weight: 700;
}
.tribe-common .tribe-common-c-btn,
.tribe-common a.tribe-common-c-btn {
  background: var(--amber-500);
  color: var(--navy-900);
  border-radius: 999px;
  font-family: var(--font-display);
}
.tribe-common .tribe-common-c-btn:hover,
.tribe-common a.tribe-common-c-btn:hover {
  background: var(--amber-400);
  color: var(--navy-900);
}

/* ---------- People ---------- */
.people-grid { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.person { text-align: center; }
.person__photo {
  position: relative; aspect-ratio: 1; border-radius: var(--radius-lg); overflow: hidden;
  background: linear-gradient(150deg, var(--navy-100), var(--navy-50));
  margin-bottom: var(--sp-4); box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.person:hover .person__photo { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.person__photo img { width: 100%; height: 100%; object-fit: cover; }
.person__initials {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-display); font-size: 2.6rem; font-weight: 700; letter-spacing: .02em;
  color: var(--navy-400); background: linear-gradient(150deg, var(--navy-100), var(--navy-50));
}
.person__name { font-size: var(--fs-md); margin-bottom: 2px; }
.person__role { font-size: var(--fs-sm); color: var(--ink-muted); }
.person__email {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: var(--fs-sm); margin-top: var(--sp-2); text-decoration: none; color: var(--navy-600);
}
.person__email:hover { text-decoration: underline; }
.person__email svg { width: 14px; height: 14px; }
.person--honorary .person__photo { box-shadow: 0 0 0 3px var(--amber-400), var(--shadow-sm); }
.person__note { font-size: var(--fs-xs); color: var(--ink-faint); margin-top: var(--sp-1); font-style: italic; }

/* Editor-chosen column count. Still collapses on smaller screens so a "6 columns"
   choice can never produce unreadable slivers on a phone. */
.people-grid[style*="--people-cols"] {
  grid-template-columns: repeat(var(--people-cols), minmax(0, 1fr));
}
@media (max-width: 900px) {
  .people-grid[style*="--people-cols"] { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
}
@media (max-width: 520px) {
  .people-grid,
  .people-grid[style*="--people-cols"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
  .person__initials { font-size: 1.9rem; }
}

/* Row layout — photo beside a full biography */
.people-list { display: flex; flex-direction: column; gap: var(--sp-6); }
.person--row {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
  text-align: left;
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--line);
}
.people-list > .person--row:last-child { border-bottom: 0; padding-bottom: 0; }
.person--row .person__photo { margin-bottom: 0; }
.person--row .person__name { font-size: var(--fs-lg); }
.person--row .person__role {
  font-family: var(--font-display); font-size: var(--fs-base);
  color: var(--amber-text); font-weight: 600; margin-top: 2px;
  letter-spacing: .01em;
}
/* The row's text column is ~980px wide, which runs biographies to 80+ characters
   a line. Cap the measure; the gutter that leaves on the right is intentional. */
.person--row .person__bio { margin-top: var(--sp-3); color: var(--ink-muted); max-width: 54ch; }
.person--row .person__bio p + p { margin-top: var(--sp-3); }
.person--row .person__email { margin-top: var(--sp-3); }
.person__bio { font-size: var(--fs-sm); color: var(--ink-muted); margin-top: var(--sp-2); }

@media (max-width: 700px) {
  .person--row { grid-template-columns: 1fr; gap: var(--sp-4); text-align: center; }
  .person--row .person__photo { width: 170px; margin-inline: auto; }
  .person--row .person__detail { text-align: left; }
  .person--row .person__name,
  .person--row .person__role { text-align: center; }
}

/* ---------- Gallery ---------- */
.gallery-grid {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.gallery-item {
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); overflow: hidden;
  background: var(--navy-50); cursor: zoom-in; border: 0; padding: 0; display: block; width: 100%;
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(15,30,61,.4), transparent 55%);
  opacity: 0; transition: opacity .25s var(--ease);
}
.gallery-item:hover::after { opacity: 1; }

/* Core gallery block — kept editable in the block editor, restyled here */
.wp-block-gallery.has-nested-images {
  display: grid !important;
  gap: var(--sp-3) !important;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  margin: var(--sp-6) 0;
}
.wp-block-gallery.has-nested-images.columns-2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); }
.wp-block-gallery.has-nested-images.columns-4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); }
.wp-block-gallery.has-nested-images figure.wp-block-image {
  width: auto !important; margin: 0 !important; flex: none !important;
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--radius-sm); background: var(--navy-50);
  box-shadow: var(--shadow-sm);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.wp-block-gallery.has-nested-images figure.wp-block-image:hover {
  transform: translateY(-3px); box-shadow: var(--shadow-md);
}
.wp-block-gallery.has-nested-images figure.wp-block-image img {
  width: 100% !important; height: 100% !important; object-fit: cover;
  border-radius: 0; cursor: zoom-in;
}
.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
  position: absolute; inset: auto 0 0 0; margin: 0; padding: .6rem .75rem;
  background: linear-gradient(to top, rgba(15,30,61,.88), transparent);
  color: #fff; font-size: var(--fs-xs); text-align: left;
}
@media (max-width: 520px) {
  .wp-block-gallery.has-nested-images { grid-template-columns: repeat(2, 1fr); }
}

/* Classic [gallery] shortcode — used by seven of the ten gallery pages.
   Styled to match the newer block galleries so both look identical. */
.entry-content .gallery {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  margin: var(--sp-6) 0;
  max-width: none;
}
.entry-content .gallery .gallery-item {
  width: auto;
  max-width: none;
  margin: 0;
  float: none;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--navy-50);
  box-shadow: var(--shadow-sm);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.entry-content .gallery .gallery-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.entry-content .gallery .gallery-icon {
  height: 100%;
  margin: 0;
}
.entry-content .gallery .gallery-icon a,
.entry-content .gallery .gallery-icon img {
  display: block;
  width: 100%;
  height: 100%;
}
.entry-content .gallery img {
  object-fit: cover;
  border: 0;
  border-radius: 0;
  cursor: zoom-in;
}
.entry-content .gallery .gallery-caption {
  position: absolute;
  inset: auto 0 0 0;
  margin: 0;
  padding: .6rem .75rem;
  background: linear-gradient(to top, rgba(15,30,61,.88), transparent);
  color: #fff;
  font-size: var(--fs-xs);
  text-align: left;
  max-height: none;
  overflow: hidden;
}
@media (max-width: 520px) {
  .entry-content .gallery { grid-template-columns: repeat(2, 1fr); }
}

/* Standalone images in content are zoomable too */
.entry-content > figure.wp-block-image img,
.entry-content .wp-block-image img { cursor: zoom-in; }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: rgba(8,15,30,.94); padding: var(--sp-5);
  opacity: 0; visibility: hidden; transition: opacity .25s var(--ease), visibility .25s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__img { max-width: min(96vw, 1500px); max-height: 84vh; width: auto; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); }
.lightbox__caption { color: rgba(255,255,255,.85); text-align: center; margin-top: var(--sp-3); font-size: var(--fs-sm); }
.lightbox__btn {
  position: absolute; background: rgba(255,255,255,.11); border: 1px solid rgba(255,255,255,.22);
  color: #fff; width: 52px; height: 52px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; font-size: 1.5rem; line-height: 1;
  transition: background-color .2s var(--ease);
}
.lightbox__btn:hover { background: rgba(255,255,255,.24); }
.lightbox__close { top: var(--sp-5); right: var(--sp-5); }
.lightbox__prev { left: var(--sp-4); top: 50%; transform: translateY(-50%); }
.lightbox__next { right: var(--sp-4); top: 50%; transform: translateY(-50%); }
.lightbox__count { position: absolute; bottom: var(--sp-5); left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.7); font-size: var(--fs-sm); }
@media (max-width: 640px) {
  .lightbox__prev { left: var(--sp-2); } .lightbox__next { right: var(--sp-2); }
  .lightbox__btn { width: 44px; height: 44px; }
}

/* ---------- Content (editor output) ---------- */
/* Inherits the body size deliberately — bumping this to --fs-md pushed running
   text to 20px, which reads as oversized in long passages. */
.entry-content > * + * { margin-top: var(--sp-4); }

/* One measure for every text element, so headings and paragraphs share the same
   right edge instead of each computing their own from ch. Applied at any depth,
   because legacy pages wrap all their content in a single <div> (.dis-flex on
   About) that a direct-child rule would miss. */
.entry-content p,
.entry-content ul,
.entry-content ol,
.entry-content blockquote,
.entry-content h2,
.entry-content h3,
.entry-content h4 { max-width: var(--measure); }

/* Video embeds sit in the flow rather than floating.
   The About page has a 500px YouTube iframe floated inside its opening
   paragraph. A float gives that paragraph two different measures — a narrow
   one beside the video and a full-width one below it — and no single width
   makes both readable (it was 87 characters beside and 149 below). Taking the
   embed out of the flow keeps every paragraph on one consistent measure and
   behaves the same on a phone, where a 500px float cannot share the screen
   with text anyway. */
.entry-content iframe,
.entry-content embed,
.entry-content object,
.entry-content video {
  display: block;
  float: none !important;
  width: 100%;
  max-width: 100%;
  margin: var(--sp-5) 0;
  /* Legacy embeds carry inline margins from the old editor (margin: 5px 0 5px
     10px), which would otherwise push them out of line with the text column. */
  margin-inline: 0 !important;
  border-radius: var(--radius-sm);
}
.entry-content iframe[src*="youtube"],
.entry-content iframe[src*="youtu.be"],
.entry-content iframe[src*="vimeo"] {
  aspect-ratio: 16 / 9;
  height: auto;
}

/* Components that size themselves — never constrain their inner text. */
.entry-content .person p,
.entry-content .person ul,
.entry-content .person ol,
.entry-content table p,
.entry-content table ul,
.entry-content table ol,
.entry-content .wp-block-columns p,
.entry-content .wp-block-columns ul,
.entry-content .wp-block-columns ol,
.entry-content .section-head p,
.entry-content figcaption { max-width: none; }
.entry-content > h2 { margin-top: var(--sp-7); }
.entry-content > h3 { margin-top: var(--sp-6); }
.entry-content > h4 { margin-top: var(--sp-5); }
.entry-content ul, .entry-content ol { padding-left: 1.35rem; }
.entry-content li + li { margin-top: var(--sp-2); }
.entry-content ul { list-style: none; padding-left: 0; }
.entry-content ul li { position: relative; padding-left: 1.6rem; }
.entry-content ul li::before {
  content: ""; position: absolute; left: .35rem; top: .62em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--amber-500);
}
.entry-content ul ul { margin-top: var(--sp-2); }
.entry-content blockquote {
  border-left: 4px solid var(--amber-500); padding: var(--sp-2) 0 var(--sp-2) var(--sp-5);
  font-size: var(--fs-lg); color: var(--navy-700); font-style: italic;
}
.entry-content img { border-radius: var(--radius-sm); }
.entry-content figure { margin: var(--sp-6) 0; }
.entry-content figcaption { font-size: var(--fs-sm); color: var(--ink-faint); text-align: center; margin-top: var(--sp-2); }
.entry-content a:not(.btn) { color: var(--navy-600); text-decoration: underline; }
.entry-content hr { margin: var(--sp-7) 0; }

.alignleft { float: left; margin: .35rem var(--sp-5) var(--sp-4) 0; max-width: 50%; }
.alignright { float: right; margin: .35rem 0 var(--sp-4) var(--sp-5); max-width: 50%; }
.aligncenter { margin-inline: auto; }
@media (max-width: 600px) { .alignleft, .alignright { float: none; margin: var(--sp-4) 0; max-width: 100%; } }
.alignwide { width: min(100vw - 2.5rem, 1100px); margin-inline: auto; }
.alignfull { width: 100vw; margin-left: calc(50% - 50vw); max-width: none; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: var(--fs-sm); color: var(--ink-faint); text-align: center; margin-top: var(--sp-2); }

/* Tables — covers TablePress output too */
.entry-content table, .tablepress {
  width: 100%; border-collapse: collapse; margin: var(--sp-5) 0;
  font-size: var(--fs-sm); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.entry-content th, .tablepress th {
  background: var(--navy-600); color: #fff; text-align: left;
  padding: .8rem 1rem; font-family: var(--font-display); font-weight: 600; letter-spacing: .03em;
}
.entry-content td, .tablepress td { padding: .72rem 1rem; border-top: 1px solid var(--line-soft); vertical-align: top; }
.tablepress tbody tr:nth-child(even) td, .entry-content tbody tr:nth-child(even) td { background: var(--surface-alt); }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Legacy easy-columns fallback */
.entry-content .col { float: none !important; width: auto !important; margin: 0 0 var(--sp-4) !important; }

/* ---------- Prose / narrow article ---------- */
.article-layout { display: grid; gap: var(--sp-7); grid-template-columns: minmax(0,1fr); }
@media (min-width: 1000px) { .article-layout--sidebar { grid-template-columns: minmax(0,1fr) 300px; } }
.sidebar-col { display: flex; flex-direction: column; gap: var(--sp-5); }
.widget-box {
  background: var(--surface-alt); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--sp-5);
}
.widget-box h3 { font-size: var(--fs-md); margin-bottom: var(--sp-3); }
.widget-box ul { list-style: none; padding: 0; margin: 0; }
.widget-box li + li { margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--line); }
.widget-box a { text-decoration: none; color: var(--navy-700); font-weight: 550; font-size: var(--fs-sm); }
.widget-box a:hover { color: var(--navy-500); text-decoration: underline; }

/* ---------- CTA band ---------- */
/* Left-aligned like every other section. Centring only this block made it read
   as misplaced next to the left-aligned content above and below it. */
.cta-band {
  background: linear-gradient(135deg, var(--navy-700), var(--navy-500));
  border-radius: var(--radius-lg); padding: clamp(2rem, 1.4rem + 3vw, 3.5rem);
  color: #fff; text-align: left; position: relative; overflow: hidden;
}
.cta-band::before {
  content: ""; position: absolute; left: -60px; bottom: -90px; width: 300px; height: 300px;
  border-radius: 50%; background: radial-gradient(circle, rgba(245,166,35,.24), transparent 70%);
}
.cta-band > * { position: relative; }
.cta-band h2 { color: #fff; margin-bottom: var(--sp-3); max-width: 24ch; }
.cta-band p { color: rgba(255,255,255,.88); max-width: 60ch; margin-bottom: var(--sp-5); }
.cta-band .btn-row { justify-content: flex-start; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-900); color: rgba(255,255,255,.72); padding-block: var(--sp-8) var(--sp-5); margin-top: 0; }
.footer-grid { display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.site-footer h3 {
  color: #fff; font-size: var(--fs-base); text-transform: uppercase;
  letter-spacing: .1em; margin-bottom: var(--sp-4);
}
.site-footer a { color: rgba(255,255,255,.72); text-decoration: none; }
.site-footer a:hover { color: var(--amber-400); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li + li { margin-top: var(--sp-2); }
.footer-brand img { height: 56px; width: auto; background: #fff; padding: 8px 12px; border-radius: var(--radius-sm); }
.footer-brand p { margin-top: var(--sp-4); font-size: var(--fs-sm); max-width: 34ch; }
.social-row { display: flex; gap: var(--sp-3); margin-top: var(--sp-4); }
.social-row a {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.15);
  transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.social-row a:hover { background: var(--amber-500); color: var(--navy-900); transform: translateY(-2px); }
.social-row svg { width: 19px; height: 19px; }
.footer-bottom {
  margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: space-between;
  font-size: var(--fs-sm); color: rgba(255,255,255,.55);
}
.footer-bottom a { color: rgba(255,255,255,.7); }

/* ---------- Forms ---------- */
input[type=text], input[type=email], input[type=url], input[type=tel], input[type=search],
input[type=number], input[type=date], textarea, select {
  width: 100%; padding: .7rem .95rem; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
input:focus, textarea:focus, select:focus {
  border-color: var(--navy-400); box-shadow: 0 0 0 3px var(--navy-100); outline: none;
}
label { display: block; font-weight: 600; font-size: var(--fs-sm); margin-bottom: var(--sp-2); }
input[type=submit], button[type=submit] {
  width: auto; background: var(--amber-500); color: var(--navy-900); border: 0;
  padding: .78rem 1.6rem; border-radius: 999px; font-family: var(--font-display);
  font-weight: 600; cursor: pointer; transition: background-color .18s var(--ease);
}
input[type=submit]:hover, button[type=submit]:hover { background: var(--amber-400); }

/* ---------- Pagination ---------- */
.pagination { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; margin-top: var(--sp-7); }
.pagination .page-numbers {
  display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 .75rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  text-decoration: none; color: var(--navy-700); font-weight: 600;
}
.pagination .page-numbers:hover { background: var(--navy-50); border-color: var(--navy-300); }
.pagination .current { background: var(--navy-600); color: #fff; border-color: var(--navy-600); }

/* ---------- Utility ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.notice {
  padding: var(--sp-4) var(--sp-5); border-radius: var(--radius-sm);
  border-left: 4px solid var(--amber-500); background: var(--amber-100); color: var(--navy-800);
}

/* ---------- Print ---------- */
@media print {
  .site-header, .site-footer, .nav-toggle, .nav-mobile, .nav-scrim, .hero__media, .btn { display: none !important; }
  body { color: #000; font-size: 11pt; }
  .hero, .page-hero { background: none !important; color: #000; }
  .hero h1, .page-hero h1 { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}