/*
Theme Name: Editorial Blog
Description: Classic PHP theme for the English editorial blog. Global shell, shared components and basic templates built on theme.json tokens.
Version: 0.1.0
Requires at least: 7.1
Tested up to: 7.1
Requires PHP: 8.3
Text Domain: editorial-blog
*/

/*
 * Values live in theme.json (docs/design-system.md, revised in Task 12.1). This block only
 * gives the generated custom properties the design system token names.
 */
:root {
  --color-background: var(--wp--preset--color--background);
  --color-surface: var(--wp--preset--color--surface);
  --color-surface-raised: var(--wp--preset--color--surface-raised);
  --color-surface-code: var(--wp--preset--color--surface-code);
  --color-surface-action: var(--wp--preset--color--surface-action);
  --color-footer: var(--wp--preset--color--footer);
  --color-text-primary: var(--wp--preset--color--text-primary);
  --color-text-body: var(--wp--preset--color--text-body);
  --color-text-secondary: var(--wp--preset--color--text-secondary);
  --color-text-on-band: var(--wp--preset--color--text-on-band);
  --color-action: var(--wp--preset--color--action);
  --color-action-hover: var(--wp--preset--color--action-hover);
  --color-on-action: var(--wp--preset--color--on-action);
  --color-border: var(--wp--preset--color--border);
  --color-border-control: var(--wp--preset--color--border-control);
  --color-focus: var(--wp--preset--color--focus);
  --color-error: var(--wp--preset--color--error);
  --color-disabled-surface: var(--wp--preset--color--disabled-surface);
  --color-disabled-text: var(--wp--preset--color--disabled-text);

  --font-display: var(--wp--preset--font-family--poppins);
  --font-sans: var(--wp--preset--font-family--editorial-sans);
  --text-eyebrow: var(--wp--custom--text--eyebrow);
  --text-sm: var(--wp--preset--font-size--text-sm);
  --text-base: var(--wp--preset--font-size--text-base);
  --text-lg: var(--wp--preset--font-size--text-lg);
  --text-article: var(--wp--custom--text--article);
  --text-deck: var(--wp--custom--text--deck);
  --heading-sm: var(--wp--preset--font-size--heading-sm);
  --heading-md: var(--wp--preset--font-size--heading-md);
  --heading-lg: var(--wp--preset--font-size--heading-lg);
  --display: var(--wp--preset--font-size--display);

  --space-1: var(--wp--preset--spacing--space-1);
  --space-2: var(--wp--preset--spacing--space-2);
  --space-3: var(--wp--preset--spacing--space-3);
  --space-4: var(--wp--preset--spacing--space-4);
  --space-5: var(--wp--preset--spacing--space-5);
  --space-6: var(--wp--preset--spacing--space-6);
  --space-7: var(--wp--preset--spacing--space-7);
  --space-8: var(--wp--preset--spacing--space-8);

  --width-container: var(--wp--custom--width--container);
  --width-header: var(--wp--custom--width--header);
  --width-wide: var(--wp--style--global--wide-size);
  --width-reading: var(--wp--style--global--content-size);
  --gutter: var(--wp--custom--gutter);
  --section-space: var(--wp--custom--section-space);
  --grid-gap-row: var(--wp--custom--grid-gap--row);
  --grid-gap-column: var(--wp--custom--grid-gap--column);
  --radius-md: var(--wp--custom--radius--md);
  --radius-lg: var(--wp--custom--radius--lg);
  --radius-pill: var(--wp--custom--radius--pill);
  --border-thin: var(--wp--custom--border--thin);
  --border-strong: var(--wp--custom--border--strong);
  --target-min: var(--wp--custom--target-min);
  --shadow-glow: var(--wp--custom--shadow--glow);
  --shadow-glow-hover: var(--wp--custom--shadow--glow-hover);
  --shadow-lifted: var(--wp--custom--shadow--lifted);
  --gradient-page: var(--wp--custom--gradient--page);
  --gradient-card: var(--wp--custom--gradient--card);
  --gradient-glow: var(--wp--custom--gradient--glow);
  --gradient-band: var(--wp--custom--gradient--band);
  --scrim: var(--wp--custom--scrim);
}

