/* The Thursday Times: the site's own styles. Everything the identity's component styles do not cover:
   the page, the header's motion, the front page, articles, section fronts, lists, forms and the footer.
   Colours, type, spacing and rules come from tokens.css; nothing here invents a value. */

/* ------------------------------------------------------------------ the page */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--tt-bg); color: var(--tt-text); font-family: var(--font-text); font-variant-numeric: lining-nums; -webkit-font-smoothing: antialiased; }
body[dir="rtl"], [dir="rtl"] { font-family: var(--font-urdu); }
img, svg, video { max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
p { margin: 0; }
input, button, select, textarea { font: inherit; color: inherit; }
::placeholder { color: var(--tt-text-secondary); opacity: 1; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--tt-space-4); top: -100px; z-index: 100; padding: var(--tt-space-3) var(--tt-space-4); background: var(--tt-text); color: var(--tt-bg); font-weight: 600; text-decoration: none; }
.skip-link:focus { top: var(--tt-space-4); }

.tt-wrap { box-sizing: border-box; max-width: var(--tt-max-width); margin: 0 auto; padding-inline: var(--tt-margin-desktop); }
@media (max-width: 767px) { :root { --tt-margin-desktop: var(--tt-margin-phone); } }
.tt-measure { max-width: 38em; }
.tt-section { padding-block: var(--tt-space-8); }
.tt-section--tight { padding-block: var(--tt-space-6); }
.tt-section--flush { padding-top: 0; }
.tt-rule { border-top: var(--tt-rule-section-width) solid var(--tt-text); padding-top: var(--tt-space-5); }
.tt-hairline { border-top: var(--tt-rule-item-width) solid var(--tt-border); }
.tt-mute { color: var(--tt-text-secondary); }
.tt-stack { display: flex; flex-direction: column; gap: var(--tt-space-4); }
.tt-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tt-space-3) var(--tt-space-5); }
.tt-grow { flex: 1 1 auto; min-width: 0; }

/* The type scale on a phone: the big headlines step down with the width. Urdu, in IBM Plex Sans Arabic, sets a size
   or two smaller than the English at every step: the letterforms are taller and it reads better with room. */
.tt-headline-xl { font-size: clamp(40px, 5.6vw, 72px); line-height: 1; }
.tt-headline-l { font-size: clamp(29px, 3vw, 36px); line-height: 1.03; }
.tt-urdu-headline { font-size: clamp(24px, 2.4vw, 30px); line-height: 1.55; }
.tt-headline-xl:lang(ur), [lang="ur"] .tt-headline-xl { font-family: var(--font-urdu); font-size: clamp(26px, 2.6vw, 38px); line-height: 1.5; letter-spacing: 0; font-weight: 700; }
.tt-headline-l:lang(ur), [lang="ur"] .tt-headline-l { font-family: var(--font-urdu); font-size: clamp(22px, 2vw, 28px); line-height: 1.55; letter-spacing: 0; font-weight: 700; }
.tt-headline-m:lang(ur), [lang="ur"] .tt-headline-m { font-family: var(--font-urdu); font-size: 21px; line-height: 34px; letter-spacing: 0; font-weight: 700; }
.tt-headline-s:lang(ur), [lang="ur"] .tt-headline-s { font-family: var(--font-urdu); font-size: 17px; line-height: 30px; }
.tt-deck:lang(ur), [lang="ur"] .tt-deck { font-family: var(--font-urdu); font-size: 17px; line-height: 32px; }
.tt-body:lang(ur), [lang="ur"] .tt-body { font-family: var(--font-urdu); font-size: 18px; line-height: 36px; }
.tt-caption:lang(ur), [lang="ur"] .tt-caption { font-family: var(--font-urdu); font-size: 14px; line-height: 26px; }
/* An Urdu headline on an English page (or the other way round) keeps its own direction and lines up with the rest. */
[dir="ltr"] :is(h1, h2, h3, p)[dir="rtl"] { text-align: right; }
[dir="rtl"] :is(h1, h2, h3, p)[dir="ltr"] { text-align: left; }

/* ----------------------------------------------------------------- the header */
/* The bar is Thursday orange, the wordmark and the sections white on it; the date line sits on paper beneath.
   On a story the bar, the date line and the band below are one field in the story's section colour, and the
   wordmark adapts. As the page scrolls the wordmark folds into the mark: the letters between the Ts fade and slide
   inward, the colon and the second T slide home, the mark grows, and the bar rises from 75 to 60 px. All of it is
   one number, --tt-m (0 open, 1 folded), set by theme.js from the scroll position and smoothed every frame, and
   every move is a transform or an opacity: nothing is laid out again, so it runs on the compositor. */
.tt-site-header { position: sticky; top: 0; z-index: 50; background: var(--tt-bg); --tt-m: 0; --tt-header-shift: 15px; --tt-header-ease: cubic-bezier(0.2, 0.7, 0.2, 1); --tt-bar: var(--tt-orange); --tt-bar-text: var(--tt-paper); --tt-bar-accent: var(--tt-paper); --tt-bar-muted: rgba(255, 255, 255, 0.78); --tt-bar-line: rgba(255, 255, 255, 0.35); transform: translate3d(0, calc(var(--tt-header-shift) * var(--tt-m) * -1), 0); will-change: transform; }
.tt-header-ink .tt-site-header { --tt-bar-text: var(--tt-ink); --tt-bar-muted: rgba(0, 0, 0, 0.72); --tt-bar-line: rgba(0, 0, 0, 0.3); }
.tt-site-header.tt-header--section { --tt-bar: var(--tt-section); --tt-bar-text: var(--tt-section-text); --tt-bar-accent: var(--tt-orange); --tt-bar-muted: var(--tt-section-muted); --tt-bar-line: var(--tt-section-muted); }
.tt-site-header.tt-header--on-orange { --tt-bar-accent: var(--tt-paper); }
.tt-header-ink .tt-site-header.tt-header--on-orange { --tt-bar-text: var(--tt-ink); --tt-bar-muted: rgba(0, 0, 0, 0.72); --tt-bar-line: rgba(0, 0, 0, 0.3); }
.tt-header__bar {
  position: relative; background: var(--tt-bar); color: var(--tt-bar-text); border-bottom: 0;
  --tt-text: var(--tt-bar-text); --tt-accent: var(--tt-bar-accent); --tt-text-secondary: var(--tt-bar-muted); --tt-border: var(--tt-bar-line); --tt-focus: var(--tt-bar-text); --tt-bg: var(--tt-bar);
}
/* the bar's contents keep the middle of what is left showing as the bar rises */
.tt-header__start, .tt-header__nav, .tt-header__tools { transform: translate3d(0, calc(var(--tt-header-shift) * var(--tt-m) * 0.5), 0); }
.tt-site-header::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 75px; background: var(--tt-bar); z-index: -1; }
.tt-header__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--tt-bar-text); transform: scaleX(0); transform-origin: left; opacity: .9; }
[dir="rtl"] .tt-header__progress { transform-origin: right; }
/* the folding wordmark: every piece is placed by --tt-m */
.tt-header__home { position: relative; display: inline-flex; align-items: center; height: 44px; width: 200px; }
.tt-header__home .tt-logo--morph { display: block; overflow: visible; transform-origin: left center; transform: scale(calc(1 + 0.55 * var(--tt-m))); will-change: transform; }
[dir="rtl"] .tt-header__home .tt-logo--morph { transform-origin: right center; transform: translateX(calc(156px * var(--tt-m))) scale(calc(1 + 0.55 * var(--tt-m))); }
/* the letters that slide away as it folds must not widen the page (phones would zoom out) */
.tt-site-header { overflow-x: clip; }
.tt-wm__rest { opacity: calc(1 - var(--tt-m) * 1.8); }
.tt-wm__rest1 { transform: translateX(calc(260px * var(--tt-m))); }
.tt-wm__rest2 { transform: translateX(calc(-260px * var(--tt-m))); }
.tt-wm__dot1 { transform: translate(calc(var(--tt-wm-dx1) * var(--tt-m)), calc(var(--tt-wm-dy1) * var(--tt-m))); }
.tt-wm__dot2 { transform: translate(calc(var(--tt-wm-dx2) * var(--tt-m)), calc(var(--tt-wm-dy2) * var(--tt-m))); }
.tt-wm__t2 { transform: translateX(calc(var(--tt-wm-dxt) * var(--tt-m))); }
/* the sections: wide capitals, tracked, in Montserrat; the current one underlined */
.tt-header__link { position: relative; white-space: nowrap; font-family: var(--font-nav); font-weight: 500; font-size: 13px; line-height: 20px; letter-spacing: 0.16em; text-transform: uppercase; padding: 12px 0; }
.tt-header__link[aria-current="page"] { border-bottom: var(--tt-rule-section-width) solid var(--tt-bar-text); padding-bottom: 9px; }
.tt-header__nav { gap: var(--tt-space-5); }
.tt-header__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 7px; height: var(--tt-rule-section-width); background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 240ms var(--tt-header-ease); }
.tt-header__link:not([aria-current="page"]):hover::after, .tt-header__link:not([aria-current="page"]):focus-visible::after { transform: scaleX(1); }
.tt-header__nav { flex-wrap: nowrap; overflow: hidden; }
.tt-header__tools .tt-header__edition { white-space: nowrap; }
.tt-site-header.tt-header--section { background: var(--tt-section); }
@media (prefers-reduced-motion: reduce) {
  .tt-header__link::after { transition: none; }
}
@media (min-width: 768px) and (max-width: 1100px) {
  .tt-header__nav { gap: var(--tt-space-4); }
  .tt-header__link { font-size: 12px; letter-spacing: 0.12em; }
}
@media (max-width: 767px) {
  .tt-site-header { --tt-header-shift: 0px; }
  .tt-site-header::before { height: 60px; }
  .tt-header__home { width: 200px; justify-content: center; }
  /* On a phone the folded mark sits in the middle of the bar. */
  .tt-header__home .tt-logo--morph, [dir="rtl"] .tt-header__home .tt-logo--morph { transform-origin: left center; transform: translateX(calc(78px * var(--tt-m))) scale(calc(1 + 0.55 * var(--tt-m))); }
}

/* The menu that the phone's menu button opens: sections, editions, search. */
.tt-menu { display: none; border-bottom: var(--tt-rule-item-width) solid var(--tt-border); background: var(--tt-bg); }
.tt-menu.is-open { display: block; }
.tt-menu__inner { display: flex; flex-direction: column; gap: var(--tt-space-5); padding-block: var(--tt-space-5) var(--tt-space-6); }
.tt-menu__sections { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.tt-menu__sections a { display: flex; align-items: center; min-height: 52px; border-top: var(--tt-rule-item-width) solid var(--tt-border); font-family: var(--font-nav); font-weight: 500; font-size: 15px; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; }
.tt-menu__sections li:first-child a { border-top: 0; }
.tt-menu__sections a:lang(ur) { font-family: var(--font-urdu); letter-spacing: 0; text-transform: none; font-size: 19px; font-weight: 600; }
.tt-menu__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tt-space-4); }

/* The search field: the paper's T and colon, waiting for the word. */
.tt-search { display: flex; height: 56px; }
.tt-search__box { flex: 1; min-width: 0; display: flex; align-items: center; box-sizing: border-box; border: 1.5px solid var(--tt-text); border-inline-end-width: 0; background: var(--tt-bg); }
.tt-search__t { flex: none; display: flex; align-items: center; padding-inline-start: 16px; }
.tt-search__input { flex: 1; min-width: 0; box-sizing: border-box; height: 100%; margin: 0; border: 0; padding: 0 12px 0 10px; background: transparent; font-size: 17px; line-height: 24px; font-family: var(--font-ui); }
.tt-search__input:focus { outline: none; }
.tt-search__go { flex: none; width: 56px; margin: 0; padding: 0; border: 0; background: var(--tt-text); color: var(--tt-bg); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.tt-search--small { height: 48px; }
.tt-search--small .tt-search__go { width: 48px; }

/* --------------------------------------------------------------- front page */
/* The top: the lead's picture across the column, its words on a panel in the section's colour that starts inside
   the picture; the numbered top stories and Thursday AI beside it. */
.tt-top { padding-top: var(--tt-space-6); }
.tt-top__grid { display: grid; grid-template-columns: 8fr 4fr; grid-template-rows: auto 1fr; grid-template-areas: "lead latest" "featured latest"; gap: var(--tt-space-7) var(--tt-space-7); align-items: start; }
.tt-top__lead { grid-area: lead; min-width: 0; }
.tt-top__featured { grid-area: featured; min-width: 0; }
.tt-top__latest { grid-area: latest; }
.tt-lead { position: relative; display: flex; flex-direction: column; align-items: flex-start; }
.tt-lead__picture { display: block; width: 100%; }
.tt-lead__picture .tt-picture__credit { display: none; }
.tt-lead__panel { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--tt-space-4); box-sizing: border-box; width: min(100%, 44em); margin-top: calc(-1 * clamp(64px, 9vw, 150px)); padding: var(--tt-space-6) var(--tt-space-6) var(--tt-space-6); background: linear-gradient(160deg, var(--tt-section-light) 0%, var(--tt-section) 45%, var(--tt-section-deep) 100%); color: var(--tt-section-text); --tt-text: var(--tt-section-text); --tt-text-secondary: var(--tt-section-muted); --tt-bg: var(--tt-section); }
.tt-lead--words .tt-lead__panel { margin-top: 0; width: 100%; }
.tt-lead__label { display: inline-flex; text-decoration: none; }
.tt-lead__title { font-size: clamp(32px, 3.4vw, 50px); line-height: 1.02; max-width: 15em; }
.tt-lead__title:lang(ur), [lang="ur"] .tt-lead__title { font-size: clamp(24px, 2.3vw, 32px); line-height: 1.5; max-width: 22em; }
.tt-lead__deck { max-width: 32em; font-size: 22px; line-height: 29px; }
.tt-lead__byline { color: var(--tt-section-text); opacity: .85; }
.tt-lead .tt-story__link { background-image: linear-gradient(var(--tt-section-text), var(--tt-section-text)); }
.tt-lead .tt-story__link:hover, .tt-lead .tt-story__link:focus-visible { color: var(--tt-section); }
.tt-top__latest { display: flex; flex-direction: column; min-width: 0; }
@media (max-width: 1023px) {
  .tt-top__grid { grid-template-columns: 1fr; grid-template-areas: "lead" "latest" "featured"; }
}
@media (max-width: 767px) {
  /* On a phone the lead leaves room for the top stories on the first screen: a wider, shorter photograph, a
     tighter panel, the deck held to three lines (the story itself has it in full). */
  .tt-top { padding-top: 0; }
  .tt-top__grid { row-gap: var(--tt-space-6); }
  .tt-top__lead .tt-lead__picture { margin-inline: calc(-1 * var(--tt-margin-phone)); width: auto; align-self: stretch; }
  .tt-top__lead .tt-lead__picture .tt-picture__frame { aspect-ratio: 2 / 1 !important; }
  .tt-top__lead .tt-lead__picture img { width: 100%; height: 100%; object-fit: cover; }
  .tt-lead__panel { width: 100%; margin-top: -28px; padding: var(--tt-space-4) var(--tt-space-4) var(--tt-space-4); gap: var(--tt-space-2); }
  .tt-lead__title { font-size: clamp(25px, 6.8vw, 29px); line-height: 1.04; }
  .tt-lead__title:lang(ur), [lang="ur"] .tt-lead__title { font-size: clamp(21px, 5.6vw, 24px); line-height: 1.55; }
  .tt-lead__deck { font-size: 16px; line-height: 22px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
  .tt-lead__deck:lang(ur), [lang="ur"] .tt-lead__deck { line-height: 30px; }
  .tt-lead__byline { font-size: 13px; }
}

.tt-front__lead { padding-block: var(--tt-space-7) var(--tt-space-8); }
.tt-front__lead .tt-story--split { grid-template-columns: 7fr 5fr; gap: var(--tt-space-7); }
.tt-front__lead .tt-story__deck { max-width: 28em; }
.tt-front__lead .tt-story__picture { align-self: center; }
.tt-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--tt-space-7) var(--tt-space-5); }
.tt-cards .tt-story { min-width: 0; }
.tt-strips { display: flex; flex-direction: column; gap: var(--tt-space-8); }
.tt-strip__item { min-width: 0; }
.tt-strip__more { margin-top: var(--tt-space-3); }
.tt-strip__head { display: flex; flex-direction: column; gap: var(--tt-space-3); align-items: flex-start; }
.tt-more { display: inline-flex; align-items: center; gap: var(--tt-space-1); min-height: 44px; font-size: 15px; line-height: 22px; font-weight: 600; text-decoration: none; }
.tt-more:hover { text-decoration: underline; text-underline-offset: 0.2em; }
/* A headline under the pointer: a highlighter in Thursday orange sweeps across it and the words go white. */
.tt-story__link, .tt-strip__headline a, .tt-related__headline, .tt-top__latest .tt-story__link, .tt-list .tt-story__link, .tt-footer__col a, .tt-menu__sections a, .tt-writer__latest a, .tt-headline-row {
  text-decoration: none; background-image: linear-gradient(var(--tt-orange), var(--tt-orange)); background-repeat: no-repeat; background-size: 0% 100%; background-position: left center;
  box-decoration-break: clone; -webkit-box-decoration-break: clone; transition: background-size 320ms cubic-bezier(0.2, 0.7, 0.2, 1), color 160ms ease-out;
}
[dir="rtl"] .tt-story__link, [dir="rtl"] .tt-strip__headline a, [dir="rtl"] .tt-related__headline, [dir="rtl"] .tt-footer__col a, [dir="rtl"] .tt-menu__sections a { background-position: right center; }
.tt-story__link:hover, .tt-strip__headline a:hover, .tt-related__item:hover .tt-related__headline, .tt-list .tt-story__link:hover, .tt-footer__col a:hover, .tt-menu__sections a:hover, .tt-writer__latest a:hover, .tt-headline-row:hover,
.tt-story__link:focus-visible, .tt-strip__headline a:focus-visible, .tt-related__item:focus-visible .tt-related__headline { background-size: 100% 100%; color: var(--tt-paper); }
.tt-story__link:hover, .tt-strip__headline a:hover, .tt-related__item:hover .tt-related__headline { padding: 0 0.08em; margin: 0 -0.08em; }
.tt-more:hover { text-decoration: none; background-image: linear-gradient(var(--tt-orange), var(--tt-orange)); background-repeat: no-repeat; background-size: 100% 100%; color: var(--tt-paper); padding-inline: 4px; margin-inline: -4px; }
/* On a touch screen a tap opens the story before a 320 ms sweep could finish, so only half the headline lit up:
   there the highlight is whole the moment the finger lands, with no sweep. */
