@charset "UTF-8";
:root {
  /* ════════════════════════════════════════
      SYSTEM
   ════════════════════════════════════════ */
  /* Font Families
   ================================== */
  --font-sans-base:
  	system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
  	Oxygen, Ubuntu, Cantarell, "Open Sans", sans-serif;
  /* Font Weights
   ================================== */
  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-black: 900;
  /* Letter Spacing
   ================================== */
  --tracking-tight: -0.5px;
  --tracking-normal: 0;
  --tracking-loose: 0.15px;
  --tracking-wide: 0.5px;
  --tracking-wider: 1px;
  --tracking-widest: 2px;
  /* Underlines
   ================================== */
  --underline-thickness: 0.075em;
  --underline-thickness-thick: 0.125em;
  --underline-skip: none;
  /* Line Heights
   ================================== */
  --leading-micro: 0.85;
  --leading-flat: 1;
  --leading-tight: 1.1;
  --leading-fine: 1.2;
  --leading-medium: 1.3;
  --leading-standard: 1.5;
  --leading-loose: 1.7;
  /* Font Sizes
   ================================== */
  /* @link https://utopia.fyi/type/calculator?c=400,16,1.2,1440,20,1.2,9,3,&s=0.75,1.5,s-l&g=s,l,xl,12 */
  /* Step -3: 9.2593px → 11.5741px */
  --font-size--3: clamp(0.5787rem, 0.5231rem + 0.2226vw, 0.7234rem);
  /* Step -2: 11.1111px → 13.8889px */
  --font-size--2: clamp(0.6944rem, 0.6277rem + 0.2671vw, 0.8681rem);
  /* Step -1: 13.3333px → 16.6667px */
  --font-size--1: clamp(0.8333rem, 0.7532rem + 0.3205vw, 1.0417rem);
  /* Step 0: 16px → 20px */
  --font-size-0: clamp(1rem, 0.9038rem + 0.3846vw, 1.25rem);
  /* Step 1: 19.2px → 24px */
  --font-size-1: clamp(1.2rem, 1.0846rem + 0.4615vw, 1.5rem);
  /* Step 2: 23.04px → 28.8px */
  --font-size-2: clamp(1.44rem, 1.3015rem + 0.5538vw, 1.8rem);
  /* Step 3: 27.648px → 34.56px */
  --font-size-3: clamp(1.728rem, 1.5618rem + 0.6646vw, 2.16rem);
  /* Step 4: 33.1776px → 41.472px */
  --font-size-4: clamp(2.0736rem, 1.8742rem + 0.7975vw, 2.592rem);
  /* Step 5: 39.8131px → 49.7664px */
  --font-size-5: clamp(2.4883rem, 2.2491rem + 0.957vw, 3.1104rem);
  /* Step 6: 47.7757px → 59.7197px */
  --font-size-6: clamp(2.986rem, 2.6989rem + 1.1485vw, 3.7325rem);
  /* Step 7: 57.3309px → 71.6636px */
  --font-size-7: clamp(3.5832rem, 3.2386rem + 1.3781vw, 4.479rem);
  /* Step 8: 68.7971px → 85.9963px */
  --font-size-8: clamp(4.2998rem, 3.8864rem + 1.6538vw, 5.3748rem);
  /* Step 9: 82.5565px → 103.1956px */
  --font-size-9: clamp(5.1598rem, 4.6636rem + 1.9845vw, 6.4497rem);
  /* Spacing
   ================================== */
  /* @link https://utopia.fyi/space/calculator?c=400,16,1.2,1440,20,1.2,8,2,&s=0.5|0.25,1.5|2|2.5|3|4|6,s-xl|m-xl&g=s,l,xl,12 */
  /* Space 2xs: 4px → 5px */
  --space-2xs: clamp(0.25rem, 0.226rem + 0.0962vw, 0.3125rem);
  /* Space xs: 8px → 10px */
  --space-xs: clamp(0.5rem, 0.4519rem + 0.1923vw, 0.625rem);
  /* Space s: 16px → 20px */
  --space-s: clamp(1rem, 0.9038rem + 0.3846vw, 1.25rem);
  /* Space m: 24px → 30px */
  --space-m: clamp(1.5rem, 1.3558rem + 0.5769vw, 1.875rem);
  /* Space l: 32px → 40px */
  --space-l: clamp(2rem, 1.8077rem + 0.7692vw, 2.5rem);
  /* Space xl: 40px → 50px */
  --space-xl: clamp(2.5rem, 2.2596rem + 0.9615vw, 3.125rem);
  /* Space 2xl: 48px → 60px */
  --space-2xl: clamp(3rem, 2.7115rem + 1.1538vw, 3.75rem);
  /* Space 3xl: 64px → 80px */
  --space-3xl: clamp(4rem, 3.6154rem + 1.5385vw, 5rem);
  /* Space 4xl: 96px → 120px */
  --space-4xl: clamp(6rem, 5.4231rem + 2.3077vw, 7.5rem);
  /* One-up pairs */
  /* Space 2xs-xs: 4px → 10px */
  --space-2xs-xs: clamp(0.25rem, 0.1058rem + 0.5769vw, 0.625rem);
  /* Space xs-s: 8px → 20px */
  --space-xs-s: clamp(0.5rem, 0.2115rem + 1.1538vw, 1.25rem);
  /* Space s-m: 16px → 30px */
  --space-s-m: clamp(1rem, 0.6635rem + 1.3462vw, 1.875rem);
  /* Space m-l: 24px → 40px */
  --space-m-l: clamp(1.5rem, 1.1154rem + 1.5385vw, 2.5rem);
  /* Space l-xl: 32px → 50px */
  --space-l-xl: clamp(2rem, 1.5673rem + 1.7308vw, 3.125rem);
  /* Space xl-2xl: 40px → 60px */
  --space-xl-2xl: clamp(2.5rem, 2.0192rem + 1.9231vw, 3.75rem);
  /* Space 2xl-3xl: 48px → 80px */
  --space-2xl-3xl: clamp(3rem, 2.2308rem + 3.0769vw, 5rem);
  /* Space 3xl-4xl: 64px → 120px */
  --space-3xl-4xl: clamp(4rem, 2.6538rem + 5.3846vw, 7.5rem);
  /* Custom pairs */
  /* Space s-xl: 16px → 50px */
  --space-s-xl: clamp(1rem, 0.1827rem + 3.2692vw, 3.125rem);
  /* Space m-xl: 24px → 50px */
  --space-m-xl: clamp(1.5rem, 0.875rem + 2.5vw, 3.125rem);
  /* Space xl-3xl: 40px → 80px */
  --space-xl-3xl: clamp(2.5rem, 1.5385rem + 3.8462vw, 5rem);
  /* Colors
   ================================== */
  --color-foreground: var(--color-prussian-blue);
  --color-background: var(--color-old-lace);
  /* Color Mixes
   ================================== */
  --color-foreground-10: color-mix(
  	in srgb,
  	var(--color-foreground) 10%,
  	transparent
  );
  --color-foreground-80: color-mix(
  	in srgb,
  	var(--color-foreground) 80%,
  	transparent
  );
  --color-foreground-90: color-mix(
  	in srgb,
  	var(--color-foreground) 90%,
  	transparent
  );
  --color-background-80: color-mix(
  	in srgb,
  	var(--color-background) 80%,
  	black
  );
  --color-background-90: color-mix(
  	in srgb,
  	var(--color-background) 90%,
  	black
  );
  --color-background-tint: color-mix(
  	in srgb,
  	var(--color-background) 10%,
  	transparent
  );
  --color-background-tint-strong: color-mix(
  	in srgb,
  	var(--color-background) 20%,
  	transparent
  );
  /* Durations
   ================================== */
  --duration-fast: 200ms;
  --duration-normal: 250ms;
  --duration-slow: 300ms;
  --duration-reveal: 700ms;
  /* Motion
   ================================== */
  --ease-in-sine: cubic-bezier(0.12, 0, 0.39, 0);
  --ease-out-sine: cubic-bezier(0.61, 1, 0.88, 1);
  --ease-in-out-sine: cubic-bezier(0.37, 0, 0.63, 1);
  --ease-in-out-quad: cubic-bezier(0.45, 0, 0.55, 1);
  --ease-in-cubic: cubic-bezier(0.32, 0, 0.67, 0);
  --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1);
  /* Shadows
   ================================== */
  --shadow-color: 0deg 0% 0%;
  --shadow-elevation-low:
  	0px 0.5px 0.5px hsl(var(--shadow-color) / 0.07),
  	0px 0.7px 0.7px -1.5px hsl(var(--shadow-color) / 0.06),
  	0px 1.6px 1.7px -3px hsl(var(--shadow-color) / 0.06);
  --shadow-elevation-medium:
  	0px 0.5px 0.5px hsl(var(--shadow-color) / 0.08),
  	0px 1.3px 1.4px -1px hsl(var(--shadow-color) / 0.07),
  	0px 3.2px 3.4px -2px hsl(var(--shadow-color) / 0.06),
  	0px 8.1px 8.5px -3px hsl(var(--shadow-color) / 0.06);
  --shadow-elevation-high:
  	0px 0.5px 0.5px hsl(var(--shadow-color) / 0.08),
  	0px 1.9px 2px -0.5px hsl(var(--shadow-color) / 0.08),
  	0px 3.6px 3.8px -1px hsl(var(--shadow-color) / 0.07),
  	0px 6.5px 6.8px -1.5px hsl(var(--shadow-color) / 0.07),
  	0px 11.3px 11.9px -2px hsl(var(--shadow-color) / 0.07),
  	0px 19px 20px -2.5px hsl(var(--shadow-color) / 0.06),
  	0.1px 30.3px 31.8px -3px hsl(var(--shadow-color) / 0.06);
  /* Component Defaults
   ================================== */
  --marquee-item-size: 150px;
  --marquee-duration: 8s;
  --eyebrow-height: 40px;
  /*
   The nameplate lockup is sized in rem, so it steps up with the root font size
   on ultra screens. The bar it sits in has to grow with it -- pinned at 50px the
   symbol runs into the header's bottom rule past $bp-ultra-lg -- so the row is
   measured from the symbol itself and keeps a --space-2xs gutter above and below.
   */
  --nameplate-size: clamp(0.8746rem, 0.7452rem + 0.5267vw, 1.2193rem);
  --nameplate-symbol-height: calc(var(--nameplate-size) * 1.794);
  --nameplate-row-height: max(
  	50px,
  	calc(var(--nameplate-symbol-height) + var(--space-2xs) * 2)
  );
  /* Z-index
   ================================== */
  --z-base: 0;
  --z-raised: 1;
  --z-high: 2;
  --z-top: 3;
  --z-panel: 10;
  --z-menu: 15;
  --z-search: 15;
  --z-header: 18;
  --z-eyebrow: 19;
  /* Page row
   ================================== */
  --row-max-width: 86.25rem;
  --row-gutter: clamp(1.25rem, 1.0154rem + 0.9551vw, 1.875rem);
  --row-split-gap: clamp(1.25rem, 0.2885rem + 3.8462vw, 3.75rem);
  --row-split-fold: 56.25rem;
  /* Page content
   Interior page bodies sit inside the header row: 1320px at 60px gutters
   against the row's 1380px at 30px.
   ================================== */
  --content-max-width: 82.5rem;
  --content-gutter: clamp(1.25rem, 0.2885rem + 3.8462vw, 3.75rem);
  /* Other
   ================================== */
  --flow-space: var(--space-s);
  --radius-s: 4px;
  --radius: 8px;
  --radius-m: 12px;
  --radius-l: 20px;
  --gutter: var(--space-s-xl);
  --admin-bar-height: 0px;
  --site-header-height: 60px;
  --cover-height: calc(
  	100svh - var(--site-header-height) - var(--admin-bar-height)
  );
  --wrapper-max-width: 1920px;
}
@media (width >= 1045px) {
  :root {
    --site-header-height: calc(
    	var(--eyebrow-height) + var(--nameplate-row-height)
    );
  }
}
@media (width >= 1650px) {
  :root {
    font-size: 18px;
  }
}
@media (width >= 1900px) {
  :root {
    font-size: 20px;
  }
}
@media (width >= 2500px) {
  :root {
    font-size: 22px;
  }
}
@media (width >= 3200px) {
  :root {
    font-size: 24px;
  }
}
:root {
  /* ════════════════════════════════════════
      BRAND
   ════════════════════════════════════════ */
  /* Font Families
   ================================== */
  --font-sans: neue-haas-grotesk-text, var(--font-sans-base);
  --font-display: ivyora-display, serif;
  --font-serif: ivyora-text, serif;
  /* Color Palette
   ================================== */
  --color-black: #000000;
  --color-prussian-blue: #00162e;
  --color-oxford-navy: #003564;
  --color-golden-orange: #e69400;
  --color-wheat: #e0cb9e;
  --color-bone: #dcd4c3;
  --color-old-lace: #f6efe2;
  --color-warm-gray: #2a2a28;
  /* Semantic Colors
   ================================== */
  --color-accent: var(--color-golden-orange);
  --color-stroke: var(--color-foreground-10);
  /* Measures
   ================================== */
  --gutter-cte: 15px;
}
@media (width >= 600px) {
  :root {
    --gutter-cte: 30px;
  }
}
@media (width >= 1150px) {
  :root {
    --gutter-cte: 50px;
  }
}

