/* [de]regulate: THE COLLAGE ZINE
   THESIS: a campaign that looks cut out and stuck down. White-bordered paper
     cut-outs on a blue pinstripe ground, every word that matters on a white
     plate. Refuses the category default: flag-blue hero, icon cards, a CTA.
   OWN-WORLD: ground #253d8f with diagonal pinstripes; yellow #f4cd2f for the rule
     and the one action; white plates with navy ink for logo, nav, headings and
     article text; red is reserved for the artwork's crossed-out objects. Bricolage
     Grotesque headlines, Hanken Grotesk text. No radius, soft contact shadows like paper lifted off the page.
   STORY: see a rule as an object, see it crossed out, read the issue, then act
     (media, contact).
   FIRST VIEWPORT (phone): logo on a white plate, nav as plates, then the first
     highlight as a full-width tilted cut-out with its headline plate overlapping
     the bottom edge; yellow rule under the highlights.
   SIGNATURE: every cut-out rests at a slight angle and straightens and lifts when
     touched or focused.
   Needs (env): THEME=deregulate  HEADER_LOGO=/themes/deregulate/logo.svg
     SITE_LANG=en  NAV_SECTIONS_LABEL=Issues  FEATURES=highlights,press,contact
   Fonts: Bricolage Grotesque and Hanken Grotesk, SIL Open Font License. */

@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 500 800; font-display: swap;
  src: url('/themes/deregulate/fonts/bricolage-latin.woff2') format('woff2');
  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: 'Bricolage Grotesque'; font-style: normal; font-weight: 500 800; font-display: swap;
  src: url('/themes/deregulate/fonts/bricolage-latin-ext.woff2') format('woff2');
  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: 'Hanken Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/themes/deregulate/fonts/hanken-latin.woff2') format('woff2');
  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: 'Hanken Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/themes/deregulate/fonts/hanken-latin-ext.woff2') format('woff2');
  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; }

/* Type, scale and shape do not change between the two grounds, so they live in one
   rule that applies in both; only colour is per ground. (They used to sit in the
   blue block alone, which left light mode on the base design's serif fonts.) */
:root:root {
  --ff-serif: 'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ff-sans: 'Bricolage Grotesque', 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  --fs-base: 1.125rem;
  --fs-lg: 1.3rem;
  --fs-h2: clamp(1.7rem, 1.2rem + 1.8vw, 2.4rem);
  --fs-h1: clamp(2.3rem, 1.4rem + 4.2vw, 4.2rem);
  --lh-tight: 1.04;
  --ls-head: -0.028em;
  --measure: 40rem;
  --radius: 0;
}

/* Specificity note: these blocks out-rank the base file's token selectors, so the
   theme wins however the stylesheets are ordered. Blue is the default ground
   whatever the visitor's system prefers (set DEFAULT_THEME=dark so the toggle
   agrees); white appears only when they choose it.

   ---- Blue ground (the base site's "dark") ---- */
:root:root:root:not([data-theme="light"]) {
  color-scheme: dark;
  --bg: #253d8f;
  --bg-1: #1f3380;
  --bg-2: #1a2c70;
  --text: #ffffff;
  --text-2: #d6def7;
  --text-3: #b0bdee;
  --line: rgba(255, 255, 255, .3);
  --line-2: rgba(255, 255, 255, .55);
  --gold: #f4cd2f;
  --gold-ink: #f4cd2f;
  --gold-hover: #ffe27a;
  --on-gold: #0f1a44;
  --plate: #1b2e78;
  --plate-lift: #2f4aab;
  --warn: #ffb36b;
  --ok: #9be5ae;
  --scrim: linear-gradient(to top, rgba(10, 18, 60, .9) 0%, rgba(10, 18, 60, 0) 70%);

  --lh-body: 1.6;
  --ls-body: 0;
  --fw-body: 400;

  /* theme-only */
  --dr-blue: #253d8f;
  --dr-ink: #0f1a44;
  --dr-yellow: #f4cd2f;
  --dr-plate-bg: #ffffff;
  --dr-plate-ink: #0f1a44;
  --dr-plate-hover: #f4cd2f;
  --dr-shadow: rgba(8, 14, 48, .55);
  --dr-band: rgba(8, 14, 48, .14);
  --dr-hair: rgba(255, 255, 255, .17);
}

