/* ============================================================
   thetimes.css — recreation of a thetimes.com/us article
   Brand tokens, type scale, grid and breakpoints are lifted from
   The Times' own shipped stylesheets (global-styles-inline-css,
   tnl-thetimes-wp-theme/build/frontend.css, tm-wp-frontend
   navigation-block/style-index.css) supplied from the live page source.
   ============================================================ */
body.thetimes {
  /* --- their --wp--preset--color--* tokens, names as they ship them --- */
  --times-background: #f5efeb;
  --navigation-background: #01000d;
  --white: #ffffff;
  --dark-grey: #1d1d1b;
  --extra-dark-grey: #222222;
  --base: #333333;
  --text-secondary: #696969;
  --grey: #dbdbdb;
  --border-light-grey: #e4e4e4;
  --register-blue: #005c8a;
  --text-link: #006699;

  /* Times Modern / Times Digital are licensed faces; The Times' own
     @font-face fallbacks resolve both to local Times New Roman, so that
     is what we key off, with Tinos as the metric-compatible web fallback. */
  --tm-serif: "Times New Roman", Tinos, Times, serif;
  --tm-sans: Roboto, Arial, Helvetica, sans-serif;

  --nav-bar-height: 60px;
  --nav-bar-mobile-height: 50px;
  --content-size: calc(100% - 20px);

  background: var(--times-background);
  color: var(--base);
  font-family: var(--tm-serif);
  font-size: 16px;
}
@media (min-width: 768px)  { body.thetimes { --content-size: 80.8%; } }
@media (min-width: 1024px) { body.thetimes { --content-size: min(56.2%, 664px); } }

/* ---------------- navigation: one dark bar, everything inline ---------------- */
.tm-nav { background: var(--navigation-background); width: 100%; }
.tm-nav__inner {
  display: flex; align-items: stretch;
  height: var(--nav-bar-mobile-height);
  justify-content: center;
}
@media (min-width: 768px) { .tm-nav__inner { height: var(--nav-bar-height); } }

.tm-nav__flyout,
.tm-nav__search {
  display: flex; align-items: center; justify-content: center;
  flex: none; box-sizing: border-box;
  min-width: calc(var(--nav-bar-height) + 1px);
  background: transparent; border: 0; border-right: 1px solid var(--base);
  color: var(--white); cursor: pointer;
}
.tm-nav__flyout:hover, .tm-nav__search:hover { background: var(--extra-dark-grey); }
.tm-nav__flyout-toggle { position: relative; display: block; width: 16px; height: 16px; }
.tm-nav__flyout-toggle span { position: absolute; left: 0; display: block; width: 100%; height: 1.5px; background: var(--white); }
.tm-nav__flyout-toggle span:nth-child(1) { top: 2px; }
.tm-nav__flyout-toggle span:nth-child(2) { top: 7px; width: 75%; }
.tm-nav__flyout-toggle span:nth-child(3) { top: 12px; }

.tm-nav__logo { display: flex; align-items: center; flex: none; border-right: 1px solid var(--base); }
.tm-nav__logo a { display: flex; align-items: center; height: 100%; padding: 0 20px; }
.tm-nav__logo img { display: block; width: 160px; max-width: none; height: auto; }

.tm-nav__navigation { display: none; }
@media (min-width: 1024px) {
  .tm-nav__navigation { display: flex; flex: 1; min-width: 0; height: 100%; position: relative; }
}
/* their scroll-edge fade, so a clipped item reads as scrollable not broken */
.tm-nav__navigation::after {
  content: ""; position: absolute; top: 0; right: 0; z-index: 9;
  width: 25px; height: 100%; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--navigation-background));
}
.tm-nav__navigation ul {
  display: flex; align-items: stretch; height: 100%;
  margin: 0; padding: 0; list-style: none;
  overflow-x: auto; scrollbar-width: none;
}
.tm-nav__navigation ul::-webkit-scrollbar { display: none; }
.tm-nav__navigation a {
  display: flex; align-items: center; height: 100%; padding: 0 12px;
  color: var(--white); text-decoration: none; white-space: nowrap;
  font-family: var(--tm-sans); font-size: 14px; font-weight: 500;
}
.tm-nav__navigation a:hover { background: var(--extra-dark-grey); }

