/* ==========================================================================
   St. Thomas Kinsmen modern responsive PmWiki skin - v13
   --------------------------------------------------------------------------
   Ported from the District 1 Kin skin (d1-2026-refined-v20.css) and
   restructured to the STK design:

   - FULL-BLEED bands: the red keyline, grey header, red nav, and charcoal
     footer backgrounds run 100% of the screen width; menus/content stay
     constrained to --d1-max (same 1200px as District 1). Gutters are ~5-10px
     wider than D1.
   - Light grey page canvas; content, left menu, and aside are separate white
     boxes floating on it (no single site card, no dark body gradient).
   - LEFT section menu (D1 is right) with the site searchbox inside it, plus
     an aside box below it for the Facebook feed (TemplateAside zone).
   - Header: dark grey band with a light-grey glow pooled behind the logo;
     optional highlight card (.d1-highlight) where the old menu sat.
   - Flat red top nav: hover/active are solid darker blocks (no white rule,
     no gloss -- those stay District signatures). Dropdowns/mega unchanged.
   - Breadcrumb (TemplateTitle) sits directly on the grey canvas.
   - H1 accent: red LEFT border block (D1 uses an underline bar).
   - Square boxes everywhere: buttons, cards, icon chips (radius 0).
   - No top black bar or floating bottom bar by default (CSS retained; the
     php defaults those zones off).

   Class names and CSS variables keep the d1- prefix on purpose so wiki
   markup and fixes stay copy-paste portable with district1kin.ca.

   Sections:
     01 Tokens          05 Primary nav      09 Footer / bottom bars
     02 Base elements   06 Alert / hero     10 Gallery + helpers
     03 Layout shells   07 Content column   11 Animations
     04 Top bar/header  08 Left nav/aside   12 Responsive + print
   ========================================================================== */

/* 01 - Tokens ------------------------------------------------------------ */
:root {
  --d1-red: #c50207;
  --d1-red-dark: #8f0004;
  --d1-red-deep: #710003;
  --d1-red-soft: #fbe8e8;
  --d1-charcoal: #1f1e1d;
  --d1-charcoal-deep: #181716;
  --d1-ink: #252525;
  --d1-muted: #68605c;
  --d1-warm: #f7f3ef;
  --d1-line: #eadfdb;
  --d1-page-top: #bfbfbf;      /* page gradient, matching the existing site... */
  --d1-page-bottom: #7f7f7f;   /* ...top to bottom */
  --d1-slate: #2a3036;         /* the header band itself; also the section-menu toggle */
  --d1-keyline: 4px;           /* thin red line across the very top, full screen width */
  --d1-max: 1200px;
  --d1-gutter: clamp(1.05rem, 2.6vw, 1.9rem); /* inner side padding of every band: D1 + ~5-10px per edge */
  --d1-col-gap: clamp(.85rem, 1.6vw, 1.2rem); /* gap between the left column boxes and the main box */
  --d1-nav-col-min: 270px;
  --d1-nav-col-max: 320px;
  --d1-crest-w: clamp(220px, 26vw, 300px); /* header logo (TemplateLogo) width cap: 300px art */
  --d1-crest-h: 115px;         /* header logo height cap (300 x 115 artwork) */
  --d1-item-pad: 1.05rem;      /* SHARED text inset: top-nav links, left-menu rows, and the
                                  breadcrumb all start their text this far past the gutter,
                                  while their blocks (active boxes, search box) sit ON it */
  --d1-navcard-pad: clamp(.9rem, 1.8vw, 1.25rem); /* left-menu card padding; rows pull back
                                  through it so their boxes reach the card (= gutter) edge */
  --d1-crest-nudge: 0px;       /* fine left/right adjustment of the logo ARTWORK (baked-in transparent margins) */
  --d1-social-lift: -5px;      /* vertical adjustment of the social icons (top bar zone, off by default) */
  --d1-copy-inset: clamp(1rem, 2.4vw, 1.8rem); /* padding INSIDE the white boxes; the box EDGES align to the gutter */
  --d1-shadow-float: 0 3px 10px rgba(0, 0, 0, .12); /* floating white boxes */
  --d1-shadow-card: 0 3px 10px rgba(0, 0, 0, .12);
  --d1-shadow-band: 0 6px 18px rgba(0, 0, 0, .18);
  /* Fonts are config-driven (see the php's font block) and can be overridden
     from local/config.php without editing this file. These :root values are
     the built-in DEFAULTS, pre-populated to the STK choice:
       body   -> Archivo (regular width, comfortable reading)
       display-> Archivo Narrow (headings/nav/buttons, tight and distinctive)
     If DisplayFont/BodyFont are set in config, the php emits a later <style>
     that overrides these two lines. */
  --d1-font: "Archivo", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif;
  --d1-display: "Archivo Narrow", "Segoe UI Condensed", "Arial Narrow", Arial, Helvetica, sans-serif;
}

/* 02 - Base elements ------------------------------------------------------ */
* { box-sizing: border-box; }
html { font-size: 100%; scroll-behavior: smooth; }
html, body { overflow-x: hidden; }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--d1-ink);
  /* Existing site's background: grey gradient, top to bottom of the page. */
  background: linear-gradient(180deg, var(--d1-page-top) 0%, var(--d1-page-bottom) 100%);
  font-family: var(--d1-font);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}
/* If you re-enable the floating bottom bar ($TemplateSkin['TemplateBottomNav'])
   give the page room for it again: body { padding-bottom: 4rem; } in ExtraCSS. */

a { color: #741317; text-decoration-color: rgba(197, 2, 7, .45); text-underline-offset: .18em; }
a:visited { color: #5d2930; }
a:hover { color: var(--d1-red); text-decoration-color: currentColor; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #f5c542;
  outline-offset: 3px;
  border-radius: .35rem;
}

img { max-width: 100%; height: auto; }
iframe { max-width: 100%; }
hr { border: 0; border-top: 1px solid var(--d1-line); margin: 1.75rem 0; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--d1-display);
  line-height: 1.18;
  letter-spacing: .01em;
}
h1, h2 { color: var(--d1-charcoal); }
h3, h4, h5, h6 { color: var(--d1-red); }
h1 { font-size: clamp(1.42rem, 1.85vw, 1.85rem); margin: 0 0 .72rem; }
h2 { font-size: clamp(1.18rem, 1.45vw, 1.42rem); margin: 1.65rem 0 .65rem; }
h3 { font-size: clamp(1.02rem, 1.25vw, 1.18rem); margin: 1.35rem 0 .55rem; }
h4, h5, h6 { font-size: 1rem; margin: 1.25rem 0 .5rem; }

p { margin: 0 0 1rem; }
ul, ol { padding-left: 1.35rem; }
li + li { margin-top: .25rem; }
blockquote {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border-left: .35rem solid var(--d1-red);
  background: var(--d1-red-soft);
  border-radius: 0 3px 3px 0;
}
table { width: 100%; border-collapse: collapse; margin: 1.25rem 0; }
th, td { padding: .7rem .8rem; border: 1px solid var(--d1-line); vertical-align: top; }
th { background: #faf1ef; text-align: left; color: var(--d1-charcoal); }
pre, code { font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; }
pre { overflow-x: auto; padding: 1rem; background: #f7f2ee; border-radius: 3px; }

.skip-link {
  position: absolute;
  z-index: 1000;
  left: 1rem;
  top: .75rem;
  transform: translateY(-200%);
  padding: .7rem 1rem;
  color: #fff;
  background: #000;
  border-radius: 999px;
}
.skip-link:focus { transform: translateY(0); }

/* 03 - Layout shells -------------------------------------------------------
   FULL-BLEED architecture: band backgrounds run 100% of the screen width;
   each band's .template-inner constrains menus/content to --d1-max and
   carries the side gutters. (D1 boxes the whole site instead.) */
#TemplateAll {
  position: relative;
  isolation: isolate;
  width: 100%;
  margin: 0;
  padding: 0;
  border-top: var(--d1-keyline) solid var(--d1-red); /* thin red line, edge to edge */
}
.template-inner,
#TemplateTop .template-inner,
#TemplateHeader .template-inner,
#TemplateTopNav .template-inner,
#TemplateWrapper.template-inner,
#TemplateFooter .template-inner,
#TemplateBottom .template-inner {
  width: 100%;
  max-width: var(--d1-max);
  margin-inline: auto;
  /* NOTE: no padding here. The ID-boosted selectors outrank the per-band
     inner classes, so padding declared in this block silently overrides
     every band's own values. Padding belongs to each band's inner rule. */
}
.template-band { position: relative; }

/* Stacking order between the bands. Higher paints on top:
   red nav (dropdown panels + drop shadow) > header/top bar > content. */
#TemplateTopNav { z-index: 30; }
#TemplateHeader { z-index: 20; }
#TemplateTop    { z-index: 20; }
#TemplateWrapper { position: relative; z-index: 10; }

/* 04 - Top black bar + header --------------------------------------------- */
/* Off by default on the STK skin ($TemplateSkin['TemplateTop'] = 0); the
   styles remain so the zone can be re-enabled without touching the CSS. */
#TemplateTop {
  color: #f9f4ef;
  background: var(--d1-charcoal); /* band colour runs full width */
}
.topbar-inner {
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: .65rem 1rem;
  padding: .4rem var(--d1-gutter);
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}
#TemplateTopContent { flex: 1 1 auto; font-size: .9rem; }
#TemplateTopContent p { margin: 0; }

/* Social block: PmWiki wraps content in <p>/<div>/vspace elements with
   their own margins and baseline alignment, which is what pushed the icons
   slightly low. Flatten every wrapper level to a margin-free, flex-centred
   row and render images as blocks so no baseline/descender gap remains.
   (v4: the top bar no longer holds a logo -- TemplateLogo is the HEADER
   logo now; see the header section.) */
