/* ==========================================================================
   JANET TRAVEL — EDITORIAL & DESTINATION PAGES

   Replaces the blog-template look on every guide and destination page with
   one system: a cinematic opening, editorial measure, photography breaks,
   a Janet note taken from the page's own words, a real deal and related
   destinations.

   Two hero variants, chosen by the assets that actually exist:
     .dhero  destination — split composition around a portrait photograph
             (the destination library is 900x1200; stretching that across a
             1440px band would upscale it 1.6x and go soft)
     .ghero  guide — full-bleed landscape plate at native width

   Loaded after janet_ds.css, so it wins on order for equal specificity.
   ========================================================================== */

.ed {
  --ed-cream:   #FDF8F1;
  --ed-sand:    #F5EBDC;
  --ed-ink:     #241A13;
  --ed-ink-2:   #4A3728;
  --ed-mute:    #7B6553;
  --ed-coral:   #E8613C;
  --ed-coral-t: #BF4423;   /* 4.9:1 on cream — anything small or filled */
  --ed-line:    rgba(122, 84, 52, .18);
  --ed-measure: 62ch;
}

/* These pages ship their own `main { max-width: 760px; margin: auto }` from
   the blog template. A cinematic hero cannot live inside a 760px column, so
   the built pages hand width back to the sections and the reading measure is
   re-imposed on .ed-body alone, where it belongs. */
body[data-ed-built] > main,
body[data-ed-built] main {
  max-width: none;
  width: auto;
  margin: 0;
  padding: 0;
}

/* == SHARED HERO FURNITURE ================================================ */

.dhero, .ghero {
  position: relative;
  isolation: isolate;
  background: var(--ed-cream);
  overflow: hidden;
}

.dhero__crumb, .ghero__crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--ed-mute);
  margin-bottom: 18px;
}

.dhero__crumb a, .ghero__crumb a { color: var(--ed-coral-t); text-decoration: none; }
.dhero__crumb a:hover, .ghero__crumb a:hover { text-decoration: underline; }

.dhero h1, .ghero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  /* Tight tracking and compressed leading is what makes large display type
     read as a masthead rather than as a big paragraph. */
  font-size: clamp(2.3rem, 5.2vw, 4.1rem);
  line-height: 1.02;
  letter-spacing: -.035em;
  color: var(--ed-ink);
  margin: 0 0 18px;
  text-wrap: balance;
}

.dhero__lead, .ghero__lead {
  font-size: clamp(1.04rem, 1.35vw, 1.24rem);
  line-height: 1.6;
  font-weight: 500;
  color: var(--ed-ink-2);
  max-width: 46ch;
  margin: 0 0 26px;
}

.dhero__meta, .ghero__meta {
  font-size: .8rem;
  font-weight: 600;
  color: var(--ed-mute);
  margin: 0 0 22px;
}

/* == DESTINATION HERO — cinematic bleed ===================================
   One hero language with .ghero, arrived at without going soft.

   Three versions were tried. A rounded photo card floating on beige read as a
   different component from the guide hero. A true full-bleed cover stretched
   the 900x1200 destination photograph across 1440px — a 1.6x upscale, visible
   as mush in sky and stone. This is the third: the picture bleeds off the
   inline-end edge at roughly its native width and dissolves into the cream
   the headline sits on, so the composition is cinematic and the photograph is
   still a photograph.
   ======================================================================== */

.dhero {
  min-height: clamp(520px, 72vh, 700px);
  display: grid;
  align-items: center;
  background: linear-gradient(120deg, #FDF8F1 0%, #FBF2E6 46%, #F7E9D6 100%);
}

.dhero__figure {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  /* 56% of 1440 is 806px against a 900px source, so the crop is still a
     downscale. It was 62%, which put the picture under the left end of a long
     headline: Barcelona's runs to 44 characters and its glyphs landed on the
     aerial at 2.36:1 while Rome's shorter one cleared comfortably. The frame is
     sized for the longest headline, not the one that happened to be checked. */
  width: clamp(48%, 56%, 60%);
  margin: 0;
  border-radius: 0;
  aspect-ratio: auto;
  overflow: hidden;
  box-shadow: none;
  z-index: 0;
}

.dhero__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  display: block;
}

