/* The Thursday Times: the menu (inc/menu.php). The paper's index on its own black, opening under the orange header
   and filling the rest of the screen: search set large on a ruled line, the sections in each one's colour, what has
   just come in, the editions, Thursday AI and the handles. Motion keeps the identity's rules: the colon stays put
   (it only blinks), straight lines only, a quick move and a long hold, one blink a second. */

.tt-menu.tt-mnu {
  --mn-ease: var(--tt-ease, cubic-bezier(0.7, 0, 0.2, 1)); --mn-move: var(--tt-move, 600ms);
  --tt-bg: var(--tt-ink); --tt-text: var(--tt-paper); --tt-text-secondary: #a8a8a8; --tt-border: #333;
  position: absolute; top: 100%; left: 0; right: 0; z-index: 50;
  height: calc(100vh - var(--tt-mnu-top, 64px)); height: calc(100dvh - var(--tt-mnu-top, 64px));
  overflow-y: auto; overscroll-behavior: contain; box-shadow: none;
  border: 0; background: var(--tt-ink); color: var(--tt-paper);
  background-image: repeating-linear-gradient(to right, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px calc(100% / 12));
  background-attachment: local;
}
.tt-mnu * { box-sizing: border-box; }
.tt-mnu h2 { margin: 0; }
.tt-mnu ol, .tt-mnu ul { margin: 0; padding: 0; list-style: none; }
html.tt-mnu-open { overflow: hidden; }

.tt-mnu__inner { display: flex; flex-direction: column; gap: clamp(32px, 5vw, 64px); padding-block: clamp(24px, 4vw, 48px) clamp(48px, 7vw, 96px); }

/* --------------------------------------------------------------- the search */
.tt-mnu .tt-search { position: relative; height: auto; align-items: stretch; border-bottom: var(--tt-rule-section-width, 3px) solid var(--tt-paper); }
.tt-mnu .tt-search::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(-1 * var(--tt-rule-section-width, 3px)); height: var(--tt-rule-section-width, 3px); background: var(--tt-orange); transform: scaleX(0); transform-origin: left center; transition: transform var(--mn-move) var(--mn-ease); }
[dir="rtl"] .tt-mnu .tt-search::after { transform-origin: right center; }
.tt-mnu .tt-search:focus-within::after { transform: scaleX(1); }
.tt-mnu .tt-search__box { border: 0; background: transparent; }
.tt-mnu .tt-search__t { padding-inline-start: 0; }
.tt-mnu .tt-search__t svg { width: auto; height: clamp(20px, 2.4vw, 30px); }
.tt-mnu .tt-search__t path { fill: var(--tt-paper); }
.tt-mnu .tt-search__t { --tt-accent: var(--tt-orange); }
.tt-mnu .tt-search__box:focus-within .tt-search__t rect { animation: tt-mnu-blink 1s steps(1, end) infinite; }
.tt-mnu .tt-search__input { height: clamp(64px, 8vw, 96px); padding-inline: clamp(12px, 1.6vw, 20px); color: var(--tt-paper); caret-color: var(--tt-orange); font-family: var(--font-deck); font-size: clamp(28px, 3.6vw, 48px); line-height: 1.1; letter-spacing: -0.01em; }
.tt-mnu .tt-search__input::placeholder { color: #6f6f6f; }
.tt-mnu .tt-search__input::-webkit-search-cancel-button { filter: invert(1); }
[dir="rtl"] .tt-mnu .tt-search__input { font-family: var(--font-urdu); font-size: clamp(22px, 2.6vw, 32px); letter-spacing: 0; }
.tt-mnu .tt-search__go { align-self: center; width: clamp(48px, 5vw, 64px); height: clamp(48px, 5vw, 64px); background: var(--tt-orange); color: var(--tt-paper); transition: background-color 200ms ease-out; }
.tt-mnu .tt-search__go:hover { background: var(--tt-paper); color: var(--tt-ink); }

@keyframes tt-mnu-blink { 50% { opacity: 0; } }

/* ------------------------------------------------------------------ the grid */
.tt-mnu__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--tt-space-7) clamp(32px, 6vw, 96px); align-items: start; }

/* Every heading carries the colon. */
.tt-mnu__head { display: flex; align-items: center; gap: 10px; margin-bottom: var(--tt-space-4) !important; font-family: var(--font-ui); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tt-text-secondary); }
.tt-mnu__head::before { content: ""; flex: none; width: 4px; height: 14px; background: linear-gradient(var(--tt-orange) 0 4px, transparent 4px 10px, var(--tt-orange) 10px); }
[dir="rtl"] .tt-mnu__head { font-family: var(--font-urdu); font-size: 14px; letter-spacing: 0; }