#TemplateSocial {
  flex: 0 0 auto;
  align-self: center;
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-left: auto;
  padding-right: 0;
  transform: translateY(var(--d1-social-lift)); /* fine vertical tuning; see :root */
}
#TemplateSocial :is(p, div, span) {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  padding: 0;
}
#TemplateSocial .vspace,
#TemplateTop .vspace { display: none; }
#TemplateSocial a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  border-radius: 4px;
  /* PmWiki core / legacy pub stylesheets decorate a.urllink with padding or a
     background icon; either one pushes the icons off-centre. Neutralise both. */
  padding: 0 !important;
  background-image: none !important;
  transition: transform .16s ease, filter .16s ease;
}
#TemplateSocial img {
  display: block;
  margin: 0;
  max-height: 32px;
  width: auto;
  vertical-align: middle;
  position: relative;
  top: -1px; /* optical nudge: icons sit a hair low against the text baseline */
}
#TemplateSocial a:hover { transform: translateY(-1px); filter: brightness(1.18); }

/* The top bar is a tall single row at full width; force the social block
   (and every wrapper PmWiki nests inside it) to centre on the row's
   cross-axis rather than dropping to its baseline. Overrides any recipe CSS
   that loads after the skin by being more specific. */
#TemplateTop .topbar-inner > #TemplateSocial { align-self: center; }
#TemplateTop #TemplateSocial,
#TemplateTop #TemplateSocial > *,
#TemplateTop #TemplateSocial a {
  display: flex;
  align-items: center;
}

#TemplateTop a { color: #fff; text-decoration: none; transition: color .16s ease; }
#TemplateTop a:hover { color: #ffd9d9; text-decoration: none; }

/* Header band: solid slate (#2a3036) running the full screen width -- this
   IS the main header, holding the logo and the news/highlight item. Inside
   it, #TemplateBackground carries the header image, constrained to the same
   max-width as the top nav and content; #TemplateLogo overlays it. */
#TemplateHeader {
  color: #fff;
  background: var(--d1-slate); /* band colour runs full width */
}
/* Thin vertical separator between the logo and the tagline, the same height
   as the logo (tracks --d1-crest-h); its own grid cell from the template. */
.header-divider {
  grid-column: 2;
  align-self: center;
  width: 1px;
  height: var(--d1-crest-h);
  background: rgba(255, 255, 255, .32);
}
/* Divider only makes sense with a logo beside it; hide on tiny screens
   where the header is at its most compressed. */
@media (max-width: 620px) {
  .header-divider { display: none; }
}
.header-inner {
  position: relative;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto; /* logo | divider | text | highlight */
  align-items: center;
  gap: clamp(1.15rem, 3vw, 2rem); /* more breathing room around the divider */
  min-height: clamp(120px, 13vw, 165px);
  padding: clamp(.9rem, 1.7vw, 1.25rem) var(--d1-gutter);
  overflow: visible;
}
/* TemplateBackground: the header image zone. It fills the max-width inner
   box (same constraint as the top nav and content), never the screen; the
   slate shows to the right of the image and beyond the max width. Put the
   image on its own line in Site.TemplateBackground (or a group override).
   Options per image:
     (default)              -> left-aligned at band height, natural ratio
     class d1-header-cover  -> stretches across the whole max-width box */
#TemplateBackground {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none; /* the band's text/links stay clickable over it */
}
#TemplateBackground :is(p, div) { margin: 0; padding: 0; }
#TemplateBackground img {
  position: absolute;
  left: 0;
  top: 0;
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: none;
  object-fit: contain;
  object-position: left center;
  border-radius: 0;
}
#TemplateBackground img.d1-header-cover {
  width: 100%;
  object-fit: cover;
  object-position: center;
}
/* An image dropped into the TemplateHeader TEXT zone stays a normal inline
   image (the background belongs in TemplateBackground). */
#TemplateHeaderText img { max-height: 72px; width: auto; }
/* Images inside a .d1-highlight card are ordinary content, never a cover. */
#TemplateHeaderText .d1-highlight img {
  position: static;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 64px;
  object-fit: contain;
}
/* Text zone: title/tagline in column 1; an optional .d1-highlight card sits
   in column 2 (where the old site's header menu lived). */
#TemplateHeaderText {
  grid-column: 3;
  position: static; /* so a cover image spans .header-inner */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: clamp(.8rem, 2.2vw, 1.5rem);
}
#TemplateHeaderText > * { grid-column: 1; min-width: 0; }
/* Zero every block margin PmWiki emits in this zone (headings, vspace) so
   the tagline sits vertically CENTRED against the logo. NOTE: PmWiki puts
   class 'vspace' on the FOLLOWING PARAGRAPH itself (<p class='vspace'>), so
   only standalone <div class='vspace'> spacers may be hidden -- hiding
   every .vspace removed all lines after the first. */
#TemplateHeaderText p,
#TemplateHeaderText :is(h1, h2, h3, h4, h5, h6) { margin: 0; }
#TemplateHeaderText div.vspace { display: none; }
#TemplateHeaderText p.vspace { margin: 0; }
/* Readability scrim -- ONLY when a full-width cover photo is in use (the
   left-aligned header image must not be darkened). */
.header-inner:has(#TemplateBackground img.d1-header-cover)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(20, 18, 17, .42) 0%, rgba(20, 18, 17, .08) 45%, transparent 70%);
}

/* Highlight card (tagline / next event / news) at the right of the header.
   Wiki markup, inside the TemplateHeader page (after the title/tagline):
     (:div class="d1-highlight":)
     [strong]NEXT EVENT[/strong] then a line break,
     the event line, and a small link line.
   The first bold run renders as the red kicker. PmWiki bold is three
   apostrophes around the text; a double backslash forces the line break. */
/* Card cosmetics apply wherever the card renders: in the header's own
   TemplateHighlight zone, legacy inside TemplateHeader text, or the inline
   instance above the content on narrow screens. */
.header-inner .d1-highlight,
.template-highlight-inline .d1-highlight {
  position: relative;
  z-index: 2;
  max-width: 280px;
  padding: .6rem .9rem;
  color: var(--d1-ink);
  background: #fff;
  border-left: 4px solid var(--d1-red);
  box-shadow: var(--d1-shadow-float);
  font-size: .9rem;
  line-height: 1.45;
}
:is(.header-inner, .template-highlight-inline) .d1-highlight :is(h1, h2, h3, h4, p) { color: var(--d1-ink); font-size: inherit; margin: 0; }
:is(.header-inner, .template-highlight-inline) .d1-highlight strong {
  color: var(--d1-red);
  font-family: var(--d1-display);
  letter-spacing: .05em;
}
:is(.header-inner, .template-highlight-inline) .d1-highlight a { position: static; color: #741317; }
:is(.header-inner, .template-highlight-inline) .d1-highlight a:hover { color: var(--d1-red); }
/* Placement of the two instances. Header zone: third grid column, centred.
   Legacy in-text card keeps its column-2 placement. Inline instance: hidden
   on desktop, shown above the content on narrow screens (media block). */
#TemplateHighlight {
  grid-column: 4;
  position: relative;
  z-index: 2;
  align-self: center;
  justify-self: end;
}
#TemplateHighlight:empty { display: none; }
#TemplateHeaderText .d1-highlight {
  grid-column: 2;
  grid-row: 1 / span 6; /* spans however many title/tagline rows exist */
  align-self: center;
}
.template-highlight-inline { display: none; }
#TemplateHeaderText h1,
#TemplateHeaderText h2,
#TemplateHeaderText h3,
#TemplateHeaderText p,
#TemplateHeaderText a { position: relative; z-index: 2; color: #fff; }
#TemplateHeaderText .d1-highlight a { color: #741317; } /* inside the white card */
#TemplateHeaderText h1,
#TemplateHeaderText h2 { margin-top: 0; font-size: clamp(1.7rem, 2.55vw, 2.35rem); text-wrap: balance; }
#TemplateHeaderText h3 { font-size: clamp(1.2rem, 1.8vw, 1.55rem); }

/* Crest: bigger, floating over the header/nav boundary with a drop shadow. */
#TemplateLogo {
  position: relative;
  z-index: 3; /* the logo sits OVER the header image */
  display: flex;
  justify-content: flex-start; /* crest's LEFT edge sits at the content inset (aligns with copy below) */
  align-items: center;
  pointer-events: none; /* the overhang must not block clicks on the nav below */
}
#TemplateLogo a { pointer-events: auto; display: block; width: 100%; }
/* Cap the crest at the column size but let it render at its NATURAL size, so
   the larger home-page crest and the smaller inner-page crest each keep their
   intended size. They share the same LEFT edge (margin-inline: 0) so both line
   up with the copy below regardless of size. width="NNN" in the wiki markup is
   respected as-is; to force one uniform size instead, add `width: 100%`. */
#TemplateLogo img,
#TemplateLogo svg {
  display: block;
  width: auto;
  height: auto;
  max-width: var(--d1-crest-w);
  max-height: var(--d1-crest-h);
  margin-left: var(--d1-crest-nudge); /* fine per-group alignment; see :root */
  margin-right: auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .30)); /* gentle lift off the header image */
}

/* 05 - Primary red navigation ---------------------------------------------
   Darker red at the top fading to Kin red at the bottom, full screen width;
   hover/active are solid darker BLOCKS. (D1's gloss runs the other way and
   carries the continuous white rule -- both stay District signatures.)
   Dropdown / mega menu / touch behaviour is identical to D1. */
#TemplateTopNav {
  color: #fff;
  background: linear-gradient(180deg, var(--d1-red-dark) 0%, var(--d1-red) 100%); /* full width */
  box-shadow: 0 6px 16px rgba(70, 0, 0, .20); /* soft drop onto the grey canvas */
}
#TemplateTopNav .nav-inner {
  min-height: 48px;
  display: flex;
  align-items: stretch;
  padding: 0 var(--d1-gutter);
  background: transparent;
}
#TemplateTopNav ul {
  display: flex;
  flex-wrap: wrap; /* always wrap rather than clipping links off the right edge */
  align-items: stretch;
  gap: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
