/* ADHITYA — personal site. "The Manuscript": ivory paper, ink serif, one gold thread. */

:root {
  --paper: #f6f1e7;
  --paper-2: #efe8d9;
  --ink: #1c1811;
  --ink-soft: #4a4438;
  --ink-faint: #8a8172;
  --gold: #a8863c;
  --gold-hi: #c9a65c;
  --night: #14110c;
  --night-deep: #0e0c07;
  --night-card: #1c1812;
  --night-ink: #e9e2d2;
  --night-soft: #a89e8a;
  --hair: rgba(28,24,17,.16);
  --hair-night: rgba(233,226,210,.16);
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --body: "Newsreader", Georgia, serif;
  --sans: "Inter", -apple-system, sans-serif;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--gold-hi); color: var(--night); }

a { color: inherit; }
.eyebrow {
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  letter-spacing: .32em; text-transform: uppercase; color: var(--gold);
}
.eyebrow.gold { color: var(--gold-hi); }

/* ---------- reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform .9s ease; }
.reveal.in { opacity: 1; transform: none; }
.d1 { transition-delay: .1s; } .d2 { transition-delay: .2s; } .d3 { transition-delay: .3s; } .d4 { transition-delay: .4s; }

/* ---------- nav ---------- */
.nav {
  position: absolute; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 30px 5vw;
}
.nav-name { font-family: var(--serif); font-size: 24px; font-weight: 500; text-decoration: none; letter-spacing: .01em; }
.nav-dot { color: var(--gold); }
.nav-links { display: flex; gap: 34px; }
.nav-links a {
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; text-decoration: none; color: var(--ink-soft);
  border-bottom: 1px solid transparent; padding-bottom: 3px; transition: color .2s, border-color .2s;
}
.nav-links a:hover { color: var(--ink); border-color: var(--gold); }
.nav-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 10px; background: none; border: none; cursor: pointer;
}
.nav-toggle span {
  display: block; height: 2px; width: 100%; background: var(--ink);
  transition: transform .25s ease, opacity .2s ease;
}
.nav.open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav.open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 760px) {
  .nav { padding: 22px 5vw; }
  .nav-toggle { display: flex; }
  .nav-links {
    position: absolute; top: 100%; right: 5vw; left: 5vw;
    flex-direction: column; gap: 0; padding: 10px 0;
    background: var(--paper); border: 1px solid var(--hair); border-radius: 4px;
    box-shadow: 0 18px 40px rgba(28,24,17,.14);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
  }
  .nav.open .nav-links { opacity: 1; visibility: visible; transform: none; }
  .nav-links a { padding: 13px 22px; font-size: 13px; border-bottom: none; }
  .nav-links a:hover { background: var(--paper-2); }
  .nav-links a + a { border-top: 1px solid var(--hair); }
}

/* ---------- hero ---------- */
.hero {
  min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
  padding: 120px 5vw 40px; position: relative;
  background:
    radial-gradient(1300px 620px at 85% 0%, rgba(201,166,92,.18), transparent 62%),
    radial-gradient(900px 500px at 92% 8%, rgba(201,166,92,.10), transparent 60%),
    var(--paper);
}
.hero-inner {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 6vw;
  align-items: center; max-width: 1280px; margin: 0 auto; width: 100%;
}
.hero h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(38px, 4.6vw, 64px); line-height: 1.12; letter-spacing: -.01em;
  margin: 26px 0 24px;
}
.hero-sub { font-size: 19px; color: var(--ink-soft); max-width: 30em; }
.inline { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--gold); }

.playlink {
  margin-top: 34px; display: inline-flex; align-items: center; gap: 14px;
  background: none; border: none; cursor: pointer; font-family: var(--sans);
  font-size: 12.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
  padding: 0;
}
.play-ring {
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--gold);
  display: inline-flex; align-items: center; justify-content: center; transition: background .2s;
}
.play-ring i {
  width: 0; height: 0; border-left: 11px solid var(--gold); border-top: 7px solid transparent; border-bottom: 7px solid transparent;
  transform: translateX(2px); transition: border-left-color .2s;
}
.playlink:hover .play-ring { background: var(--gold); }
.playlink:hover .play-ring i { border-left-color: var(--paper); }

