/* Harbor Together — ordinary author CSS, no framework. */
:root {
  --ink: #173c35;
  --paper: #fffdf7;
  --accent: #205848;
  --soft: #edf4eb;
  --line: #788b80;
}
body {
  margin: 0;
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
}
a { color: #17564d; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 0.18em; }
h1, h2, h3 { line-height: 1.2; }
.brand { font-weight: 750; font-size: 1.25rem; }
.tag, .eyebrow { font-weight: 700; }

/* Sizing and reading comfort. */
*, *::before, *::after { box-sizing: border-box; }
.container { width: min(100% - 2rem, 70rem); margin-inline: auto; }
section { margin-block: 3rem; }
h1 { font-size: 2.4rem; max-width: 18ch; }
p { max-width: 65ch; }
img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
figcaption, .hint { font-size: 0.95rem; }
.site-header, .site-footer { background: var(--soft); padding-block: 1.2rem; }
.event-card, .visit-panel { border: 1px solid var(--line); border-radius: 0.75rem; padding: 1.25rem; }
.event-card { background: white; }
.event-card h3 { margin-block: 0.4rem 0.8rem; }
.event-card + .event-card { margin-top: 1rem; }
.tag { margin: 0; }
.button-link, button {
  display: inline-block;
  background: var(--accent);
  color: white;
  border: 2px solid var(--accent);
  border-radius: 0.4rem;
  padding: 0.65rem 1rem;
  font: inherit;
  font-weight: 650;
}
.button-link { text-decoration: underline; }
button { cursor: pointer; }
fieldset { margin: 0 0 1rem; padding: 1rem; border: 1px solid var(--line); min-width: 0; }
legend { font-weight: 700; padding-inline: 0.4rem; }
.field { margin-bottom: 1rem; }
label { display: block; font-weight: 650; margin-bottom: 0.35rem; }
input, select, textarea { display: block; width: 100%; max-width: 35rem; font: inherit; color: var(--ink); background: white; padding: 0.6rem; border: 2px solid var(--line); border-radius: 0.3rem; }
textarea { resize: vertical; }
.hint { margin-top: 0.35rem; }
summary { cursor: pointer; font-weight: 650; }

/* Flexbox: distribute the header and navigation along a row. */
.header-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; }
.nav-list { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; list-style: none; padding: 0; margin: 0; }
.nav-list a { display: inline-block; padding: 0.5rem 0.25rem; }

/* Grid: one column is the safe narrow-screen default. */
.event-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.event-card + .event-card { margin-top: 0; }
.hero { display: grid; gap: 2rem; align-items: center; }

/* Add columns only where the content has enough room. */
@media (min-width: 48rem) {
  .event-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero { grid-template-columns: 1.1fr 1fr; }
}
h1 { font-size: 2.4rem; }
.event-card, .hero > * { min-width: 0; overflow-wrap: anywhere; }
:focus-visible { outline: 3px solid #963e06; outline-offset: 4px; }
.skip-link { display: inline-block; margin: 0.5rem 1rem; padding: 0.4rem; }
@media print {
  body { background: white; color: black; }
  .site-header, .site-footer, .skip-link, #interest { display: none; }
  .event-grid, .hero { display: block; }
  .event-card { break-inside: avoid; margin-bottom: 1rem; }
}