/* ============================================================
   BERUNDA — The Estates
   "From First Light" — one day on two estates, paced by the light.
   Five chapters on a warm parchment field, interrupted by
   full-bleed photographic plates, closing on espresso and navy.

   Translated from the design kit's estate.css. The kit's own nav,
   cart and footer rules are DROPPED here — the theme serves that
   chrome on every page from berunda-chrome.css / website-nav.css /
   footer.css, so duplicating it would only fight the cascade.
   The kit's ≤680px layer lives in its shared mobile.css; the
   estate half of it is folded in at the end of this file (the
   theme has no mobile.css).
   ============================================================ */

.es {
  --es-bg: #f4ead7;
  --es-ink: #3a2412;
  --es-ink-soft: #5a4321;
  --es-line: rgba(66, 40, 23, 0.18);
  --es-gold-line: rgba(198, 135, 27, 0.40);
  background:
    radial-gradient(96% 50% at 50% -6%, rgba(198, 135, 27, 0.11), transparent 60%),
    linear-gradient(180deg, #f8f0df 0%, #f1e5cf 54%, #eedec5 100%);
  color: var(--es-ink);
  overflow-x: clip;
}
.es * { box-sizing: border-box; }

/* Dawn's base.css hides EVERY empty element (`div:empty { display: none }`,
   ~line 469). This page draws its hairlines with empty divs — the chapter
   rules and the pull-quote rule — so they must be handed their display back.
   `div:empty` is (0,1,1), so this has to out-specify it, not re-declare. */
.es div:empty { display: block; }

.es-container { max-width: 1180px; margin: 0 auto; padding: 0 clamp(24px, 6vw, 92px); }

.es-eyebrow {
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: 0.4em; font-size: clamp(11px, 1vw, 13px);
  color: var(--gold-700); font-weight: 600;
}

/* ============================================================
   Chapter rail — a quiet gold index, desktop only
   ============================================================ */
.es-rail {
  position: fixed; left: clamp(18px, 2.4vw, 34px); top: 50%; transform: translateY(-50%);
  z-index: 40; display: flex; flex-direction: column; gap: 16px;
  opacity: 0; visibility: hidden;
  transition: opacity 0.7s var(--ease-standard), visibility 0.7s var(--ease-standard);
}
.es-rail.is-on { opacity: 1; visibility: visible; }
.es-rail-item {
  position: relative;
  display: grid; grid-template-columns: 26px auto; align-items: center; gap: 10px;
  background: none; border: 0; padding: 3px 0; cursor: pointer; text-align: left;
  font-family: var(--font-display); font-size: 9.5px; letter-spacing: 0.22em;
  text-transform: uppercase; color: rgba(58, 36, 18, 0.42);
  transition: color 0.5s var(--ease-standard);
}
/* 19px tall at rest. An invisible expander lifts it to the 24px minimum; the
   44px used elsewhere would exceed the 16px stack gap and overlap its neighbours. */
.es-rail-item::before { content: ""; position: absolute; inset: -3px 0; }
.es-rail-item i {
  display: block; height: 1px; width: 14px; background: currentColor; justify-self: end;
  transition: width 0.55s var(--ease-standard), background-color 0.5s var(--ease-standard);
}
.es-rail-item span { opacity: 0; transform: translateX(-4px); transition: opacity 0.45s var(--ease-standard), transform 0.45s var(--ease-standard); }
.es-rail:hover .es-rail-item span { opacity: 1; transform: none; }
.es-rail-item:hover { color: var(--gold-700); }
.es-rail-item.is-active { color: var(--gold-700); }
.es-rail-item.is-active i { width: 26px; background: var(--gold-500); }
.es-rail-item.is-active span { opacity: 1; transform: none; }
/* over the espresso / navy / footer stretches the rail flips to gold on dark */
.es-rail.on-dark .es-rail-item { color: rgba(239, 217, 166, 0.48); }
.es-rail.on-dark .es-rail-item:hover,
.es-rail.on-dark .es-rail-item.is-active { color: var(--gold-300); }
.es-rail.on-dark .es-rail-item.is-active i { background: var(--gold-400); }

/* ============================================================
   THRESHOLD — full-bleed dawn
   ============================================================ */
.es-threshold {
  position: relative; height: calc(100svh - 74px); min-height: 500px;
  display: flex; align-items: flex-end; overflow: hidden; background: #1b1408;
}
@media (max-height: 700px) {
  .es-threshold-title { font-size: clamp(38px, 6.4vw, 68px); }
  .es-threshold-sub { font-size: clamp(16px, 1.5vw, 19px); }
  .es-threshold-inner { padding-bottom: clamp(34px, 6vh, 60px); }
  .es-threshold-foot { margin-top: 20px; }
}
.es-threshold-media { position: absolute; inset: -8% 0; z-index: 0; }
.es-threshold-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: translate3d(0, var(--p, 0px), 0) scale(1.04);
}
.es-threshold::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(12, 8, 3, 0.42) 0%, rgba(12, 8, 3, 0) 24%),
    linear-gradient(0deg,
      rgba(10, 7, 3, 0.88) 0%,
      rgba(10, 7, 3, 0.78) 22%,
      rgba(10, 7, 3, 0.62) 42%,
      rgba(10, 7, 3, 0.40) 58%,
      rgba(10, 7, 3, 0.16) 74%,
      rgba(10, 7, 3, 0) 88%);
}
.es-threshold-inner {
  position: relative; z-index: 2; width: 100%;
  max-width: 1320px; margin: 0 auto;
  padding: 0 clamp(24px, 6vw, 92px) clamp(52px, 9vh, 104px);
}
.es-threshold .es-eyebrow { color: var(--gold-300); }
.es-threshold-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(40px, 7.4vw, 104px); line-height: 0.98; letter-spacing: 0.03em;
  color: #fbf6ea; margin: clamp(14px, 2.4vh, 26px) 0 0;
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.5);
}
.es-threshold-title .em { font-style: italic; font-family: var(--font-body); font-weight: 400; letter-spacing: 0; }
.es-threshold-sub {
  font-family: var(--font-body); font-style: italic;
  font-size: clamp(17px, 1.7vw, 23px); line-height: 1.5; color: rgba(251, 246, 234, 0.86);
  max-width: 30em; margin: clamp(16px, 2.4vh, 26px) 0 0;
}
.es-threshold-foot {
  display: flex; align-items: center; gap: 18px; margin-top: clamp(24px, 4vh, 44px);
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: 0.26em; font-size: 10px; color: rgba(239, 217, 166, 0.78);
}
.es-threshold-foot i { display: block; width: clamp(40px, 8vw, 110px); height: 1px; background: rgba(198, 135, 27, 0.5); }
.es-scrollcue {
  position: absolute; right: clamp(24px, 6vw, 92px); bottom: clamp(52px, 9vh, 104px); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  background: none; border: 0; padding: 8px; cursor: pointer;
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: 0.24em; font-size: 9px; color: rgba(239, 217, 166, 0.72);
  transition: color 0.5s var(--ease-standard);
}
.es-scrollcue:hover { color: var(--gold-300); }
.es-scrollcue i { display: block; width: 1px; height: 52px; background: linear-gradient(180deg, rgba(198,135,27,0.7), rgba(198,135,27,0)); }
@media (max-width: 680px) { .es-scrollcue { display: none; } }

