/* ============================================================
   AGAVE — a theme for Plone
   Design tokens + base components.
   Everything is driven by CSS custom properties so the whole
   theme can be re-skinned by overriding :root.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root{
  /* ---- Neutrals (warm, green-tinted off-whites) ---- */
  --paper:      #fbfcf9;   /* page background */
  --surface:    #ffffff;   /* cards / header */
  --surface-2:  #f1f5ef;   /* subtle fills, alt sections */
  --ink:        #1f2b25;   /* primary text */
  --ink-soft:   #45554c;   /* secondary text */
  --muted:      #6b786f;   /* meta text */
  --faint:      #9aa69d;   /* separators, hints */
  --line:       #e4eae2;   /* hairline borders */
  --line-strong:#d4ddd2;

  /* ---- Agave green (brand) ---- */
  --green-50:  #eef4ef;
  --green-100: #dcebe1;
  --green-200: #bedac8;
  --green-300: #94c0a8;
  --green-400: #6aa489;
  --green-500: #4f8a72;   /* brand mark */
  --green-600: #3f7561;   /* primary actions, links */
  --green-700: #335f4f;   /* hover / deep accent */
  --green-800: #284b3f;

  /* ---- Clay / terracotta (warm accent · News) ---- */
  --clay-50:  #fbf0ea;
  --clay-100: #f6ddd0;
  --clay-300: #e6ab8c;
  --clay-500: #cf7d5b;
  --clay-600: #bd6644;
  --clay-700: #9d5031;

  /* ---- Amber (soft third note · Events) ---- */
  --amber-50:  #faf3de;
  --amber-100: #f4e6bd;
  --amber-300: #ecce81;
  --amber-500: #d2a63f;
  --amber-700: #8f6c1c;

  /* ---- Shape & elevation ---- */
  --radius:    6px;
  --radius-lg: 10px;
  --radius-sm: 4px;
  --shadow-sm: 0 1px 2px rgba(31,43,37,.05), 0 1px 1px rgba(31,43,37,.04);
  --shadow-md: 0 6px 18px -8px rgba(31,43,37,.18), 0 2px 6px -2px rgba(31,43,37,.08);
  --shadow-lg: 0 24px 48px -20px rgba(31,43,37,.28);

  /* ---- Layout ---- */
  --container: 1200px;
  --container-narrow: 760px;
  --gutter: 32px;

  --font:  'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --ease: cubic-bezier(.2,.6,.2,1);
}

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

html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:var(--paper);
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4{ margin:0; line-height:1.12; letter-spacing:-.018em; font-weight:700; color:var(--ink); }
p{ margin:0; }
a{ color:var(--green-700); text-decoration:none; }

img{ max-width:100%; display:block; }

.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }

/* ---- Type helpers ---- */
.eyebrow{
  font-size:12.5px; font-weight:700; letter-spacing:.15em;
  text-transform:uppercase; color:var(--green-700);
  margin:0;
}
.t-display{ font-size:clamp(38px,4.6vw,54px); font-weight:800; line-height:1.05; letter-spacing:-.025em; }
.t-h1{ font-size:clamp(32px,3.4vw,44px); font-weight:800; line-height:1.08; letter-spacing:-.022em; }
.t-h2{ font-size:clamp(26px,2.5vw,32px); font-weight:700; }
.t-h3{ font-size:22px; font-weight:700; }
.t-lead{ font-size:clamp(19px,1.7vw,22px); line-height:1.5; color:var(--ink-soft); font-weight:400; }
.t-meta{ font-size:14.5px; color:var(--muted); }
.t-small{ font-size:14px; }

