/* Blue Iris K-2 theme - components (mobile first)
   Uses semantic + component tokens from tokens.css only. No raw values.
   Ported from the kids-blog v2 design; WordPress block markup is mapped onto
   the same components in the "WordPress blocks" section at the end. */

* {
  box-sizing: border-box;
  margin: 0;
}

html {
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 2 * var(--header-offset));
}

body {
  background: var(--color-bg-canvas);
  color: var(--color-text-primary);
  font-family: var(--font-family-body);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line-height);
  font-weight: var(--type-body-weight);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
}

button,
input {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

h1,
h2,
h3 {
  font-family: var(--font-family-display);
  text-wrap: balance;
}

h2 {
  font-size: var(--type-heading-2-size);
  line-height: var(--type-heading-2-line-height);
  font-weight: var(--type-heading-2-weight);
  letter-spacing: var(--type-heading-2-tracking);
}

h3 {
  font-size: var(--type-heading-3-size);
  line-height: var(--type-heading-3-line-height);
  font-weight: var(--type-heading-3-weight);
}

p {
  text-wrap: pretty;
}

ul:where([role="list"]),
ol:where([role="list"]) {
  padding: 0;
  list-style: none;
}

:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

button,
summary,
.btn,
.chip,
.icon-button,
.wp-element-button,
.wp-block-button__link {
  -webkit-user-select: none;
  user-select: none;
}

[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.nowrap {
  white-space: nowrap;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.wrap {
  container-type: inline-size;
  width: 100%;
  max-width: var(--layout-max-width);
  margin-inline: auto;
  padding-inline: var(--space-gutter);
}

.section {
  padding-block: var(--space-section);
}

.section--flush-top {
  padding-top: 0;
}

/* ---------------------------------------------------------------------------
   Tones: any element with data-tone gets --cat-tint / --cat-fill
   --------------------------------------------------------------------------- */
:root { --cat-tint: var(--color-tone-lilac-tint); --cat-fill: var(--color-tone-lilac-fill); }
[data-tone="sky"] { --cat-tint: var(--color-tone-sky-tint); --cat-fill: var(--color-tone-sky-fill); }
[data-tone="bubblegum"] { --cat-tint: var(--color-tone-bubblegum-tint); --cat-fill: var(--color-tone-bubblegum-fill); }
[data-tone="tangerine"] { --cat-tint: var(--color-tone-tangerine-tint); --cat-fill: var(--color-tone-tangerine-fill); }
[data-tone="lilac"] { --cat-tint: var(--color-tone-lilac-tint); --cat-fill: var(--color-tone-lilac-fill); }
[data-tone="sunshine"] { --cat-tint: var(--color-tone-sunshine-tint); --cat-fill: var(--color-tone-sunshine-fill); }
[data-tone="frog"] { --cat-tint: var(--color-tone-frog-tint); --cat-fill: var(--color-tone-frog-fill); }
[data-tone="teal"] { --cat-tint: var(--color-tone-teal-tint); --cat-fill: var(--color-tone-teal-fill); }
[data-tone="coral"] { --cat-tint: var(--color-tone-coral-tint); --cat-fill: var(--color-tone-coral-fill); }

/* ---------------------------------------------------------------------------
   Brand
   --------------------------------------------------------------------------- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-inline-sm);
  font-family: var(--font-family-display);
  font-size: var(--brand-font-size);
  font-weight: var(--brand-font-weight);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
}

.brand__mark {
  flex: none;
  width: var(--brand-mark-size);
  height: var(--brand-mark-size);
  transition: transform var(--motion-duration-state) var(--motion-ease-playful);
}

.brand:hover .brand__mark {
  transform: rotate(var(--motion-wiggle-angle));
}

.brand__logo {
  flex: none;
  width: auto;
  max-width: var(--brand-logo-max-width);
  height: var(--brand-logo-height);
  object-fit: contain;
}

.brand__text {
  display: inline-flex;
  align-items: center;
  gap: var(--space-inline-sm);
}

@media (max-width: 63.99rem) {
  .brand__text {
    display: none;
  }
}

.brand__grade {
  padding: var(--brand-grade-padding);
  border: var(--outline-width) solid var(--outline-color);
  border-radius: var(--radius-pill);
  background: var(--brand-grade-bg);
  color: var(--color-text-primary);
  font-family: var(--font-family-body);
  font-size: var(--brand-grade-size);
  font-weight: var(--type-eyebrow-weight);
  letter-spacing: var(--type-eyebrow-tracking);
}

.icon-button {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--icon-button-size);
  height: var(--icon-button-size);
  padding: 0;
  border: var(--outline-width) solid var(--outline-color);
  border-radius: var(--radius-pill);
  background: var(--icon-button-bg);
  box-shadow: var(--elevation-sticker-sm);
  transition:
    transform var(--motion-duration-press) var(--motion-ease-default),
    box-shadow var(--motion-duration-press) var(--motion-ease-default);
}

.icon-button svg {
  width: var(--icon-button-icon);
  height: var(--icon-button-icon);
}

.icon-button:active {
  transform: translate(var(--elevation-press), var(--elevation-press));
  box-shadow: var(--button-shadow-press);
}

/* ---------------------------------------------------------------------------
   Buttons: sticker keys
   --------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--button-gap);
  min-height: var(--button-height-md);
  padding: 0 var(--button-padding-x-md);
  border: var(--outline-width) solid var(--outline-color);
  border-radius: var(--button-radius);
  color: var(--button-primary-fg);
  background: var(--button-primary-bg);
  box-shadow: var(--button-shadow);
  font-family: var(--font-family-display);
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  line-height: var(--type-label-line-height);
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--motion-duration-hover) var(--motion-ease-default),
    transform var(--motion-duration-hover) var(--motion-ease-default),
    box-shadow var(--motion-duration-hover) var(--motion-ease-default);
}

.btn svg {
  flex: none;
  width: var(--button-icon-size);
  height: var(--button-icon-size);
  transition: transform var(--motion-duration-state) var(--motion-ease-playful);
}

.btn:hover {
  background: var(--button-primary-bg-hover);
  transform: translate(var(--elevation-lift), var(--elevation-lift));
  box-shadow: var(--button-shadow-hover);
}

.btn:hover svg {
  transform: translateX(var(--space-nudge));
}

.btn:active {
  transform: translate(var(--elevation-press), var(--elevation-press));
  box-shadow: var(--button-shadow-press);
  transition-duration: var(--motion-duration-press);
}

.btn--secondary {
  color: var(--button-fg);
  background: var(--button-secondary-bg);
}

.btn--secondary:hover {
  background: var(--button-secondary-bg-hover);
}

.btn--sunny {
  color: var(--button-fg);
  background: var(--button-sunny-bg);
}

.btn--sunny:hover {
  background: var(--button-sunny-bg-hover);
}

.btn--small {
  min-height: var(--button-height-sm);
  padding: 0 var(--button-padding-x-sm);
  font-size: var(--button-font-size-sm);
  box-shadow: var(--elevation-sticker-sm);
}

.btn--small:hover {
  box-shadow: var(--elevation-sticker-md);
}

/* ---------------------------------------------------------------------------
   Eyebrow sticker + section heads
   --------------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-inline-xs);
  padding: var(--eyebrow-padding);
  border: var(--outline-width) solid var(--outline-color);
  border-radius: var(--radius-pill);
  background: var(--eyebrow-bg);
  box-shadow: var(--elevation-sticker-sm);
  font-size: var(--type-eyebrow-size);
  font-weight: var(--type-eyebrow-weight);
  letter-spacing: var(--type-eyebrow-tracking);
  line-height: var(--type-label-line-height);
  text-transform: uppercase;
  rotate: var(--eyebrow-rotate);
}

.eyebrow svg {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
}

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-inline-md);
  margin-bottom: var(--space-section-head);
}

.section-head__lead {
  margin-top: var(--space-stack-sm);
  color: var(--color-text-secondary);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-inline-2xs);
  flex: none;
  font-family: var(--font-family-display);
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  text-decoration: underline;
  text-decoration-thickness: var(--underline-thickness);
  text-underline-offset: var(--underline-offset);
  text-decoration-color: var(--color-accent-brand-soft);
}

.text-link:hover {
  text-decoration-color: var(--color-accent-brand);
}

.text-link svg {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
}

/* ---------------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------------- */
.hero {
  padding-block: var(--hero-padding-top) var(--hero-padding-bottom);
  overflow: clip;
}

.hero__grid {
  display: grid;
  gap: var(--hero-grid-gap);
}

.hero__text {
  display: grid;
  justify-items: start;
  gap: var(--space-stack-md);
}

.hero h1 {
  margin-top: var(--space-stack-sm);
  font-size: var(--type-display-size);
  line-height: var(--type-display-line-height);
  font-weight: var(--type-display-weight);
  letter-spacing: var(--type-display-tracking);
}

.squiggle {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.squiggle svg {
  position: absolute;
  left: 0;
  bottom: -0.12em;
  z-index: -1;
  width: 100%;
  height: 0.38em;
  overflow: visible;
  color: var(--hero-underline-color);
}

.hero__lead {
  max-width: var(--layout-measure);
  color: var(--color-text-secondary);
  font-size: var(--type-lead-size);
  line-height: var(--type-lead-line-height);
}

/* ---- Search ---------------------------------------------------------- */
.search:where(form) {
  display: grid;
  grid-template-columns: 1fr auto;
  justify-self: stretch;
  gap: var(--space-inline-sm);
  margin-top: var(--space-stack-sm);
}

.search:where(form) .btn {
  padding-inline: var(--search-button-padding-x);
}

.search__field {
  position: relative;
}

.search__icon {
  position: absolute;
  top: 50%;
  left: var(--search-icon-inset);
  width: var(--search-icon-size);
  height: var(--search-icon-size);
  color: var(--color-text-tertiary);
  translate: 0 -50%;
  pointer-events: none;
}

.search:where(form) .input {
  height: var(--search-height);
  padding-left: var(--search-padding-start);
}

.search:where(form) .input::-webkit-search-cancel-button {
  cursor: pointer;
}

@container (min-width: 30rem) {
  .search:where(form) {
    max-width: var(--layout-measure);
  }
}

.quick-picks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-inline-sm);
}

.quick-picks__label {
  color: var(--color-text-tertiary);
  font-size: var(--type-eyebrow-size);
  font-weight: var(--type-eyebrow-weight);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
}

/* ---- Collage --------------------------------------------------------- */
.collage {
  position: relative;
  height: var(--hero-collage-height);
}

.polaroid {
  position: absolute;
  width: min(var(--hero-polaroid-width), 48cqi);
  padding: var(--hero-polaroid-padding) var(--hero-polaroid-padding) 0;
  border: var(--outline-width) solid var(--outline-color);
  border-radius: var(--radius-control);
  background: var(--hero-polaroid-bg);
  box-shadow: var(--elevation-sticker-md);
  transition: rotate var(--motion-duration-state) var(--motion-ease-playful);
}

.polaroid img {
  width: 100%;
  aspect-ratio: var(--product-media-ratio);
  object-fit: cover;
  border-radius: var(--radius-inset);
}

.polaroid figcaption {
  display: grid;
  place-items: center;
  height: var(--hero-polaroid-caption-space);
  font-family: var(--font-family-display);
  font-size: var(--type-label-size);
  font-weight: var(--type-weight-soft);
}

.polaroid::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--hero-tape-overhang));
  left: 50%;
  width: var(--hero-tape-width);
  height: var(--hero-tape-height);
  background: var(--hero-tape-bg);
  translate: -50% 0;
  rotate: var(--hero-tape-rotate);
}

