/* Shared reading and continuation rhythm for Learn-derived pages.
   Component scope preserves the dark journey and the light reference. */

/* Keep the title below the shared fixed header. A neutral transform also
   prevents the scroll animation carrying a desktop offset onto phones. */
.hero > .hero__content {
  transform: translateY(0);
  padding-top: calc(var(--wow-header-height, 5rem) + 1.5rem);
  padding-bottom: 3rem;
}

.article__inner > h2 {
  margin-top: clamp(3.5rem, 7vw, 5rem);
  margin-bottom: 1.1rem;
  text-wrap: balance;
}

/* Short lessons use the same ruled reading furniture as the chapter index. */
.quick-lessons { background: #240014; color: #f5efe3; scroll-margin-top: 6rem; }
.quick-lessons h2 { max-width: 18ch; font: 500 clamp(2.5rem, 5vw, 4.5rem)/1.05 var(--font-serif); }
.quick-lessons__intro { max-width: 62ch; margin: 1.5rem 0 2.5rem; font-size: 1.25rem; line-height: 1.6; }
.quick-lesson { border-top: 1px solid #8b6e65; }
.quick-lesson:last-of-type { border-bottom: 1px solid #8b6e65; }
.quick-lesson summary { cursor: pointer; padding: 1.5rem .2rem; font-size: 1.8rem; }
.quick-lesson summary small { display: block; margin: .5rem 0 0 1.5rem; font: 400 .85rem/1.5 var(--font-sans); color: #e8d5b7; }
.quick-lesson__body { max-width: 65ch; padding: 0 .2rem 2rem; font-size: 1.2rem; line-height: 1.65; }
.quick-lesson form { margin: 1.5rem 0; }
.quick-lesson form > label { display: grid; gap: .4rem; margin: 1.2rem 0; }
.quick-lesson input:not([type="radio"]), .quick-lesson select { box-sizing: border-box; width: 100%; min-height: 48px; border: 1px solid #8b6e65; border-radius: 0; background: #fffaf2; color: #23130d; padding: .65rem; font: inherit; }
.quick-lesson input::placeholder { color: #705747; }
.quick-lesson button, .quiz__retry { min-height: 44px; padding: .65rem 1rem; border: 1px solid #e8d5b7; border-radius: 0; background: #e8d5b7; color: #240014; font: 500 1rem/1.5 var(--font-sans); cursor: pointer; }
.quick-lesson button:hover, .quiz__retry:hover { background: #fffaf2; }
.quick-lesson :focus-visible { outline: 2px solid #e4c47a; outline-offset: 4px; }
.quick-lesson__result { padding: 1.25rem 0; border-block: 1px solid #8b6e65; }
.quick-lesson a { color: #e4c47a; text-decoration: underline; text-underline-offset: .2em; }
.quiz__review { display: inline-block; min-height: 44px; margin: .5rem 1rem .5rem 0; text-underline-offset: .2em; }
.quiz__retry { margin: .5rem 0 1rem; }
.quick-lesson [hidden], .quiz [hidden] { display: none; }

.wine-compare { margin: 3rem 0; padding: 2rem 0; border-block: 1px solid #ad9381; scroll-margin-top: 6rem; }
.wine-compare h2 { font-size: clamp(2.2rem, 4vw, 3rem); margin: 0 0 1rem; }
.wine-compare form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-block: 1.5rem; }
.wine-compare form[hidden] { display: none; }
.wine-compare label { min-width: 0; display: grid; gap: .5rem; font: .9rem/1.5 var(--font-sans); }
.wine-compare select { width: 100%; min-width: 0; min-height: 48px; padding: .65rem .4rem; border: 1px solid #76513d; border-radius: 0; background: #fffaf2; color: #23130d; font: 1rem/1.4 var(--font-serif); }
.wine-compare__table { width: 100%; table-layout: fixed; border-collapse: collapse; margin: 1.5rem 0 2rem; color: #23130d; }
.wine-compare__table caption { text-align: left; font-size: 1rem; line-height: 1.5; margin-bottom: 1rem; }
.wine-compare__table :is(th, td) { text-align: left; vertical-align: top; padding: .75rem .5rem; border-bottom: 1px solid #c4af9d; overflow-wrap: anywhere; font-size: 1.05rem; }
.wine-compare__table th:first-child { width: 24%; }
.wine-compare__bar { display: block; height: 4px; margin-top: .6rem; background: linear-gradient(to right, #68102f calc(var(--score) * 20%), #e6d8bd 0); }
.wine-compare__notes { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.wine-compare__notes section { min-width: 0; }
.wine-compare__notes h3 { font-size: 1.7rem; line-height: 1.2; margin: 0 0 1rem; }
.wine-compare__notes dt { margin-top: 1rem; font: .85rem/1.5 var(--font-sans); color: #68102f; }
.wine-compare__notes dd { margin: .3rem 0 1.2rem; font-size: 1.1rem; line-height: 1.5; }
.wine-compare__notes summary { cursor: pointer; padding-block: .6rem; }
.wine-compare__notes p { font-size: 1.1rem; line-height: 1.6; }
.wine-compare__notes a { display: inline-block; min-height: 44px; padding-block: .6rem; color: #68102f; text-underline-offset: .2em; }
@media (max-width: 500px) {
  .wine-compare__notes { grid-template-columns: 1fr; gap: 2rem; }
  .wine-compare__table :is(th, td) { padding-inline: .25rem; font-size: .95rem; }
}
.article__inner > h3 { margin-top: 2.5rem; margin-bottom: 1rem; }
.article__inner > p { line-height: 1.75; }
.article__inner > .lead { line-height: 1.65; }
.ch-index__label,
.ch-hero__kicker,
.toc__meta {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .14em;
}
.ch-hero__kicker { color: #e4c47a; }
.toc__meta { color: #d9cabb; }
.tease__cta { font-weight: 400; letter-spacing: .16em; line-height: 1.6; }
.toc__link { min-height: 64px; }

/* The reference search has the same square paper field as the home answer. */
.reference-page--library .library-finder__field {
  border: 1px solid rgb(104 16 47 / 46%);
  background: #fffaf2;
}
.reference-page--library .library-finder__field:focus-within {
  border-color: #68102f;
  outline: 2px solid rgb(104 16 47 / 18%);
  outline-offset: 2px;
}
.reference-page--library .library-finder__field input {
  min-height: 64px;
  padding: .9rem 3rem .9rem 1rem;
  font: 400 1.2rem/1.4 var(--font-serif);
  box-shadow: none;
}
.reference-page--library .library-finder__field button { right: .3rem; }
.reference-page--library .library-finder > label,
.reference-page--library .library-finder__status {
  font-size: 12px;
  letter-spacing: .06em;
  line-height: 1.55;
}
.reference-page--library .library-finder__status { color: #685244; }
.reference-page--library .grape__say,
.reference-page--library .grape__trait > span:first-child,
.reference-page--library .aroma__lb {
  font-size: 11px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: .1em;
  color: #685244;
}
.reference-page--library .grape__body > p { font-size: 18.5px; line-height: 1.75; }
.reference-page--library .grape__body > .grape__facts {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .015em;
  line-height: 1.85;
}
.reference-page--library .grape__facts strong { font-size: 11px; letter-spacing: .08em; }
.reference-page--library .grape__body > .grape__sibs { font-size: 17px; line-height: 1.65; }
.reference-page--library .grape__hear { min-height: 44px; padding: .5rem .65rem; font-size: 11px; }

/* A chapter ends with the next useful destination, clearly separated from
   the longer site directory beneath it. */
.ch-nav__grid { max-width: 1280px; margin-inline: auto; }
.ch-nav__link {
  padding: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3rem);
  justify-content: center;
  gap: .9rem;
  min-width: 0;
}
.ch-nav__dir { color: #e4c47a; font-size: 12px; font-weight: 400; letter-spacing: .12em; line-height: 1.6; }
.ch-nav__title { color: #f5efe3; font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.15; text-wrap: balance; }
.ch-nav__link--next { background: rgb(245 239 227 / 4%); }
.ch-nav__link:hover { background: rgb(245 239 227 / 8%); }
.ch-nav__link:focus-visible { outline: 2px solid #e4c47a; outline-offset: -6px; }
.ch-nav__intro { max-width: 1280px; margin-inline: auto; padding: 3rem 3rem 1rem; }
.ch-nav__intro h2 { font-size: clamp(2rem, 3vw, 2.75rem); line-height: 1.15; }
.ch-nav__intro p { margin-top: .8rem; max-width: 48ch; font-size: 19px; line-height: 1.6; }
.reference-page .ch-nav { background: #fffaf2; border-color: rgb(104 16 47 / 22%); }
.reference-page .ch-nav__intro h2,
.reference-page .ch-nav__title { color: #4d0826; }
.reference-page .ch-nav__intro p { color: #503a2d; }
.reference-page .ch-nav__dir { color: #76510e; }
.reference-page .ch-nav__link--next { background: #f4eddf; border-color: rgb(104 16 47 / 18%); }
.reference-page .ch-nav__link:hover { background: #eee3d0; }
.reference-page .ch-nav__link:focus-visible { outline-color: #68102f; }

.finale { padding-block: clamp(5rem, 12vw, 9rem); }
.learning-next { max-width: 660px; margin: 2.5rem auto 0; }
.learning-next h2 { color: #f5efe3; font-size: clamp(1.8rem, 3vw, 2.5rem); line-height: 1.15; }
.learning-next p { max-width: 40ch; margin: 1rem auto 1.5rem; font-size: 20px; line-height: 1.6; color: #e0d2c4; }
.learning-next__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .75rem 1.5rem; }
.learning-next__primary,
.learning-next__secondary,
.learning-next__nolea {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  font: 400 13px/1.5 var(--font-sans);
  letter-spacing: .03em;
}
.learning-next__primary { padding: .9rem 1.25rem; border: 1px solid #e4c47a; background: #f5efe3; color: #4d0026; }
.learning-next__primary:hover { background: #e8d5b7; }
.learning-next__secondary,
.learning-next__nolea { color: #e0d2c4; text-decoration: underline; text-underline-offset: .3em; }
.learning-next__secondary:hover,
.learning-next__nolea:hover { color: #f5efe3; }
.learning-next__nolea { margin-top: 1.5rem; }
.learning-next a:focus-visible { outline: 2px solid #e4c47a; outline-offset: 4px; }

.footer__tag { color: #dfd1c3; font-size: 18px; line-height: 1.65; }
.footer__col-label { color: #e4c47a; font-weight: 400; letter-spacing: .14em; }
.footer__col a { min-height: 44px; display: flex; align-items: center; margin-bottom: 0; font-size: 17px; line-height: 1.4; color: #e6dbce; }
.footer__credit,
.footer__credit a { color: #d9cabb; font-size: 11px; font-weight: 400; letter-spacing: .1em; line-height: 1.6; }
.footer__col a:focus-visible { outline: 2px solid #e4c47a; outline-offset: 3px; }

@media (max-width: 760px) {
  .article__inner > h2 { margin-top: 3.25rem; }
  .reference-page--library .library-finder__field input { min-height: 58px; padding-left: .8rem; font-size: 17px; }
  .ch-nav__link { padding: 2rem 1.5rem; }
  .ch-nav__link--next { text-align: left; }
  .ch-nav__intro { padding: 2.5rem 1.5rem .5rem; }
  .learning-next__actions { flex-direction: column; align-items: stretch; }
  .learning-next p { font-size: 19px; }
  .footer__grid { gap: 2.5rem 2rem; }
  .footer__brand { flex-basis: 100%; }
  .footer__col { min-width: 0; }
  .footer__signoff { margin-top: 3rem; }
}