/* «С чем я помогаю» — a table-of-contents spread. The left page lists five doors like the
   contents of a book (an arch, the title, an arrow); the right page is the
   chapter that door opens, held in view while you browse the list. */
.dveri__head { display: grid; gap: 20px; margin-bottom: clamp(26px, 3vw, 40px); }

.doors__row { display: grid; border-top: 1px solid var(--tone-rule); }
.door {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px;
  width: 100%; padding: 14px 6px 14px 2px; text-align: left; color: var(--ink);
  border-bottom: 1px solid var(--tone-rule);
  transition: background-color var(--t-mid) var(--ease-out), padding-left var(--t-mid) var(--ease-settle);
}
.door__frame {
  position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; width: 46px; height: 58px;
  border: 1px solid var(--line-strong); border-radius: 999px 999px 5px 5px; background: var(--surface);
  transition: background-color var(--t-mid) var(--ease-out), border-color var(--t-fast), transform var(--t-mid) var(--ease-settle);
}
.door__frame::after { /* light leaking from a door that is ajar */
  content: ''; position: absolute; inset: 5px; border-radius: 999px 999px 3px 3px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tone-light) 90%, transparent), transparent);
  opacity: 0; transition: opacity var(--t-mid) var(--ease-out);
}
.door__frame .icon { position: relative; z-index: 1; width: 22px; height: 22px; color: var(--sage-500); transition: transform .6s var(--ease-settle), color .3s var(--ease-out); }
.door__text { display: grid; gap: 2px; min-width: 0; }
.door__label { font-family: var(--serif); font-size: clamp(23px, .9vw + 16px, 30px); line-height: 1.1; transition: color .3s var(--ease-out); }
.door__sub { font-size: var(--text-micro); color: var(--muted); }
.door__arrow { width: 22px; height: 22px; color: var(--faint); transition: transform .5s var(--ease-settle), color .3s var(--ease-out), opacity .3s; opacity: .5; }
.door:hover { padding-left: 10px; }
.door:hover .door__frame { border-color: var(--sage-500); transform: translateY(calc(var(--lift) * 1)); }
.door:hover .door__frame::after { opacity: .3; }
.door:hover .door__frame .icon { transform: translateY(-2px) scale(1.08); }
.door:hover .door__arrow { opacity: 1; transform: translateX(4px); color: var(--terracotta-ink); }
.door:active .door__frame { transform: scale(var(--press)); transition-duration: .1s; }
.door[aria-selected='true'] { background: color-mix(in srgb, var(--surface) 55%, transparent); padding-left: 14px; }
.door[aria-selected='true']::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: var(--terracotta); }
.door[aria-selected='true'] .door__frame { background: var(--green); border-color: var(--green); }
.door[aria-selected='true'] .door__frame::after { opacity: .3; }
.door[aria-selected='true'] .door__frame .icon { color: var(--on-green); }
.door[aria-selected='true'] .door__label { color: var(--green-deep); }
.door[aria-selected='true'] .door__arrow { opacity: 1; color: var(--terracotta-ink); transform: translateX(4px); }
html[data-theme='night'] .door[aria-selected='true'] .door__frame::after { opacity: .12; }
html[data-theme='night'] .door[aria-selected='true'] .door__label { color: var(--ink); }

