/* ============================================================
   Tanvi Iyer — style.css
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  --bg:      #f5f2ec;
  --bg-2:    #ece7dd;
  --ink:     #141311;
  --ink-soft:#4a463f;
  --muted:   #8a8478;
  --line:    #d9d3c6;
  --accent:  #c8442a;
  --serif:   "Fraunces", "Times New Roman", serif;
  --sans:    "Inter", system-ui, -apple-system, sans-serif;
  --maxw:    1240px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background:  var(--bg);
  color:       var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x:  hidden;
  cursor:      none;
}
@media (max-width: 800px) { body { cursor: auto; } .cursor { display: none; } }

a { color: inherit; text-decoration: none; }
em { font-style: italic; font-family: var(--serif); font-weight: 400; }

/* ================================================================
   GRAIN OVERLAY
   ================================================================ */
.grain {
  position:       fixed;
  inset:          0;
  width:          100%;
  height:         100%;
  pointer-events: none;
  z-index:        9998;
  opacity:        0.55;
  mix-blend-mode: overlay;
}

/* ================================================================
   CURTAIN ENTRANCE
   ================================================================ */
.curtain {
  position:   fixed;
  inset:      0;
  z-index:    10000;
  display:    flex;
  flex-direction: column;
  align-items:    center;
  justify-content:center;
  pointer-events: all;
}

.curtain__panel {
  position:   absolute;
  left:       0;
  right:      0;
  height:     50%;
  background: var(--ink);
  transition: transform 0.85s cubic-bezier(0.76, 0, 0.24, 1);
  will-change:transform;
}
.curtain__panel--top    { top: 0; transform: translateY(0); }
.curtain__panel--bottom { bottom: 0; transform: translateY(0); }

.curtain__panel--retract-top    { transform: translateY(-100%); }
.curtain__panel--retract-bottom { transform: translateY(100%); }