.hero-fig { position: relative; }
.fig-play {
  display: block; position: relative; border: none; background: none; cursor: pointer; padding: 0; width: 100%;
}
.fig-play img {
  width: 100%; border-radius: 14px; display: block;
  box-shadow: 0 30px 70px rgba(28,24,17,.22), 0 0 0 1px var(--hair);
}
.fig-ring {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 74px; height: 74px; border-radius: 50%;
  background: rgba(20,17,12,.55); backdrop-filter: blur(3px);
  border: 1px solid rgba(233,226,210,.7); display: flex; align-items: center; justify-content: center;
  transition: transform .25s, background .25s;
}
.fig-ring i { width: 0; height: 0; border-left: 18px solid #f2ead6; border-top: 11px solid transparent; border-bottom: 11px solid transparent; transform: translateX(3px); }
.fig-play:hover .fig-ring { transform: translate(-50%,-50%) scale(1.08); background: rgba(20,17,12,.75); }
.hero-fig figcaption { margin-top: 14px; font-family: var(--sans); font-size: 11.5px; letter-spacing: .06em; color: var(--ink-faint); }

.scroll-cue {
  position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%);
  font-family: var(--sans); font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--ink-faint); text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.scroll-cue span { width: 1px; height: 44px; background: var(--hair); position: relative; overflow: hidden; display: block; }
.scroll-cue span::after { content:''; position: absolute; left: 0; top: -50%; width: 100%; height: 50%; background: var(--gold); animation: cue 2.2s ease-in-out infinite; }
@keyframes cue { 0%{top:-50%} 60%,100%{top:110%} }

/* ---------- section head ---------- */
.sec-head { max-width: 1280px; margin: 0 auto; padding: 0 5vw 54px; }
.sec-head h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 3.6vw, 50px); line-height: 1.15; margin-top: 20px; }
.sec-sub { margin-top: 16px; color: var(--ink-faint); font-style: italic; }

/* ---------- journey timeline ---------- */
.journey { padding: 90px 0 100px; background: var(--paper); }
.timeline { max-width: 1080px; margin: 0 auto; padding: 0 5vw; }
.beat { border-top: 1px solid var(--hair); }
.beat:last-child { border-bottom: 1px solid var(--hair); }
.beat-head {
  width: 100%; display: grid; grid-template-columns: 86px 1fr; align-items: baseline;
  gap: 26px; padding: 21px 4px; background: none; border: none; cursor: pointer; text-align: left;
}
.beat-year { font-family: var(--serif); font-weight: 500; font-size: 19px; color: var(--gold); }
.beat-title {
  display: block; font-family: var(--serif); font-weight: 500; font-size: 24px; letter-spacing: -.01em;
  color: var(--ink); transition: color .2s;
}
.beat-head:hover .beat-title { color: var(--gold); }
.beat-cta {
  display: flex; width: fit-content; align-items: center; gap: 9px; margin-top: 9px;
  font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold);
}
.beat-cta i {
  display: inline-block; width: 7px; height: 7px;
  border-right: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold);
  transform: rotate(45deg) translateY(-2px); transition: transform .25s;
}
.beat.open .beat-cta i { transform: rotate(225deg) translateY(-2px); }
.beat-body {
  max-height: 0; overflow: hidden; transition: max-height .65s ease, padding .4s ease; padding: 0 4px;
}
.beat.open .beat-body { max-height: 1400px; padding-bottom: 30px; }
.beat-body-in { padding-left: 112px; }
.beat-txt p { color: var(--ink-soft); max-width: 66em; }
.beat-ps { margin-top: 14px; font-size: 14.5px; font-style: italic; color: var(--ink-faint); max-width: 56em; }
.beat-figs { display: grid; gap: 22px; margin-top: 24px; grid-template-columns: minmax(0, 560px); }
.beat-figs.duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fig-col { display: grid; gap: 22px; align-content: start; }
.beat-figs figure { margin: 0; }
.beat-figs img {
  width: 100%; border-radius: 12px; display: block;
  box-shadow: 0 18px 44px rgba(28,24,17,.16); border: 1px solid var(--hair);
}
.beat-figs figcaption { margin-top: 9px; font-family: var(--sans); font-size: 11.5px; letter-spacing: .05em; color: var(--ink-faint); }

