/* ==========================================================================
   Field Guide — jeffraben.com
   Kraft-paper ground, parchment page, burnt-orange display type, ink rules.
   Design tokens are the source of truth. Retune here, not in the markup.

   This replaced "Nocturne" (the dark electric-blue theme) in September 2026.
   Every class name from Nocturne is still here, because the recipe box,
   the states map, the ballparks pages and the signed-in chrome all layer on
   this file and were not rewritten. What changed is the VALUES.
   ========================================================================== */

/* — fonts —
   Loaded here rather than in each page's <head>, so a page that forgets the
   <link> (the recipe box never had one) still gets the faces. Pages that also
   carry the <link> use the identical URL, so the browser fetches it once.

   Anton        display — section heads, the JR mark, the brand row
   Oswald       nav, tagline, eyebrows, buttons, small caps labels
   Roboto Serif titles (condensed bold) and body text (normal width)   */
@import url("https://fonts.googleapis.com/css2?family=Anton&family=Oswald:wght@400;500&family=Roboto+Serif:opsz,wdth,wght@8..144,62..100,400..800&display=swap");

/* — tokens — */
:root {
  --color-bg: #efe5cf;        /* parchment */
  --color-kraft: #c8b28c;     /* the ground the sheet sits on (home page) */
  --color-surface: #f5eddb;   /* cards, inputs: a shade lighter than the page */
  --color-text: #2a2420;      /* ink */
  --color-accent: #c4582a;    /* burnt orange */
  /* The same, deeper. Use it for accent-coloured TEXT at body size, and for a
     fill that has text on it: --color-accent is 3.51:1 on parchment, which is
     fine for a rule or a swatch or display type at 24px and up, and under the
     floor for every kicker, tagline, link and filled button it was also
     colouring. This measures 4.65 on the page and 4.99 on a card. */
  --color-accent-2: #a8481f;
  --color-divider: rgba(58, 50, 44, 0.32);
  --color-rule: #3a322c;      /* the 2px ink rules */

  /* Tonal ramps — CONTRAST steps, not lightness steps. 100 is the furthest
     from the page (ink / deep orange), 900 the closest to it (a tint). That
     is the same meaning the dark theme gave them, which is why every
     "neutral-400 for muted text, neutral-900 for a quiet surface" in the
     layered stylesheets still reads right on paper. */
  --color-neutral-100: #2a2420;
  --color-neutral-200: #3d3631;
  --color-neutral-300: #524941;
  --color-neutral-400: #6f6257;
  --color-neutral-500: #8a7b6d;
  --color-neutral-600: #a5957f;
  --color-neutral-700: #bfae95;
  --color-neutral-800: #d4c5a8;
  --color-neutral-900: #e6d9bd;

  /* Text that is meant to sit quieter than the ink, without sitting below
     what a person can comfortably read.

     The neutral ramp above is a CONTRAST ramp with a surface end, so its
     quiet steps (500 through 900) are tints made to sit UNDER text, not to
     be text. The recipe box used them as text anyway, and a 600 label on
     parchment measures 2.3:1 — under half the 4.5:1 that small text needs,
     and it showed: the box read as washed out on a phone in daylight.

     These two are measured, not eyeballed: on both the page (#efe5cf) and a
     card (#f5eddb) muted clears 6.5:1 and quiet clears 4.9:1. Use them for
     any text that wants to recede. The neutral steps stay for what they are
     good at — rules, borders and tinted surfaces. */
  --color-text-muted: #554e47;   /* secondary text: 6.5:1 on page, 7.0:1 on card */
  --color-text-quiet: #686057;   /* the quietest it should ever get: 4.9 / 5.3 */

  --color-accent-100: #7d3315;
  --color-accent-200: #a8481f;
  --color-accent-300: #b9512a;
  --color-accent-400: #c4582a;
  --color-accent-500: #cf7048;
  --color-accent-600: #d98a68;
  --color-accent-700: #e3a88c;
  --color-accent-800: #ecc6b2;
  --color-accent-900: #f1dccd;

  --font-display: 'Anton', 'Impact', 'Arial Narrow', sans-serif;
  --font-gothic: 'Oswald', 'Arial Narrow', sans-serif;
  --font-heading: 'Roboto Serif', Georgia, 'Times New Roman', serif;
  --font-heading-weight: 700;
  --font-body: 'Roboto Serif', Georgia, 'Times New Roman', serif;
  --font-util: system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Spacing scale — 2.8px base unit. */
  --space-1: 2.8px;
  --space-2: 5.6px;
  --space-3: 8.4px;
  --space-4: 11.2px;
  --space-5: 14px;
  --space-6: 16.8px;
  --space-8: 22.4px;

  /* Vertical section rhythm. */
  --rhythm: 28px;

  /* A printed page has no rounded corners. Pills that hardcode 999px keep
     their shape; everything on the token scale goes square. */
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;

  --shadow-sm: 0 0 0 1px rgba(58, 50, 44, 0.28);
  --shadow-md: 0 0 0 1px rgba(58, 50, 44, 0.45), 0 6px 18px rgba(50, 35, 15, 0.18);
  --shadow-lg: 0 0 0 1px rgba(58, 50, 44, 0.55), 0 16px 40px rgba(50, 35, 15, 0.28);

  /* Paper grain — an SVG turbulence filter, no image file. Two strengths:
     the sheet is faint, the kraft ground is heavier. */
  --grain-paper: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.35  0 0 0 0 0.27  0 0 0 0 0.15  0 0 0 0.10 0'/></filter><rect width='300' height='300' filter='url(%23p)'/></svg>");
  --grain-kraft: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.25  0 0 0 0 0.18  0 0 0 0 0.10  0 0 0 0.28 0'/></filter><rect width='400' height='400' filter='url(%23p)'/></svg>");
}

