/* Opt-in estate chapters. Existing winery and brewery layouts retain their styles. */
[data-page-layout="chapters"] {
  .story-navigation { display: flex; flex-wrap: wrap; max-width: 1320px; margin-inline: auto; padding: 18px var(--space, 6%); gap: 16px 22px; font-family: var(--display, var(--sans, sans-serif)); }
  .story-navigation a { white-space: nowrap; }
  .story-navigation-label { display: none; }
  .story-navigation-links { display: contents; }
  main > .wide-photo { max-width: 1320px; margin-inline: auto; padding: 0 var(--space, 6%); }
  main > .wide-photo img { max-height: 340px; width: 100%; object-fit: cover; border-radius: 18px; }
  .producer-chapter.section { max-width: 1320px; margin-inline: auto; padding: 72px var(--space, 6%); border-bottom: 1px solid var(--line, currentColor); scroll-margin-top: 100px; }
  .chapter-part { margin-bottom: 18px; }
  .producer-film.section { max-width: 1320px; margin-inline: auto; padding: 72px var(--space, 6%); border-bottom: 1px solid var(--line, currentColor); }
  .producer-film .estate-film { margin-top: 0; scroll-margin-top: 100px; }
  .producer-chapter h2 { margin-bottom: 24px; }
  .producer-chapter-copy { max-width: 75ch; }
  .producer-chapter-copy p { margin-bottom: 16px; }
  .producer-chapter-links { margin-top: 20px; }
  /* Text and photograph side by side; the photograph alternates sides, fills its column and stays in view beside longer text. */
  .producer-chapter.has-photo:not(.has-items) { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: repeat(3, auto) 1fr; gap: 0 8%; align-items: start; }
  .producer-chapter.has-photo:not(.has-items) > :not(figure) { grid-column: 1; }
  .producer-chapter.has-photo:not(.has-items) > figure { grid-column: 2; grid-row: 1 / span 4; position: sticky; top: var(--story-photo-top, 112px); }
  .producer-chapter.has-photo.is-reversed { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .producer-chapter.has-photo.is-reversed > :not(figure) { grid-column: 2; }
  .producer-chapter.has-photo.is-reversed > figure { grid-column: 1; }
  .producer-chapter > figure { width: 100%; margin: 24px 0 0; padding: 0; }
  .producer-chapter.has-photo:not(.has-items) > figure { margin-top: 0; }
  /* Landscape and square photographs keep their proportions; only very tall portraits are cropped. */
  .producer-chapter figure img { display: block; width: 100%; max-width: none; max-height: 680px; height: auto; margin: 0; aspect-ratio: auto; object-fit: cover; border-radius: 18px; }
  .producer-chapter figcaption { padding-top: 12px; font-size: .8125rem; line-height: 1.5; color: var(--muted, inherit); }
  /* A short chapter without a photograph reads across: heading on the left, copy on the right. */
  .producer-chapter:not(.has-photo, .has-items):has(> h2) { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 0 8%; align-items: center; }
  .producer-chapter:not(.has-photo, .has-items):has(> h2) > :is(.chapter-part, h2) { grid-column: 1; }
  .producer-chapter:not(.has-photo, .has-items):has(> h2) > :not(.chapter-part, h2) { grid-column: 2; }
  .producer-chapter:not(.has-photo, .has-items):has(> h2) > .producer-chapter-copy { grid-row: 2; }
  /* Dated milestones run along a line, one dot per date. */
  .producer-timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin: 40px 0 0; padding: 0; list-style: none; }
  .producer-timeline li { position: relative; padding: 32px 28px 0 0; border-top: 1px solid currentColor; }
  .producer-timeline li::before { content: ''; position: absolute; top: -7px; left: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--wine, currentColor); }
  .producer-timeline h3 { margin: 0 0 12px; font-size: clamp(1.75rem, 2.6vw, 2.25rem); line-height: 1.1; }
  .producer-timeline p { margin-bottom: 10px; }
  @media (max-width: 740px) {
    .producer-chapter.section, .producer-film.section { padding-block: 48px; }
    .producer-chapter.has-photo:not(.has-items), .producer-chapter:not(.has-photo, .has-items):has(> h2) { display: block; }
    .producer-chapter.has-photo:not(.has-items) > figure { position: static; margin-top: 24px; }
    .producer-chapter figure img { max-height: 460px; }
    .producer-timeline { grid-template-columns: 1fr; margin-left: 6px; }
    .producer-timeline li { padding: 0 0 28px 28px; border-top: 0; border-left: 1px solid currentColor; }
    .producer-timeline li:last-child { padding-bottom: 0; border-left-color: transparent; }
    .producer-timeline li::before { top: 4px; left: -7px; }
    main > .wide-photo img { max-height: 220px; }
  }
}