/* Two layers, split by what they depend on.
   ::before is the horizontal dissolve into the page, and it is the only part
   that depends on writing direction.
   ::after carries the direction-agnostic bands. Keeping them in one rule meant
   the :dir(rtl) override replaced the whole background and silently dropped the
   top band — which is why the destination nav still measured 3.78:1 after the
   band was added. */
.dhero__figure::before,
.dhero__figure::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: none;
  /* The picture carries .m-mask, whose transform promotes the <img> into its
     own stacking context. A positioned pseudo-element with auto z-index then
     paints in the same layer, and DOM order puts the image on top — so both
     scrims were being drawn underneath the photograph and had no effect at all.
     An explicit layer is what actually puts them over it. */
  z-index: 2;
}

/* The dissolve runs toward the edge the copy meets, so the text side is fully
   cream before a headline can reach it.

   These two were inverted. `to left` puts its 100% stop at the LEFT edge, so in
   RTL — where the picture is on the left and the copy on the right — the cream
   was being painted onto the far edge of the photograph while the edge under
   the headline stayed fully opaque. Barcelona's headline is the longest on the
   site and sat at 2.39:1 on the aerial because of it; the shorter ones cleared
   only because they never reached that far. */
.dhero__figure::before {
  background: linear-gradient(to left, rgba(253, 248, 241, 0) 42%, rgba(253, 248, 241, .72) 74%, rgba(253, 248, 241, 1) 100%);
}

.dhero__figure:dir(rtl)::before {
  background: linear-gradient(to right, rgba(253, 248, 241, 0) 42%, rgba(253, 248, 241, .72) 74%, rgba(253, 248, 241, 1) 100%);
}

/* The nav on a destination page keeps its ink colour, because half the bar sits
   over cream. Ink over a bright sky measured 3.78:1, so the top of the picture
   is LIGHTENED toward the page colour rather than darkened — the opposite of
   what a guide hero needs, for the opposite reason. */
.dhero__figure::after {
  background:
    linear-gradient(to bottom, rgba(253, 248, 241, .92) 0%, rgba(253, 248, 241, .5) 8%, rgba(253, 248, 241, 0) 17%),
    linear-gradient(to top, rgba(36, 20, 8, .5) 0%, rgba(36, 20, 8, 0) 46%);
}

.dhero__inner {
  position: relative;
  z-index: 2;
  max-width: 1320px;
  width: 100%;
  margin-inline: auto;
  padding: clamp(104px, 13vh, 150px) clamp(18px, 4vw, 46px) clamp(46px, 6vh, 74px);
  display: block;
}

.dhero__copy { position: relative; z-index: 2; max-width: min(50%, 600px); }

.dhero__glow {
  position: absolute;
  z-index: 1;
  inset-inline-end: 22%;
  top: 6%;
  width: 46%;
  height: 78%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 214, 164, .42), rgba(255, 214, 164, 0) 70%);
  filter: blur(24px);
}

/* == GUIDE HERO — full-bleed plate ======================================== */

.ghero { min-height: clamp(420px, 62vh, 620px); display: grid; }

.ghero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }

.ghero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The text sits on the picture, so it gets a real scrim rather than a
   text-shadow — a shadow under 40px type on a bright sky is not legible. */
.ghero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Measured, not guessed. At .12 across the top band the navigation read
     1.82:1 against a bright plate and the headline 2.52:1. The top band now
     carries its own scrim for the bar, and the body of the gradient is deep
     enough that the worst pixel under the headline still clears AA. */
  background:
    linear-gradient(to bottom, rgba(20, 11, 4, .62) 0%, rgba(20, 11, 4, .18) 16%, rgba(20, 11, 4, 0) 26%),
    linear-gradient(to top, rgba(20, 11, 4, .94) 6%, rgba(20, 11, 4, .8) 34%, rgba(20, 11, 4, .55) 62%, rgba(20, 11, 4, .3) 100%),
    linear-gradient(to left, rgba(20, 11, 4, .5), rgba(20, 11, 4, 0) 62%);
}

