/* Dealsmaster v5.5.0 — mobile composition, trust, and public-cache repair.
 *
 * This final cascade layer corrects the visual failures found in real-phone
 * screenshots. The rules are deliberately narrow: they repair the affected
 * editorial graphics, five-style reference scenes, and three homepage rails
 * without flattening the different article atmospheres.
 */

/* Homepage resilience ----------------------------------------------------- */

/* Field notes contain a number, title, and explanation. Explicit placement
 * prevents legacy auto-placement rules from laying the title over the copy. */
.dm-human-warmth.home .dm-field-note-card figcaption {
  display: grid !important;
  grid-template-columns: 2.25rem minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  gap: .42rem .9rem !important;
  align-content: start;
  min-height: 7.25rem;
}

.dm-human-warmth.home .dm-field-note-card figcaption > span {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  align-self: start;
}

.dm-human-warmth.home .dm-field-note-card figcaption > strong {
  display: block !important;
  position: static !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0;
  margin: 0 !important;
  line-height: 1.02;
}

.dm-human-warmth.home .dm-field-note-card figcaption > p {
  position: static !important;
  grid-column: 2 !important;
  grid-row: 2 !important;
  min-width: 0;
  margin: 0 !important;
  overflow-wrap: break-word;
}

/* The Useful Edit is a light paper section. Pin each text role to an
 * accessible ink colour even if an atmosphere rule appears earlier. */
.dm-human-warmth.home .dm-useful-edit,
.dm-human-warmth.home .dm-useful-edit .dm-useful-intro {
  color: #211d18 !important;
}

.dm-human-warmth.home .dm-useful-edit .dm-useful-intro h2,
.dm-human-warmth.home .dm-useful-edit .dm-edit-list strong {
  color: #211d18 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

.dm-human-warmth.home .dm-useful-edit .dm-useful-intro > p:not(.dm-kicker),
.dm-human-warmth.home .dm-useful-edit .dm-edit-list p {
  color: #5c5148 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

.dm-human-warmth.home .dm-useful-edit .dm-kicker,
.dm-human-warmth.home .dm-useful-edit .dm-edit-list > li > span {
  color: #8a4334 !important;
}

/* Article graphics -------------------------------------------------------- */

/* These five references are narrow slices of one contact sheet. A consistent
 * editorial crop is more useful than a near-full-page strip on tablet and
 * desktop too; the full five-style board still appears elsewhere in the guide. */
body.dm-article-edition.dm-atmosphere
.dm-edition-detail--portrait[data-dm-detail-layout="row-5"]
.dm-edition-detail__media {
  aspect-ratio: 4 / 5 !important;
}

body.dm-article-edition.dm-atmosphere
.dm-edition-detail--portrait[data-dm-detail-layout="row-5"]
.dm-edition-detail__image {
  top: 50% !important;
  height: auto !important;
  transform: translateY(-50%) !important;
}

@media (max-width: 680px) {
  /* A 70/20/10 or size comparison needs one shared track. The old three-
   * column mobile grid forced every bar to the same minimum width, which made
   * the graphic both crowded and factually misleading. */
  body.dm-article-edition :is(
    .dm-edition-diagram--layers,
    .dm-edition-diagram--scale
  ) .dm-edition-diagram__plot > li {
    grid-template-columns: 1.55rem minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    gap: .65rem .7rem !important;
    align-items: start;
    min-height: 0;
    padding: .9rem .65rem;
  }

  body.dm-article-edition :is(
    .dm-edition-diagram--layers,
    .dm-edition-diagram--scale
  ) .dm-edition-diagram__mark {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    padding-top: .16rem;
  }

  body.dm-article-edition :is(
    .dm-edition-diagram--layers,
    .dm-edition-diagram--scale
  ) .dm-edition-diagram__copy {
    display: grid !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: .18rem .8rem !important;
    align-items: baseline;
    min-width: 0;
  }

  body.dm-article-edition :is(
    .dm-edition-diagram--layers,
    .dm-edition-diagram--scale
  ) .dm-edition-diagram__copy > * {
    min-width: 0;
    margin: 0 !important;
  }

  body.dm-article-edition :is(
    .dm-edition-diagram--layers,
    .dm-edition-diagram--scale
  ) .dm-edition-diagram__copy strong {
    grid-column: 1;
    font-size: .91rem;
    line-height: 1.15;
  }

  body.dm-article-edition :is(
    .dm-edition-diagram--layers,
    .dm-edition-diagram--scale
  ) .dm-edition-diagram__copy em {
    grid-column: 2;
    justify-self: end;
  }

  body.dm-article-edition :is(
    .dm-edition-diagram--layers,
    .dm-edition-diagram--scale
  ) .dm-edition-diagram__copy small {
    grid-column: 1 / -1;
    line-height: 1.42;
  }

  body.dm-article-edition :is(
    .dm-edition-diagram--layers,
    .dm-edition-diagram--scale
  ) .dm-edition-diagram__shape {
    display: block;
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100%;
    height: .68rem !important;
    overflow: hidden;
    border: 0 !important;
    border-radius: 999px;
    background: color-mix(in srgb, var(--dm-edition-soft) 66%, white) !important;
  }

  body.dm-article-edition :is(
    .dm-edition-diagram--layers,
    .dm-edition-diagram--scale
  ) .dm-edition-diagram__shape::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--dm-edition-size);
    border-radius: inherit;
    background: linear-gradient(
      90deg,
      var(--dm-edition-accent),
      color-mix(in srgb, var(--dm-edition-accent) 62%, var(--dm-edition-deep))
    );
    content: "";
  }

  body.dm-article-edition .dm-edition-diagram--scale .dm-edition-diagram__shape::after {
    display: none;
  }

  /* The five style references are slices of one high-resolution contact
   * sheet. Preserve each horizontal slice, but show it in a useful editorial
   * portrait instead of a seven-hundred-pixel phone column. */
  body.dm-article-edition.dm-atmosphere
  .dm-edition-detail--portrait[data-dm-detail-layout="row-5"]
  .dm-edition-detail__media {
    width: min(100%, 360px) !important;
    max-width: 360px;
    margin-inline: auto;
  }
}