/* ════════════════════════════════════════
     COLOR THEMES
  ════════════════════════════════════════ */
[data-color-theme=navy] {
  --color-foreground: var(--color-old-lace);
  --color-background: var(--color-oxford-navy);
}

[data-color-theme=beige] {
  --color-foreground: var(--color-prussian-blue);
  --color-background: var(--color-old-lace);
}

[data-color-theme=bone] {
  --color-foreground: var(--color-prussian-blue);
  --color-background: var(--color-bone);
}

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

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin-block: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role=list],
ol[role=list] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-block-size: 100vh;
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1,
h2,
h3,
h4,
button,
input,
label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1,
h2,
h3,
h4 {
  text-wrap: pretty;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
img,
picture {
  max-inline-size: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-block-size: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
body {
  -webkit-font-smoothing: antialiased;
  background: var(--color-background);
  color: var(--color-foreground);
  font-size: var(--font-size-0);
  font-family: var(--font-sans);
  line-height: var(--leading-standard);
  letter-spacing: -0.01em;
  font-size-adjust: from-font;
  margin: 0;
  position: relative;
}

body.admin-bar {
  --admin-bar-height: 32px;
  padding-block-start: var(--admin-bar-height);
}
@media (width < 783px) {
  body.admin-bar {
    --admin-bar-height: 46px;
  }
}

.site-container {
  display: flex;
  flex-direction: column;
  min-block-size: calc(100svh - var(--admin-bar-height));
}

.site-main {
  flex-grow: 1;
  padding-block: var(--site-header-height) 0;
}
.site-main[data-header=overlap] {
  padding-block-start: 0;
}

:is(h1, h2, h3) {
  font-family: var(--font-display);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  text-wrap: balance;
}

:is(h4, h5, h6) {
  font-family: var(--font-sans);
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-normal);
  line-height: var(--leading-fine);
  text-wrap: pretty;
}

h1 {
  font-size: var(--font-size-6);
}

h2 {
  font-size: var(--font-size-3);
  line-height: var(--leading-flat);
}

h3 {
  font-size: var(--font-size-1);
}

h4 {
  font-size: var(--font-size-1);
}

:is(h5, h6) {
  font-size: var(--font-size-0);
}

p {
  text-wrap: pretty;
}

:is(b, strong) {
  font-weight: var(--font-semibold);
}

small {
  color: var(--color-foreground-80);
  font-size: var(--font-size--1);
}

q {
  font-style: italic;
}

ul,
ol {
  margin: 0;
  padding: 0;
  padding-inline-start: 1.7ch;
}
ul[data-style=minimal],
ol[data-style=minimal] {
  list-style-type: none;
}

ul:not([class]) {
  list-style-type: disc;
}

ul:not([class]) > li,
ol:not([class]) > li {
  padding-inline-start: var(--space-xs);
}
ul:not([class]) > li:not(:first-child),
ol:not([class]) > li:not(:first-child) {
  margin-block-start: var(--space-xs);
}

ol ::marker {
  font-size: 1em;
  font-weight: var(--font-bold);
}

[role=list][class],
[role=tablist][class] {
  margin-block: 0;
  padding: 0;
}

address {
  font-style: normal;
}

dt {
  font-size: var(--font-size-1);
  font-weight: var(--font-medium);
}

dd + dt {
  margin-block-start: var(--space-s);
}

dd {
  margin-inline-start: 1.5ch;
}

blockquote {
  border-inline-start: 4px solid var(--color-accent);
  margin-inline: 0;
  padding-inline-start: var(--space-s);
}

blockquote footer {
  margin-block-start: var(--space-s);
  font-size: var(--font-size--1);
}

blockquote q {
  font-style: normal;
}

:is(video, iframe[src*=youtube], iframe[src*=vimeo]) {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 16/9;
}

img {
  display: block;
  block-size: auto;
  max-inline-size: 100%;
  object-fit: cover;
}

figure {
  margin-inline: 0;
}

figcaption {
  color: var(--color-foreground-80);
  padding-block-start: var(--space-xs);
  font-size: var(--font-size--1);
}

table {
  border-collapse: separate;
  border-spacing: 0;
  inline-size: 100%;
}

caption {
  caption-side: bottom;
  margin-block-start: var(--space-s);
}

:is(th, td) {
  padding: var(--space-xs);
  text-align: start;
  vertical-align: middle;
}

th {
  background: var(--color-oxford-navy);
  color: var(--color-old-lace);
  font-family: var(--font-display);
  font-size: var(--font-size--1);
  font-weight: var(--font-medium);
  line-height: var(--leading-medium);
}

thead {
  position: sticky;
  top: 0;
}
thead th + th {
  border-inline-start: 1px solid color-mix(in srgb, var(--color-old-lace) 20%, transparent);
}

thead tr:first-child th:first-child {
  border-start-start-radius: var(--radius);
}

thead tr:first-child th:last-child {
  border-start-end-radius: var(--radius);
}

td {
  background: var(--color-background);
  border-block-end: 1px solid var(--color-stroke);
  border-inline-start: 1px solid var(--color-stroke);
  font-size: var(--font-size--1);
  line-height: var(--leading-medium);
}

td:last-child {
  border-inline-end: 1px solid var(--color-stroke);
}

a {
  color: inherit;
  text-underline-offset: 0.2ex;
  text-decoration-color: currentColor;
  text-decoration-skip-ink: var(--underline-skip);
  text-decoration-line: underline;
  text-decoration-thickness: var(--underline-thickness);
  -webkit-text-decoration-skip-ink: var(--underline-skip);
}
@supports (color: hsl(from white h s l)) {
  a {
    text-decoration-color: hsl(from var(--text-decoration-color, currentColor) h s l/0.6);
  }
}
a:hover, a:focus-visible {
  text-decoration-line: none;
}

a:not([class]) {
  color: var(--color-link, var(--color-oxford-navy));
  font-weight: var(--font-medium);
}

:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--focus-color, currentColor);
  outline-offset: var(--focus-offset, 0.2lh);
}

@supports (-moz-appearance: none) {
  :root {
    --focus-offset: 0.08em;
  }
}
:target {
  scroll-margin-block: var(--space-3xl);
}

::selection {
  background: var(--color-accent);
  color: var(--color-old-lace);
}

hr {
  border: none;
  border-block-start: 1px solid var(--color-stroke);
  margin-block: var(--flow-space, var(--space-xl));
  inline-size: 100%;
}

svg:not([class]) {
  inline-size: auto;
  block-size: 1lh;
}

svg {
  display: block;
  flex-shrink: 0;
}

svg[role=img][width][height] {
  inline-size: revert;
  block-size: revert;
  background: var(--color-bone);
  padding: var(--space-xs);
}

form > * + * {
  margin-block-start: var(--flow-space, 1rem);
}

:is(input, select, textarea) {
  accent-color: var(--color-accent);
}

:is(input:not([type=checkbox],
[type=radio],
[type=color],
[type=submit]),
select,
textarea) {
  padding: 0.3em 0.8em;
  border-radius: var(--radius-s);
  border: 1px solid var(--color-bone);
  background: var(--color-background);
  color: var(--color-foreground);
  font-size: min(var(--font-size-0), 18px);
  inline-size: 100%;
}
:is(input:not([type=checkbox],
[type=radio],
[type=color],
[type=submit]),
select,
textarea)::placeholder {
  color: var(--color-foreground-90);
  opacity: 1;
}

select {
  appearance: none;
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="%2300162e"%3E%3Cpath d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-position: right var(--space-xs) center;
  background-size: 0.8em;
  padding-inline-end: 2em;
}

input[type=search]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  block-size: 20px;
  inline-size: 20px;
  margin-inline: 0.3em;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MiIgaGVpZ2h0PSI1MiIgZmlsbD0iIzAwMDAwMCIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0xNjUuNjYsMTAxLjY2LDEzOS4zMSwxMjhsMjYuMzUsMjYuMzRhOCw4LDAsMCwxLTExLjMyLDExLjMyTDEyOCwxMzkuMzFsLTI2LjM0LDI2LjM1YTgsOCwwLDAsMS0xMS4zMi0xMS4zMkwxMTYuNjksMTI4LDkwLjM0LDEwMS42NmE4LDgsMCwwLDEsMTEuMzItMTEuMzJMMTI4LDExNi42OWwyNi4zNC0yNi4zNWE4LDgsMCwwLDEsMTEuMzIsMTEuMzJaTTIzMiwxMjhBMTA0LDEwNCwwLDEsMSwxMjgsMjQsMTA0LjExLDEwNC4xMSwwLDAsMSwyMzIsMTI4Wm0tMTYsMGE4OCw4OCwwLDEsMC04OCw4OEE4OC4xLDg4LjEsMCwwLDAsMjE2LDEyOFoiPjwvcGF0aD48L3N2Zz4=");
  background-size: 20px 20px;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}

button {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-align: inherit;
}

button:disabled {
  cursor: not-allowed;
}

label {
  line-height: var(--leading-fine);
  font-weight: var(--font-medium);
}

label::after {
  content: "\a";
  white-space: pre;
}

label:has(input) {
  display: flex;
  align-items: baseline;
  gap: var(--space-s);
  font-weight: var(--font-regular);
}

label:has(input) + label:has(input) {
  --flow-space: var(--space-s-m);
}

label:has(input) input {
  transform: translateY(-0.1ex);
}

input:disabled {
  background: var(--color-bone);
}

input:disabled,
label input:disabled + * {
  cursor: not-allowed;
}

fieldset {
  border: 1px solid var(--color-stroke);
  padding: var(--space-s);
}

legend {
  font-weight: var(--font-medium);
  padding-inline: var(--space-xs);
}

details[class] {
  border-block: 1px solid var(--color-stroke);
}
@media (prefers-reduced-motion: no-preference) {
  details[class] {
    interpolate-size: allow-keywords;
  }
}
details[class] summary {
  --icon-height: 1.1em;
  --icon-width: 1.1em;
  cursor: pointer;
  list-style: none;
  padding-block: var(--space-s);
  padding-inline-end: calc(var(--icon-width) * 2);
  position: relative;
}
details[class] summary .icon {
  content: "";
  color: var(--color-accent);
  inset: calc(50% - var(--icon-height) / 2) 1rem auto auto;
  position: absolute;
  transition: transform var(--duration-normal);
}
details[class]::details-content {
  opacity: 0;
  block-size: 0;
  overflow-y: clip;
  transition: content-visibility var(--duration-slow) allow-discrete, opacity var(--duration-slow), block-size var(--duration-slow);
  transition-timing-function: var(--ease-in-sine);
}
details[class][open] {
  padding-block-end: var(--space-m);
}
details[class][open]::details-content {
  opacity: 1;
  block-size: auto;
  transition-timing-function: var(--ease-out-sine);
}
details[class][open] summary .icon {
  transform: rotate(180deg);
}
details[class] + details {
  border-block-start: none;
}

