/* Westline's section on The Thursday Times' front page: a field of Westline's violet, its logo with the line
   running in from the edge, the desks as their logos, the newest story large and the next ones beside it. */
@font-face { font-family: "WL Archivo"; src: url(fonts/Archivo.woff2?v=2) format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "WL Newsreader"; src: url(fonts/Newsreader.woff2?v=2) format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "WL Mono"; src: url(fonts/JetBrainsMono.woff2?v=2) format("woff2"); font-weight: 100 800; font-display: swap; }
/* Westline's own faces are fetched only as the band comes near (theme.js adds .wl-tt--faces a screen ahead): on the
   paper's front page the band is far down, and its three faces would otherwise compete with the top of the page.
   Without the script they are there from the start. */
.wl-tt, .tt-js .wl-tt.wl-tt--faces { --wl-a: "WL Archivo"; --wl-n: "WL Newsreader"; --wl-m: "WL Mono"; }
.tt-js .wl-tt:not(.wl-tt--faces) { --wl-a: "WL Archivo Later"; --wl-n: "WL Newsreader Later"; --wl-m: "WL Mono Later"; }

.wl-tt { --wl-on: #14111d; --wl-on-2: rgba(20, 17, 29, 0.84); --wl-on-3: rgba(20, 17, 29, 0.68); --wl-on-rule: rgba(20, 17, 29, 0.22); position: relative; overflow: hidden; padding: clamp(48px, 6vw, 84px) 0 clamp(52px, 6vw, 92px); background-color: var(--wl-accent, #7f6cff); background-image: linear-gradient(100deg, color-mix(in srgb, var(--wl-accent, #7f6cff) 80%, #14111d) 0%, var(--wl-accent, #7f6cff) 48%, color-mix(in srgb, var(--wl-accent, #7f6cff) 84%, #ffffff) 100%); color: var(--wl-on); }
.wl-tt__in { width: min(100% - 2 * var(--tt-margin, 32px), 1280px); margin: 0 auto; }
.wl-tt a { text-decoration: none; }

/* the head: the logo, its line from the edge, the tagline, the way in */
.wl-tt__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 30px; }
.wl-tt__title { margin: 0; font-size: inherit; line-height: 1; }
.wl-tt .wl-mark { position: relative; display: inline-flex; align-items: baseline; font: 820 clamp(54px, 7.4vw, 104px)/1 var(--wl-a), Arial, sans-serif; font-stretch: 125%; letter-spacing: -0.045em; color: var(--wl-on); white-space: nowrap; }
.wl-tt .wl-mark__w { position: relative; display: inline-block; width: calc(0.526em * 1.8); height: 0.526em; margin-right: -0.1em; color: #ffffff; }
.wl-tt .wl-mark--line .wl-mark__w::before { content: ""; position: absolute; top: 0; right: 79%; width: 100vw; height: 28%; background: currentColor; }
.wl-tt .wl-w { display: block; width: 100%; height: 100%; overflow: hidden; }
.wl-tt .wl-mark__img { display: block; height: 1em; width: auto; }
.wl-tt .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.wl-tt__tagline { margin: 0; font: 400 clamp(19px, 1.7vw, 24px)/1.3 var(--wl-n), Georgia, serif; color: var(--wl-on); }
.wl-tt__more { margin-left: auto; padding-bottom: 3px; border-bottom: 2px solid currentColor; font: 600 12px/1 var(--wl-m), monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wl-on); }
.wl-tt__more:hover { color: #ffffff; }

/* the desks, as their logos */
.wl-tt__desks { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px 34px; margin: 30px 0 40px; padding: 18px 0; border-top: 1px solid var(--wl-on-rule); border-bottom: 1px solid var(--wl-on-rule); }
.wl-tt .wl-desk { color: var(--wl-on); }
.wl-tt .wl-desk__tail { color: #ffffff; }
.wl-tt a.wl-desk:hover .wl-desk__tail { transform: translateX(4px); }

/* the stories */
.wl-tt__grid { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr); gap: clamp(28px, 4.4vw, 68px); align-items: start; }
.wl-tt__grid--one { grid-template-columns: minmax(0, 860px); }
.wl-tt__pic { display: block; aspect-ratio: 16 / 10; margin-bottom: 22px; overflow: hidden; background: var(--wl-on); }
.wl-tt__pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.wl-tt__lead:hover .wl-tt__pic img { transform: scale(1.03); }
.wl-tt__desk { margin-bottom: 14px; }
.wl-tt__headline { margin: 0 0 14px; font: 740 clamp(34px, 3.7vw, 58px)/0.97 var(--wl-a), Arial, sans-serif; font-stretch: 72%; letter-spacing: -0.01em; text-wrap: balance; }
.wl-tt__headline a, .wl-tt__item-title a { color: var(--wl-on); background-image: linear-gradient(#ffffff, #ffffff); background-size: 0 3px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size 0.35s; }
.wl-tt__headline a:hover, .wl-tt__item-title a:hover { background-size: 100% 3px; }
.wl-tt__line { max-width: 34em; margin: 0 0 16px; font: 400 clamp(18px, 1.5vw, 21px)/1.4 var(--wl-n), Georgia, serif; color: var(--wl-on-2); }
.wl-tt__by { margin: 0; font: 600 10.5px/1.2 var(--wl-m), monospace; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wl-on-3); }
.wl-tt__list { display: flex; flex-direction: column; }
.wl-tt__item { padding: 24px 0; border-top: 1px solid var(--wl-on-rule); }
.wl-tt__item:first-child { padding-top: 0; border-top: 0; }
.wl-tt__item-title { margin: 0 0 10px; font: 720 clamp(24px, 2vw, 30px)/1.02 var(--wl-a), Arial, sans-serif; font-stretch: 74%; text-wrap: balance; }
.wl-tt__item-line { margin: 0 0 12px; font: 400 17px/1.42 var(--wl-n), Georgia, serif; color: var(--wl-on-2); }

/* a desk's logo: its name in condensed capitals as tall as the W, then the line running into the W */
.wl-desk { --h: 14px; display: inline-flex; align-items: baseline; gap: calc(var(--h) * 0.22); white-space: nowrap; color: inherit; }
.wl-desk__name { font-family: var(--wl-a), Arial, sans-serif; font-weight: 740; font-stretch: 72%; font-size: calc(var(--h) / 0.686); line-height: 1; letter-spacing: 0.01em; text-transform: uppercase; }
.wl-desk__tail { display: block; flex: none; width: calc(var(--h) * 2.7); height: var(--h); color: var(--wl-accent, #7f6cff); transition: transform 0.35s; }
.wl-desk--xs { --h: 11px; }
.wl-desk--s { --h: 17px; }

@media (max-width: 900px) {
  .wl-tt__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .wl-tt__list { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--wl-on-rule); }
  .wl-tt__more { margin-left: 0; }
}
@media (max-width: 720px) {
  .wl-tt__desks { gap: 12px 22px; margin: 24px 0 30px; padding: 14px 0; }
  .wl-desk--s { --h: 14px; }
  .wl-tt__item:nth-child(n+3) { display: none; }
  .wl-tt__line { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .wl-tt__pic img, .wl-desk__tail, .wl-tt__headline a, .wl-tt__item-title a { transition: none; }
}