/* — base — */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-variation-settings: 'wdth' 100, 'opsz' 14;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  color: var(--color-text);
  background-color: var(--color-bg);
  background-image: var(--grain-paper);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* The home page: a parchment sheet on a kraft ground. Sub-pages are the
   parchment edge to edge, so they need neither class. */
body.kraft {
  background-color: var(--color-kraft);
  background-image: var(--grain-kraft), radial-gradient(ellipse at 50% 0%, #d6c39f, var(--color-kraft) 70%);
}
.sheet {
  max-width: 1200px;
  margin: 0 auto;
  background-color: var(--color-bg);
  background-image: var(--grain-paper);
  box-shadow: 0 0 0 1px rgba(60, 45, 25, 0.15), 0 18px 50px rgba(50, 35, 15, 0.25);
  padding: 28px clamp(16px, 4vw, 60px) 40px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-variation-settings: 'wdth' 70, 'wght' 750, 'opsz' 60;
  line-height: 1.05;
  letter-spacing: -0.005em;
  margin: 0 0 var(--space-2);
  text-wrap: balance;
}

p { margin: 0 0 var(--space-3); }
img { display: block; max-width: 100%; }

/* accent-300 measured 3.9:1 on parchment — under the floor for link text at
   body size, and links are the one thing you must be able to pick out. */
a { color: var(--color-accent-200); text-decoration: none; text-underline-offset: 3px; }
/* Hover went to accent-2, which is now what a link already is — so it changed
   nothing but the underline. Go one step deeper instead. */
a:hover { color: var(--color-accent-100); text-decoration: underline; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* Respect users who ask for reduced motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Visually hidden but available to screen readers. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Skip link — first tab stop, so keyboard users can jump the nav. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--color-text); color: var(--color-bg);
}
.skip-link:focus { left: 0; }

/* — layout — */
.wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 72px);
}

/* The rule is the theme's one structural device: a 2px ink line. */
.rule {
  height: 0;
  border: 0;
  border-top: 2px solid var(--color-rule);
  margin: 0;
  background: none;
}
.rule-thin { border-top-width: 1px; }

/* — nav (the simple one sub-pages use; the home page has the masthead) — */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-5) clamp(20px, 5vw, 72px);
  border-bottom: 2px solid var(--color-rule);
}
.nav-brand {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.nav-brand a { color: inherit; }
.nav-brand a:hover { color: var(--color-accent-2); text-decoration: none; }
.nav-links { display: flex; gap: var(--space-8); align-items: center; flex-wrap: wrap; }
.nav-links a {
  color: var(--color-neutral-200);
  font-family: var(--font-gothic);
  font-size: 18px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.nav-links a:hover,
.nav-links a[aria-current='page'] { color: var(--color-accent-2); text-decoration: none; }

/* — masthead (home page and 404) — */
.tagline {
  text-align: center;
  font-family: var(--font-gothic);
  font-weight: 400;
  font-size: clamp(14px, 1.9vw, 22px);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-accent-2);
  padding: 6px 0 14px;
  margin: 0;
  text-wrap: balance;
}
.brands {
  display: grid;
  grid-template-columns: 1fr 1fr auto 1fr 1fr;
  align-items: center;
  justify-items: center;
  gap: 12px;
  padding: 18px 0 8px;
}
.brand {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.4vw, 30px);
  line-height: 0.95;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-neutral-200);
  text-align: center;
  text-wrap: balance;
}
.brand:hover { color: var(--color-accent-2); text-decoration: none; }
/* A brand slot with a mark over its name: the blog's round Raben IT logo
   with "Raben IT Blog" beneath, in the same gothic as the other slots. */
