/* =====================================================================================================
   HK TIMES - the city's newspaper (Home, first block under the 3D city). Markup comes from static/times.js.
   Midnight edition: midnight-blue paper, ivory ink, platinum-ice rules; health colours only where they mean something.
   Type: Instrument Serif for display (nameplate, headlines, standfirst, numerals), Geist for text and small print.
   One three-column grid runs down the whole sheet: lead well (2) + rail (1) on top, the deck (3) below.
   Every class is tm-*.
   ===================================================================================================== */
.tm-host{scroll-margin-top:70px}
.tm-host:empty{display:none}

/* ---------- the sheet ---------- */
.tm-paper{
  --tm-ink:#f4efe4;--tm-ink2:#d9d4c8;--tm-ink3:#aba79e;--tm-ink4:#88857e;
  --tm-rule:rgba(244,239,228,.13);--tm-rule2:rgba(244,239,228,.38);
  --tm-ice:var(--accent,#a9d8f0);
  --tm-g:38px;--tm-px:36px;--em-cut:#0b0e14;
  position:relative;isolation:isolate;overflow:hidden;border-radius:3px;padding:28px var(--tm-px) 14px;
  color:var(--tm-ink3);font:400 14px/1.56 var(--sans);letter-spacing:0;text-align:left;
  background:radial-gradient(75% 430px at 50% -130px,rgba(169,216,240,.11),transparent 70%),linear-gradient(180deg,#0e121a 0,#0a0d13 430px,#080a0f 100%);
  /* edge highlight + hairline, two more sheets showing under the fold, the drop shadow, and the city's light from above */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.085),0 0 0 1px rgba(214,228,240,.11),
    0 5px 0 -2px #0a0c12,0 5px 0 -1px rgba(214,228,240,.085),0 10px 0 -5px #090b10,0 10px 0 -4px rgba(214,228,240,.06),
    0 60px 90px -60px #000,0 -34px 80px -62px rgba(127,210,255,.5);
  margin-bottom:10px;
}
/* paper grain (the shared --grain noise) */
.tm-paper::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:var(--grain);opacity:.9}
.tm-paper b{font-weight:500}
.tm-paper i{font-style:normal}

/* the rupee sign in its own face (Instrument Serif and Geist do not carry it): a serif one inside display type */
.tm-rs{white-space:nowrap}
.tm-rs>i{font-family:"Segoe UI",system-ui,-apple-system,"Noto Sans",sans-serif;font-style:inherit;font-weight:inherit;font-size:.9em;margin-right:.03em}
.tm-h .tm-rs>i,.tm-mini-h .tm-rs>i,.tm-stand .tm-rs>i,.tm-pull>b .tm-rs>i,.tm-big>b .tm-rs>i,.tm-fig-n b .tm-rs>i{font-family:"Times New Roman","Noto Serif",Cambria,Georgia,serif;font-weight:400;font-size:.86em;margin-right:.02em}

/* ---------- live numbers ----------
   A live figure (data-n) is a number in a box of its own, so its digits can roll (FX.setNum in fx.js) without moving the line
   it sits on. While it rolls FX gives every digit a column (od-w); here each column is exactly as wide as the digit it is
   rolling to (times.js puts that digit, unseen, in an od-x), so a number in the serif face - which has no tabular digits -
   is as wide during the roll as before and after it. */
.tm-n{position:relative;display:inline-block;line-height:1;white-space:nowrap}
.tm-paper od-w{position:relative}
.tm-paper od-x{visibility:hidden}
.tm-paper od-x+od-s{position:absolute;left:0;right:0;top:0}
.tm-paper od-d{display:flex;justify-content:center}
.tm-paper od-c{white-space:pre}
.tm-pull>b .tm-rs>i,.tm-big>b .tm-rs>i,.tm-fig-n b .tm-rs>i{line-height:0}
/* the glow of a number that just changed: a soft light behind it, opacity only. (The app-wide glow is a text-shadow; inside
   the digit columns it would be cut into boxes.) */
.tm-paper .tm-n.fx-bump{animation:none}
.tm-n.fx-bump::after{content:"";position:absolute;left:-.45em;right:-.45em;top:-.32em;bottom:-.32em;border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(closest-side,rgba(169,216,240,.36),rgba(169,216,240,.1) 58%,rgba(169,216,240,0));animation:tm-glow 1.15s var(--ease,ease-out)}
@keyframes tm-glow{0%{opacity:0}16%{opacity:1}100%{opacity:0}}
/* the pictures of a cross-fade (times.js): how a block - or the whole sheet - looked, fading out over the new one */
.tm-ghosts{position:absolute;inset:0;z-index:3;overflow:hidden;pointer-events:none}
.tm-ghosts>.tm-ghost{position:absolute;margin:0!important;pointer-events:none}

