/* Arnold's: Privacy and Accessibility, the two pages of plain words. Nothing new in them: the title block from the 404
   and Visit us pages (the big Caslon title, a quiet line under it), then one column of Figtree text, left on the
   same edge as the title and as wide as the home page's text panels. Tokens, footer and text links come from base.css;
   the top bar from header.css. The words themselves are in privacy.html and accessibility.html. */

/* Headings in Libre Caslon Display (Joe's pick, 23 Oct 2026); text stays Figtree. As on every other page. */
:root { --display: "Libre Caslon Display", "Caslon fallback Big Caslon", "Caslon fallback Georgia", "Caslon fallback Times New Roman", "Big Caslon", Georgia, serif; }

/* base.css draws focus rings in currentColor, which is white on the skip link's ink fill and vanishes on the white page. */
.skip-link:focus-visible { outline-color: var(--ink); }
::selection { background: var(--ink); color: var(--paper); }

/* ---------- Title (as on Visit us, Schedule a tasting and the 404 page) ----------
   The same grid and the same room round it: the big Caslon title on the left with its date ("Effective" or "Last updated") quietly under it (the
   note colour and size from base.css), the short lead sentence in the right-hand cell, its last line on the same
   baseline as the date line. (Where the browser can't align on a last baseline, the two cells share a bottom
   edge, as on those pages.) The phone stacks title, date, lead. */
.page-head { display: grid; grid-template-columns: 1fr minmax(0, 30em); align-items: end; align-items: last baseline; gap: 48px;
  padding: calc(var(--space-section) / 2) var(--edge) calc(var(--space-section) / 4); }
.page-title { display: grid; gap: 16px; }
.page-head .note { white-space: nowrap; }  /* the date stays on one line, so its cell never narrows below it */
.page-head h1 { font-size: clamp(64px, 8.4vw, 128px); line-height: .9; letter-spacing: -0.03em; }
.page-head .lead { font-size: var(--s-body); max-width: 30em; text-wrap: pretty; }

/* ---------- The words: one column of text ----------
   The reading width of the home page's panels (.panel-body), about 70 characters a line. */
.legal { padding: 0 var(--edge) var(--space-section); }
.legal-body { max-width: 32em; }
.legal-body h2 { font-size: var(--s-section); line-height: 1.1; margin: calc(var(--space-section) / 3) 0 16px; }
.legal-body p, .legal-body ul { margin: 0 0 1em; }
.legal-body p, .legal-body li { text-wrap: pretty; }  /* no single word left alone on a last line */
.legal-body > :last-child { margin-bottom: 0; }
.legal-body ul { padding-left: 1.25em; list-style: disc; }
.legal-body li + li { margin-top: .5em; }
.legal-body strong { font-weight: 500; }
.legal-body .text-link { font-size: inherit; }  /* text-link alone is 16px: inside a sentence it takes the sentence's size */
.legal-body .email { overflow-wrap: anywhere; }  /* the bakery's email address is one long word: it may break on a narrow phone */

/* Tablet and desktop: the bullets hang in the margin, so the list's words line up with the paragraphs round it.
   (Phones keep the indent: there is no margin to hang them in.) */
@media (min-width: 761px) {
  .legal-body ul { padding-left: 0; }
}

/* ---------- Phone ----------
   "Accessibility" is the longest title on the site, 4.3 times its own font size wide, so the size follows the screen
   down from 64px: it still fits a 320px screen when the browser keeps room for a scrollbar. */
@media (max-width: 760px) {
  .page-head { grid-template-columns: 1fr; align-items: start; gap: 16px; }
  .page-head h1 { font-size: min(64px, calc((100vw - 2 * var(--edge)) / 4.4));
    overflow-wrap: anywhere; }  /* "Accessibility" breaks only if it can't fit (a reader's wider letter spacing) */
}