/* ============================================================
   Sunil Nakka — shared editorial system
   (matches Sunil - Homepage.html)
   ============================================================ */

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

:root {
  --cream:    #FFFFFF;
  --cream-2:  #F0F0EF;
  --ink:      #211F1A;
  --ink-soft: rgba(33, 31, 26, 0.60);
  --ink-faint:rgba(33, 31, 26, 0.38);
  --rule:     rgba(33, 31, 26, 0.15);
  --accent:   #1E47CC;            /* tweakable */
  --serif:    'Newsreader', Georgia, serif;  /* tweakable */
  --scale:    1;                  /* tweakable */
  --pad:      clamp(24px, 5.2vw, 92px);
}

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

body {
  background: var(--cream);
  color: var(--ink);
  font-family: 'Space Grotesk', sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
@media (hover: hover) and (pointer: fine) {
  body:not(.no-cursor-fx) { cursor: none; }
  body:not(.no-cursor-fx) a, body:not(.no-cursor-fx) button { cursor: none; }
}

a { color: inherit; text-decoration: none; }
.pad { padding-left: var(--pad); padding-right: var(--pad); }
.mono { font-family: 'IBM Plex Mono', monospace; }

/* ── responsive cursor ── */
.cursor-ring {
  position: fixed; top: 0; left: 0; width: 30px; height: 30px;
  border: 1.5px solid var(--accent); border-radius: 50%;
  pointer-events: none; z-index: 400; opacity: 0;
  mix-blend-mode: multiply; will-change: transform;
  transition: width .26s cubic-bezier(.2,.7,.2,1), height .26s cubic-bezier(.2,.7,.2,1), opacity .3s, background-color .26s;
}
.cursor-dot {
  position: fixed; top: 0; left: 0; width: 5px; height: 5px;
  background: var(--accent); border-radius: 50%;
  pointer-events: none; z-index: 401; opacity: 0;
  transform: translate(-50%, -50%); will-change: transform; transition: opacity .3s;
}
.cursor-ring.show, .cursor-dot.show { opacity: 1; }
.cursor-ring.show { opacity: .5; }
.cursor-ring.hover { width: 58px; height: 58px; opacity: .85; background: color-mix(in srgb, var(--accent) 12%, transparent); }
body.no-cursor-fx .cursor-ring, body.no-cursor-fx .cursor-dot { display: none; }

/* ── header ── */
header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 120;
  background: var(--cream); border-bottom: 1px solid var(--rule);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 60px; padding: 0 var(--pad); }
.logo { font-family: 'Playfair Display', Georgia, serif; font-size: 18px; font-weight: 700; letter-spacing: 0.02em; color: var(--ink); }
.header-right { display: flex; align-items: center; }
header nav { display: flex; gap: 28px; }
header nav a { font-size: 13px; color: var(--ink-soft); transition: color .15s; }
header nav a:hover, header nav a.active { color: var(--ink); }
.social-links { display: flex; gap: 20px; margin-left: 36px; padding-left: 36px; border-left: 1px solid var(--rule); }
.social-links a { font-size: 13px; color: var(--ink-soft); transition: color .15s; }
.social-links a:hover { color: var(--ink); }

/* ── reveal ── */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ── shared editorial bits ── */
.ruleline { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; border-top: 1px solid var(--rule); padding-top: 13px; font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-soft); flex-wrap: wrap; }

.draw { background-image: linear-gradient(var(--accent), var(--accent)); background-size: 0% 1.4px; background-position: 0 100%; background-repeat: no-repeat; padding-bottom: 3px; transition: background-size .4s cubic-bezier(.2,.7,.2,1), color .2s; }
.draw:hover { background-size: 100% 1.4px; color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .draw { transition: color .2s; } .draw:hover { background-size: 100% 1.4px; } }

/* ── footer ── */
footer { border-top: 1px solid var(--ink); overflow: hidden; margin-top: clamp(60px, 9vh, 130px); }
.wordmark { font-family: 'Playfair Display', Georgia, serif; font-weight: 400; font-size: clamp(58px, 17vw, 290px); line-height: 0.9; letter-spacing: -0.03em; padding: clamp(26px,4vw,52px) 0 clamp(20px,3vw,40px); }
.wordmark em { font-style: normal; color: var(--accent); }
.foot-bottom { display: flex; flex-wrap: wrap; gap: 10px 30px; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--rule); padding-top: 22px; padding-bottom: 40px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.03em; color: var(--ink-soft); }
.foot-bottom .links { display: flex; flex-wrap: wrap; gap: 22px; }

@media (max-width: 700px) {
  .social-links { display: none; }
}