/* =====================================================================================================================
   IPN TV 1.20 · the new look — "Los Angeles at dusk"
   A SKIN drawn over the current theme: it only re-colours and adds the new home and welcome page. Switch it off in
   Studio → Settings → Look and the site is exactly what it was. Palette: indigo night, coral sunset, warm sand;
   red is kept for "on air" only.
   ===================================================================================================================== */
@font-face { font-family: "Schibsted Grotesk"; font-weight: 700; font-display: swap; src: url(../fonts/schibsted-grotesk-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 900; font-display: swap; src: url(../fonts/schibsted-grotesk-latin-900-normal.woff2) format("woff2"); }
@font-face { font-family: "Noto Nastaliq Urdu"; font-weight: 700; font-display: swap; src: url(../fonts/noto-nastaliq-urdu-arabic-700-normal.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+200C-200E, U+FB50-FDFF, U+FE70-FEFF; }

/* ---- 1 · the palette, for every page of the site ---------------------------------------------------------------- */
html.skin-dusk {
  --dk-night: #0D1230; --dk-night-2: #151B44; --dk-night-3: #1D2556;
  --dk-coral: #FF6B4A; --dk-coral-2: #FF8A6E; --dk-sand: #F3DCC0; --dk-slate: #9198BE; --dk-live: #F0263D;
  --red: #FF5A3D; --red-2: #FF7A5C; --red-deep: #B8361F; --accent: #FF6B4A; --gold: #F0B35A; --gold-2: #F6D29A;
  --font-head: "Schibsted Grotesk", "Vazirmatn", "Inter", system-ui, sans-serif;
  --bg: #0D1230; --bg-2: #11173B; --surface: #151B44; --surface-2: #1D2556; --line: rgba(243,220,192,.10); --line-2: rgba(243,220,192,.18);
  --text: #F6EBDD; --text-2: #C9C2D9; --muted: #9198BE; --shadow: 0 22px 60px -28px rgba(0,0,0,.75);
  --header-bg: rgba(13,18,48,.86); --paper: #151B44; --ink: #F6EBDD; --ink-2: #C9C2D9; --sunk: rgba(243,220,192,.07);
}
html.skin-dusk[data-mode="light"] {
  --bg: #F7F2EB; --bg-2: #FFFFFF; --surface: #FFFFFF; --surface-2: #F1EADF; --line: rgba(21,27,68,.10); --line-2: rgba(21,27,68,.18);
  --text: #151B44; --text-2: #3D4470; --muted: #6E7395; --shadow: 0 16px 44px -22px rgba(21,27,68,.28);
  --header-bg: rgba(247,242,235,.9); --paper: #FFFFFF; --ink: #151B44; --ink-2: #3D4470; --sunk: rgba(21,27,68,.05);
}
html.skin-dusk body { background: var(--bg); }

/* ---- 2 · the TV home: on now ------------------------------------------------------------------------------------ */
.dk-now { padding: clamp(18px, 3vw, 34px) 0 0; }
.dk-now__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr); gap: clamp(22px, 3.4vw, 46px); align-items: center; }
.dk-now__k { margin: 0 0 6px; color: var(--dk-coral); font-weight: 800; font-size: 15px; }
.dk-now h1 { margin: 0 0 14px; font-size: clamp(28px, 3.4vw, 46px); line-height: 1.25; font-weight: 900; letter-spacing: -.01em; color: var(--text); }
.dk-now__d { margin: 0 0 24px; color: var(--muted); max-width: 40ch; line-height: 1.75; }
.dk-now__acts { display: flex; flex-wrap: wrap; gap: 10px; }
.dk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 48px; padding: 0 22px; border-radius: 12px; font-weight: 800; font-size: 15px; text-decoration: none; white-space: nowrap; transition: transform .16s ease, background .16s ease; }
.dk-btn svg, .dk-btn .ic { width: 18px; height: 18px; }
.dk-btn--coral { background: var(--dk-coral); color: #1A0E0A; }
.dk-btn--coral:hover { background: var(--dk-coral-2); transform: translateY(-1px); }
.dk-btn--ghost { background: var(--sunk); color: var(--text); border: 1px solid var(--line); }
.dk-btn--saffron { background: #E2A93B; color: #2A0A12; }
.dk-btn:focus-visible { outline: 2px solid var(--dk-coral); outline-offset: 3px; }
.dk-next { display: flex; gap: 12px; align-items: baseline; margin: 28px 0 0; padding-top: 18px; border-top: 1px solid var(--line); }
.dk-next span { color: var(--muted); font-size: 13.5px; white-space: nowrap; } .dk-next b { font-size: 15.5px; color: var(--text); }
.dk-screen { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: var(--dk-night-2); box-shadow: 0 40px 80px -40px #000; }
.dk-screen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dk-screen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(13,18,48,.8), transparent 46%); }
.dk-onair { position: absolute; z-index: 1; top: 16px; inset-inline-start: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 8px; background: var(--dk-live); color: #fff; font-weight: 800; font-size: 14px; }
.dk-onair::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: dk-blink 1.4s ease-in-out infinite; }
@keyframes dk-blink { 50% { opacity: .3; } }
.dk-screen__play { position: absolute; z-index: 1; inset: 50% auto auto 50%; translate: -50% -50%; width: 82px; height: 82px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.16); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; transition: transform .2s ease; }
.dk-screen__play svg, .dk-screen__play .ic { width: 30px; height: 30px; margin-inline-start: 4px; }
.dk-screen:hover .dk-screen__play { transform: scale(1.06); }
.dk-screen__bar { position: absolute; z-index: 1; inset: auto 20px 16px auto; color: rgba(255,255,255,.85); font-size: 13.5px; font-weight: 700; }

