.story-page {
  background: var(--paper);
  color: var(--ink);
}

.story-site-header {
  position: relative;
  z-index: 5;
  background: #f8f5ef;
  border-bottom: 1px solid rgba(112, 91, 70, .18);
}

.story-site-header__inner {
  min-height: 64px;
  padding: 0 clamp(20px, 5.4vw, 72px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
}

.story-nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 34px);
}

.story-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #332a24;
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 1.15px;
  text-decoration: none;
  white-space: nowrap;
}

.story-nav a:hover,
.story-nav a:focus-visible,
.story-nav a.is-active {
  color: #8c6444;
}

.story-nav a.is-active::after {
  position: absolute;
  right: 0;
  bottom: -8px;
  left: 0;
  height: 1px;
  background: #a9825d;
  content: "";
}

.story-nav--secondary {
  justify-content: flex-end;
}

.story-nav svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.story-nav .story-bag-link { margin-left: 8px; }

.story-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #201914;
  line-height: 1;
  text-decoration: none;
}

.story-brand__name {
  font-family: var(--serif);
  font-size: 31px;
  letter-spacing: 4px;
  padding-left: 4px;
}

.story-brand__caption {
  margin-top: 5px;
  color: #827160;
  font-family: var(--sans);
  font-size: 6px;
  letter-spacing: 2.1px;
}

.story-main { width: 100%; }

.story-eyebrow {
  margin: 0 0 15px;
  color: #9b7956;
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 2.1px;
  line-height: 1.4;
  text-transform: uppercase;
}

.story-hero-screen {
  position: relative;
  height: clamp(390px, 44vw, 520px);
  overflow: hidden;
  isolation: isolate;
  background: #d5c3ad;
}

.story-hero-screen__image,
.story-hero-screen__veil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.story-hero-screen__image {
  z-index: -2;
  display: block;
  object-fit: cover;
  object-position: center 54%;
}

