/* Stories are an editorial reading experience within the shared hospitality shell. */
.story-index-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, .85fr);
  align-items: end;
  gap: 64px;
  padding-block: 30px 62px;
}
.story-index-intro h1 { max-width: 760px; margin: 18px 0 0; font-size: clamp(45px, 5.15vw, 68px); line-height: 1.08; }
.story-index-intro h1 br { display: none; }
.story-index-intro .lead { max-width: 460px; margin: 0 0 20px; font-size: 18px; }
.story-index-heading,
.story-index-welcome { min-width: 0; }
.story-index-intro em,
.story-hero h1 em { color: var(--clay); font-weight: 500; }

.story-index { padding-bottom: 80px; }
.story-index-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(40px, 6vw, 80px);
  padding-block: 58px;
  border-top: 1px solid var(--line);
}
.story-index-scene {
  display: block;
  width: 100%;
  padding: 10px;
  border: 1px solid var(--line);
  background: var(--paper);
  box-shadow: 0 14px 30px #0b1d3a08;
}
.story-index-scene img { display: block; width: 100%; height: auto; }
.story-index-copy { min-width: 0; padding-block: 12px; }
.story-index-copy .eyebrow { margin: 0 0 19px; line-height: 1.6; }
.story-index-name { margin: 0 0 9px; color: var(--muted); font-size: 16px; }
.story-index-copy h2 {
  max-width: 620px;
  margin: 0 0 22px;
  font-size: clamp(34px, 3.35vw, 45px);
  line-height: 1.09;
  text-wrap: pretty;
}
.story-index-description { max-width: 550px; margin: 0 0 24px; color: var(--muted); }
.story-index-companions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; padding-top: 58px; border-top: 1px solid var(--line); }
.story-index-companion { display: flex; flex-direction: column; align-items: stretch; gap: 28px; padding: 0; border: 0; }
.story-index-companion .story-index-copy { display: flex; flex-direction: column; align-items: flex-start; flex: 1; padding: 0; }
.story-index-companion h2 { font-size: clamp(32px, 3vw, 40px); }
.story-index-companion .story-read-link { margin-top: auto; }
.story-read-link {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  min-height: 48px;
  font-size: 16px;
}
.story-read-link span { font-size: 20px; }