.ghero__inner {
  align-self: end;
  max-width: 1320px;
  width: 100%;
  margin-inline: auto;
  padding: clamp(120px, 16vh, 190px) clamp(18px, 4vw, 46px) clamp(38px, 5vh, 60px);
}

.ghero h1 { color: #FFF7EE; max-width: 20ch; }
.ghero__lead { color: rgba(255, 240, 224, .9); max-width: 52ch; }
.ghero__meta { color: rgba(255, 235, 214, .74); }
.ghero__crumb { color: rgba(255, 235, 214, .78); }
.ghero__crumb a { color: #FFD9C4; }

/* == QUICK FACTS ========================================================== */

.dfacts {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
}

.dfacts li {
  padding: 13px 15px;
  border-radius: 15px;
  background: linear-gradient(168deg, rgba(255, 255, 254, .96), rgba(255, 246, 235, .86));
  border: 1px solid var(--ed-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}

.dfacts b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.16rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ed-ink);
  font-variant-numeric: tabular-nums;
}

.dfacts span {
  display: block;
  margin-top: 2px;
  font-size: .74rem;
  font-weight: 700;
  color: var(--ed-mute);
}

/* A fact with no measurement behind it says so, at a smaller weight, rather
   than showing a plausible number. */
.dfacts b[data-empty] { font-size: .92rem; font-weight: 700; color: var(--ed-mute); }

.ghero .dfacts li {
  background: rgba(28, 16, 8, .42);
  border-color: rgba(255, 232, 206, .26);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: none;
}
.ghero .dfacts b { color: #FFF7EE; }
.ghero .dfacts span { color: rgba(255, 235, 214, .8); }

/* == ARTICLE BODY ========================================================= */

.ed-body {
  max-width: var(--ed-measure);
  margin-inline: auto;
  padding: clamp(40px, 6vw, 76px) clamp(18px, 4vw, 46px);
  font-size: 1.06rem;
  line-height: 1.78;
  color: var(--ed-ink-2);
  /* The blog template centred its body copy. Centred running text has no
     consistent edge for the eye to return to, which is why nothing that is
     actually meant to be read is set that way. */
  text-align: start;
}

.ed-body h2, .ed-body h3, .ed-body p, .ed-body ul, .ed-body ol,
.ed-body .eyebrow, .ed-body .sec-sub { text-align: start; }

.ed-body h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -.026em;
  line-height: 1.14;
  color: var(--ed-ink);
  margin: clamp(44px, 5vw, 68px) 0 14px;
}

.ed-body h3 {
  font-family: var(--font-display);
  font-size: 1.24rem;
  font-weight: 800;
  color: var(--ed-ink);
  margin: 34px 0 10px;
}

.ed-body p  { margin: 0 0 18px; }
.ed-body ul, .ed-body ol { margin: 0 0 22px; padding-inline-start: 1.3em; }
.ed-body li { margin-bottom: 9px; }
.ed-body strong, .ed-body b { color: var(--ed-ink); font-weight: 800; }
.ed-body a { color: var(--ed-coral-t); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }

/* The first paragraph after the hero carries the article in. */
.ed-body > p:first-of-type {
  font-size: 1.16rem;
  line-height: 1.68;
  color: var(--ed-ink);
}

/* == FULL-WIDTH PHOTOGRAPHY BREAK ========================================= */

.ed-break {
  position: relative;
  /* Breaks out of the reading measure to the full page width. */
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  height: clamp(280px, 44vh, 460px);
  overflow: hidden;
  margin-block: clamp(40px, 6vw, 72px);
}

.ed-break img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ed-break figcaption {
  position: absolute;
  inset-inline-start: clamp(18px, 4vw, 46px);
  bottom: 18px;
  max-width: 46ch;
  font-size: .82rem;
  font-weight: 600;
  color: rgba(255, 240, 224, .92);
  text-shadow: 0 2px 14px rgba(24, 13, 6, .8);
}

.ed-break::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(24, 13, 6, .7), rgba(24, 13, 6, 0) 52%);
}