/* small-caps labels */
.tm-lbl{display:block;font:600 9.5px/1.25 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--tm-ink4)}

/* ---------- masthead ---------- */
.tm-mast{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:stretch;column-gap:28px}
.tm-plate{text-align:center;min-width:0;align-self:end}
.tm-name{font:400 clamp(58px,7.5vw,106px)/.86 var(--serif);letter-spacing:.024em;text-transform:uppercase;white-space:nowrap;padding-top:.04em;
  color:var(--tm-ink);background:linear-gradient(180deg,#fffdf8 6%,#f0eadd 48%,#b6c0ca 98%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 -1px 0 rgba(0,0,0,.8)) drop-shadow(0 1px 0 rgba(255,255,255,.13)) drop-shadow(0 12px 26px rgba(127,210,255,.17))}
.tm-motto{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:11px;font:italic 400 16.5px/1 var(--serif);color:var(--tm-ink3);letter-spacing:.012em;white-space:nowrap}
.tm-motto>i{flex:0 1 64px;height:4px;border-top:1px solid var(--tm-rule2);border-bottom:1px solid var(--tm-rule)}
/* the ears: two small framed boxes beside the nameplate */
.tm-ear{position:relative;display:grid;gap:4px;align-content:center;width:min(100%,262px);padding:12px 16px 12px;border:1px solid var(--tm-rule)}
.tm-ear::before{content:"";position:absolute;inset:3px;border:1px solid rgba(244,239,228,.06);pointer-events:none}
.tm-ear-r{justify-self:end}
.tm-ear-n{display:block;font:400 30px/1 var(--serif);color:var(--tm-ink2);margin-top:4px}
.tm-ear-n b{font-weight:400;font-size:40px;color:var(--tm-ink)}
.tm-ear-s{display:block;font-size:12px;line-height:1.4;color:var(--tm-ink3);margin-top:2px}
/* city weather */
.tm-wx{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:11px;align-items:center;margin-top:3px;--c:var(--tm-ink2)}
.tm-wx[data-t=good]{--c:var(--good)}.tm-wx[data-t=warn]{--c:var(--warn)}.tm-wx[data-t=bad]{--c:var(--bad)}
.tm-wx-ic{grid-row:1/3;width:38px;height:38px;fill:none;stroke:var(--c);stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 7px color-mix(in srgb,var(--c) 45%,transparent))}
.tm-wx-mood{display:block;font:400 25px/1.02 var(--serif);color:var(--tm-ink);white-space:nowrap}
.tm-wx-num{display:block;font-size:12px;line-height:1.35;color:var(--tm-ink3);margin-top:3px}
.tm-wx-num b{color:var(--c)}
.tm-baro{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:2px;height:2px;margin-top:9px}
.tm-baro>i{opacity:.6}
.tm-baro>i:nth-child(1){background:var(--good)}.tm-baro>i:nth-child(2){background:var(--warn)}.tm-baro>i:nth-child(3){background:var(--bad)}
.tm-baro>em{position:absolute;left:var(--p,50%);top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;transform:rotate(45deg);background:var(--tm-ink);box-shadow:0 0 0 2px #0c1017,0 0 8px rgba(244,239,228,.6);
  transition:left .9s var(--ease,ease)}          /* the pointer glides along the scale when the average moves */
.tm-baro-k{position:relative;display:block;height:11px;font:500 8.5px/11px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--tm-ink4);margin-top:3px}
.tm-baro-k>i{position:absolute;top:0;white-space:nowrap}
.tm-baro-k>i:nth-child(1){left:0}.tm-baro-k>i:nth-child(2){left:33.33%;transform:translateX(-50%)}.tm-baro-k>i:nth-child(3){left:66.66%;transform:translateX(-50%)}.tm-baro-k>i:nth-child(4){right:0}
/* dateline between a thick-thin rule and a hairline */
.tm-dl{grid-column:1/-1;position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:6px 18px;margin-top:20px;padding:13px 0 8px;min-height:44px;
  border-bottom:1px solid var(--tm-rule);font:500 10.5px/1.3 var(--sans);letter-spacing:.17em;text-transform:uppercase;color:var(--tm-ink3)}
.tm-dl::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;border-top:2px solid var(--tm-rule2);border-bottom:1px solid var(--tm-rule2)}
.tm-dl-a{color:var(--tm-ink2)}
.tm-dl-b{color:var(--tm-ice);text-align:center}
.tm-dl-c{display:flex;justify-content:flex-end;align-items:center;gap:14px;min-width:0}
.tm-dl .tm-old{color:var(--warn)}
.tm-copy.btn{letter-spacing:0;text-transform:none;font-family:var(--sans);color:var(--tm-ink2)}

