@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800;900&family=Cinzel+Decorative:wght@400;700;900&display=swap");
/* Site fonts, from Admin -> Site Branding -> Site font. */
:root { --site-font-h1: "Cinzel", Georgia, "Times New Roman", serif; --site-font-h2: "Cinzel", Georgia, "Times New Roman", serif; --site-font-brand: "Cinzel Decorative", Georgia, "Times New Roman", serif; }
h1 { font-family: var(--site-font-h1); }
h2 { font-family: var(--site-font-h2); }
.sc-brand-name, .soc-brand-name, .lxf-brand-name { font-family: var(--site-font-brand); }

/* Generated from the palette in Admin -> Branding -> Theme.

   Only tokens changed from the stylesheet default appear here. */

:root {
  --c-brand: #059669;
  --c-brand-strong: #047857;
  --c-brand-deep: #065f46;
  --c-brand-alt: #10b981;
  --c-brand-tint: #ecfdf5;
  --c-brand-tint-2: #d1fae5;
  --c-brand-border: #a7f3d0;
  --c-chrome: #131f20;
  --c-chrome-2: #1a3d3c;
  --c-chrome-3: #13292a;
  --c-chrome-control: #272a29;
  --c-chrome-control-hover: #3f4644;
  --c-chrome-border: #4b6352;
  --c-chrome-chip: #385240;
  --c-chrome-select: #20504c;
  --c-chrome-select-border: #3a7877;
}

:root[data-theme="dark"] {
  --c-brand: #82f8d3;
  --c-brand-strong: #64f2c6;
  --c-brand-deep: #c8feed;
  --c-brand-alt: #89fad5;
  --c-brand-tint: #233e35;
  --c-brand-tint-2: #1f4137;
  --c-brand-border: #3e7967;
  --c-chrome: #131f20;
  --c-chrome-2: #1a3d3c;
  --c-chrome-3: #13292a;
  --c-chrome-control: #272a29;
  --c-chrome-control-hover: #3f4644;
  --c-chrome-border: #4b6352;
  --c-chrome-chip: #385240;
  --c-chrome-select: #20504c;
  --c-chrome-select-border: #3a7877;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-brand: #82f8d3;
    --c-brand-strong: #64f2c6;
    --c-brand-deep: #c8feed;
    --c-brand-alt: #89fad5;
    --c-brand-tint: #233e35;
    --c-brand-tint-2: #1f4137;
    --c-brand-border: #3e7967;
    --c-chrome: #131f20;
    --c-chrome-2: #1a3d3c;
    --c-chrome-3: #13292a;
    --c-chrome-control: #272a29;
    --c-chrome-control-hover: #3f4644;
    --c-chrome-border: #4b6352;
    --c-chrome-chip: #385240;
    --c-chrome-select: #20504c;
    --c-chrome-select-border: #3a7877;
  }
}

/* Text on the brand colour, per mode (derived). */
:root { --c-on-brand: #ffffff; }
:root[data-theme="dark"] { --c-on-brand: #0f172a; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --c-on-brand: #0f172a; }
}

/* Header buttons sit on the brand colour. */
html .sc-header .sc-nav a.sc-cta,
html header.soc-header .soc-actions a.soc-cta,
html header.soc-header .soc-actions a.soc-cta:hover { color: var(--c-on-brand, var(--c-on-accent, #ffffff)); }

/* default mode: light */

.sc-logo { display: block; width: 48px; height: 48px; border-radius: 6px; }
/* The footer logo is larger and sits ABOVE the site name, both centred. */
.sc-foot-brand .sc-logo { width: 96px; height: 96px; }
.sc-foot-brand .sc-brand { flex-direction: column; align-items: center; text-align: center; gap: 0.6rem; }
.sc-foot-brand { text-align: center; }
.sc-foot-brand .sc-foot-tagline { margin-left: auto; margin-right: auto; }
.sc-logo-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sc-logo-light { display: none; }
  :root:not([data-theme="light"]) .sc-logo-dark { display: block; }
}
:root[data-theme="dark"] .sc-logo-light { display: none; }
:root[data-theme="dark"] .sc-logo-dark { display: block; }

/* The bar itself sticks; each template paints it. */
.sc-header {
  position: sticky;
  top: 0;
  z-index: 40;
}
.sc-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: inherit;
  font-weight: 650;
  /* ⚠️ ONE BRAND SIZE ACROSS BOTH HEADERS. This was 1.02rem and the
     social bar was 1.25rem; a reader crossing from the marketing site to
     the network saw the name change size. 1.3rem is the shared value and
     is bigger than either was. The WEIGHT still differs on purpose --
     that is character, not size. */
  font-size: 1.3rem;
  letter-spacing: -0.01em;
}
.sc-nav { display: flex; align-items: center; gap: 1.5rem; }
.sc-nav a {
  position: relative;
  color: inherit;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
  transition: color 0.15s ease, background 0.15s ease;
}

/* AN UNDERLINE THAT GROWS, NOT opacity: 0.75. Fading a label towards
   the bar behind it reads as the link going away rather than answering,
   and it is the cheapest-looking thing a nav can do. currentColor, so
   ONE rule is right on a light bar and on a dark one -- and :not(.sc-cta),
   because the button already answers with its own fill. */
.sc-nav a:not(.sc-cta)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.4rem;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.18s ease;
}
.sc-nav a:not(.sc-cta):hover::after { transform: scaleX(1); }
.sc-nav a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 3px;
}

