:root {
  --bg: #fcf8f4;
  --bg-elevated: #ffffff;
  --ink: #2b2b2b;
  --muted: #666666;
  --faint: #9a9a9a;
  --line: #f0dfe3;
  --line-strong: #e8c9d0;
  --accent: #2ea3f2;
  --accent-dark: #1b86cf;
  /* Gift title badge only — do not reuse for global accents / links */
  --gift-num-bg: #123047;
  --pink: #e8b4bc;
  --max: 1080px;
  --header-h: 88px;
  --radius-banner: 22px;
  --radius: 8px;
  --font-display: "Bayon", "Arial Narrow", Helvetica, Arial, sans-serif;
  --font-body: "Inter", Helvetica, Arial, sans-serif;
  --gutter: 1rem;
}

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

html {
  scroll-behavior: smooth;
  /* Sticky header must not hide in-page targets or first-viewport anchors */
  scroll-padding-top: calc(var(--header-h) + 0.5rem);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--accent-dark);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: #000;
  color: #fff;
  padding: 0.5rem 1rem;
  z-index: 100;
}

.skip-link:focus {
  left: 0;
}

/* —— Header (cream like live) —— */
.site-header {
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 40;
}

.site-header__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0.65rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--header-h);
}

.logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

.logo img {
  width: 72px;
  height: auto;
  display: block;
}

.nav-toggle {
  display: none;
  border: 1px solid var(--line-strong);
  background: transparent;
  border-radius: 4px;
  padding: 0.45rem 0.7rem;
  font: inherit;
  cursor: pointer;
  color: var(--ink);
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.2rem 1.5rem;
}

.site-nav a,
.site-nav .nav-pending {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.site-nav a:hover {
  color: #000;
  text-decoration: none;
}

.site-nav .nav-pending {
  color: var(--ink);
  cursor: default;
  opacity: 0.72;
}

.site-nav .is-active {
  color: #000;
  box-shadow: inset 0 -2px 0 var(--pink);
}

/*
 * Imprint / Legal Notice — dedicated content column.
 * All page content (including H1) lives in .imprint-page__inner.
 * Do not reuse .section__title / .wrap for this page.
 */
.imprint-page {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

.imprint-page__inner {
  box-sizing: border-box;
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
  padding: 32px 20px 48px;
}

.imprint-page__inner p,
.imprint-page__inner address,
.imprint-page__inner dl,
.imprint-page__inner dt,
.imprint-page__inner dd {
  margin: 0;
}

.imprint-page__title {
  font-family: var(--font-display);
  font-size: 1.75rem; /* 28px mobile */
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
  line-height: 1.2;
  margin: 0 0 28px;
  color: #1f1f1f;
  font-weight: 400;
  overflow-wrap: anywhere;
}

.imprint-page__body {
  color: var(--ink);
  font-size: 1.0625rem; /* 17px within 16–18px */
  line-height: 1.6;
  text-align: left;
  max-width: none;
  margin: 0;
}

.imprint-page__block {
  margin: 0 0 24px;
}

.imprint-page__block:last-child {
  margin-bottom: 0;
}

.imprint-page__label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
  padding: 0 0 7px; /* 6–8px to value; padding avoids margin-collapse */
}

.imprint-page__value,
.imprint-page__address {
  margin: 0;
  overflow-wrap: anywhere;
  word-break: normal;
}

.imprint-page__break {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.imprint-page__about {
  margin: 24px 0 0;
  color: var(--muted);
  overflow-wrap: anywhere;
}

@media (max-width: 360px) {
  .imprint-page__inner {
    padding: 32px 16px 48px;
  }
}

@media (min-width: 768px) {
  .imprint-page__title {
    font-size: 2rem;
  }

  .imprint-page__body {
    font-size: 1.125rem; /* 18px */
  }
}

.header-rule {
  height: 1px;
  background: var(--pink);
  border: 0;
  margin: 0;
  opacity: 0.85;
}

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 1.25rem; /* 20px; do not override with padding shorthand on .wrap companions */
  box-sizing: border-box;
}

/* Category overviews: one shared content column (breadcrumb → cards).
   Root cause of flush mobile text/cards: .page-hero / .section used padding shorthand
   after .wrap and zeroed horizontal gutters on equal specificity. */
.category-page {
  padding-top: 1.5rem; /* ~24px below header */
  padding-bottom: 2.5rem;
}

.category-page__intro {
  margin: 0;
  padding: 0;
}

.category-page .breadcrumb {
  margin: 0 0 0.75rem; /* ~12px to title */
}

.category-page__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 0.85rem; /* ~12–16px to lead */
  line-height: 1.1;
}

