/*---------------------------------------/*
 # SETTINGS
/*---------------------------------------*/
:root {
  /* brand */
  --color-ink: #3a2f25;
  --color-ink-deep: #241c15;
  --color-copper: #9a5b2e;

  /* roles */
  --color-paper: #f6efdc;
  --color-surface: #fbf7ec;
  --color-mist: #efe5cc;
  --color-slate: #3a2f25;
  --color-mute: #6f6152;
  --color-line: #ddcfae;
  --color-line-strong: #b9a57c;

  --font-display: 'IM Fell English', Georgia, serif;
  --font-body: 'EB Garamond', Georgia, serif;
  --font-label: 'EB Garamond', Georgia, serif;

  --shadow-sm: 0 1px 2px rgba(58, 47, 37, .08);
  --shadow: 0 6px 18px rgba(58, 47, 37, .12);

  --space-4: .25rem; --space-8: .5rem; --space-12: .75rem; --space-16: 1rem; --space-24: 1.5rem;
  --space-32: 2rem; --space-48: 3rem; --space-64: 4rem;

  --radius-sm: 4px; --radius: 8px;
  --maxw: 720px;
}

/*---------------------------------------/*
 # GENERIC
/*---------------------------------------*/
*, *::before, *::after { box-sizing: border-box; padding: 0; margin: 0; }

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

/*---------------------------------------/*
 # ELEMENTS
/*---------------------------------------*/
body {
  background: var(--color-paper);
  color: var(--color-slate);
  font-family: var(--font-body);
  font-size: 1.1875rem;
  line-height: 1.5;
}

a { color: inherit; }

/*---------------------------------------/*
 # OBJECTS
/*---------------------------------------*/
.o-container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--space-24);
}

.o-list-reset { list-style: none; }

/*---------------------------------------/*
 # COMPONENTS
/*---------------------------------------*/
/* Page */
.c-page { padding-block: var(--space-64) var(--space-48); }

/* Intro */
.c-intro {
  padding-bottom: var(--space-32);
  margin-bottom: var(--space-32);
  border-bottom: 2px solid var(--color-ink);
  text-align: center;
}

.c-intro__kicker {
  color: var(--color-mute);
  font-size: .9375rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.c-intro__title {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 9vw, 4.5rem);
  font-weight: 400;
  line-height: 1.05;
  margin-block: var(--space-8) var(--space-16);
}

.c-intro__lead { max-width: 34em; margin-inline: auto; }

.c-intro__version {
  margin-top: var(--space-16);
  color: var(--color-mute);
  font-family: var(--font-display);
  font-style: italic;
}

/* Section */
.c-section + .c-section { margin-top: var(--space-48); }

.c-section__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 1.875rem);
  font-weight: 400;
  margin-bottom: var(--space-16);
}

.c-section__note {
  color: var(--color-mute);
  margin-top: calc(var(--space-8) * -1);
  margin-bottom: var(--space-16);
}

/* Documents */
.c-docs { display: grid; gap: var(--space-12); }

.c-doc {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-16) var(--space-24) var(--space-16) var(--space-24);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-left: 4px solid var(--color-copper);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.c-doc:hover,
.c-doc:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: var(--color-line-strong);
  border-left-color: var(--color-ink);
}

.c-doc__name {
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.25;
}

.c-doc__name::after {
  content: ' ↗';
  color: var(--color-copper);
  font-weight: 400;
}

.c-doc__desc { color: var(--color-slate); }

.c-doc__meta {
  color: var(--color-mute);
  font-size: .9375rem;
}

.c-doc--quiet {
  background: transparent;
  border-left-color: var(--color-line-strong);
  box-shadow: none;
}

/* Footer */
.c-footer {
  margin-top: var(--space-48);
  padding-top: var(--space-24);
  border-top: 1px solid var(--color-line);
  color: var(--color-mute);
  font-size: .9375rem;
  text-align: center;
}

@media (max-width: 640px) {
  .c-page { padding-block: var(--space-48) var(--space-32); }
  .c-doc { padding: var(--space-16); }
}

/*---------------------------------------/*
 # FOCUS VISIBLE
/*---------------------------------------*/
:focus-visible {
  outline: 3px solid var(--color-copper);
  outline-offset: 2px;
}