/* Base */
*,
*::before,
*::after {
  box-sizing: border-box;
}
body {
  margin: 0;
  background-image: var(--gradient-page);
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
ul,
ol {
  margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}
img {
  max-width: 100%;
  height: auto;
}

/* Focus, skip link and reduced motion: one focus ring on every surface */
:focus-visible {
  outline: var(--border-strong) solid var(--color-focus);
  outline-offset: 3px;
}
.skip-link {
  position: absolute;
  z-index: 100000;
  top: var(--space-2);
  left: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--color-action);
  color: var(--color-on-action);
  font: 700 var(--text-base) / 1.5 var(--font-display);
  text-decoration: none;
}
.skip-link:not(:focus),
.screen-reader-text:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (prefers-reduced-motion: no-preference) {
  a,
  button {
    transition:
      color 160ms,
      background-color 160ms,
      border-color 160ms,
      box-shadow 160ms,
      transform 160ms;
  }
}

/* Layout */
.container {
  width: min(var(--width-container), 100% - 2 * var(--gutter));
  margin-inline: auto;
}
.reading {
  width: min(var(--width-reading), 100%);
  margin-inline: auto;
}
.card-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--grid-gap-row) var(--grid-gap-column);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Panels of one row share its height; their content stays at the top. */
.card-grid > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}
@media (min-width: 40em) {
  .card-grid--2,
  .card-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 60em) {
  .card-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Eyebrow: category and context labels. Block with an inline rule (not flex), so a long single
   word still breaks inside narrow columns at large text sizes. */
.card__category,
.page-header__label,
.entry__category,
.band__label {
  color: var(--color-action);
  font: 700 var(--text-eyebrow) / 1.4 var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
:is(
  .card__category,
  .page-header__label,
  .entry__category,
  .band__label
)::before {
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: 2px;
  margin-right: var(--space-3);
  vertical-align: middle;
  background: currentColor;
}

/* Header and navigation: always visible, wraps instead of collapsing, not sticky */
.site-header {
  border-bottom: var(--border-thin) solid var(--color-border);
  background: var(--color-background);
}
.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: var(--space-6);
  padding-block: var(--space-2);
}
.brand {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  color: var(--color-text-primary);
  font: 700 var(--text-lg) / 1.2 var(--font-display);
  letter-spacing: -0.01em;
  text-decoration: none;
  overflow-wrap: anywhere;
}
/* Header search left of the menu (Epic 18, docs/design-system.md#header); a full row below 40em */
.site-header__tools {
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 auto;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2) var(--space-6);
}
.search-form--header {
  flex: 0 1 22rem;
  /* A grid track would not shrink below the field's intrinsic width at 320 px or 400% zoom. */
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}
.search-form--header .search-form__row {
  flex-wrap: nowrap;
}
.search-form--header .input {
  flex: 1 1 auto;
  width: 100%;
  padding-block: 0.5rem;
  font-size: var(--text-sm);
}
/* Declared before .button: the compound selector keeps the square 44 px icon button. */
.button.button--icon {
  flex: 0 0 auto;
  width: var(--target-min);
  padding: 0;
}
.button--icon .icon {
  display: block;
  flex: none;
}
.search-form--header .button {
  box-shadow: none;
}
/* Collapsed behind the magnifier toggle only when scripted (has-js is set in the head). */
.button.search-toggle,
.search-toggle .search-toggle__close {
  display: none;
}
.has-js .button.search-toggle {
  display: inline-flex;
}
.has-js .site-header__tools:not(.is-search-open) .search-form--header {
  display: none;
}
.is-search-open .search-toggle {
  border-color: var(--color-border-control);
  background: transparent;
  color: var(--color-text-primary);
}
.is-search-open .search-toggle__open {
  display: none;
}
.is-search-open .search-toggle__close {
  display: block;
}
.button[aria-busy="true"] {
  opacity: 0.7;
  cursor: progress;
}
@media (max-width: 39.99em) {
  .site-header__tools {
    flex-basis: 100%;
    justify-content: space-between;
  }
  .search-form--header {
    flex: 1 1 100%;
  }
  /* Open: field and close button share a row; the menu moves to the next one. */
  .is-search-open .search-form--header {
    flex: 1 1 0;
  }
  .is-search-open .site-nav {
    flex-basis: 100%;
  }
}
.nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Navigation, form and field labels use the preloaded heading face: text that sets the header
   height must not depend on a face that arrives after the first paint (docs/performance.md). */
