/* ============================================================
   Ondrea — editorial home page
   ------------------------------------------------------------
   Loaded ONLY on the front page (see ondrea_assets()), and every
   selector is prefixed .eh- so nothing here can reach another
   template. Shared primitives that already exist — .wrap, .btn,
   .eyebrow, .reveal, .accordion, .wish-btn, .news-form — are
   reused rather than restyled, so the redesign cannot drift from
   the rest of the site or break it.

   Mobile-first: the base block is the phone layout, and the two
   min-width queries add tablet and desktop. There is no desktop
   layout being patched back down.
   ============================================================ */

:root {
  /* Home-only surfaces, derived from the existing brand palette rather
     than introduced alongside it. --cream and --charcoal are untouched. */
  --eh-paper:  color-mix(in srgb, var(--cream) 55%, #ffffff);
  --eh-sand:   color-mix(in srgb, var(--cream) 82%, var(--stone));
  --eh-dark:   #14130F;
  --eh-gut:    clamp(1.25rem, 5vw, 5rem);

  /*
   * The hero's accent word is cream carrying a fifth of --rust, not rust.
   *
   * Rust and the sunlit plaster in that photograph are the same warm mid-tone:
   * against the lightest ground the headline touches (#736555 after the scrim)
   * a 55% rust mix measures 2.36:1, and no ratio of rust to cream clears 3:1,
   * because cream itself only reaches 4.55:1 there. Getting real rust over the
   * line needs an 80% scrim on the left of the frame, which would black out the
   * light shaft the picture is built on. So the accent keeps the warmth it can
   * afford — 3.62:1, visibly warmer than the roman line beside it — and the
   * italic does the rest of the work.
   */
  --eh-accent:  color-mix(in srgb, var(--rust) 20%, var(--cream));
}

/* ---------- shared primitives ---------- */

.eh-head__title {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.005em;
  font-size: clamp(2.4rem, 8vw, 4.2rem);
  margin: 0;
  text-wrap: balance;
}

.eh-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--sans);
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--charcoal);
  border-bottom: 1px solid var(--charcoal);
  padding-bottom: 0.35em;
  text-decoration: none;
  transition: opacity var(--dur) var(--ease);
}
.eh-link:hover { opacity: 0.62; }
.eh-link svg { width: 1.15em; height: 1.15em; stroke-width: 1.2; transition: transform var(--dur) var(--ease); }
.eh-link--arrow:hover svg { transform: translateX(3px); }

.eh-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--dot, var(--stone));
  border: 1px solid rgba(31, 31, 29, 0.16);
  display: inline-block;
  flex: none;
}

/* ============================================================
   01 · HERO
   One full-bleed frame at every width.

   The photograph is a 16:9 wall frame — figure at the right, an
   empty lit wall on the left — so it covers a hero of any shape
   without being cropped into nonsense, and the headline gets real
   negative space to sit in.

   It is also dark. The wall measures #54432E in shadow and #90765A
   through the light shaft, which is 1.7:1 and 2.2:1 against
   charcoal — unreadable. So the type here is cream over a scrim,
   which is the reference composition's own polarity. The scrim is
   the lightest one that clears 4.5:1 for cream on the brightest
   part of the shaft; anything heavier and the picture loses the
   light that makes it worth using.
   ============================================================ */

.eh-hero {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: min(92svh, 860px);
  background: var(--eh-dark);
  color: var(--cream);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}

.eh-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.eh-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* A portrait viewport shows only about a quarter of this 2:1 frame, so the
     crop has to be chosen rather than defaulted. 62% suited the previous
     photograph; on this one it sliced the back print in half and left "ONE STE"
     hanging at the right edge. 50% keeps the print out of frame entirely and
     puts the model's face in it instead. */
  object-position: 50% 50%;
  display: block;
}

/*
 * The scrim exists for the type, so it sits where the type sits.
 *
 * On a phone that is the lower half of one column. The light shaft peaks at
 * #D4BA9F unscrimmed, where cream measures 2.75:1 — under the 3:1 floor for
 * display type — so the band the copy occupies is carried to around 60%, and
 * the top of the frame keeps most of its light.
 */
.eh-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--eh-dark) 56%, transparent) 0%,
    color-mix(in srgb, var(--eh-dark) 24%, transparent) 15%,
    color-mix(in srgb, var(--eh-dark) 22%, transparent) 32%,
    color-mix(in srgb, var(--eh-dark) 52%, transparent) 56%,
    color-mix(in srgb, var(--eh-dark) 66%, transparent) 78%,
    color-mix(in srgb, var(--eh-dark) 72%, transparent) 100%
  );
}

