/* Oak & Mason, the How it works page (/how-it-works), v3 draft. Builds on om-tokens.css, om.css and inner.css (Hero C
   and the contents strip, the inner-page pattern chosen on the whisky casks canvas).
   Chosen on the How it works canvas on 25 Sep 2026: the hero band as the warehouse and the vault side by side, the
   three stages each above the document it leaves you with, and where each is kept as one panel behind a switch.
   Also here: who does what, the two example records together, the five ways to sell, the costs stage by stage and a
   guide band offering both guides. Class prefix om-; these move into om.css and the design system once signed off.
   The options not chosen live on the canvas (project/hiw.css). */

[id="stages"], [id="kept"], [id="account"], [id="guide"] { scroll-margin-top: 24px; }
:where(.om-path) :where(a, button):focus-visible { box-shadow: var(--focus-ring-dark); }

/* Hero band: the warehouse and the vault side by side, the same central perspective in oak and in steel, each
   carrying its own starting price */
.om-bandhero__band--pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); padding: 0; border-radius: 0; overflow: visible; background: none; }
.om-bandhero__band--pair::before { display: none; }
.om-bandhero__half { position: relative; isolation: isolate; display: flex; align-items: flex-end; box-sizing: border-box; min-height: 380px; padding: 20px; border-radius: var(--radius-lg); overflow: hidden; background: var(--peat); }
.om-bandhero__half > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.om-bandhero__half::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, #1f2224b3 0%, #1f222400 55%); }
.om-bandhero__half .om-tile { width: min(100%, 300px); min-height: 96px; }
.om-bandhero__half--vault > img { object-position: 50% 58%; }
@media (min-width: 1024px) { .om-bandhero__half { min-height: 440px; padding: 32px; } }
@media (max-width: 767px) {
  .om-bandhero__band--pair { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .om-bandhero__half { min-height: 220px; padding: 12px; }
  .om-bandhero__half .om-tile { min-height: 84px; padding: 10px 12px 12px; gap: 12px; }
  .om-bandhero__half .om-tile__label { font-size: 13px; line-height: 17px; }
  .om-bandhero__half .om-tile__figure { font-size: 26px; }
}
@media (prefers-reduced-motion: no-preference) { .om-bandhero__half > img { animation: om-settle 14s var(--om-ease) both; } }

/* Who does what: a short labelled list under each stage */
.om-who { display: grid; gap: 14px; margin: 0; }
.om-who > div { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.om-who dt { font: 500 12px/18px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.om-who dd { margin: 0; font: 400 16px/25px var(--font-sans); color: var(--ink-muted); text-wrap: pretty; }

/* The three stages: each above the document it leaves you with, drawn on a sand plate, then what you do and what we
   do. The drawings are examples and hidden from screen readers; the caption and the text carry the facts. */
.om-papers { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-7); }
.om-papers__stage { display: grid; gap: 28px; align-content: start; }
.om-papers__plate { position: relative; display: grid; justify-items: center; align-items: start; aspect-ratio: 1; box-sizing: border-box; padding-top: 28px; overflow: hidden; border-radius: var(--radius-lg); background: var(--sand); }
.om-papers__caption { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2; display: grid; gap: 2px; margin: 0; padding: 12px 16px 13px; border-radius: var(--radius-sm); background: var(--paper); box-shadow: var(--shadow-card); font: 500 15px/22px var(--font-sans); color: var(--ink); }
.om-papers__caption span { font: 400 12px/18px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.om-papers__body { display: grid; gap: 14px; align-content: start; justify-items: start; }
.om-papers__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 0; }
.om-papers__when { font: 400 14px/20px var(--font-sans); color: var(--brass-text); }
.om-papers__title { margin: 0 0 4px; font-family: var(--font-serif); font-weight: 400; font-size: clamp(26px, 2.3vw, 32px); line-height: 1.15; letter-spacing: -0.015em; color: var(--slate-deep); text-wrap: balance; }
@media (min-width: 1024px) {
  .om-papers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .om-papers__plate { padding-top: 36px; }
  .om-papers__body { padding: 0 24px 0 8px; }
}

/* A document, drawn: A4 proportions, its lettering scaled to the sheet with container units, as on the guide cover.
   Our own documents carry the wordmark; the warehouse's and the vault's carry their issuer instead. A second document
   sits behind the first with its header showing above it, and its plate leaves room at the top for that. */
.om-paper { grid-area: 1 / 1; position: relative; z-index: 1; box-sizing: border-box; width: 72%; aspect-ratio: 210 / 297; padding: 6% 6% 0; border-radius: 6px; background: var(--paper); box-shadow: 0 1px 2px #16191a14, 0 16px 32px -18px #16191a52; container-type: inline-size; }
.om-paper--behind { z-index: 0; transform: translate(9%, -44px) rotate(2deg); }
.om-papers__plate--two { padding-top: 64px; }
@media (min-width: 1024px) {
  .om-papers__plate--two { padding-top: 72px; }
  .om-paper--behind { transform: translate(9%, -54px) rotate(2deg); }
}
.om-paper__top { display: flex; justify-content: space-between; align-items: center; gap: 4cqi; padding-bottom: 5cqi; border-bottom: 1px solid var(--line); }
.om-paper__mark { display: block; width: 34cqi; height: auto; }
.om-paper__issuer { font: 500 4cqi/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.om-paper__kind { font: 500 4cqi/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); text-align: right; }
.om-paper__title { margin: 8cqi 0 1.5cqi; font-family: var(--font-serif); font-weight: 400; font-size: 9cqi; line-height: 1.12; letter-spacing: -0.015em; color: var(--slate-deep); }
.om-paper__sub { margin: 0 0 5cqi; font: 400 3.6cqi/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--brass-text); }
.om-paper__rows { display: grid; margin: 0; border-top: 1px solid var(--sand); }
.om-paper__row { display: grid; grid-template-columns: 40% minmax(0, 1fr); gap: 3cqi; align-items: baseline; padding: 2.8cqi 0; border-bottom: 1px solid var(--sand); }
.om-paper__row dt { font: 500 3.6cqi/1.35 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-muted); }
.om-paper__row dd { margin: 0; font: 400 4.8cqi/1.35 var(--font-sans); color: var(--ink); }

/* Where it is kept: one panel at a time behind a two-way switch, whisky on slate and gold on peat. The page script
   makes the switch a set of tabs and can open either panel from the address (#kept-gold). Without the script both
   panels show, one above the other, and the switch stays hidden. */
.om-switch { display: grid; gap: 24px; }
.om-switch__bar { display: inline-flex; justify-self: center; gap: 4px; padding: 4px; border-radius: var(--radius-full); background: var(--stone); }
html:not(.om-js) .om-switch__bar { display: none; }
.om-switch__btn { min-height: 44px; padding: 0 22px; border: 0; border-radius: var(--radius-full); background: transparent; color: var(--ink); font: 500 15px/20px var(--font-sans); cursor: pointer; transition: background-color .2s var(--om-ease), color .2s var(--om-ease); }
.om-switch__btn:hover { background: var(--sand); }
.om-switch__btn[aria-selected="true"] { background: var(--ink); color: var(--on-dark); }
.om-switch__panels { display: grid; gap: var(--space-2); }
.om-path { display: grid; box-sizing: border-box; padding: 12px; border-radius: var(--radius-lg); background: var(--slate); color: var(--on-dark); --om-chip-ink: var(--slate); scroll-margin-top: 24px; }
.om-path[hidden] { display: none; }
.om-path--peat { background: var(--peat); --om-chip-ink: var(--peat); }
.om-path__media { position: relative; margin: 0; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius-md); background: var(--peat); }
.om-path__media img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.om-path__body { display: grid; gap: 20px; align-content: start; justify-items: start; padding: 28px 12px 16px; }
.om-path__title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: clamp(30px, 2.8vw, 40px); line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; }
.om-path__text { margin: 0; max-width: 30em; font: 400 17px/27px var(--font-sans); letter-spacing: -0.01em; color: var(--on-dark-muted); text-wrap: pretty; }
.om-path__facts { width: 100%; margin: 8px 0 0; border-top: 1px solid var(--glass-line); }
.om-path__fact { display: grid; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--glass-line); }
.om-path__fact dt { font: 500 12px/18px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--brass-light); }
.om-path__fact dd { margin: 0; font: 400 16px/24px var(--font-sans); color: var(--on-dark); }
@media (min-width: 480px) { .om-path__fact { grid-template-columns: minmax(0, 140px) minmax(0, 1fr); gap: 16px; align-items: baseline; } }
@media (min-width: 900px) {
  .om-path { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); padding: 16px; }
  .om-path__media { aspect-ratio: auto; min-height: 560px; }
  .om-path__body { padding: 40px 40px 32px 48px; }
}
@media (prefers-reduced-motion: no-preference) {
  .om-js .om-path:not([hidden]) { animation: om-fade .45s var(--om-ease) both; }
  .om-path__media img { transition: transform 1.2s var(--om-ease); }
  .om-path:hover .om-path__media img { transform: scale(1.02); }
}

