/* ==========================================================================
   Theta Tau chapter site
   Tokens and component classes come from the "Modernist" design system, with
   the chapter's garnet and gold substituted for the stock accents and the
   rounded radii the design canvas set on top.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;600;800&display=swap');

:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201e1d;
  --color-divider: color-mix(in srgb, #201e1d 40%, transparent);

  --garnet: #7b2132;
  --garnet-dk: #4a121d;
  --gold: #b3a369;
  --gold-lt: #e7dfc4;

  --color-accent: #7b2132;
  --color-accent-100: #f7ecee;
  --color-accent-200: #ecd3d8;
  --color-accent-500: #a3384c;
  --color-accent-600: #5f1826;
  --color-accent-700: #4a121d;
  --color-accent-800: #3a0e17;

  --color-accent-2: #b3a369;
  --color-accent-2-100: #f5f1e3;
  --color-accent-2-200: #e7dfc4;
  --color-accent-2-800: #5d5228;

  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-500: #9b9797;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --color-positive: #2f6b46;
  --color-positive-100: #e8f2ec;
  --color-warning-100: #fbf1de;
  --color-warning-800: #6b4a12;

  --font-heading: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading-weight: 800;
  --font-body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 14px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);

  --header-height: 88px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-2);
}
h1 { font-size: clamp(32px, 5vw, 42px); }
h2 { font-size: clamp(24px, 4vw, 32px); }
h3 { font-size: clamp(20px, 3vw, 25px); }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }

p { margin: 0 0 var(--space-3); }
img { display: block; max-width: 100%; }
figure { margin: 0; }

a { color: var(--color-accent); text-decoration: none; text-underline-offset: 3px; }
a:hover { color: var(--color-accent-700); text-decoration: underline; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.text-small { font-size: 12.5px; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.nowrap { white-space: nowrap; }
.stack > * + * { margin-top: var(--space-3); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.hr { height: 2px; border: 0; margin: var(--space-4) 0; background: var(--color-divider); }

/* the uppercase micro-label used throughout the design */
.tt-h6 {
  font: 600 11px/1 var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(32, 30, 29, 0.5);
  margin: 0;
}
.tt-h6-accent { color: var(--color-accent); }

/* ============================================================== buttons == */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: 999px;
}
.btn:hover { text-decoration: none; }
.btn:disabled, .btn[aria-disabled='true'] { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: #fff; }
.btn-primary:hover { background: var(--color-accent-600); color: #fff; }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-gold { background: var(--gold); color: var(--garnet-dk); }
.btn-gold:hover { background: var(--gold-lt); color: var(--garnet-dk); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-2); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-danger { color: #7a2020; }
.btn-danger:hover { background: color-mix(in srgb, #7a2020 10%, transparent); }
.btn-sm { font-size: 12px; padding: 5px 12px; }
.btn-block { width: 100%; justify-content: center; }
.btn-row { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }

/* ================================================================ forms == */

.field { display: block; margin-bottom: var(--space-3); }
.field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 38px; padding: 7px 11px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: 12px;
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 110px; resize: vertical; line-height: 1.55; }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--color-text) 50%), linear-gradient(135deg, var(--color-text) 50%, transparent 50%); background-position: calc(100% - 18px) 17px, calc(100% - 13px) 17px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 34px; }
.field-error { color: var(--color-accent-700); font-size: 12px; margin-top: 4px; }
.input-error { border-color: var(--color-accent); }
.field-help { font-size: 12px; color: rgba(32, 30, 29, 0.55); margin-top: 4px; }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.span-2 { grid-column: 1 / -1; }

.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.radio input, .seg-opt input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.radio .dot { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 1.5px solid var(--color-divider); }
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot {
  border-color: var(--color-accent); background: var(--color-accent);
  box-shadow: inset 0 0 0 4px var(--color-bg);
}
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.radio-stack { display: flex; flex-direction: column; gap: var(--space-2); }
.radio-ladder .radio { align-items: flex-start; padding: 9px 0; }
.radio-ladder .radio + .radio { border-top: 1px solid var(--color-divider); }

.check { display: flex; align-items: center; gap: 9px; font-size: 13.5px; cursor: pointer; }
.check input { width: 15px; height: 15px; accent-color: var(--garnet); }
.check-count { margin-left: auto; font-size: 11.5px; color: rgba(32, 30, 29, 0.45); }

.seg { display: inline-flex; overflow: hidden; border: 1px solid var(--color-divider); border-radius: 999px; }
.seg-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; font-size: 13px; cursor: pointer; color: inherit;
}
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt[aria-current='true'], .seg-opt:has(input:checked) { background: var(--garnet); color: #fff; }
.seg-opt:hover:not([aria-current='true']) { background: color-mix(in srgb, var(--color-text) 7%, transparent); text-decoration: none; }

.filter-bar { display: flex; gap: var(--space-2); align-items: flex-end; margin-bottom: var(--space-6); flex-wrap: wrap; }
.filter-bar .field { margin-bottom: 0; }
.filter-bar .input { min-width: 150px; }

/* ================================================================ cards == */

.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--color-surface); border: 1px solid var(--color-divider);
}
.panel {
  border: 1px solid var(--color-divider); border-radius: var(--radius-lg);
  padding: 20px; background: transparent;
}
.panel-surface { background: var(--color-surface); }
.panel-strong { border-width: 2px; }
.panel-garnet { background: var(--garnet); color: #fff; border: 0; }
.panel-garnet .tt-h6 { color: var(--gold-lt); }
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* ================================================================= tags == */

.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px; border-radius: 999px;
  white-space: nowrap;
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }
.tag-positive { background: var(--color-positive-100); color: var(--color-positive); }
.tag-warning { background: var(--color-warning-100); color: var(--color-warning-800); }

