/* ============================================================================
   THE BLUE PAGES — jail411 parole directory
   ----------------------------------------------------------------------------
   Scoped to .page-parole_hub. Loads after site.css and components.css and
   deliberately overrides them: this surface is a committed world, not a themed
   table. Nothing here leaks to another page type.

   WHY THIS WORLD. The blue pages are the one place in American print where
   government listings were set for a stranger under pressure. Printed on blue
   stock so a hand could find the section by its edge, set dense because density
   reads as authority in a reference work, and stripped of anything between the
   reader and a number they can ring. That is this page's whole job.

   COLOUR STRATEGY: committed. Blue is the field, not an accent — the paper is
   blue stock, the masthead is ink-blue at full strength, the running heads and
   jurisdiction rules are blue. The reader is inside the section, not looking at
   a blue button on white.

   TYPE: one face. Archivo, already self-hosted, a grotesque with signage and
   directory ancestry. A directory sets everything in one family and separates
   by size, weight and tracking — which is also why this page no longer has
   three type families arguing with each other.
   ============================================================================ */

.page-parole_hub{
  /* Blue stock, ink, and the section blue. Contrast measured, not assumed:
     ink on paper 15.8:1, section blue on paper 7.9:1, paper on masthead 13.4:1. */
  --bp-paper:#DBE3EF;
  --bp-panel:#E9EEF6;
  --bp-sheet:#F4F7FB;
  --bp-ink:#101620;
  --bp-ink-soft:#46536A;
  --bp-rule:#A9B8CE;
  --bp-blue:#123C7A;
  --bp-blue-deep:#0A2450;
  --bp-blue-line:#2C5FA8;

  --bp-shell:1180px;
  background:var(--bp-paper);
  color:var(--bp-ink);
  font-family:'Archivo',system-ui,sans-serif;
}

/* The shell is narrower than the site default. A directory column that runs to
   1320px stops being scannable — the eye loses the line between city and number. */
.page-parole_hub .wrap{max-width:var(--bp-shell)}

/* ---------------------------------------------------------------- masthead --
   A section head, not a hero. It states which book and which section you are
   in, and nothing else. No eyebrow above the heading: the heading carries its
   own weight. No stat row: four figures about our record count answer a
   question no one arriving here has asked. */
.bp-masthead{
  width:100vw;margin-inline:calc(50% - 50vw);
  padding:clamp(34px,5vw,58px) calc(50vw - 50% + 4px) clamp(28px,4vw,44px);
  background:var(--bp-blue-deep);
  color:#EAF0F8;
  border-bottom:5px solid var(--bp-blue-line);
}
.bp-masthead__inner{max-width:var(--bp-shell);margin:0 auto}

.bp-masthead h1{
  margin:0;
  font-family:'Archivo',sans-serif;
  font-weight:600;
  font-size:clamp(2.4rem,5.4vw,4.1rem);
  line-height:.98;
  letter-spacing:-.028em;
  color:#FFFFFF;
  text-wrap:balance;
  max-width:16ch;
}
/* The state is the running head of the whole section, so it is set as one. */
.bp-masthead__state{
  display:block;
  font-size:.62em;
  font-weight:400;
  letter-spacing:.02em;
  color:#9DB6D8;
}
.bp-masthead__lede{
  max-width:64ch;margin:18px 0 0;
  font-size:1.02rem;line-height:1.6;color:#C6D5EA;
}

/* Directory rules: the one fact that changes what a reader does. Set as a
   ruled notice in the section's own voice, not a card with an icon. */
.bp-notice{
  max-width:70ch;margin:22px 0 0;padding:14px 0 0;
  border-top:1px solid rgba(255,255,255,.22);
  font-size:.95rem;line-height:1.55;color:#EAF0F8;
}
.bp-notice b{font-weight:600;color:#FFFFFF}

/* ------------------------------------------------------------- section bar --
   The jurisdiction index. In print this is the tabbed edge of the section; on
   screen it is a single dense line of place names, set tight, because a reader
   scanning for their own town wants them close together, not spaced out as
   buttons. */
.bp-index{
  margin:0 0 4px;padding:20px 0 18px;
  border-bottom:1px solid var(--bp-rule);
}
.bp-index__label{
  display:block;margin:0 0 10px;
  font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bp-ink-soft);
}
.bp-index__list{
  display:flex;flex-wrap:wrap;gap:2px 0;max-width:none;margin:0;padding:0;list-style:none;
}
.bp-index__list a{
  display:inline-block;padding:2px 10px 2px 0;margin-right:10px;
  font-size:.93rem;font-weight:400;line-height:1.5;
  color:var(--bp-blue);text-decoration:none;
  border-right:1px solid var(--bp-rule);
}
.bp-index__list li:last-child a{border-right:0}
.bp-index__list a:hover,.bp-index__list a:focus-visible{
  color:var(--bp-ink);text-decoration:underline;text-underline-offset:3px;
}

