/* ============================================================
   THE RANIA POST : Washington Post style broadsheet
   Light + dark mode. One stylesheet for the whole site.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=UnifrakturCook:wght@700&family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&family=Libre+Franklin:ital,wght@0,400;0,600;0,700;0,800;1,400&display=swap');

:root {
  --bg:        #ffffff;
  --surface:   #ffffff;
  --ink:       #121212;
  --ink-soft:  #2b2b2b;
  --muted:     #6b6b6b;
  --rule:      #d6d6d6;
  --rule-bold: #121212;
  --accent:    #1455a0;   /* WaPo link blue */
  --kicker:    #c8102e;   /* section red */
  --brand:     #6d466e;   /* Random Post plum : button accent */
  --tag:       #444;
  --maxw:      1220px;
  --serif:     Georgia, 'Times New Roman', serif;
  --display:   'Playfair Display', Georgia, serif;
  --label:     'Libre Franklin', 'Helvetica Neue', Arial, sans-serif;
  --black:     'UnifrakturCook', Georgia, serif;
}

[data-theme="dark"] {
  --bg:        #0d0e10;
  --surface:   #15171a;
  --ink:       #ededed;
  --ink-soft:  #d2d2d2;
  --muted:     #9aa0a6;
  --rule:      #2c2f33;
  --rule-bold: #ededed;
  --accent:    #6fa8ff;
  --kicker:    #ff6470;
  --brand:     #b487b5;   /* lighter plum for dark mode */
  --tag:       #9aa0a6;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  line-height: 1.5;
  transition: background .25s ease, color .25s ease;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---------- Top utility bar ---------- */
.util {
  border-bottom: 1px solid var(--rule);
  font-family: var(--label);
  font-size: 12px;
  letter-spacing: .04em;
}
.util .wrap {
  display: flex; align-items: center; justify-content: space-between;
  height: 44px;
}
.util .date { color: var(--muted); text-transform: uppercase; }
.util .right { display: flex; align-items: center; gap: 18px; }
.util .subscribe {
  font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  background: var(--brand); color: #fff;
  border: 1px solid var(--brand); padding: 6px 12px; border-radius: 2px;
}
.util .subscribe:hover { opacity: .88; text-decoration: none; }

/* theme toggle */
.toggle {
  cursor: pointer; background: none; border: 1px solid var(--rule);
  color: var(--ink); border-radius: 999px; padding: 5px 12px;
  font-family: var(--label); font-size: 12px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 7px; letter-spacing:.03em;
}
.toggle:hover { border-color: var(--brand); color: var(--brand); }

/* readership counter pill (social proof) */
.readers {
  font-family: var(--label); font-size: 12px; font-weight: 600;
  color: var(--brand); border: 1px solid var(--brand);
  border-radius: 999px; padding: 3px 11px; letter-spacing: .03em;
  white-space: nowrap;
}
.readers b { font-weight: 800; }
.toggle .moon { display: none; }
[data-theme="dark"] .toggle .sun { display: none; }
[data-theme="dark"] .toggle .moon { display: inline; }

/* ---------- Masthead ----------
   A paper prints its full nameplate on the front and a smaller running head on the inside
   pages. Doing the same here keeps the index pages from reading as zoomed-in. */
.masthead { text-align: center; padding: 18px 0 8px; }
.masthead .nameplate {
  font-family: var(--black);
  font-weight: 700;
  font-size: clamp(30px, 4vw, 46px);
  line-height: .95;
  letter-spacing: .01em;
  color: var(--ink);
  display: inline-block;
}
body.page-front .masthead { padding: 24px 0 10px; }
body.page-front .masthead .nameplate { font-size: clamp(38px, 6.4vw, 72px); }
.masthead .nameplate a:hover { text-decoration: none; }
.masthead .tagline {
  font-family: var(--label);
  font-size: 12.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted); margin-top: 12px;
}
.masthead .estd {
  font-family: var(--label); font-size: 11px; letter-spacing:.12em;
  text-transform: uppercase; color: var(--muted);
  display:flex; align-items:center; justify-content:center; gap:14px; margin-top:6px;
}
.masthead .estd:before, .masthead .estd:after{
  content:""; height:1px; width:46px; background:var(--rule);
}

/* ---------- Section nav ---------- */
nav.sections {
  border-top: 2px solid var(--rule-bold);
  border-bottom: 1px solid var(--rule-bold);
  font-family: var(--label);
}
nav.sections ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0;
}
nav.sections li { position: relative; }
nav.sections a {
  display: block; padding: 11px 18px;
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
}
nav.sections a:hover { color: var(--accent); text-decoration: none; }
nav.sections li + li:before {
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  height:14px; width:1px; background:var(--rule);
}
nav.sections a.active { color: var(--kicker); }

/* ---------- Front page grid ---------- */
.front { display: grid; grid-template-columns: 2.1fr 1.2fr 1fr; gap: 0; margin-top: 26px; }
/* The front page is two stories from 31 Aug 2026 (Anas: "the welcome page of the rania post
   should be just [the lead and one story] not a third row"), so the middle column has nothing in
   it. Left as a three-column grid it held its width open and put a column of white space between
   the lead and the story beside it, which read as a page that had failed to load rather than a
   page that had been cut. When the middle column is empty the grid becomes two columns. */
/* The front page lost its third column on 31 Aug 2026, so the grid is two columns: the lead with
   its rows underneath, and the cards beside it. The side column is held at a fixed width rather
   than a fraction: given a share of a two-column grid it came out half as wide again as it had
   been, which blew both card pictures up and ran the column 225px past the bottom of the lead,
   leaving a block of white under the left-hand story. Anas, 31 Aug 2026: "not the space like on
   here". */
.front { grid-template-columns: minmax(0,1fr) 344px; }
.front:has(> .col-rule:empty) { grid-template-columns: minmax(0,1fr); }

/* Both pictures in the side column are cropped to the same 4:3 window. Anas, pointing at the
   photograph on the art piece: "make sure the malak article's picture is at this size. crop it if
   needed." Cropping rather than fitting is what keeps the two cards the same height, which is what
   stops the column running long in the first place. */
.front .col-rule .story figure img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; height: auto; display: block; }
/* An upright picture is not cropped to that window, it is fitted inside it. Cropping a 978x1400
   pen drawing to 4:3 took the figure's legs and shoes off, and the shoes were the drawing. The
   frame stays the same height either way, so the column still cannot run long. `tall` is set by
   app.js once the image knows its own dimensions, because CSS cannot ask an image its shape. */
.front .col-rule .story figure img.tall { object-fit: contain; }
.front > .col-rule:empty { display: none; }