.curtain__wordmark {
  position:   relative;
  z-index:    1;
  font-family:var(--serif);
  font-size:  clamp(28px, 4vw, 52px);
  font-weight:300;
  color:      var(--bg);
  letter-spacing: -.015em;
  opacity:    0;
  transform:  translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.curtain__wordmark--visible {
  opacity:   1;
  transform: translateY(0);
}
.curtain__wordmark--exit {
  opacity:   0;
  transform: translateY(-10px);
}

.curtain--done {
  opacity:    0;
  transition: opacity 0.3s ease 0.1s;
  pointer-events: none;
}

/* ================================================================
   CUSTOM CURSOR
   ================================================================ */
.cursor {
  position:       fixed;
  top:            0;
  left:           0;
  width:          14px;
  height:         14px;
  border-radius:  50%;
  background:     var(--ink);
  pointer-events: none;
  z-index:        10001;
  transform:      translate(-50%, -50%);
  transition:     width .25s ease, height .25s ease, background .25s ease;
  mix-blend-mode: difference;
}
.cursor.is-hover { width: 44px; height: 44px; background: var(--accent); }

/* Inside the CV modal the background is light — drop blend mode so cursor stays visible */
.cv-modal-open .cursor {
  mix-blend-mode: normal;
  background:     var(--ink);
}
.cv-modal-open .cursor.is-hover {
  background: var(--accent);
}

/* ================================================================
   NAV
   ================================================================ */
.nav {
  position:   fixed;
  top:        0; left: 0; right: 0;
  z-index:    50;
  display:    flex;
  align-items:     center;
  justify-content: space-between;
  padding:    22px 32px;
  mix-blend-mode: difference;
  color:      #fff;
  font-size:  14px;
  letter-spacing: .02em;
}
.nav__brand { font-family: var(--serif); font-size: 18px; font-weight: 500; }
.nav__links { display: flex; gap: 28px; }
.nav__links a { position: relative; display: inline-block; }
.nav__links a::after {
  content:    "";
  position:   absolute;
  left:       0; bottom: -4px;
  height:     1px; width: 0;
  background: #fff;
  transition: width .3s ease;
}
.nav__links a:hover::after { width: 100%; }
@media (max-width: 640px) { .nav__links { display: none; } }

/* ================================================================
   HERO
   ================================================================ */
.hero {
  min-height: 100vh;
  padding:    140px 32px 80px;
  max-width:  var(--maxw);
  margin:     0 auto;
  position:   relative;
}

.hero__parallax {
  display:        flex;
  flex-direction: column;
  justify-content:center;
  will-change:    transform, opacity;
}

.hero__label {
  font-size:      12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color:          var(--muted);
  margin-bottom:  36px;
}

/* ── Title lines ── */
.hero__title {
  font-family:    var(--serif);
  font-weight:    300;
  font-size:      clamp(44px, 8.4vw, 132px);
  line-height:    1.05;
  letter-spacing: -.02em;
}

.hero__line {
  display: block;
}
/* em inside hero lines must be inline-block so its child .char spans
   don't overflow and get cropped by the parent line-box */
.hero__line em {
  display: inline-block;
  vertical-align: bottom;
}

/* Individual words — fade in with stagger, no translateY to avoid clip */
.word {
  display:     inline-block;
  opacity:     0;
  transition:  opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: opacity;
}
.word--em {
  font-style:  italic;
  font-family: var(--serif);
}
.word--in {
  opacity: 1;
}

.hero__sub {
  margin-top: 40px;
  max-width:  560px;
  font-size:  clamp(16px, 1.3vw, 19px);
  color:      var(--ink-soft);
}

.hero__meta {
  margin-top: 56px;
  display:    flex;
  align-items:center;
  gap:        14px;
  font-size:  13px;
  letter-spacing: .06em;
  color:      var(--muted);
  text-transform: uppercase;
}
.dot { width: 4px; height: 4px; border-radius: 50%; background: var(--muted); }

.scroll-hint {
  position:       absolute;
  right:          32px;
  bottom:         40px;
  font-size:      11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color:          var(--muted);
  writing-mode:   vertical-rl;
}

/* ================================================================
   MARQUEE
   ================================================================ */
.marquee {
  border-top:    1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow:      hidden;
  padding:       22px 0;
  background:    var(--bg-2);
}
.marquee__track {
  display:     flex;
  gap:         32px;
  white-space: nowrap;
  font-family: var(--serif);
  font-size:   clamp(24px, 3vw, 44px);
  animation:   scroll 32s linear infinite;
  color:       var(--ink);
}
.marquee__track span { opacity: .85; }
@keyframes scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ================================================================
   SECTIONS
   ================================================================ */
.section {
  max-width: var(--maxw);
  margin:    0 auto;
  padding:   140px 32px;
  position:  relative;
}

/* Section index label with draw-in underline */
.section__index {
  font-size:      12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color:          var(--muted);
  margin-bottom:  48px;
  position:       relative;
  display:        inline-block;
  padding-bottom: 6px;
}
.section__index::after {
  content:    "";
  position:   absolute;
  left:       0; bottom: 0;
  height:     1px;
  width:      0;
  background: var(--muted);
  transition: width 0.7s cubic-bezier(0.76, 0, 0.24, 1) 0.1s;
}
.section__index.index--drawn::after { width: 100%; }

.section__title {
  font-family:    var(--serif);
  font-weight:    300;
  font-size:      clamp(34px, 5vw, 72px);
  line-height:    1.05;
  letter-spacing: -.015em;
  max-width:      16ch;
}

/* ================================================================
   ABOUT
   ================================================================ */
.about__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 80px; align-items: start; }
.about__body p { font-size: 17px; color: var(--ink-soft); margin-bottom: 20px; max-width: 52ch; }
.tags { list-style: none; margin-top: 28px; display: flex; flex-wrap: wrap; gap: 10px; }
.tags li {
  border:         1px solid var(--line);
  border-radius:  999px;
  padding:        8px 16px;
  font-size:      13px;
  color:          var(--ink-soft);
  transition:     background .3s ease, border-color .3s ease, color .3s ease;
}
.tags li:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
@media (max-width: 820px) { .about__grid { grid-template-columns: 1fr; gap: 40px; } }

/* ================================================================
   SERVICES
   ================================================================ */