.polaroid--left {
  top: 0;
  left: 0;
  rotate: var(--hero-polaroid-left-rotate);
}

.polaroid--right {
  top: var(--hero-polaroid-right-drop);
  right: 0;
  rotate: var(--hero-polaroid-right-rotate);
}

.collage:hover .polaroid--left {
  rotate: calc(var(--hero-polaroid-left-rotate) - var(--hero-polaroid-spread));
}

.collage:hover .polaroid--right {
  rotate: calc(var(--hero-polaroid-right-rotate) + var(--hero-polaroid-spread));
}

.hero-iris {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: var(--hero-iris-size);
  height: auto;
  translate: -50% 0;
  animation: float var(--motion-duration-float) var(--motion-ease-float) infinite;
}

.doodle-star {
  position: absolute;
  width: var(--hero-star-size);
  height: var(--hero-star-size);
}

.doodle-star--one {
  top: var(--hero-star-one-top);
  right: 42%;
  color: var(--hero-star-one-color);
  rotate: var(--hero-star-one-rotate);
}

.doodle-star--two {
  bottom: var(--hero-star-two-bottom);
  left: var(--hero-star-two-left);
  width: var(--hero-star-size-sm);
  height: var(--hero-star-size-sm);
  color: var(--hero-star-two-color);
  rotate: var(--hero-star-two-rotate);
}

.doodle-star--three {
  bottom: var(--hero-star-three-bottom);
  right: var(--hero-star-three-right);
  color: var(--hero-star-three-color);
  rotate: var(--hero-star-three-rotate);
}

@keyframes float {
  50% { transform: translateY(var(--motion-float-distance)); }
}

@container (min-width: 48rem) {
  .hero__grid {
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
  }
}

/* ---------------------------------------------------------------------------
   Tiles: seasons and subjects
   --------------------------------------------------------------------------- */
.tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--tile-gap);
}

.tile {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: var(--space-stack-sm);
  height: 100%;
  padding: var(--tile-padding);
  border: var(--outline-width) solid var(--outline-color);
  border-radius: var(--tile-radius);
  background: var(--cat-tint);
  box-shadow: var(--elevation-sticker-sm);
  font-family: var(--font-family-display);
  font-size: var(--tile-label-size);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-line-height);
  text-align: center;
  text-decoration: none;
  transition:
    transform var(--motion-duration-hover) var(--motion-ease-default),
    box-shadow var(--motion-duration-hover) var(--motion-ease-default);
}

.tile__icon {
  display: grid;
  place-items: center;
  width: var(--tile-icon-box);
  height: var(--tile-icon-box);
  border: var(--outline-width) solid var(--outline-color);
  border-radius: var(--radius-pill);
  background: var(--cat-fill);
  transition: transform var(--motion-duration-state) var(--motion-ease-playful);
}

.tile__icon svg {
  width: calc(var(--tile-icon-size) * 0.72);
  height: calc(var(--tile-icon-size) * 0.72);
}

.tile__count {
  color: var(--color-text-secondary);
  font-family: var(--font-family-body);
  font-size: var(--type-caption-size);
  font-weight: var(--type-weight-strong);
}

.tile__count:empty {
  display: none;
}

.tile:hover {
  transform: translate(var(--elevation-lift), var(--elevation-lift));
  box-shadow: var(--elevation-sticker-md);
}

.tile:hover .tile__icon {
  transform: rotate(var(--motion-wiggle-angle)) scale(var(--motion-pop-scale));
}

.tile:active {
  transform: translate(var(--elevation-press), var(--elevation-press));
  box-shadow: var(--button-shadow-press);
}

@container (min-width: 48rem) {
  .tiles {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* ---------------------------------------------------------------------------
   Collections: teaching-need shortcuts
   --------------------------------------------------------------------------- */
.collections {
  display: grid;
  gap: var(--collection-gap);
  margin-top: var(--space-stack-xl);
}

.collections__title {
  margin-bottom: var(--space-stack-sm);
  font-size: var(--type-heading-3-size);
}

.collections ul {
  display: grid;
  gap: var(--collection-gap);
}

.collection {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-inline-md);
  padding: var(--collection-padding);
  border: var(--outline-width) solid var(--outline-color);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  box-shadow: var(--elevation-sticker-sm);
  text-decoration: none;
  transition:
    transform var(--motion-duration-hover) var(--motion-ease-default),
    box-shadow var(--motion-duration-hover) var(--motion-ease-default),
    background-color var(--motion-duration-hover) var(--motion-ease-default);
}

.collection__icon {
  display: grid;
  place-items: center;
  width: var(--collection-icon-box);
  height: var(--collection-icon-box);
  border: var(--outline-width) solid var(--outline-color);
  border-radius: var(--radius-badge);
  background: var(--cat-fill);
  rotate: var(--motion-wiggle-angle);
}

.collection__icon svg {
  width: var(--collection-icon-size);
  height: var(--collection-icon-size);
}

.collection__name {
  display: block;
  font-family: var(--font-family-display);
  font-size: var(--type-title-sm-size);
  font-weight: var(--type-title-sm-weight);
  line-height: var(--type-title-sm-line-height);
}

.collection__desc {
  display: block;
  margin-top: var(--space-stack-xs);
  color: var(--color-text-secondary);
  font-size: var(--type-caption-size);
  line-height: var(--type-label-line-height);
}

.collection__count {
  display: inline-flex;
  align-items: center;
  gap: var(--space-inline-2xs);
  height: var(--grade-height);
  padding: 0 var(--grade-padding-x);
  border-radius: var(--radius-control);
  background: var(--cat-tint);
  font-size: var(--type-caption-size);
  font-weight: var(--type-eyebrow-weight);
  white-space: nowrap;
}

.collection__count svg {
  width: var(--meta-icon-size);
  height: var(--meta-icon-size);
  transition: transform var(--motion-duration-state) var(--motion-ease-playful);
}

.collection:hover {
  background: var(--cat-tint);
  transform: translate(var(--elevation-lift), var(--elevation-lift));
  box-shadow: var(--elevation-sticker-md);
}

.collection:hover .collection__count {
  background: var(--color-bg-raised);
}

.collection:hover .collection__count svg {
  transform: translateX(var(--space-nudge));
}

.collection:active {
  transform: translate(var(--elevation-press), var(--elevation-press));
  box-shadow: var(--button-shadow-press);
}

@container (min-width: 40rem) {
  .collections ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--collection-gap);
  }
}

