/* =========================
   Design tokens
========================= */

:root {
      --color-bg: #fbfaf7;

      /* Primary ink for most text */
      --color-ink: #0f0f0f;

      /* Accent (warm umber) */
      --color-accent: #5a4632;

      /* Muted text */
      --color-muted: #7a7a7a;

      /* Lines/borders */
      --color-line: rgba(0, 0, 0, 0.12);

      --font-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont,
            "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

      --font-serif: ui-serif, Georgia, "Times New Roman", serif;
}

/* Dark mode colors */
[data-theme="dark"] {
      --color-bg: #0f0f0f;
      --color-ink: #e8e6e3;
      --color-accent: #c9a581;
      --color-muted: #9a9a9a;
      --color-line: rgba(255, 255, 255, 0.12);
}

/* =========================
   Base
========================= */

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

html,
body {
      background: var(--color-bg);
      color: var(--color-ink);
      font-family: var(--font-sans);
}

body {
      background: var(--color-bg);
      color: var(--color-text);
      font-family: var(--font-sans);
}

/* =========================
   Page layout
========================= */

.page {
      min-height: 100svh;
      padding: clamp(20px, 4vw, 56px);
      display: grid;
      grid-template-rows: auto 1fr auto;
}

/* =========================
   Header
========================= */

.site-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.95rem;
      letter-spacing: 0.12em;
      color: var(--color-muted);
}

.site-brand {
      display: inline-block;
}

.theme-toggle {
      background: none;
      border: none;
      cursor: pointer;
      padding: 8px;
      color: var(--color-ink);
      display: flex;
      align-items: center;
      transition: opacity 180ms ease;
}

.theme-toggle:hover {
      opacity: 0.7;
}

.sun-icon {
      display: none;
}

.moon-icon {
      display: block;
}

[data-theme="dark"] .sun-icon {
      display: block;
}

[data-theme="dark"] .moon-icon {
      display: none;
}

/* =========================
   Hero
========================= */

.hero {
      display: grid;
      align-content: center;
      gap: clamp(24px, 4vw, 48px);
}

.hero-title {
      margin: 0;
      font-family: var(--font-serif);
      font-weight: 500;
      line-height: 0.95;
      letter-spacing: -0.01em;
      font-size: clamp(3.5rem, 9vw, 7rem);
      text-transform: lowercase;
      color: var(--color-ink);
}

.hero-title span {
      color: var(--color-accent);
}

.hero-meta {
      max-width: 420px;
      padding-top: 18px;
      border-top: 1px solid var(--color-line);
}

.author {
      margin: 0;
      font-size: 1.05rem;
      font-weight: 500;
}

.descriptor {
      margin: 6px 0 0;
      font-size: 0.95rem;
      color: var(--color-muted);
}

/* =========================
   Footer
========================= */

.site-footer {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 24px;
      margin-top: 32px;
}

.footer-identity {
      display: flex;
      align-items: center;
      gap: 18px;
      font-size: 0.9rem;
      color: var(--color-muted);
}

.signature {
      max-width: 150px;
      opacity: 0.85;
}

.signature-light {
      display: block;
}

.signature-dark {
      display: none;
}

[data-theme="dark"] .signature-light {
      display: none;
}

[data-theme="dark"] .signature-dark {
      display: block;
}

/* =========================
   Footer navigation
========================= */

.footer-nav {
      display: flex;
      gap: clamp(18px, 3vw, 40px);
}

.footer-nav a {
      position: relative;
      font-size: 0.95rem;
      color: var(--color-ink);
      text-decoration: none;
      padding-bottom: 4px;

      /* smooth interaction */
      transition: color 180ms ease;
}

/* animated underline */
.footer-nav a::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;

      width: 100%;
      height: 1px;
      background-color: var(--color-accent);

      transform: scaleX(0);
      transform-origin: left;
      transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* hover + focus */
.footer-nav a:hover::after,
.footer-nav a:focus-visible::after {
      transform: scaleX(1);
}

.footer-nav a:focus-visible {
      outline: none;
}

/* =========================
   Responsive
========================= */

@media (max-width: 640px) {
      .site-footer {
            flex-direction: column;
            align-items: flex-start;
      }
}