#TemplateTopNav li { position: relative; margin: 0; padding: 0; display: flex; }
#TemplateTopNav a,
#TemplateTopNav .selflink {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: .6rem .82rem;
  color: #fff;
  background: transparent;
  font-family: var(--d1-display);
  font-size: clamp(.94rem, 1.12vw, 1.05rem);
  line-height: 1.1;
  letter-spacing: .02em;
  white-space: nowrap;
  text-decoration: none;
  border: 0;
  border-radius: 0;
  transition: background-color .2s ease, color .2s ease;
}
#TemplateTopNav a:hover,
#TemplateTopNav a:focus-visible,
#TemplateTopNav li:hover > a,
#TemplateTopNav li:focus-within > a {
  color: #fff;
  background: #7a0003; /* flat block, darker than both gradient ends */
  text-decoration: none;
}
#TemplateTopNav .selflink,
#TemplateTopNav a.selflink,
#TemplateTopNav li.current > a,
#TemplateTopNav li.active > a,
#TemplateTopNav a[aria-current="page"] {
  color: #fff;
  background: #560002; /* deepest flat block marks the current page */
  font-weight: 700;
  text-decoration: none;
}

@media (min-width: 901px) {
  /* Alignment system: the first link's BLOCK (its hover/active box) starts
     exactly ON the gutter edge -- the same edge the left-menu boxes sit on,
     so the top-nav active block, the left menu's active box, and the search
     box all share one left edge. Text is inset by --d1-item-pad, matching
     the breadcrumb text and the left-menu row text below. */
  #TemplateTopNav ul { margin-left: 0; }
  #TemplateTopNav a,
  #TemplateTopNav .selflink {
    padding: .6rem var(--d1-item-pad);
    font-size: clamp(.94rem, 1.05vw, 1.02rem);
  }
}

/* Small caret on top-level items that open a dropdown/mega menu.
   (No :has() support? Add class has-submenu to the list item instead.) */
#TemplateTopNav li:has(> ul) > a::after,
#TemplateTopNav li.has-submenu > a::after,
#TemplateTopNav li:has(> ul) > .selflink::after,
#TemplateTopNav li.has-submenu > .selflink::after {
  content: "\25BE"; /* ▾ */
  margin-left: .35rem;
  font-size: .7em;
  opacity: .85;
  transition: transform .18s ease;
}
#TemplateTopNav li:has(> ul):hover > a::after,
#TemplateTopNav li:has(> ul):focus-within > a::after,
#TemplateTopNav li.has-submenu:hover > a::after { transform: rotate(180deg); }
/* ...but never on items inside an open dropdown/mega panel. */
#TemplateTopNav li ul li:has(> ul) > a::after,
#TemplateTopNav li ul li.has-submenu > a::after,
#TemplateTopNav li ul li:has(> ul) > .selflink::after,
#TemplateTopNav li ul li.has-submenu > .selflink::after { content: none; }

/* Dropdown submenus (if a nav item ever gains a nested list). */
#TemplateTopNav li ul {
  position: absolute;
  z-index: 80;
  top: calc(100% - 1px);
  left: 0;
  display: block;
  min-width: 14rem;
  width: max-content;
  max-width: 20rem;
  padding: .25rem 0;
  background: var(--d1-charcoal);
  box-shadow: 0 14px 28px rgba(0, 0, 0, .24);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transform-origin: top center;
  transition: opacity .3s cubic-bezier(.25, .46, .45, .94), transform .3s cubic-bezier(.25, .46, .45, .94), visibility .3s;
}
#TemplateTopNav li:hover > ul,
#TemplateTopNav li:focus-within > ul {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
#TemplateTopNav li ul li { width: 100%; }
#TemplateTopNav li ul a,
#TemplateTopNav li ul .selflink {
  min-height: 38px;
  width: 100%;
  padding: .58rem .8rem;
  font-family: var(--d1-font);
  font-size: .92rem;
  letter-spacing: 0;
  white-space: normal;
  border-bottom: 0;
  background: transparent;
}
#TemplateTopNav li ul a:hover { background: var(--d1-red-dark); }

/* TOUCH DEVICES: tapping a parent item TOGGLES its submenu instead of
   navigating away (which is why the menu vanished the moment the finger
   lifted). The tap lands on the list item; touch browsers keep :hover
   applied until you tap elsewhere on the screen, so the menu stays open
   until another spot is touched -- a true toggle, no JavaScript.
   TRADE-OFF: on touch, the parent PAGE is not directly reachable from the
   menu, so give every dropdown an "Overview" (or similar) first sub-item
   linking to the parent page. Mouse/keyboard behaviour is unchanged. */
@media (hover: none) {
  #TemplateTopNav li:has(> ul) > a,
  #TemplateTopNav li.has-submenu > a { pointer-events: none; }
}

/* Mega menu (no JavaScript): add class d1-mega to a TOP-LEVEL menu item in
   the wiki -- e.g.  * %apply=item d1-mega% [[Main/MemberResources | Member Resources]]
   Its dropdown then spans the full red bar. Second-level items become column
   headers; their own nested lists render as grouped links underneath.
   Opens on hover and on keyboard focus (:focus-within). */
#TemplateTopNav .nav-inner { position: relative; }
#TemplateTopNav li.d1-mega { position: static; }
#TemplateTopNav li.d1-mega > ul {
  left: 0;
  right: 0;
  top: 100%;
  width: auto;
  min-width: 0;
  max-width: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  align-items: start;
  gap: .4rem 1.25rem;
  padding: 1rem 1.15rem 1.2rem;
}
#TemplateTopNav li.d1-mega > ul > li { width: auto; display: block; }
#TemplateTopNav li.d1-mega > ul > li > a,
#TemplateTopNav li.d1-mega > ul > li > .selflink {
  font-family: var(--d1-display);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: .02em;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
}
#TemplateTopNav li.d1-mega ul ul {
  position: static;
  display: block;
  min-width: 0;
  width: auto;
  max-width: none;
  padding: .15rem 0 0;
  background: transparent;
  box-shadow: none;
  opacity: 1;
  visibility: inherit; /* inherit, not visible: keeps the panel fully hidden when closed */
  transform: none;
  transition: none;
}
#TemplateTopNav li.d1-mega ul ul a { font-size: .9rem; opacity: .92; }

/* 06 - Optional alert and hero bands -------------------------------------- */
#TemplateAlert:empty,
#TemplateHero:empty { display: none; }
#TemplateAlert {
  /* These sections ARE the .template-inner, so inset the visible box by the
     gutter to keep it floating like the others. */
  width: calc(100% - 2 * var(--d1-gutter));
  max-width: calc(var(--d1-max) - 2 * var(--d1-gutter));
  margin-top: 1rem;
  padding: .9rem 1.1rem;
  color: #4b2400;
  background: #fff8df;
  border: 1px solid #f2d778;
  border-radius: 0;
  box-shadow: var(--d1-shadow-float);
}
#TemplateAlert p:last-child { margin-bottom: 0; }
#TemplateHero {
  width: calc(100% - 2 * var(--d1-gutter));
  max-width: calc(var(--d1-max) - 2 * var(--d1-gutter));
  margin-top: 1rem;
  padding: clamp(1.3rem, 3vw, 2rem);
  color: #fff;
  background:
    radial-gradient(circle at 90% 20%, rgba(255, 255, 255, .18), transparent 14rem),
    linear-gradient(135deg, #2a2928, #4a2324 52%, var(--d1-red-dark));
  border-radius: 0;
  box-shadow: var(--d1-shadow-float);
}
#TemplateHero :is(h1, h2, h3, p, a) { color: #fff; }
#TemplateHero a { font-weight: 700; }

/* 07 - Content shell and main column --------------------------------------
   The wrapper is a TRANSPARENT shell on the grey canvas; the menu,
   profile panel, aside, and main column are separate floating white boxes.
   Desktop: left column of boxes | main box. */
#TemplateWrapper {
  margin-top: 0;
  padding: 0 var(--d1-gutter) clamp(1.2rem, 2.4vw, 1.8rem);
  background: transparent;
  box-shadow: none;
}
@media (min-width: 901px) {
  #TemplateWrapper {
    display: grid;
    grid-template-columns: minmax(var(--d1-nav-col-min), var(--d1-nav-col-max)) minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas:
      "nav main"
      "sectionhero main"
      "aside main"
      ". main";
    /* Row-gap must be 0: grid gaps apply around EMPTY tracks too, so hidden
       profile/aside boxes were adding phantom rows of space below the menu
       -- and the stretched main box inherited that height as excess white
       space. Vertical rhythm comes from margin-top on the boxes instead
       (display:none boxes contribute no margin). */
    column-gap: var(--d1-col-gap);
    row-gap: 0;
    align-items: start; /* boxes keep their natural heights (floating look) */
  }
  #TemplateSectionHero,
  #TemplateAside { margin-top: var(--d1-col-gap); }
  /* If the page content is shorter than the left column, the white main box
     stretches to match the menu column's height (align-self overrides the
     grid's align-items: start). A taller main still grows past it. */
  #TemplateMainColumn { grid-area: main; min-width: 0; align-self: stretch; }
  #TemplateNav { grid-area: nav; min-width: 0; }
  #TemplateSectionHero { grid-area: sectionhero; min-width: 0; }
  #TemplateAside { grid-area: aside; min-width: 0; }
  #TemplateNavToggle,
  #TemplateNavToggleLabel { display: none; }
}

