/* Shared keyboard, contrast and small-screen repairs. */
html { scroll-padding-top: 1rem; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 5px; }
.skip-link { position: absolute; left: -10000px; top: auto; }
.skip-link:focus { left: 1rem; top: 1rem; z-index: 20; background: #f4ebe9; color: #111; padding: .75rem 1rem; }
.breadcrumbs { padding-block: .75rem; font-size: .9rem; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .4rem .7rem; list-style: none; padding: 0; margin: 0; }
.breadcrumbs li + li::before { content: '/'; margin-right: .7rem; }
.journal-sequence { max-width: 46rem; margin: 0 auto 2rem; padding: 1.5rem; border: 3px solid #111; background: #fff8e8; }
.journal-sequence ul { display: flex; flex-wrap: wrap; gap: 1rem 2rem; list-style: none; margin: 0; padding: 0; }
.journal-sequence a { display: inline-block; font-weight: 700; text-underline-offset: 3px; }
body .card .kicker, body .card .tag { color: #111; }
body .hero .kicker { color: inherit; }
body .foot, body .wrap > p[style] { color: #574838 !important; }
body .wrap a { color: #9b3520; }
body .wrap { overflow-wrap: anywhere; }
body .hero h1 { overflow-wrap: anywhere; }
/* Date-gated articles use the same Dad's Famous palette and display type as the live journal. */
@font-face { font-family: Jost; src: url('/assets/fonts/Jost-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: Copperplate; src: url('/assets/fonts/copperplate-cc.bold.otf') format('opentype'); font-weight: 700; font-display: swap; }
body:has(main > article:not(.article)) { margin: 0; background: #f4ebe9; color: #111; font: 500 18px/1.62 Jost, Arial, sans-serif; }
body:has(main > article:not(.article)) > header,
body:has(main > article:not(.article)) > footer { padding: 1.25rem max(1rem, calc((100% - 72rem)/2)); font-weight: 700; }
body:has(main > article:not(.article)) > header { background: #f46437; border-bottom: 3px solid #111; }
body:has(main > article:not(.article)) > header a { margin-right: 1rem; }
body:has(main > article:not(.article)) main { max-width: 72rem; margin: auto; padding: 2rem 1.25rem; }
body:has(main > article:not(.article)) article { max-width: 48rem; margin: 2rem auto; padding: clamp(1.25rem, 5vw, 3rem); background: #fff8e8; border: 3px solid #111; box-shadow: 7px 7px 0 #111; }
body:has(main > article:not(.article)) article > header { padding: 1.25rem; background: #1b683c; color: #f4ebe9; }
body:has(main > article:not(.article)) article > header p { margin: .2rem 0; color: #fed322; font-weight: 700; }
body:has(main > article:not(.article)) h1,
body:has(main > article:not(.article)) h2 { font-family: Copperplate, Georgia, serif; line-height: .98; }
body:has(main > article:not(.article)) h1 { margin: .5rem 0; font-size: clamp(2.4rem, 7vw, 4.8rem); }
body:has(main > article:not(.article)) h2 { margin-top: 2rem; font-size: clamp(1.7rem, 4vw, 2.6rem); }
body:has(main > article:not(.article)) a { color: #1b683c; font-weight: 700; text-underline-offset: 3px; }
body:has(main > article:not(.article)) article::after { content: ''; display: block; height: 5rem; margin-top: 1.5rem; background: url('/assets/tomato-vine.svg') center/contain no-repeat; }
body:has(main > article:not(.article)) section[aria-label='Warteliste'] { max-width: 48rem; margin: 2.5rem auto; padding: 2rem; background: #f46437; border: 3px solid #111; text-align: center; }
body:has(main > article:not(.article)) section[aria-label='Warteliste'] h2 { margin-top: 0; }
/* Keep queued-article styles off the established .article templates. */
body:has(main > article:not(.article)) article { overflow-wrap: anywhere; }
body:has(main > article:not(.article)) > header a,
body:has(main > article:not(.article)) section[aria-label='Warteliste'] a { color: #111; }
@media (max-width: 600px) {
  body:has(main > article:not(.article)) { font-size: 17px; }
  body:has(main > article:not(.article)) main { padding: 1rem; }
  body:has(main > article:not(.article)) article { margin: 1rem auto; }
  body:has(main > article:not(.article)) > header a { display: inline-block; margin: .25rem; }
  .journal-sequence { margin-inline: 1rem; padding: 1.2rem; }
  body .top { flex-wrap: wrap; }
  body .top .nav { justify-content: flex-start; }
  body .hero-inner { width: calc(100% - 2rem); }
  body .hero-inner h1 { font-size: clamp(2.3rem, 10.5vw, 3.4rem); overflow-wrap: normal; }
  body .hero:after { opacity: .18; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}