/* Future Value — public site, "Terminal" look.
   White page, black type, one electric-blue accent. A black market tape on top,
   a lead story beside a numbered "Most read" list, then a card grid.
   Archivo for everything you read, Archivo Narrow for the wordmark and ranks,
   JetBrains Mono for figures and labels. Gains green and losses orange live in the tape and charts only. */
/* fonts: self-hosted (SIL Open Font License, see fonts/OFL-*.txt) */
@font-face { font-family: "Archivo"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/archivo-latin-400-normal.woff2") format("woff2") }
@font-face { font-family: "Archivo"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/archivo-latin-600-normal.woff2") format("woff2") }
@font-face { font-family: "Archivo"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/archivo-latin-700-normal.woff2") format("woff2") }
@font-face { font-family: "Archivo"; font-weight: 800; font-style: normal; font-display: swap; src: url("fonts/archivo-latin-800-normal.woff2") format("woff2") }
@font-face { font-family: "Archivo Narrow"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/archivo-narrow-latin-600-normal.woff2") format("woff2") }
@font-face { font-family: "Archivo Narrow"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/archivo-narrow-latin-700-normal.woff2") format("woff2") }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2") }
@font-face { font-family: "JetBrains Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2") }
@font-face { font-family: "JetBrains Mono"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/jetbrains-mono-latin-600-normal.woff2") format("woff2") }
:root {
  --paper: #FFFFFF; --ink: #0A0A0A; --muted: #555555; --rule: #DDDDDD;
  --value: #0040E0; --heat: #D9480F; --tint: #EEF2FF; --card: #FFFFFF;
  --gain: #1E9E5A; --tape: #0A0A0A; --tape-ink: #FFFFFF;
  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-narrow: "Archivo Narrow", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --s-1: .8125rem; --s0: 1.0625rem; --s1: 1.25rem; --s2: 1.625rem; --s3: 2.25rem; --s4: 3.25rem;
  --measure: 40rem;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --paper: #0B0B0C; --ink: #EDEDED; --muted: #A3A3A3; --rule: #2A2A2D;
  --value: #7A9BFF; --heat: #FF8A5B; --tint: #151A2E; --card: #121214; --gain: #4ADE80; --tape: #000000; --tape-ink: #FFFFFF; color-scheme: dark } }
:root[data-theme="dark"] {
  --paper: #0B0B0C; --ink: #EDEDED; --muted: #A3A3A3; --rule: #2A2A2D;
  --value: #7A9BFF; --heat: #FF8A5B; --tint: #151A2E; --card: #121214; --gain: #4ADE80; --tape: #000000; --tape-ink: #FFFFFF; color-scheme: dark }

* { box-sizing: border-box }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--s0)/1.6 var(--f-body);
  -webkit-font-smoothing: antialiased }
a { color: inherit; text-decoration-color: var(--value); text-underline-offset: .18em }
h1, h2, h3 { font-family: var(--f-display) }
a:hover { color: var(--value) }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--value); outline-offset: 2px }
.wrap { max-width: 82rem; margin: 0 auto; padding-inline: clamp(16px, 4vw, 40px) }
.mono, .kicker, .meta, figcaption, .num { font-family: var(--f-mono); font-variant-numeric: tabular-nums }

/* preview banner */
.preview a { color: inherit }
.preview { background: var(--heat); color: #fff; font: 500 var(--s-1)/1.4 var(--f-mono); padding: .5rem 0; text-align: center }

/* masthead */
.mast { border-bottom: 1px solid var(--ink) }
.mast-cta { background: var(--value); color: #fff; text-decoration: none; font: 600 .9rem/1 var(--f-body); padding: .75rem 1.05rem; white-space: nowrap }
.mast-cta:hover { background: var(--ink); color: var(--paper) }
.mast .wrap { display: flex; align-items: flex-end; justify-content: space-between; gap: .8rem 1.4rem; flex-wrap: wrap; padding-block: 1.1rem .8rem }
.mast-brand { display: grid; gap: .3rem }
.tagline { font: 500 .75rem/1.2 var(--f-mono); color: var(--muted); letter-spacing: .06em; text-transform: uppercase }
.mast-meta { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; justify-content: flex-end }
.langs { display: flex; gap: .15rem; font: 500 var(--s-1)/1 var(--f-mono) }
.langs a { text-decoration: none; color: var(--muted); padding: .3rem .5rem; border: 1px solid transparent }
.langs a[aria-current] { color: var(--ink); border-color: var(--ink) }
.langs a:hover { color: var(--ink) }
.brand { font: 700 clamp(1.9rem, 5vw, 2.75rem)/1 var(--f-narrow); letter-spacing: -.02em; text-decoration: none; text-transform: uppercase }
.brand:hover { color: var(--ink) }
.mast nav { display: flex; gap: .4rem 1.4rem; flex-wrap: wrap; font: 600 .95rem/1.2 var(--f-body) }
.mast nav a { text-decoration: none; color: var(--ink); padding-block: .3rem; border-bottom: 2px solid transparent }
.mast nav a:hover { color: var(--value) }
.mast nav a[aria-current] { border-bottom-color: var(--value) }
.dateline { font: 400 var(--s-1)/1 var(--f-mono); color: var(--muted) }

/* the ticker: a TV-style news crawl — headlines in white, figures in green; pauses on hover */
.ticker { display: flex; align-items: stretch; background: var(--tape); color: var(--tape-ink); font: 500 .85rem/1 var(--f-mono); overflow: hidden }
.tk-live { flex: none; display: flex; align-items: center; gap: .45rem; padding: .7rem .9rem; background: var(--value); color: #fff;
  font-weight: 600; text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; z-index: 1 }
.tk-live::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: #fff; animation: tk-blink 1.4s infinite }
.tk-view { flex: 1; min-width: 0; overflow: hidden; display: flex; align-items: center }
.tk-track { display: flex; width: max-content; animation: tk-crawl var(--dur, 40s) linear infinite }
.ticker:hover .tk-track, .ticker:focus-within .tk-track { animation-play-state: paused }
.tk-run { display: flex; align-items: center; gap: 2.2rem; padding-inline-end: 2.2rem; white-space: nowrap }
.tk-head { color: var(--tape-ink); text-decoration: none; font-weight: 600 }
.tk-head:hover { color: var(--tape-ink); text-decoration: underline }
.tk-head i { font-style: normal; color: var(--tape-ink); opacity: .6; text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; margin-inline-end: .6rem }
.tk-num { color: var(--tape-ink); opacity: .85 }
.tk-num b { color: #3DDC84; margin-inline-end: .45rem }
.tk-run > * + *::before { content: "■"; color: #8A8A8A; font-size: .5rem; vertical-align: middle; margin-inline-end: 2.2rem; display: inline-block }
@keyframes tk-crawl { from { transform: translateX(0) } to { transform: translateX(-50%) } }
@keyframes tk-blink { 50% { opacity: .25 } }
@media (prefers-reduced-motion: reduce) {
  .tk-track { animation: none } .tk-view { overflow-x: auto } .tk-run[aria-hidden] { display: none } .tk-live::before { animation: none }
}

/* home: lead story beside a numbered "Most read", then a card grid */
.lead { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); padding-block: 2.2rem 2.6rem; border-bottom: 1px solid var(--rule) }
.lead-story { display: grid; gap: .9rem; align-content: start }
.lead h1 { font: 800 clamp(2.1rem, 5.2vw, 3.4rem)/1.02 var(--f-display); letter-spacing: -.025em; margin: 0; text-wrap: balance }
.lead h1 a { text-decoration: none }
.dek { font-size: var(--s1); line-height: 1.45; color: var(--muted); margin: 0; max-width: var(--measure) }
.kicker { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--value); font-weight: 600 }
.meta { font-size: .78rem; color: var(--muted) }
.most { border-top: 3px solid var(--ink); display: grid; gap: 1.2rem; align-content: start }
.most h2 { font: 600 .75rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; margin: .8rem 0 0; color: var(--ink) }
.most ol { list-style: none; margin: 0; padding: 0 }
.most li a { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: .8rem; padding-block: .95rem; border-top: 1px solid var(--rule); text-decoration: none }
.most li:first-child a { border-top: 0; padding-top: .2rem }
.most .rank { font: 700 1.6rem/1 var(--f-narrow); color: var(--value) }
.most .t { font: 700 1.08rem/1.28 var(--f-display); text-wrap: balance }
.most li a:hover .t { color: var(--value) }

.grid-sec { padding-block: 2.2rem 1rem }
.sec-head { display: flex; justify-content: space-between; align-items: baseline; border-top: 3px solid var(--ink); padding-top: .7rem; margin-bottom: 1.2rem }
.sec-head h2 { font: 700 1.6rem/1 var(--f-narrow); margin: 0 }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1.6rem 1.8rem }
.item { display: grid; gap: .45rem; align-content: start }
.item h3 { font: 700 1.2rem/1.25 var(--f-display); margin: 0; text-wrap: balance }
.item h3 a { text-decoration: none }
.item p { margin: 0; color: var(--muted); font-size: .98rem; line-height: 1.5 }
.side { display: grid; gap: 2rem; align-content: start }
.guides { padding-block: 2rem 0 }
.guides h2 { font: 600 .75rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; margin: 0 0 1rem; color: var(--muted) }
.guides ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem 1.8rem }
.guides li { border-top: 1px solid var(--rule); padding-top: .7rem; font: 700 1rem/1.3 var(--f-display) }
.guides li span { display: block; font: 400 .78rem/1.4 var(--f-mono); color: var(--muted); margin-top: .25rem }
.band { padding-block: 2.6rem 3rem }
.band .signup { background: transparent; border: 1px solid var(--ink); padding: clamp(1.2rem, 3vw, 2rem) }
.band .signup h2 { font: 800 clamp(1.4rem, 3vw, 1.9rem)/1.1 var(--f-display) !important; text-transform: none; letter-spacing: -.01em; margin: 0 }

/* signup */
.signup { background: var(--tint); padding: 1.3rem; display: grid; gap: .7rem }
.signup h2 { font: 600 .75rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; margin: 0 }
.signup h2 { color: var(--ink) !important }
.signup p { margin: 0; font-size: .98rem; line-height: 1.5 }
.signup form { display: flex; gap: .5rem; flex-wrap: wrap }
.signup input { flex: 1 1 12rem; min-width: 0; font: 400 1rem var(--f-body); padding: .65rem .7rem; border: 1px solid var(--ink); background: var(--paper); color: var(--ink) }
.signup button, .btn { font: 700 .95rem/1 var(--f-body); padding: .85rem 1.2rem; border: 0; background: var(--value); color: #fff; cursor: pointer; text-decoration: none; display: inline-block }
.signup .note { font: 400 var(--s-1)/1.4 var(--f-mono); color: var(--muted) }

/* article */
.art { padding-block: 2.2rem 3rem }
.art header { max-width: 50rem; display: grid; gap: .8rem; margin-bottom: 1.6rem }
.art h1 { font: 800 clamp(2rem, 5vw, 3.2rem)/1.04 var(--f-display); letter-spacing: -.025em; margin: 0; text-wrap: balance }
.art .dek { margin: 0 }
.disclosure { font: 400 var(--s-1)/1.45 var(--f-mono); color: var(--muted); border-inline-start: 2px solid var(--value); padding-inline-start: .6rem }
.disclosure a { color: var(--muted) }
.body { max-width: var(--measure) }
.body h2 { font: 700 1.3rem/1.2 var(--f-display); margin: 2.2rem 0 .6rem; letter-spacing: -.01em }
.body p, .body li { font-size: 1.125rem; line-height: 1.65 }
.body ul { padding-inline-start: 1.15rem }
.body strong { font-family: var(--f-mono); font-weight: 600; font-size: .95em; color: var(--value) }
/* partner links: unmistakable — green highlight, bold, arrow */
.body a[rel~="sponsored"] { color: var(--value); font-weight: 600; background: var(--tint); padding: .05em .3em; border-bottom: 2px solid var(--value); text-decoration: none; border-radius: 2px }
.body a[rel~="sponsored"]:hover { background: var(--value); color: var(--paper) }
.partners-note { font: 500 var(--s-1)/1.45 var(--f-mono); color: var(--heat); border: 1px dashed var(--heat); padding: .6rem .8rem; max-width: var(--measure); margin-bottom: 1.4rem }
.box { background: var(--tint); padding: .3rem 1.2rem 1rem; margin-block: 2rem }
.box h2 { margin-top: 1rem }
.sources { border-top: 1px solid var(--ink); margin-top: 2.5rem; padding-top: .3rem }
.sources li, .sources p { font: 400 .9rem/1.5 var(--f-mono) !important; color: var(--muted) }
.act { border: 1px solid var(--ink); padding: 1.2rem; margin-block: 2.2rem; display: grid; gap: .5rem; max-width: var(--measure) }
.act h2 { margin: 0; font: 600 var(--s-1)/1 var(--f-mono) !important; text-transform: uppercase; letter-spacing: .08em; color: var(--value) }
.act p { margin: 0 }
.act .t { font: 600 var(--s1)/1.25 var(--f-display) }
.ai { font: 400 var(--s-1)/1.5 var(--f-mono); color: var(--muted); max-width: var(--measure); border-top: 1px solid var(--rule); padding-top: 1rem }

/* partner card: the one place built to be clicked — clearly labelled, one button */
.pcard { border: 2px solid var(--value); background: var(--tint); padding: 1.1rem 1.2rem 1.2rem; margin-block: 2rem; display: grid; gap: .45rem; justify-items: start; max-width: var(--measure) }
.pcard.compact { margin: 0 }
.pc-label { font: 600 .72rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--value) }
.pc-label em { font-style: normal; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted); margin-inline-start: .4rem }
.pcard p, .body .pcard p { margin: 0 }
.pc-title, .body .pc-title { font: 700 1.35rem/1.2 var(--f-display) !important; color: var(--ink); text-wrap: balance }
.pc-blurb, .body .pc-blurb { font-size: 1rem !important; line-height: 1.5 !important; color: var(--ink) }
.pc-btn, .body a.pc-btn { display: inline-block; margin-top: .35rem; background: var(--value) !important; color: var(--paper) !important; font: 600 .9rem/1 var(--f-mono);
  letter-spacing: .03em; padding: .85rem 1.15rem; text-decoration: none !important; border: 0 !important; border-radius: 3px }