/* ============================================================
   Buttons & links
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--font); font-size:15px; font-weight:600; line-height:1;
  padding:12px 20px; border-radius:var(--radius);
  border:1px solid transparent; cursor:pointer;
  transition:background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
  text-decoration:none; white-space:nowrap;
}
.btn--primary{ background:var(--green-600); color:#fff; }
.btn--primary:hover{ background:var(--green-700); }
.btn--ghost{ background:transparent; color:var(--green-700); border-color:var(--line-strong); }
.btn--ghost:hover{ background:var(--green-50); border-color:var(--green-300); }
.btn--clay{ background:var(--clay-600); color:#fff; }
.btn--clay:hover{ background:var(--clay-700); }

.link-arrow{
  display:inline-flex; align-items:center; gap:.4em;
  font-weight:600; color:var(--green-700);
}
.link-arrow svg{ transition:transform .2s var(--ease); }
.link-arrow:hover svg{ transform:translateX(3px); }

/* ============================================================
   Content-type tags
   ============================================================ */
.tag{
  display:inline-flex; align-items:center; gap:7px;
  font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:6px 11px 6px 10px; border-radius:var(--radius);
  line-height:1;
}
.tag .dot{ width:7px; height:7px; border-radius:50%; }
.tag--news { background:var(--clay-50);  color:var(--clay-700); }
.tag--news .dot{ background:var(--clay-500); }
.tag--event{ background:var(--amber-50); color:var(--amber-700); }
.tag--event .dot{ background:var(--amber-500); }
.tag--page { background:var(--green-50); color:var(--green-700); }
.tag--page .dot{ background:var(--green-500); }

/* ============================================================
   Breadcrumbs
   ============================================================ */
.breadcrumb{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:14px; color:var(--muted); }
.breadcrumb a{ color:var(--muted); transition:color .15s var(--ease); }
.breadcrumb a:hover{ color:var(--green-700); }
.breadcrumb .sep{ color:var(--faint); }
.breadcrumb [aria-current]{ color:var(--ink); font-weight:600; }

/* ============================================================
   Search field
   ============================================================ */
.search{
  display:flex; align-items:center; gap:9px;
  background:var(--surface); border:1px solid var(--line-strong);
  border-radius:var(--radius); padding:0 12px; height:42px;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.search:focus-within{ border-color:var(--green-400); box-shadow:0 0 0 3px var(--green-100); }
.search svg{ flex:none; color:var(--muted); }
.search input{
  border:0; background:transparent; outline:none;
  font-family:var(--font); font-size:15px; color:var(--ink);
  width:170px; padding:0;
}
.search input::placeholder{ color:var(--faint); }

/* ---- Login link ---- */
.login{
  display:inline-flex; align-items:center; gap:7px;
  font-weight:600; font-size:15px; color:var(--green-700);
  padding:8px 4px; transition:color .15s var(--ease);
  white-space:nowrap;
}
.login:hover{ color:var(--green-800); }
.login svg{ color:var(--green-500); }

/* ============================================================
   Brand / logo
   ============================================================ */
.brand{ display:inline-flex; align-items:center; gap:11px; text-decoration:none; }
.brand__mark{ flex:none; }
.brand__word{
  font-weight:800; font-size:23px; letter-spacing:-.02em; color:var(--ink);
  line-height:1;
}
.brand__word b{ color:var(--green-600); font-weight:800; }

/* ============================================================
   Main navigation (shared)
   ============================================================ */
.mainnav{ display:flex; align-items:center; gap:4px; }
.mainnav a{
  display:inline-flex; align-items:center; gap:5px;
  font-size:15.5px; font-weight:600; color:var(--ink-soft);
  padding:9px 14px; border-radius:var(--radius);
  transition:color .15s var(--ease), background .15s var(--ease);
  position:relative;
}
.mainnav a:hover{ color:var(--green-700); background:var(--green-50); }
.mainnav a[aria-current]{ color:var(--green-700); }
.mainnav a[aria-current]::after{
  content:""; position:absolute; left:14px; right:14px; bottom:2px; height:2px;
  background:var(--green-500); border-radius:2px;
}
.mainnav .caret{ width:9px; height:9px; opacity:.55; }

/* ============================================================
   HEADER A — single row
   ============================================================ */
.ah{ background:var(--surface); }
.ah a{ -webkit-tap-highlight-color:transparent; }

.ah--single{ border-bottom:1px solid var(--line); }
.ah--single .ah__inner{
  display:flex; align-items:center; gap:22px;
  height:76px; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter);
}
.ah--single .mainnav{ margin-inline:auto; }
.ah--single .ah__tools{ display:flex; align-items:center; gap:12px; margin-left:auto; }
.ah--single .ah__tools .search input{ width:130px; }
.ah--single .ah__tools .login{ border-left:1px solid var(--line); padding-left:14px; }