.eh-hero__stage,
.eh-hero__foot {
  position: relative;
  z-index: 2;
}

.eh-hero__stage {
  align-self: end;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: calc(var(--header-h) + var(--sp-4)) var(--eh-gut) 0;
}

.eh-hero__eyebrow {
  margin: 0;
  letter-spacing: 0.3em;
  color: color-mix(in srgb, var(--cream) 76%, transparent);
}

.eh-hero__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  font-weight: 300;
  gap: 0;
}
.eh-hero__line {
  display: block;
  font-family: var(--serif);
  font-size: clamp(3.25rem, 19vw, 5.4rem);
  line-height: 0.92;
  letter-spacing: 0.01em;
}
/* The one accented word on the page — see --eh-accent for why it is a warm
   cream rather than rust. Cormorant's italic also sets optically smaller than
   its roman at the same size, hence the step up. */
.eh-hero__line--accent {
  font-family: "Cormorant Garamond Accent", var(--serif);
  font-style: italic;
  color: var(--eh-accent);
  font-size: clamp(3.5rem, 20.5vw, 5.85rem);
}
.eh-hero__stop {
  font-style: normal;
  color: var(--cream);
}

.eh-hero__rule {
  display: block;
  width: 54px;
  height: 1px;
  background: color-mix(in srgb, var(--cream) 48%, transparent);
}

.eh-hero__foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--eh-gut) var(--sp-5);
}
.eh-hero__note {
  margin: 0;
  /* rem, not ch: ch is a glyph metric, so with a ch cap the box itself resized
     when Jost swapped in and the paragraph re-wrapped on both counts. These are
     the measured Jost equivalents of the 42/46/34ch they replace. */
  max-width: 21.25rem;
  font-size: var(--fs-small);
  line-height: 1.7;
  color: color-mix(in srgb, var(--cream) 82%, transparent);
}
.eh-hero__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: min(100%, 21rem);
  gap: var(--sp-2);
}
.eh-hero__actions svg {
  width: 1.05em;
  height: 1.05em;
  stroke-width: 1.2;
  flex: none;
}

/* The buttons invert with the frame: a cream fill and a cream outline, as the
   reference has them. .btn's own charcoal rules would vanish here. */
.eh-hero__actions .btn--solid {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--charcoal);
}
.eh-hero__actions .btn--solid:hover {
  background: color-mix(in srgb, var(--cream) 86%, var(--stone));
  border-color: color-mix(in srgb, var(--cream) 86%, var(--stone));
  color: var(--charcoal);
}
.eh-hero__actions .btn:not(.btn--solid) {
  border-color: color-mix(in srgb, var(--cream) 58%, transparent);
  color: var(--cream);
  background: transparent;
}
.eh-hero__actions .btn:not(.btn--solid):hover {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--charcoal);
}

.eh-hero__cue { display: none; }

/*
 * Short phones. The type block needs a fixed ~460px whatever the viewport, so
 * on a short screen it is the photograph that has to give — at 78% of a 720px
 * frame the chest print rides up into the headline.
 */
@media (max-width: 767.98px) and (max-height: 780px) {
  .eh-hero__line { font-size: clamp(2.75rem, 15vw, 4rem); }
  .eh-hero__line--accent { font-size: clamp(2.95rem, 16.2vw, 4.3rem); }
  .eh-hero__foot { padding-bottom: var(--sp-4); }
}

/* ============================================================
   02 · THE COLLECTION
   ============================================================ */

.eh-collection {
  background: var(--eh-paper);
  padding-block: var(--sp-6);
  overflow: hidden;
}

.eh-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-5);
}
.eh-head .eyebrow { margin-bottom: var(--sp-2); }

/* One card at ~78% of the viewport with the next one peeking, so the
   track reads as scrollable without needing an instruction. */
