@font-face {
  font-family: "Input Sans";
  src: url("fonts/InputSans-Light.woff2") format("woff2");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Input Sans";
  src: url("fonts/InputSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Input Sans";
  src: url("fonts/InputSans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Input Sans";
  src: url("fonts/InputSans-Bold.woff2") format("woff2");
  font-weight: 600 700;
  font-display: swap;
}
@font-face {
  font-family: "Ocula";
  src: url("fonts/Ocula.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
/* ===================================================================
   Typographic scale — factor-of-2 system (mirrors skillit-bds logic)
   Primary hierarchy: size doubles, weight steps up a tier per doubling,
   leading tightens per doubling, tracking -0.02em per doubling from
   the 1x base. Functional scale: labels/captions sit outside the
   formula and open tracking instead of tightening it (small caps need
   air, not grip) — same split skillit's own tokens/typography.md uses
   between its primary hierarchy and functional UI scale.
   Weight primitives are named once and referenced by every tier, same
   as skillit's --weight-regular/--weight-medium/etc. pattern.
   Exception: Ocula (.mark) is a single-weight display face — weight
   and tracking formulas don't apply; leading is hand-tuned to protect
   its descenders (Tironian et, long s), same caveat skillit's own
   Text-16x note flags for aggressive leading at extreme sizes.
   =================================================================== */
:root {
  /* Color tokens — light mode (warm paper) */
  --color-paper: #faf8f5;
  --color-ink: #0f0e0c;
  /* Anti-halation: light text on light background */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Weight primitives */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Primary hierarchy */
  --text-1x: 16px;
  --text-1x-weight: var(--weight-regular);
  --text-1x-weight-emphasis: var(--weight-semibold);
  --text-1x-leading: 1.4;
  --text-1x-tracking: -0.05em;

  --text-2x: 32px;
  --text-2x-weight: var(--weight-medium);
  --text-2x-weight-bold: var(--weight-semibold);
  --text-2x-leading: 1.2;
  --text-2x-tracking: -0.07em;

  --text-4x: 64px;
  --text-4x-weight: var(
    --weight-semibold
  ); /* formula value — unused, see mark exception below */
  --text-4x-leading: 1; /* formula value — unused, see mark exception below */
  --text-4x-tracking: -0.09em; /* formula value — unused, see mark exception below */

  /* Ocula mark exception — single weight face, hand-tuned leading/tracking */
  --text-4x-mark-weight: var(--weight-regular);
  --text-4x-mark-leading: 1.15;
  --text-4x-mark-tracking: 0em;

  /* Functional scale (exempt from doubling formula) — 0.75x the 1x base,
     covers both UI labels (open tracking) and sentence-case captions
     (tight, body-style tracking) at the same 12px size */
  --text-0-75x: 12px;
  --text-0-75x-leading: 1.4;
  --text-0-75x-tracking: -0.04em; /* label/UI variant — open tracking */
  --text-0-75x-tracking-tight: var(--text-1x-tracking); /* caption/prose variant */
  --text-0-75x-weight-strong: var(--weight-bold); /* label emphasis, e.g. h2 */
  --text-0-75x-weight-light: var(--weight-light); /* caption/prose weight */

  /* Body/prose weight used across running-copy blocks */
  --text-body-weight: var(--weight-light);
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: "Input Sans", sans-serif;
  color: var(--color-ink);
  background: var(--color-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-size: var(--text-1x);
  font-weight: var(--text-1x-weight);
  letter-spacing: var(--text-1x-tracking);
  line-height: var(--text-1x-leading);
  text-wrap: pretty;
  transition:
    color 0.3s ease,
    background 0.3s ease;
  color-scheme: light dark;
}
a {
  color: var(--color-ink);
  text-decoration: none;
}

header {
  padding: 40px 40px 24px;
  max-width: 1200px;
  margin: 0 auto;
  letter-spacing: var(--text-1x-tracking);
}

.top-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--text-0-75x);
  font-weight: var(--weight-regular);
  letter-spacing: var(--text-0-75x-tracking);
  line-height: var(--text-0-75x-leading);
  margin-bottom: 32px;
}
.top-row-left {
  display: flex;
  align-items: baseline;
  gap: 16px;
}
.top-row-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.mark {
  font-family: "Ocula", "Input Sans", serif;
  font-weight: var(--text-4x-mark-weight);
  font-size: var(--text-4x);
  line-height: var(--text-4x-mark-leading);
  text-wrap: balance;
  letter-spacing: var(--text-4x-mark-tracking);
}
.mark .sub {
  font-family: "Input Sans", sans-serif;
  font-weight: var(--text-1x-weight);
  font-size: var(--text-1x);
  line-height: var(--text-1x-leading);
  display: block;
  margin-top: 10px;
  letter-spacing: var(--text-1x-tracking);
}
.statement {
  max-width: 34em;
  margin-top: 28px;
  font-size: var(--text-1x);
  font-weight: var(--text-body-weight);
  letter-spacing: var(--text-1x-tracking);
}
.statement strong {
  font-weight: var(--text-1x-weight-emphasis);
}

section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}
h2 {
  font-size: var(--text-1x);
  font-weight: var(--text-0-75x-weight-strong);
  letter-spacing: var(--text-0-75x-tracking);
  line-height: var(--text-0-75x-leading);
  margin: 48px 0 12px;
  border-bottom: 1px solid var(--color-ink);
  padding-bottom: 8px;
}

.index {
  border-bottom: 1px solid var(--color-ink);
  position: relative;
}
.index::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -12px;
  border-bottom: 1px solid var(--color-ink);
}
.index-row {
  display: grid;
  grid-template-columns: 56px 1fr 340px 20px;
  align-items: center;
  column-gap: 20px;
  padding: 24px 8px;
  border-top: 1px solid var(--color-ink);
}
.index-row:hover .num {
  transform: translateX(-8px);
}
.index-row:hover .arrow {
  transform: translateX(8px);
}
.index-row .num {
  font-size: var(--text-0-75x);
  font-weight: var(--weight-regular);
  letter-spacing: var(--text-0-75x-tracking);
  line-height: var(--text-0-75x-leading);
  transition: transform 0.18s ease;
}
.index-row .title {
  font-weight: var(--text-2x-weight-bold);
  font-size: var(--text-2x);
  line-height: var(--text-2x-leading);
  text-wrap: balance;
  letter-spacing: var(--text-2x-tracking);
}
.index-row .title small {
  display: block;
  font-weight: var(--text-0-75x-weight-light);
  font-size: var(--text-0-75x);
  margin-top: 5px;
  line-height: var(--text-0-75x-leading);
  letter-spacing: var(--text-0-75x-tracking-tight);
}
.index-row .blurb {
  text-align: right;
  font-weight: var(--text-0-75x-weight-light);
  font-size: var(--text-0-75x);
  letter-spacing: var(--text-0-75x-tracking-tight);
  line-height: var(--text-0-75x-leading);
}
.index-row .arrow {
  font-weight: var(--weight-regular);
  font-size: var(--text-1x);
  text-align: right;
  transition: transform 0.18s ease;
}

.contact {
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.contact li a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

footer {
  border-top: 1px solid var(--color-ink);
  padding: 22px 40px 40px;
  margin-top: 48px;
}
.credits {
  max-width: 1200px;
  margin: 0 auto;
  font-weight: var(--text-0-75x-weight-light);
  font-size: var(--text-0-75x);
  letter-spacing: var(--text-0-75x-tracking-tight);
  line-height: var(--text-0-75x-leading);
}

/* Dark mode toggle button — lives in the top row, scrolls with the page */
.theme-toggle {
  position: static;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: var(--color-ink);
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    color 0.3s ease,
    opacity 0.2s ease;
  padding: 0;
  font-family: inherit;
}
.theme-toggle:hover {
  opacity: 0.6;
}
.theme-toggle svg {
  transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.theme-toggle:active svg {
  transform: rotate(180deg);
}
/* Icon shows the state a click will switch *to* */
.icon-sun,
.icon-moon {
  display: none;
  position: absolute;
}
[data-theme="light"] .theme-toggle .icon-moon {
  display: block;
}
[data-theme="dark"] .theme-toggle .icon-sun {
  display: block;
}

/* Dark mode — a designed warm night, not an inverted flip:
   background stays out of true-black (avoids OLED smear + harsh
   contrast), text stays out of true-white (avoids glare), both
   hold the same warm/brown hue family as the light paper + ink. */
@media (prefers-color-scheme: dark) {
  :root {
    --color-paper: #1a1712;
    --color-ink: #e9e3d5;
  }
}

/* Respect user's manual toggle via data attribute */
[data-theme="light"] {
  --color-paper: #faf8f5;
  --color-ink: #0f0e0c;
  color-scheme: light;
}
[data-theme="dark"] {
  --color-paper: #1a1712;
  --color-ink: #e9e3d5;
  color-scheme: dark;
}

@media (max-width: 768px) {
  .theme-toggle {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
  header {
    padding: 32px 20px 20px;
  }
  section {
    padding: 0 20px;
  }
  footer {
    padding: 20px;
  }
  .mark {
    font-size: var(--text-2x);
  }
  .index-row {
    grid-template-columns: 32px 1fr;
    grid-template-areas: "num title" ". blurb";
    row-gap: 6px;
  }
  .index-row .num {
    grid-area: num;
  }
  .index-row .title {
    grid-area: title;
  }
  .index-row .blurb {
    grid-area: blurb;
    text-align: left;
  }
  .index-row .arrow {
    display: none;
  }
  .index-row .num,
  .index-row .title,
  .index-row .blurb {
    transition: transform 0.18s ease;
  }
  .index-row:hover .num,
  .index-row:hover .title,
  .index-row:hover .blurb {
    transform: translateX(-8px);
  }
}

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