/* Access Boise — design layer (option D, "distance from the edge").
 *
 * COLOUR, sampled from the two flags rather than guessed:
 *   --blue  Idaho's field, and the city field alongside it
 *   --gold  the Idaho seal ring, darkened for text where AA demands it
 * Semantics: BLUE = the city and the river · GOLD = the foothills and the dry country.
 * The reach grid takes its row colours from that rule, so it teaches itself.
 */
:root{
  --ui:'Inter',system-ui,-apple-system,sans-serif;
  --serif:'Source Serif 4',Georgia,serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --blue:#003776; --blue-ink:#00284F; --blue-soft:#F2F6FB;
  --gold:#8A6100; --goldbright:#FCD100; --gold-soft:#FBF6E6;
  --ink:#16202C; --mid:#4B5A6B; --small:#5F6A77;
  --line:#DCE3EB; --rule:#C7D2DE; --sunk:#F3F6FA; --card:#fff; --no:#8A5A00;
}

/* ─────────────────────────────────────────────────────────────────────── furniture */
body{background:#fff;color:var(--ink);font-family:var(--ui)}
.abo-wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 20px}
@media(max-width:600px){.abo-wrap{padding:0 16px}}

.site-header{border-bottom:3px solid var(--blue)}
.inside-header{display:flex;align-items:flex-end;gap:24px;flex-wrap:wrap;padding-top:14px!important;
  padding-bottom:11px!important}
/* DO NOT make .site-branding shrinkable. Curing a 375 overflow that way let the nav (flex:1 1 auto)
   crush the tagline to ONE CHARACTER PER LINE at desktop on a sibling build. */
.site-branding{flex:0 0 auto}
.main-navigation{flex:0 1 auto;margin-left:auto}
.site-title{font:700 25px/1 var(--serif);letter-spacing:-.02em}
.site-title a{text-decoration:none;color:var(--ink)}
.site-description{margin-top:5px;font:500 10.5px/1.4 var(--mono);letter-spacing:.19em;
  text-transform:uppercase;color:var(--small)}
.main-navigation .main-nav ul li a{font:500 13.5px/1 var(--ui);color:var(--mid);padding:9px 11px}
.main-navigation .main-nav ul li a:hover{color:var(--blue)}
@media(max-width:600px){.inside-header{flex-direction:column;align-items:flex-start}
  .main-navigation{margin-left:0;width:100%}}