.story-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding-block: 28px 10px;
  color: var(--muted);
  font-size: 14px;
}
.story-breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 5px; }
.story-breadcrumb > span[aria-hidden] { color: var(--clay); }
.story-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: center;
  gap: clamp(40px, 6vw, 86px);
  padding-block: 34px 80px;
}
.story-hero-copy { min-width: 0; }
.story-hero h1 { margin: 20px 0 26px; font-size: clamp(44px, 5.3vw, 72px); line-height: 1.01; text-wrap: pretty; }
.story-hero .lead { margin-bottom: 22px; max-width: 570px; }
.story-portrait { position: relative; width: 100%; max-width: 470px; margin: 0 0 0 auto; padding: 0 0 0 18px; }
.story-portrait::before { content: ""; position: absolute; z-index: 0; inset: 38px 22px 36px 0; border: 1px solid #d5c9b6; background: #eee8dd; }
.story-portrait > img { position: relative; display: block; width: 100%; height: auto; border: 1px solid #e4dfd6; }
.story-portrait figcaption > span + span { border-left: 1px solid var(--line); padding-left: 20px; }
.story-portrait figcaption {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  position: relative;
  margin: -22px 18px 0 -18px;
  padding: 20px 24px;
  background: var(--paper);
  border: 1px solid #e4dfd6;
  box-shadow: 0 12px 26px #0b1d3a08;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.story-portrait figcaption strong { display: inline-block; margin-bottom: 5px; color: var(--navy); font-weight: 500; font-size: 15px; }
.story-portrait .story-single-caption { grid-template-columns: 1fr; }

.story-journey { padding-block: 66px 82px; border-top: 1px solid var(--line); scroll-margin-top: 110px; }
.story-reading-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 76px; align-items: end; margin: 0 0 36px; padding-bottom: 0; }
.story-reading-intro .eyebrow { margin: 0 0 22px; }
.story-reading-intro h2 { margin: 0; font-size: clamp(36px, 3.8vw, 50px); line-height: 1.08; text-wrap: pretty; }
.story-reading-intro > p:last-child { max-width: 530px; margin: 0; color: var(--muted); font-size: 20px; line-height: 1.65; }
/* The three links preview the actual reading sequence and remain ordinary anchors. */
.story-chapter-guide { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; padding: 0 0 58px; }
.story-chapter-guide a { display: grid; grid-template-columns: 25px minmax(0, 1fr) 14px; align-items: center; gap: 12px; min-height: 62px; padding: 16px 0; border-top: 1px solid var(--line); color: var(--navy); font-size: 13px; line-height: 1.5; text-decoration: none; }
.story-guide-number { color: var(--clay); font-size: 12px; }
.story-guide-arrow { color: var(--clay); }
.story-chapter-guide a:hover > span:nth-child(2),
.story-chapter-guide a:focus-visible > span:nth-child(2) { text-decoration: underline; text-underline-offset: 4px; }
.story-chapter-guide a:focus-visible { outline: 2px solid var(--clay); outline-offset: 5px; }
.story-chapters { max-width: 1120px; margin-inline: auto; }
.story-chapter {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 650px);
  justify-content: space-between;
  column-gap: 80px;
  row-gap: 48px;
  margin: 0;
}
.story-chapter + .story-chapter { margin-top: 74px; padding-top: 58px; border-top: 1px solid var(--line); }
.story-chapter-heading { min-width: 0; border-left: 1px solid #cbb991; padding-left: 24px; align-self: start; }
.story-chapter-number { margin-bottom: 25px; color: var(--clay); font: 400 46px/1 var(--serif); letter-spacing: -.03em; }
.story-chapter-copy { min-width: 0; }
.story-chapter-heading .eyebrow { margin: 0 0 16px; line-height: 1.6; }
.story-chapter-heading h3 { margin: 0; font-size: clamp(29px, 2.8vw, 36px); line-height: 1.15; text-wrap: pretty; }
.story-chapter-copy p:not(.eyebrow) { margin: 0 0 23px; font-size: 18px; line-height: 1.8; }
.story-chapter-copy p:last-child { margin-bottom: 0; }
.story-chapter-art { grid-column: 1 / -1; display: block; width: 100%; height: auto; }
.story-scene { margin: 58px 0 74px; }
.story-scene img { display: block; width: 100%; height: auto; }

.story-next {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  padding: 52px 0;
  border-top: 1px solid #cbb991;
  border-bottom: 1px solid var(--line);
}
.story-next .eyebrow { margin: 0 0 18px; }
.story-next h2 { max-width: 490px; margin: 0; font-size: clamp(34px, 3.4vw, 46px); line-height: 1.1; text-wrap: pretty; }
.story-next-copy { align-self: center; }
.story-next-copy > p:first-child { max-width: 510px; margin: 0 0 25px; color: var(--muted); }
.story-next-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.story-next-copy .button { display: inline-flex; gap: 20px; align-items: center; justify-content: center; }
.story-next-actions > .text-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; }
.story-next .story-next-note { margin: 19px 0 0; font-size: 14px; color: var(--muted); line-height: 1.6; }

.story-related { padding-block: 58px 20px; }
.story-related-heading { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-bottom: 30px; }
.story-related-heading h2 { margin: 0; font-size: 32px; line-height: 1.15; }
.story-related-heading > a { display: inline-flex; align-items: center; gap: 15px; min-height: 44px; font-size: 15px; white-space: nowrap; }
.story-related-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 42px; }
.story-related-item { display: grid; grid-template-columns: 84px minmax(0, 1fr) 20px; gap: 22px; align-items: center; padding-block: 18px; color: var(--navy); text-decoration: none; border-top: 1px solid var(--line); }
.story-related-portrait img { display: block; width: 100%; height: auto; }
.story-related-name { display: block; margin-bottom: 6px; font-size: 14px; color: var(--muted); }
.story-related-question { display: block; font-family: var(--serif); font-size: 25px; line-height: 1.16; }
.story-related-item:hover .story-related-question { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.story-related-item:focus-visible,
.story-breadcrumb a:focus-visible,
.story-read-link:focus-visible { outline: 2px solid var(--clay); outline-offset: 5px; }
.story-disclosure { margin-block: 0; padding-block: 34px 48px; color: var(--muted); font-size: 13px; line-height: 1.6; }

@media (max-width: 1000px) {
  .story-index-intro { gap: 38px; grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); }
  .story-index-row { column-gap: 36px; }
  .story-index-copy h2 { font-size: 37px; }
  .story-index-companions { gap: 40px; }
  .story-index-companion h2 { font-size: 34px; }
  .story-hero { gap: 38px; }
  .story-hero h1 { font-size: 54px; }
  .story-reading-intro { gap: 40px; }
  .story-chapter { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); column-gap: 44px; }
  .story-chapter-heading h3 { font-size: 31px; }
  .story-next { padding-block: 42px; gap: 40px; }
  .story-related-list { gap: 26px; }
  .story-related-item { grid-template-columns: 70px minmax(0, 1fr) 16px; gap: 16px; }
}
@media (max-width: 800px) {
  .story-index-intro { grid-template-columns: 1fr; gap: 26px; padding-block: 22px 38px; }
  .story-index-intro .lead { max-width: 620px; }
  .story-index-intro h1 br { display: none; }
  .story-index-row { grid-template-columns: 1fr; gap: 28px; padding-block: 42px; }
  .story-index-copy { padding: 0; max-width: 650px; }
  .story-index-companions { grid-template-columns: 1fr; gap: 42px; padding-top: 42px; }
  .story-index-companion { padding: 0; }
  .story-index-companion + .story-index-companion { padding-top: 42px; border-top: 1px solid var(--line); }
  .story-index-companion h2 { font-size: 37px; }
  .story-hero { grid-template-columns: 1fr; gap: 42px; padding-block: 20px 64px; }
  .story-hero-copy { max-width: 650px; }
  .story-hero h1 { font-size: clamp(46px, 7.5vw, 64px); }
  .story-portrait { margin-inline: auto; max-width: 430px; }
  .story-journey { padding-block: 56px 64px; }
  .story-reading-intro { grid-template-columns: 1fr; gap: 25px; margin-bottom: 30px; padding-bottom: 0; }
  .story-chapter-guide { gap: 20px; padding-bottom: 42px; }
  .story-chapter-guide a { grid-template-columns: 20px minmax(0, 1fr); gap: 8px; align-items: start; font-size: 12px; }
  .story-guide-arrow { display: none; }
  .story-reading-intro > p:last-child { max-width: 650px; }
  .story-chapter { grid-template-columns: 1fr; gap: 25px; }
  .story-chapter-heading { display: grid; grid-template-columns: 44px 1fr; gap: 4px 20px; border-left: 0; padding-left: 0; }
  .story-chapter-number { grid-row: 1 / 3; font-size: 35px; margin: 0; }
  .story-chapter-heading .eyebrow { margin-bottom: 8px; }
  .story-chapter-heading h3 { grid-column: 2; max-width: 570px; }
  .story-chapter + .story-chapter { margin-top: 48px; padding-top: 38px; }
  .story-scene { margin-block: 38px 48px; }
  .story-next { gap: 30px; padding-block: 35px; }
  .story-related-heading h2 { font-size: 29px; }
  .story-related-list { grid-template-columns: 1fr; gap: 10px; }
  .story-related-item { grid-template-columns: 78px minmax(0, 1fr) 20px; gap: 22px; }
}
@media (max-width: 680px) {
  .story-index-intro h1 { font-size: clamp(43px, 8.5vw, 58px); line-height: 1.06; }
  .story-index-intro .lead { font-size: 18px; }
  .story-index { padding-bottom: 34px; }
  .story-index-row { gap: 25px; padding-block: 36px; }
  .story-index-companion { padding: 0; }
  .story-index-copy { padding: 0; }
  .story-index-copy .eyebrow { margin-bottom: 16px; }
  .story-index-copy h2 { font-size: 35px; margin-bottom: 18px; }
  .story-index-description { margin-bottom: 16px; font-size: 17px; }
  .story-breadcrumb { padding-top: 20px; font-size: 13px; }
  .story-hero h1 br { display: none; }
  .story-hero h1 { font-size: clamp(45px, 9.3vw, 58px); }
  .story-hero .lead { font-size: 19px; }
  .story-portrait figcaption { gap: 16px; padding: 18px; }
  .story-portrait figcaption > span + span { padding-left: 16px; }
  .story-chapter-guide { grid-template-columns: 1fr; gap: 0; padding-bottom: 36px; }
  .story-chapter-guide a { grid-template-columns: 24px minmax(0, 1fr) 14px; align-items: center; padding: 13px 0; min-height: 50px; font-size: 13px; }
  .story-guide-arrow { display: inline; }
  .story-reading-intro h2 br { display: none; }
  .story-reading-intro h2 { font-size: 38px; }
  .story-reading-intro > p:last-child { font-size: 19px; }
  .story-chapter-heading { grid-template-columns: 35px 1fr; gap: 4px 14px; }
  .story-chapter-copy p:not(.eyebrow) { font-size: 17px; line-height: 1.8; }
  .story-chapter-heading h3 { font-size: 30px; }
  .story-chapter-art { margin-top: 8px; }
  .story-next { grid-template-columns: 1fr; gap: 24px; padding-block: 34px; }
  .story-next h2 { font-size: 37px; }
  .story-related { padding-top: 42px; }
  .story-related-heading { align-items: flex-start; flex-direction: column; gap: 10px; margin-bottom: 14px; }
  .story-related-question { font-size: 25px; }
  .story-disclosure { padding-block: 26px 38px; }
}