@container (min-width: 60rem) {
  .collections ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------------------------------------------------------------------------
   Tag, grade badge and meta row
   --------------------------------------------------------------------------- */
.tag {
  display: inline-flex;
  align-items: center;
  height: var(--tag-height);
  padding: 0 var(--tag-padding-x);
  border: var(--outline-width) solid var(--outline-color);
  border-radius: var(--tag-radius);
  background: var(--cat-fill);
  font-size: var(--tag-font-size);
  font-weight: var(--type-eyebrow-weight);
  letter-spacing: var(--type-eyebrow-tracking);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.grade {
  display: inline-flex;
  align-items: center;
  height: var(--grade-height);
  padding: 0 var(--grade-padding-x);
  border-radius: var(--radius-control);
  background: var(--grade-bg);
  color: var(--grade-fg);
  font-size: var(--type-caption-size);
  font-weight: var(--type-eyebrow-weight);
  line-height: 1;
  white-space: nowrap;
}

.meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-stack-xs) var(--meta-gap);
  color: var(--color-text-tertiary);
  font-size: var(--type-caption-size);
  font-weight: var(--type-weight-strong);
  line-height: var(--type-label-line-height);
}

.meta > span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-inline-2xs);
}

.meta svg {
  width: var(--meta-icon-size);
  height: var(--meta-icon-size);
}

/* ---------------------------------------------------------------------------
   Seasonal spotlight: featured post + "more this season" list
   --------------------------------------------------------------------------- */
.feature {
  position: relative;
  border: var(--outline-width) solid var(--outline-color);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  box-shadow: var(--elevation-sticker-lg);
  overflow: clip;
}

.feature__media {
  position: relative;
  border-bottom: var(--outline-width) solid var(--outline-color);
  background: var(--cat-tint);
}

.feature__media img {
  width: 100%;
  aspect-ratio: var(--product-media-ratio);
  object-fit: cover;
}

.feature__badge {
  position: absolute;
  top: var(--feature-badge-inset);
  right: var(--feature-badge-inset);
  padding: var(--feature-badge-padding);
  border: var(--outline-width) solid var(--outline-color);
  border-radius: var(--radius-pill);
  background: var(--color-accent-highlight);
  box-shadow: var(--elevation-sticker-sm);
  font-family: var(--font-family-display);
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  rotate: var(--feature-badge-rotate);
}

.feature__body {
  display: grid;
  justify-items: start;
  gap: var(--space-stack-md);
  padding: var(--feature-padding);
}

.feature__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-inline-sm);
}

.feature__title {
  font-size: var(--type-heading-3-size);
  line-height: var(--type-heading-3-line-height);
}

.feature__title a {
  text-decoration: none;
}

.feature__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.feature__excerpt {
  color: var(--color-text-secondary);
}

.feature .btn {
  position: relative;
  z-index: 1;
}

@container (min-width: 48rem) {
  .feature {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
  }

  .feature__media {
    border-bottom: 0;
    border-right: var(--outline-width) solid var(--outline-color);
  }

  .feature__media img {
    height: 100%;
  }

  .feature__body {
    align-content: center;
    padding: var(--feature-padding-wide);
  }

  .feature__title {
    font-size: var(--type-heading-2-size);
    line-height: var(--type-heading-2-line-height);
  }
}

.spotlight {
  margin-top: var(--space-stack-xl);
}

.spotlight__title {
  margin-bottom: var(--space-stack-md);
  font-size: var(--type-heading-3-size);
}

.spotlight ul {
  display: grid;
  gap: var(--spotlight-gap);
}

.spotlight__item {
  position: relative;
  display: grid;
  grid-template-columns: var(--spotlight-thumb-size) 1fr;
  align-items: center;
  gap: var(--space-inline-md);
}

.spotlight__item img {
  width: var(--spotlight-thumb-size);
  height: var(--spotlight-thumb-size);
  border: var(--outline-width) solid var(--outline-color);
  border-radius: var(--radius-badge);
  box-shadow: var(--elevation-sticker-sm);
  object-fit: cover;
  transition: rotate var(--motion-duration-state) var(--motion-ease-playful);
}

.spotlight__item h4 {
  margin-bottom: var(--space-stack-xs);
  font-family: var(--font-family-display);
  font-size: var(--type-title-sm-size);
  font-weight: var(--type-title-sm-weight);
  line-height: var(--type-title-sm-line-height);
  text-wrap: balance;
}

.spotlight__item a {
  text-decoration: none;
}

.spotlight__item a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.spotlight__item:hover h4 {
  text-decoration: underline;
  text-decoration-color: var(--color-accent-brand-soft);
  text-decoration-thickness: var(--underline-thickness);
  text-underline-offset: var(--underline-offset);
}

.spotlight__item:hover img {
  rotate: var(--motion-wiggle-angle);
}

.spotlight__more {
  margin-top: var(--space-stack-lg);
}

@container (min-width: 48rem) {
  .spotlight ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-stack-lg);
  }
}

/* ---------------------------------------------------------------------------
   Scroller: horizontal row of product cards
   --------------------------------------------------------------------------- */
.scroller {
  display: flex;
  gap: var(--card-gap);
  margin-inline: calc(-1 * var(--space-gutter));
  padding: var(--scroller-room-top) var(--space-gutter) var(--scroller-room-bottom);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--space-gutter);
  scrollbar-width: none;
}

.scroller::-webkit-scrollbar {
  display: none;
}

.scroller > li {
  display: flex;
  flex: none;
  width: var(--scroller-card-width);
  scroll-snap-align: start;
}

.scroller .card {
  width: 100%;
}

/* ---- Bands ----------------------------------------------------------- */
.newsletter-band {
  padding-top: calc(var(--newsletter-iris-size) * 0.55);
}

.store-band {
  background: var(--store-bg);
  border-block: var(--outline-width) solid var(--outline-color);
}

.store-band .section-head {
  flex-wrap: wrap;
}

.rating {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-inline-xs);
  margin-top: var(--space-stack-md);
  font-size: var(--type-label-size);
  font-weight: var(--type-weight-strong);
}

.rating__stars {
  display: inline-flex;
  color: var(--rating-star-color);
}

.rating__stars svg {
  width: var(--rating-star-size);
  height: var(--rating-star-size);
}

.rating__note {
  color: var(--color-text-secondary);
  font-weight: var(--type-weight-soft);
}

.store-band__cta {
  display: flex;
  justify-content: center;
  margin-top: var(--space-stack-2xl);
}

/* ---------------------------------------------------------------------------
   Catalog filters: facet rows of chips + active filter summary
   --------------------------------------------------------------------------- */
.filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--filter-row-gap);
  margin-bottom: var(--space-stack-md);
}

.filter__label {
  color: var(--color-text-tertiary);
  font-size: var(--type-eyebrow-size);
  font-weight: var(--type-eyebrow-weight);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
}

.filter {
  display: grid;
  grid-template-columns: var(--filter-label-width) minmax(0, 1fr);
  align-items: center;
}

.filter .chips {
  margin-inline: 0 calc(-1 * var(--space-gutter));
  padding: var(--filter-chips-room) var(--space-gutter) var(--filter-chips-room) 0;
}

@container (min-width: 48rem) {
  .filter .chips {
    flex-wrap: wrap;
    margin: 0;
    padding: var(--filter-chips-room) 0;
    overflow: visible;
  }
}

.chips {
  display: flex;
  gap: var(--space-inline-sm);
  margin: 0 calc(-1 * var(--space-gutter));
  padding: var(--chips-room-top) var(--space-gutter) var(--chips-room-bottom);
  overflow-x: auto;
  scrollbar-width: none;
}

.chips::-webkit-scrollbar {
  display: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-inline-xs);
  flex: none;
  height: var(--chip-height);
  padding: 0 var(--chip-padding-x);
  border: var(--outline-width) solid var(--outline-color);
  border-radius: var(--radius-pill);
  background: var(--chip-bg);
  box-shadow: var(--chip-shadow);
  font-family: var(--font-family-display);
  font-size: var(--type-label-size);
  font-weight: var(--type-weight-soft);
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--motion-duration-hover) var(--motion-ease-default),
    transform var(--motion-duration-press) var(--motion-ease-default),
    box-shadow var(--motion-duration-press) var(--motion-ease-default);
}

.chip--sm {
  height: var(--chip-height-sm);
  padding: 0 var(--chip-padding-x-sm);
}

.chip__dot {
  width: var(--chip-dot-size);
  height: var(--chip-dot-size);
  border: var(--hairline-width) solid var(--outline-color);
  border-radius: var(--radius-pill);
  background: var(--cat-fill);
}

.chip:hover {
  background: var(--cat-tint, var(--button-secondary-bg-hover));
}

.chip[aria-pressed="true"] {
  background: var(--chip-bg-active);
  color: var(--chip-fg-active);
}

.chip:active {
  transform: translate(var(--elevation-press), var(--elevation-press));
  box-shadow: var(--button-shadow-press);
}

.filter-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-inline-sm);
  min-height: var(--chip-height);
  margin-bottom: var(--space-stack-lg);
  padding-top: var(--space-stack-md);
  border-top: var(--hairline-width) solid var(--color-line-subtle);
}