/* ============================================================
   Chapter heads
   ============================================================ */
.es-chapter { padding: clamp(64px, 12vh, 148px) 0 0; position: relative; scroll-margin-top: 90px; }
.es-chead { display: grid; grid-template-columns: auto 1fr; gap: 0 clamp(20px, 3vw, 44px); align-items: start; }
.es-numeral {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(28px, 3vw, 40px); line-height: 1; letter-spacing: 0.04em;
  color: var(--gold-500); padding-top: 4px;
}
.es-chead-t { min-width: 0; }
.es-chapter-title {
  font-family: var(--font-display); font-weight: 700; color: var(--midnight-navy);
  font-size: clamp(28px, 4.2vw, 58px); line-height: 1.04; letter-spacing: 0.035em;
  margin: 10px 0 0; text-wrap: balance;
}
.es-chapter-rule { height: 1px; background: var(--es-gold-line); margin: clamp(22px, 3.4vh, 36px) 0 0; }
.es-lead {
  font-family: var(--font-body); font-size: clamp(20px, 2.1vw, 29px); line-height: 1.5;
  color: var(--es-ink); max-width: 27em; margin: clamp(24px, 3.6vh, 40px) 0 0; text-wrap: pretty;
}
.es-lead .em { font-style: italic; }
.es-lead .gold { color: var(--gold-700); }
.es-body {
  font-family: var(--font-body); font-size: clamp(17px, 1.4vw, 20px); line-height: 1.76;
  color: var(--es-ink-soft); max-width: 34em; margin: clamp(18px, 2.4vh, 26px) 0 0; text-wrap: pretty;
}
.es-body strong { font-weight: 700; color: var(--es-ink); }
.es-body .gold { color: var(--gold-700); font-weight: 700; }