/* =============================================================== tables == */

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 2px solid var(--color-divider);
  background: var(--color-bg); white-space: nowrap;
}
.table thead th:first-child { border-top-left-radius: var(--radius-md); }
.table thead th:last-child { border-top-right-radius: var(--radius-md); }
.table td { padding: var(--space-2); border-bottom: 1px solid var(--color-divider); vertical-align: top; }
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.table strong { font-family: var(--font-heading); }
.table-empty { padding: 40px 0; color: rgba(32, 30, 29, 0.55); text-align: center; }

/* =============================================================== header == */

.topbar {
  display: flex; align-items: center; gap: 26px;
  padding: 0 clamp(16px, 3vw, 32px);
  background: var(--garnet); color: #fff;
  border-bottom: 4px solid var(--gold);
  flex-wrap: wrap;
}
.topbar-brand { display: flex; align-items: center; gap: 12px; padding: 10px 0; margin-right: auto; color: #fff; }
.topbar-brand:hover { color: #fff; text-decoration: none; }
.topbar-brand img { height: 34px; width: auto; }
.topbar-name { font: 800 14px/1.1 var(--font-heading); letter-spacing: 0.02em; }
.topbar-sub { font: 600 9.5px/1.2 var(--font-body); letter-spacing: 0.14em; color: var(--gold-lt); }
.topbar-nav { display: flex; gap: 20px; align-self: stretch; align-items: center; flex-wrap: wrap; }

.tt-nav {
  color: rgba(255, 255, 255, 0.72);
  font: 600 13px/1 var(--font-body); letter-spacing: 0.02em;
  padding: 8px 0; border: 0; border-bottom: 2px solid transparent;
  background: none; cursor: pointer; text-decoration: none;
}
.tt-nav:hover { color: #fff; text-decoration: none; }
.tt-nav[aria-current='page'] { color: #fff; border-bottom-color: var(--gold); }

.topbar-me { display: flex; align-items: center; gap: 10px; padding: 12px 0 12px 20px; border-left: 1px solid rgba(255, 255, 255, 0.25); }
.topbar-me-name { font: 600 12px/1.2 var(--font-body); }
.topbar-me-role { font: 400 10px/1.2 var(--font-body); color: var(--gold-lt); letter-spacing: 0.06em; text-transform: uppercase; }

.public-header { padding: 14px clamp(16px, 4vw, 40px); gap: 28px; }
.public-header img { height: 44px; }
.public-brand-name { font: 800 17px/1.1 var(--font-heading); letter-spacing: -0.01em; }
.public-brand-sub { font: 600 11px/1.2 var(--font-body); letter-spacing: 0.14em; color: var(--gold-lt); }

/* ============================================================== avatars == */

.avatar {
  border-radius: 50%; background: var(--garnet); color: #fff;
  display: grid; place-items: center; flex: none; overflow: hidden;
  font-family: var(--font-heading); font-weight: 800;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-xs { width: 30px; height: 30px; font-size: 11px; }
.avatar-sm { width: 34px; height: 34px; font-size: 13px; }
.avatar-md { width: 50px; height: 50px; font-size: 15px; }
.avatar-lg { width: 112px; height: 112px; font-size: 34px; }

/* ============================================================== layout === */

.shell { display: flex; align-items: stretch; min-height: calc(100vh - var(--header-height)); }
.sidebar {
  width: 224px; flex: none; padding: 20px 14px 28px;
  background: var(--color-surface); border-right: 2px solid var(--color-divider);
}
.sidebar-heading { padding: 0 10px 6px; margin-top: 18px; }
.sidebar-heading:first-child { margin-top: 0; }
.sidebar-stats { padding: 0 10px; font: 400 12px/1.7 var(--font-body); color: rgba(32, 30, 29, 0.7); }
.sidebar-stats > div { display: flex; justify-content: space-between; gap: 10px; }
/* Only needed once the rail collapses into a strip and the headings go. */
.sidebar-divider { display: none; }
.main { flex: 1; min-width: 0; }
.page { padding: clamp(20px, 3vw, 32px) clamp(16px, 3vw, 36px); }
.page-narrow { max-width: 1020px; }
.page-slim { max-width: 820px; }

.tt-side {
  display: block; width: 100%; text-align: left;
  font: 600 13px/1.3 var(--font-body); color: var(--color-text);
  padding: 8px 10px; background: none; border: 0; cursor: pointer;
  border-radius: var(--radius-md); text-decoration: none;
}
.tt-side:hover { background: rgba(32, 30, 29, 0.07); color: var(--color-text); text-decoration: none; }
.tt-side[aria-current='page'] { background: var(--garnet); color: #fff; }

.page-head { display: flex; align-items: flex-end; gap: var(--space-4); margin-bottom: var(--space-6); flex-wrap: wrap; }
.page-head-text { margin-right: auto; }
.page-head h2, .page-head h1 { margin: 0; }
.page-head p { color: rgba(32, 30, 29, 0.6); margin: 4px 0 0; }

.footer {
  padding: 28px clamp(16px, 3vw, 40px);
  background: #201e1d; color: rgba(255, 255, 255, 0.6);
  font-size: 12.5px; display: flex; gap: 20px; flex-wrap: wrap; align-items: center;
}
.footer a { color: var(--gold-lt); }

.notice {
  padding: 16px 20px; border: 2px solid var(--color-accent);
  border-radius: var(--radius-lg); background: var(--color-accent-100);
  margin-bottom: var(--space-6);
}

/* ============================================================= calendar == */

.cal-head, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-head {
  border: 2px solid var(--color-divider); border-bottom: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden; background: var(--color-surface);
}
.cal-head div {
  padding: 8px 10px; border-right: 1px solid var(--color-divider);
  border-bottom: 2px solid var(--color-divider);
  font: 600 10.5px/1 var(--font-body); letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(32, 30, 29, 0.55);
}
.cal-grid {
  border: 2px solid var(--color-divider); border-top: 0;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg); overflow: hidden;
}
.cal-cell {
  min-height: 96px; padding: 8px;
  border-right: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
}
.cal-cell-out { background: rgba(32, 30, 29, 0.04); }
.cal-cell-today { background: var(--color-accent-100); }
.cal-num { font: 600 11px/1 var(--font-body); color: rgba(32, 30, 29, 0.45); margin-bottom: 6px; }
.cal-event {
  display: block; font: 600 10.5px/1.25 var(--font-body);
  background: var(--garnet); color: #fff;
  padding: 3px 6px; border-radius: var(--radius-sm); margin-bottom: 3px;
}
.cal-event:hover { color: #fff; text-decoration: none; opacity: 0.9; }
.cal-event-public { background: var(--gold-lt); color: var(--garnet-dk); }
.cal-event-public:hover { color: var(--garnet-dk); }

.week-strip {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  border: 1px solid var(--color-divider); border-radius: var(--radius-lg);
  overflow: hidden; margin-bottom: var(--space-6); background: var(--color-surface);
}
.week-day { padding: 12px 10px; border-right: 1px solid var(--color-divider); }
.week-day:last-child { border-right: 0; }
.week-day-today { background: var(--color-accent-100); }
.week-num { font: 800 20px/1.2 var(--font-heading); margin: 4px 0 6px; }
.week-event { font: 600 10.5px/1.35 var(--font-body); color: var(--color-accent); display: block; }

.date-chip {
  width: 44px; flex: none; text-align: center; border-radius: 10px;
  background: var(--garnet); color: #fff; padding: 5px 0;
}
.date-chip-mon { font: 600 9px/1 var(--font-body); letter-spacing: 0.1em; }
.date-chip-day { font: 800 18px/1.1 var(--font-heading); }

/* =========================================================== dashboards == */

.dash-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-6); align-items: start; }
.roster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: var(--space-3); }
.roster-card { background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-lg); padding: 14px; display: flex; gap: 12px; }
.roster-card-name { font: 800 14.5px/1.25 var(--font-heading); }
.roster-card-line { font-size: 12px; color: rgba(32, 30, 29, 0.6); }

.stat-row { display: flex; border: 2px solid var(--color-divider); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--space-6); flex-wrap: wrap; }
.stat { padding: 18px 24px; border-right: 1px solid var(--color-divider); flex: 1 1 160px; }
.stat:last-child { border-right: 0; }
.stat-accent { background: var(--color-accent-100); }
.stat-value { font: 800 26px/1.2 var(--font-heading); }
.stat-note { font-size: 11.5px; color: rgba(32, 30, 29, 0.55); }

.feed-item { padding: 16px 0; border-top: 1px solid var(--color-divider); }
.feed-meta { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; }
.feed-title { font: 800 18px/1.25 var(--font-heading); }
.feed-title-sm { font: 800 15px/1.3 var(--font-heading); }

/* =============================================================== public == */

.hero { display: grid; grid-template-columns: 1.15fr 0.85fr; border-bottom: 2px solid var(--color-divider); }
.hero-copy { padding: clamp(32px, 6vw, 64px) clamp(20px, 4vw, 48px) 56px; }
.hero-art { background: var(--garnet); display: grid; place-items: center; padding: 40px; }
.hero-art img { width: 100%; max-width: 300px; }
.hero h1 { font-size: clamp(34px, 6vw, 60px); margin: 16px 0 20px; max-width: 14ch; }
.hero-lede { font-size: 17px; max-width: 52ch; color: rgba(32, 30, 29, 0.78); }

.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 2px solid var(--color-divider); }
.kpi { padding: 26px 24px; border-right: 1px solid var(--color-divider); }
.kpi:last-child { border-right: 0; }
.kpi-value { font: 800 34px/1 var(--font-heading); color: var(--color-accent); }