.box {
  padding: var(--box-padding, 1.5rem);
  border: var(--border-thin, 1px) solid;
  color: var(--color-background, #fff);
  background-color: var(--color-foreground, #000);
}
.box * {
  color: inherit;
}
.box--invert {
  color: var(--color-foreground, #000);
  background-color: var(--color-background, #fff);
}

.center {
  box-sizing: content-box;
  margin-inline: auto;
  max-inline-size: var(--measure, 60ch);
}

.clamp {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--clamp-lines, 3);
  display: -webkit-box;
  line-clamp: var(--clamp-lines, 3);
  overflow: hidden;
  text-overflow: ellipsis;
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter, 1.5rem);
  justify-content: var(--cluster-horizontal-alignment, flex-start);
  align-items: var(--cluster-vertical-alignment, center);
}

.cover {
  display: flex;
  flex-direction: column;
  min-block-size: calc(100dvh - var(--header-height, 0px));
}
.cover > .cover__inner {
  margin-block: auto;
}
.cover > .cover__inner--full-height {
  flex-grow: 1;
}

.flow > * + * {
  margin-block-start: var(--flow-space, 1em);
}

.flow[data-recursive] * + * {
  margin-block-start: var(--flow-space, 1em);
}

/*
A list marked role="list" is caught by the [role="list"][class] reset in
global, which is more specific than the rule above and cancels the margin. This
puts it back for a list that is not the first thing in the flow.
*/
.flow > * + [role=list][class] {
  margin-block-start: var(--flow-space, 1em);
}

.frame {
  --n: 16;
  --d: 9;
  aspect-ratio: var(--n)/var(--d);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.frame > img,
.frame > video {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-placement, auto-fill), minmax(var(--grid-min-item-size, 16rem), 1fr));
  gap: var(--gutter, 2rem);
}
.grid--50-50 {
  --grid-placement: auto-fit;
  --grid-min-item-size: clamp(16rem, 50vw, 33rem);
}
.grid--thirds {
  --grid-placement: auto-fit;
  --grid-min-item-size: clamp(16rem, 33%, 20rem);
}
.grid--quarters {
  --grid-placement: auto-fit;
  --grid-min-item-size: clamp(230px, calc(25% - var(--gutter)), 1200px);
}

.icon {
  block-size: var(--icon-height, 0.75em);
  inline-size: var(--icon-width, 0.75em);
}

@supports (width: 1cap) {
  .icon {
    block-size: var(--icon-height, 1cap);
    inline-size: var(--icon-width, 1cap);
  }
}
.with-icon {
  align-items: var(--icon-vertical-alignment, baseline);
  display: inline-flex;
  line-height: var(--leading-flat, 1);
}
.with-icon--icon-after .icon {
  margin-inline-start: 0.5em;
}
.with-icon:not(.with-icon--icon-after) .icon {
  margin-inline-end: 0.5em;
}

.imposter {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
}

.imposter--contain {
  --margin: 0px;
  overflow: auto;
  max-inline-size: calc(100% - var(--margin) * 2);
  max-block-size: calc(100% - var(--margin) * 2);
}

.marquee {
  --item-size: var(--marquee-item-size);
  --duration: var(--marquee-duration);
  --n: 4;
  display: flex;
  overflow: hidden;
}
.marquee > * {
  inline-size: var(--item-size);
  offset: shape(from calc(var(--item-size) / -2) 50%, hline by calc(sibling-count() * max(100% / var(--n), var(--item-size))));
  animation: x var(--duration) linear infinite calc(-1 * sibling-index() * var(--duration) / sibling-count());
}

@keyframes x {
  to {
    offset-distance: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .marquee {
    overflow-x: auto;
  }
  .marquee > * {
    animation-name: none;
    flex-shrink: 0;
    offset-path: none;
  }
}
.pile {
  display: grid;
  grid-template-columns: 1fr;
  position: relative;
}
.pile > * {
  grid-area: 1/1;
  place-self: center;
}

.reel {
  --thumb-color: var(--color-accent, currentColor);
  --track-color: var(--color-background, #fff);
  --sb-size: 6px;
  display: flex;
  block-size: auto;
  overflow-inline: auto;
  overflow-block: hidden;
  overscroll-behavior-x: contain;
  padding-inline: var(--gutter, 1rem);
}
.reel > * {
  flex: 0 0 auto;
}
.reel > * + * {
  margin-inline-start: 1rem;
}
.reel > img {
  block-size: 100%;
  flex-basis: auto;
  inline-size: auto;
}
.reel--overflowing {
  padding-block-end: 1rem;
}
.reel .card {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  max-inline-size: 30%;
}

.repel {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: var(--repel-vertical-alignment, center);
  gap: var(--gutter, 1.5rem);
}
.repel--nowrap {
  flex-wrap: nowrap;
}

.sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter, 1rem);
}

.sidebar:not(.sidebar--rtl) > :first-child {
  flex-basis: var(--sidebar-target-width, 20rem);
  flex-grow: 1;
}

.sidebar:not(.sidebar--rtl) > :last-child {
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: var(--sidebar-content-min-width, 50%);
}

.sidebar--reversed {
  flex-direction: row-reverse;
}

.sidebar--rtl > :last-child {
  flex-basis: var(--sidebar-target-width, 20rem);
  flex-grow: 1;
}

.sidebar--rtl > :first-child {
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: var(--sidebar-content-min-width, 50%);
}

.switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter, 2rem);
  align-items: var(--switcher-vertical-alignment, flex-start);
}

.switcher > * {
  flex-grow: 1;
  flex-basis: calc((var(--switcher-target-container-width, 40rem) - 100%) * 999);
}

.switcher > :nth-child(n+3) {
  flex-basis: 100%;
}

.wrapper {
  margin-inline: auto;
  max-inline-size: calc(var(--wrapper-max-width, 1360px) + var(--gutter, 1rem) * 2);
  padding-inline: var(--gutter, 1rem);
  position: relative;
  inline-size: 100%;
}
.wrapper--full-width {
  --wrapper-max-width: 100%;
}
.wrapper--no-padding {
  padding-inline: 0;
}
.wrapper--padding-left {
  padding-inline-end: 0;
}
.wrapper--static {
  position: static;
}

/*
ACCORDION BLOCK
A run of disclosures sharing one set of hairlines. The borders and the open and
closed transition come from the details rules in global; what is set here is the
church's own type, the hairline color, and moving the marker out to the edge of
the column rather than insetting it.
*/
.accordion__item {
  border-color: var(--color-bone);
}

.accordion__item .accordion__summary {
  align-items: center;
  color: var(--color-foreground);
  display: flex;
  font-size: var(--font-size-1);
  font-weight: var(--font-bold);
  gap: var(--space-s);
  justify-content: space-between;
  letter-spacing: var(--tracking-normal);
  line-height: var(--leading-fine);
  padding-inline-end: 0;
}
.accordion__item .accordion__summary .icon {
  --icon-height: 0.9375rem;
  --icon-width: 0.9375rem;
  color: currentColor;
  inset: auto;
  position: static;
}

.accordion__title {
  text-wrap: pretty;
}

.accordion__item[open] {
  padding-block-end: var(--space-s);
}
.accordion__item[open] .accordion__summary .icon {
  transform: rotate(45deg);
}

.accordion__body {
  padding-block-start: var(--space-xs);
}

/*
ARTICLE BODY BLOCK
The components under an article header: prose, pull quotes, figures, video and the link cards.
*/
.article-body {
  --gutter: var(--content-gutter);
  --wrapper-max-width: var(--content-max-width);
  --region-space: var(--space-2xl-3xl);
  --article-measure: 65ch;
  --article-measure-wide: 80ch;
  --prose-measure: var(--article-measure);
  background: var(--color-background);
  color: var(--color-black);
}

.article-body .region__inner.article-body__inner {
  padding-block-start: 0;
}

.article-body__inner {
  --flow-space: var(--space-xl-2xl);
}
.article-body__inner > * {
  margin-inline: auto;
  max-inline-size: var(--article-measure);
}
.article-body__inner > .pull-quote {
  max-inline-size: var(--article-measure-wide);
}
.article-body__inner > .link-card + .link-card {
  --flow-space: var(--space-s-m);
}
.article-body__inner > * + :is(.pull-quote, .tag-list) {
  margin-block: var(--space-xl-2xl);
}

/*
ARTICLE HEADER BLOCK
The top of a long-form post: title, subtitle, byline and lead image.

The lead image is drawn in one of two arrangements, set per post:

  portrait                     landscape
  +--------+---------+         +-------------------+
  |        | title   |         |       title       |
  | image  |         |         |      byline       |
  |        | byline  |         +-------------------+
  +--------+---------+         |       image       |
                               +-------------------+

Below $bp-tablet-lg the portrait split folds to the landscape stack, so the
title is never squeezed into half a narrow screen.

The copy is centred in both, as drawn. In the portrait split the two columns
are the same height, so the title sits at the top of its column and the byline
at the bottom rather than the pair being centred between them.

At the 1440px design width the header sits on the 1320px content measure, the
same one the body and the interior page titles use.
*/
.article-header {
  --gutter: var(--content-gutter);
  --wrapper-max-width: var(--content-max-width);
  --article-header-lead: var(--space-xl-2xl);
  --article-header-tail: var(--space-2xl-3xl);
  --article-header-gap: var(--space-l);
  background: var(--color-background);
  color: var(--color-black);
}

.article-header__inner {
  display: grid;
  gap: var(--space-2xl-3xl);
  grid-template-columns: minmax(0, 1fr);
  padding-block: var(--article-header-lead) var(--article-header-tail);
}

/* Copy
================================== */
.article-header__copy {
  display: flex;
  flex-direction: column;
  gap: var(--article-header-gap);
  text-align: center;
}

.article-header__headline {
  --flow-space: var(--space-s-m);
}

.article-header__title {
  font-family: var(--font-serif);
  font-weight: var(--font-regular);
  letter-spacing: var(--tracking-normal);
  line-height: var(--leading-medium);
}

.article-header__subtitle {
  font-family: var(--font-serif);
  font-size: var(--font-size-1);
  text-wrap: pretty;
}

/* Lead image
================================== */
.article-header__media {
  --n: 3;
  --d: 2;
}

.article-header__image {
  block-size: 100%;
  inline-size: 100%;
  object-fit: cover;
  object-position: center;
}

/* Portrait split
================================== */
.article-header[data-orientation=portrait] .article-header__media {
  --n: 645;
  --d: 802;
}
@media (width >= 900px) {
  .article-header[data-orientation=portrait] .article-header__inner {
    column-gap: var(--space-s-m);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .article-header[data-orientation=portrait] .article-header__media {
    grid-column: 1;
    grid-row: 1;
  }
  .article-header[data-orientation=portrait] .article-header__copy {
    grid-column: 2;
    grid-row: 1;
    justify-content: space-between;
    padding-block: var(--space-xl-2xl);
  }
}

/* Landscape
================================== */
.article-header[data-orientation=landscape],
.article-header:not([data-orientation]) {
  --article-header-lead: var(--space-xl-3xl);
}
.article-header[data-orientation=landscape] .article-header__copy,
.article-header:not([data-orientation]) .article-header__copy {
  margin-inline: auto;
  max-inline-size: 45rem;
}

.article-header[data-orientation=landscape] {
  --article-header-gap: var(--space-3xl-4xl);
}

/* Byline
================================== */
.byline {
  font-size: var(--font-size--1);
  line-height: var(--leading-loose);
}

.byline__author {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  justify-content: center;
}

.byline__link {
  --underline-skip: auto;
  --underline-thickness: var(--underline-thickness-thick);
}
.byline__link:hover, .byline__link:focus-visible {
  text-decoration-color: var(--color-accent);
  text-decoration-line: underline;
}

.byline__avatar {
  aspect-ratio: 1;
  block-size: 1.875rem;
  border-radius: 100vmax;
  inline-size: 1.875rem;
  object-fit: cover;
}

/*
BREADCRUMB BLOCK
The trail back up the page hierarchy, sitting under the nav inside the page
header band. It takes the nav's own gutter rather than the content gutter so
the two line up down the left edge.
*/
.breadcrumb {
  font-size: var(--font-size--1);
  line-height: var(--leading-medium);
  padding-block: var(--space-xs);
  padding-inline: var(--row-gutter);
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.5ch;
}

.breadcrumb__item + .breadcrumb__item::before {
  content: "/";
  font-weight: var(--font-medium);
  margin-inline-end: 0.5ch;
}

.breadcrumb__link {
  font-weight: var(--font-medium);
}
.breadcrumb__link:hover, .breadcrumb__link:focus-visible {
  text-decoration-color: var(--color-accent);
  text-decoration-line: underline;
}

/*
BUTTON BLOCK
The accent pill. Both places it is used so far -- the band that closes an
article and the card an editor drops mid-page -- sit on a dark ground, so it
lightens on hover by default. On a light ground, set the two hover properties.
*/
.button {
  --button-background: var(--color-accent);
  --button-background-hover: var(--color-old-lace);
  --button-color: var(--color-prussian-blue);
  --button-color-hover: var(--color-prussian-blue);
  align-items: center;
  background: var(--button-background);
  border: 1px solid var(--button-background);
  border-radius: 100vmax;
  color: var(--button-color);
  display: inline-flex;
  font-family: var(--font-sans);
  font-size: var(--font-size--1);
  font-weight: var(--font-medium);
  justify-content: center;
  line-height: var(--leading-standard);
  min-block-size: 2.8125rem;
  min-inline-size: 9.375rem;
  padding-block: var(--space-xs);
  padding-inline: var(--space-s);
  text-align: center;
  text-decoration-line: none;
  transition: background-color var(--duration-fast) var(--ease-out-sine), border-color var(--duration-fast) var(--ease-out-sine), color var(--duration-fast) var(--ease-out-sine);
}
.button:hover, .button:focus-visible {
  background: var(--button-background-hover);
  border-color: var(--button-background-hover);
  color: var(--button-color-hover);
}

/*
CTA CARD BLOCK
The navy card an editor drops mid-page: a headline, a line of explanation and
one button. Unlike the Featured CTA it stays inside the reading column rather
than banding across the page, so it is set left rather than centred.
*/
.cta-card {
  align-items: center;
  background: var(--color-oxford-navy);
  color: var(--color-old-lace);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
  justify-content: space-between;
  padding-block: var(--space-2xl);
  padding-inline: var(--space-s-m);
}

.cta-card__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-inline-size: 0;
}