/* ============================================================
   Figures & plates
   ============================================================ */
.es-fig { position: relative; overflow: hidden; margin: 0; }
.es-fig-frame { position: relative; overflow: hidden; background: #241a10; }
.es-fig-frame img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: translate3d(0, var(--p, 0px), 0) scale(1.05);
}
/* only the plates that actually move get a promoted layer */
[data-parallax] img { will-change: transform; }
.es-cap {
  display: grid; grid-template-columns: auto 1fr; gap: 0 12px; align-items: baseline;
  margin-top: 14px; font-family: var(--font-display);
  text-transform: uppercase; letter-spacing: 0.22em; font-size: 9.5px; color: var(--gold-700);
}
.es-cap em {
  font-family: var(--font-body); font-style: italic; text-transform: none;
  letter-spacing: 0.01em; font-size: 15px; color: var(--ink-500);
}
.es-cap-mark { white-space: nowrap; padding-right: 12px; border-right: 1px solid var(--es-gold-line); }

/* full-bleed band */
.es-bleed { margin-top: clamp(40px, 6vh, 80px); }
.es-bleed .es-fig-frame { height: clamp(360px, 74vh, 760px); }
.es-bleed--band .es-fig-frame { height: clamp(280px, 46vh, 440px); }
.es-bleed .es-cap { max-width: 1180px; margin: 14px auto 0; padding: 0 clamp(24px, 6vw, 92px); }

/* ============================================================
   I — THE LAND
   ============================================================ */
.es-land-grid {
  display: grid; grid-template-columns: 1fr 0.72fr; gap: clamp(30px, 5vw, 76px);
  align-items: start; margin-top: clamp(44px, 7vh, 92px);
}
.es-land-grid > .es-curtain { position: sticky; top: 112px; margin-top: clamp(24px, 5vh, 64px); }
.es-land-grid .es-fig-frame { aspect-ratio: 1 / 1.02; }
.es-facts { margin-top: clamp(26px, 3.6vh, 40px); border-top: 1px solid var(--es-line); }
.es-fact {
  display: grid; grid-template-columns: clamp(96px, 13vw, 168px) 1fr; gap: 0 clamp(16px, 3vw, 40px);
  padding: clamp(14px, 2vh, 20px) 0; border-bottom: 1px solid var(--es-line);
}
.es-fact dt {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.22em;
  font-size: 9.5px; color: var(--gold-700); padding-top: 6px;
}
.es-fact dd {
  margin: 0; font-family: var(--font-body); font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.6; color: var(--es-ink-soft); text-wrap: pretty;
}
.es-aside {
  margin-top: clamp(34px, 5vh, 60px); padding-left: clamp(16px, 2vw, 26px);
  border-left: 1px solid var(--es-gold-line); max-width: 30em;
}
.es-aside-label {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.24em;
  font-size: 9.5px; color: var(--gold-700); margin: 0 0 10px;
}
.es-aside p {
  font-family: var(--font-body); font-style: italic; font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.62; color: var(--es-ink); margin: 0; text-wrap: pretty;
}

