@import url('assets/type.css');

:root {
  --paper: #efefe8;
  --ink: #1d201c;
  --red: #b73320;
  --muted: #5c6156;
  --rule: #bec1b5;
  --display: 'Space Grotesk', Arial, sans-serif;
  --mono: 'IBM Plex Mono', monospace;
  --pixel: 'Silkscreen', monospace;
  --gutter: clamp(22px, 5vw, 80px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 32px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 18px/1.7 var(--display); -webkit-font-smoothing: antialiased; }
::selection { color: var(--paper); background: var(--red); }
h1, h2, p { margin: 0; }
h1, h2 { font-style: normal; font-synthesis: none; }
a { color: inherit; text-decoration: none; text-underline-offset: 5px; }
a:hover { text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--red); outline-offset: 6px; }
main:focus { outline: none; }
.skip-link { position: fixed; top: 16px; left: 16px; z-index: 2; padding: 12px 18px; background: var(--ink); color: var(--paper); transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }

.masthead, .colophon { width: calc(100% - 2 * var(--gutter)); max-width: 1320px; margin-inline: auto; }
.masthead { padding-top: 36px; }
.edition { display: flex; justify-content: space-between; gap: 24px; font: 400 11px/1.5 var(--mono); }
.masthead h1 { color: var(--red); font: 400 clamp(26px, 10.35vw, 155px)/1.15 var(--pixel); letter-spacing: -.08em; white-space: nowrap; text-align: center; margin: 40px -.05em 0; }
.emblem { display: block; width: clamp(210px, 26vw, 335px); height: auto; margin: 26px auto 0; mix-blend-mode: darken; }

.thesis { max-width: 700px; margin: 70px auto 0; padding-inline: 0; }
.thesis h2 { font: 400 clamp(28px, 3.4vw, 42px)/1.2 var(--display); letter-spacing: -.047em; text-wrap: pretty; }
.thesis h2 span { display: block; margin-top: 18px; color: var(--red); }
.thesis-body { margin-top: 48px; }
.thesis-body p { text-wrap: pretty; }
.thesis-body p + p { margin-top: 25px; }
.thesis-body strong { font-weight: 500; }
.thesis-body .thesis-end { margin-top: 40px; padding-top: 30px; border-top: 1px solid var(--rule); }

.colophon { display: flex; justify-content: space-between; align-items: baseline; gap: 22px; border-top: 1px solid var(--rule); margin-top: 110px; padding: 23px 0 36px; font: 400 11px/1.7 var(--mono); }
.colophon > a { color: var(--red); }
.colophon > a > span { margin-left: 8px; }
.signature { color: var(--muted); }
.signature a { color: var(--ink); }

@media (max-width: 820px) {
  .thesis { max-width: none; margin-inline: var(--gutter); }
  .masthead h1 { font-size: 10.3vw; }
}
@media (max-width: 520px) {
  body { font-size: 17px; line-height: 1.7; }
  .masthead { padding-top: 25px; }
  .edition { font-size: 10px; gap: 14px; }
  .masthead h1 { font-size: 10.05vw; margin-top: 30px; }
  .emblem { width: 210px; margin-top: 23px; }
  .thesis { margin-top: 45px; }
  .thesis h2 { font-size: clamp(27px, 7.25vw, 36px); line-height: 1.22; letter-spacing: -.045em; }
  .thesis h2 span { margin-top: 16px; }
  .thesis-body { margin-top: 34px; }
  .thesis-body p + p { margin-top: 23px; }
  .colophon { display: grid; grid-template-columns: 1fr auto; gap: 18px; margin-top: 70px; padding-top: 22px; }
  .signature { grid-row: 2; grid-column: 1 / -1; }
  .colophon > :last-child { grid-row: 1; grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}