/* ==========================================================================
   The Advocate Path: the frame - header "hanging ribbon tab", the practice-areas panel, the reading menu, the phone
   menu (#mobileNav), the footer with the oversized wordmark, the skip link.
   Markup: src/components/Header.tsx, Footer.tsx, Logo.tsx, HeaderScroll.tsx. Hooks kept for main.js and Bootstrap:
   .site-header .navbar .dropdown / [data-bs-toggle=dropdown] / .dropdown-menu (.mega-menu, .mega-cta), .navbar-nav
   .nav-link, .navbar-toggler, #mobileNav #ocAcc #oc1 #oc2, .btn-close[data-bs-dismiss], .site-footer li, [data-year].
   ========================================================================== */

html { scroll-padding-top: calc(var(--header-h-scrolled) + 24px); }

/* ---- skip link ---- */
.skip-link:focus, .skip-link:focus-within {
  position: absolute !important;
  top: var(--sp-2);
  left: var(--margin);
  z-index: 2000;
  padding: 10px 14px;
  background: var(--ink-text);
  color: var(--parchment);
  font: 700 var(--text-small) / 1.2 var(--font-body);
  text-decoration: underline;
}

/* ---- the bar: parchment, a brass rule at its foot, sticky; compact after scrolling ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--parchment);
  border-bottom: 1px solid var(--brass);
  transition: box-shadow 0.25s ease;
}
.site-header.is-scrolled { box-shadow: 0 12px 24px -22px rgba(30, 36, 48, 0.45); }
.site-header .navbar {
  --bs-navbar-padding-x: 0;
  --bs-navbar-padding-y: 0;
  --bs-navbar-color: var(--ink-text);
  --bs-navbar-hover-color: var(--ox);
  --bs-navbar-active-color: var(--ox);
  --bs-navbar-brand-color: var(--ink-text);
  --bs-navbar-brand-hover-color: var(--ink-text);
  display: block;
  padding: 0;
}
.site-header .hdr-bar {
  position: relative;      /* the practice-areas panel hangs from here, across the content width */
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: 0;
  height: var(--header-h);
  transition: height 0.25s ease;
}
.site-header.is-scrolled .hdr-bar { height: var(--header-h-scrolled); }

/* the mark and the name */
.navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0 auto 0 0;
  padding: 0;
  color: var(--ink-text);
  font: 700 25px / 1 var(--font-heading);
  letter-spacing: -0.012em;
  text-decoration: none;
  white-space: nowrap;
}
.navbar-brand:hover, .navbar-brand:focus { color: var(--ink-text); }
.navbar-brand .word i { font-style: italic; font-weight: 400; letter-spacing: 0; }
/* the logo (17 Oct): the ribbon mark and the outlined name in one drawing (Logo.tsx), sized by its height; the words
   beside it are visually hidden. 54 px tall on wide screens (the name about 24 px), 46 px in the 68 px stuck bar; the
   two-line lockup (.tap-logo--stack) only under 360 px. The sizes keep the full menu row clear: see "narrower screens" */
.navbar-brand .tap-logo { display: block; flex: none; width: auto; height: 54px; transition: height 0.25s ease; }
.navbar-brand .tap-logo--stack { display: none; }
.site-header.is-scrolled .navbar-brand .tap-logo { height: 46px; }

/* the menu: Caslon 18 px, a brass rule under the current entry and on hover */
.hdr-menu {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  align-self: stretch;
  gap: 0;
  margin: 0 8px 0 20px;
  padding: 0;
  list-style: none;
}
.hdr-menu .nav-item { display: flex; max-width: none; }
.site-header .hdr-menu .nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  color: var(--ink-text);
  font: 400 18px / 1 var(--font-body);
  white-space: nowrap;
  text-decoration: none;
}
.site-header .hdr-menu .nav-link::before {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: calc(50% + 15px);
  height: 1px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.22s ease;
}
.site-header .hdr-menu .nav-link:hover, .site-header .hdr-menu .nav-link.show, .site-header .hdr-menu .nav-link:focus-visible { color: var(--ox); }
.site-header .hdr-menu .nav-link:hover::before, .site-header .hdr-menu .nav-link.show::before { transform: scaleX(1); }
.site-header .hdr-menu .nav-link.active { color: var(--ox); }
.site-header .hdr-menu .nav-link.active::before { transform: scaleX(1); height: 2px; }
/* focus: the label turns oxblood over a 2 px ink rule (Bootstrap focuses a toggle when main.js opens its panel on
   hover, so a boxed ring would also appear for mouse users) */