.filter-summary__count {
  margin-right: auto;
  font-family: var(--font-family-display);
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
}

.filter-summary ul {
  display: contents;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-inline-2xs);
  height: var(--chip-height-sm);
  padding: 0 var(--chip-padding-x-sm);
  border: var(--hairline-width) solid var(--outline-color);
  border-radius: var(--radius-pill);
  background: var(--filter-pill-bg);
  font-size: var(--type-caption-size);
  font-weight: var(--type-weight-strong);
}

.pill svg {
  width: var(--meta-icon-size);
  height: var(--meta-icon-size);
}

.pill:hover {
  background: var(--color-bg-raised);
}

.filter-summary__clear {
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-family-display);
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  text-decoration: underline;
  text-decoration-thickness: var(--underline-thickness);
  text-underline-offset: var(--underline-offset);
  text-decoration-color: var(--color-accent-brand-soft);
}

/* ---------------------------------------------------------------------------
   Post grid + cards
   --------------------------------------------------------------------------- */
.posts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--posts-gap-row) var(--posts-gap-column);
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: var(--outline-width) solid var(--outline-color);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  transition:
    transform var(--motion-duration-hover) var(--motion-ease-default),
    box-shadow var(--motion-duration-hover) var(--motion-ease-default);
}

.card:hover {
  transform: translate(var(--elevation-lift), var(--elevation-lift));
  box-shadow: var(--card-shadow-hover);
}

.card__media {
  position: relative;
  border-bottom: var(--outline-width) solid var(--outline-color);
  border-radius: calc(var(--card-radius) - var(--outline-width)) calc(var(--card-radius) - var(--outline-width)) 0 0;
  background: var(--cat-tint);
}

.card__media img {
  width: 100%;
  aspect-ratio: var(--product-media-ratio);
  object-fit: cover;
  border-radius: inherit;
}

.card__media .tag {
  position: absolute;
  left: var(--card-tag-inset);
  bottom: calc(-1 * var(--tag-height) / 2);
}

.card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-stack-sm);
  padding: calc(var(--card-padding) + var(--tag-height) / 2) var(--card-padding) var(--card-padding);
}

.card__title {
  font-size: var(--type-title-sm-size);
  line-height: var(--type-title-sm-line-height);
  font-weight: var(--type-title-sm-weight);
  text-wrap: pretty;
}

.card__title a {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--card-title-lines);
  line-clamp: var(--card-title-lines);
  overflow: hidden;
  text-decoration: none;
}

.card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--card-radius);
}

.card__excerpt {
  display: none;
  color: var(--color-text-secondary);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-lead-line-height);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--card-excerpt-lines);
  line-clamp: var(--card-excerpt-lines);
  overflow: hidden;
}

.card__badge {
  padding: var(--card-badge-padding);
  border: var(--hairline-width) solid var(--outline-color);
  border-radius: var(--radius-control);
  background: var(--color-accent-highlight);
  font-size: var(--type-eyebrow-size);
  font-weight: var(--type-eyebrow-weight);
  letter-spacing: var(--type-eyebrow-tracking);
  line-height: var(--type-label-line-height);
  text-transform: uppercase;
}

.card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-stack-xs) var(--space-inline-sm);
}

.card__price {
  font-family: var(--font-family-display);
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
}

.card__price s {
  margin-left: var(--space-inline-2xs);
  color: var(--price-was-color);
  font-family: var(--font-family-body);
  font-size: var(--type-caption-size);
  font-weight: var(--type-weight-strong);
}

.card__rating {
  display: inline-flex;
  align-items: center;
  gap: var(--space-inline-2xs);
  color: var(--color-text-secondary);
  font-size: var(--type-caption-size);
  font-weight: var(--type-weight-strong);
}

.card__rating svg {
  width: var(--meta-icon-size);
  height: var(--meta-icon-size);
  color: var(--rating-star-color);
}

.card .meta {
  margin-top: auto;
}

.feature .card__foot {
  justify-content: start;
}

.posts__more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-stack-sm);
  margin-top: var(--space-stack-2xl);
  text-align: center;
}

.posts__empty {
  grid-column: 1 / -1;
  display: grid;
  justify-items: center;
  gap: var(--space-stack-md);
  padding: var(--space-stack-xl);
  border: var(--outline-width) dashed var(--outline-color);
  border-radius: var(--card-radius);
  text-align: center;
}

@container (min-width: 40rem) {
  .posts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--posts-gap-row-wide) var(--posts-gap-column-wide);
  }

  .card__excerpt {
    display: -webkit-box;
  }
}

@container (min-width: 60rem) {
  .posts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---------------------------------------------------------------------------
   Blog: post cards and grid
   --------------------------------------------------------------------------- */
.post-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--posts-gap-row) var(--posts-gap-column);
  container-type: inline-size;
}

@container (min-width: 40rem) {
  .post-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--posts-gap-row-wide) var(--posts-gap-column-wide);
  }
}

.post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: var(--outline-width) solid var(--outline-color);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  overflow: clip;
  transition:
    transform var(--motion-duration-hover) var(--motion-ease-default),
    box-shadow var(--motion-duration-hover) var(--motion-ease-default);
}

.post-card:hover {
  transform: translate(var(--elevation-lift), var(--elevation-lift));
  box-shadow: var(--card-shadow-hover);
}

.post-card__media {
  border-bottom: var(--outline-width) solid var(--outline-color);
  background: var(--cat-tint);
}

.post-card__media img {
  width: 100%;
  aspect-ratio: var(--post-card-media-ratio);
  object-fit: cover;
  object-position: top;
}

.post-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-stack-sm);
  padding: var(--card-padding);
}

.post-card__tags,
.feature__tags,
.post__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-inline-xs);
}

.post-card__title {
  font-size: var(--type-title-sm-size);
  line-height: var(--type-title-sm-line-height);
  font-weight: var(--type-title-sm-weight);
  text-wrap: pretty;
}

.post-card__title a {
  text-decoration: none;
}

.post-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--card-radius);
}

.post-card__excerpt {
  color: var(--color-text-secondary);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-lead-line-height);
}

.post-card .meta {
  margin-top: auto;
}

/* Spotlight feature built from a blog post: portrait pin image. */
.feature--post .feature__media img {
  aspect-ratio: var(--post-card-media-ratio);
  object-position: top;
}

/* ---------------------------------------------------------------------------
   Page heads (blog, shop, season and subject pages) + breadcrumb
   --------------------------------------------------------------------------- */
.page-head {
  padding-block: var(--page-head-padding-top) var(--page-head-padding-bottom);
}

.page-head .wrap {
  display: grid;
  justify-items: start;
  gap: var(--space-stack-md);
}

.page-head h1 {
  font-size: var(--type-page-title-size);
  line-height: var(--type-display-line-height);
  font-weight: var(--type-display-weight);
  letter-spacing: var(--type-display-tracking);
  text-wrap: balance;
}

.page-head__lead {
  max-width: var(--layout-measure);
  color: var(--color-text-secondary);
  font-size: var(--type-lead-size);
  line-height: var(--type-lead-line-height);
}

.page-head__icon {
  display: grid;
  place-items: center;
  width: var(--page-head-icon-box);
  height: var(--page-head-icon-box);
  border: var(--outline-width) solid var(--outline-color);
  border-radius: var(--radius-pill);
  background: var(--cat-fill);
  box-shadow: var(--elevation-sticker-sm);
}

.page-head__icon svg {
  width: 55%;
  height: 55%;
}

.page-head__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-inline-sm);
}

.page-head__chips:where(ul) {
  padding: 0;
  list-style: none;
}

.page-head__chips .chip[aria-current="page"] {
  background: var(--chip-bg-active);
  color: var(--chip-fg-active);
}

.page-head .search:where(form) {
  justify-self: stretch;
}

.page-head--center .wrap {
  justify-items: center;
  text-align: center;
}

.page-head__iris {
  width: var(--hero-iris-size);
  height: auto;
}

.page-head__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-inline-md);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-inline-xs);
  color: var(--color-text-tertiary);
  font-size: var(--type-caption-size);
  font-weight: var(--type-weight-strong);
}

.breadcrumb li {
  display: flex;
  min-width: 0;
  white-space: nowrap;
}

.breadcrumb li:last-child {
  flex: 1 1 0;
}

.breadcrumb li + li::before {
  content: "/";
  margin-right: var(--space-inline-xs);
}

.breadcrumb a {
  color: var(--color-text-secondary);
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
  text-decoration-color: var(--color-accent-brand-soft);
  text-decoration-thickness: var(--underline-thickness);
  text-underline-offset: var(--underline-offset);
}

.breadcrumb [aria-current="page"] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------------------------------------------------------------------------
   Blog post
   --------------------------------------------------------------------------- */
.post__top {
  display: grid;
  gap: var(--space-stack-xl);
}

.post__head {
  display: grid;
  justify-items: start;
  gap: var(--space-stack-md);
}