@media (hover: none) {
  .tt-story__link, .tt-strip__headline a, .tt-related__headline, .tt-footer__col a, .tt-menu__sections a, .tt-writer__latest a, .tt-headline-row, .tt-more { transition: none; -webkit-tap-highlight-color: transparent; }
  .tt-story__link:active, .tt-strip__headline a:active, .tt-related__item:active .tt-related__headline, .tt-footer__col a:active, .tt-menu__sections a:active, .tt-writer__latest a:active, .tt-headline-row:active { background-size: 100% 100%; color: var(--tt-paper); }
  .tt-story__link:active, .tt-strip__headline a:active, .tt-related__item:active .tt-related__headline { padding: 0 0.08em; margin: 0 -0.08em; }
}
.tt-story__picture { position: relative; }
.tt-story__picture img { display: block; width: 100%; height: auto; }
/* A tab: the section's label on a small block of its colour (on a picture's corner, or hanging from a rule). */
.tt-tab { display: inline-flex; align-items: center; min-height: 30px; padding: 0 10px 0 9px; background: var(--tt-section); color: var(--tt-section-text); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); }
.tt-story__tab { position: absolute; left: 0; bottom: 0; z-index: 1; }
[dir="rtl"] .tt-story__tab { left: auto; right: 0; }
.tt-story__deck { font-family: var(--font-deck); font-size: 20px; line-height: 26px; }
.tt-story__deck:lang(ur), [lang="ur"] .tt-story__deck { font-family: var(--font-urdu); font-size: 16px; line-height: 30px; }
.tt-story--l .tt-story__deck { font-size: 22px; line-height: 28px; }
.tt-story__tab + .tt-story__text, .tt-story__picture + .tt-story__text { margin-top: var(--tt-space-3); }
@media (max-width: 1023px) {
  .tt-front__lead .tt-story--split { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .tt-front__lead { padding-block: var(--tt-space-5) var(--tt-space-7); }
  .tt-front__lead .tt-story--split { gap: var(--tt-space-5); }
  .tt-section { padding-block: var(--tt-space-7); }
  .tt-cards { gap: var(--tt-space-6) var(--tt-space-4); }
  .tt-strips { gap: var(--tt-space-7); }
}

/* A list of stories under a rule: the archive, the search results, the section's run of news. */
.tt-list { display: flex; flex-direction: column; border-top: var(--tt-rule-section-width) solid var(--tt-text); }
.tt-list__item { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: var(--tt-space-5); padding-block: var(--tt-space-5); border-top: var(--tt-rule-item-width) solid var(--tt-border); }
.tt-list__item:first-child { border-top: 0; }
.tt-list__item .tt-story__picture { margin: 0; }
.tt-list__item--plain { grid-template-columns: 1fr; }
@media (max-width: 600px) {
  .tt-list__item { grid-template-columns: 1fr; }
  .tt-list__item .tt-story__picture { order: -1; }
}

/* Pagination: numbers in Chivo, the current one filled. */
.tt-pagination { display: flex; flex-wrap: wrap; gap: var(--tt-space-2); padding-top: var(--tt-space-7); }
.tt-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 var(--tt-space-3); box-sizing: border-box; border: 1.5px solid var(--tt-text); font-family: var(--font-display); font-weight: 700; text-decoration: none; }
.tt-pagination .page-numbers.current { background: var(--tt-text); color: var(--tt-bg); }
.tt-pagination .page-numbers.dots { border: 0; }

/* ---------------------------------------------------------------- the article */
/* The top of the page is one field of the section's colour: the header, the date line and the hero. The picture on
   one side and the words on the other on a desk; on a phone the words, then the picture, with the colour ending
   behind it. Below the hard edge the text runs on paper, and the section's colour is its accent. */
.tt-hero { background: var(--tt-section, var(--tt-mist)); background-image: linear-gradient(168deg, var(--tt-section) 0%, var(--tt-section) 30%, var(--tt-section-deep, var(--tt-section)) 100%); color: var(--tt-section-text, var(--tt-ink)); --tt-text: var(--tt-section-text, var(--tt-ink)); --tt-text-secondary: var(--tt-section-muted, var(--tt-graphite)); --tt-border: var(--tt-section-muted, var(--tt-border)); --tt-bg: var(--tt-section, var(--tt-mist)); --tt-focus: var(--tt-section-text, var(--tt-ink)); }
.tt-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--tt-space-6); padding-block: var(--tt-space-6) var(--tt-space-7); }
.tt-article--picture .tt-hero__picture .tt-picture { display: flex; flex-direction: column; }
.tt-hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--tt-space-5); min-width: 0; }
.tt-hero__tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tt-space-2) var(--tt-space-4); min-height: 20px; }
.tt-hero__section { display: inline-flex; text-decoration: none; }
.tt-hero__tag { display: inline-flex; align-items: center; gap: 7px; color: var(--tt-text); text-decoration: none; opacity: .82; }
.tt-hero__tag:hover, .tt-hero__tag:focus-visible { opacity: 1; }
.tt-hero__plus { position: relative; flex: none; width: 11px; height: 11px; }
.tt-hero__plus::before, .tt-hero__plus::after { content: ""; position: absolute; background: currentColor; }
.tt-hero__plus::before { left: 0; right: 0; top: 4px; height: 3px; }
.tt-hero__plus::after { top: 0; bottom: 0; left: 4px; width: 3px; }
.tt-hero__tag-word { display: block; }
.tt-hero__tag-ur { font-family: var(--font-urdu); font-weight: 700; font-size: 17px; line-height: 1; }
.tt-hero__title { font-family: var(--font-display); font-weight: 900; font-size: clamp(38px, 5.4vw, 80px); line-height: 0.98; letter-spacing: -0.03em; max-width: 13.5em; text-wrap: balance; }
.tt-hero__title:lang(ur), [lang="ur"] .tt-hero__title { font-family: var(--font-urdu); font-weight: 700; font-size: clamp(26px, 2.7vw, 40px); line-height: 1.5; letter-spacing: 0; max-width: 20em; }
.tt-hero__deck { max-width: 28em; font-family: var(--font-deck); font-size: clamp(22px, 1.8vw, 27px); line-height: 1.28; margin-top: calc(-1 * var(--tt-space-2)); }
.tt-hero__deck:lang(ur), [lang="ur"] .tt-hero__deck { font-family: var(--font-urdu); font-size: 18px; line-height: 34px; }
.tt-hero__byline { display: flex; flex-direction: column; gap: 3px; }
.tt-hero__by { font-size: 17px; line-height: 24px; }
.tt-hero__by a { font-family: var(--font-display); font-weight: 700; text-decoration: none; }
.tt-hero__by a:hover, .tt-hero__by a:focus-visible { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 2px; }
[lang="ur"] .tt-hero__by, [lang="ur"] .tt-hero__by a { font-family: var(--font-urdu); }
.tt-hero__when, .tt-hero__credit, .tt-hero__line { font-size: 15px; line-height: 22px; color: var(--tt-text-secondary); }
.tt-hero__credit span { font-family: var(--font-nav); font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; margin-inline-end: 4px; }
[lang="ur"] .tt-hero__credit span { font-family: var(--font-urdu); letter-spacing: 0; text-transform: none; font-size: 14px; }
[lang="ur"] .tt-hero__when, [lang="ur"] .tt-hero__credit { font-family: var(--font-urdu); }
/* the tools: the edition switch, share, the link, the conversation */
.tt-hero__tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tt-space-3) var(--tt-space-5); width: 100%; }
.tt-hero__switch { width: 214px; height: 40px; }
.tt-hero__switch .tt-switch__option { color: var(--tt-section-text); }
.tt-hero__switch .tt-switch__option.is-active { background: var(--tt-section-text); color: var(--tt-section); }
.tt-hero__switch .tt-switch__option:not(.is-active) { box-shadow: inset 0 0 0 1.5px var(--tt-section-muted); }
.tt-hero__actions { display: flex; flex-wrap: wrap; gap: var(--tt-space-2); }
.tt-tool { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin: 0; padding: 0 14px 0 12px; box-sizing: border-box; border: 1.5px solid var(--tt-section-muted); border-radius: var(--tt-radius); background: transparent; color: var(--tt-text); font-family: var(--font-ui); font-size: 14px; font-weight: 700; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color 160ms ease-out, color 160ms ease-out, border-color 160ms ease-out; }
.tt-tool:hover, .tt-tool:focus-visible, .tt-tool[aria-expanded="true"] { background: var(--tt-section-text); color: var(--tt-section); border-color: var(--tt-section-text); }
.tt-tool .tt-icon { flex: none; }
[lang="ur"] .tt-tool { font-family: var(--font-urdu); font-size: 15px; padding: 0 12px 0 14px; }
.tt-hero__sheet { display: flex; flex-wrap: wrap; gap: var(--tt-space-2); flex-basis: 100%; }
.tt-hero__sheet[hidden] { display: none; }
.tt-hero__sheet-link { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1.5px solid var(--tt-section-text); font-family: var(--font-ui); font-size: 14px; font-weight: 700; text-decoration: none; }
.tt-hero__sheet-link:hover, .tt-hero__sheet-link:focus-visible { background: var(--tt-section-text); color: var(--tt-section); }
.tt-hero__stamp { width: 56px; height: 56px; display: block; margin-inline-start: auto; }
/* the picture */
.tt-hero__picture { min-width: 0; }
.tt-hero__figure .tt-picture__frame { aspect-ratio: 16 / 9; background: rgba(0, 0, 0, 0.12); }
.tt-hero__figure .tt-picture__frame > img { width: 100%; height: 100%; object-fit: cover; }
.tt-hero__picture .tt-picture__credit { display: none; } /* the credit is in the byline */
.tt-hero__picture .tt-picture__caption { margin-top: var(--tt-space-3); color: var(--tt-text-secondary); font-size: 14px; line-height: 20px; }
.tt-hero__picture .tt-illustration { background: rgba(0, 0, 0, 0.1); }
@media (min-width: 1100px) {
  .tt-article--picture .tt-hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--tt-space-8); align-items: center; padding-block: var(--tt-space-7) var(--tt-space-8); }
  .tt-article--picture .tt-hero__picture { order: -1; }
  .tt-article--picture .tt-hero__figure .tt-picture__frame, .tt-article--picture .tt-hero__picture .tt-illustration { aspect-ratio: 1 / 1 !important; }
  .tt-article--words .tt-hero__grid { padding-block: var(--tt-space-7) var(--tt-space-8); }
}
@media (max-width: 767px) {
  .tt-hero__grid { gap: var(--tt-space-5); padding-block: var(--tt-space-5) var(--tt-space-6); }
  .tt-hero__text { gap: var(--tt-space-4); }
  .tt-hero__title { font-size: clamp(34px, 9.6vw, 44px); line-height: 1; }
  .tt-hero__title:lang(ur), [lang="ur"] .tt-hero__title { font-size: 24px; line-height: 1.55; }
  .tt-hero__deck { font-size: 20px; line-height: 26px; margin-top: 0; }
  .tt-hero__deck:lang(ur), [lang="ur"] .tt-hero__deck { font-size: 16px; line-height: 30px; }
  .tt-hero__tools { gap: var(--tt-space-3); }
  .tt-hero__switch { width: 100%; max-width: 214px; }
  /* the picture runs edge to edge, and the colour ends where it begins */
  .tt-article--picture .tt-hero__grid { padding-bottom: 0; }
  .tt-article--picture .tt-hero__picture { margin-inline: calc(-1 * var(--tt-margin-phone)); }
  .tt-article--picture .tt-hero__picture .tt-picture__caption { padding: 0 var(--tt-margin-phone) var(--tt-space-4); margin-top: var(--tt-space-3); }
  .tt-article--picture .tt-article__main { padding-top: var(--tt-space-6); }
}

/* a page: the headline on paper, the text in the article's measure */
.tt-page { --tt-section-accent: var(--tt-orange); --tt-section-accent-text: #ffffff; --tt-section-rule: var(--tt-orange); }
.tt-page__head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--tt-space-4); max-width: 38em; padding-block: var(--tt-space-7) var(--tt-space-6); }
.tt-page__title { max-width: 14em; }
.tt-page__deck { max-width: 30em; }
.tt-page__picture { margin-bottom: var(--tt-space-6); }
.tt-page .tt-article__body { max-width: 38em; }
.tt-page .tt-article__body > p:first-of-type::first-letter { float: none; font: inherit; padding: 0; margin: 0; color: inherit; }

/* the text */
.tt-article__main { padding-top: var(--tt-space-7); }
.tt-article__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--tt-space-8); }
.tt-article__column { display: flex; flex-direction: column; gap: var(--tt-space-7); min-width: 0; max-width: 38em; }
.tt-article__aside { display: flex; flex-direction: column; gap: var(--tt-space-7); min-width: 0; }
@media (min-width: 1100px) {
  .tt-article__grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--tt-space-9); }
  .tt-article__aside { align-self: stretch; } /* the tower at its foot may stay in view (Ads › The look) */
}
.tt-article__body { display: flex; flex-direction: column; gap: var(--tt-space-5); }
.tt-article__body > p, .tt-article__body > ul, .tt-article__body > ol, .tt-article__body > blockquote, .tt-article__body > h2, .tt-article__body > h3, .tt-article__body > figure, .tt-article__body > table, .tt-article__body > .wp-block-group, .tt-article__body > .wp-block-columns, .tt-article__body > .wp-block-embed, .tt-article__body > hr { margin: 0; }
.tt-article__body > p, .tt-article__body li { font-size: 19px; line-height: 32px; }
[lang="ur"] .tt-article__body > p, [lang="ur"] .tt-article__body li { font-family: var(--font-urdu); font-size: 19px; line-height: 38px; }
/* The opening letter, four lines tall, in the section's colour and the deck's serif, at the start of the line (every
   paragraph takes its direction from its own letters, see tt_content_direction). English only. */
.tt-article__body > p:first-of-type::first-letter { float: left; float: inline-start; font-family: var(--font-deck); font-weight: 400; font-size: 152px; line-height: 116px; padding-block-start: 12px; padding-inline-end: 16px; margin-bottom: -8px; color: var(--tt-section-accent, var(--tt-text)); }
/* No drop cap in Urdu: a letter pulled out of a joined word loses its form. */
[lang="ur"] .tt-article__body > p:first-of-type::first-letter, .tt-article__body > p[lang="ur"]:first-of-type::first-letter, .tt-article__body > p[dir="rtl"]:first-of-type::first-letter, .tt-article__body > p:first-of-type:dir(rtl)::first-letter { float: none; font: inherit; padding: 0; margin: 0; color: inherit; }
/* The end mark on an editorial: the tombstone, in the section's colour, on the last line. */
.tt-qed { display: inline-block; margin-inline-start: 0.35em; color: var(--tt-section-accent, var(--tt-text)); font-family: var(--font-display); font-size: 0.9em; line-height: 1; vertical-align: baseline; }
.tt-article__body h2 { font-family: var(--font-display); font-weight: 900; font-size: 28px; line-height: 31px; letter-spacing: -0.025em; padding-top: var(--tt-space-4); }
.tt-article__body h2::before { content: ""; display: block; width: 36px; height: 4px; margin-bottom: var(--tt-space-3); background: var(--tt-section-accent, var(--tt-text)); }
.tt-article__body h3 { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 26px; padding-top: var(--tt-space-2); }
[lang="ur"] .tt-article__body h2, [lang="ur"] .tt-article__body h3 { font-family: var(--font-urdu); letter-spacing: 0; line-height: 1.6; }
.tt-article__body a { overflow-wrap: anywhere; color: inherit; text-decoration: underline; text-decoration-color: var(--tt-section-accent, var(--tt-text)); text-decoration-thickness: 2px; text-underline-offset: 0.16em; transition: background-color 140ms ease-out, color 140ms ease-out; }
.tt-article__body blockquote { max-width: 100%; overflow-wrap: anywhere; }
.tt-article__body a:hover, .tt-article__body a:focus-visible { background: var(--tt-section-accent, var(--tt-text)); color: var(--tt-section-accent-text, var(--tt-bg)); text-decoration-color: transparent; }
.tt-article__body em, .tt-article__body i, .tt-article__body cite { font-style: normal; font-weight: 600; }
.tt-article__body strong { font-weight: 600; }
.tt-article__body ul, .tt-article__body ol { padding-inline-start: 1.25em; display: flex; flex-direction: column; gap: var(--tt-space-2); }
.tt-article__body ul { list-style: none; padding-inline-start: 0; }
.tt-article__body ul > li { position: relative; padding-inline-start: 24px; }
.tt-article__body ul > li::before { content: ""; position: absolute; inset-inline-start: 0; top: 12px; width: 9px; height: 9px; background: var(--tt-section-accent, var(--tt-text)); }
.tt-article__body hr { width: 48px; height: 4px; margin-block: var(--tt-space-2); border: 0; background: var(--tt-section-accent, var(--tt-text)); }
.tt-article__body blockquote, .tt-article__body .wp-block-quote { position: relative; margin: 0; padding: var(--tt-space-2) 0 var(--tt-space-2) var(--tt-space-5); border: 0; border-inline-start: 4px solid var(--tt-section-accent, var(--tt-text)); }
[dir="rtl"] .tt-article__body blockquote, [dir="rtl"] .tt-article__body .wp-block-quote { padding: var(--tt-space-2) var(--tt-space-5) var(--tt-space-2) 0; }
.tt-article__body blockquote p { font-family: var(--font-display); font-weight: 900; font-size: 27px; line-height: 32px; letter-spacing: -0.025em; }
[lang="ur"] .tt-article__body blockquote p { font-family: var(--font-urdu); font-size: 25px; line-height: 44px; letter-spacing: 0; }
.tt-article__body blockquote cite { display: block; margin-top: var(--tt-space-3); font-family: var(--font-text); font-size: 15px; line-height: 20px; font-weight: 400; color: var(--tt-text-secondary); }
.tt-article__body .wp-block-pullquote { margin: 0; padding: var(--tt-space-5) 0; border-top: 4px solid var(--tt-section-accent, var(--tt-text)); border-bottom: var(--tt-rule-item-width) solid var(--tt-border); text-align: start; }
.tt-article__body .wp-block-pullquote blockquote { padding: 0; border: 0; }
.tt-article__body figure.wp-block-image, .tt-article__body figure.wp-block-video, .tt-article__body figure.wp-block-embed { margin: 0; }
.tt-article__body figure img { display: block; width: 100%; height: auto; background: var(--tt-panel); }
.tt-article__body figcaption { margin-top: var(--tt-space-2); font-size: 14px; line-height: 20px; color: var(--tt-text-secondary); text-align: start; }
.tt-article__body .alignwide { max-width: none; width: min(100%, 56em); }
.tt-article__body table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums lining-nums; }
.tt-article__body th, .tt-article__body td { padding: var(--tt-space-3) var(--tt-space-5) var(--tt-space-3) 0; text-align: start; vertical-align: top; border-bottom: var(--tt-rule-item-width) solid var(--tt-border); font-size: 16px; line-height: 24px; }
.tt-article__body thead th { padding-top: 0; font-size: 14px; line-height: 20px; font-weight: 400; color: var(--tt-text-secondary); border-bottom: var(--tt-rule-section-width) solid var(--tt-text); }
.tt-article__body .wp-block-table figcaption { text-align: start; }
.tt-article__body .wp-block-separator { width: 48px; height: 4px; border: 0; background: var(--tt-section-accent, var(--tt-text)); }
.tt-article__body .wp-block-embed__wrapper { position: relative; aspect-ratio: 16 / 9; background: var(--tt-slate); }
.tt-article__body .wp-block-embed__wrapper iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.tt-article__body .wp-block-code, .tt-article__body pre { padding: var(--tt-space-4); background: var(--tt-panel); font-size: 14px; line-height: 22px; overflow-x: auto; }
.tt-article__body .wp-block-buttons .wp-block-button__link { border-radius: var(--tt-radius); }

