/*
  Sanjeevan — author site
  Stone + basalt (Wai's ghats, the stone mortar). Emerald is reserved for healing:
  only the rhythm pulse and the primary action use it.
*/
:root {
  --stone: #E6E4DE;      /* page */
  --stone-2: #D9D6CE;    /* quiet surface */
  --basalt: #1D2124;     /* ink, dark bands */
  --slate: #5C6261;      /* secondary text */
  --emerald: #0E7C5B;    /* healing — use sparingly */
  --emerald-hi: #12A077; /* pulse on dark */
  --brass: #9C7A35;      /* the beats */
  --night: #15100C;      /* the cover's warm black */
  --amber: #F2B04B;      /* the cover's title */
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --deva: "Tiro Devanagari Marathi", "Noto Serif Devanagari", serif;
  /* From the cover (Penpot "A3.1 Final"): Poiret One = title + tagline, Tenor Sans = author + series */
  --display: "Poiret One", "Didot", serif;
  --label: "Tenor Sans", "Gill Sans", sans-serif;
  --gold: #FFB547;        /* cover title */
  --gold-author: #E0B36A; /* cover author name */
  --gold-series: #A57C46; /* cover series line */
  --tagline: #D2CFCA;     /* cover tagline */
  --measure: 34rem;
  --gutter: clamp(1rem, 4vw, 3rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--stone);
  color: var(--basalt);
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: clamp(1.0625rem, 0.95rem + 0.35vw, 1.1875rem);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { color: var(--emerald); }
:focus-visible { outline: 2px solid var(--emerald); outline-offset: 3px; }

.frame { max-width: 74rem; margin: 0 auto; padding-inline: var(--gutter); }
.measure { max-width: var(--measure); }

/* Header */
.site-header .frame { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem 2rem; flex-wrap: wrap; padding-block: 1.75rem; }
.brand { font-family: var(--label); font-size: .95rem; text-transform: uppercase; letter-spacing: .32em; text-decoration: none; }
.night .brand { color: var(--gold-author); }
.nav { display: flex; gap: 1.75rem; flex-wrap: wrap; font-family: var(--label); font-size: .9rem; letter-spacing: .04em; }
.nav a { text-decoration: none; color: var(--slate); }
.nav a:hover { color: var(--basalt); }
.nav a[aria-current="page"] { color: var(--basalt); text-decoration: underline; }

/* Type scale (≈1.333) */
h1, h2, h3 { font-weight: 400; margin: 0; }
.title {
  font-size: clamp(3.75rem, 1.5rem + 9vw, 9rem);
  line-height: .9;
  letter-spacing: -.035em;
  font-variation-settings: "opsz" 72;
}
.subtitle { font-style: italic; font-size: clamp(1.4rem, 1rem + 1.4vw, 2rem); margin: .9rem 0 0; color: var(--slate); }
h2 { font-family: var(--display); font-size: clamp(2rem, 1.3rem + 2.3vw, 3rem); line-height: 1.12; letter-spacing: .01em; -webkit-text-stroke: .6px currentColor; margin-bottom: 1.25rem; }
h3 { font-size: 1.3rem; margin-bottom: .4rem; }
p { margin: 0 0 1em; }
.lede { font-size: clamp(1.25rem, 1rem + .8vw, 1.55rem); line-height: 1.42; }
.quiet { color: var(--slate); }

/* Hero */
.hero { padding-block: clamp(2.5rem, 8vw, 7rem) clamp(4rem, 10vw, 8rem); }
.hero .frame { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.hero .lede { margin-top: 2.25rem; max-width: 28rem; }
@media (max-width: 820px) {
  .hero .frame { grid-template-columns: 1fr; }
  .hero figure { order: -1; max-width: 17rem; }
  .hero .book-fig { max-width: 14rem; }
}

/* Night: header + hero in the cover's own darkness */
.night { background: radial-gradient(ellipse 60% 70% at 72% 50%, #2B2119 0%, var(--night) 70%); color: var(--stone); }
.night .link { color: var(--stone); }
.night .nav a { color: #A79F93; }
.night .nav a:hover, .night .nav a[aria-current="page"] { color: var(--stone); }
.night a:hover { color: var(--amber); }
.night .lede { color: #DAD4C9; }
.night .quiet, .night .fine { color: #A79F93; }
.night .btn:hover { background: var(--stone); color: var(--night); }
.series { font-family: var(--label); text-transform: uppercase; letter-spacing: .28em; color: var(--gold-series); font-size: clamp(.72rem, .65rem + .25vw, .85rem); margin-bottom: 1.4rem; }
/* The cover owns the gold deco title; the page title stays quiet beside it so the two never compete */
.book-title { font-family: var(--serif); color: var(--stone); font-size: clamp(3rem, 1.3rem + 5.6vw, 6.25rem); line-height: .96; letter-spacing: -.03em; font-variation-settings: "opsz" 72; }

/* The book, with Ektaal keeping time beneath it */
.book-fig { margin: 0; justify-self: center; width: 100%; max-width: 21rem; display: grid; justify-items: center; }
.book-fig .cover {
  width: 100%; height: auto;
  border-radius: 2px 5px 5px 2px;
  box-shadow: 0 50px 90px rgba(0,0,0,.65), 0 12px 28px rgba(0,0,0,.5);
}

/* One bol at a time, laid over the cover's dark floor on a soft scrim */
.book-fig { position: relative; }
.theka {
  position: absolute; left: -10%; bottom: 19%;
  width: 33%; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle, rgba(21, 16, 12, .86) 60%, rgba(21, 16, 12, .7) 100%);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  border: 1px solid rgba(201, 161, 94, .35);
  box-shadow: 0 0 0 5px rgba(201, 161, 94, .07);
}
.theka > .bol {
  grid-area: 1 / 1; display: grid; justify-items: center; gap: 0;
  opacity: 0; transition: opacity 1.1s cubic-bezier(.45, 0, .55, 1);
}
/* fade out fully, then the next fades in: no overlap */
.theka > .bol.on { opacity: 1; transition-delay: 1.1s; }
.bol b { font-family: var(--deva); font-weight: 400; font-size: clamp(1.05rem, .7rem + .9vw, 1.5rem); line-height: 1.15; color: #C9A15E; }
.bol i { font-size: clamp(.62rem, .5rem + .3vw, .78rem); color: #8E887E; }
.bol small { margin-top: .1rem; font-size: clamp(.52rem, .45rem + .2vw, .62rem); color: #7A746B; white-space: nowrap; }

/* Cycling quotes: stacked in one cell so the band never changes height */
.quotes { display: grid; place-items: center; }
.quotes > figure { grid-area: 1 / 1; margin: 0; opacity: 0; }
.quotes > figure.on { opacity: 1; }
/* Each quote lives exactly as long as the slider: fades in over the first 10%,
   holds, fades out over the last 10%, and is gone when the line is full. */
.quotes.live > figure.on { animation: qlife var(--dur, 7s) ease-in-out forwards; }
@keyframes qlife { 0% { opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .quotes.live > figure.on { animation: none; opacity: 1; } }
.quotes blockquote { color: var(--tagline); }
.held { align-content: center; gap: 3rem; }

/* Time slider: one long line that fills over each quote's turn; click for the next quote */
.qtimer { display: block; position: relative; width: min(26rem, 70vw); height: 1.5rem; padding: 0; border: 0; background: none; cursor: pointer; }
.qtimer::before,
.qtimer span { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; border-radius: 1px; }
.qtimer::before { background: rgba(189, 183, 173, .08); }
.qtimer span { background: rgba(189, 183, 173, .38); transform: scaleX(0); transform-origin: left; }
.qtimer.run span { animation: qfill var(--dur) linear forwards; }
.qtimer:hover::before { background: rgba(189, 183, 173, .16); }
@keyframes qfill { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .qtimer span { display: none; } }

/* Forms on night */
.night .signup label { color: #A79F93; }
.night .signup input { color: var(--stone); border-bottom-color: #8A8378; }
.night .signup input:focus { border-bottom-color: var(--emerald-hi); }
.night .signup .status.err { color: #F0A08A; }

/* Actions */
.actions { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-top: 2.25rem; }
.btn {
  display: inline-block; font-family: var(--label); font-size: .95rem; letter-spacing: .05em; line-height: 1.4; cursor: pointer;
  background: var(--emerald); color: #fff; border: 0; border-radius: 999px;
  padding: .85rem 1.6rem; text-decoration: none;
  transition: background-color .2s;
}
.btn:hover { background: var(--basalt); color: #fff; }
.btn:disabled { opacity: .6; cursor: progress; }
.link { color: var(--basalt); }

/* Held frame: one line, a lot of silence */
.held {
  background: var(--basalt); color: var(--stone);
  min-height: min(70vh, 40rem); display: grid; place-items: center; text-align: center;
  padding: 6rem var(--gutter);
}
.held blockquote { margin: 0; max-width: 22ch; font-style: italic; font-size: clamp(1.9rem, 1.1rem + 3vw, 3.4rem); line-height: 1.2; letter-spacing: -.01em; }
.held cite { display: block; margin-top: 2rem; font-style: normal; font-family: var(--label); font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-series); }

/* Story: prose column + margin notes */
.story { padding-block: clamp(4rem, 10vw, 8rem); }
.story .frame { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 16rem); gap: clamp(2rem, 6vw, 6rem); }
.story .prose { max-width: var(--measure); }
.notes { margin: 0; padding-top: .5rem; border-top: 1px solid var(--slate); align-self: start; font-size: .95rem; }
.notes dt { color: var(--slate); margin-top: 1rem; }
.notes dd { margin: 0; }
@media (max-width: 820px) { .story .frame { grid-template-columns: 1fr; } }

/* Signup */
.join { background: var(--stone-2); padding-block: clamp(4rem, 9vw, 7rem); }
.signup { display: grid; gap: .9rem; max-width: 30rem; margin-top: 2rem; }
.signup label { font-size: .95rem; color: var(--slate); display: grid; gap: .35rem; }
.signup input {
  font: inherit; color: var(--basalt); background: transparent;
  border: 0; border-bottom: 1px solid var(--basalt); border-radius: 0;
  padding: .45rem 0; width: 100%;
}
.signup input:focus { outline: none; border-bottom: 2px solid var(--emerald); padding-bottom: calc(.45rem - 1px); }
.signup .btn { justify-self: start; margin-top: .75rem; }
.signup .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.signup .status { min-height: 1.5em; margin: 0; }
.signup .status.err { color: #A3341F; }
.fine { font-size: .9rem; color: var(--slate); margin: 0; }

/* Simple pages */
.page { padding-block: clamp(3rem, 8vw, 6rem) clamp(4rem, 10vw, 8rem); }
.page h1 { font-family: var(--display); font-size: clamp(2.6rem, 1.4rem + 4.5vw, 4.75rem); line-height: 1.05; letter-spacing: .01em; -webkit-text-stroke: 1px currentColor; margin-bottom: 2rem; }
.page h2 { margin-top: 3.5rem; }
.page h3 { margin-top: 2rem; }
.row-links { display: flex; gap: 1.75rem; flex-wrap: wrap; }

/* Footer */
.site-footer { border-top: 1px solid rgba(29,33,36,.2); padding-block: 2.25rem 3rem; font-size: .92rem; color: var(--slate); }
.site-footer .frame { display: flex; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; }
.site-footer nav { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--basalt); text-decoration: underline; }