/* Floating white boxes. */
.content-card { background: #fff; box-shadow: var(--d1-shadow-float); }
/* Close control inside the off-canvas menu; only styled ≤900px. */
.stk-nav-close { display: none; }
.side-card { background: #fff; box-shadow: var(--d1-shadow-float); }

/* Breadcrumb strip: sits DIRECTLY on the grey canvas (own .template-inner in
   the tmpl, between the red nav and the content shell). Text starts at the
   shared --d1-item-pad inset, lining up with the first top-nav link's text
   and the left-menu row text below; bottom padding is zero (the content
   shell's small top padding provides the gap, keeping it tighter below the
   line than above). */
#TemplateTitle {
  padding: .85rem var(--d1-gutter) 0 calc(var(--d1-gutter) + var(--d1-item-pad));
  color: var(--d1-muted);
  font-size: .88rem;
  line-height: 1.15;
  background: transparent;
  border-bottom: 0;
}
#TemplateTitle :is(h1, h2, h3) { font-size: .88rem; margin: 0; color: var(--d1-muted); font-family: var(--d1-font); }
#TemplateTitle a { color: var(--d1-muted); }
/* hover styling for breadcrumb links is defined once, in section 07 (centre-out underline) */

#TemplateMain {
  padding: clamp(1.1rem, 2.2vw, 1.7rem) var(--d1-copy-inset) clamp(1.2rem, 2.4vw, 1.9rem);
  font-size: clamp(.98rem, 1vw, 1.04rem);
}
#TemplateMain > :first-child { margin-top: 0; }
#TemplateMain h1 {
  font-size: clamp(1.42rem, 1.85vw, 1.85rem);
  line-height: 1.18;
  margin: 0 0 .95rem;
  padding: .1rem 0 .1rem .8rem;
  border-left: 5px solid var(--d1-red); /* STK accent: red block on the LEFT
                                           (the underline bar stays D1's) */
}
#TemplateMain h2 { font-size: clamp(1.18rem, 1.45vw, 1.42rem); margin-top: 2rem; }
#TemplateMain h3 { font-size: clamp(1.02rem, 1.25vw, 1.18rem); }
#TemplateMain :is(h2, h3):first-child { margin-top: 0; }

/* Black diamond bullets like the original site (content lists only). */
#TemplateMain ul {
  list-style: none;
  padding-left: 1.15rem;
}
#TemplateMain ul > li {
  position: relative;
  margin-top: .25rem;
}
#TemplateMain ul > li::before {
  content: "\25C6"; /* black diamond */
  position: absolute;
  left: -1.05rem;
  top: 0;
  color: var(--d1-charcoal);
  font-size: .62em;
  /* line box = .62em x 2.6 = ~1.6em = the li's first-line height, which
     vertically centres the glyph on the first line of text */
  line-height: 2.6;
}
#TemplateMain :is(ul.nav, .nav ul, table ul, .thumbtable ul, .d1-card-grid ul) > li::before { content: none; }

#TemplateMain img { border-radius: .5rem; }
#TemplateMain .frame img,
#TemplateMain img.thumbs { border-radius: 0; }

/* Content links (STK treatment): resting state is a thin, muted red
   underline; on hover a soft red HIGHLIGHTER FILL rises from the underline
   to cover the text. (The centre-out growing rule stays D1's signature.)
   Buttons and image links are excluded. (Guarded by reduced-motion.) */
#TemplateMain a:not(.button):not(.d1-button):not(.button a):not(.d1-button a) {
  color: #741317;
  text-decoration: none;
  background-image:
    linear-gradient(rgba(197, 2, 7, .13), rgba(197, 2, 7, .13)),
    linear-gradient(rgba(197, 2, 7, .35), rgba(197, 2, 7, .35));
  background-repeat: no-repeat;
  background-position: 0 100%, 0 calc(100% - .04em); /* fill anchored at the underline */
  background-size: 100% 0%, 100% 1px;
  transition: background-size .22s ease, color .16s ease;
}
#TemplateMain a:not(.button):not(.d1-button):not(.button a):not(.d1-button a):hover,
#TemplateMain a:not(.button):not(.d1-button):not(.button a):not(.d1-button a):focus-visible {
  color: var(--d1-red-dark);
  background-size: 100% 100%, 100% 1px; /* the fill rises up behind the text */
}
/* Image links, gallery frames and thumbs get no underline layers. */
#TemplateMain a:has(img),
#TemplateMain .frame a,
#TemplateMain .thumbtable a { background-image: none; }

/* Breadcrumb links: animated underline sweeping RIGHT TO LEFT, matching the
   left-menu hover direction (not the rising fill, not D1's centre-out). */
#TemplateTitle a {
  text-decoration: none;
  background-image: linear-gradient(var(--d1-red), var(--d1-red));
  background-repeat: no-repeat;
  background-position: 100% 100%; /* anchored right: the rule grows leftward */
  background-size: 0% 1.5px;
  transition: background-size .22s ease, color .16s ease;
}
#TemplateTitle a:hover,
#TemplateTitle a:focus-visible {
  color: var(--d1-red);
  background-size: 100% 1.5px;
}
#TemplateMain a > img { transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }
#TemplateMain a:hover > img {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .18);
}
#TemplateMain table:not(.thumbtable) tbody tr { transition: background-color .14s ease; }
#TemplateMain table:not(.thumbtable) tbody tr:hover > td { background: #fdf7f4; }

/* Content helper classes usable from wiki markup. */
/* Buttons. PmWiki wikistyle markup:  %button%[[JoinKin/ | Join Kin!]]%%
   wraps the link in <span class="button">, so both forms are supported. */
#TemplateMain span.button,
#TemplateMain span.d1-button { display: inline-block; }
.d1-button,
#TemplateMain a.button,
#TemplateMain .button a,
#TemplateMain .d1-button a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: .72rem 1.1rem;
  color: #fff;
  background: var(--d1-red);
  background-image: none !important; /* defeats the content-link underline layers */
  border-radius: 0; /* square box buttons (pills stay a D1 signature) */
  text-decoration: none;
  font-weight: 700;
  box-shadow: 0 3px 8px rgba(197, 2, 7, .26);
  transition: transform .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.d1-button:hover,
#TemplateMain a.button:hover,
#TemplateMain .button a:hover,
#TemplateMain .d1-button a:hover {
  color: #fff;
  background: var(--d1-red-dark);
  background-image: none !important;
  transform: translateY(-1px);
  text-decoration: none;
}
.d1-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.d1-card {
  padding: 1rem;
  background: #fff;
  border: 1px solid var(--d1-line);
  border-radius: 0;
  box-shadow: var(--d1-shadow-float);
  transition: transform .16s ease, box-shadow .16s ease;
}
.d1-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(24, 18, 15, .13); }
/* Card icon: a small image in a light-red circle, as in the mock-up.
   Wiki markup (either form works):
     %d1-card-icon%Attach:icon-events.svg
     (:div class="d1-card-icon":) Attach:icon-events.svg (:divend:)  */
#TemplateMain img.d1-card-icon,
#TemplateMain .d1-card-icon img {
  display: block;
  width: 30px;
  height: 30px;
  box-sizing: content-box;
  padding: 13px;
  background: var(--d1-red-soft);
  border-radius: 0; /* square icon chip (circles stay a D1 signature) */
  margin: 0 0 .65rem;
  object-fit: contain;
}

/* Section hero (right column, above the menu: profile/photo/contact blocks). */

/* Side-by-side columns for multi-person profile blocks (replaces layout
   tables, which pick up the content-table borders and mobile scroll rules).
   Works in the section hero, the right nav, and the main content. Columns
   share the width evenly and wrap to stacked when the space is too tight. */
.d1-duo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: start;
  gap: .6rem 1.25rem;
  margin: .5rem 0;
  text-align: center;
}
.d1-duo > div {
  flex: 1 1 0;
  min-width: 118px;
}
.d1-duo p { margin: 0 0 .3rem; }

/* Utility for any layout table you keep: (:table class="d1-plain" ...:)
   strips the content-table borders, header tint, and cell padding. */
table.d1-plain,
table.d1-plain :is(th, td) {
  border: 0 !important;
  background: transparent !important;
}
table.d1-plain { width: auto; margin: .5rem auto; }
table.d1-plain :is(th, td) { padding: .25rem .5rem; }
#TemplateSectionHero { background: #fff; box-shadow: var(--d1-shadow-float); }
.section-hero-inner { padding: clamp(.85rem, 1.8vw, 1.15rem); }
.section-hero-inner:empty { display: none; }
#TemplateSectionHero:has(.section-hero-inner:empty) { display: none; border: 0; }
/* Images honour the size given in the wiki markup (width=, thumbs, etc.),
   capped only by the panel width. (A hard 150px cap here used to override
   every markup-specified size.) */
#TemplateSectionHero img { max-width: 100%; height: auto; }

/* Section-hero hover treatments: text links carry a thin muted underline at
   rest (so they read as links), and the full-strength rule grows from the
   centre on hover. Photo links lift gently like linked images in content. */
#TemplateSectionHero a:not(:has(> img)) {
  color: #741317;
  text-decoration: none;
  background-image:
    linear-gradient(rgba(197, 2, 7, .13), rgba(197, 2, 7, .13)),
    linear-gradient(rgba(197, 2, 7, .4), rgba(197, 2, 7, .4));
  background-repeat: no-repeat;
  background-position: 0 100%, 0 calc(100% - .04em);
  background-size: 100% 0%, 100% 1px;
  transition: background-size .22s ease, color .16s ease;
}
#TemplateSectionHero a:not(:has(> img)):hover,
#TemplateSectionHero a:not(:has(> img)):focus-visible {
  color: var(--d1-red-dark);
  background-size: 100% 100%, 100% 1px;
}
#TemplateSectionHero a > img { transition: transform .18s ease, box-shadow .18s ease; }
#TemplateSectionHero a:hover > img {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .18);
}

/* 08 - Right navigation ----------------------------------------------------
   ONE indent scale: level 1 = 1rem, level 2 = 2rem, level 3 = 2.75rem.
   Identical on hover, active, and inside .nav wrappers. */
#TemplateNav {
  background: #fff;
  padding: .55rem var(--d1-navcard-pad) var(--d1-navcard-pad);
  color: var(--d1-ink);
}

/* Site search lives at the TOP of the left menu: make (:searchbox:) the
   first line of Site.TemplateNav. (This is what retires the floating
   bottom bar on this site.) */