@media (max-width: 782px) {
  /* Every atmosphere is one full card in a horizontal story rail. Reset all
   * nth-child desktop placements so no card can collapse into a sliver. */
  .dm-human-warmth.home .dm-atmosphere-portal__grid {
    display: grid !important;
    width: 100% !important;
    grid-template-columns: none !important;
    grid-auto-flow: column !important;
    grid-auto-columns: min(82vw, 330px) !important;
    gap: .85rem !important;
    margin-inline: 0 !important;
    padding: .25rem 1rem 1rem !important;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: 1rem;
    scroll-snap-type: x mandatory;
  }

  .dm-human-warmth.home .dm-atmosphere-portal__card:nth-child(n) {
    width: auto !important;
    min-width: 0;
    grid-column: auto !important;
    grid-row: auto !important;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  /* Keep the rich related-reading ending, but turn its five large cards into
   * a calm visual rail instead of adding several phone screens of repetition. */
  body.single-post .dm-visual-journey__grid {
    display: grid !important;
    grid-template-columns: none !important;
    grid-auto-flow: column;
    grid-auto-columns: min(82vw, 340px);
    gap: .9rem;
    margin-inline: -1rem;
    padding: .2rem 1rem 1rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: 1rem;
    scroll-snap-type: x mandatory;
  }

  body.single-post .dm-visual-journey .dm-experience-card:nth-child(n) {
    min-width: 0;
    grid-column: auto !important;
    grid-row: auto !important;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  body.single-post .dm-visual-journey .dm-experience-card__media img {
    aspect-ratio: 4 / 3 !important;
    object-fit: cover;
  }

  /* The footer is a directory, not another article. Two compact columns keep
   * every destination visible without making the ending feel endless. */
  .dm-human-warmth .dm-site-footer .dm-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1.4rem 1rem;
  }

  .dm-human-warmth .dm-site-footer .dm-footer-grid > nav:nth-child(n) {
    grid-column: auto !important;
    padding-bottom: .85rem;
  }

  .dm-human-warmth .dm-site-footer .dm-footer-grid > nav:nth-child(n) ul {
    display: block;
  }

  .dm-human-warmth .dm-site-footer .dm-footer-grid > nav:nth-child(3) {
    grid-column: 1 / -1 !important;
  }

  .dm-human-warmth .dm-site-footer .dm-footer-grid > nav:nth-child(3) ul {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 .8rem;
  }

  .dm-human-warmth .dm-site-footer .dm-footer-grid > nav.dm-footer-practical:nth-child(n) {
    grid-column: 1 / -1 !important;
  }

  .dm-human-warmth .dm-site-footer .dm-footer-grid > nav.dm-footer-practical:nth-child(n) ul {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1rem;
  }

  /* Articles already carry a full visual-reading rail immediately above the
   * footer. Avoid repeating another large square scene in the same ending. */
  body.single-post .dm-site-footer .dm-footer-snapshot {
    display: none;
  }
}

/* At this width the article itself already stacks, so a full sticky guide
 * panel only delays the first paragraph. Use the native compact disclosure
 * consistently for both legacy and newer publisher articles. */
@media (max-width: 1100px) {
  body.single-post .dm-reading-layout {
    width: min(calc(100% - 48px), 900px) !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 1.35rem !important;
  }

  body.single-post .dm-reading-layout .dm-guide-experience {
    position: static !important;
    top: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.single-post .dm-guide-experience .dm-guide-nav:not([open]) > :not(summary) {
    display: none !important;
  }
}

@media (max-width: 520px) {
  .dm-human-warmth .dm-site-footer .dm-footer-lead {
    gap: 1.4rem;
  }

  .dm-human-warmth .dm-site-footer .dm-footer-snapshot {
    width: min(72vw, 280px);
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  body.dm-article-edition.dm-atmosphere
  .dm-edition-detail--portrait[data-dm-detail-layout="row-5"]:hover
  .dm-edition-detail__image {
    transform: translateY(-50%) scale(1.012) !important;
  }
}

@media (forced-colors: active) {
  .dm-human-warmth.home .dm-useful-edit,
  .dm-human-warmth.home .dm-useful-edit * {
    color: CanvasText !important;
  }

  body.dm-article-edition :is(
    .dm-edition-diagram--layers,
    .dm-edition-diagram--scale
  ) .dm-edition-diagram__shape::before {
    background: Highlight;
  }
}

/* v5.5: one calm, accountable contact route and one visual-production note. */
.dm-contact-page .dm-contact-content {
  max-width: 920px !important;
}

.dm-contact-panel {
  position: relative;
  margin: clamp(2.5rem, 6vw, 5.5rem) 0;
  padding: clamp(1.4rem, 4vw, 3.5rem);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--dm-rust) 18%, var(--dm-line));
  border-radius: clamp(1.25rem, 3vw, 2.5rem);
  background:
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--dm-butter) 26%, transparent) 0 10rem, transparent 10.2rem),
    linear-gradient(145deg, var(--dm-white), color-mix(in srgb, var(--dm-cream) 78%, white));
  box-shadow: 0 28px 70px rgb(54 39 27 / .1);
}

