/* ==========================================================================
   jaredeveritt.com — project writeup pages
   Loads on top of styles.css, which supplies the fonts, design tokens,
   reset and theme system. This file only handles the reading layout:
   a single narrow column, serif body copy, numbered sections and
   captioned figures. Nothing here is used by the main site.
   ========================================================================== */

.paper-page {
  /* A book-ish serif for running text. System stack, so no extra download
     and no new licence to track alongside the Fontshare files. */
  --font-read: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
    "Times New Roman", serif;

  /* The page scales as a whole rather than stretching one part of it: the
     column, the type and the figures all grow together, so a large display
     gets a bigger page instead of the same small one adrift in empty space.
     Type grows with the measure, which holds the line length near 66
     characters throughout. Figures grow fastest, since that is where the
     extra room actually buys legibility. */
  --measure: clamp(33rem, 34.4rem + 11.7vw, 53rem);
  --figure-w: min(clamp(46rem, 31.25rem + 39vw, 94rem), calc(100vw - 3rem));
}

/* ---- Slim header: wordmark home link and the theme toggle, nothing else ---- */
.paper-top {
  border-bottom: 1px solid var(--border);
}

.paper-top-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  /* Matches the figure width so the header sits over the widest content. */
  max-width: calc(var(--figure-w) + 3rem);
  margin-inline: auto;
  padding: var(--space-4) 1.5rem;
}

.paper-back {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--muted);
  text-decoration: none;
}

.paper-back:hover {
  color: var(--text-hi);
}

/* ---- The article ---- */
/* The measure is the width of the text itself, so the box carries it plus
   the gutters. Figure captions can then use --measure directly and line up
   with the body copy. */
.paper {
  max-width: calc(var(--measure) + 3rem);
  margin-inline: auto;
  padding: clamp(3rem, 8vw, 7rem) 1.5rem clamp(4rem, 9vw, 8rem);
}

.paper h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.125rem, 1.5rem + 2.6vw, 4.25rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.paper-dek {
  max-width: 32em;
  margin-top: var(--space-4);
  font-family: var(--font-read);
  font-size: clamp(1.1875rem, 1.1875rem + 0.39vw, 1.8125rem);
  line-height: 1.5;
  color: var(--muted);
}

.paper-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  margin-top: var(--space-8);
  padding-top: var(--space-5, 1.25rem);
  border-top: 1px solid var(--border);
  font-family: var(--font-sans);
  font-size: clamp(0.9375rem, 0.875rem + 0.16vw, 1.125rem);
  color: var(--muted);
}

.paper-meta dt {
  font-weight: 600;
  color: var(--text-hi);
}

.paper-meta dd {
  margin: 0;
}

.paper-meta div {
  display: flex;
  gap: var(--space-2);
}

/* Running text. The measure is set on the column, so paragraphs just fill it. */
.paper-body {
  margin-top: var(--space-12);
  font-family: var(--font-read);
  font-size: clamp(1.125rem, 1.0625rem + 0.3125vw, 1.5625rem);
  line-height: 1.7;
}

/* Spacing in em so the rhythm grows with the type instead of tightening
   up as the page scales. */
.paper-body p + p {
  margin-top: 1.25em;
}

.paper-body h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 1.25rem + 0.625vw, 2.25rem);
  line-height: 1.2;
  margin-top: 2.6em;
  margin-bottom: 0.7em;
}

/* The opening paragraphs sit above the first numbered section and read as
   an abstract: same serif, slightly larger, with a rule closing it off. */
.paper-abstract {
  font-size: 1.07em;
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--border);
}

.paper-conclusion {
  margin-top: var(--space-16);
  padding-top: var(--space-8);
  border-top: 1px solid var(--border);
}

/* ---- Figures break out past the text column so detail stays legible ---- */
.paper-figure {
  width: var(--figure-w);
  margin: var(--space-12) 0;
  /* Centre the wider figure on the narrower column. */
  margin-left: 50%;
  transform: translateX(-50%);
}

/* A figure opening a section belongs to its heading, so close the gap. */
.paper-body h2 + .paper-figure {
  margin-top: var(--space-8);
}

.paper-figure img,
.paper-figure video {
  display: block;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
  border: 1px solid var(--thumb-edge);
  border-radius: var(--radius);
  background: #0a0a09;
}

.paper-figure video {
  width: 100%;
}

.paper-figure figcaption {
  max-width: var(--measure);
  margin: var(--space-4) auto 0;
  font-family: var(--font-sans);
  font-size: clamp(0.9375rem, 0.875rem + 0.16vw, 1.125rem);
  line-height: 1.5;
  color: var(--muted);
}

.paper-figure figcaption b {
  font-weight: 600;
  color: var(--text-hi);
}

/* ---- Footer ---- */
.paper-foot {
  border-top: 1px solid var(--border);
  font-family: var(--font-sans);
}

.paper-foot-inner {
  max-width: calc(var(--measure) + 3rem);
  margin-inline: auto;
  padding: var(--space-12) 1.5rem;
}

.paper-foot p {
  color: var(--muted);
  font-size: var(--text-sm);
}

.paper-foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  list-style: none;
  padding: 0;
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  font-weight: 600;
}