:root{
  --burgundy:#8B2252; --burgundy-dark:#6E1A41; --burgundy-deep:#4a1029;
  --gold:#C9A84C; --gold-light:#D4BA6A;
  --bg:#FBF8F4; --bg-alt:#F5F0EA; --pink:#F2DDD8; --cream:#F0EAD6;
  --text:#1a1a1a; --text-light:#553E23; --muted:#816B51;
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Red Hat Display','Helvetica Neue',Arial,sans-serif;
  --black:'UnifrakturMaguntia',Georgia,serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-weight:300;line-height:1.7;overflow-x:hidden}

/* progress rail */
.rail{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:98;text-align:center;color:var(--gold);font-family:var(--serif);font-size:13px;letter-spacing:2px}
.rail .line{width:1px;height:70px;background:linear-gradient(var(--gold),transparent);margin:10px auto 0}
@media(max-width:768px){.rail{display:none}}

/* hero */
.hero{position:relative;height:100vh;min-height:620px;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center}
.hero .bg{position:absolute;inset:0;background:url('../images/maheshwari.jpg') center 18%/cover no-repeat;animation:kenburns 18s ease-out forwards;filter:saturate(.75) brightness(.92)}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.09)}}
.hero .veil{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(74,16,41,.55),rgba(74,16,41,.25) 45%,rgba(74,16,41,.72))}
.hero-inner{position:relative;z-index:2;color:var(--bg);padding:0 24px;max-width:900px}
.hero .eyebrow{font-size:11px;letter-spacing:5px;text-transform:uppercase;color:var(--gold-light);margin-bottom:26px}
.hero h1{font-family:var(--serif);font-weight:300;font-size:clamp(3rem,7.5vw,6rem);line-height:1.08;letter-spacing:.01em}
.hero h1 .q-word{font-family:var(--black);font-weight:400;color:var(--gold-light);font-size:1.15em}
.hero .tag{margin-top:28px;font-family:var(--serif);font-style:italic;font-size:clamp(1rem,2vw,1.35rem);color:rgba(251,248,244,.92)}
.hero .rule{width:64px;height:1px;background:var(--gold);margin:30px auto 0}
.hero .scroll{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);color:var(--gold-light);font-size:10px;letter-spacing:3px;text-transform:uppercase;animation:bob 2.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}
@supports (height: 100dvh){.hero{height:100dvh}}

/* overture */
.overture{padding:110px 24px;text-align:center;background:var(--bg)}
.overture .eyebrow{font-size:11px;letter-spacing:4px;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.overture h2{font-family:var(--serif);font-weight:300;font-size:clamp(2rem,4vw,3rem);color:var(--burgundy);margin-bottom:26px}
.overture .lede{max-width:620px;margin:0 auto 54px;color:var(--text-light);font-size:15.5px}
.index{display:grid;grid-template-columns:repeat(3,minmax(150px,220px));gap:26px 40px;justify-content:center;font-family:var(--serif)}
@media(max-width:700px){.index{grid-template-columns:repeat(2,1fr)}}
.index .it{border-top:1px solid #E5DDD4;padding-top:14px;text-align:left}
.index .n{color:var(--gold);font-size:13px;letter-spacing:2px}
.index .nm{font-size:19px;color:var(--text);font-weight:400;margin-top:2px}
.index .rg{font-family:var(--sans);font-size:10.5px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-top:3px}

/* chapters */
.chapter{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,6vw,90px);align-items:center;max-width:1250px;margin:0 auto;padding:110px 40px}
@media(max-width:820px){.chapter{grid-template-columns:1fr;padding:70px 24px;gap:36px}}
.chapter.flip .fig{order:2}
@media(max-width:820px){.chapter.flip .fig{order:0}}
.fig{position:relative}
.fig .frame{position:relative;border-radius:6px;overflow:hidden;box-shadow:0 18px 50px rgba(74,16,41,.18)}
.fig .frame::before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;border:1px solid rgba(201,168,76,.35);border-radius:6px;margin:14px}
.fig img{width:100%;display:block;aspect-ratio:3/4;object-fit:cover}
.fig::after{content:'';position:absolute;top:22px;left:22px;right:-14px;bottom:-14px;border:1px solid var(--gold);border-radius:6px;z-index:-1;opacity:.55}
.fig.small{max-width:430px;margin:0 auto}
.txt .chno{font-family:var(--serif);color:var(--gold);font-size:14px;letter-spacing:4px;text-transform:uppercase}
.txt .region{font-size:10.5px;letter-spacing:3.5px;text-transform:uppercase;color:var(--muted);margin-top:8px}
.txt h3{font-family:var(--serif);font-weight:300;font-size:clamp(2.2rem,4.5vw,3.4rem);color:var(--burgundy);line-height:1.12;margin:16px 0 6px}
.txt .garment{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold);margin-bottom:20px}
.txt p{color:var(--text-light);font-size:15.5px;max-width:480px}
.txt .orn{margin-top:26px;color:var(--gold);font-size:15px;letter-spacing:6px}

