/* Jarratt VFD — public site
   Palette taken from apparatus livery: engine red, gold-leaf lettering, chevron striping. */
:root {
  --engine: #9e1b1b;
  --engine-deep: #6b1111;
  --gold: #c8a04a;
  --gold-light: #e8cd86;
  --ink: #14213d;  /* navy from the department logo */
  --steel: #59626d;
  --mist: #eef0f2;
  --line: #d7dbe0;
  --white: #ffffff;
  --display: 'Zilla Slab', 'Rockwell', Georgia, serif;
  --body: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wrap: 1120px;
  --radius: 6px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--body); font-size: 1.0625rem; line-height: 1.6; color: var(--ink); background: var(--white); }
img { max-width: 100%; display: block; }
a { color: var(--engine); text-underline-offset: 3px; }
a:hover { color: var(--engine-deep); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.005em; }
h1 { font-size: clamp(2.1rem, 4.5vw, 3rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.25rem; }
.prose { max-width: 68ch; }
.muted { color: var(--steel); }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff; padding: .6rem 1rem; z-index: 10; }
.skip:focus { left: 0; }

/* ---------- Header ---------- */
.site-header { background: var(--white); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.site-header .wrap { display: flex; align-items: center; gap: 1.5rem; min-height: 68px; }
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--ink); margin-right: auto; }
.brand-mark { width: 44px; height: 44px; flex: none; object-fit: contain; }
.brand-name { font-family: var(--display); font-weight: 700; font-size: 1.2rem; line-height: 1.05; }
.brand-name small { display: block; font-family: var(--body); font-weight: 500; font-size: .78rem; color: var(--steel); letter-spacing: .01em; }
.nav { display: flex; align-items: center; gap: .25rem; }
.nav a { text-decoration: none; color: var(--ink); font-weight: 500; font-size: .97rem; padding: .45rem .65rem; border-radius: var(--radius); }
.nav a:hover { background: var(--mist); color: var(--ink); }
.nav a[aria-current="page"] { color: var(--engine); box-shadow: inset 0 -2px 0 var(--engine); border-radius: 0; }
.nav .btn { margin-left: .5rem; }
.nav-toggle { display: none; }

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; align-items: center; gap: .4rem; background: none; border: 1px solid var(--line); border-radius: var(--radius); padding: .45rem .7rem; font: inherit; font-weight: 600; color: var(--ink); cursor: pointer; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--white); border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch; padding: .5rem 1.25rem 1rem; }
  .nav.open { display: flex; }
  .nav a { padding: .7rem .4rem; }
  .nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--engine); padding-left: .8rem; }
  .nav .btn { margin: .5rem 0 0; text-align: center; }
}