/* ---------- the grid: lead well + rail on top, the deck below; hairline column rules ---------- */
.tm-front,.tm-deck{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--tm-g)}
.tm-front{padding-top:22px}
.tm-cell,.tm-slot{position:relative;min-width:0}
.tm-c-lead{grid-column:span 2;display:flex;flex-direction:column}
.tm-norail .tm-c-lead{grid-column:1/-1}
.tm-s-well{margin-top:auto;padding-top:28px}
/* no chart to print: the scoreboard takes its place under the lead, headline beside the table */
.tm-s-well .tm-score{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--tm-g);align-items:start}
.tm-s-well .tm-score>.tm-kick{grid-column:1/-1}
.tm-s-well .tm-score>.tm-sb{grid-column:2;grid-row:2/4;margin-top:2px}
.tm-s-well .tm-score>.tm-jump{grid-column:1}
.tm-rail,.tm-col{position:relative;display:flex;flex-direction:column;min-width:0}
.tm-rail::before,.tm-col+.tm-col::before{content:"";position:absolute;left:calc(var(--tm-g)/-2);top:0;bottom:0;width:1px;background:var(--tm-rule)}
.tm-rail>.tm-cell+.tm-cell,.tm-col>.tm-cell+.tm-cell{margin-top:20px;padding-top:18px;border-top:1px solid var(--tm-rule)}
.tm-deck{position:relative;margin-top:24px;padding-top:25px}
.tm-deck::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;border-top:1px solid var(--tm-rule2);border-bottom:1px solid var(--tm-rule)}
.tm-deck[data-cols="1"]{grid-template-columns:minmax(0,1fr)}.tm-deck[data-cols="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.tm-deck[data-cols="1"] .tm-cell{max-width:560px}

/* ---------- a story: one real button ---------- */
.tm-story{-webkit-appearance:none;appearance:none;position:relative;display:block;width:100%;margin:0;padding:0;border:0;border-radius:2px;background:none;
  color:inherit;font:inherit;letter-spacing:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tm-story:focus-visible{outline:1px solid var(--tm-ice);outline-offset:7px}
.tm-story:active{opacity:.86}
/* kicker: small caps, a small ink square, a hairline running to the column edge */
.tm-kick{display:flex;align-items:center;gap:9px;margin-bottom:11px;font:600 10.5px/1.2 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--tm-ink2);white-space:nowrap}
.tm-kick::before{content:"";flex:none;width:5px;height:5px;background:currentColor}
.tm-kick::after{content:"";flex:1;height:1px;background:var(--tm-rule)}
.tm-kick em{order:3;font-style:normal;font-weight:500;letter-spacing:.1em;color:var(--tm-ink4)}
.tm-kick[data-t=bad]{color:var(--bad)}.tm-kick[data-t=warn]{color:var(--warn)}.tm-kick[data-t=good]{color:var(--good)}.tm-kick[data-t=ice]{color:var(--tm-ice)}
/* headlines */
.tm-h{display:block;font-family:var(--serif);font-weight:400;color:var(--tm-ink);letter-spacing:-.012em;text-wrap:balance;overflow-wrap:break-word}
.tm-h1{font-size:clamp(40px,4.4vw,60px);line-height:1;letter-spacing:-.02em}
.tm-h2{font-size:30px;line-height:1.04}
.tm-h3{font-size:26px;line-height:1.1}
.tm-story:hover .tm-h,.tm-story:hover .tm-mini-h,.tm-story:focus-visible .tm-h,.tm-story:focus-visible .tm-mini-h,
.tm-story:hover .tm-h .tm-n,.tm-story:hover .tm-mini-h .tm-n,.tm-story:focus-visible .tm-h .tm-n,.tm-story:focus-visible .tm-mini-h .tm-n{   /* a figure is a box of its own: the underline has to be drawn in it too */
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.13em;text-decoration-color:rgba(244,239,228,.42)}
/* text */
.tm-body{display:block;margin-top:10px;font-size:14px;line-height:1.6;color:var(--tm-ink3);text-wrap:pretty}
.tm-body b,.tm-stand b{color:var(--tm-ink)}
.tm-fine{display:block;margin-top:8px;font-size:11.5px;line-height:1.45;color:var(--tm-ink4);overflow-wrap:anywhere}
.tm-fine b,.tm-mw-s b{font-weight:inherit;color:inherit}
.tm-cap{display:block}
.tm-jump{display:flex;align-items:center;gap:6px;margin-top:13px;font:600 10.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--tm-ice)}
.tm-jump .ic{width:13px;height:13px;stroke-width:1.8;transition:transform .25s var(--ease,ease)}
.tm-story:hover .tm-jump .ic,.tm-story:focus-visible .tm-jump .ic{transform:translateX(4px)}

