/* ==========================================================================
   Turāth House v3 — "The verified house of knowledge for the age of AI"
   Builds on base.css. Dark-first: a deep navy observatory with gold light.
   ========================================================================== */
:root { --deep: #050E17; --glass: rgba(16,39,59,.55); --line: rgba(201,168,76,.22); --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }
body { background: var(--paper); }
.mono { font-family: var(--mono); letter-spacing: .02em; }

/* header over the dark hero */
.v3 .topbar { background: var(--deep); }
.v3 .masthead { background: rgba(5,14,23,.82); border-bottom: 1px solid var(--line); }
.v3 .brand, .v3 .brand b { color: #fff; }
.v3 .brand span[lang="ur"] { color: var(--gold); }
.v3 .mainnav a { color: rgba(244,239,230,.85); }
.v3 .mainnav a:hover { color: #fff; border-color: var(--gold); }
.v3 .lang { color: var(--ivory); border-color: var(--line); }
.v3 .menu-toggle { color: var(--ivory); border-color: var(--line); }
@media (max-width: 920px) { .v3 .mainnav { background: var(--deep); } .v3 .mainnav a { border-color: var(--line); } }

/* ---------- HERO ---------- */
.hero3 { position: relative; background: var(--deep); color: var(--ivory); overflow: hidden; min-height: min(92vh, 860px); display: flex; align-items: center; }
.hero3 canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero3::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 60% at 50% 45%, transparent 0, rgba(5,14,23,.55) 60%, var(--deep) 100%); }
.hero3 .wrap { position: relative; z-index: 2; text-align: center; padding-block: 5rem 4rem; width: 100%; }
.hero3 .kicker { justify-content: center; color: var(--gold); }
.hero3 .kicker::after { content: ""; width: 28px; height: 1px; background: currentColor; }
.hero3 h1 { color: #fff; font-size: clamp(2.6rem, 6vw, 5.2rem); max-width: 15ch; margin-inline: auto; }
.hero3 h1 em { font-style: italic; color: var(--gold); }
.hero3 .lede { max-width: 44rem; margin: 1.5rem auto 2.2rem; font-size: clamp(1.02rem, 1.4vw, 1.18rem); color: rgba(244,239,230,.78); }
.hero3 .ar-line { font: 400 1.5rem/1.6 var(--ar); color: var(--gold); margin-bottom: 1.2rem; opacity: .9; }

/* Ask the Library */
.ask { max-width: 760px; margin: 0 auto; text-align: start; }
.ask-box { display: flex; align-items: center; gap: .8rem; background: rgba(244,239,230,.06); border: 1px solid rgba(201,168,76,.45); padding: .5rem .5rem .5rem 1.1rem; backdrop-filter: blur(10px); box-shadow: 0 0 0 6px rgba(201,168,76,.05), 0 30px 80px -30px rgba(201,168,76,.35); }
.ask-box svg { flex: none; width: 22px; height: 22px; stroke: var(--gold); fill: none; stroke-width: 1.6; }
.ask-box input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: #fff; font: 400 1.08rem var(--sans); padding: .75rem 0; }
.ask-box input::placeholder { color: rgba(244,239,230,.5); }
.ask-box button { background: var(--gold); color: var(--navy); border: 0; font: 600 .9rem var(--sans); padding: .8rem 1.2rem; cursor: pointer; }
.ask-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; justify-content: center; }
.ask-chips button { background: none; border: 1px solid var(--line); color: rgba(244,239,230,.8); font: 500 .8rem var(--sans); padding: .45rem .8rem; cursor: pointer; }
.ask-chips button:hover { border-color: var(--gold); color: #fff; }
.ask-results { margin-top: 1rem; background: rgba(5,14,23,.92); border: 1px solid var(--line); display: none; max-height: 380px; overflow: auto; }
.ask-results.show { display: block; }
.ask-results .hd { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 1rem; border-bottom: 1px solid var(--line); font: 500 .72rem var(--mono); color: rgba(244,239,230,.55); }
.ask-results a, .ask-results .none { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; padding: .9rem 1rem; border-bottom: 1px solid rgba(201,168,76,.1); text-decoration: none; color: var(--ivory); }
.ask-results a:hover, .ask-results a:focus { background: rgba(201,168,76,.08); outline: none; }
.ask-results b { font: 500 1.15rem var(--serif); color: #fff; }
.ask-results small { grid-column: 1; font-size: .82rem; color: rgba(244,239,230,.65); }
.ask-results .st { grid-row: 1 / span 2; grid-column: 2; align-self: center; font: 600 .62rem var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: .3rem .5rem; border: 1px solid; white-space: nowrap; }
.st.verified { color: #7FC3A0; } .st.prep { color: var(--gold); } .st.service { color: #9DB8D6; }
.ask-note { margin-top: .9rem; text-align: center; font: 500 .74rem var(--mono); color: rgba(244,239,230,.45); }
.ask-note b { color: var(--gold); font-weight: 600; }

.hero-stats { display: flex; justify-content: center; flex-wrap: wrap; gap: 0; margin-top: 3.2rem; border-top: 1px solid var(--line); }
.hero-stats div { padding: 1.1rem 1.8rem 0; text-align: center; }
.hero-stats b { display: block; font: 500 1.9rem/1 var(--serif); color: #fff; }
.hero-stats span { font: 500 .7rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(244,239,230,.5); }

/* ---------- MANIFESTO ---------- */
.manifesto { background: var(--deep); color: var(--ivory); padding-block: clamp(4rem, 8vw, 6.5rem); border-top: 1px solid var(--line); }
.manifesto h2 { color: #fff; max-width: 22ch; }
.manifesto h2 em { color: var(--gold); font-style: italic; }
.thesis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 3rem; }
.thesis div { background: var(--deep); padding: 2rem 1.7rem; }
.thesis .n { font: 500 .72rem var(--mono); color: var(--gold); letter-spacing: .1em; }
.thesis h3 { color: #fff; font-size: 1.55rem; margin: .8rem 0 .7rem; }
.thesis p { color: rgba(244,239,230,.72); font-size: .95rem; margin: 0; }

/* ---------- KNOWLEDGE GRAPH ---------- */
.graph-sec { background: var(--navy); color: var(--ivory); }
.graph-wrap { display: grid; grid-template-columns: 1fr 320px; gap: 0; border: 1px solid var(--line); background: radial-gradient(circle at 40% 50%, rgba(201,168,76,.07), transparent 65%), var(--deep); }
#kgraph { width: 100%; height: 560px; display: block; cursor: grab; touch-action: none; }
#kgraph text { font: 500 12px var(--sans); fill: rgba(244,239,230,.82); pointer-events: none; }
#kgraph .edge { stroke: rgba(201,168,76,.22); stroke-width: 1; transition: stroke .2s, opacity .2s; }
#kgraph .node circle { transition: r .2s, opacity .2s; cursor: pointer; }
#kgraph .dim { opacity: .15; }
#kgraph .edge.hot { stroke: var(--gold); stroke-width: 1.6; }
.graph-panel { border-inline-start: 1px solid var(--line); padding: 1.6rem; display: flex; flex-direction: column; gap: .8rem; }
.graph-panel .type { font: 600 .66rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.graph-panel h3 { color: #fff; font-size: 1.7rem; }
.graph-panel p { color: rgba(244,239,230,.72); font-size: .92rem; margin: 0; }
.graph-panel .links { font-size: .82rem; color: rgba(244,239,230,.55); }
.legend { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line); font: 500 .72rem var(--sans); color: rgba(244,239,230,.65); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-inline-end: .35rem; vertical-align: -1px; }
.legend .hollow { background: transparent !important; border: 1.5px dashed rgba(244,239,230,.6); }

/* ---------- ATLAS ---------- */
.atlas-sec { background: var(--deep); color: var(--ivory); }
.atlas-ctrl { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.atlas-ctrl button { background: none; border: 1px solid var(--line); color: rgba(244,239,230,.75); font: 500 .8rem var(--sans); padding: .5rem .9rem; cursor: pointer; }
.atlas-ctrl button[aria-pressed="true"] { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.atlas { position: relative; border: 1px solid var(--line); background: #06121D; }
#atlas { width: 100%; height: auto; display: block; }
#atlas .grat { stroke: rgba(201,168,76,.08); stroke-width: 1; }
#atlas .region { font: italic 500 15px var(--serif); fill: rgba(244,239,230,.22); letter-spacing: .12em; text-transform: uppercase; }
#atlas .place circle { fill: var(--gold); }
#atlas .place .halo { fill: rgba(201,168,76,.18); animation: pulse 3.2s ease-out infinite; transform-box: fill-box; transform-origin: center; }
#atlas .place text { font: 500 12px var(--sans); fill: rgba(244,239,230,.85); }
#atlas .place.off { opacity: .12; }
#atlas .route { fill: none; stroke: var(--gold); stroke-width: 1.4; stroke-dasharray: 5 5; opacity: .75; }
#atlas .route.off { opacity: 0; }
@keyframes pulse { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } }
.atlas-cap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1rem; padding: .8rem 1rem; border-top: 1px solid var(--line); font: 500 .74rem var(--mono); color: rgba(244,239,230,.5); }

/* ---------- PIPELINE / AI-READY ---------- */
.pipeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; position: relative; margin-top: 1rem; }
.pipeline::before { content: ""; position: absolute; top: 27px; inset-inline: 10%; height: 1px; background: linear-gradient(90deg, var(--gold-ink), var(--gold), var(--gold-ink)); }
.pipeline li { list-style: none; text-align: center; padding: 0 .8rem; position: relative; }
.pipeline .dot { width: 54px; height: 54px; margin: 0 auto 1rem; border: 1px solid var(--gold-ink); background: var(--paper); display: grid; place-items: center; transform: rotate(45deg); }
.pipeline .dot span { transform: rotate(-45deg); font: 600 .8rem var(--mono); color: var(--gold-ink); }
.pipeline li.human .dot { background: var(--navy); border-color: var(--navy); }
.pipeline li.human .dot span { color: var(--gold); }
.pipeline h3 { font-size: 1.25rem; color: var(--navy); }
.pipeline .who { display: block; font: 600 .62rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); margin: .3rem 0 .5rem; }
.pipeline p { font-size: .86rem; color: var(--ink-2); }
.airready { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; margin-top: 4rem; align-items: stretch; }
.code { background: var(--deep); color: #CFE0EE; font: 400 .8rem/1.7 var(--mono); padding: 1.3rem 1.4rem; border: 1px solid var(--line); overflow: auto; white-space: pre; }
.code .k { color: var(--gold); } .code .s { color: #9FD3B5; } .code .c { color: rgba(207,224,238,.4); }
.feat-list { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: .9rem; }
.feat-list li { display: grid; grid-template-columns: 26px 1fr; gap: .8rem; font-size: .95rem; color: var(--ink-2); }
.feat-list li::before { content: "◆"; color: var(--gold-ink); font-size: .8rem; padding-top: .2rem; }
.feat-list b { color: var(--navy); }

/* ---------- DIVISIONS ---------- */
.divisions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.division { background: var(--navy); padding: 1.7rem 1.6rem; display: flex; flex-direction: column; gap: .5rem; min-height: 210px; position: relative; }
.division .no { font: 500 .7rem var(--mono); color: rgba(244,239,230,.4); }
.division h3 { color: #fff; font-size: 1.5rem; }
.division .ur { font: 400 1.3rem/1.9 var(--ur); color: var(--gold); }
.division p { color: rgba(244,239,230,.7); font-size: .9rem; margin: 0; }
.division .state { margin-top: auto; align-self: flex-start; font: 600 .62rem var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: .32rem .55rem; border: 1px solid; }
.state.active { color: #7FC3A0; } .state.building { color: var(--gold); } .state.planned { color: rgba(244,239,230,.55); }
.division.ai { background: linear-gradient(135deg, #0F2A40, #142F2A); }
.division.ai::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(201,168,76,.5); pointer-events: none; }

/* ---------- ROADMAP ---------- */
.roadmap { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid var(--gold); margin-top: 1rem; }
.phase { padding: 1.5rem 1.4rem 0 0; position: relative; }
.phase::before { content: ""; position: absolute; top: -8px; inset-inline-start: 0; width: 14px; height: 14px; background: var(--paper); border: 2px solid var(--gold-ink); transform: rotate(45deg); }
.phase.now::before { background: var(--gold); }
.phase .yr { font: 600 .78rem var(--mono); color: var(--gold-ink); }
.phase h3 { color: var(--navy); font-size: 1.45rem; margin: .4rem 0 .6rem; }
.phase ul { margin: 0; padding-inline-start: 1rem; color: var(--ink-2); font-size: .9rem; }
.phase li { margin-bottom: .35rem; }
.phase .now-tag { display: inline-block; font: 600 .6rem var(--mono); letter-spacing: .1em; text-transform: uppercase; background: var(--gold); color: var(--navy); padding: .2rem .45rem; margin-inline-start: .4rem; vertical-align: 2px; }

@media (max-width: 920px) {
  .thesis, .divisions { grid-template-columns: 1fr 1fr; }
  .graph-wrap { grid-template-columns: 1fr; }
  .graph-panel { border-inline-start: 0; border-top: 1px solid var(--line); }
  #kgraph { height: 460px; }
  .pipeline { grid-template-columns: 1fr; gap: 1.6rem; }
  .pipeline::before { display: none; }
  .airready, .roadmap { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .thesis, .divisions, .airready, .roadmap { grid-template-columns: 1fr; }
  .roadmap { gap: 1.5rem; }
  .hero-stats div { padding-inline: 1rem; }
  .ask-box button { padding: .8rem .9rem; }
  #kgraph { height: 400px; }
}
@media (prefers-reduced-motion: reduce) { #atlas .place .halo { animation: none; } }

/* ---------- confidence layer: bolder type, solid cards (lessons from the Gemini draft) ---------- */
h1, h2 { font-weight: 600; letter-spacing: -.015em; }
h3 { font-weight: 600; }
.section-head p { font-size: 1.1rem; }
.card { border-radius: 14px; }
.thesis { background: none; border: 0; gap: 1.1rem; }
.thesis div { border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(180deg, rgba(16,39,59,.6), rgba(5,14,23,.6)); }
.divisions { background: none; border: 0; gap: 1.1rem; }
.division { border-radius: 14px; border: 1px solid var(--line); box-shadow: 0 20px 40px -28px rgba(0,0,0,.7); }
.division.ai::after { border-radius: 14px; }
.graph-wrap, .atlas { border-radius: 16px; overflow: hidden; }
.specimen, .ledger { border-radius: 14px; overflow: hidden; box-shadow: 0 24px 50px -34px rgba(11,29,45,.35); }
.ask-box { border-radius: 14px; }
.ask-box button { border-radius: 10px; }
.ask-results { border-radius: 14px; }
.ask-chips button, .atlas-ctrl button { border-radius: 999px; }
.btn { border-radius: 10px; }
.state, .ask-results .st { border-radius: 999px; }
.phase-card { background: #fff; border: 1px solid var(--rule); border-radius: 14px; padding: 1.6rem; box-shadow: 0 24px 50px -36px rgba(11,29,45,.35); }
.phase-card.now { border: 2px solid var(--gold); }
.phase-card.far { background: var(--navy); color: var(--ivory); border-color: var(--navy); }
.phase-card.far h3 { color: #fff; } .phase-card.far ul { color: rgba(244,239,230,.75); }
.roadmap { border-top: 0; gap: 1.1rem; }
.phase { padding: 0; }
.phase::before { display: none; }
.biling { display: grid; grid-template-columns: 1fr 1fr; }
.biling > div { padding: 1.8rem; }
.biling > div + div { border-inline-start: 1px solid var(--rule); }
.biling small { display: block; font: 600 .66rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: .8rem; }
.biling [lang="ar"] { font-size: 2rem; line-height: 1.9; color: var(--navy); margin: 0; }
.biling [lang="ur"] { font-size: 1.9rem; line-height: 2.1; color: var(--ink); margin: 0; }
.biling .en { grid-column: 1 / -1; border-top: 1px solid var(--rule); font: italic 500 1.35rem/1.5 var(--serif); padding: 1.3rem 1.8rem; margin: 0; }
@media (max-width: 700px) { .biling { grid-template-columns: 1fr; } .biling > div + div { border-inline-start: 0; border-top: 1px solid var(--rule); } }
/* Urdu: compact and beautiful (house preference: BBC Urdu / Jang scale) */
.era .ur { font-size: 1.15rem; line-height: 1.9; }
.division .ur { font-size: 1.1rem; }
.biling [lang="ur"] { font-size: 1.45rem; line-height: 2.05; }
.poster [lang="ur"] { font-size: 2.1rem; }
.v3 .brand span[lang="ur"] { font-size: 1.1rem; }
.lang { font-size: 1.15rem; }
.phase.phase-card { padding: 1.6rem; }
.v3 .masthead { background: #050E17; }
.era .ur { font-size: 1.3rem; }
.division .ur { font-size: 1.3rem; }
.channels a, .reel { border-radius: 12px; }
.code { border-radius: 14px; }
.lang { font-size: 1.3rem; }
@media (max-width: 600px) {
  #kgraph text { font-size: 24px; }
  #kgraph { height: 340px; }
  #atlas .place text { font-size: 24px; }
  #atlas .region { font-size: 22px; }
}

/* ---------- Documentaries ---------- */
.docs { background: var(--deep); }
.flagship { display: grid; grid-template-columns: 1fr 1.1fr; border: 1px solid rgba(201,168,76,.5); border-radius: 18px; overflow: hidden; background: linear-gradient(135deg, #0F2A40 0%, #07131E 60%); box-shadow: 0 40px 90px -50px rgba(201,168,76,.45); }
.flag-art { position: relative; min-height: 380px; display: grid; place-items: center; overflow: hidden;
  background:
    radial-gradient(circle at 50% 55%, rgba(201,168,76,.28), transparent 55%),
    conic-gradient(from 22.5deg at 50% 55%, rgba(201,168,76,.10) 0 12.5%, transparent 0 25%, rgba(201,168,76,.10) 0 37.5%, transparent 0 50%, rgba(201,168,76,.10) 0 62.5%, transparent 0 75%, rgba(201,168,76,.10) 0 87.5%, transparent 0),
    #081726; }
.flag-art::before, .flag-art::after { content: ""; position: absolute; width: 62%; aspect-ratio: 1; border: 1px solid rgba(201,168,76,.55); top: 50%; left: 50%; transform: translate(-50%, -45%); }
.flag-art::after { transform: translate(-50%, -45%) rotate(45deg); }
.flag-art span { position: relative; z-index: 1; font: 400 clamp(2.4rem, 5vw, 3.6rem)/1.6 var(--ur); color: var(--gold); text-shadow: 0 0 40px rgba(201,168,76,.5); }
.flag-body { padding: clamp(1.6rem, 3.5vw, 2.8rem); display: flex; flex-direction: column; gap: .2rem; }
.flag-body h3 { color: #fff; font-size: clamp(2rem, 3.4vw, 2.8rem); display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 1rem; }
.flag-body h3 [lang="ur"] { font: 400 1.6rem/1.8 var(--ur); color: var(--gold); }
.flag-body .sub { font: italic 500 1.25rem var(--serif); color: rgba(244,239,230,.75); margin-bottom: .8rem; }
.flag-body p { color: rgba(244,239,230,.8); }
.span-strip { list-style: none; margin: .6rem 0 1.4rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; counter-reset: s; }
.span-strip li { font: 500 .72rem var(--mono); color: rgba(244,239,230,.75); border: 1px solid var(--line); border-radius: 999px; padding: .3rem .65rem; }
.span-strip li:first-child, .span-strip li:last-child { border-color: var(--gold); color: var(--gold); }
.flag-body .state { align-self: flex-start; }
.films-hd { font: 600 .72rem var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin: 3rem 0 1rem; }
.films { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.films.three { grid-template-columns: repeat(3, 1fr); }
.filmcard { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; text-decoration: none; color: var(--ivory); background: var(--navy); transition: transform .25s, border-color .25s; }
a.filmcard:hover { transform: translateY(-3px); border-color: var(--gold); }
.fc-art { position: relative; aspect-ratio: 16 / 8; display: grid; place-items: center; overflow: hidden; background: #0A1B2A; }
.films.three .fc-art { aspect-ratio: 16 / 9; }
.fc-art span { position: relative; z-index: 2; font: 400 clamp(1.5rem, 2.6vw, 2.1rem)/1.7 var(--ur); color: var(--gold); text-shadow: 0 2px 20px rgba(0,0,0,.6); text-align: center; padding: 0 1rem; }
.fc-art.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.fc-art.photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,14,23,.15), rgba(5,14,23,.75)); z-index: 1; }
.fc-art.sufi { background: radial-gradient(circle at 50% 50%, rgba(201,168,76,.22), transparent 60%), repeating-radial-gradient(circle at 50% 50%, transparent 0 18px, rgba(201,168,76,.12) 19px 20px), #0B1F2E; }
.fc-art.stone { background: radial-gradient(ellipse at 50% 60%, rgba(0,0,0,.0), #02070C 70%), radial-gradient(circle at 50% 58%, #1b1b1b 0 16%, transparent 17%), conic-gradient(from 0deg at 50% 58%, rgba(201,168,76,.18), transparent 25%, rgba(201,168,76,.18) 50%, transparent 75%, rgba(201,168,76,.18)), #0A0F14; }
.fc-art.caliphs { background: linear-gradient(180deg, transparent 60%, rgba(5,14,23,.6)), repeating-linear-gradient(90deg, transparent 0 46px, rgba(201,168,76,.12) 46px 48px), radial-gradient(ellipse at 50% 100%, rgba(201,168,76,.25), transparent 60%), #0E2233; }
.fc-art.people { background: radial-gradient(circle at 20% 30%, rgba(157,184,214,.18), transparent 40%), radial-gradient(circle at 80% 70%, rgba(201,168,76,.2), transparent 45%), #0B1D2D; }
.fc-art.people span { font-size: clamp(1.2rem, 2vw, 1.55rem); }
.fc-body { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: .5rem; }
.fc-body .state { align-self: flex-start; }
.fc-body b { font: 600 1.45rem var(--serif); color: #fff; }
.fc-body p { color: rgba(244,239,230,.72); font-size: .9rem; margin: 0; }
.fc-body .watch { margin-top: auto; padding-top: .6rem; font: 600 .85rem var(--sans); color: var(--gold); }
.filmcard.soon { opacity: .96; }
.nonsect { margin-top: 2.6rem; padding: 1.1rem 1.4rem; border: 1px solid var(--line); border-inline-start: 3px solid var(--gold); border-radius: 12px; color: rgba(244,239,230,.8); font-size: .98rem; }
.nonsect b { font: 600 .68rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-inline-end: .8rem; }
@media (max-width: 920px) { .flagship { grid-template-columns: 1fr; } .flag-art { min-height: 240px; } .films.three { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .films, .films.three { grid-template-columns: 1fr; } }
.state { display: inline-block; font: 600 .64rem var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: .32rem .6rem; border: 1px solid; border-radius: 999px; }
.fc-art.photo span { background: rgba(5,14,23,.62); border-radius: 12px; padding: .1rem 1.1rem .5rem; }

/* ---------- compact rhythm ---------- */
.section { padding-block: clamp(2.8rem, 5vw, 4.2rem); }
.manifesto { padding-block: clamp(2.8rem, 5vw, 4.2rem); }
.section-head { margin-bottom: 1.8rem; }
.section-head p { margin-top: .6rem; }
.hero3 { min-height: 0; }
.hero3 .wrap { padding-block: 3.6rem 2.6rem; }
.hero3 .lede { margin: 1.1rem auto 1.6rem; }
.hero-stats { margin-top: 2.2rem; }
.thesis { margin-top: 1.8rem; }
.thesis div { padding: 1.5rem 1.5rem; }
#kgraph { height: 480px; }
.films-hd { margin: 2rem 0 .8rem; }
.nonsect { margin-top: 1.8rem; }
.airready { margin-top: 2.6rem; }
.motto-band { margin-top: 2rem; }
.era { padding-block: 1rem 1.1rem; }
.division { min-height: 0; padding: 1.4rem 1.4rem; }
.flag-art { min-height: 320px; }
.feature { gap: clamp(1.6rem, 4vw, 3.2rem); }
.ledger { margin: 1.1rem 0; }
.pipeline .dot { margin-bottom: .7rem; }
@media (max-width: 600px) { .section { padding-block: 2.4rem; } .hero3 .wrap { padding-block: 2.6rem 2rem; } }
.eras-track { align-items: start; }
.era { border-inline-end: 0; border-inline-start: 1px solid var(--rule); }
.era:first-child { border-inline-start: 0; }
.manifesto h2 { max-width: 32ch; }
.graph-sec .section-head, .atlas-sec .section-head { margin-bottom: 1.2rem; }

/* ---------- Urdu edition: Jameel Noori throughout, compact (BBC Urdu / Jang scale) ---------- */
.urdu, .urdu h1, .urdu h2, .urdu h3, .urdu h4, .urdu .btn, .urdu input, .urdu button, .urdu .kicker, .urdu .state, .urdu .mono,
.urdu .hero-stats span, .urdu .thesis .n, .urdu .ask-note, .urdu .films-hd, .urdu .pipeline .who, .urdu .phase .yr, .urdu .now-tag,
.urdu .nonsect b, .urdu .graph-panel .type, .urdu .era .dates, .urdu .badge, .urdu .ledger h4, .urdu .ledger .grade, .urdu .cite b,
.urdu .upcoming h4, .urdu .specimen header, .urdu .biling small, .urdu .footer h4, .urdu .atlas-cap, .urdu .fc-body b, .urdu .reel b,
.urdu .brand b, .urdu .mainnav a, .urdu .topbar, .urdu .channels small, .urdu .legend, .urdu .span-strip li, .urdu .division .no,
.urdu .pipeline .dot span, .urdu .feature-main .stand, .urdu .upcoming b, .urdu .upcoming em, .urdu .motto-band, .urdu .flag-body .sub, .urdu .era li a, .urdu .era li span {
  font-family: var(--ur); letter-spacing: 0; text-transform: none; font-style: normal;
}
.urdu { font-size: 1.06rem; line-height: 2; }
.urdu h1, .urdu h2, .urdu h3, .urdu h4 { font-weight: 400; line-height: 1.75; }
.urdu .hero3 h1 { font-size: clamp(2rem, 4.4vw, 3.5rem); max-width: 18ch; }
.urdu h2 { font-size: clamp(1.6rem, 3vw, 2.35rem); }
.urdu h3 { font-size: clamp(1.15rem, 1.7vw, 1.4rem); }
.urdu .kicker { font-size: .95rem; }
.urdu .hero3 h1 em, .urdu .manifesto h2 em { font-style: normal; }
.urdu .brand b { font-size: 1.45rem; line-height: 1.6; }
.urdu .brand .brand-en { display: block; font: 500 .78rem var(--sans); color: var(--gold); letter-spacing: .04em; }
.urdu .lang.latin { font: 500 .85rem var(--sans); padding: .55rem .8rem; }
.urdu .mainnav a { font-size: 1.05rem; }
.urdu .ask-box input { font: 400 1.05rem var(--ur); }
.urdu .ask-results b { font: 400 1.15rem/1.8 var(--ur); }
.urdu .ask-results small, .urdu .ask-results .st { font-family: var(--ur); letter-spacing: 0; }
.urdu .hero-stats b { font-family: var(--ur); font-size: 2rem; line-height: 1.4; }
.urdu .hero-stats span { font-size: .9rem; }
.urdu .era h3 { font-size: 1.2rem; }
.urdu .era .dates { font-size: .9rem; }
.urdu .pipeline .dot span { font-size: .95rem; }
.urdu .phase .yr { font-size: 1rem; }
.urdu .motto-band { font-size: clamp(1.3rem, 2.2vw, 1.7rem); }
.urdu .feature-main .stand { font-size: 1.15rem; line-height: 2; }
.urdu .fc-body b { font-size: 1.25rem; line-height: 1.7; }
.urdu .flag-body h3 [lang="en"] { font: 500 1.1rem var(--serif); color: rgba(244,239,230,.7); }
.urdu .flag-body h3 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.urdu .biling [lang="ur"], .urdu .biling div + div p { font-size: 1.45rem; }
.urdu .ledger li { grid-template-columns: 90px 1fr; }
.urdu .topbar .motto { font-family: var(--ur); font-style: normal; font-size: .9rem; }
.urdu .footer .base em { font-family: var(--ur); font-style: normal; }
.urdu p, .urdu li { line-height: 2; }
.urdu #kgraph text, .urdu #atlas text { font-family: var(--sans); }
.skip { left: 1rem; right: auto; top: 0; transform: translateY(-120%); transition: transform .15s; }
.skip:focus { transform: none; left: 1rem; }
.urdu { font-size: 1.2rem; }
.urdu .section-head p, .urdu .lede { font-size: 1.22rem; }
.urdu .thesis p, .urdu .division p, .urdu .fc-body p, .urdu .pipeline p, .urdu .phase ul, .urdu .feat-list li, .urdu .ledger li, .urdu .upcoming span, .urdu .graph-panel p, .urdu .reel span { font-size: 1.08rem; }
.urdu .upcoming li::before { content: counter(up, urdu); font-family: var(--ur); }
.urdu .ask-note, .urdu .hero-stats span, .urdu .atlas-cap { font-size: .95rem; }
.urdu .mainnav a { font-size: 1.15rem; }
.urdu .kicker { font-size: 1.02rem; }
.urdu .state { font-size: .88rem; padding: .15rem .7rem .35rem; }
.urdu .ask-chips button, .urdu .atlas-ctrl button { font-size: 1rem; padding: .3rem .85rem .5rem; }

/* ---------- round 2: no dead space ---------- */
.hero3 h1 { font-size: clamp(2.3rem, 4.6vw, 4rem); max-width: 19ch; }
.hero3 .wrap { padding-block: 3rem 2.2rem; }
.eras-track { grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; gap: 1rem; border-top: 0; padding: 0; }
.eras::after { display: none; }
.era { border: 1px solid var(--rule); border-radius: 14px; background: #fff; padding: 1.1rem 1.1rem 1.2rem; }
.era:first-child { border-inline-start: 1px solid var(--rule); }
.era::before { top: -7px; }
.era.has { border-color: rgba(138,109,34,.45); box-shadow: 0 18px 40px -30px rgba(11,29,45,.4); }
.era ul { margin-top: .8rem; }
.feature { align-items: start; }
.published h4 { font: 600 .72rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin-bottom: .9rem; }
.published .related { gap: .55rem; }
.published .rel { grid-template-columns: 52px 1fr; padding: .5rem .6rem; }
.published .rel .mini { width: 52px; height: 60px; font-size: .9rem; line-height: 1.3; }
.published .rel b { font-size: 1.08rem; }
.translation { align-items: center; }
.section-head p { max-width: 46rem; }
@media (max-width: 920px) { .eras-track { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .eras-track { grid-template-columns: 1fr; } }

/* ---------- Urdu: larger, confident type (titles were too small) ---------- */
.urdu { font-size: 1.32rem; }
.urdu .topbar { font-size: 1.05rem; }
.urdu .topbar .wrap { min-height: 42px; }
.urdu .topbar .motto { font-size: 1.05rem; }
.urdu .mainnav a { font-size: 1.45rem; padding-block: .2rem .5rem; }
.urdu .mainnav ul { gap: 2rem; }
.urdu .masthead .btn, .urdu .btn { font-size: 1.2rem; padding: .55rem 1.3rem .85rem; }
.urdu .brand b { font-size: 1.75rem; }
.urdu .hero3 h1 { font-size: clamp(2.6rem, 5.4vw, 4.4rem); line-height: 1.75; max-width: 20ch; }
.urdu .hero3 .lede { font-size: clamp(1.3rem, 1.8vw, 1.5rem); line-height: 2.05; }
.urdu .kicker { font-size: 1.22rem; }
.urdu h2 { font-size: clamp(2.1rem, 3.8vw, 3.1rem); line-height: 1.7; }
.urdu h3 { font-size: clamp(1.45rem, 2.1vw, 1.75rem); }
.urdu .section-head p { font-size: 1.38rem; line-height: 2.05; }
.urdu .ask-box input { font-size: 1.3rem; }
.urdu .ask-box button { font-size: 1.2rem; }
.urdu .ask-chips button, .urdu .atlas-ctrl button { font-size: 1.15rem; }
.urdu .ask-note { font-size: 1.05rem; }
.urdu .hero-stats b { font-size: 2.4rem; }
.urdu .hero-stats span { font-size: 1.1rem; }
.urdu .thesis .n { font-size: 1.05rem; }
.urdu .thesis p, .urdu .division p, .urdu .fc-body p, .urdu .pipeline p, .urdu .phase ul, .urdu .feat-list li, .urdu .ledger li, .urdu .graph-panel p, .urdu .reel span, .urdu .translation li, .urdu .translation p, .urdu .letters p, .urdu .nonsect, .urdu .flag-body p { font-size: 1.2rem; line-height: 2.05; }
.urdu .era h3 { font-size: 1.45rem; }
.urdu .era .dates { font-size: 1.05rem; }
.urdu .era li a, .urdu .era li span { font-size: 1.1rem; line-height: 1.8; }
.urdu .era li small, .urdu .badge { font-size: .95rem; }
.urdu .state { font-size: 1rem; }
.urdu .fc-body b { font-size: 1.5rem; }
.urdu .films-hd, .urdu .published h4, .urdu .ledger h4, .urdu .graph-panel .type, .urdu .specimen header, .urdu .biling small { font-size: 1.1rem; }
.urdu .published .rel b { font-size: 1.15rem; line-height: 1.7; }
.urdu .published .rel small { font-size: .98rem; }
.urdu .pipeline h3 { font-size: 1.5rem; }
.urdu .pipeline .who { font-size: 1.05rem; }
.urdu .phase h3 { font-size: 1.55rem; }
.urdu .phase .yr { font-size: 1.15rem; }
.urdu .division h3 { font-size: 1.6rem; }
.urdu .footer, .urdu .footer h4 { font-size: 1.12rem; }
.urdu .footer h4 { font-size: 1.15rem; }
.urdu .channels a { font-size: 1.05rem; }
.urdu .channels small { font-size: 1rem; }
.urdu .feature-main h3 { font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1.7; }
.urdu .feature-main .stand { font-size: 1.35rem; }
.urdu .byline { font-size: 1.05rem; }
.urdu .link { font-size: 1.12rem; }
.urdu .biling div + div p { font-size: 1.6rem; }
.urdu .motto-band { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
@media (max-width: 920px) { .urdu .mainnav a { font-size: 1.35rem; } }
.urdu .hero3 h1 { line-height: 1.6; }

/* ---------- round 3: tighter rhythm, photo cards ---------- */
.section { padding-block: clamp(2.2rem, 4vw, 3.2rem); }
.manifesto { padding-block: clamp(2.2rem, 4vw, 3.2rem); }
.section-head { margin-bottom: 1.3rem; gap: 1rem 2rem; }
.kicker { margin-bottom: .6rem; }
.hero3 .wrap { padding-block: 2.6rem 2rem; }
.hero-stats { margin-top: 1.6rem; }
.hero-stats div { padding-top: .8rem; }
.thesis { margin-top: 1.3rem; }
.films-hd { margin: 1.6rem 0 .7rem; }
.reels { margin-top: 1.4rem; }
.nonsect { margin-top: 1.2rem; }
.airready { margin-top: 2rem; gap: 2rem; }
.motto-band { margin-top: 1.4rem; }
.pipeline { margin-top: .4rem; }
.feature-main .ledger { margin: .9rem 0; }
.img-credits { margin-top: 1.2rem; font: 400 .72rem/1.5 var(--sans); color: rgba(244,239,230,.45); }
.img-credits a { color: inherit; }
.fc-art.photo img { object-position: center; }
.urdu .img-credits { font-family: var(--ur); font-size: .9rem; }
@media (max-width: 600px) { .section { padding-block: 2rem; } }