/* Base layer for article pages (/articles/*).
   Loaded together with the Tacit reset and article.css.
   Home and 404 are self-contained in home.css and do not load this file. */

@import url('tokens.css');

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  padding-bottom: 1em;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}

h2 {
  margin-top: 24px;
}

/* Neutralise the framework's boxed <article> so longreads read as one column. */
article {
  background: none;
  border: none;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-top: 0;
}

section {
  max-width: 720px;
}

nav ul {
  text-align: left;
}

/* Skip navigation link for screen readers */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--accent);
  color: white;
  padding: 8px 16px;
  text-decoration: none;
  font-weight: 600;
  border-radius: 0 0 4px 0;
  transform: translateY(-120%);
  transition: transform 0.2s ease;
  z-index: 100;
}

.skip-link:focus {
  transform: translateY(0);
}

a {
  color: var(--accent);
  transition: color 0.3s ease, outline 0.2s ease;
}

a:hover {
  color: var(--accent-dark);
}

/* Focus styles for keyboard navigation */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

a:focus:not(:focus-visible) {
  outline: none;
}

a:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* External link indicator.
   Excluded: links that wrap media — the arrow would otherwise hang
   under the image as a stray character. */
a[target="_blank"]:not(.skip-link):not(:has(img)):not(:has(picture)):not(:has(svg))::after {
  content: " ↗";
  font-size: 0.8em;
  opacity: 0.7;
}

.highlight {
  font-weight: 600;
}

.icon {
  max-width: 24px;
}

/* Print styles */
@media print {
  body {
    background: white;
    background-image: none;
    color: black;
  }

  .skip-link,
  nav {
    display: none;
  }

  a {
    color: black;
    text-decoration: underline;
  }

  a::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    word-break: break-all;
  }

  a[href^="mailto:"]::after,
  a[href^="#"]::after {
    content: "";
  }

  section {
    max-width: 100%;
  }
}