/* ------------------------------------------------------------------ entries --
   The directory itself. A ruled list, not a grid of boxes: rules are how a
   reference work separates entries without spending a card on each one.

   Every entry has the same shape, so nothing is conditional at the top of an
   entry — the failure that made the previous table read as carelessly built. */
.bp-entries{max-width:none;margin:0;padding:0;list-style:none}

.bp-entry{
  display:grid;
  grid-template-columns:minmax(0,13rem) minmax(0,1fr) minmax(0,15rem);
  gap:0 clamp(20px,3vw,44px);
  padding:17px 0 16px;
  border-bottom:1px solid var(--bp-rule);
  scroll-margin-top:20px;
}
/* A new town opens with a firmer rule — the print convention for a new block
   of listings, and it does the work the coloured tick was doing badly. */
.bp-entry--head{border-top:2px solid var(--bp-ink);margin-top:26px}
.bp-entry--head:first-child{margin-top:0}

/* Column 1: the place. Set as the entry's running head. */
.bp-entry__place{min-width:0}
.bp-entry__city{
  display:block;font-size:1.06rem;font-weight:600;line-height:1.2;
  letter-spacing:-.012em;color:var(--bp-ink);
}
.bp-entry__county{
  display:block;margin-top:3px;
  font-size:.8rem;font-weight:400;line-height:1.35;color:var(--bp-ink-soft);
}
/* A continuation entry in the same town leaves the place column empty on
   purpose; the firm rule above the block already said which town this is. */

/* Column 2: what the agency calls it, then what everyone else calls it.
   Unit designations are set in the directory face with open tracking rather
   than in mono — they are names in a register, not code. */
.bp-entry__units{
  display:block;font-size:.87rem;font-weight:400;line-height:1.45;
  letter-spacing:.055em;color:var(--bp-ink-soft);
}
.bp-entry__name{
  display:block;margin-top:4px;
  font-size:.98rem;font-weight:600;line-height:1.3;color:var(--bp-ink);
}
.bp-entry__former{
  display:block;margin-top:2px;font-size:.8rem;color:var(--bp-ink-soft);
}
.bp-entry__addr{
  display:block;margin-top:6px;font-size:.9rem;line-height:1.5;
}
.bp-entry__addr a{
  color:var(--bp-blue);text-decoration:none;
  border-bottom:1px solid transparent;
}
.bp-entry__addr a:hover,.bp-entry__addr a:focus-visible{
  border-bottom-color:var(--bp-blue-line);
}

/* Column 3: the number. In a telephone directory the number IS the entry, so
   it is set at entry weight in the directory face and right-aligned to form a
   true column down the page. It is not a coloured link: a blue phone number
   reads as navigation, and this is the destination. */
.bp-entry__tel{text-align:right;min-width:0}
.bp-entry__tel a{
  display:inline-block;
  font-size:1.16rem;font-weight:600;line-height:1.25;
  letter-spacing:.005em;font-variant-numeric:tabular-nums;
  color:var(--bp-ink);text-decoration:none;
  border-bottom:2px solid var(--bp-rule);
}
.bp-entry__tel a:hover,.bp-entry__tel a:focus-visible{border-bottom-color:var(--bp-ink)}
.bp-entry__tel--alt{display:block;margin-top:6px}
.bp-entry__tel--alt a{font-size:.98rem;font-weight:400;color:var(--bp-ink-soft)}
.bp-entry__telnote{
  display:block;margin-top:2px;
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--bp-ink-soft);
}
.bp-entry__none{
  display:inline-block;font-size:.95rem;color:var(--bp-ink-soft);
}

/* ------------------------------------------------------------- front matter --
   What a reference work puts before the listings: how to use this section.
   Prose in a ruled block, not four cards of icon-plus-heading-plus-text. */