.cta-card__headline {
  font-size: var(--font-size-1);
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-normal);
  line-height: var(--leading-medium);
  margin: 0;
}

.cta-card__description {
  font-size: var(--font-size--2);
  line-height: var(--leading-medium);
  margin: 0;
}

/*
FEATURED CTA BLOCK
The dark band that closes an article: a headline, a short pitch and one button.
*/
.featured-cta {
  --color-background: var(--color-prussian-blue);
  --color-foreground: var(--color-old-lace);
  --gutter: var(--content-gutter);
  --region-space: var(--space-2xl-3xl);
  --wrapper-max-width: var(--content-max-width);
  background: var(--color-background);
  color: var(--color-foreground);
}

.featured-cta__inner {
  --flow-space: var(--space-m);
  text-align: center;
}

.featured-cta__copy {
  --flow-space: var(--space-s);
  margin-inline: auto;
  max-inline-size: 60ch;
}

.featured-cta__headline {
  font-family: var(--font-serif);
  font-size: var(--font-size-5);
  font-weight: var(--font-regular);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-medium);
}

.featured-cta__description {
  font-size: var(--font-size-0);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-medium);
}

.featured-cta__button {
  --button-background-hover: var(--color-foreground);
}

.featured-events {
  --gutter: var(--row-gutter);
  --wrapper-max-width: var(--row-max-width);
  --region-space: var(--space-2xl);
  --featured-events-text: clamp(1rem, 0.9519rem + 0.1923vw, 1.125rem);
  background: var(--color-background);
  color: var(--color-foreground);
}

.featured-events__inner {
  display: grid;
  gap: clamp(1.25rem, 0.7808rem + 1.9102vw, 2.5rem);
  grid-template-areas: "headline" "list" "all";
}
@media (width >= 1045px) {
  .featured-events__inner {
    grid-template-areas: "headline all" "list list";
    grid-template-columns: 1fr auto;
  }
}

/* Headline
================================== */
.featured-events__headline {
  align-self: center;
  font-family: var(--font-serif);
  font-size: clamp(2.25rem, 1.9685rem + 1.1461vw, 3rem);
  font-weight: var(--font-medium);
  grid-area: headline;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin: 0;
}

/* Cards
================================== */
.featured-events__list {
  display: flex;
  flex-direction: column;
  gap: 1.875rem;
  grid-area: list;
  margin-block: 0;
}
@media (width >= 1045px) {
  .featured-events__list {
    flex-direction: row;
  }
  .featured-events__list > * {
    flex: 1 1 0;
  }
}

.featured-events__card {
  border: 1px solid var(--color-bone);
  display: flex;
  flex-direction: column;
  font-size: var(--featured-events-text);
  gap: 1.25rem;
  line-height: var(--leading-standard);
  padding: clamp(1.25rem, 1.0154rem + 0.9551vw, 1.875rem);
}

.featured-events__title {
  font-family: var(--font-sans);
  font-size: 1.125rem;
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-normal);
  line-height: var(--leading-fine);
  margin: 0;
}
@media (width >= 1045px) {
  .featured-events__title {
    font-family: var(--font-serif);
    font-size: 2rem;
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
  }
}

.featured-events__link {
  --text-decoration-color: var(--color-accent);
}

.featured-events__body {
  display: flex;
  flex-direction: column;
  gap: 1.5em;
}

.featured-events__meta p {
  margin: 0;
}
@media (width >= 1045px) {
  .featured-events__meta p {
    font-weight: var(--font-medium);
  }
}

.featured-events__description > * {
  margin-block: 0;
}
.featured-events__description > * + * {
  margin-block-start: 1em;
}

/* Buttons
================================== */
.featured-events__button {
  align-items: center;
  border: 1px solid currentColor;
  border-radius: 100vmax;
  color: var(--color-foreground);
  display: inline-flex;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: var(--font-medium);
  justify-content: center;
  line-height: var(--leading-standard);
  min-block-size: 2.8125rem;
  padding-block: 0.5rem;
  padding-inline: 1.25rem;
  text-align: center;
  text-decoration-line: none;
  transition: background-color var(--duration-fast) var(--ease-out-sine), color var(--duration-fast) var(--ease-out-sine);
}
.featured-events__button:hover, .featured-events__button:focus-visible {
  background: var(--color-foreground);
  color: var(--color-background);
}

.featured-events__rsvp {
  align-self: start;
  margin-block-start: auto;
}

.featured-events__all {
  grid-area: all;
}
@media (width >= 1045px) {
  .featured-events__all {
    align-self: center;
    justify-self: end;
  }
}

.featured-links {
  --gutter: var(--row-gutter);
  --wrapper-max-width: var(--row-max-width);
  --region-space: var(--space-2xl);
  background: var(--color-background);
}

.featured-links__list {
  --gutter: var(--row-split-gap);
  --switcher-vertical-alignment: stretch;
  --switcher-target-container-width: var(--row-split-fold);
}

/* Card
================================== */
.featured-links__card {
  background: var(--color-background);
  color: var(--color-foreground);
  display: flex;
  flex-direction: column;
  isolation: isolate;
  justify-content: flex-end;
  min-block-size: 30.625rem;
  overflow: hidden;
  padding: 1.875rem;
  position: relative;
}
.featured-links__card:has(.featured-links__link:focus-visible) {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Backdrop
================================== */
.featured-links__backdrop {
  inset: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}
.featured-links__backdrop::after {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.9) 78.863%);
  content: "";
  inset: 0;
  position: absolute;
}

.featured-links__image {
  block-size: 100%;
  inline-size: 100%;
  object-fit: cover;
  object-position: center;
}
@media (prefers-reduced-motion: no-preference) {
  .featured-links__image {
    transition: scale var(--duration-slow) var(--ease-out-sine);
  }
}

.featured-links__card:hover .featured-links__image,
.featured-links__card:focus-within .featured-links__image {
  scale: 1.04;
}

/* Copy
================================== */
.featured-links__copy {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-inline-size: 33.75rem;
}

.featured-links__headline {
  font-family: var(--font-serif);
  font-size: clamp(2.25rem, 1.9685rem + 1.1461vw, 3rem);
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin: 0;
  text-decoration-color: var(--color-accent);
  text-decoration-line: underline;
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
}
.featured-links__headline:has(.featured-links__link:hover), .featured-links__headline:has(.featured-links__link:focus-visible) {
  text-decoration: none;
}

.featured-links__link {
  color: inherit;
}
.featured-links__link:focus-visible {
  outline: none;
}

.featured-links__description {
  font-size: clamp(1rem, 0.9519rem + 0.1923vw, 1.125rem);
  line-height: var(--leading-medium);
  margin: 0;
}

/*
FIGURE BLOCK
A picture with its caption, or several as a slideshow.
*/
.figure-set {
  --figure-arrow-gap: var(--space-xs);
  --figure-arrow-inset: var(--space-s);
  --figure-arrow-size: 1.875rem;
  --figure-slide-aspect: 4 / 3;
  --figure-slide-background: var(--color-bone);
}

.figure-set[data-gallery] {
  position: relative;
}

.figure-set__track {
  display: grid;
  gap: var(--space-s-m);
  grid-template-columns: minmax(0, 1fr);
}

.figure-set[data-gallery] .figure-set__track {
  grid-auto-columns: 100%;
  grid-auto-flow: column;
  grid-template-columns: none;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-width: none;
}
.figure-set[data-gallery] .figure-set__track::-webkit-scrollbar {
  display: none;
}
.figure-set[data-gallery] .figure-set__track > * {
  scroll-snap-align: start;
}

.figure__image {
  inline-size: 100%;
}

/* Slide
================================== */
.figure-set[data-gallery] .figure__media {
  align-items: center;
  aspect-ratio: var(--figure-slide-aspect);
  background: var(--figure-slide-background);
  display: flex;
  justify-content: center;
  overflow: hidden;
}
.figure-set[data-gallery] .figure__media .figure__image {
  block-size: 100%;
  object-fit: contain;
}

.figure__caption {
  color: var(--color-black);
  font-size: var(--font-size--2);
  line-height: var(--leading-fine);
  padding-block-start: var(--space-xs);
  text-wrap: pretty;
}

/* Arrows
================================== */
.figure-set__controls {
  align-items: center;
  aspect-ratio: var(--figure-slide-aspect);
  display: none;
  inset-block-start: 0;
  inset-inline: 0;
  justify-content: space-between;
  padding-inline: var(--figure-arrow-inset);
  pointer-events: none;
  position: absolute;
}

.figure-set[data-ready] .figure-set__controls {
  display: flex;
}

.figure-set__arrow {
  align-items: center;
  aspect-ratio: 1;
  background: var(--figure-slide-background);
  block-size: var(--figure-arrow-size);
  border: 1px solid var(--color-bone);
  border-radius: 100vmax;
  display: flex;
  justify-content: center;
  pointer-events: auto;
  transition: opacity var(--duration-fast) var(--ease-out-sine);
}
.figure-set__arrow .icon {
  --icon-height: 0.875rem;
  --icon-width: 0.875rem;
}
.figure-set__arrow[disabled] {
  cursor: default;
  opacity: 0.35;
}

/* Room beside the column: out of the picture and back to an outline.
================================== */
@media (width >= 1350px) {
  .figure-set__controls {
    padding-inline: 0;
  }
  .figure-set__arrow {
    background: none;
  }
  .figure-set__arrow:first-child {
    margin-inline-start: calc((var(--figure-arrow-size) + var(--figure-arrow-gap)) * -1);
  }
  .figure-set__arrow:last-child {
    margin-inline-end: calc((var(--figure-arrow-size) + var(--figure-arrow-gap)) * -1);
  }
}
@property --hero-ink-travel {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --hero-collapse-scale {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}
.hero {
  --hero-edge: var(--row-gutter);
  --hero-gutter: clamp(1.25rem, 0.2885rem + 3.8462vw, 3.75rem);
  --hero-hold: 75svh;
  --hero-stage-height: calc(100svh - var(--admin-bar-height));
  --hero-collapse-duration: 1100ms;
  --hero-collapse-floor: 0.06;
  --hero-collapse-radius: 50px;
  --hero-ink-lag: 660ms;
  --hero-ink-pace: 0.75ms;
  --hero-ink-hop: 0.35;
  --hero-ink-arm: 0ms;
  --hero-word-duration: 700ms;
  --hero-playback-size: 1.5rem;
  --hero-playback-inset: var(--space-xs);
  background: var(--color-prussian-blue);
  block-size: calc(var(--hero-stage-height) + var(--hero-hold));
  color: var(--color-old-lace);
  position: relative;
}

.hero__stage {
  block-size: var(--hero-stage-height);
  display: grid;
  grid-template-areas: "hero";
  inset-block-start: var(--admin-bar-height);
  isolation: isolate;
  min-block-size: 30rem;
  overflow: clip;
  position: sticky;
}
.hero__stage > * {
  grid-area: hero;
}

.hero__sentinel {
  block-size: 3.5rem;
  inset-block-start: 0;
  inset-inline: 0;
  pointer-events: none;
  position: absolute;
  z-index: var(--z-base);
}

/* Media panel
================================== */
.hero__media {
  --hero-collapse-scale: 1;
  --hero-counter-scale: calc(
  	1 / max(var(--hero-collapse-scale), var(--hero-collapse-floor))
  );
  align-content: end;
  border-radius: 0;
  display: grid;
  overflow: clip;
  position: relative;
  scale: 1 var(--hero-collapse-scale);
  transform-origin: 50% 0;
  transition: --hero-collapse-scale 850ms var(--ease-out-cubic), border-radius 850ms var(--ease-out-cubic);
  z-index: var(--z-high);
}

[data-hero-state=intro] .hero__media {
  --hero-collapse-scale: 0;
  border-radius: 0 0 var(--hero-collapse-radius) var(--hero-collapse-radius);
  transition-duration: var(--hero-collapse-duration);
  transition-timing-function: var(--ease-in-out-cubic);
}

video.hero__video {
  aspect-ratio: auto;
  block-size: 100%;
  inline-size: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
}

.hero__video,
.hero__scrim {
  scale: 1 var(--hero-counter-scale);
  transform-origin: 50% 0;
}

.hero__scrim {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 25.48%, rgba(0, 0, 0, 0.2) 100%);
  inset: 0;
  position: absolute;
}