.services__grid {
  margin-top: 56px;
  border-top: 1px solid var(--line);
}

.service {
  display:       grid;
  grid-template-columns: 120px 1fr;
  gap:           40px;
  padding:       44px 0;
  border-bottom: 1px solid var(--line);
  position:      relative;
  transition:    background .4s ease, padding .4s ease;
}

.service::before {
  content:          "";
  position:         absolute;
  left:             0; top: 0;
  width:            3px; height: 100%;
  background:       var(--accent);
  transform:        scaleY(0);
  transform-origin: top;
  transition:       transform .4s cubic-bezier(0.76, 0, 0.24, 1);
}
.service:hover::before { transform: scaleY(1); }
.service:hover         { background: var(--bg-2); padding-left: 24px; padding-right: 24px; }

.service__num {
  font-family: var(--serif);
  font-size:   22px;
  color:       var(--muted);
  padding-top: 6px;
}

.service__body h3 {
  font-family:   var(--serif);
  font-weight:   400;
  font-size:     clamp(22px, 2.4vw, 32px);
  line-height:   1.15;
  margin-bottom: 12px;
}

.service__body > p {
  color:     var(--ink-soft);
  font-size: 16px;
  max-width: 56ch;
}

.service__list {
  list-style: none;
  display:    flex;
  flex-wrap:  wrap;
  gap:        8px 20px;
  margin-top: 20px;
}
.service__list li {
  font-size:      13px;
  letter-spacing: .06em;
  color:          var(--muted);
  padding-left:   14px;
  position:       relative;
}
.service__list li::before {
  content:  "—";
  position: absolute;
  left:     0;
  color:    var(--accent);
}

@media (max-width: 640px) {
  .service { grid-template-columns: 1fr; gap: 12px; }
  .service:hover { padding-left: 0; padding-right: 0; }
}

/* ================================================================
   THINKING
   ================================================================ */
.pull {
  font-family:    var(--serif);
  font-weight:    300;
  font-size:      clamp(28px, 4.2vw, 58px);
  line-height:    1.15;
  max-width:      22ch;
  letter-spacing: -.01em;
  margin-bottom:  80px;
}
.thinking__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.note {
  border:        1px solid var(--line);
  border-radius: 14px;
  padding:       28px;
  background:    var(--bg-2);
  display:       block;
  position:      relative;
  overflow:      hidden;
  transition:    transform .5s cubic-bezier(0.2, 0.8, 0.2, 1),
                 background .4s ease,
                 border-color .4s ease,
                 box-shadow .4s ease;
}
/* Radial highlight that follows cursor inside card */
.note::after {
  content:    "";
  position:   absolute;
  inset:      0;
  background: radial-gradient(circle 180px at var(--mx, 50%) var(--my, 50%),
              rgba(200, 68, 42, 0.08) 0%, transparent 70%);
  opacity:    0;
  transition: opacity .4s ease;
  pointer-events: none;
}
.note:hover::after  { opacity: 1; }
.note:hover {
  transform:    translateY(-6px);
  border-color: var(--ink);
  box-shadow:   0 24px 48px -12px rgba(20, 19, 17, 0.12);
}
.note__kind {
  font-size:      11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color:          var(--accent);
}
.note h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-size:   22px;
  margin:      14px 0 10px;
  line-height: 1.2;
}
.note p { color: var(--ink-soft); font-size: 15px; }
@media (max-width: 820px) { .thinking__grid { grid-template-columns: 1fr; } }

/* ================================================================
   CONTACT
   ================================================================ */
.contact__lede {
  max-width:  52ch;
  color:      var(--ink-soft);
  font-size:  17px;
  margin-top: 24px;
}
.cta {
  display:     inline-flex;
  align-items: baseline;
  gap:         18px;
  margin-top:  48px;
  font-family: var(--serif);
  font-size:   clamp(28px, 4vw, 52px);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 8px;
  transition:  color .3s ease, border-color .3s ease;
  display:     inline-block; /* needed for magnetic translate */
}
.cta:hover              { color: var(--accent); border-color: var(--accent); }
.cta__arrow             { transition: transform .3s ease; display: inline-block; margin-left: 18px; }
.cta:hover .cta__arrow  { transform: translateX(8px); }