.brand-logo { display: grid; justify-items: center; gap: 6px; }
.brand-logo img { width: clamp(40px, 4.4vw, 56px); height: auto; border-radius: 50%; box-shadow: 0 0 0 2px var(--color-rule); }
.brand-logo span { font-family: var(--font-gothic); font-weight: 500; font-size: clamp(11px, 1.2vw, 14px); letter-spacing: 0.14em; line-height: 1; }
.brand-logo:hover img { box-shadow: 0 0 0 2px var(--color-accent); }
.mark { display: grid; justify-items: center; gap: 2px; color: var(--color-text); }
.mark:hover { text-decoration: none; }
.mark-word { font-family: var(--font-display); font-size: clamp(44px, 6vw, 72px); line-height: 0.9; color: var(--color-accent); letter-spacing: 0.01em; }
.mark-since { font-family: var(--font-gothic); font-size: 11px; letter-spacing: 0.42em; color: var(--color-accent-2); margin-top: 2px; padding-left: 0.42em; }
.mark .figure { width: clamp(70px, 8vw, 96px); height: auto; margin-top: 6px; }

.masthead-nav {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 18px;
  padding: 10px 0;
  font-family: var(--font-gothic);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(17px, 2vw, 24px);
  letter-spacing: 0.02em;
  color: var(--color-neutral-200);
}
.masthead-nav a { color: inherit; padding: 2px 0; }
.masthead-nav a:hover,
.masthead-nav a[aria-current='page'] { color: var(--color-accent-2); text-decoration: none; }

/* — sections — */
.section { padding: calc(2.5 * var(--rhythm)) 0; }

/* Eyebrow above a title: small condensed caps in orange. */
.kicker {
  display: block;
  font-family: var(--font-gothic);
  font-weight: 500;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-2);
  margin: 0 0 10px;
}

/* Section heads in the display face — AoM's "MOST RECENT". */
.section-title,
.display {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: normal;
  text-transform: uppercase;
  color: var(--color-accent);
  font-size: clamp(34px, 4vw, 52px);
  line-height: 0.95;
  letter-spacing: 0.005em;
  margin: 0 0 18px;
}

/* A title in the condensed serif: article and card titles. */
.title {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-variation-settings: 'wdth' 70, 'wght' 750, 'opsz' 60;
  line-height: 1.02;
  letter-spacing: -0.005em;
  color: var(--color-text);
  text-wrap: balance;
  margin: 0;
}

.prose {
  font-size: 16.5px;
  line-height: 1.6;
  max-width: 66ch;
  margin: 0 0 14px;
  color: var(--color-text);
}
.prose:last-child { margin-bottom: 0; }
.prose a { color: var(--color-accent-2); border-bottom: 1px solid currentColor; }
.prose a:hover { text-decoration: none; color: var(--color-accent-2); }
/* Drop cap on the first paragraph of a run of prose. */
.dropcap::first-letter {
  font-family: var(--font-display);
  float: left;
  font-size: 3.6em;
  line-height: 0.78;
  padding: 8px 10px 0 0;
  color: var(--color-accent);
}

.byline {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  font-family: var(--font-gothic); text-transform: uppercase; letter-spacing: 0.1em; font-size: 12px;
  color: var(--color-neutral-400); margin: 0;
}
.byline b { color: var(--color-text); font-weight: 500; }