.front > * { padding: 0 26px; }
.front > *:first-child { padding-left: 0; }
.front > *:last-child  { padding-right: 0; }
.col-rule { border-left: 1px solid var(--rule); }

.kicker {
  font-family: var(--label); font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .07em; color: var(--kicker);
  margin: 0 0 8px;
}
.kicker.muted { color: var(--muted); }

/* Index typography sits a full step below the article page. An index is a list of ways in,
   so its job is to fit many stories in the eye at once; the reading size belongs to the
   article itself. (Anas, 22 Jul: the index pages were "too zoomed on the text".) */
.lead h1 {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(26px, 3.1vw, 40px); line-height: 1.06;
  margin: 3px 0 10px; letter-spacing: -.01em;
}
.lead .deck {
  font-family: var(--serif); font-size: 15.5px; line-height: 1.45;
  color: var(--ink-soft); margin: 0 0 12px;
}
.lead img, .story img { width: 100%; height: auto; display: block; filter: saturate(.92); }
/* Same cap on the front page's lead, for the same reason and at the column's own scale: a wide
   lead comes out around 390px tall here, so nothing already on the paper moves. */
.lead > figure img { max-height: 420px; width: auto; max-width: 100%; }
/* Society cards on the front carry a smaller, more compact image (Anas, Jul 6) */
.front .story.society figure { max-width: 190px; }
.front .story.society figure img { height: 132px; object-fit: cover; }
/* Society rail (right column): titled "Society"; text-only teasers, no images */
/* The rail's story keeps its section label. This rule used to hide it, and correctly: the rail
   was headed "Society" and every card under that heading was a Society piece, so a second label
   saying Society was noise. From 31 Aug 2026 the front page is the lead plus ONE story from any
   section and the heading is gone, so that one word is the only thing telling a reader where the
   story comes from. Hidden, the card opened on an illustration with nothing to place it. */
.society-rail .story .kicker { display: block; margin-bottom: 9px; }
/* The Society rail used to hide its photograph outright, which threw away the one picture the
   right-hand column had. It is shown now, set small so it sits beside the briefs below it
   rather than competing with the lead. Changed 23 Aug 2026. */
.society-rail .story figure { display: block; max-width: 100%; margin: 0 0 8px; }
.society-rail .story figure img { height: 128px; width: 100%; object-fit: cover; }
figure { margin: 0 0 14px; }

/* image wrapper + round inset portrait (white edges) */
.img-wrap { position: relative; line-height: 0; }
.img-wrap .hero-portrait {
  position: absolute; left: 16px; bottom: 16px;
  width: 104px; height: 104px; border-radius: 50%;
  object-fit: cover; filter: none;
  border: 5px solid #fff;
  box-shadow: 0 3px 12px rgba(0,0,0,.4);
}
.article .img-wrap .hero-portrait { width: 150px; height: 150px; left: 22px; bottom: 22px; border-width: 6px; }
[data-theme="dark"] .hero-portrait { box-shadow: 0 3px 14px rgba(0,0,0,.7); }

/* Society: square paparazzi zoom, bottom-right */
.img-wrap .hero-zoom {
  position: absolute; right: 16px; bottom: 16px;
  width: 104px; height: 104px; border-radius: 3px;
  object-fit: cover; filter: none;
  border: 4px solid #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,.45);
}
.article .img-wrap .hero-zoom { width: 148px; height: 148px; right: 22px; bottom: 22px; border-width: 5px; }
[data-theme="dark"] .img-wrap .hero-zoom { box-shadow: 0 4px 16px rgba(0,0,0,.75); }

/* two round faces on a poster */
.poster-faces { position: absolute; left: 18px; bottom: 18px; display: flex; gap: 12px; }
.poster-faces figure { margin: 0; text-align: center; }
.poster-faces img {
  width: 104px; height: 104px; border-radius: 50%; object-fit: cover; filter: none;
  border: 5px solid #fff; box-shadow: 0 3px 12px rgba(0,0,0,.45); display: block;
}
.poster-faces .nm {
  font-family: var(--label); font-size: 11px; font-weight: 700; color: #fff;
  margin-top: 6px; text-shadow: 0 1px 4px rgba(0,0,0,.9); letter-spacing: .02em;
}
/* poster hero shows in full */
.article .img-wrap.poster > img { width: 100%; height: auto; display: block; }
/* main hero image must fill the column, never overflow it (the round inset portrait keeps its fixed size) */
.article figure img { max-width: 100%; height: auto; }
.article .img-wrap > img:not(.hero-portrait):not(.hero-zoom) { width: 100%; display: block; }

/* people collage: two candids side by side (contained, never oversized) + a small cast strip */
.article .collage { margin: 0 0 10px; }
.article .collage .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.article .collage .pair img { width: 100%; height: 360px; object-fit: cover; object-position: center 28%; display: block; border-radius: 3px; }
.article .collage.single .pair { grid-template-columns: 1fr; max-width: 520px; }
.article .collage.dine .pair img { object-position: center 52%; }
.cast { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; margin: 14px 0 4px; }
.cast .who { display: flex; align-items: center; gap: 9px; }
.cast .who img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: 0 1px 6px rgba(0,0,0,.22); }
.cast .who .lab { font-family: var(--label); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ink); }
@media (max-width: 600px) { .article .collage .pair img { height: 260px; } }
figcaption {
  font-family: var(--label); font-size: 11.5px; color: var(--muted);
  margin-top: 6px; line-height: 1.35;
}

.byline {
  font-family: var(--label); font-size: 12px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em; margin: 10px 0 0;
}
.byline b { color: var(--ink); font-weight: 700; }

/* story blocks */
.story { padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--rule); }
.story:last-child { border-bottom: 0; margin-bottom: 0; }
.story h2 {
  font-family: var(--display); font-weight: 700;
  font-size: 17.5px; line-height: 1.14; margin: 3px 0 6px;
}
.story h3 {
  font-family: var(--display); font-weight: 700; font-size: 15.5px;
  line-height: 1.16; margin: 2px 0 5px;
}
.story p { margin: 0 0 6px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.45; }

/* right rail bulletin */
/* A rail item runs its whole standfirst, which was fine while the rail was wide and became a
   forty-word paragraph in a two-hundred-pixel measure once the thumbnails went in. A brief is a
   headline plus enough to decide by, so it is clamped: the reader gets a few lines and the story
   itself carries the rest. Added 23 Aug 2026. */
/* The clamp names the standfirst only. Written as a bare `p` it also caught the card's own
   kicker and its date line, and `display: -webkit-box` outranked the `display: none` that keeps
   the rail from printing "Society" twice under a heading that already says it. */
.front .brief p, .front .society-rail .story p:not(.kicker):not(.rowmeta) {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden;
}
.front .society-rail .story p:not(.kicker):not(.rowmeta) { -webkit-line-clamp: 4; }