.site-header .hdr-menu .nav-link:focus-visible { outline: none; color: var(--ox); }
.site-header .hdr-menu .nav-link:focus-visible::before { transform: scaleX(1); height: 2px; background: var(--ink-text); }
.site-header .dropdown-toggle::after { display: none; }
.caret { width: 10px; height: 7px; flex: none; color: var(--ox); transition: transform 0.2s ease; }
.site-header .nav-link.show .caret { transform: rotate(180deg); }

/* the phone number, typed */
.hdr-phone {
  flex: none;
  margin: 0 20px 0 4px;
  padding: 8px 0 8px 18px;
  border-left: 1px solid var(--line-hair);
  color: var(--ink-text);
  font: 400 14px / 1 var(--font-label);
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
}
.hdr-phone:hover { color: var(--ox); text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 5px; }

/* Get Matched: an oxblood ribbon hanging from the very top of the window, V-notched, a brass stitch down both edges */
.hdr-ribbon {
  position: relative;
  z-index: 1001;
  flex: none;
  align-self: flex-start;
  display: block;
  width: 172px;
  height: 120px;
  color: var(--parchment);
  text-decoration: none;
  /* parchment piping: invisible on the bar, it edges the ribbon where it hangs over an oxblood field */
  filter: drop-shadow(1.5px 0 0 var(--parchment)) drop-shadow(-1.5px 0 0 var(--parchment)) drop-shadow(0 1.5px 0 var(--parchment));
  transition: height 0.25s ease;
}
.hr-body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 10px 30px;
  background: var(--ox);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 16px), 0 100%);
  text-align: center;
  transition: background-color 0.2s ease;
}
.hr-body::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 24px;
  left: 7px;
  right: 7px;
  border-left: 1px dashed var(--brass);
  border-right: 1px dashed var(--brass);
  pointer-events: none;
}
.hr-main { font: 700 18px / 1.1 var(--font-heading); letter-spacing: 0.005em; color: var(--parchment); }
.hr-sub { font: 400 12px / 1.2 var(--font-label); letter-spacing: 0; text-transform: uppercase; white-space: nowrap; color: var(--brass-light); }
.hdr-ribbon:hover, .hdr-ribbon:focus-visible { height: 130px; color: var(--parchment); }
.hdr-ribbon:hover .hr-body, .hdr-ribbon:focus-visible .hr-body { background: var(--ox-deep); }
.hdr-ribbon:focus-visible { outline: 3px solid var(--ink-text); outline-offset: 3px; }
/* stuck: the ribbon keeps hanging, but only its notched tails drop below the 68 px bar (about 20 px), so it covers
   less of the page scrolling underneath; the caption goes, "Get Matched" stays */
.site-header.is-scrolled .hdr-ribbon { height: 88px; }
@media (min-width: 992px) {
  .site-header.is-scrolled .hr-body { gap: 0; padding-bottom: 26px; }
  .site-header.is-scrolled .hr-sub { display: none; }
}
.site-header.is-scrolled .hdr-ribbon:hover { height: 96px; }

/* the Menu button (narrow screens) */
.navbar-toggler {
  display: none;
  flex: none;
  align-items: center;
  gap: 10px;
  min-width: 44px;
  min-height: 44px;
  margin-left: 14px;
  padding: 0 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink-text);
  font: 700 16px / 1 var(--font-body);
  box-shadow: none;
}
.tg-lines { position: relative; display: block; width: 22px; height: 9px; border-top: 1.5px solid var(--ox); border-bottom: 1.5px solid var(--ox); }
.tg-lines::after { content: ""; position: absolute; left: 0; right: 7px; top: 2.25px; border-top: 1.5px solid var(--ox); }
.navbar-toggler:hover { color: var(--ox); }
.navbar-toggler:focus { box-shadow: none; }
.navbar-toggler:focus-visible { outline: 3px solid var(--ink-text); outline-offset: 3px; }