.split { display: grid; grid-template-columns: 2fr 1fr; border-bottom: 2px solid var(--color-divider); }
.split > :first-child { padding: 40px clamp(20px, 4vw, 48px); border-right: 1px solid var(--color-divider); }
.split > :last-child { padding: 40px 32px; background: var(--color-surface); }

.cta {
  padding: 44px clamp(20px, 4vw, 48px); background: var(--garnet); color: #fff;
  display: flex; align-items: center; gap: 40px; flex-wrap: wrap;
}
.cta h2 { color: #fff; margin-bottom: 8px; }
.cta p { color: var(--gold-lt); margin: 0; font-size: 16px; }

.auth-split { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100vh - var(--header-height)); }
.auth-art {
  background: var(--garnet); color: #fff; padding: 56px clamp(24px, 4vw, 48px);
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
}
.auth-art img { width: 150px; }
.auth-art h2 { color: #fff; font-size: clamp(28px, 4vw, 38px); max-width: 18ch; }
.auth-art p { color: var(--gold-lt); max-width: 44ch; font-size: 15px; }
.auth-form { padding: 56px clamp(20px, 4vw, 48px); max-width: 520px; width: 100%; }

/* ======================================================= matrix + prose == */

.matrix td, .matrix th { text-align: center; }
.matrix td:first-child, .matrix th:first-child { text-align: left; }
.matrix select { font-size: 12px; padding: 4px 6px; border-radius: var(--radius-sm); }
.mark-full { color: var(--garnet); font-size: 15px; }
.mark-limited { color: var(--gold); font-size: 15px; }
.mark-none { color: rgba(32, 30, 29, 0.25); font-size: 13px; }

.prose { max-width: 68ch; font-size: 15.5px; }
.prose h2, .prose h3 { margin-top: var(--space-6); }
.prose ul, .prose ol { padding-left: 1.3em; }

.merge-tag {
  font: 600 11.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: 5px 9px; border-radius: 999px;
  background: var(--color-accent-100); color: var(--color-accent-800);
  cursor: pointer; border: 0;
}

.template-list { border-right: 2px solid var(--color-divider); background: var(--color-surface); }
.template-item { display: block; padding: 13px 16px; border-bottom: 1px solid var(--color-divider); color: inherit; }
.template-item:hover { background: rgba(32, 30, 29, 0.05); text-decoration: none; color: inherit; }
.template-item[aria-current='true'] { background: var(--garnet); color: #fff; }
.template-item[aria-current='true'] .text-muted { color: var(--gold-lt); }
.template-name { font: 800 13.5px/1.25 var(--font-heading); }

.dialog-card {
  max-width: 760px; margin: 0 auto;
  background: var(--color-surface); border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg); padding: clamp(20px, 3vw, 28px);
  box-shadow: var(--shadow-md);
}
.dialog-title { font-family: var(--font-heading); font-weight: 800; font-size: 20px; margin: 0 0 var(--space-4); }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-6); flex-wrap: wrap; align-items: center; }
.dialog-actions .push-left { margin-right: auto; }