/* ---------- 1. the lead ---------- */
.tm-pulls{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);margin:20px 0 19px;padding:15px 0 14px;border-top:1px solid var(--tm-rule2);border-bottom:1px solid var(--tm-rule)}
.tm-pull{display:block;padding:0 20px;border-left:1px solid var(--tm-rule);min-width:0}
.tm-pull:first-child{padding-left:0;border-left:0}
/* a figure box is one line of 1em, so the line cannot be set tighter than that: the two small negative margins give the
   number the room it had at line-height .95 */
.tm-pull>b{display:block;font:400 48px/1 var(--serif);margin:-.025em 0;color:var(--tm-ink);letter-spacing:-.012em;white-space:nowrap}
.tm-pull>i{display:block;margin-top:8px;font:600 10px/1.3 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--tm-ink4)}
.tm-pull.tm-long>b{font-size:38px;line-height:1.2;margin:0}          /* a very long amount (₹12,47,858) steps down a size */
.tm-pull[data-t=bad]>b{color:var(--bad)}.tm-pull[data-t=warn]>b{color:var(--warn)}.tm-pull[data-t=good]>b{color:var(--good)}
.tm-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--tm-g);align-items:start}
.tm-stand{display:block;font:italic 400 24px/1.22 var(--serif);color:var(--tm-ink2);text-wrap:pretty}
.tm-stand b{font-weight:400}
.tm-text{display:block;min-width:0}
.tm-text .tm-body{margin-top:1px}
/* drop cap: three lines of the lead */
.tm-drop::first-letter{float:left;font:400 76px/56px var(--serif);padding:8px 8px 0 0;color:var(--tm-ink)}
.tm-drop2::first-letter{font-size:50px;line-height:38px;padding:5px 7px 0 0}       /* a short lead: two lines */
@supports (initial-letter:3) or (-webkit-initial-letter:3){
  .tm-drop::first-letter{float:none;padding:0;margin:0 5px 0 0;font:400 1em/1 var(--serif);-webkit-initial-letter:3;initial-letter:3}
  .tm-drop2::first-letter{-webkit-initial-letter:2;initial-letter:2}
}

/* ---------- 2. hero ---------- */
.tm-hero-top{display:flex;align-items:center;gap:14px}
.tm-hero-top .em{flex:none}
.tm-big{display:flex;align-items:baseline;gap:10px;margin-top:13px}
.tm-big>b{font:400 52px/1 var(--serif);margin:-.04em 0;color:var(--tm-ink);letter-spacing:-.012em}       /* as tall as it was at line-height .92 */
.tm-big>i{font:600 10px/1.3 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--tm-ink4)}
.tm-big[data-t=good]>b{color:var(--good)}

/* ---------- 3. critical ads + the most expensive ad ---------- */
.tm-mini{position:relative;margin-top:15px;padding:12px 14px 13px;border:1px solid var(--tm-rule);background:linear-gradient(180deg,rgba(255,95,87,.045),transparent 70%)}
.tm-mini::before{content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:2px;background:var(--bad)}
.tm-mini .tm-lbl{color:var(--bad)}
.tm-mini-h{display:block;margin-top:6px;font:400 20px/1.14 var(--serif);color:var(--tm-ink);text-wrap:balance;overflow-wrap:break-word}
.tm-mini .tm-fine{margin-top:6px;color:var(--tm-ink3)}
.tm-mini .tm-jump{margin-top:11px}
.tm-quiet{cursor:default}
.tm-quiet.tm-hold{min-height:188px}.tm-quiet.tm-mini.tm-hold{min-height:170px}
.tm-wait{display:block;margin-top:6px;font:italic 400 16.5px/1.25 var(--serif);color:var(--tm-ink4)}

