/* ═══════════════════════════════════════════════════════════════════
   GULSHAN EMPIRE — "EMPIRE NOIR" night system (A/B challenger to Ivory)
   The same architecture magazine, printed for the night shift:
   warm charcoal paper · gilded hairlines · lit windows · oxblood seals.
   Loads AFTER main.css and re-keys its tokens, then patches every
   surface the flip can't express. All pairs verified ≥ AA on dark:
   paper #F2EDE2 ≈ 14.8:1 · muted #B3A893 ≈ 7.6:1 · gold #E4C878 ≈ 10.3:1
   raw gold #B08D3A ≈ 5.4:1 (legal as text on noir) · charcoal-on-gold ≈ 5.6:1
   Motion: transform/opacity only. Grain + lamplight are pure CSS.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* re-keyed system tokens (names keep main.css wiring intact) */
  --ivory:#14110C;        /* page: warm espresso charcoal */
  --stone:#1C1813;        /* banded sections */
  --sand:#3A332A;         /* hairline borders on dark */
  --forest:#B08D3A;       /* "ink" accent → antique gold (5.4:1) */
  --forest-700:#C9A24E;   /* hover gold */
  --ink:#F2EDE2;          /* body text: candle-lit paper */
  --taupe:#B3A893;        /* secondary text (7.6:1) */
  --gold:#B08D3A;         /* hairlines — now they glint */
  --gold-text:#E4C878;    /* emphatic gold (10.3:1) */
  --oxblood:#6E1423;      /* the seal — fills only on noir */
  --white:#1E1A14;        /* raised surfaces: cards, plates, modals */
  --brick:#E08A8A;        /* error, lifted for dark (6.2:1) */
  --ok:#6FBF8F;           /* success, lifted for dark */
  --shadow:0 26px 64px -22px rgba(0,0,0,.62);
  --paper:#F2EDE2;
  --noir-deep:#0F0C08;    /* footer / vitrine wells */
}

/* ── atmosphere ─────────────────────────────────────────── */
html{background:var(--ivory)}
/* film grain over everything, incl. modals — pure CSS, no asset */
html::after{
  content:"";position:fixed;inset:-40px;z-index:2147483000;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.05;mix-blend-mode:soft-light;
}
body{background:
  radial-gradient(1100px 520px at 78% -120px,rgba(228,200,120,.07),transparent 60%),
  radial-gradient(900px 600px at -10% 104%,rgba(110,20,35,.06),transparent 55%),
  var(--ivory)}

/* headings stay paper; the gild carries the gold */
h1,h2,h3,.display{color:var(--paper)}
em.gild{color:var(--gold-text)}
section.band-forest{background:var(--noir-deep)}
section.band-forest h2,section.band-forest h3{color:var(--paper)} /* main.css sets these to --ivory, which is now charcoal */
section.band-forest .lede,section.band-forest p{color:#CBC0AC}
section.band-forest em.gild{color:var(--gold-text)}

/* gold-foil headline word: poured, then settles (one-shot) */
.hero h1 em.gild{
  background:linear-gradient(105deg,#E4C878 8%,#B08D3A 38%,#F4E3AE 52%,#A6843B 78%,#E4C878 96%);
  background-size:230% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:noirFoil 1.6s cubic-bezier(.25,.6,.25,1) .35s both;
}
@keyframes noirFoil{from{background-position:130% 0}to{background-position:0% 0}}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .hero h1 em.gild{background:none;color:var(--gold-text)}
}

/* lamplight pooled over the cover story */
.hero{position:relative}
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(46% 42% at 72% 26%,rgba(228,200,120,.10),transparent 70%);
}
.hero .wrap{position:relative;z-index:1}