/* — hero (sub-pages and the 404 still use these) — */
.hero {
  padding: calc(3 * var(--rhythm)) 0 calc(2.5 * var(--rhythm));
  animation: fadeUp 0.5s ease both;
}
.hero-title {
  font-size: clamp(36px, 5vw, 64px);
  margin: 0;
}
.hero-title span { display: block; }
.hero-lede {
  font-size: 18px;
  line-height: 1.55;
  max-width: 58ch;
  margin: 20px 0 0;
}
.hero-actions { display: flex; gap: var(--space-4); margin-top: 24px; flex-wrap: wrap; }

/* — buttons — a block of orange with a hard ink shadow, like a stamp — */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-gothic);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text);
  background: transparent;
  border: 1.5px solid var(--color-rule);
  padding: 10px 16px;
  border-radius: 0;
}
.btn:hover { text-decoration: none; background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-primary { color: var(--color-bg); background: var(--color-accent-2); border-color: var(--color-accent-2); box-shadow: 3px 3px 0 var(--color-text); }
.btn-primary:hover { background: var(--color-accent-2); border-color: var(--color-accent-2); color: var(--color-bg); }
.btn-primary:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--color-text); }

.btn-ink { color: var(--color-bg); background: var(--color-text); border-color: var(--color-text); box-shadow: 3px 3px 0 var(--color-accent); }
.btn-ink:hover { background: var(--color-neutral-200); border-color: var(--color-neutral-200); color: var(--color-bg); }

.btn-ghost { color: var(--color-accent-2); border-color: transparent; padding-inline: var(--space-2); }
.btn-ghost:hover { background: transparent; color: var(--color-accent-2); border-color: transparent; text-decoration: underline; }

/* — cards — index cards: a shade lighter than the page, a thin ink ring — */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6);
  border-radius: 0;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}
.card-kicker {
  font-family: var(--font-gothic);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-2);
  margin: 0;
}
.card-title {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-variation-settings: 'wdth' 70, 'wght' 750, 'opsz' 60;
  font-size: 20px;
  line-height: 1.05;
  margin: 0;
}
.card-body { margin: 0; font-size: 14px; color: var(--color-neutral-300); flex: 1; }
.card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-util);
  font-size: 11.5px;
  margin: 0;
  color: var(--color-neutral-400);
}

/* Link cards — the whole card is the hit target. */
a.card { color: inherit; transition: box-shadow 0.2s ease, transform 0.2s ease; }
a.card:hover {
  text-decoration: none;
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
a.card:hover .card-title { color: var(--color-accent-2); }

/* Placeholder cards — no destination yet, so they must not look clickable. */
.card-soon { opacity: 0.62; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-6);
}

/* — the sidebar list: thumbnail left, eyebrow + title right — */
.recent { display: grid; gap: 22px; align-content: start; }
.recent a { display: grid; grid-template-columns: 118px 1fr; gap: 14px; align-items: start; color: inherit; }
.recent a:hover { text-decoration: none; }
.recent a:hover .title { color: var(--color-accent-2); }
.recent .title { font-size: 20px; margin-top: 3px; }
.recent .where { font-family: var(--font-util); font-size: 11px; color: var(--color-neutral-400); margin-top: 4px; display: block; }
.thumb {
  aspect-ratio: 4 / 3;
  background: var(--color-neutral-900);
  border: 1px solid var(--color-divider);
  display: grid; place-items: center;
  color: var(--color-text);
}
.thumb svg { width: 70%; height: 70%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* — tags — */
.tag {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  font-family: var(--font-gothic);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 0;
}
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent-2); }
.tag-neutral { background: var(--color-neutral-800); color: var(--color-neutral-100); }

/* — forms — a paper form: label in small caps, a ruled line to write on — */
.form { display: grid; gap: var(--space-6); max-width: 560px; }
.field > label {
  display: block;
  font-family: var(--font-gothic);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 6px;
  color: var(--color-neutral-200);
}
.input {
  width: 100%;
  min-height: 38px;
  padding: 8px 6px;
  font: inherit;
  font-size: 15px;
  color: var(--color-text);
  caret-color: var(--color-accent);
  background: rgba(255, 255, 255, 0.35);
  border: 0;
  border-bottom: 2px solid var(--color-rule);
  border-radius: 0;
}
.input:hover { background: rgba(255, 255, 255, 0.5); }
.input:focus-visible { border-bottom-color: var(--color-accent); background: rgba(255, 255, 255, 0.55); outline: none; }
textarea.input { min-height: 110px; resize: vertical; }

/* — footer — */
.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: calc(1.5 * var(--rhythm)) 0;
  font-family: var(--font-util);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--color-neutral-300);
}
.footer-links { display: flex; gap: var(--space-6); }

