/* Austin EMS Association — rebuild of the June 2024 austinemsa.org design
   Tokens sampled from the archived site. */

:root {
  --blue: #0f4c97;        /* footer band / hero band */
  --blue-deep: #02559e;   /* home hero ribbon */
  --link: #1f5fa8;
  --yellow: #e0d23a;      /* submit button */
  --coral: #ee6f5c;       /* "learn more" (home about) */
  --green: #2ec86b;       /* "learn more" (meet the board) */
  --ink: #1d1d1d;
  --ink-soft: #3a3a3a;
  --grey: #f7f7f7;
  --white: #ffffff;
  --watermark: rgba(255, 238, 120, 0.18);
  --font: "Mulish", "Adelle Sans", "Helvetica Neue", Arial, sans-serif;
  --container: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-soft);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--yellow); outline-offset: 2px;
}

h1, h2, h3, h4 { color: var(--ink); line-height: 1.15; margin: 0 0 .5em; font-weight: 800; }
h1 { font-size: clamp(2.4rem, 5vw, 4.4rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1.2em; }

.wrap { width: min(var(--container), 92vw); margin-inline: auto; }
.center { text-align: center; }

/* Eyebrow — the site uses tracked caps labels above headings */
.eyebrow {
  display: block;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 1.2rem;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: .85em 2.4em;
  border-radius: 999px;
  border: 0;
  font: inherit;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--white);
  cursor: pointer;
  transition: filter .15s ease;
}
.btn:hover { filter: brightness(1.08); text-decoration: none; }
.btn-coral { background: var(--coral); }
.btn-green { background: var(--green); }
.btn-pill-white {
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 2px 10px rgba(0,0,0,.10), 0 0 0 1px rgba(0,0,0,.05);
}
.site-header--over .btn-pill-white { box-shadow: 0 4px 18px rgba(0,0,0,.22); }

/* ---------- Header ---------- */
.site-header {
  position: relative;
  z-index: 5;
  background: var(--white);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 0;
}
.brand img { width: 118px; height: auto; }
.nav { display: flex; align-items: center; gap: clamp(1.2rem, 3vw, 3rem); }
.nav a {
  color: var(--ink);
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.nav a:hover { text-decoration: none; color: var(--blue); }
.nav .btn { margin-left: .5rem; }
.nav-toggle {
  display: none;
  background: none; border: 0; padding: .5rem; cursor: pointer;
}
.nav-toggle span { display: block; width: 26px; height: 3px; background: var(--ink); margin: 5px 0; }

/* Faint oversized logo behind the page — used on Contact and section backdrops */
.watermark {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.watermark img {
  position: absolute;
  width: 960px;
  max-width: none;
  opacity: .07;
  filter: saturate(.7);
}
.watermark--right img { right: -120px; top: -140px; }
.watermark--left img { left: -260px; top: -40px; width: 960px; }
.has-watermark { position: relative; }
.has-watermark > .wrap, .has-watermark > section { position: relative; z-index: 1; }

/* ---------- Home hero ---------- */
.hero-home {
  position: relative;
  height: calc(45.7vw + 150px);
  max-height: 1000px;
  background: url("../img/hero-home.jpg?v=20261012") center top / 100% auto no-repeat, var(--blue-deep);
}
.hero-home .ribbon {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: clamp(1.6rem, 2.6vw, 2.4rem) 6vw clamp(3.2rem, 5vw, 4.6rem);
  background: var(--blue-deep);
  color: var(--white);
  text-align: center;
}
.hero-home .ribbon::before {
  /* curved top edge */
  content: "";
  position: absolute; left: 0; right: 0; top: -1px; height: 34px;
  background: var(--blue-deep);
  clip-path: ellipse(58% 100% at 50% 100%);
  transform: translateY(-33px);
}
.hero-home .ribbon h1 { color: var(--white); margin-bottom: .3em; font-size: clamp(1.7rem, 3.6vw, 3.1rem); }
.hero-home .ribbon p { font-size: clamp(.95rem, 1.5vw, 1.25rem); font-weight: 700; margin: 0; }
.hero-home .ribbon-logo {
  position: absolute; right: 5vw; bottom: -60px; z-index: 3;
  width: clamp(110px, 12.5vw, 170px);
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.25));
}
.hero-home .curve-white {
  position: absolute; left: 0; right: 0; bottom: 0; height: 44px;
  background: var(--white);
  clip-path: ellipse(60% 100% at 50% 100%);
  z-index: 1;
}

/* ---------- Intro ---------- */
.intro { padding: clamp(4rem, 8vw, 7rem) 0 clamp(2rem, 4vw, 3rem); }
.intro p { max-width: 860px; margin-inline: auto; font-size: 1.05rem; }

/* ---------- Two-column feature (text + photo collage) ---------- */
.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
  padding: clamp(2rem, 4vw, 4rem) 0 clamp(4rem, 8vw, 7rem);
}
.feature h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.feature p { font-size: .98rem; }
.collage { position: relative; min-height: 560px; }
.collage img {
  position: absolute;
  object-fit: cover;
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
  background: #cfd6de;
}
.collage .c1 { top: 0; right: 0; width: 82%; height: 62%; }
.collage .c2 { bottom: 0; left: 0; width: 42%; height: 44%; }
.collage .c3 { bottom: 6%; right: 0; width: 26%; height: 22%; }

/* ---------- Stats ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  text-align: center;
  padding: 2rem 0 clamp(4rem, 8vw, 7rem);
}
.stats .num { display: block; white-space: nowrap; font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 800; color: var(--blue); line-height: 1; margin-bottom: .6rem; }
.stats .lbl { font-size: .95rem; }

/* ---------- Photo band with overlapping card (Meet Our Board) ---------- */
.band { position: relative; height: 40vw; max-height: 720px; min-height: 260px; overflow: hidden; background: #24384f; }
.band .parallax-img {
  position: absolute; left: 0; top: -10%; width: 100%; height: 120%;
  object-fit: cover; object-position: center; will-change: transform;
}
.band::after { content: ""; position: absolute; inset: 0; background: rgba(15,76,151,.32); }
.board-card { position: relative; z-index: 3; margin-bottom: clamp(3rem, 6vw, 6rem); }
.board-card .card {
  background: var(--white);
  padding: clamp(2rem, 4vw, 3.5rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  margin-top: -7rem;
  box-shadow: 0 -10px 40px rgba(0,0,0,.08);
}
.board-card .card p { font-size: .98rem; }
.board-card .card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: #cfd6de; }

/* ---------- Page hero (About) ---------- */
.hero-page {
  position: relative;
  height: clamp(420px, 46vw, 900px);
  background: url("../img/hero-about.jpg") center top / cover no-repeat, #1f2f3f;
}
.hero-page h1 {
  position: relative; z-index: 1;
  color: var(--white);
  font-size: clamp(2rem, 4.4vw, 3.6rem);
  text-shadow: 0 2px 20px rgba(0,0,0,.35);
  padding: 0 1rem;
}

/* ---------- About: org + presidents ---------- */
.about-org {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  padding: clamp(4rem, 8vw, 7rem) 0;
  align-items: start;
}
.about-org .sub { font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; margin-bottom: 1.5rem; }
.about-org h3 { margin-top: 1.5rem; }
.presidents { list-style: none; padding: 0; margin: 0; }
.presidents li { padding: .2rem 0; }
.presidents li::before { content: "•"; margin-right: .6rem; }
.presidents b { color: var(--ink); }
.collage--about .c1 { top: 0; left: 0; width: 82%; height: 62%; right: auto; }
.collage--about .c2 { bottom: 0; right: 0; left: auto; width: 54%; height: 46%; }
.collage--about .c3 { display: none; }

/* ---------- Accomplishments timeline ---------- */
.accomplishments { padding: 0 0 clamp(4rem, 8vw, 7rem); }
.accomplishments h2 { text-align: center; margin-bottom: 2.5rem; }
.timeline-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
}
.timeline-grid h3 { margin-top: 1.4rem; }
.timeline { padding-left: 1.2rem; margin: 0 0 1rem; }
.timeline li { margin-bottom: .6rem; font-size: .96rem; }
.timeline b { color: var(--ink); }

/* ---------- Board grid ---------- */
.board { padding: 0 0 clamp(4rem, 8vw, 7rem); }
.board h2 { text-align: center; margin-bottom: .3rem; }
.board .eyebrow { text-align: center; margin-bottom: 3rem; }
.board-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem 2.5rem;
}
.member img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: #cfd6de; margin-bottom: 1.2rem; }
.member h3 { font-size: 1.15rem; }
.member p { font-size: .94rem; }

