/*!
Theme Name: Deepak Babu Kandel
Theme URI: https://github.com/bhojraj/bhoj-theme-personal
Author: Bhoj Raj Neupane
Author URI: https://bhojraj.com.np
Description: Personal site for Er. Deepak Babu Kandel, engineer and former Mayor of Palungtar. Content is managed with Secure Custom Fields; every page block is a field group.
Version: 2.0.0
Requires at least: 6.2
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: bhoj-theme-personal
Tags: custom-menu, featured-images, threaded-comments, translation-ready, one-column
*/

/* =========================================================
   Er. Deepak Babu Kandel
   Clean light theme. Poppins throughout, Mukta carries the
   Devanagari glyphs that Poppins does not have.
   Colour is used sparingly: ink for type, one red accent.
   ========================================================= */

:root{
  --ink:#141A24;          /* headings */
  --body:#5B6572;         /* body copy */
  --muted:#8A929C;        /* labels, captions */
  --line:#E6E9EE;         /* hairlines */
  --line-2:#F0F2F5;
  --bg:#FFFFFF;
  --bg-2:#F8F9FB;         /* alternate section */
  --red:#C8102E;          /* Nepali Congress red, used sparingly */
  --red-soft:#FDF2F4;
  --slate:#1D2531;        /* footer only */

  --f:'Poppins','Mukta',system-ui,-apple-system,'Segoe UI',sans-serif;
  --gut:clamp(20px,5vw,48px);
  --sec:clamp(56px,7vw,100px);
  --wrap:1120px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  margin:0;background:var(--bg);color:var(--body);
  font-family:var(--f);font-size:16px;line-height:1.75;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--f);color:var(--ink);margin:0;font-weight:600;line-height:1.22;letter-spacing:-.02em}
p{margin:0 0 1em}p:last-child{margin-bottom:0}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.skip{position:absolute;left:-9999px;background:var(--red);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}

.wrap{width:min(var(--wrap),100%);margin-inline:auto;padding-inline:var(--gut)}
.sec{padding-block:var(--sec)}
.sec-alt{background:var(--bg-2)}
.narrow{max-width:760px}

/* ---------- type scale ---------- */
.eyebrow{display:flex;align-items:center;gap:10px;font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.eyebrow::before{content:'';width:22px;height:2px;background:var(--red);flex:0 0 auto}
.h1{font-size:clamp(34px,5vw,58px);font-weight:600;letter-spacing:-.035em;line-height:1.08}
.h2{font-size:clamp(26px,3.4vw,40px);letter-spacing:-.03em}
.h3{font-size:clamp(19px,2.2vw,24px)}
.lede{font-size:clamp(16.5px,1.6vw,18.5px);line-height:1.75;max-width:62ch}
.np{font-family:'Mukta',var(--f);color:var(--muted);font-weight:500}
.small{font-size:14px;line-height:1.65}
.dim{color:var(--muted)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-size:13px;font-weight:600;letter-spacing:.04em;padding:13px 24px;text-decoration:none;border:1px solid transparent;border-radius:2px;transition:.2s;cursor:pointer;white-space:nowrap}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:#A60D26}
.btn-out{border-color:var(--line);color:var(--ink);background:#fff}
.btn-out:hover{border-color:var(--ink)}
.btn-link{padding:0;border:0;background:none;color:var(--red);font-weight:600;font-size:14px;text-decoration:none;display:inline-flex;align-items:center;gap:7px}
.btn-link svg{width:15px;height:15px;transition:transform .2s}
.btn-link:hover svg{transform:translateX(4px)}

/* ---------- header ---------- */
.hdr{position:sticky;top:var(--adminbar,0px);z-index:80;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;gap:20px;height:78px}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none;margin-right:auto;flex:0 0 auto}
.brand .ncsvg{height:30px;width:auto;display:block}
.brand-div{width:1px;height:28px;background:var(--line)}
.brand-txt{font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.2;white-space:nowrap}
.brand-txt small{display:block;font-family:'Mukta',var(--f);font-size:12px;font-weight:500;color:var(--muted);margin-top:1px}
.nav{display:flex;align-items:center;gap:28px}
.nav a{font-size:14px;font-weight:500;color:var(--body);text-decoration:none;padding:6px 0;position:relative;white-space:nowrap;transition:color .2s}
.nav a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--red);transition:right .25s}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{right:0}
.nav a.on{color:var(--ink);font-weight:600}
.nav a.on::after{right:0}
.burger{display:none;width:42px;height:42px;border:1px solid var(--line);background:none;cursor:pointer;padding:0;border-radius:2px}
.burger span{display:block;width:17px;height:1.5px;background:var(--ink);margin:4px auto;transition:.22s}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* ---------- page head ---------- */
.phead{border-bottom:1px solid var(--line);padding-block:clamp(40px,5vw,72px) clamp(34px,4vw,56px)}
.phead .h1{max-width:20ch}
.phead .lede{margin-top:18px}
.crumb{font-size:12.5px;color:var(--muted);margin-bottom:16px}
.crumb a{text-decoration:none}
.crumb a:hover{color:var(--red)}