.audience-box { border: 1px solid var(--color-divider); border-radius: 12px; padding: 16px; background: var(--color-bg); }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--color-accent-100); color: var(--color-accent-800);
  font-size: 12px; font-weight: 600;
}

.pagination-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-6);
}
.pagination { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.pagination [aria-disabled='true'] { opacity: 0.45; cursor: not-allowed; }
.pagination-gap { padding: 0 4px; color: rgba(32, 30, 29, 0.45); }

/* ============================================================ responsive == */

@media (max-width: 1000px) {
  .dash-grid, .hero, .split, .auth-split { grid-template-columns: 1fr; }
  .hero-art { padding: 32px; }
  .split > :first-child { border-right: 0; border-bottom: 1px solid var(--color-divider); }
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
  .kpi:nth-child(2) { border-right: 0; }
}

@media (max-width: 860px) {
  .shell { flex-direction: column; }
  .sidebar {
    width: 100%; border-right: 0; border-bottom: 2px solid var(--color-divider);
    display: flex; gap: 6px; overflow-x: auto; padding: 12px 16px; align-items: center;
  }
  /* On narrow screens the rail becomes one scrolling strip of links. */
  .sidebar .sidebar-heading, .sidebar .hr, .sidebar .sidebar-stats { display: none; }
  .sidebar-divider {
    display: block; flex: none; align-self: center;
    width: 1px; height: 20px; margin: 0 6px;
    background: var(--color-divider);
  }
  .tt-side { width: auto; white-space: nowrap; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .cal-cell { min-height: 64px; font-size: 12px; }
  .topbar { gap: 14px; }
  .topbar-nav { gap: 14px; width: 100%; order: 3; padding-bottom: 8px; }
}

@media (max-width: 520px) {
  .kpi-row, .cal-head, .cal-grid { grid-template-columns: repeat(1, 1fr); }
  /* The day-name row carries the grid's top border on wider screens. Hiding it
     here would leave the calendar open at the top, so the grid takes it back. */
  .cal-head { display: none; }
  .cal-grid {
    border-top: 2px solid var(--color-divider);
    border-radius: var(--radius-lg);
  }
  .cal-cell { min-height: 0; }
  .cal-cell:not(:has(.cal-event)) { display: none; }
  .week-strip { grid-template-columns: repeat(4, 1fr); }
}

@media print {
  .topbar, .sidebar, .footer, .btn, .filter-bar { display: none !important; }
  body { background: #fff; }
}

/* ========================================================== rich text ==== */

.editor {
  border: 1px solid var(--color-divider);
  border-radius: 12px;
  background: var(--color-surface);
  overflow: hidden;
}
.editor-toolbar {
  display: flex; flex-wrap: wrap; gap: 2px; align-items: center;
  padding: 6px 8px;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-divider);
}
.editor-btn {
  font: 600 12px/1 var(--font-body);
  min-width: 30px; padding: 6px 8px;
  background: none; border: 1px solid transparent; border-radius: var(--radius-sm);
  color: var(--color-text); cursor: pointer;
}
.editor-btn:hover { background: color-mix(in srgb, var(--color-text) 9%, transparent); }
.editor-btn:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.editor-sep { width: 1px; height: 18px; margin: 0 4px; background: var(--color-divider); }
.editor-surface {
  min-height: 240px; padding: 14px 16px; font-size: 15px; line-height: 1.6;
  background: var(--color-surface); overflow-wrap: break-word;
}
.editor-surface:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.editor-surface > :first-child { margin-top: 0; }
.editor-surface > :last-child { margin-bottom: 0; }
.editor-surface h2 { font-size: 22px; margin: 18px 0 8px; }
.editor-surface h3 { font-size: 18px; margin: 16px 0 6px; }
.editor-surface h4 { font-size: 16px; margin: 14px 0 6px; }
.editor-surface ul, .editor-surface ol { padding-left: 1.4em; margin: 0 0 var(--space-3); }
.editor-surface blockquote,
.prose blockquote {
  margin: var(--space-3) 0; padding: 4px 0 4px 16px;
  border-left: 3px solid var(--color-accent);
  color: rgba(32, 30, 29, 0.75);
}
.editor-surface a, .prose a { text-decoration: underline; }
.prose h2 { font-size: 26px; }
.prose h3 { font-size: 21px; }
.prose h4 { font-size: 17px; }
.prose ul, .prose ol { margin: 0 0 var(--space-3); }
.prose li { margin-bottom: 4px; }
.prose code {
  font: 500 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--color-surface); padding: 2px 5px; border-radius: var(--radius-sm);
}
.prose pre {
  background: var(--color-surface); padding: 14px 16px;
  border-radius: var(--radius-md); overflow-x: auto;
}
.prose pre code { background: none; padding: 0; }
.prose hr { height: 1px; border: 0; background: var(--color-divider); margin: var(--space-6) 0; }

/* ============================================================== toasts ==== */

.toast-region {
  position: fixed;
  /* Clears both header variants: the app bar is shorter than the public one. */
  top: 104px;
  right: clamp(12px, 3vw, 28px);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(420px, calc(100vw - 24px));
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 16px;
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--color-accent);
  background: var(--color-accent-100);
  color: var(--color-accent-800);
  box-shadow: var(--shadow-lg);
  font-size: 14px;
  line-height: 1.45;
  pointer-events: auto;
  animation: toast-in 260ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.toast-success { border-left-color: var(--color-positive); background: var(--color-positive-100); color: var(--color-positive); }
.toast-info    { border-left-color: var(--gold); background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.toast-error   { border-left-color: var(--color-accent); background: var(--color-accent-100); color: var(--color-accent-800); }

.toast-icon {
  flex: none;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border-radius: 50%;
  font: 700 12px/1 var(--font-heading);
  background: currentColor;
  margin-top: 1px;
}
/* The glyph is punched out of the filled circle. */
.toast-success .toast-icon { color: var(--color-positive); }
.toast-info .toast-icon    { color: var(--color-accent-2-800); }
.toast-error .toast-icon   { color: var(--color-accent); }
.toast-icon > * { color: #fff; }
.toast-icon { -webkit-text-fill-color: var(--color-bg); }

.toast-text { flex: 1; min-width: 0; overflow-wrap: break-word; }

.toast-close {
  flex: none;
  width: 22px; height: 22px;
  margin: -2px -4px 0 0;
  display: grid; place-items: center;
  background: none; border: 0; border-radius: 50%;
  color: inherit; opacity: 0.55;
  font: 600 15px/1 var(--font-body);
  cursor: pointer;
}
.toast-close:hover { opacity: 1; background: color-mix(in srgb, currentColor 14%, transparent); }

/* Non-errors clear themselves; errors stay until dismissed. */
.toast-auto { animation: toast-in 260ms cubic-bezier(0.16, 1, 0.3, 1) both, toast-out 400ms ease-in 6s both; }
.toast-auto.is-held { animation: toast-in 260ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.toast.is-leaving { animation: toast-out 240ms ease-in both; }

@keyframes toast-in {
  from { opacity: 0; transform: translate3d(0, -10px, 0) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes toast-out {
  from { opacity: 1; transform: none; max-height: 200px; }
  to   { opacity: 0; transform: translate3d(0, -6px, 0); max-height: 0; padding-top: 0; padding-bottom: 0; margin-top: -10px; }
}

@media (prefers-reduced-motion: reduce) {
  .toast, .toast-auto, .toast.is-leaving { animation: none; }
  .toast-auto { opacity: 1; }
}

@media (max-width: 860px) {
  .toast-region { top: auto; bottom: 16px; right: 12px; left: 12px; width: auto; }
  @keyframes toast-in {
    from { opacity: 0; transform: translate3d(0, 12px, 0); }
    to   { opacity: 1; transform: none; }
  }
}

/* ==================================================== announcement cards == */

.ann-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: var(--space-4);
  align-items: start;
}

.ann-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
}
.ann-card-pinned { border-color: var(--gold); border-width: 2px; padding: 17px 19px; }

.ann-card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ann-card-title { margin: 0; font-size: 18px; line-height: 1.25; }
.ann-card-body { margin: 0; font-size: 13.5px; color: rgba(32, 30, 29, 0.72); flex: 1; }

.ann-card-foot {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 4px; padding-top: 10px;
  border-top: 1px solid var(--color-divider);
}
/* The visibility tag replaces the old sidebar column; the full audience is in
   its title attribute rather than taking a third of the row. */
.ann-card-visibility { margin-left: auto; cursor: help; }
.ann-card-actions { display: flex; gap: 2px; align-items: center; }
.ann-card-foot form { display: inline; }

@media (max-width: 520px) {
  .ann-grid { grid-template-columns: 1fr; }
  .ann-card-visibility { margin-left: 0; }
}

/* ========================================================= mail status ==== */

.mail-status {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  justify-content: space-between;
  padding: 14px 16px; margin-bottom: 18px;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
}
.mail-status-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mail-status-line .tt-h6 { margin: 0; }
.mail-status-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ====================================================== two-factor ======== */

.secret-box { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.secret-key {
  font: 600 17px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.08em;
  background: var(--color-bg); padding: 10px 14px; border-radius: var(--radius-md);
  border: 1px solid var(--color-divider);
  overflow-wrap: anywhere;
}
.secret-uri {
  display: block; margin-top: 8px; padding: 10px 12px;
  font: 400 11.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--color-bg); border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm); overflow-wrap: anywhere;
}
.code-input {
  font: 600 20px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.35em; text-align: center; max-width: 200px;
}
.recovery-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px; margin-top: 12px;
}
.recovery-code {
  font: 600 14px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--color-bg); padding: 8px 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--color-divider); text-align: center;
}