.pc-btn:hover, .body a.pc-btn:hover { background: var(--ink) !important; color: var(--paper) !important }
.act .pc-btn { justify-self: start }

/* figures (charts built from the visual brief) */
figure.chart { margin: 0 0 2rem; max-width: 50rem; border-top: 3px solid var(--ink); padding-top: .8rem }
figure.chart .ft { font: 600 var(--s1)/1.2 var(--f-display); margin: 0 0 1rem; text-wrap: balance }
figure.chart svg { width: 100%; height: auto; display: block }
figure.chart svg text { font-family: var(--f-mono); fill: var(--ink) }
figure.chart svg .lab { fill: var(--muted) }
figcaption { font-size: var(--s-1); color: var(--muted); margin-top: .7rem }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule) }
.tile { background: var(--paper); padding: .9rem; display: grid; gap: .3rem; align-content: start }
.tile b { font: 600 var(--s2)/1 var(--f-mono); color: var(--value) }
.tile span { font: 400 var(--s-1)/1.35 var(--f-mono); color: var(--muted) }
.tile.hero { grid-column: 1 / -1 }
.tile.hero b { font-size: clamp(1.8rem, 4.5vw, 2.4rem) }
.flow { display: flex; flex-wrap: wrap; gap: .5rem; align-items: stretch }
.flow .node { flex: 1 1 10rem; border: 1px solid var(--ink); padding: .7rem; display: grid; gap: .25rem }
.flow .node b { font: 600 var(--s0)/1.2 var(--f-display) }
.flow .node span { font: 400 var(--s-1)/1.35 var(--f-mono); color: var(--muted) }
.flow .arrow { align-self: center; font: 400 var(--s1) var(--f-mono); color: var(--value) }
.timeline { display: flex; margin-top: 1rem; font: 400 var(--s-1)/1.35 var(--f-mono) }
.timeline div { padding: .6rem .7rem; flex: 1 1 0; min-width: 0 }
.timeline .paid { background: var(--value); color: var(--paper) }
.timeline .open { background: repeating-linear-gradient(135deg, var(--tint) 0 6px, transparent 6px 12px); border: 1px dashed var(--heat); color: var(--ink) }
.timeline b { display: block; font-weight: 600 }