/* NOTE: .sc-nav a.sc-cta, not !important. The rule above sets a colour
   on every link in the bar and the button is one of them, so it has to
   out-specify it -- and this is a default people copy, so it should not
   teach !important as the way to win a cascade. */
.sc-nav a.sc-cta {
  padding: 0.5rem 1.05rem;
  border-radius: 0.6rem;
  background: var(--c-brand);
  color: var(--c-on-accent);
  font-weight: 600;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--c-shadow) 16%, transparent);
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.sc-nav a.sc-cta:hover {
  background: var(--c-brand-strong);
  color: var(--c-on-accent);
  box-shadow: 0 5px 14px color-mix(in srgb, var(--c-brand) 34%, transparent);
  transform: translateY(-1px);
}

/* THE ROW AND THE DISCLOSURE SWAP AT ONE BREAKPOINT, so both can never
   be on screen together -- and neither is ever inside the other. */
.sc-menu { display: none; position: relative; }

/* The burger's outline is currentColor at low alpha, so it reads against
   whatever the bar is painted -- one rule instead of a per-template
   override that has to be remembered for every new style. */
.sc-menu > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  list-style: none;
  cursor: pointer;
  border: 1px solid color-mix(in srgb, currentColor 26%, transparent);
  border-radius: 0.65rem;
  color: inherit;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.sc-menu > summary:hover {
  background: color-mix(in srgb, currentColor 9%, transparent);
  border-color: color-mix(in srgb, currentColor 42%, transparent);
}
.sc-menu > summary::-webkit-details-marker { display: none; }
.sc-menu > summary:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* ⚠⚠ THE PANEL IS THE NAV, FULL WIDTH. IT USED TO BE A FLOATING CARD.
   A 14.5rem card hanging off the right of the bar, on its own surface
   colour with its own border and shadow, is a desktop dropdown shrunk --
   it reads as a menu ABOUT the page rather than as the page's own
   navigation. The social bar got the other treatment first and Josh asked
   for it here: "the full width dropdown, that looks more app like."

   So the bar WRAPS and the row opens underneath it, in the bar's own
   colours, edge to edge. Which also means one navLinks instead of two --
   see the note on menuBlock.

   ⚠️ THE SEPARATOR AND THE INK ARE currentColor, NOT surface tokens.
   This block is shared by every template and the bar underneath it may be
   light (Classic), translucent (Centred) or a dark gradient (Bold). The
   old card set --c-surface / --c-text-2 on itself because it was a
   card; a panel that IS the bar has to take the bar's own pair, or Bold
   gets slate-on-near-black. That is why .sc-h-bold no longer carries a
   panel override, and why the note about it went with it. */
@media (max-width: 720px) {
  .sc-header-inner { flex-wrap: wrap; row-gap: 0.5rem; }
  .sc-nav { display: none; }
  /* margin-left: auto pins the burger to the corner whatever else shares
     its line -- the templates do not all set justify-content. */
  .sc-menu { display: block; margin-left: auto; }
  .sc-menu[open] ~ .sc-nav {
    display: flex;
    /* flex: 1 0 100% and not width: 100% -- a basis of auto would let it
       try to share the brand's line. */
    flex: 1 0 100%;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.15rem;
    margin-top: 0.15rem;
    padding-top: 0.5rem;
    border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  }
  .sc-menu[open] ~ .sc-nav a {
    padding: 0.65rem 0.75rem;
    border-radius: 0.55rem;
    font-size: 0.95rem;
    text-align: left;
  }
  .sc-menu[open] ~ .sc-nav a:hover {
    background: color-mix(in srgb, currentColor 8%, transparent);
  }
  /* The call to action keeps its shape and takes the full width. */
  .sc-menu[open] ~ .sc-nav a.sc-cta { text-align: center; margin-top: 0.4rem; }
  .sc-menu[open] ~ .sc-nav a.sc-cta:hover { transform: none; }
}

/* Somebody who asked their system for less movement gets the colour
   change and none of the travel. */
@media (prefers-reduced-motion: reduce) {
  .sc-nav a:not(.sc-cta)::after { transition: none; }
  .sc-nav a.sc-cta:hover { transform: none; }
}

