/* Final Sous layout corrections. Loaded after sous-v2.css. */

html body main.wrap .sous-page {
  width: 100% !important;
  max-width: 1240px !important;
  min-width: 0 !important;
  overflow: visible !important;
  color: #21170f !important;
}

/* Keep the ticket legible against its light paper surface.
   Generic ticket rules elsewhere in the app can set descendants to white;
   Sous must explicitly own its ink color. */
html body main.wrap .sous-page .sous-ticket,
html body main.wrap .sous-page .sous-ticket h3,
html body main.wrap .sous-page .sous-ticket p,
html body main.wrap .sous-page .sous-ticket dl,
html body main.wrap .sous-page .sous-ticket dt,
html body main.wrap .sous-page .sous-ticket dd,
html body main.wrap .sous-page .sous-ticket span,
html body main.wrap .sous-page .sous-ticket a {
  color: #21170f !important;
}

html body main.wrap .sous-page .sous-ticket {
  max-width: 1020px !important;
  margin: 0 auto 2rem !important;
  background: #fbf6ec !important;
  border: 2.5px solid #21170f !important;
  box-shadow: 8px 8px 0 #b9342b !important;
  grid-template-columns: minmax(0, 1.35fr) minmax(180px, 0.65fr) !important;
  padding: clamp(1.35rem, 3.2vw, 2.25rem) clamp(1.5rem, 4vw, 2.75rem) !important;
}

html body main.wrap .sous-page .sous-dot,
html body main.wrap .sous-page .sous-plans {
  max-width: 1020px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

html body main.wrap .sous-page .sous-ticket-art,
html body main.wrap .sous-page .sous-twin {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

html body main.wrap .sous-page .sous-ticket-art {
  max-height: 220px !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  justify-self: center !important;
}

html body main.wrap .sous-page .sous-ticket .kicker {
  color: #a12d25 !important;
}

html body main.wrap .sous-page .sous-ticket .fine {
  color: #75644d !important;
}

html body main.wrap .sous-page .sous-ticket .btn {
  background: #21170f !important;
  color: #fff8e8 !important;
}

html body main.wrap .sous-page .sous-jobs {
  width: 100% !important;
  align-items: stretch !important;
  grid-auto-rows: 1fr !important;
  overflow: visible !important;
}

html body main.wrap .sous-page .note {
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: visible !important;
}

html body main.wrap .sous-page .note-face {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-width: 0 !important;
}

html body main.wrap .sous-page .sous-jobs {
  width: 100% !important;
  max-width: 1120px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  justify-items: stretch !important;
}

html body main.wrap .sous-page .note-photo,
html body main.wrap .sous-page .note-ba {
  min-width: 0 !important;
  background: transparent !important;
  border: 0 !important;
  overflow: visible !important;
  height: auto !important;
}

html body main.wrap .sous-page .note-ba {
  margin: 0.5rem 0 1rem !important;
  padding: 0.75rem 0.65rem !important;
  background: rgba(251, 246, 236, 0.7) !important;
  border: 1.5px dashed rgba(33, 23, 15, 0.35) !important;
}

html body main.wrap .sous-page .note-photo img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 200px !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  background: transparent !important;
  border: 0 !important;
  mix-blend-mode: multiply !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  aspect-ratio: auto !important;
}

html body main.wrap .sous-page .note-nums {
  margin-top: auto !important;
}

html body main.wrap .sous-page .note-suggest {
  margin-top: 12px !important;
}

html body main.wrap .sous-page img {
  max-width: 100% !important;
  height: auto !important;
}

@media (max-width: 850px) {
  html body main.wrap .sous-page {
    padding-inline: 12px !important;
  }

  html body main.wrap .sous-page .sous-jobs {
    width: 100% !important;
    max-width: none !important;
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
  }

  html body main.wrap .sous-page .note {
    height: auto !important;
    width: 100% !important;
  }

  html body main.wrap .sous-page .note-face {
    height: auto !important;
  }

  html body main.wrap .sous-page .note-photo img {
    width: min(100%, 16rem) !important;
    max-height: 200px !important;
    object-fit: contain !important;
  }

  html body main.wrap .sous-page .sous-ticket,
  html body main.wrap .sous-page .sous-plans {
    width: 100% !important;
    min-width: 0 !important;
  }
}

@media (max-width: 520px) {
  html body main.wrap .sous-page {
    padding-inline: 8px !important;
  }

  html body main.wrap .sous-page .sous-copy h1 {
    font-size: clamp(2.4rem, 13vw, 3.6rem) !important;
  }

  html body main.wrap .sous-page .sous-does {
    font-size: clamp(1.5rem, 8vw, 2.4rem) !important;
    max-width: 100% !important;
    white-space: normal !important;
  }

  html body main.wrap .sous-page .note-ba {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    font-size: .82rem !important;
  }

  html body main.wrap .sous-page .note-ba b {
    white-space: normal !important;
  }
}