/* ---------- Buttons ---------- */
.btn { display: inline-block; font: inherit; font-weight: 700; font-size: 1rem; text-decoration: none; text-align: center; padding: .75rem 1.3rem; border-radius: var(--radius); border: 2px solid transparent; cursor: pointer; line-height: 1.2; }
.btn-red { background: var(--engine); color: var(--white); }
.btn-red:hover { background: var(--engine-deep); color: var(--white); }
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold:hover { background: var(--gold-light); color: var(--ink); }
.btn-ghost { border-color: currentColor; color: var(--white); background: transparent; }
.btn-ghost:hover { background: rgba(255,255,255,.1); color: var(--white); }
.btn-outline { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-outline:hover { background: var(--ink); color: var(--white); }
.btn-sm { padding: .5rem .9rem; font-size: .92rem; }

/* ---------- Hero: the one loud moment ---------- */
.hero { background: var(--engine); color: var(--white); position: relative; overflow: hidden; }
.hero::before { /* faint diamond-plate texture */
  content: ''; position: absolute; inset: 0; opacity: .07; pointer-events: none;
  background-image: radial-gradient(ellipse 3px 9px at 50% 50%, #fff 60%, transparent 62%), radial-gradient(ellipse 9px 3px at 50% 50%, #fff 60%, transparent 62%);
  background-size: 28px 28px; background-position: 0 0, 14px 14px;
}
.hero .wrap { position: relative; padding-top: clamp(3rem, 7vw, 5rem); padding-bottom: clamp(3rem, 6vw, 4.5rem); display: grid; grid-template-columns: 1fr minmax(240px, 360px); gap: 2rem; align-items: center; }
.hero-badge { width: 100%; height: auto; transform: rotate(4deg); filter: drop-shadow(0 10px 18px rgba(40,0,0,.35)); }
/* Phones: the badge sits above the title in normal flow, so it can never cover text */
@media (max-width: 760px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 1.25rem; padding-top: 2rem; }
  .hero-badge { order: -1; width: clamp(120px, 34vw, 190px); justify-self: start; transform: rotate(-3deg); }
}

.hero-title {
  font-family: var(--display); font-weight: 700; line-height: .92; margin: 0 0 1.4rem;
  font-size: clamp(3rem, 9.5vw, 7.25rem); letter-spacing: -.01em; max-width: 11ch;
  color: var(--gold-light);
  /* gold-leaf lettering: dark outline shadow like hand-applied engine scroll */
  text-shadow: 2px 2px 0 var(--engine-deep), 4px 4px 0 rgba(0,0,0,.25);
  -webkit-text-stroke: 1px #9b7a2c;
}
.hero-title span { display: block; font-size: .42em; line-height: 1.1; color: var(--white); -webkit-text-stroke: 0; text-shadow: none; letter-spacing: .01em; margin-top: .35em; font-weight: 600; }
.hero-lede { font-size: clamp(1.1rem, 1.6vw, 1.3rem); max-width: 46ch; color: #f6e9e9; margin-bottom: 2rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.chevrons { height: 22px; background: repeating-linear-gradient(-45deg, var(--engine) 0 22px, var(--gold) 22px 44px); border-top: 3px solid var(--engine-deep); }
@media (prefers-reduced-motion: no-preference) {
  .hero-title { animation: letter-in .9s cubic-bezier(.2,.7,.2,1) both; }
  .hero-title span { animation: letter-in .9s .15s cubic-bezier(.2,.7,.2,1) both; }
  .hero-badge { animation: stick .7s .35s cubic-bezier(.3,1.4,.5,1) both; }
  @keyframes stick { from { opacity: 0; transform: rotate(-8deg) scale(1.12); } to { opacity: 1; transform: rotate(4deg) scale(1); } }
  @media (max-width: 760px) { .hero-badge { animation-name: stick-m; } @keyframes stick-m { from { opacity: 0; transform: rotate(-10deg) scale(1.1); } to { opacity: 1; transform: rotate(-3deg) scale(1); } } }
  @keyframes letter-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}

.callbar { background: var(--ink); color: #d9dee4; font-size: .95rem; }
.callbar .wrap { display: flex; flex-wrap: wrap; gap: .4rem 2rem; padding-top: .8rem; padding-bottom: .8rem; }
.callbar strong { color: var(--white); }
.callbar a { color: var(--gold-light); }

/* ---------- Page header for inner pages ---------- */
.page-head { background: var(--mist); border-bottom: 1px solid var(--line); }
.page-head .wrap { padding-top: 2.6rem; padding-bottom: 2.2rem; }
.page-head h1 { margin: 0; }
.page-head p { margin: .6rem 0 0; color: var(--steel); max-width: 60ch; font-size: 1.1rem; }
.page-head + .chevrons { height: 8px; border: 0; background: repeating-linear-gradient(-45deg, var(--engine) 0 8px, var(--gold) 8px 16px); }

main section { padding: 3.5rem 0; }
main section + section { border-top: 1px solid var(--line); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; }
.section-head h2 { margin: 0; }

/* ---------- Home ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; gap: 2.5rem; } }

.event-list { list-style: none; margin: 0; padding: 0; }
.event { display: grid; grid-template-columns: 64px 1fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.event:first-child { padding-top: 0; }
.cal { border: 2px solid var(--ink); border-radius: var(--radius); text-align: center; line-height: 1; overflow: hidden; align-self: start; }
.cal-m { display: block; background: var(--engine); color: var(--white); font-size: .75rem; font-weight: 700; padding: .3rem 0; }
.cal-d { display: block; font-family: var(--display); font-size: 1.7rem; font-weight: 700; padding: .3rem 0 .35rem; }
.event h3 { margin: 0 0 .2rem; font-size: 1.15rem; }
.event .meta { color: var(--steel); font-size: .93rem; margin: 0 0 .3rem; }
.event p:last-child { margin: 0; }

.post-list { list-style: none; margin: 0; padding: 0; }
.post-item { padding: 1rem 0; border-bottom: 1px solid var(--line); }
.post-item:first-child { padding-top: 0; }
.post-item h3 { margin: 0 0 .25rem; font-size: 1.15rem; }
.post-item h3 a { color: var(--ink); text-decoration: none; }
.post-item h3 a:hover { color: var(--engine); text-decoration: underline; }
.post-item time { color: var(--steel); font-size: .9rem; }
.post-item p { margin: .35rem 0 0; color: #3a434f; }

.empty { color: var(--steel); background: var(--mist); border-radius: var(--radius); padding: 1.1rem 1.2rem; margin: 0; }

.recruit { background: var(--ink); color: #e3e7ec; }
.recruit h2 { color: var(--white); }
.recruit .lede { max-width: 58ch; font-size: 1.12rem; }
.roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 2rem 0; border-top: 1px solid #36404d; }
.role { padding: 1.3rem 1.5rem 1.3rem 0; }
.role + .role { padding-left: 1.5rem; border-left: 1px solid #36404d; }
.role h3 { color: var(--gold-light); font-size: 1.2rem; margin-bottom: .4rem; }
.role p { margin: 0; font-size: .98rem; }
@media (max-width: 760px) { .roles { grid-template-columns: 1fr; } .role, .role + .role { padding: 1.1rem 0; border-left: 0; border-bottom: 1px solid #36404d; } }

.photo-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: .5rem; }
.photo-strip img { aspect-ratio: 1; object-fit: cover; width: 100%; border-radius: 3px; }
@media (max-width: 760px) { .photo-strip { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Gallery ---------- */
.gallery { columns: 3 280px; column-gap: 1rem; }
.gallery figure { margin: 0 0 1rem; break-inside: avoid; }
.gallery a { display: block; }
.gallery img { width: 100%; height: auto; border-radius: 3px; }
.gallery figcaption { font-size: .9rem; color: var(--steel); padding: .4rem 0 0; }

/* ---------- Roster ---------- */
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.5rem 1.25rem; list-style: none; padding: 0; margin: 0 0 1rem; }
.person img, .person .no-photo { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); background: var(--mist); }
.person .no-photo { display: grid; place-items: center; font-family: var(--display); font-size: 2.6rem; color: #a9b0b8; font-weight: 700; }
.person h3 { margin: .65rem 0 .1rem; font-size: 1.1rem; }
.person p { margin: 0; color: var(--steel); font-size: .95rem; }
.name-list { columns: 3 200px; list-style: none; padding: 0; margin: 0; }
.name-list li { padding: .4rem 0; border-bottom: 1px solid var(--line); break-inside: avoid; }
.name-list li span { color: var(--steel); font-size: .92rem; }

/* ---------- Article ---------- */
.article-img { margin: 0 0 1.8rem; }
.article-img img { border-radius: var(--radius); width: 100%; max-height: 520px; object-fit: cover; }

/* ---------- Forms ---------- */
.form-shell { display: grid; grid-template-columns: 240px 1fr; gap: 3rem; align-items: start; }
.form-steps { position: sticky; top: 92px; list-style: none; padding: 0; margin: 0; counter-reset: s; font-size: .95rem; }
.form-steps li { counter-increment: s; }
.form-steps a { display: flex; gap: .6rem; padding: .45rem 0; text-decoration: none; color: var(--steel); }
.form-steps a::before { content: counter(s); flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 1.5px solid currentColor; display: grid; place-items: center; font-size: .8rem; font-weight: 700; }
.form-steps a:hover { color: var(--engine); }
@media (max-width: 860px) { .form-shell { grid-template-columns: 1fr; } .form-steps { display: none; } }

fieldset { border: 0; padding: 0; margin: 0 0 2.6rem; min-width: 0; }
legend { font-family: var(--display); font-weight: 700; font-size: 1.45rem; padding: 0; margin-bottom: .3rem; }
fieldset > .intro { color: var(--steel); margin: 0 0 1rem; }
.fields { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem 1.1rem; margin-top: 1rem; }
.field { grid-column: span 6; }
.field.half { grid-column: span 3; }
.field.third { grid-column: span 2; }
@media (max-width: 560px) { .field.half, .field.third { grid-column: span 6; } }
.field > label, .field > .label { display: block; font-weight: 600; margin-bottom: .35rem; font-size: .98rem; }
.req { color: var(--engine); font-weight: 700; }
.hint { display: block; color: var(--steel); font-size: .88rem; font-weight: 400; margin-top: -.15rem; margin-bottom: .4rem; }
input:not([type]), input[type=text], input[type=email], input[type=tel], input[type=date], input[type=password], input[type=url], select, textarea {
  width: 100%; font: inherit; font-size: 1rem; padding: .65rem .75rem; border: 1.5px solid #b9c0c8; border-radius: var(--radius); background: var(--white); color: var(--ink);
}
textarea { min-height: 7rem; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--ink); outline: 3px solid rgba(200,160,74,.55); outline-offset: 0; }
.choices { display: grid; gap: .45rem; }
.choices.cols { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.choice { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; cursor: pointer; padding: .55rem .75rem; border: 1.5px solid var(--line); border-radius: var(--radius); }
.choice:hover { border-color: #9aa3ad; }
.choice input { margin: .28rem 0 0; width: 1.05rem; height: 1.05rem; accent-color: var(--engine); flex: none; }
.choice:has(input:checked) { border-color: var(--engine); background: #fbf3f3; }
.field.agree .choice { border: 0; padding: 0; font-weight: 500; }
.field.agree .choice:has(input:checked) { background: none; }
.field.invalid input, .field.invalid select, .field.invalid textarea, .field.invalid .choice { border-color: var(--engine); }
.err { color: var(--engine); font-weight: 600; font-size: .9rem; margin-top: .3rem; }
.alert { border-left: 5px solid var(--engine); background: #fbf0f0; padding: 1rem 1.2rem; border-radius: 0 var(--radius) var(--radius) 0; margin-bottom: 2rem; }
.alert p:last-child { margin: 0; }
.hp { position: absolute; left: -5000px; }
[data-show-if][hidden] { display: none !important; }
.submit-row { border-top: 1px solid var(--line); padding-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }

/* ---------- Donate ---------- */
.donate-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 3rem; align-items: start; }
@media (max-width: 820px) { .donate-grid { grid-template-columns: 1fr; } }
.give-card { border: 2px solid var(--ink); border-radius: var(--radius); padding: 1.8rem; }
.give-card h2 { font-size: 1.5rem; }
.uses { list-style: none; padding: 0; margin: 0; }
.uses li { padding: .8rem 0 .8rem 1.6rem; border-bottom: 1px solid var(--line); position: relative; }
.uses li::before { content: ''; position: absolute; left: 0; top: 1.2rem; width: .65rem; height: .65rem; background: var(--gold); transform: rotate(45deg); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 3rem; align-items: start; }
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; } }
.facts { margin: 0; }
.facts dt { font-weight: 700; margin-top: 1rem; }
.facts dd { margin: .1rem 0 0; }
.map { width: 100%; aspect-ratio: 4/3; border: 0; border-radius: var(--radius); margin-top: 1.5rem; background: var(--mist); }
.emergency { background: var(--engine); color: #fff; padding: .9rem 1.1rem; border-radius: var(--radius); font-weight: 600; margin-bottom: 1.5rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: #b9c1ca; font-size: .95rem; }
.site-footer .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; padding-top: 3rem; padding-bottom: 2.4rem; }
.site-footer h2 { font-size: 1.15rem; color: var(--white); }
.site-footer a { color: #e6e9ed; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { padding: .15rem 0; }
.site-footer .fine { grid-column: 1 / -1; border-top: 1px solid #333d49; padding-top: 1.2rem; font-size: .85rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }
@media (max-width: 760px) { .site-footer .wrap { grid-template-columns: 1fr; } }

.thanks { padding: 5rem 0; }
.thanks .check { width: 64px; height: 64px; border-radius: 50%; background: var(--engine); color: #fff; display: grid; place-items: center; font-size: 2rem; margin-bottom: 1.2rem; }

/* nav links are styled generically; keep the Donate button's own colors */
.nav a.btn-red, .nav a.btn-red:hover { color: var(--white); background: var(--engine); box-shadow: none; border-radius: var(--radius); }
.nav a.btn-red:hover { background: var(--engine-deep); }

.about-grid { display: grid; grid-template-columns: 1fr 260px; gap: 3rem; align-items: start; }
.about-grid img { width: 100%; height: auto; }
@media (max-width: 760px) { .about-grid { grid-template-columns: 1fr; } .about-grid img { max-width: 200px; } }

input.file { width: 100%; font: inherit; font-size: .95rem; padding: .7rem; border: 1.5px dashed #9aa3ad; border-radius: var(--radius); background: var(--mist); cursor: pointer; }
input.file:hover { border-color: var(--ink); }
.field.invalid input.file { border-color: var(--engine); }

.choices.inline { display: flex; flex-wrap: wrap; gap: .45rem; }
.choices.inline .choice { min-width: 4.2rem; justify-content: center; }
.sec-body { background: var(--mist); border-radius: var(--radius); padding: 1rem 1.2rem; margin-bottom: .5rem; max-width: 70ch; }
.sec-body p { margin: 0 0 .6rem; }
.sec-body ul { margin: 0 0 .8rem; padding-left: 1.2rem; }
.sec-body > :last-child { margin-bottom: 0; }

/* Event thumbnail: calendar | details | photo */
.event.has-img { grid-template-columns: 64px 1fr 168px; }
.event-img { display: block; align-self: start; max-width: 168px; }
.event-img img { width: 168px; height: 168px; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--line); }
.split .event.has-img { grid-template-columns: 64px 1fr 96px; }
.split .event-img img { width: 96px; height: 96px; }
@media (max-width: 600px) {
  .event.has-img, .split .event.has-img { grid-template-columns: 64px 1fr; }
  .event-img { grid-column: 2; grid-row: 2; max-width: none; }
  .event-img img, .split .event-img img { width: 100%; height: auto; aspect-ratio: 16 / 10; }
}
.person h3:first-child { margin-top: 0; }

/* Hero: never let the badge push past the edge */
.hero .wrap > div { min-width: 0; }
.hero-badge { max-width: 100%; }
@media (min-width: 761px) and (max-width: 960px) { .hero .wrap { grid-template-columns: 1fr minmax(180px, 240px); } }

/* Announcement banner */
.announce { font-size: .98rem; }
.announce .wrap { padding-top: .65rem; padding-bottom: .65rem; }
.announce p { margin: 0; }
.announce a { font-weight: 700; color: inherit; }
.announce-info { background: var(--ink); color: #fff; }
.announce-warning { background: var(--gold-light); color: var(--ink); }
.announce-urgent { background: var(--engine-deep); color: #fff; }
.announce-urgent p::before { content: '!'; display: inline-grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: #fff; color: var(--engine-deep); font-weight: 800; margin-right: .5rem; font-size: .85rem; vertical-align: 1px; }

/* Event detail page */
.event h3 a { color: var(--ink); text-decoration: none; }
.event h3 a:hover { color: var(--engine); text-decoration: underline; }
.event-tix { margin: .6rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; font-size: .95rem; }
.event-head { display: grid; grid-template-columns: 84px 1fr; gap: 1.2rem; align-items: start; margin-bottom: 1.4rem; }
.event-head h1 { margin-bottom: .3rem; }
.event-head .meta { color: var(--steel); margin: 0; font-size: 1.05rem; }
.cal-lg .cal-d { font-size: 2.3rem; }
.event-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-start; margin-bottom: 2rem; }
.cal-menu { position: relative; }
.cal-menu summary { list-style: none; }
.cal-menu summary::-webkit-details-marker { display: none; }
/* Opens in place on its own row (pushes content down) so it can never cover text or run off a phone screen */
.cal-menu[open] { flex-basis: 100%; }
.cal-menu-list { margin-top: .45rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: .35rem; max-width: 22rem; }
.cal-menu-list a { display: block; padding: .55rem .7rem; text-decoration: none; color: var(--ink); border-radius: 4px; }
.cal-menu-list a:hover { background: var(--mist); }
.event-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 2.5rem; align-items: start; }
.event-photo img { width: 100%; border-radius: var(--radius); border: 1px solid var(--line); }
@media (max-width: 760px) { .event-body { grid-template-columns: 1fr; } .event-head { grid-template-columns: 64px 1fr; } }
.btn-outline.copied { background: var(--ink); color: #fff; }

/* Apparatus */
.units { display: grid; gap: 2.5rem; }
.unit { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
.unit.no-img { grid-template-columns: 1fr; }
.unit.no-img .unit-body { max-width: 68ch; }
.unit img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.unit .meta { color: var(--steel); margin-top: -.2rem; }
.unit + .unit { border-top: 1px solid var(--line); padding-top: 2.5rem; }
@media (max-width: 760px) { .unit { grid-template-columns: 1fr; gap: 1rem; } }

/* Privacy */
.privacy h2 { font-size: 1.35rem; margin-top: 2rem; }
.privacy ul { padding-left: 1.2rem; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Scrolling banner: a ticker that enters at the right edge of the screen and keeps flowing left.
   Short messages repeat with a small diamond between copies. Movement is driven by site.js.
   The link is pinned to the right edge on top of the moving text. */
.announce-info { --ann-bg: var(--ink); --ann-sep: var(--gold); }
.announce-warning { --ann-bg: var(--gold-light); --ann-sep: var(--engine); }
.announce-urgent { --ann-bg: var(--engine-deep); --ann-sep: var(--gold-light); }
.announce-scroll { position: relative; overflow: hidden; }
.marquee { overflow: hidden; white-space: nowrap; padding: .65rem 0; cursor: pointer; }
.marquee-track { display: inline-flex; align-items: center; will-change: transform; transform: translateX(100vw); }
.marquee-unit { display: inline-flex; align-items: center; flex: none; }
.marquee-sep { display: inline-block; width: .5rem; height: .5rem; margin: 0 2.25rem; background: var(--ann-sep); transform: rotate(45deg); flex: none; }
.announce-link { position: absolute; top: 0; right: 0; bottom: 0; display: flex; align-items: center; padding: 0 1.25rem 0 2.75rem; background: linear-gradient(90deg, transparent, var(--ann-bg) 1.75rem); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .marquee { white-space: normal; padding: .65rem 1.25rem; cursor: default; }
  .marquee-track, .marquee-unit { display: inline; transform: none !important; }
  .marquee-sep, .marquee-unit + .marquee-unit { display: none; }
  .announce-scroll:has(.announce-link) .marquee { padding-right: 9rem; }
}

/* Albums */
.albums { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 1.6rem 1.25rem; }
.album-card { display: block; text-decoration: none; color: var(--ink); }
.album-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); background: var(--mist); }
.album-title { display: block; font-family: var(--display); font-weight: 700; font-size: 1.2rem; margin-top: .6rem; line-height: 1.2; }
.album-meta { display: block; color: var(--steel); font-size: .92rem; margin-top: .15rem; }
.album-card:hover .album-title { color: var(--engine); text-decoration: underline; }
.album-card:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; border-radius: var(--radius); }
.page-head .wrap > p:first-child a { color: #fff; }

/* Full-screen photo viewer */
.viewer { width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; margin: 0; padding: 0; border: 0; background: rgba(10, 14, 24, .96); color: #fff; }
.viewer::backdrop { background: rgba(10, 14, 24, .96); }
.viewer[open] { display: grid; place-items: center; }
.viewer-fig { margin: 0; max-width: calc(100vw - 7rem); max-height: calc(100vh - 6rem); display: flex; flex-direction: column; align-items: center; }
.viewer-fig img { max-width: 100%; max-height: calc(100vh - 9rem); object-fit: contain; border-radius: 4px; }
.viewer-fig figcaption { margin-top: .8rem; color: #d9dee4; text-align: center; max-width: 60ch; }
.viewer-btn, .viewer-close { position: absolute; background: rgba(255,255,255,.12); color: #fff; border: 0; cursor: pointer; font: 400 2rem/1 var(--body); border-radius: 50%; width: 3rem; height: 3rem; display: grid; place-items: center; }
.viewer-btn:hover, .viewer-close:hover { background: rgba(255,255,255,.25); }
.viewer-prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.viewer-next { right: 1rem; top: 50%; transform: translateY(-50%); }
.viewer-close { top: 1rem; right: 1rem; font-size: 1.8rem; }
.viewer-count { position: absolute; top: 1.4rem; left: 1.4rem; margin: 0; color: #b9c1ca; font-size: .95rem; }
@media (max-width: 600px) {
  .viewer-fig { max-width: 100vw; padding: 0 .5rem; }
  .viewer-btn { top: auto; bottom: 1rem; transform: none; }
  .viewer-fig img { max-height: calc(100vh - 11rem); }
}

/* Apparatus striping, taken from the department's trucks: thin gold, gap, wide black, gap, thin gold, on engine red.
   Replaces the earlier chevron band everywhere. */
:root { --stripe-gold: #f2c230; --stripe-black: #262626; }
.chevrons {
  height: 44px; border: 0;
  background: linear-gradient(to bottom,
    var(--stripe-gold) 0 4px, var(--engine) 4px 10px, var(--stripe-black) 10px 24px,
    var(--engine) 24px 30px, var(--stripe-gold) 30px 34px, var(--engine) 34px 44px);
}
/* Inner pages: red title band, stripe underneath */
.page-head { background: var(--engine); border-bottom: 0; }
.page-head h1 { color: #fff; }
.page-head p { color: #f3dcdc; }
.page-head a { color: #fff; }
.page-head .wrap { padding-bottom: 1.8rem; }
.page-head + .chevrons {
  height: 32px; border: 0;
  background: linear-gradient(to bottom,
    var(--stripe-gold) 0 3px, var(--engine) 3px 7px, var(--stripe-black) 7px 17px,
    var(--engine) 17px 21px, var(--stripe-gold) 21px 24px, var(--engine) 24px 32px);
}

/* News list thumbnails: the post's photo, or the department badge on a light tile */
.post-item { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 1.1rem; align-items: start; }
.post-thumb { display: block; width: 112px; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; background: var(--mist); }
.post-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-thumb.is-badge { display: grid; place-items: center; }
.post-thumb.is-badge img { width: 72%; height: 72%; object-fit: contain; }
.post-list-sm .post-item { grid-template-columns: 76px minmax(0, 1fr); gap: .9rem; }
.post-list-sm .post-thumb { width: 76px; }
@media (max-width: 480px) {
  .post-item { grid-template-columns: 76px minmax(0, 1fr); gap: .9rem; }
  .post-thumb { width: 76px; }
}
.brand-name small { text-wrap: balance; }

/* Certificate uploads: one row per certificate */
.filelist { display: grid; gap: .75rem; margin-top: .35rem; }
.filelist-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: .6rem 1rem; align-items: end; padding: .85rem; border: 1px solid var(--line, #d9d4cc); border-radius: var(--radius); background: rgba(0,0,0,.015); }
.filelist-row[hidden] { display: none; }
.filelist-row label { font-weight: 600; font-size: .92rem; display: block; margin-bottom: .3rem; }
.filelist-row input { width: 100%; min-width: 0; }
.filelist-remove { font: inherit; font-size: .92rem; background: none; border: 0; color: var(--engine); text-decoration: underline; cursor: pointer; padding: .55rem .25rem; }
.filelist-remove[hidden], .filelist-add[hidden] { display: none; }
.filelist-add { justify-self: start; }
@media (max-width: 640px) {
  .filelist-row { grid-template-columns: minmax(0, 1fr); }
  .filelist-remove { justify-self: start; padding: 0; }
}
.filelist-spacer { visibility: hidden; cursor: default; }
@media (max-width: 640px) { .filelist-spacer { display: none; } }