/* == JANET NOTE =========================================================== */

/* Janet appears where she has something to say, not as page furniture. The
   text inside is lifted from the article itself — see build_editorial_pages.js
   — so this module can never make a claim the page does not already make. */
.jnote {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(16px, 2.4vw, 26px);
  align-items: center;
  margin-block: clamp(36px, 5vw, 56px);
  padding: clamp(20px, 2.6vw, 28px);
  border-radius: clamp(20px, 2.4vw, 26px);
  background: linear-gradient(158deg, #FFFDF9 0%, #FBEFE0 100%);
  border: 1px solid var(--ed-line);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 26px 50px -34px rgba(88, 52, 26, .5);
}

.jnote__art {
  width: clamp(74px, 9vw, 104px);
  border-radius: 999px;
  overflow: hidden;
  flex-shrink: 0;
  aspect-ratio: 1;
  background: #F5E7D6;
  box-shadow: 0 12px 26px -16px rgba(88, 52, 26, .6);
}

.jnote__art img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; }

.jnote__kicker {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .16em;
  color: var(--ed-coral-t);
  margin: 0 0 6px;
}

.jnote__text {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.6;
  font-weight: 600;
  color: var(--ed-ink);
}

/* == RELATED DESTINATIONS ================================================= */

.ed-rel {
  padding: clamp(44px, 6vw, 76px) clamp(18px, 4vw, 46px) clamp(56px, 7vw, 90px);
  background: var(--ed-sand);
}

.ed-rel__inner { max-width: 1320px; margin-inline: auto; }

.ed-rel h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -.026em;
  color: var(--ed-ink);
  margin: 0 0 6px;
}

.ed-rel__sub { font-size: .94rem; color: var(--ed-mute); margin: 0 0 26px; }

.ed-rel__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
}

.relc { position: relative; }

.relc a {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  background: #241811;
  box-shadow: 0 2px 6px -3px rgba(88, 52, 26, .3), 0 26px 46px -28px rgba(88, 52, 26, .55);
  transition: transform var(--m-mid, .42s) var(--m-ease, ease), box-shadow var(--m-mid, .42s) var(--m-ease, ease);
}

.relc a:hover { transform: translateY(-6px); box-shadow: 0 4px 10px -4px rgba(88, 52, 26, .34), 0 38px 62px -30px rgba(88, 52, 26, .6); }

.relc img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  transition: transform .6s var(--m-ease-out, ease);
}

.relc a:hover img { transform: scale(1.05); }

.relc a::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Same measurement, same answer as the homepage gallery cards: the white city
     name sat at 3.88:1 over a pale roofscape. The label area needs the scrim to
     be nearly solid, not merely present. */
  background: linear-gradient(to top, rgba(20, 11, 4, .95) 2%, rgba(20, 11, 4, .84) 28%, rgba(20, 11, 4, .44) 50%, rgba(20, 11, 4, 0) 74%);
}

.relc__body { position: absolute; inset-inline: 0; bottom: 0; z-index: 2; padding: 16px 17px; display: grid; gap: 7px; }

.relc__city {
  font-family: var(--font-display);
  font-size: 1.14rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #FFF7EE;
}