/* Editorial blocks: key points, a figure, a timeline, the colon opening a quotation; the section's colour on each. */
.tt-keypoints { padding: var(--tt-space-5) 0; border-top: 4px solid var(--tt-section-accent, var(--tt-text)); border-bottom: var(--tt-rule-item-width) solid var(--tt-border); }
.tt-keypoints__title { font-family: var(--font-display); font-weight: 700; font-size: 19px; line-height: 24px; margin-bottom: var(--tt-space-3); }
.tt-keypoints ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--tt-space-3); counter-reset: kp; }
.tt-keypoints li { display: flex; gap: var(--tt-space-3); font-size: 16px; line-height: 24px; counter-increment: kp; }
.tt-keypoints li::before { content: counter(kp); flex: none; width: 20px; font-family: var(--font-display); font-weight: 900; color: var(--tt-section-accent, var(--tt-text)); }
.tt-figure { display: flex; flex-direction: column; gap: var(--tt-space-2); padding: var(--tt-space-5) 0; border-top: 4px solid var(--tt-section-accent, var(--tt-text)); border-bottom: var(--tt-rule-item-width) solid var(--tt-border); }
.tt-figure__value { font-family: var(--font-display); font-weight: 900; font-size: 56px; line-height: 1; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; color: var(--tt-section-accent, var(--tt-text)); }
.tt-figure__label { font-size: 16px; line-height: 24px; }
.tt-figure__source { font-size: 14px; line-height: 20px; color: var(--tt-text-secondary); }
.tt-timeline { display: flex; flex-direction: column; border-top: 4px solid var(--tt-section-accent, var(--tt-text)); }
.tt-timeline__item { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: var(--tt-space-4); padding: var(--tt-space-3) 0; border-top: var(--tt-rule-item-width) solid var(--tt-border); }
.tt-timeline__item:first-child { border-top: 0; }
.tt-timeline__when { font-size: 14px; line-height: 20px; color: var(--tt-text-secondary); padding-top: 2px; }
.tt-timeline__what { font-size: 16px; line-height: 24px; }
.tt-quote { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--tt-space-4); padding: var(--tt-space-4) 0; }
.tt-quote__colon { display: grid; gap: 12px; padding-top: 6px; }
.tt-quote__colon i { display: block; width: 18px; height: 18px; background: var(--tt-section-accent, var(--tt-orange)); }
.tt-quote__text { font-family: var(--font-display); font-weight: 900; font-size: 27px; line-height: 32px; letter-spacing: -0.025em; }
.tt-quote__who { margin-top: var(--tt-space-3); font-size: 14px; line-height: 20px; color: var(--tt-text-secondary); }
[lang="ur"] .tt-quote__text { font-family: var(--font-urdu); font-size: 25px; line-height: 44px; letter-spacing: 0; }

/* beside the text: more from the section */
.tt-swatch { display: inline-block; flex: none; width: 10px; height: 10px; background: var(--tt-section, var(--tt-orange)); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14); vertical-align: middle; }
.tt-related { display: flex; flex-direction: column; padding-top: var(--tt-space-4); border-top: 4px solid var(--tt-section-rule, var(--tt-text)); }
.tt-related__title { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--tt-space-2); font-family: var(--font-nav); font-size: 11px; line-height: 18px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
[lang="ur"] .tt-related__title { font-family: var(--font-urdu); letter-spacing: 0; text-transform: none; font-size: 15px; }
.tt-related__item { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: var(--tt-space-3) 0; border-top: var(--tt-rule-item-width) solid var(--tt-border); text-decoration: none; }
.tt-related__item:first-of-type { border-top: 0; }
.tt-related__headline { font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 23px; }
[lang="ur"] .tt-related__headline { font-family: var(--font-urdu); line-height: 1.6; }
.tt-related__time { color: var(--tt-text-secondary); }
.tt-related__more { align-self: flex-start; margin-top: var(--tt-space-2); }

/* after the text: the writer */
.tt-article__foot { display: flex; flex-direction: column; gap: var(--tt-space-6); }
.tt-author { display: flex; gap: var(--tt-space-5); padding-top: var(--tt-space-5); border-top: var(--tt-rule-section-width) solid var(--tt-text); }
.tt-author__square { position: relative; flex: none; width: 64px; height: 64px; }
.tt-author__square .tt-square { width: 64px; height: 64px; font-size: 30px; }
.tt-author__avatar { position: absolute; inset: 0; width: 64px; height: 64px; object-fit: cover; }
.tt-author__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--tt-space-1); min-width: 0; }
.tt-author__name { font-family: var(--font-display); font-weight: 700; font-size: 19px; line-height: 24px; text-decoration: none; }
[lang="ur"] .tt-author__name { font-family: var(--font-urdu); }
.tt-author__bio { font-size: 16px; line-height: 24px; max-width: 34em; }
.tt-author__more { min-height: 36px; }

/* after the story: three to read next, each under its section's colour */
.tt-next { padding-top: var(--tt-space-8); }
.tt-next__heading { margin: 0 0 var(--tt-space-5); padding-bottom: var(--tt-space-3); border-bottom: var(--tt-rule-section-width) solid var(--tt-text); font-family: var(--font-nav); font-weight: 600; font-size: 13px; line-height: 20px; letter-spacing: 0.16em; text-transform: uppercase; }
[lang="ur"] .tt-next__heading { font-family: var(--font-urdu); letter-spacing: 0; text-transform: none; font-size: 17px; }
.tt-next__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tt-space-6); }
.tt-next__item { display: flex; flex-direction: column; align-items: flex-start; gap: var(--tt-space-3); min-width: 0; padding-top: var(--tt-space-4); border-top: 4px solid var(--tt-section-rule, var(--tt-text)); }
.tt-next__picture { display: block; width: 100%; }
.tt-next__picture .tt-picture__credit { display: none; }
.tt-next__word { display: flex; align-items: center; gap: 8px; margin: 0; font-family: var(--font-nav); font-size: 10px; line-height: 16px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tt-text-secondary); }
.tt-next__word:lang(ur) { font-family: var(--font-urdu); letter-spacing: 0; text-transform: none; font-size: 14px; }
.tt-next__headline { margin: 0; }
.tt-next__time { margin-top: -4px; }
@media (max-width: 900px) {
  .tt-next__grid { grid-template-columns: 1fr; gap: 0; }
  .tt-next__item { display: grid; grid-template-columns: minmax(0, 1fr) 120px; grid-template-rows: auto auto 1fr; column-gap: var(--tt-space-4); row-gap: var(--tt-space-2); padding-block: var(--tt-space-4); border-top-width: var(--tt-rule-item-width); border-top-color: var(--tt-border); }
  .tt-next__item:first-child { border-top: 4px solid var(--tt-section-rule, var(--tt-text)); }
  .tt-next__picture { grid-column: 2; grid-row: 1 / span 3; }
  .tt-next__headline { font-size: 19px; line-height: 24px; }
}

/* ------------------------------------------------------------ the conversation */
.tt-conversation { display: flex; flex-direction: column; gap: var(--tt-space-6); padding-top: var(--tt-space-6); border-top: var(--tt-rule-section-width) solid var(--tt-text); }
.tt-conversation__head { display: flex; flex-direction: column; gap: var(--tt-space-3); }
.tt-conversation__title { display: flex; align-items: center; gap: var(--tt-space-3); font-family: var(--font-display); font-weight: 900; font-size: 32px; line-height: 1; letter-spacing: -0.025em; }
[lang="ur"] .tt-conversation__title { font-family: var(--font-urdu); font-size: 28px; line-height: 1.5; letter-spacing: 0; }
.tt-conversation__count { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 8px; box-sizing: border-box; background: var(--tt-section-accent, var(--tt-text)); color: var(--tt-section-accent-text, var(--tt-bg)); font-size: 17px; font-weight: 700; letter-spacing: 0; }
.tt-conversation__note, .tt-conversation__empty { max-width: 36em; color: var(--tt-text-secondary); font-size: 16px; line-height: 24px; }
/* the form: the words first; the name and the address appear once the words are begun */
.tt-conversation__respond { }
.tt-conversation__form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--tt-space-4); }
.tt-conversation__form > * { margin: 0; min-width: 0; }
.tt-conversation__form > :not(.tt-conversation__field) { grid-column: 1 / -1; }
.tt-conversation__textarea { box-sizing: border-box; display: block; width: 100%; min-height: 112px; margin: 0; padding: 16px 18px; border: 1.5px solid var(--tt-text); border-radius: var(--tt-radius); background: var(--tt-bg); color: var(--tt-text); font-family: var(--font-text); font-size: 18px; line-height: 28px; resize: vertical; }
.tt-conversation__textarea::placeholder { color: var(--tt-text-secondary); }
.tt-conversation__textarea[dir="rtl"] { font-family: var(--font-urdu); font-size: 18px; line-height: 34px; }
.tt-conversation__field .tt-field__control { height: 48px; }
.tt-conversation__field .required { color: var(--tt-section-accent, var(--tt-text)); }
.tt-conversation__remember { display: flex; align-items: center; gap: 10px; font-size: 15px; line-height: 20px; color: var(--tt-text-secondary); }
.tt-conversation__remember input { width: 18px; height: 18px; margin: 0; accent-color: var(--tt-text); }
.tt-conversation__as { font-size: 15px; line-height: 20px; color: var(--tt-text-secondary); }
.tt-conversation__as b { font-weight: 600; color: var(--tt-text); }
.tt-conversation__replying { display: none; align-items: center; gap: var(--tt-space-3); padding-bottom: 12px; font-family: var(--font-ui); font-size: 15px; line-height: 20px; font-weight: 700; }
.tt-conversation__replying:has(#cancel-comment-reply-link:not([style*="none"])) { display: flex; }
.tt-conversation__replying a { color: inherit; }
.tt-conversation__cancel a { font-weight: 400; color: var(--tt-text-secondary); }
.tt-conversation__submit-row { display: flex; align-items: center; gap: var(--tt-space-4); }
.tt-conversation__submit { min-height: 48px; }
.tt-conversation__form.is-js:not(.is-open) .tt-conversation__field, .tt-conversation__form.is-js:not(.is-open) .tt-conversation__remember, .tt-conversation__form.is-js:not(.is-open) .tt-conversation__submit-row, .tt-conversation__form.is-js:not(.is-open) .tt-conversation__as { display: none; }
.tt-conversation__form.is-js:not(.is-open) .tt-conversation__textarea { min-height: 64px; }
.tt-conversation__note a, .tt-conversation__as a { color: inherit; }
/* the comments */
.tt-conversation__list, .tt-conversation__list .children { list-style: none; margin: 0; padding: 0; }
.tt-conversation__list > .tt-comment { padding-top: var(--tt-space-5); border-top: var(--tt-rule-item-width) solid var(--tt-border); }
.tt-conversation__list > .tt-comment:first-child { border-top: 0; padding-top: 0; }
.tt-conversation__list > .tt-comment { margin-bottom: var(--tt-space-5); }
.tt-comment__inner { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--tt-space-4); align-items: start; }
.tt-square { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--tt-square, var(--tt-text)); color: var(--tt-square-text, var(--tt-bg)); font-family: var(--font-display); font-weight: 900; font-size: 19px; line-height: 1; }
.tt-square--ur { font-family: var(--font-urdu); font-weight: 700; font-size: 20px; }
.tt-comment__main { display: flex; flex-direction: column; gap: var(--tt-space-2); min-width: 0; }
.tt-comment__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.tt-comment__name { font-family: var(--font-display); font-weight: 700; font-size: 16px; line-height: 20px; color: var(--tt-text); text-decoration: none; }
[lang="ur"] .tt-comment__name { font-family: var(--font-urdu); }
.tt-comment__badge { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; background: var(--tt-text); color: var(--tt-bg); font-family: var(--font-nav); font-size: 9px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.tt-comment__badge--author { background: var(--tt-section-accent, var(--tt-text)); color: var(--tt-section-accent-text, var(--tt-bg)); }
[lang="ur"] .tt-comment__badge { font-family: var(--font-urdu); letter-spacing: 0; text-transform: none; font-size: 12px; }
.tt-comment__time { font-size: 14px; line-height: 20px; color: var(--tt-text-secondary); text-decoration: none; }
.tt-comment__time:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.tt-comment__pending { padding: 6px 10px; background: var(--tt-panel); font-size: 14px; line-height: 20px; color: var(--tt-text-secondary); }
.tt-comment__text { font-size: 17px; line-height: 27px; }
.tt-comment__text p { margin: 0 0 var(--tt-space-2); }
.tt-comment__text p:last-child { margin-bottom: 0; }
.tt-comment__text a { color: inherit; text-decoration: underline; text-decoration-color: var(--tt-section-accent, var(--tt-text)); text-underline-offset: 0.16em; }
.tt-comment__text[lang="ur"] { font-family: var(--font-urdu); font-size: 17px; line-height: 34px; }
.tt-comment__text[lang="en"] { font-family: var(--font-text); font-size: 17px; line-height: 27px; }
.tt-comment__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tt-space-4); }
.tt-comment__foot .comment-reply-link { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-family: var(--font-ui); font-size: 14px; font-weight: 700; text-decoration: none; color: var(--tt-text); }
.tt-comment__foot .comment-reply-link:hover, .tt-comment__foot .comment-reply-link:focus-visible { color: var(--tt-section-accent, var(--tt-text)); }
[lang="ur"] .tt-comment__foot .comment-reply-link { font-family: var(--font-urdu); }
.tt-comment__edit a { font-family: var(--font-ui); font-size: 14px; color: var(--tt-text-secondary); text-decoration: none; }
.tt-comment > .children { margin: var(--tt-space-4) 0 0 20px; padding-inline-start: 20px; border-inline-start: 2px solid var(--tt-border); }
[dir="rtl"] .tt-comment > .children { margin: var(--tt-space-4) 20px 0 0; }
.tt-comment > .children > .tt-comment { padding-top: var(--tt-space-4); }
.tt-comment > .children > .tt-comment:first-child { padding-top: 0; }
.tt-comment > .children .tt-comment__inner { grid-template-columns: 32px minmax(0, 1fr); gap: var(--tt-space-3); }
.tt-comment > .children .tt-square { width: 32px; height: 32px; font-size: 15px; }
.tt-comment > .tt-conversation__respond { margin: var(--tt-space-4) 0 0 56px; }
[dir="rtl"] .tt-comment > .tt-conversation__respond { margin: var(--tt-space-4) 56px 0 0; }
.tt-conversation__nav { display: flex; justify-content: space-between; gap: var(--tt-space-4); padding-top: var(--tt-space-4); border-top: var(--tt-rule-item-width) solid var(--tt-border); }
.tt-conversation__nav a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-family: var(--font-ui); font-size: 15px; font-weight: 700; text-decoration: none; }
.tt-conversation__nav .nav-links { display: flex; justify-content: space-between; width: 100%; }
.tt-conversation__nav h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.tt-conversation__list .comment-respond .tt-conversation__form { grid-template-columns: 1fr; }
@media (max-width: 600px) {
  .tt-conversation__form { grid-template-columns: 1fr; }
  .tt-comment > .children { margin-inline-start: 12px; padding-inline-start: 12px; }
  .tt-comment > .tt-conversation__respond { margin-inline-start: 0; }
}