.hero__media-foot {
  display: grid;
  position: relative;
  scale: 1 var(--hero-counter-scale);
  transform-origin: 50% 100%;
  z-index: var(--z-raised);
}

/* Wordmark
================================== */
.hero__headline {
  font-size: inherit;
  line-height: var(--leading-flat);
  margin: 0;
  padding-block-end: var(--hero-gutter);
  padding-inline: var(--hero-edge);
  position: relative;
  z-index: var(--z-raised);
}

@media (width >= 750px) {
  .hero__headline {
    padding-block-end: max(var(--hero-gutter), 1.63% - var(--hero-edge) * 0.0326 + var(--hero-playback-size) + var(--hero-playback-inset) + var(--space-xs));
  }
}
.hero__wordmark-defs {
  block-size: 0;
  inline-size: 0;
  position: absolute;
}

.hero__wordmark {
  display: grid;
  inline-size: 100%;
}

.hero__wordmark--inline {
  grid-template-columns: 493.125fr 278.965fr 592.91fr;
}

.hero__wordmark--stacked {
  grid-template-columns: 227.239fr 121.761fr;
}
.hero__wordmark--stacked .hero__wordmark-word:nth-child(3) {
  grid-column: 1/-1;
}

@media (width < 750px) {
  .hero__wordmark--inline {
    display: none;
  }
}
@media (width >= 750px) {
  .hero__wordmark--stacked {
    display: none;
  }
}
.hero__wordmark-word {
  display: block;
  min-inline-size: 0;
}
.hero__wordmark-word svg {
  block-size: auto;
  inline-size: 100%;
}

/* Intro panel
================================== */
.hero__intro {
  align-content: end;
  display: grid;
  padding-block: var(--site-header-height) clamp(3rem, 10.2917vw, 10rem);
  padding-inline: var(--hero-gutter);
  position: relative;
  z-index: var(--z-raised);
}

.hero__watermark {
  display: block;
  inline-size: clamp(12.5rem, 27.083%, 32.5rem);
  inset-block-start: 0;
  inset-inline-end: 0;
  pointer-events: none;
  position: absolute;
  z-index: var(--z-base);
}

.hero__watermark-art {
  block-size: auto;
  inline-size: 100%;
}

.hero__lede {
  color: var(--color-wheat);
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 0.8654rem + 1.5385vw, 2.25rem);
  font-size-adjust: none;
  letter-spacing: var(--tracking-normal);
  line-height: 1.1667;
  max-inline-size: 24.2em;
  position: relative;
  z-index: var(--z-raised);
}
.hero__lede p {
  margin: 0;
}
.hero__lede p + p {
  margin-block-start: 1.1667em;
  margin-block-start: 1lh;
}

/* Playback control
================================== */
.hero__playback {
  align-items: center;
  backdrop-filter: blur(6px);
  background: color-mix(in srgb, var(--color-prussian-blue) 45%, transparent);
  block-size: var(--hero-playback-size);
  border: 1px solid color-mix(in srgb, var(--color-old-lace) 35%, transparent);
  border-radius: 50%;
  color: var(--color-old-lace);
  display: flex;
  inline-size: var(--hero-playback-size);
  inset-block-end: var(--hero-playback-inset);
  inset-inline-end: var(--hero-playback-inset);
  justify-content: center;
  position: absolute;
  transition: background var(--duration-fast) var(--ease-out-sine), visibility 0s;
  z-index: var(--z-high);
}
.hero__playback::before {
  content: "";
  inset: calc((var(--hero-playback-size) - 2.75rem) / 2);
  position: absolute;
}
.hero__playback:hover {
  background: color-mix(in srgb, var(--color-prussian-blue) 70%, transparent);
}
.hero__playback svg {
  block-size: 0.5625rem;
  inline-size: 0.5625rem;
}
.hero__playback .play-icon {
  margin-inline-start: 0.1em;
}

@media (width < 750px) {
  .hero__playback {
    inset-block-end: var(--hero-edge);
  }
}
.hero__playback[hidden] {
  display: none;
}

.hero__playback[data-playing=true] :is(.play-icon, [data-when=paused]),
.hero__playback:not([data-playing=true]) :is(.pause-icon, [data-when=playing]) {
  display: none;
}

[data-hero-state=intro] .hero__playback {
  pointer-events: none;
  transition: visibility 0s var(--hero-collapse-duration);
  visibility: hidden;
}

/* Entrances
================================== */
@media (prefers-reduced-motion: no-preference) {
  .hero__wordmark-word {
    animation: hero-wordmark-in 1100ms var(--ease-out-cubic) both;
    animation-delay: calc(200ms + var(--word, 0) * 140ms);
  }
  @keyframes hero-wordmark-in {
    from {
      opacity: 0;
      translate: 0 25%;
    }
    to {
      opacity: 1;
      translate: none;
    }
  }
  .hero__watermark-thread {
    --total: calc(
    	var(--ink-total) + var(--gap-total) * var(--hero-ink-hop)
    );
    --hero-ink-travel: 0;
    transition: --hero-ink-travel 400ms var(--ease-in-cubic);
  }
  [data-hero-state=intro] .hero__watermark-thread {
    --hero-ink-travel: var(--total);
    transition-delay: calc(var(--hero-ink-lag) + var(--arm) * var(--hero-ink-arm));
    transition-duration: calc(var(--total) * var(--hero-ink-pace));
    transition-timing-function: var(--ease-in-out-quad);
  }
  .hero__watermark-stroke {
    --at: calc(var(--before) + var(--gap-before) * var(--hero-ink-hop));
    --stride: calc(var(--len) + 1);
    stroke-dasharray: calc(var(--stride) * 1px);
    stroke-dashoffset: calc(var(--stride) * 1px * clamp(0, (var(--at) + var(--len) - var(--hero-ink-travel)) / var(--len), 1));
  }
  .hero__word {
    display: inline-block;
    opacity: 0;
    transition: opacity var(--hero-word-duration) var(--ease-out-cubic), translate var(--hero-word-duration) var(--ease-out-cubic);
    translate: 0 0.4em;
  }
  [data-hero-state=intro] .hero__word {
    opacity: 1;
    transition-delay: calc(260ms + var(--word, 0) * 26ms);
    translate: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero__media,
  .hero__playback {
    transition: none;
  }
}
[data-hero-ready=false] :is(.hero__media,
.hero__playback,
.hero__watermark-stroke,
.hero__watermark-thread,
.hero__word) {
  transition: none;
}

/* Site header over the hero
================================== */
body:has(.hero) .site-header {
  color: var(--color-old-lace);
}
body:has(.hero)[data-menu-open=true] .site-header {
  background: var(--color-prussian-blue);
}
@media (width >= 1045px) {
  body:has(.hero)[data-menu-open=true] .site-header {
    background: none;
  }
}

/*
LINK CARD BLOCK
The bone-colored cards an article drops into its body to point somewhere else:
a person, another post on the site, an external link, or a file.
*/
.link-card {
  --underline-skip: auto;
  --underline-thickness: var(--underline-thickness-thick);
  background: var(--color-bone);
  color: var(--color-black);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  isolation: isolate;
  justify-content: space-between;
  padding: var(--space-s-m);
  position: relative;
  text-decoration-line: none;
}
.link-card:has(.cover-link:focus-visible), .link-card:is(a):focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.link-card__copy {
  --flow-space: var(--space-2xs);
  min-inline-size: 0;
}

.link-card__label {
  display: block;
  font-size: var(--font-size--3);
  letter-spacing: var(--tracking-wider);
  line-height: var(--leading-fine);
  text-transform: uppercase;
}

.link-card__title {
  display: block;
  font-size: var(--font-size-1);
  line-height: var(--leading-fine);
  text-wrap: pretty;
}

.link-card__meta {
  font-size: var(--font-size--2);
  line-height: var(--leading-fine);
}

.link-card:is(a):is(:hover, :focus-visible) .link-card__title,
.link-card:has(.cover-link:is(:hover, :focus-visible)) .link-card__title {
  text-decoration-color: var(--color-accent);
  text-decoration-line: underline;
  text-decoration-thickness: var(--underline-thickness);
  text-underline-position: from-font;
}

.link-card .cover-link:focus-visible {
  outline: none;
}

/* Contact
================================== */
.link-card--contact {
  align-items: center;
}

.link-card__person {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
  min-inline-size: 0;
}

.link-card__avatar {
  aspect-ratio: 1;
  block-size: 6.25rem;
  border-radius: 100vmax;
  inline-size: 6.25rem;
  object-fit: cover;
}

.link-card__contact {
  --flow-space: var(--space-2xs);
  position: relative;
  z-index: var(--z-raised);
}
@media (width >= 750px) {
  .link-card__contact {
    min-inline-size: 13.75rem;
  }
}

.link-card__details {
  font-size: var(--font-size--2);
  line-height: var(--leading-loose);
}

.link-card__email,
.link-card__phone {
  text-decoration-line: none;
}
.link-card__email:is(:hover, :focus-visible),
.link-card__phone:is(:hover, :focus-visible) {
  text-decoration-color: var(--color-accent);
  text-decoration-line: underline;
}

/* External link
================================== */
.link-card--external {
  align-items: center;
}

.link-card__url {
  align-items: center;
  display: flex;
  font-size: var(--font-size--2);
  gap: var(--space-2xs);
  line-height: var(--leading-flat);
}
.link-card__url .icon {
  --icon-height: 0.875rem;
  --icon-width: 0.875rem;
  transition: translate var(--duration-fast) var(--ease-in-out-sine);
}

.link-card--external:hover .icon {
  translate: 2px -2px;
}

.link-card__media {
  --n: 3;
  --d: 2;
  flex: 0 0 auto;
  inline-size: 7.5rem;
}

.link-card__image {
  block-size: 100%;
  inline-size: 100%;
  object-fit: cover;
}

/* File
================================== */
.link-card--file {
  align-items: center;
}
.link-card--file .icon {
  --icon-height: 2rem;
  --icon-width: 2rem;
}

/*
LINK GRID BLOCK
The band of teaser cards that points at a list of other pages: the Content Grid
an editor places among the page components, and the Related band that closes a
page. A picture over a centred title, four to a row, on the bone ground that
separates the band from the page above it.
*/
.link-grid {
  --gutter: var(--content-gutter);
  --region-space: var(--space-2xl);
  --wrapper-max-width: var(--content-max-width);
  background: var(--color-background);
  color: var(--color-foreground);
}

.link-grid__inner {
  --flow-space: var(--space-xl);
}

.link-grid__heading {
  font-family: var(--font-serif);
  font-size: var(--font-size-3);
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-normal);
  line-height: var(--leading-tight);
  margin: 0;
}

/* Cards
================================== */
.link-grid__list {
  display: grid;
  gap: var(--space-s);
  grid-template-columns: repeat(var(--grid-placement, 1), minmax(0, 1fr));
}
@media (width >= 360px) {
  .link-grid__list {
    --grid-placement: 2;
  }
}
@media (width >= 900px) {
  .link-grid__list {
    --grid-placement: 4;
  }
}