/* ---- White ground (the roll-up's first page), only when the visitor picks it ---- */
:root:root[data-theme="light"] {
  color-scheme: light;
  /* A pale blue-tinted ground so the white reading sheet and white cut-out borders
     show up; the strong blue lives in the header and footer bands, like the roll-up. */
  --bg: #e8edfa; --bg-1: #253d8f; --bg-2: #1a2c70;
  --text: #0f1a44; --text-2: #34406e; --text-3: #4a5683;
  --line: #bcc6e6; --line-2: #7f8dc4;
  --gold: #f4cd2f; --gold-ink: #253d8f; --gold-hover: #1a2c70; --on-gold: #0f1a44;
  --plate: #dbe2f6; --plate-lift: #ffffff;
  --warn: #a24a00; --ok: #2d6a3f;
  --scrim: linear-gradient(to top, rgba(10, 18, 60, .85) 0%, rgba(10, 18, 60, 0) 70%);
  --lh-body: 1.6; --ls-body: 0; --fw-body: 400;
  --dr-blue: #253d8f; --dr-ink: #0f1a44; --dr-yellow: #f4cd2f;
  --dr-plate-bg: #253d8f; --dr-plate-ink: #ffffff; --dr-plate-hover: #f4cd2f;
  --dr-shadow: rgba(15, 26, 68, .42);
  --dr-band: rgba(37, 61, 143, .07); --dr-hair: rgba(37, 61, 143, .12);
}

/* ---- The pinstripe ground ---- */
html body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    repeating-linear-gradient(115deg, var(--dr-hair) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(115deg, var(--dr-band) 0 34px, transparent 34px 68px);
}
:root :focus-visible { outline-color: var(--dr-yellow); }
:root[data-theme="light"] :focus-visible { outline-color: var(--dr-blue); }

:root h1, :root h2, :root h3 { font-weight: 800; font-optical-sizing: auto; }
:root .title-display { text-transform: none; letter-spacing: var(--ls-head); }