.post__head h1 {
  font-size: var(--type-post-title-size);
  line-height: var(--type-heading-2-line-height);
  font-weight: var(--type-display-weight);
  letter-spacing: var(--type-display-tracking);
  text-wrap: balance;
}

.post__subjects {
  color: var(--color-text-tertiary);
  font-size: var(--type-caption-size);
  font-weight: var(--type-weight-strong);
}

.post__lead {
  color: var(--color-text-secondary);
  font-size: var(--type-lead-size);
  line-height: var(--type-lead-line-height);
}

.post__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-inline-sm);
}

.post__pin {
  justify-self: center;
  width: min(100%, var(--post-pin-width));
}

.post__pin img {
  width: 100%;
  border: var(--outline-width) solid var(--outline-color);
  border-radius: var(--card-radius);
  box-shadow: var(--elevation-sticker-lg);
}

.post__topics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-inline-sm);
  max-width: var(--prose-measure);
  padding-top: var(--space-stack-lg);
  border-top: var(--hairline-width) solid var(--color-line-subtle);
  font-family: var(--font-family-display);
  font-weight: var(--type-label-weight);
}

@container (min-width: 48rem) {
  .post__top {
    grid-template-columns: minmax(0, 1fr) var(--post-pin-width);
    align-items: center;
  }
}

/* ---- Prose: rendered Markdown ----------------------------------------- */
.prose {
  font-size: var(--type-prose-size);
  line-height: var(--type-body-line-height);
}

.prose > * + * {
  margin-top: var(--space-stack-md);
}

.prose h2 {
  margin-top: var(--space-stack-2xl);
  font-size: var(--type-heading-3-size);
  line-height: var(--type-heading-3-line-height);
}

.prose h3 {
  margin-top: var(--space-stack-xl);
  font-size: var(--type-title-sm-size);
}

.prose h2 + *,
.prose h3 + * {
  margin-top: var(--space-stack-sm);
}

.prose ul,
.prose ol {
  display: grid;
  gap: var(--space-stack-sm);
  padding-left: var(--space-6);
}

.prose li::marker {
  color: var(--color-text-brand);
  font-weight: var(--type-weight-strong);
}

.prose a:not(.btn) {
  color: var(--color-text-brand);
  font-weight: var(--type-weight-strong);
  text-decoration-thickness: var(--underline-thickness);
  text-underline-offset: var(--underline-offset);
}

.prose strong {
  font-weight: var(--type-weight-strong);
}

/* ---- Product box inside a post ---------------------------------------- */
.prose .product-embed {
  margin-block: var(--space-stack-lg);
}

.product-embed {
  display: grid;
  grid-template-columns: var(--product-embed-media) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-inline-md);
  padding: var(--card-padding);
  border: var(--outline-width) solid var(--outline-color);
  border-radius: var(--card-radius);
  background: var(--cat-tint);
  box-shadow: var(--card-shadow);
  font-size: var(--type-body-size);
}

.product-embed__media img {
  width: 100%;
  aspect-ratio: var(--product-media-ratio);
  object-fit: cover;
  border: var(--outline-width) solid var(--outline-color);
  border-radius: var(--radius-badge);
  background: var(--color-bg-raised);
}

.product-embed__body {
  display: grid;
  justify-items: start;
  gap: var(--space-stack-xs);
}

.product-embed__label {
  color: var(--color-text-brand);
  font-size: var(--type-eyebrow-size);
  font-weight: var(--type-eyebrow-weight);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
}

.product-embed__title {
  font-family: var(--font-family-display);
  font-size: var(--type-title-sm-size);
  font-weight: var(--type-title-sm-weight);
  line-height: var(--type-title-sm-line-height);
  text-wrap: pretty;
}

.prose .product-embed__title a {
  color: var(--color-text-primary);
  font-weight: inherit;
  text-decoration: none;
}

.prose .product-embed__title a:hover {
  text-decoration: underline;
}

.product-embed__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-stack-xs) var(--space-inline-md);
  margin-top: var(--space-stack-xs);
}

@container (min-width: 30rem) {
  .product-embed {
    grid-template-columns: var(--product-embed-media-wide) minmax(0, 1fr);
    gap: var(--space-inline-lg);
  }
}

/* ---------------------------------------------------------------------------
   Promise list (about)
   --------------------------------------------------------------------------- */
.promises {
  display: grid;
  gap: var(--space-stack-md);
  margin-top: var(--space-stack-lg);
}

.promise {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-inline-md);
  align-items: start;
}

.promise__icon {
  display: grid;
  place-items: center;
  width: var(--icon-button-size);
  height: var(--icon-button-size);
  border: var(--outline-width) solid var(--outline-color);
  border-radius: var(--radius-badge);
  background: var(--cat-fill);
  box-shadow: var(--elevation-sticker-sm);
  rotate: var(--motion-wiggle-angle);
}

.promise__icon svg {
  width: var(--icon-button-icon);
  height: var(--icon-button-icon);
}

.promise h3 {
  font-size: var(--type-title-sm-size);
}

.promise p {
  color: var(--color-text-secondary);
  font-size: var(--type-body-sm-size);
}

@container (min-width: 48rem) {
  .promises {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-stack-lg);
  }
}

/* ---------------------------------------------------------------------------
   Newsletter
   --------------------------------------------------------------------------- */
.newsletter {
  position: relative;
  margin-top: calc(var(--newsletter-iris-size) * 0.55 + var(--space-stack-2xl));
  padding: calc(var(--newsletter-iris-size) * 0.45 + var(--newsletter-iris-clearance)) var(--newsletter-padding) var(--newsletter-padding-end);
  border: var(--outline-width) solid var(--outline-color);
  border-radius: var(--newsletter-radius);
  background: var(--newsletter-bg);
  box-shadow: var(--elevation-sticker-lg);
  text-align: center;
}

.newsletter__iris {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--newsletter-iris-size);
  height: auto;
  translate: -50% -55%;
}

.newsletter__media {
  display: block;
  width: 100%;
  max-width: var(--newsletter-media-size-compact);
  height: auto;
  aspect-ratio: 1;
  margin: 0 auto var(--space-stack-lg);
  object-fit: cover;
  border: var(--outline-width) solid var(--outline-color);
  border-radius: var(--newsletter-media-radius);
  background: var(--color-bg-raised);
  box-shadow: var(--elevation-sticker-md);
}

@container (min-width: 48rem) {
  .newsletter {
    display: grid;
    grid-template-columns: var(--newsletter-media-size) minmax(0, var(--layout-measure));
    column-gap: var(--newsletter-media-gap);
    justify-content: center;
    align-items: center;
    padding: var(--newsletter-padding) var(--newsletter-padding-wide);
  }

  .newsletter__media {
    max-width: none;
    margin: 0;
  }

  .newsletter__body {
    padding-top: calc(var(--newsletter-iris-size) * 0.45 + var(--newsletter-iris-clearance) - var(--newsletter-padding));
  }

  .newsletter__iris {
    left: calc((100% + var(--newsletter-media-size) + var(--newsletter-media-gap)) / 2);
  }
}

.newsletter__body {
  container: newsletter-body / inline-size;
}

.newsletter .btn {
  background: var(--button-sunny-bg);
  color: var(--button-fg);
}

.newsletter .btn:hover {
  background: var(--button-sunny-bg-hover);
}

.newsletter__fine {
  font-size: var(--type-caption-size);
  font-weight: var(--type-label-weight);
}

.newsletter h2 {
  font-size: var(--type-heading-3-size);
  line-height: var(--type-heading-3-line-height);
}

.newsletter p {
  margin-top: var(--space-stack-sm);
}

.newsletter__form {
  display: grid;
  gap: var(--space-inline-md);
  margin-top: var(--space-stack-lg);
}

.input {
  width: 100%;
  height: var(--input-height);
  padding: 0 var(--input-padding-x);
  border: var(--outline-width) solid var(--outline-color);
  border-radius: var(--radius-pill);
  background: var(--input-bg);
  box-shadow: inset var(--elevation-sticker-sm);
  font-size: var(--type-body-size);
}

.input::placeholder {
  color: var(--color-text-tertiary);
}

.newsletter__status {
  margin-top: var(--space-stack-md);
  font-family: var(--font-family-display);
  font-size: var(--type-lead-size);
  font-weight: var(--type-label-weight);
}

.newsletter__status:empty {
  display: none;
}

@container newsletter-body (width >= 24rem) {
  .newsletter__form {
    grid-template-columns: 1fr auto;
    max-width: var(--layout-measure);
    margin-inline: auto;
  }
}

