/* V5 — a readable workbook and an editorial pace, in the existing wine and ivory. */
:root {
  --action: #49213a;
  --paper-edge: #ccb7a7;
  --paper-shadow: 2px 4px 0 #d9c6ba, 9px 18px 30px #4930261c;
}
.hero-format { font-size: 14px; line-height: 1.75; max-width: 46ch; color: var(--ink); }
.hero-copy > .eyebrow { font-size: 10px; }
.hero-description { max-width: 48ch; }
.hero-price { font-size: 12px; }
.hero-photo-frame, .hero-note { box-shadow: var(--paper-shadow); }
.hero-detail-photo { box-shadow: 3px 6px 0 #d9c6ba, 9px 15px 22px #49302624; }
.sticky-choice > a:active > span > span { color: var(--action); }

/* An invitation cut from the same stock as the workbook. */
.paper-button {
  color: var(--action);
  border-color: var(--action);
  background: linear-gradient(115deg, #fffcf8, #f6eee5);
  box-shadow: 3px 4px 0 #d9c6ba, 3px 4px 0 1px #9b7d77;
}
.paper-button::after { border-color: #9b7d77; }
.paper-button:hover, .paper-button:focus-visible { color: var(--action); }
.text-link, .header-nav .header-sample { color: var(--action); }
:focus-visible, .button:not(:disabled):focus-visible { outline: 3px solid var(--action); outline-offset: 5px; }
.comparison-copy :focus-visible, .comparison-copy .button:not(:disabled):focus-visible { outline-color: var(--paper); }
.comparison-sheet :focus-visible { outline-color: var(--action); }
a:not(.button):active, summary:active { color: var(--action); background-color: #e3cfc5; }
.comparison-copy a:active { color: var(--wine-dark); }
.dialog-close:active { background: #e3cfc5; }
.button:not(.paper-button):not(:disabled):active { transform: translateY(1px); }
.purchase-button:disabled, .complete-card .purchase-button:disabled {
  color: #655457;
  background: #e5dcd5;
  border-color: #b49b8f;
  box-shadow: inset 0 1px 2px #49302612;
}

/* Give standalone links and links within prose room for a finger. */
.header-nav .header-sample, .hero-bottom > a, .footer-links a,
.footer-bottom a, .source-details summary { min-height: 44px; }
.source-details summary { display: flex; align-items: center; padding-block: 12px; }
.source-details .details-content a, .preview-status a, .cancellation-note a,
.faq-list .details-content a, .footer-identity a, .cookie-dialog .note a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: 7px;
  line-height: 1.65;
}
.source-details .details-content a { text-wrap: pretty; }
.source-details summary:hover { background: #efe0d64d; }
.source-details summary:active { background: #e3cfc5; }

/* Product first: an open spread, followed by a concise inventory. */
.inside-section { padding-block: 86px 76px; background: #eee2db; }
.inside-section .section-heading {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  column-gap: 72px;
  text-align: left;
  align-items: end;
  margin-bottom: 46px;
}
.inside-section .section-heading > .eyebrow { grid-column: 1/-1; }
.inside-section .section-heading h2 { font-size: clamp(44px, 4vw, 60px); }
.inside-section .section-heading > p:last-child { max-width: 43ch; padding-bottom: 5px; font-size: 16px; }
.inside-section .section-heading > p:last-child br { display: none; }
.inside-layout { display: block; margin-top: 70px; }
.included-list { display: block; border-top: 1px solid #b8a396; }
.included-list article, .included-list article:first-child { padding: 25px 0; gap: 24px; align-items: baseline; }
.included-list article > div { display: grid; grid-template-columns: .85fr 1fr; gap: 45px; flex: 1; align-items: baseline; }
.included-list h3 { font-size: 29px; }
.included-list p { margin-top: 0; font-size: 15px; line-height: 1.8; max-width: 50ch; }
.included-list > .text-link { margin-top: 22px; font-size: 14px; }
.item-number { color: var(--muted); }

/* Photo essay: one establishing image, one intimate crop, one wider interior. */
.details-section { padding-block: 113px 91px; }
.details-section .section-heading { text-align: left; max-width: 800px; margin-bottom: 55px; }
.details-section .section-heading > p:last-child { max-width: 55ch; }
.detail-grid { grid-template-columns: 1.25fr .85fr .9fr; align-items: start; gap: 42px; }
.detail-card { min-width: 0; }
.detail-card:first-child .detail-image { height: 426px; }
.detail-card:nth-child(2) { padding-top: 148px; }
.detail-card:nth-child(2) .detail-image { height: 267px; }
.detail-card:nth-child(3) { padding-top: 52px; }
.detail-card:nth-child(3) .detail-image { height: 337px; }
.detail-card h3 { font-size: 31px; line-height: 1.1; }
.detail-card p { font-size: 15px; max-width: 48ch; }
.photo-label { left: 0; bottom: 0; padding: 12px 14px; font-size: 10px; color: var(--ink); }
.details-outro { text-align: right; font-size: 32px; margin-top: 60px; }
.details-outro svg { display: none; }
.comparison-section { padding-block: 92px 106px; }
.comparison-copy > p:not(.eyebrow) { max-width: 48ch; font-size: 15px; }
.comparison-copy > p.sample-access { font-size: 12px; }
.comparison-sheet { box-shadow: 3px 5px 0 #bd9e92, 12px 22px 38px #30101930; }
.comparison-table { font-size: 13px; }
.comparison-table tbody th, .comparison-table caption { font-size: 12px; }
.comparison-note, .source-details .details-content { font-size: 13px; line-height: 1.8; }
.comparison-note, .source-details .details-content p { max-width: 47ch; }
.status { font-size: 12px; }
.scenario { max-width: 48ch; }
.scenario p { font-size: 13px; }
.scenario > span:last-child { font-size: 12px; }
.breathing-space::after { background: #211a18b8; }
.kits-section { padding-block: 110px 82px; }
.kit-description { max-width: 43ch; }
.kit-card .eyebrow, .complete-ribbon { color: var(--ink); }
.complete-ribbon { background: #e5d2c5; border: 1px solid #b79888; font-size: 10px; }
.purchase-unavailable { font-size: 12px; }
.kit-common, .preview-status { font-size: 12px; }
.preview-status, .cancellation-note { max-width: 50ch; }
.guarantee p { max-width: 47ch; }
.faq-section { padding-block: 87px 101px; }
.faq-section::before {
  background: linear-gradient(90deg, #f8f4efd9, #f8f4efc7 46%, #f8f4efd9),
    url("envelope-cream-cloth-1600.webp") left center / cover no-repeat;
}
/* A tall open FAQ must not swing its rear sheets beyond the page edges. */
.faq-paper::before { transform: translateZ(-16px) rotateY(-2deg) skewY(1.5deg); }
.faq-paper::after { transform: translateZ(-8px) rotateY(1deg) skewY(-.6deg); }
.faq-list .details-content { font-size: 15px; line-height: 1.8; max-width: 50ch; }
.faq-list summary { font-size: 15px; }
.faq-intro > p:last-of-type { font-size: 15px; color: var(--ink); }
.faq-paper-heading > span:last-child { font-size: 10px; }
.closing-section { padding-block: 83px 74px; }
.closing-layout .closing-price { font-size: 12px; }
.footer-links { font-size: 12px; column-gap: 28px; }
.footer-bottom { font-size: 11px; }
.footer-identity { font-size: 12px; max-width: 50ch; }

/* Broken photography becomes a labelled piece of paper, never an empty hole. */
img { color: var(--ink); font: 13px/1.6 var(--sans); background-color: #e5d8c9; }
.image-fallback {
  display: grid;
  place-items: center;
  padding: 20px;
  text-align: center;
  color: var(--ink);
  background: #e5d8c9;
  font: 400 14px/1.6 var(--sans);
  border: 1px solid #b7a396;
}
.image-fallback > span { max-width: 34ch; }
.image-fallback small { display: block; margin-top: 8px; font-size: 11px; color: #655457; }
.hero-photo-frame .image-fallback, .detail-image .image-fallback { width: 100%; height: 100%; }
.breathing-space > .image-fallback { position: absolute; inset: 0; color: transparent; }
.breathing-space > .image-fallback > span { display: none; }
.faq-intro .faq-photo .image-fallback { height: 215px; }
.hero-detail-photo.image-fallback { padding: 10px; font-size: 10px; }
.hero-detail-photo.image-fallback small { display: none; }

@media (max-width: 1150px) {
  .inside-section .section-heading { column-gap: 40px; }
  .detail-grid { gap: 28px; }
  .detail-card:first-child .detail-image { height: 350px; }
  .detail-card:nth-child(2) .detail-image { height: 220px; }
  .detail-card:nth-child(3) .detail-image { height: 280px; }
  .included-list article > div { gap: 30px; }
}
@media (max-width: 899px) {
  .faq-intro .faq-photo .image-fallback { height: 185px; }
  .hero-format { font-size: 12px; }
  .hero-copy > .eyebrow { font-size: 9px; letter-spacing: 1.2px; }
  .inside-section { padding-block: 68px 62px; }
  .inside-section .section-heading { display: block; }
  .inside-section .section-heading > p:last-child { max-width: 55ch; font-size: 15px; }
  .inside-layout { margin-top: 48px; }
  .included-list article > div { grid-template-columns: 1fr 1.15fr; gap: 24px; }
  .included-list h3 { font-size: 27px; }
  .included-list p { font-size: 14px; }
  .details-section { padding-block: 82px 75px; }
  .detail-grid { grid-template-columns: 1fr 1fr; gap: 44px 30px; }
  .detail-card:first-child { grid-row: span 2; }
  .detail-card:first-child .detail-image { height: 420px; }
  .detail-card:nth-child(2) { padding-top: 90px; }
  .detail-card:nth-child(3) { grid-column: 2; padding: 0; }
  .detail-card:nth-child(3) .detail-image { height: 240px; }
  .detail-card h3 { font-size: 29px; }
  .details-outro { margin-top: 44px; font-size: 29px; }
  .comparison-section { padding-block: 74px 83px; }
  .kits-section { padding-block: 85px 70px; }
  .kit-description, .kit-features { font-size: 14px; }
  .faq-section { padding-block: 72px 80px; }
  .faq-layout { grid-template-columns: .8fr 1.2fr; }
  .faq-list .details-content { font-size: 14px; }
}
@media (max-width: 640px) {
  .hero { padding-top: 29px; }
  .hero h1 { font-size: clamp(40px, 11.5vw, 61px); }
  .hero-copy > .eyebrow { font-size: 9px; letter-spacing: 1.4px; }
  .hero-format { font-size: 13px; line-height: 1.65; max-width: 40ch; }
  .hero-actions { order: 4; margin-top: 20px; }
  .hero-actions .text-link { font-size: 12px; min-width: 90px; }
  .hero-actions .paper-button { min-width: 172px; }
  .hero-visual { order: 5; margin-top: 42px; }
  .hero-description { order: 6; }
  .hero-price { font-size: 12px; }
  .hero-bottom > a { font-size: 11px; }
  .inside-section { padding-block: 54px 49px; }
  .inside-section .section-heading { margin-bottom: 30px; }
  .inside-section .section-heading h2 { font-size: 42px; }
  .inside-section .section-heading > p:last-child { font-size: 15px; margin-top: 19px; }
  .inside-layout { margin-top: 38px; }
  .included-list article, .included-list article:first-child { padding: 23px 0; gap: 17px; }
  .included-list article > div { display: block; }
  .included-list p { margin-top: 12px; font-size: 15px; }
  .included-list > .text-link { font-size: 12px; }
  .details-section { padding-block: 69px 57px; }
  .details-section .section-heading { margin-bottom: 36px; }
  .details-section .section-heading > p:last-child { font-size: 15px; }
  .details-section .section-heading > p:last-child br { display: none; }
  .detail-grid { display: block; }
  .detail-card:first-child .detail-image { height: auto; aspect-ratio: 4/3; }
  .detail-card:nth-child(2) { width: 87%; margin: 45px 0 0 auto; padding: 0; }
  .detail-card:nth-child(2) .detail-image { height: auto; aspect-ratio: 1; margin: 0; }
  .detail-card:nth-child(2) h3, .detail-card:nth-child(2) p { margin-left: 0; }
  .detail-card:nth-child(3) { width: 93%; margin: 38px auto 0 0; padding: 0; }
  .detail-card:nth-child(3) .detail-image { height: auto; aspect-ratio: 4/3; margin: 0; }
  .detail-card h3 { font-size: 31px; }
  .detail-card p { font-size: 15px; }
  .details-outro { text-align: left; margin: 43px 0 0; max-width: 100%; font-size: 29px; }
  .photo-label { font-size: 9px; padding: 10px 12px; }
  .comparison-section { padding-block: 62px 73px; }
  .comparison-copy > p:not(.eyebrow) { font-size: 15px; }
  .comparison-copy > p.sample-access { font-size: 12px; }
  .comparison-table, .comparison-note, .source-details .details-content { font-size: 12px; }
  .comparison-table tbody th, .comparison-table caption { font-size: 11px; }
  .status { font-size: 11px; }
  .kits-section { padding-block: 74px 59px; }
  .kits-section .section-heading > p:last-child { font-size: 15px; }
  .complete-ribbon { font-size: 10px; }
  .purchase-unavailable { font-size: 11px; }
  .cancellation-note { font-size: 12px; }
  .faq-section { padding-block: 59px 69px; }
  .faq-section::before {
    background: linear-gradient(#f8f4efd1, #f8f4efc7 450px, #f8f4efe6),
      url("envelope-cream-cloth-1600.webp") 22% top / auto 820px no-repeat;
  }
  .faq-list summary { font-size: 15px; }
  .faq-list .details-content { font-size: 14px; }
  .faq-paper-heading > span:last-child { font-size: 9px; }
  .faq-intro .faq-photo .image-fallback { height: 140px; font-size: 12px; padding: 12px; }
  .closing-section { padding-block: 58px 46px; }
  .closing-layout p.closing-price { font-size: 12px; }
  .footer-bottom { font-size: 10px; }
}
@media (max-width: 359px) {
  .hero-actions { gap: 12px; }
  .hero-actions .paper-button { min-width: 157px; }
  .hero-actions .text-link { font-size: 11px; }
  .hero-copy > .eyebrow { letter-spacing: 1px; }
  .inside-section .section-heading h2 { font-size: 38px; }
}
@media print {
  .product-demo { break-inside: avoid; }
  .inside-section .section-heading, .included-list article > div, .detail-grid { display: block; }
  .section { padding-block: 20px; }
  .detail-card:nth-child(n) { padding: 0; margin: 20px 0; }
  .detail-card:nth-child(n) .detail-image { height: 160px; }
}