/* ---------- teaching (four pillars) ---------- */
.teaching { background: var(--paper-2); padding: 120px 0 130px; }
.pillars { max-width: 1280px; margin: 0 auto; padding: 0 5vw; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.pillar {
  background: var(--paper); border: 1px solid var(--hair); border-radius: 16px; padding: 28px 26px 30px;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.pillar:hover { transform: translateY(-6px); border-color: rgba(168,134,60,.5); box-shadow: 0 22px 50px rgba(28,24,17,.12); }
.pillar-num { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .26em; color: var(--gold); }
.pillar h3 { font-family: var(--serif); font-weight: 500; font-size: 34px; margin-top: 14px; letter-spacing: -.01em; }
.pillar-tag { margin-top: 6px; font-family: var(--serif); font-style: italic; font-size: 17.5px; }
.pillar-txt { margin-top: 12px; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }

/* ---------- work (editorial rows) ---------- */
.work { background: var(--night-deep); color: var(--night-ink); padding: 120px 0 40px; border-top: 1px solid rgba(201,166,92,.22); }
.work .sec-head h2 { color: var(--night-ink); }
.work .sec-head { padding-bottom: 20px; }
.wrows { max-width: 1280px; margin: 0 auto; padding: 0 5vw; }
.wrow {
  display: grid; grid-template-columns: 1fr 1.05fr; gap: 5vw; align-items: center;
  padding: 68px 0; border-top: 1px solid var(--hair-night);
}
.wrow.flip .wrow-media { order: 2; }
.wrow-media, .wrow-copy { min-width: 0; }
.wrow-kind { font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-hi); }
.wrow h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 3vw, 42px); margin-top: 14px; letter-spacing: -.01em; }
.wrow-note { font-family: var(--serif); font-style: italic; color: var(--gold-hi); margin-top: 8px; font-size: 16px; }
.wrow-txt { margin-top: 16px; font-size: 16.5px; line-height: 1.65; color: var(--night-soft); max-width: 34em; }
.wrow-ctas { margin-top: 30px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

.btn-gold, .btn-line {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none; cursor: pointer;
  font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  border-radius: 40px; padding: 15px 30px; transition: background .25s, color .25s, border-color .25s;
}
.btn-gold { background: var(--gold); color: var(--night); border: 1px solid var(--gold); }
.btn-gold:hover { background: var(--gold-hi); border-color: var(--gold-hi); }
.btn-gold i { width: 18px; height: 1px; background: currentColor; position: relative; }
.btn-gold i::after { content:''; position: absolute; right: 0; top: -3px; width: 6px; height: 6px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg) translateY(1px); }
.btn-line { background: none; color: var(--night-ink); border: 1px solid var(--hair-night); }
.btn-line:hover { border-color: var(--gold-hi); color: var(--gold-hi); }
.btn-ghost {
  display: inline-flex; font-family: var(--sans); font-size: 11px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: #5c564a;
  border: 1px solid rgba(236,231,216,.1); border-radius: 40px; padding: 15px 30px;
}

