:root {
  color-scheme: light;
  font-family: Arial, Helvetica, sans-serif;
  color: #182b3e;
  background: #003366;
}
* { box-sizing: border-box; }
body { margin: 0; background: #003366; color: #182b3e; font: 1rem/1.65 Arial, Helvetica, sans-serif; }
img { max-width: 100%; height: auto; }
a { color: #004b80; text-underline-offset: .2em; }
a:visited { color: #593578; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid #bd7500; outline-offset: 4px; }
input, textarea { background: #fff; color: #182b3e; }
.site-shell { width: min(100%, 980px); margin: 24px auto; background: #fff; }
.site-header { background: #fff; }
.site-header img { display: block; width: 100%; height: auto; }
.site-layout { display: grid; grid-template-columns: 165px minmax(0, 1fr); align-items: stretch; }
.site-nav { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 28px 16px; background: #071b2d; color: #fff; }
.site-nav a, .site-nav a:visited { color: #fff; font-size: 1rem; }
.site-nav img { display: block; width: 125px; height: auto; }
.reading-pane { min-width: 0; background: #fff; color: #182b3e; padding: 28px 32px; overflow-wrap: break-word; }
.reading-pane p { margin: 0 0 1.2em; text-align: left; }
.reading-pane b, .reading-pane strong { font-weight: 600; }
.reading-pane img { display: block; margin: 16px auto; object-fit: contain; }
.reading-pane .homepage-boat { width: min(100%, 420px); height: auto; }
.boat-and-brands { display: grid; grid-template-columns: minmax(100px, 1fr) minmax(0, 420px) minmax(100px, 1fr); align-items: center; gap: 18px; margin: 24px 0; }
.boat-and-brands .homepage-boat { display: block; width: 100%; margin: 0; }
.brand-column { display: flex; flex-direction: column; justify-content: space-evenly; gap: 32px; align-self: stretch; min-width: 0; }
.brand-banner { display: flex; justify-content: center; align-items: center; min-height: 110px; padding: 16px 10px; border: 1px solid #ccd5dd; background: #fff; }
.reading-pane .brand-banner img { width: 100%; max-height: 90px; height: auto; object-fit: contain; margin: 0; }
.reading-pane .image-paragraph { text-align: center; }
.reading-pane .layout-table { width: 100%; margin-bottom: 18px; }
.reading-pane .layout-row { display: flex; flex-wrap: wrap; gap: 20px; }
.reading-pane .layout-cell { min-width: 0; flex: 1 1 220px; }
.reading-pane .layout-cell:only-child { flex-basis: 100%; }
.reading-pane .section-heading { display: block; margin: 0 0 18px; color: #003366; font-size: 1.5rem; font-weight: 700; line-height: 1.3; }
.reading-pane .rate-banner { background: #003366; color: #fff; padding: 10px 14px; }
.reading-pane menu { padding-left: 24px; }
.reading-pane .notice { color: #9b221c; }
.reading-pane .contact-row { margin-top: 24px; padding-top: 20px; border-top: 1px solid #cad4dc; }
.article-page .reading-pane { max-width: 780px; margin: auto; }
@media (max-width: 680px) {
  .site-shell { margin: 0; }
  .site-layout { grid-template-columns: minmax(0, 1fr); }
  .site-nav { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 16px; }
  .site-nav img { width: 112px; }
  .reading-pane { padding: 24px 20px; }
  .reading-pane .layout-row { flex-direction: column; gap: 12px; }
  .reading-pane .layout-cell { flex: 0 1 auto; }
}
@media (max-width: 600px) {
  .boat-and-brands { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .boat-and-brands .homepage-boat { grid-column: 1 / -1; grid-row: 1; max-width: 420px; justify-self: center; }
  .brand-column { grid-row: 2; gap: 16px; }
  .brand-banner { min-height: 100px; }
}

.homepage-footer { display: flex; justify-content: flex-end; margin-top: 24px; }
.hit-counter { display: inline-flex; align-items: center; gap: 10px; color: #182b3e; }
.hit-counter-label { font-size: .875rem; }
.hit-counter output { display: inline-block; min-width: 7ch; padding: 3px 10px; border: 1px solid #43566a; border-radius: 2px; background: #071b2d; color: #fff; font: 600 1.125rem/1.5 "Courier New", monospace; font-variant-numeric: tabular-nums; letter-spacing: .07em; text-align: right; }

.stream-fishing-photo { margin: 28px auto; width: min(100%, 720px); }
.reading-pane .stream-fishing-photo img { width: 100%; height: auto; margin: 0; }
.reading-pane .fishing-source { font-size: .875rem; color: #43566a; margin-bottom: 24px; }

/* Shared button treatment across every page. */
a.nav-button, a.nav-button:visited,
.request-button, .request-button:visited {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 63px;
  padding: 8px 16px;
  border: 2px solid #899dad;
  border-radius: 0;
  background: linear-gradient(#edf3f8, #b8cbdc);
  color: #003366;
  font: 700 1rem/1.2 Arial, Helvetica, sans-serif;
  text-align: center;
  text-decoration: none;
  box-shadow: inset 0 0 0 2px #dce6ee;
  cursor: pointer;
}
a.nav-button { width: 125px; padding: 8px; }
a.nav-button:hover, .request-button:hover { background: #eaf2f8; }
@media (max-width: 680px) { a.nav-button { width: 112px; } }