/* Your account: the two example records, the cask's and the gold's, on one sand stage */
.om-records { display: grid; gap: 12px; }

/* Selling: the cask's three routes and the gold's two as ruled lists side by side, then the market note */
.om-sellboth { display: grid; gap: var(--space-7); }
.om-sellboth__col { display: grid; gap: 20px; align-content: start; }
.om-sellboth__head { display: grid; gap: 14px; justify-items: start; }
.om-sellboth__title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: clamp(28px, 2.4vw, 34px); line-height: 1.15; letter-spacing: -0.02em; color: var(--slate-deep); }
.om-exitrows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.om-exitrow { display: grid; gap: 8px; padding: 24px 0 26px; border-bottom: 1px solid var(--line); }
.om-exitrow__title { margin: 0; font: 500 20px/26px var(--font-sans); letter-spacing: -0.01em; color: var(--ink); }
.om-exitrow .om-routes__text { max-width: 34em; }
.om-sellboth__foot { display: grid; gap: 20px; justify-items: center; }
@media (min-width: 1024px) { .om-sellboth { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 80px; } }

/* Costs, stage by stage: a row per stage, whisky and gold side by side, each figure large with a line beneath */
.om-costs { width: 100%; max-width: 1120px; margin: 0 auto; }
.om-costs__table { width: 100%; border-collapse: collapse; }
.om-costs__table th, .om-costs__table td { padding: 26px 16px 28px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.om-costs__table thead th { padding-top: 0; padding-bottom: 14px; border-bottom: 1px solid var(--line-strong); font: 500 12px/18px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); vertical-align: bottom; }
.om-costs__table tbody th { width: 22%; padding-left: 0; font: 500 17px/24px var(--font-sans); color: var(--ink); }
.om-costs__table td { width: 39%; }
.om-costs__table th:last-child, .om-costs__table td:last-child { padding-right: 0; }
.om-costs__fig { display: block; margin: 0 0 8px; font-family: var(--font-serif); font-weight: 400; font-size: clamp(30px, 2.8vw, 40px); line-height: 1.05; letter-spacing: -0.02em; font-variation-settings: 'opsz' 72; color: var(--slate-deep); }
.om-costs__text { display: block; max-width: 26em; font: 400 16px/25px var(--font-sans); color: var(--ink-muted); text-wrap: pretty; }
.om-costs__note { margin: 20px 0 0; font: 400 15px/22px var(--font-sans); color: var(--ink-muted); }
@media (max-width: 767px) {
  .om-costs__table thead { display: none; }
  .om-costs__table, .om-costs__table tbody, .om-costs__table tr, .om-costs__table th, .om-costs__table td { display: block; width: auto; }
  .om-costs__table tr { padding: 20px 0; border-bottom: 1px solid var(--line); }
  .om-costs__table th, .om-costs__table td { padding: 0; border: 0; }
  .om-costs__table td { margin-top: 14px; }
  .om-costs__table td::before { content: attr(data-label); display: block; margin-bottom: 4px; font: 500 13px/18px var(--font-sans); color: var(--brass-text); }
}

/* Guide band offering both guides: the two covers on the sand stage, and a choice of guide in the form */
.om-guide__books { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; width: min(84%, 480px); }
.om-guide__books .om-guide__book { width: 100%; }
.om-choice { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.om-choice__legend { margin: 0 0 2px; padding: 0; font: 500 14px/20px var(--font-sans); color: var(--ink); }
.om-choice__opts { display: grid; gap: 8px; }
@media (min-width: 560px) { .om-choice__opts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.om-choice__opt { display: flex; align-items: center; gap: 12px; min-height: 52px; box-sizing: border-box; padding: 12px 16px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--paper); font: 500 15px/20px var(--font-sans); color: var(--ink); cursor: pointer; }
.om-choice__opt:hover { border-color: var(--ink); }
.om-choice__opt input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--slate); }
.om-choice__opt:has(input:checked) { border-color: var(--slate); box-shadow: inset 0 0 0 1px var(--slate); }