/* The open chapter on the right page */
.door-panels { display: grid; }
.door-panel { display: grid; gap: 26px; align-content: start; }
.door-panel + .door-panel { margin-top: 48px; }
html.js .door-panel + .door-panel { margin-top: 0; }
.door-panel h3 { font-size: clamp(32px, 1.8vw + 18px, 50px); line-height: 1.04; letter-spacing: -.02em; max-width: 14em; }
.door-panel ul { display: grid; gap: 10px; }
.door-panel li { position: relative; padding-left: 26px; line-height: 1.55; }
.door-panel__work li::before { content: ''; position: absolute; left: 2px; top: .78em; width: 12px; height: 1px; background: var(--sage-500); }
.door-panel .btn { justify-self: start; }
.door-panel__named { max-width: 40em; padding: 4px 0 4px 18px; border-left: 2px solid var(--terracotta-soft); font-family: var(--serif); font-style: italic; font-size: clamp(19px, .4vw + 16px, 22px); line-height: 1.4; color: var(--ink-soft); }
.door-panel.appear > .door-panel__named { animation: rise-in .7s var(--ease-settle) .3s backwards; }
/* Opening a door: the room fills in — heading, then the list line by line, then the button. */
.door-panel.appear { animation: fade-in .35s var(--ease-out) both; }
.door-panel.appear > h3, .door-panel.appear li, .door-panel.appear > .btn { animation: rise-in .7s var(--ease-settle) backwards; }
.door-panel.appear li:nth-child(1) { animation-delay: .1s; }
.door-panel.appear li:nth-child(2) { animation-delay: .16s; }
.door-panel.appear li:nth-child(3) { animation-delay: .22s; }
.door-panel.appear li:nth-child(4) { animation-delay: .28s; }
.door-panel.appear > .btn { animation-delay: .34s; }
html.is-quiet .door-panel.appear * { animation-name: fade-in; }

@media (max-width: 860px) {
  .door { gap: 14px; }
  .door__frame { width: 40px; height: 50px; }
}

/* Each chapter brings its own light to the spread: sage for waiting, rose-apricot for pregnancy, honey
   for the first months, a quiet mist for loss, milk for partners and family. None of them repeats
   the spread above (#uznaesh, peach) or below (#irina, linen). The light colour fades (@property). */
html[data-theme='day'] .dveri.spread[data-chapter='pregnancy'] { --tone-bg: #f6e3dc; --tone-light: #ffd6c2; --tone-shade: rgba(122, 66, 50, .07); --tone-rule: #e8d0c6; }
html[data-theme='day'] .dveri.spread[data-chapter='postpartum'] { --tone-bg: #f5e8cc; --tone-light: #ffe6a8; --tone-shade: rgba(110, 86, 40, .07); --tone-rule: #e6d6b0; }
html[data-theme='day'] .dveri.spread[data-chapter='loss'] { --tone-bg: #e1e5e0; --tone-light: #f7f4ec; --tone-shade: rgba(50, 60, 55, .07); --tone-rule: #d4d7cd; --tone-light-strength: .55; }
html[data-theme='day'] .dveri.spread[data-chapter='close'] { --tone-bg: #f8f7f2; --tone-light: #fff5dc; --tone-shade: rgba(47, 59, 49, .05); --tone-rule: var(--line); }
html[data-theme='night'] .dveri.spread[data-chapter='pregnancy'] { --tone-bg: #2c1f20; --tone-light: #e7a77f; --tone-rule: #3d3030; }
html[data-theme='night'] .dveri.spread[data-chapter='postpartum'] { --tone-bg: #2a2416; --tone-light: #e7c39f; --tone-rule: #3c3628; }
html[data-theme='night'] .dveri.spread[data-chapter='loss'] { --tone-bg: #1a1c1a; --tone-light: #c9c9bf; --tone-rule: #303330; --tone-light-strength: .18; }
html[data-theme='night'] .dveri.spread[data-chapter='close'] { --tone-bg: #151a17; --tone-light: #e7a77f; --tone-rule: var(--line); }
/* Before doors.js settles, only the first chapter is shown (the others would fold away under the visitor). */
html.js .dveri:not([data-doors-ready]) .door-panel:not(#door-self) { display: none; }
/* Short laptop screens: the chapter is taller than the window, so it scrolls with the page instead of sticking. */

/* Mother and baby, under «Не уверена, что это ко мне?»: only beside the chapters about a baby —
   «Жду малыша» and «Малыш родился». Never beside IVF, loss or partners, never without a chosen stage
   (layout.css, [data-child-photo]). doors.js always sets data-chapter; without JS there is none,
   so the photo stays hidden. Phones skip it: the chapter opens below and the photo would sit between. */
.dveri__arch { margin-top: clamp(22px, 2.4vw, 32px); }
.dveri__arch img { object-position: 50% 20%; }
.dveri:not([data-chapter='pregnancy']):not([data-chapter='postpartum']) .dveri__arch { display: none !important; }
@media (max-width: 860px) { .dveri__arch { display: none !important; } }