/* Chandni Jeswani — chandnijeswani.com
   Palette: paper #F7F5F0 · ink #1B2430 · river #33506B · royal #2644C9 · stone #8B8578
   Type: Marcellus (display) · Spectral (body) */

@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Spectral:ital,wght@0,300;0,400;0,500;1,300;1,400&display=swap');

:root {
  --paper: #F7F5F0;
  --ink: #1B2430;
  --river: #33506B;
  --sindoor: #2644C9;
  --stone: #8B8578;
  --measure: 62ch;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Spectral', Georgia, serif;
  font-weight: 300;
  font-size: 1.075rem;
  line-height: 1.72;
  font-variant-numeric: oldstyle-nums proportional-nums;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--sindoor); color: var(--paper); }

h1, h2, h3, .hero .question { text-wrap: balance; }

/* quiet entrance: content settles rather than animates */
main > section { animation: settle .7s ease both; }
@keyframes settle { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

a { color: var(--river); text-decoration: none; border-bottom: 1px solid rgba(51,80,107,.35); transition: color .18s, border-color .18s; }
a:hover { color: var(--sindoor); border-color: var(--sindoor); }
a:focus-visible { outline: 2px solid var(--sindoor); outline-offset: 3px; border-bottom-color: transparent; }

/* ---- header / nav ---- */
header.site {
  max-width: 1040px; margin: 0 auto; padding: 2.2rem 1.5rem 0;
  display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 1rem;
}
.wordmark { font-family: 'Marcellus', serif; font-size: 1.2rem; letter-spacing: .04em; color: var(--ink); border: none; }
.wordmark:hover { color: var(--sindoor); }
nav.site { display: flex; gap: 1.6rem; flex-wrap: wrap; }
nav.site a {
  font-family: 'Marcellus', serif; font-size: .82rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--stone); border: none; padding-bottom: 3px;
}
nav.site a:hover { color: var(--ink); }
nav.site a[aria-current="page"] { color: var(--ink); border-bottom: 2px solid var(--sindoor); }


/* ---- layout ---- */
main { max-width: 1040px; margin: 0 auto; padding: 0 1.5rem 4rem; }
.prose { max-width: var(--measure); }
.prose p + p { margin-top: 1.15em; }
.prose em { font-style: italic; }

.eyebrow {
  font-family: 'Marcellus', serif; font-size: .78rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--sindoor); display: block; margin-bottom: .9rem;
}
h1 { font-family: 'Marcellus', serif; font-weight: 400; font-size: clamp(2.1rem, 5vw, 3.3rem); line-height: 1.12; letter-spacing: .005em; margin-bottom: 1.4rem; }
h2 { font-family: 'Marcellus', serif; font-weight: 400; font-size: 1.45rem; margin: 2.8rem 0 1rem; }
h3 { font-family: 'Marcellus', serif; font-weight: 400; font-size: 1.12rem; margin: 2rem 0 .5rem; }

.lede { font-size: clamp(1.15rem, 2.2vw, 1.35rem); line-height: 1.6; max-width: 56ch; }
.lede strong { font-weight: 500; }

/* hero */
.hero { padding-top: 5.5rem; }
.hero .question {
  font-family: 'Marcellus', serif; font-size: clamp(1.7rem, 4.2vw, 2.8rem); line-height: 1.28;
  max-width: 24ch; color: var(--ink); margin: 1.4rem 0 2.4rem;
}
.hero .question .mark { color: var(--sindoor); }
.dropcap::first-letter {
  font-family: 'Marcellus', serif; font-size: 5.2em; float: left; line-height: .74;
  padding: .04em .13em 0 0; margin-bottom: -.08em; color: var(--sindoor);
  text-shadow: .05em .05em 0 rgba(51,80,107,.22);
}

/* modes of practice: three quiet columns with sindoor ticks */
.modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2.4rem; margin-top: 1.6rem; }
.mode { border-top: 1px solid var(--ink); padding-top: 1rem; position: relative; }
.mode::before { content: ""; position: absolute; top: -1px; left: 0; width: 34px; height: 3px; background: var(--sindoor); }
.mode h3 { margin: 0 0 .5rem; }
.mode p { font-size: .98rem; }

/* publication lists */
ul.works { list-style: none; max-width: 70ch; }
ul.works li { padding: .85rem 0 .85rem 1.4rem; border-bottom: 1px solid rgba(27,36,48,.12); position: relative; }
ul.works li::before { content: ""; position: absolute; left: 0; top: 1.45rem; width: 9px; height: 2px; background: var(--sindoor); }
ul.works .venue { color: var(--river); font-style: italic; }
ul.works .status { font-family: 'Marcellus', serif; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--stone); margin-left: .4rem; white-space: nowrap; }

/* notes index (speculative drafts) */
ol.notes { list-style: none; counter-reset: n; max-width: 70ch; }
ol.notes li { counter-increment: n; padding: 1.3rem 0; border-bottom: 1px solid rgba(27,36,48,.12); display: grid; grid-template-columns: 3.2rem 1fr; gap: 1rem; }
ol.notes li::before { content: counter(n, upper-roman); font-family: 'Marcellus', serif; color: var(--stone); font-size: .95rem; padding-top: .15rem; }
ol.notes h3 { margin: 0 0 .3rem; }
ol.notes p { font-size: .98rem; color: #3a4350; }

/* research page: river margin */
.riverline { border-left: 2px solid var(--river); padding-left: 2rem; }
@media (max-width: 640px) { .riverline { padding-left: 1.1rem; } }

blockquote.qset { margin: 2rem 0; max-width: 60ch; }
blockquote.qset p { font-family: 'Marcellus', serif; font-size: 1.15rem; line-height: 1.5; padding: .9rem 0; border-bottom: 1px solid rgba(27,36,48,.12); }

/* footer */
footer.site { border-top: 1px solid var(--ink); max-width: 1040px; margin: 0 auto; padding: 2rem 1.5rem 3rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; align-items: baseline; }
footer.site .contact { font-family: 'Marcellus', serif; font-size: .95rem; }
footer.site small { color: var(--stone); font-size: .8rem; }

/* pass additions */
.skip { position:absolute; left:-999px; top:0; background:var(--ink); color:var(--paper); padding:.5rem 1rem; font-family:'Marcellus',serif; z-index:10; border:none; }
.skip:focus { left:0; }
.cta { max-width:1040px; margin:0 auto; padding:0 0 3.5rem; }
.cta h2 { font-size:1.7rem; max-width:26ch; margin-top:0; }
.cta p { max-width:56ch; }
@media (max-width:560px){ nav.site { gap:1rem .9rem; } nav.site a { font-size:.74rem; letter-spacing:.14em; } }

.siteh1 { font-family:'Marcellus',serif; font-weight:400; font-size:clamp(2.8rem,7vw,4.6rem); line-height:1.04; margin:0 0 .5rem; letter-spacing:.01em; }
.hero .eyebrow { font-size:.86rem; letter-spacing:.28em; }