/* video facade */
.vidfacade {
  position: relative; display: block; width: 100%; aspect-ratio: 16/9; border: none; cursor: pointer;
  border-radius: 14px; background-size: cover; background-position: center; background-color: #000;
  box-shadow: 0 30px 70px rgba(0,0,0,.55), 0 0 0 1px var(--hair-night);
}
.vidfacade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 14px; }
.vidring {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 74px; height: 74px; border-radius: 50%;
  background: rgba(9,10,17,.6); backdrop-filter: blur(3px);
  border: 1px solid rgba(236,231,216,.7); display: flex; align-items: center; justify-content: center;
  transition: transform .25s, background .25s;
}
.vidring i { width: 0; height: 0; border-left: 18px solid #f2ead6; border-top: 11px solid transparent; border-bottom: 11px solid transparent; transform: translateX(3px); }
.vidfacade:hover .vidring { transform: translate(-50%,-50%) scale(1.08); background: rgba(9,10,17,.8); }
.vidcap {
  position: absolute; left: 16px; top: 14px;
  font-family: var(--sans); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(236,231,216,.92); background: rgba(9,10,17,.55); backdrop-filter: blur(3px);
  padding: 7px 12px; border-radius: 20px; border: 1px solid rgba(236,231,216,.25);
}

/* book */
.bookwrap { display: block; max-width: 420px; margin: 0 auto; }
.bookwrap img {
  width: 100%; border-radius: 10px; display: block;
  box-shadow: 0 40px 80px rgba(0,0,0,.6), 0 0 0 1px var(--hair-night);
  transition: transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .6s ease;
}
.wrow:hover .bookwrap img {
  transform: perspective(1000px) rotateY(-5deg) rotate(-1deg) translateY(-10px) scale(1.02);
  box-shadow: 0 60px 110px rgba(0,0,0,.72), 0 0 0 1px rgba(201,166,92,.45);
}

/* placeholders */
.soonshelf {
  aspect-ratio: 16/9; border: 1px dashed rgba(236,231,216,.2); border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
}
.soonshelf span { font-family: var(--sans); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-faint); }
.is-soon h3, .is-soon .wrow-txt { color: var(--night-soft); }

/* ---------- free-read reader ---------- */
.reader {
  position: fixed; inset: 0; z-index: 100; background: rgba(10,8,5,.94);
  display: flex; align-items: center; justify-content: center; padding: 4vw;
  animation: tvIn .25s ease both;
}
.reader-panel {
  width: min(780px, 100%); max-height: 88vh; background: var(--paper); color: var(--ink);
  border-radius: 14px; display: flex; flex-direction: column;
  box-shadow: 0 40px 120px rgba(0,0,0,.6), 0 0 0 1px var(--hair);
}
.reader-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 32px 38px 0; }
.reader-head h3 { font-family: var(--serif); font-weight: 500; font-size: 26px; }
.reader-head .reader-sub { font-family: var(--sans); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); margin-top: 8px; }
.reader-body { padding: 6px 38px 40px; overflow-y: auto; }
.reader-body h4 { font-family: var(--serif); font-weight: 500; font-size: 23px; margin: 34px 0 2px; color: var(--gold); }
.reader-body h4:first-child { margin-top: 20px; }
.reader-body p { margin-top: 14px; font-size: 16.5px; line-height: 1.8; color: var(--ink-soft); }
.reader-body .poem p {
  margin-top: 6px; font-family: var(--serif); font-style: italic; font-size: 20px;
  line-height: 1.9; color: var(--ink);
}
.reader-body img {
  margin: 24px auto 4px; width: 100%; max-width: 560px; display: block;
  border-radius: 10px; border: 1px solid var(--hair);
  box-shadow: 0 16px 44px rgba(28,24,17,.2);
}
.reader-x { flex: none; background: none; border: 1px solid var(--hair); border-radius: 50%; width: 40px; height: 40px; cursor: pointer; color: var(--ink); font-size: 15px; }
.reader-x:hover { border-color: var(--gold); }
.reader-loading { padding: 40px 38px; color: var(--ink-faint); font-style: italic; }

/* ---------- contact ---------- */
.contact { padding: 90px 5vw 130px; text-align: center; background: var(--paper); }
.contact > div { max-width: 760px; margin: 0 auto; }
.contact-quote { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: clamp(28px, 3.4vw, 46px); margin-top: 18px; line-height: 1.25; }
.contact-sub { margin-top: 20px; color: var(--ink-soft); font-size: 17.5px; max-width: 36em; margin-left: auto; margin-right: auto; }
.mail-btn {
  margin-top: 36px; display: inline-block; text-decoration: none;
  font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink); border: 1px solid var(--gold); border-radius: 40px; padding: 15px 40px;
  transition: background .25s, color .25s;
}
.mail-btn:hover { background: var(--gold); color: var(--paper); }