/* ============================================================
   II — TWO ESTATES · photographic band + dossier plate
   ============================================================ */
.es-estate { margin-top: clamp(48px, 8vh, 108px); position: relative; }
.es-estate-band { position: relative; }
.es-estate-band .es-fig-frame { height: clamp(400px, 82vh, 800px); }
.es-estate-band::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(12, 8, 3, 0.55) 0%, rgba(12, 8, 3, 0.12) 46%, rgba(12, 8, 3, 0) 68%);
}
.es-estate--right .es-estate-band::after {
  background: linear-gradient(270deg, rgba(12, 8, 3, 0.55) 0%, rgba(12, 8, 3, 0.12) 46%, rgba(12, 8, 3, 0) 68%);
}
.es-estate-plate {
  position: relative; z-index: 2;
  max-width: 1180px; margin: -1px auto 0; padding: 0 clamp(24px, 6vw, 92px);
  display: flex;
}
.es-estate--right .es-estate-plate { justify-content: flex-end; }
.es-dossier {
  margin-top: clamp(-140px, -14vh, -60px);
  width: min(100%, 520px);
  background: #fbf6ea;
  border: 1px solid var(--es-gold-line);
  padding: clamp(26px, 3.6vw, 44px) clamp(24px, 3.4vw, 42px) clamp(24px, 3.2vw, 38px);
  box-shadow: 0 30px 70px -30px rgba(20, 10, 2, 0.5);
}
.es-dossier-est {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.3em;
  font-size: 10px; color: var(--gold-700); margin: 0;
}
.es-dossier-name {
  font-family: var(--font-display); font-weight: 700; color: var(--midnight-navy);
  font-size: clamp(24px, 2.5vw, 34px); line-height: 1.08; letter-spacing: 0.04em; margin: 12px 0 0;
}
.es-dossier-loc {
  font-family: var(--font-body); font-style: italic; font-size: clamp(15px, 1.2vw, 17px);
  color: var(--ink-500); margin: 9px 0 0;
}
.es-dossier-note {
  font-family: var(--font-body); font-size: clamp(16px, 1.3vw, 18.5px); line-height: 1.7;
  color: var(--es-ink-soft); margin: clamp(16px, 2.2vh, 22px) 0 0; text-wrap: pretty;
}
.es-dossier-note strong { font-weight: 700; color: var(--es-ink); }
.es-dossier-specs { margin: clamp(18px, 2.4vh, 26px) 0 0; border-top: 1px solid var(--es-line); }
.es-spec {
  display: grid; grid-template-columns: 1fr auto; gap: 0 16px; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid var(--es-line);
}
.es-spec dt {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.2em;
  font-size: 9px; color: var(--ink-500);
}
.es-spec dd {
  margin: 0; font-family: var(--font-body); font-size: clamp(15px, 1.2vw, 17px);
  color: var(--es-ink); text-align: right;
}
.es-spec dd .gold { color: var(--gold-700); }

/* ============================================================
   III — THE HANDS
   ============================================================ */
.es-hands-hero { margin-top: clamp(44px, 7vh, 88px); display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(30px, 5vw, 80px); align-items: center; }
.es-hands-hero .es-fig-frame { aspect-ratio: 1.42 / 1; }
.es-pull {
  font-family: var(--font-body); font-size: clamp(22px, 2.5vw, 34px); line-height: 1.42;
  color: var(--midnight-navy); margin: 0; text-wrap: pretty; max-width: 22em;
}
.es-pull .em { font-style: italic; color: var(--gold-700); }
.es-pull-rule { width: 46px; height: 1px; background: var(--gold-500); margin: 0 0 clamp(20px, 3vh, 30px); }
.es-trio { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(20px, 3vw, 44px); margin-top: clamp(40px, 6vh, 84px); align-items: start; }
.es-trio-tall .es-fig-frame { aspect-ratio: 0.78 / 1; }
.es-trio-wide .es-fig-frame { aspect-ratio: 1.45 / 1; }