/* ---- the practice-areas panel: three groups of files + the "Not sure which one?" card ---- */
.site-header .dropdown.mega { position: static; }
.site-header .dropdown:not(.mega) { position: relative; }
.site-header .navbar .dropdown-menu {
  --bs-dropdown-bg: var(--parchment);
  --bs-dropdown-border-width: 0;
  --bs-dropdown-border-radius: 0;
  --bs-dropdown-box-shadow: none;
  --bs-dropdown-link-color: var(--ink-text);
  --bs-dropdown-link-hover-color: var(--ox);
  --bs-dropdown-link-hover-bg: transparent;
  --bs-dropdown-link-active-color: var(--ox);
  --bs-dropdown-link-active-bg: transparent;
  --bs-dropdown-header-color: var(--brass-ink);
  --bs-dropdown-item-padding-x: 0;
  --bs-dropdown-item-padding-y: 9px;
  --bs-dropdown-spacer: 0;
  position: absolute;
  z-index: 1000;
  margin: 0;
  border: 1px solid var(--line-hair);
  border-top: 0;
  border-radius: 0;
  background: var(--parchment);
  box-shadow: 0 26px 40px -26px rgba(30, 36, 48, 0.4);
}
.site-header .navbar .mega-menu,
.site-header .navbar .mega-menu[data-bs-popper] {
  top: calc(100% + 1px);
  left: var(--margin);
  right: var(--margin);
  min-width: 0;
  padding: 34px 36px 36px;
}
.mega-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.15fr); gap: 0 36px; }
.mega-col { min-width: 0; }
.site-header .dropdown-header {
  margin: 0 0 6px;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--brass);
  color: var(--brass-ink);
  font: 400 var(--text-meta) / 1.3 var(--font-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: normal;
}
.site-header .mega-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 52px;
  border-bottom: 1px solid var(--line-hair);
  color: var(--ink-text);
  font: 400 18px / 1.3 var(--font-body);
  white-space: normal;
  transition: color 0.18s ease, padding 0.18s ease;
}
.site-header .mega-menu .dropdown-item:hover, .site-header .mega-menu .dropdown-item:focus { background: transparent; color: var(--ox); padding-left: 4px; }
.site-header .dropdown-item:focus-visible { outline: 3px solid var(--ink-text); outline-offset: 2px; }
.pa-icon { width: 28px; height: 28px; flex: none; color: var(--ox); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.pa-icon * { vector-effect: non-scaling-stroke; }
.mega-cta {
  position: relative;
  align-self: start;
  margin: 0;
  padding: 30px 28px 28px;
  background: var(--ox);
  color: var(--parchment);
  box-shadow: inset 0 0 0 6px var(--ox), inset 0 0 0 7px var(--brass);
}
.mega-cta h5 { margin: 0 0 10px; color: var(--parchment); font: 700 22px / 1.15 var(--font-heading); letter-spacing: -0.01em; }
.mega-cta p { margin: 0 0 20px; color: var(--parchment); font-size: 16px; line-height: 1.5; }
.site-header .mega-cta .btn {
  --btn-fill: var(--parchment);
  --btn-rule: var(--brass);
  --bs-btn-padding-x: 20px;
  min-height: 48px;
  background: var(--parchment);
  border-color: var(--parchment);
  color: var(--ox);
  font-size: 18px;
}
.site-header .mega-cta .btn:hover, .site-header .mega-cta .btn:focus-visible { --btn-fill: var(--white); --btn-rule: var(--ox); background: var(--white); border-color: var(--white); color: var(--ox); }
.site-header .mega-cta .btn svg { color: var(--ox); }
.site-header .mega-cta .btn:focus-visible { outline-color: var(--parchment); }

/* ---- the reading menu (Resources) ---- */
.site-header .navbar .res-menu,
.site-header .navbar .res-menu[data-bs-popper] {
  top: calc(100% + 1px);
  left: 0;
  min-width: 270px;
  padding: 22px 26px 18px;
}
.res-menu li { max-width: none; }
.res-menu .dropdown-item {
  display: block;
  padding: 8px 0;
  color: var(--ink-text);
  font: 400 18px / 1.35 var(--font-body);
  white-space: normal;
}
.res-menu .dropdown-item:hover, .res-menu .dropdown-item:focus { background: transparent; color: var(--ox); text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 5px; }
.res-menu .dropdown-divider { margin: 8px 0; border-top: 1px solid var(--line-hair); opacity: 1; }

/* ---- phone menu (#mobileNav): a parchment sheet bound by an oxblood ribbon down its left edge ---- */
.offcanvas {
  --bs-offcanvas-width: min(92vw, 420px);
  --bs-offcanvas-bg: var(--parchment);
  --bs-offcanvas-color: var(--ink-text);
  --bs-offcanvas-border-width: 0;
  --bs-offcanvas-box-shadow: none;
  --bs-offcanvas-padding-x: 24px;
  --bs-offcanvas-padding-y: 18px;
}
.offcanvas::before, .offcanvas::after { content: ""; position: absolute; top: 0; bottom: 0; pointer-events: none; }
.offcanvas::before { left: 0; width: 14px; background: var(--ox); }
.offcanvas::after { left: 4px; width: 6px; border-left: 1px dashed var(--brass); border-right: 1px dashed var(--brass); }
.offcanvas-header { padding-left: 38px; border-bottom: 1px solid var(--brass); }
.offcanvas-body { padding-left: 38px; }
.offcanvas .navbar-brand { font-size: 20px; gap: 12px; }
.offcanvas .navbar-brand .tap-logo { height: 40px; }
/* the sheet is 92vw wide on phones: the logo keeps 12 px or more before the close button (17 Oct) */
@media (max-width: 389.98px) {
  .offcanvas .navbar-brand .tap-logo { height: 35px; }
}
@media (max-width: 359.98px) {
  .offcanvas .navbar-brand .tap-logo--line { display: none; }
  .offcanvas .navbar-brand .tap-logo--stack { display: block; height: 34px; }
}
.offcanvas .accordion { border-top: 0; }
.offcanvas .accordion-item, .offcanvas .plain-link { border-bottom: 1px solid var(--line-hair); }
.offcanvas .accordion-button, .offcanvas .plain-link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 60px;
  padding: 0;
  color: var(--ink-text);
  font: 400 22px / 1.2 var(--font-heading);
  text-decoration: none;
}
.offcanvas .accordion-button:hover, .offcanvas .plain-link:hover { color: var(--ox); text-decoration: none; }
.offcanvas .accordion-button::after { content: "+"; font: 400 26px / 1 var(--font-body); color: var(--ox); width: auto; }
.offcanvas .accordion-button:not(.collapsed)::after { content: "\2013"; }
.offcanvas .accordion-body { padding: 0 0 var(--sp-4); max-width: none; }
.offcanvas .list-unstyled li { max-width: none; }
.offcanvas .list-unstyled a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  color: var(--ink-text);
  font: 400 18px / 1.3 var(--font-body);
  text-decoration: none;
}
.offcanvas .list-unstyled a:hover { color: var(--ox); }
.offcanvas .oc-areas .pa-icon { width: 24px; height: 24px; }
.offcanvas .btn { width: 100%; }
.oc-contact { margin: var(--sp-5) 0 0; font: 400 13px / 1.6 var(--font-label); letter-spacing: 0.03em; color: var(--muted-text); }
.oc-contact a { color: var(--ink-text); }