.eh-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 78%;
  gap: var(--sp-3);
  overflow-x: auto;
  /* proximity, not mandatory. Mandatory obliges the browser to come to rest on
     a card, so a gesture that only grazes the row sideways still triggers a
     snap animation, and while that runs the row keeps the gesture. Proximity
     snaps only when a scroll already ends near a card.
     No scroll-behavior here either: it animated every programmatic and
     snap-driven scroll, which widened the same window. js/home.js passes
     behavior:"smooth" on the arrow buttons, so nothing visible is lost. */
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  /* Bleed to the screen edge so the peek reaches the physical edge. */
  margin-inline: calc(var(--eh-gut) * -1);
  padding-inline: var(--eh-gut);
  padding-bottom: var(--sp-2);
  /* Without this, scroll-snap aligns the first card to the scrollport edge and
     scrolls straight past the start padding — the card ends up flush against
     the window with its left edge clipped. */
  scroll-padding-inline: var(--eh-gut);
}
.eh-track::-webkit-scrollbar { display: none; }
.eh-track > * { scroll-snap-align: start; }
.eh-track:focus-visible { outline: 2px solid var(--charcoal); outline-offset: 4px; }

.eh-card { min-width: 0; }
.eh-card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--cream-2);
  margin-bottom: var(--sp-3);
}
.eh-card__media > a { display: block; height: 100%; }
.eh-card__media img,
.eh-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.1s var(--ease);
}
.eh-card:hover .eh-card__img { transform: scale(1.035); }

.eh-card__wish {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
}

.eh-card__name {
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--fs-h3);
  line-height: 1.18;
  margin: 0 0 0.35rem;
}
.eh-card__name a { color: inherit; text-decoration: none; }
.eh-card__name a:hover { text-decoration: underline; text-underline-offset: 0.18em; }

.eh-card__type,
.eh-card__price {
  font-family: var(--sans);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0;
}
.eh-card__type { color: var(--charcoal-55); }
.eh-card__price { color: var(--charcoal); margin-top: 0.5rem; }
.eh-card__price del { opacity: 0.5; margin-right: 0.4em; }

.eh-card__swatches {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: var(--sp-2) 0 0;
}
.eh-card__more {
  font-size: var(--fs-label);
  color: var(--charcoal-55);
  letter-spacing: 0.08em;
}

.eh-track__nav {
  display: none;
  gap: 0.6rem;
  justify-content: flex-end;
  margin-top: var(--sp-4);
}
.eh-track__nav button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--stone-line);
  background: transparent;
  color: var(--charcoal);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.eh-track__nav button svg { width: 18px; height: 18px; stroke-width: 1.2; }
.eh-track__nav button:hover { background: var(--charcoal); color: var(--cream); border-color: var(--charcoal); }
.eh-track__nav button[disabled] { opacity: 0.3; pointer-events: none; }

/* ============================================================
   03 · WHY ONDREA
   ============================================================ */

.eh-why {
  background: var(--cream);
  padding-block: var(--sp-6);
}
.eh-why__inner { display: grid; gap: var(--sp-5); }
.eh-why__intro .eyebrow { margin-bottom: var(--sp-2); }
.eh-why__intro .eh-head__title { font-size: clamp(2rem, 6vw, 3rem); }

.eh-why__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.eh-why__item {
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--stone-line);
}
.eh-why__item:last-child { border-bottom: 1px solid var(--stone-line); }
.eh-why__icon {
  display: block;
  height: 34px;
  margin-bottom: var(--sp-3);
  color: var(--charcoal);
}
.eh-why__icon svg { width: 30px; height: 30px; stroke-width: 1; }
.eh-why__icon img { width: 30px; height: 30px; object-fit: contain; display: block; }
.eh-why__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--fs-h3);
  margin: 0 0 0.5rem;
  line-height: 1.2;
}
.eh-why__item p {
  margin: 0;
  color: var(--charcoal-70);
  font-size: var(--fs-small);
  line-height: 1.7;
}

/* ============================================================
   04 · MISSION
   ============================================================ */

.eh-mission {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--eh-dark);
  display: grid;
  align-items: center;
  min-height: 62svh;
  padding-block: var(--sp-6);
}
.eh-mission__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: saturate(0.72) brightness(0.62);
}
.eh-mission__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(15, 14, 11, 0.88) 0%,
    rgba(15, 14, 11, 0.62) 45%,
    rgba(15, 14, 11, 0.34) 100%
  );
}
.eh-mission__inner { position: relative; z-index: 2; }
.eh-mission__copy { color: var(--cream); max-width: 34ch; }
.eh-mission__copy .eyebrow { color: color-mix(in srgb, var(--cream) 72%, transparent); margin-bottom: var(--sp-3); }
.eh-mission__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.3rem, 9vw, 4rem);
  line-height: 1.04;
  margin: 0 0 var(--sp-3);
  display: flex;
  flex-direction: column;
}
.eh-mission__body {
  margin: 0;
  color: color-mix(in srgb, var(--cream) 76%, transparent);
  font-size: var(--fs-small);
  line-height: 1.75;
  max-width: 42ch;
}
.eh-mission__mark {
  position: absolute;
  z-index: 1;
  right: -10%;
  bottom: -8%;
  width: min(46vw, 260px);
  height: auto;
  opacity: 0.16;
  pointer-events: none;
}