/* Rows under the front-page lead. Text left, a fixed thumbnail right, which is the shape a
   broadsheet uses for the stories sitting beneath its front-page story, and it is what stops
   the lead column ending a third of the way down a page whose other two columns run on. */
.lead-more { margin-top: 26px; border-top: 2px solid var(--rule-bold); padding-top: 16px; }
.lead-more .lrow {
  display: grid; grid-template-columns: 1fr 168px; gap: 18px; align-items: start;
  padding: 14px 0; border-bottom: 1px solid var(--rule);
}
.lead-more .lrow:last-child { border-bottom: 0; padding-bottom: 0; }
.lead-more .lrow h3 {
  font-family: var(--display); font-weight: 700; font-size: 19px; line-height: 1.16; margin: 4px 0 6px;
}
.lead-more .lrow p { margin: 0 0 5px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.45; }
.lead-more .lrow .rowmeta { font-family: var(--label); font-size: 11.5px; color: var(--muted); }
.lead-more .lrow-thumb img {
  width: 168px; height: 112px; object-fit: cover; display: block; filter: saturate(.92);
}

/* The right-rail brief, which carried no picture at all and so read as a wall of type. */
.brief { display: grid; grid-template-columns: 1fr 84px; gap: 12px; align-items: start; }
.brief-thumb img { width: 84px; height: 62px; object-fit: cover; display: block; filter: saturate(.92); }

@media (max-width: 900px) {
  .lead-more .lrow { grid-template-columns: 1fr 120px; }
  .lead-more .lrow-thumb img { width: 120px; height: 80px; }
}
@media (max-width: 600px) {
  .lead-more .lrow { grid-template-columns: 1fr 96px; gap: 12px; }
  .lead-more .lrow-thumb img { width: 96px; height: 68px; }
  .lead-more .lrow h3 { font-size: 17px; }
}

.rail h2.rail-title {
  font-family: var(--label); font-size: 14px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em;
  border-bottom: 2px solid var(--rule-bold); padding-bottom: 8px; margin: 0 0 14px;
}
.brief { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.brief:last-child { border-bottom: 0; }
.brief .tag {
  font-family: var(--label); font-size: 11px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent);
}
.brief h4 { font-family: var(--display); font-weight: 700; font-size: 14.5px; line-height: 1.18; margin: 4px 0 4px; }
.brief p { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }

/* secondary row */
.row2 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; margin: 30px 0 0; border-top: 2px solid var(--rule-bold); padding-top: 22px; }
.row2 > * { padding: 0 26px; }
.row2 > *:first-child { padding-left: 0; }
.row2 > *:last-child  { padding-right: 0; }

/* ---------- Section index (/s/business, /s/society, ...) ----------
   Built on the Washington Post section shape: a lead story with a large photograph, then a
   single column of rows, each with the credit above the headline and a small fixed-ratio
   thumbnail on the right so the column lines up on one edge. */
.sec-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  border-bottom: 2px solid var(--rule-bold); margin: 26px 0 20px; padding-bottom: 10px;
}
.sec-head h1 {
  font-family: var(--label); font-weight: 800; font-size: 22px;
  text-transform: uppercase; letter-spacing: .1em; margin: 0; color: var(--ink);
}
.sec-head .count {
  font-family: var(--label); font-size: 11.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}

/* The two lines under a section title, so a reader landing on /s/business from a search knows
   what the section is before the first headline. Rania asked for it on 10 Aug 2026. It sits
   under the rule rather than above it, so the masthead-to-rule relationship is unchanged. */
.sec-blurb {
  font-family: var(--serif); font-size: 15px; line-height: 1.5;
  color: var(--muted); margin: -8px 0 22px; max-width: 60ch;
}

.sec-grid { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 0 34px; }
.sec-rail { border-left: 1px solid var(--rule); padding-left: 34px; }
.sec-rail .rail-title {
  font-family: var(--label); font-size: 12px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .09em; border-bottom: 2px solid var(--rule-bold); padding-bottom: 7px; margin: 0 0 12px;
}
.sec-rail .rail-title.spaced { margin-top: 28px; }
.mostread { list-style: none; margin: 0; padding: 0; counter-reset: mr; }
.mostread li {
  counter-increment: mr; position: relative; padding: 9px 0 9px 30px;
  border-bottom: 1px solid var(--rule);
}
.mostread li:last-child { border-bottom: 0; }
.mostread li:before {
  content: counter(mr); position: absolute; left: 0; top: 8px;
  font-family: var(--display); font-weight: 900; font-size: 19px; color: var(--rule);
  line-height: 1;
}
.mostread a { font-family: var(--display); font-weight: 700; font-size: 14.5px; line-height: 1.2; display: block; margin-bottom: 3px; }
.mostread a:hover { color: var(--accent); }
.mostread .tinymeta { display: block; }
.seclinks { list-style: none; margin: 0; padding: 0; }
.seclinks li { border-bottom: 1px dotted var(--rule); }
.seclinks li:last-child { border-bottom: 0; }
.seclinks a {
  display: block; padding: 8px 0; font-family: var(--label); font-size: 12px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink);
}
.seclinks a.here { color: var(--kicker); }
.seclinks a:hover { color: var(--accent); text-decoration: none; }

.sec-lead { margin: 0 0 22px; padding-bottom: 22px; border-bottom: 1px solid var(--rule); }
.sec-lead h2 {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(24px, 2.8vw, 36px); line-height: 1.06; margin: 3px 0 10px; letter-spacing: -.01em;
}
.sec-lead .deck { font-family: var(--serif); font-size: 15.5px; line-height: 1.5; color: var(--ink-soft); margin: 0 0 10px; }
.sec-lead figure { margin: 14px 0 0; }
.sec-lead img { width: 100%; height: auto; display: block; filter: saturate(.92); }
/* A LEAD PICTURE IS CAPPED BY HEIGHT, never only by width. A portrait photograph or drawing at
   full column width runs past 1200px and fills the whole screen, so a reader arriving on the
   section sees one story and has no idea the others are there: Malak's essay did exactly that to
   Unfiltered on 14 Aug 2026, with the next two stories sitting at 1795px and 1992px.
   The picture is SCALED WHOLE rather than cropped to fit, because these are his own signed
   drawings and a crop would take the signature off the bottom. A wide picture is under the cap
   already and is untouched. It stays on the column's LEFT edge, in line with the kicker, the
   headline and its own caption: centred, it floats away from the caption underneath it and
   reads as an orphan. */
.sec-lead img { max-height: 520px; width: auto; max-width: 100%; }