/* ---------------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  padding-block: var(--footer-padding-top) var(--footer-padding-bottom);
  background: var(--footer-bg);
  color: var(--footer-fg);
}

.site-footer__wave {
  position: absolute;
  left: 0;
  bottom: calc(100% - var(--hairline-width));
  width: 100%;
  height: var(--footer-wave-height);
  color: var(--footer-bg);
}

.site-footer .brand {
  color: var(--footer-fg);
}

.site-footer .brand__logo {
  box-sizing: content-box;
  padding: var(--space-1-5);
  border-radius: var(--radius-sm);
  background: var(--color-bg-raised);
}

.site-footer__tagline {
  margin-top: var(--space-stack-md);
  max-width: var(--layout-measure);
  color: var(--footer-muted);
  font-size: var(--type-body-sm-size);
}

.site-footer__follow {
  margin-top: var(--space-stack-lg);
}

.footer-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--footer-nav-gap-row) var(--footer-nav-gap-column);
  margin-top: var(--space-stack-2xl);
}

@container (min-width: 48rem) {
  .footer-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.footer-nav h2 {
  margin-bottom: var(--space-stack-md);
  color: var(--footer-accent);
  font-size: var(--type-label-size);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
}

.footer-nav ul {
  display: grid;
  gap: var(--space-stack-sm);
}

.footer-nav a {
  font-weight: var(--type-label-weight);
  text-decoration: none;
}

.footer-nav a:hover {
  text-decoration: underline;
  text-decoration-color: var(--color-accent-highlight);
  text-decoration-thickness: var(--underline-thickness);
  text-underline-offset: var(--underline-offset);
}

.site-footer__legal {
  margin-top: var(--space-stack-lg);
  color: var(--footer-muted);
  font-size: var(--type-caption-size);
}


/* ===========================================================================
   WordPress blocks: map core block markup onto the components above.
   =========================================================================== */

/* ---- Page frame ---------------------------------------------------------- */
.wp-site-blocks {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.wp-site-blocks > main {
  flex: 1;
  container-type: inline-size;
}

.wp-site-blocks > * + * {
  margin-block-start: 0;
}

.section,
.hero,
.page-section {
  padding-inline: var(--space-gutter);
}

.page-section {
  padding-block: var(--page-head-padding-top) var(--space-section);
}

.page-section:has(+ .section--flush-top) {
  padding-block-end: var(--page-head-padding-bottom);
}

.page-section > * + * {
  margin-block-start: var(--space-stack-lg);
}

.is-layout-constrained > .alignwide {
  max-width: var(--layout-max-width);
}

/* Bands keep their border on the outer group; the inner width is constrained. */
.store-band,
.newsletter-band {
  margin-block: 0;
}

main > .wp-block-post-content > .section:last-child,
main > .section:last-child {
  padding-bottom: calc(var(--space-section) + var(--footer-wave-height));
  border-bottom: 0;
}

/* ---- Header -------------------------------------------------------------- */
.site-header-wrap {
  position: sticky;
  top: calc(var(--wp-admin--admin-bar--height, 0rem) + var(--header-offset));
  z-index: var(--layer-header);
  padding-inline: var(--header-offset);
  margin-block: var(--header-offset);
}

.site-header {
  gap: var(--space-inline-sm);
  max-width: var(--header-max-width);
  height: var(--header-height);
  margin-inline: auto;
  padding: 0 var(--header-padding-end) 0 var(--header-padding-start);
  border: var(--outline-width) solid var(--outline-color);
  border-radius: var(--header-radius);
  box-shadow: var(--header-shadow);
  position: relative;
  isolation: isolate;
}

/* The frosted background sits on a pseudo-element: a backdrop-filter on the
   header itself would trap the full-screen mobile menu inside the pill. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--header-bg);
  backdrop-filter: blur(var(--header-blur)) saturate(var(--header-saturate));
  -webkit-backdrop-filter: blur(var(--header-blur)) saturate(var(--header-saturate));
}

.site-header .wp-block-buttons {
  flex: none;
  gap: var(--space-inline-sm);
}

@media (max-width: 63.99rem) {
  .site-header .site-nav {
    display: none;
  }

  .site-header .site-header__actions {
    margin-inline-start: auto;
  }
}

/* ---- Navigation (core/navigation) ------------------------------------------ */
.site-nav {
  font-family: var(--font-family-display);
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
}

.site-nav .wp-block-navigation__container {
  gap: var(--site-nav-gap);
}

.site-nav .wp-block-navigation-item__content {
  text-decoration: none;
}

.site-nav .wp-block-navigation-item__content:hover,
.site-nav .current-menu-item > .wp-block-navigation-item__content,
.site-nav .current-menu-ancestor > .wp-block-navigation-item__content {
  text-decoration: underline;
  text-decoration-color: var(--color-accent-highlight);
  text-decoration-thickness: var(--underline-thickness-bold);
  text-underline-offset: var(--underline-offset-loose);
}

.site-nav .wp-block-navigation__submenu-container {
  padding: var(--space-2);
  border: var(--outline-width) solid var(--outline-color) !important;
  border-radius: var(--radius-badge);
  background: var(--color-bg-raised) !important;
  box-shadow: var(--elevation-sticker-md);
}

.site-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  padding: var(--space-1-5) var(--space-3) !important;
  border-radius: var(--radius-control);
}

.site-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  background: var(--color-bg-brand-soft);
  text-decoration: none;
}

.site-nav .nav-menu-only {
  display: none;
}

/* ---- Phone menu (blue-iris/menu) ------------------------------------------ */
.site-menu {
  display: contents;
}

@media (min-width: 64rem) {
  .site-menu {
    display: none;
  }
}

html:has(.menu[open]) {
  overflow: hidden;
}

.menu {
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: calc(var(--wp-admin--admin-bar--height, 0rem) + var(--header-offset)) var(--header-offset) var(--space-section);
  border: 0;
  background: var(--menu-bg);
  color: var(--color-text-primary);
  font-family: var(--font-family-body);
}

.menu::backdrop {
  background: var(--menu-bg);
}

.menu__head,
.menu__nav {
  max-width: var(--header-max-width);
  margin-inline: auto;
}

.menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-inline-sm);
  height: var(--header-height);
  padding: 0 calc(var(--header-padding-end) + var(--outline-width)) 0 calc(var(--header-padding-start) + var(--outline-width));
}

.menu__nav {
  margin-block-start: var(--space-stack-xl);
  padding-inline: calc(var(--space-gutter) - var(--header-offset));
}

.menu__nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu__nav > ul {
  display: grid;
  gap: var(--space-stack-sm);
}

.menu__nav > ul > li > a,
.menu__expander > summary {
  display: inline-block;
  font-family: var(--font-family-display);
  font-size: var(--menu-link-size);
  font-weight: var(--type-heading-2-weight);
  line-height: var(--type-heading-2-line-height);
  text-decoration: none;
}

.menu__nav > ul > li > a[aria-current],
.menu__expander > summary[data-current] > span,
.menu__expander li a[aria-current] {
  text-decoration: underline;
  text-decoration-color: var(--color-accent-highlight);
  text-decoration-thickness: var(--underline-thickness-bold);
  text-underline-offset: var(--underline-offset-loose);
}

@media (hover: hover) {
  .menu__nav > ul > li > a:hover,
  .menu__expander > summary:hover > span,
  .menu__expander li a:hover {
    text-decoration: underline;
    text-decoration-color: var(--color-accent-highlight);
    text-decoration-thickness: var(--underline-thickness-bold);
    text-underline-offset: var(--underline-offset-loose);
  }
}

.menu__expander > summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  list-style: none;
}

.menu__expander > summary::-webkit-details-marker {
  display: none;
}

.menu__toggle {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--menu-chevron-size);
  height: var(--menu-chevron-size);
  border: var(--outline-width) solid var(--outline-color);
  border-radius: var(--radius-pill);
  background: var(--icon-button-bg);
  box-shadow: var(--elevation-sticker-sm);
}

.menu__toggle svg {
  width: 60%;
  height: 60%;
  transition: rotate var(--motion-duration-state) var(--motion-ease-playful);
}

.menu__expander[open] .menu__toggle svg {
  rotate: 180deg;
}

.menu__expander::details-content {
  block-size: 0;
  overflow: clip;
  interpolate-size: allow-keywords;
  transition:
    block-size var(--motion-duration-state) var(--motion-ease-default),
    content-visibility var(--motion-duration-state) allow-discrete;
}

.menu__expander[open]::details-content {
  block-size: auto;
}

.menu__expander ul {
  display: grid;
  margin: var(--space-stack-sm) 0 var(--space-stack-xs);
  padding-inline-start: var(--space-4);
  border-inline-start: var(--outline-width) solid var(--color-line-subtle);
}

.menu__expander li a {
  display: inline-block;
  padding-block: var(--space-1-5);
  font-family: var(--font-family-display);
  font-size: var(--type-lead-size);
  font-weight: var(--type-label-weight);
  line-height: var(--type-lead-line-height);
  text-decoration: none;
}

.menu__label {
  margin: var(--space-stack-2xl) 0 var(--space-stack-md);
  color: var(--color-text-tertiary);
  font-size: var(--type-eyebrow-size);
  font-weight: var(--type-eyebrow-weight);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
}

.menu__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-inline-sm);
}

.menu__chips .chip[aria-current] {
  background: var(--chip-bg-active);
  color: var(--chip-fg-active);
}

