/* Oak & Mason, the guide pages (/whisky-guide and /gold-guide), v3 draft. Builds on om-tokens.css and om.css.
   Built on 27 Sep 2026 from the guide pages canvas as picked: first screen C (the guide band from the inner pages, as
   the whole first screen) and inside B (four pages of the guide above its contents). One page per guide: /gold-guide
   keeps the old site's address, /whisky-guide is new. Class prefix om-; these move into om.css and the design system
   once signed off. The options not chosen live on the canvas (project/guides.css). */

[id="request"] { scroll-margin-top: 96px; }
[id="inside"], [id="next"], [id="questions"] { scroll-margin-top: 24px; }

/* The last section before the footer: no closing panel, so the footer's own top space is enough (as on Contact) */
.om-section--end { padding-bottom: 0; }

/* First screen: the guide band (om-guide in om.css), with the page title */
.om-gpanel { padding: 104px 0 0; }
.om-guide__title--page { font-size: 38px; line-height: 44px; }
@media (min-width: 1024px) {
  .om-gpanel { padding-top: 136px; }
  .om-guide__title--page { font-size: 52px; line-height: 58px; letter-spacing: -0.025em; }
}
/* Until the band splits into two columns (1100px), a smaller cover keeps the title in the first screen */
@media (max-width: 1099px) {
  .om-gpanel .om-guide__stage { min-height: 0; padding: 32px 0; }
  .om-gpanel .om-guide__book { width: min(34%, 150px); }
}
@media (prefers-reduced-motion: no-preference) {
  .om-gpanel .om-guide__intro > *, .om-gpanel .om-guide__list, .om-gpanel .om-guide__form { animation: om-rise .9s var(--om-ease) both; }
  .om-gpanel .om-guide__intro > :nth-child(2) { animation-delay: .06s; }
  .om-gpanel .om-guide__intro > :nth-child(3) { animation-delay: .12s; }
  .om-gpanel .om-guide__list { animation-delay: .18s; }
  .om-gpanel .om-guide__form { animation-delay: .24s; }
}

/* Messages from form-validate.js under the email and phone fields: an error, or a suggested correction to accept */
.field-msg { display: block; margin: 0; font: 400 14px/20px var(--font-sans); color: var(--ink-muted); }
.field-msg:empty { display: none; }
.field-msg--err { font-weight: 500; color: var(--danger); }
.field-msg--sug { color: var(--ink-soft); }
.field-msg-btn { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* What is in the guide: one stone panel, four pages on sand above the heading and the contents */
.om-inpanel { display: grid; gap: 32px; box-sizing: border-box; padding: 28px 20px 32px; border-radius: var(--radius-lg); background: var(--stone); }
@media (min-width: 1024px) { .om-inpanel { gap: 48px; padding: 64px; } }
.om-inpanel__cols { display: grid; gap: 28px; }
@media (min-width: 1024px) { .om-inpanel__cols { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; } }
.om-inside__head { display: grid; gap: 14px; justify-items: start; }
.om-inside__title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 30px; line-height: 36px; letter-spacing: -0.02em; font-variation-settings: 'opsz' 60; color: var(--slate-deep); }
.om-inside__lead { margin: 0; max-width: 30em; font: 400 17px/27px var(--font-sans); color: var(--ink-muted); text-wrap: pretty; }
@media (min-width: 1024px) { .om-inside__title { font-size: 38px; line-height: 45px; } .om-inside__lead { font-size: 18px; line-height: 28px; } }
.om-inside__main { display: grid; gap: 28px; align-content: start; }
.om-inside__main > .om-link { justify-self: start; }
.om-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 16px; border-radius: var(--radius-md); background: var(--sand); list-style: none; }
@media (min-width: 1024px) { .om-strip { gap: 16px; padding: 24px; } }
.om-strip__page { display: grid; align-content: start; gap: 8px; margin: 0; }
.om-strip__img { display: block; width: 100%; height: auto; aspect-ratio: 210 / 297; border-radius: 2px; box-shadow: 0 1px 2px #16191a14, 0 8px 16px -10px #16191a59; }
.om-strip__cap { display: grid; margin: 0; font: 400 14px/18px var(--font-sans); color: var(--ink-soft); }
.om-strip__n { font: 400 12px/18px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
@media (max-width: 559px) { .om-strip__cap span:not(.om-strip__n) { display: none; } }
/* The guide's contents page, as a list */
.om-contents { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.om-contents > li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 10px 0 11px; border-bottom: 1px solid var(--line); }
.om-contents__n { font: 400 12px/18px var(--font-mono); letter-spacing: .06em; color: var(--ink-muted); }
.om-contents__t { font: 400 17px/24px var(--font-sans); color: var(--ink); }

/* What happens after you ask: three info cards, their links level along the foot (the thank-you pages' cards) */
.om-cards--next .om-card { grid-template-rows: auto 1fr auto; }
.om-cards--next .om-card > .om-link, .om-cards--next .om-card > .om-btn { justify-self: start; }
.om-card__text { margin: 0; font: 400 17px/27px var(--font-sans); color: var(--ink-muted); text-wrap: pretty; }

/* FAQ answers that carry a link */
.om-faq__a a { color: var(--ink); text-underline-offset: 3px; }

/* The other guide: a stone card at the foot, its cover beside a link to its page */
.om-other { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 20px; align-items: center; box-sizing: border-box; padding: 20px; border-radius: var(--radius-lg); background: var(--stone); }
@media (min-width: 768px) { .om-other { grid-template-columns: 120px minmax(0, 1fr) auto; gap: 40px; padding: 32px 40px; } }
.om-other__cover { display: block; width: 100%; height: auto; aspect-ratio: 210 / 297; border-radius: 3px; box-shadow: 0 1px 2px #16191a24, 0 10px 20px -12px #16191a80; }
.om-other__body { display: grid; gap: 10px; justify-items: start; }
.om-other__title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 26px; line-height: 32px; letter-spacing: -0.015em; color: var(--slate-deep); }
.om-other__text { margin: 0; max-width: 40em; font: 400 17px/27px var(--font-sans); color: var(--ink-muted); text-wrap: pretty; }
@media (min-width: 768px) { .om-other__title { font-size: 30px; line-height: 36px; } }
@media (max-width: 767px) { .om-other > .om-link { grid-column: 1 / -1; } }