/* ───────────────────────────────────────────────────────────────────────────── hero */
.abo-hero{position:relative;overflow:hidden;background:#00234D}
/* The subject sits along the middle band of a 3.4:1 source, so centre is the right slice; and the
   band is tall enough that the photograph is the point rather than a letterbox. */
.abo-hero img{width:100%;height:clamp(280px,42vw,600px);object-fit:cover;object-position:center 52%;
  display:block}
.abo-hero .cap{background:linear-gradient(180deg,#00234D,#003776);padding:22px 0 26px}
.abo-hero .kick{margin:0 0 11px;font:500 10px/1 var(--mono);letter-spacing:.22em;
  text-transform:uppercase;color:var(--goldbright)}
.abo-hero h1{margin:0;font:700 clamp(26px,3.3vw,40px)/1.14 var(--serif);letter-spacing:-.028em;
  color:#fff;max-width:23ch}
.abo-hero .sf{margin:11px 0 0;max-width:64ch;font-size:16px;line-height:1.56;color:#C9D8E8}
.abo-credit{margin:0;padding:7px 0 0;font:400 11px/1.5 var(--mono);color:var(--small)}

/* ──────────────────────────────────────────────────────────────── section furniture */
.abo-sec{padding:30px 0}
.abo-sec.alt{background:var(--sunk);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.abo-k{margin:0 0 7px;font:500 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--blue)}
.abo-k.g{color:var(--gold)}
.abo-t{margin:0;font:700 clamp(21px,2.4vw,29px)/1.18 var(--serif);letter-spacing:-.024em}
.abo-l{margin:9px 0 0;max-width:76ch;font-size:15px;line-height:1.55;color:var(--mid)}

/* ───────────────────────────────────────────────────── the reach grid (option D's spine) */
.reach{margin-top:16px;border:1px solid var(--rule);background:var(--card);overflow-x:auto}
.rin{min-width:720px}
.rh,.rr{display:grid;grid-template-columns:.95fr 1fr 1fr 1fr 1fr}
.rh>div{padding:11px 13px;font:600 10px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  background:var(--sunk);border-bottom:3px solid var(--goldbright);color:var(--gold)}
.rh>div:first-child{border-bottom-color:var(--blue);color:var(--blue)}
.rr{border-top:1px solid var(--line)}
.rr>div{padding:12px 13px;font-size:13.5px;line-height:1.46;color:var(--mid)}
.rr .wh{padding:0;background:var(--blue-soft);border-left:4px solid var(--blue)}
.rr.g .wh{background:var(--gold-soft);border-left-color:var(--goldbright)}
/* The whole cell is the link so the thumbnail and the name are both clickable — on the sibling
   site the picture and the label were a dead zone and the owner reported it as a broken link. */
.rr .wh>a{display:flex;align-items:center;gap:10px;padding:11px 13px;height:100%;
  text-decoration:none;font:700 15px/1.28 var(--serif);color:var(--blue-ink)}
.rr.g .wh>a{color:var(--gold)}
.rr .wh>a:hover{text-decoration:underline}
/* Square crop, and scoped to (0,2,0): `.entry-content img{height:auto}` is (0,1,1) and silently
   beats a bare class, which made every thumbnail on a sibling site render at its source ratio. */
.rr .wh a>.rx-im{flex:0 0 auto;width:48px;height:48px;object-fit:cover;display:block;
  background:var(--sunk)}
.rr a{color:var(--mid);text-decoration:none;display:block}
.rr>div>a:hover{color:var(--ink)}

.edge{margin-top:16px;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line)}
.edge>div{background:var(--card);padding:13px 15px}
.edge b{display:block;font:600 10px/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;
  color:var(--gold)}
.edge p{margin:7px 0 0;font-size:14px;line-height:1.5;color:var(--mid)}
@media(max-width:760px){.edge{grid-template-columns:1fr}}

.seam{margin-top:14px;background:#0E1A26;color:#D9E3EE;padding:18px 20px}
.seam h3{margin:0;font:700 clamp(17px,2vw,21px)/1.22 var(--serif);color:#fff}
.seam p{margin:9px 0 0;max-width:78ch;font-size:14.5px;line-height:1.56;color:#A7B6C6}

/* ──────────────────────────────────────────────────────── the standing-rules table */
.alm{margin-top:16px;border:1px solid var(--rule);background:var(--card)}
.alm-head,.alm-row{display:grid;grid-template-columns:.6fr 1.25fr 1.25fr}
.alm-head{background:var(--blue);color:#fff}
.alm-head>div{padding:10px 14px;font:600 10px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.alm-head>div:nth-child(3){color:#FFE79A}
.alm-row{border-top:1px solid var(--line)}
.alm-row>div{padding:10px 13px;font-size:14px;line-height:1.48}
.alm-row>div:first-child{font:500 13px/1.4 var(--mono);background:var(--sunk)}
.alm-row .yes{color:var(--mid)}
.alm-row .no{color:var(--no);background:#FDF8EA}
@media(max-width:840px){.alm-head{display:none}.alm-row{grid-template-columns:1fr}
  .alm-row>div+div::before{display:block;margin-bottom:4px;font:600 9.5px/1 var(--mono);
    letter-spacing:.14em;text-transform:uppercase;color:var(--small)}
  .alm-row .yes::before{content:"What we can tell you"}
  .alm-row .no::before{content:"What we will not"}}

/* ───────────────────────────────────────────────────────────────────────── latest */
.reads{list-style:none;margin:16px 0 0;padding:0;border-top:1px solid var(--line)}
.reads li{border-bottom:1px solid var(--line)}
.reads a{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:baseline;
  padding:11px 0;text-decoration:none;color:inherit}
.reads .n{font:500 11px/1.5 var(--mono);color:var(--small)}
.reads b{font:600 15px/1.35 var(--ui)}
.reads em{font-style:normal;font:500 10px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold)}
.reads a:hover b{color:var(--blue)}
@media(max-width:600px){.reads a{grid-template-columns:30px 1fr}.reads em{grid-column:2}}

/* ─────────────────────────────────────────────────────────────────── category tiles */
/* auto-fit, never a fixed column count: the tiles are queried with hide_empty, so during seeding
   there are fewer than ten and a fixed grid leaves dead cells at the end of the row.
   AND the rules are drawn with BORDERS, not a background showing through 1px gaps — the gap
   technique paints the empty cells of a partial last row as solid blocks, which is exactly what
   the owner spotted on the option-D preview. */
.cg{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:0;margin-top:16px;
  border-top:1px solid var(--line);border-left:1px solid var(--line)}
.cg a{background:var(--card);text-decoration:none;color:inherit;display:flex;flex-direction:column;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  border-top:3px solid transparent}
.cg a:hover{border-top-color:var(--goldbright);background:var(--sunk)}
.cg a>.cg-im{display:block;width:100%;height:88px;object-fit:cover;background:var(--sunk)}
.cg-tx{display:block;padding:11px 13px 13px}
.cg b{display:block;font:600 14.5px/1.24 var(--ui)}
.cg .cg-tx>span{display:block;margin-top:5px;font-size:12.5px;line-height:1.45;color:var(--mid)}
@media(max-width:1000px){.cg{grid-template-columns:repeat(2,1fr)}.cg a>.cg-im{height:118px}}
@media(max-width:520px){.cg{grid-template-columns:1fr}.cg a>.cg-im{height:136px}}

/* ─────────────────────────────────────────────────────────────── where this site stops */
.abo-stop{background:#0E1A26;color:#D9E3EE;padding:30px 0}
.abo-stop h2{margin:0;font:700 clamp(20px,2.3vw,27px)/1.18 var(--serif);color:#fff}
.abo-stop>.abo-wrap>p{margin:10px 0 0;max-width:74ch;font-size:15px;color:#A7B6C6}
.sl{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);
  gap:1px;background:#1B2A3A;border:1px solid #1B2A3A}
.sl li{background:#0E1A26;padding:13px 15px 15px;border-left:3px solid var(--goldbright)}
.sl b{display:block;font:600 14.5px/1.28 var(--ui);color:#fff}
.sl span{display:block;margin-top:6px;font-size:13px;line-height:1.5;color:#A7B6C6}
@media(max-width:760px){.sl{grid-template-columns:1fr}}
.adzone{padding:24px 0;background:var(--sunk);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}

/* The static front page renders its own title ("Access Boise") immediately above the hero, one
   line under the identical wordmark. Hide it on the home page only — the same markup is the real
   headline everywhere else. */
body.home .entry-header,body.home .page-header,body.home .entry-title{display:none}
body.home .inside-article{padding:0;border:0;background:transparent}
body.home .site-content .content-area{margin:0}

/* ══════════════════════════════════════════════════════════ articles and archives */
body.single .inside-article,body.page:not(.home) .inside-article,
body.archive .inside-article,body.blog .inside-article{max-width:800px;margin:0 auto;
  padding:26px 0 34px;background:transparent;border:0}
body.single .entry-title,body.page:not(.home) .entry-title{
  font:700 clamp(25px,3.2vw,35px)/1.16 var(--serif);letter-spacing:-.028em}
.entry-meta,.entry-meta a{color:var(--small);font:500 10px/1.6 var(--mono);letter-spacing:.16em;
  text-transform:uppercase;text-decoration:none}
/* SCOPED, not global. `.entry-content p{color:var(--ink)}` is (0,1,1) — the same specificity as
   `.seam p` and later in this file, so it won and painted the seam's copy near-black ON A NAVY
   BLOCK, where it was invisible. The homepage is entry-content too, so a global rule here reaches
   inside every design block. Article/page bodies only. */
body.single .entry-content>p,body.page:not(.home) .entry-content>p,
body.single .entry-content li,body.page:not(.home) .entry-content li{
  font-size:16px;line-height:1.62;color:var(--ink)}
/* Belt and braces: the dark blocks restate their own colour at (0,2,1) so no future
   .entry-content rule can reach into them. */
.abo-sec .seam p,.abo-sec .seam h3{color:#A7B6C6}
.abo-sec .seam h3{color:#fff}
.abo-stop>.abo-wrap>p,.abo-stop .sl span{color:#A7B6C6}
.abo-stop .sl b,.abo-stop h2{color:#fff}
.entry-content h2{margin-top:26px;font:700 clamp(19px,2.2vw,26px)/1.2 var(--serif);
  letter-spacing:-.02em}
.entry-content h3{margin-top:20px;font:600 17px/1.25 var(--ui)}
.entry-content img{height:auto;max-width:100%}
.entry-content figure{margin:20px 0}
.entry-content figcaption,.wp-element-caption{font:400 11px/1.5 var(--mono);color:var(--small);
  margin-top:6px}
.entry-content blockquote{margin:22px 0;padding:12px 0 12px 18px;border-left:4px solid var(--goldbright);
  font:600 18px/1.42 var(--ui);color:var(--ink)}
/* (0,1,1) beats a (0,1,0) exclusion, so any link-styling exception has to be scoped at least as
   tightly or it re-underlines the whole layer. */
.abo-hero a,.abo-sec a,.abo-stop a,.reach a,.alm a,.cg a,.reads a,
.entry-content .reads li>a,.entry-content .cg a,.entry-content .reach a{text-decoration:none}
.entry-content .reads li>a{color:var(--ink)}
.sc-disclaimer{max-width:800px;margin:22px auto 0;padding:13px 15px;background:var(--sunk);
  border-left:3px solid var(--goldbright);font-size:13.5px;line-height:1.55;color:var(--mid)}
.abo-foot{margin:0;font-size:12.5px;line-height:1.6;color:var(--small)}
.abo-foot span{font:700 14px/1 var(--serif);color:var(--ink)}
.site-footer .inside-site-info{padding:16px 0 24px}