/* ------------------------------------------------------------ section fronts */
.tt-front-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--tt-space-4); padding-block: var(--tt-space-6) var(--tt-space-5); border-bottom: var(--tt-rule-section-width) solid var(--tt-text); }
.tt-front-head__desc { max-width: 36em; }
.tt-section-band { background: var(--tt-section); background-image: linear-gradient(168deg, var(--tt-section) 0%, var(--tt-section) 30%, var(--tt-section-deep, var(--tt-section)) 100%); color: var(--tt-section-text); --tt-text: var(--tt-section-text); --tt-text-secondary: var(--tt-section-muted); }
.tt-front-head--band { border-bottom: 0; padding-block: var(--tt-space-7) var(--tt-space-8); }
/* The name of a section or a page: T, the colon and the word, set large, as the heading itself. */
.tt-front-head__title { display: flex; flex-direction: column; align-items: flex-start; gap: var(--tt-space-3); }
.tt-front-head__label { display: inline-flex; }
.tt-front-head__name { display: block; }
@media (max-width: 767px) {
  .tt-front-head__label > svg { height: 28px !important; width: auto !important; }
  .tt-front-head__label.tt-label--ur { --tt-label-cap: 28px !important; }
}
.tt-section-band + .tt-wrap .tt-front__lead { padding-top: var(--tt-space-6); }
.tt-front-head--search form { width: 100%; max-width: 640px; }

/* -------------------------------------------------------------------- bands */
.tt-band { background: var(--tt-text); color: var(--tt-bg); --tt-bg: var(--tt-ink); --tt-text: var(--tt-paper); --tt-text-secondary: #a8a8a8; --tt-border: #3a3a3a; --tt-panel: #1c1c1c; }
.tt-band--mist { background: var(--tt-panel); color: var(--tt-text); }

/* ----------------------------------------------------------------- the footer */
.tt-footer { margin-top: var(--tt-space-9); background: var(--tt-ink); color: var(--tt-paper); --tt-bg: var(--tt-ink); --tt-text: var(--tt-paper); --tt-text-secondary: #a8a8a8; --tt-border: #3a3a3a; }
.tt-footer__inner { display: flex; flex-direction: column; gap: var(--tt-space-7); padding-block: var(--tt-space-8) var(--tt-space-7); }
.tt-footer__big { display: block; width: 100%; line-height: 0; }
.tt-footer__big > svg { width: 100%; height: auto; }
.tt-footer__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--tt-space-5); }
.tt-footer__line { margin: 0; font-family: var(--font-deck); font-size: 24px; line-height: 30px; }
[dir="rtl"] .tt-footer__line { font-family: var(--font-urdu); font-size: 18px; line-height: 32px; }
.tt-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: var(--tt-space-6) var(--tt-space-5); padding-top: var(--tt-space-6); border-top: var(--tt-rule-item-width) solid var(--tt-border); }
.tt-footer__col h2 { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--tt-text-secondary); margin-bottom: var(--tt-space-2); }
.tt-footer__col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.tt-footer__col a { display: inline-flex; align-items: center; min-height: 36px; min-width: 24px; font-size: 16px; line-height: 22px; font-weight: 500; text-decoration: none; }
.tt-footer__col a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.tt-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--tt-space-3) var(--tt-space-5); font-size: 13px; line-height: 18px; color: var(--tt-text-secondary); }
.tt-footer__legal a { text-decoration: none; }
.tt-footer .tt-switch__option { color: var(--tt-paper); }
.tt-footer .tt-switch__option.is-active { background: var(--tt-paper); color: var(--tt-ink); }
.tt-footer .tt-button--main { background: var(--tt-paper); color: var(--tt-ink); border-color: var(--tt-paper); }
.tt-footer .tt-button--secondary { color: var(--tt-paper); border-color: var(--tt-paper); }
.tt-footer__col a:lang(ur), [dir="rtl"] .tt-footer__col h2 { font-family: var(--font-urdu); }
.tt-footer__col a:lang(en) { font-family: var(--font-ui); letter-spacing: 0; }

/* ------------------------------------------------------------------- forms */
.tt-field { display: flex; flex-direction: column; gap: var(--tt-space-2); }
.tt-field__label { font-family: var(--font-ui); font-size: 14px; line-height: 20px; font-weight: 700; }
.tt-field__control { box-sizing: border-box; width: 100%; margin: 0; padding: 0 14px; height: 52px; border: 1.5px solid var(--tt-text); border-radius: var(--tt-radius); background: var(--tt-bg); color: var(--tt-text); font-size: 16px; line-height: 24px; font-family: var(--font-ui); }
textarea.tt-field__control { height: auto; padding: 12px 14px; resize: vertical; }
select.tt-field__control { appearance: none; -webkit-appearance: none; }
.tt-field__control:focus { outline: var(--tt-focus-width) solid var(--tt-focus); outline-offset: var(--tt-focus-offset); }
.tt-form { display: flex; flex-direction: column; gap: var(--tt-space-5); }
.tt-form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--tt-space-5); }
.tt-notice { padding: var(--tt-space-4); background: var(--tt-panel); font-size: 16px; line-height: 24px; }
.tt-notice--ink { background: var(--tt-text); color: var(--tt-bg); }

/* ------------------------------------------------------------------ video */
.tt-video { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--tt-slate); color: var(--tt-paper); }
.tt-video > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tt-video > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tt-video__play { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-start; padding: var(--tt-space-4); margin: 0; border: 0; background: transparent; color: var(--tt-paper); cursor: pointer; text-align: start; }
.tt-video__play span { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; background: var(--tt-paper); color: var(--tt-ink); }
.tt-video__play:hover span { background: var(--tt-orange); }
.tt-video__mark { position: absolute; top: var(--tt-space-4); right: var(--tt-space-4); line-height: 0; }
.tt-video__title { margin-top: var(--tt-space-3); }
.tt-video__title .tt-story__link { padding-block: 1px; } /* a tap target of 24px at least, as the title's line is 23 */
.tt-shorts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(160px, 200px); gap: var(--tt-space-4); overflow-x: auto; scrollbar-width: none; padding-bottom: var(--tt-space-2); }
.tt-shorts::-webkit-scrollbar { display: none; }
.tt-shorts .tt-video { aspect-ratio: 9 / 16; }
.tt-shorts .tt-video__play span { width: 44px; height: 44px; }
.tt-video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--tt-space-6) var(--tt-space-5); }

/* ------------------------------------------------------------------- print */
/* ------------------------------------------------------------ the feature layout
   For editorials and long reads: the special layout. The cover is a stage. In WebGL (assets/js/stage.js, three.js,
   loaded only here) the photograph is a wall of cubes, each carrying its tile of the picture in one tone of the
   section's colour and the colour on its sides; the page opens with the colon as two cubes that burst into the
   wall; the wall breathes, turns under the pointer, and rolls over and drifts off as the sheet comes up. Without
   WebGL the wall is the picture itself (.tt-feature__wall). The headline is type, flat and plain, over it: cut into
   lines by theme.js, flying in from the depth of the stage, lifting away on scroll. Fixed over everything: the mark
   in its square, the headline once the cover is under the sheet, Share and the menu, the line down the edge.
   --tt-cover (0 at the top, 1 once covered), --tt-mx/--tt-my (the pointer, smoothed) and .is-ready (once the
   faces are in) come from theme.js. */
.tt-feature { --tt-feature-colon: var(--tt-orange); --tt-feature-size: clamp(54px, 10.4vw, 176px); --tt-3d-face: var(--tt-section-text); }
.tt-feature--long { --tt-feature-size: clamp(44px, 7.8vw, 128px); }
.tt-feature--on-orange { --tt-feature-colon: var(--tt-paper); }
/* the cover, pinned */
.tt-feature__cover { position: sticky; top: 0; z-index: 0; height: 100vh; height: 100svh; }
.tt-feature__card { position: relative; box-sizing: border-box; height: 100%; display: flex; flex-direction: column; padding: 104px var(--tt-margin-desktop) 92px; color: var(--tt-section-text); background: var(--tt-section); overflow: hidden; isolation: isolate; }
/* the stage in WebGL, under everything: it fades in over the CSS wall once it has drawn, and the wall goes out of
   sight behind it; the CSS colon stands aside only when the stage is there in time to drop its own */
.tt-feature__gl { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 0.7s ease; }
.tt-feature--gl .tt-feature__gl { opacity: 1; }
.tt-feature--gl .tt-feature__wall { visibility: hidden; transition: visibility 0s linear 0.7s; }
.tt-feature--gl-open .tt-feature__pulse { display: none; }
/* a shade at the foot of the stage, so the deck and the byline read over the field */
.tt-feature--gl .tt-feature__card::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(to top, var(--tt-section) 0%, color-mix(in srgb, var(--tt-section) 62%, transparent) 16%, transparent 42%); animation: tt-shade 0.7s ease both; }
@keyframes tt-shade { from { opacity: 0; } to { opacity: 1; } }
/* the back wall: the photograph in one tone of the section's colour (grey, a shade deeper, on the black section),
   under a veil so the headline stands clear; it slides a little against the pointer, and draws away on scroll */