/* WRAPPERS only: PmWiki puts class 'searchbox' on the text INPUT itself
   (class='inputbox searchbox'), so the input must never match this rule --
   in v5 it did, took the negative margins, and broke out of the card. */
#TemplateNav form,
#TemplateNav div.search,
#TemplateNav div.searchbox,
#TemplateNav span.search {
  display: flex;
  align-items: center;
  gap: .4rem;
  /* v7: the full-bleed alignment made the box touch the card edges; it now
     sits inside the card padding like ordinary content. */
  margin: .5rem 0 .85rem;
}
#TemplateNav form input { margin: 0; }
#TemplateNav input[type="text"],
#TemplateNav input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 36px;
  padding: .35rem .6rem;
  color: var(--d1-ink);
  background: #f7f4f1;
  border: 1px solid var(--d1-line);
  border-radius: 0;
  font-size: .92rem;
}
#TemplateNav input[type="text"]:focus,
#TemplateNav input[type="search"]:focus {
  outline: none;
  border-color: var(--d1-red);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(197, 2, 7, .14);
}
#TemplateNav input[type="submit"],
#TemplateNav form button {
  min-height: 36px;
  padding: .35rem .8rem;
  color: #fff;
  background: var(--d1-red);
  border: 0;
  border-radius: 0;
  font-weight: 700;
  font-size: .88rem;
  cursor: pointer;
  transition: background-color .16s ease;
}
#TemplateNav input[type="submit"]:hover,
#TemplateNav form button:hover { background: var(--d1-red-dark); }

/* Aside box below the menu -- the Facebook feed home (TemplateAside zone).
   Collapses invisibly while the zone page is empty or missing, so a broken
   embed can simply be commented out until the plugin is fixed. */
#TemplateAside { padding: clamp(.85rem, 1.8vw, 1.15rem); }
.side-aside-inner:empty { display: none; }
#TemplateAside:has(.side-aside-inner:empty) { display: none; }
#TemplateAside > .side-aside-inner > :first-child,
#TemplateAside :is(h1, h2, h3, h4):first-child { margin-top: 0; }
#TemplateAside h3 { font-size: .95rem; color: var(--d1-charcoal); margin: 0 0 .5rem; }
#TemplateAside p { margin: .4rem 0; font-size: .92rem; }
#TemplateAside iframe {
  display: block;
  width: 100% !important;
  max-width: 100%;
  border: 0;
}
#TemplateNav h2,
#TemplateNav h3 {
  margin-top: 1.9rem;
  margin-bottom: .6rem;
  /* Same trick as the rows: pull to the card edge, indent the text by the
     shared --d1-item-pad, so headings align with the link text under them
     (they sat at the card padding, a few px off). The h2 rule keeps its red
     underline, which now spans the full card width. */
  margin-inline: calc(-1 * var(--d1-navcard-pad));
  padding-inline: var(--d1-item-pad) var(--d1-navcard-pad);
}
#TemplateNav > :is(h1, h2, h3, h4):first-child { margin-top: .15rem; }
#TemplateNav h2 {
  padding-bottom: .48rem;
  color: var(--d1-charcoal);
  font-size: 1.05rem;
  line-height: 1.2;
  border-bottom: 2px solid var(--d1-red);
}
#TemplateNav h3 {
  color: #6b625f;
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
}
#TemplateNav hr { margin: 1rem 0; }
/* Wiki sections write "----" right under each heading; the heading already
   carries the red rule, so hide that immediate hr to avoid a double line. */
#TemplateNav h2 + hr,
#TemplateNav h3 + hr,
#TemplateNav h2 + .vspace + hr,
#TemplateNav h3 + .vspace + hr { display: none; }
#TemplateNav .vspace { margin-top: .45rem; }
#TemplateNav .vspace:first-child { display: none; }
/* Inside the menu LISTS, PmWiki adds its 1.33em vspace margin to <li>/<p>
   elements between items -- THE cause of "too much padding at the top of
   menu items". Zeroed within lists; row min-height carries the rhythm. */
#TemplateNav :is(ul, ol) .vspace,
#TemplateNav li.vspace { margin-top: 0; }
#TemplateNav :is(h2, h3) + :is(ul, .nav),
#TemplateNav > ul:first-child,
#TemplateNav > .nav:first-child { margin-top: 0; padding-top: 0; }

/* Menu is native <ul><li> (verified against PmWiki output). All levels are
   list-style:none; the visible bullets are the skin's ::before squares,
   added at level 2 (li li) and deeper only. Level 1 = no bullet. */
#TemplateNav ul,
#TemplateNav ol,
#TemplateNav .nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
#TemplateNav li,
#TemplateNav .nav li { margin: 0; list-style: none; }

#TemplateNav a,
#TemplateNav .selflink {
  position: relative;
  display: flex;
  align-items: center;
  gap: .4rem;
  min-height: 38px;
  /* Rows pull through the card padding: their BOXES reach the card (gutter)
     edge, matching the top-nav blocks and the search box; their TEXT is
     inset by the shared --d1-item-pad. */
  margin-inline: calc(-1 * var(--d1-navcard-pad));
  padding: .42rem var(--d1-navcard-pad) .42rem var(--d1-item-pad);
  color: var(--d1-ink);
  background-color: #fff;
  /* STK hover: a soft red fill anchored at the RIGHT edge, sweeping right to
     left. (D1's left-anchored gradient + red indicator bar stay D1's; no bar
     here also keeps the indent bullets clean.) */
  background-image: linear-gradient(270deg, #f6dcda 0%, #fbefed 55%, rgba(251, 239, 237, 0) 100%);
  background-repeat: no-repeat;
  background-position: 100% 0;
  background-size: 0% 100%;
  border: 0;
  border-bottom: 1px solid var(--d1-line);
  border-radius: 0;
  text-decoration: none;
  overflow: hidden;
  transition: background-size .22s ease, color .2s ease, box-shadow .2s ease;
}
#TemplateNav a:hover {
  color: var(--d1-red);
  background-size: 100% 100%; /* the fill sweeps in from the right */
  /* The vertical red indicator bar, back by request -- on the RIGHT side
     (D1 keeps the left). Inset box-shadow, not a pseudo-element: ::before
     is the indent bullet and ::after is the submenu arrow, and the shadow
     animates in from the edge along with the sweep. */
  box-shadow: inset -4px 0 0 var(--d1-red);
  text-decoration: none;
}
/* The active red box carries a permanent darker bar on the same side. */
#TemplateNav :is(.selflink, a.selflink, li.current > a, li.active > a, a[aria-current="page"]) {
  box-shadow: inset -4px 0 0 var(--d1-red-deep);
}
#TemplateNav .selflink,
#TemplateNav a.selflink,
#TemplateNav li.current > a,
#TemplateNav li.active > a,
#TemplateNav a[aria-current="page"] {
  color: #fff;
  background: linear-gradient(90deg, var(--d1-red) 0%, #920004 100%);
  font-weight: 700;
  text-decoration: none;
}
#TemplateNav :is(.selflink, a.selflink, li.current > a, li.active > a, a[aria-current="page"]):hover {
  color: #fff;
  background: linear-gradient(90deg, #ad0005 0%, var(--d1-red-deep) 100%);
}

/* Indent scale (levels 2 and 3), stable across hover/active/nesting.
   HARDENED in v3: the li-li forms catch any nesting structure PmWiki emits
   (including ** lists with no * parent and lists inside .nav wrappers), and
   .indent covers the -> arrow-indent markup. */
#TemplateNav :is(ul ul, ol ol, ul ol, ol ul, li li) > li > a,
#TemplateNav :is(ul ul, ol ol, ul ol, ol ul, li li) > li > .selflink,
#TemplateNav li li > a,
#TemplateNav li li > .selflink,
#TemplateNav :is(.indent, .indent1) a {
  padding-left: 2rem;
  min-height: 34px;
  font-size: .93rem;
}
#TemplateNav :is(ul ul ul, li li li) > li > a,
#TemplateNav :is(ul ul ul, li li li) > li > .selflink,
#TemplateNav li li li > a,
#TemplateNav li li li > .selflink {
  padding-left: 2.75rem;
  font-size: .88rem;
}

/* Heading-grouped menus: a list that FOLLOWS a heading (e.g. the events
   under an "Events" header) indents one step under it, and its own nested
   items step once more. Remove this block if you'd rather have flush
   heading groups like District 1. */
#TemplateNav :is(h2, h3, h4) ~ :is(ul, ol) > li > a,
#TemplateNav :is(h2, h3, h4) ~ :is(ul, ol) > li > .selflink {
  padding-left: 2rem;
}
#TemplateNav :is(h2, h3, h4) ~ :is(ul, ol) :is(ul, ol) > li > a,
#TemplateNav :is(h2, h3, h4) ~ :is(ul, ol) :is(ul, ol) > li > .selflink {
  padding-left: 2.75rem;
  min-height: 34px;
  font-size: .93rem;
}

/* Square red bullets mark indented menu items (the site's boxy language;
   diamonds stay D1's). They render as flex children inside the row, so they
   ride the hover fill cleanly -- and with no indicator bar (removed above)
   nothing competes with them at the row's edge. Deepest level: smaller.
   On the active red box the bullet flips white. */
#TemplateNav :is(ul ul, ol ol, ul ol, ol ul, li li) > li > :is(a, .selflink)::before,
#TemplateNav :is(.indent, .indent1) a::before,
#TemplateNav :is(h2, h3, h4) ~ :is(ul, ol) > li > :is(a, .selflink)::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  background: var(--d1-charcoal); /* near-black squares */
  /* Pin the bullet to the FIRST line: top-aligned, then pushed down to that
     line's optical centre (half the 1.6 line-height, minus half the bullet).
     Centring on the whole row put the bullet mid-paragraph on wrapped links. */
  align-self: flex-start;
  margin-top: calc(.8em - 3.5px);
}
#TemplateNav :is(ul ul ul, li li li) > li > :is(a, .selflink)::before,
#TemplateNav :is(h2, h3, h4) ~ :is(ul, ol) :is(ul, ol) > li > :is(a, .selflink)::before {
  width: 5px;
  height: 5px;
  margin-top: calc(.8em - 2.5px);
}
#TemplateNav li li > :is(.selflink, a.selflink)::before,
#TemplateNav li > :is(.selflink, a.selflink)[aria-current="page"]::before { background: #fff; }