.category-page__lead {
  max-width: 42rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.55;
}

.category-page__guides {
  margin-top: 0.75rem; /* part of ~24–32px intro → first card */
  padding: 0;
}

.category-page .rule {
  /* beat generic .rule margin: 0 auto 1.75rem */
  margin: 0.4rem auto 0.75rem;
}

.category-page__grid {
  gap: 1.35rem; /* ~22px between cards */
}

.category-page .card__body {
  padding: 1rem 1.15rem 1.2rem; /* ~16–18px inner */
}

@media (max-width: 360px) {
  .category-page.wrap {
    padding-left: 1rem; /* 16px floor at ~320–360 */
    padding-right: 1rem;
  }
}

/* —— Home intro + category entry cards —— */
.home-intro {
  padding: 1.6rem 0 1.35rem;
  text-align: center;
}

.home-intro__title {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 4.2vw, 2.65rem);
  letter-spacing: 0.04em;
  text-transform: none;
  line-height: 1.15;
  margin: 0 0 0.65rem;
  color: #1f1f1f;
  font-weight: 400;
}

.home-intro__lead {
  margin: 0 auto 1.5rem;
  max-width: 36rem;
  color: var(--muted);
  font-size: clamp(0.98rem, 1.5vw, 1.08rem);
  line-height: 1.55;
}

.cat-entry-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
  text-align: left;
}

.cat-entry {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-height: 5.5rem;
  padding: 1rem 0.95rem;
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cat-entry:hover {
  border-color: var(--line-strong);
  box-shadow: 0 1px 0 rgba(232, 180, 188, 0.35);
}

.cat-entry:focus {
  outline: none;
}

.cat-entry:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.cat-entry__icon-wrap {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-dark);
  background: rgba(232, 180, 188, 0.22);
}

.cat-entry__icon {
  display: block;
}

.cat-entry__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}

.cat-entry__title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
  color: #1f1f1f;
}

.cat-entry__blurb {
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--muted);
}

.cat-entry__arrow {
  flex: 0 0 auto;
  align-self: center;
  color: var(--accent-dark);
  font-size: 1.15rem;
  line-height: 1;
}

/* Legacy banner mosaic kept for non-home pages if referenced */
.banner-stage {
  padding: 1.35rem 0 1.1rem;
}

.banner-mosaic {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: var(--gutter);
  align-items: stretch;
}

.banner-mosaic__primary,
.banner-mosaic__secondary {
  border-radius: var(--radius-banner);
  overflow: hidden;
  background: #f3ebe3;
  line-height: 0;
}

.banner-mosaic__primary img,
.banner-mosaic__secondary img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.banner-mosaic__primary {
  min-height: 0;
}

.banner-mosaic__primary img {
  aspect-ratio: 16 / 9.3;
  object-fit: cover;
}

.banner-mosaic__stack {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: var(--gutter);
  min-height: 0;
}

.banner-mosaic__secondary img {
  aspect-ratio: 2.05 / 1;
  object-fit: cover;
}

.banner-mosaic a {
  display: block;
  height: 100%;
}

.content-rule,
.wrap-rule {
  max-width: var(--max);
  margin: 0.35rem auto 0;
  padding: 0 1.25rem;
  height: 1px;
  border: 0;
  background: var(--pink);
  opacity: 0.75;
  display: block;
  width: calc(100% - 2.5rem);
  box-sizing: content-box;
}

.section {
  /* padding-block only — full padding shorthand would wipe .wrap side gutters */
  padding-block: 2rem 2.5rem;
}

.section--guides {
  padding-top: 0.5rem;
}

.section__title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 2.55rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 0.35rem;
  color: #1f1f1f;
}

.section__sub {
  text-align: center;
  color: var(--muted);
  margin: 0 auto 1.75rem;
  max-width: 34rem;
  font-size: 0.98rem;
}

.rule {
  width: min(220px, 40%);
  height: 1px;
  background: var(--pink);
  border: 0;
  margin: 0 auto 1.75rem;
}

.topic-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.85rem;
}

