@charset "utf-8";
/* Poppins, self-hosted. The CMS shipped five weights as raw TTF - 8.3 MB of
   /fonts - and declared them with no format(), no unicode-range and no
   font-display, so every page blocked on them. These are the latin woff2
   subsets: three weights, 24 KB in total. */
@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/poppins-400.woff2) format("woff2")}
@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;
  src:url(/fonts/poppins-600.woff2) format("woff2")}
@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:swap;
  src:url(/fonts/poppins-700.woff2) format("woff2")}
/* readingohio.org - the whole stylesheet.
   Replaces publicstyle.css, responsive.css, mbcsmbmcp.css, layerslider.css,
   feature.presenter.css, instalink.css and Window.Metro.css. */

/* ------------------------------------------------------------------ tokens */
:root{
  --navy:#003e7e;          /* the CMS's own header/heading blue */
  --navy-d:#002a56;
  --navy-l:#1a5691;
  --red:#c8202a;           /* the brand red, darkened to clear AA on white */
  --red-d:#a3161f;
  --ink:#22262b;
  --ink-2:#4a5158;
  --line:#dfe3e8;
  --bg:#fff;
  --bg-2:#f4f6f8;
  --bg-3:#e9edf2;
  --focus:#ffb300;
  --wrap:1200px;
  --prose:74ch;
  --r:10px;
  --gap:clamp(1rem,3vw,2rem);
  --head:120px;            /* the masthead's measured height; ro.js keeps it true */
  --sans:"Poppins","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --shadow:0 1px 2px rgba(16,24,40,.06),0 6px 20px rgba(16,24,40,.08);
}

/* ------------------------------------------------------------------- reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* overflow-x has to be clipped on BOTH, or one of them still scrolls */
html,body{overflow-x:clip}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:400 1.0625rem/1.65 var(--sans);
  text-rendering:optimizeLegibility;
}
img,svg,video{max-width:100%;height:auto}
img[width][height]{height:auto}
/* every inline icon is an em-box unless a component says otherwise; without
   this an <svg> with only a viewBox fills whatever it is put in */
svg{display:block;width:1.15em;height:1.15em;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
a{color:var(--navy);text-underline-offset:.16em;text-decoration-thickness:from-font}
a:hover{color:var(--red-d)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:3px}
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.2;font-weight:700;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:clamp(1.85rem,1.2rem + 2.2vw,2.85rem);color:var(--navy)}
h2{font-size:clamp(1.35rem,1.05rem + 1.1vw,1.85rem);color:var(--navy-d)}
h3{font-size:1.2rem;color:var(--navy-d)}
p,ul,ol,table,figure{margin:0 0 1.1em}
ul,ol{padding-left:1.35em}
li+li{margin-top:.3em}
hr{border:0;border-top:1px solid var(--line);margin:2rem 0}
table{border-collapse:collapse;width:100%}
th,td{border:1px solid var(--line);padding:.55rem .7rem;text-align:left;vertical-align:top}
th{background:var(--bg-2)}
figure{margin-inline:0}
.ta-c{text-align:center}
.ta-r{text-align:right}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.wrap{width:min(100% - 2*var(--pad,1.25rem),var(--wrap));margin-inline:auto}
@media (min-width:700px){:root{--pad:2rem}}

.skip{position:absolute;left:0;top:0;z-index:200;transform:translateY(-120%);
  background:var(--navy);color:#fff;padding:.7rem 1.1rem;border-radius:0 0 var(--r) 0;
  font-weight:600;transition:transform .15s}