.link-grid__card {
  background: var(--color-old-lace);
  display: flex;
  flex-direction: column;
  isolation: isolate;
  overflow: hidden;
  position: relative;
}
.link-grid__card:has(.link-grid__link:focus-visible) {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.link-grid__media {
  --n: 315;
  --d: 185;
}

.link-grid__image {
  block-size: 100%;
  inline-size: 100%;
  object-fit: cover;
  object-position: center;
}
@media (prefers-reduced-motion: no-preference) {
  .link-grid__image {
    transition: scale var(--duration-slow) var(--ease-out-sine);
  }
}

.link-grid__card:hover .link-grid__image,
.link-grid__card:focus-within .link-grid__image {
  scale: 1.04;
}

.link-grid__title {
  align-items: center;
  display: flex;
  flex-grow: 1;
  font-family: var(--font-serif);
  font-size: var(--font-size-1);
  font-weight: var(--font-medium);
  justify-content: center;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-medium);
  margin: 0;
  padding-block: var(--space-2xl);
  padding-inline: clamp(1rem, 0.7115rem + 1.1538vw, 1.5625rem);
  text-align: center;
  text-wrap: balance;
}

.link-grid__link {
  text-decoration-line: none;
}
.link-grid__link:focus-visible {
  outline: none;
}
.link-grid__link:hover {
  text-decoration-color: var(--color-accent);
  text-decoration-line: underline;
  text-decoration-thickness: var(--underline-thickness-thick);
  text-underline-position: from-font;
}

.location-cta {
  --gutter: var(--row-gutter);
  --wrapper-max-width: var(--row-max-width);
  --region-space: clamp(3.75rem, 2.3077rem + 5.7692vw, 7.5rem);
  --location-cta-text: clamp(1rem, 0.9519rem + 0.1923vw, 1.125rem);
  background: var(--color-background);
  color: var(--color-foreground);
  font-size: var(--location-cta-text);
  line-height: var(--leading-standard);
  position: relative;
}

.location-cta__layout {
  --gutter: var(--row-split-gap);
  --switcher-vertical-alignment: center;
  --switcher-target-container-width: var(--row-split-fold);
}

/* Backdrop
================================== */
.location-cta__backdrop {
  inset: 0;
  overflow: hidden;
  position: absolute;
}
.location-cta__backdrop::after {
  background: linear-gradient(to left, rgba(0, 0, 0, 0.8) 54.8%, rgba(0, 0, 0, 0.6) 100%);
  content: "";
  inset: 0;
  position: absolute;
}

.location-cta__image {
  block-size: 100%;
  inline-size: 100%;
  object-fit: cover;
  object-position: center;
}

/* Headline
================================== */
.location-cta__headline {
  font-family: var(--font-serif);
  font-size: clamp(2.25rem, 1.9615rem + 1.1538vw, 3rem);
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin: 0;
}

/* Address, button and note
================================== */
.location-cta__details {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.location-cta__place {
  align-items: start;
  display: flex;
  flex-direction: column;
  gap: 0.9375rem;
}

.location-cta__note {
  margin: 0;
}

/* Directions button
================================== */
.location-cta__button {
  --focus-color: var(--color-foreground);
  align-items: center;
  border: 1px solid currentColor;
  border-radius: 100vmax;
  display: inline-flex;
  font-size: 1rem;
  font-weight: var(--font-medium);
  justify-content: center;
  line-height: var(--leading-standard);
  min-block-size: 2.8125rem;
  padding-block: 0.5rem;
  padding-inline: 1.25rem;
  text-align: center;
  text-decoration-line: none;
  transition: background-color var(--duration-fast) var(--ease-out-sine), color var(--duration-fast) var(--ease-out-sine);
}
.location-cta__button:hover, .location-cta__button:focus-visible {
  background: var(--color-foreground);
  color: var(--color-background);
}

/*
MEDIA EMBED BLOCK
A player from somewhere else -- an oEmbed video, or an iframe an editor pasted
from a service the church already uses. Whatever the service sizes it at, it is
held to the width of the column and the usual 16:9.
*/
.media-embed :is(iframe, video) {
  aspect-ratio: 16/9;
  block-size: auto;
  display: block;
  inline-size: 100%;
}

.ministries-cta {
  --gutter: var(--row-gutter);
  --wrapper-max-width: var(--row-max-width);
  --region-space: 3.75rem;
  --ministries-cta-text: clamp(1rem, 0.9519rem + 0.1923vw, 1.125rem);
  background: var(--color-background);
  color: var(--color-foreground);
  font-size: var(--ministries-cta-text);
}

.ministries-cta .region__inner.ministries-cta__inner {
  padding-block-start: clamp(1.875rem, 1.1538rem + 2.8846vw, 3.75rem);
}

.ministries-cta__layout {
  --gutter: var(--row-split-gap);
  --switcher-vertical-alignment: center;
  --switcher-target-container-width: var(--row-split-fold);
}

/* Image
================================== */
.ministries-cta__media {
  --n: 675;
  --d: 466;
}

/* Copy
================================== */
.ministries-cta__content {
  align-items: start;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.ministries-cta__headline {
  font-family: var(--font-serif);
  font-size: clamp(2.25rem, 1.9615rem + 1.1538vw, 3rem);
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin: 0;
}

.ministries-cta__description {
  line-height: var(--leading-medium);
  margin: 0;
  max-inline-size: 34.6875rem;
}

/* Button
================================== */
.ministries-cta__button {
  align-items: center;
  border: 1px solid currentColor;
  border-radius: 100vmax;
  color: var(--color-foreground);
  display: inline-flex;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: var(--font-medium);
  justify-content: center;
  line-height: var(--leading-standard);
  min-block-size: 2.8125rem;
  padding-block: 0.5rem;
  padding-inline: 1.25rem;
  text-align: center;
  text-decoration-line: none;
  transition: background-color var(--duration-fast) var(--ease-out-sine), color var(--duration-fast) var(--ease-out-sine);
}
.ministries-cta__button:hover, .ministries-cta__button:focus-visible {
  background: var(--color-foreground);
  color: var(--color-background);
}

/*
PAGE BODY BLOCK
The components an editor stacks on a Page, set out as the sections the design
calls stripes.
*/
.page-body {
  --gutter: var(--content-gutter);
  --page-body-space: clamp(3rem, 1.75rem + 5vw, 6.25rem);
  --page-section-space: clamp(1.875rem, 1.1538rem + 2.8846vw, 3.75rem);
  --region-space: var(--page-body-space);
  --wrapper-max-width: var(--content-max-width);
  background: var(--color-background);
  color: var(--color-warm-gray);
}

/* Section
================================== */
.page-section {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: minmax(0, 1fr);
}
@media (width >= 1045px) {
  .page-section {
    grid-template-columns: minmax(0, 510fr) minmax(0, 780fr);
  }
}

.page-section + .page-section {
  border-block-start: 1px solid var(--color-bone);
  margin-block-start: var(--page-body-space);
  padding-block-start: var(--page-section-space);
}

@media (width >= 1045px) {
  .page-section__aside {
    align-self: start;
    position: sticky;
    inset-block-start: calc(var(--admin-bar-height) + var(--space-l));
  }
}

.page-section__title {
  color: var(--color-foreground);
  font-family: var(--font-serif);
  font-size: var(--font-size-5);
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-normal);
  line-height: var(--leading-tight);
  margin: 0;
  text-wrap: balance;
}

/* Content
================================== */
.page-section__content {
  --flow-space: var(--space-m);
  min-inline-size: 0;
}

@media (width >= 1045px) {
  .page-section:not(:has(.page-section__aside)) .page-section__content {
    grid-column: 2;
  }
}

.page-section__content .prose {
  max-inline-size: none;
}
.page-section__content .prose :is(h2, h3, h4, h5, h6) {
  color: var(--color-black);
  font-family: var(--font-sans);
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-normal);
  line-height: var(--leading-fine);
}
.page-section__content .prose :is(h2, h3) {
  font-size: var(--font-size-2);
}
.page-section__content .prose h4 {
  font-size: var(--font-size-1);
}
.page-section__content .prose :is(h5, h6) {
  font-size: var(--font-size-0);
}
.page-section__content .prose * + :is(h2, h3, h4, h5, h6) {
  --flow-space: var(--space-m);
}
.page-section__content .prose :is(h2, h3, h4, h5, h6) + * {
  --flow-space: var(--space-s);
}
.page-section__content .prose .lede {
  color: var(--color-foreground);
  line-height: 1.4;
}

/*
PAGE HEADER BLOCK
The colored band at the top of an interior page, carrying the breadcrumb, the
display title, a subtitle and the picture the page leads with.
*/
.page-header {
  --page-header-clearance: clamp(2.5rem, 1.2262rem + 5.0962vw, 5.8125rem);
  --page-header-min-height: clamp(18.75rem, 15.8654rem + 11.5385vw, 26.25rem);
  --page-header-tail: clamp(1.875rem, 1.1538rem + 2.8846vw, 3.75rem);
  background: var(--color-background);
  color: var(--color-foreground);
  display: grid;
  min-block-size: var(--page-header-min-height);
  padding-block-start: var(--site-header-height);
}
.page-header[data-tone=dark] {
  --color-background: var(--color-prussian-blue);
  --color-foreground: var(--color-old-lace);
}
.page-header[data-tone=wheat] {
  --color-background: var(--color-wheat);
  --color-foreground: var(--color-prussian-blue);
}

.page-header__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  inline-size: 100%;
  margin-inline: auto;
  max-inline-size: calc(var(--content-max-width) + var(--content-gutter) * 2);
}

/* Breadcrumb
================================== */
.page-header .breadcrumb {
  grid-column: 1;
  grid-row: 1;
}

/* Copy
================================== */
.page-header__copy {
  align-self: end;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  grid-column: 1;
  grid-row: 2;
  padding-block: var(--page-header-clearance) var(--page-header-tail);
  padding-inline: var(--content-gutter);
}

.page-header__title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 1.8462rem + 4.6154vw, 6rem);
  font-weight: var(--font-regular);
  letter-spacing: var(--tracking-normal);
  line-height: var(--leading-flat);
  margin: 0;
  max-inline-size: 13ch;
  text-transform: uppercase;
}

.page-header__subtitle {
  font-family: var(--font-serif);
  font-size: var(--font-size-0);
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-normal);
  line-height: var(--leading-fine);
  margin: 0;
  max-inline-size: 45ch;
}

/* Media
================================== */
.page-header__media {
  grid-column: 1;
  grid-row: 3;
}
.page-header__media img {
  inline-size: 100%;
}
.page-header__media--video {
  aspect-ratio: 16/9;
  overflow: hidden;
}
.page-header__media--video iframe {
  block-size: 100%;
  inline-size: 100%;
}

@media (width >= 900px) {
  .page-header:has(.page-header__media) .page-header__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 49.3056%);
  }
  /* Beside the copy, and past the breadcrumb to the top of the band. */
  .page-header:has(.page-header__media) .page-header__media {
    grid-column: 2;
    grid-row: 1/-1;
  }
}
/* Site header over the band
================================== */
body:has(.page-header)[data-menu-open=true] .site-header {
  background: var(--color-prussian-blue);
}
@media (width >= 1045px) {
  body:has(.page-header)[data-menu-open=true] .site-header {
    background: none;
  }
}
body:has(.page-header):has(.page-header[data-tone=dark]) .site-header {
  border-block-end-color: rgba(255, 255, 255, 0.1);
  color: var(--color-old-lace);
}
body:has(.page-header):has(.page-header[data-tone=wheat]) .site-header {
  color: var(--color-prussian-blue);
}
body:has(.page-header):has(.page-header[data-tone=wheat])[data-menu-open=true] .site-header {
  background: var(--color-wheat);
}
@media (width >= 1045px) {
  body:has(.page-header):has(.page-header[data-tone=wheat])[data-menu-open=true] .site-header {
    background: none;
  }
}