.site-header .nav-list a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  color: var(--color-text-secondary);
  font: 700 var(--text-sm) / 1.5 var(--font-display);
  letter-spacing: 0.01em;
  text-decoration: none;
  text-underline-offset: 0.35em;
}
.site-header .nav-list a:hover {
  color: var(--color-text-primary);
  text-decoration: underline;
}
.site-header .nav-list a[aria-current] {
  color: var(--color-text-primary);
  text-decoration: underline var(--border-strong) var(--color-action);
}

/* Footer */
.site-footer {
  margin-top: var(--section-space);
  padding-block: var(--space-7);
  border-top: var(--border-thin) solid var(--color-border);
  background: var(--color-footer);
  color: var(--color-text-primary);
}
.site-main:has(> .band:last-child) + .site-footer {
  margin-top: 0;
}
.site-footer__inner {
  display: grid;
  gap: var(--space-6);
}
.site-footer__text {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}
.site-footer .nav-list a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  color: var(--color-text-primary);
  text-decoration: underline;
  text-underline-offset: 0.3em;
}
.site-footer .nav-list a:hover {
  color: var(--color-action);
}
@media (min-width: 40em) {
  .site-footer__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }
}

/* Buttons and links */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--target-min);
  padding: 0.625rem 1.5rem;
  border: var(--border-thin) solid transparent;
  border-radius: var(--radius-pill);
  font: 700 var(--text-base) / 1.5 var(--font-display);
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.button--primary {
  background: var(--color-action);
  box-shadow: var(--shadow-glow);
  color: var(--color-on-action);
}
.button--primary:hover {
  background: var(--color-action-hover);
  box-shadow: var(--shadow-glow-hover);
  color: var(--color-on-action);
}
.button--secondary {
  border-color: var(--color-action);
  background: transparent;
  color: var(--color-text-primary);
}
.button--secondary:hover {
  border-color: var(--color-action-hover);
  background: var(--color-surface-action);
  color: var(--color-text-primary);
}
@media (prefers-reduced-motion: no-preference) {
  .button:hover {
    transform: translateY(-2px);
  }
}
.button--primary:active {
  background: var(--color-action);
  box-shadow: none;
  transform: none;
}
.button--secondary:active {
  background: var(--color-surface-raised);
  transform: none;
}
.button:disabled {
  border-color: var(--color-border-control);
  border-style: dashed;
  background: var(--color-disabled-surface);
  box-shadow: none;
  color: var(--color-disabled-text);
  transform: none;
  cursor: not-allowed;
}
.text-link {
  color: var(--color-action);
  text-decoration: underline 1px;
  text-underline-offset: 0.15em;
  overflow-wrap: anywhere;
}
.text-link:hover {
  color: var(--color-action-hover);
  text-decoration-thickness: 2px;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Search form (docs/design-system.md#inputs) */
.search-form {
  display: grid;
  gap: var(--space-2);
}
.search-form__label {
  font: 700 var(--text-sm) / 1.5 var(--font-display);
}
.search-form__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.input {
  flex: 1 1 12rem;
  min-width: 0;
  min-height: var(--target-min);
  padding: 0.625rem 1.25rem;
  border: var(--border-thin) solid var(--color-border-control);
  border-radius: var(--radius-pill);
  background: var(--color-surface-raised);
  color: var(--color-text-primary);
  font: 400 var(--text-base) / 1.5 var(--font-sans);
}
.input::placeholder {
  color: var(--color-text-secondary);
}
.input:focus-visible {
  border-color: var(--color-action);
}
.input[aria-invalid="true"] {
  border-color: var(--color-error);
  box-shadow: inset 0 0 0 1px var(--color-error);
}
.input:disabled {
  border-style: dashed;
  background: var(--color-disabled-surface);
  color: var(--color-disabled-text);
}

/* Cards: DOM order is image, category, title, excerpt, meta; panels with the title as the only link */
.card {
  position: relative;
  display: grid;
  align-content: start;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  min-width: 0;
  overflow: hidden;
  padding: 0 var(--space-5) var(--space-5);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--gradient-card);
}
.card:hover {
  border-color: var(--color-action);
}
.card__media {
  margin: 0 calc(-1 * var(--space-5)) var(--space-2);
}
.card__image {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.card--no-image,
.card--compact {
  padding-top: var(--space-5);
}
.card .card__title {
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-size: var(--heading-sm);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.005em;
}
.card .card__link {
  color: var(--color-text-primary);
  text-decoration: none;
  text-underline-offset: 0.15em;
}
.card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}
.card .card__link:hover {
  text-decoration: underline;
}
.card__excerpt {
  color: var(--color-text-secondary);
}
.card__meta {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}
.card--featured .card__image {
  aspect-ratio: 16 / 9;
}
.card--featured .card__title {
  font-size: var(--display);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.card--featured .card__excerpt {
  color: var(--color-text-body);
  font-size: var(--text-lg);
}
/* Featured without image: a large title on the page, not an empty dark panel. */
.card--featured.card--no-image {
  max-width: 48rem;
  padding: 0;
  border: 0;
  background: none;
}
.card--compact .card__title {
  font-size: var(--text-lg);
}
@media (min-width: 40em) {
  .card--horizontal:not(.card--no-image) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    /* The last row absorbs a taller image so text rows stay together. */
    grid-template-rows: repeat(3, auto) 1fr;
    column-gap: var(--grid-gap-column);
    padding: 0 var(--space-5) 0 0;
  }
  .card--horizontal:not(.card--no-image) .card__media {
    grid-row: span 4;
    margin: 0;
  }
  .card--horizontal:not(.card--no-image) .card__image {
    height: 100%;
  }
  .card--horizontal:not(.card--no-image) .card__category {
    padding-top: var(--space-5);
  }
  .card--horizontal:not(.card--no-image) .card__meta {
    padding-bottom: var(--space-5);
  }
  .card--horizontal.card--no-image {
    max-width: var(--width-reading);
  }

  /*
   * Featured with image: text over the image (docs/design-system.md#cards). The image fills
   * every row; the text sits in rows 2-5 on a solid scrim (0.8) that starts space-5 above it,
   * and a 4rem transition ends exactly where the solid scrim starts. Stacking uses z-index on
   * grid items, never position, so the title link overlay still covers the whole card.
   */
  .card--featured:not(.card--no-image) {
    grid-template-rows: minmax(4rem, 1fr) repeat(3, auto) auto;
    aspect-ratio: 16 / 9;
    padding: 0;
    box-shadow: var(--shadow-lifted);
  }
  .card--featured:not(.card--no-image) > * {
    z-index: 2;
    grid-column: 1;
    max-width: 44rem;
    margin-inline: clamp(1.5rem, 4vw, 3.5rem);
  }
  .card--featured:not(.card--no-image) .card__media {
    z-index: 0;
    grid-row: 1 / -1;
    max-width: none;
    margin: 0;
  }
  .card--featured:not(.card--no-image) .card__image {
    height: 100%;
    aspect-ratio: auto;
  }
  .card--featured:not(.card--no-image)::before,
  .card--featured:not(.card--no-image)::after {
    content: "";
    z-index: 1;
    grid-column: 1;
  }
  .card--featured:not(.card--no-image)::before {
    grid-row: 2 / -1;
    margin-top: calc(-1 * var(--space-5));
    background: var(--scrim);
  }
  .card--featured:not(.card--no-image)::after {
    grid-row: 1;
    align-self: end;
    height: 4rem;
    margin-bottom: calc(var(--space-5) - var(--space-3));
    background: linear-gradient(to bottom, transparent, var(--scrim));
  }
  .card--featured:not(.card--no-image) .card__category {
    grid-row: 2;
    color: var(--color-text-primary);
  }
  .card--featured:not(.card--no-image) .card__category::before {
    background: var(--color-action);
  }
  .card--featured:not(.card--no-image) .card__title {
    grid-row: 3;
    text-shadow: 0 0.25rem 2.5rem rgb(11 11 23 / 0.85);
  }
  .card--featured:not(.card--no-image) .card__excerpt {
    grid-row: 4;
  }
  .card--featured:not(.card--no-image) .card__meta {
    grid-row: 5;
    margin-bottom: clamp(1.5rem, 4vw, 3rem);
    color: var(--color-text-body);
  }
}
@media (min-width: 60em) {
  /* The text column is at most 47.5rem wide: the scrim stays solid to 48rem, then fades. */
  .card--featured:not(.card--no-image) {
    aspect-ratio: 2 / 1;
  }
  .card--featured:not(.card--no-image)::before,
  .card--featured:not(.card--no-image)::after {
    width: min(100%, 56rem);
    -webkit-mask-image: linear-gradient(90deg, #000 48rem, transparent);
    mask-image: linear-gradient(90deg, #000 48rem, transparent);
  }
}

/* Page header, empty state and 404 */
.page-header {
  display: grid;
  gap: var(--space-4);
  padding-block: var(--space-8) var(--space-7);
}
.page-header__title {
  font-size: var(--heading-lg);
  line-height: 1.1;
  letter-spacing: -0.02em;
  /* A searched term can be one long unbroken string; break-word would still widen the grid. */
  overflow-wrap: anywhere;
}
.page-header__text {
  max-width: var(--width-reading);
  color: var(--color-text-secondary);
  font-size: var(--text-lg);
}
.empty-state {
  display: grid;
  gap: var(--space-4);
  max-width: var(--width-reading);
  padding: var(--space-6);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--gradient-card);
}
.empty-state .empty-state__title {
  font-size: var(--heading-sm);
  line-height: 1.25;
}
.error-page .actions {
  margin-top: var(--space-6);
}

/* Listing: pagination in pills */
.pagination {
  margin-top: var(--space-7);
}
.pagination__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--target-min);
  min-height: var(--target-min);
  padding-inline: var(--space-4);
  border: var(--border-thin) solid var(--color-border-control);
  border-radius: var(--radius-pill);
  color: var(--color-text-primary);
  font: 700 var(--text-base) / 1.5 var(--font-display);
  text-decoration: none;
}
.pagination a.page-numbers:hover {
  border-color: var(--color-action);
  background: var(--color-surface-action);
  text-decoration: underline;
}
.pagination .current {
  border-color: var(--color-action);
  background: var(--color-action);
  color: var(--color-on-action);
}
.pagination .dots {
  border-color: transparent;
  color: var(--color-text-secondary);
}