/* ====================================================== attendance ======== */

.attendance-group { display: inline-flex; border: 1px solid var(--color-divider); border-radius: 999px; overflow: hidden; }
.attendance-option { display: inline-flex; }
.attendance-option input { position: absolute; opacity: 0; width: 0; height: 0; }
.attendance-option span {
  display: inline-block; padding: 5px 11px; font: 600 12px/1 var(--font-body);
  cursor: pointer; white-space: nowrap; color: rgba(32, 30, 29, 0.7);
}
.attendance-option + .attendance-option span { border-left: 1px solid var(--color-divider); }
.attendance-option span:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.attendance-option input:checked + span { background: var(--garnet); color: #fff; }
.attendance-option input:focus-visible + span { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* ===================================================== attachments ======== */

.attachments { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--color-divider); }
.attachment-list { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: flex; flex-direction: column; gap: 8px; }
.attachment {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.attachment-thumb { width: 40px; height: 40px; flex: none; border-radius: var(--radius-sm); object-fit: cover; }
.attachment-icon {
  display: grid; place-items: center; background: var(--garnet); color: #fff;
  font: 700 10px/1 var(--font-heading); letter-spacing: 0.04em;
}
.attachment-body { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.attachment-upload { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.attachment-upload .input { width: auto; flex: 1 1 200px; }

/* =============================================================== modal ==== */

.modal {
  border: 0; padding: 0; background: transparent;
  max-width: min(820px, calc(100vw - 32px));
  width: 100%;
  max-height: calc(100vh - 48px);
  overflow: visible;
}
.modal::backdrop { background: color-mix(in srgb, var(--color-neutral-900) 55%, transparent); }
.modal-body { max-height: calc(100vh - 48px); overflow-y: auto; border-radius: var(--radius-lg); }
.modal .dialog-card { position: relative; margin: 0; max-width: none; box-shadow: var(--shadow-lg); }
.modal-close {
  position: absolute; top: 12px; right: 14px;
  width: 30px; height: 30px; display: grid; place-items: center;
  background: none; border: 0; border-radius: 50%;
  font: 400 22px/1 var(--font-body); color: rgba(32, 30, 29, 0.55); cursor: pointer;
}
.modal-close:hover { background: rgba(32, 30, 29, 0.09); color: var(--color-text); }

@media (prefers-reduced-motion: no-preference) {
  .modal[open] { animation: modal-in 180ms cubic-bezier(0.16, 1, 0.3, 1); }
  @keyframes modal-in {
    from { opacity: 0; transform: translateY(8px) scale(0.985); }
    to   { opacity: 1; transform: none; }
  }
}

/* ======================================================== invitations ==== */

.invite-preview {
  margin: var(--space-4) 0;
  padding: 16px;
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
}
.invite-preview-body {
  margin: 0;
  font: 400 12.5px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 280px;
  overflow-y: auto;
  color: rgba(32, 30, 29, 0.82);
}

/* =========================================================== page cards == */

.page-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-4);
  align-items: start;
}

.page-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
}
.page-card-draft { border-style: dashed; }
.page-card-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.page-card-title { margin: 0; font-size: 18px; line-height: 1.25; }
.page-card-body { margin: 0; font-size: 13.5px; color: rgba(32, 30, 29, 0.72); flex: 1; }
.page-card-foot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 4px; padding-top: 10px;
  border-top: 1px solid var(--color-divider);
}
.page-card-updated { margin-left: auto; }