.seclist { display: block; }
.sec-row {
  display: grid; grid-template-columns: 1fr 200px; gap: 26px; align-items: start;
  padding: 20px 0; border-bottom: 1px solid var(--rule);
}
.sec-row:last-child { border-bottom: 0; }
.sec-row .thumb { display: block; line-height: 0; }
.sec-row .thumb img { width: 200px; height: 133px; object-fit: cover; display: block; filter: saturate(.92); }
.rowkicker {
  font-family: var(--label); font-size: 10.5px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--kicker); margin: 0 0 5px;
}
.rowcredit {
  font-family: var(--label); font-size: 11.5px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em; margin: 0 0 4px;
}
.rowcredit b { color: var(--ink); font-weight: 700; }
.sec-row h3 { font-family: var(--display); font-weight: 700; font-size: 20px; line-height: 1.14; margin: 0 0 6px; }
.sec-row h3 a:hover { color: var(--accent); }
.rowdeck { font-family: var(--serif); font-size: 13.5px; line-height: 1.45; color: var(--ink-soft); margin: 0 0 7px; }
.rowmeta { font-family: var(--label); font-size: 11px; color: var(--muted); letter-spacing: .04em; margin: 0; }
.rowmeta b { color: var(--muted); font-weight: 700; }
.dot { margin: 0 7px; opacity: .55; }
.empty { font-family: var(--serif); font-size: 15px; color: var(--muted); margin: 30px 0 40px; }

/* ---------- "Elsewhere in the paper" : every page ends with a way onward ---------- */
.blocktitle {
  font-family: var(--label); font-size: 12px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .1em; border-top: 2px solid var(--rule-bold); padding-top: 12px; margin: 40px 0 16px;
}
.elsegrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 26px; }
.elsegroup { padding: 0 0 16px; }
.elsegroup + .elsegroup { border-left: 1px solid var(--rule); padding-left: 26px; }
.elsegroup h4 {
  font-family: var(--label); font-size: 11.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; color: var(--kicker); margin: 0 0 9px;
  border-bottom: 1px solid var(--rule); padding-bottom: 7px;
}
.tiny { padding: 7px 0; border-bottom: 1px dotted var(--rule); }
.tiny:last-of-type { border-bottom: 0; }
.tiny a { font-family: var(--display); font-weight: 700; font-size: 14px; line-height: 1.2; display: block; }
.tiny a:hover { color: var(--accent); }
.tinymeta { font-family: var(--label); font-size: 10.5px; color: var(--muted); letter-spacing: .04em; }
.allin {
  font-family: var(--label); font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .07em; color: var(--accent); display: inline-block; margin-top: 8px;
}

/* ---------- Article page ----------
   Reworked 9 Aug 2026 after Anas read the Bodéga piece on the live site: "there's something
   cheap, I don't know if it's the font size or what, it doesn't give elevated." Three things
   were doing it, and only one of them was type. Measured against a live Washington Post
   article at 1512px: their body runs Georgia 20px over a 32px line in a column that holds
   about 68 characters. Ours ran 19px over a 720px column, which is about 88 characters a
   line: long enough that the eye loses its place returning to the left margin, and the page
   reads as a blog template rather than a paper. The column is now 690px at 20px, which lands
   at roughly 68. The other two were an empty advertising well above the headline and a
   subscribe modal over the body, both removed in app.js. */
.article { max-width: 690px; margin: 34px auto 0; }
.article .kicker { text-align: left; }
.article h1 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(30px, 4.1vw, 46px); line-height: 1.06; margin: 6px 0 16px;
  letter-spacing: -.018em; text-wrap: balance;
}
/* The dek was set in large italic display, which is a magazine blog signature. A newspaper
   sets it roman, a step under the body's authority, in the reading face. */
.article .standfirst {
  font-family: var(--serif); font-size: 19.5px; line-height: 1.55; color: var(--ink-soft);
  margin: 0 0 20px; font-style: normal;
}
.article .meta {
  font-family: var(--label); font-size: 13px; color: var(--muted);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: 12px 0; margin: 0 0 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
}
.article .meta b { color: var(--ink); }
.article .meta .metaright { display: flex; align-items: center; flex-wrap: wrap; }
.article .meta .reads { color: var(--muted); }
.article figure { margin: 0 0 24px; }
.article .body { font-size: 20px; line-height: 1.62; color: var(--ink); }
.article .body p { margin: 0 0 22px; }
/* Inline source links inside a piece. The global rule is `a { color: inherit; text-decoration:
   none }`, which made every citation in a body invisible: the Sifted and MIT Technology Review
   links in the microagi piece read as plain text, so the sourcing did nothing for the reader.
   The Washington Post sets body links in the same ink as the text with a 1.25px underline
   rather than in blue, which is the newspaper convention and the one this paper follows.
   Read off washingtonpost.com on 24 Jul 2026: color rgb(17,17,17), underline, 1.25px. */
.article .body a {
  color: inherit; text-decoration: underline;
  text-decoration-thickness: 1.25px; text-underline-offset: 2px;
  text-decoration-color: rgba(0,0,0,.42);
}
.article .body a:hover { text-decoration-color: var(--kicker); color: var(--kicker); }
[data-theme="dark"] .article .body a { text-decoration-color: rgba(255,255,255,.45); }
/* Section subheads inside a piece. They had no rule at all, so the browser drew them at its
   default h2, which is larger than the article's own standfirst and sat in enormous margins.
   A paper sets a subhead smaller than the headline and tight to the paragraph it introduces. */
.article .body h2 {
  font-family: var(--display); font-weight: 700;
  font-size: 25px; line-height: 1.18; letter-spacing: -.005em;
  margin: 38px 0 14px; color: var(--ink);
}
.article .body h2 i, .article .body h2 em { font-style: italic; }
.article .body h3 { font-family: var(--display); font-weight: 700; font-size: 20px; line-height: 1.2; margin: 30px 0 12px; }
/* Quotations. Also unstyled before, so they rendered as an indented browser blockquote. This is
   the pull-quote treatment the stylesheet already carried for .pull, applied where writers
   actually put their quotes. */
.article .body blockquote {
  font-family: var(--display); font-weight: 700; font-style: italic;
  font-size: 24px; line-height: 1.3; color: var(--ink);
  border-left: 3px solid var(--kicker);
  padding: 2px 0 2px 22px; margin: 28px 0;
}
.article .body blockquote i, .article .body blockquote em { font-style: italic; }
.article .body blockquote p { margin: 0 0 10px; font-size: inherit; }
.article .body blockquote p:last-child { margin-bottom: 0; }
/* Extended testimony. The display treatment above is a pull quote: it works for one punchy
   line and becomes a wall at a hundred words, which is the length a real interview answer
   runs to. A paper sets those indented, in the reading face, at the reading size, so the eye
   stays in the same voice it was already in and only the margin tells it who is speaking.
   Added 9 Aug 2026 for the Bodéga piece, where César and Rania both answer at length. */