.socials { margin-top: 80px; display: flex; gap: 28px; flex-wrap: wrap; }
.socials a {
  font-size:      13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color:          var(--muted);
  border-bottom:  1px solid transparent;
  padding-bottom: 2px;
  transition:     color .3s, border-color .3s;
}
.socials a:hover { color: var(--ink); border-color: var(--ink); }

/* ================================================================
   FOOTER
   ================================================================ */
.footer {
  border-top: 1px solid var(--line);
  padding:    28px 32px;
  display:    flex;
  justify-content: space-between;
  font-size:  12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color:      var(--muted);
}
@media (max-width: 640px) { .footer { flex-direction: column; gap: 8px; text-align: center; } }

/* ================================================================
   REVEAL — scroll-triggered fade + slide
   ================================================================ */
.reveal {
  opacity:   0;
  transform: translateY(28px);
  transition:opacity .9s ease,
             transform .9s cubic-bezier(.2, .7, .2, 1);
}
.reveal.in { opacity: 1; transform: none; }

/* ================================================================
   NOTE CARD — JS radial spotlight (set CSS vars on mousemove)
   ================================================================ */
/* (JS sets --mx, --my on .note so the ::after gradient tracks cursor) */

/* ================================================================
   WAYS TO WORK TOGETHER
   ================================================================ */
.together__intro {
  max-width:  58ch;
  color:      var(--ink-soft);
  font-size:  17px;
  margin-top: 24px;
  margin-bottom: 56px;
}

/* 5-card grid: 3 across then 2 centred on second row */
.together__grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   24px;
}

/* Push cards 4 and 5 to start at col 1 of a notional 6-col grid
   so they sit centred under the first three */
.together__grid .note:nth-child(4) { grid-column: 1; }
.together__grid .note:nth-child(5) { grid-column: 2; }

@media (max-width: 960px) {
  .together__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .together__grid .note:nth-child(4),
  .together__grid .note:nth-child(5) { grid-column: auto; }
}

@media (max-width: 600px) {
  .together__grid { grid-template-columns: 1fr; }
}

/* Short italic descriptor line inside cards */
.together__descriptor {
  font-family:   var(--serif);
  font-style:    italic;
  font-size:     15px;
  color:         var(--ink-soft);
  margin-bottom: 10px;
  margin-top:    -4px;
}

/* Arrow CTA link inside cards and selected work cards */
.together__link {
  display:        inline-block;
  margin-top:     18px;
  font-size:      13px;
  letter-spacing: .06em;
  color:          var(--accent);
  transition:     letter-spacing .3s ease, color .3s ease;
}
.together__link:hover { letter-spacing: .12em; color: var(--ink); }

/* Bottom "not sure" line */
.together__cta {
  margin-top:  72px;
  padding-top: 40px;
  border-top:  1px solid var(--line);
  display:     flex;
  align-items: baseline;
  gap:         24px;
  flex-wrap:   wrap;
}

.together__cta-question {
  font-size:   16px;
  color:       var(--ink-soft);
}

.together__cta-link {
  font-family:    var(--serif);
  font-size:      clamp(20px, 2.2vw, 28px);
  border-bottom:  1px solid var(--ink);
  padding-bottom: 4px;
  transition:     color .3s ease, border-color .3s ease;
}
.together__cta-link:hover { color: var(--accent); border-color: var(--accent); }

/* "Who I work with" label between the two tag lists in About */
.about__who-label {
  font-size:      11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color:          var(--muted);
  margin-top:     32px;
  margin-bottom:  12px;
}

/* ================================================================
   WHO I WORK WITH
   ================================================================ */
.who__grid {
  display:     grid;
  grid-template-columns: 1.1fr .9fr;
  gap:         80px;
  align-items: start;
}

.who__list {
  list-style: none;
  border-top: 1px solid var(--line);
}

.who__list li {
  font-family:    var(--serif);
  font-weight:    300;
  font-size:      clamp(18px, 2vw, 26px);
  color:          var(--ink);
  padding:        20px 0;
  border-bottom:  1px solid var(--line);
  position:       relative;
  padding-left:   28px;
  transition:     color .3s ease, padding-left .3s ease;
}

