/*
Theme Name:   TJC Child
Theme URI:    https://jeffersoncouncil.org
Description:  Child theme for The Jefferson Council. Front page, article,
              archive, and section templates, plus the shared design tokens
              used across TJC and Sunlight UVA.
Author:       The Jefferson Council
Template:     Divi
Version:      2.1.0
Text Domain:  tjc-child
*/

/* ═══════════════════════════════════════════════════════════════════
   Fonts are enqueued from functions.php, not imported here.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --navy:#1F275C; --navy-deep:#141B42; --navy-soft:#2A3470;
  --peri:#5D7DBB; --peri-band:#4A6BA8; --peri-soft:#8AA3D4;
  --orange:#F48320; --orange-text:#A3540A; --orange-hi:#F7943C;
  --pale:#F4F6FC; --cream:#F8F6F0;
  --ink:#1A1D26; --muted:#565E70; --faint:#8A90A0;
  --rule:rgba(31,39,92,.14);
  /* Newsreader: a serif drawn for news on screen. Variable, with an
     optical-size axis, so headline cuts get tighter spacing and finer
     joins while smaller settings stay open. Replaced Playfair Display,
     whose thick/thin contrast read elegant but thin for this work. */
  --serif:'Newsreader',Georgia,serif;
  --sans:'Source Sans 3',system-ui,-apple-system,sans-serif;
  --w:1180px;
}
*{box-sizing:border-box}
body{margin:0;background:#fff;color:var(--ink);font-family:var(--sans);font-size:20px;
     line-height:1.65;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--w);margin:0 auto;padding:0 30px}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.18;margin:0;color:var(--navy);
         font-optical-sizing:auto}
a{color:inherit;text-decoration:none}
.mark{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.18em;
      text-transform:uppercase;color:var(--orange-text)}