.article .body blockquote.testimony {
  font-family: var(--serif); font-weight: 400; font-style: normal;
  font-size: 18px; line-height: 1.6; color: var(--ink-soft);
  border-left: 3px solid var(--rule); padding: 4px 0 4px 24px; margin: 30px 0;
}
.article .body blockquote cite {
  display: block; font-family: var(--label); font-style: normal; font-weight: 700;
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin-top: 12px;
}
@media (max-width: 600px) {
  .article .body h2 { font-size: 21px; margin: 30px 0 12px; }
  .article .body blockquote { font-size: 20px; padding-left: 16px; }
  .article .body blockquote.testimony { font-size: 17px; padding-left: 16px; }
}
/* ============================================================
   LAYING A PIECE OUT. Added 13 Aug 2026, when the writing moved to Google Docs and the
   Publishing House became the room where a piece is set rather than written. Three marks, and
   the editor puts each one in by hand at the point in the story where it belongs.
   ============================================================ */

/* A quote that stands out. It is a paragraph, deliberately, and not a box: the house rule is
   that a substantial quote runs in the flow of the piece with its attribution, because a quote
   lifted into a box is a quote a reader skips on the way past. So this leaves the sentence
   exactly where it was written and only makes it louder. */
.article .body p.pq {
  font-family: var(--display); font-weight: 700; font-size: 24px; line-height: 1.3;
  color: var(--ink); border-left: 3px solid var(--kicker);
  padding: 2px 0 2px 22px; margin: 28px 0;
}
.article .body p.pq i, .article .body p.pq em { font-style: italic; }

/* A picture inside the story rather than at the top of it. It runs the full measure of the
   column, and its caption is set in the label face at the size the paper uses under a photo. */
.article .body figure.fig { margin: 34px 0; }
.article .body figure.fig img { display: block; width: 100%; height: auto; border-radius: 2px; }
.article .body figure.fig figcaption {
  font-family: var(--label); font-size: 12.5px; line-height: 1.5;
  color: var(--muted); margin-top: 10px;
}

/* A portrait picture inside the story. A tall image run to the full measure of the column is a
   whole screen of one photograph, and the reader loses the thread of the argument on the way
   past it. A paper sets an upright picture narrower than the text and centres it, so the column
   still reads as a column. Added 23 Aug 2026 with the two JADE pictures. */
.article .body figure.fig.portrait { max-width: 62%; margin-left: auto; margin-right: auto; }
@media (max-width: 600px) { .article .body figure.fig.portrait { max-width: 100%; } }

/* The contributor note. A paper closes a signed piece by telling the reader who wrote it, and
   the note is set apart from the argument: its own rule, the reading face in italic, a step down
   in size and colour, so a reader who has finished the essay knows it has finished. It sits
   below the footnotes, which carry their own rule, so a piece with notes closes on three zones:
   the argument, the asides, the writer. Added 23 Aug 2026 for the JADE essay. */
.article .body p.bio {
  font-family: var(--serif); font-style: italic; font-size: 15.5px; line-height: 1.62;
  color: var(--muted); border-top: 1px solid var(--rule);
  padding-top: 22px; margin: 34px 0 0;
}
@media (max-width: 600px) { .article .body p.bio { font-size: 15px; } }

/* Where the page breaks. On paper this is a new page; on a screen there are no pages, so it is
   set the way a paper sets a scene break, which is what it means to a reader either way: a
   held pause, and the story starts again on the other side of it. */
.article .body hr.pgb {
  border: 0; height: auto; margin: 40px 0; text-align: center;
  color: var(--muted); overflow: visible;
}
.article .body hr.pgb::after {
  content: '\00a7'; font-family: var(--serif); font-size: 17px; letter-spacing: .4em;
  display: block; opacity: .55;
}
@media (max-width: 600px) {
  .article .body p.pq { font-size: 20px; padding-left: 16px; }
  .article .body figure.fig { margin: 26px 0; }
}
/* Footnotes. An essay that argues in its asides needs somewhere to put them, and a bare "[1]"
   set at the reading size reads as a typo rather than a reference. The marker is a small
   superscript numeral in the label face, in the section red so the eye finds it and does not
   stop on it, and it jumps to the note; the numeral on the note jumps back. The notes sit under
   a rule at the foot of the piece, a step down in the reading face, which is where a paper puts
   a footnote so it stays out of the way of the argument it is commenting on. The rule is drawn
   by the first note that follows a normal paragraph, so no extra markup is needed to start the
   block and a piece with no notes draws nothing. Added 23 Aug 2026 for the JADE essay. */
.article .body sup.fnref {
  font-family: var(--label); font-size: 10.5px; font-weight: 700;
  line-height: 0; vertical-align: super; margin-left: 1px;
}
.article .body sup.fnref a {
  color: var(--kicker); text-decoration: none;
}
.article .body sup.fnref a:hover { text-decoration: underline; text-underline-offset: 2px; }
.article .body p.fnote {
  font-family: var(--serif); font-size: 15px; line-height: 1.58;
  color: var(--muted); margin: 0 0 10px; text-indent: -1.15em; padding-left: 1.15em;
}
.article .body p:not(.fnote) + p.fnote {
  border-top: 1px solid var(--rule); padding-top: 22px; margin-top: 36px;
}
.article .body p.fnote a.fnback {
  font-family: var(--label); font-size: 10.5px; font-weight: 700;
  color: var(--kicker); text-decoration: none;
  line-height: 0; vertical-align: super; margin-right: 5px;
}
.article .body p.fnote a.fnback:hover { text-decoration: underline; }
@media (max-width: 600px) { .article .body p.fnote { font-size: 14.5px; } }

/* Drop cap. It was set at line-height .72, so the letter's box was shorter than the letter
   itself: the glyph hung below its own float and the third line of the paragraph ran straight
   through it. A cap needs a box at least as tall as the glyph, so line-height stays at 1 and
   the size is set in ems against the body so the two move together. */
.article .body p.drop:first-letter {
  font-family: var(--display); font-weight: 800; float: left;
  font-size: 3em; line-height: 1; margin: .04em .09em 0 0; color: var(--ink);
}
.article .pull {
  font-family: var(--display); font-weight: 700; font-style: italic;
  font-size: 26px; line-height: 1.25; color: var(--ink);
  border-left: 3px solid var(--kicker); padding: 4px 0 4px 20px; margin: 26px 0;
}
.article .endmark { font-family: var(--label); font-weight: 800; color: var(--muted); letter-spacing:.1em; }
.backlink { font-family: var(--label); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing:.05em; color: var(--accent); display:inline-block; margin: 30px 0; }