/* Disclosure arrow on items that contain a nested list, OR items manually
   tagged when the submenu lives on the target page rather than in this menu.
   Wiki markup options (all equivalent):
     * %apply=item has-submenu% [[About/Zones | Zone Pages]]   <- class on the li
     * %has-submenu%[[About/Zones | Zone Pages]]%%             <- span wrapper
   The li form is preferred; both are supported below. */
#TemplateNav li:has(> ul) > a::after,
#TemplateNav li:has(> ul) > .selflink::after,
#TemplateNav li.has-submenu > a::after,
#TemplateNav li.has-submenu > .selflink::after,
#TemplateNav .has-submenu > a::after,
#TemplateNav .has-submenu > .selflink::after,
#TemplateNav a.has-submenu::after {
  content: "\203A"; /* › */
  display: inline-block;
  margin-left: auto;
  opacity: .6;
  transition: transform .18s ease, opacity .18s ease;
}
#TemplateNav li:has(> ul) > a:hover::after,
#TemplateNav li.has-submenu > a:hover::after,
#TemplateNav .has-submenu > a:hover::after,
#TemplateNav a.has-submenu:hover::after { opacity: 1; transform: translateX(3px); }

/* Optional icon bullets: add class d1-nav-icons to a nav list in the wiki. */
#TemplateNav .d1-nav-icons a::before {
  content: "\2022";
  position: static;
  flex: 0 0 1.2rem;
  width: auto;
  background: none;
  transform: none;
  color: var(--d1-red);
  font-weight: 800;
}

/* Events calendar dropped into the right column.
   Many PmWiki calendar recipes output a BARE <table> with no class, so the
   block-link menu styling was turning << and >> into full-width rows. The
   rule below neutralises link styling for ANY link inside ANY table in the
   right nav -- genuine menu links there are never wrapped in a table -- which
   keeps prev / month / next on a single line regardless of recipe markup. */
#TemplateNav table { width: 100% !important; table-layout: auto !important; }
#TemplateNav table caption {
  caption-side: top !important;
  white-space: nowrap !important;
  text-align: center !important;
  padding: .35rem .25rem !important;
  font-weight: 700 !important;
}
#TemplateNav table a,
#TemplateNav :is(.calendar-nav, .pmcal-nav, .month-nav) a {
  display: inline !important;
  min-height: 0 !important;
  width: auto !important;
  padding: 0 .25rem !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #741317 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: visible !important;
}
#TemplateNav table a::before,
#TemplateNav table a::after {
  content: none !important;
  display: none !important;
}
#TemplateNav table :is(th, td) {
  padding: .28rem .2rem !important;
  font-size: .86rem !important;
  text-align: center !important;
  vertical-align: middle !important;
}
/* The header row (month + prev/next) stays on one line and spreads out. */
#TemplateNav table tr:first-child :is(th, td) {
  white-space: nowrap !important;
  padding: .3rem .15rem !important;
}
#TemplateNav table tr:first-child :is(th, td):first-child { text-align: left !important; }
#TemplateNav table tr:first-child :is(th, td):last-child { text-align: right !important; }
#TemplateNav :is(.calendar-nav, .pmcal-nav, .month-nav, .calendar-header, .pmcal-header, .month-header) {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: .4rem !important;
  white-space: nowrap !important;
}
/* Today / event days keep a subtle highlight. */
#TemplateNav table td.today,
#TemplateNav table td.current { background: var(--d1-red-soft) !important; font-weight: 700 !important; }

/* Profile/contact blocks that remain inside the side nav. */
#TemplateNav :is(.d1-nav-profile, .d1-office-holder, .office-holder, .profile-card) {
  margin: 0 0 .85rem;
  padding: .75rem;
  background: var(--d1-warm);
  border: 1px solid var(--d1-line);
}

/* Links inside profile wrappers, duo columns, or contact blocks -- and ANY
   link that wraps an image (thumblist/highslide photos) -- are ordinary
   inline links in the right column, not full-width menu rows. */
#TemplateNav :is(.d1-nav-profile, .d1-office-holder, .office-holder, .profile-card, .d1-duo, .d1-contact) a,
#TemplateNav :is(.d1-nav-profile, .d1-office-holder, .office-holder, .profile-card, .d1-duo, .d1-contact) .selflink,
#TemplateNav a:has(> img) {
  display: inline;
  min-height: 0;
  width: auto;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #741317;
  overflow: visible;
  text-decoration: underline;
  text-decoration-color: rgba(197, 2, 7, .4);
  text-underline-offset: .16em;
}
#TemplateNav :is(.d1-nav-profile, .d1-office-holder, .office-holder, .profile-card, .d1-duo, .d1-contact) a::before,
#TemplateNav :is(.d1-nav-profile, .d1-office-holder, .office-holder, .profile-card, .d1-duo, .d1-contact) a::after,
#TemplateNav a:has(> img)::before,
#TemplateNav a:has(> img)::after {
  content: none;
  display: none;
}
#TemplateNav :is(.d1-nav-profile, .d1-office-holder, .office-holder, .profile-card, .d1-duo, .d1-contact) a:hover,
#TemplateNav a:has(> img):hover {
  color: var(--d1-red);
  background: transparent;
  box-shadow: none;
  text-decoration-color: currentColor;
}
/* Image links have no underline at all and centre as figures. */
#TemplateNav a:has(> img) { display: inline-block; text-decoration: none; }

/* Contact rows: native PmWiki definition-list markup, e.g.
     :Phone: 519-623-9511
     :Email: [[mailto:... | Email]]
   renders as tidy label/value rows -- no table, no raw HTML. */
#TemplateSectionHero dl,
#TemplateNav dl,
dl.d1-contact,
.d1-contact dl {
  display: grid;
  grid-template-columns: minmax(4.5rem, auto) 1fr;
  gap: .2rem .65rem;
  margin: .6rem 0;
  text-align: left;
  font-size: .92rem;
}
#TemplateSectionHero dt,
#TemplateNav dt,
dl.d1-contact dt,
.d1-contact dl dt {
  margin: 0;
  font-weight: 700;
  color: var(--d1-charcoal);
}
#TemplateSectionHero dd,
#TemplateNav dd,
dl.d1-contact dd,
.d1-contact dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* Safety net: never show a stray duplicated section menu inside the content. */
#TemplateMain #TemplateNav,
#TemplateMain .template-nav-toggle,
#TemplateMain .template-nav-toggle-label,
#TemplateMain .side-card[aria-label="Section navigation"] { display: none !important; }

/* Mobile section-menu toggle (checkbox pattern, no JS). Hidden on desktop. */
.template-nav-toggle,
.template-nav-toggle-label { display: none; }

/* 09 - Footer, copyright and fixed red tool bar --------------------------- */
#TemplateFooter {
  margin-top: 0;
  color: #fff;
  background: var(--d1-charcoal); /* band runs full width */
  border-top: var(--d1-keyline) solid var(--d1-red); /* matches the red line at the top of the page */
}
.footer-inner {
  padding: clamp(1.4rem, 2.6vw, 2.1rem) var(--d1-gutter);
  background: transparent;
  box-shadow: none;
}
#TemplateFooter :is(h1, h2, h3, h4) {
  color: #fff;
  font-size: 1.05rem;
  line-height: 1.2;
  margin: 0 0 .6rem;
  border: 0;
}
#TemplateFooter :is(p, li) { font-size: .92rem; line-height: 1.45; }
#TemplateFooter img { max-width: 150px; max-height: 110px; object-fit: contain; }
#TemplateFooter ul { margin: 0; padding-left: 0; list-style: none; }
#TemplateFooter li { margin: 0 0 .4rem; }
#TemplateFooter li::marker { content: ""; }
#TemplateFooter a {
  color: #fff;
  text-decoration: none;
  transition: color .16s ease, padding-left .16s ease;
}
/* The shift-right hover applies ONLY to the footer link columns; the credit
   strip (#TemplateBottom) is nested inside #TemplateFooter in the template,
   so scoping via .footer-inner keeps it out of the credit bar. */
.footer-inner a:hover { color: #ffd4d4; padding-left: .18rem; text-decoration: none; }
.d1-footer-grid {
  display: grid;
  grid-template-columns: minmax(180px, 1.35fr) repeat(4, minmax(130px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: start;
}
/* Vertical dividers between footer columns (desktop layout only; the 2-column
   and stacked layouts in the media blocks are unaffected). */
@media (min-width: 901px) {
  .d1-footer-grid > div + div {
    border-left: 1px solid rgba(255, 255, 255, .14);
    padding-left: clamp(1.1rem, 2vw, 1.6rem);
  }
}
.d1-footer-brand img { margin-bottom: .65rem; }

#TemplateBottom {
  margin: 0;
  color: #ddd;
  font-size: .82rem;
  background: var(--d1-charcoal-deep); /* band runs full width, attached below the footer */
  border-top: 1px solid rgba(255, 255, 255, .12);
}
/* While no TemplateBottom/TemplateCredits page exists, hide the strip
   entirely instead of showing a bare dark band. (Depends on the tmpl
   keeping the inner div and its wiki directive on ONE line -- whitespace
   would defeat :empty.) */
#TemplateBottom:has(> .bottom-inner:empty) { display: none; }
.bottom-inner {
  padding: .7rem var(--d1-gutter);
  color: #ddd;
  background: transparent;
  border-top: 0;
}
#TemplateBottom :is(p, ul) { margin: 0; }
/* Credit-strip links: animated centre-out white underline (matches the
   floating red bar), no movement on hover. */
#TemplateBottom a {
  color: #fff;
  text-decoration: none;
  background-image: linear-gradient(#fff, #fff);
  background-repeat: no-repeat;
  background-position: 50% calc(100% - .1em);
  background-size: 0% 1.5px;
  transition: color .16s ease, background-size .2s ease;
}
#TemplateBottom a:hover,
#TemplateBottom a:focus-visible {
  color: #fff;
  background-size: 100% 1.5px;
}

/* Credit strip layout: copyright left / tagline centre / credit right.
   Every cell is a flex row with centred items, so inline images (the maple
   leaf) sit on the text's vertical centre. Collapses to a centred stack on
   phones (see the 620px block). */
.d1-bottom-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .4rem 1.25rem;
}
.d1-bottom-grid > div {
  display: flex;
  align-items: center;
  gap: .4rem;
  min-width: 0;
}
.d1-bottom-grid > div:nth-child(1) { justify-content: flex-start; text-align: left; }
.d1-bottom-grid > div:nth-child(2) { justify-content: center; text-align: center; }
.d1-bottom-grid > div:nth-child(3) { justify-content: flex-end; text-align: right; }
.d1-bottom-grid p {
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .35rem;
  justify-content: inherit;
}
.d1-bottom-grid img {
  display: inline-block;
  width: auto;
  vertical-align: middle;
  margin: 0 .2rem;
}