/* rubric + method pages */
.page-col { padding-block: 2.2rem 3rem; max-width: 46rem }
.page-col.head { padding-block: 2.2rem 1rem }
.page-col h1, .founder-head h1 { font: 700 clamp(2rem, 5vw, var(--s3))/1.05 var(--f-display); margin: .3rem 0 1rem; text-transform: none }
.page-col h2 { font: 600 var(--s1)/1.2 var(--f-display); text-transform: uppercase; margin: 2rem 0 .5rem }
.page-col p, .page-col li { font-size: 1.08rem }
.measure { max-width: var(--measure); margin-top: 2rem }

footer.foot { border-top: 1px solid var(--ink); padding-block: 1.6rem 2.4rem; font: 400 var(--s-1)/1.6 var(--f-mono); color: var(--muted) }
footer.foot .wrap { display: flex; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap }
footer.foot nav { display: flex; gap: 1rem; flex-wrap: wrap }

/* the two monthly appointments: the founder on the 1st, a film on the 15th */
.rdv { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; margin-top: 2rem; padding-top: 1.6rem; border-top: 3px solid var(--ink) }
.rdv-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: start; text-decoration: none; color: var(--ink) }
.rdv-card:hover strong { color: var(--value) }
.rdv-text { display: grid; gap: .35rem }
.rdv-text strong { font: 600 var(--s1)/1.15 var(--f-display); text-wrap: balance }
.portrait { width: 5.5rem; aspect-ratio: 4 / 5; object-fit: cover; display: block; background: var(--ink) }
.portrait.placeholder { display: grid; place-items: center; color: var(--paper); font: 700 1.6rem/1 var(--f-display); letter-spacing: .04em }
.portrait.xl { width: min(16rem, 100%) } .portrait.placeholder.xl { font-size: 4rem }
.clap { width: 5.5rem; aspect-ratio: 4 / 5; background: var(--ink); position: relative; display: block }
.clap::after { content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0; border-block: .7rem solid transparent; border-inline-start: 1.1rem solid var(--paper) }
.founder-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.2rem, 4vw, 3rem); padding-block: 2.4rem 1.2rem; border-bottom: 1px solid var(--rule); align-items: start }
.founder-head .bio { max-width: var(--measure); font-size: 1.1rem }
.dek.small { font-size: var(--s0) }
.take-grid { display: grid; grid-template-columns: minmax(0, 16rem) minmax(0, var(--measure)); gap: clamp(1.2rem, 4vw, 3rem); align-items: start }
.take-portrait { display: grid; gap: .6rem; position: sticky; top: 1rem }
.take-body p:first-child { font: 500 var(--s2)/1.3 var(--f-display); color: var(--ink) }
.films { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1.6rem; padding-block: 1rem 3rem }
.film-card h2 { font: 600 var(--s2)/1.1 var(--f-display); margin: .8rem 0 .4rem }
.film-card p { margin: 0; color: var(--muted) }
.screen { aspect-ratio: 16 / 9; max-width: 100%; background: var(--ink); color: var(--paper); display: grid; place-items: center; font-size: var(--s-1); letter-spacing: .06em; text-transform: uppercase }
/* ARC: the valuation tool's own line in an article, and the Index page */
.arc { border-block: 3px solid var(--ink); padding-block: 1rem 1.2rem; margin-block: 2.2rem; max-width: var(--measure); display: grid; gap: .5rem; justify-items: start }
.arc h2 { margin: 0; font: 600 var(--s-1)/1 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--value) }
.arc p { margin: 0 } .arc-n { font: 600 var(--s3)/1 var(--f-mono); color: var(--value) }
.arc-empty { font: 600 var(--s2)/1.2 var(--f-display) }
.index-month { padding-block: 1rem 2rem }
.tbl { overflow-x: auto } .tbl table { border-collapse: collapse; width: 100%; font: 400 .95rem/1.4 var(--f-mono) }
.tbl th, .tbl td { text-align: start; padding: .5rem .6rem; border-bottom: 1px solid var(--rule) }