@media (max-width: 520px) {
  .page-grid { grid-template-columns: 1fr; }
  .page-card-updated { margin-left: 0; }
}

/* A create form tucked behind its own button, so the list stays the focus. */
.inline-form summary { list-style: none; cursor: pointer; }
.inline-form summary::-webkit-details-marker { display: none; }
.inline-form > form { margin-top: 10px; width: min(420px, 90vw); }

/* The dashboard column is narrower than the announcements page, so its cards
   stack rather than sitting side by side. */
.ann-grid-compact { grid-template-columns: 1fr; gap: var(--space-3); }
.ann-grid-compact .ann-card { padding: 15px 17px; }
.ann-grid-compact .ann-card-title { font-size: 16px; }

/* The QR sits beside the typed key, so either route is one glance away. */
.enrol-grid { display: grid; grid-template-columns: auto 1fr; gap: var(--space-6); align-items: start; }
.qr-figure { margin: 0; text-align: center; }
.qr-figure svg {
  display: block;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  background: #fff;
}
.qr-figure figcaption { margin-top: 6px; }

@media (max-width: 620px) {
  .enrol-grid { grid-template-columns: 1fr; }
  .qr-figure svg { margin: 0 auto; }
}

/* ====================================================== gallery strip ==== */

.gallery-strip {
  overflow: hidden;
  border-bottom: 2px solid var(--color-divider);
  background: var(--color-surface);
  position: relative;
}
.gallery-strip:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }

.gallery-track {
  display: flex;
  width: max-content;
  animation: gallery-scroll var(--gallery-duration, 40s) linear infinite;
}
/* Reading a caption should not be a moving target. */
.gallery-strip:hover .gallery-track,
.gallery-strip:focus-within .gallery-track { animation-play-state: paused; }

.gallery-run {
  display: flex;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-3) 0 var(--space-3) var(--space-3);
  list-style: none;
}

.gallery-item {
  position: relative;
  flex: none;
  width: 260px;
  height: 170px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-neutral-200);
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; }

.gallery-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 16px 12px 8px;
  font: 600 12px/1.35 var(--font-body);
  color: #fff;
  background: linear-gradient(transparent, rgba(32, 30, 29, 0.78));
}

@keyframes gallery-scroll {
  from { transform: translate3d(0, 0, 0); }
  /* One full run, so the duplicate lands exactly where the first began. */
  to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-track { animation: none; width: auto; }
  .gallery-strip { overflow-x: auto; }
  /* The duplicate would just be the same photographs twice. */
  .gallery-run[aria-hidden='true'] { display: none; }
}

.gallery-strip-preview { border: 1px solid var(--color-divider); border-radius: var(--radius-lg); }
.gallery-strip-preview .gallery-item { width: 190px; height: 125px; }

@media (max-width: 620px) {
  .gallery-item { width: 200px; height: 132px; }
}

/* ==================================================== gallery admin ====== */

.gallery-admin { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--space-4); }
.gallery-admin-card {
  display: grid;
  grid-template-columns: 120px 1fr;
  grid-template-areas: "thumb body" "actions actions";
  gap: var(--space-3);
  padding: 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
}
.gallery-admin-card.is-hidden { opacity: 0.6; border-style: dashed; }
.gallery-admin-thumb { grid-area: thumb; width: 120px; height: 90px; object-fit: cover; border-radius: var(--radius-md); }
.gallery-admin-body { grid-area: body; min-width: 0; }
.gallery-admin-actions {
  grid-area: actions;
  display: flex; gap: 4px; align-items: center;
  padding-top: 10px; border-top: 1px solid var(--color-divider);
}
.gallery-admin-actions form:last-child { margin-left: auto; }

/* ========================================================== week view ==== */

