/* A warm editorial chapter: one lived-in image and four open moments. */
.day-section {
  --day-ink: #302a2b;
  --day-muted: #786b66;
  --day-rule: #d9c9bb;
  --day-cream: #fbf4ea;
  position: relative;
  display: block;
  padding-block: clamp(94px, 10vw, 142px) clamp(88px, 9vw, 126px);
  overflow: clip;
  border-block: 1px solid #eadfd3;
  background:
    radial-gradient(circle at 82% 14%, #fffdf7 0 8%, transparent 31%),
    linear-gradient(118deg, #f6ede1 0%, var(--day-cream) 47%, #f9f1e8 100%);
  color: var(--day-ink);
}

.day-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent calc(50% - .5px), #8c6e5510 50%, transparent calc(50% + .5px)),
    repeating-linear-gradient(0deg, transparent 0 118px, #8c6e5508 119px, transparent 120px);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.day-editorial { position: relative; z-index: 1; }

.day-opening {
  display: grid;
  grid-template-columns: minmax(330px, .85fr) minmax(500px, 1.25fr);
  align-items: center;
  gap: clamp(58px, 7vw, 110px);
}

.day-intro { max-width: 440px; }
.day-intro .eyebrow { margin-bottom: 23px; color: #9a624f; }
.day-intro h2 {
  font-size: clamp(3.45rem, 4.2vw, 4.45rem);
  line-height: .91;
  letter-spacing: -.068em;
}
.day-heading-line { display: block; white-space: nowrap; }
.day-heading-accent { color: #9a624f; }
.day-purpose {
  max-width: 39ch;
  margin-top: 32px;
  color: var(--day-muted);
  font-size: 1.05rem;
  line-height: 1.72;
}
.day-intro-note {
  display: flex;
  align-items: baseline;
  gap: 13px;
  max-width: 330px;
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px solid var(--day-rule);
  color: #665650;
  font-size: .78rem;
  line-height: 1.5;
}
.day-intro-note span {
  flex: 0 0 auto;
  color: #9a624f;
  font: 700 .65rem/1 var(--font-display);
  letter-spacing: .12em;
}

.day-still-life { min-width: 0; }
.day-photo {
  position: relative;
  isolation: isolate;
  padding: 11px 11px 0 0;
}
.day-photo::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 28px -14px -14px 34px;
  border: 1px solid #cbb39f;
  border-radius: 46% 8px 44% 8px;
}
.day-photo img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 50% 52%;
  border-radius: 46% 8px 44% 8px;
  box-shadow: 0 30px 75px #7257401c;
}
.day-photo-index {
  position: absolute;
  top: 30px;
  left: -22px;
  padding: 8px 11px;
  background: #fbf4eae8;
  color: #72594c;
  font-size: .57rem;
  font-weight: 700;
  letter-spacing: .14em;
  writing-mode: vertical-rl;
}
.day-photo-note {
  position: absolute;
  right: 34px;
  bottom: 24px;
  padding: 8px 12px 6px;
  background: #fffaf0f2;
  color: #815a55;
  font-size: clamp(.82rem, 1.15vw, 1.08rem);
  transform: rotate(-4deg);
}
.day-still-life figcaption {
  display: grid;
  grid-template-columns: auto minmax(190px, 1fr) auto;
  align-items: baseline;
  gap: 18px;
  padding: 20px 18px 0 31px;
  color: var(--day-muted);
  font-size: .74rem;
  line-height: 1.5;
}
.day-still-life figcaption > span {
  color: #9a624f;
  font-size: .61rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.day-still-life figcaption p { max-width: 42ch; }
.day-still-life figcaption small { color: #75665f; font-size: .61rem; white-space: nowrap; }

.day-timeline { margin-top: clamp(76px, 8vw, 112px); }
.day-timeline-heading {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 440px);
  align-items: end;
  gap: 50px;
  margin-bottom: 38px;
}
.day-timeline-heading .eyebrow { margin-bottom: 13px; color: #9a624f; }
.day-timeline-heading h3 {
  font-size: clamp(2rem, 2.8vw, 2.5rem);
  line-height: 1;
}
.day-timeline-heading > p {
  color: var(--day-muted);
  font-size: .94rem;
  line-height: 1.65;
}
.day-moments {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.day-moment-item {
  --moment: #9a624f;
  position: relative;
  min-width: 0;
  border-top: 1px solid var(--day-rule);
}
.day-moment-item::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: -5px;
  left: 0;
  width: 9px;
  height: 9px;
  border: 2px solid var(--day-cream);
  border-radius: 50%;
  background: var(--moment);
  box-shadow: 0 0 0 1px var(--moment);
}
.day-moment-item + .day-moment-item { padding-left: clamp(20px, 2.4vw, 38px); }
.day-moment-item--food { --moment: #5a735f; }
.day-moment-item--movement { --moment: #616ba6; }
.day-moment-item--goals { --moment: #8b566e; }
.day-moment {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 288px;
  padding: 24px clamp(18px, 2.2vw, 34px) 4px 0;
  color: inherit;
}
.day-moment time {
  color: #75665f;
  font: 700 .74rem/1 var(--font-display);
  letter-spacing: .11em;
}
.day-moment-label {
  margin-top: 28px;
  color: var(--moment);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.day-moment h4 {
  max-width: 11ch;
  margin-top: 11px;
  font-size: clamp(1.35rem, 1.85vw, 1.78rem);
  line-height: 1.06;
  letter-spacing: -.045em;
}
.day-moment-copy > p:last-child {
  max-width: 25ch;
  margin-top: 13px;
  color: var(--day-muted);
  font-size: .82rem;
  line-height: 1.58;
}
.day-moment-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  align-self: end;
  margin-top: 26px;
  padding-top: 13px;
  border-top: 1px solid #ddcfc3;
  color: var(--moment);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: color .2s ease, padding-left .2s ease;
}
.day-moment-action::after { content: "↗"; font-size: 1rem; line-height: 1; }
.day-moment:hover .day-moment-action { padding-left: 6px; color: #3f3938; }
.day-moment:focus-visible { outline-offset: 7px; }

@media (max-width: 980px) {
  .day-still-life figcaption { grid-template-columns: auto 1fr; }
  .day-still-life figcaption small { grid-column: 2; }
  .day-moment-item + .day-moment-item { padding-left: 20px; }
  .day-moment { min-height: 304px; padding-right: 18px; }
}

@media (max-width: 940px) {
  .day-section { padding-block: 88px 96px; }
  .day-opening { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 34px; }
  .day-intro { max-width: 610px; }
  .day-intro h2 { font-size: clamp(2.7rem, 5.7vw, 3.5rem); }
  .day-purpose { max-width: 53ch; font-size: .92rem; }
  .day-intro-note { max-width: 430px; }
  .day-photo { width: 96%; margin-left: auto; }
  .day-photo img { aspect-ratio: 1.05; }
  .day-still-life figcaption { display: block; padding-left: 12px; }
  .day-still-life figcaption p { margin-block: 6px; }
  .day-timeline-heading { grid-template-columns: 1fr; gap: 18px; }
  .day-timeline-heading > p { max-width: 560px; }
  .day-moments { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 0; }
  .day-moment-item:nth-child(3) { padding-left: 0; }
  .day-moment { min-height: 268px; }
}

@media (max-width: 700px) {
  .day-opening { grid-template-columns: 1fr; gap: 33px; }
  .day-intro h2 { font-size: clamp(3rem, 8vw, 3.65rem); }
  .day-photo img { aspect-ratio: 3 / 2; }
}

@media (max-width: 560px) {
  .day-section { padding-block: 72px 78px; }
  .day-section::before { opacity: .55; }
  .day-opening { grid-template-columns: 1fr; gap: 33px; }
  .day-intro .eyebrow { margin-bottom: 16px; }
  .day-intro h2 { font-size: clamp(2.75rem, 13.3vw, 3.65rem); }
  .day-purpose { margin-top: 23px; font-size: .94rem; line-height: 1.66; }
  .day-intro-note { margin-top: 23px; padding-top: 14px; font-size: .71rem; }
  .day-photo { width: calc(100% - 8px); padding: 7px 7px 0 0; }
  .day-photo::before { inset: 15px -8px -8px 19px; border-radius: 38% 6px 36% 6px; }
  .day-photo img { aspect-ratio: 4 / 3; object-position: 50% 51%; border-radius: 38% 6px 36% 6px; }
  .day-photo-index { top: 20px; left: -13px; padding: 7px 8px; font-size: .5rem; }
  .day-photo-note { right: 15px; bottom: 13px; padding: 6px 8px 4px; font-size: .75rem; }
  .day-still-life figcaption { display: flex; flex-wrap: wrap; gap: 5px 12px; padding: 16px 8px 0 18px; font-size: .68rem; }
  .day-still-life figcaption > span { width: 100%; font-size: .54rem; }
  .day-still-life figcaption p { flex: 1 1 210px; }
  .day-still-life figcaption small { font-size: .55rem; white-space: normal; }
  .day-timeline { margin-top: 64px; }
  .day-timeline-heading { margin-bottom: 27px; }
  .day-timeline-heading h3 { font-size: 2.25rem; }
  .day-timeline-heading > p { font-size: .84rem; }
  .day-moments { display: block; }
  .day-moment-item,
  .day-moment-item + .day-moment-item,
  .day-moment-item:nth-child(3) { padding-left: 0; }
  .day-moment {
    grid-template-columns: 59px minmax(0, 1fr) 22px;
    grid-template-rows: auto;
    gap: 0 14px;
    min-height: 0;
    padding: 25px 0 27px;
  }
  .day-moment time { padding-top: 4px; font-size: .66rem; }
  .day-moment-copy { grid-column: 2; }
  .day-moment-label { margin-top: 0; font-size: .58rem; }
  .day-moment h4 { max-width: 15ch; margin-top: 7px; font-size: 1.34rem; }
  .day-moment-copy > p:last-child { max-width: 33ch; margin-top: 9px; font-size: .76rem; line-height: 1.52; }
  .day-moment-action {
    grid-column: 3;
    grid-row: 1;
    align-self: start;
    justify-content: flex-end;
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--moment);
    font-size: 0;
  }
  .day-moment-action::after { font-size: 1.05rem; }
  .day-moment:hover .day-moment-action { padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .day-moment-action { transition: none; }
}