/* ── header / nav ───────────────────────────────────────── */
.site-head{background:rgba(20,17,12,.86);backdrop-filter:saturate(120%) blur(12px)}
/* wordmark sizing lives in main.css (single source of truth); colors flow from re-keyed tokens */
nav.primary a{color:var(--ink)}
nav.primary a:hover{color:var(--gold-text)}
.tel-link{color:var(--gold-text)}
.menu-btn span{background:var(--gold-text)}
.mob-nav{background:var(--noir-deep)}
.mob-nav a.link{color:var(--paper);border-bottom-color:rgba(176,141,58,.3)}
.mob-nav a.link:hover{color:var(--gold-text)}
.mob-nav a.link small{color:#8F8678}
.mob-nav a.link[aria-current="page"]{color:var(--gold-text)}
.mob-nav .mob-cta a.c1{background:var(--gold);color:#1A1408}
.mob-nav .mob-cta a.c2{background:var(--oxblood);color:var(--paper)}

/* ── buttons: the luxury inversion ──────────────────────── */
.btn-primary{background:var(--gold);color:#1A1408}
.btn-primary:hover{background:var(--forest-700);color:#14100A}
.btn-ghost{color:var(--gold-text);border-color:var(--gold)}
.btn-ghost:hover{background:var(--gold);color:#1A1408}
.btn-gold{color:var(--gold-text);border-color:var(--gold)}
.btn-gold:hover{background:var(--gold-text);color:#1A1408}
.btn-oxblood{background:var(--oxblood);color:var(--paper)}
.btn-oxblood:hover{background:#581021;color:var(--paper)}

/* ── editorial fittings ─────────────────────────────────── */
.eyebrow .roman,.kicker .roman{color:var(--gold-text)}
.ribbon{color:var(--paper)}
.chip{background:var(--white)}
.chip b{color:var(--gold-text)}
.answer-block{background:var(--white)}
.answer-block .q{color:var(--paper)}
.plate{box-shadow:0 0 0 1px rgba(176,141,58,.14),var(--shadow)}
.plate--art{background:linear-gradient(168deg,#201B14,#171310)}
.plate figcaption{color:#9A8F7D}
/* the campaign king plate: tall cutout, centred, capped height */
.plate-king{background:radial-gradient(70% 60% at 50% 38%,#241D14,#15110C)}
.plate-king img{max-height:460px;width:auto;margin:0 auto}
/* night-cut ALL day-print inline SVG plates — CSS wins over presentation attrs.
   The ivory art palette is tokenized, so attribute selectors re-ink everything:
   ivory/stone/sand grounds → charcoal wells · forest ink → gold/paper · taupe → muted. */
.plate svg rect[fill="#FBF9F4"],.plate svg rect[fill="#FFFFFF"],.plate svg rect[fill="#fff"]{fill:#1B1712}
.plate svg rect[fill="#F2EDE3"],.plate svg rect[fill="#E7DFD0"]{fill:#221C15}
.plate svg g[fill="#13352A"],.plate svg text[fill="#13352A"]{fill:#F2EDE2}
.plate svg [fill="#1F1B16"]{fill:#F2EDE2}
.plate svg text[fill="#5B5347"],.plate svg [fill="#5B5347"]{fill:#B3A893}
.plate svg text[fill="#6E1423"]{fill:#E4C878}
.plate svg circle[fill="#13352A"]{fill:#C9A24E}
.plate svg g[fill="#1C4A3A"],.plate svg [fill="#1C4A3A"]{fill:#C9A24E}
.plate svg circle[fill="#6E1423"],.plate svg g[fill="#6E1423"]{fill:#B84A5E}
.plate svg [stroke="#13352A"]{stroke:#C9A24E}
.plate svg [stroke="#1C4A3A"]{stroke:#8A7A4E}
.plate svg [stroke="#5B5347"]{stroke:#8F8678}
.plate svg [stroke="#1F1B16"]{stroke:#D9CDB9}
.plate svg [stroke="#6E1423"]{stroke:#B84A5E}
.plate svg [stroke="#9A2A2A"]{stroke:#C36A6A}
.card .price-fig{color:var(--gold-text)}
.fact-bar .ox b{color:#F4E3AE}
.spec-table td.num{color:var(--gold-text)}
.amen b{color:var(--paper)}
.author-card b{color:var(--paper)}
.author-card .avatar{background:var(--noir-deep);color:var(--gold-text)}
.faq summary{color:var(--paper)}
.step::before{color:var(--gold-text)}
.steps .step{background:var(--white)}
.form-thankyou h4{color:var(--paper)}
.toc a{color:var(--gold-text);border-bottom-color:var(--sand)}
.toc a:hover{border-bottom-color:var(--gold)}
.crumbs a:hover{color:var(--gold-text)}
.micro-trust a{color:var(--gold-text)}
.updated{background:var(--white)}
.link-btn{color:var(--gold-text)}
.link-btn:hover{color:var(--paper)}
a:hover{color:var(--forest-700)}

/* hairlines glint very slightly */
.eyebrow::before,.kicker::before,.center .eyebrow::after{box-shadow:0 1px 8px rgba(228,200,120,.25)}

/* ── forms (the money component, after dark) ────────────── */
.fg input{background:#100D09;border-color:var(--sand);color:var(--paper)}
.fg input:focus{background:#171310;border-color:var(--gold)}
.fg input::placeholder{color:#8F8678}
.fg label{color:var(--taupe)}
.fg label .req{color:var(--brick)}
.form-err{color:var(--brick)}
.form-thankyou .check svg{stroke:var(--ok)}
.lead-card{box-shadow:0 0 0 1px rgba(176,141,58,.16),var(--shadow)}

/* ── modals: lit vitrines ───────────────────────────────── */
.modal-overlay{background:rgba(6,4,2,.72)}
.modal{box-shadow:0 0 0 1px rgba(176,141,58,.18),0 40px 90px -24px rgba(0,0,0,.8)}
.modal-close{background:var(--noir-deep);color:var(--taupe)}
.modal-close:hover{background:#241E16;color:var(--paper)}
.fp-tags span{background:var(--noir-deep);color:var(--gold-text)}

/* ── sticky conversion rail: solid gold ─────────────────── */
.mobile-dock{background:var(--gold);border-top:1px solid #8A6D27}
.mobile-dock a,.mobile-dock button{color:#1A1408}
.mobile-dock a+a,.mobile-dock button{border-left:1px solid rgba(26,20,8,.3)}
.mobile-dock .enq{background:var(--oxblood);color:var(--paper)}
.side-sticky{background:var(--gold);color:#1A1408}
.side-sticky:hover{background:var(--forest-700)}
.fab-mini{background:var(--white);color:var(--gold-text)}
.fab-mini svg{stroke:var(--gold-text)}

/* ── footer: the colophon well ──────────────────────────── */
footer.site-foot{background:var(--noir-deep);color:#C4B9A5}
footer.site-foot a{color:#E2D8C4}
footer.site-foot a:hover{color:var(--gold-text)}
.foot-disclaimer{color:#A29783;border-top-color:rgba(176,141,58,.35)}
.foot-disclaimer strong{color:#E2D8C4}
.foot-legal{color:#8F8678}
.foot-mark{border-top-color:rgba(176,141,58,.35)}

/* skip link on gold */
.skip-link{background:var(--gold);color:#1A1408}

/* ── the lit windows of the night plate ─────────────────── */
.wins rect{fill:#E4C878;opacity:.5}
.wins rect.dim{opacity:.18}
.wins rect.tw{animation:noirTw 5.2s ease-in-out infinite}
.wins rect.tw:nth-child(2n){animation-delay:1.4s}
.wins rect.tw:nth-child(3n){animation-delay:2.6s;animation-duration:6.4s}
.wins rect.tw:nth-child(5n){animation-delay:3.7s}
.wins rect.tw:nth-child(7n){animation-delay:.8s;animation-duration:7.2s}
@keyframes noirTw{0%,100%{opacity:.24}50%{opacity:.85}}

/* table scrollbars on dark */
.table-scroll{scrollbar-color:var(--sand) transparent}
.table-scroll::-webkit-scrollbar-thumb{background:var(--sand)}
.table-scroll.has-scroll{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),rgba(0,0,0,.28));mask-image:linear-gradient(90deg,#000 calc(100% - 44px),rgba(0,0,0,.28))}

/* selection: gold leaf */
::selection{background:var(--gold);color:#14110C}