/* Frog Level Volunteer Fire Department — Station 5 */
@import url('https://fonts.googleapis.com/css2?family=Bitter:wght@500;700;800&family=Source+Sans+3:ital,wght@0,400;0,600;1,400&display=swap');

:root {
  --red: #B3261E;
  --red-deep: #8C1B15;
  --navy: #1E242B;
  --slate: #5E6873;
  --brass: #C9A24A;
  --paper: #FAF8F3;
  --paper-2: #F0ECE3;
  --ink: #23272C;
  --font-display: 'Bitter', Georgia, 'Times New Roman', serif;
  --font-body: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
  --measure: 66ch;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.55;
}

a { color: var(--red-deep); }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; }

h1, h2, h3 { font-family: var(--font-display); line-height: 1.15; margin: 0 0 .5em; color: var(--navy); }
h1 { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 700; }
p { margin: 0 0 1em; max-width: var(--measure); }

/* The chevron stripe — the one visual motif, borrowed from the back of the engine */
.stripe {
  height: 14px;
  background: repeating-linear-gradient(
    -45deg,
    var(--red) 0 22px,
    var(--brass) 22px 44px
  );
}

/* Header */
.site-header {
  background: var(--navy);
  color: #fff;
}
.site-header .bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.25rem; max-width: 1100px; margin: 0 auto;
}
.brand { display: flex; align-items: center; gap: .75rem; color: #fff; text-decoration: none; }
.brand .logo {
  height: 56px; width: auto; flex: none;
  background: #fff; border-radius: 6px; padding: 3px;
}
.brand .name { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; line-height: 1.1; }
.brand .name small { display: block; font-family: var(--font-body); font-weight: 400; font-size: .85rem; opacity: .8; }

.nav { display: flex; gap: .25rem; flex-wrap: wrap; }
.nav a { color: #fff; text-decoration: none; padding: .5rem .7rem; border-radius: 4px; font-weight: 600; }
.nav a:hover { background: rgba(255,255,255,.1); }
.nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--brass); }
.nav-toggle { display: none; background: none; border: 2px solid rgba(255,255,255,.4); color: #fff; padding: .4rem .7rem; border-radius: 4px; font: inherit; }

@media (max-width: 720px) {
  .nav-toggle { display: block; }
  .nav { display: none; width: 100%; flex-direction: column; }
  .nav.open { display: flex; }
  .site-header .bar { flex-wrap: wrap; }
}

/* Hero — set like a door decal */
.hero {
  background: var(--navy);
  color: #fff;
  padding: 3.5rem 1.25rem 3rem;
}
.hero .inner { max-width: 1100px; margin: 0 auto; }
.hero .hero-logo { height: 140px; width: auto; background: #fff; border-radius: 8px; padding: 8px; margin-bottom: 1.25rem; }
.hero h1 { color: #fff; max-width: 14ch; }
.hero .lede { font-size: 1.25rem; color: #d9dde2; max-width: 48ch; }
.hero .station { font-family: var(--font-display); color: var(--brass); font-weight: 700; font-size: 1.1rem; margin-bottom: .5rem; }

/* Layout */
.wrap { max-width: 1100px; margin: 0 auto; padding: 2.5rem 1.25rem; }
.narrow { max-width: 760px; }
.section + .section { border-top: 1px solid #ddd6c7; }

.btn {
  display: inline-block; background: var(--red); color: #fff; text-decoration: none;
  padding: .7rem 1.2rem; border-radius: 4px; font-weight: 600; border: 0; font: inherit; cursor: pointer;
}
.btn:hover { background: var(--red-deep); }
.btn.quiet { background: transparent; color: var(--navy); border: 2px solid var(--navy); }
.btn.quiet:hover { background: var(--paper-2); }

/* Story block on the home page */
.story { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 860px) { .story { grid-template-columns: 3fr 2fr; } }
.story img { width: 100%; height: auto; border-radius: 4px; }
.facts { background: var(--paper-2); padding: 1.25rem 1.5rem; border-left: 6px solid var(--red); }
.facts dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; }
.facts dt { font-weight: 600; color: var(--slate); }
.facts dd { margin: 0; }

/* News */
.news { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.25rem; }
.news li { padding-bottom: 1.25rem; border-bottom: 1px solid #ddd6c7; }
.news time { color: var(--slate); font-weight: 600; }

/* Trucks */
.trucks { display: grid; gap: 2rem; }
.truck { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .truck { grid-template-columns: 2fr 3fr; align-items: start; } }
.truck img { width: 100%; height: auto; border-radius: 4px; background: var(--paper-2); }
.truck .unit { color: var(--red); font-family: var(--font-display); font-weight: 800; font-size: 2rem; line-height: 1; }
.spec { margin: .5rem 0 0; display: grid; grid-template-columns: auto 1fr; gap: .25rem 1rem; font-size: .95rem; }
.spec dt { color: var(--slate); font-weight: 600; }
.spec dd { margin: 0; }
.stool { margin-top: 1rem; padding: 1rem 1.25rem; background: var(--paper-2); border-left: 6px solid var(--brass); }

/* Memorial — deliberately quieter than the rest of the site */
.memorial-page body, body.memorial { background: var(--navy); color: #e6e2d8; }
body.memorial h1, body.memorial h2, body.memorial h3 { color: #fff; }
body.memorial a { color: var(--brass); }
body.memorial .site-header { border-bottom: 1px solid rgba(255,255,255,.12); }
body.memorial .stripe { display: none; }
.memorial-intro { text-align: center; padding: 3rem 1.25rem 1rem; }
.memorial-intro h1 { font-weight: 500; }
.memorial-intro::after { content: ""; display: block; width: 72px; height: 2px; background: var(--brass); margin: 1.5rem auto 0; }
.memorial-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.memorial-card { text-align: center; padding: 2rem 1.25rem; border: 1px solid rgba(255,255,255,.14); border-radius: 4px; }
.memorial-card img { width: 140px; height: 140px; object-fit: cover; border-radius: 50%; border: 3px solid var(--brass); margin-bottom: 1rem; }
.memorial-card h3 { font-weight: 500; font-size: 1.4rem; }
.memorial-card .dates { color: #b9b3a6; }
.memorial-card .service { color: var(--brass); font-weight: 600; }
.memorial-card a { display: inline-block; margin-top: .75rem; }
.memorial-solo { max-width: 680px; margin: 0 auto; text-align: center; padding: 2rem 1.25rem 4rem; }
.memorial-solo img { width: 220px; height: 220px; object-fit: cover; border-radius: 50%; border: 4px solid var(--brass); }
.memorial-solo h1 { font-weight: 500; margin-top: 1.25rem; }
.memorial-solo .tribute { text-align: left; margin: 2rem auto 0; max-width: 60ch; line-height: 1.7; }
.memorial-solo .tribute p { max-width: none; }
.bell { font-family: var(--font-display); color: var(--brass); letter-spacing: .3em; margin-top: 2rem; }

/* Members */
.gate { max-width: 520px; margin: 2rem auto; padding: 2rem; background: #fff; border: 1px solid #ddd6c7; border-radius: 4px; text-align: center; }
.members-docs { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.members-docs li { padding: 1rem 1.25rem; background: #fff; border: 1px solid #ddd6c7; border-radius: 4px; }
.notice { padding: 1rem 1.25rem; background: #fff5f4; border-left: 6px solid var(--red); }
.admin-tools { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #ddd6c7; }

/* Footer */
.site-footer { background: var(--navy); color: #c8cdd3; padding: 2rem 1.25rem; font-size: .95rem; }
.site-footer .inner { max-width: 1100px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: space-between; }
.site-footer a { color: #fff; }
.site-footer .emergency { font-family: var(--font-display); font-weight: 700; color: var(--brass); font-size: 1.1rem; }

/* Photos */
.gallery { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.gallery figure { margin: 0; }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; background: var(--paper-2); display: block; }
.gallery figcaption { font-size: .95rem; color: var(--slate); margin-top: .4rem; }
.gallery figcaption strong { color: var(--ink); }
.album + .album { margin-top: 2.5rem; }
.lightbox { position: fixed; inset: 0; background: rgba(30,36,43,.95); display: grid; place-items: center; padding: 1rem; z-index: 10; }
.lightbox img { max-width: 100%; max-height: 80vh; border-radius: 4px; }
.lightbox figcaption { color: #fff; text-align: center; margin-top: .75rem; }
.lightbox button { position: absolute; top: 1rem; right: 1rem; }