/* ------------------------------------------------------------- the sections */
.tt-mnu__sections li { border-bottom: 1px solid var(--tt-border); }
.tt-mnu__sections li:first-child { border-top: 1px solid var(--tt-border); }
.tt-menu.tt-mnu .tt-mnu__sections a { position: relative; display: flex; align-items: center; gap: clamp(12px, 1.4vw, 20px); min-height: clamp(60px, 6.4vw, 84px); padding-inline: 2px; border: 0; color: var(--tt-paper); text-decoration: none; text-transform: none; letter-spacing: 0; font-family: var(--font-display); font-size: inherit; font-weight: 900; background: linear-gradient(var(--ft-c), var(--ft-c)) no-repeat left center / 0% 100%; transition: background-size 420ms var(--mn-ease), color 160ms ease-out, padding 420ms var(--mn-ease); }
[dir="rtl"] .tt-menu.tt-mnu .tt-mnu__sections a { background-position: right center; }
.tt-mnu__n { flex: none; width: 2.2em; font-family: var(--font-ui); font-size: 13px; line-height: 1; font-weight: 600; color: var(--tt-text-secondary); font-variant-numeric: tabular-nums; transition: color 160ms ease-out; }
.tt-mnu__name { display: inline-flex; align-items: center; gap: 0.36em; white-space: nowrap; font-size: clamp(30px, 4.2vw, 58px); line-height: 1; letter-spacing: -0.025em; text-transform: uppercase; }
.tt-mnu__name::before { content: ""; flex: none; width: 0.3em; height: 0.3em; background: var(--ft-c); transition: background-color 160ms ease-out; }
[dir="rtl"] .tt-mnu__name, .tt-mnu__name:lang(ur) { font-family: var(--font-urdu); font-weight: 700; font-size: clamp(26px, 3.2vw, 44px); letter-spacing: 0; line-height: 1.5; }
.tt-mnu__sections a::after { content: ""; margin-inline-start: auto; flex: none; width: 16px; height: 16px; border-top: 2.5px solid; border-inline-end: 2.5px solid; transform: rotate(45deg); opacity: 0; translate: -10px 0; transition: opacity 200ms ease-out, translate 420ms var(--mn-ease); }
[dir="rtl"] .tt-mnu__sections a::after { transform: rotate(-45deg); translate: 10px 0; }
.tt-menu.tt-mnu .tt-mnu__sections a:hover, .tt-menu.tt-mnu .tt-mnu__sections a:focus-visible { background-size: 100% 100%; color: var(--ft-on); padding-inline: var(--tt-space-4); }
.tt-mnu__sections a:hover .tt-mnu__n, .tt-mnu__sections a:focus-visible .tt-mnu__n { color: var(--ft-on); }
.tt-mnu__sections a:hover .tt-mnu__name::before, .tt-mnu__sections a:focus-visible .tt-mnu__name::before { background: var(--ft-on); }
.tt-mnu__sections a:hover::after, .tt-mnu__sections a:focus-visible::after { opacity: 1; translate: 0 0; }
.tt-mnu__sections a[aria-current] .tt-mnu__name { text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 0.12em; text-decoration-color: var(--ft-c); }
.tt-mnu__sections .tt-wl-tail { flex: none; width: clamp(30px, 3.2vw, 46px); height: auto; color: #7f6cff; }
.tt-mnu__sections .tt-ai-mark { flex: none; width: auto; height: clamp(18px, 2.2vw, 30px); }
.tt-mnu__sections a:hover .tt-wl-tail { color: var(--ft-on); }

/* -------------------------------------------------------------------- the side */
.tt-mnu__side { display: flex; flex-direction: column; gap: clamp(32px, 4vw, 48px); }

.tt-mnu__pulse { width: 8px; height: 8px; margin-inline-end: 2px; background: var(--tt-orange); animation: tt-mnu-blink 1s steps(1, end) infinite; }
.tt-mnu__latest .tt-mnu__head::before { display: none; }
.tt-mnu__latest .tt-mnu__head { color: var(--tt-orange); }
.tt-mnu__list li + li { border-top: 1px solid var(--tt-border); }
.tt-mnu__list a { display: block; padding-block: var(--tt-space-3); color: var(--tt-paper); text-decoration: none; }
.tt-mnu__list time { display: block; margin-bottom: 4px; font-family: var(--font-ui); font-size: 12px; line-height: 16px; font-weight: 600; color: var(--tt-text-secondary); }
.tt-mnu__list span { font-family: var(--font-text); font-size: 17px; line-height: 23px; font-weight: 600; text-wrap: pretty; background: linear-gradient(var(--tt-orange), var(--tt-orange)) no-repeat left center / 0% 100%; box-decoration-break: clone; -webkit-box-decoration-break: clone; transition: background-size 320ms var(--mn-ease); }
[dir="rtl"] .tt-mnu__list span { font-family: var(--font-urdu); font-size: 17px; line-height: 30px; background-position: right center; }
.tt-mnu__list time::first-letter { text-transform: uppercase; }
.tt-mnu__list a:hover span, .tt-mnu__list a:focus-visible span { background-size: 100% 100%; }

.tt-mnu__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tt-space-4); padding-top: var(--tt-space-5); border-top: var(--tt-rule-section-width, 3px) solid var(--tt-paper); }
.tt-mnu .tt-switch { width: auto; flex: 1 1 200px; max-width: 260px; }
.tt-mnu .tt-switch__option { color: var(--tt-paper); box-shadow: inset 0 0 0 1.5px var(--tt-border); }
.tt-mnu .tt-switch__option.is-active { background: var(--tt-paper); color: var(--tt-ink); box-shadow: none; }
.tt-mnu__ai { display: inline-flex; align-items: center; gap: var(--tt-space-3); min-height: var(--tt-touch-target, 48px); padding: 0 var(--tt-space-4); background: var(--tt-orange); color: var(--tt-paper); text-decoration: none; font-family: var(--font-ui); font-size: 15px; font-weight: 700; transition: background-color 200ms ease-out, color 200ms ease-out; }
[dir="rtl"] .tt-mnu__ai { font-family: var(--font-urdu); }
.tt-mnu__ai i { position: relative; width: 18px; height: 2px; background: currentColor; transition: width 420ms var(--mn-ease); }
.tt-mnu__ai i::after { content: ""; position: absolute; inset-inline-end: 0; top: -4px; width: 8px; height: 8px; border-top: 2px solid; border-inline-end: 2px solid; transform: rotate(45deg); }
[dir="rtl"] .tt-mnu__ai i::after { transform: rotate(-45deg); }
.tt-mnu__ai:hover { background: var(--tt-paper); color: var(--tt-ink); }
.tt-mnu__ai:hover i { width: 26px; }