/* Fixed red tool bar at the very bottom of the viewport. */
#TemplateBottomNav {
  position: fixed;
  z-index: 999;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 33px;
  margin: 0;
  padding: 7px .8rem 8px;
  color: #dedede;
  background: linear-gradient(180deg, #d10a0f 0%, var(--d1-red) 55%, #9d0004 100%);
  border-top: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 -4px 10px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .18);
  text-align: center;
  text-transform: uppercase;
  font-size: .72rem;
  line-height: 1.35;
}
#TemplateBottomNav:empty { display: none; }
#TemplateBottomNav,
#TemplateBottomNav form,
#TemplateBottomNav .search,
#TemplateBottomNav .searchbox {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .1rem .4rem;
}
#TemplateBottomNav ul,
#TemplateBottomNav > ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .1rem .35rem;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 1.2;
}
#TemplateBottomNav li {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 1.2;
}
#TemplateBottomNav li::marker { content: ""; }
/* Hairline separators between list items (one link per list item). */
#TemplateBottomNav li + li::before {
  content: "";
  flex: 0 0 auto;
  width: 1px;
  height: .95em;
  margin-right: .45rem;
  background: rgba(255, 255, 255, .35);
}
#TemplateBottomNav li:has(form)::before,
#TemplateBottomNav li:has(input)::before { display: none; }
#TemplateBottomNav a,
#TemplateBottomNav .selflink {
  display: inline-block;
  color: #eee;
  padding: .16rem .55rem;
  margin: 0;
  border-radius: 3px;
  letter-spacing: .05em;
  text-decoration: none;
  line-height: 1.2;
  background-image: linear-gradient(#fff, #fff);
  background-repeat: no-repeat;
  background-position: 50% calc(100% - .12em);
  background-size: 0% 1.5px;
  transition: color .16s ease, background-size .2s ease;
}
#TemplateBottomNav a:hover,
#TemplateBottomNav a:focus-visible {
  color: #fff;
  background-size: 100% 1.5px; /* white rule grows outward from the centre */
  text-decoration: none;
}
#TemplateBottomNav .selflink {
  color: #fff;
  background-image: none;
  background-color: rgba(0, 0, 0, .18); /* current page keeps the quiet pill */
}
#TemplateBottomNav input,
#TemplateBottomNav button {
  min-height: 18px;
  height: 18px;
  margin: 0 .15rem;
  padding: 1px 5px;
  color: #000;
  background: #d9d9d9;
  border: 1px solid #b6b6b6;
  border-radius: 0;
  font-size: 10px;
  line-height: 1;
  vertical-align: middle;
}
#TemplateBottomNav input:hover,
#TemplateBottomNav input:focus { background: #fff; }
#TemplateBottomNav input[type="text"],
#TemplateBottomNav input[type="search"] { width: min(42vw, 180px); }

/* 10 - PmWiki gallery/slideshow compatibility ------------------------------ */
img.thumbs {
  border: 1px solid #dddddd;
  margin: 2px;
  padding: 4px;
  vertical-align: middle;
  background: #fff;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
img.thumbs:hover,
table.thumbtable td.thumbtd div.img:hover { border-color: var(--d1-red); }
img.thumbs:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(24, 18, 15, .13); }
table.thumbtable { width: auto; border: 1px solid #cccccc; }
table.thumbtable img.thumbs { border: 0; padding: 0; }
table.thumbtable td.thumbtd { margin: 4px; padding: 2px; }
table.thumbtable td.thumbtd div.img { border: 1px solid #dddddd; text-align: center; }
.caption { font-size: .8em; overflow: hidden; padding: 0; line-height: 1.1em; }
img.current,
table.thumbtable td.thumbtd div.current { border-color: #ff0000; }
.clearfix { clear: both; }

/* --- Optional enhancements (opt-in via wiki classes) ---------------------
   None of these apply unless you add the class in wiki markup, so they are
   safe to ship and adopt page-by-page. */

/* (a) Lead paragraph: larger intro text. Add %class=d1-lead% to a paragraph. */
#TemplateMain .d1-lead {
  font-size: clamp(1.08rem, 1.3vw, 1.22rem);
  line-height: 1.5;
  color: #3a3634;
}

/* (b) Pull note / callout box. (:div class="d1-note":) ... (:divend:)
   Variants: d1-note d1-note-warn (amber), d1-note d1-note-info (blue-grey). */
#TemplateMain .d1-note {
  margin: 1.5rem 0;
  padding: 1rem 1.15rem 1rem 1.25rem;
  background: var(--d1-red-soft);
  border-left: .3rem solid var(--d1-red);
  border-radius: 0 4px 4px 0;
}
#TemplateMain .d1-note > :first-child { margin-top: 0; }
#TemplateMain .d1-note > :last-child { margin-bottom: 0; }
#TemplateMain .d1-note-warn { background: #fff6e0; border-left-color: #e0a516; }
#TemplateMain .d1-note-info { background: #eef2f6; border-left-color: #5a7184; }

/* (c) Responsive 16:9 video/map wrapper. (:div class="d1-embed":)(:divend:) */
#TemplateMain .d1-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  margin: 1.5rem 0;
  border-radius: .5rem;
  overflow: hidden;
  background: #000;
}
#TemplateMain .d1-embed :is(iframe, video, object, embed) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* (d) Definition-style stat / label pairs, e.g. office contact rows.
   (:div class="d1-datalist":) then use ; term : value lines. */
#TemplateMain .d1-datalist dl,
#TemplateMain dl.d1-datalist {
  display: grid;
  grid-template-columns: minmax(7rem, auto) 1fr;
  gap: .3rem .9rem;
  margin: 1.25rem 0;
}
#TemplateMain .d1-datalist dt { font-weight: 700; color: var(--d1-charcoal); }
#TemplateMain .d1-datalist dd { margin: 0; }

/* (e) Quiet section divider with a centred diamond, for long pages.
   Use %class=d1-rule% on a horizontal rule, or (:div class="d1-rule":). */
#TemplateMain hr.d1-rule,
#TemplateMain .d1-rule {
  border: 0;
  height: 1.4rem;
  margin: 1.75rem 0;
  text-align: center;
}
#TemplateMain hr.d1-rule::after,
#TemplateMain .d1-rule::after {
  content: "\25C6";
  color: var(--d1-red);
  font-size: .8rem;
  opacity: .7;
}

/* (f) Image caption band under a framed image. %class=d1-figcap% on text. */
#TemplateMain .d1-figcap {
  margin-top: -.4rem;
  font-size: .85rem;
  color: var(--d1-muted);
  font-style: italic;
}

/* 11 - Animations ---------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .content-card,
  .side-card,
  .footer-inner { animation: d1FadeRise .45s ease both; }
}
@keyframes stkScrimIn {
  from { background-color: rgba(20, 18, 17, 0); }
  to   { background-color: rgba(20, 18, 17, .45); }
}
@keyframes stkPanelItemsIn {
  from { opacity: 0; transform: translateX(26px); }
  to   { opacity: 1; transform: none; }
}
@keyframes d1FadeRise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 12 - Responsive ----------------------------------------------------------
   The top menu wraps at every width (no horizontal scrolling).
   900px:  single column; content first, then the section-menu toggle, the
           menu box, the profile panel, and the aside (Facebook) box.
   620px:  tighter header/nav sizing; footer stacks; credit strip centres. */