/* ---- Buttons (core/button) --------------------------------------------- */
.wp-block-button__link,
.wp-element-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--button-gap);
  min-height: var(--button-height-md);
  padding: 0 var(--button-padding-x-md);
  border: var(--outline-width) solid var(--outline-color);
  border-radius: var(--button-radius);
  color: var(--button-primary-fg);
  background: var(--button-primary-bg);
  box-shadow: var(--button-shadow);
  font-family: var(--font-family-display);
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  line-height: var(--type-label-line-height);
  text-decoration: none;
  transition:
    background-color var(--motion-duration-hover) var(--motion-ease-default),
    transform var(--motion-duration-hover) var(--motion-ease-default),
    box-shadow var(--motion-duration-hover) var(--motion-ease-default);
}

.wp-block-button__link:hover,
.wp-element-button:hover {
  background: var(--button-primary-bg-hover);
  color: var(--button-primary-fg);
  transform: translate(var(--elevation-lift), var(--elevation-lift));
  box-shadow: var(--button-shadow-hover);
}

.wp-block-button.is-style-outline > .wp-block-button__link {
  border: var(--outline-width) solid var(--outline-color);
  color: var(--button-fg);
  background: var(--button-secondary-bg);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
  background: var(--button-secondary-bg-hover);
}

.wp-block-button.is-style-sunny > .wp-block-button__link {
  color: var(--button-fg);
  background: var(--button-sunny-bg);
}

.wp-block-button.is-style-sunny > .wp-block-button__link:hover {
  background: var(--button-sunny-bg-hover);
}

.wp-block-button.is-style-small > .wp-block-button__link,
.site-header .wp-block-button__link {
  min-height: var(--button-height-sm);
  padding: 0 var(--button-padding-x-sm);
  font-size: var(--button-font-size-sm);
  box-shadow: var(--elevation-sticker-sm);
}

.wp-block-button.is-style-chip > .wp-block-button__link {
  min-height: var(--chip-height-sm);
  padding: 0 var(--chip-padding-x-sm);
  color: var(--color-text-primary);
  background: var(--chip-bg);
  box-shadow: var(--chip-shadow);
  font-size: var(--type-label-size);
  font-weight: var(--type-weight-soft);
}

.wp-block-button.is-style-chip > .wp-block-button__link:hover {
  background: var(--button-secondary-bg-hover);
}

.wp-block-button__link svg,
.btn svg {
  flex: none;
  width: var(--button-icon-size);
  height: var(--button-icon-size);
}

/* ---- Hero ---------------------------------------------------------------- */
.hero {
  margin-block: 0;
}

.hero__grid {
  gap: var(--hero-grid-gap);
  margin: 0;
}

.hero__text > * + * {
  margin-block-start: var(--space-stack-md);
}

@media (max-width: 63.99rem) {
  .hero__grid {
    flex-wrap: wrap !important;
  }

  .hero__grid > .wp-block-column {
    flex-basis: 100% !important;
  }
}

@container (max-width: 47.99rem) {
  .hero__lead,
  .hero .search:where(form) {
    display: none;
  }
}

.hero__title {
  font-size: var(--type-display-size);
  line-height: var(--type-display-line-height);
  font-weight: var(--type-display-weight);
  letter-spacing: var(--type-display-tracking);
}

mark.squiggle {
  padding-bottom: 0.08em;
  color: inherit;
  background: var(--squiggle-image) left bottom / 100% 0.36em no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.eyebrow {
  gap: var(--space-inline-xs);
}

.eyebrow::before {
  content: "";
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  background: var(--sparkle-image) center / contain no-repeat;
}

.quick-picks {
  gap: var(--space-inline-sm);
}

.quick-picks::before {
  content: "On the blog";
  color: var(--color-text-tertiary);
  font-size: var(--type-eyebrow-size);
  font-weight: var(--type-eyebrow-weight);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
}

.collage {
  position: relative;
  container-type: inline-size;
  max-width: var(--hero-collage-max-width);
  height: var(--hero-collage-height);
  margin-inline: auto;
}

.collage .polaroid {
  margin: 0;
}

.collage .polaroid figcaption {
  display: grid;
  place-items: center;
  height: var(--hero-polaroid-caption-space);
  margin: 0;
  font-family: var(--font-family-display);
  font-size: var(--type-label-size);
  font-weight: var(--type-weight-soft);
}

.collage::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: var(--hero-iris-size);
  aspect-ratio: 120 / 140;
  background: var(--iris-image) center / contain no-repeat;
  translate: -50% 0;
  animation: float var(--motion-duration-float) var(--motion-ease-float) infinite;
}

.collage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--stars-image);
}

/* ---- Section heads made of blocks ---------------------------------------- */
.section-head {
  margin-bottom: var(--space-section-head);
}

.section-head > .wp-block-group > * + * {
  margin-block-start: var(--space-stack-sm);
}

.section-head .text-link a {
  text-decoration: inherit;
}

.text-link a::after {
  content: " →";
}

/* ---- Post cards (core Query Loop + Related posts) ------------------------ */
.post-grid {
  padding: 0;
  list-style: none;
}

.post-grid > li {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  border: var(--outline-width) solid var(--outline-color);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  overflow: clip;
  transition:
    transform var(--motion-duration-hover) var(--motion-ease-default),
    box-shadow var(--motion-duration-hover) var(--motion-ease-default);
}

.post-grid > li:hover {
  transform: translate(var(--elevation-lift), var(--elevation-lift));
  box-shadow: var(--card-shadow-hover);
}

.post-grid .post-card__media {
  margin: 0;
  border-bottom: var(--outline-width) solid var(--outline-color);
  background: var(--color-bg-brand-soft);
}

.post-grid .post-card__media img {
  width: 100%;
  height: auto !important;
  aspect-ratio: var(--post-card-media-ratio) !important;
  object-fit: cover;
  object-position: top;
}

.post-grid .post-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-stack-sm);
  padding: var(--card-padding);
}

.post-grid .post-card__body > * {
  margin: 0;
}

.post-grid .post-card__tags,
.post__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-inline-xs);
  color: transparent;
  font-size: 0;
}

.post-grid .post-card__tags .tag,
.post__tags .tag,
.post-card__tags a.tag {
  font-size: var(--tag-font-size);
  color: var(--color-text-primary);
  text-decoration: none;
}

.post-grid .post-card__title {
  font-size: var(--post-card-title-size);
  line-height: var(--type-title-sm-line-height);
  font-weight: var(--type-title-sm-weight);
  text-wrap: pretty;
}

.post-grid .post-card__title a {
  text-decoration: none;
}

.post-grid .post-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.post-grid .post-card__tags a {
  position: relative;
  z-index: 2;
}

.post-grid .post-card__excerpt {
  color: var(--color-text-secondary);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-lead-line-height);
}

.post-grid .post-card__excerpt p {
  margin: 0;
}

.post-grid .meta {
  margin-top: auto;
}

.post-grid .meta a:first-child {
  margin-inline-start: calc(var(--space-0-5) * -1);
}

.post-grid .meta a {
  position: relative;
  z-index: 2;
  display: inline-block;
  min-height: 1.5rem;
  padding-inline: var(--space-0-5);
  line-height: 1.5rem;
  color: inherit;
  text-decoration: none;
}

.post-grid .meta a:hover {
  text-decoration: underline;
}

.post-grid .post-card__more {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-self: flex-start;
  width: auto;
  margin-block-start: var(--space-stack-xs);
  text-decoration: none;
}

@container (min-width: 64rem) {
  .post-grid > li {
    flex-direction: row;
  }

  .post-grid .post-card__media {
    flex: 0 0 var(--post-card-media-width-wide);
    border-bottom: 0;
    border-inline-end: var(--outline-width) solid var(--outline-color);
  }

  .post-grid .post-card__media a {
    display: block;
    height: 100%;
  }

  .post-grid .post-card__media img {
    height: 100% !important;
  }

  .post-grid .post-card__body {
    justify-content: center;
    padding: var(--post-card-padding-wide);
  }

  .post-grid .post-card__title {
    font-size: var(--post-card-title-size-wide);
  }

  .post-grid .meta {
    margin-top: 0;
  }

  .post-grid .post-card__more {
    margin-block-start: auto;
  }
}

.wp-block-query-pagination {
  margin-top: var(--space-stack-2xl);
  gap: var(--space-inline-sm);
  font-family: var(--font-family-display);
  font-weight: var(--type-label-weight);
}

.wp-block-query-pagination-numbers .page-numbers {
  display: inline-grid;
  place-items: center;
  min-width: var(--chip-height);
  height: var(--chip-height);
  border: var(--outline-width) solid var(--outline-color);
  border-radius: var(--radius-pill);
  text-decoration: none;
}

.wp-block-query-pagination-numbers .current {
  background: var(--chip-bg-active);
  color: var(--chip-fg-active);
}

/* ---- Resource grid variants ---------------------------------------------- */
.resource-grid.is-style-scroller .posts {
  display: flex;
  gap: var(--card-gap);
  margin-inline: calc(-1 * var(--space-gutter));
  padding: var(--scroller-room-top) var(--space-gutter) var(--scroller-room-bottom);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--space-gutter);
  scrollbar-width: none;
}

.resource-grid.is-style-scroller .card {
  flex: none;
  width: var(--scroller-card-width);
  scroll-snap-align: start;
}