.tt-mnu__follow ul { display: flex; flex-wrap: wrap; gap: 8px; }
.tt-mnu__follow a { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--tt-border); color: var(--tt-paper); transition: background-color 200ms ease-out, border-color 200ms ease-out, translate 420ms var(--mn-ease); }
.tt-mnu__follow svg { width: 20px; height: 20px; fill: currentColor; }
.tt-mnu__follow a:hover, .tt-mnu__follow a:focus-visible { background: var(--tt-orange); border-color: var(--tt-orange); translate: 0 -4px; }

/* ------------------------------------------- the phone's button becomes a close */
html.tt-mnu-open :is(.tt-header__phone, .tt-fhead__tool)[aria-controls="tt-menu"][aria-expanded="true"] { position: relative; }
html.tt-mnu-open :is(.tt-header__phone, .tt-fhead__tool)[aria-controls="tt-menu"][aria-expanded="true"] > svg { opacity: 0; }
html.tt-mnu-open :is(.tt-header__phone, .tt-fhead__tool)[aria-controls="tt-menu"][aria-expanded="true"]::after { content: ""; position: absolute; inset: 0; margin: auto; width: 22px; height: 22px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.2 2.8 12 10.6l7.8-7.8 1.4 1.4-7.8 7.8 7.8 7.8-1.4 1.4-7.8-7.8-7.8 7.8-1.4-1.4 7.8-7.8-7.8-7.8z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.2 2.8 12 10.6l7.8-7.8 1.4 1.4-7.8 7.8 7.8 7.8-1.4 1.4-7.8-7.8-7.8 7.8-1.4-1.4 7.8-7.8-7.8-7.8z'/%3E%3C/svg%3E") center / contain no-repeat; }

/* On a phone both the menu and the search buttons open it: one close is enough. */
html.tt-mnu-open .tt-header__phone[data-tt="search"] { visibility: hidden; }

/* ------------------------------------------------------------ the bar on a desk */
/* The sections in the bar, quieter and tighter: Chivo capitals in place of the tracked Montserrat; while one is
   under the pointer the others step back; one line under the words runs from section to section (menu.js places
   it) and rests under the section you are in. Westline and Thursday AI keep their chips, set apart by a hairline. */
@media (min-width: 768px) {
  .tt-header__nav { position: relative; align-items: center; gap: 26px; }
  .tt-header__nav .tt-header__link, .tt-header__nav .tt-header__link:lang(en) { font-family: var(--font-display); font-size: 14px; line-height: 20px; font-weight: 700; letter-spacing: 0.02em; }
  .tt-header__nav .tt-header__link:lang(ur) { font-family: var(--font-urdu); font-size: 17px; font-weight: 600; letter-spacing: 0; }
  .tt-header__nav .tt-header__link:not(.is-westline):not(.is-ai) { padding: 12px 0; border-bottom: 0; transition: opacity 240ms ease-out; }
  .tt-header__nav .tt-header__link:not(.is-westline):not(.is-ai)::after { display: none; }
  .tt-header__nav:hover .tt-header__link:not(:hover), .tt-header__nav:focus-within .tt-header__link:not(:focus-visible):not(:hover) { opacity: 0.6; }
  .tt-header__nav .tt-header__link:is(.is-westline, .is-ai) { padding: 6px 10px; font-size: 13px; letter-spacing: 0.04em; transition: opacity 240ms ease-out; }
  .tt-header__nav .tt-header__link:is(.is-westline, .is-ai):not(.is-westline ~ *) { margin-inline-start: 14px; }
  .tt-header__nav .tt-header__link:is(.is-westline, .is-ai):not(.is-westline ~ *)::before { content: ""; position: absolute; inset-inline-start: -21px; top: 50%; width: 1px; height: 20px; margin-top: -10px; background: var(--tt-bar-line); }
  .tt-header__nav .tt-header__link.is-westline ~ .is-ai { margin-inline-start: -16px; }

  .tt-nav-line { position: absolute; left: 0; bottom: 4px; width: 1px; height: 2px; background: var(--tt-bar-text); opacity: 0; pointer-events: none; transform-origin: left center; transform: translateX(var(--x, 0px)) scaleX(var(--w, 0)); transition: transform 420ms var(--tt-ease, cubic-bezier(0.7, 0, 0.2, 1)), opacity 200ms ease-out; }
  .tt-nav-line.is-on { opacity: 1; }
  .tt-nav-line.is-still { transition: none; }
}
@media (min-width: 768px) and (max-width: 1100px) {
  .tt-header__nav { gap: 18px; }
  .tt-header__nav .tt-header__link:not(.is-westline):not(.is-ai) { font-size: 13px; letter-spacing: 0.01em; }
}
@media (prefers-reduced-motion: reduce) { .tt-nav-line, .tt-header__nav .tt-header__link { transition: none !important; } }

/* -------------------------------------------------------------------- motion */
/* The panel wipes down from under the header; the search line draws across; the sections come up one after
   another, then the side. Closing is instant. */
@media (prefers-reduced-motion: no-preference) {
  .tt-mnu.is-open { animation: tt-mnu-wipe 560ms var(--mn-ease) both; }
  .tt-mnu.is-open .tt-mnu__search { animation: tt-mnu-up var(--mn-move) var(--mn-ease) 120ms both; }
  .tt-mnu.is-open .tt-mnu__head, .tt-mnu.is-open .tt-mnu__sections li { animation: tt-mnu-up var(--mn-move) var(--mn-ease) both; animation-delay: calc(200ms + var(--mn-i, 0) * 50ms); }
  .tt-mnu.is-open .tt-mnu__side { animation: tt-mnu-up var(--mn-move) var(--mn-ease) 420ms both; }
  .tt-mnu__list li { animation: tt-mnu-up 500ms var(--mn-ease) both; }
}
@keyframes tt-mnu-wipe { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes tt-mnu-up { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .tt-mnu *, .tt-mnu *::before, .tt-mnu *::after { transition: none !important; animation: none !important; }
}

/* ---------------------------------------------------------------- the screens */
@media (max-width: 1023px) {
  .tt-mnu__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .tt-mnu__inner { gap: var(--tt-space-6); padding-top: var(--tt-space-4); }
  .tt-mnu .tt-search__input { height: 60px; padding-inline: 10px; font-size: 22px; }
  .tt-mnu .tt-search__go { width: 44px; height: 44px; }
  .tt-menu.tt-mnu .tt-mnu__sections a { min-height: 58px; }
  .tt-mnu__name { font-size: 29px; }
  .tt-mnu__n { width: 1.9em; }
  .tt-mnu .tt-switch { flex-basis: 100%; max-width: none; }
  .tt-mnu__ai { flex: 1 1 100%; justify-content: space-between; }
  .tt-mnu__follow a { width: 44px; height: 44px; }
}