/* The newsletter as a web page. Body text is 20px or larger. Colors are checked for contrast. */
:root {
  --text: #1a1a1a;
  --soft: #3d3d3d;
  --paper: #fffdf8;
  --brand: #1d4d2b;
  --on-brand: #ffffff;
  --panel: #eef3ec;
  --note-bg: #fff4d6;
  --note-line: #7a4b00;
  --focus: #0b3b8c;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--text); font-family: Georgia, "Times New Roman", serif; font-size: 1.25rem; line-height: 1.6; overflow-wrap: break-word; }
a { color: var(--brand); text-decoration: underline; text-underline-offset: 0.2em; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.skip-link { position: absolute; left: 0.5rem; top: -5rem; background: var(--paper); color: var(--text); padding: 0.75rem 1rem; border: 2px solid var(--text); z-index: 2; }
.skip-link:focus { top: 0.5rem; }

.label { background: var(--note-bg); border-bottom: 3px solid var(--note-line); padding: 0.75rem 1rem; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
.label p { margin: 0 auto; max-width: 40rem; }

.site-head { background: var(--brand); color: var(--on-brand); padding: 1rem; }
.site-head .club { margin: 0 auto 0.5rem; max-width: 40rem; font-size: 1.6rem; font-weight: bold; }
.site-head ul { list-style: none; margin: 0 auto; padding: 0; max-width: 40rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.site-head a { color: var(--on-brand); display: inline-flex; align-items: center; min-height: 44px; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
.site-head a:focus-visible { outline-color: var(--on-brand); }

main { max-width: 40rem; margin: 0 auto; padding: 1rem; }
h1 { font-size: 2.25rem; line-height: 1.2; margin: 0 0 1rem; }
h2 { font-size: 1.6rem; line-height: 1.25; margin: 2rem 0 0.75rem; color: var(--brand); }
h3 { font-size: 1.35rem; margin: 1.5rem 0 0.5rem; }
h4 { font-size: 1.25rem; margin: 1rem 0 0.25rem; }
p, ul { margin: 0 0 1rem; }
.kicker { margin: 1rem 0 0; color: var(--soft); font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; text-transform: uppercase; letter-spacing: 0.05em; font-size: 1.25rem; }

.walks { list-style: none; padding: 0; }
.walks li { border-left: 6px solid var(--brand); background: var(--panel); padding: 0.75rem 1rem; margin-bottom: 0.75rem; }
.walks p { margin: 0; }
.walks .when { font-weight: bold; }

#archive { border-top: 3px solid var(--brand); margin-top: 2.5rem; }
details { border: 2px solid var(--brand); border-radius: 0.5rem; margin: 0 0 0.75rem; background: #ffffff; }
summary { cursor: pointer; padding: 0.75rem 1rem; min-height: 44px; font-weight: bold; }
details[open] summary { border-bottom: 2px solid var(--brand); }
.issue { padding: 0 1rem 0.5rem; }

.site-foot { max-width: 40rem; margin: 2rem auto 0; padding: 1rem; border-top: 2px solid var(--text); color: var(--soft); }

@media (min-width: 40rem) {
  h1 { font-size: 2.75rem; }
  main { padding: 1.5rem 1rem 2rem; }
}

@media print {
  body { background: #ffffff; color: #000000; font-size: 12pt; }
  .skip-link, .site-head nav { display: none; }
  .site-head { background: #ffffff; color: #000000; border-bottom: 2px solid #000000; padding: 0 0 6pt; }
  .label { background: #ffffff; border: 1px solid #000000; }
  h2, a { color: #000000; }
  .walks li { background: #ffffff; border-left-color: #000000; break-inside: avoid; }
  details { border-color: #000000; break-inside: avoid; }
  /* Print every issue, open or closed. */
  details::details-content { content-visibility: visible; display: block; }
}