/* preview of the social queue */
.queue { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1.4rem; padding-bottom: 3rem }
.q { border-top: 3px solid var(--ink); padding-top: .7rem; display: grid; gap: .6rem; align-content: start }
.q-meta { display: flex; justify-content: space-between; font-size: var(--s-1) }
.q img { width: 100%; height: auto; display: block }
.q-slides { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px }
.q p { margin: 0; font-size: .95rem; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere }

/* right-to-left editions (Arabic): mirrored by logical properties above; these are the exceptions */
[dir="rtl"] { --f-display: "IBM Plex Sans Arabic", "Noto Kufi Arabic", Tahoma, sans-serif; --f-body: "IBM Plex Sans Arabic", "Noto Naskh Arabic", Tahoma, serif }
[dir="rtl"] .brand, [dir="rtl"] .langs, [dir="rtl"] .tk-num b, [dir="rtl"] .bignum .n, [dir="rtl"] .tile b { direction: ltr; unicode-bidi: isolate }
[dir="rtl"] .brand { font-family: var(--f-narrow) }
[dir="rtl"] .lead h1, [dir="rtl"] .art h1, [dir="rtl"] .item h3, [dir="rtl"] .most .t { letter-spacing: 0; line-height: 1.25 }
[dir="rtl"] .kicker, [dir="rtl"] .mast nav, [dir="rtl"] .body h2, [dir="rtl"] .tk-live { letter-spacing: 0 }
[dir="rtl"] .body p, [dir="rtl"] .body li { line-height: 1.9 }
[dir="rtl"] .meta, [dir="rtl"] .sources li { unicode-bidi: plaintext }
[dir="rtl"] .tk-track { animation-name: tk-crawl-rtl }
@keyframes tk-crawl-rtl { from { transform: translateX(0) } to { transform: translateX(50%) } }