/* ============================================================
   05 · MADE DIFFERENT
   ============================================================ */

.eh-craft {
  background: var(--eh-paper);
  padding-block: var(--sp-6);
  overflow: hidden;
}
.eh-craft__inner { display: grid; gap: var(--sp-5); }
.eh-craft__intro { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
.eh-craft__intro .eyebrow { margin: 0; }

.eh-craft__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 68%;
  gap: var(--sp-2);
  overflow-x: auto;
  /* proximity, for the same reason as .eh-track above. */
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  margin-inline: calc(var(--eh-gut) * -1);
  padding-inline: var(--eh-gut);
  scroll-padding-inline: var(--eh-gut);
}
.eh-craft__grid::-webkit-scrollbar { display: none; }
.eh-craft__card { scroll-snap-align: start; min-width: 0; }
.eh-craft__media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--cream-2);
  margin-bottom: var(--sp-2);
}
.eh-craft__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eh-craft__num {
  position: absolute;
  left: 10px;
  bottom: 10px;
  background: var(--cream);
  color: var(--charcoal);
  font-family: var(--sans);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  padding: 0.25em 0.5em;
}
.eh-craft__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 1.15rem;
  margin: 0 0 0.2rem;
}
.eh-craft__card p { margin: 0; color: var(--charcoal-55); font-size: var(--fs-small); }

/* ============================================================
   06 · BEFORE YOU BUY
   ============================================================ */

.eh-faq {
  background: var(--cream);
  padding-block: var(--sp-6);
}
.eh-faq__inner { display: grid; gap: var(--sp-5); }
.eh-faq__intro .eyebrow { margin-bottom: var(--sp-2); }
.eh-faq__lede { color: var(--charcoal-70); max-width: 38ch; margin: var(--sp-3) 0 0; }
.eh-faq__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin: var(--sp-4) 0 0;
}
.eh-faq__list { margin-top: 0; }

/* ============================================================
   07 · NEWSLETTER
   ============================================================ */

.eh-news {
  background: var(--eh-sand);
  padding-block: var(--sp-6);
}
.eh-news__inner { display: grid; gap: var(--sp-4); align-items: center; }
.eh-news__copy { display: flex; gap: var(--sp-3); align-items: flex-start; }
.eh-news__icon { color: var(--charcoal); flex: none; }
.eh-news__icon svg { width: 30px; height: 30px; stroke-width: 1; }
.eh-news__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2rem, 7vw, 2.8rem);
  line-height: 1.06;
  margin: 0 0 var(--sp-2);
}
.eh-news__copy p { margin: 0; color: var(--charcoal-70); font-size: var(--fs-small); line-height: 1.7; max-width: 52ch; }

