/* Birdland Daily Supply News — editorial journal layer */
:root{
  --kb-bg:#f3efe5;
  --kb-paper:#fbf9f3;
  --kb-ink:#1f231f;
  --kb-muted:#6b6e65;
  --kb-faint:#8c8d84;
  --kb-line:#c6c1b4;
  --kb-line2:#7d8178;
  --kb-jade:#073c33;
  --kb-red:#a64f2a;
  --kb-amber:#9a6b2f;
  --kb-dark:#17362f;
}
body{
  background-color:var(--kb-bg);
  background-image:
    radial-gradient(rgba(31,35,31,.035) .6px,transparent .7px);
  background-size:5px 5px;
}
.terminal-strip{display:none}
.top{
  position:relative;
  top:auto;
  background:var(--kb-bg);
  color:var(--kb-ink);
  border-top:1px solid var(--kb-ink);
  border-bottom:4px double var(--kb-ink);
}
.topin{max-width:1440px;min-height:96px;padding:var(--sp-3) 24px}
.brand{
  color:var(--kb-jade);
  font-size:var(--fs-h1);
  letter-spacing:.12em;
  text-transform:uppercase;
}
.brand small{
  color:var(--kb-red);
  border-left:1px solid var(--kb-line2);
  font-size:var(--fs-micro);
}
.topmeta{color:var(--kb-muted)}
.topmeta a{color:var(--kb-jade)}
.topmeta .dot{background:#4c8059;box-shadow:none}
.language[open]>div{background:var(--kb-paper);border-color:var(--kb-line2);color:var(--kb-ink);box-shadow:0 18px 45px rgba(23,54,47,.13)}
.language a{color:var(--kb-jade)}
.page{
  display:block;
  max-width:1440px;
  padding:var(--sp-3) 24px var(--sp-6);
}
.rail{
  position:sticky;
  top:0;
  z-index:35;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:var(--sp-4);
  margin:0 0 var(--sp-3);
  padding:var(--sp-1) 0;
  border-top:0;
  border-bottom:1px solid var(--kb-ink);
  background:var(--kb-paper,#fbf9f3);
}
.rail h2{margin:0;font:600 var(--fs-micro) var(--mono);letter-spacing:.14em}
.navgroups{display:flex;min-width:0;overflow:auto;scrollbar-width:none}
.navgroups::-webkit-scrollbar{display:none}
.navgroup{
  display:flex;
  align-items:center;
  flex:0 0 auto;
  padding:0;
  border:0;
}
.navgroup strong{margin:0 8px;color:var(--kb-red)}
.navgroup a{
  padding:var(--sp-2) 8px;
  border-left:0;
  border-bottom:2px solid transparent;
  font:600 var(--fs-micro) var(--sans);
  white-space:nowrap;
}
.navgroup a:hover,.navgroup a:focus-visible,.navgroup a.active{
  border-left-color:transparent;
  border-bottom-color:var(--kb-red);
  background:transparent;
  color:var(--kb-red);
}
/* Under Large the edition index is chrome, like the site header: pinned near
   normal size. Scaled up it ran past the right edge and the last entries
   were simply unreachable. */
html.ui-lg .rail h2,
html.ui-lg .navgroup strong{font-size:11px}
html.ui-lg .navgroup a{font-size:12px}
/* The multi-column blocks collapse to one column at 640px because that is
   where their text stops fitting. At Large the text is 2.175x, so it stops
   fitting far earlier — headlines in the three-column news grid ran sideways
   into the neighbouring card, and the same is true of every other grid on the
   page. Large gets the one-column treatment at any width: it is the same
   layout the page already uses when the text is too big for the columns. */
html.ui-lg .brief-grid,
html.ui-lg .metric-grid,
html.ui-lg .desk-grid,
html.ui-lg .routes,
html.ui-lg .calendar-grid,
html.ui-lg .trust-grid,
html.ui-lg .news-grid,
html.ui-lg .source-columns{grid-template-columns:1fr}
html.ui-lg .news-card:first-child{grid-row:auto}
.free-app{position:relative;display:flex;justify-content:flex-end;align-items:center;padding:0 8px;border:0;min-width:126px}
.free-app .subscription-art-button{position:relative;display:block;width:112px;margin:-9px 0 -7px;padding:0;border:0;background:transparent;line-height:0;filter:drop-shadow(0 4px 4px rgba(34,30,25,.16));transform:rotate(-1.1deg);transition:transform var(--dur-slow) ease,filter var(--dur-slow) ease}
.free-app .subscription-art-button img{display:block;width:100%;height:auto}
.free-app .subscription-art-button::after{content:"";position:absolute;right:-8px;top:20px;width:35px;height:35px;border:1px solid rgba(166,79,42,.32);border-radius:50%;box-shadow:9px 4px 0 -8px rgba(166,79,42,.36),14px 8px 0 -13px rgba(166,79,42,.36);pointer-events:none}
.free-app .subscription-art-button:hover{transform:translateY(-2px) rotate(-.5deg);filter:drop-shadow(0 7px 7px rgba(34,30,25,.2))}
.free-app .subscription-art-button:focus-visible{outline:2px solid var(--kb-red);outline-offset:3px}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.hq{color:#8d8171}.hq .dot{background:#8d8171;box-shadow:none}.hq.is-online,.hq.is-online b{color:var(--kb-jade)}.hq.is-online .dot{background:#5d8d58;box-shadow:0 0 0 3px rgba(93,141,88,.16)}.language select{width:100%;margin-top:var(--sp-1);padding:var(--sp-2);border:1px solid #a99072;background:var(--kb-dark);color:#f5e9d4;font:500 var(--fs-micro) var(--mono)}
.main{border-top:0}
.hero{
  position:relative;
  min-height:205px;
  padding:var(--sp-3) 0 var(--sp-3);
  text-align:left;
  border-top:4px double var(--kb-ink);
  border-bottom:4px double var(--kb-ink);
}
.hero::after{
  content:"ASIA / PRODUCTION / EXPORT / FREIGHT";
  position:absolute;
  right:0;
  top:22px;
  max-width:210px;
  color:var(--kb-muted);
  font:600 var(--fs-micro)/1.7 var(--mono);
  letter-spacing:.12em;
  text-align:right;
}
.hero h1{
  max-width:1120px;
  margin:var(--sp-3) 0 var(--sp-2);
  color:var(--kb-ink);
  font-size:calc(clamp(48px,6.7vw,48px) * var(--ui-scale-display));
  line-height:.94;
  letter-spacing:.015em;
  text-transform:uppercase;
  white-space:nowrap;
}
.hero p{max-width:650px;margin:0;font-size:var(--fs-h3)}
.editionline{max-width:820px;margin-top:var(--sp-3)}
/* The action row was pinned absolutely to the bottom-right of the hero, so it
   landed on top of the edition line instead of after it: Subscribe RSS printed
   over the Market label, and "source state shown per report" ran underneath the
   buttons. It was tucked there when the hero was two lines and had room to
   spare. It flows now. */
.hero-actions{position:static;justify-content:flex-end;margin-top:16px;row-gap:var(--sp-2)}
.btn,.install button{
  border-radius:0;
  background:var(--kb-jade);
  border-color:var(--kb-jade);
}
.btn.ghost{color:var(--kb-jade);border-color:var(--kb-jade)}
.section{
  margin-top:var(--sp-4);
  border-top:1px solid var(--kb-ink);
  border-bottom:3px double var(--kb-ink);
}
.journal-front-section{border-bottom:4px double var(--kb-ink)}
/* Brief and risk. The supply-route map used to hold the middle column; it
   was a fixed illustration occupying prime front-page space every single
   day, which is the wrong trade for a paper that is reread daily, so it
   moved to the opening sequence and the brief took the width. */
.journal-front{
  display:grid;
  grid-template-columns:2.05fr 1.15fr;
  min-height:410px;
}
.journal-lead,.journal-drivers{padding:var(--sp-4) var(--sp-4)}
.journal-lead{padding-left:0;border-right:1px solid var(--kb-line)}
.journal-lead h2{margin:var(--sp-3) 0 var(--sp-3);font:700 var(--fs-h1)/1.14 var(--serif);letter-spacing:-.035em}
/* Sits directly under the headline and only when the headline is older than
   the summary below it, so the reader is told which of the two ages the big
   line has. Pulled up by one step to close the h2's bottom margin — the marker
   belongs to the headline, not to the paragraph after it. */
.journal-standing{margin:calc(var(--sp-3) * -1) 0 var(--sp-3);color:var(--kb-muted);font:600 var(--fs-micro) var(--mono);letter-spacing:.07em;text-transform:uppercase}
.journal-standing[hidden]{display:none}
.journal-lead p{margin:0;color:#514b41;font:var(--fs-body)/1.5 var(--serif)}
.journal-lead a{display:inline-block;margin-top:var(--sp-4);color:var(--kb-red);font:700 var(--fs-micro) var(--mono);letter-spacing:.07em;text-decoration:none;text-transform:uppercase}
/* The lead column was padded and the risk column was not, so the risk text
   started flush against the map — 0px, measured. Both sides of the map now
   have a gutter. */
.journal-risk{padding-left:var(--sp-4)}
.journal-lead{padding-right:var(--sp-4)}
 /* The front is a three-column grid — lead, map, risk — and the drivers block
    was falling into column one of the second row, which is the narrowest of
    the three (.75fr). That is why three cards could not sit side by side: they
    were being asked to fit a column built for one headline. It spans the full
    width, under the lead and the risk scope, which is where it belongs. */
.journal-drivers{grid-column:1/-1;padding:var(--sp-4) 0 var(--sp-4);border-top:1px solid var(--kb-line)}
.journal-driver-head{display:flex;justify-content:space-between;gap:var(--sp-3);padding-bottom:var(--sp-3);border-bottom:1px solid var(--kb-line)}
.journal-driver-head h2{margin:4px 0 var(--sp-1);font:700 var(--fs-h2)/1.1 var(--serif)}
.journal-driver-head p{margin:0;color:var(--kb-muted);font:var(--fs-micro)/1.4 var(--serif)}
/* Three drivers, three columns. The base stylesheet already laid these out
   side by side; this file loads after it and had flattened them back to a
   single column of wide rows, so the reader got one signal per screen-height
   instead of the comparison the section is for. */
.journal-front .brief-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--sp-1);margin-top:var(--sp-3);border:1px solid var(--kb-line);background:var(--kb-line);
}
.journal-front .brief-card{
  display:block;min-width:0;min-height:0;
  padding:var(--sp-3) var(--sp-3) var(--sp-3);
  border:0;background:var(--kb-paper);
}
.journal-front .brief-card .eyebrow{display:block;margin-bottom:var(--sp-1)}
.journal-front .brief-card h3{margin:0 0 var(--sp-2);font:700 var(--fs-body)/1.15 var(--serif)}
.journal-front .brief-card .state{
  display:inline-block;margin:0 0 var(--sp-2);padding:var(--sp-1) 8px;border-radius:999px;
  background:rgba(6,61,52,.07);font:700 var(--fs-micro)/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase;
}
.journal-front .brief-card p{margin:0 0 var(--sp-2);font:var(--fs-micro)/1.5 var(--serif)}
.journal-front .brief-card p:nth-of-type(2){display:none}
.journal-front .brief-card .move{margin:0 0 var(--sp-2);padding:0;border:0;font:var(--fs-micro)/1.5 var(--serif)}
.journal-front .brief-card .evidence-button{display:inline-block}
@media(max-width:860px){
  .journal-front .brief-grid{grid-template-columns:1fr}
}
.sectionhead{padding:var(--sp-3) 0 0}
.sectionhead h2{font-size:var(--fs-h2)}
.sectionhead p{font-size:var(--fs-small)}
.tag{background:transparent;border-color:var(--kb-line2);color:var(--kb-red)}
.brief-grid,.metric-grid,.desk-grid,.routes,.news-grid,.calendar-grid,.trust-grid{margin-top:var(--sp-3);border-top:1px solid var(--kb-line)}
.brief-card,.metric,.desk,.lane-list,.route-notes,.news-card,.calendar-side,.trust-grid>div{padding:var(--sp-4)}
.brief-card:first-child,.metric:first-child,.desk:first-child,.lane-list,.news-card:first-child,.trust-grid>div:first-child{padding-left:0}
.brief-card:last-child,.metric:last-child,.desk:last-child,.news-card:last-child,.route-notes,.calendar-side,.trust-grid>div:last-child{padding-right:0}
.brief-card h3{font-size:var(--fs-h2)}
.brief-card p,.desk .lede,.story p,.news-card p{color:#55584f}
.metric .value{font-size:var(--fs-h1)}
.spark{height:42px}
.desk h3{font-size:var(--fs-h2)}
.source-deck{margin-left:0;margin-right:0}
.source-column{background:rgba(251,249,243,.56)}
.news-card:first-child h3{font-size:var(--fs-h2)}
.follow-panel{padding:0 0 var(--sp-3)}
.chip{background:var(--kb-paper)}
.chip.on{background:#e4e9df;color:var(--kb-jade);border-color:var(--kb-jade)}
.footer{padding:24px 0}
.journal-floor{
  display:grid;
  grid-template-columns:minmax(260px,.85fr) 1.15fr;
  margin-top:var(--sp-3);
  border-top:1px solid var(--kb-line);
}
.journal-floor img{width:100%;height:230px;object-fit:cover;filter:grayscale(.72) sepia(.08)}
.journal-floor>div{display:flex;flex-direction:column;justify-content:center;padding:var(--sp-4) var(--sp-5)}
.journal-floor h3{margin:8px 0;font:700 var(--fs-h2)/1.15 var(--serif)}
.journal-floor p{max-width:470px;margin:0;color:var(--kb-muted);font:var(--fs-small)/1.5 var(--serif)}
.journal-floor a{margin-top:var(--sp-3);color:var(--kb-red);font:700 var(--fs-micro) var(--sans)}
dialog{border-radius:0}

@media(max-width:980px){
  .topin{min-height:88px}
  .brand{font-size:var(--fs-h1)}
  .rail{position:sticky;top:0;z-index:35;display:block;padding:var(--sp-2) 0}
  .rail h2{margin-bottom:8px}
  .navgroups{display:flex}
  .free-app{margin-top:var(--sp-2)}
  .hero-actions{position:static;justify-content:flex-start}
  .hero::after{display:none}
  .hero h1{white-space:normal}
  .journal-front{grid-template-columns:1fr 1fr}
  .journal-drivers{grid-column:1/-1;padding-left:0}
}
@media(max-width:640px){
  .free-app{justify-content:flex-start;min-width:0;padding-left:4px}
  .free-app .subscription-art-button{width:104px}
  .topin{padding:var(--sp-3) var(--sp-3)}
  .brand{font-size:var(--fs-h2)}
  .brand small{display:block;margin:var(--sp-2) 0 0;padding:0;border:0}
  .page{padding:var(--sp-3) var(--sp-3) 48px}
  .navgroup strong{display:none}
  .hero{min-height:0;padding-top:var(--sp-4)}
  .hero h1{font-size:var(--fs-display);margin-top:var(--sp-4)}
  .hero p{font-size:var(--fs-body)}
  .journal-front{grid-template-columns:1fr}
  .journal-lead{border-right:0;border-bottom:1px solid var(--kb-line)}
  .journal-lead,.journal-drivers{padding:var(--sp-3) 0}
  .journal-front .brief-card{grid-template-columns:76px 74px 1fr}
  .journal-front .brief-card .state{grid-column:3}
  .journal-front .brief-card p{grid-column:1/-1;grid-row:2}
  .journal-front .brief-card .move{grid-column:1/-1;grid-row:3}
  .journal-front .brief-card .evidence-button{grid-column:3;grid-row:3;justify-self:end}
  .journal-floor{grid-template-columns:1fr}
  .journal-floor>div{padding:var(--sp-4) var(--sp-3)}
  .brief-card:first-child,.metric:first-child,.desk:first-child,.lane-list,.news-card:first-child,.trust-grid>div:first-child{padding-left:var(--sp-3)}
  .brief-card:last-child,.metric:last-child,.desk:last-child,.news-card:last-child,.route-notes,.calendar-side,.trust-grid>div:last-child{padding-right:var(--sp-3)}
}

/* ---- The front page reserves its own height ----

   Everything in .journal-front is written from the inlined edition JSON after
   first paint: the block measures 543px empty and 896px full at 1440, so the
   footer and everything between them dropped 353px once the script ran. That
   single move was most of this page's 0.234 CLS, the worst on the site.

   The heights below are measured, not guessed — 807 / 874 / 1098 / 1654 /
   2164px at 1440 / 1100 / 900 / 700 / 380, re-measured after the supply map
   left this row and the brief took its place. They are a typical edition, not
   the contract maximum: min-height only reserves, so a six-theme day still
   grows the box, whereas reserving for the busiest possible edition would
   leave dead paper under every ordinary one.

   The tint is the skeleton: something is coming, rather than a white gap. */
.journal-front{min-height:810px;background:linear-gradient(var(--kb-line,rgba(0,0,0,.03)) 0 0) no-repeat 0 0/100% 1px}
/* No [data-ready] escape hatch: min-height only reserves, it never caps, so a
   taller edition still grows and releasing the reservation later would just be
   a second shift. */
@media(max-width:1200px){.journal-front{min-height:875px}}
@media(max-width:1000px){.journal-front{min-height:1100px}}
@media(max-width:820px){.journal-front{min-height:1655px}}
@media(max-width:560px){.journal-front{min-height:2165px}}

/* ---- Sections reserve their height before they have content ----

   Almost every block on this page renders from the inlined edition JSON, so
   at first paint they are zero-height and the footer sits near the top of the
   viewport. Then the data lands, the document grows by several thousand
   pixels and the footer leaves — measured as the largest remaining shift.

   contain-intrinsic-size gives each section a placeholder height until it has
   really been laid out, and  makes the browser remember the real one
   afterwards. Print has to opt out or sections outside the viewport render
   blank on paper. */

@media print{
  
  /* The reserved heights below exist to stop the live page jumping while
     edition data lands; on paper they are just blank paper. */
  .journal-lead,.journal-risk,.journal-drivers,.hero-actions{min-height:0!important}
  /* One column reads better than three squeezed ones on A4, and the map keeps
     its natural height rather than stretching to match a column that is no
     longer beside it. */
  .journal-front{display:block}
  .journal-lead{border-right:0}
  /* One column on paper: a side gutter would read as an indent. */
  .journal-risk,.journal-lead{padding-left:0;padding-right:0}
  /* Three cards in a 2x2 grid left the fourth cell showing the grid's own
     line-colour background — a grey brick on paper. */
  .journal-front .brief-grid{background:transparent;border:0;gap:6px}
  .journal-front .brief-card{border:1px solid #c9c4b8}
}

/* The last of it: four boxes on the front page still change height when the
   edition data lands. The lead story and the risk list shrink by 15px as the
   placeholder sentence is replaced by the real one; the driver cards grow,
   by 15px at 1440 and 297px at 380; the action row grows 8px once the desk
   name is written into it. Each reserves the taller of its two states. */
.journal-lead,.journal-risk{min-height:520px}
.journal-drivers{min-height:330px}
.hero-actions{min-height:47px}
@media(max-width:820px){
  .journal-lead,.journal-risk{min-height:0}
  .journal-drivers{min-height:800px}
}

/* ---- Today's brief -------------------------------------------------------
   Style is the paper's own: mono eyebrow, serif headline, hairline-ruled
   rows. Nothing new is introduced except the editor's two marks.

   Written in logical properties throughout. Hebrew is a queued language and
   this block would otherwise be the one part of the front page that has to
   be rebuilt rather than mirrored. */
.db-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--sp-4);margin-block:var(--sp-3) 0}
.db-cols[hidden]{display:none}
.db-col-head{margin-block-end:var(--sp-2);padding-block-end:6px;border-block-end:1px solid var(--kb-line);color:var(--kb-muted);font:700 var(--fs-micro) var(--mono);letter-spacing:.09em;text-transform:uppercase}
.db-list{margin:0;padding:0;list-style:none}
.db-line{position:relative;display:flex;gap:var(--sp-2);padding-block:7px;border-block-end:1px solid #e3ddcd;color:#514b41;font:var(--fs-micro)/1.55 var(--serif)}
.db-line:last-child{border-block-end:0}
.db-tag{flex:0 0 auto;min-inline-size:44px;color:var(--kb-red);font:700 var(--fs-micro)/1.7 var(--mono);letter-spacing:.05em;text-transform:uppercase}
.db-text{min-inline-size:0}
.db-line.is-quiet{color:var(--kb-faint)}
.db-line.is-also .db-tag{color:var(--kb-amber)}
.db-jump{position:absolute;inset:0;text-indent:-9999px;overflow:hidden}
.db-line.is-link:hover{background:#f2ecdf}
.db-jump:focus-visible{outline:2px solid var(--kb-red);outline-offset:-2px}
.db-action{margin-block:var(--sp-3) 0;padding-block-start:var(--sp-2);border-block-start:1px solid var(--kb-line);font:var(--fs-micro)/1.6 var(--serif)}
.db-action[hidden]{display:none}
.db-action b{color:var(--kb-red);font:700 var(--fs-micro) var(--mono);letter-spacing:.07em;text-transform:uppercase}
.db-tool{color:var(--kb-jade);font:700 var(--fs-micro) var(--mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.db-carried,.db-away{color:var(--kb-muted);font:600 var(--fs-micro) var(--mono);letter-spacing:.07em;text-transform:uppercase}
.db-carried{margin-block:calc(var(--sp-3) * -1) var(--sp-3)}
.db-carried[hidden],.db-away[hidden]{display:none}
.db-away{margin-block-start:var(--sp-3);text-transform:none;letter-spacing:0}
.db-away ul{margin:6px 0 0;padding:0;list-style:none}
.db-away li{padding-block:3px;color:#514b41;font:var(--fs-micro)/1.5 var(--serif)}
.db-away li b{color:var(--kb-muted);font:700 var(--fs-micro) var(--mono);letter-spacing:.06em}
.db-hl{background-image:linear-gradient(#f2e3bd,#f2e3bd);background-repeat:no-repeat;background-size:0% 82%;background-position:0 62%;border-radius:2px;transition:background-size .42s ease}
.db-hl.is-on{background-size:100% 82%}
.db-fig{position:relative;color:var(--kb-red);white-space:nowrap;padding-inline:5px}
.db-fig svg{position:absolute;inset-block-start:-2px;inset-inline-start:0;inline-size:100%;block-size:calc(100% + 4px);overflow:visible;pointer-events:none}
.db-fig ellipse{transition:stroke-dashoffset .5s ease}
.db-line{opacity:0;transform:translateY(5px);transition:opacity .22s ease,transform .22s ease}
.db-line.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .db-line{opacity:1;transform:none;transition:none}
  .db-hl{transition:none}
  .db-fig ellipse{transition:none}
}
@media(max-width:820px){.db-cols{grid-template-columns:1fr;gap:var(--sp-3)}}
html.ui-lg .db-cols{grid-template-columns:1fr;gap:var(--sp-3)}
html.ui-lg .db-line{flex-wrap:wrap}
html.ui-lg .db-tag{min-inline-size:0}
@media print{
  .db-line{opacity:1;transform:none}
  .db-hl{background-size:100% 82%}
  .db-jump{display:none}
}

/* ---- The supply map's new home -------------------------------------------
   It used to hold the middle column of the front page: a fixed illustration
   occupying prime space in a paper that is reread every day. It does its real
   job in one look, so it does it here, behind the opening sheet, and the
   column it vacated went to the brief.

   Applied as a background on the sheet itself rather than a positioned layer:
   the sheet is shared chrome across five desks and this rule is scoped to
   ABrief, so it must not be able to disturb anything it does not own. The
   veil above it is the paper colour, so the icon and app name keep their
   contrast. The file is already in the service worker's precache, so a
   returning reader pays nothing for it.

   The sheet is shown once per browser session by app-bar.js, which is its
   own long-standing rhythm and not this block's to change. */
#ab-splash[data-app="news"]{
  background-image:
    linear-gradient(rgba(243,239,229,.88),rgba(243,239,229,.94)),
    url("images/asia-supply-map.webp");
  background-repeat:no-repeat,no-repeat;
  background-position:center,center;
  background-size:cover,cover;
}

/* The lead: one line per production base. Set in the headline face but a step
   down from a single-line headline, because two of them share the space one
   used to have. Each line links to the desk its story came from. */
.journal-lead h2 .db-origin{display:block;margin-block-end:var(--sp-2)}
.journal-lead h2 .db-origin:last-child{margin-block-end:0}
.db-origin-tag{display:block;margin-block-end:2px;color:var(--kb-red);font:700 var(--fs-micro) var(--mono);letter-spacing:.11em;text-transform:uppercase}
/* .journal-lead a is dressed for the one link this column used to hold —
   the uppercase mono "READ THE FULL ASIA VIEW" line. The lead is now made of
   anchors too, so it inherited all-caps mono red and printed the whole front
   page shouting. These four resets are what that rule has to be told. */
.journal-lead h2 .db-origin-text{display:inline;margin:0;font:700 calc(24px * var(--ui-scale-display))/1.2 var(--serif);letter-spacing:-.025em;text-transform:none;color:inherit;text-decoration:none}
.journal-lead h2 a.db-origin-text:hover,.journal-lead h2 a.db-origin-text:focus-visible{text-decoration:underline;text-underline-offset:3px}
.db-origin.is-quiet .db-origin-text{color:var(--kb-faint);font-weight:400;font-style:italic}
@media(max-width:820px){.journal-lead h2 .db-origin-text{font-size:calc(20px * var(--ui-scale-display))}}