/* ---------- home hero ---------- */
.hero{padding-block:clamp(44px,6vw,84px)}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,6vw,80px);align-items:center}
.hero .h1{max-width:14ch}
.hero-role{font-size:15px;font-weight:600;color:var(--red);letter-spacing:.12em;text-transform:uppercase;margin-bottom:18px}
.hero-slogan{font-family:'Mukta',var(--f);font-size:clamp(17px,2vw,21px);font-weight:600;color:var(--ink);margin:20px 0 8px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.portrait{background:#F5EFE3;padding:12px;border:1px solid var(--line)}
.portrait img{width:100%}
.portrait-cap{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:center;margin-top:12px}

/* ---------- facts row ---------- */
.facts{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fact{padding:clamp(26px,3.4vw,40px) clamp(16px,2.4vw,32px);border-right:1px solid var(--line)}
.fact:first-child{padding-left:0}
.fact:last-child{border-right:0;padding-right:0}
.fact b{display:block;font-size:clamp(30px,3.8vw,44px);font-weight:600;color:var(--ink);line-height:1;letter-spacing:-.04em}
.fact b i{font-style:normal;font-size:.5em;color:var(--muted);font-weight:500;margin-left:4px}
.fact h4{font-size:14px;font-weight:600;margin:14px 0 6px}
.fact p{font-size:14px;line-height:1.6;margin:0}

/* ---------- cards ---------- */
.grid{display:grid;gap:clamp(16px,2vw,24px)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:3px;padding:clamp(22px,2.6vw,32px);transition:.25s}
.card:hover{border-color:#D3D8E0;box-shadow:0 10px 30px rgba(20,26,36,.06);transform:translateY(-2px)}
.card .num{font-size:12px;font-weight:600;letter-spacing:.16em;color:var(--red)}
.card h3{margin:12px 0 10px}
.card p{font-size:14.8px;line-height:1.7;margin:0}
.card ul{margin:14px 0 0;padding:0;list-style:none}
.card li{font-size:14px;line-height:1.6;padding-left:18px;position:relative;margin-bottom:6px}
.card li::before{content:'';position:absolute;left:0;top:10px;width:8px;height:1.5px;background:var(--red)}
.card-ic{width:38px;height:38px;color:var(--red);margin-bottom:16px}
.card-ic svg{width:100%;height:100%}

/* ---------- split media ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,68px);align-items:center}
.split.narrow-img{grid-template-columns:.85fr 1.15fr}
.split img{border:1px solid var(--line)}

/* ---------- fact list ---------- */
.dl{margin:0}
.dl div{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:13px 0;border-bottom:1px solid var(--line)}
.dl div:first-child{border-top:1px solid var(--line)}
.dl dt{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.dl dd{margin:0;color:var(--ink);font-size:15.5px}
.dl a{text-decoration:none;border-bottom:1px solid var(--line)}
.dl a:hover{border-color:var(--red);color:var(--red)}

/* ---------- timeline ---------- */
.tl{border-top:1px solid var(--line)}
.tli{display:grid;grid-template-columns:150px 1fr;gap:clamp(16px,3vw,40px);padding:22px 0;border-bottom:1px solid var(--line);position:relative}
.tlw{font-size:13px;font-weight:600;color:var(--red);letter-spacing:.02em}
.tli h4{font-size:16.5px;margin-bottom:5px}
.tli p{font-size:14.5px;margin:0}

/* ---------- roles ---------- */
.role{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(20px,4vw,56px);padding:clamp(22px,3vw,34px) 0;border-bottom:1px solid var(--line)}
.role:first-of-type{border-top:1px solid var(--line)}
.role .org{font-size:19px;font-weight:600;color:var(--ink);line-height:1.35}
.role .pos{font-size:14.5px;color:var(--red);font-weight:600;margin-top:5px}
.role .loc{font-size:13.5px;color:var(--muted);margin-top:8px;line-height:1.6}
.role ul{margin:0;padding:0;list-style:none}
.role li{font-size:14.8px;line-height:1.65;padding-left:18px;position:relative;margin-bottom:7px}
.role li::before{content:'';position:absolute;left:0;top:11px;width:8px;height:1.5px;background:var(--line);background:#C9CFD8}

/* ---------- chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.chip{font-size:12.5px;border:1px solid var(--line);background:var(--bg-2);padding:6px 12px;border-radius:2px;color:var(--ink)}

/* ---------- election result ---------- */
.result{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(28px,5vw,64px);align-items:center}
.tally{border:1px solid var(--line);border-radius:3px;overflow:hidden}
.trow{padding:18px 22px;border-bottom:1px solid var(--line)}
.trow:last-child{border-bottom:0}
.trow.win{background:var(--red-soft)}
.thead{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.tname{font-size:16px;font-weight:600;color:var(--ink)}
.tparty{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.tvote{font-size:18px;font-weight:600;color:var(--ink)}
.tbar{height:4px;background:var(--line-2);margin-top:12px;overflow:hidden;border-radius:2px}
.tbar i{display:block;height:100%;width:0;background:#C9CFD8;transition:width 1s cubic-bezier(.22,.9,.3,1)}
.trow.win .tbar i{background:var(--red)}
.margin{display:flex;align-items:baseline;gap:14px;margin-bottom:22px}
.margin b{font-size:clamp(44px,6vw,66px);font-weight:600;color:var(--red);line-height:.9;letter-spacing:-.05em}
.margin span{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.src{font-size:12.5px;color:var(--muted);margin-top:16px}

/* ---------- message ---------- */
.msg{border-left:2px solid var(--red);padding-left:clamp(20px,3vw,34px)}
.msg p{font-size:17px;line-height:1.85;color:var(--ink)}
.sign{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.sign b{display:block;font-size:16px;color:var(--ink);font-weight:600}
.sign span{font-size:13.5px;color:var(--muted)}
.note{background:#FFFBEB;border:1px solid #F0E0A8;border-radius:3px;padding:12px 16px;font-size:13.5px;color:#6D5A14;margin-bottom:22px}

/* ---------- places ---------- */
.place{display:grid;grid-template-columns:52px 1fr;gap:18px;padding:22px 0;border-bottom:1px solid var(--line);align-items:start}
.place:first-of-type{border-top:1px solid var(--line)}
.place .no{font-size:13px;font-weight:600;color:var(--red);padding-top:3px}
.place h3{font-size:18px;margin-bottom:6px}
.place p{font-size:14.8px;margin:0}

/* ---------- flag panel ---------- */
.flagcard{border:1px solid var(--line);border-radius:3px;padding:clamp(26px,3vw,40px);text-align:center;background:var(--bg-2)}
.flagcard img{width:min(210px,70%);margin:0 auto 18px;border:1px solid var(--line)}
.flagcard b{display:block;font-size:16px;font-weight:600;color:var(--ink)}
.flagcard span{font-size:13.5px;color:var(--muted)}

/* ---------- next page link ---------- */
.nextnav{border-top:1px solid var(--line);padding-block:clamp(30px,4vw,48px)}
.nextnav a{display:flex;align-items:center;justify-content:space-between;gap:20px;text-decoration:none;padding:20px 0;border-bottom:1px solid var(--line)}
.nextnav a:last-child{border-bottom:0}
.nextnav .lbl{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:5px}
.nextnav .ttl{font-size:clamp(20px,2.4vw,27px);font-weight:600;color:var(--ink);letter-spacing:-.02em}
.nextnav a:hover .ttl{color:var(--red)}
.nextnav svg{width:22px;height:22px;color:var(--red);flex:0 0 auto;transition:transform .2s}
.nextnav a:hover svg{transform:translateX(5px)}

/* ---------- flag band + footer ---------- */
.flagband{background:#fff;border-top:1px solid var(--line);position:relative;overflow:hidden;display:flex;align-items:center;min-height:150px}
.flagband .fb{position:relative;z-index:2;padding:26px var(--gut)}
.flagband .ncsvg{height:32px;width:auto;margin-bottom:10px}
.flagband p{font-family:'Mukta',var(--f);font-weight:600;font-size:clamp(16px,2vw,21px);color:var(--ink);margin:0}
.flagband img.crowd{position:absolute;right:0;bottom:0;height:100%;width:auto;max-width:none;z-index:1}

.site-footer{background:var(--slate);color:rgba(255,255,255,.62);padding-top:clamp(44px,5vw,64px);font-size:14.5px}
.f-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(24px,3.4vw,44px);padding-bottom:40px}
.f-brand .plate{background:#fff;display:inline-flex;padding:8px 12px;border-radius:2px;margin-bottom:16px}
.f-brand .plate .ncsvg{height:26px;width:auto}
.f-brand b{display:block;color:#fff;font-size:17px;font-weight:600}
.f-brand .np{color:rgba(255,255,255,.45);font-size:14px;margin-bottom:10px}
.f-brand p{font-size:14px;line-height:1.7;margin-top:8px}
.f-col h4{font-size:13px;font-weight:600;color:#fff;letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px}
.f-col a{display:block;text-decoration:none;padding:5px 0;color:rgba(255,255,255,.62);transition:color .2s}
.f-col a:hover{color:#fff}
.f-bot{border-top:1px solid rgba(255,255,255,.12);padding:20px 0;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13px;color:rgba(255,255,255,.45)}

/* ---------- motion ---------- */
/* .rv is now inert. GSAP sets its own start states on the items it animates,
   so nothing is ever hidden by CSS alone. */
.rv{opacity:1}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .burger{display:block}
  .nav{position:fixed;left:0;right:0;top:calc(var(--adminbar,0px) + 78px);flex-direction:column;align-items:stretch;gap:0;background:#fff;border-bottom:1px solid var(--line);padding:4px var(--gut) 20px;transform:translateY(-130%);transition:transform .3s cubic-bezier(.22,.9,.3,1);max-height:calc(100vh - 78px - var(--adminbar,0px));overflow:auto}
  .nav.open{transform:none}
  .nav a{padding:14px 0;border-bottom:1px solid var(--line-2);font-size:15px}
  .hero-grid,.split,.split.narrow-img,.result{grid-template-columns:1fr}
  .g3{grid-template-columns:1fr 1fr}
  .facts{grid-template-columns:1fr}
  .fact{border-right:0;border-bottom:1px solid var(--line);padding-inline:0}
  .fact:last-child{border-bottom:0}
  .role{grid-template-columns:1fr}
  .f-top{grid-template-columns:1fr 1fr}
  .flagband img.crowd{height:78%;opacity:.55}
}
@media (max-width:640px){
  body{font-size:15.5px}
  .g2,.g3{grid-template-columns:1fr}
  .tli,.dl div{grid-template-columns:1fr;gap:4px}
  .f-top{grid-template-columns:1fr}
  .place{grid-template-columns:1fr;gap:6px}
  .brand-div,.brand-txt{display:none}
}

/* =========================================================
   Motion layer. Initial states only apply once JS confirms
   GSAP has loaded, so the page is never stuck hidden.
   ========================================================= */
.js [data-anim]{opacity:0}
.js .line-mask{overflow:hidden;display:block}
.js .line-inner{display:block;will-change:transform}
.no-anim [data-anim]{opacity:1!important;transform:none!important}

/* scroll progress, sits on the header hairline */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:0 50%;background:var(--red);z-index:90;pointer-events:none}

/* header hides on the way down, returns on the way up */
.hdr{transition:transform .4s cubic-bezier(.22,.9,.3,1),box-shadow .3s}
.hdr.up{transform:translateY(-100%)}
.hdr.shadow{box-shadow:0 1px 20px rgba(20,26,36,.07)}

/* image reveal wrapper */
.reveal-img{overflow:hidden;display:block;position:relative}
.reveal-img img{transform-origin:center;will-change:transform}

/* =========================================================
   Detail work. Small things that stop it reading as a
   default template.
   ========================================================= */

/* hero gets a measured rule, a vertical place label and a dot field */
.hero{position:relative}
.hero::before{content:'';position:absolute;left:0;top:0;bottom:0;width:1px;background:linear-gradient(180deg,transparent,var(--line) 18%,var(--line) 82%,transparent);margin-left:calc(var(--gut) - 22px)}
.hero-rule{width:54px;height:2px;background:var(--red);margin-bottom:22px}
.hero-side{position:absolute;right:calc(var(--gut) - 10px);top:50%;transform:translateY(-50%) rotate(90deg);transform-origin:center;font-size:11px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.dotfield{position:absolute;inset:0;background-image:radial-gradient(var(--line) 1px,transparent 1px);background-size:22px 22px;-webkit-mask-image:radial-gradient(65% 60% at 72% 42%,#000,transparent 72%);mask-image:radial-gradient(65% 60% at 72% 42%,#000,transparent 72%);z-index:-1}

/* portrait frame with a corner keyline */
.portrait{position:relative}
.portrait::after{content:'';position:absolute;right:-9px;bottom:-9px;width:64px;height:64px;border-right:2px solid var(--red);border-bottom:2px solid var(--red)}

/* section label gains a hairline that runs to the edge */
.sec-head{display:flex;align-items:baseline;gap:clamp(20px,4vw,56px);margin-bottom:clamp(26px,3.5vw,42px)}
.sec-head .h2{flex:0 1 auto;max-width:18ch}
.sec-head .rule{flex:1 1 auto;height:1px;background:var(--line);transform:scaleX(0);transform-origin:0 50%}

/* cards: keyline that draws in on hover, not a drop shadow blob */
.card{position:relative;overflow:hidden}
.card::after{content:'';position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--red);transform:scaleX(0);transform-origin:0 50%;transition:transform .45s cubic-bezier(.22,.9,.3,1)}
.card:hover::after{transform:scaleX(1)}
.card:hover{transform:translateY(-3px)}

/* numbers get tabular figures so the count up does not jitter */
.fact b{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* timeline rows highlight on hover */
.tli{transition:padding-left .3s cubic-bezier(.22,.9,.3,1)}
.tli::before{content:'';position:absolute;left:0;top:50%;width:0;height:1px;background:var(--red);transform:translateY(-50%);transition:width .35s cubic-bezier(.22,.9,.3,1)}
.tli:hover{padding-left:20px}
.tli:hover::before{width:12px}

/* place rows pick up the same behaviour */
.place{transition:padding-left .3s cubic-bezier(.22,.9,.3,1)}
.place:hover{padding-left:12px}
.place:hover .no{color:var(--ink)}

/* buttons lift very slightly */
.btn{position:relative;overflow:hidden}
.btn-red:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(200,16,46,.25)}
.btn-out:hover{transform:translateY(-1px)}

/* next page links get a sliding rule */
.nextnav a{position:relative}
.nextnav a::after{content:'';position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--red);transform:scaleX(0);transform-origin:0 50%;transition:transform .5s cubic-bezier(.22,.9,.3,1)}
.nextnav a:hover::after{transform:scaleX(1)}

/* page transition veil */
.veil{position:fixed;inset:0;background:#fff;z-index:120;pointer-events:none;opacity:0}

@media (max-width:980px){
  .hero-side,.hero::before{display:none}
}

/* the section hairline only belongs in a full width column */
.split .sec-head .rule,.narrow .sec-head .rule{display:none}
.split .sec-head{display:block}
.split .sec-head .h2{max-width:none}

/* vertical place label, writing-mode is more reliable than a rotate */
.hero-side{writing-mode:vertical-rl;transform:translateY(-50%);letter-spacing:.26em;right:calc(var(--gut) - 26px)}

/* portrait keyline, tucked so it clears the caption */
.portrait::after{right:-7px;bottom:-7px;width:46px;height:46px}

/* =========================================================
   WARMTH AND CHARACTER
   The ink portrait is drawn on cream paper. The party mark is
   a green tree. Both were being ignored by a cold grey palette,
   so the surfaces now take their colour from the artwork and
   the green joins the red as a second accent.
   ========================================================= */
:root{
  --paper:#FBF8F2;        /* warm base, replaces pure white */
  --cream:#F4ECDD;        /* the portrait paper */
  --cream-2:#EFE4D0;
  --ink:#1B2028;
  --body:#5E5C55;         /* warm grey, not blue grey */
  --muted:#918C81;
  --line:#E7DFD0;         /* warm hairline */
  --line-2:#F1EADC;
  --bg:#FBF8F2;
  --bg-2:#F4ECDD;
  --green:#1F7A3D;        /* from the Nepali Congress tree */
  --green-soft:#EAF3EC;
  --ochre:#C08A2E;
  --slate:#20262E;
}
body{background:var(--paper)}
.sec-alt{background:var(--cream)}
.card{background:#fff;border-color:var(--line)}
.chip{background:var(--cream);border-color:var(--line)}
.hdr{background:rgba(251,248,242,.93);border-bottom-color:var(--line)}
.nav{background:var(--paper)}
.portrait{background:var(--cream);border-color:var(--cream-2)}
.flagband{background:var(--paper);border-top-color:var(--line)}
.trow.win{background:#FCF1F2}
.tbar i{background:#D9D2C4}
.flagcard{background:var(--cream);border-color:var(--line)}
.note{background:#FBF3DC;border-color:#E6D3A2;color:#7A6320}

/* paper grain, drawn rather than loaded */
.grain{position:fixed;inset:0;z-index:95;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='.055'/></svg>");
  mix-blend-mode:multiply}

/* =========================================================
   Hand drawn marks
   ========================================================= */
.mark{background-image:linear-gradient(transparent 56%,rgba(192,138,46,.38) 56%,rgba(192,138,46,.38) 92%,transparent 92%);padding:0 .08em}
.mark-g{background-image:linear-gradient(transparent 56%,rgba(31,122,61,.2) 56%,rgba(31,122,61,.2) 92%,transparent 92%)}
.squiggle{display:block;width:min(300px,62%);margin-top:6px;color:var(--red)}
.squiggle path{fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:round;stroke-dasharray:600;stroke-dashoffset:600}

/* =========================================================
   The seal. A real artefact, not decoration: office and term.
   ========================================================= */
.stamp{position:absolute;right:-10px;top:-26px;width:132px;height:132px;z-index:4;transform:rotate(-11deg);color:var(--red);opacity:.9}
.stamp svg{width:100%;height:100%}
.stamp .ring{fill:none;stroke:currentColor;stroke-width:2}
.stamp .ring-2{fill:none;stroke:currentColor;stroke-width:1;stroke-dasharray:3 4}
.stamp text{fill:currentColor;font-family:'Poppins',sans-serif;font-size:9.5px;font-weight:600;letter-spacing:.22em}
.stamp .yr{font-size:20px;letter-spacing:-.02em}
.stamp .sub{font-size:8px;letter-spacing:.2em}

/* =========================================================
   Devanagari slogan marquee
   ========================================================= */
.marquee{background:var(--ink);color:var(--cream);overflow:hidden;padding:18px 0;position:relative}
.marquee-track{display:flex;width:max-content;animation:slide 34s linear infinite}
.marquee span{font-family:'Mukta',var(--f);font-size:clamp(20px,2.6vw,30px);font-weight:600;padding:0 26px;white-space:nowrap;display:flex;align-items:center;gap:26px}
.marquee span::after{content:'';width:7px;height:7px;background:var(--red);border-radius:50%;display:inline-block}
@keyframes slide{to{transform:translateX(-50%)}}
.marquee:hover .marquee-track{animation-play-state:paused}

/* =========================================================
   Contour divider, the Gorkha ridge as a hairline
   ========================================================= */
.contour{display:block;width:100%;height:56px;color:var(--line)}
.contour path{fill:none;stroke:currentColor;stroke-width:1.2}
.contour path:nth-child(2){opacity:.6}
.contour path:nth-child(3){opacity:.35}

/* =========================================================
   Cards behave like index cards: a coloured tab, a small tilt
   ========================================================= */
.card{border-top:3px solid var(--line);transition:transform .32s cubic-bezier(.22,.9,.3,1),box-shadow .32s,border-color .32s}
.grid .card:nth-child(4n+1){border-top-color:var(--red)}
.grid .card:nth-child(4n+2){border-top-color:var(--green)}
.grid .card:nth-child(4n+3){border-top-color:var(--ochre)}
.grid .card:nth-child(4n+4){border-top-color:var(--ink)}
.card:hover{transform:translateY(-4px) rotate(-.5deg);box-shadow:0 16px 40px rgba(27,32,40,.09)}
.grid .card:nth-child(even):hover{transform:translateY(-4px) rotate(.5deg)}
.card .num{color:var(--ochre);font-size:12.5px}
.card-ic{color:var(--green)}
.grid .card:nth-child(odd) .card-ic{color:var(--red)}

/* numbers get weight and warmth */
.fact b{color:var(--ink)}
.fact:nth-child(1) b{color:var(--red)}
.fact:nth-child(2) b{color:var(--green)}
.fact:nth-child(3) b{color:var(--ochre)}
.fact b i{color:var(--muted)}

/* photographs sit on a cream mat and lean a little */
.split img,.flagcard img{background:var(--cream);padding:9px;border-color:var(--cream-2);box-shadow:0 12px 30px rgba(27,32,40,.07)}
.split > img:first-child{transform:rotate(-.8deg)}
.split > div + img{transform:rotate(.8deg)}

/* eyebrow dash alternates colour so pages do not all read red */
.sec-alt .eyebrow::before{background:var(--green)}

/* timeline gets a running rule and warm dots */
.tl{position:relative}
.tli:hover::before{background:var(--green)}
.tlw{color:var(--ochre)}
.sec-alt .tlw{color:var(--green)}

/* place numbers become small stickers */
.place .no{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--cream);color:var(--ink);font-size:12.5px;border:1px solid var(--line);transition:.3s}
.place:hover .no{background:var(--red);color:#fff;border-color:var(--red);transform:rotate(-8deg)}

/* pull the election margin into the ochre family for contrast */
.margin b{color:var(--red)}
.margin span{color:var(--ink)}

/* next page links pick up the green */
.nextnav svg{color:var(--green)}
.nextnav a:hover .ttl{color:var(--green)}

/* links in the detail list */
.dl a:hover{color:var(--green);border-color:var(--green)}

/* footer sits on ink with a cream rule */
.site-footer{background:var(--slate)}
.btn-out{background:#fff}

@media (prefers-reduced-motion:reduce){
  .marquee-track{animation:none}
  .card:hover{transform:none}
}
@media (max-width:980px){
  .stamp{width:96px;height:96px;right:0;top:-14px}
}
.mark{background-repeat:no-repeat;background-size:100% 100%}
/* seal moved clear of the calligraphy, it now sits off the lower left corner */
.stamp{left:-40px;bottom:-34px;top:auto;right:auto;transform:rotate(-11deg)}
.squiggle{width:min(268px,56%);opacity:.85}
@media (max-width:980px){ .stamp{left:auto;right:6px;bottom:-24px} }

/* =========================================================
   Scroll performance
   The grain was a full viewport fixed layer in multiply blend
   mode, which forced the whole page to recomposite on every
   frame. The header blur cost a second pass. Both are gone.
   ========================================================= */
.grain{mix-blend-mode:normal;opacity:.34}
.hdr{backdrop-filter:none;background:rgba(251,248,242,.97)}
.split img,.portrait img,.stamp{will-change:transform}

/* =========================================================
   Photography
   ========================================================= */
.fullbleed{position:relative;margin:clamp(30px,4vw,54px) 0}  /* figure has a default 40px side margin, clear it */
.fullbleed img{width:100%;height:clamp(300px,48vw,560px);object-fit:cover;background:var(--cream);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fullbleed figcaption{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;width:min(var(--wrap),100%);margin:14px auto 0;padding-inline:var(--gut);font-size:13.5px;color:var(--muted)}
.fullbleed figcaption b{color:var(--ink);font-weight:600;font-size:14px}

.feature{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,64px);align-items:center}
.feature img{background:var(--cream);padding:9px;border:1px solid var(--cream-2);box-shadow:0 14px 34px rgba(27,32,40,.08);transform:rotate(-.7deg)}

.credits{border-top:1px solid var(--line);padding-block:24px;font-size:12.5px;color:var(--muted);line-height:1.8}
.credits a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.credits a:hover{color:var(--ink)}
.credits b{color:var(--ink);font-weight:600;display:block;margin-bottom:6px;font-size:12px;letter-spacing:.12em;text-transform:uppercase}

@media (max-width:980px){ .feature{grid-template-columns:1fr} }

/* =========================================================
   WordPress additions. Appended to the mockup stylesheet.
   ========================================================= */

/* the sticky header sits under the admin bar when logged in */
.admin-bar{--adminbar:32px}
@media (max-width:782px){.admin-bar{--adminbar:46px}}

/* Lenis smooth scroll. scroll-behavior:smooth must be off while Lenis
   drives the scroll position, otherwise the browser eases every frame
   Lenis writes and the page jumps. */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-smooth iframe{pointer-events:none}

/* hold the hero still until the web font is in and app.js takes over */
.js.anim-wait .h1,.js.anim-wait .h2,.js.anim-wait .hero-role,.js.anim-wait .crumb,.js.anim-wait .hero .lede,.js.anim-wait .hero-slogan,.js.anim-wait .hero-cta,.js.anim-wait .portrait,.js.anim-wait .phead .lede,.js.anim-wait .phead .np{opacity:0}

/* logo as an image instead of an inline SVG */
.brand img.ncsvg{height:30px;width:auto}
.flagband img.ncsvg{height:32px;width:auto}
.f-brand .plate img.ncsvg{height:26px;width:auto}

/* hero */
.hero-media{position:relative}
.hero-lede{margin-top:20px}
.lede-html p{margin:0 0 1em}
.lede-html p:last-child{margin:0}
.phead-ne{font-size:17px;margin-top:8px}
.btn-row{display:flex;gap:12px;flex-wrap:wrap}

/* spacing utilities, replacing the mockup's inline styles */
.mt0{margin-top:0!important}.mt12{margin-top:12px}.mt14{margin-top:14px}.mt20{margin-top:20px}.mt22{margin-top:22px}.mt26{margin-top:26px}.mt30{margin-top:30px}.mt32{margin-top:32px}.mt34{margin-top:34px}.mt36{margin-top:36px}.mt44{margin-top:44px}

/* editor highlights: <mark> (ochre) and <mark class="mark-g"> (green) */
mark,.mark{background-color:transparent;color:inherit;background-image:linear-gradient(transparent 56%,rgba(192,138,46,.38) 56%,rgba(192,138,46,.38) 92%,transparent 92%);padding:0 .08em;background-repeat:no-repeat;background-size:100% 100%}
mark.mark-g,.mark-g{background-image:linear-gradient(transparent 56%,rgba(31,122,61,.2) 56%,rgba(31,122,61,.2) 92%,transparent 92%)}

/* editor content */
.prose p{margin:0 0 1em}
.prose p:last-child{margin-bottom:0}
.prose h2,.prose h3,.prose h4{margin:1.4em 0 .5em}
.prose h2{font-size:clamp(22px,2.6vw,30px)}
.prose h3{font-size:clamp(18px,2vw,22px)}
.prose ul,.prose ol{padding-left:1.2em;margin:0 0 1em}
.prose li{margin-bottom:.35em}
.prose blockquote{border-left:2px solid var(--red);margin:1.2em 0;padding-left:clamp(16px,3vw,28px);color:var(--ink);font-size:17px}
.prose img{height:auto;border:1px solid var(--line);background:var(--cream);padding:9px}
.prose figure{margin:1.4em 0}
.prose figcaption{font-size:13px;color:var(--muted);margin-top:8px}
.prose a{color:var(--red);text-decoration:none;border-bottom:1px solid var(--line)}
.prose a:hover{border-color:var(--red)}
.prose table{width:100%;border-collapse:collapse;font-size:14.5px}
.prose th,.prose td{border-bottom:1px solid var(--line);padding:10px 8px;text-align:left}
.prose .alignfull{width:100vw;max-width:100vw;margin-inline:calc(50% - 50vw)}
.bio p:first-child{font-size:clamp(16.5px,1.6vw,18.5px);line-height:1.75}
.card-text p{font-size:14.8px;line-height:1.7;margin:0 0 .8em}
.card-text p:last-child{margin:0}
.stack img+img{margin-top:18px}
.credits p{margin:0}

/* photo framing: fixed aspect ratios so any upload sits in the layout */
.portrait img{aspect-ratio:1/1;object-fit:cover;width:100%;height:auto}
.split.narrow-img img,.stack img,.feature img{aspect-ratio:4/5;object-fit:cover;width:100%;height:auto}
.split:not(.narrow-img)>img{aspect-ratio:4/3;object-fit:cover;width:100%;height:auto}
.flagcard img{aspect-ratio:3/2;object-fit:cover;height:auto}
.fullbleed figcaption a.cap-link{color:var(--red);text-decoration:none;font-weight:600}
.place.has-img{grid-template-columns:52px 1fr 150px}
.place-img img{aspect-ratio:4/3;object-fit:cover;width:100%;height:auto;border:1px solid var(--line);background:var(--cream);padding:5px}
@media (max-width:640px){.place.has-img{grid-template-columns:1fr}.place-img{max-width:220px}}

/* blog */
.post-card-img{display:block;margin:0 0 18px;overflow:hidden}
.post-card-img img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}
.post-card h3 a{text-decoration:none;color:inherit}
.post-card h3 a:hover{color:var(--red)}
.entry-meta a{text-decoration:none;color:inherit}
.navigation.pagination{margin-top:40px}
.pagination .nav-links{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px;border:1px solid var(--line);text-decoration:none;font-size:14px;font-weight:500;color:var(--ink);border-radius:2px}
.pagination .page-numbers.current,.pagination .page-numbers:hover{border-color:var(--red);color:var(--red)}
.post-navigation{margin-top:44px;border-top:1px solid var(--line)}
.post-navigation .nav-links{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.post-navigation a{display:block;padding:20px 0;text-decoration:none}
.post-navigation .lbl{display:block;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.post-navigation .ttl{font-size:clamp(17px,2vw,22px);font-weight:600;color:var(--ink)}
.post-navigation .nav-next{text-align:right}
.post-navigation a:hover .ttl{color:var(--green)}
.searchform{display:flex;gap:10px;max-width:520px}
.searchform input{flex:1;min-width:0;font:inherit;font-size:15px;padding:12px 14px;border:1px solid var(--line);border-radius:2px;background:#fff;color:var(--ink)}
.searchform input:focus{outline:2px solid var(--red);outline-offset:2px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);white-space:nowrap}

/* comments */
.comments-area{margin-top:56px;border-top:1px solid var(--line);padding-top:36px}
.comments-title,.comment-reply-title{font-size:clamp(19px,2.2vw,24px);margin-bottom:20px}
.comment-list{list-style:none;margin:0 0 30px;padding:0}
.comment-list .comment{border-bottom:1px solid var(--line);padding:18px 0}
.comment-list .children{list-style:none;padding-left:clamp(16px,3vw,32px);margin:0}
.comment-author .avatar{border-radius:50%;vertical-align:middle;margin-right:8px}
.comment-metadata{font-size:12.5px;color:var(--muted)}
.comment-metadata a{text-decoration:none}
.comment-content{margin-top:8px;font-size:15px}
.reply a{font-size:13px;font-weight:600;color:var(--red);text-decoration:none}
.comment-form label{display:block;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.comment-form input[type=text],.comment-form input[type=email],.comment-form input[type=url],.comment-form textarea{width:100%;font:inherit;font-size:15px;padding:12px 14px;border:1px solid var(--line);border-radius:2px;background:#fff;color:var(--ink);margin-bottom:16px}
.comment-form .submit{background:var(--red);color:#fff;border:0;font:inherit;font-size:13px;font-weight:600;letter-spacing:.04em;padding:13px 24px;border-radius:2px;cursor:pointer}
.comment-form .submit:hover{background:#A60D26}

/* core classes */
.wp-caption{max-width:100%}
.wp-caption-text,.gallery-caption{font-size:13px;color:var(--muted)}
.alignleft{float:left;margin:0 20px 10px 0}
.alignright{float:right;margin:0 0 10px 20px}
.aligncenter{display:block;margin:0 auto}
.sticky,.bypostauthor{display:revert}