/* contact form */
.cform { margin-top: 56px; text-align: left; display: grid; gap: 22px; }
.cform-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.cform-field { display: grid; gap: 8px; }
.cform-field label {
  font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-faint);
}
.cform-field label em { font-style: italic; text-transform: none; letter-spacing: .04em; font-weight: 400; color: var(--ink-faint); }
.cform-field input, .cform-field textarea {
  font-family: var(--sans); font-size: 15.5px; color: var(--ink);
  background: transparent; border: none; border-bottom: 1px solid var(--hair);
  padding: 10px 2px; border-radius: 0; resize: vertical;
}
.cform-field input:focus, .cform-field textarea:focus { outline: none; border-bottom-color: var(--gold); }
.cform-send { justify-self: start; margin-top: 6px; cursor: pointer; }
.cform-note { font-size: 13px; color: var(--ink-faint); font-style: italic; }
.cform-note.ok { color: var(--gold); font-style: normal; }
.cform-note.err { color: #a4453a; font-style: normal; }

/* ---------- media marquee ---------- */
.media { background: var(--paper); padding: 0 0 40px; overflow: hidden; }
.media .eyebrow { text-align: center; margin-bottom: 34px; }
.marquee { position: relative; }
.marquee::before, .marquee::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(90deg, var(--paper), transparent); }
.marquee::after { right: 0; background: linear-gradient(-90deg, var(--paper), transparent); }
.marquee-track {
  display: flex; align-items: center; width: max-content;
  animation: mq 36s linear infinite;
}
.marquee-track span {
  font-family: var(--serif); font-weight: 500; font-size: 24px; color: var(--ink-faint);
  white-space: nowrap; padding: 0 30px; transition: color .2s;
}
.marquee-track span:hover { color: var(--gold); }
.marquee-track i { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); flex: none; opacity: .55; }
@keyframes mq { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- footer ---------- */
.foot { background: var(--night); color: var(--night-ink); text-align: center; padding: 90px 5vw 50px; }
.foot-quote { font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--night-soft); }
.foot-quote-sub { max-width: 560px; margin: 18px auto 0; font-size: 14.5px; line-height: 1.65; color: #8d8271; }
.foot-copy { margin-top: 40px; font-family: var(--sans); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #6a6152; }

/* ---------- trailer lightbox ---------- */
.tv {
  position: fixed; inset: 0; z-index: 100; background: rgba(10,8,5,.94);
  display: flex; align-items: center; justify-content: center; padding: 4vw;
  animation: tvIn .25s ease both;
}
@keyframes tvIn { from { opacity: 0 } }
.tv-inner { width: min(1020px, 100%); }
.tv video { width: 100%; border-radius: 10px; box-shadow: 0 40px 120px rgba(0,0,0,.6); background: #000; }
.tv-cap { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; }
.tv-cap span { font-family: var(--sans); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: #a89e8a; }
.tv-x { background: none; border: 1px solid var(--hair-night); border-radius: 50%; width: 40px; height: 40px; cursor: pointer; color: var(--night-ink); font-size: 15px; }
.tv-x:hover { border-color: var(--gold-hi); }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; gap: 44px; }
  .hero-fig { max-width: 560px; }
  .work-grid { grid-template-columns: 1fr; }
  .wrow { grid-template-columns: 1fr; gap: 30px; padding: 52px 0; }
  .wrow.flip .wrow-media { order: 0; }
  .bookwrap { max-width: 270px; margin: 0; }
  .beat-body-in { padding-left: 0; }
  .beat-figs.duo { grid-template-columns: 1fr; }
  .beat.open .beat-body { max-height: 3200px; }
  .pillars { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .pillars { grid-template-columns: 1fr; }
  .cform-row { grid-template-columns: 1fr; }
  .marquee-track span { font-size: 19px; padding: 0 20px; }
}