.who__list li::before {
  content:          "—";
  position:         absolute;
  left:             0;
  color:            var(--accent);
  font-family:      var(--sans);
  font-size:        14px;
  top:              50%;
  transform:        translateY(-50%);
  transition:       transform .3s ease;
}

.who__list li:hover {
  color:        var(--accent);
  padding-left: 36px;
}

@media (max-width: 820px) {
  .who__grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ================================================================
   CV PAGE (standalone cv.html)
   ================================================================ */
.cv-page__main {
  max-width:  900px;
  margin:     0 auto;
  padding:    120px 32px 100px;
}

.cv-page__inner {
  position: relative;
}

.cv-page__back {
  display:        inline-block;
  font-size:      12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color:          var(--muted);
  margin-bottom:  56px;
  border-bottom:  1px solid transparent;
  padding-bottom: 2px;
  transition:     color .3s, border-color .3s;
}
.cv-page__back:hover { color: var(--ink); border-color: var(--ink); }

/* Active nav link on CV page */
.nav__link--active {
  color: #fff;
  opacity: 0.5;
}
.nav__link--active::after { display: none !important; }

@media (max-width: 760px) {
  .cv-page__main { padding: 100px 24px 80px; }
}

/* ================================================================
   CV MODAL (kept for reference — no longer used)
   ================================================================ */

/* Footer trigger button */
.footer__cv-btn {
  background:     none;
  border:         none;
  font-family:    var(--sans);
  font-size:      12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color:          var(--muted);
  cursor:         pointer;
  padding:        0;
  border-bottom:  1px solid transparent;
  padding-bottom: 2px;
  transition:     color .3s, border-color .3s;
}
.footer__cv-btn:hover { color: var(--ink); border-color: var(--ink); }

/* Dialog reset + slide-up entrance */
.cv-modal {
  position:   fixed;
  inset:      0;
  width:      100%;
  height:     100%;
  max-width:  100%;
  max-height: 100%;
  border:     none;
  padding:    0;
  margin:     0;
  background: var(--bg);
  color:      var(--ink);
  overflow:   hidden;
  z-index:    9000;

  /* Hidden state — slide down off-screen */
  transform:  translateY(100%);
  opacity:    0;
  transition: transform 0.65s cubic-bezier(0.76, 0, 0.24, 1),
              opacity   0.65s ease;

  /* Required for <dialog> visibility toggling */
  display:    flex;
  flex-direction: column;
}

/* When open — native <dialog>[open] or .is-open class */
.cv-modal[open],
.cv-modal.is-open {
  transform: translateY(0);
  opacity:   1;
}

/* Backdrop */
.cv-modal::backdrop {
  background: rgba(20, 19, 17, 0.6);
  backdrop-filter: blur(2px);
}

/* Scrollable inner container */
.cv-modal__inner {
  flex:       1;
  overflow-y: auto;
  padding:    80px 48px 120px;
  max-width:  900px;
  margin:     0 auto;
  width:      100%;
  position:   relative;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

/* Close button — fixed top-right inside modal */
.cv-modal__close {
  position:   sticky;
  top:        0;
  float:      right;
  display:    flex;
  align-items:center;
  gap:        8px;
  background: none;
  border:     1px solid var(--line);
  border-radius: 999px;
  font-family:var(--sans);
  font-size:  12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color:      var(--ink-soft);
  padding:    8px 18px;
  cursor:     pointer;
  margin-bottom: 48px;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
  z-index:    10;
}
.cv-modal__close:hover {
  background:   var(--ink);
  color:        var(--bg);
  border-color: var(--ink);
}

/* CV Header */
.cv-header {
  border-bottom: 1px solid var(--line);
  padding-bottom: 48px;
  margin-bottom:  64px;
}
.cv-header__name {
  font-family:    var(--serif);
  font-weight:    300;
  font-size:      clamp(36px, 6vw, 72px);
  line-height:    1.0;
  letter-spacing: -.02em;
  margin-bottom:  16px;
}
.cv-header__title {
  font-size:      15px;
  letter-spacing: .06em;
  color:          var(--ink-soft);
  margin-bottom:  10px;
}
.cv-header__meta {
  font-size:      13px;
  letter-spacing: .04em;
  color:          var(--muted);
}
.cv-header__meta a {
  color:          var(--muted);
  border-bottom:  1px solid var(--line);
  padding-bottom: 1px;
  transition:     color .2s, border-color .2s;
}
.cv-header__meta a:hover { color: var(--ink); border-color: var(--ink); }

/* CV Body */
.cv-body { display: flex; flex-direction: column; gap: 0; }

/* CV Section */
.cv-section {
  padding:       52px 0;
  border-bottom: 1px solid var(--line);
}
.cv-section:last-child { border-bottom: none; }

.cv-section__heading {
  font-size:      11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color:          var(--muted);
  margin-bottom:  36px;
  padding-bottom: 6px;
  position:       relative;
  display:        inline-block;
}
.cv-section__heading::after {
  content:    "";
  position:   absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--line);
}

.cv-section p {
  font-size:     16px;
  color:         var(--ink-soft);
  max-width:     72ch;
  margin-bottom: 14px;
  line-height:   1.65;
}
.cv-section p:last-child { margin-bottom: 0; }

/* CV Role block */
.cv-role {
  margin-bottom: 40px;
  padding-bottom: 40px;
  border-bottom:  1px solid var(--line);
}
.cv-role:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.cv-role__meta {
  display:        flex;
  flex-wrap:      wrap;
  align-items:    baseline;
  gap:            6px 20px;
  margin-bottom:  16px;
}
.cv-role__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size:   clamp(18px, 2vw, 24px);
  line-height: 1.2;
  color:       var(--ink);
}
.cv-role__org {
  font-size:      13px;
  letter-spacing: .04em;
  color:          var(--ink-soft);
}
.cv-role__period {
  font-size:   13px;
  color:       var(--accent);
  margin-left: auto;
}

