/* One editable card per topic; the editor and no-JS page show the complete list. */
.topics.page-section { padding-block: var(--section-space); background: var(--surface-page); }
.topics.page-section > h2, .topic-heading > h2 { max-width: var(--measure-feature); margin: 0 auto var(--heading-gap); font-size: var(--type-section); line-height: var(--leading-heading); text-align: start; }
.topic-heading { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: start; gap: var(--card-space); max-width: var(--measure-feature); margin: 0 auto var(--heading-gap); }
.topic-heading > h2 { max-width: none; margin: 0; }
.topic-heading > .reading-carousel-toggle { margin-top: 2px; }
.topics .topics-grid { display: grid; grid-template-columns: 1fr; gap: 28px; max-width: var(--measure-feature); margin-inline: auto; }
.topic-stage, .topic-viewport { display: contents; }
.topic-story-controls { display: none; }
.topics .topic-story-progress { display: none; }
.topics--interactive { overflow-x: clip; }
.topics--interactive .topics-grid { margin-block-start: 0; gap: 0; }
.topics--interactive :is(.topic-card, .topic-loop-card) { grid-area: 1 / 1; }
:is(.topic-card, .topic-loop-card) { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: var(--layout-gap); align-items: start; min-height: 0; padding: 0; border-radius: 0; overflow: visible; background: transparent; }
:is(.topic-card, .topic-loop-card)[hidden] { display: none; }
/* Reserve the tallest editable card so automatic changes cannot move the page. */
.topics--interactive :is(.topic-card, .topic-loop-card)[hidden] { display:grid;visibility:hidden; }
:is(.topic-card, .topic-loop-card) > figure { position: relative; grid-column: 2; grid-row: 1; height: 360px; min-height: 0; width: 100%; margin: 0; background: var(--color-sand); border-radius: var(--radius-control); overflow: hidden; }
:is(.topic-card, .topic-loop-card) > figure img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--topic-image-position, center); }
.topic-loop-card { display: none; }
.topic-loop-card > figure > a { display: block; width: 100%; height: 100%; }
/* Focal points belong to these original paintings, not their tab order.
   New CMS images keep the neutral default; explicit editor crops still win. */
