/* ============================================================================
   PhysicsBowl · chrome stylesheet
   Direction 02 "Field Guide" · rebuilt 2026-08-25.

   Concept: getting to exam day is a sequence, so the site is a field guide —
   full-bleed navy and grey bands, one stage or one strand per band, colour-coded
   so a reader enters at whichever band their question belongs to.

   Declarations carried over verbatim from the approved Direction 02 in
   design-options.html. Scope: two-tier masthead, hero band, mobile drawer,
   footer, and the article/list furniture the baseline templates render.
   Page components live in physicsbowl-pages.css. Behaviour lives in theme.js.
   ========================================================================== */

:root{
  /* navy ramp */
  --navy-900:#012446;   /* utility strip, footer base                      */
  --navy-800:#003365;   /* masthead ground, footer ground                  */
  --navy-700:#00539B;   /* hero band, accents                              */
  --navy-600:#225588;   /* = strand: mechanics                             */
  --blue:#0072EE;       /* focus ring                                      */
  --blue-ink:#0057C2;   /* link text on light grounds                      */
  --blue-deep:#00396F;
  --blue-pale:#E7F0FD;
  --blue-pale-2:#CFE2F7;

  /* amber — the Field Guide accent: pill CTAs, band rules, footer edge */
  --amber:#FFA500; --amber-mid:#B26A00; --amber-ink:#8A5200; --amber-pale:#FBF0DC;

  /* red — only where something can go wrong */
  --red:#C0392B; --red-ink:#8B0000; --red-pale:#FAE9E7;

  /* text */
  --ink:#212529; --body:#333333; --muted:#555555;

  /* four surface levels */
  --s0:#FFFFFF; --s1:#F5F8FA; --s2:#EFEFEF; --s3:#DEDEDE;

  /* text on navy */
  --on-navy:#FFFFFF; --on-navy-2:#B9CBDD; --on-navy-3:#8FA9C4;
  --on-blue-2:#CFE2F7; --on-navy-link:#8FC2FF;

  /* five strands: line / ink for text / pale fill */
  --st-mech:#225588; --st-mech-ink:#1B4368; --st-mech-pale:#E6EDF4;
  --st-em:#B26A00;   --st-em-ink:#8A5200;   --st-em-pale:#F6ECDD;
  --st-th:#C0392B;   --st-th-ink:#8B0000;   --st-th-pale:#FAE9E7;
  --st-op:#0F6E78;   --st-op-ink:#0A5158;   --st-op-pale:#E2F0F1;
  --st-mo:#6B3FA0;   --st-mo-ink:#54307D;   --st-mo-pale:#EFE9F5;

  /* type — Open Sans throughout, mono used sparingly */
  --sans:"Open Sans","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --f-sans:var(--sans); --f-display:var(--sans); --f-mono:var(--mono);

  --r1:4px; --r2:6.4px; --r3:8px; --rp:40px;
  --t-fast:.15s; --t:.18s; --ease:cubic-bezier(.32,.72,.4,1);

  /* skeleton: centred measure inside full-bleed bands */
  --container:1204px; --gutter:32px;
  --measure:825px;      /* centred reading measure */
  --bar:78px;           /* masthead height */
  --util:38px;          /* utility strip height */
}

/* --------------------------------------------------------------- base ---- */
body{
  font-family:var(--sans);
  font-size:16px; line-height:1.6; color:var(--body);
  background:var(--s0);
  -webkit-font-smoothing:antialiased;
}
.pb-wrap{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}

/* ------------------------------------------------- two-tier masthead ---- */
.pb-top{position:fixed;top:0;left:0;right:0;z-index:60}

.pb-util{background:var(--navy-900);color:var(--on-navy-2);font-size:12.5px}
.pb-util .pb-wrap{display:flex;align-items:center;gap:20px;min-height:var(--util);
  flex-wrap:wrap;padding-top:6px;padding-bottom:6px}
.pb-util .tl{color:var(--on-navy-2)}
.pb-util .rg{margin-left:auto;display:flex;align-items:center;gap:18px}
.pb-util a{color:var(--on-blue-2);text-decoration:none;transition:color var(--t) ease}
.pb-util a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}

.pb-region{display:inline-flex;align-items:center;gap:7px;border:1px solid #2C5A8C;
  border-radius:var(--rp);padding:3px 12px;color:#fff;font-family:var(--mono);font-size:11px;
  transition:border-color var(--t) ease,background-color var(--t) ease}