/* more-from list under article */
.morefrom { border-top: 2px solid var(--rule-bold); margin-top: 36px; padding-top: 16px; }
.morefrom h3 { font-family: var(--label); font-size: 12px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; margin:0 0 16px; }
.morefrom .grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 26px; }
.morefrom a.card img { width: 100%; height: 150px; object-fit: cover; display: block; margin-bottom: 9px; filter: saturate(.92); }
.morefrom a.card h4 { font-family: var(--display); font-weight:700; font-size:16px; line-height:1.16; margin:0 0 5px; }
.morefrom a.card p { font-family: var(--serif); font-size:13px; line-height:1.45; color:var(--muted); margin:0; }
.morefrom a.card:hover h4 { color: var(--accent); }
.morefrom a.card:hover { text-decoration: none; }

/* ---------- Footer ---------- */
footer.paper {
  border-top: 3px double var(--rule-bold); margin-top: 50px; padding: 34px 0 60px;
  font-family: var(--label);
}
footer.paper .nameplate { font-family: var(--black); font-size: 30px; text-align:center; display:block; margin-bottom: 16px; }
footer.paper .cols { display:flex; flex-wrap:wrap; gap: 40px; justify-content: center; font-size: 13px; }
footer.paper .cols a { color: var(--muted); }
footer.paper .fine { text-align:center; color: var(--muted); font-size: 12px; margin-top: 24px; line-height:1.6; }

