/* Keep the Cup visible while the normal-flow story covers the fixed stage.
   The engine's timing, scrubbing and mobile media selection remain untouched. */
/* Center the land label and headline together above the forest photograph. */
.otc .dr-purchase-options { display: grid; grid-template-columns: 1fr; gap: 10px; }
.otc .dr-price-option { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label label" "price action" "detail detail" "savings savings"; align-items: center; gap: 4px 12px; padding: 12px 14px; border: 1px solid var(--gold); background: var(--ivory); }
.otc .dr-price-option > .otc-eyebrow { grid-area: label; font-size: 10px; letter-spacing: .12em; }
.otc .dr-price-option--subscription { background: #e7e5d6; }
.otc .dr-price-amount { grid-area: price; margin: 0; color: var(--forest); font: 500 30px/1.2 "Cormorant Garamond", Georgia, serif; }
.otc .dr-price-amount span { font: 400 13px/1.5 "DM Sans", sans-serif; white-space: nowrap; }
.otc .otc-pack-stage { align-self: start; }
.otc .dr-price-detail { grid-area: detail; margin: 0; font-size: 12px; line-height: 1.5; }
.otc .dr-price-detail span { display: block; color: var(--muted); font-size: 12px; }
.otc .dr-price-per-bag { font-size: 13px; color: var(--forest); margin-bottom: 12px; }
.otc .dr-price-savings { grid-area: savings; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 2px 0 0; font-size: 11px; line-height: 1.5; color: var(--forest); }
.otc .dr-price-savings strong { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--forest); color: var(--ivory); font-weight: 500; margin-bottom: 8px; }
.otc .dr-price-savings span { display: block; }
.otc .dr-shipping-note { margin-top: 20px; font-size: 13px; line-height: 1.7; color: var(--forest); }
.otc .dr-shipping-note span { display: block; color: var(--muted); font-size: 12px; }
.otc .dr-price-option .dr-stripe-button { grid-area: action; margin: 0; min-height: 44px; font-size: 12px; padding: 9px 14px !important; }
.otc .dr-stripe-note { max-width: none; }
.otc .dr-portal-note { margin-top: 12px; font-size: 13px; line-height: 1.7; color: var(--forest); }
.otc .dr-portal-note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.otc .dr-portal-note span { display: block; color: var(--muted); font-size: 12px; }
.otc .otc-roots-inner > div { min-width: 0; container-type: inline-size; }
.otc .dr-headline-line { display: block; white-space: nowrap; }
.otc .otc-roots h2 { font-size: min(76px, 10cqi); line-height: 1.12; }
.otc .otc-values h3.dr-headline-line { font-size: min(35px, 10cqi); }
.otc .otc-origin-heading {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 24px;
  text-align: center;
  margin-bottom: clamp(36px, 5vw, 64px);
}
.otc .otc-origin-heading .otc-eyebrow { padding-top: 0; }
.otc .otc-origin-heading h2 {
  max-width: 900px;
  font-size: clamp(40px, 6.3vw, 92px);
  text-wrap: balance;
}
.otc .dr-faq-section {
  padding: clamp(64px, 8vw, 112px) clamp(24px, 6vw, 96px);
  background: var(--ivory);
  color: var(--forest);
}
.otc .dr-faq-inner { max-width: 900px; margin: 0 auto; }
.otc .dr-faq-section h2 { font-size: clamp(36px, 5vw, 58px); line-height: 1.15; margin: 14px 0 36px; }
.otc .dr-faq details { border-top: 1px solid var(--gold); }
.otc .dr-faq details:last-child { border-bottom: 1px solid var(--gold); }
.otc .dr-faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 24px 0;
  font-size: clamp(16px, 2vw, 19px);
  font-weight: 500;
  line-height: 1.5;
  cursor: pointer;
  list-style: none;
}
.otc .dr-faq summary::-webkit-details-marker { display: none; }
.otc .dr-faq summary::after { content: "+"; flex-shrink: 0; font-size: 26px; font-weight: 400; }
.otc .dr-faq details[open] > summary::after { content: "−"; }
.otc .dr-faq summary:hover { color: var(--muted); }
.otc .dr-faq summary:focus-visible { outline: 2px solid var(--forest); outline-offset: 5px; }
.otc .dr-faq details p { max-width: 760px; padding: 0 32px 24px 0; overflow-wrap: anywhere; }
.otc .dr-faq a { color: var(--forest); text-decoration: underline; text-underline-offset: 3px; }
.sw-root.is-ending .sw-scene:last-child { opacity: 1 !important; }
.sw-root.is-released > :not(.sw-track) { visibility: hidden; }
/* Let larger headlines grow upward without clipping tags or chapter actions.
   Leave the engine's per-frame transforms and scroll timing untouched. */