/*
PROSE BLOCK
Body copy as the editor leaves it: the reading measure, the type headings are set in, and the rhythm between one block and the next.
*/
.prose {
  max-inline-size: var(--prose-measure, 65ch);
}
.prose > * {
  --flow-space: var(--space-s);
}
.prose :is(p, li, dl, figcaption, blockquote) {
  text-wrap: pretty;
}
.prose :is(h2, h3, h4, h5, h6) {
  font-family: var(--font-serif);
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-normal);
  line-height: var(--leading-medium);
}
.prose :is(h2, h3) {
  font-size: var(--font-size-5);
}
.prose h4 {
  font-size: var(--font-size-3);
}
.prose :is(h5, h6) {
  font-size: var(--font-size-1);
}
.prose * + :is(h2, h3) {
  --flow-space: var(--space-xl-2xl);
}
.prose * + :is(h4, h5, h6) {
  --flow-space: var(--space-m);
}
.prose :is(h2, h3, h4, h5, h6) + * {
  --flow-space: var(--space-s-m);
}
.prose ul ul {
  list-style-type: circle;
}
.prose ul ul ul {
  list-style-type: square;
}
.prose ol ol {
  list-style-type: lower-alpha;
}
.prose ol ol ol {
  list-style-type: lower-roman;
}
.prose ol ol ol ol {
  list-style-type: upper-alpha;
}
.prose :is(figure, table),
.prose :is(figure, table) + * {
  --flow-space: var(--space-l);
}
.prose blockquote {
  font-weight: var(--font-medium);
}
.prose .lede {
  font-size: var(--font-size-1);
  font-weight: var(--font-medium);
}
.prose hr + * {
  margin-block-start: 0;
}

/*
PULL QUOTE BLOCK
A quotation lifted out of the running text, set wider than the reading measure and centred. Its width comes from the grid it is placed on, not from here.
*/
.pull-quote {
  --flow-space: var(--space-xs);
  text-align: center;
}

.pull-quote__text {
  border: none;
  font-family: var(--font-serif);
  font-size: var(--font-size-5);
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-normal);
  line-height: var(--leading-medium);
  padding: 0;
}
.pull-quote__text p {
  text-wrap: pretty;
}

.pull-quote__credit {
  color: var(--color-black);
  font-size: var(--font-size--1);
  line-height: var(--leading-medium);
  padding-block-start: 0;
}

/*
RELATED POSTS BLOCK
The row of teaser cards that closes an article, with a link to the full listing beside the heading.
*/
.related-posts {
  --gutter: var(--space-m-l);
  --underline-skip: auto;
  --underline-thickness: var(--underline-thickness-thick);
  --region-space: var(--space-xl-2xl);
  --wrapper-max-width: 85rem;
  background: var(--color-background);
  color: var(--color-black);
}

.related-posts__inner {
  --flow-space: var(--space-l);
}

/* Heading
================================== */
.related-posts__headline {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  justify-content: space-between;
}

.related-posts__title {
  font-family: var(--font-serif);
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-normal);
  line-height: var(--leading-flat);
}

.related-posts__all {
  font-size: var(--font-size--1);
  line-height: var(--leading-fine);
}
.related-posts__all:hover, .related-posts__all:focus-visible {
  text-decoration-color: var(--color-accent);
  text-decoration-line: underline;
}

/* Cards
================================== */
.related-posts__list {
  display: grid;
  gap: var(--space-s);
  grid-template-columns: repeat(var(--grid-placement, 1), minmax(0, 1fr));
}
@media (width >= 360px) {
  .related-posts__list {
    --grid-placement: 2;
  }
}
@media (width >= 900px) {
  .related-posts__list {
    --grid-placement: 4;
  }
}

.post-card {
  --flow-space: var(--space-s);
  isolation: isolate;
  position: relative;
}
.post-card:has(.post-card__link:focus-visible) {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.post-card__media {
  --n: 325;
  --d: 196;
}

.post-card__image {
  block-size: 100%;
  inline-size: 100%;
  object-fit: cover;
  object-position: center;
}
@media (prefers-reduced-motion: no-preference) {
  .post-card__image {
    transition: scale var(--duration-slow) var(--ease-out-sine);
  }
}

.post-card:hover .post-card__image,
.post-card:focus-within .post-card__image {
  scale: 1.04;
}

.post-card__copy {
  --flow-space: var(--space-s);
}

.post-card__title {
  font-family: var(--font-serif);
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-normal);
  line-height: var(--leading-medium);
  text-wrap: pretty;
}

.post-card__link:focus-visible {
  outline: none;
}
.post-card__link:hover {
  text-decoration-color: var(--color-accent);
  text-decoration-line: underline;
  text-decoration-thickness: var(--underline-thickness);
  text-underline-position: from-font;
}

.post-card__meta {
  font-size: var(--font-size--2);
  line-height: var(--leading-medium);
}

.services {
  --services-gap: 0.625rem;
  --services-column-gap: var(--services-gap);
  --services-term-width: 7ch;
  display: flex;
  flex-direction: column;
  gap: var(--services-gap);
}

.services__row {
  display: flex;
  gap: var(--services-column-gap);
}

.services dt {
  flex-shrink: 0;
  font-size: inherit;
  font-weight: var(--font-bold);
  inline-size: var(--services-term-width);
}

.services dd {
  flex: 1 1 0;
  margin-inline-start: 0;
  min-inline-size: 0;
}

.site-footer {
  --footer-gutter: 1.875rem;
  --footer-space: clamp(1.875rem, 1.1712rem + 2.8653vw, 3.75rem);
  --footer-rule: color-mix(in srgb, var(--color-old-lace) 40%, transparent);
  background: var(--color-prussian-blue);
  color: var(--color-old-lace);
  display: flex;
  flex-direction: column;
  font-size: 0.875rem;
  gap: 1.875rem;
  line-height: var(--leading-loose);
  padding-block: var(--footer-space);
  padding-inline: var(--footer-gutter);
}

.site-footer a {
  color: inherit;
  text-decoration-color: var(--color-accent);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
}
.site-footer a:hover, .site-footer a:focus-visible {
  text-decoration-line: none;
}

.site-footer__copy {
  border-block-end: 1px solid var(--footer-rule);
  display: flex;
  flex-direction: column;
  gap: var(--footer-space);
  padding-block-end: 3.75rem;
}

/* Wordmark
================================== */
.site-footer__nameplate {
  margin: 0;
}

.wordmark {
  block-size: auto;
  inline-size: 100%;
}

/* Columns
================================== */
.site-footer__content {
  --grid-min-item-size: 250px;
  --grid-placement: auto-fit;
  --gutter: clamp(2.5rem, 2.0308rem + 1.9102vw, 3.75rem);
}

.footer-heading {
  font-family: var(--font-sans);
  font-size: inherit;
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-normal);
  line-height: var(--leading-loose);
  margin: 0;
}

.footer-group {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.footer-group p {
  margin: 0;
}

/* Address
================================== */
.footer-address {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
  justify-content: space-between;
}

.footer-address__block {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.footer-address__block address {
  font-style: normal;
}

.footer-address__name {
  display: block;
}

.footer-address__note {
  font-size: 0.75rem;
  font-style: italic;
}
.footer-address__note p {
  margin-block: 0;
}
.footer-address__note p + p {
  margin-block-start: var(--space-2xs);
}
.footer-address__note a {
  font-style: normal;
  font-weight: var(--font-bold);
}

/* Contact
================================== */
.footer-information {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  list-style: none;
  padding-inline-start: 0;
}

.footer-link {
  align-self: start;
  font-weight: var(--font-bold);
}
.footer-link--with-icon {
  align-items: center;
  display: inline-flex;
  font-weight: var(--font-medium);
  gap: 0.625rem;
  text-decoration-line: none;
}
.footer-link--with-icon .icon {
  --icon-height: 24px;
  --icon-width: 24px;
}
.footer-link--with-icon span {
  text-decoration-color: var(--color-accent);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
}
.footer-link--with-icon:hover span, .footer-link--with-icon:focus-visible span {
  text-decoration-line: none;
}
.footer-link--large {
  font-size: 1.25rem;
  line-height: var(--leading-medium);
}

/* Sunday services
================================== */
/* Footer navigation
================================== */
.footer-nav__list {
  display: flex;
  flex-direction: column;
  gap: 0.9375rem;
  list-style: none;
  padding-inline-start: 0;
}

/* Social
================================== */
.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding-inline-start: 0;
}

.social-link {
  align-items: center;
  block-size: 40px;
  border: 1px solid color-mix(in srgb, var(--color-old-lace) 30%, transparent);
  border-radius: 50%;
  display: flex;
  inline-size: 40px;
  justify-content: center;
  text-decoration-line: none;
  transition: border-color var(--duration-fast) var(--ease-out-sine);
}
.social-link .icon {
  --icon-height: auto;
  --icon-width: 20px;
}
.social-link:hover, .social-link:focus-visible {
  border-color: var(--color-accent);
}

/*
SITE HEADER BLOCK
The transparent bar that sits over the top of the page: a utility eyebrow, the
nameplate lockup, and the main nav. It is taken out of flow and painted with no
background of its own, so whatever the template puts at the top of the page --
a hero photo, a navy or wheat header block -- shows straight through it.
*/
.site-header {
  --site-header-gutter: var(--row-gutter);
  color: var(--color-foreground);
  display: grid;
  grid-template-areas: "nameplate toggle" "nav nav" "eyebrow eyebrow";
  grid-template-columns: 1fr auto;
  grid-template-rows: minmax(60px, auto);
  inset-block-start: var(--admin-bar-height);
  inset-inline: 0;
  padding-inline: var(--site-header-gutter);
  position: absolute;
  z-index: var(--z-header);
}
@media (width >= 1045px) {
  .site-header {
    grid-template-areas: "eyebrow eyebrow" "nameplate nav";
    grid-template-columns: auto 1fr;
    grid-template-rows: minmax(var(--eyebrow-height), auto) minmax(var(--nameplate-row-height), auto);
  }
}

body:not(.home) .site-header {
  border-block-end: 1px solid rgba(0, 22, 46, 0.1);
}

[data-menu-open=true] .site-header {
  background: var(--color-background);
  padding-block-end: var(--space-s);
}
@media (width >= 1045px) {
  [data-menu-open=true] .site-header {
    background: none;
    padding-block-end: 0;
  }
}

/* Nameplate
================================== */
.site-header__bar {
  align-items: center;
  display: flex;
  gap: var(--space-xs);
  grid-area: nameplate;
  justify-content: space-between;
}

.nameplate {
  align-items: center;
  display: flex;
  gap: 0.51em;
  font-size-adjust: none;
  font-size: var(--nameplate-size);
  min-inline-size: 0;
  text-decoration-line: none;
}
.nameplate .symbol {
  aspect-ratio: 33.4354/35;
  block-size: var(--nameplate-symbol-height);
  inline-size: auto;
}

.nameplate__wordmark {
  block-size: auto;
  inline-size: 11.995em;
  max-inline-size: 100%;
}

/* Menu toggle -- narrow viewports only
================================== */
.menu-toggle {
  align-items: center;
  border: 1px solid currentColor;
  border-radius: var(--radius-l);
  display: flex;
  gap: var(--space-xs);
  grid-area: toggle;
  font-size: 1rem;
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-normal);
  line-height: var(--leading-flat);
  padding: 10px 12px;
}
.menu-toggle .icon {
  --icon-height: 20px;
  --icon-width: 20px;
}
@media (width >= 1045px) {
  .menu-toggle {
    display: none;
  }
}

/* Eyebrow
================================== */
.site-header__eyebrow {
  align-items: center;
  display: flex;
  grid-area: eyebrow;
}
@media (width >= 1045px) {
  .site-header__eyebrow {
    justify-content: flex-end;
  }
}

.eyebrow-nav {
  display: flex;
  flex-wrap: wrap;
  font-size: 0.75rem;
  gap: var(--space-m);
  letter-spacing: var(--tracking-wider);
  line-height: var(--leading-flat);
  list-style: none;
  padding-inline-start: 0;
  text-transform: uppercase;
}

/* Main navigation
================================== */
.main-nav {
  align-items: center;
  display: flex;
  grid-area: nav;
}
@media (width >= 1045px) {
  .main-nav {
    justify-content: flex-end;
  }
}

.main-nav__list {
  display: flex;
  flex-direction: column;
  font-size: 1.125rem;
  font-weight: var(--font-medium);
  gap: var(--space-s);
  letter-spacing: var(--tracking-normal);
  line-height: var(--leading-flat);
  list-style: none;
  padding-inline-start: 0;
}
@media (width >= 1045px) {
  .main-nav__list {
    flex-direction: row;
    gap: clamp(1.5rem, -2.7989rem + 6.5823vw, 3.125rem);
  }
}