.catalog__search {
  margin-top: 0;
  margin-bottom: var(--space-stack-md);
}

.catalog__search .input {
  height: var(--search-height-compact);
  padding-left: var(--search-padding-start-compact);
}

.catalog__search .search__icon {
  left: var(--search-icon-inset-compact);
  width: var(--search-icon-size-compact);
  height: var(--search-icon-size-compact);
}

.page-section > .search:where(form) {
  margin-inline: max(0px, (100% - var(--layout-max-width)) / 2) auto !important;
}

.page-section > .page-title--compact,
.blog-head > .page-title--compact {
  font-size: var(--type-page-title-size-compact);
}

.page-section > .page-title--compact + *,
.blog-head > .page-title--compact + * {
  margin-block-start: var(--space-stack-md);
}

.blog-head .page-head__chips {
  flex-wrap: nowrap;
  margin-inline: 0 calc(-1 * var(--space-gutter));
  padding: var(--filter-chips-room) var(--space-gutter) var(--filter-chips-room) 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.blog-head .page-head__chips::-webkit-scrollbar {
  display: none;
}

@container (min-width: 48rem) {
  .blog-head .page-head__chips {
    flex-wrap: wrap;
    margin-inline: 0;
    padding: var(--filter-chips-room) 0;
    overflow: visible;
  }
}

.card__cover-placeholder {
  display: grid;
  place-items: center;
  aspect-ratio: var(--product-media-ratio);
}

.card__cover-placeholder svg {
  width: 30%;
  height: 30%;
}

/* ---- Topic tiles and lists ------------------------------------------------ */
.collections__list {
  display: grid;
  gap: var(--collection-gap);
  padding: 0;
  list-style: none;
}

@container (min-width: 40rem) {
  .collections__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container (min-width: 60rem) {
  .collections__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.tiles > li,
.collections__list > li {
  margin: 0;
}

/* ---- Pages and posts ------------------------------------------------------ */
.page-title,
.page-head h1 {
  font-size: var(--type-page-title-size);
  line-height: var(--type-display-line-height);
  font-weight: var(--type-display-weight);
  letter-spacing: var(--type-display-tracking);
  text-wrap: balance;
}

.page-head {
  display: grid;
  justify-items: start;
  gap: var(--space-stack-md);
  padding: 0;
}

.page-head__lead p {
  margin: 0;
}

.page-head__meta {
  color: var(--color-text-tertiary);
  font-size: var(--type-caption-size);
  font-weight: var(--type-weight-strong);
}

.yoast-breadcrumbs {
  color: var(--color-text-tertiary);
  font-size: var(--type-caption-size);
  font-weight: var(--type-weight-strong);
}

.yoast-breadcrumbs a {
  color: var(--color-text-secondary);
  text-decoration: underline;
  text-decoration-color: var(--color-accent-brand-soft);
  text-decoration-thickness: var(--underline-thickness);
  text-underline-offset: var(--underline-offset);
}

.yoast-breadcrumbs a:hover {
  text-decoration: underline;
}

.yoast-breadcrumbs .breadcrumb_last {
  color: var(--color-text-tertiary);
}

.post-hero {
  display: grid;
  gap: var(--space-stack-xl);
}

.post-hero > .wp-block-group > * + * {
  margin-block-start: var(--space-stack-md);
}

.post-hero .wp-block-post-title {
  font-size: var(--type-post-title-size);
  line-height: var(--type-heading-2-line-height);
  font-weight: var(--type-display-weight);
  letter-spacing: var(--type-display-tracking);
  text-wrap: balance;
}

.post-hero .wp-block-post-excerpt {
  color: var(--color-text-secondary);
  font-size: var(--type-lead-size);
  line-height: var(--type-lead-line-height);
}

.post-hero .wp-block-post-excerpt__excerpt {
  margin: 0;
}

.post-hero .wp-block-post-featured-image {
  justify-self: center;
  width: min(100%, var(--post-pin-width));
  margin: 0 auto;
}

.post-hero .wp-block-post-featured-image img {
  border: var(--outline-width) solid var(--outline-color);
  border-radius: var(--card-radius);
  box-shadow: var(--elevation-sticker-lg);
}

.post-meta {
  gap: var(--meta-gap);
  color: var(--color-text-tertiary);
  font-size: var(--type-caption-size);
  font-weight: var(--type-weight-strong);
}

.post-meta > * {
  margin: 0;
}

@container (min-width: 48rem) {
  .post-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) var(--post-pin-width);
    align-items: center;
  }
}

/* Post content: rendered by the editor, styled like .prose. The block spans
   the article width (so it lines up with the header) and its children keep a
   readable measure. */
.wp-block-post-content.prose > * {
  max-width: var(--prose-measure);
}

.prose > * {
  margin-block: 0;
}

.prose > * + * {
  margin-block-start: var(--space-stack-md);
}

.prose .wp-block-blue-iris-resource {
  margin-block: var(--space-stack-lg);
}

.prose img {
  height: auto;
  border-radius: var(--radius-badge);
}

.post__topics {
  gap: var(--space-inline-sm);
  padding-top: var(--space-stack-lg);
  border-top: var(--hairline-width) solid var(--color-line-subtle);
  font-family: var(--font-family-display);
  font-weight: var(--type-label-weight);
}

.post__topics .wp-block-post-terms__prefix {
  margin-right: var(--space-inline-xs);
}

.post__topics a {
  display: inline-flex;
  align-items: center;
  height: var(--chip-height-sm);
  padding: 0 var(--chip-padding-x-sm);
  border: var(--outline-width) solid var(--outline-color);
  border-radius: var(--radius-pill);
  background: var(--cat-tint);
  box-shadow: var(--chip-shadow);
  font-size: var(--type-label-size);
  font-weight: var(--type-weight-soft);
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
}

.post__topics .wp-block-post-terms__separator {
  display: none;
}

.post__topics .wp-block-post-terms {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-inline-sm);
  margin: 0;
}

.post__topics > p {
  margin: 0;
}

/* ---- Contact form ---------------------------------------------------------- */
.contact-form {
  display: grid;
  gap: var(--space-stack-md);
  max-width: var(--layout-measure);
}

.contact-form__field {
  display: grid;
  gap: var(--space-stack-xs);
  font-family: var(--font-family-display);
  font-weight: var(--type-label-weight);
}

.input--area {
  height: auto;
  padding-block: var(--space-3);
  border-radius: var(--radius-lg);
  font-family: var(--font-family-body);
  resize: vertical;
}

/* ---- Promises ---------------------------------------------------------------- */
.promises > .promise {
  grid-template-columns: auto 1fr;
  margin: 0;
}

.promises > .promise > * {
  grid-column: 2;
  margin: 0;
}

.promise::before {
  content: "";
  grid-row: 1 / span 2;
  width: var(--icon-button-size);
  height: var(--icon-button-size);
  border: var(--outline-width) solid var(--outline-color);
  border-radius: var(--radius-badge);
  background: var(--promise-icon) center / 55% no-repeat, var(--cat-fill);
  box-shadow: var(--elevation-sticker-sm);
  rotate: var(--motion-wiggle-angle);
}

.promise--print { --promise-icon: var(--print-image); --cat-fill: var(--color-tone-sunshine-fill); }
.promise--check { --promise-icon: var(--check-image); --cat-fill: var(--color-tone-sky-fill); }
.promise--palette { --promise-icon: var(--palette-image); --cat-fill: var(--color-tone-frog-fill); }

/* ---- Footer --------------------------------------------------------------------- */
.site-footer {
  container-type: inline-size;
  margin-top: 0;
  padding-inline: var(--space-gutter);
}

.site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: calc(100% - var(--hairline-width));
  width: 100%;
  height: var(--footer-wave-height);
  background: var(--footer-bg);
  mask: var(--wave-image) center / 100% 100% no-repeat;
  -webkit-mask: var(--wave-image) center / 100% 100% no-repeat;
}

.site-footer > * {
  max-width: var(--layout-max-width);
  margin-inline: auto;
}

.site-footer .footer-nav {
  gap: var(--footer-nav-gap-row) var(--footer-nav-gap-column);
}

.site-footer .footer-nav .wp-block-column {
  flex-basis: calc(50% - var(--footer-nav-gap-column)) !important;
}

@container (min-width: 48rem) {
  .site-footer .footer-nav .wp-block-column {
    flex-basis: 0 !important;
  }
}

.site-footer .footer-nav h2 {
  margin: 0 0 var(--space-stack-md);
}

.site-footer .footer-nav ul {
  padding: 0;
  list-style: none;
}

.site-footer a {
  color: var(--footer-fg);
}

.site-footer__legal a {
  color: inherit;
}

/* ---- Editor helpers -------------------------------------------------------------- */
.blue-iris-placeholder,
.blue-iris-editor-note {
  padding: var(--space-3) var(--space-4);
  border: var(--hairline-width) dashed var(--color-line-ink);
  border-radius: var(--radius-control);
  color: var(--color-text-secondary);
  font-size: var(--type-caption-size);
}