/* ============================================================
   HEADER B — two tiers
   ============================================================ */
.ah--tiers .ah__utility{ background:var(--surface); border-bottom:1px solid var(--line); }
.ah--tiers .ah__utility .ah__inner{
  display:flex; align-items:center; gap:24px;
  height:64px; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter);
}
.ah--tiers .ah__utility .ah__tools{ display:flex; align-items:center; gap:16px; margin-left:auto; }
.ah--tiers .ah__utility .login{ border-left:1px solid var(--line); padding-left:16px; }

.ah--tiers .ah__navrow{ background:var(--green-700); }
.ah--tiers .ah__navrow .ah__inner{
  max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter);
}
.ah--tiers .ah__navrow .mainnav{ gap:2px; }
.ah--tiers .ah__navrow .mainnav a{
  color:rgba(255,255,255,.82); padding:15px 16px; border-radius:0; font-size:15.5px;
}
.ah--tiers .ah__navrow .mainnav a:hover{ color:#fff; background:rgba(255,255,255,.10); }
.ah--tiers .ah__navrow .mainnav a[aria-current]{ color:#fff; background:rgba(255,255,255,.12); }
.ah--tiers .ah__navrow .mainnav a[aria-current]::after{
  left:16px; right:16px; bottom:0; height:3px; background:var(--amber-300);
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background:var(--green-800); color:rgba(255,255,255,.72); }
.site-footer .brand__word{ color:#fff; }
.site-footer .brand__word b{ color:var(--green-300); }

.ftr__top{
  max-width:var(--container); margin-inline:auto; padding:56px var(--gutter) 44px;
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px;
}
.ftr__about{ max-width:300px; }
.ftr__tagline{ margin-top:16px; font-size:15px; line-height:1.6; color:rgba(255,255,255,.66); }

.ftr__col h4{
  font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--green-300); margin-bottom:16px;
}
.ftr__col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.ftr__col a, .ftr__col li{ color:rgba(255,255,255,.74); font-size:15px; }
.ftr__col a{ transition:color .15s var(--ease); }
.ftr__col a:hover{ color:#fff; }
.ftr__addr{ font-style:normal; line-height:1.7; color:rgba(255,255,255,.66); font-size:15px; }

.social{ display:flex; gap:10px; margin-top:22px; }
.social a{
  width:38px; height:38px; border-radius:var(--radius);
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.08); color:#fff; font-weight:700; font-size:13.5px;
  border:1px solid rgba(255,255,255,.12);
  transition:background .15s var(--ease), border-color .15s var(--ease), transform .15s var(--ease);
}
.social a:hover{ background:var(--green-600); border-color:var(--green-500); transform:translateY(-2px); }

.ftr__bar{ border-top:1px solid rgba(255,255,255,.12); }
.ftr__bar .ftr__bar-inner{
  max-width:var(--container); margin-inline:auto; padding:20px var(--gutter);
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  font-size:13.5px; color:rgba(255,255,255,.55);
}
.ftr__bar a{ color:rgba(255,255,255,.7); }
.ftr__bar a:hover{ color:#fff; }
.ftr__bar .spacer{ margin-left:auto; }
.ftr__legal{ display:flex; gap:18px; flex-wrap:wrap; }

/* ============================================================
   Image placeholder (until real photography is dropped in)
   ============================================================ */
.ph{
  position:relative; background:
    repeating-linear-gradient(135deg, var(--green-50) 0 14px, var(--surface-2) 14px 28px);
  border:1px solid var(--line); border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.ph span{
  font-family:ui-monospace,'SF Mono',Menlo,monospace; font-size:12px; letter-spacing:.04em;
  color:var(--green-700); background:rgba(255,255,255,.78); padding:5px 11px; border-radius:999px;
  border:1px solid var(--line);
}

/* ============================================================
   Brand logo switch (Plone ⇄ Agave wordmark)
   ============================================================ */
.brand .plone-mark{ height:30px; width:auto; display:block; }
.site-footer .brand .plone-mark{ height:34px; }
[data-logo="plone"] .brand .as-agave{ display:none; }
[data-logo="agave"] .brand .as-plone{ display:none; }
.brand .as-agave{ display:inline-flex; align-items:center; gap:11px; }

/* ============================================================
   Layout helpers for content pages
   ============================================================ */
.container--narrow{ max-width:744px; }

.crumbs{ background:var(--surface); border-bottom:1px solid var(--line); }
.crumbs .container{ padding-block:13px; }

main{ display:block; }
.section{ padding-block:72px; }
.section--tint{ background:var(--surface-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:30px; }
.section-head h2{ font-size:27px; }

/* ---- Article / page header ---- */
.article-head{ padding-top:52px; }
.article-head .tag{ margin-bottom:20px; }
.article-head h1{ font-size:clamp(33px,4.2vw,50px); font-weight:800; letter-spacing:-.025em; line-height:1.06; }
.article-head .t-lead{ margin-top:22px; }

.byline{ display:flex; align-items:center; gap:14px; margin-top:30px; padding-top:22px;
  border-top:1px solid var(--line); flex-wrap:wrap; }
.byline .avatar{ width:42px; height:42px; border-radius:50%; background:var(--green-100);
  border:1px solid var(--green-200); flex:none; display:flex; align-items:center; justify-content:center;
  color:var(--green-700); font-weight:700; font-size:15px; }
.byline .who{ font-weight:600; color:var(--ink); font-size:15px; line-height:1.3; }
.byline .who span{ display:block; font-weight:400; color:var(--muted); font-size:13.5px; }
.byline .dot-sep{ color:var(--faint); }
.byline .meta-inline{ display:flex; align-items:center; gap:10px; color:var(--muted); font-size:14.5px; margin-left:auto; }

/* ---- Hero figure ---- */
.hero-figure{ margin:40px auto 0; }
.hero-figure .ph{ aspect-ratio:16/8; width:100%; }
figure{ margin:0; }
figcaption{ font-size:13.5px; color:var(--muted); margin-top:10px; line-height:1.5; }
figcaption b{ color:var(--ink-soft); font-weight:600; }

/* ============================================================
   Prose (rich text body)
   ============================================================ */
.prose{ max-width:720px; margin-inline:auto; font-size:18px; line-height:1.7; color:var(--ink); }
.prose > * + *{ margin-top:1.3em; }
.prose h2{ font-size:29px; font-weight:700; letter-spacing:-.02em; margin-top:1.7em; }
.prose h3{ font-size:21px; font-weight:700; margin-top:1.5em; }
.prose p{ color:var(--ink); }
.prose a{ color:var(--green-700); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:var(--green-300); text-decoration-thickness:1.5px; }
.prose a:hover{ text-decoration-color:var(--green-600); }
.prose ul, .prose ol{ padding-left:1.35em; }
.prose li{ margin-top:.5em; padding-left:.2em; }
.prose li::marker{ color:var(--green-500); }
.prose strong{ font-weight:700; }
.prose hr{ border:0; border-top:1px solid var(--line); margin:2.4em 0; }
.prose figure{ margin:2.4em 0; }
.prose figure .ph{ aspect-ratio:16/9; }

/* breakout figures wider than the text column */
.prose .figure--wide{ width:min(960px, 92vw); margin-inline:calc((720px - min(960px,92vw)) / 2); }
.prose .figure--duo{ width:min(960px,92vw); margin-inline:calc((720px - min(960px,92vw)) / 2);
  display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.prose .figure--duo .ph{ aspect-ratio:4/3; }

.pullquote{ margin:2em 0; padding:6px 0 6px 26px; border-left:3px solid var(--clay-500); }
.pullquote p{ font-size:25px; line-height:1.35; font-weight:600; letter-spacing:-.015em; color:var(--ink); }
.pullquote cite{ display:block; margin-top:14px; font-size:14.5px; font-style:normal; color:var(--muted); font-weight:500; }

.callout{ background:var(--green-50); border:1px solid var(--green-200); border-radius:var(--radius);
  padding:20px 22px; font-size:16px; color:var(--ink-soft); }
.callout h4{ font-size:15px; margin-bottom:6px; color:var(--green-800); }

.prose table{ width:100%; border-collapse:collapse; font-size:16px; }
.prose table th{ text-align:left; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); padding:10px 14px; border-bottom:2px solid var(--line-strong); }
.prose table td{ padding:11px 14px; border-bottom:1px solid var(--line); }
.prose table tr:hover td{ background:var(--surface-2); }

/* ============================================================
   Event details panel
   ============================================================ */
.event-layout{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:56px; align-items:start; }
.event-aside{ position:sticky; top:24px; display:flex; flex-direction:column; gap:18px; }
.event-panel{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); overflow:hidden; }
.event-panel .ep-cap{ background:var(--amber-50); border-bottom:1px solid var(--amber-100);
  padding:16px 22px; display:flex; align-items:center; gap:12px; }
.event-panel .ep-cap .cal{ width:46px; height:46px; border-radius:8px; background:#fff; border:1px solid var(--amber-100);
  text-align:center; overflow:hidden; flex:none; }
.event-panel .ep-cap .cal b{ display:block; background:var(--amber-500); color:#fff; font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; padding:3px 0; font-weight:700; }
.event-panel .ep-cap .cal i{ display:block; font-style:normal; font-size:21px; font-weight:800; color:var(--ink); line-height:1.3; }
.event-panel .ep-cap .ep-when b{ display:block; font-weight:700; color:var(--ink); font-size:16px; }
.event-panel .ep-cap .ep-when span{ font-size:13.5px; color:var(--muted); }
.event-panel .ep-body{ padding:20px 22px; display:flex; flex-direction:column; gap:16px; }
.ep-row{ display:flex; gap:13px; align-items:flex-start; }
.ep-row svg{ color:var(--green-500); flex:none; margin-top:2px; }
.ep-row .k{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:700; }
.ep-row .v{ font-size:15.5px; color:var(--ink); line-height:1.45; }
.event-panel .ep-actions{ padding:0 22px 22px; display:flex; flex-direction:column; gap:10px; }
.event-panel .ep-actions .btn{ justify-content:center; }
.map-ph{ height:150px; }

.event-facts{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.fact{ display:inline-flex; align-items:center; gap:9px; background:var(--surface); border:1px solid var(--line);
  border-radius:999px; padding:9px 16px 9px 13px; font-size:14.5px; color:var(--ink-soft); }
.fact svg{ color:var(--green-500); }
.fact b{ color:var(--ink); font-weight:600; }

/* ============================================================
   Listing / related cards
   ============================================================ */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.card-item{ display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); overflow:hidden; transition:box-shadow .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease); }
.card-item:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px); border-color:var(--line-strong); }
.card-item .ph{ border:0; border-radius:0; aspect-ratio:16/10; }
.card-body{ padding:18px 20px 22px; display:flex; flex-direction:column; gap:10px; flex:1; }
.card-body .tag{ align-self:flex-start; }
.card-body h3{ font-size:19px; line-height:1.25; letter-spacing:-.01em; }
.card-body h3 a{ color:var(--ink); }
.card-item:hover .card-body h3 a{ color:var(--green-700); }
.card-body .excerpt{ font-size:14.5px; color:var(--muted); line-height:1.5; }
.card-body .card-meta{ margin-top:auto; padding-top:6px; font-size:13.5px; color:var(--muted); display:flex; gap:9px; align-items:center; }

/* ---- on-this-page / table of contents ---- */
.page-layout{ display:grid; grid-template-columns:minmax(0,1fr) 232px; gap:56px; align-items:start; }
.toc{ position:sticky; top:24px; }
.toc h4{ font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:14px;
  padding-bottom:10px; border-bottom:1px solid var(--line); }
.toc ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.toc a{ display:block; font-size:14.5px; color:var(--ink-soft); padding:7px 12px; border-radius:var(--radius);
  border-left:2px solid transparent; transition:all .15s var(--ease); }
.toc a:hover{ background:var(--green-50); color:var(--green-700); }
.toc a[aria-current]{ color:var(--green-700); font-weight:600; border-left-color:var(--green-500); background:var(--green-50); }

/* ---- tag list / share row at article foot ---- */
.article-foot{ max-width:720px; margin:48px auto 0; padding-top:26px; border-top:1px solid var(--line);
  display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.chips{ display:flex; gap:9px; flex-wrap:wrap; }
.chip{ font-size:13.5px; color:var(--green-700); background:var(--green-50); border:1px solid var(--green-100);
  padding:6px 13px; border-radius:999px; transition:background .15s var(--ease); }
.chip:hover{ background:var(--green-100); }
.share{ margin-left:auto; display:flex; gap:8px; align-items:center; }
.share span{ font-size:13.5px; color:var(--muted); }
.share a{ width:36px; height:36px; border-radius:var(--radius); border:1px solid var(--line);
  display:inline-flex; align-items:center; justify-content:center; color:var(--green-700); font-weight:700; font-size:13px;
  transition:all .15s var(--ease); }
.share a:hover{ background:var(--green-50); border-color:var(--green-300); }

/* ============================================================
   Search results page
   ============================================================ */
.search-page{ max-width:840px; }
.search-head{ padding-top:48px; }
.search-head h1{ font-size:clamp(30px,3.4vw,40px); font-weight:800; letter-spacing:-.022em; }

/* big search field + button */
.search-form{ display:flex; gap:12px; margin-top:24px; }
.search.search--lg{ flex:1; height:56px; border-radius:var(--radius); padding:0 18px; gap:12px; }
.search.search--lg input{ width:100%; font-size:18px; }
.search.search--lg svg{ width:20px; height:20px; }
.search-form .btn{ height:56px; padding-inline:26px; font-size:16px; }

/* results bar: count + sort */
.results-bar{ display:flex; align-items:center; justify-content:space-between; gap:20px;
  margin-top:34px; padding-bottom:18px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.results-count{ font-size:15px; color:var(--muted); }
.results-count b{ color:var(--ink); font-weight:700; }
.results-count em{ font-style:normal; color:var(--green-700); font-weight:600; }
.sort-control{ display:flex; align-items:center; gap:10px; }
.sort-control label{ font-size:14px; color:var(--muted); white-space:nowrap; }
.sort-select{ position:relative; }
.sort-select select{ appearance:none; -webkit-appearance:none; font-family:var(--font); font-size:14.5px; font-weight:600;
  color:var(--ink); background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius);
  height:42px; padding:0 38px 0 14px; cursor:pointer; transition:border-color .15s var(--ease); }
.sort-select select:hover{ border-color:var(--green-300); }
.sort-select select:focus{ outline:none; border-color:var(--green-400); box-shadow:0 0 0 3px var(--green-100); }
.sort-select svg{ position:absolute; right:13px; top:50%; transform:translateY(-50%); pointer-events:none; color:var(--muted); }

/* result list */
.results{ display:flex; flex-direction:column; }
.result{ padding:26px 0; border-bottom:1px solid var(--line); }
.result-meta{ display:flex; align-items:center; gap:12px; margin-bottom:11px; }
.result-meta time{ font-size:13.5px; color:var(--muted); }
.result h3{ font-size:21px; font-weight:700; letter-spacing:-.012em; line-height:1.3; }
.result h3 a{ color:var(--ink); transition:color .15s var(--ease); text-underline-offset:3px; }
.result h3 a:hover{ color:var(--green-700); text-decoration:underline; }
.result-summary{ margin-top:7px; font-size:15.5px; color:var(--ink-soft); line-height:1.55; max-width:68ch; }
.result-summary mark{ background:var(--amber-100); color:inherit; padding:0 2px; border-radius:3px; }
.result-crumb{ margin-top:13px; font-size:13px; }
.result-crumb a{ color:var(--green-600); }
.result-crumb .sep{ color:var(--faint); }
.result-crumb [aria-current]{ color:var(--muted); font-weight:500; }

/* empty state */
.no-results{ padding:56px 0; text-align:center; color:var(--muted); }
.no-results b{ display:block; color:var(--ink); font-size:19px; font-weight:700; margin-bottom:8px; }

/* pagination */
.pagination{ display:flex; align-items:center; justify-content:center; gap:7px; margin-top:42px; flex-wrap:wrap; }
.pagination button{ min-width:42px; height:42px; padding:0 12px; border:1px solid var(--line); background:var(--surface);
  border-radius:var(--radius); font-family:var(--font); font-size:15px; font-weight:600; color:var(--ink-soft);
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  transition:all .15s var(--ease); }
.pagination button:hover:not(:disabled):not([aria-current]){ background:var(--green-50); border-color:var(--green-300); color:var(--green-700); }
.pagination button[aria-current]{ background:var(--green-600); border-color:var(--green-600); color:#fff; cursor:default; }
.pagination button:disabled{ opacity:.4; cursor:not-allowed; }
.pagination .ellipsis{ color:var(--faint); padding:0 4px; user-select:none; }

@media (max-width: 600px){
  .search-form{ flex-direction:column; }
  .search-form .btn{ width:100%; }
  .results-bar{ flex-direction:column; align-items:flex-start; gap:12px; }
}

/* ============================================================
   Sitemap
   ============================================================ */
.sitemap{ max-width:960px; }
.sitemap-head{ padding-top:48px; }
.sitemap-head h1{ font-size:clamp(30px,3.4vw,40px); font-weight:800; letter-spacing:-.022em; }
.sitemap-head p{ margin-top:14px; font-size:18px; color:var(--ink-soft); max-width:60ch; }

.sitemap-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px 64px; align-items:start; margin-top:40px; }
.sm-section{ padding:24px 0; border-top:1px solid var(--line); }
.sm-h{ display:flex; align-items:center; gap:11px; margin-bottom:16px; }
.sm-h .mk{ width:9px; height:9px; border-radius:2px; background:var(--green-500); flex:none; }
.sm-h a{ font-size:19px; font-weight:700; letter-spacing:-.012em; color:var(--ink); }
.sm-h a:hover{ color:var(--green-700); }

.sm-list{ list-style:none; margin:0; padding-left:20px; display:flex; flex-direction:column; gap:10px; }
.sm-list > li > a{ color:var(--green-700); font-size:15.5px; font-weight:600; }
.sm-list > li > a:hover{ text-decoration:underline; text-underline-offset:3px; }
.sm-sub{ list-style:none; margin:11px 0 2px; padding-left:18px; border-left:1px solid var(--line);
  display:flex; flex-direction:column; gap:9px; }
.sm-sub a{ color:var(--ink-soft); font-size:14.5px; font-weight:400; }
.sm-sub a:hover{ color:var(--green-700); }

@media (max-width: 680px){
  .sitemap-grid{ grid-template-columns:1fr; gap:0; }
}

@media (max-width: 1000px){
  .event-layout{ grid-template-columns:1fr; gap:36px; }
  .event-aside{ position:static; }
  .page-layout{ grid-template-columns:1fr; }
  .toc{ display:none; }
  .cards{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 900px){
  .ftr__top{ grid-template-columns:1fr 1fr; gap:32px; }
  .mainnav{ display:none; }
}
@media (max-width: 640px){
  .cards{ grid-template-columns:1fr; }
  .prose .figure--wide, .prose .figure--duo{ width:100%; margin-inline:0; }
  .prose .figure--duo{ grid-template-columns:1fr; }
}
@media (max-width: 560px){
  .ftr__top{ grid-template-columns:1fr; }
}