/* ---------- Contact ---------- */
.contact-title { padding: clamp(4rem, 8vw, 7rem) 0 clamp(2rem, 4vw, 3rem); }
.contact-title h1 { font-size: clamp(3rem, 7vw, 5.6rem); margin-bottom: .6rem; }
.contact-title .eyebrow { margin: 0; }
.contact-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  text-align: center;
  padding: 2rem 0 clamp(4rem, 8vw, 7rem);
}
.contact-cols h3 { font-size: 1.15rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1.6rem; }
.contact-cols a { font-size: 1.1rem; }

.note {
  position: relative;
  padding: clamp(4rem, 8vw, 7rem) 0;
  background: url("../img/contact-ambulance.jpg") center / cover no-repeat, #35516b;
  color: var(--white);
  text-align: center;
}
.note::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.28); }
.note .wrap { position: relative; z-index: 1; max-width: 1180px; }
.note h2 {
  color: var(--white);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  margin-bottom: .6rem;
}
.note .tag { font-style: italic; font-size: 1.15rem; margin-bottom: 2.5rem; }
.note form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
.note input, .note textarea {
  width: 100%;
  border: 0;
  padding: 1.2rem 1.8rem;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
}
.note textarea { min-height: 200px; resize: vertical; }
.note .full { grid-column: 1 / -1; }
.note .btn-submit {
  grid-column: 1 / -1;
  background: var(--yellow);
  color: var(--ink);
  border-radius: 0;
  padding: 1.1em;
  font-size: .95rem;
  letter-spacing: .18em;
}

/* Social band (blue) */
.social-band {
  background: var(--blue);
  padding: clamp(4rem, 8vw, 7rem) 0;
  text-align: center;
}
.social { display: inline-flex; gap: 2.5rem; }
.social a { color: inherit; display: inline-flex; }
.social i { font-size: 28px; }
.social-band .social { color: var(--white); }

/* ---------- Footer ---------- */
.site-footer { background: var(--grey); padding: clamp(3rem, 7vw, 6rem) 0; }
.site-footer .wrap {
  display: grid;
  grid-template-columns: 1.1fr 1.3fr 1.3fr 1fr;
  gap: 2.5rem;
  align-items: start;
}
.site-footer img.logo { width: 200px; }
.site-footer h4 { font-size: 1.15rem; margin-bottom: 1.6rem; }
.site-footer address { font-style: normal; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .5rem; }
.site-footer .social { color: var(--ink); gap: 1.6rem; }
.site-footer .social i { font-size: 22px; }
.legal { background: var(--blue); color: var(--white); padding: 1.6rem 0; font-size: .95rem; }
.legal .wrap { width: min(1440px, 96vw); }

/* Back to top */
.to-top {
  position: fixed; right: 28px; bottom: 28px;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--blue); color: var(--white);
  display: grid; place-items: center;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
  z-index: 20;
}
.to-top:hover { text-decoration: none; filter: brightness(1.1); }
.to-top svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.5; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .feature, .about-org, .timeline-grid, .board-card .card, .note form,
  .site-footer .wrap { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .board-grid { grid-template-columns: 1fr 1fr; }
  .contact-cols { grid-template-columns: 1fr; }
  .collage { min-height: 420px; }
  .board-card .card { margin-top: -3rem; }
  .hero-home .ribbon-logo { display: none; }
  .watermark img { width: 640px; }
}
@media (max-width: 640px) {
  .nav-toggle { display: block; }
  .nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: flex-start;
    background: var(--white); padding: 1rem 4vw 1.5rem;
    box-shadow: 0 12px 30px rgba(0,0,0,.12);
  }
  .nav.open { display: flex; }
  .nav .btn { margin: .5rem 0 0; }
  .stats, .board-grid { grid-template-columns: 1fr; }
  .hero-home { min-height: 64vh; }
}

/* ---------- Nav dropdowns ---------- */
.has-sub { position: relative; }
.has-sub > a::after { content: ""; display: inline-block; margin-left: .45em; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); }
.sub {
  display: none;
  position: absolute; left: -1.2rem; top: calc(100% + .6rem);
  min-width: 240px;
  background: var(--white);
  padding: .8rem 0;
  box-shadow: 0 12px 34px rgba(0,0,0,.14);
  border-top: 3px solid var(--blue);
  z-index: 30;
}
.sub::before { content: ""; position: absolute; left: 0; right: 0; top: -1rem; height: 1rem; } /* hover bridge */
.has-sub:hover .sub, .has-sub:focus-within .sub { display: block; }
.sub a { display: block; padding: .5rem 1.4rem; text-transform: none; letter-spacing: 0; font-weight: 700; font-size: .95rem; white-space: nowrap; }
.sub a:hover { background: var(--grey); color: var(--blue); }