.sc-burger {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  position: relative;
}
.sc-burger::before,
.sc-burger::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.sc-burger::before { top: -6px; }
.sc-burger::after { top: 6px; }
/* Open: the top and bottom bars cross and the middle one goes. */
.sc-menu[open] .sc-burger { background: transparent; }
.sc-menu[open] .sc-burger::before { top: 0; transform: rotate(45deg); }
.sc-menu[open] .sc-burger::after { top: 0; transform: rotate(-45deg); }

.sc-header {
  border-bottom: 1px solid var(--c-border);
  /* The solid one FIRST, as the fallback: a browser without color-mix
     drops the second declaration and keeps an opaque bar rather than a
     transparent one over the page. */
  background: var(--c-surface);
  background: color-mix(in srgb, var(--c-surface) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.5) blur(12px);
  backdrop-filter: saturate(1.5) blur(12px);
  color: var(--c-text);
}
.sc-header-inner {
  margin: 0 2%;
  padding: 0.85rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
/* The links sit a step back from the brand, and come forward on hover --
   the brand mark is the loudest thing in the bar, not the nav. */
.sc-h-classic .sc-nav a { color: var(--c-text-2); }
.sc-h-classic .sc-nav a:hover { color: var(--c-brand); }
.sc-h-classic .sc-nav a.sc-cta { color: var(--c-on-accent); }
.sc-brand:hover { color: var(--c-brand); }

/* ✦ Sensorium header: cream glass, gold hairline, Cinzel Decorative
   wordmark. The bar stays cream in light AND dark mode, so its ink and
   logo are pinned here rather than taken from the theme. */
.sc-header.sc-h-classic {
  min-height: 64px;
  color: #2d0a4a;
  background: rgba(255, 252, 242, .95);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(200, 160, 48, .35);
}
.sc-h-classic .sc-header-inner { padding-top: .5rem; padding-bottom: .5rem; }
.sc-h-classic .sc-brand-name {
  font-family: 'Cinzel Decorative', serif;
  font-weight: 700;
  letter-spacing: .04em;
  color: #2d0a4a;
}
.sc-h-classic .sc-brand:hover,
.sc-h-classic .sc-brand:hover .sc-brand-name { color: #4a1a6a; }
.sc-h-classic .sc-nav a:not(.sc-cta) { color: #3d2a4f; transition: color .2s ease; }
.sc-h-classic .sc-nav a:not(.sc-cta):hover { color: #4a1a6a; }
.sc-header .sc-brand .sc-logo.sc-logo-light { display: block; }
.sc-header .sc-brand .sc-logo.sc-logo-dark { display: none; }


/* ✦ Sensorium fonts, loaded here because the head-code box only passes
   <script> tags through. Cinzel Decorative for the header wordmark;
   Cinzel for every h1 and h2 on the public pages. */
@font-face {
  font-family: 'Cinzel Decorative';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/cinzeldecorative/v19/daaHSScvJGqLYhG8nNt8KPPswUAPniZoadlESTE.woff2) format('woff2');
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/cinzel/v26/8vIJ7ww63mVu7gt79mT7.woff2) format('woff2');
}
.site-page-body h1,
.site-page-body h2 { font-family: 'Cinzel', Georgia, serif; }

/* The wordmark is wider than the old font: on phones it shrinks so the
   menu button keeps its place on the same row. */
@media (max-width: 720px) {
  .sc-h-classic .sc-header-inner { flex-wrap: nowrap; }
  .sc-h-classic .sc-header-inner:has(.sc-menu[open]) { flex-wrap: wrap; }
  .sc-h-classic .sc-brand { min-width: 0; font-size: 1rem; }
  .sc-h-classic .sc-brand-name { letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sc-h-classic .sc-logo { width: 40px; height: 40px; }
}


/* ✦ Sitewide teal underlay: one gradient behind every public page, with the
   content bands as soft panels over it, so the teal breathes through the
   whole site. Pages with their own background (the application forms,
   Upcoming Gatherings) set it in their page CSS, which loads later and wins. */
body.site-page-body {
  background: linear-gradient(180deg, #0f2a2a 0%, #13302f 20%, #1a3d3c 45%, #1e5a52 75%, #2a7064 100%) fixed;
}
.site-page-body .page-section { background: rgba(250, 248, 242, .94); }
.site-page-body .page-section-tint { background: rgba(232, 242, 238, .92); }
.site-page-body .page-section-dark { background: rgba(15, 42, 42, .9); }
.site-page-body .page-cta-band {
  background: linear-gradient(135deg, rgba(15,42,42,.92) 0%, rgba(26,61,60,.9) 50%, rgba(42,112,100,.88) 100%);
  border-top: 1px solid rgba(200,160,48,.35);
  border-bottom: 1px solid rgba(200,160,48,.35);
}
/* Event pages: the details sit in a cream panel over the teal; a title with
   no header image behind it turns light so it reads on the teal. */
.site-page-landing .site-page.ev-page > .ev-layout {
  background: rgba(250, 248, 242, .96);
  border-radius: 22px;
  padding-top: 2rem;
  padding-bottom: 2rem;
  margin-bottom: 3rem;
  box-shadow: 0 2px 6px rgba(0,0,0,.08), 0 24px 70px rgba(0,0,0,.3);
}
.site-page-landing .site-page.ev-page > .ev-head:not(.ev-head-image) { color: #fff; }
.site-page-landing .site-page.ev-page > .ev-head:not(.ev-head-image) .ev-summary { color: rgba(255,255,255,.85); }


/* Dark mode: the cream panels (.page-section, .page-section-tint, the
   event page.s .ev-layout) stay cream above -- the teal gradient and the
   "-dark"/cta-band panels already sit in the same dark-teal family and
   need nothing here. Only the light panels get a dark-mode background,
   in that same family, so they read as part of the page instead of a
   bright patch left over from light mode. Text is untouched: it already
   comes from the site.s own --c-* tokens, which already flip on their
   own (Josh, 2026-09-27: "everything else is good"). */
[data-theme="dark"] .site-page-body .page-section { background: rgba(19, 48, 47, .94); }
[data-theme="dark"] .site-page-body .page-section-tint { background: rgba(26, 61, 60, .92); }
[data-theme="dark"] .site-page-landing .site-page.ev-page > .ev-layout {
  background: rgba(19, 48, 47, .96);
}

.sc-logo { display: block; width: 48px; height: 48px; border-radius: 6px; }
/* The footer logo is larger and sits ABOVE the site name, both centred. */
.sc-foot-brand .sc-logo { width: 96px; height: 96px; }
.sc-foot-brand .sc-brand { flex-direction: column; align-items: center; text-align: center; gap: 0.6rem; }
.sc-foot-brand { text-align: center; }
.sc-foot-brand .sc-foot-tagline { margin-left: auto; margin-right: auto; }
.sc-logo-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sc-logo-light { display: none; }
  :root:not([data-theme="light"]) .sc-logo-dark { display: block; }
}
:root[data-theme="dark"] .sc-logo-light { display: none; }
:root[data-theme="dark"] .sc-logo-dark { display: block; }

/* The bottom bar: copyright on the left, small print on the right, and
   stacked on a phone. One rule for all three templates -- the bar is the
   same sentence and the same two links in every one of them. */
.sc-footer-bar,
.sc-foot-legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
}
/* ⚠️ A COLUMN WITH NOTHING IN IT IS NOT A COLUMN. Sitelinks is filled
   from the pages ticked in the page builder, and a site that has ticked
   none would otherwise show a heading with a blank space under it --
   which reads as something failing to load. :has() is unsupported on old
   engines, where the whole selector is dropped and the heading shows, as
   it did before: the failure direction is "looks like it did last week". */
.sc-foot-col:not(:has(a)) { display: none; }

.sc-foot-smallprint {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  margin: 0;
}

@media (max-width: 560px) {
  .sc-footer-bar,
  .sc-foot-legal { justify-content: center; text-align: center; }
}
.sc-footer a {
  color: inherit;
  text-decoration: none;
  opacity: 0.82;
}
.sc-footer a:hover { opacity: 1; }
.sc-footer a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 3px;
}

.sc-footer {
  border-top: 1px solid var(--c-border);
  background: var(--c-surface-subtle);
  color: var(--c-text-2);
}
.sc-footer-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 3rem 1.25rem 2rem;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr);
  gap: 2.5rem;
}
.sc-foot-tagline {
  margin: 0.7rem 0 0;
  font-size: 0.88rem;
  color: var(--c-text-muted);
  max-width: 30ch;
}
/* auto-fit, so the columns reflow without a second breakpoint */
.sc-foot-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1.75rem;
}
.sc-foot-col h4 {
  margin: 0 0 0.7rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.sc-foot-col a { display: block; margin-bottom: 0.5rem; font-size: 0.9rem; }
/* ⚠⚠ THE MEASURE AND THE PADDING ARE ON THE BAR, NOT ON THE <p>. They
   used to be on the paragraph, which was correct while the bar held
   exactly one of them -- margin:0 auto centred that single line in
   the page. The bar holds two now, the copyright and the small print,
   and a max-width plus auto margins on EACH would make them two
   1120px-wide blocks that cannot sit beside each other. */
.sc-footer-bar {
  border-top: 1px solid var(--c-border);
  max-width: 1120px;
  margin: 0 auto;
  padding: 1rem 1.25rem;
  font-size: 0.8rem;
  color: var(--c-text-muted);
}
.sc-footer-bar p { margin: 0; }

@media (max-width: 720px) {
  .sc-footer-inner { grid-template-columns: 1fr; gap: 2rem; padding-top: 2.25rem; }
}

/* THE HOME PAGE FOOTER, EVERYWHERE (Josh, 2026-09-30: /our-story "doesn't
   even have the proper footer"). The dark teal and gold footer was set only
   by the home page's own stylesheet; every other page got the light default. */
.sc-footer{
  background:linear-gradient(180deg,#0b2222 0%,#081a1a 100%);
  color:rgba(244,236,214,.78);
  border-top:1px solid rgba(200,160,48,.25);
}
.sc-footer a,.sc-footer .sc-brand-name,.sc-footer h2,.sc-footer h3,.sc-footer h4{ color:rgba(244,236,214,.9); }
.sc-footer .sc-foot-tagline,.sc-footer .sc-footer-bar,.sc-footer .sc-foot-smallprint{ color:rgba(244,236,214,.6); }

/* ⚠️ Scope every selector to the footer. This CSS is served in
   /theme.css and reaches every page, so a bare a { } restyles the site. */
footer.page-links { border-top: 1px solid var(--c-border); background: var(--c-surface-subtle); }
footer.page-links .page-links-inner { max-width: 1000px; margin: 0 auto; padding: 2.25rem 1.5rem 2.5rem; }
footer.page-links h2 {
  margin: 0 0 1rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--c-text-dim);
}
/* ── The social footer's boxes (Josh, 2026-09-25: "style it nice and caught
   up with the rest of the website"). The calendar's silver cards: an icon
   badge, the name, one line, and an arrow that moves on hover. Scoped to
   .pl-grid so the legal pages' own footer.page-links lists keep their look. */
footer.page-links .page-links-inner:has(.pl-grid) { max-width: 1160px; }
footer.page-links h2.pl-head {
  margin: 0 0 1.1rem; font-size: clamp(1.2rem, 2.2vw, 1.5rem); font-weight: 700;
  letter-spacing: 0; text-transform: none; color: var(--c-text, #0f172a);
}
footer.page-links ul.pl-grid {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem;
  /* Sized by the space it has, not the screen: the builder's preview
     frame is narrower than the page, and five fit wherever there is room. */
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
footer.page-links .pl-grid a {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem;
  height: 100%; box-sizing: border-box; padding: 1.1rem 1.1rem 2.4rem;
  border: 1px solid color-mix(in srgb, var(--c-text-muted, #64748b) 40%, transparent); border-radius: var(--r-3xl, 16px);
  background: var(--c-surface, #ffffff); color: var(--c-text, #0f172a); text-decoration: none;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 12px 28px -18px rgba(15, 23, 42, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
footer.page-links .pl-grid a:hover, footer.page-links .pl-grid a:focus-visible {
  transform: translateY(-2px); border-color: var(--c-brand, #6366f1); outline: none;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 18px 36px -16px rgba(15, 23, 42, 0.45);
}
footer.page-links .pl-grid a[aria-current="page"] {
  border-color: var(--c-brand, #6366f1);
  background: color-mix(in srgb, var(--c-brand, #6366f1) 6%, var(--c-surface, #ffffff));
}
footer.page-links .pl-grid .pl-ico {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; margin-bottom: 0.35rem; border-radius: var(--r-round, 50%);
  font-size: 1.2rem; line-height: 1; color: #1f2937;
  background: radial-gradient(circle at 30% 25%, #ffffff, #eef1f5 45%, #c9d1da 100%);
  border: 2px solid #9aa5b2; box-shadow: 0 0 0 3px rgba(201, 209, 218, 0.4), inset 0 1px 0 #fff, 0 4px 10px rgba(0, 0, 0, 0.18);
}
footer.page-links .pl-grid strong { font-size: 0.98rem; font-weight: 700; color: var(--c-text, #0f172a); }
footer.page-links .pl-grid .pl-desc { font-size: 0.82rem; line-height: 1.5; color: var(--c-text-muted, #64748b); }
footer.page-links .pl-grid .pl-go {
  position: absolute; left: 1.1rem; bottom: 0.85rem;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-brand, #6366f1); transition: transform 0.2s ease;
}
footer.page-links .pl-grid a:hover .pl-go { transform: translateX(3px); }
@media (max-width: 900px) {
  footer.page-links ul.pl-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.6rem; }
  footer.page-links .pl-grid a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 0.85rem; row-gap: 0.1rem; align-items: center; padding: 0.8rem 1rem; }
  footer.page-links .pl-grid .pl-ico { grid-row: 1 / span 2; margin: 0; width: 40px; height: 40px; }
  footer.page-links .pl-grid strong { grid-column: 2; }
  footer.page-links .pl-grid .pl-desc { grid-column: 2; }
  footer.page-links .pl-grid .pl-go { position: static; grid-column: 3; grid-row: 1 / span 2; }
}
@media (prefers-reduced-motion: reduce) { footer.page-links .pl-grid a, footer.page-links .pl-grid .pl-go { transition: none; } footer.page-links .pl-grid a:hover { transform: none; } }

footer.page-links .social-footer-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.5rem 1.5rem; padding: 1.15rem 1.5rem 1.35rem;
  border-top: 1px solid var(--c-border); font-size: 0.875rem;
}
footer.page-links .site-poweredby { margin: 0; display: flex; align-items: center; gap: 0.35rem; }
footer.page-links .site-poweredby-logo { width: 32px; height: 32px; object-fit: contain; display: block; flex: none; }
/* The link wraps the mark AND the words, so it is the flex row now. */
footer.page-links .site-poweredby-link { display: inline-flex; flex-direction: row; align-items: center; gap: 0.35rem; text-decoration: none; color: inherit; }
footer.page-links .social-footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem; }
footer.page-links .social-footer-copy { color: var(--c-text-dim); }
footer.page-links .social-footer-bar a { color: var(--c-text-dim); text-decoration: none; }
footer.page-links .social-footer-bar a:hover { color: var(--c-brand); text-decoration: underline; }

/* ⚠️ Scope every selector to the header. This CSS is served in
   /theme.css and reaches every page, so a bare a { } restyles the site. */
/* ⚠️ padding: 0 closes the same leak the site header's .sc-header does --
   see the long note there. style.css's bare header { padding: 1rem 1.5rem }
   is for the app's chrome and reaches every <header> on the page,
   including this one; the built-in bar it copies is a DIV and never had
   it. The inner box owns the padding, and only the inner box. */
header.soc-header { position: sticky; top: 0; z-index: 100; padding: 0; border-bottom: 0; }
/* ⚠️ THE SITE HEADER'S BOX, to the number: 1120px wide with 1.25rem of
   side padding, where this was 1280/1.5rem. Two bars on one site that
   start their brand at different distances from the edge read as two
   sites, and the logo jumps sideways as you cross between them. The
   VERTICAL padding was already 0.85rem on both. */
header.soc-header .soc-inner {
  margin: 0 2%; padding: 0.6rem 1.25rem;
  display: flex; align-items: center; gap: 1rem;
}
/* ⚠️ font-weight 900 and the 34px ROUND logo, both taken from
   .info-topbar-logo. The roundness is most of why the built-in bar reads
   as a social header rather than a corporate one. */
header.soc-header .soc-brand {
  display: inline-flex; align-items: center; gap: 0.6rem;
  text-decoration: none; color: inherit;
  font-size: 1.3rem; font-weight: 900; letter-spacing: -0.01em;
}
/* ⚠⚠ 48px AND 1.3rem ARE THE SITE HEADER'S NUMBERS, NOT THIS BAR'S OLD
   ONES. It drew a 34px mark beside 1.25rem text while .sc-brand drew 48px
   beside 1.02rem -- two headers on one site, neither matching the other,
   and the marketing one setting the expectation a reader arrives with.
   Both are 48px and 1.3rem now: the shared size, and bigger than either
   was.

   ⚠️ THE ROUNDNESS STAYS. 50% is not a size and it is most of why this
   bar reads as a social header rather than a corporate one -- the note on
   these templates says so. What was asked for was the SIZE. */
header.soc-header .soc-logo { width: 40px; height: 40px; border-radius: 50%; display: block; }
/* ⚠️ THE NAV TAKES THE SLACK (flex: 1) and centres inside it, so the
   brand sits left and the actions sit right however long the site name
   is. justify-content: space-between on the parent cannot do this -- it
   centres the nav only when the two outer blocks happen to match. */
header.soc-header .soc-nav {
  display: flex; align-items: center; gap: 0.25rem;
  flex: 1; justify-content: center;
}
header.soc-header .soc-nav a {
  color: var(--c-chrome-text, #cbd5e1); text-decoration: none;
  font-size: 0.85rem; font-weight: 600; white-space: nowrap;
  padding: 0.35rem 0.75rem; border-radius: 999px;
  transition: background 0.15s, color 0.15s;
}
header.soc-header .soc-nav a:hover {
  color: var(--c-on-accent, #ffffff);
  background: color-mix(in srgb, var(--c-highlight, #ffffff) 10%, transparent);
}
/* ⚠⚠ margin: 0 AND flex-wrap ARE NOT REDUNDANT -- THEY ARE A FENCE.
   style.css has carried its own .soc-actions since long before these
   templates existed; it belongs to the admin social-login panel:

     .soc-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.6rem; }

   This rule out-specifies it on the three properties it DECLARES, and on
   nothing else -- so margin-top: 0.6rem landed on the header's action
   group and pushed Log in and Sign up 10px below the centre line of the
   bar, on every social page, from a stylesheet about OAuth settings.
   Declaring the two leftovers is what closes it.

   ⚠️ The collision is the class NAME, and renaming is not the fix:
   these names are in every saved snapshot in every install's
   global_settings, and a rename would restyle none of them. */
header.soc-header .soc-actions {
  display: flex; align-items: center; gap: 1rem;
  margin: 0; flex-wrap: nowrap;
}
/* ⚠️⚠️ THE HALVES SHIP hidden AND A CLASS RULE OUT-SPECIFIES IT. The
   hidden attribute is display:none at specificity (0,1,0) in the UA
   sheet, so any rule here that sets display on these links would reveal
   BOTH halves at once -- Log in and Open Panel side by side -- until the
   script runs, and permanently if it never does. None of them set display
   today; this makes that safe to stop checking. */
header.soc-header [hidden] { display: none !important; }
header.soc-header .soc-actions a {
  color: var(--c-chrome-dim, #94a3b8); text-decoration: none;
  font-size: 0.875rem; font-weight: 600; white-space: nowrap;
}
header.soc-header .soc-actions a:hover { color: var(--c-on-accent, #ffffff); }
/* ⚠⚠ .soc-actions a.soc-cta, NOT .soc-cta -- AND THAT IS THE WHOLE
   RULE, not a tidy-up. Specificity, counted:

     header.soc-header .soc-actions a     (0,2,2)   <- the plain links
     header.soc-header .soc-cta           (0,2,1)   <- what this was

   Two classes and TWO elements beats two classes and one, so the nav
   colour above won and the Sign up button rendered its label in
   --c-chrome-dim -- a pale slate meant for quiet text on dark chrome --
   on a brand-filled pill. On sensorium.events that is #94a3b8 on #059669:
   a contrast ratio of 1.47:1, which is not "hard to read", it is
   invisible. Josh: "its like dark with an overlay cant read the text".

   The comment that used to sit here worried about the HOVER case and
   missed that the resting state had the same defect for the same reason.

   ⚠️ The site header templates already do it this way -- .sc-nav
   a.sc-cta -- and the built-in bar reaches for !important instead.
   Matching the site header is the version that does not need one. */
header.soc-header .soc-actions a.soc-cta {
  background: var(--c-brand, #6366f1); color: var(--c-on-accent, #ffffff);
  padding: 0.4rem 1rem; border-radius: 0.5rem; font-weight: 600;
}
header.soc-header .soc-actions a.soc-cta:hover {
  background: var(--c-brand-strong, #4f46e5); color: var(--c-on-accent, #ffffff);
}
/* ⚠️⚠️ THE PHONE BAR IS THE BUILT-IN ONE'S, RULE FOR RULE.
   These templates are .info-topbar written out, and on a DESKTOP they
   were -- but the phone half had been designed separately and was three
   things worse than the bar it replaces:

     the site NAME vanished under 480px      (the one thing on a bar that
                                              says whose site this is)
     LOG IN vanished at 860px                (a returning reader had
                                              nowhere to go but Sign up)
     the panel was a floating white card     (on a dark chrome bar)

   So switching a site onto a template made its phone header worse than
   the one it started with, which is the opposite of what a starting
   point is for. This is style.css's .info-topbar phone block with the
   class names changed, and it is meant to stay that way. */
header.soc-header .soc-menu { display: none; }
header.soc-header .soc-burger {
  display: block; width: 20px; height: 2px; border-radius: 2px;
  background: currentColor; position: relative;
}
header.soc-header .soc-burger::before,
header.soc-header .soc-burger::after {
  content: ""; position: absolute; left: 0;
  width: 20px; height: 2px; border-radius: 2px; background: currentColor;
}
header.soc-header .soc-burger::before { top: -6px; }
header.soc-header .soc-burger::after { top: 6px; }
/* Open: the outer bars cross and the middle one goes. */
header.soc-header .soc-menu[open] .soc-burger { background: transparent; }
header.soc-header .soc-menu[open] .soc-burger::before { top: 0; transform: rotate(45deg); }
header.soc-header .soc-menu[open] .soc-burger::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 860px) {
  header.soc-header .soc-inner { flex-wrap: wrap; row-gap: 0.5rem; padding: 0.6rem 1rem; }
  /* ⚠️ The name STAYS and is shrunk instead. A white-label name can be
     three words; shrinking it is what buys the burger its corner without
     hiding whose site this is. */
  header.soc-header .soc-brand { font-size: 1.05rem; }
  /* ⚠⚠ AND THIS IS WHY IT IS margin-left, NOT THE BAR'S justify-content.
     .info-topbar carries justify-content: space-between and .soc-inner
     does not -- it relies on .soc-nav's flex: 1 to push the right-hand
     group over, and that nav is display: none here. So the burger sat
     against the brand instead of the corner, on the templates only. */
  header.soc-header .soc-menu { display: block; margin-left: auto; }
  header.soc-header .soc-menu > summary {
    list-style: none; cursor: pointer; width: 2.4rem; height: 2.4rem;
    display: flex; align-items: center; justify-content: center;
    color: var(--c-chrome-text, #cbd5e1);
    border: 1px solid color-mix(in srgb, currentColor 26%, transparent);
    border-radius: 0.6rem;
  }
  header.soc-header .soc-menu > summary::-webkit-details-marker { display: none; }
  header.soc-header .soc-menu > summary::marker { content: ""; }
  header.soc-header .soc-menu > summary:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

  header.soc-header .soc-nav, header.soc-header .soc-actions { display: none; }
  /* ⚠️ flex: 1 0 100% and not just width: 100%: .soc-nav already
     carries flex: 1, whose basis is 0 -- it would share the brand's
     line rather than forcing its own. */
  header.soc-header .soc-menu[open] ~ .soc-nav,
  header.soc-header .soc-menu[open] ~ .soc-actions {
    display: flex; flex: 1 0 100%; flex-direction: column;
    align-items: stretch; justify-content: flex-start; gap: 0.15rem;
  }
  /* ⚠️ NOTHING HERE SETS display ON THE LINKS THEMSELVES. Half of
     .soc-actions ships with the hidden attribute and socialTopbar.js
     reveals the right half; a display rule on the anchors would
     out-specify the UA's [hidden] and put Log in and Open Panel on
     screen together until the script ran, and for ever if it never did. */
  header.soc-header .soc-menu[open] ~ .soc-nav a,
  header.soc-header .soc-menu[open] ~ .soc-actions a {
    padding: 0.6rem 0.7rem; border-radius: 0.5rem;
    font-size: 0.95rem; text-align: left;
  }
  header.soc-header .soc-menu[open] ~ .soc-actions {
    border-top: 1px solid color-mix(in srgb, var(--c-chrome-text, #cbd5e1) 18%, transparent);
    padding-top: 0.5rem; margin-top: 0.25rem;
  }
  header.soc-header .soc-menu[open] ~ .soc-actions .soc-cta { text-align: center; }
}
header.soc-header .soc-logo-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) header.soc-header .soc-logo-light { display: none; }
  :root:not([data-theme="light"]) header.soc-header .soc-logo-dark { display: block; }
}
:root[data-theme="dark"] header.soc-header .soc-logo-light { display: none; }
:root[data-theme="dark"] header.soc-header .soc-logo-dark { display: block; }

/* The same three-stop gradient .info-topbar uses, and the same fallback
   order -- the flat colour first for anything that cannot parse it. */
header.soc-header.soc-h-bar {
  background: var(--c-chrome, #17121f);
  background: linear-gradient(135deg,
    var(--c-chrome, #17121f) 0%,
    var(--c-chrome-2, #241a3d) 55%,
    var(--c-chrome-3, #1a1329) 100%);
  color: var(--c-on-accent, #ffffff);
}

:root { --social-cover-image: url("/api/cloud/file/95?w=1600"); }
body[data-social-page] .social-cover,
body[data-social-page] .profile-cover {
  background-image: var(--social-cover-image);
  background-size: cover;
  background-position: center;
}
/* ⚠️ A SCRIM, because the cover carries white text -- the page title,
   its standfirst and the pill actions. .social-cover::after already
   exists as a pair of soft radial highlights tuned for the gradient; over
   an unknown photograph those are not enough to read through, and the
   admin chooses the photograph long after this was written. */
body[data-social-page] .social-cover::after {
  background: linear-gradient(to bottom,
    color-mix(in srgb, #000 30%, transparent),
    color-mix(in srgb, #000 60%, transparent));
}

header.soc-header { padding: 0; border-bottom: 0; }
.sc-header-inner { box-sizing: border-box; min-height: 64px; }
header.soc-header .soc-inner { box-sizing: border-box; min-height: 65px; }

.sc-header { position: sticky; top: 0; }
body[data-social-header-custom] > [data-social-header-custom-wrap] { display: contents; }
header.soc-header, .info-topbar { position: sticky; top: 0; }
/* ── Accent border (gold) ──────────────────────────────────── */
:root {
  --ab-hi: #fff8e6; --ab-1: #f6e3ab; --ab-2: #e8c060; --ab-3: #c8a030; --ab-4: #8a6614; --ab-ink: #5c4410;
  --ab-w: 1;
}