.topic {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0.35rem 0.25rem;
  text-align: center;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.topic__label {
  font-weight: 600;
  color: var(--ink);
  font-size: 0.98rem;
}

a.topic__label {
  color: var(--ink);
}

a.topic__label:hover {
  color: var(--accent-dark);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.card {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card__media {
  aspect-ratio: 4 / 3;
  background: #fff;
  overflow: hidden;
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: #fff;
}

.card--no-media .card__body {
  padding-top: 1.35rem;
}

.card__body {
  padding: 1.15rem 1.2rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex: 1;
}

.card__kicker {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-dark);
  font-weight: 600;
}

.card__title {
  font-family: var(--font-display);
  font-size: 1.55rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.15;
}

.card__title a {
  color: inherit;
  text-decoration: none;
}

.card__title a:hover {
  color: var(--accent-dark);
}

.card__excerpt {
  color: var(--muted);
  margin: 0;
  flex: 1;
}

.card__meta {
  font-size: 0.85rem;
  color: var(--faint);
}

/* —— Guide page (aligned to live PSYNC article / gifts-for-grandpa) —— */
.page-hero {
  /* padding-block only — full padding shorthand would wipe .wrap side gutters */
  padding-block: 2.25rem 1.25rem;
}

.breadcrumb {
  font-size: 0.88rem;
  color: var(--muted);
  margin-bottom: 1rem;
}

.breadcrumb a {
  color: var(--muted);
}

.page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 0.75rem;
  line-height: 1.1;
}

.page-hero p {
  max-width: 42rem;
  color: var(--muted);
  margin: 0;
}

.guide-page {
  max-width: 980px;
  padding-top: 1.75rem;
  padding-bottom: 2.5rem;
  --guide-ink: #1f1d1b;
  --guide-body: #45423e;
  --guide-muted: #6a6560;
  --guide-line: rgba(0, 0, 0, 0.065);
  --guide-surface: #faf8f5;
  --guide-card: #fffefb;
  --guide-cta-bg: #2a2624;
  --guide-cta-hover: #3a3531;
  --guide-cta-fg: #faf8f5;
}

.guide-page__header {
  text-align: center;
  margin-bottom: 1.1rem;
}

.guide-page__title {
  font-family: var(--font-body);
  font-size: clamp(2rem, 4.5vw, 3.9rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #000;
  margin: 0;
  line-height: 1.12;
}

.guide-page__meta {
  margin: 0.55rem 0 0;
  font-size: 0.95rem;
  color: var(--guide-muted);
}

.guide-intro {
  margin: 0 0 1.15rem;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--guide-line);
  border-radius: 12px;
  background: var(--guide-surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.035);
}

.guide-intro p {
  margin: 0 0 0.55em;
  font-size: 1.0625rem;
  line-height: 1.66;
  color: var(--guide-body);
}

.guide-intro p:last-child {
  margin-bottom: 0;
}

.guide-disclosures {
  margin: 0 0 1.35rem;
  padding: 0;
}

.guide-disclosure {
  margin: 0 0 0.55rem;
  padding: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--guide-muted);
  max-width: 42rem;
}

.guide-disclosure:last-child {
  margin-bottom: 0;
}

.guide-disclosure--near-cta {
  margin: 0.85rem 0 0.55rem;
  font-size: 0.875rem;
}

/* End-of-article AI credit: plain text, slightly smaller than body, left-aligned */
.guide-ai-credit {
  margin: 1.5rem 0 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #4a4a4a;
  text-align: left;
  max-width: none;
}

.guide-hero-media {
  margin: 0.85rem 0 1.35rem;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--guide-line);
  background: #fff;
}

.guide-hero-media img {
  width: 100%;
  /* Wide article band: taller than cards so faces survive cover; per-guide focus via inline style */
  max-height: min(56vw, 520px);
  min-height: 260px;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.gift--text-only {
  gap: 12px 16px;
}

.gift--text-only .gift__body {
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
}

.guide-gifts {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.gift {
  display: flex;
  flex-direction: row;
  align-items: flex-start; /* never vertically center body against media */
  gap: 14px 18px;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 14px 18px;
  border: 1px solid var(--guide-line);
  border-radius: 14px;
  background: var(--guide-card);
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.02),
    0 8px 32px rgba(0, 0, 0, 0.045);
  overflow: hidden;
}

/*
  Product media: width-driven column; height follows natural image ratio.
  Fixed media heights + object-position:center caused empty space above
  landscape photos inside the box (visual misalignment vs. title).
*/
.gift__media {
  flex: 0 0 228px;
  width: 228px;
  max-width: 100%;
  height: auto;
  max-height: none;
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.05);
  align-self: flex-start;
}

.gift__media--empty {
  display: none;
}

.gift__media a {
  display: block;
  width: 100%;
  height: auto;
  line-height: 0;
}

.gift__media img {
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: none;
  object-fit: contain;
  object-position: top center;
  display: block;
  background: #fff;
}

.gift__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 0;
  margin-top: 0;
}