/* ---------- Interior pages ---------- */
.page-title { padding: clamp(3rem, 6vw, 5rem) 0 clamp(1.5rem, 3vw, 2.5rem); }
.page-title h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); margin-bottom: .6rem; }
.page-title .eyebrow { margin: 0; }
.content { padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(4rem, 8vw, 7rem); }
.content h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.content h3 { margin-top: 2.2rem; }
.lede { font-size: 1.1rem; max-width: 820px; }
.lede.center { margin-inline: auto; }
.muted { color: #7a7a7a; font-size: .85rem; }

/* Payscale table */
.table-scroll { overflow-x: auto; margin: 2rem 0; }
.pay { width: 100%; border-collapse: collapse; font-size: .95rem; }
.pay th, .pay td { padding: .85rem 1rem; text-align: right; border-bottom: 1px solid #e3e6ea; }
.pay thead th { background: var(--blue); color: var(--white); font-weight: 800; letter-spacing: .04em; }
.pay thead th:first-child, .pay tbody th { text-align: left; }
.pay tbody th { color: var(--ink); font-weight: 800; white-space: nowrap; }
.pay tbody tr:nth-child(even) { background: var(--grey); }

/* Contract */
.doc-card {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(2rem, 4vw, 4rem);
  background: var(--grey); padding: clamp(1.8rem, 3.5vw, 3rem); border-left: 6px solid var(--blue);
}
.doc-card h2 { margin-bottom: .6rem; }
.doc-toc { list-style: none; padding: 0; margin: 0; }
.doc-toc li { padding: .55rem 0; border-bottom: 1px solid #e3e6ea; }
.doc-toc li:last-child { border: 0; }
.doc-toc a { font-weight: 700; }

/* Representation */
.rep-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.rep-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.4rem; background: var(--grey); padding: clamp(1.5rem, 3vw, 2.5rem); }
.rep-form label { display: flex; flex-direction: column; gap: .35rem; font-size: .85rem; font-weight: 800; color: var(--ink); letter-spacing: .02em; }
.rep-form input, .rep-form select, .rep-form textarea {
  font: inherit; font-weight: 400; font-size: 1rem; color: var(--ink);
  padding: .8rem 1rem; border: 1px solid #d5d9df; background: var(--white); width: 100%;
}
.rep-form textarea { resize: vertical; }
.rep-form .full { grid-column: 1 / -1; }
.rep-form .check { flex-direction: row; align-items: center; gap: .6rem; font-weight: 700; }
.rep-form .check input { width: auto; }
.rep-form .btn { margin-top: .4rem; }

/* Store */
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem 2rem; margin-top: 2.5rem; }
.product { display: block; color: var(--ink); }
.product:hover { text-decoration: none; }
.product img { aspect-ratio: 15 / 8; object-fit: contain; width: 100%; background: var(--white); margin-bottom: 1rem; transition: transform .2s ease; }
.product:hover img { transform: translateY(-3px); }
.product-name { display: block; font-weight: 800; font-size: 1.05rem; }
.product-price { display: block; color: var(--blue); font-weight: 700; margin-top: .2rem; }

@media (max-width: 900px) {
  .doc-card, .rep-grid { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .has-sub { width: 100%; }
  .has-sub > a::after { display: none; }
  .sub { display: block; position: static; box-shadow: none; border: 0; padding: 0 0 .4rem 1rem; min-width: 0; }
  .sub::before { display: none; }
  .rep-form { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: 1fr; }
}

/* ---------- Home: member quick tiles ---------- */
.quick { padding: 0 0 clamp(4rem, 8vw, 7rem); }
.quick .eyebrow { text-align: center; }
.quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.quick-tile {
  display: flex; flex-direction: column; gap: .4rem;
  padding: 1.8rem 1.6rem; background: var(--grey); color: var(--ink);
  border-top: 4px solid var(--blue);
}
.quick-tile:hover { text-decoration: none; background: #eef1f5; }
.quick-tile i { font-size: 1.6rem; color: var(--blue); margin-bottom: .4rem; }
.quick-tile strong { font-size: 1.1rem; font-weight: 800; }
.quick-tile span { font-size: .92rem; color: var(--ink-soft); }

/* ---------- Members hub ---------- */
.hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.hub { display: block; padding: 2rem 1.8rem 1.6rem; background: var(--grey); color: var(--ink-soft); border-top: 4px solid var(--blue); }
.hub:hover { text-decoration: none; background: #eef1f5; }
.hub-num { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--blue); color: var(--white); font-size: 1.15rem; margin-bottom: 1rem; }
.hub h2 { font-size: 1.25rem; margin-bottom: .5rem; }
.hub p { font-size: .93rem; margin: 0; }
.wl-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem 1.6rem; margin-top: 1.5rem; }
.wl { display: flex; flex-direction: column; gap: .1rem; padding: .9rem 1.1rem; border-left: 3px solid var(--yellow); background: var(--grey); color: var(--ink); }
.wl:hover { text-decoration: none; background: #eef1f5; }
.wl strong { font-weight: 800; }
.wl span { font-size: .9rem; color: var(--ink-soft); }

/* ---------- Section headings inside content pages ---------- */
.section-h { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.5rem; border-top: 1px solid #e3e6ea; }
.jump { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1rem; }
.jump a { padding: .5rem 1.1rem; border-radius: 999px; background: var(--grey); color: var(--ink); font-weight: 700; font-size: .9rem; }
.jump a:hover { background: var(--blue); color: var(--white); text-decoration: none; }

/* ---------- Doc cards (contract / bylaws / meetings) ---------- */
.doc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; margin-bottom: 2.5rem; }
.doc-row .doc-card { display: block; }
.doc-card .eyebrow { margin-bottom: .6rem; }
.doc-card--alt { border-left-color: var(--yellow); }

/* ---------- Representation ---------- */
.alert { background: #fff8d6; border-left: 6px solid var(--yellow); padding: 1.4rem 1.8rem; margin-bottom: 2.5rem; color: var(--ink); }
.alert-contacts { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 2rem; margin-top: 1rem; }
.alert-contacts div { display: flex; flex-direction: column; font-size: .95rem; }
.alert-contacts span { font-weight: 800; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .2rem; }
.garrity { background: var(--grey); padding: 1.8rem 2rem; border-left: 6px solid var(--blue); }
.garrity p { font-size: .98rem; }

/* ---------- Field: restock ---------- */
.restock-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 1.2rem; margin: 1.5rem 0 2.5rem; }
.restock { background: var(--grey); padding: 1.3rem 1.4rem; border-top: 4px solid var(--blue); }
.restock h3 { font-size: 1rem; margin-bottom: .8rem; }
.restock h3 i { color: var(--blue); margin-right: .4rem; }
.restock .muted { margin: .8rem 0 0; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { display: inline-block; padding: .25rem .7rem; border-radius: 999px; background: var(--blue); color: var(--white); font-weight: 800; font-size: .85rem; letter-spacing: .04em; }
.sites td, .sites th { text-align: left; }
.sites .yes { color: var(--blue); font-weight: 800; }

/* ---------- Benefits resource cards ---------- */
.res-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin: 1.5rem 0 1rem; }
.res { display: flex; flex-direction: column; gap: .3rem; padding: 1.3rem 1.4rem; background: var(--grey); color: var(--ink); border-top: 4px solid var(--yellow); }
.res i { font-size: 1.35rem; color: var(--blue); margin-bottom: .5rem; }
.res:hover { text-decoration: none; background: #eef1f5; }
.res strong { font-weight: 800; }
.res span { font-size: .9rem; color: var(--ink-soft); }

@media (max-width: 900px) {
  .quick-grid, .restock-grid, .res-grid { grid-template-columns: 1fr 1fr; }
  .hub-grid { grid-template-columns: 1fr 1fr; }
  .doc-row, .alert-contacts { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .quick-grid, .restock-grid, .res-grid, .hub-grid, .wl-grid { grid-template-columns: 1fr; }
}

/* ---------- Members page opens straight into the hub ---------- */
.content--top { padding-top: clamp(2.5rem, 5vw, 4rem); }
.footnote { margin-top: 2rem; }

/* ---------- Board groups ---------- */
.board-group { margin: 3rem 0 1.5rem; padding-bottom: .6rem; border-bottom: 2px solid var(--blue); font-size: 1.2rem; }
.board .board-grid { gap: 2.5rem 2rem; }
.board .member img { aspect-ratio: 2 / 3; margin-bottom: .9rem; }
.board .member h3 { font-size: 1.1rem; color: var(--link); margin-bottom: .1rem; }
.board .member p { font-style: italic; color: var(--ink); font-weight: 700; font-size: .92rem; }
.board .board-grid { grid-template-columns: repeat(5, 1fr); gap: 2.2rem 1.6rem; }
@media (max-width: 900px) { .board .board-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .board .board-grid { grid-template-columns: repeat(2, 1fr); gap: 1.6rem 1rem; } }

/* ---------- Header overlaid on hero photos ---------- */
.site-header--over { position: absolute; top: 0; left: 0; right: 0; background: transparent; }
.site-header--over .nav > a:not(.btn) { color: var(--white); text-shadow: 0 1px 12px rgba(0,0,0,.35); }
.site-header--over .nav > a:not(.btn):hover { color: var(--yellow); }
.site-header--over .nav-toggle span { background: var(--white); }
.hero-home .ribbon-logo { bottom: -60px; }
@media (max-width: 640px) {
  .site-header--over .nav > a:not(.btn) { color: var(--ink); text-shadow: none; }
  .hero-home { height: auto; min-height: 0; background-size: cover; padding-top: 58vw; }
  .hero-home .ribbon { position: relative; }
  .hero-home .ribbon-logo { display: none; }
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Fuel panel chip groups ---------- */
.restock-grid { grid-template-columns: repeat(3, 1fr); }
.restock--wide { grid-column: 1 / -1; }
.chip-row { display: grid; grid-template-columns: 130px 1fr; gap: .6rem; align-items: start; margin-bottom: .8rem; }
.chip-row:last-child { margin-bottom: 0; }
.chip-label { font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); padding-top: .3rem; }
@media (max-width: 640px) { .chip-row { grid-template-columns: 1fr; } }

/* ---------- Work links page ---------- */
.il-group { font-size: 1.15rem; margin: 2.2rem 0 1rem; padding-bottom: .5rem; border-bottom: 2px solid var(--blue); }
.il-group:first-child { margin-top: 0; }
.il-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem 1.4rem; }
.il { display: flex; align-items: center; gap: 1rem; padding: .9rem 1.1rem; background: var(--grey); color: var(--ink); border-left: 3px solid var(--yellow); }
.il:hover { text-decoration: none; background: #eef1f5; }
.il-icon {
  flex: 0 0 44px; width: 44px; height: 44px; border-radius: 10px; background: var(--white);
  display: grid; place-items: center; box-shadow: 0 1px 4px rgba(0,0,0,.12); overflow: hidden;
  font-weight: 800; color: var(--blue); font-size: 1.1rem;
}
.il-icon::before { content: attr(data-initial); position: absolute; }
.il-icon img { position: relative; width: 28px; height: 28px; object-fit: contain; background: var(--white); }
.il-icon { position: relative; }
.il-text { display: flex; flex-direction: column; gap: .05rem; }
.il-text strong { font-weight: 800; }
.il-text span { font-size: .88rem; color: var(--ink-soft); }
@media (max-width: 640px) { .il-grid { grid-template-columns: 1fr; } }

/* ---------- Interior page top: header + title share one watermark ---------- */
.page-top .watermark { -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 100%); mask-image: linear-gradient(to bottom, #000 40%, transparent 100%); }
.page-top .watermark img { width: 820px; right: -60px; top: -120px; }
.page-top .site-header { position: relative; z-index: 1; }
.page-top .page-title { position: relative; z-index: 1; padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.page-title .lede { margin: 1.4rem auto 0; }

/* ---------- Mobile pass ---------- */
@media (max-width: 900px) {
  .restock-grid { grid-template-columns: 1fr 1fr; }
  .restock--wide { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .site-header .wrap { padding: 14px 0; }
  .brand img { width: 84px; }
  /* Hero pages: drop the overlay on phones — header sits above the photo */
  .site-header--over { position: relative; background: var(--white); }
  .site-header--over .nav-toggle span { background: var(--ink); }
  .hero-home { height: auto; min-height: 0; padding-top: 0; background: none; }
  .hero-home::before { content: ""; display: block; height: 92vw; background: url("../img/hero-home.jpg?v=20261012") center 35% / cover no-repeat; }
  .hero-home .ribbon { position: relative; padding: 1.6rem 6vw 2.6rem; }
  .hero-home .ribbon::before { display: none; }
  .hero-home .curve-white { height: 26px; }
  .hero-home .ribbon h1 { font-size: 1.6rem; }
  .hero-page { height: auto; aspect-ratio: 2246 / 1036; min-height: 0; background-size: 100% auto; background-position: center; }
  .page-title h1 { font-size: 2.2rem; }
  .page-title { padding-top: 2rem; }
  .page-top .watermark img { width: 520px; right: -140px; top: -80px; }
  .watermark--left img { width: 560px; left: -200px; }
  .intro, .feature { padding-top: 2rem; }
  .collage { min-height: 300px; }
  .stats { gap: 1.6rem; padding-bottom: 3rem; }
  .board-card .card { padding: 1.6rem; margin-top: -2rem; }
  .band { height: 60vw; }
  .restock-grid { grid-template-columns: 1fr; }
  .restock h3 { font-size: 1rem; }
  .chip { font-size: .8rem; padding: .2rem .6rem; }
  .hub-grid, .res-grid, .il-grid, .product-grid, .doc-row { grid-template-columns: 1fr; }
  .hub { padding: 1.4rem 1.3rem 1.2rem; }
  .alert { padding: 1.1rem 1.2rem; }
  .garrity { padding: 1.2rem 1.3rem; }
  .rep-form { padding: 1.2rem; }
  .table-scroll { margin-inline: -4vw; padding-inline: 4vw; }
  .pay th, .pay td { padding: .6rem .7rem; font-size: .88rem; }
  .board .board-grid { grid-template-columns: 1fr 1fr; gap: 1.4rem .9rem; }
  .board .member h3 { font-size: .98rem; }
  .board .member p { font-size: .82rem; }
  .board-group { margin-top: 2rem; }
  .contact-title h1 { font-size: 2.6rem; }
  .contact-cols { padding-top: 0; gap: 1.6rem; }
  .note { padding: 3rem 0; }
  .note input, .note textarea { padding: .9rem 1.1rem; }
  .social-band { padding: 3rem 0; }
  .site-footer { padding: 2.5rem 0; }
  .site-footer .wrap { gap: 1.6rem; }
  .site-footer img.logo { width: 130px; }
  .to-top { width: 44px; height: 44px; right: 16px; bottom: 16px; }
  .legal { font-size: .85rem; }
}

/* ---------- Store: duty toggle, shirt rows, cart ---------- */
.btn-blue { background: var(--blue); }
.btn.wide { display: block; width: 100%; padding: 1.15em; font-size: .9rem; }
.link { background: none; border: 0; padding: 0; font: inherit; font-size: .88rem; color: var(--link); cursor: pointer; text-decoration: underline; }

.duty { display: flex; width: max-content; max-width: 100%; margin: 0 auto clamp(1.5rem, 3vw, 2.5rem); padding: 5px; background: var(--grey); border-radius: 999px; box-shadow: inset 0 0 0 1px #e3e6ea; }
.duty button { border: 0; background: none; cursor: pointer; font: inherit; font-size: .85rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); padding: .95em 2.6em; border-radius: 999px; transition: background .15s ease, color .15s ease; }
.duty button[aria-pressed="true"] { background: var(--blue); color: var(--white); box-shadow: 0 4px 14px rgba(15,76,151,.3); }

.shirt { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; padding: clamp(1.5rem, 3vw, 2.5rem) 0; border-top: 1px solid #e3e6ea; }
.shirt[hidden] { display: none; }
.shirt:first-child, .shirt[hidden] + .shirt:not([hidden]) { border-top: 0; }
.shirt-photo img { width: 100%; aspect-ratio: 15 / 8; object-fit: contain; background: var(--white); }
.shirt-info h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: .2rem; }
.shirt-price { font-size: 1.25rem; font-weight: 800; color: var(--blue); margin-bottom: .6rem; }
.shirt-desc { font-size: .98rem; margin-bottom: 1.4rem; }
.sizes, .spots { border: 0; padding: 0; margin: 0 0 1.4rem; }
.sizes legend, .spots legend { padding: 0; margin-bottom: .6rem; font-size: .78rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); }
.sizes { display: flex; flex-wrap: wrap; gap: .5rem; }
.sizes legend { float: left; width: 100%; }
.sizes input, .spots input { position: absolute; opacity: 0; pointer-events: none; }
.sizes span { display: grid; place-items: center; min-width: 3.1rem; height: 2.9rem; padding: 0 .7rem; border: 1.5px solid #cfd5dc; border-radius: 8px; font-weight: 800; font-size: .92rem; color: var(--ink); cursor: pointer; transition: border-color .12s ease, background .12s ease; }
.sizes span:hover { border-color: var(--blue); }
.sizes input:checked + span { background: var(--blue); border-color: var(--blue); color: var(--white); }
.sizes input:focus-visible + span, .spots input:focus-visible + span { outline: 3px solid var(--yellow); outline-offset: 2px; }
.shirt-buy { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.shirt-buy .btn { flex: 1 1 auto; padding: 1.15em 2em; font-size: .85rem; }
.shirt-msg { min-height: 1.5em; margin: .7rem 0 0; font-size: .9rem; font-weight: 700; color: #1d7a45; }
.shirt-msg.warn { color: #b3261e; }

.stepper { display: inline-flex; align-items: center; border: 1.5px solid #cfd5dc; border-radius: 999px; background: var(--white); }
.stepper button { width: 2.7rem; height: 2.7rem; border: 0; background: none; font: inherit; font-size: 1.2rem; font-weight: 700; color: var(--ink); cursor: pointer; border-radius: 999px; }
.stepper button:hover { color: var(--blue); }
.stepper span { min-width: 1.6rem; text-align: center; font-weight: 800; color: var(--ink); }

.cart-bar { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 25; display: flex; gap: 1.4rem; align-items: center; justify-content: space-between; width: min(440px, calc(100vw - 32px)); padding: 1.05rem 1.6rem; border: 0; border-radius: 999px; background: var(--blue); color: var(--white); font: inherit; font-weight: 800; cursor: pointer; box-shadow: 0 10px 30px rgba(0,0,0,.28); }
.cart-bar[hidden] { display: none; }
.cart-bar span:first-child { font-size: .82rem; letter-spacing: .18em; text-transform: uppercase; }
.has-cart .to-top { display: none; }
.has-cart .legal { padding-bottom: 6.5rem; }

.drawer-backdrop { position: fixed; inset: 0; z-index: 39; background: rgba(10,20,35,.45); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 40; width: min(460px, 100vw); display: flex; flex-direction: column; background: var(--white); box-shadow: -12px 0 40px rgba(0,0,0,.2); transform: translateX(100%); visibility: hidden; transition: transform .25s ease, visibility .25s; }
.drawer.open { transform: none; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .drawer, .drawer-backdrop { transition: none; } }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 1.3rem 1.6rem; border-bottom: 1px solid #e3e6ea; }
.drawer-head h2 { margin: 0; font-size: 1.4rem; }
.drawer-close { width: 2.6rem; height: 2.6rem; border: 0; border-radius: 50%; background: var(--grey); font-size: 1.5rem; line-height: 1; color: var(--ink); cursor: pointer; }
.drawer-body { flex: 1; overflow-y: auto; padding: 1.4rem 1.6rem 2rem; }
.cart-empty { text-align: center; padding: 3rem 0; }
.cart-lines { list-style: none; margin: 0 0 1.6rem; padding: 0; }
.cart-lines li { display: grid; grid-template-columns: 104px 1fr auto; gap: 1rem; align-items: start; padding: 1rem 0; border-bottom: 1px solid #e3e6ea; }
.cart-lines img { width: 104px; aspect-ratio: 15 / 8; object-fit: contain; }
.cart-lines strong { display: block; color: var(--ink); font-weight: 800; line-height: 1.3; }
.cart-lines b { color: var(--ink); }
.line-main span { font-size: .9rem; }
.line-main .stepper { margin: .5rem .8rem 0 0; }
.line-main .stepper button { width: 2.2rem; height: 2.2rem; }
.line-main > span { display: block; }
.spots { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.spots legend { float: left; width: 100%; grid-column: 1 / -1; }
.spots span { display: block; padding: .85rem 1rem; border: 1.5px solid #cfd5dc; border-radius: 8px; font-weight: 700; font-size: .92rem; color: var(--ink); cursor: pointer; }
.spots input:checked + span { border-color: var(--blue); background: #eef4fb; box-shadow: inset 0 0 0 1px var(--blue); }
.cart-total { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 1.2rem; font-weight: 700; color: var(--ink); }
.cart-total b { font-size: 1.6rem; font-weight: 800; }
.link.back { display: block; margin: 1rem auto 0; }
.demo-note { background: #fff8d6; border-left: 5px solid var(--yellow); padding: .9rem 1.1rem; font-size: .9rem; color: var(--ink); margin-bottom: .6rem; }
.demo-note span { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; margin-bottom: .2rem; }
.done { text-align: center; padding: 1rem 0 .4rem; }
.done-check { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 50%; background: var(--green); color: var(--white); font-size: 1.9rem; font-weight: 800; }
.done-lead { font-size: 1.1rem; color: var(--ink); margin-bottom: .4rem; }

@media (max-width: 900px) {
  .shirt { grid-template-columns: 1fr; gap: 1rem; }
}
@media (max-width: 640px) {
  .duty { width: 100%; }
  .duty button { flex: 1; padding: .95em .5em; }
  .cart-bar { bottom: 14px; }
}


/* ---------- About hero video ---------- */
.hero-page--video { overflow: hidden; display: grid; place-items: center; text-align: center; background: #1f2f3f; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.hero-page--video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.42), rgba(0,0,0,.24) 40%, rgba(0,0,0,.24)); pointer-events: none; }
.hero-page--video { height: clamp(340px, 39.7vw, 800px); }
.hero-page--video h1 { margin: 0; white-space: nowrap; font-size: clamp(1.2rem, 3.6vw, 4.6rem); }
.hero-page:not(.hero-page--video) h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* All sizes: the video stays put while the page (headline included) scrolls up over it, as on the old site */
@media all {
  .hero-page--video { --hero-h: clamp(340px, 39.7vw, 800px); clip-path: inset(0); }
  .hero-page--video .hero-video { position: fixed; inset: 0 auto auto 0; height: var(--hero-h); }
  .hero-page--video h1 { position: relative; z-index: 1; margin-top: calc(var(--hero-h) * .12); }
}
@media (max-width: 640px) {
  /* Phones: the header sits over the video like on desktop, and the video is tall enough to read as a hero */
  body:has(.hero-page--video) .site-header--over { position: absolute; background: transparent; }
  body:has(.hero-page--video) .site-header--over .nav-toggle span { background: var(--white); }
  body:has(.hero-page--video) .site-header--over .nav.open { box-shadow: 0 12px 30px rgba(0,0,0,.25); }
  .hero-page--video { --hero-h: max(320px, 82vw); height: var(--hero-h); aspect-ratio: auto; padding: 0; }
  .hero-page--video::after { background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.22) 45%, rgba(0,0,0,.28)); }
  .hero-page--video h1 { font-size: 5.6vw; padding: 0; margin: 0; }
  .hero-page--video h1 { margin-top: calc(var(--hero-h) * .2); }
}

/* ---------- Board: 2023-site layout — three across, square photo, off-duty photo on hover ---------- */
.board h2 { font-size: 2rem; margin-bottom: .6rem; }
.board .eyebrow { font-size: .8rem; letter-spacing: .19em; margin-bottom: 2.6rem; }
.board .board-group { margin: 3.4rem 0 2rem; padding-bottom: .7rem; border-bottom: 2px solid var(--blue); font-size: 1.15rem; letter-spacing: .02em; }
.board .eyebrow + .board-group { margin-top: 0; }
.board .board-grid { grid-template-columns: repeat(3, 1fr); gap: 3.4rem 2.5rem; align-items: start; }
.board .member { text-align: left; outline-offset: 6px; }
.board .member-photo { position: relative; width: min(350px, 100%); aspect-ratio: 1 / 1; overflow: hidden; margin: 0; background: #cfd6de; transition: transform .3s ease; }
.board .member-photo img { display: block; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: center 20%; margin: 0; }
.board .member-photo .off { position: absolute; inset: 0; opacity: 0; transition: opacity .3s ease; }
.board .member:hover .member-photo, .board .member:focus-visible .member-photo, .board .member.is-off .member-photo { transform: translateY(-5px); }
.board .member:hover .off, .board .member:focus-visible .off, .board .member.is-off .off { opacity: 1; }
.board .member h3 { font-size: 1.375rem; line-height: 1.2; color: var(--ink); margin: 1.25rem 0 .35rem; }
.board .member .role { font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; line-height: 1.5; color: var(--link); margin: 0; }
.board .member p { font-style: normal; font-weight: 400; font-size: 1rem; line-height: 1.7; color: var(--ink); margin: 0 0 1.25rem; }
@media (max-width: 900px) { .board .board-grid { grid-template-columns: repeat(2, 1fr); gap: 2.6rem 1.6rem; } }
@media (max-width: 640px) { .board .board-grid { grid-template-columns: 1fr; gap: 2.4rem; } .board .member-photo { width: 100%; } .board .member h3 { font-size: 1.25rem; margin: 1rem 0 .3rem; } }
@media (prefers-reduced-motion: reduce) { .board .member-photo, .board .member-photo .off { transition: none; } }

/* ---------- Field: sort by distance ---------- */
html:has(.jump--bar) { overflow-x: clip; }
.jump--bar { position: sticky; top: 0; z-index: 22; display: block; margin: 0 0 1rem; padding: .6rem 0; }
.jump--bar::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); z-index: -1; background: var(--white); }
.jump.is-stuck::before, .jump.is-stuck .subnav { box-shadow: 0 1px 0 #e3e6ea, 0 8px 16px -8px rgba(0,0,0,.18); }
.jump.is-stuck:has(.subnav.is-on)::before { box-shadow: none; }
.jump--bar::before { transition: box-shadow .2s ease; }
.bar-row { display: flex; align-items: center; gap: .6rem; }
.bar-links { display: flex; gap: .5rem; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.bar-links::-webkit-scrollbar, .subnav::-webkit-scrollbar { display: none; }
.jump a { white-space: nowrap; transition: background-color .25s ease, color .25s ease, box-shadow .25s ease; }
.jump a.is-active { background: var(--blue); color: var(--white); }
.jump .sm { display: none; }
.bar-tools { display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; }
.bar-search { flex: 0 1 200px; min-width: 0; font: inherit; font-size: .9rem; color: var(--ink); padding: .45rem 1rem; border: 1.5px solid #d5d9df; border-radius: 999px; background: var(--white); }
.jump .tool, .jump .sort-btn, .jump .unlock-fab { display: inline-flex; align-items: center; justify-content: center; gap: .45em; padding: .5rem 1.1rem; border: 0; border-radius: 999px; font: inherit; font-weight: 700; font-size: .9rem; white-space: nowrap; cursor: pointer; }
.jump .tool, .jump .sort-btn { box-shadow: inset 0 0 0 1.5px var(--blue); background: var(--white); color: var(--blue); }
.jump .sort-btn[aria-pressed="true"], .jump .unlock-fab, .jump .tool[aria-expanded="true"] { background: var(--blue); color: var(--white); }
.jump .sort-btn:disabled { opacity: .6; cursor: progress; }
.jump .search-toggle, .jump .unlock-fab[hidden], .no-match[hidden], .sites tr[hidden] { display: none; }
.subnav { position: absolute; left: calc(50% - 50vw); right: calc(50% - 50vw); top: 100%; display: flex; gap: .4rem; padding: 0 calc(50vw - 50%) .6rem; background: var(--white); overflow-x: auto; scrollbar-width: none; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .18s ease, transform .18s ease, visibility 0s .18s; }
.subnav.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .22s ease, transform .22s ease; }
@media (prefers-reduced-motion: reduce) { .subnav, .subnav.is-on, .jump a, .jump::before { transition: none; } }
.jump .subnav a { padding: .3rem .85rem; font-size: .8rem; background: var(--white); box-shadow: inset 0 0 0 1px #d5d9df; }
.jump .subnav a:hover { background: var(--grey); color: var(--ink); }
.jump .subnav a.is-active { background: #e6eef8; color: var(--blue); box-shadow: inset 0 0 0 1.5px var(--blue); }
/* Home: keep the whole seal inside its section (it was positioned 40px above the top edge, which clipped the ring) */
.watermark--left img { top: 24px; }
.payscale { margin: 1.4rem 0 2rem; }
.payscale figcaption { font-weight: 800; font-size: .9rem; letter-spacing: .02em; color: var(--ink); margin-bottom: .6rem; }
.payscale-img { display: block; overflow-x: auto; border: 1px solid #e3e6ea; border-radius: 8px; background: #fff; -webkit-overflow-scrolling: touch; }
.payscale-img img { display: block; width: 100%; min-width: 760px; height: auto; }
.rep-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.rep-form button:disabled { opacity: .6; cursor: progress; }
#repMsg.is-err { color: #b3261e; font-weight: 700; }
.rep-done { text-align: center; padding: 1.5rem .5rem; animation: shirt-in .4s ease-out both; }
.rep-done > i { font-size: 2.4rem; color: #2e7d32; }
.rep-done h3 { margin: .6rem 0 .4rem; }
.rep-done p { margin: .4rem 0; }
.upcoming { margin-top: 2.6rem; }
.up-sentinel { display: block; height: 1px; }
.up-head { position: sticky; top: 0; z-index: 15; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .8rem 1.2rem; padding: .7rem 0; }
.up-head::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); z-index: -1; background: var(--white); transition: box-shadow .2s ease; }
.up-head.is-stuck::before { box-shadow: 0 1px 0 #e3e6ea, 0 8px 16px -8px rgba(0,0,0,.18); }
html:has(.up-head) { overflow-x: clip; }
.up-head + .agenda { margin-top: .5rem; }
.up-head h3 { margin: 0; }
.up-sub { display: inline-flex; align-items: center; justify-content: center; gap: .5em; padding: .5rem 1.1rem; border-radius: 999px; background: var(--white); color: var(--blue); box-shadow: inset 0 0 0 1.5px var(--blue); font-weight: 700; font-size: .9rem; white-space: nowrap; transition: background-color .2s ease, color .2s ease; }
.up-sub:hover, .sub-menu[open] > .up-sub { background: var(--blue); color: var(--white); }
.mock-note { margin: .9rem 0 0; padding: .6rem .9rem; font-size: .88rem; background: #fff8d6; border-left: 4px solid #e2c84a; color: var(--ink); }
.agenda { list-style: none; margin: 1.2rem 0 0; padding: 0; border-top: 1px solid #e3e6ea; }
.ev { display: flex; gap: 1.2rem; align-items: center; padding: 1.1rem 0; border-bottom: 1px solid #e3e6ea; }
.ev-date { flex: 0 0 4.4rem; display: flex; flex-direction: column; align-items: center; padding: .55rem 0 .5rem; border-radius: 10px; background: var(--blue); color: var(--white); line-height: 1.05; }
.ev-date span { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.ev-date b { font-size: 1.75rem; font-weight: 800; }
.ev-date i { font-style: normal; font-size: .72rem; opacity: .85; }
.ev-body { min-width: 0; }
.ev-body h4 { margin: .2rem 0 .3rem; font-size: 1.08rem; }
.ev-kind { display: inline-block; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.ev-kind--gen { color: #b5541f; }
.sub-menu { position: relative; }
.sub-menu > summary { list-style: none; cursor: pointer; }
.sub-menu > summary::-webkit-details-marker { display: none; }
.sub-caret { font-size: .7em; transition: transform .2s ease; }
.sub-menu[open] .sub-caret { transform: rotate(180deg); }
.sub-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; min-width: 270px; padding: .4rem; background: var(--white); border-radius: 14px; box-shadow: 0 14px 40px rgba(0,0,0,.18), 0 0 0 1px #e3e6ea; animation: sub-in .18s ease-out both; }
@keyframes sub-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.sub-pop a { display: flex; align-items: center; gap: .8rem; padding: .7rem .8rem; border-radius: 10px; color: var(--ink); text-decoration: none; }
.sub-pop a:hover, .sub-pop a:focus-visible { background: var(--grey); text-decoration: none; }
.sub-pop a > i { width: 1.4rem; font-size: 1.25rem; text-align: center; color: var(--blue); }
.sub-pop span { display: flex; flex-direction: column; line-height: 1.3; }
.sub-pop small { font-size: .8rem; color: var(--ink-soft); }
@media (max-width: 640px) { .sub-menu { width: 100%; } .sub-pop { left: 0; right: 0; min-width: 0; } }
@media (prefers-reduced-motion: reduce) { .sub-pop { animation: none; } .sub-caret { transition: none; } }
.discord-band { position: relative; display: flex; align-items: center; gap: 1.2rem 1.6rem; flex-wrap: wrap; margin: 0 0 2rem; padding: 1.5rem 1.8rem; border-radius: 14px; background: #5865f2; color: #fff; }
.dc-logo { font-size: 2.6rem; flex: 0 0 auto; }
.dc-text { flex: 1 1 280px; min-width: 0; }
.dc-text h2 { margin: 0 0 .25rem; color: #fff; font-size: 1.35rem; }
.dc-text p { margin: 0; color: rgba(255,255,255,.88); }
.dc-actions { flex: 0 1 auto; display: flex; }
.dc-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; padding: .75rem 1.4rem; border: 0; border-radius: 999px; background: #fff; color: #3c45c4; font: inherit; font-weight: 800; white-space: nowrap; cursor: pointer; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.dc-btn:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.18); }
.dc-btn:disabled { opacity: .6; cursor: progress; }
.dc-ask, .dc-lock { display: none; }
.discord-band.is-locked .dc-go { display: none; }
.discord-band.is-locked:not(.is-asking) .dc-ask { display: inline-flex; }
.discord-band.is-asking .dc-lock { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; animation: dc-fade .2s ease-out both; }
@keyframes dc-fade { from { opacity: 0; } to { opacity: 1; } }
.discord-band.is-asking .dc-text { padding-right: 1.4rem; }
.dc-lock .pw-wrap { flex: 1 1 200px; }
.discord-band.is-asking .dc-lock { max-width: 420px; }
.dc-lock .pw-wrap input { border-color: transparent; }
.dc-cancel { position: absolute; top: .5rem; right: .7rem; border: 0; background: none; color: #fff; font-size: 1.6rem; line-height: 1; padding: 0 .2rem; cursor: pointer; opacity: .85; }
.dc-msg { flex-basis: 100%; margin: 0; font-size: .9rem; font-weight: 700; color: #fff; }
.dc-msg:empty { display: none; }
@media (max-width: 640px) { .discord-band { padding: 1.3rem; } .dc-actions, .dc-btn, .dc-lock { width: 100%; } .dc-logo { font-size: 2.1rem; } }
@media (prefers-reduced-motion: reduce) { .dc-btn { transition: none; } .discord-band.is-asking .dc-lock { animation: none; } }
.il-icon .il-fa { position: relative; font-size: 1.35rem; color: var(--blue); }
/* Mobile menu: keep the opened nav above page titles and sticky bars (it was rendering underneath them) */
.page-top .site-header { z-index: 40; }
/* Full-bleed bars use overflow-x: clip; older browsers without it fall back to hiding sideways overflow */
@supports not (overflow: clip) { body { overflow-x: hidden; } }
/* Members page: pull the hub up so the first row of tiles (titles included) shows without scrolling */
body:has(.discord-band) .page-top .page-title { padding-bottom: clamp(1.8rem, 3.2vw, 2.6rem); }
section.content:has(> .discord-band) { padding-top: 1.6rem; }
section.content > .discord-band { padding-top: 1.1rem; padding-bottom: 1.1rem; margin-bottom: 1.4rem; }
/* Home: ATCEMS capabilities as a clean two-part list (name, then what it does) */
.feature .caps { list-style: none; margin: -.2rem 0 1.6rem; padding: 0; display: grid; gap: .55rem; }
.feature .caps li { position: relative; padding-left: 1.1rem; font-size: .95rem; line-height: 1.5; }
.feature .caps li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.feature .caps b { color: var(--ink); }
.feature .caps b::after { content: " \2014\00a0"; font-weight: 400; color: var(--ink-soft); }
.stats .num { font-variant-numeric: tabular-nums; }
/* Home "Meet Our Board" card: faint association seal behind the text, as on the old site */
.board-card .card { position: relative; overflow: hidden; }
.board-card .card::before { content: ""; position: absolute; z-index: 0; top: 50%; left: 25%; width: min(720px, 62%); aspect-ratio: 1; transform: translate(-50%, -50%); background: url("../img/logo.png") center / contain no-repeat; opacity: .08; pointer-events: none; }
.board-card .card > * { position: relative; z-index: 1; }
@media (max-width: 900px) { .board-card .card::before { left: 50%; top: 32%; width: 110%; } }
/* Home: soft coral glow on the "Learn More" buttons */
.feature .btn-coral, .board-card .btn-coral { box-shadow: 0 10px 28px -6px rgba(238,111,92,.65), 0 0 22px rgba(238,111,92,.28); transition: box-shadow .2s ease, transform .2s ease; }
.feature .btn-coral:hover, .board-card .btn-coral:hover { transform: translateY(-1px); box-shadow: 0 14px 32px -6px rgba(238,111,92,.75), 0 0 28px rgba(238,111,92,.35); }
/* Home hero ribbon: edges traced from the original site's blue band (curves scale with page width) */
.hero-home .ribbon { min-height: 15.04vw; padding-top: .62vw; padding-bottom: 5.83vw; display: flex; flex-direction: column; justify-content: flex-start; }
.hero-home .ribbon h1 { font-size: clamp(1.6rem, 3.64vw, 4.4rem); font-weight: 800; line-height: 1.15; margin-bottom: .25em; }
.hero-home .ribbon p { font-size: clamp(.95rem, 1.88vw, 2.2rem); font-weight: 800; }
.hero-home .ribbon-logo { width: clamp(120px, 13.4vw, 240px); }
.hero-home .ribbon::before { display: block; top: auto; bottom: calc(100% - 1px); height: 2.555vw; transform: none; clip-path: none; background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 25.55' preserveAspectRatio='none'><path fill='%2302559e' d='M0,25.55 L20,22.43 L40,19.55 L60,16.89 L80,14.46 L100,12.24 L120,10.23 L140,8.42 L160,6.81 L180,5.39 L200,4.15 L220,3.09 L240,2.19 L260,1.46 L280,0.89 L300,0.46 L320,0.17 L340,0.02 L360,0.00 L380,0.10 L400,0.31 L420,0.64 L440,1.06 L460,1.58 L480,2.18 L500,2.87 L520,3.63 L540,4.45 L560,5.34 L580,6.27 L600,7.26 L620,8.28 L640,9.33 L660,10.41 L680,11.50 L700,12.60 L720,13.71 L740,14.81 L760,15.91 L780,16.98 L800,18.03 L820,19.04 L840,20.02 L860,20.95 L880,21.82 L900,22.64 L920,23.38 L940,24.05 L960,24.63 L980,25.13 L1000,25.52 L1000,25.55 L0,25.55Z'/></svg>") center / 100% 100% no-repeat; }
.hero-home .curve-white { height: 3.839vw; clip-path: none; background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 38.39' preserveAspectRatio='none'><path fill='%23ffffff' d='M0,38.39 L20,34.51 L40,30.87 L60,27.47 L80,24.29 L100,21.35 L120,18.62 L140,16.10 L160,13.80 L180,11.69 L200,9.79 L220,8.07 L240,6.54 L260,5.19 L280,4.00 L300,2.99 L320,2.13 L340,1.43 L360,0.88 L380,0.46 L400,0.18 L420,0.03 L440,0.00 L460,0.08 L480,0.27 L500,0.56 L520,0.95 L540,1.42 L560,1.96 L580,2.59 L600,3.27 L620,4.01 L640,4.81 L660,5.64 L680,6.52 L700,7.42 L720,8.33 L740,9.27 L760,10.20 L780,11.13 L800,12.05 L820,12.96 L840,13.83 L860,14.67 L880,15.46 L900,16.21 L920,16.89 L940,17.50 L960,18.04 L980,18.49 L1000,18.85 L1000,38.39 L0,38.39Z'/></svg>") center / 100% 100% no-repeat; }
@media (max-width: 640px) { .hero-home .ribbon { min-height: 0; padding: 1.4rem 6vw calc(2.2rem + 3.839vw); } .hero-home .ribbon::before { display: block; } .hero-home .curve-white { height: 3.839vw; } }
/* Home collage: organic overlapping cluster — every photo touches another, no loose floaters */
.feature > .collage { align-self: center; position: relative; min-height: 0; aspect-ratio: 1 / .96; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(12, 1fr); }
.feature > .collage img { position: relative; inset: auto; width: 100%; height: 100%; min-height: 0; box-shadow: 0 12px 30px rgba(0,0,0,.2); }
.feature > .collage .c1 { grid-column: 3 / 13; grid-row: 1 / 8; z-index: 1; }
.feature > .collage .c2 { grid-column: 1 / 6; grid-row: 5 / 13; z-index: 2; }
.feature > .collage .c3 { grid-column: 4 / 13; grid-row: 7 / 13; z-index: 3; transform-origin: 100% 100%; transform: translate(3%, -4%) scale(.84); }
@media (max-width: 900px) { .feature > .collage { max-width: 640px; width: 100%; margin: 0 auto; } .feature > .collage .c3 { transform: translate(2%, 3%) scale(.84); } }
.btn.is-sealed { cursor: pointer; display: inline-flex; align-items: center; gap: .5em; }
.doc-card .btn .lbl { pointer-events: none; }
.doc-card .btn[data-sealed]:not(.is-sealed) > .fa-lock { display: none; }
.ev-kind--other { color: var(--ink-soft); }
.ev[hidden], .up-empty[hidden] { display: none; }
.ev-add { font-weight: 700; white-space: nowrap; }
.ev-add i { color: inherit; }
.ev-meta { display: flex; flex-wrap: wrap; gap: .2rem 1.2rem; margin: 0; font-size: .92rem; color: var(--ink-soft); }
.ev-meta i { width: 1.1em; color: var(--blue); }
.up-foot { margin-top: 1rem; font-size: .9rem; }
@media (max-width: 640px) { .ev { gap: .9rem; align-items: flex-start; } .ev-date { flex-basis: 3.6rem; } .ev-date b { font-size: 1.45rem; } .up-sub { width: 100%; justify-content: center; } }
.contact-cols .mail-addr { font-style: normal; line-height: 1.5; }
td.is-unveil { animation: unveil .55s ease-out both; }
@keyframes unveil { from { filter: blur(4.5px); opacity: .5; } to { filter: none; opacity: 1; } }
.lock { transition: opacity .25s ease, transform .25s ease; }
.lock.is-fading { opacity: 0; transform: translateY(-6px); }
#lockSlot { transition: opacity .22s ease, transform .22s ease; }
#lockSlot.is-out { opacity: 0; transform: translateY(-6px); }
.shirt.is-in { animation: shirt-in .45s ease-out both; }
@keyframes shirt-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { td.is-unveil, .shirt.is-in { animation: none; } .lock, #lockSlot { transition: none; } }
@keyframes sort-btn-in { from { opacity: 0; transform: translate(var(--tx, -50%), 14px); } to { opacity: 1; transform: translate(var(--tx, -50%), 0); } }
@media (prefers-reduced-motion: reduce) { .lock.is-sheet, .lock.is-sheet.is-leaving { animation: none; } .unlock-fab, .unlock-fab.is-shown { transition: none; } }
.lock { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.1rem; margin: 1.2rem 0 0; padding: 1.1rem 1.4rem; background: var(--grey); border-left: 6px solid var(--blue); }
.lock > i { font-size: 1.3rem; color: var(--blue); }
.lock-text { flex: 1 1 260px; display: flex; flex-direction: column; line-height: 1.4; color: var(--ink); }
.lock-text span { font-size: .92rem; color: var(--ink-soft); }
.pw-wrap { position: relative; flex: 0 1 220px; min-width: 0; display: flex; }
.pw-wrap input { width: 100%; min-width: 0; font: inherit; font-size: 1rem; line-height: 1.4; color: var(--ink); padding: .7rem 2.9rem .7rem 1.2rem; border: 1.5px solid #d5d9df; border-radius: 999px; background: var(--white); }
.pw-wrap input::placeholder { color: #8a8a8a; }
.pw-wrap input::-ms-reveal, .pw-wrap input::-ms-clear { display: none; }
.pw-eye { position: absolute; top: 50%; right: .45rem; transform: translateY(-50%); width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border: 0; border-radius: 999px; background: none; color: var(--ink-soft); cursor: pointer; }
.pw-eye:hover, .pw-eye[aria-pressed="true"] { color: var(--blue); }
.lock .btn:disabled { opacity: .6; cursor: progress; }
.lock-msg { flex-basis: 100%; margin: 0; font-size: .9rem; font-weight: 700; color: #b3261e; }
.lock-msg:empty, .lock[hidden], .unlocked-note[hidden] { display: none; }
.legal .wrap:has(.relock-foot) { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1.5rem; }
.legal .relock-foot { color: var(--white); font-size: inherit; opacity: .8; }
.legal .relock-foot:hover { opacity: 1; }
.legal .relock-foot[hidden] { display: none; }
.lock { position: relative; }
.lock-close { display: none; position: absolute; top: .3rem; right: .5rem; border: 0; background: none; font-size: 1.6rem; line-height: 1; color: var(--ink-soft); cursor: pointer; }
.lock.is-sheet { position: fixed; left: 50%; bottom: 22px; z-index: 30; --tx: -50%; transform: translateX(-50%); width: min(480px, calc(100vw - 32px)); margin: 0; padding-right: 2.6rem; background: var(--white); box-shadow: 0 14px 40px rgba(0,0,0,.32); animation: sort-btn-in .25s ease-out both; }
.lock.is-sheet .lock-close { display: block; }
.unlock-fab { position: fixed; left: 50%; bottom: 22px; z-index: 25; --tx: -50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: .5em; padding: .85rem 1.5rem; border: 0; border-radius: 999px; background: var(--blue); color: var(--white); font: inherit; font-weight: 700; font-size: .9rem; white-space: nowrap; cursor: pointer; box-shadow: 0 10px 30px rgba(0,0,0,.28); opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, 14px); transition: opacity .25s ease, transform .25s ease, visibility 0s .25s; }
.unlock-fab.is-shown { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); transition: opacity .28s ease-out, transform .28s ease-out; }
.lock.is-sheet.is-leaving { animation: sheet-out .2s ease-in both; }
@keyframes sheet-out { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, 14px); } }
.unlock-fab.is-open { background: var(--white); color: var(--blue); box-shadow: inset 0 0 0 1.5px var(--blue), 0 10px 30px rgba(0,0,0,.28); }
.unlock-fab[hidden] { display: none; }
.is-locked td[data-sec] { cursor: pointer; }
.ph { filter: blur(4.5px); -webkit-user-select: none; user-select: none; }
.is-locked td[data-sec]::before { content: "\f023"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: .7rem; color: var(--blue); position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
.is-locked td[data-sec]:hover::before { color: var(--ink); }
.sort-status { font-size: .9rem; font-weight: 700; color: #b3261e; }
.sort-status[hidden], .restock [hidden] { display: none; }
a.chip:hover { text-decoration: none; filter: brightness(1.15); }
.dist { font-weight: 400; opacity: .75; white-space: nowrap; }
.dist::before { content: "\00a0\00b7\00a0"; }
.chips--merged + .chip-row { margin-top: 0; }
.sites tbody tr.grp, .sites tbody tr.grp:nth-child(even) { background: #e6eef8; }
.sites tbody tr.grp th { padding-top: 1.1rem; font-size: 1.2rem; color: var(--blue); border-bottom: 2px solid var(--blue); }
.sites.is-sorted tr.grp { display: none; }
.sites small { display: block; line-height: 1.4; }
.sites td.codes { font-size: .88rem; line-height: 1.5; }
table.sites { table-layout: fixed; }
.sites thead th:nth-child(1) { width: 28%; } .sites thead th:nth-child(2) { width: 30%; } .sites thead th:nth-child(3) { width: 24%; } .sites thead th:nth-child(4) { width: 18%; }
.sites tbody th { white-space: normal; }
.sites td { overflow-wrap: anywhere; }
.sites td.codes b, .codes b { color: var(--ink); font-weight: 800; }
a.chip[data-tip] { position: relative; }
a.chip[data-tipsite] i { display: none; }
a.chip[data-tip] i { display: inline-block; font-size: .7em; margin-right: .4em; opacity: .85; }
a.chip[data-tip]::after { content: attr(data-tip); position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 10; padding: .35rem .7rem; border-radius: 6px; background: var(--ink); color: var(--white); font-size: .8rem; font-weight: 700; letter-spacing: 0; white-space: nowrap; box-shadow: 0 6px 18px rgba(0,0,0,.25); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .12s ease; }
a.chip[data-tip]:hover::after, a.chip[data-tip]:focus-visible::after { opacity: 1; visibility: visible; }
@media (max-width: 640px) {
  .sites thead, .sites td.nil { display: none; }
  .lock .pw-wrap, .lock .btn { flex: 1 1 100%; }
  .sites tbody td[data-sec] { padding-left: 1.2rem; }
  .sites tbody tr { display: block; padding: .75rem .8rem; border-bottom: 1px solid #e3e6ea; }
  .sites tbody th, .sites tbody td { display: block; padding: .1rem 0; border: 0; white-space: normal; }
  .sites tbody th { font-size: 1rem; }
  .sites td.codes { white-space: normal; }
  .sites tbody tr.grp th { padding: .3rem 0 0; border: 0; }
  .sites tbody tr.grp { border-bottom: 2px solid var(--blue); }
}
@media (max-width: 640px) {
  .jump .lg, .jump .sort-btn span, .jump .unlock-fab span { display: none; }
  .jump .sm { display: inline; }
  .bar-row { flex-wrap: wrap; gap: .4rem; }
  .bar-links { flex: 1 1 0; gap: .3rem; }
  .bar-tools { gap: .35rem; }
  .jump .bar-links a { padding: .4rem .7rem; font-size: .85rem; }
  .jump .tool, .jump .sort-btn, .jump .unlock-fab { width: 2.2rem; height: 2.2rem; padding: 0; }
  .jump .search-toggle { display: inline-flex; }
  .bar-search { display: none; order: 9; flex: 1 1 100%; }
  .jump.search-open .bar-search { display: block; }
  .lock.is-sheet, .unlock-fab { bottom: 14px; }
}