.tm-nav__user-register { display: flex; align-items: stretch; margin-left: auto; flex: none; }
.tm-nav__login { display: flex; }
.tm-nav__login a {
  display: flex; align-items: center; height: 100%; padding: 0 16px;
  border-inline: 1px solid var(--base);
  color: var(--white); text-decoration: none; white-space: nowrap;
  font-family: var(--tm-sans); font-size: 14px; font-weight: 500;
}
.tm-nav__login a:hover { background: var(--extra-dark-grey); }
.tm-nav__register { display: flex; align-items: center; padding: 6px 16px; }
.tm-nav__register a {
  display: flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 16px; border-radius: 4px;
  background: var(--register-blue); color: var(--white); text-decoration: none; white-space: nowrap;
  font-family: var(--tm-sans); font-size: 14px; font-weight: 500;
}
.tm-nav__register a:hover { filter: brightness(1.1); }

/* ---------------- white article container on the cream ground ---------------- */
.container {
  background: var(--white);
  display: flow-root;
  margin-inline: auto;
  width: 100%; max-width: 100%;
}
@media (min-width: 520px)  { .container { max-width: 520px; border-inline: 1px solid rgba(219,219,219,.5); } }
@media (min-width: 768px)  { .container { max-width: 860px; } }
@media (min-width: 1024px) { .container { max-width: 1024px; border-inline: 1px solid rgba(219,219,219,.5); } }
@media (min-width: 1320px) { .container { max-width: 1182px; } }

/* header block: their grid. NB their ≥1024 rule re-orders the lead asset
   below the standfirst; we keep it above the title at every width to match
   the reference screenshot this page was built to. */
.article__header-top-container {
  display: grid;
  grid-template-areas: "lead lead lead" ". title ." ". standfirst ." ". meta .";
  grid-template-columns: 1fr var(--content-size) 1fr;
  justify-items: stretch;
  padding-block: 25px 0;
  row-gap: 10px;
}
/* ≥1024 the lead asset is constrained to the content column (their
   .wp-block-tnl-wp-lead-asset-lead-asset max-width rule); below that it
   goes full-bleed across the container, as theirs does. */
@media (min-width: 1024px) {
  .article__header-top-container {
    grid-template-areas: ". lead ." ". title ." ". standfirst ." ". meta .";
    row-gap: 20px;
  }
}
.article__header-top-container > * { width: 100%; max-width: 100%; }