/* ---------- 4. money watch: a typeset list with dotted leaders ---------- */
.tm-mw{display:block;margin-top:13px;border-bottom:1px solid var(--tm-rule)}
.tm-mw-r{display:grid;grid-template-columns:auto minmax(0,max-content) minmax(10px,1fr) auto;column-gap:9px;row-gap:1px;align-items:center;padding:9px 0 9px;border-top:1px solid var(--tm-rule)}
.tm-mw-r .em{grid-row:1/3;align-self:center;margin-right:2px}
.tm-mw-n{display:block;font:500 13.5px/1.3 var(--sans);color:var(--tm-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tm-dots{display:block;height:1px;align-self:end;margin-bottom:5px;border-bottom:1px dotted rgba(244,239,228,.3)}
.tm-mw-v{display:block;font-size:13px;line-height:1.3;color:var(--tm-ink3);white-space:nowrap;font-variant-numeric:tabular-nums}
.tm-mw-v b{color:var(--tm-ink)}
.tm-mw-s{display:block;grid-column:2/-1;font-size:12px;line-height:1.35;color:var(--tm-ink4)}

/* ---------- 5. boost desk ---------- */
.tm-stamp{display:block;margin-top:11px;padding:8px 11px;font-size:12.5px;line-height:1.45;color:var(--good);border:1px solid color-mix(in srgb,var(--good) 38%,transparent);background:color-mix(in srgb,var(--good) 7%,transparent)}

/* ---------- 6. scoreboard ---------- */
/* the label column takes what it needs and gives way first (its text wraps) when the column is narrow */
.tm-sb{display:grid;grid-template-columns:minmax(58px,max-content) repeat(3,minmax(62px,1fr));margin-top:14px;border-bottom:1px solid var(--tm-rule);font-size:13px;line-height:1.3;font-variant-numeric:tabular-nums}
.tm-sb>span{display:block;padding:8px 8px 8px 0;border-top:1px solid var(--tm-rule);text-align:right;white-space:nowrap;color:var(--tm-ink)}
.tm-sb>.tm-sb-l{text-align:left;color:var(--tm-ink3);padding-right:6px;white-space:normal}
.tm-sb>.tm-sb-h{border-top:0;padding-top:0;font:600 9.5px/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--tm-ink3)}
.tm-sb-h small{display:block;font-weight:400;font-size:10.5px;letter-spacing:.03em;text-transform:none;color:var(--tm-ink4)}
.tm-sb>.tm-on{background:rgba(169,216,240,.065);box-shadow:inset 1px 0 0 rgba(169,216,240,.12),inset -1px 0 0 rgba(169,216,240,.12)}
.tm-sb>.tm-sb-h.tm-on{color:var(--tm-ice);padding-top:6px;margin-top:-6px;box-shadow:inset 1px 0 0 rgba(169,216,240,.12),inset -1px 0 0 rgba(169,216,240,.12),inset 0 1px 0 rgba(169,216,240,.5)}
.tm-sb-v[data-t=good]{color:var(--good)}.tm-sb-v[data-t=warn]{color:var(--warn)}.tm-sb-v[data-t=bad]{color:var(--bad)}

/* ---------- the city in 14 days: engraved columns (money) + an ivory line (results) ---------- */
.tm-fig{margin:0}
.tm-fig-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--tm-g);align-items:end}
.tm-fig-a{min-width:0}
.tm-fig-n{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,max-content);column-gap:0;margin-top:2px}
.tm-fig-n>span{display:block;padding:0 18px;border-left:1px solid var(--tm-rule)}
.tm-fig-n>span:first-child{padding-left:0;border-left:0}
.tm-fig-n>span>b{display:block;font:400 31px/1 var(--serif);color:var(--tm-ink);white-space:nowrap}
.tm-fig-n>span>i{display:block;margin-top:6px;font:600 9.5px/1.2 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--tm-ink4)}
.tm-fig figcaption{margin-top:16px;font-size:11.5px;line-height:1.5;color:var(--tm-ink4);text-wrap:pretty}
.tm-fig figcaption b{color:var(--tm-ink2)}
.tm-key{display:flex;align-items:center;gap:7px;margin-bottom:6px;font:600 9.5px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--tm-ink3)}
.tm-key-b{display:inline-block;width:9px;height:10px;background:repeating-linear-gradient(0deg,rgba(169,216,240,.6) 0 1px,transparent 1px 3px);box-shadow:inset 0 1px 0 rgba(169,216,240,.95)}
.tm-key-l{display:inline-block;width:16px;height:0;border-top:1.25px solid var(--tm-ink);margin-left:10px}
.tm-fig-p{min-width:0}
.tm-plot{position:relative;height:128px;border-bottom:1px solid var(--tm-rule2);
  background:linear-gradient(var(--tm-rule),var(--tm-rule)) 0 12%/100% 1px no-repeat,linear-gradient(90deg,var(--tm-rule) 0 2px,transparent 2px 6px) 0 56%/6px 1px repeat-x}
.tm-ax{position:absolute;top:calc(12% - 14px);font:400 9.5px/1 var(--mono);color:var(--tm-ink4);white-space:nowrap;pointer-events:none}
.tm-ax-l{left:0}.tm-ax-r{right:0;color:var(--tm-ink3)}
.tm-bars{position:absolute;inset:0;display:flex;align-items:flex-end}
.tm-barc{flex:1 1 0;display:flex;align-items:flex-end;justify-content:center;height:100%;min-width:0}
.tm-barc>i{display:block;width:46%;min-width:4px;max-width:20px;min-height:1px;background:repeating-linear-gradient(0deg,rgba(169,216,240,.5) 0 1px,transparent 1px 3px);
  box-shadow:inset 0 1px 0 rgba(169,216,240,.95),inset 1px 0 0 rgba(169,216,240,.3),inset -1px 0 0 rgba(169,216,240,.3);transition:filter .15s}