/* Deploy stamp. Readable on a phone, which is the one place you actually
   check whether a change is live yet. */
.site-version {
  font-family: var(--font-util);
  font-size: 12px;
  color: var(--color-neutral-400);
}

/* The big footer on the home page: tagline split around the seal, then link
   columns with vertical dividers, then the notice strip. */
.seal-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding: 26px 0; }
.seal-row .tagline { padding: 0; font-size: clamp(13px, 1.6vw, 20px); }
.seal-row .tagline:first-child { text-align: right; }
.seal-row .tagline:last-child { text-align: left; }
.seal { width: 104px; height: 104px; }
.cols { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); padding: 34px 0 30px; }
.col { padding: 0 18px; border-left: 1px solid var(--color-rule); display: grid; gap: 10px; align-content: start; justify-items: center; text-align: center; }
.col:first-child { border-left: 0; }
.col h3 { font-family: var(--font-gothic); font-weight: 400; font-variation-settings: normal; text-transform: uppercase; font-size: 24px; line-height: 1; color: var(--color-neutral-200); margin: 0; }
.col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-family: var(--font-util); font-size: 13px; color: var(--color-neutral-200); }
.col ul a { color: inherit; }
.col ul a:hover { color: var(--color-accent-2); text-decoration: none; }
.social { display: grid; grid-template-columns: repeat(2, 36px); gap: 12px; justify-content: center; }
.social a {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--color-neutral-200); color: var(--color-bg);
  display: grid; place-items: center;
}
.social a:hover { background: var(--color-accent); color: var(--color-bg); text-decoration: none; }
.social svg { width: 18px; height: 18px; fill: currentColor; display: block; }
.notice { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; padding: 14px 0 16px; font-family: var(--font-util); font-size: 12px; color: var(--color-neutral-200); }
.notice p { margin: 0; }
.notice .right { text-align: right; display: grid; gap: 4px; }

/* — persistent link bar —
   Fixed to the bottom on every page, where AoM keeps its podcast player.
   Social links on the left, the deploy stamp and a status link on the right.
   body gets padding-bottom so page content never hides behind it. */
/* The bar is pinned by /css/footbar.css now, the same one every other section
   uses, so none of the positioning lives here any more — it was a second
   implementation of the same idea, with its own height, its own padding and
   its own idea of where the bottom of the screen is. What is left is what
   makes this one a LINK bar rather than a plain one: the icon row.

   It is full-bleed now rather than a centred 1200px slab. That is the visible
   change, and it is the point: it matches the trail, the ballparks, the
   recipe box and the rest. */
.linkbar {
  gap: 14px;
}
/* The gutter the shared bar leaves to each section's own wrapper. */
.linkbar .jr-footbar-inner {
  gap: 14px;
  padding: 0 clamp(16px, 4vw, 60px);
}
/* Nine 34px icons need 300px before anything else is on the bar, so on a
   phone the icons, the build stamp and the Site Status button cannot all be
   there. Tightening the gaps bought six pixels and the shortfall was sixty.
   The button goes: the stamp is a fact you read, the button is a link to a
   page you can also reach by typing its address, and the icons are what makes
   this a link bar at all. The old bar made the opposite trade and hid the
   stamp; it is on every section's footer now, so it is the one worth keeping
   in front of you. */
@media (max-width: 620px) {
  .linkbar .jr-footbar-inner { gap: 8px; padding: 0 10px; }
  .linkbar-icons { gap: 4px; min-width: 0; }
  .linkbar-status { gap: 8px; flex: none; }
  .linkbar-cta { display: none; }
  /* 26px, not 34: the stamp needs about 90px and nine icons at 34 leave 80.
     The icon row is the half that can give, and an icon still reads at 26. */
  .linkbar a.icon,
  .linkbar-icons > a { width: 26px; height: 26px; }
  .linkbar svg { width: 14px; height: 14px; }
  .linkbar .rabenit-logo { width: 18px; height: 18px; }
}

/* This bar carries more than the others — nine icons where the rest carry a
   sentence — so the date comes back later here than the shared 560px. Between
   620 and 860 the button is back and the icons are full size, and the date is
   what does not fit; above 860 everything does. */