.tt-feature__wall { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.tt-feature__wall-in { position: absolute; inset: -6%; transform: translate3d(calc(var(--tt-mx, 0) * 18px), calc(var(--tt-my, 0) * 12px), 0) scale(calc(1 + var(--tt-cover, 0) * 0.12)); opacity: calc(1 - var(--tt-cover, 0) * 0.75); }
.tt-feature__wall-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(0.85) brightness(1.45); }
.tt-feature--picture .tt-feature__wall-in::after { content: ""; position: absolute; inset: 0; background: var(--tt-section); mix-blend-mode: multiply; }
.tt-feature--picture .tt-feature__wall::after { content: ""; position: absolute; inset: 0; background: var(--tt-section); opacity: 0.4; }
.tt-feature--ink .tt-feature__wall-in::after { display: none; }
.tt-feature--ink .tt-feature__wall-img { filter: grayscale(1) contrast(1.12) brightness(0.42); }
.tt-feature--ink .tt-feature__wall::after { opacity: 0.2; }
.tt-feature--on-light .tt-feature__wall-img { filter: grayscale(1) contrast(0.9) brightness(1.25); }
.tt-feature__motif { position: absolute; inset: -20%; display: flex; align-items: center; justify-content: center; color: var(--tt-section-text); opacity: 0.1; animation: tt-wander 40s ease-in-out infinite alternate; }
.tt-feature__motif .tt-illustration { width: 70%; max-width: none; }
.tt-feature__motif svg * { fill: currentColor !important; }
@keyframes tt-wander { from { transform: translate(-4%, 3%) rotate(-2deg); } to { transform: translate(4%, -3%) rotate(2deg); } }
.tt-feature.is-ready .tt-feature__wall { animation: tt-wall 2.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes tt-wall { from { opacity: 0; transform: scale(1.16); } to { opacity: 1; transform: none; } }
/* the colon that opens the page: two cubes that tumble in from the depth, land as the colon and fly to the label */
.tt-feature__pulse { position: absolute; left: 50%; top: 50%; z-index: 2; display: grid; gap: 18px; width: 30px; perspective: 420px; transform: translate(-50%, -50%) scale(0); opacity: 0; pointer-events: none; }
.tt-cube { position: relative; display: block; width: 30px; height: 30px; transform-style: preserve-3d; }
.tt-cube b { position: absolute; inset: 0; background: var(--tt-feature-colon); backface-visibility: hidden; }
.tt-cube b:nth-child(1) { transform: translateZ(15px); }
.tt-cube b:nth-child(2) { transform: rotateY(180deg) translateZ(15px); }
.tt-cube b:nth-child(3) { transform: rotateY(90deg) translateZ(15px); background: color-mix(in oklab, var(--tt-feature-colon), black 24%); }
.tt-cube b:nth-child(4) { transform: rotateY(-90deg) translateZ(15px); background: color-mix(in oklab, var(--tt-feature-colon), black 24%); }
.tt-cube b:nth-child(5) { transform: rotateX(90deg) translateZ(15px); background: color-mix(in oklab, var(--tt-feature-colon), black 40%); }
.tt-cube b:nth-child(6) { transform: rotateX(-90deg) translateZ(15px); background: color-mix(in oklab, var(--tt-feature-colon), black 40%); }
.tt-feature.is-ready .tt-feature__pulse { animation: tt-pulse 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 0.05s both; }
.tt-feature.is-ready .tt-cube { animation: tt-tumble 0.8s cubic-bezier(0.25, 0.8, 0.25, 1) 0.05s both; }
.tt-feature.is-ready .tt-cube:nth-child(2) { animation-delay: 0.12s; }
@keyframes tt-tumble { from { transform: rotateX(-520deg) rotateY(380deg) translateZ(-260px); } to { transform: rotateX(0) rotateY(0) translateZ(0); } }
@keyframes tt-pulse {
  0% { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
  12% { opacity: 1; }
  48% { transform: translate(-50%, -50%) scale(1.12); opacity: 1; }
  60% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  67% { opacity: 0.15; }
  73% { opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(0.5) translate(calc(-50vw + 130px), calc(-50vh + 150px)); opacity: 0; }
}
/* the words: label at the top, the stage with the headline, the deck and the byline at the foot */
.tt-feature__content { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; flex: 1; min-height: 0; }
.tt-feature__top { display: flex; align-items: center; min-height: 24px; opacity: calc(1 - var(--tt-cover, 0) * 1.6); }
.tt-feature__eyebrow { display: inline-flex; line-height: 0; }
/* the stage: the headline as a solid that turns with the pointer (and sways on its own), and falls back on scroll */
.tt-feature__stage { flex: 1; min-height: 0; display: flex; align-items: center; perspective: 1100px; perspective-origin: 50% 50%; }
.tt-feature__scene { width: 100%; transform-style: preserve-3d; transform-origin: 50% 60%; transform: translate3d(calc(var(--tt-mx, 0) * -14px), calc(var(--tt-my, 0) * -10px + var(--tt-cover, 0) * -12vh), calc(var(--tt-cover, 0) * -500px)) rotateX(calc(var(--tt-cover, 0) * 28deg)); }
.tt-feature__title { position: relative; margin: 0; max-width: 100%; transform-style: preserve-3d; font-family: var(--font-display); font-weight: 900; font-size: var(--tt-feature-size); line-height: 0.9; letter-spacing: -0.04em; text-wrap: balance; overflow-wrap: anywhere; color: var(--tt-3d-face); text-shadow: 0 2px 28px rgba(0, 0, 0, 0.35); }
.tt-feature--on-light .tt-feature__title { text-shadow: none; }
.tt-feature__title:lang(ur) { font-family: var(--font-urdu); font-weight: 700; font-size: clamp(38px, 8.6vw, 140px); line-height: 1.28; letter-spacing: 0; }
.tt-w { display: inline; }
/* each line: a block of its own, so it can fly in on its own and lift away at its own speed (theme.js cuts them) */
.tt-line { display: block; position: relative; transform-style: preserve-3d; transform: translate3d(0, calc(var(--tt-cover, 0) * (-8vh - var(--tt-i, 0) * 7vh)), calc(var(--tt-i, 0) * 30px)); }
.tt-line__fly { display: block; position: relative; transform-style: preserve-3d; }
.tt-line__face { display: block; position: relative; white-space: nowrap; color: var(--tt-3d-face); }
.tt-feature__foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px 48px; opacity: calc(1 - var(--tt-cover, 0) * 1.6); }
.tt-feature__deck { margin: 0; max-width: 24em; font-family: var(--font-deck); font-size: clamp(21px, 2.1vw, 30px); line-height: 1.22; text-wrap: balance; }
.tt-feature__deck:lang(ur) { font-family: var(--font-urdu); font-size: clamp(18px, 1.7vw, 23px); line-height: 1.75; }
.tt-feature__who { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: end; }
.tt-feature__who .tt-feature__by { margin: 0; font-family: var(--font-ui); font-size: 17px; line-height: 22px; }
.tt-feature__who .tt-feature__by a { font-weight: 700; color: inherit; text-decoration: none; }
.tt-feature__who .tt-feature__when { margin: 0; display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-nav); font-weight: 600; font-size: 11px; line-height: 16px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tt-section-muted); }
.tt-feature__when-dot { display: inline-block; width: 5px; height: 5px; background: var(--tt-feature-colon); }
.tt-feature__who .tt-feature__by:lang(ur) { font-family: var(--font-urdu); }
.tt-feature__who .tt-feature__when:lang(ur) { font-family: var(--font-urdu); font-size: 14px; letter-spacing: 0; text-transform: none; }
.tt-feature__down { position: absolute; left: 50%; bottom: 26px; z-index: 2; width: 48px; height: 48px; margin-left: -24px; display: inline-flex; align-items: center; justify-content: center; color: inherit; opacity: calc(1 - var(--tt-cover, 0) * 3); animation: tt-nod 2.4s ease-in-out infinite; }
@keyframes tt-nod { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
/* the entrance, once the faces are in and the lines are built: the cubes, the label, the lines rising from the
   floor and standing up one after another, the deck, the byline, the arrow */
.tt-js .tt-feature:not(.is-ready) .tt-feature__content, .tt-js .tt-feature:not(.is-ready) .tt-feature__wall { opacity: 0; }
.tt-feature.is-ready .tt-feature__eyebrow { animation: tt-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 1.2s both; }
.tt-feature.is-ready .tt-line__fly { animation: tt-stand 1.2s cubic-bezier(0.18, 0.78, 0.2, 1) calc(0.62s + var(--tt-i, 0) * 0.12s) both; }
.tt-feature.is-ready .tt-feature__title.is-settled .tt-line__fly { animation: none; }
@keyframes tt-stand { 0% { visibility: hidden; transform: translate3d(0, 24vh, -1200px) rotateX(-58deg); } 0.1% { visibility: visible; } 100% { transform: translate3d(0, 0, 0) rotateX(0); } }
.tt-feature.is-ready .tt-feature__deck { animation: tt-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 1.25s both; }
.tt-feature.is-ready .tt-feature__who { animation: tt-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 1.4s both; }
.tt-feature.is-ready .tt-feature__down { animation: tt-rise 0.8s ease-out 1.9s both, tt-nod 2.4s ease-in-out 2.7s infinite; }
@keyframes tt-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
/* the sheet of paper that slides up over the cover */
.tt-feature__sheet { position: relative; z-index: 1; background: var(--tt-bg); box-shadow: 0 -30px 60px rgba(0, 0, 0, 0.28); }
.tt-feature__hero { margin: 0; }
.tt-feature__hero-img { display: block; width: 100%; height: min(78vh, 900px); object-fit: cover; background: var(--tt-panel); }
.tt-feature__credit { box-sizing: border-box; width: min(100%, 1040px); margin: 0 auto; padding: 12px var(--tt-margin-phone) 0; text-align: end; font-family: var(--font-ui); font-size: 13px; line-height: 18px; color: var(--tt-text-secondary); }
/* the fixed corner pieces */
.tt-site-header.tt-header--feature { position: fixed; top: 0; left: 0; right: 0; height: 0; background: none; transform: none; will-change: auto; z-index: 60; overflow: visible; }
.tt-site-header.tt-header--feature::before { display: none; }
.tt-fhead { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none; }
.tt-fhead > * { pointer-events: auto; }
.tt-fhead__mark, .tt-fhead__tool { box-shadow: inset 0 0 0 1.5px var(--tt-section-muted, rgba(255, 255, 255, 0.5)); }
.tt-fhead__mark { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; background: var(--tt-section, var(--tt-orange)); color: var(--tt-section-text, var(--tt-paper)); }
.tt-fhead__mark .tt-logo { transition: transform 240ms var(--tt-header-ease, ease); }
.tt-fhead__mark:hover .tt-logo { transform: scale(1.08); }
.tt-fhead__title { position: absolute; left: 50%; top: 0; max-width: min(56vw, 720px); height: 64px; box-sizing: border-box; padding: 0 24px; display: flex; align-items: center; transform: translate(-50%, calc((1 - var(--tt-cover, 0)) * -100%)); opacity: var(--tt-cover, 0); background: var(--tt-section, var(--tt-orange)); color: var(--tt-section-text, var(--tt-paper)); font-family: var(--font-display); font-weight: 900; font-size: 17px; line-height: 22px; letter-spacing: -0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; pointer-events: none; }
.tt-fhead__title:lang(ur) { font-family: var(--font-urdu); font-weight: 700; letter-spacing: 0; }
.tt-fhead__tools { display: flex; }
.tt-fhead__tool { width: 64px; height: 64px; margin: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 0; background: var(--tt-section, var(--tt-orange)); color: var(--tt-section-text, var(--tt-paper)); cursor: pointer; transition: background 160ms, color 160ms; }
.tt-fhead__tool:hover, .tt-fhead__tool:focus-visible, .tt-fhead__tool[aria-expanded="true"] { background: var(--tt-section-text, var(--tt-paper)); color: var(--tt-section, var(--tt-orange)); outline: none; }
.tt-js .tt-header--feature .tt-fhead__mark { animation: tt-corner-l 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s both; }
.tt-js .tt-header--feature .tt-fhead__tools { animation: tt-corner-r 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s both; }
@keyframes tt-corner-l { from { transform: translate(-100%, -100%); } to { transform: translate(0, 0); } }
@keyframes tt-corner-r { from { transform: translate(100%, -100%); } to { transform: translate(0, 0); } }
.tt-header--feature .tt-menu { position: absolute; top: 64px; left: 0; right: 0; max-height: calc(100vh - 64px); overflow: auto; box-shadow: 0 24px 48px rgba(0, 0, 0, 0.12); }
.tt-feature__progress { position: fixed; left: 0; top: 0; bottom: 0; width: 5px; background: var(--tt-orange); transform: scaleY(0); transform-origin: top; z-index: 61; }
[dir="rtl"] .tt-feature__progress { left: auto; right: 0; }
/* the column head: the tools, then the colon */
.tt-feature__meta { box-sizing: border-box; width: min(100%, 680px); margin: 0 auto; padding: 56px var(--tt-margin-phone) 0; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.tt-feature__meta .tt-hero__tools { justify-content: center; }
.tt-feature__meta .tt-hero__actions, .tt-feature__meta .tt-hero__sheet { justify-content: center; }
.tt-feature__meta .tt-tool { border-color: var(--tt-border); color: var(--tt-text); }
.tt-feature__meta .tt-tool:hover, .tt-feature__meta .tt-tool:focus-visible, .tt-feature__meta .tt-tool[aria-expanded="true"] { background: var(--tt-text); color: var(--tt-bg); border-color: var(--tt-text); }
.tt-feature__meta .tt-hero__switch .tt-switch__option { color: var(--tt-text); }
.tt-feature__meta .tt-hero__switch .tt-switch__option.is-active { background: var(--tt-text); color: var(--tt-bg); }
.tt-feature__meta .tt-hero__switch .tt-switch__option:not(.is-active) { box-shadow: inset 0 0 0 1.5px var(--tt-border); }
.tt-feature__meta .tt-hero__sheet-link { border-color: var(--tt-text); color: var(--tt-text); }
.tt-feature__colon { display: grid; gap: 8px; width: 8px; margin: 34px auto 0; }
.tt-feature__colon i { display: block; width: 8px; height: 8px; background: var(--tt-orange); }
/* the column */
.tt-feature__body, .tt-feature__after { box-sizing: border-box; width: min(100%, 680px); margin: 0 auto; padding: 0 var(--tt-margin-phone); }
.tt-feature__body { margin-top: 44px; gap: 36px; }
.tt-feature__after { margin-top: 64px; padding-bottom: var(--tt-space-8); }
.tt-feature .tt-article__body > p, .tt-feature .tt-article__body li { font-size: 20px; line-height: 34px; }
.tt-feature[lang="ur"] .tt-article__body > p, .tt-feature[lang="ur"] .tt-article__body li { font-size: 19px; line-height: 40px; }
.tt-feature .tt-article__body > p:first-of-type::first-letter { float: left; float: inline-start; box-sizing: border-box; font-family: var(--font-display); font-weight: 900; font-size: 80px; line-height: 1; padding: 22px 22px 16px; margin: 6px 24px 6px 0; border: 2px solid var(--tt-section-accent, var(--tt-text)); color: var(--tt-text); letter-spacing: 0; }
[dir="rtl"] .tt-feature .tt-article__body > p:first-of-type::first-letter { margin: 6px 0 6px 24px; }
.tt-feature[lang="ur"] .tt-article__body > p:first-of-type::first-letter, .tt-feature .tt-article__body > p[lang="ur"]:first-of-type::first-letter, .tt-feature .tt-article__body > p:first-of-type:dir(rtl)::first-letter { float: none; font: inherit; padding: 0; margin: 0; border: 0; color: inherit; }
.tt-feature .tt-article__body h2 { text-align: center; padding-top: var(--tt-space-3); font-family: var(--font-display); font-weight: 900; font-size: 34px; line-height: 36px; letter-spacing: -0.035em; }
.tt-feature .tt-article__body h2::before { margin-left: auto; margin-right: auto; }
.tt-feature[lang="ur"] .tt-article__body h2 { font-family: var(--font-urdu); font-weight: 700; letter-spacing: 0; }
.tt-feature .tt-article__body blockquote, .tt-feature .tt-article__body .wp-block-quote { margin: 16px 0; padding: 0; border: 0; text-align: center; }
.tt-feature .tt-article__body blockquote::before { content: ""; display: block; width: 8px; height: 24px; margin: 0 auto 22px; background: repeating-linear-gradient(to bottom, var(--tt-orange) 0 8px, transparent 8px 16px); }
.tt-feature .tt-article__body blockquote p, .tt-feature .tt-quote .tt-quote__text { margin: 0; padding: 0; border: 0; font-family: var(--font-display); font-weight: 900; font-size: 34px; line-height: 38px; letter-spacing: -0.035em; }
.tt-feature[lang="ur"] .tt-article__body blockquote p, .tt-feature[lang="ur"] .tt-quote .tt-quote__text { font-family: var(--font-urdu); font-weight: 700; font-size: 26px; line-height: 46px; letter-spacing: 0; }
.tt-feature .tt-article__body blockquote cite, .tt-feature .tt-quote__who { text-align: center; }
.tt-feature .tt-quote { display: flex; flex-direction: column; align-items: center; gap: 0; padding: var(--tt-space-4) 0; text-align: center; }
.tt-feature .tt-quote__colon { gap: 8px; padding: 0 0 22px; }
.tt-feature .tt-quote__colon i { width: 8px; height: 8px; background: var(--tt-orange); }
.tt-feature .tt-quote .tt-quote__text::before { display: none; }
.tt-feature .tt-article__body .alignwide { position: relative; left: 50%; width: min(calc(100vw - 2 * var(--tt-margin-phone)), 1040px); max-width: none; transform: translateX(-50%); }
.tt-feature .tt-article__body .alignfull { position: relative; left: 50%; width: 100vw; max-width: none; transform: translateX(-50%); }
.tt-feature .tt-article__body figcaption { text-align: center; }
.tt-feature .tt-author { border-top-width: var(--tt-rule-item-width); border-top-color: var(--tt-border); }
/* what rises into view as it arrives (only once the script is there to let it in) */
.tt-js .tt-feature .tt-reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
.tt-js .tt-feature .tt-reveal.is-in { opacity: 1; transform: none; }
.tt-js .tt-feature .tt-article__body .tt-reveal.alignwide, .tt-js .tt-feature .tt-article__body .tt-reveal.alignfull { transform: translate(-50%, 22px); }
.tt-js .tt-feature .tt-article__body .tt-reveal.alignwide.is-in, .tt-js .tt-feature .tt-article__body .tt-reveal.alignfull.is-in { transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) {
  .tt-feature *, .tt-feature *::before, .tt-feature *::after, .tt-header--feature * { animation: none !important; }
  .tt-js .tt-feature:not(.is-ready) .tt-feature__content, .tt-feature__content, .tt-feature__wall, .tt-feature__down { opacity: 1 !important; }
  .tt-line, .tt-line__fly, .tt-feature__down { transform: none !important; }
  .tt-feature__scene { transform: none !important; }
  .tt-feature__gl { display: none; }
  .tt-feature__wall-in { transform: none !important; }
  .tt-feature__pulse { display: none; }
  .tt-js .tt-feature .tt-reveal { opacity: 1; transform: none; transition: none; }
  .tt-js .tt-feature .tt-article__body .tt-reveal.alignwide, .tt-js .tt-feature .tt-article__body .tt-reveal.alignfull { transform: translate(-50%, 0); }
}
@media (max-width: 767px) {
  .tt-feature { --tt-feature-size: clamp(40px, 13.5vw, 64px); }
  .tt-feature--long { --tt-feature-size: clamp(34px, 11vw, 52px); }
  .tt-feature__card { padding: 84px var(--tt-margin-phone) 84px; }
  .tt-feature__stage { perspective: 800px; }
  .tt-feature__title { letter-spacing: -0.03em; }
  .tt-feature__title:lang(ur) { font-size: clamp(30px, 9vw, 44px); }
  .tt-feature__foot { grid-template-columns: 1fr; gap: 18px; }
  .tt-feature__deck { font-size: 19px; }
  .tt-feature__who { align-items: flex-start; text-align: start; }
  .tt-feature__pulse { width: 22px; gap: 13px; }
  .tt-feature__pulse i { width: 22px; height: 22px; }
  .tt-fhead__mark, .tt-fhead__tool { width: 56px; height: 56px; }
  .tt-fhead__title { display: none; }
  .tt-header--feature .tt-menu { top: 56px; }
  .tt-feature__progress { width: 4px; }
  .tt-feature__hero-img { height: 62vh; }
  .tt-feature__meta { padding-top: 40px; }
  .tt-feature .tt-article__body > p:first-of-type::first-letter { font-size: 58px; padding: 14px 15px 10px; margin: 5px 16px 4px 0; }
  .tt-feature .tt-article__body blockquote p, .tt-feature .tt-quote .tt-quote__text { font-size: 27px; line-height: 31px; }
  .tt-feature .tt-article__body h2 { font-size: 28px; line-height: 30px; }
}

@media print {
  .tt-site-header, .tt-menu, .tt-footer, .tt-hero__tools, .tt-article__aside, .tt-next, .tt-conversation, .tt-feature__down, .tt-feature__progress { display: none !important; }
  .tt-feature__card { min-height: 0; }
  body { color: #000; background: #fff; }
}

/* ------------------------------------------------------------ the contributors and archive pages */
.tt-archive__intro { max-width: 40em; margin-top: var(--tt-space-4); }
.tt-archive__search { max-width: 640px; margin-top: var(--tt-space-5); }
.tt-writers { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--tt-space-6) var(--tt-space-5); padding-top: var(--tt-space-6); }
.tt-writer { display: flex; gap: var(--tt-space-4); padding-top: var(--tt-space-4); border-top: var(--tt-rule-item-width) solid var(--tt-border); min-width: 0; }
.tt-writer__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tt-writer__latest { font-size: 15px; line-height: 22px; font-weight: 600; }
.tt-writer__latest a { text-decoration: none; }
.tt-archive__sections { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 0 var(--tt-space-5); }
.tt-archive__sections li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; border-top: var(--tt-rule-item-width) solid var(--tt-border); }
.tt-archive__sections a { font-family: var(--font-display); font-weight: 700; font-size: 17px; text-decoration: none; }
.tt-archive__sections a:lang(ur) { font-family: var(--font-urdu); }
.tt-archive__sections a:lang(en) { font-family: var(--font-display); letter-spacing: 0; }
.tt-months { display: flex; flex-direction: column; }
.tt-months__year { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; padding: 14px 0; border-top: var(--tt-rule-item-width) solid var(--tt-border); }
.tt-months__y { flex: 0 0 64px; }
.tt-months__grid { flex: 1 1 320px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; }
.tt-months__grid a, .tt-months__grid span { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 44px; font-size: 13px; line-height: 16px; font-weight: 600; text-decoration: none; background: var(--tt-panel); }
.tt-months__grid a small { font-weight: 400; color: var(--tt-text-secondary); font-size: 11px; }
.tt-months__grid span.is-empty { color: var(--tt-text-secondary); background: transparent; border: 1px solid var(--tt-border); opacity: .5; }
@media (max-width: 600px) { .tt-months__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* Urdu is set in IBM Plex Sans Arabic wherever it appears, including the pieces the identity sets in Chivo. */
[dir="rtl"] :is(.tt-strip__headline, .tt-story__headline, .tt-story__deck, .tt-button, .tt-related__headline, .tt-related__title, .tt-more, .tt-front-head, .tt-footer, .tt-pagination, .tt-section__title, .tt-top__latest, .tt-writer, .tt-months__y, .tt-share__label, .tt-switch__option--en), :is(.tt-header__link, .tt-menu__sections a, .tt-archive__sections a):lang(ur),
[lang="ur"] :is(.tt-strip__headline, .tt-story__headline, .tt-story__deck, .tt-related__headline, .tt-related__title, .tt-hero__title, .tt-hero__deck, .tt-byline, .tt-caption) { font-family: var(--font-urdu); letter-spacing: 0; }
.tt-header__link:lang(ur) { font-family: var(--font-urdu); font-size: 17px; letter-spacing: 0; text-transform: none; font-weight: 600; }
/* Urdu set on its own face from the start, not reached by falling past a Latin one: the Latin face is then never
   fetched for the spaces between Urdu words. The Urdu edition's link on the English front takes Plex's bold, the
   weight the page already carries. */
:is(.skip-link, .tt-more, .tt-related__headline, .tt-sofar__headline, .tt-read__headline, .tt-next__headline, .tt-story__headline, .tt-story__deck):lang(ur) { font-family: var(--font-urdu); letter-spacing: 0; }
.tt-more:lang(ur) { font-weight: 700; }
.tt-header__link:lang(en), .tt-menu__sections a:lang(en) { font-family: var(--font-nav); letter-spacing: 0.16em; text-transform: uppercase; }
.tt-header__link:lang(en) { font-size: 13px; font-weight: 500; }
.tt-menu__sections a:lang(en) { font-size: 15px; font-weight: 500; }
[dir="rtl"] .tt-strip__headline, [lang="ur"] .tt-strip__headline { line-height: 1.6; }

/* -------------------------------------------------------------------- advertising spaces (their look comes from the Ads plugin) */
.tt-ad { display: flex; flex-direction: column; align-items: center; gap: var(--tt-space-2); margin: 0; padding: var(--tt-space-6) 0; min-width: 0; }
.tt-ad__label { align-self: stretch; margin: 0; font-family: var(--font-nav); font-size: 10px; line-height: 16px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tt-text-secondary); text-align: center; }
[lang="ur"] .tt-ad__label, .tt-ad__label:lang(ur) { font-family: var(--font-urdu); letter-spacing: 0; font-size: 13px; text-transform: none; }
.tt-ad__body { width: 100%; display: flex; justify-content: center; }
.tt-ad__link { display: block; max-width: 100%; line-height: 0; }
.tt-ad__link img, .tt-ad__creative img { display: block; max-width: 100%; height: auto; }
.tt-ad__creative { max-width: 100%; line-height: 0; }
.tt-ad__creative iframe { max-width: 100%; border: 0; }
.tt-ad__empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 100%; max-width: 970px; min-height: 120px; border: 1.5px dashed var(--tt-border); color: var(--tt-text-secondary); font-family: var(--font-ui); font-size: 14px; line-height: 20px; text-align: center; padding: var(--tt-space-3); box-sizing: border-box; }
.tt-ad__sizes { font-size: 12px; opacity: .8; }
.tt-ad--kind-tower { padding: 0 0 var(--tt-space-6); align-items: flex-start; }
.tt-ad--kind-tower .tt-ad__label { text-align: start; }
.tt-ad--kind-tower .tt-ad__empty { max-width: 300px; min-height: 250px; }
.tt-ad--kind-inline { padding: var(--tt-space-2) 0; }
.tt-ad--kind-inline .tt-ad__empty { max-width: 728px; min-height: 90px; }
.tt-ad--kind-card { padding: 0; }
.tt-ad--kind-card .tt-ad__empty { aspect-ratio: 16 / 9; min-height: 0; }
.tt-ad--kind-list { padding-block: var(--tt-space-5); }
.tt-ad--article-end { padding-top: 0; padding-bottom: 0; }
@media print { .tt-ad { display: none !important; } }

