:root { --maroon:#511829; --dark:#240e16; --gold:#edc774; --paper:#f8f4ec; --ink:#282124; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font:1rem/1.6 system-ui,sans-serif; }
a { color:inherit; text-underline-offset:.2em; }
a:focus-visible, button:focus-visible { outline:3px solid currentColor; outline-offset:4px; }
.wrap { width:min(76rem,calc(100% - 3rem)); margin-inline:auto; }
.skip { position:absolute; top:.5rem; left:.5rem; z-index:10; padding:.5rem; background:white; }
.skip:not(:focus) { clip-path:inset(50%); }
.emergency { padding:.28rem 1rem; background:var(--gold); color:var(--dark); text-align:center; font-size:.82rem; font-weight:700; }
.site-header,.site-footer { background:var(--dark); color:white; }
.header-inner,.site-footer .wrap { display:flex; justify-content:space-between; flex-wrap:wrap; align-items:center; gap:1rem 2rem; padding-block:1rem; }
.site-header { position:relative; z-index:5; }
.header-inner { min-height:5rem; padding-block:1.125rem; }
.brand { position:relative; display:flex; align-items:center; min-height:2.75rem; padding-left:7.75rem; font-weight:750; text-decoration:none; line-height:1.2; letter-spacing:.02em; }
.brand small { display:block; margin-top:.25rem; color:var(--gold); font-size:.82rem; }
.company-mark { position:absolute; top:-.5rem; left:0; display:block; width:7rem; height:auto; z-index:1; }
nav { display:flex; flex-wrap:wrap; gap:.25rem 1rem; }
nav a { display:flex; align-items:center; min-height:44px; font-size:.82rem; font-weight:700; text-decoration:none; }
nav a:hover,nav a[aria-current="page"] { color:var(--gold); text-decoration:underline; }
.menu-toggle { display:none; border:1px solid var(--gold); border-radius:.3rem; padding:.6rem .85rem; min-height:44px; background:transparent; color:var(--gold); font:inherit; cursor:pointer; }
.hero,.portal-hero { background:linear-gradient(90deg,#240e16ed,#240e169e 55%,#240e164f),url("firehouse-web.jpg") center 48% / cover no-repeat,var(--dark); color:white; border-bottom:4px solid var(--gold); }
.hero-inner { display:grid; grid-template-columns:1fr 1.08fr; align-items:center; gap:clamp(1.5rem,5vw,5rem); padding-block:clamp(3rem,8vw,7rem); }
.eyebrow { margin:0 0 .75rem; font-size:.8rem; font-weight:750; letter-spacing:.12em; text-transform:uppercase; }
.hero .eyebrow,.portal-hero .eyebrow { color:var(--gold); }
.hero .eyebrow { display:flex; justify-content:center; align-items:center; gap:.8rem; }
.hero .eyebrow::before,.hero .eyebrow::after { content:""; width:2rem; height:1px; background:var(--gold); flex-shrink:0; }
h1,h2,h3 { font-family:Georgia,serif; line-height:1.12; margin:0; }
h1 { font-size:clamp(2.8rem,6vw,5.5rem); letter-spacing:-.055em; }
h2 { font-size:clamp(1.85rem,4vw,2.75rem); }
h3 { font-size:1.45rem; }
.hero-title { width:fit-content; max-width:100%; text-align:center; }
.hero h1 { letter-spacing:0; font-kerning:normal; }
.hero h1 em { display:block; color:var(--gold); font-size:.66em; font-style:normal; letter-spacing:-.035em; }
.intro { max-width:37ch; font-size:1.125rem; margin-block:1.4rem; }
.hero .intro,.portal-hero .intro { color:#f0e2e5; }
.actions { display:flex; flex-wrap:wrap; align-items:center; gap:.8rem 1.35rem; }
.button { display:inline-block; background:var(--gold); color:var(--dark); padding:.75rem 1.15rem; font-weight:750; text-decoration:none; border-radius:.3rem; }
.button:hover { text-decoration:underline; }
.button span { padding-inline-start:.65rem; }
.secondary { font-weight:650; }
.community { padding-block:clamp(3.25rem,7vw,6rem); }
.community .eyebrow,.cards a,.art-inner .eyebrow { color:var(--maroon); }
.cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.25rem; margin-top:2rem; }
.cards article { display:flex; flex-direction:column; padding:1.65rem; min-height:15rem; background:white; border:1px solid #e5d8cb; border-radius:.6rem; box-shadow:0 .6rem 1.8rem #39202a0a; }
.cards article:hover { border-color:#af8463; }
.cards article:target { border-color:var(--maroon); }
.cards a { font-weight:700; }
.cards article > a { margin-top:auto; }
.card-index { align-self:flex-start; margin-bottom:1.35rem; padding:.22rem .55rem; border-radius:.25rem; background:#f4e7d1; color:var(--maroon); font-size:.78rem; font-weight:750; }
.pending { color:#584952; }
.site-footer .wrap { padding-block:1.5rem; }
.site-footer span { color:var(--gold); }
.hero-photo { position:relative; margin:0; }
.hero-photo img { display:block; width:100%; height:auto; border:1px solid #ba936280; border-radius:.65rem; }
.hero-photo figcaption { position:absolute; bottom:1rem; left:1rem; padding:.35rem .75rem; border-radius:.25rem; background:var(--dark); color:var(--gold); font-size:.85rem; font-weight:700; }
.company-art { padding-block:clamp(2.5rem,6vw,5rem); background:#efe5d8; isolation:isolate; }
.art-inner { display:grid; grid-template-columns:1fr minmax(12rem,23rem); align-items:center; gap:2rem; }
.art-inner img { display:block; width:100%; height:auto; filter:brightness(1.09); mix-blend-mode:multiply; clip-path:inset(1% 0 0); }
.dinner-details { display:flex; flex-wrap:wrap; gap:1rem 2rem; margin-top:1.75rem; padding-top:1.25rem; border-top:1px solid #b39366; }
.dinner-details dt { font-size:.8rem; color:var(--maroon); }
.dinner-details dd { margin:0; font-weight:750; }
.dinner-photos { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.65fr); gap:1rem; margin-top:2rem; }
.dinner-photos img { display:block; width:100%; height:100%; max-height:27rem; object-fit:cover; border-radius:.65rem; }
.portal-hero { padding-block:clamp(2.5rem,6vw,5rem); }
.portal-note { padding:.75rem 1rem; max-width:42rem; border-inline-start:3px solid var(--gold); background:var(--dark); }
.attendance { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; margin-bottom:0; }
.attendance div { padding:.4rem .65rem; background:var(--paper); border-radius:.25rem; }
.attendance dd { margin:0; color:var(--maroon); font-size:1.2rem; font-weight:750; }
.officer-roster { border-top:1px solid #ded2c6; }
.roster-details dt { color:var(--maroon); font-weight:700; }
.roster-details dd { margin:0 0 .65rem; overflow-wrap:anywhere; }
.facebook-feed iframe { display:block; width:100%; max-width:500px; margin-top:1.25rem; border:0; }
.fleet { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr)); gap:1.25rem; margin-top:1.5rem; }
.fleet-card { max-width:38rem; overflow:hidden; border:1px solid #e5d8cb; border-radius:.65rem; background:white; }
.fleet-card img { display:block; width:100%; height:auto; }
.fleet-card > div { padding:1.25rem; }
.fleet-card > div > p:last-child { margin-bottom:0; }
.reading-column { max-width:74ch; }
.history-page .community { padding-block:3rem; }
.history-page .community + .community { padding-top:0; }
.history-page p { line-height:1.8; }
.history-sources { display:block; margin-top:.5rem; font-size:.82rem; color:#63514f; }
.timeline { list-style:none; padding:0 0 0 1.25rem; margin:2rem 0; border-left:2px solid #bd9749; }
.timeline li { position:relative; margin-block:1.1rem; }
.timeline li::before { content:""; position:absolute; left:-1.65rem; top:.55rem; width:.7rem; height:.7rem; border-radius:50%; background:var(--maroon); }
.timeline strong { display:block; color:var(--maroon); }
@media (max-width:59.999rem) {
  .site-header { position:relative; z-index:5; }
  .menu-toggle:not([hidden]) { display:block; }
  .menu-toggle:not([hidden]) + #site-nav { position:absolute; top:100%; right:0; width:min(24rem,100%); max-height:70vh; max-height:70dvh; overflow-y:auto; padding:.5rem 1rem 1rem; background:var(--dark); border-bottom:3px solid var(--gold); box-shadow:0 1rem 2rem #0005; }
  #site-nav { width:100%; flex-direction:column; gap:0; }
  #site-nav a { padding:.5rem; border-top:1px solid #ffffff26; }
  .menu-toggle[aria-expanded="false"]:not([hidden]) + nav { display:none; }
}
@media (max-width:48rem) {
  .hero-inner,.cards,.art-inner { grid-template-columns:1fr; }
  .cards article { min-height:auto; }
  .art-inner img { max-width:23rem; justify-self:center; }
}
@media (max-width:40rem) {
  .wrap { width:calc(100% - 2rem); }
  .header-inner { gap:.75rem; min-height:4.5rem; padding-block:.875rem; }
  .brand { padding-left:5.75rem; font-size:.8rem; }
  .brand > span { max-width:7rem; }
  .brand small { font-size:.7rem; }
  .company-mark { width:5rem; top:0; }
  .menu-toggle { padding-inline:.65rem; }
  .hero .eyebrow { font-size:.68rem; gap:.5rem; }
  .hero .eyebrow::before,.hero .eyebrow::after { width:1rem; }
  .dinner-photos { grid-template-columns:1fr; }
  .dinner-photos img { height:auto; max-height:none; }
}



/* Compact public information cards; member dashboard cards keep their layout. */
.community-info .cards { max-width:64rem; margin:1.5rem auto 0; gap:1rem; }
.community-info .cards article { min-height:0; aspect-ratio:1; padding:1.25rem; }
.community-info .cards h3 { font-size:1.3rem; }
.community-info .cards p { margin:.65rem 0; font-size:.95rem; line-height:1.5; }
.community-info .cards a { font-size:.9rem; }
@media (max-width:48rem) {
  .community-info .cards { grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr)); }
  .community-info .cards article { aspect-ratio:auto; min-height:17rem; }
}


/* Keep the company name on one line with natural letter spacing. */
.hero-inner > div { min-width:0; container-type:inline-size; }
.hero h1 { font-size:clamp(2rem,6vw,4.75rem); font-size:clamp(1rem,13.5cqi,4.75rem); }
.hero-name { display:block; white-space:nowrap; }

.fleet-card > .apparatus-photo-placeholder {
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio:718 / 565;
  padding:1.5rem;
  background:linear-gradient(145deg,#eae0d3,#f5efe5);
  border-bottom:1px solid #d8c6ad;
  color:#685344;
  text-align:center;
  font-size:.85rem;
  letter-spacing:.03em;
}

.fleet-photo-button { display:block; width:100%; padding:0; border:0; background:transparent; cursor:zoom-in; }
.fleet-photo-button:focus-visible { outline:3px solid var(--maroon); outline-offset:-4px; }
.photo-viewer-open { overflow:hidden; }
.photo-viewer { position:fixed; inset:0; margin:auto; width:fit-content; max-width:96vw; max-height:96vh; max-height:96dvh; padding:3.25rem .75rem .75rem; border:0; border-radius:.65rem; background:#1e1719; color:white; box-shadow:0 1rem 4rem #0008; }
.photo-viewer::backdrop { background:rgba(0,0,0,.72); }
.photo-viewer figure { margin:0; }
.photo-viewer-image { display:block; width:auto; height:auto; max-width:calc(96vw - 1.5rem); max-height:calc(96vh - 6rem); max-height:calc(96dvh - 6rem); margin-inline:auto; object-fit:contain; }
.photo-viewer figcaption { padding-top:.6rem; text-align:center; color:var(--gold); font-size:.9rem; }
.photo-viewer-close { position:absolute; top:.25rem; right:.5rem; min-height:44px; padding:.4rem .65rem; border:0; border-radius:.25rem; background:transparent; color:white; font:inherit; cursor:pointer; }
.photo-viewer-close:hover { background:#ffffff20; }
.photo-viewer-close span { margin-left:.5rem; font-size:1.4rem; }


/* Homepage feature: replace the text in index.html when a story is ready. */
.hero-news { min-width:0; padding:clamp(1.5rem,3vw,2.5rem); min-height:19rem; display:flex; flex-direction:column; justify-content:center; background:#240e16e8; border:1px solid #edc77466; border-top:4px solid var(--gold); border-radius:.65rem; box-shadow:0 1rem 2.5rem #0003; }
.news-label { margin:0 0 1.25rem; color:var(--gold); font-size:.78rem; font-weight:750; letter-spacing:.12em; text-transform:uppercase; }
.hero-news h2 { font-size:clamp(1.8rem,3vw,2.6rem); text-wrap:balance; }
.news-summary { margin:1.1rem 0 0; max-width:44ch; color:#f0e2e5; }
.hero-news a { color:var(--gold); font-weight:700; }
@media (max-width:48rem) { .hero-news { min-height:0; } }


.mission { padding-block:clamp(3rem,6vw,5rem); background:linear-gradient(90deg,#f3ebdd,var(--paper) 50%,#f3ebdd); border-bottom:1px solid #e5d8cb; }
.mission-inner { max-width:58rem; text-align:center; }
.mission h2 { display:flex; justify-content:center; align-items:center; gap:clamp(1rem,3vw,2rem); color:var(--maroon); font-size:clamp(2.5rem,5vw,3.75rem); line-height:1.15; letter-spacing:-.025em; }
.mission h2::before,.mission h2::after { content:""; flex:1; max-width:5rem; height:2px; background:#b68a38; }
.mission-tagline { margin:1rem 0 0; color:var(--maroon); font-size:clamp(1.1rem,2.5vw,1.4rem); font-weight:600; text-wrap:balance; }
.mission-copy { max-width:66ch; margin:1.75rem auto 0; }
.mission-copy p { margin:1rem 0 0; font-size:1rem; line-height:1.8; color:#62534f; text-wrap:pretty; }
.mission-copy .mission-lead { margin-top:0; font-size:1.1rem; line-height:1.8; color:var(--ink); }

/* Prevention and community support */
.prevention-content { padding-block:2.5rem 4rem; }
.safety-alert { padding:1rem 1.5rem; border-left:4px solid var(--maroon); background:#f0e3cb; border-radius:.3rem; }
.safety-topics { display:flex; flex-wrap:wrap; gap:.6rem; margin:1.5rem 0 2rem; }
.safety-topics a { padding:.65rem 1rem; border:1px solid #cdbb9b; border-radius:2rem; color:var(--maroon); font-weight:650; font-size:.9rem; text-decoration:none; }
.safety-topics a:hover { background:#efe5d8; }
.safety-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem; }
.safety-card { padding:clamp(1.25rem,3vw,2rem); background:white; border:1px solid #e5d8cb; border-top:3px solid #bf9849; border-radius:.6rem; scroll-margin-top:1rem; }
.safety-card h2 { font-size:1.8rem; color:var(--maroon); }
.safety-card ul,.safety-resources ul { padding-left:1.2rem; }
.safety-card li,.safety-resources li { margin-block:.8rem; }
.safety-source { font-size:.85rem; color:#62534f; }
.safety-source a { color:var(--maroon); }
.safety-resources { margin-top:2.5rem; padding:clamp(1.5rem,4vw,3rem); background:#efe5d8; border-radius:.6rem; }
.safety-resources .eyebrow { color:var(--maroon); }
.donation-section { padding-block:clamp(3rem,6vw,5rem); background:var(--maroon); color:white; border-block:3px solid var(--gold); }
.donation-intro { max-width:45rem; margin-inline:auto; text-align:center; }
.donation-intro .eyebrow { color:var(--gold); }
.donation-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem; max-width:62rem; margin:2rem auto 0; }
.donation-options article { padding:clamp(1.5rem,3vw,2rem); border:1px solid #edc77466; border-radius:.6rem; background:#240e1655; }
.donation-options h3 { color:var(--gold); }
.donation-options address { font-style:normal; line-height:1.8; }
.donation-pending { display:inline-block; padding:.65rem 1rem; border:1px dashed var(--gold); border-radius:.3rem; color:var(--gold); font-weight:700; }
.donation-note { font-size:.85rem; color:#f0e2e5; }
@media (max-width:48rem) { .safety-grid,.donation-options { grid-template-columns:1fr; } }

.hero .hero-title { width:100%; }
.hero .intro { margin-inline:auto; text-align:center; text-wrap:balance; }
.hero .actions { justify-content:center; }

.prevention-downloads { margin-top:1.5rem; }
.download-note { max-width:65ch; font-size:.9rem; color:#f0e2e5; margin-bottom:0; }

/* Public company roster: add cards or names without changing the layout. */
.roster-section { padding-block:clamp(3rem,6vw,5rem); scroll-margin-top:1rem; }
.roster-section-heading { text-align:center; margin-bottom:2rem; }
.roster-section-heading .eyebrow { color:var(--maroon); }
.roster-section-heading h2 { color:var(--maroon); }
.officer-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr)); gap:1.25rem; }
.officer-card { min-width:0; padding:1.5rem; border:1px solid #e5d8cb; border-top:3px solid #bd9443; border-radius:.6rem; background:white; box-shadow:0 .4rem 1.5rem #39202a08; }
.officer-card h3 { color:var(--maroon); font-size:1.45rem; }
.officer-names { list-style:none; padding:0; margin:1rem 0 0; }
.officer-names li { padding:.45rem 0; overflow-wrap:anywhere; }
.officer-names li + li { border-top:1px solid #eee4d8; }
.roster-pending { color:#6c605a; font-size:.95rem; }
.roster-admin { background:#efe5d8; border-top:1px solid #ded2c6; }

/* Apparatus page uses its own fleet photograph. */
.portal-hero.apparatus-hero { background-image:linear-gradient(90deg,#240e16e6,#240e1699 55%,#240e1655),url("apparatus-banner.jpg"); background-position:center,center 58%; }

.join-layout { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:2rem; align-items:start; padding-block:clamp(3rem,6vw,5rem); }
.join-panel { min-width:0; padding:clamp(1.25rem,3vw,2rem); background:white; border:1px solid #e5d8cb; border-top:3px solid #bd9443; border-radius:.6rem; }
.join-panel .eyebrow,.join-panel h2,.join-panel h3 { color:var(--maroon); }
.join-panel h2 { font-size:2rem; }
.join-notice { padding:1rem; background:#f3ebdd; border-left:3px solid #bd9443; margin:1.25rem 0; }
.join-panel fieldset { border:0; padding:0; margin:1.5rem 0 0; min-width:0; }
.join-panel legend { font-weight:750; }
.form-help { font-size:.85rem; color:#62534f; }
.join-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin-bottom:1rem; }
.join-panel label { display:block; font-size:.95rem; font-weight:600; }
.join-panel input:not([type=checkbox]),.join-panel select,.join-panel textarea { display:block; width:100%; margin-top:.4rem; padding:.7rem; border:1px solid #bdaf9d; border-radius:.3rem; font:inherit; color:var(--ink); background:#faf7f1; }
.join-panel textarea { resize:vertical; }
.join-panel .join-consent { display:flex; align-items:flex-start; gap:.6rem; margin:1rem 0; font-weight:400; }
.join-consent input { margin-top:.35rem; }
.join-panel button { border:0; font:inherit; font-weight:700; }
.join-panel button:disabled { opacity:.65; cursor:not-allowed; }
.application-pending { display:inline-block; padding:.7rem 1rem; border:1px dashed #b68a38; border-radius:.3rem; color:var(--maroon); font-weight:650; }
.join-application hr { border:0; border-top:1px solid #ded2c6; margin:2rem 0; }
@media (max-width:48rem) { .join-layout { grid-template-columns:1fr; } }
@media (max-width:32rem) { .join-fields { grid-template-columns:1fr; } }

.member-resources { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1.25rem 2rem; padding:1.5rem; margin-bottom:2rem; border:1px solid #d9c59d; border-left:4px solid #bd9443; border-radius:.5rem; background:#efe5d8; }
.member-resources .eyebrow { color:var(--maroon); margin-bottom:.4rem; }
.member-resources h2 { font-size:1.6rem; color:var(--maroon); }
.member-resources p:last-child { margin-bottom:0; }
.resource-new-tab { display:block; font-size:.75rem; font-weight:400; padding-inline-start:0 !important; }

.dashboard-tools { margin:1rem 0; }
.dashboard-tools dt { color:var(--maroon); font-weight:700; }
.dashboard-tools dd { margin:.25rem 0 1rem; }
.dashboard-tools dd:last-child { margin-bottom:0; }
.cards .tool-status { margin-top:auto; padding-top:1rem; border-top:1px solid #e5d8cb; color:#62534f; font-size:.85rem; }

.join-certification-question, #join-certifications-area { margin-bottom:1rem; }

/* Mirror selected apparatus photos in both the card and enlarged view. */
.photo-flipped { transform: scaleX(-1); }

/* Hide the scanned album borders while preserving the original photographs. */
.historic-photo-trim { clip-path: inset(3.5% 3.5% 4.5% 3.5%); }

/* Expand the trimmed scans to fill the card without an inset frame. */
.fleet-photo-button:has(.historic-photo-trim) { overflow:hidden; }
.fleet-card img.historic-photo-trim { width:107.526882%; max-width:none; margin-left:-3.763441%; margin-top:-2.688172%; margin-bottom:-3.456221%; }
.fleet-card img.historic-photo-trim[src="1960-ford-howe.jpg"] { margin-top:-2.673549%; margin-bottom:-3.437420%; }
.fleet-card img.historic-photo-trim[src="1953-ford-great-eastern.jpg"] { margin-top:-2.711183%; margin-bottom:-3.485807%; }