.pb-region:hover{border-color:#7FA0C2;background:rgba(255,255,255,.08);text-decoration:none}
.pb-region i{width:6px;height:6px;border-radius:50%;background:var(--amber);display:block;flex:0 0 auto}

.pb-bar{background:var(--navy-800)}
.pb-bar .pb-wrap{display:flex;align-items:center;gap:26px;height:var(--bar)}

.pb-logo{width:42px;height:42px;border-radius:var(--r2);background:#fff;
  object-fit:contain;padding:2px;flex:0 0 auto;display:block}
.pb-foot .pb-logo{width:38px;height:38px}
.pb-mark{width:34px;height:34px;border-radius:var(--r2);background:#fff;display:grid;
  grid-template-columns:1fr 1fr;gap:3px;padding:7px;flex:0 0 auto}
.pb-mark span{display:block;border-radius:1px;background:var(--navy-800)}
.pb-mark span:nth-child(2),.pb-mark span:nth-child(3){background:var(--navy-700)}
.pb-mark span:nth-child(4){background:var(--amber)}

.pb-brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:0 0 auto}
.pb-brand b{color:#fff;font-size:23px;font-weight:700;letter-spacing:-.4px;line-height:1.15;display:block}

.pb-nav{display:none;align-items:center;gap:24px;margin-left:auto}
.pb-nav a{color:#fff;text-decoration:none;font-size:15px;position:relative;
  padding:26px 0 24px;transition:color var(--t) ease}
.pb-nav a::after{content:"";position:absolute;left:0;right:0;bottom:18px;height:3px;
  background:var(--amber);border-radius:2px;transform:scaleX(0);transform-origin:center;
  transition:transform var(--t) ease}
.pb-nav a:hover::after,.pb-nav a.is-current::after{transform:scaleX(1)}

.pb-btn{display:inline-flex;align-items:center;gap:8px;background:var(--amber);color:#212529;
  border-radius:var(--rp);padding:11px 22px;font-size:14.5px;font-weight:600;text-decoration:none;
  white-space:nowrap;transition:background-color var(--t) ease,transform var(--t) ease}
.pb-btn:hover{background:#E08E00;transform:translateY(-1px)}
.pb-btn svg{width:15px;height:15px}
.pb-navcta{display:none;flex:0 0 auto}

.pb-burger{display:inline-flex;margin-left:auto;background:none;border:1px solid #7FA0C2;
  border-radius:var(--r1);color:#fff;width:42px;height:42px;
  align-items:center;justify-content:center;cursor:pointer}
.pb-burger svg{width:20px;height:20px;fill:none;stroke:currentColor}
.pb-burger:hover{background:rgba(255,255,255,.1)}

.pb-top-spacer{height:calc(var(--bar) + var(--util) + 12px)}

@media (min-width:1000px){
  .pb-nav{display:flex}
  .pb-navcta{display:inline-flex}
  .pb-burger{display:none}
  .pb-drawer,.pb-scrim{display:none !important}
}
@media (max-width:640px){
  /* Keep the utility strip to ONE row on small screens. If it wraps, the fixed
     header grows past the spacer and the hero slides underneath it. Tighter
     padding and gaps so the row actually fits 375px (it overflowed by 9px). */
  .pb-util .tl{display:none}
  .pb-util .rg{margin-left:0;width:100%;justify-content:flex-start;gap:12px}
  .pb-util .pb-wrap{flex-wrap:nowrap;padding-left:16px;padding-right:16px}
  .pb-util .pb-region{padding:3px 9px;font-size:10.5px}
  /* one-row utility renders 38px (not desktop's 50), so the spacer must match
     or a 12px white seam shows between the header and the page */
  .pb-top-spacer{height:calc(var(--bar) + 38px)}
}

/* -------------------------------------------------------- mobile drawer ---- */
.pb-scrim{position:fixed;inset:0;background:rgba(1,36,70,.55);z-index:70;
  display:none;opacity:0;transition:opacity var(--t) ease}
body:has([data-hl-mobile-nav]:not([hidden])) .pb-scrim{display:block;opacity:1}
body:has([data-hl-mobile-nav]:not([hidden])){overflow:hidden}

.pb-drawer{position:fixed;top:0;right:0;bottom:0;width:min(320px,86vw);
  background:var(--s0);z-index:80;box-sizing:border-box;display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform var(--t) var(--ease);
  box-shadow:-8px 0 28px rgba(1,36,70,.18);overflow-y:auto}
.pb-drawer:not([hidden]){transform:translateX(0)}
.pb-drawer-top{background:var(--navy-800);color:#fff;padding:0 16px;height:var(--bar);
  display:flex;align-items:center;justify-content:space-between;flex:0 0 auto}
.pb-drawer-brand{font-weight:700;font-size:18px}
.pb-drawer-x{background:none;border:1px solid rgba(255,255,255,.45);border-radius:var(--r1);
  color:#fff;width:34px;height:34px;display:grid;place-items:center;cursor:pointer}
.pb-drawer-x:hover{background:rgba(255,255,255,.12)}
.pb-drawer-nav{display:flex;flex-direction:column;padding:4px 0}
.pb-drawer-link{display:block;padding:13px 18px;text-decoration:none;color:var(--ink);
  font-size:15px;border-bottom:1px solid var(--s3)}
.pb-drawer-link:hover{background:var(--s1)}
.pb-drawer-link.is-current{font-weight:700;color:var(--navy-800);box-shadow:inset 3px 0 0 var(--amber)}
.pb-drawer-foot{margin-top:auto;padding:18px}
.pb-drawer-cta{width:100%;justify-content:center}

/* ---------------------------------------------------------------- footer -- */
.pb-foot{background:var(--navy-800);color:var(--on-blue-2);
  border-top:6px solid var(--amber);padding:52px 0 0}
.pb-foot-grid{display:grid;grid-template-columns:1.45fr 1fr 1fr 1.1fr;gap:36px;align-items:start}
.pb-fbrand{display:flex;align-items:center;gap:12px;margin:0}
.pb-fbrand b{color:#fff;font-size:20px;font-weight:700}
.pb-foot .disc{font-size:12.5px;line-height:1.65;color:var(--on-blue-2);margin-top:16px}
.pb-foot .disc b{color:#fff;font-weight:600}
.pb-foot-h{color:#fff;font-size:13px;font-weight:600;margin:0 0 13px}
.pb-foot-list{list-style:none;margin:0;padding:0}
.pb-foot-list li{margin-bottom:9px}
.pb-foot-link,.pb-foot-list a{color:var(--on-blue-2);text-decoration:none;font-size:14px;
  transition:color var(--t) ease}
.pb-foot-link:hover,.pb-foot-list a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* QR — the site's single source for the code. Fixed box, never fluid. */
.pb-qr-group{display:flex;gap:14px;flex-wrap:wrap;margin:16px 0 14px;padding:0;list-style:none}
.pb-qr-group figure,.pb-qr-group>div{margin:0}
.pb-qr-img{width:150px;height:150px;max-width:200px;max-height:200px;object-fit:contain;
  background:#fff;border-radius:var(--r2);padding:7px;display:block}
.pb-qr-group figcaption{font-family:var(--mono);font-size:10.5px;color:var(--on-navy-3);
  margin-top:7px;max-width:150px;line-height:1.45}

.pb-foot-bot{margin-top:38px;background:var(--navy-900)}
.pb-foot-bot .pb-wrap{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;
  padding-top:15px;padding-bottom:15px;font-size:12.5px;color:var(--on-navy-2)}
.pb-foot-bot a{color:var(--on-blue-2);text-decoration:none}
.pb-foot-bot a:hover{color:#fff;text-decoration:underline}
.pb-foot-bot .r{margin-left:auto;display:flex;gap:20px;flex-wrap:wrap}
.pb-sep{margin:0 6px;opacity:.6}

@media (max-width:900px){ .pb-foot-grid{grid-template-columns:1fr 1fr;gap:28px} }
@media (max-width:640px){
  /* two-up on phones: brand and contact span the row, the two menus sit side by side */
  .pb-foot-grid{grid-template-columns:1fr 1fr;gap:26px 18px}
  .pb-foot-brand{grid-column:1 / -1}
  .pb-foot-contact{grid-column:1 / -1}
  .pb-foot-bot .r{margin-left:0}
}

/* ------------------------------------------- baseline furniture restyle ---- */
/* Archive list — thumbnail cards. The posts carry real featured images, so the
   card leads with one (fixed 210x134, cover-cropped). High-specificity selectors
   because the baseline template ships its own grid on these hooks. */
ul.hl-news-list{list-style:none;margin:0;padding:0;display:grid;gap:16px}
ul.hl-news-list>li{position:relative;display:grid;
  grid-template-columns:210px minmax(0,1fr);grid-template-rows:auto auto 1fr;
  column-gap:22px;row-gap:0;background:#fff;border:1px solid var(--s3);
  border-radius:var(--r3);padding:18px;overflow:hidden;
  transition:border-color var(--t) ease,box-shadow var(--t) ease,transform var(--t) ease}
ul.hl-news-list>li::before{content:none}
ul.hl-news-list>li:hover{border-color:var(--navy-700);
  box-shadow:0 8px 22px rgba(1,36,70,.10);transform:translateY(-2px)}
ul.hl-news-list .hl-news-cover{display:block;grid-column:1;grid-row:1 / span 3;
  margin:0;align-self:start}
ul.hl-news-list .hl-news-cover img{width:210px;height:134px;object-fit:cover;
  border-radius:var(--r2) !important;display:block}
ul.hl-news-list .hl-news-date{grid-column:2;grid-row:1;padding:2px 0 0;
  font-family:var(--mono);font-size:12px;color:var(--muted);
  display:flex;align-items:center;gap:8px}
ul.hl-news-list .hl-news-date::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--amber);display:block;flex:0 0 auto}
ul.hl-news-list .hl-news-title{grid-column:2;grid-row:2;font-size:19px;font-weight:600;
  line-height:1.38;margin:7px 0 0;padding:0}
ul.hl-news-list .hl-news-title a{color:var(--ink);text-decoration:none}
ul.hl-news-list>li:hover .hl-news-title a{color:var(--blue-ink)}
ul.hl-news-list .hl-news-excerpt{grid-column:2;grid-row:3;margin:7px 0 0;padding:0}
ul.hl-news-list .hl-news-excerpt p{margin:0;font-size:14.5px;color:var(--body);line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* a post without a thumbnail collapses to a single clean column */
ul.hl-news-list>li:not(:has(.hl-news-cover)){grid-template-columns:minmax(0,1fr)}
ul.hl-news-list>li:not(:has(.hl-news-cover))>*{grid-column:1}
@media (max-width:680px){
  ul.hl-news-list>li{grid-template-columns:minmax(0,1fr);row-gap:0}
  ul.hl-news-list .hl-news-cover{grid-column:1;grid-row:1;margin:0 0 12px}
  ul.hl-news-list .hl-news-cover img{width:100%;height:170px}
  ul.hl-news-list .hl-news-date{grid-column:1;grid-row:2}
  ul.hl-news-list .hl-news-title{grid-column:1;grid-row:3}
  ul.hl-news-list .hl-news-excerpt{grid-column:1;grid-row:4}
}

/* archive page title — "Category: News" as a band head, not a bare h1 */
.wp-block-query-title{font-size:clamp(26px,3.2vw,33px);font-weight:600;color:var(--ink);
  letter-spacing:-.4px;margin:34px 0 26px;padding-bottom:16px;position:relative}
.wp-block-query-title::after{content:"";position:absolute;left:0;bottom:0;width:44px;height:3px;
  background:var(--amber);border-radius:2px}
.wp-block-query-title span,.wp-block-query-title .archive-type{font-family:var(--mono);
  font-size:12px;color:var(--muted)}

/* pagination — buttons, not bare numerals */
.hl-pagination{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:8px;margin-top:30px}
.hl-pagination .wp-block-query-pagination-numbers{display:flex;gap:8px;align-items:center}
.hl-pagination .page-numbers{min-width:40px;height:40px;display:inline-flex;align-items:center;
  justify-content:center;padding:0 13px;border:1px solid var(--s3);border-radius:var(--r1);
  background:#fff;color:var(--blue-ink);font-family:var(--mono);font-size:14px;
  text-decoration:none;transition:border-color var(--t-fast) ease,background-color var(--t-fast) ease}
.hl-pagination a.page-numbers:hover{border-color:var(--navy-700);background:var(--blue-pale)}
.hl-pagination .page-numbers.current{background:var(--navy-800);border-color:var(--navy-800);color:#fff}
.hl-pagination .page-numbers.dots{border:0;background:none;color:var(--muted);min-width:auto;padding:0 2px}
.hl-pagination .wp-block-query-pagination-next,
.hl-pagination .wp-block-query-pagination-previous{display:inline-flex;align-items:center;
  height:40px;padding:0 18px;border:1px solid var(--s3);border-radius:var(--rp);
  background:#fff;color:var(--ink);font-size:14px;font-weight:600;text-decoration:none;
  transition:border-color var(--t-fast) ease,background-color var(--t-fast) ease}
.hl-pagination .wp-block-query-pagination-next:hover,
.hl-pagination .wp-block-query-pagination-previous:hover{border-color:var(--navy-700);background:var(--blue-pale)}

/* the template wrapper's own top padding would stack a 44px white gap above the
   band; zero it here and let the band carry its own spacing. clip guards the
   1-in-few-px rounding the 50vw full-bleed can leave on small screens. */
/* the 44px comes from the block template itself (inline layout padding), so
   only !important reaches it. The stray horizontal pixels a 50vw full-bleed
   can produce are clipped at body level, NOT here - clipping the container
   would cut the band back to container width. */
body{overflow-x:clip}
.hl-article-main{padding-top:0 !important}

/* Article head — a tinted full-bleed band in the Field Guide language, not
   copy floating in white. Negative top margin swallows the template wrapper's
   44px padding; the full-bleed trick stretches the tint edge to edge while the
   text stays on the container grid. */
.hl-article-head{
  max-width:none;text-align:center;
  width:100vw;
  margin:0 0 0 calc(50% - 50vw);
  padding:30px calc(50vw - 50%) 26px;
  background-color:var(--s1);
  background-image:repeating-linear-gradient(135deg,rgba(1,36,70,.04) 0 1px,transparent 1px 16px);
  border-bottom:1px solid var(--s3)}
.hl-article-head .hl-breadcrumb,.hl-article-head .hl-breadcrumbs{
  justify-content:center;display:flex;flex-wrap:wrap;gap:6px;
  font-family:var(--mono);font-size:11.5px;color:var(--navy-700);margin:0 0 14px}
.hl-breadcrumb a,.hl-breadcrumbs a{color:var(--navy-700);text-decoration:none}
.hl-breadcrumb a:hover,.hl-breadcrumbs a:hover{text-decoration:underline}
.hl-breadcrumb .sep{color:var(--muted)}
.hl-article-head .wp-block-post-title,.hl-article-head h1{
  font-size:clamp(26px,3.4vw,36px);line-height:1.28;font-weight:600;letter-spacing:-.4px;
  color:var(--ink);border-left:0;padding-left:0;max-width:30ch;margin:0 auto 14px}
.hl-article-head .wp-block-post-date,.hl-post-meta{
  font-family:var(--mono);font-size:11.5px;color:var(--muted);letter-spacing:.02em;
  display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap}
.hl-article-head::after{content:"";display:block;width:44px;height:3px;background:var(--amber);
  border-radius:2px;margin:18px auto 0}
.hl-article-kicker{font-family:var(--mono);font-size:11.5px;color:var(--navy-700);margin-bottom:10px}
@media (max-width:640px){
  .hl-article-head{padding-top:22px;padding-bottom:20px}
  .hl-article-head .wp-block-post-title,.hl-article-head h1{font-size:23px}
}

/* legacy empty headings must not leave gaps in the article either */
.hl-prose h2:empty,.hl-prose h3:empty{display:none}

/* article media: centre everything. WP's aligncenter class shipped without the
   auto margins that make it mean anything. */
.hl-prose img{max-width:100%;height:auto}
.hl-prose .aligncenter,.hl-prose img.aligncenter{
  display:block;margin-left:auto !important;margin-right:auto !important;float:none}
.hl-prose figure{margin-left:auto;margin-right:auto}
.hl-prose figure.aligncenter img{margin-left:auto;margin-right:auto}
.hl-prose p:has(> img),.hl-prose p:has(> a > img){text-align:center}
.hl-prose p:has(> img) img,.hl-prose p:has(> a > img) img{display:inline-block;vertical-align:top}
.hl-prose .wp-block-gallery{justify-content:center}
.hl-prose .wp-block-image{margin-left:auto;margin-right:auto}
.hl-prose iframe,.hl-prose video{display:block;margin-left:auto;margin-right:auto;max-width:100%}

/* tags, prev/next, related, article CTA */
.hl-post-tags a{display:inline-block;font-family:var(--mono);font-size:11.5px;
  background:var(--blue-pale);color:var(--blue-deep);border:1px solid var(--blue-pale-2);
  padding:3px 11px;border-radius:var(--rp);text-decoration:none;margin:0 6px 6px 0;
  transition:border-color var(--t-fast) ease,background-color var(--t-fast) ease}
.hl-post-tags a:hover{border-color:var(--navy-700)}
.hl-post-nav{border-top:1px solid var(--s3);margin-top:34px;padding-top:18px}
.hl-post-nav a{color:var(--blue-ink);text-decoration:none;font-size:14.5px}
.hl-post-nav a:hover{text-decoration:underline}
.hl-related{border-top:1px solid var(--s3);margin-top:30px;padding-top:18px}
.hl-related-title{font-family:var(--mono);font-size:11.5px;color:var(--muted);letter-spacing:.05em}

.hl-article-cta{background:var(--s1);border:1px solid var(--s3);border-left:4px solid var(--amber);
  border-radius:0 var(--r3) var(--r3) 0;padding:24px 26px;margin:34px 0}
.hl-cta-online-btn,.hl-article-cta a.hl-cta-online-btn{
  display:inline-flex;align-items:center;gap:8px;background:var(--amber);color:#212529;
  text-decoration:none;font-weight:600;font-size:14.5px;padding:11px 22px;border-radius:var(--rp);
  transition:background-color var(--t) ease,transform var(--t) ease}
.hl-cta-online-btn:hover{background:#E08E00;transform:translateY(-1px)}
.hl-article-cta .pb-qr-img,.hl-cta-qr-panel img{
  width:150px;height:150px;max-width:200px;max-height:200px;object-fit:contain}

/* 🔴 The baseline CTA block ships white text because it is designed for a dark
   card. Field Guide's card is light, so every one of those colours has to be
   restated or the block renders white-on-grey (measured 1.07:1). */
.hl-article-cta{color:var(--body)}
.hl-article-cta .hl-article-cta-title,
.hl-article-cta h2,.hl-article-cta h3{color:var(--ink)}
.hl-article-cta .hl-article-cta-sub,
.hl-article-cta p,.hl-article-cta li,.hl-article-cta span:not(.hl-cta-online-btn){color:var(--body)}
.hl-article-cta .hl-article-cta-note{color:var(--muted)}

/* Amber button: baseline colours the link blue, which is 3.38:1 on amber.
   Near-black on amber measures 7.9:1. */
.hl-article-cta a.hl-cta-online-btn,
a.hl-cta-online-btn,.hl-cta-online-btn{color:#212529}

/* Baseline's meta grey is rgb(117,119,124) = 4.48:1 on white — just under AA. */
.hl-post-meta,.hl-post-meta *,
.hl-post-readtime,.hl-post-meta-sep,.hl-article-head time,article time{color:var(--muted)}

/* The sub inherits white from the CTA body, and baseline scopes several of these
   under .hl-prose (0-2-0), so match or beat that specificity rather than relying
   on source order. */
body .hl-article-cta,body .hl-article-cta-body,
.hl-prose .hl-article-cta,.hl-prose .hl-article-cta-body{color:var(--body)}
body .hl-article-cta .hl-article-cta-sub,
.hl-prose .hl-article-cta-sub{color:var(--body);opacity:1}
body .hl-article-cta .hl-article-cta-title,
.hl-prose .hl-article-cta-title{color:var(--ink)}

/* Related list uses var(--wp--preset--color--muted) which resolves to #75777C
   (4.48:1 on white). Restate the classes rather than fight the variable. */
body .hl-related-head,body .hl-related-date,
body .hl-related-title,body .hl-related-x{color:var(--muted)}
body .hl-related-title{color:var(--ink)}

/* Same guard for a CTA on the dark footer ground. */
.pb-foot .hl-article-cta,.pb-foot .hl-cta{background:#fff}

.hl-back-to-top{background:var(--navy-800);color:#fff;border-radius:var(--r1)}
.hl-back-to-top:hover{background:var(--navy-700)}

:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.pb-top :focus-visible,.pb-foot :focus-visible{outline:2px solid #fff;outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* ------------------------------------------------------------------------
   restored prose block (an earlier slice-edit dropped it; baseline defaults
   were silently covering). Field Guide voice for article bodies.
   ------------------------------------------------------------------------ */
.hl-prose{max-width:var(--measure);margin-left:auto;margin-right:auto;
  font-size:16.5px;line-height:1.72;color:var(--body)}
.hl-prose h2{font-size:25px;line-height:1.3;color:var(--ink);margin:2em 0 .5em;font-weight:600}
.hl-prose h2::after{content:"";display:block;width:44px;height:3px;background:var(--amber);
  border-radius:2px;margin-top:12px}
.hl-prose h3{font-size:19px;line-height:1.35;color:var(--ink);margin:1.7em 0 .5em;font-weight:600}
.hl-prose a{color:var(--blue-ink)}
.hl-prose blockquote{margin:1.6em 0;padding:16px 20px;border-left:4px solid var(--amber);
  background:var(--amber-pale);border-radius:0 var(--r2) var(--r2) 0;color:var(--ink)}
.hl-prose code{font-family:var(--mono);font-size:.88em;background:var(--s1);
  padding:1px 5px;border-radius:3px}
.hl-prose table{width:100%;border-collapse:collapse;font-size:14.5px;
  font-variant-numeric:tabular-nums}
.hl-prose th{background:var(--navy-800);color:#fff;text-align:left;font-weight:600;
  padding:11px 14px;font-size:13px}
.hl-prose td{padding:11px 14px;border-bottom:1px solid var(--s3);vertical-align:top}
.hl-prose tbody tr:hover{background:var(--s1)}
/* legacy posts carry raw content tables wider than a phone; scroll them in place
   rather than letting them widen the page (constants table measured 384 and a
   comparison table 537 on a 375 viewport) */
@media (max-width:700px){
  .hl-prose table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
}

/* toc-head AA pin: baseline paints it rgb(117,119,124) = 4.48:1, a hair under AA */
.hl-toc-head{color:var(--muted) !important}

/* drawer shadow only when open: parked at translateX(100%) the drawer still cast
   its -8px left shadow back into the viewport as a grey strip down the right edge */
.pb-drawer{box-shadow:none}
.pb-drawer:not([hidden]){box-shadow:-8px 0 28px rgba(1,36,70,.18)}

/* admin-bar TOC offset: logged in, WP's 32px bar pushes the fixed header down
   (baseline offset) but the TOC's fixed top did not follow - it sat 8px under
   the nav. Give both states the same 52px clearance. */
#hl-toc-float{top:180px}
body.admin-bar #hl-toc-float{top:212px}
@media (max-width:782px){ body.admin-bar #hl-toc-float{top:226px} }

/* ------------------------------------------------------------------------
   restored TOC card block (eaten by the same slice-edit that ate the prose
   block; only the top-offset appendages had survived, so the TOC rendered as
   a bare transparent list stuck at the baseline position).
   ------------------------------------------------------------------------ */
#hl-toc-float{box-sizing:border-box;width:200px;
  left:max(16px,calc((100vw - 1204px)/2));
  background:#fff;border:1px solid var(--s3);border-radius:var(--r3);
  padding:16px 16px 12px;box-shadow:0 8px 24px rgba(1,36,70,.08);
  max-height:calc(100vh - 260px);overflow:auto}
#hl-toc-float .hl-toc-head{font-family:var(--mono);font-size:10.5px;
  letter-spacing:.08em;margin:0 0 10px}
#hl-toc-float .hl-toc-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
#hl-toc-float .hl-toc-item{border-left:2px solid var(--s3);padding:5px 0 5px 10px;
  transition:border-color var(--t-fast) ease}
#hl-toc-float .hl-toc-item>a{color:var(--muted);text-decoration:none;
  font-size:12.5px;line-height:1.45;display:block}
#hl-toc-float .hl-toc-item>a:hover{color:var(--ink)}
#hl-toc-float .hl-toc-item.hl-toc-h3{margin-left:10px}
#hl-toc-float .hl-toc-item.is-active{border-left-color:var(--amber)}
#hl-toc-float .hl-toc-item.is-active>a{color:var(--ink);font-weight:600}
@media (max-width:1339px){#hl-toc-float{display:none !important}}