/* ============================================================
   Shoham Bhadra — shared styles
   Night-deco: black-violet ground, dark panels, gold inlay
   ============================================================ */
:root{
  --bg:#0a0612;              /* night-black with a violet undertone */
  --panel:#190b30;           /* near-black violet panels */
  --violet:#46207e;          /* darker primary purple */
  --lavender:#9d7bd8;
  --pale:#cfc0ec;
  --ivory:#ece6f6;           /* body text on black */
  --gold:#c5a253;            /* muted deco gold */
  --gold-soft:rgba(197,162,83,.55);
  --muted:#9a8fc0;
  --hairline:rgba(236,230,246,.14);
  --maxw:960px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--ivory);
  font-family:"Source Serif 4",Georgia,serif;
  font-size:1.0625rem;line-height:1.65;
}
::selection{background:var(--gold);color:var(--bg)}
a{color:inherit}
a:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.mono{font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ============ RAILS ============
   Twin gold hairlines running down either side of the
   content column, like inlay on a cabinet edge. */
body::before,body::after{
  content:"";position:fixed;top:0;bottom:0;width:7px;z-index:1;pointer-events:none;
  background-image:
    linear-gradient(var(--gold-soft),var(--gold-soft)),
    linear-gradient(rgba(197,162,83,.22),rgba(197,162,83,.22));
  background-size:1px 100%,1px 100%;
  background-repeat:no-repeat;
}
body::before{left:calc(50% - 532px);background-position:0 0,6px 0}
body::after{right:calc(50% - 532px);background-position:100% 0,calc(100% - 6px) 0}
@media(max-width:1140px){body::before,body::after{display:none}}

/* ornament: diamond between hairlines */
.rule{display:flex;align-items:center;gap:14px;color:var(--gold)}
.rule::before,.rule::after{content:"";flex:1;height:1px;background:currentColor;opacity:.6}
.rule .gem{font-size:.6rem;letter-spacing:.4em;transform:translateX(.2em)}

/* ============ MARQUEE NAV ============ */
.marquee{
  position:sticky;top:0;z-index:30;
  background:linear-gradient(180deg,#140a26,#0e0719);
  border-top:1px solid var(--gold-soft);
  border-bottom:1px solid var(--gold-soft);
}
.bulbs{
  height:8px;
  background-image:radial-gradient(circle, var(--gold) 1.3px, transparent 1.6px);
  background-size:16px 8px;background-position:center;background-repeat:repeat-x;
  opacity:.85;
}
.marquee-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;height:64px}
.marquee .brand{display:flex;align-items:center;text-decoration:none}
.sb-mark{height:44px;width:auto;display:block}
.sb-mark text{transition:fill .15s ease}
.marquee .brand:hover .sb-mark text{fill:var(--gold)}
.marquee nav ul{display:flex;align-items:center;gap:0;list-style:none}
.marquee nav li{display:flex;align-items:center}
.marquee nav li+li::before{content:"◆";color:var(--gold);font-size:.55rem;margin:0 18px;opacity:.8}
.marquee nav a{
  text-decoration:none;
  font-family:"IBM Plex Mono",monospace;font-size:.84rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--muted);padding:6px 2px;
}
.marquee nav a:hover{color:var(--gold)}
.marquee nav a[aria-current="page"]{color:var(--gold);border-bottom:1px solid var(--gold);padding-bottom:5px}
@media(max-width:640px){
  .marquee-inner{height:56px}
  .marquee nav li+li::before{margin:0 10px}
  .marquee nav a{font-size:.72rem;letter-spacing:.16em}
  .sb-mark{height:36px}
}
@media(max-width:420px){.marquee .brand{display:none}.marquee-inner{justify-content:center}}

