/* Third chapter: the leaf's transmitted light opens into a quiet domestic scene. */
@font-face { font-family: "Moments Serif"; src: url("assets/fonts/noto-serif-sc-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Moments Sans"; src: url("assets/fonts/noto-sans-sc-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
.site-header { font-family: "Moments Sans", var(--sans); transition: color 400ms; }
.chapter-foot { font-family: "Moments Sans", var(--sans); }
.moments-chapter { background: #eeeee4; color: #20372b; font-family: "Moments Sans", var(--sans); }
.moments-content { position: absolute; left: 5.3vw; right: 5.3vw; top: 17vh; }
.moments-intro { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 4.5vh; }
.moments-eyebrow { margin: 0 0 1.6vh; font-size: 12px; letter-spacing: .17em; color: #5f7163; }
.moments-intro h2 { margin: 0; font-family: "Moments Serif", var(--serif); font-weight: 400; font-size: clamp(34px, 3.05vw, 54px); line-height: 1.35; letter-spacing: .035em; }
.moments-lead { margin: 0 0 .35vh 3vw; font-size: clamp(13px, 1vw, 17px); line-height: 1.95; letter-spacing: .04em; color: #58695d; }
.moments-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 2.1vw; }
.life-moment { min-width: 0; --moment-accent: #986347; }
.nursing-moment { --moment-accent: #477977; }
.moment-photo { position: relative; height: 48vh; overflow: hidden; background: #183225; }
.moment-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 56% 50%; transition: transform 1100ms cubic-bezier(.2,.7,.2,1); }
.moment-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, #07190e58, transparent 64%), linear-gradient(0deg, #07190e82, transparent 58%); }
.moment-question { position: absolute; z-index: 1; left: 2.6vw; bottom: 3.5vh; color: #f3f0e6; }
.moment-question p { font-size: clamp(13px, 1vw, 17px); margin: 0 0 1.4vh; letter-spacing: .14em; }
.moment-question h3 { margin: 0; font-family: "Moments Serif", var(--serif); font-weight: 400; font-size: clamp(30px, 2.7vw, 48px); line-height: 1.3; letter-spacing: .04em; }
.moment-caption { display: flex; align-items: center; justify-content: space-between; gap: 1vw; padding: 2.2vh 0 1.8vh; border-bottom: 1px solid #20372b30; transition: border-color 450ms; }
.moment-caption p { margin: 0; font-size: clamp(13px, 1vw, 17px); letter-spacing: .03em; }
.moment-temperature { font-size: 12px; letter-spacing: .14em; padding-left: 1.4vw; border-left: 1px solid #20372b30; color: var(--moment-accent); }
.life-moment:hover .moment-photo img, .life-moment:focus-visible .moment-photo img { transform: scale(1.035); }
.life-moment:hover .moment-caption, .life-moment:focus-visible .moment-caption { border-color: var(--moment-accent); }
.life-moment:focus-visible { outline: 1px solid var(--moment-accent); outline-offset: 7px; }
.moments-foot a:focus-visible { outline-color: #20372b; }
.stage.is-light .site-header { color: #20372b; }
.stage.is-light .site-header .brand img { filter: brightness(0) saturate(100%) invert(17%) sepia(17%) saturate(934%) hue-rotate(95deg); }
.stage.is-light .site-header nav { background: #eeeee4ba; }
.stage.is-light .site-header a:focus-visible { outline-color: #20372b; }
.site-header .brand img { transition: filter 400ms; }
.site-header nav { transition: background 400ms; }
/* 140vh preserves the first transition; 25vh holds the leaf, then 115vh opens the third chapter. */
.motion-enabled .story:has(.moments-chapter) { height: 380vh; }
.motion-enabled .moments-chapter { z-index: 4; background: #eeeee4; opacity: var(--moments-surface-opacity, 0); }
.motion-enabled .moments-content { transform: translateY(var(--moments-copy-y, 24px)); }
.motion-enabled .moment-photo { opacity: var(--moments-photo-opacity, 0); filter: blur(var(--moments-photo-blur, 4px)); }
.motion-enabled .moments-intro, .motion-enabled .moment-question, .motion-enabled .moment-caption, .motion-enabled .moments-foot { opacity: var(--moments-copy-opacity, 0); }
.motion-enabled .herb-copy h2 { opacity: calc(var(--herb-copy-opacity, 0) * var(--herb-exit-opacity, 1)); }
.motion-enabled .herb-copy .description, .motion-enabled .herb-values, .motion-enabled .herb-foot { opacity: calc(var(--herb-detail-opacity, 0) * var(--herb-exit-opacity, 1)); }
.motion-enabled .herb-image { filter: blur(calc(var(--herb-blur, 10px) + var(--herb-exit-blur, 0px))); }
@media (max-height: 760px) {
  .moments-content { top: 17vh; }
  .moments-intro { margin-bottom: 3.5vh; }
  .moment-photo { height: 45vh; }
}