.gift__title {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 12px;
  /* Digit + first title line share one text baseline (all viewports). */
  align-items: baseline;
  margin: 0 0 10px;
  padding: 0;
  width: 100%;
  font-family: var(--font-body);
  font-size: clamp(1rem, 1vw + 0.52rem, 1.125rem);
  line-height: 1.38;
  font-weight: 500;
  color: var(--guide-ink);
  text-transform: none;
  letter-spacing: 0.004em;
}

/*
  Number badge: the digit is normal text (same font/size/weight/line-height as the
  title) so .gift__title { align-items: baseline } shares one alphabetic baseline
  with the first title line. The navy square is only a ::before background —
  no flex/grid centering, no padding that shifts the glyph inside the box.
*/
.gift__num {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  min-width: max(32px, 1.85em);
  width: max(32px, 1.85em);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-style: inherit;
  letter-spacing: inherit;
  line-height: inherit; /* identical to .gift__title */
  text-align: center;
  vertical-align: baseline;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.gift__num::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  width: 100%;
  top: 50%;
  height: max(32px, 1.85em);
  margin-top: calc(max(32px, 1.85em) / -2);
  border-radius: 6px;
  background: var(--gift-num-bg);
}

.gift__title-text {
  grid-column: 2;
  min-width: 0;
  /* First-line baseline participates in the title grid; wrap stays in this column */
  line-height: inherit;
  font: inherit;
}

.gift__desc {
  font-size: 1rem;
  line-height: 1.66;
  color: var(--guide-body);
  margin: 0 0 10px;
  width: 100%;
}

.gift__desc p {
  margin: 0 0 0.5em;
}

.gift__desc p:last-child {
  margin-bottom: 0;
}

.gift__fact {
  font-size: 0.9375rem;
  line-height: 1.62;
  color: var(--guide-muted);
  margin: 0 0 10px;
  padding-left: 12px;
  border-left: 2px solid rgba(0, 0, 0, 0.07);
  width: 100%;
}

.gift__fact p {
  margin: 0.2em 0 0;
  font-weight: 400;
}

.gift__fact strong {
  font-weight: 600;
  color: var(--guide-body);
}

.gift__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 6px;
  padding: 8px 18px;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.35;
  text-decoration: none !important;
  color: var(--guide-cta-fg) !important;
  background: var(--guide-cta-bg);
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 999px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
  transition: background-color 0.2s ease;
}

.gift__cta:hover {
  background: var(--guide-cta-hover);
  text-decoration: none !important;
}

@media (min-width: 901px) {
  .guide-page {
    max-width: 1080px;
  }

  /* Shared desktop card grid: media | body, top-aligned, uniform column + gap */
  .gift {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    column-gap: 18px;
    row-gap: 0;
    align-items: start;
    gap: 0 18px; /* keep horizontal gap only; avoid flex gap shorthand conflict */
  }

  .gift--text-only {
    grid-template-columns: minmax(0, 1fr);
  }

  .gift__media {
    grid-column: 1;
    grid-row: 1;
    width: 220px;
    max-width: 220px;
    flex: none;
    height: auto;
    max-height: none;
    align-self: start;
  }

  .gift__body {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
  }

  .gift__media img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: top center;
  }
}

@media (max-width: 900px) {
  .gift {
    flex-direction: column;
    align-items: stretch;
    padding: 16px;
    gap: 16px; /* ~16px between photo and number/title */
  }

  /*
    Mobile product photo: no full-width framed box.
    Intrinsic aspect via width/height attrs; capped by card width + max-height 300px.
    Do not stretch beyond natural resolution (max-width/max-height + width/height auto).
  */
  .gift__media {
    flex: 0 0 auto;
    align-self: flex-start;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: none;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .gift__media a {
    display: block;
    width: fit-content;
    max-width: 100%;
    height: auto;
    line-height: 0;
  }

  .gift__media img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 300px;
    object-fit: contain;
    object-position: left center;
    background: transparent;
  }

  .gift__body {
    width: 100%;
    align-items: stretch;
  }

  /* Title/badge baseline rules stay global (align-items:baseline + inline-block digit). */

  .gift__cta {
    align-self: flex-start; /* pill stays content-width; left edge on shared content edge */
  }

  /* Drop fact rail + indent so headings/text share the card content edge */
  .gift__fact {
    padding-left: 0;
    border-left: none;
    margin: 0 0 12px;
  }

  .gift__fact:last-of-type {
    margin-bottom: 10px;
  }

  .gift--text-only {
    flex-direction: row;
    align-items: flex-start;
  }

  .gift--text-only .gift__body {
    align-items: flex-start;
  }
}