.eh-news__form .news-form {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--charcoal);
  background: transparent;
}
.eh-news__form input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0.95rem 0;
  font-family: var(--sans);
  color: var(--charcoal);
}
.eh-news__form input::placeholder { color: var(--charcoal-55); opacity: 1; }
.eh-news__form input:focus-visible { outline: 2px solid var(--charcoal); outline-offset: 3px; }
.eh-news__form button {
  border: 0;
  background: var(--charcoal);
  color: var(--cream);
  padding: 0 1.6rem;
  min-height: 44px;
  font-family: var(--sans);
  font-size: var(--fs-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity var(--dur) var(--ease);
}
.eh-news__form button:hover { opacity: 0.85; }
.eh-news__form .form-note { margin: var(--sp-2) 0 0; font-size: var(--fs-small); color: var(--charcoal-70); }

/* ---------- stagger, extending the theme's existing reveal ---------- */
.reveal[data-delay="4"] { transition-delay: 360ms; }
.reveal[data-delay="5"] { transition-delay: 450ms; }

/* ============================================================
   TABLET — 768px and up
   ============================================================ */
@media (min-width: 768px) {
  /* Same rule as the phone: the back print is either wholly in frame or wholly
     out of it, never sliced. At this width it cannot be wholly in without
     pushing the model's head out, so it stays out. */
  .eh-hero__media img { object-position: 36% 50%; }

  .eh-hero__line { font-size: clamp(4.5rem, 11vw, 7rem); }
  .eh-hero__line--accent { font-size: clamp(4.85rem, 11.8vw, 7.6rem); }
  .eh-hero__note { max-width: 23.25rem; }
  .eh-hero__actions { flex-direction: row; align-items: center; width: auto; }

  .eh-track { grid-auto-columns: 46%; }
  .eh-craft__grid { grid-auto-columns: 34%; }

  .eh-why__grid { grid-template-columns: 1fr 1fr; column-gap: var(--sp-5); }

  .eh-news__inner { grid-template-columns: 1.15fr 0.85fr; gap: var(--sp-5); }
  .eh-mission__mark { width: min(34vw, 320px); right: -4%; bottom: -6%; }
}

/* Two-up standards rule off as a 2x2 block. Bounded to the tablet range on
   purpose: as an open-ended min-width these nth-child rules outrank the
   desktop reset by specificity and drew a stray box around the second item. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .eh-why__item:nth-child(2) { border-top: 1px solid var(--stone-line); }
  .eh-why__item:nth-child(3),
  .eh-why__item:nth-child(4) { border-bottom: 1px solid var(--stone-line); }
}

/* ============================================================
   DESKTOP — 1024px and up
   The hero opens out and the rows become real grids.
   ============================================================ */
@media (min-width: 1024px) {
  .eh-hero { min-height: min(92svh, 1040px); }

  /* At this width the frame is close to the photograph's own 2:1, so almost
     nothing is cropped and the figure sits where it was shot. */
  .eh-hero__media img { object-position: 50% 50%; }

  /*
   * Two layers rather than one. The copy all lives in the left half now, so
   * that is where the ground gets built; the right half, where the figure and
   * the light shaft are, keeps almost all of its light. The second layer only
   * does the top and bottom edges, for the nav and the foot band.
   */
  .eh-hero::after {
    background:
      linear-gradient(
        to right,
        color-mix(in srgb, var(--eh-dark) 72%, transparent) 0%,
        color-mix(in srgb, var(--eh-dark) 68%, transparent) 30%,
        color-mix(in srgb, var(--eh-dark) 34%, transparent) 56%,
        color-mix(in srgb, var(--eh-dark) 8%, transparent) 72%,
        transparent 86%
      ),
      linear-gradient(
        to bottom,
        color-mix(in srgb, var(--eh-dark) 42%, transparent) 0%,
        transparent 18%,
        transparent 58%,
        color-mix(in srgb, var(--eh-dark) 40%, transparent) 86%,
        color-mix(in srgb, var(--eh-dark) 54%, transparent) 100%
      );
  }

  .eh-hero__stage {
    align-self: center;
    gap: var(--sp-4);
    /*
     * Centred on the empty wall, not on the viewport. The figure occupies from
     * 45% of the frame rightwards at every desktop width — the photograph is
     * 16:9 and the hero covers it with almost no horizontal crop, so that
     * fraction holds — and a viewport-centred line lands on his head. A vw
     * padding tracks the figure instead of guessing at it.
     */
    padding: var(--header-h) 48vw 0 var(--eh-gut);
  }
  .eh-hero__line { font-size: clamp(5rem, 9.4vw, 11rem); }
  .eh-hero__line--accent { font-size: clamp(5.4rem, 10.1vw, 11.8rem); }
  .eh-hero__rule { width: 72px; }

  /*
   * The bottom band: note left, actions centre, scroll cue right. A three
   * column grid with equal outer tracks keeps the buttons optically centred on
   * the frame however long the note runs.
   */
  .eh-hero__foot {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: end;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--eh-gut) clamp(2rem, 4.5vh, 3.25rem);
  }
  .eh-hero__note {
    justify-self: start;
    text-align: left;
    max-width: 17.25rem;
  }
  .eh-hero__actions { justify-content: center; }

  .eh-hero__cue {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    justify-self: end;
    color: color-mix(in srgb, var(--cream) 70%, transparent);
  }
  .eh-hero__cue small {
    font-family: var(--sans);
    font-size: 0.66rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
  }
  /* A line the eye travels down, rather than a mouse pictogram nobody has
     owned in a decade. */
  .eh-hero__cue-line {
    position: relative;
    width: 1px;
    height: 54px;
    background: color-mix(in srgb, var(--cream) 28%, transparent);
    overflow: hidden;
  }
  .eh-hero__cue-line::after {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 1px;
    height: 18px;
    background: var(--cream);
    animation: eh-scroll 2.4s var(--ease) infinite;
  }

  .eh-track {
    /*
     * Not a user-scrollable box at this width.
     *
     * A horizontal scroller under the pointer latches trackpad gestures in
     * Chrome: a flick carrying any sideways component is captured by the row
     * and its vertical part is dropped, so the page stops moving while the
     * cursor is over the products — and on desktop this row is most of the
     * screen. The arrows below drive it instead; scrollLeft and scrollBy still
     * work on a hidden overflow. The craft strip already stops scrolling here
     * for the same reason, so this is the pattern the page already uses.
     */
    overflow-x: hidden;
    scroll-snap-type: none;
    grid-auto-columns: calc((100% - var(--sp-3) * 2) / 3);
    /* No edge bleed once there is room for three across — the track lines up
       with the section heading above it and the arrows handle the overflow. */
    margin-inline: 0;
    padding-inline: 0;
    scroll-padding-inline: 0;
  }
  .eh-track__nav { display: flex; }

  .eh-why__inner { grid-template-columns: 0.95fr 2.6fr; gap: var(--sp-6); align-items: start; }
  .eh-why__grid { grid-template-columns: repeat(4, 1fr); column-gap: 0; }
  .eh-why__item {
    border-top: 0;
    border-bottom: 0 !important;
    border-left: 1px solid var(--stone-line);
    padding: 0 var(--sp-4);
  }
  .eh-why__item:first-child { padding-left: 0; border-left: 0; }

  .eh-mission { min-height: 66svh; }
  .eh-mission__copy { max-width: 46ch; }
  .eh-mission__title { font-size: clamp(3rem, 4.6vw, 4.6rem); }

  .eh-craft__inner { grid-template-columns: 0.9fr 2.7fr; gap: var(--sp-6); align-items: start; }
  .eh-craft__grid {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, 1fr);
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
    gap: var(--sp-3);
  }

  .eh-faq__inner { grid-template-columns: 0.95fr 1.5fr; gap: var(--sp-6); align-items: start; }
  .eh-news__inner { grid-template-columns: 1.2fr 0.8fr; gap: var(--sp-6); }
}

