/* Editable WordPress blog components: everything inside <main> plus the
   breadcrumbs above it. Tokens (--kit-*, --rsp-*, --font-*, --ease-*),
   element defaults, header, menus and footer come from the WordPress chrome
   stylesheet that inc/live-chrome.php prints in <head> before this file.
   Ordinary rules only: no utility classes, build step or --tw-* variables.
   The two newer tokens (--radius-pill, --ease-standard) carry fallbacks, so
   this file also renders exactly under the previous borrowed stylesheet:
   the theme can be installed before the chrome source is switched.

   Widths: phone up to 640px, tablet 641-1024px, desktop from 1025px. */

/* ---- Editorial direction -------------------------------------------------
   Magazine headlines, an accent hairline under titles, warm accent colour.
   Scoped to main[data-editorial] / main[data-blog] as on the static site. */
main[data-editorial] {
  counter-reset: chapter;
  --ed-accent: #a8743f;
  --ed-glass: rgb(255 255 255 / .32);
  --ed-glass-solid: rgb(255 255 255 / .9);
  --ed-glass-edge: rgb(255 255 255 / .75);
  --ed-glass-shine: rgb(255 255 255 / .9);
  --ed-line: rgb(168 116 63 / .4);
}
:root.dark main[data-editorial] {
  --ed-accent: #d9a46c;
  --ed-glass: rgb(36 36 36 / .4);
  --ed-glass-solid: rgb(36 36 36 / .92);
  --ed-glass-edge: rgb(255 255 255 / .1);
  --ed-glass-shine: rgb(255 255 255 / .08);
  --ed-line: rgb(217 164 108 / .45);
}
main[data-editorial] h2 { font-size: clamp(32px, 2.2vw + 14px, 50px); line-height: 1.08; letter-spacing: -.012em; }
/* Long addresses and links break inside their column instead of spilling. */
main[data-editorial] :where(.flow) { overflow-wrap: break-word; }
main[data-editorial] .flow > h1 { font-size: clamp(36px, 2.4vw + 16px, 58px); line-height: 1.08; letter-spacing: -.012em; }
main[data-editorial] .rsp-page-title h1 { font-size: clamp(36px, 2.4vw + 16px, 58px); line-height: 1.08; letter-spacing: -.012em; }
main[data-editorial] .rsp-page-title h1::after {
  content: ""; display: block; width: 56px; height: 1px; margin: 24px auto 0; background: var(--ed-accent);
}
main[data-blog] .rsp-page-title h1 { font-size: clamp(32px, 2vw + 16px, 52px); text-wrap: balance; }
main[data-blog] .rsp-eyebrow, main[data-blog] .rsp-eyebrow a { color: var(--ed-accent); text-decoration: none; }
main[data-blog] .rsp-eyebrow a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Text links in prose: the heading ink over a faint warm hairline; on hover
   or focus an accent line draws in from the left. */
main[data-editorial] :where(.flow) a:not([class]) {
  color: var(--rsp-heading);
  text-decoration: none;
  padding-bottom: 1px;
  background:
    linear-gradient(var(--ed-accent), var(--ed-accent)) 0 100% / 0 1px no-repeat,
    linear-gradient(var(--ed-line), var(--ed-line)) 0 100% / 100% 1px no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size .45s var(--ease-out), color .25s ease;
}
main[data-editorial] :where(.flow) a:not([class]):is(:hover, :focus-visible) { color: var(--ed-accent); background-size: 100% 1px, 100% 1px; }
@media (prefers-reduced-motion: reduce) {
  main[data-editorial] :where(.flow) a:not([class]) { transition: none; }
}

/* Vertical rhythm for a run of blocks (the post body). Spacing on a block
   itself wins: every selector sits inside :where(). */
:where(.flow) > * + * { margin-top: 20px; }
:where(.flow) > * + :where(h2) { margin-top: 56px; }
:where(.flow) > * + :where(h3, h4) { margin-top: 36px; }
:where(.flow) > :where(h2) + * { margin-top: 24px; }
:where(.flow) > :where(h3, h4) + * { margin-top: 20px; }
:where(.flow) > * + :where(section, .grid, figure, [data-gallery], [data-reviews], [data-ig], [data-reveal]) { margin-top: 40px; }
:where(.flow) > :where(h2) + :where(section, .grid, figure, [data-gallery], [data-reviews], [data-ig], [data-reveal]) { margin-top: 32px; }
:where(.flow) > :where(h3, h4) + :where(section, .grid, figure, [data-gallery], [data-reviews], [data-ig], [data-reveal]) { margin-top: 24px; }
@media (width < 641px) {
  :where(.flow) > * + :where(h2) { margin-top: 44px; }
  :where(.flow) > * + :where(h3, h4) { margin-top: 30px; }
}

