/* ───────── Shared base — Saahil Kamath catalog ───────── */
:root {
  /* dark by default */
  --bg: #15130f;
  --ink: #ece7dc;
  --mute: #8a8378;
  --rule: rgba(236, 231, 220, 0.10);
  --grain-color: rgba(236, 231, 220, 0.05);
  --halo-color: rgba(236, 231, 220, 0.07);
  --grain-blend: screen;
  --accent: #c9a37a;
  --serif: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}

[data-theme="light"] {
  --bg: #f3f1ec;
  --ink: #161412;
  --mute: #7a736b;
  --rule: rgba(22, 20, 18, 0.10);
  --grain-color: rgba(22, 20, 18, 0.035);
  --halo-color: rgba(22, 20, 18, 0.05);
  --grain-blend: multiply;
  --accent: #8a3a1f;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; }
html { background: var(--bg); }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color 600ms ease, color 600ms ease;
}

/* paper grain */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  background-image: radial-gradient(var(--grain-color) 1px, transparent 1px);
  background-size: 3px 3px;
  mix-blend-mode: var(--grain-blend);
  z-index: 9;
}

/* ── Theme toggle (minimal half-circle moon) ── */
.theme-toggle {
  appearance: none;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 50%;
  width: 28px; height: 28px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  color: var(--ink);
  transition: border-color 300ms ease, transform 600ms cubic-bezier(.2,.8,.2,1);
  pointer-events: auto;
  margin-left: 18px;
  vertical-align: middle;
}
.theme-toggle:hover { border-color: var(--ink); }
.theme-toggle svg {
  display: block;
  width: 14px; height: 14px;
  transition: transform 700ms cubic-bezier(.2,.8,.2,1);
}
[data-theme="light"] .theme-toggle svg { transform: rotate(180deg); }

a { color: inherit; text-decoration: none; }

/* ── Page chrome shared by sub-pages ── */
.page {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 32px clamp(24px, 5vw, 72px);
  gap: clamp(40px, 6vh, 80px);
}

header.bar, footer.bar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--mute);
  text-transform: uppercase;
}
header.bar .mark {
  font-family: var(--mono);
  font-style: normal;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .22em;
  color: var(--ink);
  text-transform: uppercase;
}
header.bar .right span { margin-left: 18px; }

.back {
  position: relative;
  transition: padding 400ms cubic-bezier(.2,.8,.2,1), color 200ms ease;
}
.back:hover { color: var(--ink); padding-left: 14px; }
.back::before {
  content: "←";
  position: absolute; left: -2px; top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 300ms ease, left 400ms cubic-bezier(.2,.8,.2,1);
}
.back:hover::before { opacity: 1; left: 0; }

/* ── Section masthead used on all sub-pages ── */
.masthead {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: clamp(20px, 4vw, 60px);
  align-items: end;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--rule);
}
.masthead .num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--mute);
  padding-bottom: 14px;
}
.masthead .title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(56px, 10vw, 140px);
  line-height: .95;
  letter-spacing: -0.015em;
}
.masthead .dek {
  grid-column: 2;
  margin-top: 10px;
  font-style: italic;
  font-size: 18px;
  color: var(--mute);
  max-width: 50ch;
}

/* fade-in on load */
.page > * {
  opacity: 0;
  transform: translateY(12px);
  animation: rise 900ms cubic-bezier(.2,.7,.1,1) forwards;
}
.page > *:nth-child(1) { animation-delay: 80ms; }
.page > *:nth-child(2) { animation-delay: 220ms; }
.page > *:nth-child(3) { animation-delay: 360ms; }

@keyframes rise {
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}

@media (max-width: 720px) {
  header.bar { gap: 12px; flex-wrap: nowrap; }
  header.bar .right { display: flex; align-items: baseline; gap: 12px; flex-shrink: 0; }
  header.bar .right span { margin-left: 0; }
  /* Hide redundant page name + year on mobile — masthead already shows them */
  header.bar .right > span:nth-child(2),
  header.bar .right > span:nth-child(3) { display: none; }
  header.bar .mark { letter-spacing: .18em; }
  .theme-toggle { margin-left: 4px; }
  .masthead { grid-template-columns: 36px 1fr; }
}

@media (max-width: 380px) {
  header.bar .mark { font-size: 10px; letter-spacing: .14em; }
  header.bar .right > span:first-child { font-size: 10px; }
}