.eyebrow-nav__link,
.main-nav__link {
  text-decoration-line: none;
}
.eyebrow-nav__link:hover, .eyebrow-nav__link:focus-visible, .eyebrow-nav__link[aria-current=page],
.main-nav__link:hover,
.main-nav__link:focus-visible,
.main-nav__link[aria-current=page] {
  text-decoration-line: underline;
}

/* Closed panel
================================== */
@media (width < 1045px) {
  [data-menu-open=false] :is(.main-nav, .site-header__eyebrow) {
    display: none;
  }
  .site-header__eyebrow {
    border-block-start: 1px solid var(--color-foreground-10);
    margin-block-start: var(--space-s);
    padding-block-start: var(--space-s);
  }
}
/* Skip links
================================== */
.skip-link {
  background: var(--color-background);
  color: var(--color-foreground);
  inset-block-start: var(--space-2xs);
  inset-inline-start: var(--space-2xs);
  padding: var(--space-2xs) var(--space-xs);
  position: absolute;
  z-index: var(--z-bookmarks);
}
.skip-link:not(:focus-visible) {
  border: 0;
  clip: rect(0 0 0 0);
  block-size: 0;
  inline-size: 1px;
  overflow: hidden;
  padding: 0;
  white-space: nowrap;
}

/*
STORY LIST BLOCK
The body of the Stories landing page: the story cards, the topic filter beside them and the pagination beneath.
*/
.story-list {
  --region-space: clamp(3rem, 1.75rem + 5vw, 6.25rem);
  --gutter: var(--content-gutter);
  --wrapper-max-width: var(--content-max-width);
  background: var(--color-background);
}

.story-list__inner {
  display: grid;
  gap: var(--space-xl);
  grid-template-areas: "filters" "results";
}
@media (width >= 1045px) {
  .story-list__inner {
    align-items: start;
    column-gap: clamp(2.5rem, 1.5385rem + 3.8462vw, 3.75rem);
    grid-template-areas: "results filters";
    grid-template-columns: minmax(0, 1fr) 15rem;
  }
}

.story-list__results {
  grid-area: results;
}

.story-list__items {
  display: flex;
  flex-direction: column;
}

.story-list__empty {
  margin: 0;
}

/* Card
================================== */
.story-card {
  border-block-start: 1px solid var(--color-bone);
  color: var(--color-black);
  display: grid;
  gap: var(--space-s);
  grid-template-areas: "media" "copy";
  isolation: isolate;
  padding-block: var(--space-m);
  position: relative;
}
@media (width >= 900px) {
  .story-card {
    align-items: center;
    column-gap: var(--space-m);
    grid-template-areas: "copy media";
    grid-template-columns: minmax(0, 510fr) minmax(0, 480fr);
  }
}
.story-card:has(.story-card__link:focus-visible) {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.story-card__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  grid-area: copy;
}

.story-card__title {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 1.5577rem + 0.7692vw, 2.25rem);
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-normal);
  line-height: 1.4444;
  margin: 0;
  text-wrap: pretty;
}

.story-card__link {
  color: inherit;
}
.story-card__link::after {
  z-index: var(--z-raised);
}
.story-card__link:focus-visible {
  outline: none;
}
.story-card__link:hover {
  text-decoration-color: var(--color-accent);
  text-decoration-line: underline;
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
}

.story-card__meta {
  font-size: 0.875rem;
  line-height: 1.4286;
  margin: 0;
}

.story-card__media {
  --n: 480;
  --d: 290;
  grid-area: media;
}

.story-card__image {
  block-size: 100%;
  inline-size: 100%;
  object-fit: cover;
  object-position: center;
}
@media (prefers-reduced-motion: no-preference) {
  .story-card__image {
    transition: scale var(--duration-slow) var(--ease-out-sine);
  }
}

.story-card:hover .story-card__image,
.story-card:focus-within .story-card__image {
  scale: 1.04;
}

/* Topic filter
================================== */
.story-filters {
  display: flex;
  flex-direction: column;
  gap: 0.9375rem;
  grid-area: filters;
}

.story-filters__label {
  color: var(--color-black);
  font-family: var(--font-sans);
  font-size: 0.625rem;
  font-weight: var(--font-regular);
  letter-spacing: var(--tracking-wider);
  line-height: var(--leading-fine);
  margin: 0;
  text-transform: uppercase;
}

.story-filters__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}
@media (width >= 1045px) {
  .story-filters__pills {
    flex-direction: column;
    align-items: start;
  }
}

/* Pagination
================================== */
.pagination {
  margin-block-start: var(--space-xl-2xl);
}

.pagination__list {
  align-items: center;
  color: var(--color-black);
  display: flex;
  flex-wrap: wrap;
  gap: 0.9375rem;
  justify-content: center;
  /* The arrows sit 22px out from the numbers, which are 15px apart. */
}
.pagination__list > :has(.prev) {
  margin-inline-end: 0.4375rem;
}
.pagination__list > :has(.next) {
  margin-inline-start: 0.4375rem;
}

.page-numbers {
  align-items: center;
  border-radius: 100vmax;
  display: flex;
  font-size: 1rem;
  justify-content: center;
  line-height: 1.625;
  min-block-size: 1.5rem;
  min-inline-size: 1.5rem;
  text-decoration-line: none;
}
.page-numbers:is(a):hover, .page-numbers:is(a):focus-visible {
  text-decoration-line: underline;
}
.page-numbers.current {
  background: var(--color-prussian-blue);
  color: var(--color-old-lace);
}
.page-numbers:is(.prev, .next) {
  --icon-height: 1.5rem;
  --icon-width: 1.5rem;
}
.page-numbers.next .icon {
  scale: -1 1;
}

.sunday-cta {
  --gutter: var(--row-gutter);
  --wrapper-max-width: var(--row-max-width);
  --region-space: var(--space-2xl);
  --sunday-cta-text: clamp(1rem, 0.9519rem + 0.1923vw, 1.125rem);
  background: var(--color-background);
  font-size: var(--sunday-cta-text);
  line-height: var(--leading-standard);
}

.sunday-cta__layout {
  --gutter: var(--row-split-gap);
  --switcher-vertical-alignment: center;
  --switcher-target-container-width: var(--row-split-fold);
}

/* Image
================================== */
.sunday-cta__media {
  --n: 675;
  --d: 467;
}

/* Copy
================================== */
.sunday-cta__content {
  --flow-space: 1.25rem;
}

.sunday-cta__headline {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 1.6154rem + 1.5385vw, 3rem);
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

/* Schedule
================================== */
.sunday-cta .services {
  --flow-space: var(--space-l);
  --services-gap: 0.9375rem;
  --services-column-gap: clamp(1.25rem, 0.7692rem + 1.9231vw, 2.5rem);
  --services-term-width: clamp(5rem, 4.0385rem + 3.8462vw, 7.5rem);
}

/* Notes
================================== */
.sunday-cta__notes {
  --color-link: currentColor;
  --flow-space: 1.25rem;
  max-inline-size: 37.5rem;
}

/*
TAG LIST BLOCK
A labelled row of term pills -- the topics on an article, and anything else
that ends up tagged.
*/
.tag-list {
  --flow-space: var(--space-s);
}

.tag-list__label {
  color: var(--color-black);
  font-family: var(--font-sans);
  font-size: var(--font-size--2);
  font-weight: var(--font-regular);
  letter-spacing: var(--tracking-wider);
  line-height: var(--leading-fine);
  text-transform: uppercase;
}

.tag-list__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

/* Pill
================================== */
.pill {
  border: 1px solid var(--color-bone);
  border-radius: 100vmax;
  color: var(--color-black);
  display: block;
  font-size: var(--font-size-0);
  line-height: var(--leading-flat);
  padding: var(--space-xs);
  text-align: center;
  text-decoration-line: none;
  transition: background-color var(--duration-fast) var(--ease-out-sine), border-color var(--duration-fast) var(--ease-out-sine), color var(--duration-fast) var(--ease-out-sine);
}
.pill:hover, .pill:focus-visible {
  border-color: var(--color-prussian-blue);
}
.pill[aria-current] {
  background: var(--color-prussian-blue);
  border-color: var(--color-prussian-blue);
  color: var(--color-old-lace);
}

/*
TEAM BLOCK
The body of a Team page: the people on the team, grouped under the section
headings set on the Team post.

Column counts are set outright rather than left to auto-fill so the grid lands
on four across at the 1440px design width -- a min-item-size small enough to
give three columns on a mid-size laptop would give five here. A short last row
stays left-aligned, as drawn.

The profile cards are specific to this page and are not used elsewhere.
*/
.team {
  --region-space: clamp(3rem, 1.75rem + 5vw, 6.25rem);
  --gutter: var(--content-gutter);
  --wrapper-max-width: var(--content-max-width);
  background: var(--color-background);
}

.team__sections {
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 1.75rem + 5vw, 6.25rem);
}

/* Section
================================== */
.team-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
}

.team-section__heading {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 1.6154rem + 1.5385vw, 3rem);
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-normal);
  line-height: 1.0417;
  margin: 0;
}

.team-section__list {
  --gutter: var(--space-s);
  --grid-min-item-size: 0;
  --grid-placement: 1;
}
@media (width >= 360px) {
  .team-section__list {
    --grid-placement: 2;
  }
}
@media (width >= 900px) {
  .team-section__list {
    --grid-placement: 3;
  }
}
@media (width >= 1350px) {
  .team-section__list {
    --grid-placement: 4;
  }
}

/* Card
================================== */
.team-card {
  block-size: 100%;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  position: relative;
}
.team-card:has(.team-card__link:focus-visible) {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.team-card__media {
  --n: 1;
  --d: 1;
}

.team-card__image {
  block-size: 100%;
  inline-size: 100%;
  object-fit: cover;
  object-position: center;
}
@media (prefers-reduced-motion: no-preference) {
  .team-card__image {
    transition: scale var(--duration-slow) var(--ease-out-sine);
  }
}

.team-card:hover .team-card__image,
.team-card:focus-within .team-card__image {
  scale: 1.04;
}

/* Copy
================================== */
.team-card__body {
  background: var(--color-bone);
  color: var(--color-black);
  flex-grow: 1;
  padding: var(--space-s);
}

.team-card__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-block-size: 4.25rem;
}

.team-card__name {
  font-family: var(--font-serif);
  font-size: clamp(1.125rem, 0.9808rem + 0.5769vw, 1.5rem);
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-normal);
  line-height: var(--leading-flat);
  margin: 0;
}

.team-card__link {
  color: inherit;
}
.team-card__link:focus-visible {
  outline: none;
}
.team-card__link:hover {
  text-decoration-color: var(--color-accent);
  text-decoration-line: underline;
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
}

.team-card__role {
  font-size: 0.875rem;
  line-height: 1.4286;
  margin: 0;
  text-wrap: pretty;
}

.cover-link {
  color: inherit;
  text-decoration-line: none;
}
.cover-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.external-link:hover span::after {
  transform: translate(2px, -2px);
}
.external-link span::after {
  content: " ↗";
  color: var(--color-accent);
  display: inline-block;
  font-size: 0.65em;
  font-size: 1cap;
  margin-inline-start: var(--space-2xs);
  transition: transform var(--duration-fast) var(--ease-in-out-sine);
  vertical-align: baseline;
}

.list-inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--list-space, var(--space-s));
  list-style: none;
  margin: 0;
  padding: 0;
}

.list-reset {
  list-style-type: none;
  margin-block-end: 0;
  padding: 0;
}

.region:not([data-no-margin]) {
  margin-block: var(--region-space, var(--space-xl));
  position: relative;
}

.region .region__inner {
  padding-block: var(--region-space, var(--space-xl));
}

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transition: opacity var(--duration-reveal) var(--ease-out-cubic), translate var(--duration-reveal) var(--ease-out-cubic);
    transition-delay: var(--reveal-delay, 0ms);
    translate: 0 var(--reveal-shift, 1.5rem);
  }
  .reveal.is-revealed {
    opacity: 1;
    translate: none;
  }
}
.sticky-wrap {
  --top-space: calc(var(--gin-toolbar-height, 0px) + var(--space-m));
}
.sticky-wrap > * {
  position: sticky;
  inset-block-start: var(--top-space);
}

.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  block-size: 0;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  inline-size: 1px;
  white-space: nowrap;
}

/*# sourceMappingURL=main.css.map */