.dm-contact-panel::after {
  content: "";
  position: absolute;
  inset: auto -4rem -5rem auto;
  width: 12rem;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--dm-rust) 28%, transparent);
  border-radius: 49% 51% 62% 38%;
  transform: rotate(18deg);
  pointer-events: none;
}

.dm-contact-panel__intro {
  max-width: 680px;
  margin-bottom: 2rem;
}

.dm-contact-panel__intro h2 {
  max-width: 13ch;
  margin: .25rem 0 .8rem;
  font-size: clamp(2.2rem, 6vw, 4.5rem);
  line-height: .96;
  letter-spacing: -.045em;
}

.dm-contact-form {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1.15rem;
}

.dm-contact-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.dm-contact-form p {
  margin: 0;
}

.dm-contact-form label {
  display: block;
  margin: 0 0 .45rem;
  color: var(--dm-ink);
  font-size: .92rem;
  font-weight: 700;
}

.dm-contact-form :is(input:not([type="checkbox"]), select, textarea) {
  width: 100%;
  padding: .8rem .9rem;
  border: 1px solid color-mix(in srgb, var(--dm-ink) 20%, var(--dm-line));
  border-radius: .55rem;
  background: rgb(255 253 248 / .92);
  color: var(--dm-ink);
  font: inherit;
}

.dm-contact-form :is(input, select, textarea):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--dm-butter) 58%, white);
  outline-offset: 2px;
  border-color: var(--dm-rust);
}

.dm-contact-form textarea {
  min-height: 12rem;
  resize: vertical;
}

.dm-contact-consent label {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  align-items: start;
  gap: .65rem;
  max-width: 62ch;
  font-weight: 500;
  line-height: 1.5;
}

.dm-contact-content .dm-contact-consent input[type="checkbox"] {
  width: 1.15rem;
  min-height: 1.15rem;
  height: 1.15rem;
  margin: .18rem 0 0;
}

.dm-contact-form__finish {
  display: flex;
  align-items: center;
  gap: 1rem 1.4rem;
  flex-wrap: wrap;
}

.dm-contact-form__finish button {
  min-height: 3.25rem;
  padding: .75rem 1.35rem;
  border: 0;
  border-radius: 999px;
  background: var(--dm-forest);
  color: var(--dm-white);
  font: 800 .95rem/1 var(--dm-sans);
  cursor: pointer;
}

.dm-contact-form__finish button:hover {
  background: var(--dm-rust);
}

.dm-contact-form__finish p {
  color: var(--dm-muted);
  font-size: .9rem;
}

.dm-contact-status {
  margin: 0 0 1.25rem;
  padding: .9rem 1rem;
  border-radius: .55rem;
  font-weight: 700;
}

.dm-contact-status.is-success {
  background: color-mix(in srgb, var(--dm-forest) 12%, white);
  color: var(--dm-forest);
}

.dm-contact-status.is-error {
  background: color-mix(in srgb, var(--dm-rust) 11%, white);
  color: var(--dm-rust);
}

.dm-contact-form__trap {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.dm-production-note {
  max-width: 760px;
  margin: clamp(2rem, 5vw, 4rem) auto;
  padding: 1rem 1.1rem;
  border-top: 1px solid var(--dm-line);
  border-bottom: 1px solid var(--dm-line);
  color: var(--dm-muted);
  font-size: .94rem;
}

.dm-production-note summary {
  color: var(--dm-ink);
  font-weight: 800;
  cursor: pointer;
}

.dm-production-note p {
  margin: .8rem 0 0;
}

@media (max-width: 640px) {
  .dm-contact-form__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .dm-contact-panel {
    padding: 1.25rem;
    border-radius: 1.2rem;
  }
}