/* Anxiety: foreground faces; self-worth: face, reflection and candle. */
:is(.topic-card, .topic-loop-card) img[data-original-src*="1930a0fc988ad4c66f7b1c99"] { --topic-image-position: 50% 90%; --topic-image-position-mobile: 50% 90%; }
:is(.topic-card, .topic-loop-card) img[data-original-src*="b9f62c122a593152a88e4277"] { --topic-image-position: 50% 30%; --topic-image-position-mobile: 50% 25%; }
/* Fear: snake and man's face; sensitivity: face and folded arms. */
:is(.topic-card, .topic-loop-card) img[data-original-src*="b0ea24bac572f0266e550e6a"] { --topic-image-position: 50% 5%; --topic-image-position-mobile: 50% 10%; }
:is(.topic-card, .topic-loop-card) img[data-original-src*="da5cc4e214b652f9a8841e0e"] { --topic-image-position: 50% 16%; --topic-image-position-mobile: 50% 15%; }
/* Relationships: both figures; addictions: distressed child and slumped man. */
:is(.topic-card, .topic-loop-card) img[data-original-src*="088ecd7648fc470b04749ce1"] { --topic-image-position: 50% 30%; --topic-image-position-mobile: 50% 12%; }
:is(.topic-card, .topic-loop-card) img[data-original-src*="9cbbe3486b69acec472d64b7"] { --topic-image-position: 50% 55%; --topic-image-position-mobile: 50% 46%; }
:is(.topic-card, .topic-loop-card) img[hidden] { display: none; }
:is(.topic-card, .topic-loop-card) > .topic-copy { grid-column: 1; grid-row: 1; margin: 0; padding: 0; align-self: start; }
.topic-copy h2, .topic-copy h3 { margin: 0 0 var(--copy-heading-gap); font-size: clamp(26px, 2vw, 30px); line-height: 1.3; text-align: start; }
.topic-copy p, .topic-copy li { font-size: var(--type-body); line-height: var(--leading-body); }
.topic-copy > .wp-block-list { margin: 0 0 22px; padding-left: 1.2em; }
.topic-copy li + li { margin-top: 10px; }
.topic-copy > p:last-child { margin-bottom: 0; }
.topic-navigation { position:relative;max-width:var(--measure-feature);margin:0 auto var(--heading-gap); }
.topic-navigation::before, .topic-navigation::after { content: ''; position: absolute; z-index: 2; top: -6px; bottom: 8px; width: 40px; pointer-events: none; opacity: 0; background: radial-gradient(ellipse, var(--scroll-cue-color), transparent 72%); filter: blur(4px); transition: opacity var(--interaction-duration) var(--interaction-ease); }
.topic-navigation::before { left: -20px; }
.topic-navigation::after { right: -20px; }
.topic-navigation[data-scroll-left=true]::before, .topic-navigation[data-scroll-right=true]::after { opacity: 1; }
.topic-tabs { position: relative; display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 8px; padding: 3px 3px 12px; margin: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; border-bottom: 1px solid var(--color-sand); }
.topic-tabs .topic-choice { position: relative; flex: none; white-space: nowrap; min-width: 0; min-height: var(--control-height); border: 0; border-radius: var(--radius-control); padding: 10px 15px; color: var(--color-ink); background: transparent; font: 16px/1.6 var(--font-ui); cursor: pointer; transition: background-color var(--interaction-duration) var(--interaction-ease), color var(--interaction-duration) var(--interaction-ease); }
.topic-tabs .topic-choice:hover { background: var(--surface-support); }
.topic-tabs [aria-selected=true] { background: var(--color-accent); color: var(--color-paper); }
.topic-tabs [aria-selected=true]:hover { background: var(--action-hover); color: var(--color-paper); }
.topic-navigation > .reading-carousel-progress { position: absolute; inset-inline: 0; bottom: -1px; width: auto; border-radius: 0; color: var(--color-accent); }
.topic-tabs [role=tab]:focus-visible { outline-offset: 2px; }
@media (max-width: 920px) {
  :is(.topic-card, .topic-loop-card) { grid-template-columns: minmax(0, 1fr) minmax(180px, .65fr); gap: 32px; }
}
@media (max-width: 640px) {
  .topics--interactive { --topic-art-height: 210px; }
  .topics--interactive .topic-heading { display: block; }
  .topics--interactive .topic-heading > h2 { font-size: 32px; line-height: 1.15; text-wrap: balance; }
  .topics--interactive .topic-navigation { display: none; }
  .topic-story-controls { display: flex; align-items: center; gap: var(--icon-gap); margin: 0 0 var(--heading-gap); }
  .topic-story-count { margin-right: auto; color: var(--text-muted); font: 15px/1.4 var(--font-ui); font-variant-numeric: tabular-nums; }
  .topic-story-arrow { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; }
  .topic-story-arrow svg { width: 22px; height: 22px; }
  .topic-viewport { display: block; position: relative; margin-inline: calc(-1 * var(--section-gutter)); isolation: isolate; }
  .topics--interactive .topics-grid { display: flex; align-items: stretch; gap: 16px; max-width: none; padding-inline: var(--section-gutter); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--section-gutter); scrollbar-width: none; touch-action: pan-x pan-y pinch-zoom; }
  .topics--interactive .topics-grid::-webkit-scrollbar { display: none; }
  .topics--interactive .topics-grid--sliding { scroll-snap-type: none; }
  .topics--interactive :is(.topic-card, .topic-loop-card), .topics--interactive :is(.topic-card, .topic-loop-card)[hidden] { display: grid; visibility: visible; flex: 0 0 100%; min-width: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--topic-art-height) 1fr; gap: 24px; scroll-snap-align: start; scroll-snap-stop: always; }
  .topics--interactive :is(.topic-card, .topic-loop-card) > figure { grid-area: 1 / 1; height: var(--topic-art-height); }
  .topics--interactive :is(.topic-card, .topic-loop-card) > .topic-copy { grid-area: 2 / 1; }
  .topics--interactive :is(.topic-card, .topic-loop-card) > figure img { object-position: var(--topic-image-position-mobile, center 30%); }
  .topics--interactive .topic-story-progress { display: block; position: absolute; z-index: 3; inset: auto 0 0; width: auto; height: 4px; border-radius: 0 0 var(--radius-control) var(--radius-control); color: var(--color-accent); pointer-events: none; }
  .topic-story-progress::before { background: var(--color-paper); opacity: .75; }
  /* The warm edge shade belongs to the viewport and never blocks swiping. */
  .topic-viewport::before, .topic-viewport::after { content: ""; position: absolute; z-index: 2; inset-block: -10px; width: calc(2 * var(--section-gutter)); pointer-events: none; opacity: 0; background: radial-gradient(ellipse, var(--scroll-cue-color), transparent 72%); filter: blur(5px); transition: opacity var(--interaction-duration) var(--interaction-ease); }
  .topic-viewport::before { left: calc(-1 * var(--section-gutter)); }
  .topic-viewport::after { right: calc(-1 * var(--section-gutter)); }
  .topic-viewport[data-scroll-left=true]::before, .topic-viewport[data-scroll-right=true]::after { opacity: 1; }
}
@media (max-width: 640px) {
  .topic-heading { gap: 16px; }
  :is(.topic-card, .topic-loop-card) { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  :is(.topic-card, .topic-loop-card) > figure { grid-column: 1; grid-row: 2; height: 190px; }
  :is(.topic-card, .topic-loop-card) > figure img { object-position: var(--topic-image-position-mobile, center 30%); }
  .topic-navigation { margin-bottom:30px; }
}
@media (max-width: 360px) {
  .topics--interactive .topic-heading > h2 { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .topic-viewport::before, .topic-viewport::after, .topic-navigation::before, .topic-navigation::after { transition: none; }
}