.lead-asset { grid-area: lead; display: flex; flex-direction: column; margin: 0 0 15px; }
@media (min-width: 1024px) { .lead-asset { margin-bottom: 0; } }
.lead-asset img { display: block; width: 100%; height: auto; margin: 0 0 10px; background: #ece8e3; }
.lead-asset figcaption {
  font-family: var(--tm-sans); font-size: 14px; line-height: 1.35;
  color: var(--text-secondary); margin: 0 0 7px;
  margin-inline: auto; max-width: var(--content-size); width: 100%;
}
.lead-asset__credits {
  font-family: var(--tm-sans); font-size: 9px; font-weight: 400;
  letter-spacing: .5px; text-transform: uppercase; color: var(--base);
  margin-inline: auto; max-width: var(--content-size); width: 100%;
}
@media (min-width: 1024px) {
  .lead-asset figcaption, .lead-asset__credits { max-width: 100%; }
}

.article--title {
  grid-area: title;
  font-family: var(--tm-serif); font-weight: 700;
  font-size: 30px; line-height: 1.1; color: var(--dark-grey);
  margin: 0 0 7px;
}
@media (min-width: 768px) { .article--title { font-size: 45px; line-height: 1; } }

.article--standfirst {
  grid-area: standfirst;
  font-family: var(--tm-serif); font-weight: 400;
  font-size: 20px; line-height: 26px; color: var(--base);
  margin: 0;
}

.article-meta { grid-area: meta; border-block: 1px solid var(--grey); padding-block: 10px; }
.article-byline { font-family: var(--tm-sans); font-size: 14px; line-height: 1.5; color: var(--dark-grey); }
.article-byline__author { font-weight: 500; }
.article-byline__loc { color: var(--text-secondary); }
.article-byline__sep { color: var(--grey); margin: 0 4px; }
.article-meta__date {
  font-family: var(--tm-sans); font-size: 14px; font-weight: 400; line-height: 1.2142857143;
  color: var(--text-secondary); margin: 4px 0 0; text-align: left;
}

/* ---------------- body ---------------- */
.article-content-wrapper { position: relative; padding-block: 25px 40px; }
.entry-content { margin-inline: auto; width: var(--content-size); }
.entry-content p { font-size: 17px; line-height: 26px; margin: 0 0 25px; }
@media (min-width: 768px) { .entry-content p { font-size: 18px; line-height: 30px; } }
.entry-content h2 {
  font-family: var(--tm-serif); font-weight: 700; font-size: 28px; line-height: 1.1;
  color: var(--dark-grey); margin: 0 0 10px;
}
.entry-content p:has(.drop-cap) { display: flow-root; }
.drop-cap {
  float: left; font-family: var(--tm-serif); font-weight: 400;
  font-size: 110px; line-height: .55; color: var(--dark-grey);
  margin-block-start: .2em; margin-inline-end: 10px;
}

/* ---------------- rewarded gate ----------------
   Their paywall is not a centred modal: the article truncates and a solid
   black band sits across the foot of the page. These overrides re-anchor the
   shared engine's locker into that band — scoped to body.thetimes, engine
   untouched. */
body.thetimes .gate-screen {
  position: fixed; inset: auto 0 0 0; top: auto;
  padding: 0; background: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  pointer-events: none;          /* page stays scrollable behind the band */
}
body.thetimes .gate-screen.armed { display: block; }
body.thetimes .gate-stack {
  pointer-events: auto;
  width: 100%; max-width: none; gap: 0;
  background: var(--navigation-background);
  padding: 26px 16px 22px; text-align: center;
  box-shadow: 0 -4px 24px rgba(0,0,0,.35);
}
body.thetimes .reward-locker {
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  width: 100%; max-width: none; padding: 0;
}
body.thetimes .reward-locker .lock-badge { display: none; }

/* truncate the gated copy behind a fade, as a teased article does —
   no blur, so nothing reads as smudged */
body.thetimes.is-locked .article-gated { filter: none; }
body.thetimes.is-locked .gated-wrap { max-height: 420px; position: relative; }
body.thetimes.is-locked .gated-wrap::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 200px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), var(--white) 82%);
  pointer-events: none;
}
/* clearance so the fixed band never sits over copy, and so the page is tall
   enough for the sentinel to reach the engine's 62%-of-viewport trigger */
body.thetimes.is-locked .article-content-wrapper { padding-bottom: 300px; }
body.thetimes .reward-locker h3 {
  font-family: var(--tm-serif); font-weight: 400; font-size: 28px; line-height: 1.15;
  color: var(--white); margin: 0 0 8px; letter-spacing: 0;
}
body.thetimes .reward-locker p {
  font-family: var(--tm-sans); font-size: 16px; line-height: 24px;
  color: var(--white); margin: 0 auto 16px; max-width: 260px;
}
/* black CTA, not blue — bordered so it still reads as a button on the band */
body.thetimes .rv-cta {
  background: #000; color: var(--white);
  border: 1.5px solid rgba(255,255,255,.85); border-radius: 0;
  min-width: 240px; width: auto; margin: 4px 0 0; padding: 13px 18px;
  font-family: var(--tm-sans); font-size: 16px; font-weight: 500; letter-spacing: 0;
  box-shadow: none;
}
body.thetimes .rv-cta:hover { background: var(--white); color: #000; filter: none; transform: none; }
body.thetimes .rv-cta svg { display: none; }
body.thetimes .rv-later {
  font-family: var(--tm-sans); font-size: 16px; font-weight: 400;
  color: #e4e4e6; text-decoration: underline; text-underline-offset: 3px;
  margin-left: 18px;
}
body.thetimes .rv-later:hover { color: var(--white); }
body.thetimes .reward-locker .rv-foot { display: none; }
body.thetimes .gate-eyebrow { display: none; }
body.thetimes .gate-fine {
  font-family: var(--tm-sans); font-size: 16px; line-height: 24px;
  color: #e4e4e6; max-width: none; margin-inline: auto; padding-top: 14px;
}
body.thetimes .gate-fine .lnk { color: var(--white); font-weight: 700; text-decoration: none; }
body.thetimes .rv-floating { background: var(--navigation-background); }
body.thetimes .rv-floating .txt { font-family: var(--tm-sans); }
body.thetimes .rv-floating button {
  font-family: var(--tm-sans); font-weight: 500; font-size: 14px;
  background: var(--register-blue); color: var(--white); border-radius: 4px;
}