/* ── strip: organizational pages ─────────────────────────────── */
.strip{background:var(--navy-deep);color:rgba(255,255,255,.72);font-size:14px}
.strip .wrap{display:flex;justify-content:space-between;gap:20px;padding:9px 30px;flex-wrap:wrap}
.strip nav{display:flex;gap:20px}
.strip a:hover{color:var(--orange)}
.strip__nav a:hover{color:#fff}

/* ── masthead ────────────────────────────────────────────────── */
.mast{background:var(--navy)}
.mast .wrap{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:18px 30px}
.logo{font-family:var(--serif);font-size:24px;font-weight:700;color:#fff}
.nav{display:flex;gap:25px;align-items:center;font-size:16px;font-weight:600;
     color:rgba(255,255,255,.88);flex-wrap:wrap}
.nav a:hover{color:var(--orange)}
.give{background:var(--orange);color:var(--navy-deep);font-weight:700;font-size:13px;
      letter-spacing:.08em;text-transform:uppercase;padding:10px 18px;border-radius:3px}
.give:hover{background:var(--orange-hi)}

/* ── hero ────────────────────────────────────────────────────── */
.hero{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.hero__img{position:absolute;top:0;right:0;bottom:0;width:56%;
  background:
   linear-gradient(100deg,var(--navy) 0%,rgba(31,39,92,.94) 30%,rgba(31,39,92,.30) 100%),
   repeating-linear-gradient(0deg,var(--navy-soft) 0 3px,#33407D 3px 6px);
  display:flex;align-items:flex-end;justify-content:flex-end;padding:26px 34px;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.25)}
.hero .wrap{position:relative;z-index:2;padding:78px 30px 74px}
.hero__in{max-width:600px}
.hero .mark{color:var(--orange);display:block;margin-bottom:20px}
.hero h1{font-size:54px;line-height:1.13;color:#fff;font-weight:600;margin-bottom:20px}
.hero p{font-size:21px;line-height:1.55;color:rgba(255,255,255,.82);margin:0 0 32px;max-width:44ch}
.cta{display:flex;gap:14px;flex-wrap:wrap}
.cta a{font-size:15px;font-weight:700;padding:14px 26px;border-radius:3px}
/* Periwinkle fill, not orange. The BREAKING band sits directly below the
   hero, and two orange fills that close together read as one repeated
   element rather than two calls to action.

   Uses --peri-band (#4A6BA8), not --peri (#5D7DBB): white on #5D7DBB is
   4.11:1 and fails AA at button-text size. #4A6BA8 is 5.31:1 and reads as
   the same blue. This is the blue already used for links and the
   subscribe band, so the hero now points at the same family. */
.cta .solid{background:var(--peri-band);color:#fff}
.cta .solid:hover{background:var(--peri);color:#fff}
.cta .ghost{border:1.5px solid rgba(255,255,255,.45);color:#fff}
.cta .ghost:hover{border-color:var(--orange);color:var(--orange)}

/* ── breaking ────────────────────────────────────────────────────
   Full orange band. The urgency is the point — a cream bar reads as a
   notice, not as news.

   Text is navy, not white. White on #F48320 is 2.59:1, which fails WCAG
   AA even at the large-text threshold. There is no version of the bright
   brand orange that carries white text legibly; going dark enough would
   turn it brown. Navy on orange is 5.36:1 and, at this size, reads with
   more authority anyway.

   The hairline rules top and bottom stop the orange butting straight
   into the navy above and below, which is what made the seams vibrate. */
.breaking{display:block;background:var(--orange);
          border-top:2px solid rgba(255,255,255,.55);
          border-bottom:2px solid rgba(255,255,255,.55)}
.breaking .wrap{display:flex;align-items:center;gap:22px;padding:17px 30px;flex-wrap:wrap}
.breaking .pill{background:var(--navy);color:#fff;font-size:12.5px;font-weight:700;
                letter-spacing:.14em;text-transform:uppercase;padding:9px 17px;border-radius:3px;
                white-space:nowrap}
.breaking .txt{font-family:var(--sans);font-size:20px;font-weight:600;line-height:1.35;
               color:var(--navy);flex:1;min-width:240px}
.breaking:hover .txt{color:var(--navy-deep)}

/* ── counters ────────────────────────────────────────────────── */
.count{background:var(--navy-deep)}
.count .wrap{display:grid;grid-template-columns:repeat(4,1fr);padding:0 30px}
/* .cell, not div. `.count div` matched the .n and .l divs nested inside each
   cell as well as the cell itself, so every figure and label carried 26px/18px
   of stray padding and every label carried a phantom left hairline. It also
   missed linked cells entirely, since those are <a>, not <div> — so once the
   counters got URLs the cells lost their padding and rules altogether. */
.count .cell{display:block;padding:26px 18px;text-align:center;
             border-left:1px solid rgba(255,255,255,.13)}
.count .cell:first-child{border-left:none}
.count a.cell{transition:background .15s ease}
.count a.cell:hover{background:rgba(255,255,255,.05)}
.count a.cell:hover .n{color:#fff}
.count a.cell:hover .l{color:rgba(255,255,255,.85)}
.count .n{font-family:var(--serif);font-size:42px;font-weight:600;line-height:1;
          color:var(--peri-soft);font-variant-numeric:tabular-nums}
.count .l{font-size:13.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
          color:rgba(255,255,255,.6);margin-top:11px}

/* ── sections ────────────────────────────────────────────────── */
.sect{padding:66px 0}
.sect--pale{background:var(--pale)}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
      margin-bottom:34px;flex-wrap:wrap;border-bottom:2px solid var(--navy);padding-bottom:14px}
.head h2{font-size:36px}
.head .sub{font-size:17px;color:var(--muted);margin:7px 0 0}
.head a{font-size:16px;font-weight:600;color:var(--peri-band)}
.head a:hover{color:var(--navy)}

/* ── cards ───────────────────────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:stretch}
.card{background:#fff;border:1px solid var(--rule);border-top:4px solid var(--peri);
      display:flex;flex-direction:column;overflow:hidden;text-decoration:none;color:inherit;
      transition:border-color .15s ease}
.card *{text-decoration:none}
.card:hover{border-color:var(--peri)}
.card__fig{aspect-ratio:16/9;background:var(--pale);border-bottom:1px solid var(--rule);
           display:flex;align-items:center;justify-content:center;font-size:11.5px;
           letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.card__fig img{width:100%;height:100%;object-fit:cover;display:block}
.card__body{padding:22px;display:flex;flex-direction:column;flex:1}
.card__cat{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
           color:var(--orange-text);margin-bottom:10px}
.card__title{font-family:var(--serif);font-size:24px;font-weight:600;line-height:1.3;
             color:var(--navy);margin:0 0 11px}
.card:hover .card__title{color:var(--peri-band)}
.card__ex{font-size:17.5px;line-height:1.55;color:var(--muted);margin:0 0 18px;flex:1}
.card__date{font-size:15px;font-weight:600;color:var(--faint)}

/* ── list ────────────────────────────────────────────────────── */
.list{margin-top:38px;border-top:2px solid var(--navy)}
.item{display:block;padding:20px 0;border-bottom:1px solid var(--rule);
      text-decoration:none;color:inherit}
.item *{text-decoration:none}
.item__main{min-width:0}
.item__cat{display:block;font-size:12.5px;font-weight:700;letter-spacing:.12em;
           text-transform:uppercase;color:var(--navy);margin-bottom:6px}
.item__title{font-family:var(--sans);font-size:23px;font-weight:700;line-height:1.3;
             color:var(--ink);margin:0 0 7px}
.item:hover .item__title{color:var(--peri-band)}
.item__ex{font-size:18px;line-height:1.5;color:var(--muted);margin:0}

/* ── issues ──────────────────────────────────────────────────── */
.issues{display:grid;grid-template-columns:repeat(5,1fr)}
.issue{padding:22px 18px;text-align:center;border-left:3px solid var(--orange)}
.issue h3{font-size:23px;margin-bottom:6px;line-height:1.25}
.issue:hover h3{color:var(--peri-band)}
.issue span{font-size:14px;color:var(--faint);font-weight:600;letter-spacing:.05em}

/* ── join ────────────────────────────────────────────────────── */
.join{background:var(--navy);color:#fff;padding:66px 0}
.join h2{color:#fff;font-size:36px;margin-bottom:32px}
.acts{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.act{border:1px solid rgba(255,255,255,.28);padding:22px;display:flex;gap:15px;
     align-items:flex-start;text-decoration:none;color:inherit}
.act:hover{border-color:var(--orange)}
.act .ic{font-size:24px;color:var(--orange);line-height:1.1;flex:0 0 auto}
.act h4{font-family:var(--sans);font-size:18px;font-weight:700;color:#fff;margin:0 0 4px}
.act p{margin:0;font-size:15.5px;color:rgba(255,255,255,.7);line-height:1.45}

/* ── beats ───────────────────────────────────────────────────── */
.beats{display:flex;flex-wrap:wrap;gap:10px}
.beat{background:#fff;border:1px solid var(--rule);font-size:16px;font-weight:600;
      padding:9px 17px;border-radius:22px;color:var(--navy)}
.beat b{color:var(--faint)}
.beat:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.beat:hover b{color:rgba(255,255,255,.6)}

/* ── sunlight ────────────────────────────────────────────────── */
.band{background:var(--navy-deep);color:#fff;padding:54px 0;border-top:4px solid var(--orange)}
.band .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:46px;align-items:center}
.band .mark{color:var(--orange);display:inline-flex;align-items:center;gap:9px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--orange)}
.band h3{font-size:30px;color:#fff;margin:14px 0 12px;max-width:25ch}
.band p{margin:0;font-size:17px;line-height:1.6;color:rgba(255,255,255,.75);max-width:52ch}
.ledger{background:var(--navy);border:1px solid var(--orange);padding:26px 30px;min-width:236px;
        text-align:center}
.ledger .n{font-family:var(--serif);font-size:52px;font-weight:600;line-height:1;color:#fff;
           font-variant-numeric:tabular-nums}
.ledger .l{font-size:14px;color:rgba(255,255,255,.72);margin-top:10px;line-height:1.4}
.ledger .go{font-size:12.5px;font-weight:700;color:var(--orange);margin-top:18px;display:block;
            letter-spacing:.09em;text-transform:uppercase}

/* ── subscribe ───────────────────────────────────────────────── */
.subs{background:var(--peri-band);color:#fff;padding:40px 0}
.subs .wrap{display:flex;align-items:center;justify-content:space-between;gap:36px;flex-wrap:wrap}
.subs h3{font-family:var(--sans);font-size:21px;font-weight:700;color:#fff;margin:0 0 5px}
.subs p{margin:0;font-size:17px;color:rgba(255,255,255,.92)}
.btn{background:var(--orange);color:var(--navy-deep);font-size:14px;font-weight:700;
     letter-spacing:.09em;text-transform:uppercase;padding:16px 30px;border-radius:3px;
     white-space:nowrap}
.btn:hover{background:var(--orange-hi)}

/* ── footer ──────────────────────────────────────────────────── */
footer{background:var(--navy);color:rgba(255,255,255,.76);padding:54px 0 40px;font-size:16px}
footer .wrap{display:flex;gap:58px;flex-wrap:wrap}
footer .brand{font-family:var(--serif);font-size:21px;font-weight:700;color:#fff;margin-bottom:16px}
footer b{display:block;color:var(--orange);font-size:12.5px;letter-spacing:.15em;
         text-transform:uppercase;margin-bottom:12px;font-weight:700}
footer a{display:block;padding:3px 0}
footer a:hover{color:#fff}
.social{display:flex;gap:9px}
.social a{width:34px;height:34px;border:1px solid rgba(255,255,255,.3);display:flex;
          align-items:center;justify-content:center;font-size:13px;font-weight:700;padding:0}
.social a:hover{border-color:var(--orange);color:var(--orange)}
.legal{border-top:1px solid rgba(255,255,255,.16);margin-top:34px;padding-top:20px;
       font-size:13.5px;color:rgba(255,255,255,.5)}

@media(max-width:1000px){
  .cards,.acts{grid-template-columns:1fr 1fr}
  .issues{grid-template-columns:1fr 1fr}
  .issue{border-left:none;border-top:3px solid var(--orange);text-align:left}
  .hero__img{display:none}
  .hero h1{font-size:34px}
  .band .wrap{grid-template-columns:1fr;gap:28px}
  .count .wrap{grid-template-columns:1fr 1fr}
  .count .cell:nth-child(3){border-left:none}
}
@media(max-width:640px){
  .cards,.acts,.issues{grid-template-columns:1fr}
  .item{flex-direction:column;gap:5px}
    body{font-size:17px}
  .sect,.join{padding:44px 0}
}

/* ── Featured images off ────────────────────────────────────────────
   Set $tjc_show_featured_images = true in front-page.php when the
   library is consistent. Nothing else needs changing.               */
.cards--noimg .card__body{padding-top:24px}

/* ── Hero image ────────────────────────────────────────────────────
   Set via $tjc_hero_image in front-page.php. The gradient stays in
   front so white type holds up over any photograph.                */
.hero__img{background-size:cover;background-position:center left}

/* Ships with the theme. Override via $tjc_hero_image in front-page.php.
   The gradient runs opaque navy on the left (behind the headline) to
   nearly clear on the right, so the drawing emerges rather than sitting
   on top. Vertical fades at top and bottom keep it from ending on a
   hard edge against the masthead and the BREAKING band. */
.hero__img{
  background-image:
    linear-gradient(180deg,rgba(31,39,92,.70) 0%,rgba(31,39,92,.18) 22%,rgba(31,39,92,.18) 80%,rgba(31,39,92,.70) 100%),
    linear-gradient(95deg,var(--navy) 0%,rgba(31,39,92,.99) 26%,rgba(31,39,92,.82) 48%,rgba(31,39,92,.42) 78%,rgba(31,39,92,.30) 100%),
    url('images/rotunda-hero.jpg');
  background-size:auto, auto, cover;
  background-position:center, center, center 42%;
}


/* ═══════════════════════════════════════════════════════════════════
   ▓▓ PART TWO — SITE-WIDE CHROME AND INNER PAGES ▓▓

   Everything above this line is the homepage, unchanged. Everything
   below extends the same tokens to every other page on the site.
   ═══════════════════════════════════════════════════════════════════ */


/* ── Suppress Divi's chrome everywhere, not just the homepage ────────
   The child theme draws its own masthead, utility strip, and footer via
   template-parts/. Divi's header would stack a second navigation on top
   of ours on every page, which is what made the old build look like two
   sites glued together.

   get_header() is still called — it emits wp_head(), scripts, and any
   analytics — so this hides the markup rather than removing it.

   The !important on padding is required: Divi sets #page-container
   padding-top inline, so a normal rule loses.
   ═══════════════════════════════════════════════════════════════════ */
body.tjc #main-header,
body.tjc #top-header,
body.tjc #main-footer,
body.tjc .et_slide_in_menu_container{display:none}

body.tjc #page-container{padding-top:0 !important;margin-top:0 !important}
body.tjc.et_fixed_nav #page-container{padding-top:0 !important}

/* Divi constrains content width; our sections are full-bleed. */
body.tjc #et-main-area,
body.tjc #main-content,
body.tjc #main-content .container{width:100%;max-width:none;padding:0;margin:0}
body.tjc #main-content .container:before{display:none}

/* Keep the admin bar from sitting on top of the utility strip. */
body.admin-bar .strip{position:relative;z-index:1}


/* ── Accessibility floor ─────────────────────────────────────────── */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;background:var(--orange);color:var(--navy-deep);
      font-weight:700;padding:12px 20px;z-index:999}
.skip:focus{left:0}
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:3px solid var(--orange);outline-offset:2px}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}


/* ── Utility strip and masthead additions ────────────────────────── */
.strip__nav{display:flex;gap:20px;flex-wrap:wrap}
/* Orange, because these five are the things to act on — About, Research,
   Events, Take action, Contact. The tagline to their left stays muted
   white, so the strip reads as one sentence and five doors rather than
   six items of equal weight.

   #F48320 on #141B42 is 6.3:1, which passes AA at this size. Hover goes
   to white rather than a second orange: a brightness change is legible
   without introducing another hue into a 14px strip. */
.strip__nav a{white-space:nowrap;color:var(--orange);font-weight:600}
.strip__nav a:hover,
.strip__nav a:focus-visible{color:#fff}
.strip__tag{opacity:.9}

.nav__search{display:inline-flex;align-items:center;justify-content:center;
             width:34px;height:34px;border:1px solid rgba(255,255,255,.28);border-radius:3px;
             color:rgba(255,255,255,.85)}
.nav__search:hover{border-color:var(--orange);color:var(--orange)}

/* Current section marker in the primary nav. */
.nav .current-menu-item > a,
.nav .current-cat > a{box-shadow:inset 0 -3px 0 var(--orange)}

.burger{display:none;background:none;border:0;cursor:pointer;padding:10px;gap:5px;
        flex-direction:column;align-items:center}
.burger span{display:block;width:24px;height:2px;background:#fff}


/* ── Sister projects bar ──────────────────────────────────────────
   Sunlight UVA sits here, above the fold on every page, so the project
   reads as part of the Council rather than an unexplained outbound
   link. Reset UVA and DEI at UVA join it when you flip 'live' to true
   in tjc-config.php.                                                */
.sister{background:var(--cream);border-bottom:1px solid var(--rule);font-size:14.5px}
.sister .wrap{display:flex;align-items:center;gap:16px;padding:9px 30px;flex-wrap:wrap}
.sister__label{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
               color:var(--muted)}
.sister a{font-weight:700;color:var(--peri-band);
          border-bottom:2px solid transparent;padding-bottom:1px}
.sister a:hover{border-bottom-color:var(--orange);color:var(--navy)}


/* ── Page masthead ────────────────────────────────────────────────
   Inner pages get a navy band rather than the homepage's photographic
   hero. It carries the same weight without competing with it.        */
.phead{background:var(--navy);color:#fff;padding:52px 0 46px}
.phead .wrap{max-width:var(--w)}
.phead__eyebrow{display:block;font-size:12px;font-weight:700;letter-spacing:.18em;
                text-transform:uppercase;color:var(--orange);margin-bottom:14px}
.phead h1{color:#fff;font-size:46px;line-height:1.14;max-width:20ch}
.phead__lede{font-size:20px;line-height:1.55;color:rgba(255,255,255,.82);
             margin:18px 0 0;max-width:58ch}
.phead__lede a{color:#fff;border-bottom:1px solid rgba(255,255,255,.5)}
.phead__lede a:hover{border-bottom-color:var(--orange);color:var(--orange)}


/* ── Breadcrumb ───────────────────────────────────────────────────── */
.crumb{background:var(--navy-deep);font-size:13.5px;color:rgba(255,255,255,.6)}
.crumb .wrap{display:flex;gap:9px;padding:10px 30px;flex-wrap:wrap;align-items:center}
.crumb a{color:rgba(255,255,255,.78)}
.crumb a:hover{color:var(--orange)}
.crumb span[aria-hidden]{color:rgba(255,255,255,.3)}


/* ── Section rhythm ───────────────────────────────────────────────── */
.sect--tight{padding:44px 0}
.wrap--read{max-width:760px}


/* ── Long-form prose ──────────────────────────────────────────────
   Used by article bodies and by any page content authored in the
   WordPress editor. Measure is capped near 68 characters.           */
.prose{max-width:720px;margin-left:auto;margin-right:auto;
       font-size:20px;line-height:1.72;color:var(--ink)}
.prose--narrow{max-width:680px}
.prose > *:first-child{margin-top:0}
.prose p{margin:0 0 1.35em}
.prose h2{font-size:32px;margin:1.9em 0 .5em;line-height:1.22}
.prose h3{font-size:25px;margin:1.7em 0 .45em;line-height:1.28}
.prose h4{font-family:var(--sans);font-size:20px;font-weight:700;color:var(--navy);
          margin:1.6em 0 .4em}
.prose a{color:var(--peri-band);border-bottom:1px solid rgba(74,107,168,.4)}
.prose a:hover{color:var(--navy);border-bottom-color:var(--orange)}
.prose ul,.prose ol{margin:0 0 1.35em;padding-left:1.35em}
.prose li{margin-bottom:.5em}
.prose li::marker{color:var(--peri-band)}
.prose strong{font-weight:700;color:var(--navy)}
.prose img{max-width:100%;height:auto;display:block;margin:1.8em 0}
.prose figure{margin:1.8em 0}
.prose figcaption{font-size:15.5px;color:var(--faint);margin-top:9px;line-height:1.45}
.prose hr{border:0;border-top:1px solid var(--rule);margin:2.4em 0}

.prose blockquote{margin:1.9em 0;padding:4px 0 4px 26px;
                  border-left:3px solid var(--orange);
                  font-family:var(--serif);font-size:24px;line-height:1.45;
                  color:var(--navy)}
.prose blockquote p:last-child{margin-bottom:0}
.prose blockquote cite{display:block;font-family:var(--sans);font-size:16px;
                       font-style:normal;font-weight:600;color:var(--muted);margin-top:12px}

.prose table{width:100%;border-collapse:collapse;margin:1.9em 0;font-size:17px}
.prose th{background:var(--navy);color:#fff;text-align:left;padding:12px 14px;
          font-size:13px;letter-spacing:.09em;text-transform:uppercase;font-weight:700}
.prose td{padding:12px 14px;border-bottom:1px solid var(--rule);vertical-align:top}
.prose tbody tr:nth-child(even){background:var(--pale)}

.prose code{background:var(--pale);padding:2px 6px;font-size:.9em;border-radius:2px}


/* ── Article page ─────────────────────────────────────────────────── */
.article__head{padding:54px 0 26px}
.article__cat{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.13em;
              text-transform:uppercase;color:var(--orange-text);margin-bottom:16px}
.article__cat:hover{color:var(--navy)}
.article h1{font-size:46px;line-height:1.15;margin-bottom:0}
.article__stand{font-size:22px;line-height:1.5;color:var(--muted);margin:20px 0 0;
                max-width:60ch}
.article__meta{display:flex;gap:18px;flex-wrap:wrap;align-items:center;
               margin-top:26px;padding-top:18px;border-top:1px solid var(--rule);
               font-size:15.5px;color:var(--faint);font-weight:600}
.article__by{color:var(--navy)}

.article__lead{margin:0 0 40px}
.article__lead img{width:100%;height:auto;display:block}
.article__lead figcaption{font-size:15px;color:var(--faint);margin-top:10px}

.article__tags{display:flex;flex-wrap:wrap;gap:10px;margin:44px 0 0;
               padding-top:26px;border-top:1px solid var(--rule)}

.article__share{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
                margin:26px 0 0;font-size:15.5px}
.article__share span{font-weight:700;color:var(--faint);letter-spacing:.06em;
                     text-transform:uppercase;font-size:12.5px}
.article__share a{font-weight:600;color:var(--peri-band);
                  border-bottom:1px solid rgba(74,107,168,.35)}
.article__share a:hover{color:var(--navy);border-bottom-color:var(--orange)}

.article__tip{background:var(--cream);border-top:3px solid var(--orange);
              margin-top:52px;padding:30px 0}
.article__tip p{margin:0;font-size:18px;line-height:1.6;color:var(--navy)}
.article__tip a{color:var(--peri-band);border-bottom:1px solid rgba(74,107,168,.4);font-weight:700}
.article__tip a:hover{border-bottom-color:var(--orange)}


/* ── Archive lead story ───────────────────────────────────────────── */
.lead{display:grid;grid-template-columns:1fr;gap:0;border-top:4px solid var(--orange);
      background:#fff;border-bottom:1px solid var(--rule)}
.lead__fig img{width:100%;height:auto;display:block}
.lead__body{padding:28px 0 30px}
.lead__kicker{display:block;font-size:12px;font-weight:700;letter-spacing:.15em;
              text-transform:uppercase;color:var(--orange-text);margin-bottom:12px}
.lead h2{font-size:38px;line-height:1.2;margin-bottom:14px;max-width:22ch}
.lead:hover h2{color:var(--peri-band)}
.lead p{font-size:19.5px;line-height:1.55;color:var(--muted);margin:0 0 16px;max-width:62ch}
.lead time{font-size:15px;font-weight:600;color:var(--faint)}

.item__date{display:block;font-size:14.5px;font-weight:600;color:var(--faint);margin-top:9px}

/* Homepage "Explore by issue" now carries a line of description. */
.issue p{font-size:15.5px;line-height:1.45;color:var(--muted);margin:8px 0 10px}


/* ── Pagination ───────────────────────────────────────────────────── */
.pager,.pagination{margin-top:40px;display:flex;justify-content:center}
.pager .nav-links,.pagination .nav-links{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pager .page-numbers,.pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;
  padding:0 14px;border:1px solid var(--rule);font-weight:600;font-size:16px;color:var(--navy)}
.pager .page-numbers:hover,.pagination .page-numbers:hover{
  background:var(--navy);color:#fff;border-color:var(--navy)}
.pager .page-numbers.current,.pagination .page-numbers.current{
  background:var(--navy);color:#fff;border-color:var(--navy)}
.pager .dots:hover{background:none;color:var(--navy)}


/* ── Search bar and chip row ──────────────────────────────────────── */
.findbar{display:flex;gap:0;max-width:660px;margin:0 0 20px}
.findbar input{flex:1;min-width:0;font-family:var(--sans);font-size:17px;padding:14px 18px;
               border:2px solid var(--navy);border-right:0;background:#fff;color:var(--ink)}
.findbar input::placeholder{color:var(--faint)}
.findbar button{background:var(--navy);color:#fff;border:2px solid var(--navy);
                font-family:var(--sans);font-size:14px;font-weight:700;letter-spacing:.08em;
                text-transform:uppercase;padding:0 26px;cursor:pointer}
.findbar button:hover{background:var(--navy-deep);border-color:var(--navy-deep)}
.chiprow{display:flex;flex-wrap:wrap;gap:10px}


/* ── Empty state ──────────────────────────────────────────────────── */
.empty{background:var(--pale);border-left:3px solid var(--peri);padding:26px 28px;
       font-size:18px;line-height:1.6;color:var(--muted);max-width:640px}
.empty p{margin:0}
.empty a{color:var(--peri-band);font-weight:700;border-bottom:1px solid rgba(74,107,168,.4)}


/* ── Callout band ─────────────────────────────────────────────────── */
.callout{background:var(--cream);border-top:1px solid var(--rule);
         border-bottom:1px solid var(--rule);padding:38px 0}
.callout .wrap{display:flex;align-items:center;justify-content:space-between;
               gap:36px;flex-wrap:wrap}
.callout h3{font-size:25px;margin:0 0 8px}
.callout p{margin:0;font-size:17.5px;line-height:1.6;color:var(--muted);max-width:58ch}
.callout--navy{background:var(--navy-deep);border-top:4px solid var(--orange);border-bottom:0}
.callout--navy h3{color:#fff}
.callout--navy p{color:rgba(255,255,255,.75)}
.btn--sm{padding:12px 22px;font-size:13px}


/* ── Records log ──────────────────────────────────────────────────
   A table in spirit but built from grid, so it can restack on a phone
   without horizontal scrolling. The status chip is the only colour;
   everything else stays quiet so the subjects read as a list.       */
.log{border-top:2px solid var(--navy)}
.log__head{display:grid;grid-template-columns:1fr 130px 130px;gap:20px;
           padding:12px 0;border-bottom:1px solid var(--rule);
           font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
           color:var(--faint)}
.log__row{display:grid;grid-template-columns:1fr 130px 130px;gap:20px;
          padding:22px 0;border-bottom:1px solid var(--rule);align-items:start}
.log__subject a{font-family:var(--sans);font-size:19.5px;font-weight:700;line-height:1.35;
                color:var(--navy);border-bottom:1px solid rgba(31,39,92,.25)}
.log__subject a:hover{color:var(--peri-band);border-bottom-color:var(--orange)}
.log__subject > span{font-family:var(--sans);font-size:19.5px;font-weight:700;
                     line-height:1.35;color:var(--navy)}
.log__note{font-size:16.5px;line-height:1.5;color:var(--muted);margin:8px 0 0;max-width:62ch}
.log__filed,.log__status{font-size:16px;color:var(--muted);font-weight:600}
.log__lbl{display:none;font-size:11.5px;font-weight:700;letter-spacing:.12em;
          text-transform:uppercase;color:var(--faint);margin-right:8px}

.chip{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.08em;
      text-transform:uppercase;padding:5px 11px;border-radius:2px;white-space:nowrap}
.chip--answered{background:#E4EDE2;color:#2F5227}
.chip--partial {background:#FCEBD6;color:var(--orange-text)}
.chip--overdue {background:var(--orange);color:var(--navy)}
.chip--refused {background:var(--navy);color:#fff}


/* ── How-it-works steps ───────────────────────────────────────────
   Numbered deliberately: this is an actual sequence, not decoration. */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;counter-reset:step}
.step{counter-increment:step;padding-top:18px;border-top:2px solid var(--navy)}
.step::before{content:counter(step);display:block;font-family:var(--serif);font-size:30px;
              font-weight:600;color:var(--peri);line-height:1;margin-bottom:10px}
.step h3{font-size:20px;margin-bottom:7px}
.step p{margin:0;font-size:16.5px;line-height:1.5;color:var(--muted)}


/* ── Research documents ───────────────────────────────────────────
   The orange spine reads as the edge of a bound report. It is the one
   flourish on the page; everything else is set plainly.             */
.docs{display:flex;flex-direction:column;gap:22px}
.doc{display:grid;grid-template-columns:10px 1fr;background:#fff;
     border:1px solid var(--rule);overflow:hidden}
.doc__spine{background:var(--orange)}
.doc__body{padding:26px 30px}
.doc__meta{display:flex;gap:14px;align-items:center;margin-bottom:11px}
.doc__kind{font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
           color:var(--orange-text)}
.doc__date{font-size:15px;font-weight:600;color:var(--faint)}
.doc__title{font-family:var(--serif);font-size:27px;font-weight:600;line-height:1.28;
            color:var(--navy);margin:0 0 11px;max-width:30ch}
.doc__desc{font-size:17.5px;line-height:1.58;color:var(--muted);margin:0 0 18px;max-width:66ch}
.doc__links{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.doc__pdf{background:var(--navy);color:#fff;font-size:13px;font-weight:700;
          letter-spacing:.08em;text-transform:uppercase;padding:12px 22px;border-radius:3px}
.doc__pdf:hover{background:var(--navy-deep);color:#fff}
.doc__read{font-size:16px;font-weight:700;color:var(--peri-band)}
.doc__read:hover{color:var(--navy)}


/* ── Topic cards ──────────────────────────────────────────────────── */
.topics{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.topics--compact{grid-template-columns:repeat(3,1fr);margin-top:32px}
.topic{display:flex;flex-direction:column;background:#fff;border:1px solid var(--rule);
       border-top:4px solid var(--navy);padding:26px 26px 24px;
       transition:border-color .15s ease}
.topic:hover{border-color:var(--peri);border-top-color:var(--orange)}
.topic h2{font-size:25px;line-height:1.25;margin:0 0 11px}
.topic:hover h2{color:var(--peri-band)}
.topic p{font-size:17px;line-height:1.55;color:var(--muted);margin:0 0 18px;flex:1}
.topic__n{font-size:14px;font-weight:700;letter-spacing:.06em;color:var(--orange-text)}


/* ── People ───────────────────────────────────────────────────────── */
.people{display:grid;grid-template-columns:1fr;gap:34px}
.people--compact{grid-template-columns:repeat(3,1fr);gap:26px}
.person{display:grid;grid-template-columns:132px 1fr;gap:28px;align-items:start}
.person--brief{grid-template-columns:88px 1fr;gap:20px;align-items:center}
.person__photo{aspect-ratio:1;background:var(--navy);overflow:hidden;
               display:flex;align-items:center;justify-content:center}
.person__photo img{width:100%;height:100%;object-fit:cover;display:block}
.person__initials{font-family:var(--serif);font-size:34px;font-weight:600;
                  color:var(--peri-soft);letter-spacing:.04em}
.person--brief .person__initials{font-size:26px}
.person__body h3{font-size:25px;margin:0 0 4px}
.person__role{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
              color:var(--orange-text);margin:0 0 6px}
.person__class{font-size:15.5px;color:var(--faint);font-weight:600;margin:0 0 12px}
.person__bio{font-size:17.5px;line-height:1.62;color:var(--muted);margin:0;max-width:70ch}

.roster{display:grid;grid-template-columns:repeat(4,1fr);gap:10px 26px;
        list-style:none;padding:0;margin:0}
.roster li{font-size:17.5px;font-weight:600;color:var(--navy);
           padding:9px 0;border-bottom:1px solid var(--rule)}


/* ── Events ───────────────────────────────────────────────────────
   The date block is the anchor. Upcoming events get the orange rule;
   past events get a quiet navy one, so the difference is legible at a
   glance without reading a single word.                             */
.evlist{display:flex;flex-direction:column;gap:26px}
.ev{display:grid;grid-template-columns:96px 1fr;gap:26px;align-items:start;
    padding-bottom:26px;border-bottom:1px solid var(--rule)}
.evlist > .ev:last-child{border-bottom:0;padding-bottom:0}
.ev__date{background:var(--navy);color:#fff;text-align:center;padding:14px 8px 12px;
          border-top:4px solid var(--orange)}
.ev__date--past{border-top-color:var(--peri);background:var(--navy-deep)}
.ev__mon{display:block;font-size:12.5px;font-weight:700;letter-spacing:.14em;
         color:var(--orange)}
.ev__date--past .ev__mon{color:var(--peri-soft)}
.ev__day{display:block;font-family:var(--serif);font-size:38px;font-weight:600;line-height:1.05;
         font-variant-numeric:tabular-nums}
.ev__yr{display:block;font-size:13px;color:rgba(255,255,255,.6);font-weight:600;margin-top:3px}
.ev--next .ev__body{padding-top:2px}
.ev__kind{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.13em;
          text-transform:uppercase;color:var(--orange-text);margin-bottom:9px}
.ev__body h3{font-size:27px;line-height:1.24;margin:0 0 9px;max-width:26ch}
.ev__when{font-size:16px;font-weight:600;color:var(--navy);margin:0 0 11px}
.ev__desc{font-size:17.5px;line-height:1.58;color:var(--muted);margin:0 0 16px;max-width:64ch}
.ev__watch{font-size:16px;font-weight:700;color:var(--peri-band)}
.ev__watch:hover{color:var(--navy)}
.evlist--past .ev__body h3{font-size:23px}


/* ── Footer additions ─────────────────────────────────────────────── */
footer .wrap{gap:40px}
.foot__brand{min-width:250px;flex:1 1 250px}
.foot__blurb{font-size:15.5px;line-height:1.55;color:rgba(255,255,255,.6);
             margin:0 0 18px;max-width:34ch}
.legal a{display:inline;padding:0;border-bottom:1px solid rgba(255,255,255,.25)}


/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE — the new components
   ═══════════════════════════════════════════════════════════════════ */

@media(max-width:1000px){
  .phead h1{font-size:36px}
  .phead__lede{font-size:18px}
  .article h1{font-size:35px}
  .article__stand{font-size:19.5px}
  .lead h2{font-size:30px}
  .prose{font-size:19px}
  .topics,.topics--compact{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .roster{grid-template-columns:1fr 1fr}
  .people--compact{grid-template-columns:1fr 1fr}
  .log__head{display:none}
  .log__row{grid-template-columns:1fr;gap:10px}
  .log__lbl{display:inline}
}

@media(max-width:820px){
  /* Collapse the primary nav into a drawer. The utility strip stays as
     a wrapping row — it is short, and hiding it would bury About. */
  .burger{display:flex}
  .mast .wrap{position:relative}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;z-index:60;
       flex-direction:column;align-items:stretch;gap:0;
       background:var(--navy-deep);padding:8px 0 14px;
       box-shadow:0 18px 40px rgba(20,27,66,.35)}
  .nav--open{display:flex}
  .nav a{padding:14px 30px;border-bottom:1px solid rgba(255,255,255,.09);font-size:17px}
  .nav .give{margin:14px 30px 0;text-align:center;border-bottom:0}
  .nav__search{width:auto;margin:0;border:0;justify-content:flex-start;
               padding:14px 30px;border-radius:0}
  body.nav-locked{overflow:hidden}

  .sister .wrap{padding:9px 24px;gap:12px}
  .person{grid-template-columns:96px 1fr;gap:20px}
  .ev{grid-template-columns:76px 1fr;gap:18px}
  .ev__day{font-size:30px}
  .ev__body h3{font-size:23px}
  .doc__body{padding:22px 24px}
  .doc__title{font-size:24px}
}

@media(max-width:640px){
  .phead{padding:38px 0 34px}
  .phead h1{font-size:30px}
  .article h1{font-size:29px}
  .article__stand{font-size:18px}
  .article__meta{gap:12px;font-size:14.5px}
  .prose{font-size:18px;line-height:1.68}
  .prose h2{font-size:26px}
  .prose h3{font-size:22px}
  .prose blockquote{font-size:20px;padding-left:18px}
  .lead h2{font-size:26px}
  .topics,.topics--compact,.steps,.roster,.people--compact{grid-template-columns:1fr}
  .person,.person--brief{grid-template-columns:72px 1fr;gap:16px}
  .person__body h3{font-size:21px}
  .doc{grid-template-columns:7px 1fr}
  .findbar{flex-direction:column}
  .findbar input{border-right:2px solid var(--navy)}
  .findbar button{padding:14px 26px}
  .callout .wrap{gap:22px}
  .strip .wrap{padding:9px 24px}
  .strip__tag{display:none}
  .ev{grid-template-columns:64px 1fr}
  .ev__day{font-size:26px}
}