@keyframes eh-scroll {
  0%   { transform: translateY(-18px); opacity: 0; }
  22%  { opacity: 1; }
  78%  { opacity: 1; }
  100% { transform: translateY(54px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .eh-hero__cue-line::after { animation: none; }
  .eh-card__img,
  .eh-link svg { transition: none; }
  .eh-track { scroll-behavior: auto; }
}

/* ============================================================
   HERO ENTRANCE
   Staggered on load. js/home.js adds .is-ready once the session
   loader has finished, so on a first visit the sequence is seen
   rather than played behind the splash.

   Every element that enters carries [data-hero-in], so adding or
   removing a piece of hero furniture never means editing four
   parallel selector lists again. The photograph's entrance is on
   .eh-hero__media (the frame) and the parallax is on the <img>
   inside it, so the two transforms never fight over one element.
   ============================================================ */
.eh-hero [data-hero-in] {
  opacity: 0;
  transform: translateY(16px);
}
.eh-hero__media {
  opacity: 0;
  transform: scale(1.05);
}

.eh-hero.is-ready [data-hero-in] {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s var(--ease), transform 1.05s var(--ease);
}
.eh-hero.is-ready .eh-hero__media {
  opacity: 1;
  transform: none;
  transition: opacity 1.2s var(--ease), transform 1.6s var(--ease);
}

.eh-hero.is-ready .eh-hero__eyebrow              { transition-delay: 0.06s; }
.eh-hero.is-ready .eh-hero__line:nth-of-type(1)  { transition-delay: 0.16s; }
.eh-hero.is-ready .eh-hero__line:nth-of-type(2)  { transition-delay: 0.26s; }
.eh-hero.is-ready .eh-hero__rule                 { transition-delay: 0.38s; }
.eh-hero.is-ready .eh-hero__note                 { transition-delay: 0.5s; }
.eh-hero.is-ready .eh-hero__actions              { transition-delay: 0.58s; }
.eh-hero.is-ready .eh-hero__cue                  { transition-delay: 0.68s; }

/* Failsafe.
   The entrance hides these elements until js/home.js adds .is-ready. If that
   script is blocked, 404s on a bad deploy, or throws, the hero would sit
   permanently blank — the worst failure this page could have. The animation
   below lands on exactly the same values the transition ends on, so in normal
   operation it changes nothing; it only guarantees the copy appears.

   scripting: none covers the deliberate no-JS visitor immediately, rather than
   making them wait out the timeout. */
@keyframes eh-failsafe { to { opacity: 1; transform: none; } }

.eh-hero [data-hero-in],
.eh-hero__media {
  animation: eh-failsafe 0.01s linear 4s forwards;
}

@media (scripting: none) {
  .eh-hero [data-hero-in],
  .eh-hero__media {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .eh-hero [data-hero-in],
  .eh-hero__media {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }
}

/* ============================================================
   HEADER OVER THE HERO
   Scoped to .home only. Everywhere else the header keeps the
   sticky, cream-backed behaviour it already had.

   Fixed rather than sticky so the hero starts at the top of the
   viewport and the photograph runs edge to edge behind the bar,
   as the reference composition does. main.js already toggles
   .is-scrolled past 8px, so the cream ground returns the moment
   the page moves and the nav never sits on unreadable content.
   ============================================================ */
.home .site-header {
  /* Sticky, not fixed. Fixed would take the top edge and sit on top of the
     announcement bar; sticky lets the bar scroll away first and then pins,
     and the hero's negative margin below pulls the photograph up underneath
     the transparent bar so it runs edge to edge as the reference shows. */
  position: sticky;
  top: 0;
  background: transparent;
  border-bottom-color: transparent;
}

/*
 * Over the hero the bar has a dark photograph behind it, so the charcoal mark
 * and links have to invert. Scoped to the un-scrolled state only: main.js adds
 * .is-scrolled past 8px and the cream ground comes back with it, so this is the
 * one state that needs it — and it is scoped to .home, so no other template
 * sees any of it.
 */
.header-mark--light { display: none; }

.home .site-header:not(.is-scrolled) .header-mark--dark { display: none; }
.home .site-header:not(.is-scrolled) .header-mark--light { display: block; }

.home .site-header:not(.is-scrolled) .header-nav a.nav-link {
  color: color-mix(in srgb, var(--cream) 78%, transparent);
}
.home .site-header:not(.is-scrolled) .header-nav a.nav-link:hover,
.home .site-header:not(.is-scrolled) .header-nav a.nav-link[aria-current="page"] { color: var(--cream); }
.home .site-header:not(.is-scrolled) .header-nav a.nav-link[aria-current="page"]::after { background: var(--cream); }

.home .site-header:not(.is-scrolled) .icon-btn { color: var(--cream); }
.home .site-header:not(.is-scrolled) .burger span,
.home .site-header:not(.is-scrolled) .burger span::before,
.home .site-header:not(.is-scrolled) .burger span::after { background: var(--cream); }

/* The focus ring is 2px of --forest sitewide, which measures under 2:1 against
   this photograph. Cream everywhere the frame is dark. */
.home .site-header:not(.is-scrolled) :focus-visible,
.eh-hero :focus-visible { outline-color: var(--cream); }
.home .eh-hero { margin-top: calc(var(--header-h) * -1); }
.home .site-header.is-scrolled {
  background: var(--cream);
  border-bottom-color: var(--stone-line);
}

/* ============================================================
   TOUCH TARGETS
   The text links are 25px tall at their natural size, which is
   fine for a cursor and too small for a thumb. Padding is added
   rather than a border-box height so the underline stays tight
   to the text and the row still reads as editorial.

   Keyed to viewport width rather than (pointer: coarse): the
   pointer query is the more precise signal but is not reported
   by every in-app browser, and this is the same approach the
   rest of the theme already takes.
   ============================================================ */
@media (max-width: 1023.98px) {
  .eh-link {
    min-height: 44px;
    align-items: flex-end;
    padding-bottom: 0.75em;
  }
  .eh-faq__links { gap: var(--sp-2) var(--sp-4); }
  .eh-track__nav button { width: 46px; height: 46px; }

  /* The product image above is already a large link to the same page, but the
     title should not be a 25px-tall target in its own right. Negative margin
     cancels the padding so the hit area grows and the layout does not move. */
  .eh-card__name a {
    display: inline-block;
    padding-block: 0.6rem;
    margin-block: -0.6rem;
  }
}

/* ============================================================
   STORY RAIL
   Fixed to the left margin, tracking the five story sections.
   Desktop only — below 1200px there is no margin to spare, and
   it would sit on top of the copy.
   ============================================================ */
.eh-rail { display: none; }

@media (min-width: 1200px) {
  .eh-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    position: fixed;
    left: clamp(0.9rem, 1.9vw, 1.7rem);
    top: 50%;
    transform: translateY(-50%);
    z-index: 90;
    font-family: var(--sans);
    font-size: var(--fs-label);
    letter-spacing: 0.16em;
    color: var(--charcoal-55);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s var(--ease), color 0.4s var(--ease);
  }
  .eh-rail.is-visible { opacity: 1; }
  /* Over the dark mission panel the charcoal rail would disappear. */
  .eh-rail.is-inverted { color: color-mix(in srgb, var(--cream) 75%, transparent); }

  .eh-rail__num { font-variant-numeric: tabular-nums; }
  .eh-rail__line {
    position: relative;
    width: 1px;
    height: 88px;
    background: currentColor;
    opacity: 0.45;
  }
  .eh-rail__line i {
    position: absolute;
    left: 50%;
    top: 0;
    width: 5px;
    height: 5px;
    margin-left: -2.5px;
    border-radius: 50%;
    background: currentColor;
    opacity: 1;
    transition: transform 0.45s var(--ease);
  }
}

@media (prefers-reduced-motion: reduce) {
  .eh-rail,
  .eh-rail__line i { transition: none; }
}

/* ============================================================
   06b · THE ONDREA FIT
   Sits between the FAQ and the Journal, and alternates ground
   with them so the run of sections keeps its rhythm.
   ============================================================ */

.eh-fit {
  background: var(--eh-sand);
  padding-block: var(--sp-6);
}
.eh-fit__inner { display: grid; gap: var(--sp-5); }
.eh-fit__intro .eyebrow { margin-bottom: var(--sp-2); }
.eh-fit__lede { color: var(--charcoal-70); max-width: 46ch; margin: var(--sp-3) 0 var(--sp-4); }

.eh-fit__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-4);
}
.eh-fit__item {
  /* A rule above each point rather than a card around it — the page has no
     boxed panels anywhere else, and one here would read as a different site. */
  padding-top: var(--sp-3);
  border-top: 1px solid var(--stone-line);
}
.eh-fit__title {
  font-family: var(--sans);
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--charcoal-55);
  margin: 0 0 0.7rem;
}
.eh-fit__body { color: var(--charcoal-70); font-size: var(--fs-small); line-height: 1.75; margin: 0; }