/* Vivant's chapter pages use a compact introduction and a reading index beneath the header. */
[data-theme="vivant"][data-page-layout="chapters"] {
  &:has(.story-navigation) { --story-photo-top: 172px; scroll-padding-top: 172px; }
  .page-intro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: end; gap: 28px 8%; padding-top: 36px; padding-bottom: 40px; }
  .page-intro .breadcrumbs { grid-column: 1 / -1; margin: 0; }
  .page-intro > .section-label { display: none; }
  .page-intro h1 { margin: 0; font-size: clamp(3rem, 4.8vw, 4.5rem); line-height: 1.25; }
  .page-intro .page-lead { max-width: 44ch; margin: 0 0 8px; font-size: 1.125rem; line-height: 1.6; }
  .story-navigation { position: sticky; top: 84px; z-index: 20; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: 0 8%; padding-block: 0; border-block: 1px solid var(--line); background: var(--paper); }
  .story-navigation-label { display: block; margin: 0; font: 600 .8125rem/1.4 var(--display); color: var(--muted); }
  .story-navigation-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .story-navigation-links:has(> a:nth-child(4)) { display: flex; overflow-x: auto; }
  .story-navigation-links:has(> a:nth-child(4)) a { flex: 1 0 auto; white-space: nowrap; }
  .story-navigation a { display: flex; align-items: center; justify-content: center; min-height: 64px; padding: 14px 12px; white-space: normal; text-align: center; font: 600 .9375rem/1.4 var(--display); text-decoration: none; border-inline-start: 1px solid var(--line); }
  .story-navigation a:hover { color: var(--tomato); background: var(--band); }
  .story-navigation a:focus-visible { outline: 2px solid var(--ink); outline-offset: -5px; }
  .producer-chapter.section, .producer-film.section { padding-block: 64px; scroll-margin-top: 16px; }
  .story-navigation + .producer-chapter.section { padding-top: 40px; }
  .producer-chapter h2 { font-size: clamp(2.125rem, 3.3vw, 3.25rem); line-height: 1.3; }
  .chapter-part { display: block; width: fit-content; margin: 0 0 16px; padding: 0; border: 0; border-radius: 0; background: none; font: 600 .8125rem/1.4 var(--display); color: var(--muted); }
  .producer-film .estate-film { scroll-margin-top: 16px; }
  @media (max-width: 740px) {
    &:has(.story-navigation) { scroll-padding-top: 148px; }
    .page-intro { display: block; padding-top: 28px; padding-bottom: 28px; }
    .page-intro .breadcrumbs { margin-bottom: 20px; }
    .page-intro h1 { margin-bottom: 16px; font-size: 3rem; }
    .page-intro .page-lead { margin: 0; font-size: 1rem; }
    .story-navigation { top: 76px; display: block; }
    .story-navigation-label { display: none; }
    .story-navigation a { min-height: 56px; padding: 12px 8px; font-size: .875rem; }
    .story-navigation a:first-child { border-inline-start: 0; }
    .producer-chapter.section, .producer-film.section { padding-block: 40px; }
    .producer-chapter h2 { font-size: 2.125rem; }
  }
}