.alt-bg{background:var(--pink)}
.alt-bg2{background:var(--cream)}

/* divider quotes */
.quote{padding:84px 24px;text-align:center;background:var(--bg)}
.quote .q{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(1.3rem,2.6vw,1.9rem);color:var(--burgundy);max-width:640px;margin:0 auto}
.quote .rule{width:54px;height:1px;background:var(--gold);margin:26px auto 0;position:relative}
.quote .rule::after{content:'◆';position:absolute;top:-8px;left:50%;transform:translateX(-50%);color:var(--gold);font-size:9px;background:var(--bg);padding:0 8px}

/* full-bleed finale chapter */
.bleed{position:relative;min-height:96vh;display:flex;align-items:flex-end;overflow:hidden}
.bleed .bg{position:absolute;inset:0;background:url('../images/arabic.jpg') center 12%/cover no-repeat;filter:saturate(.85)}
.bleed .veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(74,16,41,.82),rgba(74,16,41,.15) 55%,rgba(74,16,41,.25))}
.bleed .inner{position:relative;z-index:2;color:var(--bg);padding:70px clamp(24px,7vw,110px);max-width:820px}
.bleed .chno{font-family:var(--serif);color:var(--gold-light);font-size:14px;letter-spacing:4px;text-transform:uppercase}
.bleed h3{font-family:var(--serif);font-weight:300;font-size:clamp(2.4rem,5vw,3.8rem);line-height:1.1;margin:14px 0 8px}
.bleed .garment{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold-light);margin-bottom:18px}
.bleed p{font-size:15.5px;color:rgba(251,248,244,.9);max-width:560px}

/* colophon */
.colophon{background:var(--burgundy-deep);color:var(--bg);text-align:center;padding:120px 24px 90px}
.colophon .crest{font-family:var(--black);font-size:44px;color:var(--gold);margin-bottom:8px}
.colophon .brand{font-family:var(--serif);font-size:clamp(1.6rem,3vw,2.2rem);font-weight:300;letter-spacing:.14em;text-transform:uppercase}
.colophon .tag{font-family:var(--serif);font-style:italic;color:var(--gold-light);margin-top:14px;font-size:16px}
.colophon .names{margin-top:52px;display:flex;flex-wrap:wrap;justify-content:center;gap:14px 30px;font-size:10.5px;letter-spacing:2.5px;text-transform:uppercase;color:rgba(251,248,244,.65)}
.colophon .rule{width:64px;height:1px;background:var(--gold);margin:44px auto 0;opacity:.6}
.colophon .fin{margin-top:22px;font-size:10px;letter-spacing:3px;color:rgba(251,248,244,.45);text-transform:uppercase}

/* reveals — scoped to html.js so content is never hidden without JS */
html.js .rv{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
html.js .rv.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  html.js .rv{opacity:1;transform:none;transition:none}
  .hero .bg{animation:none}
  .hero .scroll{animation:none}
  html{scroll-behavior:auto}
}