.story-hero-screen__veil {
  z-index: -1;
  background: linear-gradient(90deg, #f6f3ee 0%, rgba(246, 243, 238, .99) 28%, rgba(246, 243, 238, .88) 39%, rgba(246, 243, 238, .34) 50%, rgba(246, 243, 238, 0) 64%);
}

.story-hero-screen__copy {
  width: min(44%, 500px);
  height: 100%;
  padding: 48px 18px 42px max(7.4vw, 52px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.story-hero-screen__copy .story-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
}

.story-hero-screen__copy .story-eyebrow::after {
  width: 50px;
  height: 1px;
  background: #b89a78;
  content: "";
}

.story-hero-screen h1,
.story-mood h2,
.story-values h2,
.story-craft h2,
.story-ending h2 {
  margin: 0;
  color: #241b16;
  font-family: var(--serif);
  font-size: clamp(39px, 5.1vw, 69px);
  font-weight: 400;
  letter-spacing: -.7px;
  line-height: .91;
}

.story-intro {
  max-width: 355px;
  margin: 19px 0 18px;
  color: #675b50;
  font-family: var(--serif);
  font-size: 13px;
  line-height: 1.55;
}

.story-button {
  width: fit-content;
  min-height: 35px;
  padding: 0 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border: 1px solid #b58b63;
  color: #67513c;
  background: rgba(250, 247, 242, .55);
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 1.15px;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}

.story-button:hover,
.story-button:focus-visible {
  color: #fff;
  background: #80674e;
}

.story-hero-screen__aside {
  position: absolute;
  top: 40px;
  right: clamp(24px, 5.5vw, 72px);
  width: 84px;
  margin: 0;
  color: #fffaf3;
  font-family: var(--serif);
  font-size: 10px;
  letter-spacing: 1.25px;
  line-height: 1.55;
  text-shadow: 0 1px 7px rgba(26, 18, 12, .42);
}

.story-hero-screen__aside::after {
  display: block;
  width: 1px;
  height: 36px;
  margin-top: 10px;
  background: rgba(255, 250, 243, .85);
  content: "";
}

.story-hero-screen__pagination {
  position: absolute;
  top: 47%;
  left: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: #987959;
  font-family: var(--sans);
  font-size: 8px;
  letter-spacing: 1px;
}

.story-hero-screen__pagination i {
  width: 1px;
  height: 31px;
  background: #bd9b74;
}

.story-mood {
  display: grid;
  grid-template-columns: 46% 54%;
  min-height: 290px;
  background: #f6f3ee;
}

.story-mood__image,
.story-craft__image {
  min-width: 0;
  margin: 0;
  overflow: hidden;
}

.story-mood__image img,
.story-craft__image img {
  width: 100%;
  height: 100%;
  min-height: 290px;
  display: block;
  object-fit: cover;
}

.story-mood__image img { object-position: center 43%; }

.story-mood__content {
  padding: 30px clamp(22px, 3.6vw, 50px) 28px clamp(26px, 3.8vw, 52px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 105px;
  align-items: center;
  gap: 18px;
}

.story-mood h2,
.story-values h2,
.story-craft h2,
.story-ending h2 {
  font-size: clamp(30px, 4.2vw, 53px);
  line-height: .95;
}

.story-mood__copy > p:not(.story-eyebrow),
.story-values__intro > p:not(.story-eyebrow),
.story-craft__copy > p:not(.story-eyebrow),
.story-ending__copy > p:not(.story-eyebrow) {
  margin: 14px 0 17px;
  color: #6d6258;
  font-family: var(--serif);
  font-size: 12px;
  line-height: 1.62;
}

.story-mood__copy .story-button { margin-top: 0; }

.story-quote {
  align-self: center;
  text-align: center;
  color: #9d7955;
}

.story-quote__seal {
  width: 92px;
  height: 92px;
  margin: 0 auto 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid #c6a37c;
  border-radius: 50%;
  color: #a57d53;
  font-family: var(--sans);
  font-size: 6px;
  letter-spacing: 2px;
  line-height: 1;
}

.story-quote__seal b {
  margin: 1px 0 3px;
  font-family: var(--serif);
  font-size: 40px;
  font-weight: 400;
  line-height: .9;
}

.story-quote > p {
  margin: 0;
  color: #9b7758;
  font-family: var(--serif);
  font-size: 12px;
  font-style: italic;
  line-height: 1.5;
}

.story-values {
  padding: 7px 18px 7px max(4.6vw, 32px);
  display: grid;
  grid-template-columns: 1.05fr repeat(3, .7fr);
  gap: 7px;
  background: #f8f5ef;
}

.story-values__intro {
  padding: 22px 15px 15px 0;
  align-self: center;
}

.story-values h2 { font-size: clamp(29px, 3.8vw, 43px); }

.story-values__intro > p:not(.story-eyebrow) {
  max-width: 340px;
  margin: 13px 0 17px;
  font-size: 11px;
  line-height: 1.62;
}

.story-value-card {
  min-width: 0;
  border: 1px solid #e2d8ce;
  background: rgba(251, 248, 244, .7);
  text-align: center;
}

.story-value-card > img {
  width: 100%;
  aspect-ratio: 1.13 / 1;
  display: block;
  object-fit: cover;
}

.story-value-card__body { padding: 5px 10px 13px; }

.story-value-card__icon {
  display: block;
  height: 25px;
  color: #aa7a47;
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1;
}

.story-value-card h3 {
  margin: 3px 0 6px;
  color: #57463a;
  font-family: var(--serif);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .6px;
  line-height: 1.3;
}

.story-value-card p {
  max-width: 210px;
  margin: 0 auto;
  color: #786b60;
  font-family: var(--serif);
  font-size: 10px;
  line-height: 1.45;
}

.story-craft {
  display: grid;
  grid-template-columns: 46% 54%;
  min-height: 270px;
  background: #f8f5ef;
}

.story-craft__image img {
  min-height: 270px;
  object-position: center 55%;
}

.story-craft__content {
  padding: 24px clamp(20px, 3vw, 40px) 22px clamp(24px, 3vw, 40px);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(170px, .8fr);
  align-items: center;
  gap: 24px;
}

.story-craft h2 { font-size: clamp(28px, 3.6vw, 42px); }

.story-craft__copy > p:not(.story-eyebrow) {
  margin: 13px 0 15px;
  font-size: 11px;
  line-height: 1.58;
}

.story-craft__list {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  list-style: none;
}

.story-craft__list li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.story-craft__list li > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid #c6a37c;
  border-radius: 50%;
  color: #9e764f;
  font-family: var(--serif);
  font-size: 18px;
}

.story-craft__list strong {
  display: block;
  margin-bottom: 3px;
  color: #6b5747;
  font-family: var(--serif);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .7px;
}

.story-craft__list p {
  margin: 0;
  color: #81756b;
  font-family: var(--serif);
  font-size: 10px;
  line-height: 1.4;
}

.story-ending {
  padding: 6px 18px 20px max(4.6vw, 32px);
  display: grid;
  grid-template-columns: 34% 66%;
  gap: 8px;
  background: #f8f5ef;
}

.story-ending__copy {
  padding: 23px 16px 12px 0;
  align-self: center;
}

.story-ending h2 { font-size: clamp(30px, 3.8vw, 44px); }

.story-ending__copy > p:not(.story-eyebrow) {
  max-width: 300px;
  margin: 12px 0 16px;
  font-size: 11px;
  line-height: 1.55;
}

.story-ending__gallery {
  display: grid;
  grid-template-columns: .76fr .76fr 1.12fr;
  gap: 8px;
  align-items: start;
}

.story-ending__gallery figure {
  min-width: 0;
  margin: 0;
  text-align: center;
}

.story-ending__gallery img {
  width: 100%;
  height: clamp(210px, 25vw, 290px);
  display: block;
  object-fit: cover;
}

.story-ending__gallery figure:nth-child(1) img { object-position: 64% center; }
.story-ending__gallery figure:nth-child(2) img { object-position: center; }
.story-ending__gallery figure:nth-child(3) img { object-position: 64% center; }

.story-ending__gallery figcaption {
  padding: 9px 3px 0;
  color: #9b7858;
  font-family: var(--serif);
  font-size: 9px;
  letter-spacing: 1px;
  line-height: 1.45;
}

@media (max-width: 900px) {
  .story-nav { gap: 15px; }
  .story-nav a { font-size: 8px; letter-spacing: .85px; }
  .story-site-header__inner { padding-right: 22px; padding-left: 22px; gap: 12px; }
  .story-mood__content { grid-template-columns: minmax(0, 1fr) 82px; gap: 12px; }
  .story-quote__seal { width: 76px; height: 76px; }
  .story-craft__content { grid-template-columns: minmax(0, 1.05fr) minmax(155px, .95fr); gap: 16px; }
  .story-craft__list li { grid-template-columns: 34px minmax(0, 1fr); gap: 9px; }
  .story-craft__list li > span { width: 33px; height: 33px; }
}

@media (max-width: 760px) {
  .story-site-header__inner {
    min-height: 88px;
    padding: 10px 20px 8px;
    grid-template-columns: 1fr auto;
    grid-template-areas: "brand actions" "primary primary";
    row-gap: 13px;
  }

  .story-brand { grid-area: brand; align-items: flex-start; }
  .story-brand__name { font-size: 25px; }
  .story-brand__caption { font-size: 5px; }
  .story-nav--primary { grid-area: primary; gap: 24px; }
  .story-nav--secondary { grid-area: actions; gap: 17px; }
  .story-nav--primary a { font-size: 8px; }
  .story-nav--secondary a:not(.story-bag-link) { font-size: 8px; }
  .story-nav a.is-active::after { bottom: -5px; }

  .story-hero-screen { height: 500px; }
  .story-hero-screen__image { object-position: 57% center; }
  .story-hero-screen__veil { background: linear-gradient(90deg, rgba(246,243,238,.98) 0%, rgba(246,243,238,.94) 43%, rgba(246,243,238,.48) 74%, rgba(246,243,238,.12) 100%); }
  .story-hero-screen__copy { width: 74%; padding-left: 54px; }
  .story-hero-screen h1 { font-size: clamp(43px, 8vw, 62px); }
  .story-hero-screen__aside { top: 22px; right: 20px; width: 74px; font-size: 8px; }
  .story-hero-screen__pagination { left: 14px; }

  .story-mood { grid-template-columns: 44% 56%; min-height: 280px; }
  .story-mood__image img { min-height: 280px; }
  .story-mood__content { grid-template-columns: 1fr; padding: 22px; }
  .story-mood__copy { align-self: center; }
  .story-mood h2 { font-size: clamp(26px, 4.5vw, 36px); }
  .story-quote { display: none; }
  .story-mood__copy > p:not(.story-eyebrow) { font-size: 11px; }

  .story-values { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 20px; }
  .story-values__intro { grid-column: 1 / -1; padding: 0 0 12px; }
  .story-values__intro > p:not(.story-eyebrow) { max-width: 540px; }
  .story-value-card h3 { font-size: 9px; }

  .story-craft { grid-template-columns: 42% 58%; }
  .story-craft__image img { min-height: 350px; }
  .story-craft__content { grid-template-columns: 1fr; align-content: center; gap: 15px; padding: 22px; }
  .story-craft__list { grid-template-columns: 1fr 1fr; gap: 12px 8px; }
  .story-craft__list li { grid-template-columns: 30px minmax(0, 1fr); gap: 7px; }
  .story-craft__list li > span { width: 29px; height: 29px; font-size: 15px; }
  .story-craft__list strong { font-size: 8px; }
  .story-craft__list p { font-size: 9px; }

  .story-ending { grid-template-columns: 1fr; padding: 20px; }
  .story-ending__copy { padding: 4px 0 14px; }
  .story-ending__gallery img { height: 230px; }
}

@media (max-width: 560px) {
  .story-site-header__inner { padding-right: 16px; padding-left: 16px; }
  .story-nav { gap: 14px; }
  .story-nav a { font-size: 7px; letter-spacing: .6px; }
  .story-nav--secondary { gap: 13px; }
  .story-nav .story-bag-link { margin-left: 0; }
  .story-nav svg { width: 17px; height: 17px; }

  .story-hero-screen { height: 500px; }
  .story-hero-screen__copy { width: 88%; padding: 35px 20px 35px 46px; }
  .story-hero-screen h1 { font-size: clamp(39px, 11vw, 52px); }
  .story-intro { max-width: 320px; font-size: 12px; }
  .story-hero-screen__aside { top: auto; right: 14px; bottom: 17px; width: 68px; font-size: 7px; }
  .story-hero-screen__aside::after { display: none; }
  .story-hero-screen__pagination { left: 10px; }

  .story-mood { grid-template-columns: 1fr; }
  .story-mood__image img { height: 260px; min-height: 0; }
  .story-mood__content { padding: 25px 22px 28px; }
  .story-mood h2 { font-size: 34px; }
  .story-mood__copy > p:not(.story-eyebrow) { font-size: 12px; }

  .story-values { grid-template-columns: 1fr; padding: 23px 18px; }
  .story-values__intro { grid-column: auto; }
  .story-values h2 { font-size: 35px; }
  .story-value-card { display: grid; grid-template-columns: 42% 58%; align-items: center; text-align: left; }
  .story-value-card > img { height: 100%; min-height: 138px; aspect-ratio: auto; }
  .story-value-card__body { padding: 12px 13px; }
  .story-value-card__icon { font-size: 21px; }
  .story-value-card h3 { font-size: 10px; }
  .story-value-card p { margin: 0; font-size: 10px; }

  .story-craft { grid-template-columns: 1fr; }
  .story-craft__image img { height: 250px; min-height: 0; }
  .story-craft__content { padding: 26px 20px; }
  .story-craft h2 { font-size: 35px; }
  .story-craft__copy > p:not(.story-eyebrow) { font-size: 12px; }
  .story-craft__list { grid-template-columns: 1fr; }
  .story-craft__list li { grid-template-columns: 38px minmax(0, 1fr); gap: 11px; }
  .story-craft__list li > span { width: 36px; height: 36px; }
  .story-craft__list strong { font-size: 9px; }
  .story-craft__list p { font-size: 10px; }

  .story-ending { padding: 25px 18px; }
  .story-ending h2 { font-size: 35px; }
  .story-ending__copy > p:not(.story-eyebrow) { font-size: 12px; }
  .story-ending__gallery { grid-template-columns: 1fr 1fr; gap: 7px; }
  .story-ending__gallery figure:last-child { grid-column: 1 / -1; }
  .story-ending__gallery img { height: 190px; }
  .story-ending__gallery figure:last-child img { height: 220px; }
}

@media (prefers-reduced-motion: reduce) {
  .story-button { transition: none; }
}