/* ─────────────────────────────────────────────────────────────────────
   vkfolio — base tokens + shared chrome
   Clean white · indigo accent · editorial typography
   ───────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* ── backgrounds ── */
  --bg:         #FFFFFF;
  --bg-soft:    #F8F7FF;
  --bg-raised:  #FFFFFF;

  /* ── text ── */
  --ink:        #1E1B2E;
  --ink-soft:   #4A4563;
  --muted:      #8A8499;
  --muted-2:    #B8B3C7;

  /* ── borders ── */
  --hairline:   #E8E5F0;
  --hairline-2: #F0EDF7;

  /* ── indigo accent ── */
  --accent:      #4F46E5;
  --accent-soft: #E0E7FF;
  --accent-ink:  #312E81;
  --accent-hover:#4338CA;

  /* ── typography ── */
  --font-display: "DM Serif Display", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  --t-display:  clamp(48px, 6vw, 72px);
  --t-h1:       clamp(36px, 4.5vw, 56px);
  --t-h2:       clamp(26px, 3vw, 36px);
  --t-h3:       22px;
  --t-body:     16px;
  --t-small:    14px;
  --t-tiny:     12px;

  /* ── spacing ── */
  --s-1:  4px;   --s-2:  8px;   --s-3:  12px;  --s-4:  16px;
  --s-5:  24px;  --s-6:  32px;  --s-7:  48px;  --s-8:  64px;
  --s-9:  80px;  --s-10: 96px;  --s-11: 120px; --s-12: 160px;

  /* ── layout ── */
  --content-w: 1100px;
  --essay-w:   640px;
  --gutter:    32px;

  /* ── motion ── */
  --ease: 200ms cubic-bezier(.4, 0, .2, 1);
  --ease-slow: 350ms cubic-bezier(.4, 0, .2, 1);

  /* ── backwards-compat aliases for room CSS ── */
  --paper:    var(--bg);
  --paper-2:  var(--bg-soft);
  --mono:     ui-monospace, SFMono-Regular, Menlo, monospace;
  --serif:    var(--font-display);
}

[data-theme="dark"] {
  --bg:         #0F0E17;
  --bg-soft:    #1A1925;
  --bg-raised:  #1E1D2B;
  --ink:        #F1F0F7;
  --ink-soft:   #C4C0D8;
  --muted:      #8A8499;
  --muted-2:    #5A5469;
  --hairline:   #2A2838;
  --hairline-2: #232130;
  --accent:      #818CF8;
  --accent-soft: #312E81;
  --accent-ink:  #C7D2FE;
  --accent-hover:#A5B4FC;
  --paper:       var(--bg);
  --paper-2:     var(--bg-soft);
}

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

html, body { min-height: 100%; }

html {
  background: var(--bg);
  color-scheme: light dark;
  overflow-x: hidden;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background var(--ease-slow), color var(--ease-slow);
}

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

img, svg { display: block; max-width: 100%; }

::selection {
  background: var(--accent);
  color: #FFFFFF;
}

/* ─── layout shell ─── */

.shell {
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ─── top navigation ─── */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in oklch, var(--bg) 92%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--ease);
}

.topbar.scrolled {
  border-bottom-color: var(--hairline);
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  padding: var(--s-4) var(--gutter);
  max-width: var(--content-w);
  margin: 0 auto;
}

.topbar__mark {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 11px;
}

.topbar__mark .dot {
  width: 10px;
  height: 10px;
  background: var(--accent);
  border-radius: 50%;
  display: inline-block;
}

.topbar__links {
  display: flex;
  gap: var(--s-6);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.topbar__links a {
  color: var(--muted);
  transition: color var(--ease);
  position: relative;
  padding-bottom: 2px;
}

.topbar__links a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  border-radius: 1px;
  transition: width var(--ease);
}

.topbar__links a:hover,
.topbar__links a[aria-current="page"] {
  color: var(--ink);
}

.topbar__links a:hover::after,
.topbar__links a[aria-current="page"]::after {
  width: 100%;
}

/* ─── footer ─── */

.footer {
  margin-top: var(--s-12);
  padding: var(--s-8) var(--gutter) var(--s-7);
  max-width: var(--content-w);
  margin-left: auto;
  margin-right: auto;
  border-top: 1px solid var(--hairline);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-5);
  align-items: end;
}

.footer__brand {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--ink);
  margin-bottom: var(--s-2);
}

.footer__copy {
  font-size: var(--t-small);
  color: var(--muted);
  line-height: 1.6;
}

.footer__copy a {
  color: var(--ink-soft);
  border-bottom: 1px solid var(--hairline);
  transition: color var(--ease), border-color var(--ease);
}

.footer__copy a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.footer__tools {
  display: flex;
  gap: var(--s-3);
  align-items: center;
}

.footer__tool {
  font-size: var(--t-tiny);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--muted);
  border: 1px solid var(--hairline);
  padding: 6px 12px;
  border-radius: 6px;
  transition: border-color var(--ease), color var(--ease), background var(--ease);
}

.footer__tool:hover,
.footer__tool[aria-pressed="true"] {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

/* ─── shared atoms ─── */

.label {
  font-size: var(--t-tiny);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-tiny);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  background: var(--bg-soft);
  border: 1px solid var(--hairline);
  padding: 4px 10px;
  border-radius: 100px;
  white-space: nowrap;
}

.tag--accent {
  background: var(--accent-soft);
  border-color: color-mix(in oklch, var(--accent) 20%, transparent);
  color: var(--accent-ink);
}

.hairline {
  height: 1px;
  background: var(--hairline);
  border: 0;
}

.section-label {
  font-size: var(--t-tiny);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s-4);
}

/* ─── animations ─── */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.animate-fade-in-up {
  animation: fadeInUp 0.7s cubic-bezier(.25, .46, .45, .94) both;
}

.animate-fade-in {
  animation: fadeIn 0.5s ease both;
}

/* stagger delays */
.delay-1 { animation-delay: 0.08s; }
.delay-2 { animation-delay: 0.16s; }
.delay-3 { animation-delay: 0.24s; }
.delay-4 { animation-delay: 0.32s; }
.delay-5 { animation-delay: 0.40s; }

/* ─── print ─── */

@media print {
  .topbar, .footer { display: none !important; }
  body { background: white; color: black; }
}

/* ─── responsive ─── */

@media (max-width: 720px) {
  :root {
    --gutter: 24px;
    --s-9: 56px;
    --s-10: 72px;
    --s-11: 88px;
    --s-12: 100px;
  }

  .topbar__inner {
    padding: var(--s-3) var(--gutter);
  }

  .topbar__links {
    gap: var(--s-4);
    font-size: var(--t-tiny);
  }

  .footer {
    grid-template-columns: 1fr;
    gap: var(--s-4);
    margin-top: var(--s-10);
    padding-top: var(--s-6);
  }

  .footer__tools {
    justify-content: flex-start;
  }
}