:root{
    --navy:#222B61; --navy-ink:#0f1336;
    --cream:#FFF1C3; --accent:#3d54b5; --accent-ink:#34439a; --mast:#eaf0fb;
    --ink:#14181f; --muted:#5b5d72; --rule:#e6e6ec; --paper:#ffffff;
    --live:#A8333A;
    --display:"Source Serif 4",Georgia,serif;
    --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
    --sans:"Inter",system-ui,-apple-system,sans-serif;
    /* masthead sizing */
    --globe-size:74px; --nameplate:38px;
    /* Just Security-style centered content width + side gutters (full-bleed backgrounds) */
    --maxw:1360px; --gutter:max(28px, calc((100% - var(--maxw)) / 2));
  }
  html[data-edition="day"]{
    --shadow:0 10px 26px rgba(20,24,31,.12);
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--paper);overflow:hidden;-webkit-font-smoothing:antialiased;transition:background-color .4s ease,color .4s ease}
  .app{height:100dvh;display:flex;flex-direction:column}
  a{color:inherit}
  .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  /* skip link + a visible focus indicator on every interactive element (WCAG 2.4.1, 2.4.7) */
  .skip{position:absolute;left:8px;top:-48px;z-index:1100;background:var(--navy);color:#fff;padding:9px 15px;border-radius:0 0 6px 6px;font-size:13px;font-weight:600;text-decoration:none;transition:top .15s ease}
  .skip:focus{top:0}
  a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
  footer a:focus-visible,footer button:focus-visible{outline-color:var(--cream)}

  /* ---- light-blue masthead showcasing Dawn's own coded line-art globe ---- */
  /* ===== SHARED MASTHEAD: the eight rules below must stay byte-identical in FIVE files:
     assets/ips.css, board.html, briefs.html, interview-wallworth.html and 404.html. Every page
     except the home page is self-contained and carries its own copy, and Dreamweaver will not
     warn you about that. Retune one and you must retune all five, or the globe and the wordmark
     change size as a reader moves between pages. This has drifted four times; check it. ===== */
  .masthead{background:radial-gradient(125% 155% at 50% -25%, var(--mast) 0%, #f3f6fd 46%, #ffffff 84%);display:flex;align-items:center;gap:22px;padding:9px var(--gutter) 11px}
  .globe-wrap{flex:none;height:var(--globe-size);display:flex;align-items:center;cursor:pointer;margin-left:auto;position:relative}
  .globe-wrap:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}
  /* her globe is a black line drawing on white; multiply drops the white onto the tinted masthead */
  .globe-image{height:var(--globe-size);width:auto;display:block;mix-blend-mode:multiply}
  /* brand lockup: GPS tile to the LEFT of the wordmark (Dawn's "GPS Briefs" brand) */
  .brand{display:flex;align-items:center;gap:20px;text-decoration:none;color:inherit}
  .ips-mark{font-family:var(--display);font-weight:700;font-size:46px;line-height:.9;color:var(--navy);letter-spacing:1px;border-bottom:3px solid var(--navy);padding-bottom:3px;flex:none}
  .nameplate .title{display:block;margin:0;font-family:var(--display);font-weight:700;font-size:var(--nameplate);line-height:1;color:var(--navy);letter-spacing:.2px;font-optical-sizing:auto}
  .nameplate .tagline{display:block;margin:7px 0 0;font-size:12.5px;font-weight:600;letter-spacing:.8px;color:var(--muted)}
  /* ===== end shared masthead ===== */
  /* ---- index-only, NOT part of the fence above: the globe is the Paloma easter egg
     here, but on board/briefs/interview/404 it is just a link home, so those pages have
     no .globe-hint element to style. This block used to sit INSIDE the fence behind a
     second "end shared masthead" line, which left four of the eight shared rules below
     a terminator and made the fence undiffable. ---- */
  /* the globe never looked clickable: cursor:pointer was the only cue and nobody hovers a
     decorative masthead illustration. A label on hover and keyboard focus says what it does. */
  .globe-hint{position:absolute;right:0;bottom:-3px;white-space:nowrap;pointer-events:none;
    font-family:var(--sans);font-size:9.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
    color:var(--accent-ink);background:rgba(255,255,255,.92);border:1px solid var(--rule);border-radius:2px;
    padding:2px 6px;opacity:0;transform:translateY(3px);transition:opacity .16s ease,transform .16s ease}
  /* :focus as well as :focus-visible. A keyboard tab satisfies both, but relying on
     focus-visible alone leaves the label hidden whenever focus arrives some other way. */
  .globe-wrap:hover .globe-hint,.globe-wrap:focus .globe-hint,.globe-wrap:focus-visible .globe-hint{opacity:1;transform:none}
  .globe-wrap:hover .globe-image{transform:translateY(-1px) scale(1.02)}
  .globe-image{transition:transform .18s ease}
  @media(prefers-reduced-motion:reduce){
    .globe-hint,.globe-image{transition:none}
    .globe-wrap:hover .globe-image{transform:none}
  }
  /* masthead fades to white at its edges; no hard rule */

  /* ---- section bar ---- */
  .bar{display:flex;align-items:center;gap:24px;padding:10px var(--gutter);border-bottom:1px solid var(--rule)}
  .tablist{display:flex;gap:24px}
  .tab{appearance:none;background:0;border:0;cursor:pointer;font-family:var(--sans);font-size:13.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);padding:5px 0;position:relative}
  .tab[aria-selected="true"]{color:var(--navy)}
  .tab[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-11px;height:2px;background:var(--accent)}
  .topics{margin-left:auto;display:flex;align-items:center;gap:15px;position:relative}
  .topics .search{display:flex;align-items:center;border:1px solid var(--rule);border-radius:2px;padding:5px 8px;color:var(--muted);margin-left:4px}
  .topics .search input{border:0;outline:0;font-family:var(--sans);font-size:12px;width:78px;background:transparent}
  /* the outline:0 above out-specifies the global focus-visible ring, which left the search box
     as the one tab stop on the site with no visible focus (WCAG 2.4.7). Ring the wrapper so the
     whole pill lights up rather than a hairline inside it. */
  .topics .search:focus-within{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
  /* site-search results: a typeahead dropdown under the search box (overlays the
     content, so it never adds page scroll; scrolls internally past ~7 results) */
  .qresults{position:absolute;top:calc(100% + 9px);right:0;z-index:60;width:min(360px,86vw);max-height:min(62vh,460px);overflow-y:auto;background:var(--paper);border:1px solid var(--rule);border-radius:9px;box-shadow:var(--shadow);padding:6px}
  .qresults[hidden]{display:none}
  .qr-opt{display:block;width:100%;text-align:left;border:0;background:transparent;cursor:pointer;padding:8px 11px;border-radius:6px;font-family:var(--sans)}
  .qr-opt:hover{background:var(--mast)}
  /* arrowing through results moves aria-activedescendant while REAL focus stays in the input,
     so the active row never gets the global focus ring. The tint alone is #eaf0fb on white,
     1.14:1, which is not a visible state indicator (WCAG 1.4.11 wants 3:1). Give it a ring. */
  .qr-opt[aria-selected="true"]{background:var(--mast);outline:2px solid var(--accent);outline-offset:-2px}
  .qr-type{display:block;font-size:9px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:var(--accent-ink)}
  .qr-title{display:block;font-family:var(--serif);font-size:14px;line-height:1.25;color:var(--ink);margin:2px 0 0}
  .qr-sub{display:block;font-size:11px;color:var(--muted);margin:2px 0 0}
  .qr-none{color:var(--muted);font-size:13px;cursor:default;padding:12px 11px}
  .qr-none:hover{background:transparent}
  /* Briefs pulldown, Just Security "Key Topics" style. The menu is a SIBLING of the
     tablist inside .tabzone (a tablist may only contain tabs); ips.js toggles .dd-open
     on .tabzone and sets the menu's left edge to sit under the Briefs tab. */
  .tabzone{position:relative;display:flex;align-items:center}
  .tab .caret{font-size:9px;margin-left:5px;vertical-align:middle}
  .dd{position:absolute;top:calc(100% + 11px);left:0;z-index:40;min-width:236px;background:var(--paper);border:1px solid var(--rule);border-radius:6px;box-shadow:var(--shadow);padding:7px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s ease,transform .16s ease}
  .tabzone.dd-open .dd{opacity:1;visibility:visible;transform:none}
  /* invisible bridge across the gap between the tab and the pulldown, so the cursor can
     travel down into the menu without it closing mid-journey (ips.js also tolerates the
     crossing with a short close delay) */
  .dd::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
  .dd a{display:block;padding:8px 12px;border-radius:4px;font-family:var(--sans);font-size:13px;font-weight:600;color:var(--ink);text-decoration:none}
  .dd a:hover{background:var(--mast);color:var(--navy)}
  /* About & Submissions reading pages */
  .page{max-width:780px}
  .page .kicker{font-size:10.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--accent-ink);margin:0 0 8px}
  .page h2{font-family:var(--display);font-weight:600;font-size:27px;color:var(--ink);margin:0 0 16px;letter-spacing:.1px}
  .page p{font-family:var(--serif);font-size:16px;line-height:1.62;color:var(--ink);margin:0 0 15px;max-width:66ch}
  .page p a{color:var(--accent-ink);text-decoration:underline}
  .page .board-link{display:inline-block;margin-top:4px;font-family:var(--sans);font-size:13px;font-weight:700;color:var(--navy);text-decoration:none;border-bottom:2px solid var(--accent);padding-bottom:2px}
  .page .board-link:hover{color:var(--accent-ink)}
  /* About shares the viewport with the featured band (Dawn wants the carousel there too);
     on wide screens its text flows in two columns so nothing is cut off or scrolls */
  @media(min-width:1000px){
    #about .page{max-width:1224px;columns:3;column-gap:44px}
    #about .page .kicker{column-span:all;margin:0 0 6px}
    #about .page h2{column-span:all;margin:0 0 14px}
    #about .page p{max-width:none;font-size:15px;line-height:1.55;margin:0 0 12px;break-inside:avoid}
  }

  main{flex:1;min-height:0;position:relative}
  .panel{position:absolute;inset:0;padding:15px var(--gutter) 12px;overflow:auto;display:none}
  .panel[data-active]{display:block}

  /* ---- Briefs: lead + ranked list + data strip ---- */
  .briefs{display:grid;grid-template-columns:1fr 1.28fr 1fr;gap:30px;height:100%}
  /* left rail: The Wire, curated external reading for students */
  .tw{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--rule);padding-right:28px}
  .tw-h{font-family:var(--display);font-weight:600;font-size:15px;color:var(--ink);margin:0 0 2px;padding-bottom:6px;border-bottom:2px solid var(--accent)}
  /* text-only items (Emmanuel's call: no thumbnail/badge boxes, just headline + source) */
  .tw-item{display:flex;flex-direction:column;justify-content:center;padding:6px 0;border-bottom:1px solid var(--rule);flex:1 1 auto}
  /* :last-of-type keys on the element type, and the last <article> in the rail is the
     interview teaser, so it never matched and the third Wire item kept a stray hairline
     under it. Target the item that actually sits above the Interviews heading. */
  .tw-item:has(+ .tw-h2){border-bottom:0}
  .tw-body{min-width:0}
  .tw-item h3{font-family:var(--serif);font-weight:600;font-size:15px;line-height:1.25;margin:0;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .tw-item a{text-decoration:none;color:inherit}.tw-item h3:hover{color:var(--navy)}
  .tw-source{font-size:10px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);margin:4px 0 0}
  .tw-h2{margin-top:12px}
  .tw-iv{padding:6px 0;border-bottom:1px solid var(--rule);flex:1 1 auto;display:flex;flex-direction:column;justify-content:center}
  .tw-iv:last-of-type{border-bottom:0}
  .tw-iv a{text-decoration:none;color:inherit}
  .tw-iv h3{font-family:var(--serif);font-weight:600;font-size:15px;line-height:1.25;margin:0;color:var(--ink);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
  .tw-iv h3:hover{color:var(--navy)}
  .lead{display:flex;flex-direction:column;min-height:0}
  .lead .photo{flex:1 1 auto;min-height:110px;width:100%;background:#ccc center/cover no-repeat;border-radius:3px}
  .cat{font-size:10.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--navy)}
  .cat::before{content:"";display:inline-block;width:14px;height:2px;background:var(--accent);vertical-align:middle;margin-right:8px;margin-bottom:3px}
  /* the lead photograph is the largest image on the site and was the only one with no
     credit line. Three of the fifteen brief photos are CC BY 2.0 and two are AI-generated,
     so provenance sits with the picture, not in a file we do not publish. */
  .lead .lead-credit{font-size:9.5px;color:var(--muted);margin:4px 0 0;letter-spacing:.2px}
  .lead .cat{margin:7px 0 5px}
  .lead h2{font-family:var(--serif);font-weight:700;font-size:26px;line-height:1.08;margin:0;color:var(--ink);letter-spacing:-.2px}
  .lead .dek{margin:6px 0 0;font-size:15px;line-height:1.4;color:#3a3c4a;max-width:52ch;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .lead .by{margin-top:6px;font-size:12.5px;color:var(--muted)}
  .lead .by b{color:var(--ink);font-weight:600}
  .lead a{text-decoration:none;color:inherit}.lead h2:hover{color:var(--accent-ink)}

  .rail{display:flex;flex-direction:column;min-height:0}
  .rail .rh{font-family:var(--display);font-weight:600;font-size:15px;color:var(--ink);margin:0 0 2px;padding-bottom:6px;border-bottom:2px solid var(--navy)}
  .r-item{display:grid;grid-template-columns:1fr 68px;gap:12px;padding:5px 0;border-bottom:1px solid var(--rule);flex:1 1 auto;align-content:center}
  .r-item .thumb{width:68px;height:48px;background:#ccc center/cover no-repeat;border-radius:2px}
  .r-item h3{font-family:var(--serif);font-weight:600;font-size:15px;line-height:1.25;margin:1px 0 2px;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .r-item .by{font-size:11.5px;color:var(--muted);margin:2px 0 0}
  .r-item .cat{font-size:9.5px;margin:0 0 2px}.r-item .cat::before{width:10px;margin-right:6px}
  .r-item a{text-decoration:none;color:inherit}.r-item h3:hover{color:var(--navy)}

  .bytopic{margin-top:auto;padding-top:4px}
  .bytopic .lab{font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin:0 0 4px}
  .hbars{display:flex;flex-direction:column;gap:1px;margin-top:3px}
  .hbar{display:grid;grid-template-columns:88px 1fr 15px;align-items:center;gap:8px;line-height:1.15}
  .hlab{font-size:9.5px;font-weight:600;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hbar .hcol{display:block;height:7px;border-radius:2px;min-width:5px;max-width:100%}
  .hbar .cnt{font-size:10px;font-weight:700;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}

  /* ---- Interviews ---- */
  .iv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;height:100%;align-content:start}
  .iv{border:1px solid var(--rule);border-top:3px solid var(--accent);border-radius:3px;padding:20px;display:flex;flex-direction:column;gap:11px}
  .iv h3{font-family:var(--serif);font-size:19px;line-height:1.18;margin:0;color:var(--ink)}
  .iv .who{font-size:13px;color:var(--muted)}
  .iv .bio{font-size:14px;line-height:1.5;color:#3a3c4a;margin:0;max-width:60ch}
  /* one interview so far: a single announcement card, centred rather than stranded
     in the left third of a three-column grid. Drop .iv-solo once there are two. */
  /* .iv-grid.iv-solo, not .iv-solo: the narrow-screen .iv-grid override below has the same
     weight and comes later, so a single-class version lost there and the lone card stretched
     to full width. min(560px,100%) keeps the cap on wide screens without overflowing a phone. */
  .iv-grid.iv-solo{grid-template-columns:min(560px,100%);justify-content:center;align-content:center}
  .iv-solo .iv{padding:28px 30px;gap:13px}
  /* .cat and .who are <p>, so they arrive with UA margins that fight the flex gap and make the
     spacing around the kicker roughly double the intended 13px. h3 and .bio already reset. */
  .iv .cat,.iv .who,.iv .more{margin:0}
  /* a published interview links out to its own page; an unpublished one is plain text */
  .iv h3 a{color:inherit;text-decoration:none}
  .iv h3 a:hover{color:var(--accent-ink)}
  .iv .more{margin-top:auto;padding-top:3px}
  .iv .more a{font-size:13px;font-weight:700;color:var(--navy);text-decoration:none;border-bottom:2px solid var(--accent);padding-bottom:2px}
  .iv .more a:hover{color:var(--accent-ink)}

  /* ---- The Atlas: live day and night over a dotted world ---- */
  .atlas{display:flex;flex-direction:column;height:100%;min-height:0}
  .atlas-head{display:flex;align-items:baseline;gap:14px;margin-bottom:6px}
  .atlas-head h2{font-family:var(--display);font-weight:600;font-size:17px;color:var(--ink);margin:0}
  .atlas-head .utc{margin-left:auto;font-size:10px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}
  .atlas-head .utc b{color:var(--live)}
  .atlas-stage{position:relative;flex:1;min-height:0}
  .atlas-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
  .map-tip{position:absolute;z-index:5;pointer-events:none;background:var(--paper);border:1px solid var(--rule);border-left:3px solid var(--live);border-radius:3px;box-shadow:var(--shadow);padding:9px 12px;max-width:240px}
  .map-tip .t-cat{font-size:9px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--accent);margin:0 0 3px}
  .map-tip h5{font-family:var(--serif);font-weight:600;font-size:13px;line-height:1.25;margin:0;color:var(--ink)}
  .map-tip .t-by{font-size:10.5px;color:var(--muted);margin:3px 0 0}
  /* zoom controls: the map gets crowded around the Levant and the Horn of Africa, where
     several pins sit within a few degrees of each other */
  .map-zoom{position:absolute;right:6px;bottom:6px;z-index:6;display:flex;gap:4px;align-items:center}
  .map-zoom button{font-family:var(--sans);font-size:14px;font-weight:700;line-height:1;color:var(--navy);
    background:rgba(255,255,255,.94);border:1px solid var(--rule);border-radius:3px;width:26px;height:26px;padding:0;cursor:pointer}
  .map-zoom .mz-reset{width:auto;padding:0 9px;height:26px;font-size:9.5px;letter-spacing:1px;text-transform:uppercase}
  .map-zoom button:hover:not(:disabled):not(.is-off){border-color:var(--accent);color:var(--accent-ink)}
  /* .is-off replaces the disabled ATTRIBUTE on the zoom controls. A disabled button is not
     focusable, so switching one off under keyboard focus dropped focus to <body>; these stay
     focusable and say aria-disabled instead, which means the greying has to be styled here. */
  .map-zoom button:disabled,.map-zoom button.is-off{opacity:.38;cursor:default}
  .atlas-note{flex:none;margin:6px 0 0;font-size:10.5px;color:var(--muted);letter-spacing:.3px}
  .atlas-note b{color:var(--ink);font-weight:600}

  /* ---- Featured carousel: Dawn's own "news-carousel" from Digital Peacebuilding,
         rebuilt natively (no Bootstrap / jQuery). Up to three news cards per slide. ---- */
  .featured-band{flex:none;background:transparent;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px var(--gutter) 7px;border-top:1px solid var(--rule)}
  .nc-title{align-self:flex-start;font-family:var(--serif);font-weight:700;font-size:12.5px;letter-spacing:.3px;color:var(--navy);margin:0}
  .news-carousel{position:relative;width:100%;max-width:1320px}
  /* All slides are stacked in the same grid cell so the band is always exactly as tall
     as the TALLEST slide. Slides used to be display:none, which made the band's height
     follow whichever slide was active, and every auto-advance reflowed the layout above
     it (the lead and rail visibly jumped). visibility:hidden keeps inactive slides out
     of the tab order and away from screen readers, same as display:none did. */
  .carousel-inner{position:relative;overflow:hidden;display:grid}
  .carousel-item{grid-area:1/1;visibility:hidden}
  .carousel-item.active{visibility:visible;animation:ncfade .45s ease}
  /* the entrance reads as motion plus a slight fade; even its first frame keeps the
     muted credit/author text above 4.5:1 AA (the old .6 floor blended it to ~2.7:1) */
  @keyframes ncfade{from{opacity:.9;transform:translateY(4px)}to{opacity:1;transform:none}}
  .nc-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  /* leftover rows with fewer than three cards stay centered at the same card width */
  .nc-row:has(.news-item:first-child:last-child){grid-template-columns:minmax(0,427px);justify-content:center}
  .nc-row:has(.news-item:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,427px));justify-content:center}
  .news-item{border:1px solid var(--rule);border-radius:8px;background:var(--paper);padding:8px 10px;box-shadow:0 8px 22px rgba(20,24,31,.08);min-width:0}
  .news-item img,.news-item .ph{display:block;width:100%;height:140px;object-fit:cover;border-radius:5px}
  .news-item .ph{background:#dfe2ea}
  .news-item .credit{font-size:9.5px;color:var(--muted);margin:5px 0 0}
  .news-item .news-link{text-decoration:none;color:inherit;display:block}
  .news-item h3{font-family:var(--serif);font-weight:700;font-size:15px;line-height:1.15;margin:3px 0 0;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .news-item .news-link:hover h3{color:var(--navy)}
  .news-item .author{font-size:11.5px;color:var(--muted);margin:5px 0 0}
  .news-item .issue-info{text-align:right;font-size:10.5px;font-weight:600;color:var(--accent-ink);margin:2px 0 0}
  /* prev/next chevrons just outside the cards (Dawn's carousel controls) */
  .carousel-control-prev,.carousel-control-next{position:absolute;top:0;bottom:0;width:30px;display:flex;align-items:center;justify-content:center;border:0;background:transparent;color:var(--navy);cursor:pointer;font-size:28px;line-height:1;opacity:.55;transition:opacity .2s}
  .carousel-control-prev:hover,.carousel-control-next:hover{opacity:1}
  /* the arrows hang outside the carousel, into the page gutter. --gutter never goes below
     28px, so 28 is the largest offset that cannot poke past the viewport edge; at 32 it did,
     and the 4px spilled into a real horizontal scrollbar at 1280 wide. */
  .carousel-control-prev{left:-28px}
  .carousel-control-next{right:-28px}
  .nc-foot{display:flex;align-items:center;justify-content:center;gap:12px}
  .nc-foot .lab{font-size:10px;font-weight:700;letter-spacing:1.7px;text-transform:uppercase;color:var(--accent-ink)}
  /* the dots READ as 8px, but an 8px button with a 7px gap is a 15px target, under the 24px
     floor in WCAG 2.5.8 and too tightly packed for the spacing exception. The button is now a
     24px box with the dot painted inside it, so the visual is unchanged and the hit area
     passes outright. gap:0 keeps the centres exactly 24px apart, so no two targets overlap. */
  .nc-dots{display:flex;gap:0}
  .nc-dots .dot{width:24px;height:24px;border:0;padding:0;background:transparent;cursor:pointer;display:grid;place-items:center}
  .nc-dots .dot::before{content:"";width:8px;height:8px;border-radius:50%;background:#8e90a6}
  .nc-dots .dot[data-active]::before{background:var(--navy)}
  .nc-toggle{appearance:none;border:1px solid var(--navy);background:transparent;color:var(--navy);width:26px;height:26px;border-radius:50%;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}
  .nc-toggle:hover{background:var(--navy);color:var(--cream)}
  .nc-toggle .i-play{display:none}
  .nc-toggle.is-paused .i-pause{display:none}
  .nc-toggle.is-paused .i-play{display:block}
  @media(prefers-reduced-motion:reduce){.carousel-item.active{animation:none}}
  body.page-mode .featured-band{display:none}

  footer{flex:none;background:var(--navy-ink);color:#dfe0ee;display:flex;align-items:center;gap:24px;padding:11px var(--gutter);font-size:12.5px}
  footer a{color:#fff;text-decoration:none}footer a:hover{color:var(--cream)}
  footer .foot-ips{font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:.5px;color:#fff}
  /* the attribution is a sentence, so it has to flow and wrap as inline text. As a flex
     container each of its five pieces became its own nowrap column and the line rendered as
     five vertical stacks below ~1000px. margin-left:auto still applies: .cc is a flex ITEM
     of footer, and dropping display:flex only changes its inner layout. */
  footer .cc{margin-left:auto;color:#a9abc8;line-height:1.6}
  footer .cc a{color:#cfd0e6;text-decoration:underline}
  footer .cc a:hover{color:var(--cream)}
  footer .cc img{filter:invert(1) brightness(1.7);vertical-align:-1px}
  /* Paloma easter-egg card (dove = peace) */
  .paloma-pop[hidden]{display:none}
  .paloma-pop{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:rgba(15,19,54,.45);padding:24px}
  .paloma-card{position:relative;background:#fff;border-radius:14px;max-width:344px;width:100%;padding:28px 26px 24px;text-align:center;box-shadow:0 26px 64px rgba(15,19,54,.42)}
  .paloma-card .portrait{width:96px;height:96px;border-radius:50%;background:var(--mast);display:grid;place-items:center;margin:0 auto 14px;color:var(--navy);overflow:hidden}
  .paloma-card .portrait img{width:100%;height:100%;object-fit:cover}
  .paloma-card .pname{font-family:var(--display);font-weight:600;font-size:23px;color:var(--navy);margin:0}
  .paloma-card .ptitle{font-size:10.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent-ink);margin:5px 0 13px}
  .paloma-card .pbio{font-family:var(--serif);font-size:14.5px;line-height:1.5;color:var(--ink);margin:0}
  /* her areas of expertise, set like the board's term lines rather than as a date stamp */
  .paloma-card .pexp{font-size:12px;line-height:1.45;color:var(--muted);margin:12px 0 0}
  .paloma-card .pclose{position:absolute;top:9px;right:13px;background:none;border:0;font-size:22px;line-height:1;color:var(--muted);cursor:pointer}
  .paloma-card .pclose:hover{color:var(--navy)}
  /* ================= RESPONSIVE FALLBACK =================
     The journal "docks" to exactly one viewport (the no-scroll rule) only when the
     window can actually hold it. When it can't (short laptop windows, tablets, phones)
     the same page unlocks into a normal scrolling document: the active panel flows at
     its natural height and the featured band follows at the end. Nothing gets clipped. */
  @media (max-width:980px), (max-height:879px){
    body{overflow:auto}
    .lead .photo{flex:none;aspect-ratio:16/10;min-height:0}
    .tw-item,.tw-iv,.r-item{flex:none}
    .bytopic{margin-top:10px;padding-top:0}
    .lead .dek{display:block;overflow:visible}
    .lead h2{font-size:30px}
    .app{height:auto;min-height:100dvh}
    main{flex:none}
    .panel{position:static;overflow:visible}
    .briefs{height:auto}
    .iv-grid{height:auto}
    .atlas{height:auto}
    .atlas-stage{flex:none;height:min(58vh,500px)}
  }
  /* narrow windows and tablets: the three home columns stack (featured brief first) */
  @media (max-width:980px){
    .briefs{grid-template-columns:1fr;gap:26px}
    .lead{order:-1}
    .tw{border-right:0;padding-right:0}
    .iv-grid{grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
    .carousel-control-prev{left:-20px}
    .carousel-control-next{right:-20px}
  }
  /* phones: smaller masthead, wrapping chrome, one carousel card per row */
  @media (max-width:720px){
    :root{--globe-size:56px;--nameplate:24px;--gutter:18px}
    .globe-wrap{display:none}
    .ips-mark{font-size:30px;border-bottom-width:2px}
    .nameplate .tagline{font-size:10px;letter-spacing:.5px}
    .masthead{gap:14px;padding:10px var(--gutter) 12px}
    .bar{flex-wrap:wrap;gap:12px 18px}
    .tablist{gap:18px;flex-wrap:wrap}
    .panel{padding:16px var(--gutter)}
    .lead h2{font-size:24px}
    .nc-row,.nc-row:has(.news-item:first-child:last-child),.nc-row:has(.news-item:nth-child(2):last-child){grid-template-columns:1fr}
    .carousel-control-prev{left:-14px}
    .carousel-control-next{right:-14px}
    /* the Briefs pulldown is visibility:hidden, not display:none, so it still takes part in
       layout. Its 236px floor was wider than a 320px phone minus gutters and pushed the page
       sideways even while closed; let it shrink to the viewport instead. */
    .dd{min-width:0;max-width:calc(100vw - 2 * var(--gutter))}
    footer{flex-wrap:wrap;row-gap:6px}
    footer .cc{margin-left:0}
  }