.bp-front{
  margin:0 0 30px;padding:24px 0 4px;
  border-top:2px solid var(--bp-ink);
}
.bp-front h2,.bp-back h2{
  margin:0 0 16px;
  font-family:'Archivo',sans-serif;font-weight:600;
  font-size:clamp(1.32rem,2.2vw,1.62rem);line-height:1.2;letter-spacing:-.018em;
  color:var(--bp-ink);
}
.bp-front__list{
  max-width:none;margin:0;padding:0;list-style:none;
  display:grid;gap:0;
}
.bp-front__list>li{
  display:grid;
  grid-template-columns:minmax(0,15rem) minmax(0,1fr);
  gap:4px clamp(20px,3vw,44px);
  padding:13px 0;
  border-bottom:1px solid var(--bp-rule);
}
.bp-front__list dt,.bp-front__term{
  font-size:.97rem;font-weight:600;line-height:1.35;color:var(--bp-ink);
}
.bp-front__def{
  font-size:.94rem;line-height:1.6;color:var(--bp-ink-soft);max-width:62ch;
}

/* -------------------------------------------------------------- back matter --
   The explanatory section, set as reading matter: one column, real measure. */
.bp-back{margin:44px 0 0;padding:26px 0 0;border-top:2px solid var(--bp-ink)}
.bp-back p{max-width:68ch;margin:0 0 15px;font-size:1rem;line-height:1.68;color:var(--bp-ink)}
.bp-back p.bp-back__legal{
  margin-top:22px;padding-top:14px;border-top:1px solid var(--bp-rule);
  font-size:.87rem;line-height:1.6;color:var(--bp-ink-soft);
}
.bp-back__agency{margin:20px 0 0;font-size:.94rem;color:var(--bp-ink-soft)}
.bp-back__agency a{color:var(--bp-blue)}

.bp-related{margin:38px 0 0;padding:22px 0 0;border-top:1px solid var(--bp-rule)}
.bp-related h2{
  margin:0 0 12px;font-size:.72rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--bp-ink-soft);
}
.bp-related a{color:var(--bp-blue);font-size:.97rem}

/* ------------------------------------------------------------------- motion --
   One authored moment: arriving at a town from the index lifts that block's
   paper for a beat, the way a thumb holds a page open. Nothing else animates. */
@keyframes bp-found{
  from{background:#FFF7D6}
  to{background:transparent}
}
.bp-entry:target,.bp-entry--head:target{animation:bp-found 1.4s ease-out}
@media(prefers-reduced-motion:reduce){
  .bp-entry:target,.bp-entry--head:target{animation:none;background:#FFF7D6}
}

/* --------------------------------------------------------------- responsive --
   Below 800px the three columns become two: place and units stack, and the
   number keeps its own column because it is what the reader came for. */
@media(max-width:800px){
  .bp-entry{
    grid-template-columns:minmax(0,1fr) minmax(0,9.5rem);
    gap:0 16px;
  }
  .bp-entry__place{grid-column:1/-1;margin-bottom:5px}
  .bp-entry__tel{text-align:right}
  .bp-front__list>li{grid-template-columns:1fr;gap:3px}
}
@media(max-width:480px){
  .bp-entry{grid-template-columns:1fr;gap:0}
  .bp-entry__tel{text-align:left;margin-top:9px}
  .bp-entry__tel a{font-size:1.24rem}
}


/* ------------------------------------------------------------------ defects --
   Fixes from the first render, kept in the world file so the reasoning travels. */

/* The listings heading is for screen readers and document outline: 40 entries
   under the masthead's "Parole Offices" do not need the words repeated in print.
   The utility was used before it existed, so the heading rendered full size. */
.visually-hidden{
  position:absolute !important;width:1px;height:1px;
  margin:-1px;padding:0;overflow:hidden;white-space:nowrap;
  clip-path:inset(50%);border:0;
}

/* The masthead ran tall with an empty right half. A directory section head is a
   band, not a stage: the copy sets to its own measure and the band closes. */
.bp-masthead{padding-bottom:clamp(22px,3vw,32px)}
.bp-masthead h1{max-width:14ch}
.bp-masthead__lede{max-width:58ch;font-size:.99rem}
.bp-notice{max-width:62ch;margin-top:20px}

/* Front matter is reading matter and was stretching to the full 1180px shell.
   A definition list at that width breaks the association between term and text. */
.bp-front{max-width:74ch}
.bp-front__list>li{grid-template-columns:minmax(0,13.5rem) minmax(0,1fr)}

/* The index is a dense line of place names; at shell width it was spacing out
   into something button-like. Holding it to a measure keeps it a line of type. */
.bp-index{max-width:86ch}


/* ------------------------------------------------------------------ batch one --
   Fixes from the first inspection round. */

/* The band runs as two columns so the section name and the one governing rule
   share the width, instead of a tall stack with an empty right half. */
.bp-masthead__inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,5vw,72px);
  align-items:end;
}
.bp-masthead{padding-block:clamp(30px,4vw,46px) clamp(24px,3vw,34px)}
.bp-masthead h1{max-width:none}
.bp-notice{max-width:46ch;margin:0;padding:14px 0 0}
@media(max-width:820px){
  .bp-masthead__inner{grid-template-columns:1fr;gap:20px;align-items:start}
  .bp-notice{max-width:60ch}
}