.week-view {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border: 2px solid var(--color-divider);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.week-column {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 220px;
  padding: 10px 8px;
  border-right: 1px solid var(--color-divider);
}
.week-column:last-child { border-right: 0; }
.week-column-today { background: var(--color-accent-100); }
.week-column-head { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.week-column-head .tt-h6 { margin: 0; }
.week-column-date { font: 800 20px/1 var(--font-heading); }
.week-empty { margin: 0; }

.week-event-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 9px;
  border-radius: var(--radius-md);
  background: var(--garnet);
  color: #fff;
  text-decoration: none;
}
.week-event-card:hover { background: var(--garnet-dk); color: #fff; text-decoration: none; }
.week-event-card.is-public { background: var(--gold-lt); color: var(--garnet-dk); }
.week-event-card.is-public:hover { background: var(--color-accent-2-200); color: var(--garnet-dk); }
.week-event-time { font: 600 10.5px/1.2 var(--font-body); opacity: 0.85; }
.week-event-title { font: 800 12.5px/1.25 var(--font-heading); }
.week-event-place { font: 400 10.5px/1.3 var(--font-body); opacity: 0.85; }

@media (max-width: 860px) {
  /* Seven columns is unreadable on a phone, so the week becomes a list. */
  .week-view { grid-template-columns: 1fr; }
  .week-column {
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--color-divider);
  }
  .week-column:last-child { border-bottom: 0; }
  .week-column-head { gap: 8px; }
}

/* ================================================= condensed visibility == */

.visibility-row {
  display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.visibility-hint { margin: 0 0 9px; flex: 1; min-width: 200px; }

.audience-columns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 620px) { .audience-columns { grid-template-columns: 1fr; } }

/* ==================================================== content sections == */

.blocks { display: flex; flex-direction: column; gap: var(--space-3); }
.block {
  padding: 14px;
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
}
.block-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.block-heading { flex: 1; min-width: 160px; }
.block-tools { display: flex; gap: 2px; align-items: center; margin-left: auto; }

.block-image-grid { display: grid; grid-template-columns: 200px 1fr; gap: var(--space-4); align-items: start; }
.block-preview {
  width: 100%; max-height: 160px; object-fit: cover;
  border-radius: var(--radius-md); border: 1px solid var(--color-divider);
}
.block-preview-empty {
  display: grid; place-items: center; height: 110px; margin: 0;
  background: var(--color-surface); border-style: dashed;
}
@media (max-width: 620px) { .block-image-grid { grid-template-columns: 1fr; } }

/* -- rendered output -- */

.block-render + .block-render { margin-top: var(--space-4); }
.block-figure { margin: 0 0 var(--space-3); }
/* The width and height attributes are there to reserve space, so the height has
   to come back to auto or the picture stretches. */
.block-figure img { display: block; max-width: 100%; height: auto; border-radius: var(--radius-md); }
.block-figure figcaption {
  margin-top: 6px; font-size: 12.5px;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}
.block-align-center .block-figure { text-align: center; }
.block-align-center .block-figure img { margin: 0 auto; }
.block-align-left .block-figure { float: left; max-width: 45%; margin: 0 var(--space-4) var(--space-3) 0; }
.block-align-right .block-figure { float: right; max-width: 45%; margin: 0 0 var(--space-3) var(--space-4); }
/* Floats must not escape the article and drag the footer up with them. */
.block-clear { clear: both; }

@media (max-width: 620px) {
  .block-align-left .block-figure,
  .block-align-right .block-figure { float: none; max-width: 100%; margin: 0 0 var(--space-3); }
}

/* A modal paints in the top layer, so its messages need their own region. */
.toast-region-modal { top: 16px; }
@media (max-width: 640px) { .toast-region-modal { top: auto; bottom: 16px; } }

/* =========================================== overall content alignment == */

/* Left is the default a page has always had: a reading column against the
   left edge. Centred keeps the column and centres it; full width lets the
   article use the whole container. */
.content-left   { max-width: 820px; }
.content-center { max-width: 820px; margin-left: auto; margin-right: auto; }
.content-full   { max-width: none; }

/* A quiet prompt inside a panel: an aside, not an alert. */
.nudge {
  margin: 12px 0;
  padding: 12px 14px;
  background: var(--color-bg);
  border: 1px dashed var(--color-divider);
  border-radius: var(--radius-md);
}

/* A button carrying an icon: a touch taller, with a wider gap so the glyph
   reads as a companion to the label rather than crowding it. The small variant
   keeps its place in a row of small buttons instead of jumping a size. */
.btn-with-icon { gap: 9px; padding-top: 12px; padding-bottom: 12px; }
.btn-sm.btn-with-icon { gap: 7px; padding-top: 8px; padding-bottom: 8px; }

.btn-icon {
  width: 17px; height: 17px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.btn-sm .btn-icon, .btn-sm.btn-with-icon .btn-icon { width: 15px; height: 15px; }

/* On a narrow screen the calendar header runs out of room, so Previous, Next
   and Subscribe drop to their arrow or icon alone. The words stay in the
   document for screen readers rather than being display:none. */
/* An icon, or an initial, that only earns its place once the label is gone. */
.cal-controls .icon-mobile,
.cal-controls .seg-short { display: none; }

@media (max-width: 620px) {
  .cal-controls .btn-label {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .cal-controls .icon-mobile { display: block; }
  .cal-controls .seg-short { display: inline; }
  .cal-controls .seg-opt { padding-left: 13px; padding-right: 13px; }
  .cal-controls .btn-sm { padding-left: 11px; padding-right: 11px; }
  .cal-controls .btn-with-icon { gap: 0; }
  /* New event is a standard-size button, so it needs its own tightening once
     the wording drops away. */
  .cal-controls .btn-primary { gap: 0; padding-left: 14px; padding-right: 14px; }
}

/* The calendar controls sit between the small and the standard button size:
   an easier target than btn-sm, without competing with New event beside them.
   Placed after .btn-sm.btn-with-icon so it governs the Subscribe button too. */
.cal-controls .btn-sm { padding-top: 9px; padding-bottom: 9px; }
.cal-controls .seg-opt { padding-top: 9px; padding-bottom: 9px; }

/* ================================================== paying online == */

.pay-choices { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }

.pay-choice {
  display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
  padding: 14px 16px;
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
}
.pay-choice:hover { border-color: color-mix(in srgb, var(--garnet) 40%, var(--color-divider)); }
.pay-choice:has(input:checked) {
  border-color: var(--garnet);
  background: color-mix(in srgb, var(--garnet) 5%, var(--color-bg));
}
.pay-choice input { margin-top: 3px; flex: none; }

.pay-choice-body { display: flex; flex-direction: column; gap: 3px; width: 100%; min-width: 0; }
.pay-choice-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.pay-choice-total { font-family: var(--font-heading); font-size: 17px; white-space: nowrap; }

/* ==========================================================================
   Newsletters
   The archive listing, one issue as a page, and the section editor with its
   crop overlay. The emailed copy carries its own inline styling and shares
   nothing with this.
   ========================================================================== */

.nl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

.nl-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 2px solid var(--color-divider);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.nl-card-cover { display: block; background: var(--color-neutral-100); }
.nl-card-cover img { display: block; width: 100%; height: 190px; object-fit: cover; }

.nl-card-body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) var(--space-4) var(--space-6); }
.nl-card-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.nl-card-title { margin: 0; font-size: 19px; line-height: 1.3; }
.nl-card-title a { color: var(--color-text); text-decoration: none; }
.nl-card-title a:hover { color: var(--garnet); text-decoration: underline; }
.nl-card-summary { margin: 0; color: var(--color-neutral-800); font-size: 15px; line-height: 1.55; }
.nl-card-foot { margin: auto 0 0; padding-top: var(--space-2); }

/* One issue, read on the site. */
.nl-issue-head { margin-bottom: var(--space-6); }
.nl-issue-meta {
  margin: 0 0 var(--space-2);
  color: var(--garnet);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.nl-issue-head h1 { margin: 0; font-size: 34px; line-height: 1.2; }
.nl-issue-summary { margin: var(--space-3) 0 0; font-size: 18px; line-height: 1.6; color: var(--color-neutral-800); }
.nl-issue-cover { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); margin-bottom: var(--space-6); }
.nl-issue-foot { margin-top: var(--space-8); padding-top: var(--space-4); border-top: 1px solid var(--color-neutral-300); }

.nl-section { margin-bottom: var(--space-6); }
.nl-heading { margin: 0 0 var(--space-2); font-size: 24px; line-height: 1.3; color: var(--garnet-dk); }
.nl-subheading { margin: 0 0 var(--space-3); color: var(--color-neutral-800); font-size: 15px; }
.nl-rule { margin: var(--space-8) 0; border: 0; border-top: 1px solid var(--color-neutral-300); }

.nl-figure { margin: 0 0 var(--space-4); }
.nl-figure img { display: block; width: 100%; height: auto; border-radius: var(--radius-md); }
.nl-figure figcaption { margin-top: var(--space-2); font-size: 13px; color: var(--color-neutral-800); }
.nl-align-center { max-width: 560px; margin-left: auto; margin-right: auto; }
.nl-align-left, .nl-align-right { max-width: 320px; }
.nl-align-left { float: left; margin-right: var(--space-6); }
.nl-align-right { float: right; margin-left: var(--space-6); }

.nl-split { display: grid; grid-template-columns: minmax(180px, 260px) 1fr; gap: var(--space-6); align-items: start; }
.nl-split-reverse { direction: rtl; }
.nl-split-reverse > * { direction: ltr; }

.nl-quote {
  margin: 0 0 var(--space-4);
  padding: var(--space-4) var(--space-6);
  background: var(--color-neutral-100);
  border-left: 4px solid var(--garnet);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: 19px;
  font-style: italic;
  line-height: 1.5;
}
.nl-quote cite { display: block; margin-top: var(--space-2); font-size: 14px; font-style: normal; color: var(--color-neutral-800); }

.nl-links, .nl-contacts, .nl-events { margin: 0 0 var(--space-4); padding: 0; list-style: none; }
.nl-links li, .nl-contacts li, .nl-events li {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-neutral-300);
}
.nl-link-label, .nl-contact-name, .nl-event-title { display: block; font-size: 16px; font-weight: 600; }
.nl-link-note, .nl-contact-role, .nl-event-place { display: block; font-size: 14px; color: var(--color-neutral-800); }
.nl-event-when {
  display: block;
  color: var(--garnet);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.nl-button-row { margin: var(--space-3) 0 var(--space-4); }

/* The editor. */
.nl-edit { margin-bottom: var(--space-4); }
.nl-add { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-neutral-300); }
.nl-items td { padding: 4px 6px 4px 0; }
.nl-items .input { min-width: 140px; }

