/* The Bridge — the public reading pages.
   ------------------------------------------------------------------------
   A separate stylesheet, loaded only by the two Bridge views, because none of
   this is wanted on the other twenty pages of the site. Every colour, radius
   and shadow is a token from site.css: this file adds the shapes The Bridge
   needs and invents no new palette. */

/* ---- masthead ------------------------------------------------------- */
/* White, not the deep gradient the other page heroes use. A masthead is a
   nameplate above the writing, and a hero would make the section feel like a
   landing page selling something. */
.bridge-mast{background:#fff;border-bottom:1px solid var(--line);
  padding:54px 0 36px;text-align:center;}
.bridge-mast .mast{font-family:'Newsreader',Georgia,serif;font-weight:600;color:var(--ink);
  line-height:1;font-size:clamp(44px,9vw,86px);letter-spacing:-.03em;margin:0;}
.bridge-mast .line{font-family:'Newsreader',Georgia,serif;font-style:italic;
  color:var(--purple-deep);font-size:clamp(17px,2.4vw,22px);margin:14px 0 0;}
.bridge-mast .sub{color:var(--muted);font-size:14px;margin:8px 0 0;letter-spacing:.01em;}

/* ---- filters -------------------------------------------------------- */
.bridge-filters{background:#fff;border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20;}
.chiprow{display:flex;gap:8px;overflow-x:auto;padding:12px 0;scrollbar-width:none;}
.chiprow::-webkit-scrollbar{display:none;}
.chip{flex:0 0 auto;border:1px solid var(--line);background:#fff;color:var(--body);
  padding:7px 15px;border-radius:999px;font-size:13.5px;font-weight:600;
  font-family:inherit;white-space:nowrap;text-decoration:none;}
.chip:hover{border-color:var(--purple);color:var(--purple-deep);text-decoration:none;}
.chip[aria-current=true]{background:var(--purple-deep);border-color:var(--purple-deep);color:#fff;}
.chiprow.cols .chip[aria-current=true]{background:var(--purple-soft);
  color:var(--purple-deep);border-color:var(--purple-soft);}
.findrow{display:flex;gap:10px;padding-bottom:12px;flex-wrap:wrap;align-items:center;}
.findrow input,.findrow select{font:inherit;font-size:14px;padding:9px 12px;
  border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--body);min-width:0;}
.findrow input[type=search]{flex:1;min-width:190px;}

/* ---- feed ----------------------------------------------------------- */
.bridge-feed{padding:30px 0 46px;}
.bridge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:26px;}
.bcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:block;color:inherit;box-shadow:var(--shadow-sm);
  transition:box-shadow .15s,transform .15s;}
.bcard:hover{box-shadow:var(--shadow);transform:translateY(-2px);text-decoration:none;}
.bcard .ph{aspect-ratio:16/9;background:var(--grad-deep);display:block;
  object-fit:cover;width:100%;}
.bcard .bd{padding:16px 18px 18px;}
.bcard h3{font-family:'Newsreader',Georgia,serif;font-weight:500;font-size:21px;
  line-height:1.22;margin:0 0 7px;letter-spacing:-.01em;color:var(--ink);}
.bcard p{margin:0;font-size:14px;color:var(--body);line-height:1.5;}
.bcard .foot{margin-top:13px;padding-top:11px;border-top:1px solid var(--line);
  display:flex;gap:7px;flex-wrap:wrap;}

/* The rubric: column, pillar, date. The line that tells a scanner what kind
   of thing this is before they read the headline. */
.rub{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:11px;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;color:var(--purple);margin-bottom:9px;}
.rub .pill{color:var(--muted);font-weight:700;}
.rub .dot{color:var(--line);}
.rub time{color:var(--muted);font-weight:600;letter-spacing:.04em;}
.btag{font-size:11.5px;font-weight:600;color:var(--muted);background:var(--paper-2);
  padding:3px 9px;border-radius:999px;}
.bridge-more{text-align:center;padding:10px 0 40px;}
.bridge-empty{text-align:center;padding:60px 20px;color:var(--muted);}
.bridge-empty h2{font-size:24px;}

/* ---- article -------------------------------------------------------- */
.bridge-article{background:#fff;padding:0 0 50px;}
.artwrap{max-width:720px;margin:0 auto;padding:0 20px;}
.artwrap .crumb{font-size:12.5px;color:var(--muted);padding:22px 0 0;}
.artwrap .crumb a{color:var(--muted);}
.bridge-article h1{font-size:clamp(30px,5vw,46px);margin:14px 0 12px;}
.artmeta{display:flex;gap:10px;flex-wrap:wrap;align-items:center;font-size:13px;
  color:var(--muted);margin-bottom:26px;}
.arthero{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius);
  margin-bottom:30px;background:var(--grad-deep);}

/* The question sits above the answer, in its own block, because a Q&A whose
   question is just the first paragraph reads like any other article. */
.qa-q{background:var(--purple-soft);border-radius:var(--radius);padding:20px 22px;margin-bottom:26px;}
.qa-q b{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--purple);margin-bottom:6px;}
.qa-q p{margin:0;font-family:'Newsreader',Georgia,serif;font-size:21px;line-height:1.3;color:var(--ink);}

.prose{font-size:17.5px;line-height:1.72;color:var(--body);overflow-wrap:anywhere;}
.prose p{margin:0 0 1.15em;}
.prose h2{font-size:27px;margin:1.6em 0 .5em;}
.prose h3{font-size:20px;margin:1.5em 0 .4em;}
.prose ul,.prose ol{margin:0 0 1.15em;padding-left:1.3em;}
.prose li{margin-bottom:.4em;}
.prose img{border-radius:var(--radius);margin:1.2em 0;}
.prose table{width:100%;border-collapse:collapse;font-size:15.5px;margin:1.4em 0;}
.prose th,.prose td{text-align:left;padding:9px 12px 9px 0;border-bottom:1px solid var(--line);}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;
  background:var(--paper-2);padding:2px 6px;border-radius:5px;}
.prose pre{background:var(--paper-2);padding:14px 16px;border-radius:var(--radius);overflow-x:auto;}
.prose pre code{background:none;padding:0;}
.prose blockquote{margin:1.6em 0;padding-left:20px;border-left:3px solid var(--purple-soft);
  font-family:'Newsreader',Georgia,serif;font-size:20px;font-style:italic;color:var(--purple-deep);}
.prose blockquote p:last-child{margin-bottom:0;}

.artfoot{margin-top:46px;border-top:1px solid var(--line);padding-top:30px;display:grid;gap:14px;}
.fcta{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;}
.fcta div{min-width:0;}
.fcta b{display:block;color:var(--ink);font-size:16px;margin-bottom:3px;}
.fcta p{margin:0;font-size:14px;color:var(--muted);}
/* The source goes last, after our own calls to action: our take is the thing
   worth reading and the link is the footnote, not the other way round. */
.artsource{font-size:13.5px;color:var(--muted);padding-top:6px;overflow-wrap:anywhere;}
.bridge-related{background:var(--paper);border-top:1px solid var(--line);padding:40px 0 54px;}
.bridge-related h2{font-size:22px;margin-bottom:20px;}

@media (max-width:620px){
  .fcta{flex-direction:column;align-items:flex-start;}
  .bridge-filters{position:static;}
}