.relc__price {
  justify-self: start;
  padding: 7px 13px;
  border-radius: 12px;
  background: rgba(255, 253, 250, .99);
  color: var(--ed-ink);
  font-size: .96rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.relc__price small { display: block; font-size: .62rem; font-weight: 700; color: #6B563F; }
.relc__price[data-empty] { font-size: .82rem; font-weight: 700; color: #6B563F; background: rgba(255, 253, 250, .97); }

/* == RESPONSIVE =========================================================== */

/* This block is what remains of the retired split composition's mobile rules.
   Its `.dhero__figure { aspect-ratio: 16/11 }` survived the rewrite and capped
   the picture at 268px on a 390px screen while the hero grew to 872px — so the
   lead, the byline and the facts fell off the bottom of the image onto cream,
   still wearing the light-on-photo colours. The figure now fills the hero, and
   only the rules that still describe something keep their place here. */
@media (max-width: 900px) {
  .dhero__inner { padding-top: clamp(84px, 11vh, 110px); }
  .dhero__figure img { object-position: center 40%; }
  .ghero { min-height: clamp(400px, 70vh, 560px); }
  .ed-body { font-size: 1.02rem; }
  .jnote { grid-template-columns: minmax(0, 1fr); text-align: start; }
  .jnote__art { width: 68px; }
}

@media (max-width: 520px) {
  .dfacts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ed-break { height: clamp(220px, 34vh, 300px); }
}

/* == TOUCH TARGETS (editorial-only selectors) =============================
   The site-wide floor lives in janet_ds.css; these two are specific to the
   hero breadcrumb. */
.dhero__crumb a,
.ghero__crumb a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 4px;
}

.dhero__crumb, .ghero__crumb { margin-bottom: 8px; }

/* == INTERNAL-PAGE NAV ====================================================
   Merged in from the parallel session's janet_pages.css, which is now gone.
   Internal pages get the homepage's navigation instead of a lone back-to-guides
   pill: transparent and light while it sits over the hero image, frosted cream
   once the reader has scrolled past it. State classes come from janet_motion.js.
   ======================================================================== */

.ed .bar {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.8vw, 26px);
  min-height: 68px;
  padding-inline: clamp(16px, 3.2vw, 46px);
  background: transparent;
  border-bottom: 1px solid transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: background .4s var(--m-ease, ease), border-color .4s var(--m-ease, ease),
              color .4s var(--m-ease, ease), box-shadow .4s var(--m-ease, ease);
}

.ed .bar.is-stuck {
  background: rgba(253, 248, 241, .88);
  border-bottom-color: var(--ed-line);
  -webkit-backdrop-filter: blur(20px) saturate(1.25);
  backdrop-filter: blur(20px) saturate(1.25);
  box-shadow: 0 10px 30px -24px rgba(88, 52, 26, .55);
}

/* Light type over the picture — but only where the picture actually runs the
   full width. The destination hero is a bleed, not a cover: its inline-end half
   is cream, so a bar set to #FFF7EE across the whole width put white links and
   a white wordmark onto cream. janet_motion.js only sets this class when the
   hero underneath is a full-bleed .ghero. */
.ed .bar.is-over-media:not(.is-stuck),
.ed .bar.is-over-media:not(.is-stuck) .logo,
.ed .bar.is-over-media:not(.is-stuck) .jp-nav a { color: #FFF7EE; }
.ed .bar.is-over-media:not(.is-stuck) .jp-nav a::after { background: #FFD9C4; }

/* == PAGE SURFACE =========================================================
   Every internal page defines its own --paper in an inline <style>, and on
   these it resolves to #F7F9FC — a cool blue-grey under a warm cream site.
   The token belongs to those pages, so the surface is set here directly.
   ======================================================================== */

body.ed { background: var(--ed-cream); }

.ed .logo { color: var(--ed-ink); gap: 9px; min-height: 44px; align-items: center; display: inline-flex; }
.ed .logo-badge { width: 0; height: 0; overflow: hidden; opacity: 0; margin: 0; }

.ed .logo-name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  font-style: italic;
  letter-spacing: -.02em;
  line-height: 1;
}

.ed .logo-name small {
  display: block;
  font-family: var(--font);
  font-size: .48rem;
  font-weight: 700;
  font-style: normal;
  letter-spacing: .3em;
  margin-top: 3px;
  opacity: .8;
}

.ed .jp-nav { display: flex; gap: clamp(2px, .7vw, 12px); margin-inline: auto; }

.ed .jp-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 12px;
  font-size: .92rem;
  font-weight: 600;
  color: var(--ed-ink-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color .22s var(--m-ease, ease);
}

.ed .jp-nav a::after {
  content: '';
  position: absolute;
  inset-inline: 12px;
  bottom: 6px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--ed-coral);
  transform: scaleX(0);
  transform-origin: inline-end;
  transition: transform .3s var(--m-ease, ease);
}

.ed .jp-nav a:hover::after, .ed .jp-nav a:focus-visible::after { transform: scaleX(1); transform-origin: inline-start; }

.ed .bar-cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 19px;
  border-radius: 999px;
  font-size: .88rem;
  font-weight: 700;
  text-decoration: none;
  flex-shrink: 0;
  background: rgba(255, 252, 247, .82);
  color: var(--ed-ink);
  border: 1px solid var(--ed-line);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  transition: transform .22s var(--m-ease, ease), background .22s var(--m-ease, ease);
}