/* Bullet list */
.cv-list {
  list-style: none;
  margin-top: 4px;
}
.cv-list li {
  font-size:     15px;
  color:         var(--ink-soft);
  padding-left:  18px;
  position:      relative;
  margin-bottom: 8px;
  line-height:   1.6;
  max-width:     72ch;
}
.cv-list li::before {
  content:  "—";
  position: absolute;
  left:     0;
  color:    var(--accent);
}

/* Publications list — no dash, just spaced items */
.cv-list--publications li::before { display: none; }
.cv-list--publications li {
  padding-left:  0;
  margin-bottom: 16px;
}
.cv-list--publications em {
  font-style:  italic;
  font-family: var(--serif);
}

/* Muted note line (e.g. relevant areas) */
.cv-note {
  font-size:      13px !important;
  letter-spacing: .03em;
  color:          var(--muted) !important;
  line-height:    1.7 !important;
}

/* Skills grid */
.cv-skills {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 48px;
}
.cv-skills__group h3 {
  font-family:   var(--sans);
  font-size:     12px;
  font-weight:   600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:         var(--ink);
  margin-bottom: 10px;
}
.cv-skills__group p {
  font-size:  14px !important;
  color:      var(--ink-soft) !important;
  max-width:  none !important;
  line-height:1.7 !important;
  margin:     0 !important;
}

/* Responsive */
@media (max-width: 760px) {
  .cv-modal__inner { padding: 48px 24px 80px; }
  .cv-role__period { margin-left: 0; }
  .cv-skills { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 480px) {
  .cv-modal__inner { padding: 32px 20px 60px; }
  .cv-header__name { font-size: clamp(32px, 10vw, 52px); }
}

/* ================================================================
   ESSAY / ARTICLE PAGE
   ================================================================ */
.essay-main {
  max-width:  740px;
  margin:     0 auto;
  padding:    120px 32px 100px;
}

.essay-inner {
  position: relative;
}

/* Header */
.essay-header {
  margin-bottom: 72px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--line);
}