/* ---- 3 · tonight's schedule as a strip of time, with a playhead: the one memorable thing ------------------------ */
.dk-ribbon { margin-top: clamp(26px, 3.6vw, 44px); border-block: 1px solid var(--line); background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 70%, transparent), transparent); }
.dk-ribbon .wrap { padding-bottom: 22px; }
.dk-ribbon__scroll { overflow-x: auto; scrollbar-width: thin; }
.dk-ribbon__track { min-width: 760px; }
.dk-ticks { display: grid; grid-template-columns: repeat(6, 1fr); color: var(--muted); font-size: 13px; padding: 12px 0 10px; }
.dk-ticks span { border-inline-start: 1px solid var(--line); padding-inline-start: 8px; }
.dk-blocks { position: relative; height: 74px; margin-top: 16px; }
.dk-blk { position: absolute; top: 0; height: 74px; border-radius: 12px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; text-decoration: none; color: var(--text); transition: border-color .16s ease; }
.dk-blk b { display: block; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-blk span { font-size: 12.5px; color: var(--muted); }
.dk-blk:hover { border-color: var(--line-2); }
.dk-blk.is-on { background: linear-gradient(90deg, rgba(255,107,74,.16), rgba(255,107,74,.32)); border-color: rgba(255,107,74,.55); }
.dk-blk.is-on span { color: var(--dk-coral); font-weight: 700; }
.dk-blk.is-done { opacity: .5; }
.dk-head { position: absolute; top: -12px; bottom: -8px; width: 2px; background: var(--dk-coral); pointer-events: none; }
.dk-head::before { content: attr(data-t); position: absolute; top: -24px; inset-inline-start: 50%; translate: 50% 0; background: var(--dk-coral); color: #1A0E0A; font-weight: 800; font-size: 12.5px; padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
[dir="ltr"] .dk-head::before { translate: -50% 0; }
.dk-head::after { content: ""; position: absolute; bottom: -5px; inset-inline-start: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--dk-coral); }
.dk-ribbon__empty { display: flex; align-items: center; gap: 10px; margin: 0; padding: 18px 0 0; color: var(--muted); }
.dk-ribbon__empty svg, .dk-ribbon__empty .ic { width: 20px; height: 20px; color: var(--dk-coral); }
.dk-ribbon__empty a { margin-inline-start: auto; color: var(--dk-coral); font-weight: 700; text-decoration: none; }

/* ---- 4 · rows, the next event as a ticket, the contest band ---------------------------------------------------- */
.dk-rows { padding-top: clamp(20px, 3vw, 36px); }
html.skin-dusk .dk-rows .rail__h, html.skin-dusk .dk-rows h2 { letter-spacing: -.01em; }
.dk-event { margin-top: clamp(36px, 5vw, 70px); }
.dk-ticket { display: grid; grid-template-columns: 160px minmax(0, 1fr) 300px; border-radius: 22px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--text); }
.dk-ticket__date { display: grid; place-content: center; text-align: center; background: var(--dk-coral); color: #1A0E0A; padding: 20px 8px; }
.dk-ticket__date b { font-size: 58px; font-weight: 900; line-height: 1; }
.dk-ticket__date span { font-weight: 800; font-size: 17px; }
.dk-ticket__date svg, .dk-ticket__date .ic { width: 40px; height: 40px; }
.dk-ticket__txt { padding: 30px 36px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dk-ticket__txt small { color: var(--dk-coral); font-weight: 800; font-size: 13.5px; }
.dk-ticket__txt strong { font-size: clamp(22px, 2.4vw, 30px); font-weight: 900; line-height: 1.3; }
.dk-ticket__txt span { color: var(--muted); }
.dk-ticket__buy { border-inline-start: 2px dashed var(--line-2); padding: 30px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.dk-ticket__buy b { font-size: 24px; font-weight: 900; }
.dk-ticket:hover .dk-btn--coral { background: var(--dk-coral-2); }
.dk-contest { margin-top: clamp(36px, 5vw, 70px); margin-bottom: clamp(36px, 5vw, 70px); border-radius: 22px; padding: clamp(26px, 3.4vw, 44px) clamp(22px, 3.6vw, 48px); display: flex; align-items: center; justify-content: space-between; gap: 26px;
  background: linear-gradient(90deg, rgba(110,19,40,.94), rgba(110,19,40,.6)), url(../img/slides/ipn-shayesteh.jpg) center / cover; color: #F4EADB; }
.dk-contest h2 { margin: 0 0 4px; font-size: clamp(21px, 2.3vw, 28px); font-weight: 900; color: #F4EADB; }
.dk-contest p { margin: 0; color: #E9CFC6; }

@media (max-width: 860px) {
  .dk-now__in { grid-template-columns: 1fr; }
  .dk-screen { order: -1; margin-inline: calc(var(--gutter) * -1); border-radius: 0; }
  .dk-now__acts .dk-btn { flex: 1 1 auto; }
  .dk-next { display: none; }
  .dk-ticket { grid-template-columns: 96px minmax(0, 1fr); }
  .dk-ticket__date b { font-size: 40px; } .dk-ticket__date span { font-size: 14px; }
  .dk-ticket__txt { padding: 18px 20px; }
  .dk-ticket__buy { grid-column: 1 / -1; border-inline-start: 0; border-top: 2px dashed var(--line-2); padding: 16px 20px; flex-direction: row; align-items: center; justify-content: space-between; }
  .dk-contest { flex-direction: column; align-items: stretch; text-align: start; }
}

/* ---- 5 · the welcome page: two doors ---------------------------------------------------------------------------- */
html[data-skin="dusk"] body.ld-body { background: #0A0B18; margin: 0; }
.dkw { position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; min-height: 100svh; color: #F6EBDD; font-family: "Vazirmatn", system-ui, sans-serif; }
.dkw__bar { position: absolute; z-index: 4; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 22px clamp(18px, 3vw, 44px); pointer-events: none; }
.dkw__bar > * { pointer-events: auto; }
.dkw__mark { font-family: "Schibsted Grotesk", sans-serif; font-weight: 900; font-size: 15px; letter-spacing: .02em; padding: 8px 16px; border-radius: 99px; background: rgba(10,11,24,.7); border: 1px solid rgba(243,220,192,.25); }
.dkw__tools { display: flex; align-items: center; gap: 10px; }
.dkw__acct { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 99px; background: rgba(10,11,24,.6); border: 1px solid rgba(243,220,192,.3); color: inherit; text-decoration: none; font-size: 14.5px; }
.dkw__acct svg, .dkw__acct .ic { width: 17px; height: 17px; }
.dkw__door { position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 clamp(24px, 4.4vw, 64px) clamp(40px, 7vh, 72px); overflow: hidden; isolation: isolate; color: inherit; text-decoration: none; }
.dkw__door::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--img) center / cover; transition: transform .9s cubic-bezier(.2,.8,.2,1); }
.dkw__door::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--wash); }
.dkw__door:hover::before, .dkw__door:focus-visible::before { transform: scale(1.04); }
.dkw__door--tv { --img: url(../img/slides/ipn-los-angeles.jpg); --wash: linear-gradient(180deg, rgba(13,18,48,0) 18%, rgba(13,18,48,.94) 78%); }
.dkw__door--sh { --img: url(../img/landing/hero-3.jpg); --wash: linear-gradient(180deg, rgba(110,19,40,.5), rgba(31,7,16,.95) 72%); }
.dkw__door small { font-size: 15px; font-weight: 800; margin-bottom: 8px; }
.dkw__door--tv small { color: #FF8A6E; } .dkw__door--sh small { color: #E2A93B; }
.dkw__door h2 { margin: 0 0 12px; color: #F6EBDD; }
.dkw__door--tv h2 { font-family: "Schibsted Grotesk", sans-serif; font-weight: 900; font-size: clamp(56px, 7vw, 100px); line-height: 1.05; letter-spacing: -.03em; }
.dkw__door--sh h2 { font-family: "Noto Nastaliq Urdu", "Vazirmatn", serif; font-weight: 700; font-size: clamp(38px, 4.6vw, 66px); line-height: 2.05; }
.dkw__door p { margin: 0 0 24px; font-size: 17px; line-height: 1.8; max-width: 34ch; opacity: .86; }
.dkw__go { align-self: flex-start; display: inline-flex; align-items: center; height: 54px; padding: 0 28px; border-radius: 99px; font-weight: 800; font-size: 16px; }
.dkw__door--tv .dkw__go { background: #FF6B4A; color: #1A0E0A; }
.dkw__door--sh .dkw__go { background: #E2A93B; color: #2A0A12; }
.dkw__live { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 14px; opacity: .9; }
.dkw__live.is-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #F0263D; box-shadow: 0 0 0 4px rgba(240,38,61,.25); }
.dkw__seam { position: absolute; z-index: 3; top: 0; bottom: 0; inset-inline-start: 50%; width: 1px; background: linear-gradient(180deg, transparent, rgba(243,220,192,.45) 30%, rgba(243,220,192,.45) 70%, transparent); }
.dkw__door:focus-visible { outline: 3px solid #F3DCC0; outline-offset: -6px; }
@media (max-width: 760px) {
  .dkw { grid-template-columns: 1fr; grid-auto-rows: minmax(46vh, auto); }
  .dkw__bar { position: absolute; padding: 14px 16px; }
  .dkw__seam { display: none; }
  .dkw__door { padding: 120px 20px 32px; }
  .dkw__door p { font-size: 15px; margin-bottom: 18px; }
  .dkw__go { align-self: stretch; justify-content: center; height: 50px; }
  .dkw__acct span { display: none; } .dkw__acct { width: 40px; padding: 0; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .dkw__door::before, .dk-screen__play, .dk-btn { transition: none; } .dk-onair::before { animation: none; } }