/* ============ HERO PANEL ============ */
.hero-zone{padding:34px 20px 0}
.hero{
  max-width:920px;margin:0 auto;background:var(--panel);color:var(--ivory);
  position:relative;overflow:hidden;text-align:center;
  padding:64px 32px 72px;
}
.hero::before{content:"";position:absolute;inset:12px;border:1px solid rgba(157,123,216,.5);pointer-events:none}
.hero::after{content:"";position:absolute;inset:18px;border:1px solid var(--gold-soft);pointer-events:none}
.sunburst{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:1100px;height:480px;opacity:.45;pointer-events:none;
}
.sunburst line{stroke:var(--lavender);stroke-width:1}
.sunburst circle{fill:none;stroke:var(--lavender);stroke-width:1}
.hero .inner{position:relative;z-index:2}
.hero h1{
  font-family:"Big Shoulders Display",sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(3rem,9vw,6.4rem);line-height:1.02;letter-spacing:.08em;
}
.hero.sub{padding:56px 32px 60px}
.hero.sub h1{font-size:clamp(2.3rem,7vw,4.4rem)}
.hero .divide{margin:28px auto;max-width:340px}
.hero p.lede{max-width:46ch;margin:0 auto;color:#d9cff0;font-size:1.08rem}
.hero p.lede b{color:var(--ivory);font-weight:600}
.hero p.lede a{color:var(--gold);text-decoration-thickness:1px;text-underline-offset:3px}

/* deco portrait: arched frame, double border with gold inner line */
.portrait{
  width:172px;height:208px;margin:34px auto 0;position:relative;
  border-radius:90px 90px 8px 8px;
  border:1px solid var(--gold-soft);
  padding:8px;background:rgba(255,255,255,.03);
}
.portrait .frame{
  width:100%;height:100%;border-radius:82px 82px 5px 5px;overflow:hidden;
  border:1px solid var(--gold);
  background:
    radial-gradient(circle at 50% 30%, rgba(157,123,216,.25), transparent 70%),
    linear-gradient(180deg,#2a1650,#190b30);
  display:grid;place-items:center;position:relative;
}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.portrait .monogram{
  font-family:"Big Shoulders Display",sans-serif;font-weight:700;
  font-size:2.6rem;letter-spacing:.18em;color:var(--gold);
  transform:translateX(.09em);
}
@media(max-width:560px){.portrait{width:148px;height:180px}.hero{padding:56px 20px 56px}}

/* stepped pediment under the hero */
.pediment{display:block;width:100%;max-width:920px;margin:0 auto;height:26px}
.pediment path{fill:var(--panel)}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ============ SECTION HEADINGS ============ */
section{padding:84px 0 64px;text-align:center}
.eyebrow{color:var(--gold);display:block;margin-bottom:10px}
section h2{
  font-family:"Big Shoulders Display",sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(1.9rem,5vw,2.9rem);letter-spacing:.12em;
}
section .rule{max-width:280px;margin:22px auto 0}

/* centered prose */
.prose{max-width:62ch;margin:36px auto 0;text-align:left}
.prose p+p{margin-top:1em}
.prose a{color:var(--gold);text-decoration-thickness:1px;text-underline-offset:3px}
.prose b{color:var(--ivory)}

/* ============ PROGRAMME ENTRIES (clickable list) ============ */
.entries{max-width:680px;margin:40px auto 0;list-style:none}
.entry{border-bottom:1px solid var(--hairline)}
.entry:first-child{border-top:1px solid var(--hairline)}
.entry>a,.entry>.entry-body{display:block;padding:34px 18px}
.entry>a{text-decoration:none;transition:background .15s ease}
.entry>a:hover{background:rgba(157,123,216,.07)}
.entry .no{
  display:block;color:var(--gold);margin-bottom:8px;
  font-family:"IBM Plex Mono",monospace;font-size:.78rem;letter-spacing:.34em;text-transform:uppercase;
}
.entry h3{
  font-family:"Big Shoulders Display",sans-serif;font-weight:700;text-transform:uppercase;
  font-size:2.1rem;letter-spacing:.12em;color:var(--ivory);
}
.entry>a:hover h3{color:var(--gold)}
.entry p{color:var(--muted);font-size:1.02rem;max-width:52ch;margin:8px auto 0}
.entry p a{color:var(--gold);text-decoration-thickness:1px;text-underline-offset:3px}

/* ============ ACT LIST (timeline as a deco bill) ============ */
.acts{max-width:680px;margin:40px auto 0;list-style:none;text-align:center}
.act{padding:34px 18px;border-bottom:1px solid var(--hairline)}
.act:first-child{border-top:1px solid var(--hairline)}
.act .when{
  display:block;color:var(--gold);margin-bottom:8px;
  font-family:"IBM Plex Mono",monospace;font-size:.78rem;letter-spacing:.34em;text-transform:uppercase;
}
.act h3{
  font-family:"Big Shoulders Display",sans-serif;font-weight:700;text-transform:uppercase;
  font-size:1.8rem;letter-spacing:.12em;color:var(--ivory);
}
.act p{color:var(--muted);font-size:1.02rem;max-width:54ch;margin:8px auto 0}
.act p a{color:var(--gold);text-decoration-thickness:1px;text-underline-offset:3px}

/* ============ CODA ============ */
.coda{
  text-align:center;padding:84px 0 96px;
  background:var(--panel);
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
}
.coda h2{
  font-family:"Big Shoulders Display",sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(2rem,6vw,3.4rem);letter-spacing:.12em;margin:12px 0 14px;
}
.coda p{max-width:44ch;margin:0 auto 32px;color:var(--muted)}
.btn{
  display:inline-block;color:var(--gold);text-decoration:none;background:transparent;
  font-family:"IBM Plex Mono",monospace;font-size:.9rem;letter-spacing:.22em;text-transform:uppercase;
  padding:18px 44px;border:1px solid var(--gold);
  transition:background .15s ease,color .15s ease;
}
.btn:hover{background:var(--gold);color:var(--bg)}

/* pager between pages */
.pager{display:flex;justify-content:space-between;gap:16px;max-width:920px;margin:0 auto;padding:36px 24px}
.pager a{
  text-decoration:none;color:var(--muted);
  font-family:"IBM Plex Mono",monospace;font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;
}
.pager a:hover{color:var(--gold)}

footer{padding:26px 0;color:var(--muted)}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}