/* ---------- Advertisement slots (Washington Post style) ---------- */
.ad { margin: 28px auto; text-align: center; }
.ad .ad-label { font-family: var(--label); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
.ad .ad-box {
  background: #f1f1f3; border: 1px solid var(--rule);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  margin: 0 auto; padding: 14px;
}
[data-theme="dark"] .ad .ad-box { background: #16181b; }
.ad .ad-brand { font-family: var(--black); font-size: 22px; color: var(--ink); opacity: .55; line-height: 1; }
.ad .ad-sub { font-family: var(--label); font-size: 11.5px; color: var(--muted); letter-spacing: .02em; }
.ad-leaderboard .ad-box { max-width: 970px; height: 124px; }
.ad-rect .ad-box { max-width: 336px; height: 270px; }
.ad-rail { margin: 22px 0 0; }
.ad-rail .ad-box { max-width: 300px; height: 600px; }

/* A sold slot: the house placeholder is replaced by an advertiser's own creative, so the box
   drops its grey filler background and the creative fills the frame edge to edge. */
.ad .ad-box.creative { background: none; border: 0; padding: 0; display: block; max-width: 970px; }
[data-theme="dark"] .ad .ad-box.creative { background: none; }
.ad .adc {
  display: flex; align-items: center; gap: 22px;
  height: 100%; width: 100%; padding-right: 26px;
  text-align: left; overflow: hidden;
  border: 1px solid rgba(0,0,0,.14);
}
.ad .adc:hover { text-decoration: none; }
.adc-cover { height: 100%; width: auto; display: block; flex: none; box-shadow: 8px 0 26px rgba(0,0,0,.4); }
.adc-logo  { width: 116px; height: auto; display: block; flex: none; margin-left: 6px; }
.adc-rule  { width: 1px; align-self: stretch; margin: 26px 0; background: rgba(255,255,255,.34); flex: none; }
.adc-copy  { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.adc-kicker, .adc-meta {
  font-family: var(--label); font-size: 10px; letter-spacing: .17em;
  text-transform: uppercase; color: rgba(255,255,255,.74);
}
/* The headline wraps rather than truncating: a clipped headline reads as a broken page. */
.adc-line { font-family: var(--display); font-size: 21px; line-height: 1.14; font-weight: 700; color: #fff; }
.adc-cta {
  margin-left: auto; flex: none; white-space: nowrap;
  font-family: var(--label); font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: #fff;
  border: 1px solid rgba(255,255,255,.62); padding: 9px 16px;
  transition: background .18s ease, color .18s ease;
}
.ad .adc:hover .adc-cta { background: #fff; color: #8d2f21; }

/* Diptyk : the terracotta of the issue 76 cover, carried across the band. */
.adc-diptyk { background: linear-gradient(100deg, #7f2a1d 0%, #a8422e 52%, #bc5539 100%); }

/* Let Fintech Grow! : Ian's own artwork, the neon board carried across the band. The lockup is
   screen-blended because it arrives as neon on black, which is how it composites without a
   matte; his portrait is cut out and sits on the board's own light. */
.adc-lfg { background: #05060c url('/assets/lfg-board.jpg') center/cover no-repeat; }
.adc-lfg .adc-face {
  height: 100%; width: auto; display: block; flex: none; margin-left: 6px;
  align-self: flex-end; filter: drop-shadow(0 0 18px rgba(64,224,255,.28));
}
.adc-lfg .adc-mark { height: 76px; width: auto; display: block; flex: none; margin-left: -6px; mix-blend-mode: screen; }
.adc-lfg .adc-rule { background: rgba(120,230,255,.38); }
.adc-lfg .adc-kicker, .adc-lfg .adc-meta { color: rgba(170,240,255,.80); }
.adc-lfg .adc-cta { border-color: rgba(255,120,220,.75); }
.ad .adc-lfg:hover .adc-cta { background: #ff54c8; color: #05060c; border-color: #ff54c8; }
.adc-lfg.adc { gap: 16px; }

/* Below the full 970 the headline needs two lines, so the strapline comes out rather than
   wrapping into a third and fourth line of its own. */
@media (max-width: 1080px) { .adc-kicker { display: none; } }

@media (max-width: 780px) {
  .ad-leaderboard .ad-box.creative { height: 116px; }
  .adc-lfg .adc-mark { height: 52px; }
  .adc-rule, .adc-cta, .adc-kicker, .adc-wide { display: none; }
  .ad .adc { gap: 14px; padding-right: 16px; }
  .adc-logo { width: 78px; margin-left: 2px; }
  .adc-line { font-size: 15px; }
  .adc-meta { font-size: 9px; letter-spacing: .14em; }
}

/* ---------- Cookie / privacy consent (Washington Post style) ---------- */
.cookie {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
  background: var(--surface); border-top: 3px solid var(--rule-bold);
  box-shadow: 0 -10px 40px rgba(0,0,0,.18);
}
[data-theme="dark"] .cookie { box-shadow: 0 -10px 40px rgba(0,0,0,.6); }
.cookie .inner { max-width: 1340px; margin: 0 auto; padding: 22px 26px; display: grid; grid-template-columns: 1.05fr 1.05fr 200px; gap: 34px; align-items: start; }
.cookie h2 { font-family: var(--display); font-weight: 700; font-size: 21px; margin: 0 0 10px; color: var(--ink); }
.cookie p { font-family: var(--serif); font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); margin: 0 0 10px; }
.cookie p.fine { font-size: 12px; color: var(--muted); }
.cookie .vendors { font-family: var(--label); font-weight: 700; font-size: 12.5px; color: var(--accent); margin-top: 10px; cursor: pointer; }
.cookie .col3 { display: flex; flex-direction: column; gap: 11px; }
.cookie button {
  font-family: var(--label); font-weight: 700; font-size: 14px; padding: 12px 18px;
  border-radius: 999px; cursor: pointer; border: 1.5px solid var(--ink); transition: opacity .15s ease;
}
.cookie button:hover { opacity: .85; }
.cookie .accept, .cookie .reject { background: var(--ink); color: var(--bg); }
.cookie .purposes { background: transparent; color: var(--ink); }
@media (max-width: 820px) {
  .cookie .inner { grid-template-columns: 1fr; gap: 14px; }
  .cookie .col3 { flex-direction: column; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .front { grid-template-columns: 1fr; }
  .front > * { padding: 0; border-left: 0; }
  .col-rule { border-top: 1px solid var(--rule); padding-top: 18px; margin-top: 4px; }
  .row2 { grid-template-columns: 1fr; gap: 0; }
  .row2 > * { padding: 16px 0; border-bottom: 1px solid var(--rule); }
  .morefrom .grid { grid-template-columns: 1fr; gap: 16px; }
  nav.sections a { padding: 10px 12px; font-size: 12px; }
  .sec-grid { grid-template-columns: 1fr; }
  .sec-rail { border-left: 0; padding-left: 0; border-top: 2px solid var(--rule-bold); padding-top: 18px; margin-top: 22px; }
  .sec-row { grid-template-columns: 1fr 110px; gap: 14px; }
  .sec-row .thumb img { width: 110px; height: 74px; }
  .sec-row h3 { font-size: 17px; }
  .elsegrid { grid-template-columns: 1fr; }
  .elsegroup + .elsegroup { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); padding-top: 14px; }
}

/* ---------- Careers (/careers, /careers/<role>) ----------
   The paper's own hiring, kept off the section nav and reachable from the footer. The list
   borrows the section-index row shape so it reads as part of the paper; the role page borrows
   the article page, because a role written out in full is a piece of writing and should be set
   like one. Tables inside a role body carry the terms, so they get real rules and padding. */
.careers-intro {
  font-family: var(--serif); font-size: 16px; line-height: 1.6; color: var(--ink-soft);
  max-width: 62ch; margin: 0 0 26px;
}
.role-row { border-top: 1px solid var(--rule); padding: 20px 0 22px; max-width: 74ch; }
.role-row:first-of-type { border-top: 2px solid var(--rule-bold); }
.role-row h3 {
  font-family: var(--display); font-weight: 900; font-size: 27px; line-height: 1.14;
  margin: 4px 0 8px; letter-spacing: -.01em;
}
.role-row .rowdeck { font-size: 15px; margin-bottom: 9px; }
.role-row .allin { margin-top: 12px; }

.article.role .body h2 {
  font-family: var(--label); font-weight: 800; font-size: 13px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--ink); border-top: 1px solid var(--rule);
  padding-top: 16px; margin: 36px 0 14px;
}
.article.role .body ul, .article.role .body ol { margin: 0 0 20px; padding-left: 22px; }
.article.role .body li { margin-bottom: 9px; line-height: 1.6; }
.article.role .body table {
  width: 100%; border-collapse: collapse; margin: 0 0 24px;
  font-family: var(--label); font-size: 14.5px; line-height: 1.5;
}
.article.role .body th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); font-weight: 800; border-bottom: 2px solid var(--rule-bold);
  padding: 0 14px 8px 0;
}
.article.role .body td {
  vertical-align: top; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--rule);
  color: var(--ink-soft);
}
.article.role .body td:first-child { white-space: nowrap; color: var(--ink); }
@media (max-width: 620px) {
  .article.role .body table { font-size: 13.5px; }
  .article.role .body td:first-child { white-space: normal; }
}

/* The application form. Two facts and two answers, so it is a short column rather than a grid. */
.applyform {
  border-top: 2px solid var(--rule-bold); margin: 44px 0 0; padding-top: 18px; max-width: 56ch;
}
.applyform .blocktitle { border-top: 0; padding-top: 0; margin: 0 0 6px; }
.applyform .fine { font-family: var(--label); font-size: 12.5px; color: var(--muted); margin: 0 0 20px; }
.applyform label {
  display: block; font-family: var(--label); font-size: 12.5px; font-weight: 700;
  color: var(--ink-soft); margin-bottom: 18px; line-height: 1.45;
}
.applyform input, .applyform textarea {
  display: block; width: 100%; margin-top: 7px; padding: 11px 12px;
  border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); color: var(--ink);
  font-family: var(--serif); font-size: 15px; font-weight: 400; line-height: 1.5;
}
.applyform input:focus, .applyform textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.applyform textarea { resize: vertical; min-height: 96px; }
.applyform button {
  font-family: var(--label); font-size: 14px; font-weight: 800; letter-spacing: .03em;
  background: var(--brand); color: #fff; border: 0; border-radius: 8px;
  padding: 12px 26px; cursor: pointer;
}
.applyform button:hover { filter: brightness(1.08); }
.applyform button:disabled { opacity: .55; cursor: default; }
.applymsg { font-family: var(--label); font-size: 13px; margin: 12px 0 0; }
.applymsg.bad { color: var(--kicker); }

/* ============================================================
   LISTEN TO THIS STORY
   The read-aloud strip under the byline, the paragraph it is reading, and the
   small player that follows the reader down the page. Built 12 Aug 2026.
   Everything here is drawn from the paper's own tokens, so the player reads as
   part of the page rather than as a widget dropped onto it. See listen.js.
   ============================================================ */
.tts {
  position: relative;
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px;
  padding: 2px 0 16px; margin: 0 0 22px;
  border-bottom: 1px solid var(--rule);
}
/* Who is reading, on its own line under the controls. It wraps to full width rather than
   sitting in the row, so the play button and the voice menu keep their places. */
.tts-note {
  flex: 1 0 100%; margin: -4px 0 0;
  font-family: var(--serif); font-style: italic; font-size: 15px; line-height: 1.5;
  color: var(--muted);
}
.tts-play {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--rule-bold); background: var(--ink); color: var(--bg);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  padding: 0; transition: transform .12s ease, background .12s ease;
}
.tts-play:hover { transform: scale(1.05); background: var(--brand); border-color: var(--brand); }
.tts-play .ico-play {
  width: 0; height: 0; margin-left: 3px;
  border-left: 12px solid currentColor;
  border-top: 8px solid transparent; border-bottom: 8px solid transparent;
}
.tts-play .ico-pause { display: none; width: 12px; height: 14px; position: relative; }
.tts-play .ico-pause::before, .tts-play .ico-pause::after {
  content: ""; position: absolute; top: 0; width: 4px; height: 14px; background: currentColor;
}
.tts-play .ico-pause::before { left: 0; }
.tts-play .ico-pause::after { right: 0; }
[data-state="playing"] .ico-play { display: none; }
[data-state="playing"] .ico-pause { display: block; }

.tts-mid { flex: 1 1 auto; min-width: 0; }
.tts-title {
  font-family: var(--label); font-size: 13px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink);
  margin: 0 0 3px;
}
.tts-sub { font-family: var(--label); font-size: 12px; color: var(--muted); margin: 0; }
.tts[data-state="idle"] .tts-hint { display: none; }
@media (max-width: 640px) { .tts-hint { display: none !important; } }

.tts-ctl { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.tts-step, .tts-rate, .tts-close {
  font-family: var(--label); font-size: 12px; font-weight: 600; color: var(--ink);
  background: none; border: 1px solid var(--rule); border-radius: 999px;
  padding: 5px 10px; cursor: pointer; line-height: 1;
}
.tts-step:hover, .tts-rate:hover, .tts-close:hover { border-color: var(--rule-bold); color: var(--brand); }
.tts[data-state="idle"] .tts-step { display: none; }
.tts-voice {
  font-family: var(--label); font-size: 12px; color: var(--muted);
  background: none; border: 1px solid var(--rule); border-radius: 999px;
  padding: 5px 8px; max-width: 165px; cursor: pointer;
}
@media (max-width: 720px) { .tts-voice { display: none; } }

.tts-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: transparent; }
.tts-progress span { display: block; height: 100%; width: 0; background: var(--brand); transition: width .3s linear; }

/* The paragraph being read. The left rule and the padding are cancelled by an equal negative
   margin, so switching paragraphs never moves the text the reader is following. */
.article .tts-on {
  border-left: 3px solid var(--brand);
  padding-left: 16px; margin-left: -19px;
  background: rgba(109, 70, 110, .06);
  transition: background .25s ease;
}
[data-theme="dark"] .article .tts-on { background: rgba(180, 135, 181, .12); }
@media (max-width: 760px) { .article .tts-on { margin-left: -10px; padding-left: 7px; } }

/* The player that follows the reader once the strip has scrolled away. */
.tts-mini {
  position: fixed; left: 50%; bottom: 18px; transform: translate(-50%, 130%);
  z-index: 10000; width: min(660px, calc(100vw - 24px));
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; background: var(--surface);
  border: 1px solid var(--rule-bold); box-shadow: 0 10px 34px rgba(0,0,0,.18);
  transition: transform .28s cubic-bezier(.2,.7,.3,1);
}
.tts-mini.on { transform: translate(-50%, 0); }
.tts-mini .tts-play { width: 36px; height: 36px; }
.tts-mini .tts-play .ico-play { border-left-width: 10px; border-top-width: 7px; border-bottom-width: 7px; }
.tts-mini-txt { flex: 1 1 auto; min-width: 0; }
.tts-mini-txt b {
  display: block; font-family: var(--display); font-size: 14px; font-weight: 700; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tts-mini-txt span { font-family: var(--label); font-size: 11.5px; color: var(--muted); }
.tts-mini .tts-progress { bottom: 0; }
@media (max-width: 520px) { .tts-mini .tts-step { display: none; } }

/* ============================================================
   HERO VIGNETTE
   A small card pinned top-right once the reader scrolls past the hero
   image: thumbnail, headline, and (when the piece is narrated) a play
   control that drives the same #tts player, never a second one. Desktop
   only, built 12 Aug 2026. See vignette.js.
   ============================================================ */
.hero-vignette {
  position: fixed; top: 22px; right: 24px; z-index: 500;
  width: 300px; display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 28px 12px 12px;
  background: var(--surface); border: 1px solid var(--rule-bold);
  box-shadow: 0 4px 16px rgba(0,0,0,.14);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
  pointer-events: none;
}
[data-theme="dark"] .hero-vignette { box-shadow: 0 4px 18px rgba(0,0,0,.55); }
.hero-vignette.on {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
  transition: opacity .25s ease, transform .25s ease;
}
@media (max-width: 1099px) { .hero-vignette { display: none !important; } }

.hv-thumb { flex: 0 0 auto; width: 64px; height: 64px; object-fit: cover; display: block; }
.hv-txt { flex: 1 1 auto; min-width: 0; }
.hv-headline {
  font-family: var(--display); font-weight: 700; font-size: 14px; line-height: 1.3;
  color: var(--ink); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.hv-play {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; margin-top: 1px;
  border: 1px solid var(--rule-bold); background: var(--ink); color: var(--bg);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  padding: 0; transition: transform .12s ease, background .12s ease;
}
.hv-play:hover { transform: scale(1.05); background: var(--brand); border-color: var(--brand); }
.hv-play .ico-play {
  width: 0; height: 0; margin-left: 2px;
  border-left: 8px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}
.hv-play .ico-pause { display: none; width: 8px; height: 10px; position: relative; }
.hv-play .ico-pause::before, .hv-play .ico-pause::after {
  content: ""; position: absolute; top: 0; width: 3px; height: 10px; background: currentColor;
}
.hv-play .ico-pause::before { left: 0; }
.hv-play .ico-pause::after { right: 0; }
.hero-vignette[data-state="playing"] .hv-play .ico-play { display: none; }
.hero-vignette[data-state="playing"] .hv-play .ico-pause { display: block; }

.hv-close {
  position: absolute; top: 5px; right: 5px; width: 20px; height: 20px;
  border: none; background: none; color: var(--muted); cursor: pointer;
  font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0;
}
.hv-close:hover { color: var(--ink); }

/* A highlighted quote inside a story. Added 31 Aug 2026 for Rania, who asked to be able to
   embolden, italicise and highlight quotes in a piece after it has gone live. The editor writes
   <mark class="rp-hl"> into the story body, and the body is stored as HTML, so this rule is what
   makes the mark visible to a reader rather than only inside the Publishing House. Kept to a wash
   of colour rather than a block, because a solid highlighter bar reads as a draft. */
mark.rp-hl{ background:rgba(255,214,0,.30); color:inherit; padding:.04em .1em; border-radius:2px; }
@media print{ mark.rp-hl{ background:transparent; box-shadow:inset 0 -.42em 0 rgba(0,0,0,.08); } }