@media (max-width: 900px) {
  .topbar-inner { flex-wrap: wrap; }
  #TemplateTopContent { flex-basis: 100%; order: 3; }

  /* Wrapped top menu: blocks stay on the gutter edge. */
  #TemplateTopNav ul { margin-left: 0; }

  /* Submenus render INLINE (static) at all wrapped-menu widths. Previously
     this only applied below 620px, so at 621-900px the absolutely-positioned
     desktop panel overlapped the wrapped menu rows and flashed open/closed
     as the pointer crossed other items. */
  #TemplateTopNav li ul,
  #TemplateTopNav li.d1-mega > ul {
    position: static;
    display: none;
    width: 100%;
    min-width: 0;
    max-width: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    background: var(--d1-red-dark);
  }
  #TemplateTopNav li:hover > ul,
  #TemplateTopNav li:focus-within > ul { display: block; }
  #TemplateTopNav li.d1-mega > ul { display: none; }
  #TemplateTopNav li.d1-mega:hover > ul,
  #TemplateTopNav li.d1-mega:focus-within > ul { display: grid; grid-template-columns: 1fr; }

  /* Header: smaller logo. */
  .header-inner { min-height: 108px; }
  #TemplateLogo img,
  #TemplateLogo svg { max-height: 96px; }
  /* The highlight leaves the squished header entirely: header instances
     hide; the inline instance renders ABOVE the main content instead. */
  #TemplateHighlight,
  #TemplateHeaderText .d1-highlight { display: none; }
  /* Unconditional: :not(:empty) was defeated by whitespace PmWiki can emit
     around the include. An empty wrapper is invisible anyway (all visible
     styling lives on the .d1-highlight card inside it). */
  .template-highlight-inline { display: block; order: 4; width: 100%; }
  .template-highlight-inline .d1-highlight { max-width: none; }

  /* Single column of floating boxes: section-menu toggle + menu FIRST,
     then the profile panel, the content, and the aside. */
  #TemplateWrapper { display: flex; flex-direction: column; gap: .9rem; }
  #TemplateNavToggle { position: absolute; left: -9999px; }
  .template-nav-toggle-label {
    order: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start; /* icon leads, label follows */
    gap: .6rem;
    width: 100%;
    min-height: 42px;
    padding: .65rem var(--d1-copy-inset);
    color: #fff;
    background: var(--d1-slate); /* slate, not D1's charcoal */
    box-shadow: var(--d1-shadow-float);
    font-family: var(--d1-display);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .025em;
    cursor: pointer;
  }
  .template-nav-toggle-label::before { content: "\2630"; font-size: 1.18rem; line-height: 1; }
  #TemplateNavToggle:checked + .template-nav-toggle-label::before { content: "\00D7"; font-size: 1.35rem; }
  /* Off-canvas section menu: a fixed panel that slides in from the RIGHT
     when the toggle is checked. Pure CSS (checkbox + transform); the global
     prefers-reduced-motion rule disables the slide for those who ask.
     While open, the toggle bar pins to the top of the screen full-width, so
     closing is always one tap even after scrolling. */
  /* Off-canvas section menu, rebuilt (v10). Root cause of every symptom:
     the panel lives inside #TemplateWrapper, whose position:relative +
     z-index:10 formed a stacking context BELOW the header (z-20) and top
     nav (z-30) -- the panel's own z-index could never lift it above them
     (top links "covered"), and the slide played out hidden behind the
     bands ("appears out of nowhere"). The wrapper's stacking context is
     removed on narrow screens. */
  #TemplateWrapper { position: static; z-index: auto; }

  /* Lock page scroll while the menu is open (no second scrollbar fighting
     the panel); harmless no-op on browsers without :has(). */
  body:has(#TemplateNavToggle:checked) { overflow: hidden; }

  /* While open, the toggle label becomes a FULL-SCREEN SCRIM: tapping
     anywhere outside the panel closes the menu. */
  #TemplateNavToggle:checked + .template-nav-toggle-label {
    position: fixed;
    inset: 0;
    z-index: 980;
    width: auto;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    background: rgba(20, 18, 17, .45);
    color: transparent;
    box-shadow: none;
    animation: stkScrimIn .32s ease both;
  }
  #TemplateNavToggle:checked + .template-nav-toggle-label::before { content: none; }

  /* The panel: full height, slides in from the right, above everything. */
  #TemplateNav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(84vw, 320px);
    z-index: 990; /* above the scrim (980) and every band */
    display: block;               /* always rendered, so it can animate */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-top: 3rem;            /* room for the close X */
    transform: translateX(103%);
    visibility: hidden;
    box-shadow: -12px 0 30px rgba(0, 0, 0, .28);
    transition: transform .38s cubic-bezier(.22, .61, .36, 1), visibility 0s linear .38s; /* hide only after sliding out */
  }
  #TemplateNavToggle:checked + #TemplateNavToggleLabel + #TemplateNav {
    transform: translateX(0);
    visibility: visible;
    transition: transform .38s cubic-bezier(.22, .61, .36, 1);
  }
  /* The panel's contents cascade in a beat behind the panel: each direct
     child (close X, search, headings, lists) drifts in from the right with
     a small stagger. Runs on open only; the global reduced-motion rule
     disables all of it. */
  #TemplateNavToggle:checked + #TemplateNavToggleLabel + #TemplateNav > * {
    animation: stkPanelItemsIn .34s cubic-bezier(.22, .61, .36, 1) both;
  }
  #TemplateNavToggle:checked + #TemplateNavToggleLabel + #TemplateNav > :nth-child(1) { animation-delay: .08s; }
  #TemplateNavToggle:checked + #TemplateNavToggleLabel + #TemplateNav > :nth-child(2) { animation-delay: .13s; }
  #TemplateNavToggle:checked + #TemplateNavToggleLabel + #TemplateNav > :nth-child(3) { animation-delay: .18s; }
  #TemplateNavToggle:checked + #TemplateNavToggleLabel + #TemplateNav > :nth-child(4) { animation-delay: .23s; }
  #TemplateNavToggle:checked + #TemplateNavToggleLabel + #TemplateNav > :nth-child(n+5) { animation-delay: .27s; }

  /* X close control at the panel's top-right: a second <label> for the same
     checkbox, emitted by the tmpl. 42px touch target. */
  .stk-nav-close {
    display: flex;
    position: absolute;
    top: .35rem;
    right: .35rem;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--d1-muted);
    cursor: pointer;
  }
  .stk-nav-close:hover { color: var(--d1-red); }

  /* Compact touch rows: flat and space-efficient, no desktop animations. */
  #TemplateNav a,
  #TemplateNav .selflink {
    min-height: 38px;
    padding: .3rem var(--d1-navcard-pad) .3rem var(--d1-item-pad);
    font-size: .95rem;
    background-image: none;       /* no sweep */
    border-bottom-color: #f0ebe7; /* lighter separators */
    transition: none;
  }
  #TemplateNav a:hover,
  #TemplateNav a:active {
    box-shadow: none;
    background-color: var(--d1-red-soft); /* simple flat tap tint */
    color: var(--d1-red-dark);
  }
  #TemplateNav :is(ul ul, li li) > li > :is(a, .selflink) { min-height: 32px; }
  #TemplateNav h2,
  #TemplateNav h3 { margin-top: 1.1rem; margin-bottom: .35rem; }
  #TemplateSectionHero { order: 3; }
  #TemplateMainColumn { order: 5; width: 100%; }
  #TemplateAside { order: 6; }
  .d1-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Bottom bar (zone off by default on STK; rules kept for re-enabling):
     at any narrow width the search takes its own full row ABOVE the links.
     Works whether the searchbox is its own list item, a direct child form,
     or inline in the SAME list item as the links. */
  #TemplateBottomNav li:has(form),
  #TemplateBottomNav li:has(input) {
    order: -1;
    flex-wrap: wrap;
    justify-content: center;
    flex: 1 0 100%;
    width: 100%;
  }
  #TemplateBottomNav form,
  #TemplateBottomNav .search,
  #TemplateBottomNav .searchbox {
    order: -1;
    flex: 1 0 100%;
    width: 100%;
    margin: 0 0 4px;
    justify-content: center;
  }
}

@media (max-width: 620px) {
  body { line-height: 1.52; }
  #TemplateTopContent,
  #TemplateSocial { font-size: .82rem; }
  #TemplateSocial img { max-height: 28px; }

  .header-inner { min-height: 96px; padding-block: .8rem; gap: .8rem; }
  #TemplateLogo img,
  #TemplateLogo svg { max-height: 80px; }
  #TemplateHeaderText :is(h1, h2) { font-size: clamp(1.3rem, 6.5vw, 1.8rem); }
  #TemplateHeaderText p { font-size: .92rem; }
  :is(.header-inner, .template-highlight-inline) .d1-highlight { padding: .5rem .7rem; font-size: .85rem; }

  /* Top nav: tighter link sizing on phones; the pull-back matches this
     width's .62rem link padding. */
  #TemplateTopNav ul { justify-content: flex-start; margin-left: 0; }
  #TemplateTopNav li { flex: 0 0 auto; }
  #TemplateTopNav a,
  #TemplateTopNav .selflink {
    white-space: normal;
    min-height: 38px;
    padding: .48rem .62rem;
    font-size: .9rem;
  }

  #TemplateMain { padding: .95rem clamp(.85rem, 3vw, 1.1rem); }
  #TemplateTitle { padding: .7rem var(--d1-gutter) 0 calc(var(--d1-gutter) + .62rem); font-size: .84rem; }
  .footer-inner { padding: 1rem var(--d1-gutter); }
  .bottom-inner { padding: .65rem var(--d1-gutter); }
  .d1-footer-grid { grid-template-columns: 1fr; }
  table { display: block; overflow-x: auto; }

  /* Bottom bar sizing on phones (zone off by default on STK). */
  #TemplateBottomNav { min-height: 40px; padding: 8px .5rem 9px; }
  #TemplateBottomNav input[type="text"],
  #TemplateBottomNav input[type="search"] { width: min(88vw, 310px); }

  /* Credit strip stacks and centres on phones. */
  .d1-bottom-grid { grid-template-columns: 1fr; gap: .3rem; }
  .d1-bottom-grid > div,
  .d1-bottom-grid > div:nth-child(1),
  .d1-bottom-grid > div:nth-child(3) { justify-content: center; text-align: center; }
}

@media (max-width: 380px) {
  #TemplateBottomNav { font-size: .68rem; }
  #TemplateBottomNav a { padding-inline: .16rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
}

@media print {
  body { color: #000; background: #fff; padding-bottom: 0 !important; }
  body::before,
  #TemplateTop,
  #TemplateTopNav,
  #TemplateAlert,
  #TemplateHero,
  #TemplateSectionHero,
  #TemplateNav,
  #TemplateAside,
  .template-nav-toggle-label,
  #TemplateFooter,
  #TemplateBottom,
  #TemplateBottomNav,
  .skip-link { display: none !important; }
  #TemplateAll,
  #TemplateWrapper,
  .content-card { width: 100%; margin: 0; padding: 0; box-shadow: none; border: 0; }
  #TemplateWrapper { display: block; }
  #TemplateMain { padding: 0; }
  a { color: #000; }
}