/* Unbe-Mendi Times. One markup, two styles: body.mono (NYT-like) and body.colour (Guardian-like).
   Pages are designed at A4 size (794 × 1123 CSS px) and scaled on screen; phones get one column. */

:root { --ink: #121212; --quiet: #555; --rule: #121212; --soft: #d6d6d6; --paper: #fff; --navy: #052962; --s: 1; }
* { box-sizing: border-box; }
html, body { margin: 0; background: #E9E7E2; color: var(--ink); -webkit-text-size-adjust: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
.loading, .error { font-family: 'Libre Franklin', sans-serif; text-align: center; padding: 40vh 16px 0; }

body.mono .c-only, body.colour .m-only { display: none !important; }

/* ---------- type, shared by pages and phone ---------- */
.hd { margin: 0; line-height: 1.07; text-wrap: balance; }
.mono .hd { font-family: 'Old Standard TT', serif; font-weight: 700; }
.colour .hd { font-family: 'Zilla Slab', serif; font-weight: 600; }
.tx { margin: 0 0 5px; hyphens: auto; }
.mono .tx { font-family: 'Libre Caslon Text', serif; }
.colour .tx { font-family: 'Source Serif 4', serif; }
.mono .sn { font-family: 'Libre Franklin', sans-serif; }
.colour .sn { font-family: 'Source Sans 3', sans-serif; }
.mono .k { font-family: 'Libre Franklin', sans-serif; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.colour .k { font-family: 'Zilla Slab', serif; font-weight: 700; color: var(--c, #C70000); }
.dk { margin: 4px 0 0; line-height: 1.18; text-wrap: balance; }
.mono .dk { font-family: 'Old Standard TT', serif; font-style: italic; }
.colour .dk { font-family: 'Source Serif 4', serif; color: #3a3a3a; }
.by { font-weight: 700; }
.mono .by { font-family: 'Libre Franklin', sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.colour .by { font-family: 'Source Sans 3', sans-serif; color: var(--c, #C70000); }
.mono .img { background: radial-gradient(circle, rgba(0,0,0,.6) .9px, transparent 1.25px) 0 0/3.6px 3.6px, linear-gradient(155deg, #f2f2f2 0%, #bdbdbd 38%, #7a7a7a 70%, #3d3d3d 100%); }
.colour .img { background: radial-gradient(circle, rgba(255,255,255,.18) .9px, transparent 1.3px) 0 0/4px 4px, linear-gradient(180deg, #8fb0c9 0%, #c9d6df 42%, #d9c3a2 58%, #56687a 82%, #2e3b47 100%); }
.img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mono .img img { filter: grayscale(1) contrast(1.1); }
.colour .up { color: #1B7A3E; } .colour .dn { color: #B00020; }
.mk { width: 100%; border-collapse: collapse; }
.mk td { border-bottom: 1px solid #d9d9d9; }
.mk td + td { text-align: right; }

/* ---------- top bar (screen only) ---------- */
.bar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: max(env(safe-area-inset-top), 4px) 16px 4px; font-size: 14px; font-weight: 600; min-height: 52px; }
.mono .bar { background: #fff; border-bottom: 1px solid var(--rule); font-family: 'Libre Franklin', sans-serif; }
.colour .bar { background: var(--navy); color: #fff; font-family: 'Source Sans 3', sans-serif; }
.bar .tool { display: inline-flex; align-items: center; min-height: 44px; background: none; border: 0; padding: 0 4px; cursor: pointer; font-weight: 600; text-decoration: none; }
.bar .tool[disabled] { opacity: .45; cursor: default; }
.bar .mid { display: flex; align-items: center; gap: 12px; }
.seg { display: flex; border-radius: 22px; padding: 3px; gap: 2px; }
.mono .seg { border: 1px solid var(--rule); }
.colour .seg { border: 1px solid rgba(255,255,255,.6); }
.seg button { border: 0; border-radius: 18px; padding: 0 14px; height: 36px; cursor: pointer; background: transparent; font-size: 13px; font-weight: 600; }
.mono .seg button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.colour .seg button[aria-pressed="true"] { background: #fff; color: var(--navy); }
@media (max-width: 520px) { .bar .date { display: none; } }

/* ---------- pages (iPad, desktop, print) ---------- */
.sheets { padding: 12px 0 40px; }
.sheet { width: calc(794px * var(--s)); height: calc(1123px * var(--s)); margin: 0 auto 16px; box-shadow: 0 1px 3px rgba(0,0,0,.18); background: #fff; overflow: hidden; }
.page { width: 794px; height: 1123px; padding: 32px 40px 28px; background: var(--paper); transform: scale(var(--s)); transform-origin: 0 0;
  display: flex; flex-direction: column; overflow: hidden; }
.page .tx { font-size: 12.2px; line-height: 1.38; }
.page .k { font-size: 9.5px; }
.colour .page .k { font-size: 12.5px; }
.page .by { font-size: 9.5px; margin: 6px 0 4px; }
.colour .page .by { font-size: 10.5px; }
.page .mk { font-size: 10.5px; margin-top: 3px; }
.page .mk td { padding: 2.5px 0; }

/* masthead */
.mast-m { display: grid; grid-template-columns: 128px minmax(0, 1fr) 128px; gap: 14px; align-items: center; }
.mast-m .ear { border: 1px solid var(--rule); padding: 7px 8px; text-align: center; font-family: 'Old Standard TT', serif; font-style: italic; font-size: 11.5px; line-height: 1.25; }
.mast-m .name { font-family: 'UnifrakturMaguntia', serif; font-size: 47px; line-height: 1; text-align: center; white-space: nowrap; }
.mast-m .wx { font-size: 9.5px; line-height: 1.3; }
.dateline { margin-top: 10px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 4px 0; display: flex; justify-content: space-between; font-size: 10.5px; font-weight: 700; }
.dateline + .dbl { height: 2px; border-bottom: 1px solid var(--rule); }
.sky { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sky > div { border-top: 4px solid var(--c); padding-top: 5px; }
.sky .hd { font-size: 13.5px; font-weight: 500; }
.mast-c { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--navy); }
.mast-c .meta { font-size: 11px; line-height: 1.35; }
.mast-c .name { font-family: 'Zilla Slab', serif; font-weight: 700; font-size: 54px; line-height: .9; color: var(--navy); letter-spacing: -.02em; white-space: nowrap; }
.mast-c .name span { font-weight: 500; }
.nav { display: flex; justify-content: space-between; font-size: 11px; font-weight: 700; padding: 5px 0; border-bottom: 1px solid #dcdcdc; }

/* front page grid */
.main { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); height: 668px; margin-top: 10px; overflow: hidden; flex: none; }
.colour .main { column-gap: 14px; }
.brief, .lead, .side { display: flex; flex-direction: column; overflow: hidden; }
.brief { gap: 7px; }
.mono .brief { padding-right: 11px; border-right: 1px solid var(--rule); }
.colour .brief { order: 3; background: #F3F1EC; padding: 10px 11px; }
.lead { grid-column: span 2; }
.mono .lead { padding: 0 12px; border-right: 1px solid var(--rule); }
.colour .lead { order: 1; }
.side { gap: 6px; }
.mono .side { padding-left: 11px; }
.colour .side { order: 2; }
.mono .lead-hd { text-align: center; font-size: 31px; }
.colour .lead-hd { font-size: 28px; }
.mono .lead .dk, .mono .lead .by { text-align: center; }
.lead .cols { columns: 2; column-gap: 16px; column-rule: 1px solid var(--soft); flex: 1; overflow: hidden; text-align: justify; }
.alert { padding: 7px 8px; }
.mono .alert { border: 1.5px solid var(--rule); }
.colour .alert { background: #fff; border-top: 4px solid #C70000; }
.mono .mkbox { border-top: 2px solid var(--rule); padding-top: 5px; }
.colour .mkbox { border-top: 4px solid #3F464A; padding-top: 5px; }
.row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); flex: 1; overflow: hidden; margin-top: 10px; }
.mono .row { border-top: 3px double var(--rule); padding-top: 8px; }
.colour .row { column-gap: 14px; }
.cell { overflow: hidden; }
.mono .cell { padding: 0 11px; border-right: 1px solid var(--rule); }
.mono .cell:first-child { padding-left: 0; }
.mono .cell:last-child { border-right: 0; padding-right: 0; }
.colour .cell { border-top: 4px solid var(--c); padding-top: 5px; }
.jump { font-size: 9.5px; font-weight: 700; text-align: right; margin-top: 4px; }
.foot { margin-top: 6px; padding-top: 4px; display: flex; justify-content: space-between; font-size: 8.5px; letter-spacing: .04em; }
.mono .foot { border-top: 1px solid var(--rule); text-transform: uppercase; }
.colour .foot { border-top: 1px solid var(--navy); color: #333; }

/* inside pages */
.folio { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 5px; font-size: 10.5px; font-weight: 700; }
.mono .folio { border-bottom: 1px solid var(--rule); }
.folio .t { font-size: 22px; }
.mono .folio .t { font-family: 'Old Standard TT', serif; font-style: italic; }
.colour .folio { border-bottom: 4px solid var(--c); }
.colour .folio .t { font-family: 'Zilla Slab', serif; color: var(--c); }
.mono .folio + .dbl { height: 2px; border-bottom: 1px solid var(--rule); }
.ibody { flex: 1; margin-top: 12px; columns: 4; column-gap: 22px; column-fill: auto; overflow: hidden; }
.mono .ibody { column-rule: 1px solid var(--soft); }
.ibody article { break-inside: avoid-column; margin-bottom: 12px; }
.ibody article .hd { font-size: 17px; }
.ibody article.top { column-span: all; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 22px; padding-bottom: 12px; margin-bottom: 14px; }
.mono .ibody article.top { border-bottom: 3px double var(--rule); }
.colour .ibody article.top { border-bottom: 1px solid #dcdcdc; }
.ibody article.top .hd { font-size: 27px; }
.ibody article.top .body { columns: 2; column-gap: 18px; margin-top: 8px; text-align: justify; }
.ibody article.top .aside .img { height: 150px; }
.box { break-inside: avoid-column; margin-bottom: 14px; padding: 8px 9px; }
.mono .box { border: 1px solid var(--rule); }
.colour .box { background: #F3F1EC; border-top: 4px solid var(--c); }
.box .k { display: block; margin-bottom: 4px; }
.wxdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); text-align: center; font-size: 9.5px; gap: 2px; margin: 4px 0; }
.wxdays b { display: block; font-size: 10px; }
.cont { font-size: 9.5px; font-weight: 700; font-style: italic; margin-bottom: 4px; }

/* ---------- phone ---------- */
.phone { background: #fff; min-height: 100vh; }
.phone .wrap { padding: 0 18px 40px; max-width: 640px; margin: 0 auto; }
.phone .tx { font-size: 16.5px; line-height: 1.5; margin: 0 0 10px; }
.mono .phone .tx { font-size: 16px; }
.phone .k { font-size: 11px; }
.colour .phone .k { font-size: 15px; }
.phone .dk { font-size: 18px; margin-top: 6px; line-height: 1.25; }
.colour .phone .dk { font-size: 16.5px; }
.phone .by { font-size: 12px; margin: 8px 0; }
.phone .mk { font-size: 15px; }
.phone .mk td { padding: 6px 0; }
.p-mast-m { padding: 10px 18px 0; }
.p-mast-m .name { font-family: 'UnifrakturMaguntia', serif; font-size: 37px; line-height: 1; text-align: center; white-space: nowrap; }
.p-mast-m .dateline { font-size: 10.5px; }
.p-mast-m .wx { font-size: 13px; line-height: 1.4; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.p-mast-c { background: var(--navy); color: #fff; padding: 8px 18px 12px; }
.p-mast-c .name { font-family: 'Zilla Slab', serif; font-weight: 700; font-size: 40px; line-height: 1; letter-spacing: -.02em; white-space: nowrap; }
.p-mast-c .name span { font-weight: 500; }
.p-wx-c { padding: 10px 18px; background: #F3F1EC; font-size: 14px; line-height: 1.4; }
.sec { display: flex; justify-content: space-between; align-items: baseline; margin: 26px 0 12px; }
.mono .sec { font-family: 'Libre Franklin', sans-serif; font-weight: 800; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; border-top: 3px double var(--rule); border-bottom: 1px solid var(--rule); padding: 6px 0; }
.colour .sec { font-family: 'Zilla Slab', serif; font-weight: 700; font-size: 20px; border-top: 4px solid var(--c); color: var(--c); padding-top: 6px; }
.sec small { font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.colour .sec small { font-family: 'Source Sans 3', sans-serif; color: var(--quiet); }
.phone article { border-top: 1px solid var(--soft); padding-top: 14px; margin-top: 14px; }
.phone .sec + article { border-top: 0; padding-top: 0; margin-top: 0; }
.phone article .hd { font-size: 22px; }
.phone article.lead-p .hd { font-size: 29px; margin-top: 14px; }
.phone .img { height: 220px; margin: 0 -18px; }
.phone .alert { padding: 10px 12px; margin-top: 4px; }
.colour .phone .alert { background: #FBF1EF; }
.phone .box { padding: 10px 12px; margin-top: 14px; }
.phone .wxdays { font-size: 12px; }
.phone .wxdays b { font-size: 13px; }
.meta-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 700; margin-top: 6px; }
.meta-row a { text-decoration: none; }
.fb { display: flex; gap: 8px; margin-top: 10px; }
.fb button { font-size: 13px; font-weight: 700; min-height: 44px; padding: 0 16px; background: #fff; cursor: pointer; }
.mono .fb button { border: 1px solid var(--ink); }
.colour .fb button { border: 1px solid var(--navy); color: var(--navy); border-radius: 22px; }
.mono .fb button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.colour .fb button[aria-pressed="true"] { background: var(--navy); color: #fff; }
.srcs { font-size: 13px; margin: 6px 0 0; padding-left: 18px; }
.srcs li { margin: 2px 0; }

/* ---------- print: real A4 pages, no chrome ---------- */
@page { size: A4; margin: 0; }
@media print {
  :root { --s: 1 !important; }
  html, body { background: #fff; }
  .bar { display: none; }
  .sheets { padding: 0; }
  .sheet { width: 794px; height: 1123px; margin: 0; box-shadow: none; break-after: page; }
  .sheet:last-child { break-after: auto; }
  .page { transform: none; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Both layouts are in the DOM; the viewport picks one, print always takes the pages. */
@media screen and (max-width: 759px) { .sheets { display: none; } }
@media screen and (min-width: 760px) { .phone { display: none; } }
@media print { .phone { display: none !important; } .sheets { display: block !important; } }

/* Top story without an image takes the full width. */
.ibody article.top.noimg { grid-template-columns: minmax(0, 1fr); }
.ibody article.top.noimg .body { columns: 3; }
/* The colour Briefing sits in a padded panel, so it gets slightly tighter type. */
.colour .page .brief { gap: 5px; }
.colour .page .brief .tx { font-size: 11.6px; line-height: 1.34; }

/* ---------- measured layout ---------- */
#stage { position: absolute; left: -10000px; top: 0; width: 794px; visibility: hidden; pointer-events: none; }
.fit, .fill { flex: 1 1 0; min-height: 0; overflow: hidden; }
.side .fit { margin-top: 2px; }
.side .mkbox { margin-top: 6px; }
.brief .fill { margin: 2px 0; }
.brief .fill:empty { flex: 1 1 0; }
.row { grid-template-rows: minmax(0, 1fr); }
.cell { display: flex; flex-direction: column; min-height: 0; }
.cell .fit { margin-top: 5px; }
.lead .cols.fit { flex: 1 1 0; }
.tx.cont-p { text-indent: 0; }
.ib { margin-top: 6px; }
.ib .tx { margin: 0 0 3px; }
.ib-h { display: block; margin-bottom: 3px; padding-top: 5px; }
.mono .ib-h { border-top: 1px solid var(--rule); }
.colour .ib-h { border-top: 3px solid var(--navy); color: var(--navy); }
.flag { display: block; margin-bottom: 6px; padding: 3px 0; }
.mono .flag { border-top: 2px solid var(--rule); border-bottom: 1px solid var(--rule); }
.colour .flag { border-top: 4px solid var(--c); }
.ibody .blk { break-inside: avoid-column; }
.ibody .blk .box { margin-bottom: 12px; }
.ibody .ib { break-inside: avoid-column; }
.ibody article.top .flag { grid-column: 1 / -1; }
.wxl .tx { margin: 0 0 2px; }
.wxl .ib-h { margin-top: 6px; }

/* Work box (SU/OS digest) */
.work .kb { display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; margin: 2px 0 4px; font-size: 10.5px; }
.work .kb .big { font-size: 20px; }
.work .spark { width: 96px; height: 22px; flex: none; }
.work .spark rect { fill: #9a9a9a; }
.work .spark rect.hit { fill: var(--ink); }
.colour .work .spark rect.hit { fill: var(--c); }
.work .spark line { stroke: var(--ink); stroke-width: .6; stroke-dasharray: 2 1.5; }
.work .funnel { display: flex; flex-wrap: wrap; gap: 2px 4px; font-size: 9.5px; margin-top: 6px; line-height: 1.4; }
.work .funnel i { font-style: normal; color: #767676; }
.phone .work .kb { font-size: 14px; }
.phone .work .kb .big { font-size: 28px; }
.phone .work .spark { width: 150px; height: 32px; }
.phone .work .funnel { font-size: 13px; }
/* Lead without an image: the headline carries the page. */
.mono .lead-hd.typo { font-size: 44px; margin-top: 4px !important; }
.colour .lead-hd.typo { font-size: 40px; margin-top: 4px !important; }