/* Oak & Mason, the About page, v3 draft. Builds on om-tokens.css, om.css and inner.css.
   Built on 26 Sep 2026 from the canvas's page boards, after Alex's comments: the three rules in the system's register,
   who looks after what (the chain), Max by name without a portrait, regulation, the company record and questions,
   under the cask-yard hero band. Class prefix om-; these move into om.css and the design system once signed off.
   The options not chosen live on the canvas (project/about.css). */

[id="rules"], [id="custody"], [id="people"], [id="regulation"], [id="record"], [id="questions"] { scroll-margin-top: 24px; }

/* Hero band: the cask yard, carrying the company's own figures. On phones the year drops so two figures stay legible */
.om-bandhero__band--casks > img { object-position: 50% 40%; }
@media (max-width: 767px) {
  .om-bandhero__band--casks .om-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .om-bandhero__band--casks .om-tile:nth-child(3) { display: none; }
}

/* A small mono label, for what passes between parties and what you receive */
.om-label { margin: 0; font: 400 12px/18px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }

/* The rules: the system's register, with the document each rule leaves you in the last column */
.om-register__when--paper { color: var(--brass-text); }

/* Who looks after what: one lane per asset, from you to where it is kept, with what passes between */
.om-chainwrap { display: grid; gap: var(--space-6); }
.om-chain { display: grid; gap: var(--space-6); }
.om-chain__lane { display: grid; }
.om-chain__lanelabel { margin: 0 0 16px; }
.om-chain__node { display: grid; gap: 8px; align-content: start; box-sizing: border-box; padding: 22px 22px 24px; border-radius: var(--radius-md); background: var(--stone); }
.om-chain__who { margin: 0; font: 500 18px/24px var(--font-sans); letter-spacing: -0.01em; color: var(--ink); }
.om-chain__text { margin: 0; font: 400 16px/25px var(--font-sans); color: var(--ink-muted); text-wrap: pretty; }
.om-chain__node--keeper { background: var(--slate); }
.om-chain__lane--gold .om-chain__node--keeper { background: var(--peat); }
.om-chain__node--keeper .om-chain__who { color: var(--on-dark); }
.om-chain__node--keeper .om-chain__text { color: var(--on-dark-muted); }
.om-chain__gets { display: grid; gap: 2px; margin: 8px 0 0; padding-top: 14px; border-top: 1px solid var(--glass-line); font: 500 15px/22px var(--font-sans); color: var(--on-dark); }
.om-chain__gets .om-label { color: var(--brass-light); }
/* The link between two parties: a ruled line, an arrowhead, and what passes along it. Down the page on phones */
.om-chain__link { position: relative; display: flex; align-items: center; min-height: 56px; padding-left: 44px; }
.om-chain__link::before { content: ""; position: absolute; left: 24px; top: 8px; bottom: 8px; width: 1px; background: var(--line-strong); }
.om-chain__link::after { content: ""; position: absolute; left: 20px; bottom: 9px; width: 8px; height: 8px; box-sizing: border-box; border-right: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); transform: rotate(45deg); }
@media (min-width: 1024px) {
  .om-chain__lane { grid-template-columns: 180px minmax(0, 1fr) 128px minmax(0, 1fr) 128px minmax(0, 1.15fr); align-items: stretch; }
  .om-chain__lanelabel { margin: 0; padding-top: 28px; }
  .om-chain__node { padding: 28px 28px 30px; }
  .om-chain__link { min-height: 0; padding: 0; }
  .om-chain__link::before { left: 14px; right: 14px; top: 50%; bottom: auto; width: auto; height: 1px; }
  .om-chain__link::after { left: auto; right: 14px; top: 50%; bottom: auto; margin-top: -4px; transform: rotate(-45deg); }
  .om-chain__link .om-label { position: absolute; left: 0; right: 0; bottom: calc(50% + 10px); text-align: center; }
}

/* The note under the chain: a ruled line, a title and one paragraph */
.om-note { display: grid; gap: 10px; padding-top: 24px; border-top: 1px solid var(--line-strong); }
.om-note__title { margin: 0; font: 500 18px/24px var(--font-sans); letter-spacing: -0.01em; color: var(--ink); }
.om-note__text { margin: 0; max-width: 60em; font: 400 16px/25px var(--font-sans); color: var(--ink-muted); text-wrap: pretty; }
@media (min-width: 1024px) { .om-note { grid-template-columns: 360px minmax(0, 1fr); gap: 32px; align-items: baseline; padding-top: 28px; } }

/* The people: one person by name, the name on the left and the details beside it, no portrait */
.om-person { display: grid; gap: 32px; }
.om-person__head { display: grid; gap: 20px; align-content: start; justify-items: start; }
.om-person__body { display: grid; gap: 20px; align-content: center; justify-items: start; }
.om-person__name { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 40px; line-height: 44px; letter-spacing: -0.025em; font-variation-settings: 'opsz' 72; color: var(--slate-deep); }
.om-person__role { margin: -8px 0 0; font: 500 16px/24px var(--font-sans); color: var(--brass-text); }
.om-person__text { margin: 0; max-width: 34em; font: 400 18px/28px var(--font-sans); letter-spacing: -0.01em; color: var(--ink-muted); text-wrap: pretty; }
.om-person__facts { width: 100%; margin: 8px 0 0; border-top: 1px solid var(--line-strong); }
.om-person__facts > div { display: grid; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.om-person__facts dd { margin: 0; font: 400 17px/26px var(--font-sans); color: var(--ink); }
@media (min-width: 1024px) {
  .om-person { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 96px; align-items: center; }
  .om-person--plain { gap: 80px; align-items: start; }
  .om-person__name { font-size: 58px; line-height: 62px; }
  .om-person__facts > div { grid-template-columns: 180px minmax(0, 1fr); gap: 24px; align-items: baseline; }
}

/* Regulation, advice and complaints: the system's info cards, two by two */
.om-standing { display: grid; gap: var(--space-2); }
.om-standing .om-card { gap: 16px; }
.om-standing__text { margin: 0; max-width: 34em; font: 400 17px/27px var(--font-sans); letter-spacing: -0.01em; color: var(--ink-muted); text-wrap: pretty; }
@media (min-width: 768px) { .om-standing { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .om-standing .om-card { gap: 18px; padding: 44px 48px 48px; } }

/* Addresses and numbers inside sentences and rows: the text's own colour, underlined */
.om-person__facts dd a, .om-standing__text a, .om-record__row dd a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.om-person__facts dd a:hover, .om-standing__text a:hover, .om-record__row dd a:hover { text-decoration-thickness: 2px; }