/* ---- Shared measures and list layout ----------------------------------- */
.rsc-container { margin-inline: auto; width: min(1200px, calc(100% - 64px)); }
.rsc-text-column { margin-inline: auto; width: min(760px, calc(100% - 64px)); }
.rsc-main { overflow-x: clip; }
.rsc-contents { display: contents; }
.rsc-list { margin-top: 56px; }
.rsc-card-grid, .rsc-related-grid { display: grid; column-gap: 32px; row-gap: 56px; }
.rsc-card-grid--after-lead { margin-top: 64px; border-top: 1px solid var(--kit-line); padding-top: 64px; }
.rsc-empty { color: var(--kit-faint); text-align: center; }
.rsc-separator { margin-inline: 8px; color: #b3a99f; }

/* ---- Breadcrumbs (above <main>) ---------------------------------------- */
.rsc-breadcrumbs { padding-top: 16px; padding-bottom: 4px; color: var(--kit-faint); font-size: 14px; }
.rsc-breadcrumbs-trail { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; }
.rsc-breadcrumbs-item { display: contents; }
.rsc-breadcrumbs-sep { color: #b3a99f; }
.rsc-breadcrumbs-link { color: var(--kit-faint); text-decoration-line: none; }
.rsc-breadcrumbs-here { color: var(--kit-muted); }
@media (hover: hover) {
  .rsc-breadcrumbs-link:hover { color: var(--kit-ink); text-decoration-line: underline; }
}

/* ---- Archive and post title panels ------------------------------------- */
.rsc-title-wrap { padding-top: 24px; }
.rsc-title-card {
  position: relative; overflow: hidden; border-radius: 32px; padding: 56px;
  background-image: linear-gradient(110deg in oklab, var(--kit-paper) 0%, color-mix(in oklab, var(--kit-soft) 70%, transparent) 50%, color-mix(in oklab, var(--rsp-sand) 25%, transparent) 100%);
  text-align: center; box-shadow: 0 0 0 1px var(--kit-line), var(--kit-shadow-card);
}
html.dark .rsc-title-card { background-image: linear-gradient(110deg in oklab, var(--kit-paper) 0%, var(--kit-soft) 50%, color-mix(in oklab, var(--rsp-sand) 5%, transparent) 100%); }
.rsc-title-eyebrow { position: relative; margin: 0 0 16px; font-size: 13px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.rsc-title-heading { position: relative; max-width: 900px; margin-inline: auto; }
.rsc-powered { position: relative; margin: 16px 0 0; color: var(--kit-faint); font-size: 14px; letter-spacing: .04em; }
.rsc-muted-link, .rsc-author-link { color: var(--kit-faint); }
@media (hover: hover) { .rsc-muted-link:hover, .rsc-author-link:hover { color: var(--kit-ink); } }
.rsc-author-link, .rsc-plain-link { text-decoration: none; }

/* A category's intro under its title: a subtitle, the venue photo with its
   caption, the address line, a paragraph, sometimes an Instagram feed. The
   static intro copied into term meta keeps its authored class string; only
   its stable rsp-list-intro / rsp-photo / rsp-feed blocks are styled here. */
.rsp-list-intro { position: relative; max-width: 720px; margin: 24px auto 0; color: var(--kit-muted); font-size: 17px; }
main[data-blog] .rsp-list-intro a:not(.rsp-feed a) { color: var(--rsp-heading); }
main[data-blog] .rsp-list-intro :is(h2, h3) { margin: 0; font-size: clamp(20px, .6vw + 15px, 25px); line-height: 1.3; text-wrap: balance; }
main[data-blog] .rsp-list-intro h4 { margin: 0; font-family: inherit; font-size: 15.5px; font-weight: 600; letter-spacing: .02em; color: var(--rsp-heading); }
/* Kept below "> * + *" in specificity, so paragraphs after the first get the gap. */
main[data-blog] .rsp-list-intro :where(p) { margin: 0; }
main[data-blog] .rsp-list-intro > * + * { margin-top: 18px; }
main[data-blog] .rsp-list-intro > .rsp-photo { margin-block: 26px; }
main[data-blog] .rsp-list-intro > .rsp-feed { margin-block: 26px; }
main[data-blog] .rsp-list-intro .rsp-photo figcaption {
  margin-top: 12px; text-align: center; font-size: 14.5px; line-height: 1.45; color: var(--kit-faint); text-wrap: balance;
}
main[data-blog] .rsp-list-intro .rsp-photo a { border-radius: 18px; }

/* The static Instagram feed (shared ShootCal feed markup, scig-* hooks). */
.rsp-feed .scig { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.rsp-feed .scig-grid { display: grid; width: 100%; grid-template-columns: var(--ig-d); gap: 12px; }
.rsp-feed .scig-item { position: relative; display: block; overflow: hidden; aspect-ratio: 1; border-radius: 12px; background-color: var(--kit-soft); }
.rsp-feed .scig-item > img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: contain; }
.rsp-feed .scig-item > img + span {
  position: absolute; inset: 0; background-color: oklab(0% 0 0 / 0%);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
  transition-duration: .3s; transition-timing-function: var(--ease-standard, cubic-bezier(.4, 0, .2, 1));
}
/* Carousel/video badge (the feed script may replace it with the same shape). */
.rsp-feed .scig-item > span + span { position: absolute; top: 8px; right: 8px; color: #fff; filter: drop-shadow(0 1px 3px #0009); }
.rsp-feed .scig-item > span + span svg { width: 20px; height: 20px; }
@media (hover: hover) {
  .rsp-feed .scig-item:hover > img + span { background-color: oklab(0% 0 0 / 15%); }
}
.rsp-feed .scig-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
.rsp-feed .scig-more {
  display: inline-flex; min-height: 48px; align-items: center; padding-inline: 24px;
  border: 1px solid var(--kit-quiet-line); border-radius: var(--radius-pill, calc(infinity * 1px)); background-color: var(--kit-paper);
  color: var(--kit-ink); font-size: 16px; font-weight: 600;
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
  transition-duration: .15s; transition-timing-function: var(--ease-standard, cubic-bezier(.4, 0, .2, 1));
}
.rsp-feed .scig-follow {
  display: inline-flex; min-height: 48px; align-items: center; gap: 8px; padding-inline: 24px;
  border-radius: var(--radius-pill, calc(infinity * 1px)); background-image: linear-gradient(to right in oklab, #833ab4 0%, #e1306c 50%, #f77737 100%);
  color: #fff; font-size: 16px; font-weight: 600; text-decoration-line: none; box-shadow: var(--kit-shadow-button);
  transition: filter .15s var(--ease-standard, cubic-bezier(.4, 0, .2, 1));
}
@media (hover: hover) {
  .rsp-feed .scig-more:hover { background-color: var(--kit-quiet-hover); }
  .rsp-feed .scig-follow:hover { filter: brightness(110%); }
}
@media (width < 1025px) { .rsp-feed .scig-grid { grid-template-columns: var(--ig-t); } }
@media (641px <= width < 1025px) {
  .rsp-feed .scig-grid[data-scig-tablet-columns="3"]:has(> [data-scig-item]:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (width < 641px) {
  .rsp-feed .scig-grid { grid-template-columns: var(--ig-m); gap: 8px; }
  .rsp-feed [data-scig-mobile-hidden] { display: none; }
}

/* Venue facts under a category intro: the static site's VenueDetails block
   (section[data-venue-details], src/blog-browse.jsx), copied with the intro
   into term meta. Its authored class string stays as stored; the block is
   styled here by its data hook and structure: list of locations, each a
   name/address column and an optional "Venue website" link, then a notice. */
main[data-blog] [data-venue-details] {
  position: relative; max-width: 720px; margin: 24px auto 0; padding-top: 16px;
  border-top-style: solid; border-top-width: 1px; border-color: var(--kit-line);
  color: var(--kit-muted); font-size: 14px; line-height: 1.625; text-align: left;
}
main[data-blog] [data-venue-details] > ul { display: grid; gap: 16px; margin: 0; padding: 0; list-style-type: none; }
main[data-blog] [data-venue-details] > ul > li { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 16px; row-gap: 4px; }
main[data-blog] [data-venue-details] > ul > li > div { min-width: 0; flex: 1 1 260px; }
main[data-blog] [data-venue-details] > ul > li > div > p { margin: 0; color: var(--rsp-heading); font-weight: 600; }
main[data-blog] [data-venue-details] address { font-style: normal; overflow-wrap: break-word; }
main[data-blog] [data-venue-details] > ul > li > a {
  display: inline-flex; min-height: 44px; align-items: center; gap: 4px;
  color: var(--kit-muted); font-size: 14px;
  text-decoration-line: underline; text-decoration-color: var(--kit-line); text-underline-offset: 4px;
}
main[data-blog] [data-venue-details] > ul > li > a:focus-visible { outline-width: 2px; outline-offset: 2px; outline-color: var(--kit-primary); }
@media (hover: hover) {
  main[data-blog] [data-venue-details] > ul > li > a:hover { color: var(--rsp-heading); }
}
main[data-blog] [data-venue-details] > p { margin: 12px 0 0; color: var(--kit-faint); font-size: 13px; }

/* ---- Browse by category ------------------------------------------------ */
.rsc-browse { margin-top: 32px; }
.rsc-browse-summary { display: block; cursor: pointer; list-style-type: none; }
.rsc-browse-face {
  position: relative; display: flex; min-height: 64px; align-items: center; gap: 16px;
  border-radius: var(--radius-pill, calc(infinity * 1px)); padding: 8px 8px 8px 24px;
  background-color: color-mix(in oklab, var(--kit-paper) 85%, transparent);
  box-shadow: 0 0 0 1px var(--kit-line), var(--kit-shadow-card);
  -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%);
}
html.dark .rsc-browse-face { background-color: color-mix(in oklab, var(--kit-paper) 90%, transparent); }
.rsc-browse-label { display: flex; min-width: 0; flex: 1; flex-direction: column; line-height: 1.25; }
.rsc-browse-kicker { color: var(--ed-accent); font-size: 11.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.rsc-browse-current {
  overflow: hidden; padding-top: 2px; color: var(--rsp-heading); font-family: var(--font-display); font-size: 19px;
  text-overflow: ellipsis; white-space: nowrap;
}
.rsc-browse-total { color: var(--kit-faint); font-family: var(--font-sans); font-size: 14px; }
.rsc-browse-button {
  display: inline-flex; min-height: 48px; flex-shrink: 0; align-items: center; gap: 8px; padding-inline: 20px;
  appearance: none; cursor: pointer; border: 0 solid; border-radius: var(--radius-pill, calc(infinity * 1px));
  background-color: var(--kit-primary); color: var(--kit-on-primary); font-size: 15px; font-weight: 600;
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
  transition-duration: .15s; transition-timing-function: var(--ease-standard, cubic-bezier(.4, 0, .2, 1));
}
@media (hover: hover) { .rsc-browse-button:hover { background-color: var(--kit-primary-hover); } }
.rsc-browse-icon { width: 17px; height: 17px; }
.rsc-chevron {
  width: 16px; height: 16px;
  transition-property: transform, translate, scale, rotate; transition-duration: .3s; transition-timing-function: var(--ease-standard, cubic-bezier(.4, 0, .2, 1));
}
details[open] .rsp-browse-chevron { transform: rotate(180deg); }
.rsc-browse-sheet {
  margin-top: 16px; border-radius: 28px; padding: 28px; background-color: var(--kit-page);
  box-shadow: 0 0 0 1px var(--kit-line), var(--kit-shadow-card);
}
.rsc-browse-pinned { display: grid; gap: 12px; margin: 0; padding: 0; list-style-type: none; }
.rsc-browse-groups { display: grid; align-items: flex-start; gap: 12px; margin-top: 20px; }
.rsc-browse-group {
  min-width: 0; border-radius: 20px; background-color: color-mix(in oklab, var(--kit-soft) 60%, transparent);
  box-shadow: 0 0 0 1px var(--kit-line);
}
.rsc-browse-group-toggle {
  display: flex; min-height: 56px; align-items: center; gap: 12px; padding: 8px 12px;
  cursor: pointer; list-style-type: none; border-radius: 20px; color: var(--rsp-heading);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
  transition-duration: .15s; transition-timing-function: var(--ease-standard, cubic-bezier(.4, 0, .2, 1));
}
.rsc-browse-group-toggle:focus-visible { outline: 2px solid var(--kit-primary); outline-offset: 2px; }
@media (hover: hover) { .rsc-browse-group-toggle:hover { background-color: color-mix(in oklab, var(--kit-ink) 4%, transparent); } }
.rsc-browse-group-title { min-width: 0; flex: 1; font-size: 15px; font-weight: 600; line-height: 1.375; }
.rsc-browse-group-title--primary { font-size: 17px; }
.rsc-browse-group-chevron { flex-shrink: 0; }
.rsc-browse-group[open] .rsc-browse-group-chevron { rotate: 180deg; }
.rsc-browse-group-list { margin: 0; padding: 0 8px 8px; list-style-type: none; }
.rsc-browse-group-list--primary { display: grid; column-gap: 12px; }
.rsc-browse-count { flex-shrink: 0; color: var(--kit-faint); font-size: 13px; font-variant-numeric: tabular-nums; }
.rsc-browse-thumb { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; background-color: var(--kit-soft); }
img.rsc-browse-thumb { object-fit: cover; }
.rsc-browse-item {
  display: flex; min-height: 48px; align-items: center; gap: 12px; padding: 6px 12px 6px 6px;
  border-radius: 16px; 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, cubic-bezier(.4, 0, .2, 1));
}
.rsc-browse-item:focus-visible { background-color: color-mix(in oklab, var(--kit-ink) 5%, transparent); }
.rsc-browse-item--nested { margin-left: 20px; }
.rsc-browse-item--current { background-color: color-mix(in oklab, var(--rsp-sand) 70%, transparent); box-shadow: 0 0 0 1px var(--rsp-sand-strong); }
.rsc-browse-item--pinned { background-color: var(--kit-soft); box-shadow: 0 0 0 1px var(--kit-line); }
.rsc-browse-item--pinned.rsc-browse-item--current { box-shadow: 0 0 0 1px var(--rsp-sand-strong); }
html.dark .rsc-browse-item--current { background-color: var(--rsp-sand); }
@media (hover: hover) {
  .rsc-browse-item:hover { background-color: color-mix(in oklab, var(--kit-ink) 5%, transparent); }
  /* The current item keeps its light tint on hover, in dark mode too. */
  html .rsc-browse-item--current:hover { background-color: color-mix(in oklab, var(--rsp-sand) 70%, transparent); }
}
.rsc-browse-name { min-width: 0; flex: 1; font-size: 15.5px; line-height: 1.375; }
[data-browse-grid] { scroll-margin-top: 170px; }

/* ---- Post cards: the whole card remains one accessible title link ------ */
.rsc-card { position: relative; display: flex; flex-direction: column; }
.rsc-card-media { position: relative; overflow: hidden; border-radius: 22px; background: var(--kit-soft); box-shadow: var(--kit-shadow-card); }
.rsc-card-image { aspect-ratio: 3 / 2; width: 100%; object-fit: cover; transition: transform .7s var(--ease-out), translate .7s var(--ease-out), scale .7s var(--ease-out), rotate .7s var(--ease-out); }
@media (hover: hover) { .rsc-card:hover .rsc-card-image { scale: 1.03; } }
.rsc-card-tag {
  position: absolute; top: 16px; left: 16px; display: inline-flex; min-height: 32px; align-items: center;
  border-radius: 999px; background: color-mix(in oklab, var(--kit-page) 90%, transparent); padding-inline: 14px;
  color: var(--rsp-heading); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  box-shadow: var(--kit-shadow-card); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.rsc-card-copy { display: flex; flex-direction: column; gap: 12px; }
.rsc-card-copy--lead { padding-top: 24px; }
.rsc-card-copy--standard { padding-top: 20px; }
.rsc-card-meta { margin: 0; color: var(--kit-faint); font-size: 14px; letter-spacing: .04em; }
.rsc-card-title { margin: 0; line-height: 1.15; }
.rsc-card-title--lead { font-size: clamp(30px, 1.6vw + 18px, 44px); }
.rsc-card-title--standard { font-size: clamp(22px, .5vw + 18px, 26px); }
.rsc-card-link { color: var(--rsp-heading); text-decoration: none; }
.rsc-card-link::after { content: ''; position: absolute; inset: 0; }
.rsc-card-summary { margin: 0; color: var(--kit-muted); }
.rsc-card-summary--lead { font-size: 17px; }
.rsc-card-summary--standard { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font-size: 15.5px; }
main[data-blog] .rsp-blog-card :is(h2, h3) { text-wrap: balance; }
main[data-blog] .rsp-blog-card :is(h2, h3) a, main[data-blog] .rsp-post-cta a { color: var(--rsp-heading); }
main[data-blog] .rsp-blog-card:hover :is(h2, h3) a { color: var(--ed-accent); }

/* ---- Single posts ------------------------------------------------------- */
.rsc-post-meta { position: relative; margin: 24px 0 0; color: var(--kit-faint); font-size: 15px; letter-spacing: .04em; }
.rsc-post-hero { width: min(1600px, calc(100% - 12px)); margin: 40px auto 0; }
.rsc-hero-link { display: block; overflow: hidden; background: var(--kit-soft); cursor: zoom-in; }
.rsc-hero-image { display: block; width: 100%; height: auto; }
.rsc-post-body { margin-top: 48px; }
.rsc-post-booking { margin-top: 64px; }
.rsc-post-cta { margin: 0; border-radius: 22px; background: var(--kit-soft); padding: 32px 36px; font-size: 18px; text-align: center; box-shadow: 0 0 0 1px var(--kit-line); }
.rsc-post-neighbors { display: grid; gap: 16px; margin-top: 64px; }
.rsc-post-step {
  display: flex; flex-direction: column; gap: 6px; border-radius: 22px; background: var(--kit-paper); padding: 24px 28px;
  text-decoration: none; box-shadow: 0 0 0 1px var(--kit-line), var(--kit-shadow-card);
  transition: transform .3s var(--ease-standard, cubic-bezier(.4, 0, .2, 1)), translate .3s var(--ease-standard, cubic-bezier(.4, 0, .2, 1)), scale .3s var(--ease-standard, cubic-bezier(.4, 0, .2, 1)), rotate .3s var(--ease-standard, cubic-bezier(.4, 0, .2, 1));
}
@media (hover: hover) { .rsc-post-step:hover { translate: 0 -2px; } }
.rsc-post-step-label { color: var(--kit-faint); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.rsc-post-step-title { color: var(--rsp-heading); font-family: var(--font-display); font-size: 21px; line-height: 1.375; }
.rsc-related { margin-top: 96px; }
.rsc-related-title { text-align: center; }
.rsc-related-title::after { content: ''; display: block; width: 56px; height: 1px; margin: 22px auto 0; background: var(--ed-accent); }
.rsc-related-grid { margin-top: 48px; }

/* Authored prose: a 760px column with a drop cap on the opening paragraph. */
main[data-blog] .rsp-prose { font-size: var(--kit-body); }
main[data-blog] .rsp-prose > p:first-child::first-letter {
  float: left; margin: .1em .12em 0 0;
  font-family: var(--font-display); font-size: 4.15em; line-height: .74; color: var(--ed-accent);
}
@supports (initial-letter: 3) or (-webkit-initial-letter: 3) {
  main[data-blog] .rsp-prose > p:first-child::first-letter {
    float: none; margin: 0 .16em 0 0; font-size: inherit; line-height: inherit;
    -webkit-initial-letter: 3; initial-letter: 3;
  }
}
main[data-blog] .rsp-prose h2 { font-size: clamp(28px, 1.4vw + 16px, 38px); line-height: 1.12; }
main[data-blog] .rsp-prose h3 { font-size: clamp(23px, .6vw + 17px, 28px); }
main[data-blog] .rsp-prose blockquote {
  margin: 0; padding: 4px 0 4px 26px; border-left: 2px solid var(--ed-accent);
  font-family: var(--font-display); font-size: 1.2em; line-height: 1.45; color: var(--rsp-heading);
}
main[data-blog] .rsp-prose pre { overflow-x: auto; padding: 18px 22px; border-radius: 14px; background: var(--kit-soft); font-size: 15px; }
main[data-blog] .rsp-prose ul, main[data-blog] .rsp-prose ol { padding-left: 1.3em; }
main[data-blog] .rsp-prose hr { height: 1px; margin-block: 44px; border: 0; background: var(--kit-line); }

/* Photos run the full width of the screen (up to 1600px) with a thin 6px
   gutter; captions show in the lightbox; a 1px hairline between photos.
   Embeds keep the 1100px measure. */
main[data-blog] .rsp-prose > :is(.rsp-embed, .rsp-feed) {
  width: min(1100px, 100vw - 40px); margin-inline: calc(50% - min(550px, 50vw - 20px));
}
main[data-blog] .rsp-prose > :is(.rsp-photo, .rsp-pair):not(.rsp-photo--small) {
  width: min(1600px, 100vw - 12px); margin-inline: calc(50% - min(800px, 50vw - 6px));
}
main[data-blog] .rsp-prose > * + :is(.rsp-photo, .rsp-pair, .rsp-embed, .rsp-feed),
main[data-blog] .rsp-prose > :is(.rsp-photo, .rsp-pair, .rsp-embed, .rsp-feed) + * { margin-top: 40px; }
main[data-blog] .rsp-prose > :is(.rsp-photo, .rsp-pair):not(.rsp-photo--small) + :is(.rsp-photo, .rsp-pair):not(.rsp-photo--small) { margin-top: 1px; }
main[data-blog] .rsp-photo { margin-block: 0; }
main[data-blog] .rsp-photo a { display: block; overflow: hidden; background: var(--kit-soft); cursor: zoom-in; }
main[data-blog] .rsp-photo a:not([data-zoom]) { cursor: pointer; }
main[data-blog] .rsp-photo a:focus-visible { outline: 2px solid var(--kit-focus); outline-offset: 3px; }
main[data-blog] .rsp-photo img { display: block; width: 100%; height: auto; }
/* Two upright photos share a row with the same thin gutter. */
main[data-blog] .rsp-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; align-items: start; }
/* A small photo (the old "thumbnail" size) floats beside the copy. */
main[data-blog] .rsp-prose > .rsp-photo--small { width: min(320px, 60%); margin-inline: 0 0; float: right; margin: 6px 0 20px 28px; }
main[data-blog] .rsp-prose > .rsp-photo--small[data-align="left"] { float: left; margin: 6px 28px 20px 0; }
main[data-blog] .rsp-prose > .rsp-photo--small + * { margin-top: 20px; }
main[data-blog] .rsp-prose::after { content: ""; display: block; clear: both; }
/* Embeds (video, a 360 tour, a map) hold their shape while they load;
   Instagram cards centre at their own width. */
main[data-blog] .rsp-embed { margin-block: 0; }
main[data-blog] .rsp-embed:not(.rsp-embed--instagram) { aspect-ratio: var(--ratio, 16 / 9); border-radius: 18px; overflow: hidden; background: var(--kit-soft); box-shadow: var(--kit-shadow-card); }
main[data-blog] .rsp-embed:not(.rsp-embed--instagram) iframe { display: block; width: 100%; height: 100%; border: 0; }
main[data-blog] .rsp-embed--instagram { display: flex; justify-content: center; }
main[data-blog] .rsp-embed--instagram blockquote { width: min(540px, 100%); min-height: 300px; margin: 0; padding: 24px; border-radius: 18px; background: var(--kit-paper); box-shadow: var(--kit-shadow-card); text-align: center; }
main[data-blog] .rsp-embed--instagram blockquote a { color: var(--rsp-heading); }
main[data-blog] .rsp-embed--instagram iframe { border-radius: 18px !important; }
/* Post photos are square-edged. */
main[data-blog] .rsp-post :is(.rsp-photo, .rsp-pair, .rsp-post-hero) :is(a, img) { border-radius: 0; box-shadow: none; }

/* ---- Paging ------------------------------------------------------------- */
.rsc-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 80px; }
.rsc-pager-item { display: contents; }
.rsc-pager-pill {
  display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center;
  border-radius: var(--radius-pill, calc(infinity * 1px)); padding-inline: 16px; font-size: 15px; 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, cubic-bezier(.4, 0, .2, 1));
}
.rsc-pager-link { color: var(--kit-ink); }
.rsc-pager-link--step { box-shadow: 0 0 0 1px var(--kit-line); }
@media (hover: hover) { .rsc-pager-link:hover { background-color: color-mix(in oklab, var(--kit-ink) 5%, transparent); } }
.rsc-pager-current { background-color: var(--kit-primary); color: var(--kit-on-primary); }
.rsc-pager-gap { padding-inline: 4px; color: var(--kit-faint); }

/* ---- Missing page (404 fragment from the WordPress chrome package) ----- */
.rsc-notfound-intro { max-width: 560px; margin: 20px auto 0; color: var(--kit-muted); font-size: 17px; }
.rsc-notfound-search { position: relative; width: 100%; max-width: 640px; margin: 32px auto 0; }
.rsc-notfound-input {
  width: 100%; min-height: 56px; appearance: none; padding-right: 128px; padding-left: 24px;
  border: 1px solid var(--kit-line); border-radius: var(--radius-pill, calc(infinity * 1px)); background-color: var(--kit-paper);
  color: var(--kit-ink); font-size: 17px; box-shadow: var(--kit-shadow-card);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
  transition-duration: .15s; transition-timing-function: var(--ease-standard, cubic-bezier(.4, 0, .2, 1));
}
.rsc-notfound-input::placeholder { color: var(--kit-faint); }
.rsc-notfound-input:focus { border-color: var(--kit-primary); outline-style: none; }
/* Forced colours override the border focus cue; only there, a system-colour
   outline keeps keyboard focus visible (intentional accessibility delta). */
@media (forced-colors: active) {
  .rsc-notfound-input:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
}
.rsc-notfound-submit {
  position: absolute; inset-block: 6px; right: 6px; display: inline-flex; align-items: center; justify-content: center;
  padding-inline: 24px; border-radius: var(--radius-pill, calc(infinity * 1px)); background-color: var(--kit-primary);
  color: var(--kit-on-primary); font-size: 15px; font-weight: 600;
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
  transition-duration: .15s; transition-timing-function: var(--ease-standard, cubic-bezier(.4, 0, .2, 1));
}
.rsc-notfound-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 720px; margin: 32px auto 0; padding: 0; list-style-type: none; }
.rsc-notfound-link {
  display: inline-flex; min-height: 44px; align-items: center; padding-inline: 20px;
  border: 1px solid var(--kit-line); border-radius: var(--radius-pill, calc(infinity * 1px)); background-color: var(--kit-paper);
  color: var(--kit-ink); font-size: 15px; font-weight: 500; 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, cubic-bezier(.4, 0, .2, 1));
}
@media (hover: hover) { .rsc-notfound-link:hover { border-color: var(--kit-primary); color: var(--kit-primary); } }
.rsc-notfound-latest { margin-top: 56px; }
/* The missing page's cards only drop the underline line, keeping the base
   1px decoration thickness (theme cards reset the whole shorthand). */
.rsc-notfound-latest .rsc-card-link { text-decoration-thickness: 1px; }

/* ---- Breakpoints -------------------------------------------------------- */
@media (width >= 641px) {
  .rsc-card-grid, .rsc-related-grid, .rsc-post-neighbors, .rsc-browse-pinned, .rsc-browse-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rsc-browse-group--primary { grid-column: span 2 / span 2; }
  .rsc-browse-group-list--primary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rsc-browse-narrow { display: none; }
  .rsc-post-step--newer { grid-column-start: 2; text-align: right; }
  /* A lone upright photo fits the screen's height, centred. */
  main[data-blog] .rsp-photo--tall a { width: fit-content; max-width: 100%; margin-inline: auto; }
  main[data-blog] .rsp-photo--tall img { width: auto; max-width: 100%; max-height: calc(100svh - 12px); }
}
@media (width >= 1025px) {
  .rsc-card--lead { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 48px; }
  .rsc-card-copy--lead { padding-top: 0; }
}
@media (width < 1025px) { .rsc-title-card { padding-inline: 40px; } }
@media (width < 641px) {
  .rsc-container, .rsc-text-column { width: calc(100% - 40px); }
  .rsc-list { margin-top: 40px; }
  .rsc-card-grid--after-lead { margin-top: 48px; padding-top: 48px; }
  .rsc-title-wrap { padding-top: 16px; }
  .rsc-title-card { border-radius: 24px; padding: 40px 20px; }
  .rsc-post-hero { width: 100%; margin-top: 24px; }
  .rsc-post-body { margin-top: 32px; }
  .rsc-post-cta { padding-inline: 24px; }
  .rsc-related { margin-top: 64px; }
  .rsc-pager { margin-top: 56px; }
  .rsc-browse { margin-top: 24px; }
  .rsc-browse-face { min-height: 56px; gap: 12px; padding-left: 16px; }
  .rsc-browse-current { font-size: 17px; }
  .rsc-browse-total, .rsc-browse-wide { display: none; }
  .rsc-browse-button { min-height: 44px; padding-inline: 16px; }
  .rsc-browse-sheet { border-radius: 22px; padding: 16px; }
  .rsc-browse-item--nested { margin-left: 16px; }
  .rsc-notfound-input { min-height: 48px; padding-right: 96px; padding-left: 20px; font-size: 16px; }
  .rsc-notfound-submit { padding-inline: 16px; }
  .rsc-notfound-latest { margin-top: 40px; }
  main[data-blog] .rsp-prose > * + :is(.rsp-photo, .rsp-pair, .rsp-embed, .rsp-feed),
  main[data-blog] .rsp-prose > :is(.rsp-photo, .rsp-pair, .rsp-embed, .rsp-feed) + * { margin-top: 28px; }
  main[data-blog] .rsp-prose > :is(.rsp-photo, .rsp-pair):not(.rsp-photo--small) + :is(.rsp-photo, .rsp-pair):not(.rsp-photo--small) { margin-top: 1px; }
  main[data-blog] .rsp-post-hero { width: 100%; }
  main[data-blog] .rsp-prose > :is(.rsp-photo, .rsp-pair):not(.rsp-photo--small) { width: calc(100% + 40px); margin-inline: -20px; }
}