.ed .bar-cta:hover { transform: translateY(-1px); background: #fff; }

@media (max-width: 900px) { .ed .jp-nav { display: none; } }

/* == FACTS BAR INSIDE THE HERO ============================================
   Also merged: on a destination hero the facts read better as one divided bar
   than as four separate tiles.
   ======================================================================== */

.dhero .dfacts {
  margin-top: clamp(20px, 3vh, 30px);
  gap: 0;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(168deg, rgba(255, 255, 254, .985), rgba(255, 248, 240, .97));
  border: 1px solid var(--ed-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 22px 44px -30px rgba(88, 52, 26, .5);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.dhero .dfacts li {
  background: none;
  border: 0;
  border-inline-start: 1px solid var(--ed-line);
  box-shadow: none;
  border-radius: 0;
  padding: 14px 16px;
}

.dhero .dfacts li:first-child { border-inline-start: 0; }

/* == PRICE DISCLOSURE =====================================================
   The build injects this notice with an inline yellow style. It is a real and
   necessary disclosure, so it stays — it just stops looking like a browser
   validation warning dropped onto a cream page.
   ======================================================================== */

.ed [style*="#fff3cd"] {
  background: linear-gradient(168deg, #FFF9EF, #FCEFDA) !important;   /* [inline] */
  border: 1px solid rgba(198, 150, 78, .38) !important;               /* [inline] */
  border-radius: 16px !important;                                     /* [inline] */
  color: #5A4526 !important;                                          /* [inline] */
  padding: 14px 18px !important;                                      /* [inline] */
  max-width: var(--ed-measure);
  margin-inline: auto !important;                                     /* [inline] */
  font-size: .84rem !important;                                       /* [inline] */
  line-height: 1.6;
}

.ed [style*="#fff3cd"] strong { color: #4E3610; font-weight: 800; }

/* == SECTION RHYTHM ======================================================= */

.ed .sec { padding-block: clamp(34px, 5vw, 64px); }
.ed .sec + .sec { padding-top: 0; }
.ed .ed-body > *:last-child { margin-bottom: 0; }

/* == RELATED CARD MOTION ================================================== */

.ed .ed-rel a:hover { transform: translateY(-7px); box-shadow: 0 30px 54px -28px rgba(58, 34, 16, .6); }

/* == COLOUR CORRECTIONS CARRIED FROM THE HOMEPAGE =========================
   Brand coral is 3.20:1 under near-white text. Anything filled uses the deeper
   one on internal pages too, so they cannot drift back.
   ======================================================================== */

.ed .tp-btn:not(.link-unavailable):not([aria-disabled="true"]),
.ed .cta .btn,
.ed .btn-coral { background: var(--ed-coral-t); color: #FFF8F1; }

/* == HERO ENTRANCE ======================================================== */

@media (prefers-reduced-motion: no-preference) {
  html.js .dhero__crumb, html.js .dhero h1, html.js .dhero__lead,
  html.js .dhero__meta, html.js .dhero .dfacts,
  html.js .ghero__crumb, html.js .ghero h1, html.js .ghero__lead,
  html.js .ghero__meta, html.js .ghero .dfacts { animation: ed-rise .95s var(--m-ease-out, ease) both; }

  html.js .dhero__crumb, html.js .ghero__crumb { animation-delay: .05s; }
  html.js .dhero h1, html.js .ghero h1 { animation-delay: .14s; }
  html.js .dhero__lead, html.js .ghero__lead { animation-delay: .24s; }
  html.js .dhero__meta, html.js .ghero__meta { animation-delay: .32s; }
  html.js .dhero .dfacts, html.js .ghero .dfacts { animation-delay: .4s; }
}

@keyframes ed-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

/* == MOBILE =============================================================== */

@media (max-width: 900px) {
  .dhero { min-height: clamp(440px, 68vh, 600px); }
  /* The picture goes behind the whole hero on a phone; there is no room for a
     side-by-side, and a 52% panel would be a stripe. inset-block:0 is restated
     because the retired split rules had given this box an aspect-ratio. */
  .dhero__figure { width: 100%; inset-block: 0; aspect-ratio: auto; height: auto; }
  .dhero__figure::before, .dhero__figure:dir(rtl)::before { background: none; }
  /* The byline sits at roughly the midpoint of this ramp. At .55 there it
     measured 4.30:1 against a mid-tone sky — and at that background even pure
     white only reaches 4.69, so the fix has to be the scrim, not the ink. */
  .dhero__figure::after,
  .dhero__figure:dir(rtl)::after {
    background:
      /* The bar sits over the picture at these widths, so the top needs its own
         band — the wordmark's subtitle measured 3.89:1 against a blue-hour sky,
         where even pure white would only have reached 4.4. */
      /* The band has to cover the breadcrumb as well as the bar. At .2 by 13%
         the crumb links measured 3.23:1 over a busy aerial, and lightening the
         ink could not reach 4.5 from there — pure white would have topped out
         around 3.7. */
      linear-gradient(to bottom, rgba(24, 13, 5, .72) 0%, rgba(24, 13, 5, .6) 12%, rgba(24, 13, 5, .38) 21%, rgba(24, 13, 5, 0) 32%),
      linear-gradient(to top, rgba(24, 13, 5, .94) 10%, rgba(24, 13, 5, .78) 42%, rgba(24, 13, 5, .6) 68%, rgba(24, 13, 5, .34) 100%);
  }
  .dhero__copy { max-width: none; }
  .dhero h1, .dhero__crumb { color: #FFF7EE; }
  .dhero__lead { color: rgba(255, 240, 224, .92); }
  .dhero__meta { color: rgba(255, 238, 220, .95); }
  .dhero__crumb a { color: #FFD9C4; }
  .dhero__glow { display: none; }
  .dhero .dfacts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dhero .dfacts li:nth-child(odd) { border-inline-start: 0; }
  .dhero .dfacts li:nth-child(-n+2) { border-bottom: 1px solid var(--ed-line); }
}

@media (max-width: 430px) {
  .dhero .dfacts { grid-template-columns: minmax(0, 1fr); }
  .dhero .dfacts li { border-inline-start: 0; }
  .dhero .dfacts li:not(:last-child) { border-bottom: 1px solid var(--ed-line); }
}


/* The fact caption measured 4.35:1 against the panel it sits on. --ed-mute is
   right for captions on flat cream; over a translucent panel on photography it
   needs the darker ink. */
.dhero .dfacts span { color: #6B563F; }

/* On a guide hero the wordmark's subtitle is coral over a dark plate — 2.49:1.
   Over media it follows the wordmark and goes light. */
.ed .bar.is-over-media:not(.is-stuck) .logo-name small { color: #FFF3E6; }