/* Oak & Mason, the UK gold page (/uk-gold), 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 UK gold canvas on 25 Sep 2026: hero band B (the shop's Britannias and Sovereigns composed on peat) and
   What you own A (the five coins at their true relative sizes on one rule). Also here: the two tax rules on peat,
   custody (the vault or your door) and the two ways to sell. Class prefix om-; these move into om.css and the design
   system once signed off. The options not chosen live on the canvas (project/gold.css). */

/* Hero band: Britannias and Sovereigns from the shop's product photographs, composed on peat and weighted right so
   the tiles sit on open ground */
.om-bandhero__band--coins > img { object-position: 50% 50%; }
@media (max-width: 767px) { .om-bandhero__band--coins > img { object-position: 72% 50%; } }

/* What you own: the five coins at their true relative sizes, standing on one rule, each with its specification.
   --mm is pixels per millimetre; the slot above the rule is the height of the largest coin. On phones, a list. */
.om-coins { padding: 56px var(--frame-inset) 0; }
.om-coins__panel { display: grid; gap: 40px; box-sizing: border-box; padding: 32px 20px 36px; border-radius: var(--radius-lg); background: var(--stone); }
.om-coins__intro { display: grid; gap: 18px; align-items: end; }
.om-coins__head { display: grid; gap: 18px; justify-items: start; }
.om-coins__title { margin: 0; max-width: 13em; 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); text-wrap: balance; }
.om-coins__side { display: grid; gap: 14px; }
.om-coins__lead { margin: 0; max-width: 34em; font: 400 17px/27px var(--font-sans); letter-spacing: -0.01em; color: var(--ink-muted); text-wrap: pretty; }
.om-coins__note { margin: 0; max-width: 44em; font: 400 14px/22px var(--font-sans); color: var(--ink-muted); }
.om-coins__tray { --mm: 2.6px; list-style: none; margin: 0; padding: 0; display: grid; }
.om-coin { display: grid; grid-template-columns: calc(32.69 * var(--mm)) minmax(0, 1fr); gap: 18px; align-items: center; margin: 0; padding: 16px 0; border-bottom: 1px solid var(--line); }
.om-coin:first-child { border-top: 1px solid var(--line); }
.om-coin__img { justify-self: center; display: block; max-width: none; height: auto; aspect-ratio: 1; border-radius: 50%; filter: drop-shadow(0 1px 1px #16191a33) drop-shadow(0 8px 12px #16191a24); }
.om-coin--oz1 .om-coin__img { width: calc(32.69 * var(--mm)); }
.om-coin--oz2 .om-coin__img { width: calc(27 * var(--mm)); }
.om-coin--sov .om-coin__img { width: calc(22.05 * var(--mm)); }
.om-coin--oz4 .om-coin__img { width: calc(22 * var(--mm)); }
.om-coin--oz10 .om-coin__img { width: calc(16.5 * var(--mm)); }
.om-coin__body { display: grid; gap: 2px; justify-items: start; }
.om-coin__size { margin: 0 0 4px; font: 400 12px/18px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--brass-text); }
.om-coin__name { margin: 0; font: 500 17px/24px var(--font-sans); letter-spacing: -0.01em; color: var(--ink); }
.om-coin__spec { margin: 0; font: 400 15px/23px var(--font-sans); color: var(--ink-muted); }
.om-coins__foot { display: grid; gap: 8px; }
@media (min-width: 1024px) {
  .om-coins { padding-top: 72px; }
  .om-coins__panel { gap: 64px; padding: 64px; }
  .om-coins__intro { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; }
  .om-coins__title { font-size: 38px; line-height: 45px; }
  .om-coins__lead { font-size: 18px; line-height: 28px; }
  .om-coins__tray { --mm: 4.6px; position: relative; grid-template-columns: repeat(5, auto); justify-content: space-between; align-items: start; column-gap: 24px; }
  .om-coins__tray::before { content: ""; position: absolute; left: 0; right: 0; top: calc(32.69 * var(--mm) + 16px); height: 1px; background: var(--line-strong); }
  .om-coin, .om-coin:first-child { grid-template-columns: none; grid-template-rows: calc(32.69 * var(--mm)) auto; gap: 33px; justify-items: center; align-items: end; padding: 0; border: 0; }
  .om-coin__body { justify-items: center; text-align: center; }
  .om-coins__foot { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 24px; }
}
@media (min-width: 1200px) { .om-coins__tray { --mm: 6.8px; } }

/* Tax: the two rules on the gold panel, one for buying and one for selling, then the link and the caveat */
.om-rules__body { display: grid; gap: 32px; padding-top: 32px; }
.om-rules__rule { display: grid; gap: 14px; align-content: start; }
.om-rules__when { margin: 0; font: 400 12px/18px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--brass-light); }
.om-rules__figure { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: clamp(38px, 3.5vw, 50px); line-height: 1.05; letter-spacing: -0.02em; font-variation-settings: 'opsz' 72; color: var(--on-dark); text-wrap: balance; }
.om-rules__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-rules__foot { display: grid; gap: 18px; justify-items: start; margin-top: 40px; }
.om-rules__foot .om-panel__note { margin: 0; width: 100%; }
@media (min-width: 900px) {
  .om-rules__body { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding-top: 40px; }
  .om-rules__rule:first-child { padding-right: 48px; }
  .om-rules__rule + .om-rules__rule { padding-left: 48px; border-left: 1px solid var(--glass-line); }
}

/* Where it is held: the vault as a place card beside a stone card for delivery to your door */
.om-custody { display: grid; gap: var(--space-2); }
@media (min-width: 900px) { .om-custody { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.om-custody__home { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; box-sizing: border-box; padding: 32px 24px; border-radius: var(--radius-lg); background: var(--stone); }
@media (min-width: 768px) { .om-custody__home { padding: 48px; } }
@media (min-width: 1100px) { .om-custody__home { min-height: 620px; } }
.om-custody__head { display: grid; gap: 16px; justify-items: start; }
.om-custody__title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: clamp(28px, 2.6vw, 38px); line-height: 1.15; letter-spacing: -0.02em; color: var(--slate-deep); text-wrap: balance; }
.om-custody__text { margin: 0; max-width: 30em; font: 400 17px/27px var(--font-sans); letter-spacing: -0.01em; color: var(--ink-muted); text-wrap: pretty; }
.om-custody__home .om-checks { gap: 12px; }
.om-custody__note { margin: 0; padding-top: 20px; border-top: 1px solid var(--line); font: 400 15px/24px var(--font-sans); color: var(--ink-muted); }

/* Selling: the two routes as stone cards, the timing in mono, then the market note */
.om-exits { display: grid; gap: var(--space-2); }
@media (min-width: 900px) { .om-exits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.om-exit { display: grid; gap: 14px; align-content: start; justify-items: start; box-sizing: border-box; padding: 32px 24px 36px; border-radius: var(--radius-lg); background: var(--stone); }
@media (min-width: 1100px) { .om-exit { padding: 48px 48px 52px; } }
.om-exit__title { margin: 4px 0 0; font-family: var(--font-serif); font-weight: 400; font-size: clamp(28px, 2.6vw, 38px); line-height: 1.15; letter-spacing: -0.02em; color: var(--slate-deep); }