/* ============================================================
   06c · LATEST FROM THE JOURNAL
   ============================================================ */

.eh-journal {
  background: var(--cream);
  padding-block: var(--sp-6);
}
.eh-journal__inner { display: grid; gap: var(--sp-5); }
.eh-journal__intro .eyebrow { margin-bottom: var(--sp-2); }
.eh-journal__intro .eh-link { margin-top: var(--sp-3); }

.eh-journal__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-4);
}
.eh-journal__link {
  display: grid;
  gap: 0.55rem;
  text-decoration: none;
  color: inherit;
}
.eh-journal__media {
  display: block;
  overflow: hidden;
  margin-bottom: var(--sp-1);
  /* Reserved before the image lands, so a lazy-loaded thumbnail cannot shift
     the two cards beside it as it arrives. */
  aspect-ratio: 4 / 3;
  background: var(--cream-2);
}
.eh-journal__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease);
}
.eh-journal__link:hover .eh-journal__media img,
.eh-journal__link:focus-visible .eh-journal__media img { transform: scale(1.04); }
.eh-journal__meta {
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--charcoal-55);
}
.eh-journal__title {
  font-family: var(--serif);
  font-size: var(--fs-h3);
  font-weight: 300;
  line-height: 1.25;
  margin: 0;
  text-wrap: balance;
  transition: color var(--dur-fast) var(--ease);
}
.eh-journal__link:hover .eh-journal__title,
.eh-journal__link:focus-visible .eh-journal__title { color: var(--forest); }
.eh-journal__excerpt { color: var(--charcoal-70); font-size: var(--fs-small); line-height: 1.7; }

@media (prefers-reduced-motion: reduce) {
  .eh-journal__media img { transition: none; }
  .eh-journal__link:hover .eh-journal__media img { transform: none; }
}