@media (max-width: 640px) {
  .guide-page__title {
    font-size: clamp(1.45rem, 7vw, 2rem);
  }

  .guide-hero-media {
    margin: 0.65rem 0 1.05rem;
    border-radius: 10px;
  }

  .guide-hero-media img {
    /* Short viewports need more vertical room or cover-crop clips faces */
    max-height: min(72vw, 340px);
    min-height: 240px;
  }

  .guide-intro {
    padding: 0.65rem 0.85rem;
    border-radius: 10px;
  }

  .guide-intro p {
    font-size: 15px;
    line-height: 1.55;
  }

  .guide-gifts {
    gap: 10px;
  }

  .gift {
    padding: 11px 12px;
    gap: 16px; /* keep photo→title spacing; do not reintroduce fixed media box */
    border-radius: 11px;
  }

  .gift--text-only {
    padding: 12px 14px;
    gap: 10px 12px;
  }

  .gift__media {
    /* height/max-height stay auto from ≤900px rule — no fixed mobile box */
    border-radius: 0;
  }

  .gift__title {
    font-size: clamp(0.875rem, 3.9vw, 0.97rem);
  }

  .gift__desc {
    font-size: 15px;
  }

  .gift__fact {
    font-size: 14px;
  }

  .gift__cta {
    padding: 10px 16px;
  }
}

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--bg);
  padding: 2.25rem 0 2.5rem;
  margin-top: 1rem;
}

.site-footer__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 1.25rem;
  display: grid;
  gap: 1rem;
}

.site-footer strong {
  font-family: var(--font-display);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.site-footer p {
  margin: 0;
  color: var(--muted);
  max-width: 40rem;
}

.site-footer__meta {
  font-size: 0.85rem;
  color: var(--faint);
}

.site-footer__legal {
  margin-top: 0.65rem;
  font-size: 0.85rem;
}

.site-footer__legal a {
  font-weight: 500;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-footer__legal a:hover,
.site-footer__legal a:focus-visible {
  color: var(--ink);
}

.site-footer__legal a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

@media (max-width: 900px) {
  .cat-entry-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .topic-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .card-grid {
    grid-template-columns: 1fr;
  }

  .banner-mosaic {
    grid-template-columns: 1fr;
  }

  .banner-mosaic__stack {
    grid-template-rows: auto;
  }

  .banner-mosaic__primary img {
    aspect-ratio: 16 / 9;
  }

  .banner-mosaic__secondary img {
    aspect-ratio: 2.1 / 1;
  }
}

@media (max-width: 720px) {
  .nav-toggle {
    display: inline-flex;
  }

  .site-nav {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.25rem 0 0.85rem;
  }

  .site-nav.is-open {
    display: flex;
  }

  .site-header__inner {
    flex-wrap: wrap;
  }

  .logo img {
    width: 62px;
  }

  .banner-stage {
    padding-top: 1rem;
  }

  .home-intro {
    padding-top: 1.15rem;
  }

  .topic-row {
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }

  .section__title {
    font-size: 1.75rem;
  }
}

@media (max-width: 420px) {
  .cat-entry-grid {
    grid-template-columns: 1fr;
  }
}

/* —— Preview / performance adjustments —— */
/* Desktop: white panel only; height/position come from theme (top-aligned, no fixed box) */
@media (min-width: 901px) {
  .gift__media {
    background: #fff;
  }
  .gift__media img {
    object-fit: contain;
    object-position: top center;
    background: #fff;
  }
}
.card__media {
  aspect-ratio: 4 / 3;
  background: #fff;
}
.card__media img {
  object-fit: cover;
  object-position: center;
  background: #fff;
}
.card--no-media .card__body {
  padding-top: 1.35rem;
}
.home-featured-more {
  margin-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  justify-content: center;
}
.home-featured-more a {
  font-weight: 600;
  color: var(--accent-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Theme-only public export: text recommendation cards */
.gift--text-only {
  gap: 12px 16px;
}
.gift--text-only .gift__body {
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
}
.guide-hero-media {
  margin: 0.85rem 0 1.35rem;
}
.guide-hero-media img {
  max-height: min(56vw, 520px);
  min-height: 260px;
  object-fit: cover;
  /* Inline object-position on the img overrides when set */
  object-position: center top;
}
@media (max-width: 640px) {
  .guide-hero-media {
    margin: 0.65rem 0 1.05rem;
    border-radius: 10px;
  }
  .guide-hero-media img {
    max-height: min(72vw, 340px);
    min-height: 240px;
  }
  .gift--text-only {
    flex-direction: row;
    align-items: flex-start;
    padding: 12px 14px;
    gap: 10px 12px;
  }
}