/* ---- footer: brand line + four link groups, the advertising notice, the bottom line, the oversized wordmark ---- */
.site-footer {
  position: relative;
  margin: 0;
  padding: clamp(56px, 40px + 3vw, 88px) 0 0;
  background: var(--parchment);
  border-top: 1px solid var(--brass);
  color: var(--ink-text);
  overflow: hidden;
}
.ft-top {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.75fr) minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1.15fr);
  gap: var(--sp-6) clamp(24px, 2.6vw, 44px);
  padding-bottom: var(--sp-7);
}
/* the logo heads the brand column, a link home (17 Oct); it narrows with the column, never wider than 261 x 50 px */
.ft-logo { display: block; width: fit-content; max-width: 100%; margin: 0 0 var(--sp-5); line-height: 0; text-decoration: none; }
.ft-logo .tap-logo { display: block; width: 261px; max-width: 100%; height: auto; }
.ft-lede { margin: 0 0 var(--sp-4); font: italic 400 22px / 1.45 var(--font-body); color: var(--ink-text); max-width: 21em; }
.ft-line { margin: 0; padding-top: var(--sp-4); border-top: 1px solid var(--line-hair); font-size: var(--text-small); line-height: 1.55; color: var(--muted-text); max-width: 24em; }
.site-footer .ft-label {
  margin: 0 0 var(--sp-4);
  padding: 0 0 10px;
  border-bottom: 1px solid var(--brass);
  color: var(--brass-ink);
  font: 400 var(--text-meta) / 1.3 var(--font-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ft-col ul { margin: 0; padding: 0; list-style: none; }
.ft-col li { max-width: none; margin: 0 0 10px; font-size: 16px; line-height: 1.4; }
.ft-col a { color: var(--ink-text); text-decoration: none; }
.ft-col a:hover { color: var(--ox); text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 4px; }
.ft-col--reading li { font-size: 15px; line-height: 1.4; margin-bottom: 12px; }
.ft-all a { font-style: italic; text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 5px; }
.ft-all svg { width: 18px; height: 11px; margin-left: 6px; color: var(--ox); vertical-align: -1px; }
.ft-col--contact li { font-size: 15px; color: var(--ink-text); }
.ft-col--contact a { color: var(--ox); text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 4px; overflow-wrap: anywhere; }
.foot-disc {
  column-count: 2;
  column-gap: clamp(32px, 4vw, 64px);
  padding: var(--sp-6) 0;
  border-top: 1px solid var(--line-hair);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-text);
}
.foot-disc p { max-width: none; margin: 0 0 var(--sp-3); }
.foot-disc strong { color: var(--ox); }
.foot-disc a { color: var(--ox); text-decoration-color: var(--brass); }
.foot-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-5);
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--brass);
  font: 400 13px / 1.5 var(--font-label);
  letter-spacing: 0.03em;
  color: var(--muted-text);
}
.foot-bottom a { color: var(--ink-text); text-decoration-color: var(--brass); }
.foot-bottom a:hover { color: var(--ox); }
.ft-wordmark {
  --wm: 10.05vw;
  position: relative;
  height: calc(var(--wm) * 0.62);
  margin-top: var(--sp-5);
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}
.ft-wordmark span {
  position: absolute;
  left: 50%;
  top: calc(var(--wm) * -0.06);
  transform: translateX(-50%);
  color: var(--ox);
  font: 700 var(--wm) / 1 var(--font-heading);
  letter-spacing: -0.025em;
  white-space: nowrap;
}
.ft-wordmark i { font-style: italic; font-weight: 400; letter-spacing: -0.01em; }