.sw-copy { top: auto !important; bottom: clamp(88px, 14vh, 140px); }
.sw-copy__title {
  font-weight: 400 !important;
  font-size: clamp(2.6rem, 5.6vw, 4.5rem) !important;
}
@media (max-width: 860px) {
  .sw-copy { bottom: calc(clamp(120px, 15dvh, 150px) + env(safe-area-inset-bottom)) !important; }
  .sw-copy__title { font-size: clamp(2.4rem, 9.5vw, 3.4rem) !important; }
}
.otc #shop, .otc #otc-shop { scroll-margin-top: 0; }
/* Intrinsic dimensions reserve space; CSS must still scale both axes together. */
.otc img { height: auto; }
.otc .otc-footer-brand img, .otc .otc-united-logo { height: auto; object-fit: contain; }
.otc .otc-footer-main {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) 160px;
  align-items: center;
  gap: 24px;
  max-width: 1180px;
  margin: 0 auto;
}
.otc .otc-footer-brand { display: block; }
.otc .otc-footer-brand img { display: block; width: 140px; }
.otc .otc-footer-title { font-size: clamp(32px, 3.5vw, 48px); line-height: 1.15; }
.otc .dr-footer-message { text-align: center; align-self: center; }
.otc .otc-footer-nav { min-width: 0; gap: 0; }
.otc .otc-footer-nav a { white-space: nowrap; display: flex; align-items: center; min-height: 36px; }
.otc .otc-footer-bottom { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; line-height: 1.6; }
.otc .otc-footer-bottom > :last-child { text-align: right; }
@media (max-width: 900px) {
  .otc .otc-footer-main { grid-template-columns: 1fr; justify-items: center; gap: 18px; text-align: center; }
  .otc .otc-footer-brand img { width: 104px; }
  .otc .otc-footer-title { font-size: clamp(30px, 5vw, 40px); }
  .otc .otc-footer-nav { display: grid; grid-template-columns: 1fr 1fr; width: 100%; max-width: 340px; gap: 0 16px; font-size: 12px; }
  .otc .otc-footer-nav a { justify-content: center; min-height: 44px; }
  .otc .otc-footer-bottom { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
  .otc .otc-footer-bottom > :last-child { text-align: center; }
}
/* One button language across the cinematic opening and Origin continuation. */
.sw-topcta, .sw-btn, .otc .dr-stripe-button, .otc .dr-signup__btn,
.otc .otc-link {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  min-height: 48px;
  padding: 13px 24px !important;
  border: 1px solid #c5aa72 !important;
  border-radius: 999px !important;
  background: #172d26 !important;
  color: #f1ecdf !important;
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  font-weight: 500 !important;
  line-height: 1.5;
  text-decoration: none;
  box-shadow: none !important;
  transition: background .2s, border-color .2s;
}
.sw-topcta:hover, .sw-btn:hover, .otc .dr-stripe-button:hover,
.otc .dr-signup__btn:hover, .otc .otc-link:hover {
  background: #10231d !important;
  border-color: #f1ecdf !important;
}
.sw-nav, .sw-nav__item { border-radius: 999px !important; }
.sw-nav { background: #172d26 !important; }
.sw-nav__item.is-active { background: #f1ecdf !important; color: #172d26 !important; }
@media (prefers-reduced-motion: reduce) {
  .sw-topcta, .sw-btn, .otc .dr-stripe-button, .otc .dr-signup__btn,
  .otc .otc-link { transition: none; }
}
.dr-skip {
  position: fixed;
  z-index: 200;
  top: 10px;
  left: 10px;
  padding: 12px 20px;
  background: #f1ecdf;
  color: #172d26;
  transform: translateY(-200%);
}
.dr-skip:focus { transform: none; }
.sw-brand:focus-visible, .sw-nav__item:focus-visible,
.sw-route__dot:focus-visible, .otc a:focus-visible,
.otc button:focus-visible, .otc input:focus-visible {
  outline: 2px solid #c5aa72;
  outline-offset: 5px;
}
/* Compact the normal-flow content only; cinematic scroll distances stay intact. */
.otc .otc-product, .otc .otc-origin, .otc .otc-community,
.otc .otc-roots, .otc .dr-faq-section {
  padding-top: clamp(36px, 4vw, 60px);
  padding-bottom: clamp(36px, 4vw, 60px);
}
.otc .otc-product-intro { margin-bottom: 28px; }
.otc .otc-product-intro h2 { margin-top: 10px; }
.otc .otc-product-grid { row-gap: 24px; }
.otc .otc-product-copy h3 { margin: 10px 0 8px; }
.otc .otc-product-text { margin-top: 16px; line-height: 1.65; }
.otc .otc-taste { margin-top: 16px; }
.otc .otc-product-details { margin-top: 18px; padding-top: 12px; }
.otc .dr-stripe-purchase { margin-top: 16px; }
.otc .dr-price-savings strong { margin: 0; padding: 2px 8px; }
.otc .dr-shipping-note { margin-top: 12px; }
.otc .dr-stripe-note { margin-top: 8px; line-height: 1.5; }
.otc .dr-signup { margin-top: 20px; padding-top: 14px; }
.otc .dr-signup__label { margin-bottom: 8px; }
.otc .otc-origin-heading { gap: 16px; margin-bottom: 28px; }
.otc .otc-land-story { margin-top: 28px; }
.otc .otc-people { margin-top: 52px; row-gap: 24px; }
.otc .otc-people h3 { margin: 16px 0; }
.otc .otc-people p { margin-top: 12px; }
.otc .otc-school { margin-top: 32px; row-gap: 24px; }
.otc .otc-community h2, .otc .otc-roots h2 { margin: 16px 0; }
.otc .otc-interlude { min-height: 360px; padding-block: 40px; }
.otc .otc-united-logo { margin-top: 20px; }
.otc .otc-values { padding-top: 20px; }
.otc .otc-values article + article { margin-top: 24px; }
.otc .otc-giving { margin-top: 32px; padding-top: 18px; }
.otc .dr-faq-section h2 { margin: 10px 0 24px; }
.otc .dr-faq summary { padding-block: 16px; min-height: 48px; }
.otc .dr-faq details p { padding-bottom: 16px; }
.otc .otc-footer { padding-top: 40px; padding-bottom: 20px; }
.otc .otc-footer-main { padding-bottom: 28px; }
.otc .otc-footer-bottom { padding-top: 16px; }
.otc .dr-newsletter { padding: 32px clamp(24px, 6vw, 96px) 0; background: var(--ivory); }
.otc .dr-newsletter .dr-signup { max-width: 600px; margin: 0 auto; padding: 0; border-top: 0; }
.otc .dr-newsletter .dr-signup__label { text-align: center; margin-bottom: 14px; }
.otc .dr-newsletter .dr-signup__row { justify-content: center; }
.otc .dr-newsletter .dr-signup__msg { text-align: center; }

/* 01 / Why Ethiopia: a quiet, compact bridge from the shop to the land. */
.otc .otc-why {
  padding: clamp(38px, 5vw, 68px) clamp(24px, 7vw, 110px);
  background: #e5ddca;
  color: var(--forest);
}
.otc .otc-why__intro { max-width: 810px; margin: 0 auto; text-align: center; }
.otc .otc-why__intro h2 {
  margin: 12px 0 18px;
  font-size: clamp(42px, 6vw, 76px);
  line-height: 1.03;
  letter-spacing: -.035em;
}
.otc .otc-why__intro > p:last-child {
  max-width: 720px;
  margin: 0 auto;
  color: #696253;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.75;
}
.otc .otc-why__facts {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  max-width: 1180px;
  margin: clamp(26px, 3vw, 38px) auto 0;
  border-top: 1px solid #bdb39c;
  border-bottom: 1px solid #bdb39c;
}
.otc .otc-why__facts article { min-width: 0; padding: 20px clamp(16px, 2.3vw, 30px); }
.otc .otc-why__facts article + article { border-left: 1px solid #bdb39c; }
.otc .otc-why__stat {
  margin: 0 0 8px;
  color: var(--forest);
  font-size: clamp(23px, 2.7vw, 34px);
  line-height: 1.15;
}
.otc .otc-why__facts article > p:last-child {
  margin: 0;
  color: #696253;
  font-size: 13px;
  line-height: 1.65;
}
.otc .otc-why__facts strong { color: var(--forest); font-weight: 600; }
.otc .otc-land-stats { display: grid; gap: 24px; align-content: start; }
.otc .otc-land-stats .otc-land-coordinate strong { font-size: clamp(27px, 3.2vw, 40px); }
.otc .otc-cup-note {
  max-width: 620px;
  margin: -8px auto 22px;
  color: #e4dfd2;
  font-size: 15px;
  line-height: 1.75;
}

/* Dr. Geisler's note: accessible native dialog with tactile paper and ink. */
.otc .dr-letter-trigger {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  max-width: 100%;
  min-height: 48px;
  margin: 18px 0 24px;
  padding: 12px 22px;
  border: 1px solid rgba(35, 73, 56, .36);
  border-radius: 999px;
  background: rgba(255, 251, 239, .52);
  color: var(--forest);
  font: 500 12px/1.5 "DM Sans", sans-serif;
  letter-spacing: .01em;
  text-align: left;
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .2s;
}
.otc .dr-letter-trigger:hover { background: #f6f0e3; border-color: var(--forest); transform: translateY(-1px); }
.otc .dr-letter-trigger__label { min-width: 0; }
.otc .dr-letter-trigger + h2 { margin-top: 0; }
.otc .dr-letter-trigger [aria-hidden] { flex: none; font-size: 18px; }
@font-face {
  font-family: "Deep Root Letter";
  src: url("./origin/fonts/cedarville-cursive.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
.dr-letter-dialog {
  position: fixed;
  inset: 0;
  box-sizing: border-box;
  width: min(760px, calc(100% - 28px));
  max-width: none;
  max-height: min(90dvh, 920px);
  margin: auto;
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #25392e;
  box-shadow: 0 24px 90px rgba(12, 24, 17, .38);
}
.dr-letter-dialog::backdrop { background: rgba(13, 24, 18, .76); backdrop-filter: blur(4px); }
.dr-letter { padding: clamp(16px, 3vw, 28px); background: #e9e0cc; }
.dr-letter__top { position: sticky; top: 0; z-index: 1; background: #e9e0cc; display: flex; justify-content: space-between; align-items: center; gap: 18px; padding-block: 8px; margin-bottom: 12px; }
.dr-letter__top .otc-eyebrow { margin: 0; color: #766649; }
.dr-letter__close {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid #b7a982;
  border-radius: 999px;
  background: transparent;
  color: #304437;
  font: 500 12px/1.4 "DM Sans", sans-serif;
  cursor: pointer;
}
.dr-letter__close:hover { background: #dcd1b9; }
.dr-letter__close span { font-size: 19px; line-height: 1; }
.dr-letter__paper {
  --letter-line: 36px;
  padding: var(--letter-line) clamp(48px, 6vw, 62px);
  border: 1px solid rgba(119, 99, 57, .22);
  background:
    linear-gradient(90deg, transparent 0, transparent 37px, rgba(165, 101, 80, .16) 38px, transparent 39px),
    repeating-linear-gradient(to bottom, #fffdf4 0, #fffdf4 28px, #cdd2c5 28px, #cdd2c5 29px, #fffdf4 29px, #fffdf4 var(--letter-line));
  box-shadow: inset 0 0 38px rgba(119, 99, 57, .08), 0 6px 18px rgba(61, 48, 28, .09);
}
.dr-letter__paper p {
  max-width: 570px;
  margin: 0 0 var(--letter-line);
  color: #2d4336;
  font-family: "Deep Root Letter", "Segoe Print", "Bradley Hand", cursive;
  font-size: 26px;
  font-weight: 400;
  line-height: var(--letter-line);
}
.dr-letter__paper .dr-letter__recipient { margin-bottom: var(--letter-line); font-size: 26px; }
.dr-letter__paper .dr-letter__greeting {
  margin: 0 0 var(--letter-line);
  color: #263b30;
  font-family: "Deep Root Letter", "Segoe Print", "Bradley Hand", cursive;
  font-size: 26px;
  font-weight: 400;
  line-height: var(--letter-line);
}
.dr-letter__paper .dr-letter__signoff { margin: 0; }
.dr-letter__signoff span { font-size: inherit; }
.dr-letter-dialog:focus { outline: none; }
body.dr-letter-open { position: fixed; inset-inline: 0; width: 100%; overflow: hidden; }

.otc .dr-letter-trigger:focus-visible, .dr-letter__close:focus-visible {
  outline: 2px solid #496b51;
  outline-offset: 4px;
}
.otc .dr-letter-trigger { box-shadow: none; }
.otc .otc-link { white-space: normal; }
@media (max-width: 760px) {
  .otc .otc-why { padding: 36px 24px; }
  .otc .otc-why__facts { grid-template-columns: 1fr; margin-top: 24px; }
  .otc .otc-why__facts article { padding: 16px 2px; }
  .otc .otc-why__facts article + article { border-left: 0; border-top: 1px solid #bdb39c; }
  .otc .otc-land-stats { gap: 16px; }
  .otc .otc-cup-note { font-size: 14px; }
  .dr-letter-dialog { width: calc(100% - 18px); max-height: calc(100dvh - 18px); }
  .dr-letter { padding: 12px; }
  .dr-letter__paper {
    padding: var(--letter-line) 18px var(--letter-line) 48px;
    background-position: 0 0, 0 0;
  }
  .dr-letter__paper p,
  .dr-letter__paper .dr-letter__recipient,
  .dr-letter__paper .dr-letter__greeting { font-size: 24px; }
  .dr-letter__paper .dr-letter__signoff { margin-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .otc .dr-letter-trigger { transition: none; }
}

/* Keep the new invitation in the same green pill language as the shop actions. */
.otc .dr-letter-trigger {
  border: 1px solid #c5aa72;
  background: #172d26;
  color: #f1ecdf;
}
.otc .dr-letter-trigger:hover { background: #10231d; border-color: #f1ecdf; }