/* ---- Header: logo on a white plate, links as plates, a yellow rule under ---- */
:root header.site { background: var(--bg-1); border-bottom: 6px solid var(--dr-yellow); margin-bottom: var(--s7); }
:root header.site .bar { padding-block: var(--s5); }
:root .logo-img { height: 2.6rem; width: auto; background: #fff; padding: .55rem .8rem; box-sizing: content-box; }
:root header.site nav { gap: var(--s2) var(--s3); }
:root header.site nav a, :root header.site nav summary {
  display: inline-flex; align-items: center; min-height: var(--tap);
  background: var(--dr-plate-bg); color: var(--dr-plate-ink);
  padding: .45rem .75rem; font: 700 var(--fs-sm)/1.2 var(--ff-sans); letter-spacing: 0; text-decoration: none;
}
:root header.site nav a:hover, :root header.site nav a.router-link-active, :root header.site nav .menu[open] summary, :root header.site nav summary:hover {
  background: var(--dr-ink); color: #fff;
}
:root header.site nav a.router-link-active { box-shadow: inset 0 -3px 0 #fff; }
:root header.site .find { background: var(--dr-yellow); color: var(--dr-ink); }
:root header.site .menu .drop { background: var(--dr-plate-bg); border: 0; box-shadow: 0 6px 14px var(--dr-shadow); gap: var(--s2); padding: var(--s3); }
:root header.site .menu .drop a { background: none; padding: .45rem .5rem; }
:root header.site .menu .drop a:hover { background: var(--dr-ink); color: #fff; }

/* ---- Footer: the roll-up's foot, a yellow rule over a deep blue band ---- */
html:root footer { max-width: none; margin: var(--s9) 0 0; background: var(--bg-2); border-top: 6px solid var(--dr-yellow);
  padding: var(--s6) max(var(--gutter), calc((100% - var(--width-wide)) / 2 + var(--gutter))) var(--gutter-bottom); }
html:root footer a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
:root footer a:hover { color: var(--dr-yellow); }
:root[data-theme="light"] footer a:hover { color: var(--dr-blue); }

/* ---- Labels are plates ---- */
:root .chip { background: var(--dr-plate-bg); color: var(--dr-plate-ink); font-family: var(--ff-sans); }
:root .chip::after { border-top-color: var(--dr-plate-bg); }
:root .btn { font-family: var(--ff-sans); }

/* ---- Cut-outs: pictures with a white border, tilted, lifting on touch ---- */
:root .card, :root .grid-tight > * { background: none; }
:root .card { overflow: visible; }
:root .card img, :root .highlights img, :root .leadimg img, :root .intro figure img {
  border: 6px solid #fff; background: #fff; box-shadow: 0 6px 14px var(--dr-shadow);
  transform: rotate(-1deg); transition: transform .18s ease, box-shadow .18s ease;
}
:root .grid > .card:nth-child(even) img, :root .highlights article:nth-child(even) img { transform: rotate(1deg); }
:root .card a:hover img, :root .card a:focus-visible img, :root .highlights a:hover img, :root .highlights article:hover img {
  transform: rotate(0) translate(-2px, -2px); box-shadow: 0 14px 26px var(--dr-shadow);
}
:root .card .card-body { padding: var(--s4) 0 0; }
:root .grid > li > a img {
  border: 6px solid #fff; background: #fff; box-shadow: 0 6px 14px var(--dr-shadow);
  transform: rotate(-1deg); transition: transform .18s ease, box-shadow .18s ease;
}
:root .grid > li:nth-child(even) > a img { transform: rotate(1deg); }
:root .grid > li > a:hover img, :root .grid > li > a:focus-visible img { transform: rotate(0) translate(-2px, -2px); box-shadow: 0 14px 26px var(--dr-shadow); }
:root .grid > li > a h2 { color: var(--text); }

/* ---- Highlights: the first is the hero, headlines sit on plates ---- */
:root .highlights { gap: var(--s7) var(--s6); border-bottom: 6px solid var(--dr-yellow); padding-bottom: var(--s8); margin-bottom: var(--s8); }
:root .highlights article:first-child { grid-column: 1 / -1; }
:root .highlights article:first-child img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; max-height: 80vh; }
@media (min-width: 48rem) {
  :root .highlights article:first-child img { aspect-ratio: 16 / 9; }
}
:root .highlights h2 {
  display: inline; background: var(--dr-plate-bg); color: var(--dr-plate-ink);
  padding: .08em .4em; line-height: 1.5; font-size: var(--fs-h2);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
:root .highlights article:first-child h2 { display: block; width: max-content; max-width: 92%; margin: -1.6rem 0 0 var(--s4); position: relative; font-size: var(--fs-h1); line-height: 1.12; padding: .12em .4em .18em; }
:root .highlights p { color: var(--text); margin: var(--s4) 0; max-width: 34rem; }
:root .highlights .more {
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--s5);
  background: var(--dr-yellow); color: var(--dr-ink); font: 800 var(--fs-sm)/1 var(--ff-sans);
  text-decoration: none; box-shadow: 0 3px 8px var(--dr-shadow);
}
:root .highlights .more:hover { background: #ffe27a; transform: translate(-1px, -1px); }

/* ---- Forms: fields are white plates, the action is the yellow button ---- */
:root form input:not(.trap), :root form textarea { background: #fff; color: var(--dr-ink); border: 1px solid var(--line-2); }
:root form button[type="submit"] {
  background: var(--dr-yellow); color: var(--dr-ink); border: 0; font: 800 var(--fs-sm)/1 var(--ff-sans);
  box-shadow: 0 3px 8px var(--dr-shadow);
}
:root form button[type="submit"]:hover { background: #ffe27a; }

/* ---- Article headlines keep the sentence case of the logo ---- */
:root article h1 { text-transform: none; }

/* ---- Reading: text sits on a white sheet, whichever ground the page has ---- */
:root .body {
  --text: #0f1a44; --text-2: #3d4a78; --gold-ink: #253d8f; --gold-hover: #1a2c70; --line: #d3d9ee; --line-2: #aab4d8;
  /* The base file's aliases are computed on :root, so changing --text here is not
     enough: restate the ones components actually read. */
  --ink: #0f1a44; --ink-2: #3d4a78; --mark: #253d8f; --rule: #d3d9ee;
  background: #fff; color: var(--text); padding: var(--s6) var(--s5) var(--s7);
  box-shadow: 0 8px 18px var(--dr-shadow);
  overflow-wrap: break-word;
}
/* On the article page the sheet is also .measure (its own side padding is the
   gutter); everywhere else the sheet is a plain box and needs its own. */
:root .body.measure { padding-inline: var(--gutter); }
@media (min-width: 48rem) {
  :root .body:not(.measure) { padding-inline: var(--s7); }
  :root .body.measure { padding-inline: max(var(--gutter), var(--s7)); }
}
:root .body > :first-child { margin-top: 0; }
:root .body > :last-child { margin-bottom: 0; }
:root .body img, :root .body video, :root .body iframe, :root .body table { max-width: 100%; height: auto; }
:root .body figure { margin-inline: 0; }
:root .body blockquote { margin-inline: 0; }
:root .body ul, :root .body ol { padding-left: 1.4em; }
:root .body a { color: var(--dr-blue); }
:root .body blockquote::before { background: var(--dr-yellow); height: 4px; width: 4rem; }

/* ---- Section page: the issue's own collage, then its listing ---- */
:root .intro figure { margin: 0 0 var(--s6); }
:root .section-head .chip { font-size: var(--fs-sm); }

@media (max-width: 34rem) {
  :root .logo-img { height: 2.1rem; }
  :root .highlights article:first-child h2 { margin-left: var(--s3); }
}

/* ======================= Second pass (finish review) ======================= */

/* ---- Every title is a plate; yellow stays for the one action ---- */
:root .card h2, :root .grid > li > a h2 {
  display: inline; background: var(--dr-plate-bg); color: var(--dr-plate-ink);
  padding: .08em .4em; line-height: 1.5; font-size: var(--fs-h3);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
:root main > h1, :root .section-head h1, :root .intro h1 {
  display: block; width: max-content; max-width: 100%;
  background: var(--dr-plate-bg); color: var(--dr-plate-ink);
  padding: .1em .4em .14em; line-height: 1.12; font-size: var(--fs-h2); letter-spacing: var(--ls-head);
  text-transform: none;
}
:root .section-head h1.chip::after { content: none; }
:root:root:root:root .kicker {
  display: inline-block; background: var(--dr-plate-bg); color: var(--dr-plate-ink);
  padding: .3rem .55rem; letter-spacing: .06em;
}
:root .byline > *:not(:last-child)::after { content: none; }
:root .byline { gap: var(--s2) var(--s4); }

/* ---- Cut-outs lift on focus and touch too, not only on hover ---- */
:root .highlights article:focus-within img, :root .highlights article:active img,
:root .card a:active img, :root .grid > li > a:active img {
  transform: rotate(0) translate(-2px, -2px); box-shadow: 0 14px 26px var(--dr-shadow);
}

/* ---- Robust to imperfect art: pictures are cropped to a fixed shape ---- */
:root .highlights article:not(:first-child) img, :root .grid > li > a img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
:root .highlights article { display: flex; flex-direction: column; align-items: flex-start; }
:root .highlights article > picture { display: block; width: 100%; }
:root .highlights .more { margin-top: auto; }

/* ---- The article opener, rebuilt as a cut-out with a title plate ---- */
/* :root:root throughout: the article's own scoped styles are specific and the
   theme must not depend on which stylesheet loads last. */
:root:root main:has(> article > .opener) { margin-top: 0; }
:root:root .opener { background: none; border-bottom: 0; padding-block: var(--s6) var(--s5); margin-bottom: var(--s6); }
:root:root .poster .over { position: static; background: none; color: var(--text); padding: 0; display: block; }
:root:root .poster .over header.measure { max-width: none; padding: 0 0 0 var(--s4); margin-top: -2.4rem; position: relative; }
:root:root .poster .hero figure { margin: 0; }
:root:root .poster .hero img {
  aspect-ratio: 16 / 10; min-height: 0; max-height: 34rem; width: 100%; object-fit: cover;
  border: 6px solid #fff; background: #fff; box-shadow: 0 6px 14px var(--dr-shadow); transform: rotate(-.6deg);
}
/* The kicker is a small plate above the title; the title itself is an inline
   plate, so a long headline stacks as one plate per line, like the roll-up. */
:root:root:root .poster .kicker { display: block; width: max-content; margin: 0 0 var(--s2); }
:root:root .poster h1 {
  display: inline; margin: 0; padding: .06em .4em;
  background: var(--dr-plate-bg); color: var(--dr-plate-ink);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  text-shadow: none; text-transform: none; font-size: var(--fs-h1); line-height: 1.38;
}
:root:root .poster .standfirst { color: var(--text-2); opacity: 1; margin: var(--s4) var(--s4) 0; }
:root:root .poster .hero { padding-inline: var(--gutter); }
:root:root .poster .under { padding-inline: var(--gutter); max-width: var(--width-wide); }

@media (max-width: 40rem) {
  :root .body { box-shadow: none; }
  :root:root .poster .over header.measure { padding-left: var(--s3); }
  :root:root .poster .standfirst { margin-inline: var(--s3); }
}

/* ---- Phone header: all four plates and the toggle on one row ---- */
@media (max-width: 34rem) {
  :root header.site .bar { padding-block: var(--s4); gap: var(--s3); }
  :root header.site .right { gap: var(--s2); }
  :root header.site nav { gap: var(--s2); }
  :root header.site nav a, :root header.site nav summary { padding: 0 .55rem; font-size: .8125rem; }
}

/* ======================= White ground, designed (light only) ======================= */

/* Header: the solid blue band with the white logo plate and the yellow rule,
   as on the roll-up. Its links stay white plates, so they read on the blue. */
:root[data-theme="light"] header.site {
  --text: #fff; --text-2: #d6def7; --text-3: #b0bdee; --line: rgba(255,255,255,.3); --line-2: rgba(255,255,255,.55);
  --dr-plate-bg: #fff; --dr-plate-ink: #0f1a44; --dr-shadow: rgba(8, 14, 48, .55);
  --ink: #fff; --ink-2: #d6def7; --mark: #fff; --rule: rgba(255,255,255,.3);
  background: var(--dr-blue); color: #fff;
}
:root[data-theme="light"] header.site .themer { color: #fff; }
:root[data-theme="light"] header.site :focus-visible { outline-color: var(--dr-yellow); }
:root[data-theme="light"] header.site .menu .drop a:hover { background: var(--dr-ink); color: #fff; }

/* Footer: the deep blue band under the yellow rule, white ink. */
:root[data-theme="light"] footer {
  --text: #fff; --text-2: #d6def7; --text-3: #b0bdee; --line: rgba(255,255,255,.3);
  --ink: #fff; --ink-2: #d6def7; --mark: #fff; --rule: rgba(255,255,255,.3);
  background: var(--bg-2); color: #fff;
}
:root[data-theme="light"] footer a:hover { color: var(--dr-yellow); }
:root[data-theme="light"] footer :focus-visible { outline-color: var(--dr-yellow); }

/* Cut-outs: a white border vanishes on a pale page, so each gets a thin blue edge
   and a deeper shadow, like paper on a light table. */
:root[data-theme="light"] .card img, :root[data-theme="light"] .highlights img, :root[data-theme="light"] .leadimg img,
:root[data-theme="light"] .intro figure img, :root[data-theme="light"] .grid > li > a img, :root[data-theme="light"] .poster .hero img {
  box-shadow: 0 0 0 1px rgba(37, 61, 143, .35), 0 8px 16px var(--dr-shadow);
}
:root[data-theme="light"] .card a:hover img, :root[data-theme="light"] .card a:focus-visible img, :root[data-theme="light"] .highlights a:hover img,
:root[data-theme="light"] .highlights article:hover img, :root[data-theme="light"] .highlights article:focus-within img,
:root[data-theme="light"] .grid > li > a:hover img, :root[data-theme="light"] .grid > li > a:focus-visible img {
  box-shadow: 0 0 0 1px rgba(37, 61, 143, .45), 0 16px 28px var(--dr-shadow);
}
/* Plates are solid blue with a hard offset shadow; the action is yellow with a navy edge. */
:root[data-theme="light"] .highlights h2, :root[data-theme="light"] .card h2, :root[data-theme="light"] .grid > li > a h2,
:root[data-theme="light"] main > h1, :root[data-theme="light"] .section-head h1, :root[data-theme="light"] .intro h1,
:root[data-theme="light"] .poster h1, :root[data-theme="light"] .kicker, :root[data-theme="light"] .chip {
  color: #fff;
}
:root[data-theme="light"] .highlights .more, :root[data-theme="light"] form button[type="submit"] {
  box-shadow: 0 0 0 2px var(--dr-ink), 3px 4px 0 var(--dr-ink);
}
:root[data-theme="light"] .highlights .more:hover, :root[data-theme="light"] form button[type="submit"]:hover { background: #ffe27a; }
:root[data-theme="light"] .highlights { border-bottom-color: var(--dr-yellow); }
:root[data-theme="light"] .highlights p { color: var(--text); }
:root[data-theme="light"] form input:not(.trap), :root[data-theme="light"] form textarea { border: 2px solid var(--dr-blue); }
/* The reading sheet: white on the tinted ground, blue top edge. */
:root[data-theme="light"] .body { box-shadow: 0 0 0 1px rgba(37, 61, 143, .3), 0 8px 18px var(--dr-shadow); border-top: 6px solid var(--dr-blue); }
@media (max-width: 40rem) {
  :root[data-theme="light"] .body { box-shadow: 0 0 0 1px rgba(37, 61, 143, .3); }
}

/* ======================= Public a11y fixes ======================= */
/* The toggle is a 32px icon; it gets a 44px box and gives the extra back as
   negative margin, so the header row is the height it was. */
:root header.site .themer { width: 44px; height: 44px; margin: -6px; }
:root header.site .themer::after { inset: 0; }

/* Skip link: a white plate with navy ink and the yellow offset, like the nav. */
html:root a.skip { background: #fff; color: var(--dr-ink); border: 0; box-shadow: 0 0 0 2px var(--dr-ink), 3px 4px 0 var(--dr-yellow); font-family: var(--ff-sans); font-weight: 800; }