/*
 * TimyBear responsive visual continuity
 *
 * The source pages use different desktop compositions, but their mobile
 * mastheads and visual closing sections share one contract: the image is a
 * field and the copy is part of that field.  Keep this layer deliberately
 * scoped to the documented hero/CTA roots.  Product cards, editorial figures
 * and ordinary content rails must keep their own mobile flow.
 */

@media (max-width: 900px) {
  :root {
    --timy-mobile-hero-min-height: max(720px, calc(100svh - var(--header-h, 66px)));
    --timy-mobile-hero-gutter: clamp(18px, 4vw, 36px);
  }

  /* ---------------------------------------------------------------------- */
  /* Mastheads: one visual field, with copy anchored in a readable lower zone. */
  /* ---------------------------------------------------------------------- */

  .ed-hero,
  .collab-hero,
  .catalog-hero,
  .scenes-hero,
  .gift-hero,
  .story-center-hero,
  .timy-series-profile__hero {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: var(--timy-mobile-hero-min-height) !important;
    max-height: none !important;
    margin-bottom: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    isolation: isolate;
    background: #30241e !important;
  }

  /* These roots previously reserved the header as normal-flow padding. */
  .ed-hero,
  .collab-hero,
  .scenes-hero,
  .gift-hero {
    padding-top: var(--header-h, 66px) !important;
  }

  .ed-hero::after,
  .collab-hero::after,
  .catalog-hero::after,
  .scenes-hero::after,
  .gift-hero::after,
  .story-center-hero::after,
  .timy-series-profile__hero::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: block !important;
    content: "";
    pointer-events: none;
    background:
      linear-gradient(180deg, rgba(30, 22, 18, .02) 10%, rgba(30, 22, 18, .10) 32%, rgba(30, 22, 18, .76) 64%, rgba(30, 22, 18, .98) 100%) !important;
  }

  .ed-hero > .ed-hero-media,
  .collab-hero > .collab-hero-media,
  .scenes-hero > .scenes-hero-media,
  .gift-hero > .gift-hero-media {
    position: absolute !important;
    z-index: 0 !important;
    inset: var(--header-h, 66px) 0 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    order: initial !important;
  }

  .catalog-hero > .catalog-hero-media,
  .story-center-hero > .story-center-hero__media,
  .timy-series-profile__hero > .timy-series-profile__hero-media {
    position: absolute !important;
    z-index: 0 !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    order: initial !important;
  }

  .ed-hero > .ed-hero-media picture,
  .ed-hero > .ed-hero-media img,
  .collab-hero > .collab-hero-media picture,
  .collab-hero > .collab-hero-media img,
  .scenes-hero > .scenes-hero-media picture,
  .scenes-hero > .scenes-hero-media img,
  .gift-hero > .gift-hero-media picture,
  .gift-hero > .gift-hero-media img,
  .catalog-hero > .catalog-hero-media img,
  .story-center-hero > .story-center-hero__media picture,
  .story-center-hero > .story-center-hero__media img,
  .timy-series-profile__hero > .timy-series-profile__hero-media picture,
  .timy-series-profile__hero > .timy-series-profile__hero-media img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .story-center-hero > .story-center-hero__media picture {
    position: absolute !important;
    inset: 0 !important;
  }

  /* The supplied mobile/desktop picture is the complete hero field. Keep the
     copy in that same field so a phone never turns one hero into an image
     followed by a second, unrelated text panel. */
  .ed-hero > .ed-hero-media picture,
  .collab-hero > .collab-hero-media picture,
  .scenes-hero > .scenes-hero-media picture,
  .gift-hero > .gift-hero-media picture,
  .timy-series-profile__hero > .timy-series-profile__hero-media picture {
    position: absolute !important;
    inset: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  .ed-hero > .ed-hero-media picture > img,
  .collab-hero > .collab-hero-media picture > img,
  .scenes-hero > .scenes-hero-media picture > img,
  .gift-hero > .gift-hero-media picture > img,
  .timy-series-profile__hero > .timy-series-profile__hero-media picture > img {
    height: 100% !important;
  }

  .corp-hero > .ed-hero-media img,
  .ip-hero > .ed-hero-media img,
  .mall-hero > .ed-hero-media img,
  .purchase-hero > .ed-hero-media img,
  .collab-hero > .collab-hero-media img {
    object-position: right center !important;
  }

  .ed-hero > .ed-hero-copy,
  .collab-hero > .collab-hero-copy,
  .catalog-hero > .catalog-hero-copy,
  .scenes-hero > .scenes-hero-copy,
  .gift-hero > .gift-hero-copy,
  .story-center-hero > .story-center-hero__copy {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    width: 100% !important;
    min-height: inherit !important;
    margin: 0 !important;
    padding: clamp(164px, 29vw, 230px) var(--timy-mobile-hero-gutter) 52px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-end !important;
    background: transparent !important;
    color: #fffaf4 !important;
  }

  /* These heroes include the fixed-header allowance inside the same section.
     Their content height must therefore subtract it, otherwise the mobile
     masthead becomes one header taller than the viewport. */
  .ed-hero > .ed-hero-copy,
  .collab-hero > .collab-hero-copy,
  .scenes-hero > .scenes-hero-copy,
  .gift-hero > .gift-hero-copy {
    min-height: calc(var(--timy-mobile-hero-min-height) - var(--header-h, 66px)) !important;
  }

  .ed-hero > .ed-hero-copy > div,
  .catalog-hero > .catalog-hero-copy-inner,
  .scenes-hero > .scenes-hero-copy-inner,
  .gift-hero > .gift-hero-copy-inner,
  .story-center-hero > .story-center-hero__copy > *,
  .collab-hero > .collab-hero-copy > .collab-hero-copy-inner {
    width: 100% !important;
    max-width: 680px !important;
    margin-inline: 0 !important;
  }

  .collab-hero > .collab-hero-copy {
    align-items: stretch !important;
    padding: 0 !important;
  }

  .collab-hero > .collab-hero-copy > .collab-hero-copy-inner {
    display: flex !important;
    min-height: inherit !important;
    padding: clamp(164px, 29vw, 230px) var(--timy-mobile-hero-gutter) 52px !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
  }

  .collab-hero > .collab-hero-copy > .collab-hero-copy-inner {
    min-height: calc(var(--timy-mobile-hero-min-height) - var(--header-h, 66px)) !important;
  }

  .scenes-hero > .scenes-hero-copy > .scenes-hero-copy-inner,
  .gift-hero > .gift-hero-copy > .gift-hero-copy-inner {
    padding: 0 !important;
  }

  .story-center-hero > .story-center-hero__copy {
    padding-top: clamp(170px, 32vw, 250px) !important;
  }

  .timy-series-profile__hero > .timy-series-profile__hero-inner {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    width: 100% !important;
    min-height: inherit !important;
    margin: 0 !important;
    padding: 0 var(--timy-mobile-hero-gutter) !important;
    align-items: flex-end !important;
  }

  /* Series profiles keep their desktop paper/ink contract while using the
     same full-bleed hero field as the other editorial pages. The paper gradient
     is strongest behind the copy so the family never becomes a dark panel with
     white text on mobile. */
  .timy-series-profile__hero {
    background: var(--series-paper, #f3ebe3) !important;
    color: var(--series-ink, #2f211b) !important;
  }

  .timy-series-profile__hero::after {
    background:
      linear-gradient(180deg,
        color-mix(in srgb, var(--series-paper, #f3ebe3) 0%, transparent) 0%,
        color-mix(in srgb, var(--series-paper, #f3ebe3) 4%, transparent) 26%,
        color-mix(in srgb, var(--series-paper, #f3ebe3) 68%, transparent) 58%,
        var(--series-paper, #f3ebe3) 100%) !important;
  }

  .timy-series-profile__hero > .timy-series-profile__hero-inner > .timy-series-profile__hero-copy {
    width: 100% !important;
    max-width: 680px !important;
    padding: clamp(164px, 29vw, 230px) 4px 52px !important;
    color: var(--series-ink, #2f211b) !important;
  }

  .ed-hero h1,
  .collab-hero h1,
  .catalog-hero h1,
  .scenes-hero h1,
  .gift-hero h1,
  .story-center-hero h1,
  .timy-series-profile__hero h1 {
    color: #fffaf4 !important;
    text-shadow: 0 1px 12px rgba(30, 22, 18, .12);
  }

  .timy-series-profile__hero h1 {
    color: var(--series-ink, #2f211b) !important;
    text-shadow: none;
  }

  .ed-hero .ed-lead,
  .collab-hero .collab-hero-lead,
  .catalog-hero .catalog-hero-lead,
  .scenes-hero .scenes-hero-lead,
  .gift-hero .gift-hero-lead,
  .story-center-hero .story-center-intro,
  .timy-series-profile__hero .timy-series-profile__intro {
    color: rgba(255, 250, 244, .84) !important;
  }

  .timy-series-profile__hero .timy-series-profile__intro {
    color: color-mix(in srgb, var(--series-ink, #2f211b) 78%, transparent) !important;
    text-shadow: none;
  }

  .ed-hero .button-solid,
  .collab-hero .button-solid,
  .catalog-hero .button-solid,
  .scenes-hero .button-solid,
  .gift-hero .button-solid,
  .story-center-hero .story-center-primary,
  .timy-series-profile__hero .timy-series-profile__hero-link {
    border-color: #fffaf4 !important;
    background: #fffaf4 !important;
    color: #30241e !important;
  }

  .timy-series-profile__hero .timy-series-profile__hero-link {
    border-color: var(--series-ink, #2f211b) !important;
    background: transparent !important;
    color: var(--series-ink, #2f211b) !important;
  }

  .ed-hero .button-outline,
  .collab-hero .button-outline,
  .catalog-hero .button-outline,
  .scenes-hero .button-outline,
  .gift-hero .button-outline {
    border-color: rgba(255, 250, 244, .72) !important;
    background: rgba(48, 36, 30, .18) !important;
    color: #fffaf4 !important;
  }

  .ed-hero .ed-kicker,
  .collab-hero .collab-kicker,
  .catalog-hero .catalog-kicker,
  .scenes-hero .scenes-kicker,
  .gift-hero .gift-kicker,
  .story-center-hero .story-center-card-label,
  .timy-series-profile__hero .timy-series-profile__eyebrow {
    color: #ff9a91 !important;
  }

  .timy-series-profile__hero .timy-series-profile__eyebrow {
    color: var(--series-accent, #b85d48) !important;
  }

  .ed-hero .text-action,
  .collab-hero .text-action,
  .catalog-hero .text-action,
  .scenes-hero .text-action,
  .gift-hero .text-action,
  .timy-series-profile__hero .timy-series-profile__text-link {
    color: #fffaf4 !important;
  }

  .timy-series-profile__hero .timy-series-profile__text-link {
    color: var(--series-ink, #2f211b) !important;
  }

  /* Counts are secondary in a short viewport; keep copy and CTA together. */
  .ed-hero .ed-notes,
  .collab-hero .collab-hero-notes,
  .scenes-hero .scenes-hero-notes,
  .gift-hero .gift-hero-notes,
  .catalog-hero .catalog-hero-notes {
    display: none !important;
  }

  /* Captions and playback controls stay in the same field, above the copy. */
  .ed-hero > .ed-hero-media figcaption,
  .collab-hero > .collab-hero-media figcaption,
  .scenes-hero > .scenes-hero-media figcaption,
  .gift-hero > .gift-hero-media figcaption,
  .catalog-hero > .catalog-hero-caption,
  .story-center-hero > .story-center-hero__media figcaption,
  .timy-series-profile__hero > .timy-series-profile__hero-note {
    position: absolute !important;
    z-index: 3 !important;
    top: 14px !important;
    right: var(--timy-mobile-hero-gutter) !important;
    bottom: auto !important;
    left: var(--timy-mobile-hero-gutter) !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    color: rgba(255, 250, 244, .78) !important;
  }

  .timy-series-profile__hero > .timy-series-profile__hero-note {
    top: 66px !important;
    right: var(--timy-mobile-hero-gutter) !important;
    left: var(--timy-mobile-hero-gutter) !important;
    width: auto !important;
    padding: 7px 10px !important;
    background: rgba(48, 36, 30, .62) !important;
    font-size: 9px !important;
    line-height: 1.55 !important;
  }

  .ed-hero :focus-visible,
  .collab-hero :focus-visible,
  .catalog-hero :focus-visible,
  .scenes-hero :focus-visible,
  .gift-hero :focus-visible,
  .story-center-hero :focus-visible,
  .timy-series-profile__hero :focus-visible {
    outline: 3px solid #ffb2a9 !important;
    outline-offset: 4px;
  }

  /* ---------------------------------------------------------------------- */
  /* Closing visuals: keep the image and its final action as one composition. */
  /* ---------------------------------------------------------------------- */

  .ed-visual-cta,
  .scene-closing,
  .gift-closing,
  .products-closing {
    position: relative !important;
    display: block !important;
    min-height: max(500px, 68svh) !important;
    height: auto !important;
    max-height: none !important;
    padding: 0 !important;
    overflow: hidden !important;
    isolation: isolate;
    background: #30241e !important;
  }

  .ed-visual-cta::after,
  .scene-closing::after,
  .gift-closing::after,
  .products-closing::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: block !important;
    content: "";
    pointer-events: none;
    background: linear-gradient(180deg, rgba(30, 22, 18, .04) 18%, rgba(30, 22, 18, .25) 47%, rgba(30, 22, 18, .92) 100%) !important;
  }

  .ed-visual-cta > figure,
  .scene-closing > .scene-closing-media,
  .gift-closing > .gift-closing-media,
  .products-closing > .products-closing-media {
    position: absolute !important;
    z-index: 0 !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
  }

  .ed-visual-cta > figure picture,
  .ed-visual-cta > figure img,
  .scene-closing > .scene-closing-media picture,
  .scene-closing > .scene-closing-media img,
  .gift-closing > .gift-closing-media picture,
  .gift-closing > .gift-closing-media img,
  .products-closing > .products-closing-media img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .ed-visual-cta > .shell,
  .scene-closing > .scene-closing-inner,
  .gift-closing > .gift-closing-inner,
  .products-closing > .products-closing-inner {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    width: var(--shell, calc(100vw - 36px)) !important;
    min-height: inherit !important;
    margin-inline: auto !important;
    padding: 170px 0 58px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-end !important;
    color: #fffaf4 !important;
  }

  .ed-visual-cta > .shell > div,
  .scene-closing .scene-closing-copy,
  .gift-closing .gift-closing-copy,
  .products-closing .products-closing-copy {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: 680px !important;
    padding: 0 !important;
    color: #fffaf4 !important;
  }

  .ed-visual-cta h2,
  .scene-closing h2,
  .gift-closing h2,
  .products-closing h2 {
    color: #fffaf4 !important;
    text-shadow: 0 1px 12px rgba(30, 22, 18, .12);
  }

  .ed-visual-cta p:not(.section-index),
  .scene-closing p:not(.section-index),
  .gift-closing p:not(.section-index),
  .products-closing p:not(.section-index) {
    color: rgba(255, 250, 244, .84) !important;
  }

  .ed-visual-cta .button-solid,
  .scene-closing .button-solid,
  .gift-closing .button-solid,
  .products-closing .button-solid {
    border-color: #fffaf4 !important;
    background: #fffaf4 !important;
    color: #30241e !important;
  }

  .ed-visual-cta .button-outline,
  .scene-closing .button-outline,
  .gift-closing .button-outline,
  .products-closing .button-outline {
    border-color: rgba(255, 250, 244, .72) !important;
    color: #fffaf4 !important;
    background: rgba(48, 36, 30, .18) !important;
  }

  .ed-visual-cta > .shell :focus-visible,
  .scene-closing :focus-visible,
  .gift-closing :focus-visible,
  .products-closing :focus-visible {
    outline: 3px solid #ffb2a9 !important;
    outline-offset: 4px;
  }
}

/* FAQ exception: the help desk is a utility, not a campaign landing page.
 * Keep the shared full-bleed image field, but reduce its height and lock the
 * copy to a compact left column. Search and counts live in the answer browser. */
@media (min-width: 900.01px) {
  body.route-faq .timy-utility-editorial--faq .ed-hero.faq-hero:not(.news-hero):not(.mall-hero):not(.story-hero) {
    min-height: clamp(620px, 70svh, 690px) !important;
  }

  body.route-faq .timy-utility-editorial--faq .ed-hero.faq-hero:not(.news-hero):not(.mall-hero):not(.story-hero) > .ed-hero-copy {
    min-height: calc(clamp(620px, 70svh, 690px) - var(--header-h, 82px)) !important;
    padding-top: clamp(46px, 5vw, 70px) !important;
    padding-bottom: clamp(46px, 5vw, 70px) !important;
  }

  body.route-faq .timy-utility-editorial--faq .ed-hero.faq-hero:not(.news-hero):not(.mall-hero):not(.story-hero) > .ed-hero-copy > div {
    width: min(100%, 540px) !important;
    max-width: 540px !important;
    align-items: flex-start !important;
    text-align: left !important;
  }

  body.route-faq .timy-utility-editorial--faq .ed-hero.faq-hero:not(.news-hero):not(.mall-hero):not(.story-hero) h1 {
    width: auto !important;
    max-width: 540px !important;
    font-size: clamp(50px, 4.5vw, 64px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.05em !important;
  }

  body.route-faq .timy-utility-editorial--faq .ed-hero.faq-hero:not(.news-hero):not(.mall-hero):not(.story-hero) .ed-lead {
    max-width: 500px !important;
    margin-top: 18px !important;
    font-size: 15px !important;
    line-height: 1.76 !important;
  }

  body.route-faq .timy-utility-editorial--faq .ed-hero.faq-hero:not(.news-hero):not(.mall-hero):not(.story-hero) .ed-actions {
    margin-top: 22px !important;
    justify-content: flex-start !important;
  }

  body.route-faq .timy-utility-editorial--faq .ed-hero.faq-hero:not(.news-hero):not(.mall-hero):not(.story-hero) > .ed-hero-media img {
    object-position: 78% center !important;
  }

  body.route-faq .timy-utility-editorial--faq .ed-hero.faq-hero:not(.news-hero):not(.mall-hero):not(.story-hero) > .ed-hero-media figcaption {
    display: none !important;
  }
}

@media (min-width: 761px) and (max-width: 900px) {
  body.route-faq .timy-utility-editorial--faq .faq-hero.ed-hero {
    min-height: 620px !important;
  }

  body.route-faq .timy-utility-editorial--faq .faq-hero.ed-hero > .ed-hero-copy {
    min-height: calc(620px - var(--header-h, 66px)) !important;
    padding: 124px 32px 40px !important;
  }

  body.route-faq .timy-utility-editorial--faq .faq-hero.ed-hero h1 {
    font-size: 50px !important;
  }
}

@media (max-width: 900px) {
  body.route-faq .timy-utility-editorial--faq .faq-hero.ed-hero {
    min-height: max(640px, calc(100svh - var(--header-h, 66px))) !important;
  }

  body.route-faq .timy-utility-editorial--faq .faq-hero.ed-hero > .ed-hero-copy {
    min-height: calc(max(640px, 100svh) - var(--header-h, 66px)) !important;
    padding: clamp(154px, 32vw, 210px) 20px 38px !important;
  }

  body.route-faq .timy-utility-editorial--faq .faq-hero.ed-hero > .ed-hero-copy > div {
    width: 100% !important;
    max-width: 520px !important;
    text-align: left !important;
  }

  body.route-faq .timy-utility-editorial--faq .faq-hero.ed-hero h1 {
    max-width: 520px !important;
    font-size: clamp(42px, 11vw, 52px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.045em !important;
  }

  body.route-faq .timy-utility-editorial--faq .faq-hero.ed-hero .ed-lead {
    max-width: 500px !important;
    margin-top: 17px !important;
    font-size: 13px !important;
    line-height: 1.7 !important;
  }

  body.route-faq .timy-utility-editorial--faq .faq-hero.ed-hero .ed-actions {
    margin-top: 20px !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 13px 18px !important;
  }

  body.route-faq .timy-utility-editorial--faq .faq-hero.ed-hero > .ed-hero-media img {
    object-position: 66% center !important;
  }

  body.route-faq .timy-utility-editorial--faq .faq-hero.ed-hero > .ed-hero-media figcaption {
    display: none !important;
  }
}

/* Tablet must follow the <=900px rule so the 900/901 boundary stays close. */
@media (min-width: 761px) and (max-width: 900px) {
  body.route-faq .timy-utility-editorial--faq .faq-hero.ed-hero {
    min-height: 620px !important;
  }

  body.route-faq .timy-utility-editorial--faq .faq-hero.ed-hero > .ed-hero-copy {
    min-height: calc(620px - var(--header-h, 66px)) !important;
    padding: 124px 32px 40px !important;
  }

  body.route-faq .timy-utility-editorial--faq .faq-hero.ed-hero h1 {
    font-size: 50px !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Desktop hero continuity                                                   */
/*                                                                            */
/* A page hero is one visual field: the supplied desktop/mobile picture fills  */
/* it and the editorial copy sits in its left safe area.  This pass is kept   */
/* here because the file is enqueued after every page-specific layer.         */
/*                                                                            */
/* Intentionally excluded: the character family (its current composition is   */
/* approved) and the brand-story .story-hero (its current architecture stays   */
/* unchanged).  News/mall already use this composition and are left to their  */
/* own page-specific treatment.                                               */
/* -------------------------------------------------------------------------- */
@media (min-width: 900.01px) {
  :root {
    --timy-desktop-hero-height: clamp(720px, 100svh, 900px);
    --timy-hero-shell-gutter: max(48px, calc((100vw - 1280px) / 2));
    --timy-hero-ink: #fffaf4;
    --timy-hero-scrim-strong: rgba(38, 28, 23, .84);
    --timy-hero-scrim-mid: rgba(38, 28, 23, .48);
  }

  /* The generic editorial hero covers contact, business, utility/about and
     FAQ/purchase variants, while preserving the already full-bleed news and
     mall compositions. */
  .ed-hero:not(.news-hero):not(.mall-hero):not(.story-hero) {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-height: var(--timy-desktop-hero-height) !important;
    height: auto !important;
    padding-top: var(--header-h, 82px) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    isolation: isolate;
    background: #30241e !important;
  }

  .ed-hero:not(.news-hero):not(.mall-hero):not(.story-hero)::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: block !important;
    content: "";
    pointer-events: none;
    background:
      linear-gradient(90deg,
        var(--timy-hero-scrim-strong) 0%,
        rgba(38, 28, 23, .70) 25%,
        var(--timy-hero-scrim-mid) 43%,
        rgba(38, 28, 23, .12) 66%,
        rgba(38, 28, 23, 0) 88%),
      linear-gradient(180deg, rgba(30, 22, 18, .12), rgba(30, 22, 18, .24)) !important;
  }

  .ed-hero:not(.news-hero):not(.mall-hero):not(.story-hero) > .ed-hero-media {
    position: absolute !important;
    z-index: 0 !important;
    inset: var(--header-h, 82px) 0 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    order: initial !important;
    overflow: hidden !important;
    background: #eadfd2 !important;
  }

  .ed-hero:not(.news-hero):not(.mall-hero):not(.story-hero) > .ed-hero-media picture,
  .ed-hero:not(.news-hero):not(.mall-hero):not(.story-hero) > .ed-hero-media img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
  }

  .ed-hero:not(.news-hero):not(.mall-hero):not(.story-hero) > .ed-hero-media img {
    object-fit: cover !important;
    object-position: 68% center !important;
  }

  /* These supplied compositions place the subject on the right and leave a
     genuine text-safe area on the left.  The per-page positions prevent the
     character from drifting behind the copy at intermediate widths. */
  .ed-hero.corp-hero > .ed-hero-media img,
  .ed-hero.ip-hero > .ed-hero-media img,
  .ed-hero.contact-hero > .ed-hero-media img,
  .ed-hero.about-hero > .ed-hero-media img,
  .ed-hero.faq-hero > .ed-hero-media img,
  .ed-hero.purchase-hero > .ed-hero-media img {
    object-position: 72% center !important;
  }

  .ed-hero:not(.news-hero):not(.mall-hero):not(.story-hero) > .ed-hero-copy {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    width: 100% !important;
    min-height: calc(var(--timy-desktop-hero-height) - var(--header-h, 82px)) !important;
    max-width: none !important;
    margin: 0 !important;
    padding: clamp(72px, 8vw, 112px) var(--timy-hero-shell-gutter) !important;
    box-sizing: border-box !important;
    align-items: center !important;
    background: transparent !important;
    color: var(--timy-hero-ink) !important;
  }

  /* Contact/About used a two-column inner grid in their page layer.  Flatten
     only this copy wrapper so the same DOM remains editable and localizable. */
  .ed-hero:not(.news-hero):not(.mall-hero):not(.story-hero) > .ed-hero-copy > div {
    display: flex !important;
    width: min(100%, 610px) !important;
    max-width: 610px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .ed-hero:not(.news-hero):not(.mall-hero):not(.story-hero) .ed-kicker {
    margin-bottom: 24px !important;
    color: #ff9a91 !important;
  }

  .ed-hero:not(.news-hero):not(.mall-hero):not(.story-hero) h1 {
    max-width: 620px !important;
    color: var(--timy-hero-ink) !important;
    font-size: clamp(56px, 5.8vw, 86px) !important;
    line-height: 1.06 !important;
    letter-spacing: -.065em !important;
    text-wrap: balance;
    text-shadow: 0 2px 18px rgba(26, 18, 14, .16);
  }

  .ed-hero:not(.news-hero):not(.mall-hero):not(.story-hero) .ed-lead {
    max-width: 560px !important;
    margin-top: 28px !important;
    color: rgba(255, 250, 244, .88) !important;
    font-size: 16px !important;
    line-height: 1.85 !important;
    text-shadow: 0 1px 10px rgba(26, 18, 14, .15);
  }

  .ed-hero:not(.news-hero):not(.mall-hero):not(.story-hero) .ed-actions {
    margin-top: 32px !important;
  }

  .ed-hero:not(.news-hero):not(.mall-hero):not(.story-hero) .button-solid {
    border-color: var(--timy-hero-ink) !important;
    background: var(--timy-hero-ink) !important;
    color: #30241e !important;
  }

  .ed-hero:not(.news-hero):not(.mall-hero):not(.story-hero) .button-outline {
    border-color: rgba(255, 250, 244, .72) !important;
    background: rgba(48, 36, 30, .18) !important;
    color: var(--timy-hero-ink) !important;
  }

  .ed-hero:not(.news-hero):not(.mall-hero):not(.story-hero) .text-action {
    color: var(--timy-hero-ink) !important;
  }

  .ed-hero:not(.news-hero):not(.mall-hero):not(.story-hero) .ed-notes {
    width: 100% !important;
    max-width: 610px !important;
    margin-top: 40px !important;
    border-top-color: rgba(255, 250, 244, .38) !important;
  }

  .ed-hero:not(.news-hero):not(.mall-hero):not(.story-hero) .ed-notes dt {
    color: var(--timy-hero-ink) !important;
  }

  .ed-hero:not(.news-hero):not(.mall-hero):not(.story-hero) .ed-notes dd {
    color: rgba(255, 250, 244, .70) !important;
  }

  .ed-hero:not(.news-hero):not(.mall-hero):not(.story-hero) .ed-hero-media figcaption {
    z-index: 3 !important;
    color: rgba(255, 250, 244, .78) !important;
  }

  /* Journal archive: keep the channel accent, but place the archive intro on
     the same photographic field instead of leaving it in a second column. */
  .story-center-hero {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-height: clamp(660px, 78svh, 780px) !important;
    height: auto !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    isolation: isolate;
    background: var(--story-accent-soft, #eadfd2) !important;
  }

  .story-center-hero::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: block !important;
    content: "";
    pointer-events: none;
    background:
      linear-gradient(90deg, rgba(38, 28, 23, .74) 0%, rgba(38, 28, 23, .52) 31%, rgba(38, 28, 23, .15) 58%, transparent 84%),
      linear-gradient(180deg, rgba(30, 22, 18, .10), rgba(30, 22, 18, .30));
  }

  .story-center-hero__media {
    position: absolute !important;
    z-index: 0 !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: var(--story-accent-soft, #eadfd2) !important;
  }

  .story-center-hero__media picture,
  .story-center-hero__media img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
  }

  .story-center-hero__media img {
    object-fit: cover !important;
    object-position: var(--story-hero-position, 60% 50%) !important;
  }

  .story-center-hero__copy {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    width: var(--shell, min(1280px, calc(100vw - 96px))) !important;
    min-height: inherit !important;
    margin-inline: auto !important;
    padding: calc(var(--header-h, 82px) + 68px) 0 78px !important;
    box-sizing: border-box !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    background: transparent !important;
    color: var(--timy-hero-ink) !important;
  }

  .story-center-hero__copy > * {
    width: min(100%, 620px) !important;
    max-width: 620px !important;
    margin-right: auto !important;
  }

  .story-center-hero h1 {
    color: var(--timy-hero-ink) !important;
    font-size: clamp(54px, 5.4vw, 78px) !important;
    line-height: 1.08 !important;
    text-shadow: 0 2px 18px rgba(26, 18, 14, .16);
  }

  .story-center-intro {
    color: rgba(255, 250, 244, .86) !important;
    text-shadow: 0 1px 10px rgba(26, 18, 14, .15);
  }

  .story-center-primary {
    border-color: var(--timy-hero-ink) !important;
    background: var(--timy-hero-ink) !important;
    color: #30241e !important;
  }

  .story-center-label {
    color: var(--story-accent, #ec5a57) !important;
  }

  .ed-hero :focus-visible,
  .story-center-hero :focus-visible {
    outline: 3px solid #ffb2a9 !important;
    outline-offset: 4px;
  }
}

/* This block must stay after the generic desktop continuity layer. */
@media (min-width: 900.01px) {
  body.route-faq .timy-utility-editorial--faq .ed-hero.faq-hero:not(.news-hero):not(.mall-hero):not(.story-hero) {
    min-height: clamp(620px, 70svh, 690px) !important;
  }

  body.route-faq .timy-utility-editorial--faq .ed-hero.faq-hero:not(.news-hero):not(.mall-hero):not(.story-hero) > .ed-hero-copy {
    min-height: calc(clamp(620px, 70svh, 690px) - var(--header-h, 82px)) !important;
    padding-top: clamp(46px, 5vw, 70px) !important;
    padding-bottom: clamp(46px, 5vw, 70px) !important;
  }

  body.route-faq .timy-utility-editorial--faq .ed-hero.faq-hero:not(.news-hero):not(.mall-hero):not(.story-hero) > .ed-hero-copy > div {
    width: min(100%, 540px) !important;
    max-width: 540px !important;
    align-items: flex-start !important;
    text-align: left !important;
  }

  body.route-faq .timy-utility-editorial--faq .ed-hero.faq-hero:not(.news-hero):not(.mall-hero):not(.story-hero) h1 {
    width: auto !important;
    max-width: 540px !important;
    font-size: clamp(50px, 4.5vw, 64px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.05em !important;
  }

  body.route-faq .timy-utility-editorial--faq .ed-hero.faq-hero:not(.news-hero):not(.mall-hero):not(.story-hero) .ed-lead {
    max-width: 500px !important;
    margin-top: 18px !important;
    font-size: 15px !important;
    line-height: 1.76 !important;
  }

  body.route-faq .timy-utility-editorial--faq .ed-hero.faq-hero:not(.news-hero):not(.mall-hero):not(.story-hero) .ed-actions {
    margin-top: 22px !important;
    justify-content: flex-start !important;
  }

  body.route-faq .timy-utility-editorial--faq .ed-hero.faq-hero:not(.news-hero):not(.mall-hero):not(.story-hero) > .ed-hero-media img {
    object-position: 78% center !important;
  }

  body.route-faq .timy-utility-editorial--faq .ed-hero.faq-hero:not(.news-hero):not(.mall-hero):not(.story-hero) > .ed-hero-media figcaption {
    display: none !important;
  }
}