/* -------------------------------------------------------------------- the front page, in order */
/* 1. the numbered top stories beside the lead */
.tt-toplist__heading { margin: 0; padding-bottom: var(--tt-space-3); border-bottom: var(--tt-rule-section-width) solid var(--tt-text); font-family: var(--font-nav); font-weight: 600; font-size: 13px; line-height: 20px; letter-spacing: 0.16em; text-transform: uppercase; }
.tt-toplist__items { list-style: none; margin: 0; padding: 0; }
.tt-toplist__item { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--tt-space-3); padding: var(--tt-space-4) 0; border-top: var(--tt-rule-item-width) solid var(--tt-border); }
.tt-toplist__item:first-child { border-top: 0; }
.tt-toplist__n { font-family: var(--font-display); font-weight: 900; font-size: 28px; line-height: 1; letter-spacing: -0.03em; color: var(--tt-text); padding-top: 2px; }
.tt-toplist__word { display: flex; align-items: center; gap: 7px; margin: 0 0 5px; font-family: var(--font-nav); font-size: 10px; line-height: 16px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tt-text-secondary); }
.tt-toplist__word:lang(ur) { font-family: var(--font-urdu); letter-spacing: 0; text-transform: none; font-size: 13px; }
.tt-toplist__headline { margin: 0; font-size: 19px; line-height: 24px; }
.tt-toplist__deck { margin: 6px 0 0; font-family: var(--font-deck); font-size: 18px; line-height: 23px; color: var(--tt-text-secondary); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.tt-toplist__deck:lang(ur), [lang="ur"] .tt-toplist__deck { font-family: var(--font-urdu); font-size: 15px; line-height: 28px; }
.tt-toplist__time { margin-top: 6px; }
.tt-top__latest { padding-bottom: var(--tt-space-6); }
/* 2. the featured row, under the lead */
.tt-featured__head { padding-top: var(--tt-space-3); margin-bottom: var(--tt-space-5); }
.tt-featured__heading { margin: 0; font-family: var(--font-nav); font-weight: 600; font-size: 13px; line-height: 20px; letter-spacing: 0.16em; text-transform: uppercase; }
[lang="ur"] .tt-featured__heading, [lang="ur"] .tt-toplist__heading { font-family: var(--font-urdu); letter-spacing: 0; text-transform: none; font-size: 17px; }
.tt-featured__cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--tt-space-6) var(--tt-space-5); }
.tt-featured .tt-story__headline { font-size: 22px; line-height: 26px; }
.tt-featured .tt-story__headline:lang(ur), [lang="ur"] .tt-featured .tt-story__headline { font-size: 19px; line-height: 32px; }
.tt-featured .tt-story__deck { margin-top: var(--tt-space-2); font-size: 18px; line-height: 23px; }
.tt-story__kicker { display: inline-flex; align-items: flex-start; gap: 8px; }
.tt-story__kicker .tt-swatch { width: 9px; height: 9px; }
/* 3. the opinion band: the writers, on the colour's gradient */
.tt-opinion { background: var(--tt-section, var(--tt-orange)); background-image: linear-gradient(100deg, var(--tt-section-deep, var(--tt-section)) 0%, var(--tt-section, var(--tt-orange)) 45%, var(--tt-section-light, var(--tt-section)) 100%); color: var(--tt-section-text, var(--tt-paper)); --tt-text: var(--tt-section-text, var(--tt-paper)); --tt-text-secondary: var(--tt-section-muted, rgba(255,255,255,.8)); --tt-border: var(--tt-section-muted, rgba(255,255,255,.45)); padding: var(--tt-space-7) 0 var(--tt-space-8); margin-top: var(--tt-space-7); }
.tt-opinion__head { display: flex; align-items: center; justify-content: space-between; gap: var(--tt-space-4); margin-bottom: var(--tt-space-6); }
.tt-opinion__head a { text-decoration: none; color: inherit; }
.tt-opinion__rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--tt-space-6); }
.tt-opinion__item { min-width: 0; padding-top: var(--tt-space-4); border-top: 2px solid var(--tt-section-text, var(--tt-paper)); }
.tt-opinion__who { display: flex; align-items: center; gap: var(--tt-space-3); margin-bottom: var(--tt-space-4); }
.tt-opinion__face { position: relative; flex: none; width: 44px; height: 44px; }
.tt-opinion__face .tt-square { width: 44px; height: 44px; font-size: 20px; }
.tt-opinion__avatar { position: absolute; inset: 0; width: 44px; height: 44px; object-fit: cover; }
.tt-opinion__name { margin: 0; font-family: var(--font-display); font-size: 15px; line-height: 19px; font-weight: 700; }
.tt-opinion__by { font-family: var(--font-nav); font-size: 10px; line-height: 14px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; opacity: .85; }
[lang="ur"] .tt-opinion__name { font-family: var(--font-urdu); }
[lang="ur"] .tt-opinion__by { font-family: var(--font-urdu); letter-spacing: 0; text-transform: none; font-size: 13px; }
.tt-opinion__headline { margin: 0; }
.tt-opinion__deck { margin: var(--tt-space-3) 0 0; font-family: var(--font-deck); font-size: 19px; line-height: 25px; max-width: 24em; }
.tt-opinion__deck:lang(ur), [lang="ur"] .tt-opinion__deck { font-family: var(--font-urdu); font-size: 16px; line-height: 30px; }
.tt-opinion .tt-story__link { background-image: linear-gradient(var(--tt-section-text, var(--tt-paper)), var(--tt-section-text, var(--tt-paper))); }
.tt-opinion .tt-story__link:hover, .tt-opinion .tt-story__link:focus-visible { color: var(--tt-section, var(--tt-orange)); }
.tt-opinion + .tt-section { padding-top: var(--tt-space-8); }
/* 4. the section blocks, with the wire and the most discussed beside them */
.tt-body-grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--tt-space-8); align-items: start; }
.tt-blocks { display: flex; flex-direction: column; gap: var(--tt-space-8); min-width: 0; }
.tt-block { border-top: 4px solid var(--tt-section-rule, var(--tt-text)); }
.tt-block__head { display: flex; align-items: center; justify-content: space-between; gap: var(--tt-space-4); margin-bottom: var(--tt-space-5); }
.tt-block__head a { text-decoration: none; color: inherit; }
/* the section's word in a tab of its colour, hanging from the rule */
.tt-block__tab { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px 0 10px; background: var(--tt-section); color: var(--tt-section-text); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); }
.tt-block__tab .tt-label { display: inline-flex; }
.tt-block__more { margin-top: 4px; }
.tt-block__deck { margin: 4px 0 0; font-family: var(--font-deck); font-size: 18px; line-height: 23px; color: var(--tt-text-secondary); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.tt-block__deck:lang(ur), [lang="ur"] .tt-block__deck { font-family: var(--font-urdu); font-size: 15px; line-height: 28px; }
.tt-block__grid { display: grid; grid-template-columns: 7fr 5fr; gap: var(--tt-space-7); align-items: start; }
.tt-block__grid--lead { grid-template-columns: 1fr; }
.tt-block__lead { min-width: 0; }
.tt-block__story .tt-story__deck { margin-top: var(--tt-space-3); max-width: 30em; }
.tt-block__list { display: flex; flex-direction: column; min-width: 0; }
.tt-block__item { display: grid; grid-template-columns: minmax(0, 1fr) 136px; gap: var(--tt-space-4); align-items: start; padding: var(--tt-space-4) 0; border-top: var(--tt-rule-item-width) solid var(--tt-border); }
.tt-block__item:first-child { border-top: 0; padding-top: 0; }
.tt-block__headline { margin: 0; }
.tt-block__time { margin-top: 4px; }
.tt-block__thumb { min-width: 0; }
.tt-block__thumb .tt-picture__credit { display: none; }
.tt-block__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tt-space-6) var(--tt-space-5); }
.tt-block__row .tt-story__deck { font-size: 18px; line-height: 23px; margin-top: var(--tt-space-2); }
/* the wire: the newest stories as they came in, on a line, each with its section's colour */
.tt-rail { display: flex; flex-direction: column; gap: var(--tt-space-7); min-width: 0; position: sticky; top: 76px; }
.tt-wire__heading, .tt-talk__heading, .tt-follow__heading { display: flex; align-items: center; gap: 10px; margin: 0; padding-bottom: var(--tt-space-3); border-bottom: var(--tt-rule-section-width) solid var(--tt-text); font-family: var(--font-nav); font-weight: 600; font-size: 13px; line-height: 20px; letter-spacing: 0.16em; text-transform: uppercase; }
[lang="ur"] .tt-wire__heading, [lang="ur"] .tt-talk__heading, [lang="ur"] .tt-follow__heading { font-family: var(--font-urdu); letter-spacing: 0; text-transform: none; font-size: 17px; }
.tt-wire__live { display: inline-grid; gap: 3px; }
.tt-wire__live i { display: block; width: 7px; height: 7px; background: var(--tt-orange); animation: tt-blink 1.6s steps(1, end) infinite; }
@keyframes tt-blink { 0% { opacity: 1; } 50% { opacity: .2; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tt-wire__live i { animation: none; } }
.tt-wire__items { list-style: none; margin: 0; padding: 0; position: relative; }
.tt-wire__items::before { content: ""; position: absolute; top: 12px; bottom: 12px; left: 54px; width: 2px; background: var(--tt-border); }
[dir="rtl"] .tt-wire__items::before { left: auto; right: 54px; }
.tt-wire__item { position: relative; display: grid; grid-template-columns: 44px 22px minmax(0, 1fr); align-items: start; gap: 0 var(--tt-space-2); padding: var(--tt-space-3) 0; }
.tt-wire__time { font-family: var(--font-display); font-weight: 700; font-size: 13px; line-height: 20px; color: var(--tt-text-secondary); font-variant-numeric: tabular-nums; }
.tt-wire__dot { display: block; width: 12px; height: 12px; margin: 4px 0 0 5px; background: var(--tt-section-rule, var(--tt-section)); box-shadow: 0 0 0 3px var(--tt-bg); }
.tt-wire__headline { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 22px; }
.tt-wire__headline:lang(ur), [lang="ur"] .tt-wire__headline { font-family: var(--font-urdu); font-size: 16px; line-height: 28px; }
.tt-wire__word { margin: 4px 0 0; font-family: var(--font-nav); font-size: 10px; line-height: 14px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tt-text-secondary); }
.tt-wire__word:lang(ur) { font-family: var(--font-urdu); letter-spacing: 0; text-transform: none; font-size: 13px; }
.tt-talk__items { list-style: none; margin: 0; padding: 0; }
.tt-talk__item { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--tt-space-4); padding: var(--tt-space-3) 0; border-top: var(--tt-rule-item-width) solid var(--tt-border); }
.tt-talk__item:first-child { border-top: 0; }
.tt-talk__headline { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 22px; }
.tt-talk__headline:lang(ur), [lang="ur"] .tt-talk__headline { font-family: var(--font-urdu); font-size: 16px; line-height: 28px; }
.tt-talk__count { display: inline-flex; align-items: center; gap: 4px; flex: none; min-height: 24px; padding: 0 8px; background: var(--tt-panel); font-family: var(--font-ui); font-size: 13px; font-weight: 700; text-decoration: none; }
/* follow: where the paper is, as a list in the rail and as chips in the phone menu; names in the paper's type, no logos */
.tt-follow__list { list-style: none; margin: 0; padding: 0; }
.tt-follow--list .tt-follow__item { display: flex; align-items: baseline; justify-content: space-between; gap: var(--tt-space-3); padding: 10px 0; border-top: var(--tt-rule-item-width) solid var(--tt-border); }
.tt-follow--list .tt-follow__item:first-child { border-top: 0; }
.tt-follow--list .tt-follow__link { font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 22px; text-decoration: none; }
.tt-follow--list .tt-follow__link:hover { color: var(--tt-orange); }
[lang="ur"] .tt-follow--list .tt-follow__link { font-family: var(--font-urdu); font-size: 16px; line-height: 28px; }
.tt-follow__handle { font-family: var(--font-ui); font-size: 14px; line-height: 20px; color: var(--tt-text-secondary); direction: ltr; unicode-bidi: isolate; overflow-wrap: anywhere; text-align: end; }
.tt-follow--chips .tt-follow__heading { margin-bottom: var(--tt-space-3); }
.tt-follow--chips .tt-follow__list { display: flex; flex-wrap: wrap; gap: 8px; }
.tt-follow--chips .tt-follow__link { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1.5px solid var(--tt-text); font-family: var(--font-nav); font-weight: 600; font-size: 11px; line-height: 16px; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; }
.tt-follow--chips .tt-follow__link:hover { background: var(--tt-text); color: var(--tt-bg); }
[lang="ur"] .tt-follow--chips .tt-follow__link { font-family: var(--font-urdu); letter-spacing: 0; text-transform: none; font-size: 14px; }
@media (max-width: 1000px) {
  .tt-top__grid { grid-template-columns: 1fr; }
  .tt-body-grid { grid-template-columns: 1fr; }
  .tt-rail { position: static; }
  .tt-block__grid { grid-template-columns: 1fr; gap: var(--tt-space-5); }
  .tt-block__row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
  .tt-opinion__rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .tt-featured__cards { gap: var(--tt-space-6); }
  .tt-opinion { padding: var(--tt-space-6) 0 var(--tt-space-7); }
  .tt-opinion .tt-wrap { padding-inline-end: 0; }
  .tt-opinion__head { padding-inline-end: var(--tt-margin-phone); }
  .tt-opinion__rail { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--tt-space-4); padding-inline-end: var(--tt-margin-phone); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .tt-opinion__rail::-webkit-scrollbar { display: none; }
  .tt-opinion__item { flex: 0 0 min(82%, 320px); scroll-snap-align: start; }
  .tt-block__item { grid-template-columns: minmax(0, 1fr) 104px; }
  .tt-block__deck { display: none; }
  .tt-block__row { gap: var(--tt-space-6); }
  .tt-toplist__item { grid-template-columns: 30px minmax(0, 1fr); }
  .tt-toplist__n { font-size: 24px; }
}

/* What other plugins put in a page or story (a careers form, a contact form, a sign-up, a button, a note, a toggle,
   and what the old page builder left): the theme's own fields and buttons. The selectors weigh no more than a bare
   element, so a plugin's or the theme's own classes still win and only what is otherwise unstyled is dressed. */
