/* Lakshita Vij: global theme. Pages use inline layout styles that reference these variables. */
:root {
  --bg: #E5ECDE; --ink: #111111; --muted: #4F5A48; --line: #C4D1BA; --soft: #EDF2E7;
  --heart: #5B2A5E;
  --p0: #E6CBE4; --p1: #D3AED0;           /* plum highlighters */
  --d0: #5B2A5E; --d1: #8A4F8C;           /* deep plums (underlines in light mode) */
  --name-bg: #5B2A5E; --name-ink: #FFFFFF;
  --u0: var(--d0); --u1: var(--d1);
  --lc0: #111111; --lc1: #111111;         /* link text */
  --ls0: inset 0 -0.45em 0 var(--p0);     /* link highlighter band */
  --ls1: inset 0 -0.45em 0 var(--p1);
  color-scheme: light;
}
html[data-ci="1"] { --p0: #D3AED0; --p1: #E6CBE4; --d0: #8A4F8C; --d1: #5B2A5E; --name-bg: #E6CBE4; --name-ink: #111111; }
html[data-ci="2"] { --name-bg: #D3AED0; --name-ink: #111111; }
html[data-theme="dark"] {
  --bg: #141A13; --ink: #EEF0EA; --muted: #A9B3A2; --line: #2F3A2D; --soft: #1B2419;
  --heart: #E6CBE4;
  --u0: var(--p0); --u1: var(--p1);
  --lc0: var(--p0); --lc1: var(--p1);
  --ls0: inset 0 -2px 0 var(--p0); --ls1: inset 0 -2px 0 var(--p1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: Jost, 'Avenir Next', sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { text-decoration: none; color: inherit; }
img, video { max-width: 100%; }
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
button { font: inherit; }

.skip-link { position: absolute; left: 16px; top: -64px; z-index: 10; padding: 10px 14px; background: var(--ink); color: var(--bg); font-weight: 500; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--heart); outline-offset: 3px; }

/* theme + name color changes ease in, but respect reduced motion */
body, .site-header *, .site-main *, .site-footer * { transition-property: background-color, color, border-color, box-shadow; transition-duration: .2s; transition-timing-function: ease; }
.site-nav a { transition: transform .15s ease, border-color .2s ease; }
.site-nav a:hover { transform: translateY(-1px); }
a:hover h2, a:hover h3 { text-decoration: underline; text-decoration-color: var(--p0); text-decoration-thickness: 3px; text-underline-offset: 5px; }
[data-cycle]:hover { filter: brightness(1.05); }
[data-theme-toggle]:hover { background: var(--ink) !important; color: var(--bg) !important; }
em { font-style: italic; }
.site-main span:empty { display: none; }  /* e.g. blank date on cards */
video { display: block; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---- tablet and phone ---- */
@media (max-width: 900px) {
  .site-header { padding: 24px 24px !important; }
  .site-main { padding-left: 24px !important; padding-right: 24px !important; }
  .site-footer { padding-left: 24px !important; padding-right: 24px !important; }
}
@media (max-width: 640px) {
  .site-header { padding: 20px 16px !important; gap: 14px 16px !important; }
  .site-main { padding-left: 16px !important; padding-right: 16px !important; padding-top: 28px !important; padding-bottom: 56px !important; }
  .site-footer { padding-left: 16px !important; padding-right: 16px !important; }
  .site-nav { gap: 4px 18px !important; font-size: 16px !important; }
  .site-header button[data-cycle] { font-size: 23px !important; padding: 4px 10px !important; margin-left: 4px !important; }
  .site-header > div:first-child > span:first-child { font-size: 24px !important; }
  .page-title { font-size: clamp(34px, 9vw, 44px) !important; }
  .site-main h2[style*="font-size: 32px"] { font-size: 27px !important; }
  .site-main p[style*="font-size: 21px"], .site-main div[style*="font-size: 21px"] { font-size: 19px !important; }
  .site-main p[style*="font-size: 24px"] { font-size: 20px !important; }
  .site-main figure { max-width: 100% !important; }
  .site-main pre { font-size: 14px !important; }
}
@media (max-width: 380px) {
  .site-header button[data-cycle] { font-size: 19px !important; }
  .site-header > div:first-child > span:first-child { font-size: 20px !important; }
}
@media print {
  .site-header nav, [data-theme-toggle], .skip-link { display: none !important; }
}