/* ---- narrower screens ---- */
@media (max-width: 1399.98px) {
  .hdr-phone { display: none; }
  .hdr-menu { margin-right: 18px; }
  .navbar-brand { font-size: 23px; }
  .site-header .hdr-menu .nav-link { padding: 0 10px; }
  .site-header .hdr-menu .nav-link::before { left: 10px; right: 10px; }
}
/* the logo (17 Oct): 1400-1439 px is the tightest row (the phone number shows): 50 px keeps 13 px spare before the menu;
   1200-1279 px (menu at 17 px): 52 px keeps 12 px spare, as the old logo had */
@media (min-width: 1400px) and (max-width: 1439.98px) {
  .site-header .navbar-brand .tap-logo { height: 50px; }
}
@media (max-width: 1279.98px) {
  .site-header .navbar-brand .tap-logo { height: 52px; }
  .site-header .hdr-menu .nav-link { font-size: 17px; }
  .ft-top { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ft-brand { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--sp-6); align-items: end; }
  .ft-line { border-top: 0; padding-top: 0; }
  .ft-logo { grid-column: 1 / -1; margin-bottom: 0; }
}
@media (max-width: 1199.98px) {
  .hdr-menu, .hdr-phone { display: none; }
  .navbar-toggler { display: inline-flex; }
  .hdr-ribbon { width: 164px; height: 104px; margin-left: auto; }
  .site-header.is-scrolled .hdr-ribbon { height: 88px; }
}
@media (max-width: 991.98px) {
  .navbar-brand { font-size: 21px; gap: 11px; }
  .site-header .navbar-brand .tap-logo, .site-header.is-scrolled .navbar-brand .tap-logo { height: 44px; }
  /* the short ribbon still hangs: it drops about 12 px below the 64 px bar, piped in parchment */
  .hdr-ribbon, .site-header.is-scrolled .hdr-ribbon { width: 80px; height: 76px; }
  .hdr-ribbon:hover, .site-header.is-scrolled .hdr-ribbon:hover { height: 82px; }
  .hr-body { padding: 4px 6px 14px; gap: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 9px), 0 100%); }
  .hr-body::before { left: 6px; right: 6px; bottom: 11px; }
  .hr-main { font-size: 13px; line-height: 1.12; white-space: normal; max-width: 4.6em; }
  .hr-sub { display: none; }
  .ft-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ft-brand { display: block; }
  .ft-logo { margin-bottom: var(--sp-5); }
  .ft-line { border-top: 1px solid var(--line-hair); padding-top: var(--sp-4); }
}
@media (max-width: 575.98px) {
  .navbar-brand { font-size: 17.5px; gap: 8px; }
  .site-header .navbar-brand .tap-logo, .site-header.is-scrolled .navbar-brand .tap-logo { height: 40px; }
  /* phones: the word "Menu" without the lines leaves room for a ribbon that hangs 10 px below the bar, its label clear
     of both stitches */
  .hdr-ribbon, .site-header.is-scrolled .hdr-ribbon { width: 74px; height: 74px; margin-left: 12px; }
  .hdr-ribbon:hover, .site-header.is-scrolled .hdr-ribbon:hover { height: 80px; }
  /* the label stays about 4 px clear of both stitches */
  .hr-body::before { left: 5px; right: 5px; }
  .hr-main { font-size: 12px; letter-spacing: -0.005em; }
  .navbar-toggler { margin-left: 12px; padding: 0; font-size: 15px; }
  .navbar-toggler .tg-lines { display: none; }
  .ft-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-5); }
  .ft-brand, .ft-col--reading, .ft-col--contact { grid-column: 1 / -1; }
  .ft-lede { font-size: 18px; }
  .ft-logo .tap-logo { width: 230px; }
  .foot-disc { column-count: 1; }
  .foot-bottom { flex-direction: column; }
  /* footer links as 44 px tap targets */
  .ft-col li { margin: 0; }
  .ft-col a { display: block; padding: 11px 0; }
  /* the four contact rows keep one 22 px rhythm (the same gap as the link lists beside them); the email and phone links
     keep a 43 px tap area that reaches into those gaps instead of pushing their own rows apart */
  .ft-col--contact li { padding: 0; margin: 0 0 22px; }
  .ft-col--contact li:last-child { margin-bottom: 0; }
  .ft-col--contact a { display: inline-block; padding: 11px 0; margin: -11px 0; }
  .ft-col--reading li { margin: 0; }
  .foot-bottom a { display: inline-block; padding: 14px 2px; }
}
@media (max-width: 374.98px) {
  .navbar-brand { font-size: 17px; }
  .site-header .navbar-brand .tap-logo, .site-header.is-scrolled .navbar-brand .tap-logo { height: 37px; }
  .hdr-ribbon, .site-header.is-scrolled .hdr-ribbon { width: 68px; margin-left: 8px; }
  .hr-main { font-size: 11.5px; letter-spacing: -0.01em; }
  .navbar-toggler { margin-left: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header, .hdr-bar, .hdr-ribbon, .navbar-brand .tap-logo, .site-header .hdr-menu .nav-link::before { transition: none; }
}
/* Windows High Contrast (forced colours, 18 Oct): the logo's inline drawing keeps its own fills there, so on a black
   Canvas the ink name and the oxblood ribbon all but vanished; both take the system text colour (Logo.tsx classes
   tap-name and tap-ribbon; the brass stitch and the cut stay as drawn) */
@media (forced-colors: active) {
  .tap-logo .tap-name, #tap-mark .tap-ribbon { fill: CanvasText; }
}

/* ==== the header on the narrowest phones (photos + devices pass, 2026-10-15) ======================================
   Below 360 px the mark, the name, the ribbon and the Menu button needed about 324 px of a 288 px row, so "Menu" ran
   20 px past the screen edge: the name and the mark step down a little, the gaps tighten, the ribbon keeps its size. */
@media (max-width: 359.98px) {
  .navbar-brand { gap: 6px; font-size: 14px; letter-spacing: -0.02em; }
  /* the logo (17 Oct): the two-line lockup, "The Advocate" / "Path" */
  .site-header .navbar-brand .tap-logo--line { display: none; }
  .site-header .navbar-brand .tap-logo--stack, .site-header.is-scrolled .navbar-brand .tap-logo--stack { display: block; height: 36px; }
  .hdr-ribbon, .site-header.is-scrolled .hdr-ribbon { margin-left: 6px; }
  .navbar-toggler { min-width: 42px; margin-left: 6px; font-size: 14px; }
}

/* ==== every device looks finished (photos + devices pass, step 5, 2026-10-15) ======================================= */
/* phones under 375 px: "Get Matched" keeps the 12 px minimum (the narrower header row leaves the room) */
@media (max-width: 374.98px) {
  .hr-main { font-size: 12px; letter-spacing: -0.015em; }
}
/* phones under 375 px: the three bottom links stay on one line (wrapped, a separator was left hanging at the end of
   the first line, with a 48 px gap under it) */
@media (max-width: 374.98px) {
  .foot-bottom .fb-links { white-space: nowrap; font-size: 12px; letter-spacing: 0; }
  .foot-bottom .fb-links a { padding-inline: 1px; }
}

/* ==== fresh-eyes device check (final fix, 2026-10-16) ==================================================================
   Findings of three fresh lookers who saw every page at 7 sizes; no wording changed anywhere. */
/* the footer's link lists: balanced lines, so a wrapped link never leaves one word alone ("Do Not Sell or Share My" /
   "Info") */
.ft-col li { text-wrap: balance; }
/* touch tablets (576-991 px): the footer links get the phones' 40-44 px tap targets (18-22 px tall on a 30 px pitch) */
@media (min-width: 576px) and (max-width: 991.98px) {
  .ft-col li { margin: 0; }
  .ft-col a { display: block; padding: 10px 0; }
  .ft-col--contact li { padding: 0; margin: 0 0 20px; }
  .ft-col--contact li:last-child { margin-bottom: 0; }
  .ft-col--contact a { display: inline-block; padding: 10px 0; margin: -10px 0; }
  .ft-col--reading li { margin: 0; }
  .foot-bottom a { display: inline-block; padding: 12px 2px; }
}
/* wide screens (2200 px and up, 1300 px tall or more: 2560 x 1440 and larger): the header, the page and the footer's
   columns are shown at 125 %, so the 1320 px frame becomes about 1650 px and the type grows with it (at 100 % the content
   filled about half of a 2560 px screen, with 620 px of empty parchment on each side and 15-18 px text). The footer's
   wordmark keeps its width of the window. Lengths in vw/vh grow with the zoom: home.css, pages-practice.css and
   pages-articles.css correct their few vw/vh formulas for this range */
@media (min-width: 2200px) and (min-height: 1300px) {
  .site-header, #main, .site-footer > .container { zoom: 1.25; }
}