/* ============================================================
   IV — SUN & FIRE · the horizontal act
   ============================================================ */
.es-yards { padding-bottom: clamp(48px, 8vh, 96px); }
.es-strip-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  max-width: 1180px; margin: clamp(34px, 5vh, 64px) auto clamp(18px, 2.6vh, 28px);
  padding: 0 clamp(24px, 6vw, 92px);
}
.es-strip-hint {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.24em;
  font-size: 9.5px; color: var(--gold-700); white-space: nowrap;
}
.es-strip-nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 22px); }
.es-strip-count {
  font-family: var(--font-display); letter-spacing: 0.22em; font-size: 9.5px;
  color: var(--gold-700); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.es-strip-btns { display: flex; gap: 8px; }
.es-strip-btn {
  position: relative;
  width: 38px; height: 38px; border-radius: 50%; background: none; cursor: pointer;
  border: 1px solid var(--es-gold-line); color: var(--gold-700);
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color 0.4s var(--ease-standard), color 0.4s var(--ease-standard), opacity 0.4s var(--ease-standard);
}
/* the ring stays 38px; an invisible expander brings the hit area to 44px.
   inset resolves against the padding box, so the 1px border counts twice. */
.es-strip-btn::before { content: ""; position: absolute; inset: -4px; }
.es-strip-btn svg { width: 15px; height: 15px; display: block; }
.es-strip-btn:hover { border-color: var(--gold-500); color: var(--gold-600); }
.es-strip-btn[disabled] { opacity: 0.3; cursor: default; }
.es-strip {
  display: flex; gap: clamp(16px, 2vw, 30px);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  padding: 0 clamp(24px, 6vw, 92px) 10px;
  scrollbar-width: none; cursor: grab;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6vw, #000 calc(100% - 6vw), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6vw, #000 calc(100% - 6vw), transparent 100%);
}
.es-strip::-webkit-scrollbar { display: none; }
/* how far through the yards you are */
.es-strip-rail { max-width: 1180px; margin: clamp(14px, 2vh, 20px) auto 0; padding: 0 clamp(24px, 6vw, 92px); }
.es-strip-rail > i { display: block; position: relative; height: 1px; background: var(--es-line); }
.es-strip-rail > i::after {
  content: ""; position: absolute; top: 0; left: var(--x, 0%); width: var(--w, 32%); height: 1px;
  background: var(--gold-500);
  transition: left 0.14s linear, width 0.3s var(--ease-standard);
}
.es-strip.is-dragging { cursor: grabbing; }
.es-strip.is-dragging * { pointer-events: none; }
.es-slide { flex: 0 0 auto; scroll-snap-align: center; }
.es-slide .es-fig-frame { height: clamp(300px, 58vh, 560px); }
.es-slide .es-fig-frame img { -webkit-user-drag: none; user-select: none; }
.es-slide--w { width: clamp(420px, 60vw, 780px); }
.es-slide--t { width: clamp(230px, 32vw, 400px); }

/* IV-b — the roast, on espresso */
.es-roast {
  background:
    radial-gradient(120% 80% at 78% 12%, rgba(198, 135, 27, 0.16), transparent 58%),
    linear-gradient(180deg, #2a1810 0%, #1d1109 100%);
  color: var(--parchment);
  padding: clamp(64px, 11vh, 140px) 0 clamp(64px, 11vh, 140px);
  border-top: 1px solid rgba(198, 135, 27, 0.16);
  border-bottom: 1px solid rgba(198, 135, 27, 0.16);
}
.es-roast .es-eyebrow { color: var(--gold-300); }
.es-roast .es-numeral { color: var(--gold-400); opacity: 0.42; }
.es-roast .es-chapter-title { color: #fbf6ea; }
.es-roast .es-chapter-rule { background: rgba(198, 135, 27, 0.34); }
.es-roast .es-lead { color: var(--parchment); }
.es-roast .es-lead .gold { color: var(--gold-300); }
.es-roast .es-body { color: rgba(244, 236, 220, 0.78); }
.es-roast .es-body strong { color: #fbf6ea; }
.es-roast .es-body .gold { color: var(--gold-300); }
.es-roast .es-cap { color: var(--gold-300); }
.es-roast .es-cap em { color: rgba(244, 236, 220, 0.6); }
.es-roast .es-cap-mark { border-right-color: rgba(198, 135, 27, 0.32); }
.es-roast-grid {
  display: grid; grid-template-columns: 1fr 0.86fr; gap: clamp(30px, 5vw, 78px);
  align-items: center; margin-top: clamp(40px, 6vh, 80px);
}
.es-roast-grid .es-fig-frame { aspect-ratio: 1.1 / 1; }
.es-quote { margin: clamp(30px, 4.4vh, 48px) 0 0; }
.es-quote p {
  font-family: var(--font-body); font-style: italic; font-size: clamp(21px, 2.2vw, 31px);
  line-height: 1.44; color: #fbf6ea; margin: 0; max-width: 24em; text-wrap: pretty;
}
.es-quote cite {
  display: block; margin-top: 14px; font-style: normal;
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.24em;
  font-size: 9.5px; color: var(--gold-300);
}

/* ============================================================
   V — THE CUP · navy close
   ============================================================ */
.es-cup {
  background:
    radial-gradient(100% 60% at 50% 0%, rgba(198, 135, 27, 0.14), transparent 62%),
    linear-gradient(180deg, #01143c 0%, #00091f 100%);
  color: var(--parchment);
  padding: clamp(64px, 11vh, 148px) 0 clamp(56px, 9vh, 120px);
}
.es-cup .es-eyebrow { color: var(--gold-300); }
.es-cup .es-numeral { color: var(--gold-400); }
.es-cup .es-chapter-title { color: #fbf6ea; }
.es-cup .es-chapter-rule { background: rgba(198, 135, 27, 0.3); }
.es-cup .es-lead { color: var(--parchment); }
.es-cup .es-lead .em { font-style: italic; }
.es-cup-cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(34px, 5vw, 80px);
  margin-top: clamp(44px, 7vh, 84px);
}
.es-cup-col { border-top: 1px solid rgba(198, 135, 27, 0.34); padding-top: clamp(20px, 2.8vh, 28px); }
.es-cup-est {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.3em;
  font-size: 10px; color: var(--gold-300); margin: 0 0 clamp(18px, 2.6vh, 26px);
}
.es-coffee { padding: clamp(16px, 2.2vh, 22px) 0; border-bottom: 1px solid rgba(198, 135, 27, 0.16); }
.es-coffee:last-child { border-bottom: 0; }
.es-coffee-name {
  font-family: var(--font-display); font-weight: 700; letter-spacing: 0.08em;
  font-size: clamp(20px, 1.9vw, 26px); color: #fbf6ea; margin: 0;
}
.es-coffee-kind {
  font-family: var(--font-body); font-style: italic; font-size: clamp(15px, 1.2vw, 17px);
  color: var(--ivory-400); margin: 6px 0 0;
}
.es-coffee-specs {
  display: flex; flex-wrap: wrap; gap: 16px 34px; margin: 18px 0 0;
}
.es-coffee-specs span { display: flex; flex-direction: column; gap: 5px; }
.es-coffee-specs i {
  font-family: var(--font-display); font-style: normal; text-transform: uppercase;
  letter-spacing: 0.2em; font-size: 8.5px; color: rgba(239, 217, 166, 0.55);
}
.es-coffee-specs b {
  font-family: var(--font-body); font-weight: 400; font-size: clamp(15px, 1.2vw, 17px);
  letter-spacing: 0.01em; color: var(--gold-300); white-space: nowrap;
}
.es-cup-close {
  margin-top: clamp(48px, 8vh, 100px); padding-top: clamp(30px, 4.4vh, 48px);
  border-top: 1px solid rgba(198, 135, 27, 0.2); text-align: center;
}
.es-cup-close p {
  font-family: var(--font-body); font-style: italic; font-size: clamp(19px, 1.9vw, 26px);
  line-height: 1.5; color: var(--parchment); margin: 0 auto; max-width: 26em; text-wrap: pretty;
}
.es-cta { margin-top: clamp(28px, 4vh, 44px); display: flex; justify-content: center; }
.es-btn {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.24em;
  font-size: 11px; color: #0d0a04; text-decoration: none;
  background: linear-gradient(180deg, var(--gold-400), var(--gold-600));
  padding: 16px 30px; min-height: 44px;
  transition: transform 0.45s var(--ease-standard), box-shadow 0.45s var(--ease-standard), filter 0.45s var(--ease-standard);
}
.es-btn .arrow { transition: transform 0.45s var(--ease-standard); }
.es-btn:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 18px 40px -18px rgba(198, 135, 27, 0.6); }
.es-btn:hover .arrow { transform: translateX(4px); }

/* ============================================================
   Scroll reveal — visible by default; the hidden state only
   engages once JS marks .es-js, so a script failure is harmless.
   ============================================================ */
.es-js .es-reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity 1.1s var(--ease-entrance), transform 1.1s var(--ease-entrance);
  will-change: opacity, transform;
}
.es-js .es-reveal.in { opacity: 1; transform: none; }
.es-js .es-reveal.d1 { transition-delay: 0.12s; }
.es-js .es-reveal.d2 { transition-delay: 0.24s; }
.es-js .es-reveal.d3 { transition-delay: 0.36s; }
/* photographic curtain — plates wipe up rather than slide */
.es-js .es-curtain .es-fig-frame {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.5s var(--ease-entrance);
}
.es-js .es-curtain.in .es-fig-frame { clip-path: inset(0 0 0 0); }
.es-js .es-curtain .es-cap { opacity: 0; transition: opacity 0.9s var(--ease-standard) 0.5s; }
.es-js .es-curtain.in .es-cap { opacity: 1; }

/* ============================================================
   Responsive
   ============================================================ */
/* The rail is fixed to the viewport edge while the chapters sit in a centred
   1180px column, so it only clears that column once the gutter is wide enough.
   Clearance ≈ 0.536 × layout-width − 727, so 24px of gutter needs ~1400px of
   layout width — and the query is matched against the viewport *including* the
   scrollbar, which layout excludes, so allow ~17px more. Below this the active
   chapter label was drawn straight through the body copy.
   (Full-bleed photography is deliberately overlaid — that is the design.) */
@media (max-width: 1420px) { .es-rail { display: none; } }
@media (max-width: 900px) {
  .es-land-grid > .es-curtain { margin-top: 0; position: static; }
  .es-land-grid, .es-hands-hero, .es-roast-grid, .es-cup-cols { grid-template-columns: 1fr; }
  .es-land-grid, .es-hands-hero, .es-roast-grid { gap: clamp(26px, 5vh, 40px); }
  .es-cup-cols { gap: clamp(32px, 5vh, 44px); }
  .es-hands-hero .es-pull-wrap { order: -1; }
  .es-trio { grid-template-columns: 1fr; }
  .es-dossier { margin-top: clamp(-72px, -8vh, -40px); width: 100%; }
  .es-estate-band .es-fig-frame { height: clamp(340px, 56vh, 480px); }
  .es-bleed .es-fig-frame { height: clamp(320px, 52vh, 460px); }
  .es-estate-band::after,
  .es-estate--right .es-estate-band::after {
    background: linear-gradient(180deg, rgba(12, 8, 3, 0.34) 0%, rgba(12, 8, 3, 0) 52%);
  }
}
@media (max-width: 680px) {
  .es-strip-head { align-items: baseline; gap: 14px; }
  .es-strip-hint { flex-wrap: wrap; gap: 4px 8px; white-space: normal; }
  .es-strip-btns { display: none; }
  .es-slide--w { width: min(84vw, 520px); }
  .es-slide--t { width: min(58vw, 300px); }
  .es-slide .es-fig-frame { height: clamp(280px, 46vh, 420px); }
}

@media (prefers-reduced-motion: reduce) {
  .es-js .es-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .es-js .es-curtain .es-fig-frame { clip-path: none !important; transition: none !important; }
  .es-js .es-curtain .es-cap { opacity: 1 !important; }
  .es-threshold-media img, .es-fig-frame img { transform: scale(1.02) !important; }
  .es-strip { scroll-behavior: auto; }
}

/* ============================================================
   Focus rings — parity with the rest of the site
   (the nav / cart / footer rings come from the shared chrome)
   ============================================================ */
.es-rail-item:focus-visible { outline: 1px solid var(--gold-500); outline-offset: 4px; }
.es-scrollcue:focus-visible { outline: 1px solid var(--gold-300); outline-offset: 4px; color: var(--gold-300); }
.es-strip-btn:focus-visible { outline: 1px solid var(--gold-500); outline-offset: 3px; }
.es-strip:focus-visible { outline: 1px solid var(--es-gold-line); outline-offset: 4px; }
.es-btn:focus-visible { outline: 2px solid #fbf6ea; outline-offset: 4px; }

/* captions stack rather than crush on the narrowest phones */
@media (max-width: 440px) {
  .es-cap { grid-template-columns: 1fr; gap: 5px 0; }
  .es-cap-mark { border-right: 0; padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .es-strip-rail > i::after { transition: none; }
}

/* ============================================================
   PHONE LAYER (≤680px) — the estate half of the kit's shared
   mobile.css, folded in here because the theme has no mobile.css.
   It is an override layer, so it stays LAST in this file.
   ============================================================ */
@media (max-width: 680px) {
  /* The kit slims its nav to 58px on scroll; the theme's nav stays 74px on
     every viewport, so the threshold subtracts the height it actually has. */
  .es-threshold { height: calc(92svh - 74px); min-height: 460px; }
  .es-threshold-title { font-size: clamp(38px, 11vw, 52px); }
  .es-threshold-sub { font-size: 17.5px; }
  .es-threshold-foot { letter-spacing: 0.2em; font-size: 10.5px; }
  .es-chapter { padding-top: 62px; }
  .es-lead { font-size: 21px; line-height: 1.46; }
  .es-body { font-size: 17.5px; line-height: 1.7; }
  .es-pull { font-size: 23px; line-height: 1.4; }
  .es-fact { grid-template-columns: 1fr; gap: 6px 0; padding: 15px 0; }
  .es-fact dt { padding-top: 0; font-size: 10px; }
  .es-fact dd { font-size: 16.5px; }
  .es-aside p { font-size: 18px; }
  .es-dossier { padding: 26px 22px 28px; }
  .es-dossier-note { font-size: 17px; line-height: 1.68; }
  .es-spec { padding: 11px 0; }
  .es-spec dt { font-size: 10px; }
  .es-spec dd { font-size: 16px; }
  .es-cap em { font-size: 14.5px; }
  .es-strip-count { font-size: 10px; }
  .es-quote p { font-size: 21px; }
  .es-coffee-specs { gap: 14px 26px; }
  .es-coffee-specs i { font-size: 9.5px; }
  .es-coffee-specs b { font-size: 16px; }
  .es-cup-close p { font-size: 19px; }
  .es-cta .es-btn { width: min(100%, 340px); justify-content: center; }

  /* shorter reveal travel so a long page assembles faster on phones */
  .es-js .es-reveal { transform: translateY(14px); transition-duration: 0.8s; }
  /* primary action feels physical under a thumb */
  .es-btn:active { transform: scale(0.975); }
}
@media (max-width: 680px) and (prefers-reduced-motion: reduce) {
  .es-js .es-reveal { transform: none; }
}