/* Search: form and result count in the listing header */
.page-header .search-form {
  max-width: var(--width-reading);
}
.page-header__count {
  color: var(--color-text-secondary);
}

/* Listing search and category filter (docs/design-system.md#filters, #loading) */
.page-header__status {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  align-items: baseline;
}
.page-header__status p {
  margin: 0;
}
.filters__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  padding: 0.5rem 1.125rem;
  border: var(--border-thin) solid var(--color-border-control);
  border-radius: var(--radius-pill);
  color: var(--color-text-primary);
  font: 700 var(--text-sm) / 1.5 var(--font-display);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.chip:hover {
  border-color: var(--color-action);
  background: var(--color-surface-action);
  color: var(--color-text-primary);
  text-decoration: underline;
}
.chip[aria-current="page"] {
  border-color: var(--color-action);
  background: var(--color-action);
  color: var(--color-on-action);
}
.chip[aria-current="page"]:hover {
  border-color: var(--color-action-hover);
  background: var(--color-action-hover);
  color: var(--color-on-action);
}
/* Below 40em the filter is one row that scrolls sideways, bleeding to the screen edges; the
   gutter becomes inner padding so the first chip stays aligned with the title. */
@media (max-width: 39.99em) {
  .filters {
    position: relative;
    margin-inline: calc(-1 * var(--gutter));
    /* Room for the focus ring, which the scroll container would otherwise clip. */
    padding-block: var(--space-2);
    margin-block: calc(-1 * var(--space-2));
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .filters::-webkit-scrollbar {
    display: none;
  }
  .filters__list {
    flex-wrap: nowrap;
    width: max-content;
    padding-inline: var(--gutter);
  }
  .chip {
    white-space: nowrap;
    overflow-wrap: normal;
  }
}
.listing__results[aria-busy="true"] {
  opacity: 0.6;
}
@media (prefers-reduced-motion: no-preference) {
  .listing__results {
    transition: opacity 0.2s;
  }
}

/* Home: sections render only when they have posts */
.home-secondary {
  margin-top: var(--grid-gap-row);
}
.home-latest {
  margin-top: var(--section-space);
  background: var(--gradient-glow);
}
.home-latest__title {
  margin-bottom: var(--space-6);
}

/* Band: one saturated closing strip per page at most */
.band {
  margin-top: var(--section-space);
  padding-block: var(--section-space);
  background: var(--gradient-band);
  color: var(--color-text-on-band);
}
.band__inner {
  display: grid;
  justify-items: start;
  gap: var(--space-5);
}
.band .band__label {
  color: inherit;
}
.band .band__title {
  max-width: 40rem;
  color: inherit;
}
.band .button--secondary {
  border-color: var(--color-text-on-band);
  color: var(--color-text-on-band);
}
.band .button--secondary:hover {
  background: rgb(255 255 255 / 0.12);
}

/* Singular entry: page title. Content blocks are styled by assets/css/blocks.css */
.entry__header {
  width: min(var(--width-header), 100%);
  margin-inline: auto;
  padding-block: var(--space-7);
}
.entry-content {
  /* Contains floated images (alignleft/alignright). */
  display: flow-root;
}

/* Post: header, Featured Image, wide blocks, Share, Related */
.entry__container {
  /* 100cqi = container width, used by wide blocks inside the reading column. */
  container-type: inline-size;
}
.entry--post .entry__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}
/* Breadcrumb: Yoast links, theme markup */
.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}
.breadcrumbs__list li {
  min-width: 0;
  overflow-wrap: anywhere;
}
.breadcrumbs__list li:not(:last-child)::after {
  /* Decorative separator, hidden from assistive technologies where alt text is supported. */
  content: "›";
  content: "›" / "";
  margin-left: var(--space-2);
}
.breadcrumbs a {
  color: var(--color-text-secondary);
  text-decoration: underline 1px;
  text-underline-offset: 0.15em;
}
.breadcrumbs a:hover {
  color: var(--color-text-primary);
}
.entry__category a {
  color: var(--color-action);
  text-decoration: none;
}
.entry__category a:hover {
  color: var(--color-action-hover);
  text-decoration: underline;
}
.entry__deck {
  color: var(--color-text-secondary);
  font-size: var(--text-deck);
  line-height: 1.45;
}
.entry__meta {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}
.entry__media {
  width: min(var(--width-wide), 100%);
  margin-inline: auto;
}
.entry__image {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  /* Portrait images keep their ratio: limited height, proportional width, centered. */
  max-height: 45rem;
  margin-inline: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lifted);
}
.entry__caption {
  max-width: var(--width-reading);
  margin: var(--space-3) auto 0;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}
.entry__media + .entry-content {
  padding-top: var(--space-7);
}
.entry-content > :is(.alignwide, .alignfull) {
  /* Full width is not supported: both align to width-wide, centered on the container. */
  width: min(var(--width-wide), 100cqi);
  max-width: none;
  margin-inline: calc((100% - min(var(--width-wide), 100cqi)) / 2);
}
.entry-content .wp-block-table {
  overflow-x: visible;
}
.wp-block-table__scroll {
  max-width: 100%;
  overflow-x: auto;
}
.share {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: var(--border-thin) solid var(--color-border);
}
.share__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}
.share__bar .share__title {
  margin-right: var(--space-2);
  font-size: var(--text-base);
  line-height: 1.5;
}
.share [hidden] {
  display: none;
}
.share__status:not(:empty) {
  margin-top: var(--space-3);
}
.share__url {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.share__label {
  font: 700 var(--text-sm) / 1.5 var(--font-display);
}
.related {
  margin-top: var(--section-space);
}
.related__title {
  margin-bottom: var(--space-6);
}