.nl-image { display: grid; grid-template-columns: minmax(200px, 300px) 1fr; gap: var(--space-6); align-items: start; margin-bottom: var(--space-4); }
.nl-image-preview img { display: block; width: 100%; height: auto; border-radius: var(--radius-md); }
.nl-image-empty {
  display: grid;
  place-items: center;
  min-height: 140px;
  background: var(--color-neutral-100);
  border: 1px dashed var(--color-neutral-300);
  border-radius: var(--radius-md);
}

/* The crop overlay sits on the picture; without JavaScript it stays hidden
   and the four numbers below it are typed instead. */
.nl-crop-stage { position: relative; display: block; line-height: 0; touch-action: none; }
.nl-crop-stage[data-crop-ready] { cursor: crosshair; }
.nl-crop-image { display: block; width: 100%; height: auto; border-radius: var(--radius-md); user-select: none; }
.nl-crop-box {
  position: absolute;
  border: 2px solid var(--gold);
  box-shadow: 0 0 0 9999px rgba(32, 30, 29, .45);
  pointer-events: none;
}
.nl-crop-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }

.nl-preview-frame {
  border: 2px solid var(--color-divider);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #f3f2f2;
}
.nl-preview-frame iframe { display: block; width: 100%; min-height: 820px; border: 0; }

@media (max-width: 760px) {
  .nl-image, .nl-split { grid-template-columns: 1fr; }
  .nl-align-left, .nl-align-right { float: none; max-width: none; margin-left: 0; margin-right: 0; }
  .nl-crop-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}