.tm-barc.tm-now>i{background:repeating-linear-gradient(0deg,rgba(169,216,240,.26) 0 1px,transparent 1px 3px);box-shadow:inset 0 1px 0 rgba(169,216,240,.6),inset 1px 0 0 rgba(169,216,240,.16),inset -1px 0 0 rgba(169,216,240,.16)}
.tm-barc:hover>i{filter:brightness(1.6)}
.tm-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.tm-line polyline{fill:none;stroke:var(--tm-ink);stroke-width:1.25;stroke-linejoin:round;stroke-linecap:round}
.tm-dot{position:absolute;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:#0b0e14;box-shadow:0 0 0 1.2px var(--tm-ink);pointer-events:none}
.tm-xl{display:flex;margin-top:6px;font:400 9.5px/1 var(--mono);color:var(--tm-ink4)}
.tm-xl>i{flex:1 1 0;min-width:0;text-align:center;white-space:nowrap}

/* ---------- 7. notices (small print) ---------- */
.tm-note{display:block;padding:9px 0;border-top:1px solid var(--tm-rule);font-size:12.5px;line-height:1.5;color:var(--tm-ink3);overflow-wrap:anywhere}
.tm-note b{color:var(--tm-ink)}
.tm-notes .tm-kick{margin-bottom:9px}
.tm-notes .tm-jump{margin-top:6px}

/* ---------- folio ---------- */
.tm-folio{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px;margin-top:24px;padding-top:11px;border-top:1px solid var(--tm-rule2);
  font:500 9.5px/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--tm-ink4)}
.tm-folio>span:nth-child(2){text-align:center}
.tm-folio>span:nth-child(3){text-align:right}

/* ---------- the phone fold: its two buttons (and the phone-only wording) exist in every paper, but only phones (640px and under) show them ---------- */
.tm-more,.tm-less,.tm-no{display:none}

/* ---------- motion ----------
   The ink fade-in of the first draw and the cross-fades of a live change are played by times.js (Web Animations), so nothing
   stays on the page that could play twice. What is left here: three small transitions and the glow of a changed number. */
@media (prefers-reduced-motion:reduce){.tm-jump .ic,.tm-barc>i,.tm-baro>em{transition:none}.tm-n.fx-bump::after{animation:none}}

/* ---------- narrower laptops: same grid, a little tighter ---------- */
@media (max-width:1239px){
  .tm-paper{--tm-g:32px;--tm-px:30px}
  .tm-pull>b{font-size:40px}
  .tm-pull.tm-long>b{font-size:32px}
  .tm-pull{padding:0 14px}
  .tm-stand{font-size:21px}
  .tm-ear{width:min(100%,236px)}
  .tm-sb{font-size:12px}
  .tm-sb>span{padding-right:5px}
  .tm-sb>.tm-sb-h{letter-spacing:.05em}
}
/* ---------- tablet (641 to 979px): the lead takes the full width, the rail and the deck run two across ---------- */
@media (min-width:641px) and (max-width:979px){
  .tm-paper{--tm-g:30px;--tm-px:24px;padding-top:22px}
  .tm-mast{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:16px}
  .tm-plate{grid-column:1/-1;grid-row:1}
  .tm-ear{width:auto}.tm-ear-r{justify-self:stretch}
  .tm-dl{margin-top:16px}
  .tm-front{grid-template-columns:minmax(0,1fr)}
  .tm-c-lead{grid-column:auto}
  .tm-s-well{margin-top:0}
  .tm-rail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--tm-g);row-gap:0;margin-top:24px;padding-top:22px;border-top:1px solid var(--tm-rule)}
  .tm-rail::before{display:none}
  .tm-rail>.tm-cell+.tm-cell{margin-top:0;padding-top:0;border-top:0}
  .tm-rail>.tm-cell:nth-child(even)::before{content:"";position:absolute;left:calc(var(--tm-g)/-2);top:0;bottom:0;width:1px;background:var(--tm-rule)}
  .tm-rail>.tm-cell:nth-child(n+3){margin-top:20px;padding-top:18px;border-top:1px solid var(--tm-rule)}
  .tm-rail>.tm-cell:only-child{grid-column:1/-1}
  .tm-deck,.tm-deck[data-cols="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tm-deck[data-cols="1"]{grid-template-columns:minmax(0,1fr)}
  .tm-col:nth-child(odd)::before{display:none}
  .tm-col:nth-child(n+3){margin-top:22px;padding-top:20px;border-top:1px solid var(--tm-rule)}
  /* an odd last column spans the row and lays its own stories side by side */
  .tm-col:last-child:nth-child(odd){grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--tm-g)}
  .tm-col:last-child:nth-child(odd)>.tm-cell+.tm-cell{margin-top:0;padding-top:0;border-top:0}
  .tm-col:last-child:nth-child(odd)>.tm-cell+.tm-cell::before{content:"";position:absolute;left:calc(var(--tm-g)/-2);top:0;bottom:0;width:1px;background:var(--tm-rule)}
  .tm-col:last-child:nth-child(odd)>.tm-cell:only-child{grid-column:1/-1}
}
/* ---------- phone (640px and under): a FOLDED paper ----------
   On show: a compact masthead, the lead with its pull-numbers, the hero. Everything else waits behind one button and
   unfolds in place (data-fold on the sheet: "1" folded, "0" open - times.js keeps the choice for the session).
   The column wrappers dissolve (display:contents) so every story is one item of a single column and the chart can go last.
   Kept light for phones: no grain layer, no blurred shadows, nothing animates a filter or a shadow. */
