/* Ryan Smith Photography: WordPress blog chrome. Ordinary hand-written CSS
   assembled from src/wordpress/styles/ by scripts/build-wordpress-chrome.mjs. */

/* ---- src/wordpress/styles/base.css ---- */
/* WordPress chrome: design tokens and element defaults.

   Cascade contract (same order as the static site's Tailwind build, written
   with standard cascade layers): rsp-base (tokens, element defaults) <
   rsp-components (vendor lightbox, menu sheet, footer palette) < rsp-chrome
   (header, menu and footer components). Rules that the static stylesheet
   kept outside any layer stay unlayered here, so they still win, and the
   child theme's own unlayered assets/blog.css loads after this file.

   Widths: phone up to 640px, tablet 641-1024px, desktop from 1025px.
   Dark mode is html.dark, written before first paint. Translucent white and
   black tints are written as oklab(100% 0 0 / n%) / oklab(0% 0 0 / n%):
   Chrome composites colours given in oklab differently from sRGB spellings,
   and these are the colours the released stylesheet painted. */
@layer rsp-base, rsp-components, rsp-chrome;

@font-face {
  font-family: 'Gilda Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/wordpress/fonts/t5tmIRoYMoaYG0WEOh7HwMeR3TDPr7GEch8jrg.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Gilda Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/wordpress/fonts/t5tmIRoYMoaYG0WEOh7HwMeR3T7Pr7GEch8.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@layer rsp-base {
  :root {
    color-scheme: light;
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --font-display: "Gilda Display", Georgia, "Times New Roman", serif;
    /* One motion policy: short, decelerating, never bouncy. */
    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --ease-standard: cubic-bezier(.4, 0, .2, 1);
    --radius-pill: calc(infinity * 1px);

    --kit-page: #fcfcfc;
    --kit-paper: #fff;
    --kit-soft: #fdf6ee;
    --kit-ink: #3a3a3a;
    --kit-muted: #3a3a3a;
    --kit-faint: #6b6b6b;
    --kit-line: #e6e1dc;
    --kit-brand: #06c;
    --kit-primary: #2f343b;
    --kit-primary-hover: #474e58;
    --kit-on-primary: #fff;
    --kit-quiet: transparent;
    --kit-quiet-line: #c9c3bd;
    --kit-quiet-hover: #f4efe9;
    --kit-glow-1: #fbeedf;
    --kit-glow-2: #fad6a5;
    --kit-focus: #06c;
    --kit-radius-button: 999px;
    --kit-radius-card: 14px;
    --kit-radius-shot: 12px;
    --kit-shadow-card: 0 1px 2px #2f2a240a, 0 10px 30px #2f2a2412;
    --kit-shadow-button: 0 6px 16px #2f343b26;
    --kit-shadow-shot: var(--kit-shadow-card);
    --kit-shadow-lift: var(--kit-shadow-card);
    --rsp-heading: #111;
    --rsp-sand: #fbeedf;
    --rsp-sand-strong: #fad6a5;
    --rsp-navy: #141e30;
    --rsp-navy-2: #243b55;
    --rsp-sunset: #b35900;
    --rsp-sunset-hover: #934600;
    --rsp-field-line: #8a8076;
    --rsp-scrim: #0b0f17;

    /* Type: 18px copy (16px on phones), Gilda headings. */
    --kit-body: 18px;
    --kit-lead: 20px;
    --kit-small: 16px;
    --kit-fine: 14px;
    --kit-eyebrow: 12px;
    --kit-h1: clamp(32px, 1.4vw + 22px, 46px);
    --kit-h2: clamp(27px, 1vw + 19px, 36px);
    --kit-h3: clamp(22px, .5vw + 17px, 26px);
  }
  @media (width < 641px) {
    :root { --kit-body: 16px; --kit-lead: 18px; --kit-small: 15px; --kit-eyebrow: 11px; --kit-h1: clamp(30px, 8vw, 36px); }
  }
  :root.dark {
    color-scheme: dark;
    --kit-page: #121212;
    --kit-paper: #242424;
    --kit-soft: #1e1e1e;
    --kit-ink: #ededed;
    --kit-muted: #e2e2e2;
    --kit-faint: #a9a9a9;
    --kit-line: #454545;
    --kit-brand: #b6d0fa;
    --kit-primary: #ece6df;
    --kit-primary-hover: #fff;
    --kit-on-primary: #161616;
    --kit-quiet-line: #686868;
    --kit-quiet-hover: #303030;
    --kit-focus: #b6d0fa;
    --kit-shadow-card: 0 1px 2px #00000033, 0 10px 30px #00000040;
    --kit-shadow-button: none;
    --kit-shadow-shot: var(--kit-shadow-card);
    --kit-shadow-lift: var(--kit-shadow-card);
    --rsp-heading: #f5f5f5;
    --rsp-sand: #2a241e;
    --rsp-sand-strong: #4a3a28;
    --rsp-sunset: #b35900;
    --rsp-sunset-hover: #934600;
    --rsp-field-line: #8c8278;
  }

  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
  body {
    margin: 0;
    background: var(--kit-page);
    color: var(--kit-ink);
    font-family: var(--font-sans);
    font-size: var(--kit-body);
    line-height: 1.65;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  button, input, textarea, select { font: inherit; }
  button { color: inherit; }
  a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
  button, summary { cursor: pointer; }
  :focus-visible { outline: 3px solid var(--kit-focus, var(--kit-primary)); outline-offset: 3px; border-radius: 4px; }
  img, video { display: block; max-width: 100%; height: auto; }
  svg { flex-shrink: 0; }
  p, figure, ol, ul { margin: 0; }
  h1, h2, h3, h4, h5, h6 {
    margin: 0;
    color: var(--rsp-heading);
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: .01em;
    line-height: 1.2;
    text-wrap: balance;
  }
  h1 { font-size: var(--kit-h1); line-height: 1.15; }
  h2 { font-size: var(--kit-h2); }
  h3 { font-size: var(--kit-h3); letter-spacing: .005em; }
  h4 { font-size: 21px; }
  h5, h6 { font-size: 18px; }
  p { color: var(--kit-muted); text-wrap: pretty; }
  strong { color: inherit; font-weight: 700; }
  /* No reset beyond this: plain buttons start bare. */
  :where(button) { border: 0; background: none; padding: 0; appearance: none; }
  hr { border: 0; }
  summary { list-style: none; }
  summary::-webkit-details-marker { display: none; }
  [hidden]:where(:not([hidden='until-found'])) { display: none !important; }
  figcaption { margin-top: 12px; color: var(--kit-faint); font-size: var(--kit-fine); line-height: 1.6; }
  ::selection { background: var(--rsp-sand-strong); color: #111; }
  .dark .logo-dark-invert { filter: invert(1) hue-rotate(180deg); }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    /* Second safeguard while a preference-change callback is still queued. */
    [data-motion-pending] { opacity: 1 !important; transform: none !important; }
  }
  /* Entrances that never ran (below the fold) must still print. */
  @media print {
    [data-motion-pending] { opacity: 1 !important; transform: none !important; }
  }
}

/* Shared helpers used by the chrome, the theme and its photo markup. */
@layer rsp-chrome {
  .rsp-container { margin-inline: auto; width: min(1200px, calc(100% - 64px)); }
  .rsp-icon { display: inline-block; width: 1em; height: 1em; flex-shrink: 0; }
  /* Visually hidden but announced (photo captions, icon-only links). */
  .sr-only {
    position: absolute; overflow: hidden; width: 1px; height: 1px; margin: -1px; padding: 0;
    border-width: 0; white-space: nowrap; clip-path: inset(50%);
  }
  @media (width < 641px) {
    .rsp-container { width: calc(100% - 40px); }
  }
}

/* Same-document anchors land below the floating header. */
[id] { scroll-margin-top: 100px; }

/* A soft cross-fade between pages (Chrome, Edge and Safari 18+). Nothing
   fades for visitors who reduce motion. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

/* ---- PhotoSwipe 5 (MIT): node_modules/photoswipe/dist/photoswipe.css ---- */
@layer rsp-components {
/*! PhotoSwipe main CSS by Dmytro Semenov | photoswipe.com */

.pswp {
  --pswp-bg: #000;
  --pswp-placeholder-bg: #222;
  

  --pswp-root-z-index: 100000;
  
  --pswp-preloader-color: rgba(79, 79, 79, 0.4);
  --pswp-preloader-color-secondary: rgba(255, 255, 255, 0.9);
  
  /* defined via js:
  --pswp-transition-duration: 333ms; */
  
  --pswp-icon-color: #fff;
  --pswp-icon-color-secondary: #4f4f4f;
  --pswp-icon-stroke-color: #4f4f4f;
  --pswp-icon-stroke-width: 2px;

  --pswp-error-text-color: var(--pswp-icon-color);
}


/*
	Styles for basic PhotoSwipe (pswp) functionality (sliding area, open/close transitions)
*/

.pswp {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: var(--pswp-root-z-index);
	display: none;
	touch-action: none;
	outline: 0;
	opacity: 0.003;
	contain: layout style size;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* Prevents focus outline on the root element,
  (it may be focused initially) */
.pswp:focus {
  outline: 0;
}

.pswp * {
  box-sizing: border-box;
}

.pswp img {
  max-width: none;
}

.pswp--open {
	display: block;
}

.pswp,
.pswp__bg {
	transform: translateZ(0);
	will-change: opacity;
}

.pswp__bg {
  opacity: 0.005;
	background: var(--pswp-bg);
}

.pswp,
.pswp__scroll-wrap {
	overflow: hidden;
}

.pswp__scroll-wrap,
.pswp__bg,
.pswp__container,
.pswp__item,
.pswp__content,
.pswp__img,
.pswp__zoom-wrap {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.pswp__img,
.pswp__zoom-wrap {
	width: auto;
	height: auto;
}

.pswp--click-to-zoom.pswp--zoom-allowed .pswp__img {
	cursor: -webkit-zoom-in;
	cursor: -moz-zoom-in;
	cursor: zoom-in;
}

.pswp--click-to-zoom.pswp--zoomed-in .pswp__img {
	cursor: move;
	cursor: -webkit-grab;
	cursor: -moz-grab;
	cursor: grab;
}

.pswp--click-to-zoom.pswp--zoomed-in .pswp__img:active {
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
  cursor: grabbing;
}

/* :active to override grabbing cursor */
.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img,
.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img:active,
.pswp__img {
	cursor: -webkit-zoom-out;
	cursor: -moz-zoom-out;
	cursor: zoom-out;
}


/* Prevent selection and tap highlights */
.pswp__container,
.pswp__img,
.pswp__button,
.pswp__counter {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.pswp__item {
	/* z-index for fade transition */
	z-index: 1;
	overflow: hidden;
}

.pswp__hidden {
	display: none !important;
}

/* Allow to click through pswp__content element, but not its children */
.pswp__content {
  pointer-events: none;
}
.pswp__content > * {
  pointer-events: auto;
}


/*

  PhotoSwipe UI

*/

/*
	Error message appears when image is not loaded
	(JS option errorMsg controls markup)
*/
.pswp__error-msg-container {
  display: grid;
}
.pswp__error-msg {
	margin: auto;
	font-size: 1em;
	line-height: 1;
	color: var(--pswp-error-text-color);
}

/*
class pswp__hide-on-close is applied to elements that
should hide (for example fade out) when PhotoSwipe is closed
and show (for example fade in) when PhotoSwipe is opened
 */
.pswp .pswp__hide-on-close {
	opacity: 0.005;
	will-change: opacity;
	transition: opacity var(--pswp-transition-duration) cubic-bezier(0.4, 0, 0.22, 1);
	z-index: 10; /* always overlap slide content */
	pointer-events: none; /* hidden elements should not be clickable */
}

/* class pswp--ui-visible is added when opening or closing transition starts */
.pswp--ui-visible .pswp__hide-on-close {
	opacity: 1;
	pointer-events: auto;
}

/* <button> styles, including css reset */
.pswp__button {
	position: relative;
	display: block;
	width: 50px;
	height: 60px;
	padding: 0;
	margin: 0;
	overflow: hidden;
	cursor: pointer;
	background: none;
	border: 0;
	box-shadow: none;
	opacity: 0.85;
	-webkit-appearance: none;
	-webkit-touch-callout: none;
}

.pswp__button:hover,
.pswp__button:active,
.pswp__button:focus {
  transition: none;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  opacity: 1;
}

.pswp__button:disabled {
  opacity: 0.3;
  cursor: auto;
}

.pswp__icn {
  fill: var(--pswp-icon-color);
  color: var(--pswp-icon-color-secondary);
}

.pswp__icn {
  position: absolute;
  top: 14px;
  left: 9px;
  width: 32px;
  height: 32px;
  overflow: hidden;
  pointer-events: none;
}

.pswp__icn-shadow {
  stroke: var(--pswp-icon-stroke-color);
  stroke-width: var(--pswp-icon-stroke-width);
  fill: none;
}

.pswp__icn:focus {
	outline: 0;
}

/*
	div element that matches size of large image,
	large image loads on top of it,
	used when msrc is not provided
*/
div.pswp__img--placeholder,
.pswp__img--with-bg {
	background: var(--pswp-placeholder-bg);
}

.pswp__top-bar {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 60px;
	display: flex;
  flex-direction: row;
  justify-content: flex-end;
	z-index: 10;

	/* allow events to pass through top bar itself */
	pointer-events: none !important;
}
.pswp__top-bar > * {
  pointer-events: auto;
  /* this makes transition significantly more smooth,
     even though inner elements are not animated */
  will-change: opacity;
}


/*

  Close button

*/
.pswp__button--close {
  margin-right: 6px;
}


/*

  Arrow buttons

*/
.pswp__button--arrow {
  position: absolute;
  top: 0;
  width: 75px;
  height: 100px;
  top: 50%;
  margin-top: -50px;
}

.pswp__button--arrow:disabled {
  display: none;
  cursor: default;
}

.pswp__button--arrow .pswp__icn {
  top: 50%;
  margin-top: -30px;
  width: 60px;
  height: 60px;
  background: none;
  border-radius: 0;
}

.pswp--one-slide .pswp__button--arrow {
  display: none;
}

/* hide arrows on touch screens */
.pswp--touch .pswp__button--arrow {
  visibility: hidden;
}

/* show arrows only after mouse was used */
.pswp--has_mouse .pswp__button--arrow {
  visibility: visible;
}

.pswp__button--arrow--prev {
  right: auto;
  left: 0px;
}

.pswp__button--arrow--next {
  right: 0px;
}
.pswp__button--arrow--next .pswp__icn {
  left: auto;
  right: 14px;
  /* flip horizontally */
  transform: scale(-1, 1);
}

/*

  Zoom button

*/
.pswp__button--zoom {
  display: none;
}

.pswp--zoom-allowed .pswp__button--zoom {
  display: block;
}

/* "+" => "-" */
.pswp--zoomed-in .pswp__zoom-icn-bar-v {
  display: none;
}


/*

  Loading indicator

*/
.pswp__preloader {
  position: relative;
  overflow: hidden;
  width: 50px;
  height: 60px;
  margin-right: auto;
}

.pswp__preloader .pswp__icn {
  opacity: 0;
  transition: opacity 0.2s linear;
  animation: pswp-clockwise 600ms linear infinite;
}

.pswp__preloader--active .pswp__icn {
  opacity: 0.85;
}

@keyframes pswp-clockwise {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/*

  "1 of 10" counter

*/
.pswp__counter {
  height: 30px;
  margin-top: 15px;
  margin-inline-start: 20px;
  font-size: 14px;
  line-height: 30px;
  color: var(--pswp-icon-color);
  text-shadow: 1px 1px 3px var(--pswp-icon-color-secondary);
  opacity: 0.85;
}

.pswp--one-slide .pswp__counter {
  display: none;
}
}

/* ---- src/wordpress/styles/header.css ---- */
/* The floating glass header, its phone/tablet buttons and the menu sheet.
   Headroom.js adds headroom--pinned/unpinned; the menu sets data-menu-open
   while a dropdown is open so the bar never slides away from it. */

@layer rsp-components {
  /* The menu sheet slides in from the right. It is a native popover, so it
     also opens before (or without) the page script. */
  .rsp-sheet {
    inset: 0 0 0 auto;
    transform: translateX(100%);
    transition: transform .32s var(--ease-out), overlay .32s allow-discrete, display .32s allow-discrete;
  }
  .rsp-sheet:popover-open { transform: none; }
  @starting-style { .rsp-sheet:popover-open { transform: translateX(100%); } }
  .rsp-sheet::backdrop {
    background: #0b0f1700;
    backdrop-filter: blur(0);
    transition: background-color .32s, backdrop-filter .32s, overlay .32s allow-discrete, display .32s allow-discrete;
  }
  .rsp-sheet:popover-open::backdrop { background: #0b0f1766; backdrop-filter: blur(3px); }
  @starting-style { .rsp-sheet:popover-open::backdrop { background: #0b0f1700; backdrop-filter: blur(0); } }
}

@layer rsp-chrome {
  .rsp-skip-link {
    position: absolute; top: -80px; left: 16px; z-index: 100;
    border-radius: 8px; background-color: var(--kit-paper); padding: 12px 16px;
    color: var(--kit-ink); box-shadow: var(--kit-shadow-card);
  }
  .rsp-skip-link:focus { top: 12px; }

  .rsp-header {
    position: sticky; top: 0; z-index: 50; padding-top: 12px;
    transition: transform .28s var(--ease-out), box-shadow .2s ease, background-color .2s ease;
    will-change: transform;
  }
  .rsp-header.headroom--unpinned:not(:focus-within, [data-menu-open]) { transform: translateY(calc(-100% - 8px)); }

  .rsp-header__bar {
    position: relative; isolation: isolate; display: flex; height: 64px;
    align-items: center; justify-content: space-between; gap: 24px; padding-inline: 24px;
  }
  /* The glass is its own layer, so the menu panels (which blur too) are not
     nested inside a blurred element. */
  .rsp-header__glass {
    position: absolute; inset: 0; z-index: -10;
    border: 1px solid oklab(100% 0 0 / 70%); border-radius: var(--radius-pill);
    background-color: color-mix(in oklab, var(--kit-page) 70%, transparent);
    box-shadow: var(--kit-shadow-card);
    -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%);
    transition: box-shadow .3s var(--ease-standard);
  }
  .dark .rsp-header__glass {
    border-color: oklab(100% 0 0 / 20%);
    background-color: color-mix(in oklab, var(--kit-paper) 80%, transparent);
  }
  .rsp-header__home { flex-shrink: 0; border-radius: 6px; }
  .rsp-header__logo { width: 200px; height: auto; }
  .rsp-header__actions { display: flex; flex-shrink: 0; align-items: center; gap: 4px; }

  /* Round contact/close buttons and the Menu pill share one quiet tint. */
  .rsp-header__button {
    display: inline-flex; align-items: center; appearance: none;
    border-radius: var(--radius-pill); background-color: color-mix(in oklab, var(--kit-ink) 6%, transparent);
    color: var(--kit-ink); text-decoration-line: none;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
    transition-duration: .15s; transition-timing-function: var(--ease-standard);
  }
  .rsp-header__button--round { width: 44px; height: 44px; justify-content: center; }
  .rsp-header__button--menu { min-height: 44px; gap: 8px; padding-inline: 12px; font-size: 15.5px; }
  .rsp-header__contact-icon { font-size: 18px; }
  .rsp-header__menu-icon { width: 17px; height: 17px; }
  @media (hover: hover) {
    .rsp-header__button:hover { background-color: color-mix(in oklab, var(--kit-ink) 10%, transparent); }
  }

  .rsp-sheet {
    width: min(420px, 100vw); height: 100dvh; max-height: none; margin: 0 0 0 auto; padding: 0; overflow-y: auto;
    border-width: 0 0 0 1px; border-style: solid; border-color: var(--kit-line);
    background-color: var(--kit-page); color: var(--kit-ink); box-shadow: 0 0 60px #0003;
  }
  .rsp-sheet__top { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 8px; }
  .rsp-sheet__logo { width: 160px; height: auto; }
  .rsp-sheet__close-icon { width: 16px; height: 16px; }
  .rsp-sheet__nav { padding: 0 12px 40px; }
  .rsp-sheet__list, .rsp-sheet__sublist { list-style-type: none; }
  .rsp-sheet__list { padding: 0; }
  .rsp-sheet__sublist { margin-bottom: 8px; margin-left: 12px; border-color: var(--kit-line); border-left: 1px solid var(--kit-line); padding-left: 12px; }
  .rsp-sheet__link {
    display: flex; min-height: 48px; align-items: center; gap: 12px; border-radius: 12px; padding-inline: 12px;
    font-size: 18px; text-decoration-line: none;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
    transition-duration: .15s; transition-timing-function: var(--ease-standard);
  }
  .rsp-sheet__link--top { color: var(--kit-ink); font-family: var(--font-display); font-size: 22px; }
  .rsp-sheet__link--sub { color: var(--kit-muted); }
  .rsp-sheet__link--active { background-color: color-mix(in oklab, var(--kit-ink) 5%, transparent); }
  @media (hover: hover) {
    .rsp-sheet__link:hover { background-color: color-mix(in oklab, var(--kit-ink) 5%, transparent); }
  }
  .rsp-sheet__icon { color: var(--rsp-sunset); font-size: 18px; }
  .rsp-sheet__icon--sub { font-size: 15px; }

  @media (width < 1025px) {
    .rsp-header__bar { gap: 8px; }
    .rsp-header__nav { display: none; }
  }
  @media (width >= 1025px) {
    .rsp-header__actions { display: none; }
  }
  @media (width < 641px) {
    .rsp-header { padding-top: 8px; }
    .rsp-header__bar { height: 56px; padding-inline: 16px; }
    .rsp-header__logo { width: 168px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .rsp-header { transition: none; }
  }
}

/* Phones scale the bar continuously on the smallest screens instead of
   switching layouts (unlayered, as in the static stylesheet). */
@media (width < 641px) {
  [data-headroom] > .rsp-header__bar { gap: 8px; padding-inline: clamp(8px, calc(13.334vw - 34.667px), 16px); }
  .rsp-header__logo { width: clamp(120px, calc(80vw - 136px), 168px); }
  .rsp-header__button--menu { padding-inline: 8px; }
}

/* ---- src/wordpress/styles/navigation.css ---- */
/* The desktop menu (src/wordpress/nav.jsx, Base UI NavigationMenu). States
   come from Base UI's own attributes: data-popup-open on an open trigger,
   data-active on the current link, data-starting-style/data-ending-style
   while a panel enters or leaves, data-activation-direction for sideways
   panel swaps and data-instant for jumps. Base UI also sets the sizing
   variables (--positioner-*, --popup-*, --available-width,
   --transform-origin); --duration/--easing are set on the positioner. */

@layer rsp-chrome {
  .rsp-nav__list { display: flex; align-items: center; padding: 0; list-style-type: none; }

  /* Top-level items: quiet text with a hairline that draws in on hover or
     while its menu is open, and stays under the current section. */
  .rsp-nav__top {
    display: inline-flex; min-height: 44px; align-items: center; gap: 6px; padding-inline: 12px;
    appearance: none; cursor: pointer; white-space: nowrap;
    color: color-mix(in oklab, var(--kit-ink) 75%, transparent);
    font-size: 15.5px; letter-spacing: .01em; text-decoration-line: none;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
    transition-duration: .2s; transition-timing-function: var(--ease-standard);
  }
  .rsp-nav__top[data-popup-open] { color: var(--kit-ink); }
  .rsp-nav__label { position: relative; }
  .rsp-nav__label::after {
    content: ''; position: absolute; inset-inline: 0; bottom: -6px; height: 1px; pointer-events: none;
    background-color: currentColor; transform-origin: 50%; scale: 0% 1;
    transition-property: transform, translate, scale, rotate; transition-duration: .3s; transition-timing-function: var(--ease-out);
  }
  .rsp-nav__top[data-popup-open] .rsp-nav__label::after { scale: 100% 1; }
  .rsp-nav__label--current::after { background-color: var(--rsp-sunset); scale: 100% 1; }
  .rsp-nav__caret {
    display: flex; color: color-mix(in oklab, var(--kit-ink) 45%, transparent);
    transition-property: transform, translate, scale, rotate; transition-duration: .3s; transition-timing-function: var(--ease-out);
  }
  .rsp-nav__caret[data-popup-open] { rotate: 180deg; }
  .rsp-nav__caret-icon { width: 10px; height: 10px; }
  .rsp-nav__home-icon { font-size: 17px; }
  @media (hover: hover) {
    .rsp-nav__top:hover { color: var(--kit-ink); }
    .rsp-nav__top:hover .rsp-nav__label::after { scale: 100% 1; }
  }

  /* A dropdown's links. The panel slides sideways when the visitor moves
     from one open menu to its neighbour. */
  .rsp-nav__content {
    width: max-content; min-width: 250px; padding: 6px;
    transition-property: opacity, translate; transition-duration: var(--duration); transition-timing-function: var(--easing);
  }
  .rsp-nav__content:is([data-starting-style], [data-ending-style]) { opacity: 0; }
  .rsp-nav__content[data-starting-style][data-activation-direction=left],
  .rsp-nav__content[data-ending-style][data-activation-direction=right] { translate: -24px 0; }
  .rsp-nav__content[data-starting-style][data-activation-direction=right],
  .rsp-nav__content[data-ending-style][data-activation-direction=left] { translate: 24px 0; }
  .rsp-nav__sublist { padding: 0; list-style-type: none; }
  .rsp-nav__link {
    display: flex; min-height: 44px; align-items: center; gap: 12px; border-radius: 14px; padding-inline: 14px;
    color: color-mix(in oklab, var(--kit-ink) 80%, transparent); font-size: 15px; white-space: nowrap;
    text-decoration-line: none; outline-style: none;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
    transition-duration: .15s; transition-timing-function: var(--ease-standard);
  }
  .rsp-nav__link:focus-visible { background-color: color-mix(in oklab, var(--kit-ink) 4.5%, transparent); color: var(--kit-ink); }
  /* Forced colours replace the focus background above, and the link's
     outline-style: none would then leave keyboard focus invisible. There
     (only) a system-colour outline marks it. Intentional accessibility delta. */
  @media (forced-colors: active) {
    .rsp-nav__link:focus-visible { outline: 2px solid Highlight; outline-offset: -2px; }
  }
  .rsp-nav__link[data-active] { color: var(--kit-ink); }
  .rsp-nav__link-icon {
    color: color-mix(in oklab, var(--kit-ink) 35%, transparent); font-size: 14px;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
    transition-duration: .15s; transition-timing-function: var(--ease-standard);
  }
  .rsp-nav__link[data-active] .rsp-nav__link-icon { color: var(--rsp-sunset); }
  @media (hover: hover) {
    .rsp-nav__link:hover { background-color: color-mix(in oklab, var(--kit-ink) 4.5%, transparent); color: var(--kit-ink); }
    .rsp-nav__link:hover .rsp-nav__link-icon { color: var(--rsp-sunset); }
  }

  /* The floating panel: Base UI positions and sizes it, the glass matches
     the header bar. A 12px bridge above it keeps hover intent alive. */
  .rsp-nav__positioner {
    z-index: 60; width: var(--positioner-width); max-width: var(--available-width); height: var(--positioner-height);
    transition-property: top, left, right, bottom; transition-duration: var(--duration); transition-timing-function: var(--easing);
  }
  .rsp-nav__positioner::before { content: ''; position: absolute; inset-inline: 0; top: -12px; height: 12px; }
  .rsp-nav__positioner[data-instant] { transition-property: none; }
  .rsp-nav__popup {
    position: relative; width: var(--popup-width); height: var(--popup-height); transform-origin: var(--transform-origin);
    border: 1px solid oklab(100% 0 0 / 70%); border-radius: 20px;
    background-color: color-mix(in oklab, var(--kit-page) 85%, transparent); color: var(--kit-ink);
    box-shadow: var(--kit-shadow-card); outline-style: none;
    -webkit-backdrop-filter: blur(40px) saturate(150%); backdrop-filter: blur(40px) saturate(150%);
    transition-property: opacity, scale, translate, width, height; transition-duration: var(--duration); transition-timing-function: var(--easing);
  }
  .rsp-nav__popup:is([data-starting-style], [data-ending-style]) { opacity: 0; translate: 0 -4px; scale: .98; }
  .rsp-nav__popup[data-ending-style] { transition-duration: .15s; }
  .dark .rsp-nav__popup {
    border-color: oklab(100% 0 0 / 20%);
    background-color: color-mix(in oklab, var(--kit-paper) 90%, transparent);
  }
  .rsp-nav__viewport { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 20px; }
}

/* ---- src/wordpress/styles/footer.css ---- */
/* The navy footer band: brand, socials and search on the left, the site
   links and member badges on the right, then a thin bottom bar with the
   address and copyright. It is light on dark in both colour schemes. */

@layer rsp-components {
  .site-footer {
    --kit-ink: #efefef;
    --kit-muted: #e4e4e4;
    --kit-faint: #c5c9d1;
    --kit-brand: #dde6f5;
    --kit-line: #ffffff26;
    --kit-paper: #ffffff12;
    --rsp-heading: #fff;
    color-scheme: dark;
  }
  .site-footer a { color: #ddd; }
  .site-footer a:hover { color: #fff; }
  .site-footer img { filter: none; }
}

@layer rsp-chrome {
  .rsp-footer {
    position: relative; overflow: hidden; margin-top: 96px;
    background-image: linear-gradient(to bottom right in oklab, var(--rsp-navy) 0%, var(--rsp-navy-2) 100%);
    color: #efefef;
  }
  .rsp-footer__glow {
    position: absolute; top: -192px; left: 12%; width: 560px; height: 560px; pointer-events: none;
    border-radius: var(--radius-pill); background-color: color-mix(in oklab, var(--rsp-sunset) 10%, transparent);
    filter: blur(120px);
  }
  .rsp-footer__inner { position: relative; }
  .rsp-footer__main { display: grid; gap: 48px; padding-top: 64px; padding-bottom: 48px; }
  .rsp-footer__brand { display: flex; flex-direction: column; gap: 20px; }
  .rsp-footer__identity { display: flex; align-items: center; gap: 16px; }
  .rsp-footer__logo { width: 64px; height: auto; flex-shrink: 0; }
  .rsp-footer__name { margin: 0; color: #fff !important; font-family: var(--font-display); font-size: 24px; line-height: 1.25; }
  .rsp-footer__tagline {
    margin: 4px 0 0; color: oklab(100% 0 0 / 60%) !important;
    font-family: var(--font-sans); font-size: 14px; font-weight: 400; letter-spacing: .02em;
  }

  .rsp-footer__social { display: flex; gap: 8px; padding: 0; list-style-type: none; }
  .rsp-footer__social-link {
    display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center;
    border: 1px solid oklab(100% 0 0 / 15%); border-radius: var(--radius-pill);
    color: oklab(100% 0 0 / 80%) !important;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
    transition-duration: .2s; transition-timing-function: var(--ease-standard);
  }
  .rsp-footer__social-icon { font-size: 17px; }

  .rsp-footer__search { position: relative; width: 100%; max-width: 300px; }
  .rsp-footer__search-input {
    width: 100%; min-height: 44px; appearance: none; padding-right: 48px; padding-left: 16px;
    border: 1px solid oklab(100% 0 0 / 15%); border-radius: var(--radius-pill);
    background-color: oklab(100% 0 0 / 6%); color: #fff; font-size: 15px;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
    transition-duration: .15s; transition-timing-function: var(--ease-standard);
  }
  .rsp-footer__search-input::placeholder { color: oklab(100% 0 0 / 50%); }
  .rsp-footer__search-input:focus {
    border-color: oklab(100% 0 0 / 40%); background-color: oklab(100% 0 0 / 10%);
    outline-style: none;
  }
  /* Forced colours override the border/background focus cue above; only
     there, a system-colour outline keeps keyboard focus visible. */
  @media (forced-colors: active) {
    .rsp-footer__search-input:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
  }
  .rsp-footer__search-button {
    position: absolute; inset-block: 0; right: 0; display: inline-flex; width: 44px; align-items: center; justify-content: center;
    appearance: none; border-radius: var(--radius-pill); color: oklab(100% 0 0 / 70%);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
    transition-duration: .15s; transition-timing-function: var(--ease-standard);
  }
  .rsp-footer__search-icon { width: 17px; height: 17px; }

  .rsp-footer__aside { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
  .rsp-footer__links { display: flex; flex-wrap: wrap; column-gap: 36px; row-gap: 14px; padding: 0; list-style-type: none; }
  .rsp-footer__link-item { font-size: 15px; line-height: 1.375; white-space: nowrap; }
  .rsp-footer__link-item a {
    color: oklab(100% 0 0 / 70%) !important; text-decoration-line: none;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
    transition-duration: .15s; transition-timing-function: var(--ease-standard);
  }
  .rsp-footer__badges { display: flex; flex-wrap: wrap; align-items: center; column-gap: 32px; row-gap: 16px; }
  .rsp-footer__badge-link { display: block; }
  .rsp-footer__badge {
    width: auto; height: 64px; object-fit: contain; opacity: .8;
    transition-property: opacity; transition-duration: .2s; transition-timing-function: var(--ease-standard);
  }

  .rsp-footer__bottom {
    display: flex; flex-direction: column; gap: 8px; padding-block: 28px;
    border-color: oklab(100% 0 0 / 10%); border-top: 1px solid oklab(100% 0 0 / 10%);
    color: oklab(100% 0 0 / 55%); font-size: 13.5px;
  }
  .rsp-footer__contact, .rsp-footer__copyright { margin: 0; }
  .rsp-footer__contact a { color: oklab(100% 0 0 / 75%) !important; text-decoration-line: none; }
  .rsp-footer__copyright { flex-shrink: 0; }

  /* These two hover colours are not limited to hover-capable pointers in the
     static footer, so a tapped link keeps them too. */
  .rsp-footer__link-item a:hover, .rsp-footer__contact a:hover { color: #fff !important; }
  @media (hover: hover) {
    .rsp-footer__social-link:hover { border-color: oklab(100% 0 0 / 35%); color: #fff !important; }
    .rsp-footer__search-button:hover { background-color: oklab(100% 0 0 / 10%); color: #fff; }
    .rsp-footer__badge:hover { opacity: 1; }
  }

  @media (width >= 1025px) {
    .rsp-footer__main { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 64px; }
    .rsp-footer__aside { padding-top: 12px; }
    .rsp-footer__bottom { flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; }
  }
  @media (width < 1025px) {
    .rsp-footer__links { column-gap: 28px; }
    .rsp-footer__bottom { text-align: center; }
  }
  @media (width < 641px) {
    .rsp-footer { margin-top: 64px; }
    .rsp-footer__main { padding-top: 48px; text-align: center; }
    .rsp-footer__brand { align-items: center; }
    .rsp-footer__identity { flex-direction: column; gap: 12px; }
    .rsp-footer__links, .rsp-footer__badges { justify-content: center; }
  }
}

/* ---- src/wordpress/styles/overlays.css ---- */
/* Things that float over the page: the lightbox caption and the Ask
   launcher's phone size. PhotoSwipe's own stylesheet (MIT, pinned in
   package-lock.json) is placed by the build in the rsp-components layer
   right after base.css. Both rules below are unlayered, as before. */

/* The caption shows at the foot of the lightbox, clear of long captions on
   phones and of the device's safe area. */
.pswp__caption {
  position: absolute; inset-inline: 16px; bottom: max(16px, env(safe-area-inset-bottom, 0px));
  width: fit-content; max-width: 760px; margin-inline: auto; padding: 8px 16px; border-radius: 1rem;
  background: rgb(0 0 0 / .55); color: #eee; font-size: 14px; line-height: 1.45; text-align: center;
  pointer-events: auto;
}
.pswp__caption a { color: inherit; text-decoration: underline; }

/* The shared launcher keeps its own defaults for other sites; here it turns
   into a round button at the site's phone width. */
@media (width < 641px) {
  #rsp-ask-launcher { width: 48px; padding: 0; justify-content: center; right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); }
  #rsp-ask-launcher span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}