/* Section 02 — supplied reference, 16 September 2026. */
.home-page .stories-section {
  position: relative;
  padding: 0 7.6% 90px;
  max-width: none;
  isolation: isolate;
}
.home-page .stories-section .section-topline {
  border-top: 1px solid #9d896c99;
  padding: 21px 0 28px;
  margin: 0;
  gap: 20px;
  color: #6e6051;
}
.home-page .stories-section .section-topline::after { display: none; }
.home-page .stories-section .eyebrow,
.home-page .stories-section .small-note {
  font-size: 10px;
  letter-spacing: .24em;
}
.home-page .stories-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.23fr) minmax(0, 1fr);
  gap: 10.5%;
  align-items: start;
  margin-left: 26px;
}
.home-page .story-feature {
  margin: 0;
  padding: 14px 14px 0;
  border: 1px solid #b29766;
  outline: 1px solid #b2976699;
  outline-offset: -5px;
  background: transparent;
  box-shadow: -5px 8px 20px #6d543007;
}
.home-page .story-feature > img {
  display: block;
  width: 100%; height: auto; max-height: none;
  aspect-ratio: 581 / 618;
  object-fit: cover; object-position: center;
  filter: none;
}
.home-page .story-caption {
  border: 0;
  padding: 19px 12px 22px;
  gap: 16px;
}
.home-page .story-caption > span:first-child { font-size: 28px; line-height: 1.2; }
.home-page .story-caption > span:last-child { font-size: 8px; letter-spacing: .23em; color: #776957; }
.home-page .story-right { position: relative; padding-top: 9px; min-width: 0; }
.home-page .story-right h2 {
  font-size: clamp(45px, 4.6vw, 128px);
  line-height: .97;
  letter-spacing: -.045em;
  font-weight: 400;
  margin: 0;
  color: #302b25;
}
.home-page .story-right h2 > * { display: block; white-space: nowrap; }
.home-page .story-right h2 em { color: #692e34; font-weight: 400; padding-bottom: .08em; }
.home-page .story-right > p {
  font: 16px/1.5 Georgia, serif;
  margin: 24px 0 30px;
  color: #544d43;
}
.home-page .story-small {
  width: 68%; max-width: none;
  margin: 0;
  padding: 0;
  border: 1px solid #b2976666;
  outline: 1px solid #b2976655;
  outline-offset: 4px;
  background: transparent;
}
.home-page .story-small > img {
  display: block;
  width: 100%; height: auto; max-height: none;
  aspect-ratio: 331 / 449;
  filter: none; object-fit: cover;
}
.home-page .story-small figcaption {
  font-size: 7px; letter-spacing: .16em; line-height: 1.7;
  padding: 13px 9px; color: #75634e;
}
.story-chapter {
  position: absolute; top: 3px; left: -15%;
  display: flex; align-items: center; flex-direction: column; gap: 14px;
  font: 16px/1 var(--serif); color: #88775f;
}
.story-chapter::before, .story-chapter::after { content: ''; width: 1px; background: #b09a76; }
.story-chapter::before { height: 32px; }
.story-chapter::after { height: 156px; }
.stories-edge { position: absolute; pointer-events: none; color: #8b7a60; font: 9px/2.35 var(--sans); letter-spacing: .23em; }
.stories-edge span, .stories-edge small { display: block; }
.stories-edge small { font-size: 8px; }
.stories-edge-left { top: 265px; left: 22px; width: 60px; }
.stories-edge-left i { display: block; width: 1px; height: 100px; background: #b09a76; margin: 24px 0 145px 13px; }
.stories-edge-right { top: 166px; right: 17px; width: 67px; }
.stories-edge-right > span::before, .stories-edge small::before { content: ''; display: block; height: 1px; width: 23px; background: #b09a76; margin-bottom: 16px; }
.stories-edge-right small { margin-top: 355px; }
.home-page .stories-shadow { position: absolute; pointer-events: none; z-index: -1; width: 310px; height: 465px; object-fit: contain; right: -138px; top: 130px; opacity: .48; }
/* A quiet print reveal: frame first, then ink, then the smaller photograph. */
.reveal-enabled .stories-section .story-feature { --reveal-delay: 0ms; }
.reveal-enabled .stories-section h2 { --reveal-delay: 140ms; }
.reveal-enabled .stories-section .story-right > p { --reveal-delay: 260ms; }
.reveal-enabled .stories-section .story-small { --reveal-delay: 340ms; }
.reveal-enabled .stories-section h2 { mask-image: none; }
.reveal-enabled .stories-section h2 > * {
  opacity: 0; transform: translateY(12px);
  transition: opacity 1000ms ease, transform 1200ms cubic-bezier(.22, 1, .36, 1);
  transition-delay: 140ms;
}
.reveal-enabled .stories-section h2 > :nth-child(2) { transition-delay: 260ms; }
.reveal-enabled .stories-section h2 > :nth-child(3) { transition-delay: 380ms; }
.reveal-enabled .stories-section h2.is-revealed > * { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce), print {
  .reveal-enabled .stories-section h2 > * { opacity: 1; transform: none; transition: none; }
}
/* Keep the editorial proportions at wide desktop sizes, too. */
@media (min-width: 1101px) {
  .home-page { --letter-offset: 40px; }
  .home-page .letter-content.is-settled,
  .paper-navigation-ready:not(.motion-ready) .home-page .letter-content {
    margin-left: calc(var(--letter-gutter) + var(--letter-offset));
    margin-right: calc(var(--letter-gutter) - var(--letter-offset));
  }
  .home-page .stories-section { padding-left: calc(7.6% - 40px); padding-right: calc(7.6% + 40px); }
  .home-page .site-footer { margin-left: calc(var(--letter-gutter) + 40px); margin-right: calc(var(--letter-gutter) - 40px); }
  /* Margin annotations belong on the tabletop, outside the invitation sheet. */
  .home-page .letter-slot { overflow-x: clip; overflow-y: visible; }
  .home-page .letter-content.is-settled,
  .paper-navigation-ready:not(.motion-ready) .home-page .letter-content { overflow: visible; }
  .home-page .stories-edge-left { left: calc(38px - var(--letter-gutter) - var(--letter-offset)); }
  .home-page .story-right > p { font-size: clamp(16px, .99vw, 26px); }
  .home-page .story-feature { padding: .84vw .84vw 0; }
  .home-page .story-caption { padding: 1.14vw .72vw 1.32vw; }
  .home-page .story-caption > span:first-child { font-size: 1.67vw; }
  .home-page .story-small figcaption { display: none; }
  .home-page .story-right > p { margin: 1.44vw 0 1.8vw; }
  .home-page .stories-grid { gap: 10.5%; }
  .home-page .stories-shadow { width: 20vw; height: 30vw; right: -9vw; top: 14vw; opacity: .55; }
  .home-page .letter-navigation-slot,
  .home-page .letter-navigation-slot .site-header,
  .home-page .letter-navigation-slot .site-header.is-scrolled { height: 88px; }
  .home-page .letter-navigation-slot .site-header,
  .home-page .letter-navigation-slot .site-header.is-scrolled { padding: 0 90px 0 58px; }
  .home-page .letter-navigation-slot .wordmark { font-size: 32px; }
  .home-page .letter-navigation-slot .desktop-nav { font-size: 16px; gap: 35px; }
  .home-page .letter-navigation-slot .site-header::after {
    content: ''; position: absolute; left: 58px; right: 90px; bottom: 0;
    height: 1px; background: #9d896c99; pointer-events: none;
  }
  .home-page .stories-section .section-topline { border-top-color: transparent; }
  .home-page .stories-edge-right { right: 33px; }
}
@media (min-width: 768px) and (max-width: 1100px) {
  .home-page .stories-section { padding-inline: 6%; }
  .home-page .stories-grid { margin-left: 0; gap: 9%; }
  .home-page .story-right h2 { font-size: clamp(35px, 4.5vw, 49px); }
  .home-page .story-right > p { font-size: 14px; }
  .home-page .story-caption { padding: 15px 2px; gap: 8px; }
  .home-page .story-caption > span:first-child { font-size: 22px; }
  .home-page .story-caption > span:last-child { font-size: 6px; }
  .home-page .story-small { width: 77%; }
  .stories-edge { display: none; }
}
@media (max-width: 767px) {
  .home-page .stories-section { padding: 0 28px 65px; }
  .home-page .stories-section .section-topline { padding-block: 20px 26px; flex-wrap: wrap; gap: 8px; }
  .home-page .stories-section .eyebrow { font-size: 8px; letter-spacing: .17em; }
  .home-page .stories-section .small-note { display: block; font-size: 7px; letter-spacing: .12em; }
  .home-page .stories-grid { grid-template-columns: minmax(0, 1fr); gap: 38px; margin: 0; }
  .home-page .story-feature { padding: 9px 9px 0; }
  .home-page .story-caption { padding: 15px 3px 18px; gap: 6px; }
  .home-page .story-caption > span:first-child { font-size: 24px; }
  .home-page .story-caption > span:last-child { font-size: 6px; letter-spacing: .14em; }
  .home-page .story-right { padding-top: 0; }
  .home-page .story-right h2 { font-size: clamp(35px, 9.8vw, 61px); line-height: 1.02; }
  .home-page .story-right > p { font-size: 15px; margin: 21px 0 27px; }
  .home-page .story-small { width: 74%; max-width: 300px; margin-left: auto; }
  .story-chapter, .stories-edge { display: none; }
  .home-page .stories-shadow { width: 210px; height: 315px; top: auto; bottom: 12px; right: auto; left: -155px; transform: rotate(180deg); opacity: .3; }
}