@media (max-width:640px){
  .tm-paper{--tm-g:30px;--tm-px:16px;display:flex;flex-direction:column;padding:16px var(--tm-px) 12px;margin-bottom:6px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.085),0 0 0 1px rgba(214,228,240,.11),0 5px 0 -2px #0a0c12,0 5px 0 -1px rgba(214,228,240,.085)}
  .tm-paper::before{display:none}

  /* masthead: the nameplate, the weather on one line, then the dateline */
  .tm-mast{display:flex;flex-direction:column;align-items:stretch}
  .tm-ear-l,.tm-motto{display:none}
  .tm-plate{align-self:stretch}
  .tm-name{font-size:clamp(44px,13.6vw,58px);filter:none}
  .tm-ear-r{display:block;width:auto;margin-top:8px;padding:0;border:0}
  .tm-ear-r::before,.tm-ear-r>.tm-lbl,.tm-baro,.tm-baro-k{display:none}
  .tm-wx{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:0 8px;margin:0}
  .tm-wx-ic{align-self:center;width:19px;height:19px;stroke-width:1.5;filter:none}
  .tm-wx-mood{font-size:19px;line-height:1.15}
  .tm-wx-num{margin:0}
  .tm-dl{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:5px 14px;margin-top:11px;padding:12px 0 8px;min-height:0;font-size:9.5px;letter-spacing:.13em}
  .tm-dl-b{text-align:left}
  .tm-dl-c{flex:1 0 100%;justify-content:space-between}
  .tm-copy.btn{padding:7px 12px;font-size:12.5px}

  /* one column, in reading order */
  .tm-front,.tm-c-lead,.tm-rail,.tm-deck,.tm-col{display:contents}
  .tm-rail::before,.tm-col+.tm-col::before,.tm-deck::before{display:none}
  .tm-paper [data-tk=lead]{order:1;margin-top:14px}
  .tm-paper [data-tk=hero]{order:2}
  .tm-more{order:3}
  .tm-paper [data-tk=crit]{order:4}
  .tm-paper [data-tk=money]{order:5}
  .tm-paper [data-tk=score]{order:6}
  .tm-paper [data-tk=boost]{order:7}
  .tm-paper [data-tk=notes]{order:8}
  .tm-paper [data-tk=fig]{order:9}
  .tm-less{order:10}
  .tm-folio{order:11}
  .tm-paper .tm-cell[data-tk],.tm-paper .tm-s-well{max-width:none;margin-top:18px;padding-top:16px;border-top:1px solid var(--tm-rule)}

  /* the fold */
  .tm-more{-webkit-appearance:none;appearance:none;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px;width:100%;margin:18px 0 0;padding:13px 14px 12px;
    border:1px solid var(--tm-rule2);border-radius:2px;background:rgba(169,216,240,.055);color:inherit;font:inherit;letter-spacing:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .tm-more:active{background:rgba(169,216,240,.12)}
  .tm-more-t{display:block;font:400 20px/1.12 var(--serif);color:var(--tm-ink)}
  .tm-more-n{display:block;grid-column:1;margin-top:6px;font:600 9.5px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--tm-ice)}
  .tm-more>.ic{grid-column:2;grid-row:1/3;width:20px;height:20px;color:var(--tm-ice)}
  .tm-less{-webkit-appearance:none;appearance:none;display:flex;align-items:center;justify-content:center;gap:7px;width:100%;margin:18px 0 0;padding:15px 0 14px;
    border:0;border-top:1px solid var(--tm-rule);border-radius:0;background:none;color:var(--tm-ice);font:600 10.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .tm-less>.ic{width:13px;height:13px;stroke-width:1.8;transform:rotate(180deg)}
  .tm-less:active{opacity:.7}
  .tm-more:focus-visible,.tm-less:focus-visible{outline:1px solid var(--tm-ice);outline-offset:3px}
  .tm-paper[data-fold="1"] [data-tk=crit],.tm-paper[data-fold="1"] [data-tk=money],.tm-paper[data-fold="1"] [data-tk=score],.tm-paper[data-fold="1"] [data-tk=boost],
  .tm-paper[data-fold="1"] [data-tk=notes],.tm-paper[data-fold="1"] [data-tk=fig],.tm-paper[data-fold="1"] .tm-less,.tm-paper[data-fold="1"] .tm-folio,.tm-paper[data-fold="0"] .tm-more{display:none}
  /* Nothing above the button differs between folded and open, so unfolding only adds below it - the page never jumps.
     To keep the lead short enough for that, a phone prints the shorter wording (times.js marks both) and a two-line drop cap. */
  .tm-wo{display:none}
  .tm-no{display:inline}
  @supports not ((initial-letter:2) or (-webkit-initial-letter:2)){.tm-drop::first-letter{font-size:50px;line-height:38px;padding:5px 7px 0 0}}
  @supports (initial-letter:2) or (-webkit-initial-letter:2){.tm-drop::first-letter{-webkit-initial-letter:2;initial-letter:2}}

  /* the lead, compact */
  .tm-h1{font-size:clamp(32px,9.6vw,40px)}
  .tm-h2{font-size:24px}.tm-h3{font-size:23px}
  .tm-pulls{margin:14px 0 13px;padding:11px 0 10px}
  .tm-pull{padding:0 10px}
  .tm-pull>b{font-size:27px;line-height:1;margin:0}
  .tm-pull>i{margin-top:6px;font-size:8.5px;letter-spacing:.12em}
  .tm-pull.tm-long>b{font-size:22px}
  /* a long amount (₹1,47,858) in the row: the whole row steps down a size, same height */
  .tm-pulls.tm-wide>.tm-pull>b{font-size:21px;line-height:27px}
  .tm-pulls.tm-wide>.tm-pull.tm-long>b{font-size:18px}
  .tm-cols{grid-template-columns:minmax(0,1fr);row-gap:11px}
  .tm-stand{font-size:19.5px}

  /* the hero, compact: icon and name on the left, the number on the right */
  .tm-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:center}
  .tm-hero>.tm-kick,.tm-hero>.tm-body,.tm-hero>.tm-jump{grid-column:1/-1}
  .tm-hero-top{gap:11px;min-width:0}
  .tm-hero-top>.tm-h{min-width:0;overflow-wrap:anywhere}
  .tm-paper .tm-hero-top .em.lg{--es:44px;border-radius:13px}
  /* client icons inside the paper, on a phone: no glow filter, no sheen, a steady health light, nothing in transition */
  .tm-paper .em svg{filter:none}
  .tm-paper .em,.tm-paper .em>*{transition:none}
  .tm-paper .em::before,.tm-paper .em::after{animation:none}
  .tm-big{display:block;margin:0;text-align:right}
  .tm-big>b{display:block;font-size:34px}
  .tm-big>i{display:block;margin-top:3px;font-size:8.5px;letter-spacing:.12em}

  /* the rest */
  .tm-s-well .tm-score{display:block}
  .tm-s-well .tm-score>.tm-sb{margin-top:14px}
  .tm-sb{font-size:13px}
  .tm-fig-g{grid-template-columns:minmax(0,1fr);row-gap:16px}
  .tm-fig-a{display:contents}
  .tm-fig-n{order:1}.tm-fig-p{order:2}.tm-fig figcaption{order:3;margin-top:0}
  .tm-fig-n>span{padding:0 12px}
  .tm-fig-n>span>b{font-size:25px}
  .tm-plot{height:112px}
  .tm-barc>i{transition:none}
  .tm-barc:hover>i{filter:none}
  .tm-folio{grid-template-columns:minmax(0,1fr);justify-items:center;gap:4px;margin-top:16px;text-align:center;letter-spacing:.16em}
  .tm-folio>span:nth-child(3){text-align:center}
}
@media (max-width:359px){
  .tm-dl{font-size:8.5px;letter-spacing:.09em;column-gap:11px}
  .tm-sb{font-size:12px}
  .tm-pull>b{font-size:23px}
  .tm-pull.tm-long>b{font-size:19px}
  /* too narrow for three long amounts side by side: two across */
  .tm-pulls.tm-wide{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));row-gap:12px}
  .tm-pulls.tm-wide>.tm-pull{padding:0 0 0 14px}
  .tm-pulls.tm-wide>.tm-pull:nth-child(odd){padding-left:0;border-left:0}
  .tm-pulls.tm-wide>.tm-pull>b{font-size:27px;line-height:1}
  .tm-pulls.tm-wide>.tm-pull.tm-long>b{font-size:22px;line-height:1.2}
  .tm-more-t{font-size:18.5px}
}