@media (max-width: 860px) {
  .linkbar .jr-when { display: none; }
}
.linkbar-icons { display: flex; gap: 6px; }
.linkbar a.icon,
.linkbar-icons > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-neutral-200);
  color: var(--color-bg);
  transition: background 0.15s ease;
}
.linkbar a.icon:hover,
.linkbar-icons > a:hover { background: var(--color-accent); color: var(--color-bg); text-decoration: none; }
.linkbar svg { width: 17px; height: 17px; display: block; fill: currentColor; }
.linkbar .rabenit-logo { width: 22px; height: 22px; border-radius: 50%; }
.linkbar-status { margin-left: auto; display: flex; align-items: center; gap: 12px; font-family: var(--font-util); font-size: 12px; color: var(--color-neutral-200); }
.linkbar-status .site-version { color: var(--color-neutral-400); }
.linkbar-cta {
  font-family: var(--font-gothic); font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; font-size: 12px;
  color: var(--color-accent-2); border: 1.5px solid var(--color-accent); padding: 6px 12px; white-space: nowrap;
}
.linkbar-cta:hover { background: var(--color-accent); color: var(--color-bg); text-decoration: none; }

/* Room so the fixed bar never covers the footer / last section.
   Pages carrying the shared bar set .jr-pinned-page, which reserves exactly
   the bar's height and overrides this. This stays for any page that still has
   neither. */
body { padding-bottom: 68px; }

/* — US states map —
   Real geographic state outlines (SVG paths). Visited states take the
   accent fill; the rest stay paper. */
.usmap-svg {
  display: block;
  width: 100%;
  max-width: 720px;
  height: auto;
  margin: 0 0 var(--space-6);
}
.usmap-svg .state {
  fill: var(--color-surface);
  stroke: var(--color-neutral-600);
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.usmap-svg .state.on {
  fill: var(--color-accent-500);
  stroke: var(--color-accent-2);
}
/* Editable variant (admin): states respond to hover/focus. */
.usmap-svg .state[role="button"] { cursor: pointer; transition: fill 0.12s ease; }
.usmap-svg .state[role="button"]:hover { stroke: var(--color-accent); fill: var(--color-accent-800); }
.usmap-svg .state[role="button"].on:hover { fill: var(--color-accent); }
.usmap-svg .state[role="button"]:focus-visible { outline: none; stroke: var(--color-accent); stroke-width: 2.5; }

.usmap-legend { display: flex; gap: var(--space-4); font-family: var(--font-util); font-size: 12px; color: var(--color-neutral-400); margin: 0 0 var(--space-4); flex-wrap: wrap; }
.usmap-legend .swatch { display: inline-block; width: 12px; height: 12px; vertical-align: -1px; margin-right: 5px; }
.usmap-count { font-family: var(--font-display); font-size: 34px; line-height: 1; color: var(--color-accent); }

/* — small screens — */
@media (max-width: 860px) {
  .brands { grid-template-columns: 1fr auto 1fr; grid-template-areas: "a c d" "b c e"; }
  .brands .b1 { grid-area: a; } .brands .b2 { grid-area: b; } .brands .mark { grid-area: c; } .brands .b3 { grid-area: d; } .brands .b4 { grid-area: e; }
  .masthead-nav { justify-content: center; gap: 2px 16px; }
  .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 0; }
  .col:nth-child(odd) { border-left: 0; }
  .seal-row { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .seal-row .tagline:first-child, .seal-row .tagline:last-child { text-align: center; }
  .notice { grid-template-columns: 1fr; }
  .notice .right { text-align: left; }
  /* The build stamp stays: /css/footbar.css drops the date on a narrow
     screen and keeps "v138 (3e1e0bc)", which is the half you check a deploy
     against. Hiding all of it here would undo that. */
  .linkbar-status .up { display: none; }
}
@media (max-width: 560px) {
  .nav { justify-content: center; }
  .nav-links { gap: var(--space-5); justify-content: center; }
  .nav-links a { font-size: 16px; }
  .hero { padding-top: calc(2 * var(--rhythm)); }
  .footer { justify-content: center; text-align: center; }
  .site-version { flex-basis: 100%; }
  .recent a { grid-template-columns: 96px 1fr; }
  .brand { font-size: 17px; }
  .linkbar { gap: 8px; padding-inline: 12px; }
  .linkbar a.icon, .linkbar-icons > a { width: 30px; height: 30px; }
  .linkbar svg { width: 15px; height: 15px; }
}