@media (max-width: 52rem) {
  .lead, .river, .take-grid, .founder-head { grid-template-columns: minmax(0, 1fr) }
  .mast-meta { justify-content: flex-start }
  .take-portrait { position: static }
  .mast-meta { justify-items: start }
  .flow .arrow { display: none }
}

/* photos: a free-licence picture per story, credit always printed; a typographic cover until one is chosen */
.ph { margin: 0; display: grid; gap: .45rem }
.ph img, .ph .cover { width: 100%; display: block; object-fit: cover; background: var(--tint) }
.ph.wide img, .ph.wide .cover { aspect-ratio: 16 / 9 }
.ph.card img, .ph.card .cover { aspect-ratio: 3 / 2 }
.ph.hero { margin-block: .4rem 2rem; max-width: 60rem }
.ph.hero img { aspect-ratio: 16 / 9 }
.ph .cover { position: relative; background: #F1F1EE; overflow: hidden }
.ph .cover::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(10, 10, 10, .045) 14px 15px) }
.ph .cover i { position: absolute; inset-inline-start: .8rem; bottom: .7rem; font: 600 .7rem/1 var(--f-mono); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: #8A8A8A }
.ph figcaption { font: 400 .72rem/1.4 var(--f-mono); color: var(--muted) }
.ph figcaption a { color: inherit }
.ph-link { display: block; text-decoration: none }
.ph-link:hover img { opacity: .92 }
.item .ph-link { margin-bottom: .35rem }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ph .cover { background: #17171A } }
:root[data-theme="dark"] .ph .cover { background: #17171A }