.essay-header__kind {
  display:        block;
  font-size:      11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color:          var(--accent);
  margin-bottom:  24px;
}

.essay-header__title {
  font-family:    var(--serif);
  font-weight:    300;
  font-size:      clamp(36px, 6vw, 68px);
  line-height:    1.05;
  letter-spacing: -.02em;
  color:          var(--ink);
  margin-bottom:  24px;
}

.essay-header__subtitle {
  font-size:   clamp(17px, 1.5vw, 20px);
  color:       var(--ink-soft);
  line-height: 1.6;
  max-width:   60ch;
  margin-bottom: 32px;
}

.essay-header__byline {
  font-size:      13px;
  letter-spacing: .04em;
  color:          var(--muted);
  display:        flex;
  align-items:    center;
  gap:            10px;
}

.essay-header__sep { color: var(--line); }

/* Body */
.essay-body {
  font-family: var(--serif);
  font-weight: 300;
  font-size:   clamp(17px, 1.4vw, 20px);
  line-height: 1.8;
  color:       var(--ink-soft);
}

.essay-lede {
  font-size:   clamp(20px, 2vw, 26px);
  line-height: 1.6;
  color:       var(--ink);
  font-weight: 300;
  margin-bottom: 36px;
}

.essay-body p {
  margin-bottom: 28px;
  max-width:     68ch;
}

.essay-body em {
  font-style:  italic;
  font-family: var(--serif);
  color:       var(--ink);
}

.essay-body h2 {
  font-family:    var(--serif);
  font-weight:    300;
  font-size:      clamp(22px, 2.4vw, 30px);
  line-height:    1.2;
  letter-spacing: -.01em;
  color:          var(--ink);
  margin-top:     64px;
  margin-bottom:  24px;
  padding-top:    48px;
  border-top:     1px solid var(--line);
}

/* First h2 — no top border, it immediately follows the lede */
.essay-body h2:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top:  48px;
}

/* References */
.essay-references {
  margin-top:    72px;
  padding-top:   48px;
  border-top:    1px solid var(--line);
}

.essay-references h2 {
  font-size:      11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color:          var(--muted);
  font-family:    var(--sans);
  font-weight:    500;
  margin-bottom:  28px;
  border-top:     none;
  padding-top:    0;
  margin-top:     0;
}

.essay-references ul {
  list-style: none;
}

.essay-references li {
  font-family:   var(--sans);
  font-size:     13px;
  color:         var(--muted);
  line-height:   1.7;
  padding:       10px 0;
  border-bottom: 1px solid var(--line);
  max-width:     none;
  margin-bottom: 0;
}

.essay-references li:last-child { border-bottom: none; }

.essay-references em {
  font-style:  italic;
  font-family: var(--serif);
  color:       var(--muted);
}

/* Footer nav */
.essay-nav-footer {
  margin-top:    80px;
  padding-top:   48px;
  border-top:    1px solid var(--line);
}

/* Responsive */
@media (max-width: 640px) {
  .essay-main   { padding: 100px 24px 80px; }
  .essay-body p { max-width: none; }
}

/* Proposition callout — used in the AI trust paper */
.essay-proposition {
  border-left:   3px solid var(--accent);
  padding-left:  20px;
  margin:        32px 0;
  font-family:   var(--sans);
  font-size:     15px !important;
  color:         var(--ink) !important;
  line-height:   1.65 !important;
}

/* Sub-headings (h3) inside essay body */
.essay-body h3 {
  font-family:    var(--serif);
  font-weight:    400;
  font-size:      clamp(18px, 1.8vw, 22px);
  line-height:    1.3;
  color:          var(--ink);
  margin-top:     40px;
  margin-bottom:  16px;
}

/* ================================================================
   ESSAY FIGURES / IMAGES
   ================================================================ */
.essay-figure {
  margin:  48px 0 56px;
}

.essay-figure img {
  width:         100%;
  height:        auto;
  display:       block;
  border-radius: 6px;
}

.essay-figure figcaption {
  margin-top:     12px;
  font-family:    var(--sans);
  font-size:      12px;
  letter-spacing: .04em;
  color:          var(--muted);
  line-height:    1.6;
}