:where(.tt-body) form { display: flex; flex-direction: column; gap: var(--tt-space-4); max-width: 40em; }
:where(.tt-body) form p { margin: 0; }
:where(.tt-body) label { display: block; margin-bottom: 6px; font-family: var(--font-ui); font-size: 14px; line-height: 20px; font-weight: 700; }
:where(.tt-body) input:where(:not([type]), [type="text"], [type="email"], [type="url"], [type="tel"], [type="number"], [type="password"], [type="search"], [type="date"]), :where(.tt-body) select, :where(.tt-body) textarea { box-sizing: border-box; width: 100%; max-width: 100%; margin: 0; padding: 0 14px; height: 52px; border: 1.5px solid var(--tt-text); border-radius: var(--tt-radius); background-color: var(--tt-bg); color: var(--tt-text); font: 16px/24px var(--font-ui); }
:where(.tt-body) textarea { height: auto; min-height: 140px; padding: 12px 14px; resize: vertical; }
:where(.tt-body) select { appearance: none; -webkit-appearance: none; padding-inline-end: 40px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 22px) 23px, calc(100% - 16px) 23px; background-size: 6px 6px; background-repeat: no-repeat; }
[dir="rtl"] :where(.tt-body) select { padding-inline: 14px 40px; background-position: 16px 23px, 22px 23px; }
:where(.tt-body) input:where([type="file"]) { font: 15px/22px var(--font-ui); }
:where(.tt-body) input:where([type="checkbox"], [type="radio"]) { width: 18px; height: 18px; margin: 0 8px 0 0; accent-color: var(--tt-orange); vertical-align: -3px; }
:where(.tt-body) label:has(> input:where([type="checkbox"], [type="radio"])) { font-weight: 400; }
:where(.tt-body) :where(input, select, textarea, button):focus-visible { outline: var(--tt-focus-width) solid var(--tt-focus); outline-offset: var(--tt-focus-offset); }
:where(.tt-body) button, :where(.tt-body) input:where([type="submit"], [type="button"]), :where(.tt-body) a.wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border: 0; border-radius: var(--tt-radius); background: var(--tt-text); color: var(--tt-bg); font: 700 15px/1.2 var(--font-ui); letter-spacing: 0.02em; text-decoration: none; cursor: pointer; transition: background var(--tt-move-fast) var(--tt-ease); }
:where(.tt-body) button:hover, :where(.tt-body) input:where([type="submit"], [type="button"]):hover, :where(.tt-body) a.wp-block-button__link:hover { background: var(--tt-orange); color: #ffffff; }
:where(.tt-body) button:disabled, :where(.tt-body) input:where([type="submit"]):disabled { opacity: 0.45; cursor: default; }
:where(.tt-body) details { padding: var(--tt-space-3) 0; border-top: var(--tt-rule-item-width) solid var(--tt-border); border-bottom: var(--tt-rule-item-width) solid var(--tt-border); }
:where(.tt-body) summary { cursor: pointer; font-family: var(--font-display); font-size: 18px; line-height: 26px; font-weight: 700; }
:where(.tt-body) details[open] summary { margin-bottom: var(--tt-space-3); }
:where(.tt-body) :where(.wpcf7-not-valid-tip, .wpforms-error, .gfield_validation_message, .invalid-feedback) { display: block; margin-top: 6px; color: #b3261e; font-size: 14px; line-height: 20px; }
:where(.tt-body) :where(.wpcf7-response-output, .wpforms-confirmation-container, .gform_confirmation_message) { padding: var(--tt-space-3) var(--tt-space-4); border-inline-start: 4px solid var(--tt-orange); background: var(--tt-panel); }
.tt-note { padding: var(--tt-space-4) var(--tt-space-5); border-inline-start: 4px solid var(--tt-section-accent, var(--tt-orange)); background: var(--tt-panel); }
.tt-note > :first-child { margin-top: 0; }
.tt-note > :last-child { margin-bottom: 0; }

/* The consent question: a black bar at the foot of the screen with the paper's orange along its top edge. */
.tt-consent { position: fixed; inset-inline: 0; bottom: 0; z-index: 1000; background: #000000; color: #ffffff; border-top: 4px solid var(--tt-orange); box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18); }
.tt-consent[hidden] { display: none; }
.tt-consent__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tt-space-3) var(--tt-space-6); padding-block: var(--tt-space-4); }
.tt-consent__text { flex: 1 1 420px; margin: 0; font-family: var(--font-pop); font-size: 15px; line-height: 22px; }
.tt-consent__text a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.tt-consent[lang="ur"] .tt-consent__text { font-family: var(--font-urdu); font-size: 15px; line-height: 28px; }
.tt-consent__choices { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: var(--tt-space-2) var(--tt-space-6); font-family: var(--font-pop); font-size: 14px; line-height: 20px; }
.tt-consent__choices[hidden] { display: none; }
.tt-consent__choices label { display: inline-flex; align-items: center; gap: 8px; }
.tt-consent__choices input { width: 18px; height: 18px; margin: 0; accent-color: var(--tt-orange); }
.tt-consent__buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.tt-consent__btn { min-height: 44px; min-width: 88px; padding: 0 20px; border: 1.5px solid #ffffff; border-radius: var(--tt-radius); background: transparent; color: #ffffff; font-family: var(--font-pop); font-size: 15px; font-weight: 700; cursor: pointer; }
.tt-consent__btn--yes { background: #ffffff; color: #000000; }
.tt-consent__btn:hover { border-color: var(--tt-orange); background: var(--tt-orange); color: #ffffff; }
.tt-consent__btn[hidden] { display: none; }
.tt-consent__more { padding: 0 4px; border: 0; background: none; color: #ffffff; font-family: var(--font-pop); font-size: 15px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.tt-consent :focus-visible { outline: var(--tt-focus-width) solid var(--tt-orange); outline-offset: var(--tt-focus-offset); }
[lang="ur"] .tt-consent__btn, [lang="ur"] .tt-consent__more, [lang="ur"] .tt-consent__choices { font-family: var(--font-urdu); }
@media (max-width: 699px) { .tt-consent__inner { padding-block: var(--tt-space-3); } .tt-consent__text { flex-basis: 100%; font-size: 14px; line-height: 20px; } .tt-consent__btn { flex: 1 1 0; } }
.tt-footer__linkbutton { display: inline-flex; align-items: center; min-height: 36px; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-family: var(--font-ui); font-size: 16px; line-height: 22px; font-weight: 500; letter-spacing: 0; text-align: start; cursor: pointer; }
.tt-footer__linkbutton:lang(ur) { font-family: var(--font-urdu); }
.tt-footer__linkbutton:hover { text-decoration: underline; }

/* Most read: a departures board. Black, the numbers in the paper's orange, each story under its section's word. */
.tt-read { background: var(--tt-ink); color: var(--tt-paper); padding: var(--tt-space-4) var(--tt-space-4) var(--tt-space-2); box-shadow: inset 0 4px 0 var(--tt-orange); }
html[data-theme="dark"] .tt-read { box-shadow: inset 0 4px 0 var(--tt-orange), inset 0 0 0 1px var(--tt-border); }
@media (prefers-color-scheme: dark) { html.tt-dark-auto:not([data-theme="light"]) .tt-read { box-shadow: inset 0 4px 0 var(--tt-orange), inset 0 0 0 1px var(--tt-border); } }
.tt-read__heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: var(--tt-space-1) 0 0; padding-bottom: var(--tt-space-3); border-bottom: 1px solid rgba(255, 255, 255, 0.22); font-family: var(--font-nav); font-weight: 600; font-size: 13px; line-height: 20px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tt-paper); }
.tt-read__heading::after { content: ""; flex: none; width: 8px; height: 8px; background: var(--tt-orange); }
[lang="ur"] .tt-read__heading, .tt-read__heading:lang(ur) { font-family: var(--font-urdu); letter-spacing: 0; text-transform: none; font-size: 17px; }
.tt-read__items { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.tt-read__item { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: var(--tt-space-3); padding: var(--tt-space-3) 0; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.tt-read__item:first-child { border-top: 0; }
.tt-read__n { font-family: var(--font-display); font-weight: 900; font-size: 34px; line-height: 0.9; letter-spacing: -0.04em; color: var(--tt-orange); font-variant-numeric: tabular-nums; padding-top: 3px; }
.tt-read__word { display: flex; align-items: center; gap: 7px; margin: 0 0 4px; font-family: var(--font-nav); font-size: 10px; line-height: 14px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #a8a8a8; }
.tt-read__word:lang(ur) { font-family: var(--font-urdu); letter-spacing: 0; text-transform: none; font-size: 13px; }
.tt-read__word .tt-swatch { width: 8px; height: 8px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4); }
.tt-read__headline { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 22px; color: var(--tt-paper); }
.tt-read__headline:lang(ur) { font-family: var(--font-urdu); font-size: 16px; line-height: 28px; }
.tt-read__headline a { color: inherit; }
.tt-read--aside .tt-read__headline { font-size: 16px; line-height: 21px; }

/* Running stories. The marker: an orange square, blinking while the story runs. */
.tt-partof__dot { display: inline-block; flex: none; width: 8px; height: 8px; background: var(--tt-orange); }
.tt-partof__dot.is-running { animation: tt-blink 1.6s steps(1, end) infinite; }
@media (prefers-reduced-motion: reduce) { .tt-partof__dot.is-running { animation: none; } }
/* Under the headline: the running story it belongs to, on a black chip. */
.tt-partof { display: inline-flex; align-items: center; gap: 9px; max-width: 100%; min-height: 40px; margin-top: var(--tt-space-4); padding: 6px 12px; background: var(--tt-ink); color: var(--tt-paper); text-decoration: none; box-shadow: inset 0 -3px 0 var(--tt-orange); }
.tt-partof__kind { flex: none; font-family: var(--font-nav); font-size: 10px; line-height: 14px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #bdbdbd; }
.tt-partof__kind:lang(ur), [lang="ur"] .tt-partof__kind { font-family: var(--font-urdu); letter-spacing: 0; text-transform: none; font-size: 13px; }
.tt-partof__name { min-width: 0; font-family: var(--font-display); font-weight: 700; font-size: 15px; line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-partof__name:lang(ur) { font-family: var(--font-urdu); font-size: 15px; }
.tt-partof .tt-icon { flex: none; stroke: currentColor; }
.tt-partof:hover, .tt-partof:focus-visible { background: var(--tt-orange); color: var(--tt-ink); box-shadow: none; }
.tt-partof:hover .tt-partof__kind, .tt-partof:focus-visible .tt-partof__kind { color: var(--tt-ink); }
.tt-partof:hover .tt-partof__dot { background: var(--tt-ink); }

/* After the story: the story so far, on black. */
.tt-sofar { margin-top: var(--tt-space-7); padding: var(--tt-space-5); background: var(--tt-ink); color: var(--tt-paper); box-shadow: inset 0 4px 0 var(--tt-orange); }
.tt-sofar__kind { display: flex; align-items: center; gap: 9px; margin: var(--tt-space-1) 0 var(--tt-space-2); font-family: var(--font-nav); font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #bdbdbd; }
[lang="ur"] .tt-sofar__kind { font-family: var(--font-urdu); letter-spacing: 0; text-transform: none; font-size: 14px; }
.tt-sofar__name { margin: 0 0 var(--tt-space-4); font-family: var(--font-display); font-weight: 900; font-size: 30px; line-height: 1.05; letter-spacing: -0.01em; }
[lang="ur"] .tt-sofar__name { font-family: var(--font-urdu); font-weight: 700; font-size: 26px; line-height: 1.5; letter-spacing: 0; }
.tt-sofar__name a { color: inherit; text-decoration: none; }
.tt-sofar__name a:hover { color: var(--tt-orange); }
.tt-sofar__items { list-style: none; margin: 0; padding: 0; }
.tt-sofar__item { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--tt-space-3); padding: var(--tt-space-3) 0; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.tt-sofar__when { font-family: var(--font-nav); font-size: 11px; line-height: 22px; font-weight: 600; letter-spacing: 0.06em; color: #a8a8a8; }
[lang="ur"] .tt-sofar__when { font-family: var(--font-urdu); letter-spacing: 0; font-size: 13px; }
.tt-sofar__headline { font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 22px; color: var(--tt-paper); text-decoration: none; background-image: linear-gradient(var(--tt-orange), var(--tt-orange)); background-repeat: no-repeat; background-size: 0% 100%; background-position: left center; box-decoration-break: clone; -webkit-box-decoration-break: clone; transition: background-size 320ms cubic-bezier(0.2, 0.7, 0.2, 1); }
[dir="rtl"] .tt-sofar__headline { background-position: right center; }
.tt-sofar__headline:lang(ur) { font-family: var(--font-urdu); font-size: 16px; line-height: 28px; }
.tt-sofar__headline:hover, .tt-sofar__headline:focus-visible { background-size: 100% 100%; }
.tt-sofar__foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--tt-space-4) var(--tt-space-6); margin-top: var(--tt-space-3); padding-top: var(--tt-space-4); border-top: 1px solid rgba(255, 255, 255, 0.16); }
.tt-sofar__all { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-family: var(--font-ui); font-size: 16px; font-weight: 700; color: var(--tt-paper); text-decoration: none; }
.tt-sofar__all:hover { color: var(--tt-orange); }
.tt-sofar__all .tt-icon { stroke: currentColor; }
[lang="ur"] .tt-sofar__all { font-family: var(--font-urdu); }
@media (max-width: 600px) { .tt-sofar { padding: var(--tt-space-4); } .tt-sofar__item { grid-template-columns: 1fr; gap: 2px; } .tt-sofar__name { font-size: 25px; } }

/* Following a running story: the plugins' ways (email, alerts) and the feed, on black. */
.tt-follow-story__label { margin: 0 0 var(--tt-space-2); font-family: var(--font-nav); font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #bdbdbd; }
[lang="ur"] .tt-follow-story__label, .tt-follow-story__label:lang(ur) { font-family: var(--font-urdu); letter-spacing: 0; text-transform: none; font-size: 14px; }
.tt-follow-story__ways { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--tt-space-2); }
.tt-follow-story__way { display: flex; }
.tt-follow-story__way form { display: flex; flex-wrap: wrap; gap: 0; margin: 0; }
.tt-follow-story__button, .tt-follow-story__feed { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 0; font-family: var(--font-ui); font-size: 16px; line-height: 1; font-weight: 700; text-decoration: none; cursor: pointer; }
.tt-follow-story__button { background: var(--tt-orange); color: var(--tt-ink); }
.tt-follow-story__button:hover, .tt-follow-story__button:focus-visible { background: var(--tt-paper); color: var(--tt-ink); }
.tt-follow-story__button[aria-pressed="true"] { background: var(--tt-paper); }
.tt-follow-story__button .tt-icon { stroke: currentColor; }
.tt-follow-story__feed { background: transparent; color: var(--tt-paper); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5); }
.tt-follow-story__feed:hover, .tt-follow-story__feed:focus-visible { box-shadow: inset 0 0 0 2px var(--tt-paper); }
.tt-follow-story__input { min-height: 44px; width: 15em; max-width: 60vw; padding: 0 12px; border: 0; border-radius: 0; background: var(--tt-paper); color: var(--tt-ink); font-family: var(--font-ui); font-size: 16px; }
.tt-follow-story__input:focus { outline: 3px solid var(--tt-orange); outline-offset: 0; }
.tt-follow-story__note { flex-basis: 100%; margin: 6px 0 0; font-family: var(--font-ui); font-size: 15px; color: #d6d6d6; }
.tt-follow-story__note:empty { display: none; }
[lang="ur"] .tt-follow-story__button, [lang="ur"] .tt-follow-story__feed, [lang="ur"] .tt-follow-story__note { font-family: var(--font-urdu); }

/* The front page's band: what is running now, like a departures board. */
.tt-running { background: var(--tt-ink); color: var(--tt-paper); border-top: 1px solid #222; }
.tt-running__inner { display: flex; align-items: stretch; gap: 0; min-height: 52px; }
.tt-running__label { display: flex; align-items: center; gap: 9px; flex: none; margin: 0; padding-inline-end: var(--tt-space-4); font-family: var(--font-nav); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tt-orange); }
[lang="ur"] .tt-running__label { font-family: var(--font-urdu); letter-spacing: 0; text-transform: none; font-size: 14px; }
.tt-running__items { display: flex; flex: 1; min-width: 0; list-style: none; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; }
.tt-running__items::-webkit-scrollbar { display: none; }
.tt-running__items li { flex: none; display: flex; }
.tt-running__item { display: flex; align-items: center; gap: 10px; padding: 0 var(--tt-space-4); border-inline-start: 1px solid rgba(255, 255, 255, 0.18); color: var(--tt-paper); text-decoration: none; white-space: nowrap; }
.tt-running__name { font-family: var(--font-display); font-weight: 700; font-size: 15px; }
[lang="ur"] .tt-running__name { font-family: var(--font-urdu); font-size: 15px; }
.tt-running__when { font-family: var(--font-nav); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; color: #9a9a9a; }
[lang="ur"] .tt-running__when { font-family: var(--font-urdu); letter-spacing: 0; font-size: 12px; }
.tt-running__item:hover, .tt-running__item:focus-visible { background: var(--tt-orange); color: var(--tt-ink); }
.tt-running__item:hover .tt-running__when { color: var(--tt-ink); }
.tt-running__all { display: flex; align-items: center; flex: none; padding-inline-start: var(--tt-space-4); border-inline-start: 1px solid rgba(255, 255, 255, 0.18); font-family: var(--font-ui); font-size: 15px; font-weight: 700; color: var(--tt-paper); text-decoration: none; }
.tt-running__all:hover { color: var(--tt-orange); }
@media (max-width: 700px) { .tt-running__all { display: none; } .tt-running__label { padding-inline-end: var(--tt-space-3); } }

/* A running story's head: the name large on black. */
.tt-hub-head { background: var(--tt-ink); color: var(--tt-paper); padding: var(--tt-space-7) 0 var(--tt-space-6); box-shadow: inset 0 4px 0 var(--tt-orange); }
.tt-hub-head__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--tt-space-6); align-items: end; }
.tt-hub-head--picture .tt-hub-head__grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.tt-hub-head__kind { display: flex; align-items: center; gap: 10px; margin: 0 0 var(--tt-space-3); font-family: var(--font-nav); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tt-orange); }
.tt-hub-head__kind .tt-partof__dot { width: 10px; height: 10px; }
[lang="ur"] .tt-hub-head__kind { font-family: var(--font-urdu); letter-spacing: 0; text-transform: none; font-size: 15px; }
.tt-hub-head__name { margin: 0; max-width: 16ch; font-family: var(--font-display); font-weight: 900; font-size: clamp(42px, 6.4vw, 92px); line-height: 0.95; letter-spacing: -0.025em; }
.tt-hub-head__name:lang(ur), [lang="ur"] .tt-hub-head__name { max-width: none; font-family: var(--font-urdu); font-weight: 700; font-size: clamp(34px, 4.6vw, 64px); line-height: 1.45; letter-spacing: 0; }
.tt-hub-head__line { max-width: 34em; margin: var(--tt-space-4) 0 0; font-family: var(--font-deck); font-size: 24px; line-height: 1.3; color: #d6d6d6; }
.tt-hub-head__line:lang(ur), [lang="ur"] .tt-hub-head__line { font-family: var(--font-urdu); font-size: 19px; line-height: 1.8; }
.tt-hub-head__facts { margin: var(--tt-space-4) 0 0; color: #a8a8a8; }
.tt-hub-head .tt-follow-story { margin-top: var(--tt-space-5); }
.tt-hub-head__over { margin: var(--tt-space-5) 0 0; font-family: var(--font-ui); font-size: 16px; color: #bdbdbd; }
.tt-hub-head__picture { margin: 0; box-shadow: 8px 8px 0 var(--tt-orange); }
[dir="rtl"] .tt-hub-head__picture { box-shadow: -8px 8px 0 var(--tt-orange); }
.tt-hub-head__picture img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; filter: grayscale(1) contrast(1.05); }
@media (max-width: 800px) { .tt-hub-head { padding: var(--tt-space-6) 0 var(--tt-space-5); } .tt-hub-head--picture .tt-hub-head__grid { grid-template-columns: 1fr; } .tt-hub-head__picture { order: -1; } .tt-hub-head__line { font-size: 20px; } }

/* Its stories: the newest large, the rest on a line by day; the key moments beside. */
.tt-hub { padding-block: var(--tt-space-6) var(--tt-space-8); }
.tt-hub__grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--tt-space-7); align-items: start; }
.tt-hub__grid--single { grid-template-columns: minmax(0, 860px); }
.tt-hub__lead { padding-bottom: var(--tt-space-5); }
.tt-hub__day { margin: var(--tt-space-5) 0 0; padding-bottom: var(--tt-space-3); border-bottom: var(--tt-rule-section-width) solid var(--tt-text); font-family: var(--font-nav); font-weight: 600; font-size: 13px; line-height: 20px; letter-spacing: 0.16em; text-transform: uppercase; }
[lang="ur"] .tt-hub__day { font-family: var(--font-urdu); letter-spacing: 0; text-transform: none; font-size: 17px; }
.tt-hub__items { list-style: none; margin: 0; padding: 0; position: relative; }
.tt-hub__items::before { content: ""; position: absolute; top: 18px; bottom: 18px; left: 76px; width: 2px; background: var(--tt-border); }
[dir="rtl"] .tt-hub__items::before { left: auto; right: 76px; }
.tt-hub__item { position: relative; display: grid; grid-template-columns: 58px 26px minmax(0, 1fr) 132px; gap: 0 var(--tt-space-3); align-items: start; padding: var(--tt-space-4) 0; border-top: 1px solid var(--tt-border); }
.tt-hub__item:first-child { border-top: 0; }
.tt-hub__item:not(:has(.tt-hub__picture)) { grid-template-columns: 58px 26px minmax(0, 1fr); }
.tt-hub__time { font-family: var(--font-display); font-weight: 700; font-size: 14px; line-height: 22px; color: var(--tt-text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tt-hub__dot { display: block; width: 12px; height: 12px; margin: 5px 0 0 7px; background: var(--tt-section-rule, var(--tt-section)); box-shadow: 0 0 0 3px var(--tt-bg); }
[dir="rtl"] .tt-hub__dot { margin: 5px 7px 0 0; }
.tt-hub__word { margin: 0 0 4px; font-family: var(--font-nav); font-size: 10px; line-height: 14px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tt-text-secondary); }
.tt-hub__word:lang(ur) { font-family: var(--font-urdu); letter-spacing: 0; text-transform: none; font-size: 13px; }
.tt-hub__headline { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 21px; line-height: 27px; }
.tt-hub__headline:lang(ur) { font-family: var(--font-urdu); font-size: 19px; line-height: 1.7; }
.tt-hub__deck { margin: 6px 0 0; font-family: var(--font-deck); font-size: 19px; line-height: 24px; color: var(--tt-text-secondary); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.tt-hub__deck:lang(ur) { font-family: var(--font-urdu); font-size: 15px; line-height: 28px; }
.tt-hub__picture { display: block; }
.tt-hub__picture img { display: block; width: 100%; height: auto; }
.tt-hub__empty { font-family: var(--font-ui); font-size: 18px; color: var(--tt-text-secondary); }
.tt-hub__aside { position: sticky; top: 76px; }
.tt-moments__heading { margin: 0; padding-bottom: var(--tt-space-3); border-bottom: var(--tt-rule-section-width) solid var(--tt-text); font-family: var(--font-nav); font-weight: 600; font-size: 13px; line-height: 20px; letter-spacing: 0.16em; text-transform: uppercase; }
[lang="ur"] .tt-moments__heading { font-family: var(--font-urdu); letter-spacing: 0; text-transform: none; font-size: 17px; }
.tt-moments__items { list-style: none; margin: var(--tt-space-3) 0 0; padding: 0; }
.tt-moments__item { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 0 0 var(--tt-space-4) 22px; border-left: 2px solid var(--tt-border); margin-left: 4px; }
.tt-moments__item:last-child { padding-bottom: 0; }
.tt-moments__item::before { content: ""; position: absolute; left: -6px; top: 3px; width: 10px; height: 10px; background: var(--tt-text); }
.tt-moments__item:last-child::before { background: var(--tt-orange); }
[dir="rtl"] .tt-moments__item { padding: 0 22px var(--tt-space-4) 0; border-left: 0; border-right: 2px solid var(--tt-border); margin-left: 0; margin-right: 4px; }
[dir="rtl"] .tt-moments__item::before { left: auto; right: -6px; }
.tt-moments__date { font-family: var(--font-nav); font-size: 11px; line-height: 16px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tt-text-secondary); }
[lang="ur"] .tt-moments__date { font-family: var(--font-urdu); letter-spacing: 0; text-transform: none; font-size: 13px; }
.tt-moments__text { font-family: var(--font-text); font-size: 17px; line-height: 24px; }
.tt-moments__text:lang(ur) { font-family: var(--font-urdu); font-size: 16px; line-height: 1.8; }
.tt-moments__text a { color: inherit; text-decoration-color: var(--tt-orange); text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
@media (max-width: 960px) { .tt-hub__grid { grid-template-columns: 1fr; } .tt-hub__aside { position: static; order: -1; } }
@media (max-width: 600px) {
  .tt-hub__item, .tt-hub__item:not(:has(.tt-hub__picture)) { grid-template-columns: 54px 20px minmax(0, 1fr); gap: 0 10px; }
  .tt-hub__time { font-size: 12px; }
  .tt-hub__items::before { left: 69px; } [dir="rtl"] .tt-hub__items::before { right: 69px; left: auto; }
  .tt-hub__dot { margin-left: 4px; } [dir="rtl"] .tt-hub__dot { margin: 5px 4px 0 0; }
  .tt-hub__picture { display: none; }
  .tt-hub__headline { font-size: 19px; line-height: 24px; }
}

/* The index of running stories. */
.tt-hubs { list-style: none; margin: var(--tt-space-4) 0 var(--tt-space-6); padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--tt-space-5); }
.tt-hubs__link { box-sizing: border-box; display: flex; flex-direction: column; gap: var(--tt-space-2); height: 100%; padding: var(--tt-space-5); background: var(--tt-panel); color: var(--tt-text); text-decoration: none; box-shadow: inset 0 4px 0 var(--tt-orange); }
.tt-hubs__link:hover, .tt-hubs__link:focus-visible { background: var(--tt-ink); color: var(--tt-paper); }
.tt-hubs__name { font-family: var(--font-display); font-weight: 900; font-size: 30px; line-height: 1.02; letter-spacing: -0.01em; }
[lang="ur"] .tt-hubs__name { font-family: var(--font-urdu); font-weight: 700; font-size: 26px; line-height: 1.5; letter-spacing: 0; }
.tt-hubs__line { font-family: var(--font-deck); font-size: 19px; line-height: 1.3; color: var(--tt-text-secondary); }
.tt-hubs__latest { font-family: var(--font-ui); font-size: 16px; line-height: 1.35; }
.tt-hubs__facts { margin-top: auto; padding-top: var(--tt-space-2); font-family: var(--font-nav); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; color: var(--tt-text-secondary); }
.tt-hubs__link:hover .tt-hubs__line, .tt-hubs__link:hover .tt-hubs__facts { color: #bdbdbd; }
[lang="ur"] :is(.tt-hubs__line, .tt-hubs__latest, .tt-hubs__facts) { font-family: var(--font-urdu); letter-spacing: 0; }
[dir="rtl"] .tt-moments__item[dir="ltr"] { padding: 0 0 var(--tt-space-4) 22px; border-right: 0; border-left: 2px solid var(--tt-border); margin-right: 0; margin-left: 4px; text-align: left; }
[dir="rtl"] .tt-moments__item[dir="ltr"]::before { right: auto; left: -6px; }
[dir="rtl"] .tt-moments__item[dir="ltr"]:last-child { padding-bottom: 0; }
[lang="ur"] .tt-moments__item[lang="en"] .tt-moments__date { font-family: var(--font-nav); letter-spacing: 0.08em; text-transform: uppercase; font-size: 11px; }
.tt-hubs--over .tt-hubs__link { box-shadow: inset 0 4px 0 var(--tt-text); }

/* Live coverage. The badge: LIVE in white on the paper's orange, with a blinking square. */
.tt-live-badge { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 0 7px; min-height: 20px; background: var(--tt-orange); color: var(--tt-ink); font-family: var(--font-nav); font-size: 10px; line-height: 1; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; vertical-align: middle; }
.tt-live-badge__dot { width: 6px; height: 6px; background: var(--tt-ink); animation: tt-blink 1.2s steps(1, end) infinite; }
@media (prefers-reduced-motion: reduce) { .tt-live-badge__dot { animation: none; } }
.tt-live-badge--m { min-height: 26px; padding: 0 10px; font-size: 12px; }
.tt-live-badge--l { min-height: 30px; padding: 0 12px; font-size: 13px; }
.tt-live-badge--ended { background: var(--tt-ink); color: var(--tt-paper); }
.tt-live-badge:lang(ur), [lang="ur"] .tt-live-badge { font-family: var(--font-urdu); letter-spacing: 0; text-transform: none; font-size: 12px; }
.tt-story__headline .tt-live-badge, .tt-toplist__headline .tt-live-badge, .tt-wire__headline .tt-live-badge, .tt-lead__title .tt-live-badge, .tt-read__headline .tt-live-badge { margin-inline-end: 8px; position: relative; top: -0.12em; }
.tt-hero__tags .tt-live-badge { margin-inline-start: 4px; }

/* The stream: each update on a card with its time beside it, on a line. */
.tt-live { margin-top: var(--tt-space-7); }
.tt-live__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tt-space-3); padding-bottom: var(--tt-space-3); border-bottom: var(--tt-rule-section-width) solid var(--tt-text); }
.tt-live__heading { margin: 0; font-family: var(--font-nav); font-weight: 600; font-size: 13px; line-height: 20px; letter-spacing: 0.16em; text-transform: uppercase; }
[lang="ur"] .tt-live__heading { font-family: var(--font-urdu); letter-spacing: 0; text-transform: none; font-size: 17px; }
.tt-live__ended { flex-basis: 100%; margin: 0; font-family: var(--font-ui); font-size: 16px; color: var(--tt-text-secondary); }
[lang="ur"] .tt-live__ended { font-family: var(--font-urdu); }
.tt-live__new { position: sticky; top: 84px; z-index: 5; display: block; margin: var(--tt-space-3) auto 0; min-height: 40px; padding: 0 18px; border: 0; border-radius: 0; background: var(--tt-orange); color: var(--tt-ink); font-family: var(--font-pop); font-size: 16px; font-weight: 700; cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); }
.tt-live__new:hover { background: var(--tt-ink); color: var(--tt-paper); }
.tt-live__new[hidden] { display: none; }
.tt-live__items { list-style: none; margin: 0; padding: 0; }
.tt-live__item { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: var(--tt-space-4); padding: var(--tt-space-5) 0; border-bottom: 1px solid var(--tt-border); scroll-margin-top: 90px; }
.tt-live__when { display: flex; flex-direction: column; gap: 2px; padding-top: 2px; }
.tt-live__when time { font-family: var(--font-display); font-weight: 800; font-size: 17px; line-height: 22px; font-variant-numeric: tabular-nums; }
.tt-live__ago { font-family: var(--font-nav); font-size: 10px; line-height: 14px; font-weight: 600; letter-spacing: 0.06em; color: var(--tt-text-secondary); }
[lang="ur"] .tt-live__ago { font-family: var(--font-urdu); letter-spacing: 0; font-size: 12px; }
.tt-live__card { min-width: 0; padding-inline-start: var(--tt-space-4); border-inline-start: 3px solid var(--tt-border); }
.tt-live__item.is-key .tt-live__card { border-inline-start-color: var(--tt-orange); }
.tt-live__items--pinned .tt-live__item { background: var(--tt-panel); padding-inline: var(--tt-space-4); border-bottom: 0; margin-top: var(--tt-space-3); }
.tt-live__items--pinned .tt-live__card { border-inline-start-color: var(--tt-text); }
.tt-live__flag { display: inline-block; margin-bottom: var(--tt-space-2); padding: 2px 7px; background: var(--tt-text); color: var(--tt-bg); font-family: var(--font-nav); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.tt-live__flag--key { background: var(--tt-orange); color: var(--tt-ink); }
[lang="ur"] .tt-live__flag { font-family: var(--font-urdu); letter-spacing: 0; font-size: 12px; }
.tt-live__title { margin: 0 0 var(--tt-space-2); font-family: var(--font-display); font-weight: 800; font-size: 23px; line-height: 1.2; }
[lang="ur"] .tt-live__title { font-family: var(--font-urdu); font-weight: 700; font-size: 21px; line-height: 1.6; }
.tt-live__content { font-family: var(--font-text); font-size: 19px; line-height: 1.6; }
.tt-live__content > :first-child { margin-top: 0; }
.tt-live__content > :last-child { margin-bottom: 0; }
.tt-live__content p { margin: 0 0 0.8em; }
.tt-live__content a { color: inherit; text-decoration-color: var(--tt-orange); text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.tt-live__content img, .tt-live__content iframe, .tt-live__content video { max-width: 100%; height: auto; }
.tt-live__content iframe { aspect-ratio: 16 / 9; width: 100%; height: auto; }
.tt-live__content figure { margin: 0.6em 0 1em; }
.tt-live__content figcaption { margin-top: 6px; font-family: var(--font-ui); font-size: 15px; color: var(--tt-text-secondary); }
[lang="ur"] .tt-live__content { font-family: var(--font-urdu); font-size: 18px; line-height: 1.9; }
.tt-live__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--tt-space-3); margin-top: var(--tt-space-3); font-family: var(--font-ui); font-size: 14px; color: var(--tt-text-secondary); }
.tt-live__link { color: inherit; text-decoration: none; font-weight: 700; }
.tt-live__link:hover { color: var(--tt-orange); }
.tt-live__item.is-new { animation: tt-live-in 1.6s ease-out; }
@keyframes tt-live-in { from { background: rgba(255, 66, 0, 0.16); } to { background: transparent; } }
.tt-live__more { display: block; margin: var(--tt-space-5) auto 0; min-height: 44px; padding: 0 22px; border: 0; border-radius: 0; background: transparent; color: var(--tt-text); box-shadow: inset 0 0 0 2px var(--tt-text); font-family: var(--font-ui); font-size: 16px; font-weight: 700; cursor: pointer; }
.tt-live__more:hover { background: var(--tt-text); color: var(--tt-bg); }
.tt-live__more[hidden] { display: none; }
.tt-live__empty { padding: var(--tt-space-5) 0; font-family: var(--font-ui); font-size: 17px; color: var(--tt-text-secondary); }
@media (max-width: 600px) {
  .tt-live__item { grid-template-columns: 1fr; gap: var(--tt-space-2); padding: var(--tt-space-4) 0; }
  .tt-live__when { flex-direction: row; align-items: baseline; gap: 10px; }
  .tt-live__card { padding-inline-start: var(--tt-space-3); }
  .tt-live__content { font-size: 18px; }
}

/* Beside a live story: its key events. */
.tt-keys { padding: var(--tt-space-4); background: var(--tt-ink); color: var(--tt-paper); box-shadow: inset 0 4px 0 var(--tt-orange); }
.tt-keys__heading { margin: var(--tt-space-1) 0 var(--tt-space-2); font-family: var(--font-nav); font-weight: 600; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; }
[lang="ur"] .tt-keys__heading { font-family: var(--font-urdu); letter-spacing: 0; text-transform: none; font-size: 16px; }
.tt-keys__items { list-style: none; margin: 0; padding: 0; }
.tt-keys__items a { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 8px; padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, 0.16); color: var(--tt-paper); text-decoration: none; }
.tt-keys__items li:first-child a { border-top: 0; }
.tt-keys__time { font-family: var(--font-display); font-weight: 800; font-size: 14px; color: var(--tt-orange); font-variant-numeric: tabular-nums; }
.tt-keys__text { font-family: var(--font-display); font-weight: 700; font-size: 15px; line-height: 20px; }
[lang="ur"] .tt-keys__text { font-family: var(--font-urdu); line-height: 1.7; }
.tt-keys__items a:hover .tt-keys__text { color: var(--tt-orange); }

/* The header between a tablet and a wide screen: the wordmark, the sections and the tools each keep their own
   room (the sections centred in what is left); narrower, the sections tighten, and when they still do not fit
   they scroll sideways and fade at the edge rather than run under the wordmark. */
@media (min-width: 768px) {
  .tt-header__bar { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: var(--tt-space-6); }
  .tt-header__nav { justify-self: center; min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .tt-header__nav::-webkit-scrollbar { display: none; }
  .tt-header__nav.is-clipped { justify-self: stretch; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
  [dir="rtl"] .tt-header__nav.is-clipped { -webkit-mask-image: linear-gradient(270deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(270deg, #000 calc(100% - 48px), transparent); }
}
@media (min-width: 1101px) and (max-width: 1440px) {
  .tt-header__nav { gap: 20px; }
  .tt-header__link:lang(en), .tt-header__link { letter-spacing: 0.12em; }
}
@media (min-width: 768px) and (max-width: 1100px) {
  .tt-header__link:lang(en) { font-size: 12px; letter-spacing: 0.1em; }
}

/* Links take the colour around them, whatever order WordPress prints its global styles in (its theme.json link
   colour once made the footer's links black on black). */
html a:where(:not(.wp-element-button)) { color: inherit; }
.tt-footer__col a:hover, .tt-footer__col a:focus-visible { color: var(--tt-paper, #fff); }
/* Ten sections and Westline fit on a wide screen: tighter spacing from 1,360 px. */
@media (min-width: 1360px) {
  .tt-header__nav { gap: 10px; }
  .tt-header__link, .tt-header__link:lang(en) { letter-spacing: 0.06em; }
}