/* The orientation paragraph now opens the front matter. */
.bp-front__lede{
  max-width:66ch;margin:0 0 26px;
  font-size:1.03rem;line-height:1.62;color:var(--bp-ink);
}

/* Listing density. A reference work sets entries close; the previous rhythm was
   card spacing without the cards. */
.bp-entry{padding:11px 0 10px}
.bp-entry--head{margin-top:16px}
.bp-entry__city{font-size:1.02rem}
.bp-entry__county{margin-top:1px;font-size:.78rem}
.bp-entry__units{font-size:.845rem;line-height:1.4}
.bp-entry__name{margin-top:2px;font-size:.95rem}
.bp-entry__addr{margin-top:3px;font-size:.885rem;line-height:1.45}
.bp-entry__tel a{font-size:1.1rem}

/* The index is a run of type, not a row of controls. */
.bp-index__list a{
  border-right:0;margin-right:0;padding:2px 0;
  font-size:.92rem;
}
.bp-index__list li:not(:last-child) a::after{
  content:'·';margin:0 .5ch 0 .75ch;color:var(--bp-rule);
}


/* --------------------------------------------------------------- restored --
   Content the redesign dropped, set in the directory's own voice. */

/* A reference section states its own extent as a line of type, not as four
   boxes of big numerals. Same figures, same source, no hero-metric card row. */
.bp-extent{
  max-width:none;margin:14px 0 0;
  font-size:.87rem;line-height:1.6;letter-spacing:.055em;
  text-transform:uppercase;color:#9DB6D8;
}

/* The one control for someone who only wants the list. */
.bp-skip{margin:12px 0 0;font-size:.95rem}
.bp-skip a{
  color:#EAF0F8;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.4);
}
.bp-skip a:hover,.bp-skip a:focus-visible{border-bottom-color:#FFFFFF}

/* The heading now carries its full chosen wording, so it sets smaller and to a
   real measure rather than as two enormous stacked words. */
.bp-masthead h1{
  font-size:clamp(1.9rem,3.6vw,2.9rem);
  line-height:1.06;
  max-width:20ch;
}

/* What we do not hold, stated plainly. This is the honesty note, not a source
   stamp: it names absent fields and carries the only route to /methodology/. */
.bp-footnote{
  max-width:76ch;margin:34px 0 0;padding:16px 0 0;
  border-top:1px solid var(--bp-rule);
  font-size:.86rem;line-height:1.6;color:var(--bp-ink-soft);
}
.bp-footnote a{color:var(--bp-blue)}

/* Sets up the four items and disclaims them against the agents own instructions,

/* Sets up the four items and disclaims them against the agent's own instructions,
   which is the safety point of the block rather than a nicety. */
.bp-front__intro{
  max-width:64ch;margin:0 0 18px;
  font-size:.97rem;line-height:1.6;color:var(--bp-ink-soft);
}
/* Verified county-to-court child route. Kept out of the global navigation so
   courts remain a contextual county system rather than a facility type. */
.county-court-route{display:grid;grid-template-columns:150px minmax(0,1fr) 260px;gap:28px;align-items:center;margin:32px 0;padding:27px 29px;border-left:7px solid #c64a10;background:#061a38;color:#fff}.county-court-route>span{color:#69c2ff;font:700 .68rem/1.4 var(--mono);letter-spacing:.13em;text-transform:uppercase}.county-court-route h2{margin:0;color:#fff;font-size:1.65rem;line-height:1.06}.county-court-route p{margin:9px 0 0;color:#c8d7e7;font-size:.86rem;line-height:1.5}.county-court-route>a{min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 15px;background:#0878db;color:#fff;font-weight:700;text-decoration:none}.county-court-route>a:hover{background:#c64a10;color:#fff}.county-court-route i{font-style:normal}
@media(max-width:820px){.county-court-route{grid-template-columns:1fr}.county-court-route>a{width:100%}}