/* =========================================================================
   Die Anker Pub - tokens and reset.
   Palette and type are the Bulshoekfarm family (taken from the farm's own
   signage): board green, sign gold, cream, clay. Petrona + Karla.
   ========================================================================= */

:root {
  --ink:        #131d0e;
  --forest:     #24361d;
  --moss:       #3d5232;
  --sage:       #7d8f6b;
  --sage-soft:  #b3bfa4;
  --gold:       #d9a93c;
  --gold-deep:  #a97d21;
  --clay:       #a9512f;
  --clay-deep:  #8c4024;
  --ok:         #3f6e2f;
  --cream:      #f7f2e6;
  --paper:      #fdfbf6;
  --page:       #f2efe6;
  --band:       #e8e3d5;
  --line:       #ddd6c4;
  --line-soft:  #e6dfcd;
  --field:      #cfc7b1;

  --display: 'Petrona', Georgia, serif;
  --body:    'Karla', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--body); line-height: 1.5; color: var(--ink); background: var(--page); }
img { max-width: 100%; display: block; }
svg { width: 20px; height: 20px; flex: none; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.15; letter-spacing: -.01em; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
[hidden] { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sr-only:focus { position: fixed; top: .5rem; left: .5rem; width: auto; height: auto; clip: auto; z-index: 100; background: #fff; padding: .5rem .8rem; }