/* ============================================================
   Self-hosted Newsreader. Added to shell.css by the coding side
   on August 6 2026. It previously lived only in index.html, so a
   reader landing directly on a standalone page with a cold cache
   got Georgia instead of the house face. Now every page that
   loads the shell loads the font.
   Font files: /assets/fonts/*.woff2
   ============================================================ */
@font-face{font-family:"Newsreader";font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/newsreader-latin-wght-normal.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/newsreader-latin-ext-wght-normal.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400 700;font-display:swap;src:url(/assets/fonts/newsreader-latin-wght-italic.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400 700;font-display:swap;src:url(/assets/fonts/newsreader-latin-ext-wght-italic.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ============================================================================
   Drug Policy Watch, shell.css v2
   Rewritten August 5, 2026. Replaces shell/shell.css from the Aug 5 kit.
   Every change is listed in CHANGES.md. Nothing in the wordmark was redrawn.

   READ ORDER
   1. Tokens
   2. Base and typography
   3. Critical masthead rules (also inlined in 2_top_banner_nav.html, see CHANGES)
   4. Newsbar
   5. Layout wrapper, sidebar, main
   6. Footer
   7. Shared content utilities
   8. Accessibility, motion, print
   ============================================================================ */

/* ---------- 1. Tokens -------------------------------------------------------
   Unchanged values. Added --ink3 (sidebar), --hairline (chrome separators),
   --sans and --serif so no rule has to repeat a font stack. */
:root{
  --ink:#14213d;        /* masthead, primary navy */
  --ink2:#1f3357;       /* navy titles. Never navy text on navy, 1.27:1 */
  --ink3:#1a2b4d;       /* sidebar: one step off the masthead so they separate */
  --hairline:#2c3f66;   /* separator inside navy chrome */
  --paper:#fbfaf7;
  --paper2:#fff;
  --rule:#e4e0d6;
  --muted:#5d6470;
  --accent:#7c2d12;
  --accent2:#9a3412;
  --peach:#f0b08a;      /* on navy only, never on paper */
  --steel:#aebbd1;
  --steel2:#8e96ac;
  --s2:#2f6b3d;--s2b:#e3f0e4;--s3:#8a6d1a;--s3b:#fbf0cf;
  --s4:#9a4a1a;--s4b:#fbe5d3;--s5:#7c2d12;--s5b:#f3ddd3;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --nav-w:264px;
  --measure:900px;      /* the content column. One number, used everywhere. */
}

/* Sans hooks. The old shell enforced these with !important because body *
   forced Georgia over everything. body * is gone, so plain specificity is
   enough, and a section no longer has to fight the shell. This list is the
   old exemption list, unchanged, plus descendants so container-level hooks
   like .stat and .countdown carry sans down to their numerals. */
.count,.count *,.countdown,.countdown *,.cd,.cd *,
.stat,.stat *,.statgrid,.statgrid *,
.bills,.bills *,.subcap,.subcap *,.subgrid,.subgrid *,
.search,.search *,table,th,td,
input,select,textarea,button{font-family:var(--sans)}

/* ---------- 2. Base and typography -----------------------------------------
   FIXED: the old file carried `body *{font-family:Georgia...!important}`, which
   forced Georgia over the self-hosted Newsreader the site loads, and forced every
   future section to fight it with !important. Newsreader now inherits normally
   from body, and anything that wants sans opts in with .sans or its own rule. */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
.sans{font-family:var(--sans)}
a{color:var(--accent)}
img,svg,video{max-width:100%}
img{height:auto}

h1{font-size:clamp(1.7rem,4.2vw,2.2rem);line-height:1.12;margin:.4rem 0 .6rem;letter-spacing:-.01em}
h2{font-family:var(--sans);text-transform:uppercase;letter-spacing:.06em;font-size:1rem;color:var(--accent);margin:2rem 0 .5rem;border-bottom:1px solid var(--rule);padding-bottom:.3rem}
h3{font-family:var(--sans);font-size:1.02rem;color:var(--ink2);margin:1.3rem 0 .3rem}
p{font-size:1.07rem;margin:.8rem 0}
ul,ol{font-size:1.05rem}
li{margin:.3rem 0}
hr{border:none;border-top:1px solid var(--rule);margin:1.6rem 0}
blockquote{margin:1rem 0;padding:.6rem 1rem;border-left:4px solid var(--accent);background:var(--paper2);color:var(--ink2);font-style:italic}
table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:.82rem;margin:1rem 0;display:block;overflow-x:auto}
th{background:var(--ink);color:#fff;text-align:left;padding:.5rem .6rem;font-weight:600}
td{padding:.45rem .6rem;border-bottom:1px solid var(--rule);vertical-align:top}
tr:nth-child(even) td{background:#f6f4ef}
input,select,textarea,button{font-family:var(--sans)}

/* ---------- 3. Masthead ----------------------------------------------------
   These rules are ALSO inlined in 2_top_banner_nav.html. That is deliberate,
   not a duplication bug: on August 5 the banner shipped without its CSS and
   degraded to raw underlined link text. Inlining them with the markup means the
   banner cannot be separated from its styling by any future copy-paste.
   Keep the two copies identical. Do not redraw the wordmark. */
.topbanner{background:var(--ink);border-bottom:3px solid var(--accent2)}
.mastlink{display:block;color:inherit;text-decoration:none}
.masthead{text-align:center;padding:22px 12px 18px}
.masthead .mast-wm{font-family:var(--serif);font-weight:600;color:#fff;font-size:clamp(34px,6vw,64px);line-height:1.18;letter-spacing:-.01em}
.masthead .mp, .logo .pol{
  /* THE WORDMARK. Restored to the original treatment by the coding side on
     August 6 2026. Shell v2 had replaced this with text-decoration:underline,
     which renders a full-width browser underline at default thickness. The real
     mark is a background bar that is deliberately SHORTER than the letters
     (calc(100% - .1em)) and thinner (.052em), sitting at a fixed .85em.
     It is part of the logo. Do not substitute an underline for it. */
  border-bottom:0 !important;
  padding-bottom:0 !important;
  background-image:linear-gradient(#9a3412,#9a3412);
  background-repeat:no-repeat;
  background-size:calc(100% - .1em) .052em;
  background-position:.05em .85em;
  text-decoration:none;
}
.masthead .mw{color:var(--peach)}
.masthead .mast-wm sup{font-size:.24em;vertical-align:super;color:var(--steel);font-weight:500;letter-spacing:0}
.masthead .mast-tag{font-family:var(--serif);color:var(--peach);font-weight:600;font-size:clamp(13px,1.4vw,18px);margin-top:14px;letter-spacing:.02em}

/* ---------- 4. Newsbar -----------------------------------------------------
   Was `.ticker`. Kept the class name `.newsbar` from the Aug 5 kit.
   Separated from the masthead by its own hairline so the two navy bands read
   as two bands rather than one mass. */
.newsbar{background:#1b2c4d;color:#e8eaf0;border-bottom:1px solid var(--hairline);font-family:var(--sans);font-size:.86rem}
.newsbar .inner{max-width:calc(var(--measure) + 264px);margin:0 auto;display:flex;align-items:center;gap:.7rem;padding:.5rem 1.1rem}
.newsbar .lbl{background:var(--accent2);color:#fff;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:.2rem .55rem;border-radius:5px;flex:0 0 auto}
.newsbar .item{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.newsbar .item b{color:var(--peach);font-weight:600;margin-right:.4rem}
.newsbar .more{flex:0 0 auto;color:var(--peach);text-decoration:none;font-weight:600;font-size:.8rem}
.newsbar .more:hover{color:#fff}

/* ---------- 4b. The navy gutter -------------------------------------------
   Never let paper show in the bottom-left corner. The stripe lives on the
   container, not on the sticky aside, so it is always as tall as the content
   column and always meets the navy footer. --nav-w is the single source of
   truth for the sidebar width; change it in one place. */
.sitewrap{
  background-image:linear-gradient(to right,var(--ink3) 0,var(--ink3) var(--nav-w),transparent var(--nav-w));
  background-repeat:no-repeat;
}
/* the aside is now transparent: the stripe behind it does the painting, so there
   is no seam where the element ends. */
.sitewrap aside{background:transparent}


/* ---------- 5. Layout, sidebar, main ---------------------------------------
   FIXED: `min-height:100vh` and `height:100vh` became dvh, so mobile browser
   chrome no longer causes a scroll jump.
   FIXED: the sidebar is now --ink3 with a right hairline, so masthead, newsbar
   and sidebar are three separable planes instead of one navy field. This is the
   shell-level answer to the navy stack; pages no longer need a workaround.
   REMOVED: `.sitewrap aside .logo` rules. The sidebar logo was removed
   site-wide on August 5 and dead rules invite putting it back. */
.sitewrap{display:flex;min-height:100dvh}
.sitewrap aside{
  width:var(--nav-w);flex:0 0 var(--nav-w);
  background:var(--ink3);
  border-right:1px solid var(--hairline);
  color:#e8eaf0;
  position:sticky;top:0;height:100dvh;overflow-y:auto;
  padding:1.1rem 0 2rem;
}
.sitewrap aside .grp{font-family:var(--sans);text-transform:uppercase;letter-spacing:.13em;font-size:.66rem;color:var(--steel2);padding:1rem 1.3rem .35rem}
.sitewrap aside button{display:block;width:100%;text-align:left;background:none;border:none;color:#cfd4e2;font-family:var(--sans);font-size:.83rem;padding:.42rem 1.3rem;cursor:pointer;border-left:3px solid transparent;transition:background .12s,color .12s}
.sitewrap aside button:hover{background:#22345a;color:#fff}
.sitewrap aside button[aria-current="page"]{background:#22345a;color:#fff;border-left-color:var(--accent2);font-weight:600}
.sitewrap aside .navtoggle{display:flex;align-items:center;justify-content:space-between;gap:.4rem;width:100%;text-align:left;background:none;border:none;cursor:pointer;color:var(--steel2);font-family:var(--sans);text-transform:uppercase;letter-spacing:.13em;font-size:.66rem;padding:1rem 1.3rem .4rem}
.sitewrap aside .navtoggle:hover{color:#fff}
.sitewrap aside .navtoggle .car{transition:transform .2s;font-size:.62rem}
.sitewrap aside .navtoggle[aria-expanded="true"] .car{transform:rotate(90deg)}
/* FIXED: collapsed submenus were only visually hidden, so keyboard users tabbed
   into invisible buttons. visibility removes them from the tab order. */
.sitewrap aside .navsub{overflow:hidden;max-height:0;visibility:hidden;transition:max-height .3s ease,visibility .3s}
/* no max-height ceiling on an open dropdown. It was 1400px, which the op-eds
   list is now close to; a couple more stories and it would have clipped silently.
   The aside scrolls, so an unbounded list is safe. */
.sitewrap aside .navsub.open{max-height:none;visibility:visible}

.briefmain{flex:1;min-width:0}
/* One content measure, from --measure. The old file had .wrap at 820px while the
   house rule said 900px; that disagreement is gone. */
.wrap{max-width:var(--measure);margin:0 auto;padding:2rem 1.4rem 6rem}

/* ---------- 6. Footer ------------------------------------------------------
   STRUCTURAL CHANGE: the footer now sits OUTSIDE <main> and outside .sitewrap.
   See CHANGES.md. That is what stopped an extraction starting at </main> from
   silently dropping it, and it is correct landmark structure. */
/* LEGACY ALIAS, for pages not yet converted. Delete once all 56 use .sitefooter.
   Scoped :not(.sitefooter) and placed BEFORE the new block on purpose. Unscoped,
   `footer.site .footabout` (0,2,1) outranked `footer.sitefooter .footabout` (0,2,0) and
   came later in the file, so it silently won on colour and font: navy-on-navy text
   at 1.27:1. That is the same class of bug as the August 5 headline. */
footer.site:not(.sitefooter){border-top:1px solid var(--rule);margin-top:3rem;padding:2rem 0 .5rem;font-family:var(--sans);color:var(--muted)}
footer.site:not(.sitefooter) .frow{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between}
footer.site:not(.sitefooter) h5{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ink2);margin:0 0 .6rem}
footer.site:not(.sitefooter) a{color:var(--ink2);text-decoration:none;font-size:.86rem;display:block;margin:.28rem 0}
footer.site:not(.sitefooter) a:hover{color:var(--accent)}
footer.site:not(.sitefooter) .social{display:flex;gap:.6rem;margin:.2rem 0 .4rem;flex-wrap:wrap}
footer.site:not(.sitefooter) .social a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid var(--rule);border-radius:9px;color:var(--ink2);margin:0;transition:.15s}
footer.site:not(.sitefooter) .social a:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
footer.site:not(.sitefooter) .social svg{width:18px;height:18px;fill:currentColor}
footer.site:not(.sitefooter) .copy{font-size:.76rem;color:var(--muted);margin-top:1.4rem;border-top:1px solid var(--rule);padding-top:1rem}
footer.site:not(.sitefooter) .copy a{display:inline;color:var(--accent)}
footer.site:not(.sitefooter) .footabout{font-size:.9rem;color:var(--ink2);max-width:640px;line-height:1.5;margin:0 0 1.4rem}
footer.site:not(.sitefooter) .footabout a{display:inline;font-weight:600;color:var(--accent)}


/* NAVY FOOTER (v2.1). Two reasons.
   1. The sidebar is a navy column that stopped dead at the footer, and the paper
      footer started full width underneath it. That left a hard step on the left
      edge, which is the awkward cut-off. A navy footer continues the sidebar's
      colour straight down and off the page, so the column resolves instead of
      being sliced.
   2. It bookends the masthead. Navy at the top, navy at the bottom, paper in
      between, which is the plane logic the rest of the shell now follows.
   The footer is also serif now, in the house face, rather than sans. It reads as
   the end of a document rather than as UI. Sans is kept only for the small
   uppercase column headings, where it does signal navigation. */
footer.sitefooter{background:var(--ink);border-top:3px solid var(--accent2);font-family:var(--serif);color:var(--steel)}
footer.sitefooter .finner{max-width:var(--measure);margin:0 auto;padding:2.6rem 1.4rem 1.4rem}
footer.sitefooter:not(:has(.finner)){padding:2.6rem 1.4rem 1.4rem}
footer.sitefooter .footabout{font-size:1rem;color:#e8eaf0;max-width:640px;line-height:1.6;margin:0 0 1.6rem}
footer.sitefooter .footabout b{color:#fff}
footer.sitefooter .footabout a{display:inline;font-weight:600;color:var(--peach)}
footer.sitefooter .footabout a:hover{color:#fff}
footer.sitefooter .frow{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between}
/* the one place sans stays: these read as navigation, not prose */
footer.sitefooter h5{font-family:var(--sans);font-size:.7rem;text-transform:uppercase;letter-spacing:.13em;color:var(--peach);margin:0 0 .7rem}
footer.sitefooter a{color:var(--steel);text-decoration:none;font-size:.95rem;display:block;margin:.3rem 0}
footer.sitefooter a:hover{color:#fff}
footer.sitefooter .social{display:flex;gap:.6rem;margin:.2rem 0 .4rem;flex-wrap:wrap}
footer.sitefooter .social a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid rgba(255,255,255,.22);border-radius:9px;color:var(--steel);margin:0;transition:.15s}
footer.sitefooter .social a:hover{background:var(--peach);color:var(--ink);border-color:var(--peach)}
footer.sitefooter .social svg{width:18px;height:18px;fill:currentColor}
footer.sitefooter .copy{font-size:.84rem;color:#9aa6bd;margin-top:1.6rem;border-top:1px solid rgba(255,255,255,.16);padding-top:1.1rem;line-height:1.6}
footer.sitefooter .copy a{display:inline;color:var(--peach)}
footer.sitefooter .copy a:hover{color:#fff}
/* the live markup carries color:#5d6470 inline on .footattrib, which fails
   contrast on navy. Overridden here rather than editing the legal wording. */
footer.sitefooter .footattrib{color:#8e96ac !important;font-family:var(--serif);line-height:1.6}
footer.sitefooter .footattrib a{display:inline;color:#aebbd1}
footer.sitefooter .footattrib a:hover{color:var(--peach)}

/* ---------- 7. Shared content utilities ------------------------------------
   Kept because pages use them. The duplicate .kicker and the duplicate .donate
   block are gone; .donate now lives only in 4_bottom_scripts.html. */
.kicker{font-family:var(--sans);text-transform:uppercase;letter-spacing:.15em;font-size:.7rem;color:var(--accent2);font-weight:700}
.btnlink{display:inline-block;font-family:var(--sans);font-weight:600;font-size:.88rem;background:var(--ink);color:#fff;text-decoration:none;padding:.55rem 1rem;border-radius:8px;margin:.4rem .4rem .4rem 0}
.btnlink:hover{background:var(--accent)}
.score{display:inline-block;font-family:var(--sans);font-weight:700;font-size:.8rem;padding:.15rem .6rem;border-radius:20px}
.sc2{background:var(--s2b);color:var(--s2)}
.sc3{background:var(--s3b);color:var(--s3)}
.sc4{background:var(--s4b);color:var(--s4)}
.sc5{background:var(--s5b);color:var(--s5)}
.supportcard{background:var(--paper2);border:1px solid var(--rule);border-left:4px solid var(--accent);border-radius:0 10px 10px 0;padding:1.1rem 1.3rem;margin:2.2rem 0 .6rem}
.supportcard p{margin:.4rem 0 .6rem;font-size:1.02rem}
.fine{font-size:.95rem;color:var(--ink2);background:var(--paper2);border:1px solid var(--rule);border-left:4px solid var(--accent);border-radius:0 10px 10px 0;padding:.9rem 1.1rem;margin:1.8rem 0 .4rem;font-family:var(--sans);line-height:1.5}
.fine a{color:var(--accent);font-weight:600;text-decoration:none}
.disclaimer{font-family:var(--sans);font-size:.78rem;color:var(--muted);font-style:italic;margin-top:1.4rem;border-top:1px solid var(--rule);padding-top:1rem}
.backrow{margin:1.8rem 0 .4rem;font-family:var(--sans);font-size:.9rem}
.briefmain .wrap>p,.briefmain .wrap>ul,.briefmain .wrap>ol,.briefmain .wrap>h2,.briefmain .wrap>h3,.briefmain .wrap>blockquote,.briefmain .wrap>figure{max-width:40rem}
.briefmain .wrap>p,.briefmain .wrap>ul,.briefmain .wrap>ol{font-size:18px;line-height:1.62;margin:0 0 1.05em}
.briefmain .wrap>h2{font-size:1.2rem;margin-top:2rem;margin-bottom:.55rem}
.briefmain .wrap>h3{font-size:1.06rem}
main .page p,main .page>ul,main .page>ol{max-width:40rem}
.snap{margin:.4rem 0 1.4rem;display:grid;grid-template-columns:minmax(140px,180px) 1fr;gap:.6rem 1.4rem;max-width:46rem}
.snap dt,.snap dd{font-size:18px;line-height:1.5}
.snap dt{font-weight:700;color:var(--ink)}
.snap dd{margin:0}

/* ---------- 8. Accessibility, motion, print --------------------------------
   ADDED: a visible focus ring. Keyboard users had none on the navy sidebar.
   ADDED: reduced-motion guard, which also disables smooth scrolling.
   ADDED: print rules. People print these briefs and got the sidebar and the
   floating donate button on paper. */
.dpw-skip{position:absolute;left:-9999px;top:0;z-index:2000;background:var(--accent);color:#fff;padding:.6rem 1rem;border-radius:0 0 8px 0;font-family:var(--sans);font-weight:700}
.dpw-skip:focus{left:0}
:focus-visible{outline:3px solid var(--peach);outline-offset:2px}
.sitewrap aside :focus-visible{outline-color:var(--peach);outline-offset:-3px}
.newsbar :focus-visible,.topbanner :focus-visible{outline-color:var(--peach);outline-offset:2px}


/* ---------- 5b. Wide vs narrow nav ----------------------------------------
   The sidebar carries one item list and two presentations, so the two can never
   drift apart.
   WIDE (default): Beyond the Headlines is a dropdown, exactly as it was, and the
   four short groups render as static headings, also as they were. The single-row
   version of Beyond the Headlines is hidden.
   NARROW (the 860px block): the dropdown and the static-heading treatment are
   hidden, the four short groups fold, and Beyond the Headlines is one row that
   goes straight to the op-eds index. */
.sitewrap aside [data-narrow-only],.wrap aside [data-narrow-only]{display:none !important}

/* the four groups that were flat .grp headings before v2.3 look flat again here:
   no caret, no pointer, not focusable as a control, contents always visible. */
.sitewrap aside .navtoggle[data-flat-wide],.wrap aside .navtoggle[data-flat-wide]{
  cursor:default;pointer-events:none;
}
.sitewrap aside .navtoggle[data-flat-wide] .car,.wrap aside .navtoggle[data-flat-wide] .car{display:none}
.sitewrap aside .navsub[data-flat-wide],.wrap aside .navsub[data-flat-wide]{
  max-height:none;overflow:visible;visibility:visible;
}

/* The Menu button is desktop-hidden here, ABOVE the media query, on purpose.
   It used to sit below it: same specificity, later in the file, so it won at every
   width and no mobile menu ever appeared. Order is load-bearing. */
.sitewrap aside .navmenu-btn,.wrap aside .navmenu-btn{display:none}

@media(max-width:860px){
  /* ==========================================================================
     MOBILE MENU, rebuilt v2.2.
     What was wrong: the button sat on the right, because the live rule pushes it
     there with margin-left:auto. Opening it then revealed every group AND every
     submenu at once, about 50 pill-shaped items in a wrapping soup, because the
     live open-state rule sets .navsub{display:block} unconditionally. That is the
     chaos. It is also not a navigation: nothing is grouped visually, targets are
     .76rem pills, and there is no order to scan.
     What it is now: button on the LEFT, and one simple full-width list. Group
     headings are visible. The three long groups are collapsed accordions you open
     one at a time. Every row is a 44px target. Nothing wraps.
     ========================================================================== */
  .sitewrap{flex-direction:column;background-image:none}

  /* swap the two presentations */
  .sitewrap aside [data-wide-only],.wrap aside [data-wide-only]{display:none !important}
  .sitewrap aside [data-narrow-only],.wrap aside [data-narrow-only]{display:block !important}
  /* the four short groups fold again on a phone: undo the flat treatment */
  .sitewrap aside.nav-open .navtoggle[data-flat-wide],.wrap aside.nav-open .navtoggle[data-flat-wide]{
    cursor:pointer;pointer-events:auto;
  }
  .sitewrap aside.nav-open .navtoggle[data-flat-wide] .car,.wrap aside.nav-open .navtoggle[data-flat-wide] .car{display:inline}
  .sitewrap aside.nav-open .navsub[data-flat-wide]:not(.open),.wrap aside.nav-open .navsub[data-flat-wide]:not(.open){
    max-height:0;overflow:hidden;visibility:hidden;
  }

  .sitewrap aside,.wrap aside{
    position:static;width:100%;max-width:100vw;height:auto;flex:none;
    display:block;padding:0;
    background:var(--ink3);border-right:0;
    border-bottom:1px solid var(--hairline);
  }

  /* the button: LEFT aligned. margin-right:auto, never margin-left:auto. */
  .sitewrap aside .navmenu-btn,.wrap aside .navmenu-btn{
    display:inline-flex;align-items:center;gap:.5rem;
    margin:.55rem auto .55rem .8rem;
    background:var(--accent);color:#fff;border:0;border-radius:8px;
    padding:.6rem 1rem;font-weight:700;font-size:.95rem;line-height:1;cursor:pointer;
    font-family:var(--sans);min-height:44px;
  }

  /* closed: nothing but the button */
  .sitewrap aside>:not(.logo):not(.navmenu-btn),
  .wrap aside>:not(.logo):not(.navmenu-btn){display:none}

  /* open: one plain vertical list, full width */
  .sitewrap aside.nav-open>:not(.logo):not(.navmenu-btn),
  .wrap aside.nav-open>:not(.logo):not(.navmenu-btn){display:block}

  .sitewrap aside.nav-open .grp,.wrap aside.nav-open .grp{
    display:block;width:100%;
    font-family:var(--sans);text-transform:uppercase;letter-spacing:.13em;
    font-size:.64rem;color:var(--peach);
    padding:1rem .95rem .35rem;
    border-top:1px solid var(--hairline);margin-top:.2rem;
  }

  /* rows: full width, 44px, no pills, no wrapping */
  .sitewrap aside.nav-open button,.wrap aside.nav-open button{
    display:flex;align-items:center;width:100%;
    border-left:3px solid transparent;border-radius:0;
    margin:0;padding:.7rem .95rem;
    font-size:.95rem;min-height:44px;text-align:left;
  }
  .sitewrap aside.nav-open button[aria-current="page"],
  .wrap aside.nav-open button[aria-current="page"]{
    background:#22345a;color:#fff;border-left-color:var(--accent2);font-weight:600;
  }

  /* the three long groups stay accordions. THIS is the fix for the soup: the live
     rule opened every submenu at once; this opens only the one you tapped. */
  .sitewrap aside.nav-open .navtoggle,.wrap aside.nav-open .navtoggle{
    display:flex;align-items:center;justify-content:space-between;
    width:100%;border-radius:0;margin:0;
    padding:.85rem .95rem;min-height:44px;
    font-family:var(--sans);text-transform:uppercase;letter-spacing:.13em;
    font-size:.64rem;color:var(--peach);
    border-top:1px solid var(--hairline);
  }
  .sitewrap aside.nav-open .navsub,.wrap aside.nav-open .navsub{
    display:block;max-height:0;overflow:hidden;visibility:hidden;
    background:#16274a;
  }
  .sitewrap aside.nav-open .navsub.open,.wrap aside.nav-open .navsub.open{
    max-height:none;overflow:visible;visibility:visible;
  }
  /* rows nested inside a fold */
  .sitewrap aside.nav-open .navsub button,.wrap aside.nav-open .navsub button{
    padding-left:1.6rem;font-size:.9rem;color:#cfd4e2;
  }
  /* A standalone top-level row, such as Beyond the Headlines, sits among the fold
     headings, so it must look like one: same face, size, colour, spacing and
     target. It simply has no caret, because it goes straight to the page instead
     of opening. Styled after the .navtoggle rule above so it wins. */
  .sitewrap aside.nav-open>button[data-p],.wrap aside.nav-open>button[data-p]{
    font-family:var(--sans);text-transform:uppercase;letter-spacing:.13em;
    font-size:.64rem;color:var(--peach);
    padding:.85rem .95rem;min-height:44px;
    border-top:1px solid var(--hairline);border-left:0;
    background:none;
  }
  .sitewrap aside.nav-open>button[data-p]:hover,.wrap aside.nav-open>button[data-p]:hover{
    color:#fff;background:#22345a;
  }
  .sitewrap aside.nav-open>button[data-p][aria-current="page"],
  .wrap aside.nav-open>button[data-p][aria-current="page"]{
    background:#22345a;color:#fff;
  }
}

@media(prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

@media(max-width:560px){
  .snap{grid-template-columns:1fr;gap:.02rem}
  .snap dt{margin-top:.55rem}
}

@media print{
  .topbanner,.newsbar,.sitewrap aside,.donate,.donate-callout,.sharebar,.dpw-skip{display:none !important}
  .sitewrap{display:block;min-height:0}
  body{background:#fff;color:#000}
  .wrap{max-width:none;padding:0}
  /* the footer is navy on screen; print it on white so it does not eat a cartridge */
  .sitefooter,footer.site{background:#fff !important;color:#000 !important;border-top:1px solid #999;margin-top:1.5rem}
  .sitefooter a,.sitefooter .copy,footer.sitefooter .footabout,footer.sitefooter .footattrib{color:#000 !important}
  footer.sitefooter h5{color:#000 !important}
  a[href^="http"]:after{content:" (" attr(href) ")";font-size:.75em;word-break:break-all}
  h2,h3{break-after:avoid}
  blockquote,table,figure{break-inside:avoid}
}