.skip:focus{transform:none;color:#fff}

/* --------------------------------------------------------------- masthead */
/* Fixed, not sticky: the drawer's scroll lock freezes the document, and a
   position:sticky bar loses its scroll offset the moment it does - the header
   snaps back to its static position and the drawer opens under nothing. */
.masthead{position:fixed;inset:0 0 auto;z-index:75;background:#fff;
  box-shadow:0 1px 0 var(--line)}
body{padding-top:var(--head)}
.masthead::after{content:"";position:absolute;inset:auto 0 -6px;height:6px;
  background:linear-gradient(rgba(16,24,40,.10),transparent);pointer-events:none}

.utility{background:var(--navy);color:#fff;font-size:.875rem}
.utility .wrap{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;align-items:center;
  justify-content:flex-end;min-height:38px;padding-block:.35rem}
.utility a{color:#fff;text-decoration:none}
.utility a:hover{color:#fff;text-decoration:underline}
.utility .tel{margin-right:auto;font-weight:600;display:inline-flex;align-items:center;
  gap:.4rem;white-space:nowrap}
.utility svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}

.bar{display:flex;align-items:center;gap:1rem;padding-block:.65rem}
.brand{display:inline-flex;align-items:center;flex:0 0 auto;text-decoration:none}
.brand img{width:250px;height:76px;object-fit:contain}
@media (max-width:520px){.brand img{width:190px;height:58px}}

/* ------------------------------------------------------------------- menu */
.mainnav{margin-left:auto}
.mainnav>ul{display:flex;align-items:stretch;gap:.15rem;list-style:none;margin:0;padding:0}
.mainnav>ul>li{position:relative;display:flex}
.m-top{
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.7rem .72rem;border:0;background:none;cursor:pointer;
  font:600 .975rem/1.2 var(--sans);color:var(--ink);text-decoration:none;
  border-radius:8px;white-space:nowrap;
}
.m-top .chev{width:.62em;height:.62em;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .18s}
/* A tap leaves the element in :hover on a touch screen, so a hover rule that
   opens a panel leaves it stuck open. Gate every hover affordance. */
@media (hover:hover){.m-top:hover{background:var(--bg-2);color:var(--navy)}}
.m-top[aria-expanded="true"]{background:var(--navy);color:#fff}
.m-top[aria-expanded="true"] .chev{transform:rotate(-135deg) translate(-2px,-2px)}
/* The current section is marked with a straight bar. It was an
   `inset 0 -3px 0` box-shadow, which follows the button's 8px
   border-radius and curls up at both ends - so a pseudo-element draws it
   instead, square, and the pill keeps its rounded corners. */
.m-top{position:relative}
.m-top[aria-current="page"],.m-top.is-here{color:var(--red-d)}
.m-top[aria-current="page"]::after,.m-top.is-here::after{
  content:"";position:absolute;left:.4rem;right:.4rem;bottom:0;height:3px;
  background:var(--red);border-radius:0}

.m-panel{
  position:absolute;top:100%;left:0;z-index:5;
  display:none;min-width:290px;max-width:min(94vw,760px);
  background:#fff;border:1px solid var(--line);border-top:3px solid var(--navy);
  border-radius:0 0 var(--r) var(--r);box-shadow:var(--shadow);
  padding:.55rem;margin:0;list-style:none;
}
/* A GRID of blocks, not CSS multi-column. Multicol flows the items in reading
   order, which split a group across the column break and left loose links
   sitting under headings they had nothing to do with. */
.m-panel.wide{width:min(94vw,760px)}
/* display goes on the OPEN state, not on .wide. `.m-panel.wide{display:grid}`
   is (0,2,0) and out-specifies `.m-panel{display:none}` at (0,1,0), so every
   wide panel was permanently on show - four dropdowns open at once. */
.m-panel.wide.open{display:grid;align-content:start;
  grid-template-columns:repeat(2,minmax(220px,1fr));gap:.1rem 1rem}
.m-panel{max-height:min(78vh,720px);overflow-y:auto;overscroll-behavior:contain}
.m-panel.open{display:block}
.m-panel>li{break-inside:avoid;margin:0}
.m-panel a{display:block;padding:.5rem .7rem;border-radius:7px;text-decoration:none;
  color:var(--ink);font-size:.95rem;line-height:1.35}
@media (hover:hover){.m-panel a:hover{background:var(--bg-2);color:var(--navy)}}
.m-panel a:focus-visible{background:var(--bg-2)}
/* Every block reads the same way: an optional quiet heading, then its links,
   all on ONE left edge. The old version indented grouped links but not loose
   ones, so the panel had two left margins and looked broken. */
.m-block,.m-group{margin:0 0 .35rem}
.m-block>ul,.m-group>ul{list-style:none;margin:0;padding:0}
.m-group>.m-grouphead{display:block;padding:.6rem .7rem .15rem;font-weight:700;
  font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-2);text-decoration:none}
@media (hover:hover){.m-group>a.m-grouphead:hover{color:var(--navy)}}
.m-panel.wide>li+li .m-grouphead{border-top:1px solid var(--bg-3);
  margin-top:.2rem;padding-top:.7rem}
.m-panel .ext::after{content:"";display:inline-block;width:.6em;height:.6em;margin-left:.4em;
  border:2px solid currentColor;border-left:0;border-bottom:0;
  transform:rotate(45deg);opacity:.55;vertical-align:.05em}

/* the last dropdown must not run off the right edge */
.mainnav>ul>li:nth-last-child(-n+2) .m-panel{left:auto;right:0}
.mainnav>ul>li:nth-last-child(-n+2) .m-panel.wide{right:0}

/* ------------------------------------------------------- burger + drawer */
.burger{display:none;margin-left:auto;width:46px;height:44px;border:1px solid var(--line);
  border-radius:9px;background:#fff;cursor:pointer;padding:0;align-items:center;
  justify-content:center;flex-direction:column;gap:5px}
.burger span{display:block;width:22px;height:2px;background:var(--navy);border-radius:2px;
  transition:transform .2s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* The drawer and its backdrop are siblings of the masthead, not children of
   it: an off-canvas panel inside the bar it replaces is trapped in the bar's
   stacking context and no z-index can lift it over the backdrop. */
.scrim{display:none;position:fixed;inset:0;z-index:70;background:rgba(10,16,26,.55)}
.scrim.on{display:block}
.drawer{
  display:none;position:fixed;z-index:80;top:var(--head);right:0;bottom:0;
  width:min(92vw,400px);background:#fff;border-left:1px solid var(--line);
  overflow-y:auto;overscroll-behavior:contain;padding:.75rem .75rem 3rem;
  /* transform and opacity only - transitioning visibility makes the panel
     un-measurable and un-focusable for the length of the transition */
  transform:translateX(102%);transition:transform .22s ease;
}
.drawer.on{display:block}
.drawer.in{transform:none}
.drawer ul{list-style:none;margin:0;padding:0}
.drawer li{margin:0}
.drawer a,.d-toggle{display:flex;align-items:center;gap:.5rem;width:100%;
  padding:.8rem .75rem;border:0;border-bottom:1px solid var(--line);background:none;
  font:600 1rem/1.3 var(--sans);color:var(--ink);text-decoration:none;text-align:left;cursor:pointer}
.d-toggle{justify-content:space-between}
.d-toggle .chev{width:.6em;height:.6em;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .18s;flex:0 0 auto}
.d-toggle[aria-expanded="true"] .chev{transform:rotate(-135deg)}
.drawer .sub{display:none;background:var(--bg-2)}
.drawer .sub.open{display:block}
.drawer .sub a{font-weight:400;padding-left:1.6rem;font-size:.95rem}
.drawer .sub .sub a{padding-left:2.6rem;font-size:.92rem}
.drawer .d-contact{margin-top:1.25rem;padding:1rem .75rem;background:var(--bg-2);
  border-radius:var(--r);font-size:.95rem}
.drawer .d-contact a{display:inline;padding:0;border:0;font-weight:600}

@media (max-width:1150px){
  .mainnav{display:none}
  .burger{display:flex}
}

/* ------------------------------------------------------------------- hero */
.hero{position:relative;background:var(--navy-d);color:#fff;isolation:isolate}
/* the <picture> is the box; object-fit lives on the <img> inside it */
.hero{overflow:hidden}
.hero>picture{position:absolute;inset:0;display:block;z-index:-2}
/* The attribute list is load-bearing. The base-level `img[width][height]
   {height:auto}` - which stops the CMS's fixed height/width pairs distorting
   a listing photo - is (0,2,1), and it OUT-SPECIFIES a plain
   `.hero>picture img` at (0,1,2). The hero image was therefore drawn at its
   own aspect ratio, 737px tall inside a 453px section: it overflowed the
   bottom of the hero, and the ::after tint (which is only as tall as the
   section) stopped partway down the photograph. Matching the same two
   attributes takes this to (0,3,2) and it wins honestly, with no !important. */
.hero>picture img[width][height]{width:100%;height:100%;object-fit:cover;
  object-position:50% 42%}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(0,26,56,.90) 0%,rgba(0,26,56,.74) 46%,rgba(0,26,56,.44) 100%)}
.hero .wrap{padding-block:clamp(2.5rem,6vw,4.75rem)}
.hero .eyebrow{font-size:clamp(.95rem,.9rem + .3vw,1.15rem);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:#9fc3ec;margin:0 0 .35rem}
.hero h1{color:#fff;max-width:20ch;margin-bottom:1.35rem}
.hero .herocard{max-width:44rem;padding:1.15rem 1.35rem;border-radius:var(--r);
  background:rgba(0,20,44,.55);border:1px solid rgba(255,255,255,.22);
  backdrop-filter:none}
.hero .herocard p{font-size:clamp(1rem,.95rem + .35vw,1.15rem);color:#eaf1f9;margin:0}
.hero .herocard p+p{margin-top:.9rem}

/* ---------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.72rem 1.25rem;
  border-radius:999px;border:2px solid var(--navy);background:var(--navy);color:#fff;
  font:600 1rem/1.2 var(--sans);text-decoration:none;cursor:pointer;
  transition:background .18s,color .18s,border-color .18s}
@media (hover:hover){.btn:hover{background:var(--navy-d);border-color:var(--navy-d);color:#fff}}
.btn.ghost{background:transparent;color:var(--navy)}
@media (hover:hover){.btn.ghost:hover{background:var(--navy);color:#fff}}
.btn.red{background:var(--red);border-color:var(--red)}
@media (hover:hover){.btn.red:hover{background:var(--red-d);border-color:var(--red-d)}}
.btn.on-dark{border-color:#fff;background:#fff;color:var(--navy)}
@media (hover:hover){.btn.on-dark:hover{background:transparent;color:#fff}}

/* -------------------------------------------------------------- page body */
main{display:block}
.page{padding-block:clamp(1.75rem,4vw,3rem)}
.crumbs{font-size:.9rem;color:var(--ink-2);margin:0 0 .9rem}
.crumbs ol{display:flex;flex-wrap:wrap;gap:.3rem .5rem;list-style:none;margin:0;padding:0}
.crumbs li+li{margin-top:0}
.crumbs li+li::before{content:"/";margin-right:.5rem;color:var(--line)}
.crumbs a{color:var(--ink-2)}
.pagehead{border-bottom:3px solid var(--bg-3);padding-bottom:.9rem;margin-bottom:1.6rem}

.prose{max-width:var(--prose)}
.prose>*:last-child{margin-bottom:0}
.prose img{border-radius:8px}
.prose .float-l{float:left;margin:.3rem 1.25rem .9rem 0;max-width:min(46%,340px)}
.prose .float-r{float:right;margin:.3rem 0 .9rem 1.25rem;max-width:min(46%,340px)}
@media (max-width:600px){
  .prose .float-l,.prose .float-r{float:none;margin:0 0 1rem;max-width:100%}
}
.prose h2{margin-top:1.9em}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:1.5em}
.prose a{font-weight:500}
.prose .report a{font-weight:700;font-size:1.1rem}
.prose iframe{width:100%;border:0;border-radius:var(--r)}

/* two-column pages (the CMS's .column2 pair) */
.cols2{display:grid;gap:var(--gap);align-items:start}
@media (min-width:900px){.cols2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.cols2>*{min-width:0}

/* --------------------------------------------------------------- sections */
.band{padding-block:clamp(2rem,5vw,3.5rem)}
.band.grey{background:var(--bg-2)}
.band.navy{background:var(--navy);color:#fff}
.band.navy h2{color:#fff}
.band .sechead{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;align-items:baseline;
  justify-content:space-between;margin-bottom:1.4rem}
.band .sechead h2{margin:0}

.grid{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.grid.cols-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}

.card{display:flex;flex-direction:column;gap:.45rem;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:1.15rem 1.25rem;box-shadow:var(--shadow);
  text-decoration:none;color:inherit;min-width:0}
.card h3{margin:0;color:var(--navy)}
.card p{margin:0;color:var(--ink-2);font-size:.95rem}
.card time{font-size:.85rem;color:var(--ink-2);font-weight:600;letter-spacing:.02em}
a.card{transition:transform .16s,box-shadow .16s,border-color .16s}
@media (hover:hover){a.card:hover{transform:translateY(-2px);border-color:var(--navy-l);
  box-shadow:0 3px 6px rgba(16,24,40,.08),0 12px 28px rgba(16,24,40,.12)}}
a.card:hover h3{color:var(--red-d)}

/* quick-action tiles */
.tiles{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.tile{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:.7rem;
  text-align:center;padding:1.4rem 1rem;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);text-decoration:none;color:var(--navy);font-weight:600;line-height:1.3;
  box-shadow:var(--shadow);transition:transform .16s,box-shadow .16s;
  min-height:100%;overflow-wrap:anywhere}
.tiles{align-items:stretch}
.tile svg{width:34px;height:34px;stroke:var(--red);stroke-width:1.7;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){.tile:hover{transform:translateY(-2px);color:var(--red-d);
  box-shadow:0 3px 6px rgba(16,24,40,.08),0 12px 28px rgba(16,24,40,.12)}}

/* rollover feature links (the CMS's [ROLLOVER=n] blocks) */
.features{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
.feature{display:flex;flex-direction:column;align-items:center;gap:.75rem;text-align:center;
  text-decoration:none;color:var(--navy);font-weight:600}
.feature img{width:100%;max-width:180px;height:auto;border-radius:50%;
  transition:transform .18s}
@media (hover:hover){.feature:hover img{transform:scale(1.04)}
  .feature:hover{color:var(--red-d)}}

/* ------------------------------------------------------------------- news */
.newslist{display:grid;gap:1rem}
.newsitem{display:grid;gap:.3rem;padding:1.05rem 1.2rem;background:#fff;border:1px solid var(--line);
  border-left:4px solid var(--red);border-radius:var(--r);box-shadow:var(--shadow)}
.newsitem h2{margin:0;font-size:1.08rem}
.newsitem h2 a{text-decoration:none}
.newsitem time{font-size:.85rem;color:var(--ink-2);font-weight:600}
.newsitem p{margin:.15rem 0 0;color:var(--ink-2);font-size:.95rem}
.post-date{color:var(--ink-2);font-weight:600;margin:-.4rem 0 1.2rem}
.pager{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;margin-top:2rem}
.pager a,.pager span{padding:.5rem .85rem;border:1px solid var(--line);border-radius:8px;
  text-decoration:none;font-weight:600;min-width:2.6rem;text-align:center}
.pager .now{background:var(--navy);color:#fff;border-color:var(--navy)}

/* ---------------------------------------------------------------- details */
.faq{display:grid;gap:.6rem;max-width:var(--prose)}
.faq details{border:1px solid var(--line);border-radius:var(--r);background:#fff;
  box-shadow:var(--shadow)}
.faq summary{cursor:pointer;padding:.95rem 1.1rem;font-weight:600;color:var(--navy);
  list-style:none;display:flex;gap:.75rem;align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:0 0 auto;width:.62em;height:.62em;margin-left:auto;
  margin-top:.35em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);transition:transform .18s}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:.55em}
.faq .answer{padding:0 1.1rem 1.05rem}
.faq .answer>*:last-child{margin-bottom:0}

/* --------------------------------------------------------------- document */
.doc{display:flex;gap:1rem;align-items:center;padding:1.1rem 1.25rem;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);
  text-decoration:none;color:inherit;max-width:var(--prose)}
.doc svg{flex:0 0 auto;width:34px;height:42px;stroke:var(--red);fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.doc b{display:block;color:var(--navy);font-size:1.05rem}
.doc small{color:var(--ink-2)}
@media (hover:hover){.doc:hover{border-color:var(--navy-l)}.doc:hover b{color:var(--red-d)}}
.pdfview{width:100%;height:min(80vh,900px);border:1px solid var(--line);border-radius:var(--r);
  margin-top:1rem;background:var(--bg-2)}

/* ------------------------------------------------------------------- form */
.form{max-width:640px}
.field{margin-bottom:1.05rem}
.field label{display:block;font-weight:600;margin-bottom:.3rem}
.req{color:var(--red-d)}
.field input,.field select,.field textarea{
  width:100%;padding:.7rem .8rem;border:1px solid #b9c2cc;border-radius:8px;
  font:inherit;color:inherit;background:#fff}
.field textarea{min-height:9.5rem;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--navy);
  outline:3px solid var(--focus);outline-offset:1px}
.hint{display:block;font-size:.875rem;color:var(--ink-2);margin-top:.25rem}
.err{color:var(--red-d);font-size:.9rem;font-weight:600;margin-top:.3rem}
.field.bad input,.field.bad select,.field.bad textarea{border-color:var(--red-d);
  background:#fff7f7}
.formnote{background:#fdf0f0;border:1px solid #f0c9c9;border-left:4px solid var(--red);
  border-radius:var(--r);padding:.85rem 1.05rem;margin-bottom:1.4rem;font-weight:600;
  color:var(--red-d)}
.formok{background:#eef7ef;border:1px solid #c6e2c9;border-left:4px solid #2e7d32;
  border-radius:var(--r);padding:1.1rem 1.25rem;margin-bottom:1.4rem}
.formok h2{color:#1e5e22;margin-bottom:.3rem}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ------------------------------------------------------------------ aside */
.contactcard{background:var(--bg-2);border-radius:var(--r);padding:1.35rem 1.5rem;
  border:1px solid var(--line)}
.contactcard h2{font-size:1.15rem}
.contactcard p{margin-bottom:.7rem;display:flex;gap:.6rem;align-items:flex-start}
.contactcard svg{stroke:var(--red);margin-top:.22em}
.map{width:100%;aspect-ratio:4/3;border:0;border-radius:var(--r);background:var(--bg-3)}

/* ----------------------------------------------------------------- footer */
.footer{background:var(--navy);color:#fff}
/* a .page ends in prose, not in a band, so it brings its own tail */
main.page{padding-bottom:clamp(2.5rem,6vw,4.5rem)}
.footer a{color:#fff}
.footer .cols{display:grid;gap:var(--gap);padding-block:clamp(2rem,5vw,3.25rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.footer h2{color:#fff;font-size:1rem;letter-spacing:.08em;text-transform:uppercase;
  margin-bottom:.8rem}
.footer ul{list-style:none;margin:0;padding:0}
.footer li{margin-bottom:.45rem}
.footer .fcontact{display:grid;gap:.7rem;font-size:.98rem}
.footer .fcontact div{display:flex;gap:.7rem;align-items:flex-start}
.footer svg{flex:0 0 auto;width:22px;height:22px;stroke:#fff;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;margin-top:.15rem}
.footer .brandmark img{width:230px;height:55px;object-fit:contain;
  object-position:left center}
.legal{border-top:1px solid rgba(255,255,255,.22);font-size:.9rem}
.legal .wrap{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;justify-content:space-between;
  padding-block:1rem;color:#d6e2f0}
.legal a{color:#d6e2f0}

/* --------------------------------------------------------------- printing */
@media print{
  .masthead,.drawer,.scrim,.footer,.skip,.crumbs,.pager{display:none!important}
  body{padding-top:0;font-size:11pt}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;word-break:break-all}
}

/* --------------------------------------------------- touch target sizing */
/* Measured, not guessed: harness/probe.html reported 24px-tall links in the
   news cards and the footer at every phone width. WCAG 2.5.8 wants 24x24 as a
   floor and 44x44 as the target, and 24 exactly is the floor. Padding gets
   them clear of it without moving anything on a desktop. */
@media (max-width:900px){
  .footer li a,.newsitem h2 a,.contactcard a,.legal a,.footer .fcontact a{
    display:inline-block;padding-block:.42rem;min-height:2.4rem}
  .footer .fcontact{gap:.2rem}
  .footer li{margin-bottom:.15rem}
  .contactcard p{align-items:center}
  .btn,.btn.ghost{padding-block:.85rem}
}

/* The utility strip carries two quick links and a search link. Below 620px
   they wrap onto a second row and take 76px off an 844px phone screen for
   navigation that is repeated in the drawer, so they go there instead. */
@media (max-width:620px){
  .utility .wrap>a:not(.tel){display:none}
  .utility .wrap{justify-content:flex-start}
}
.drawer .d-quick{margin-top:.9rem;display:grid;gap:.35rem}
.drawer .d-quick a{border-bottom:0;padding:.55rem .75rem;font-weight:500;
  background:var(--bg-2);border-radius:8px}

/* ---------------------------------------------------------------- flyers */
/* The two home-page notices are pages of information in their own right, not
   pictures sitting beside prose, so they are NOT capped at the 74ch measure. */
.flyers{display:grid;gap:var(--gap);max-width:none}
.flyers p{margin:0}
.flyers picture,.flyers img{display:block;width:100%;height:auto;border-radius:var(--r)}
.flyers a{display:block}