:root {
  color-scheme: light;
  --ink: #172238;
  --muted: #626978;
  --paper: #f5f2e9;
  --paper-line: rgba(75, 126, 188, 0.23);
  --paper-margin: rgba(203, 80, 92, 0.45);
  --blue: #4a89e8;
  --shell: #f0eee8;
  --hairline: rgba(23, 34, 56, 0.18);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--shell); }

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.86), transparent 36rem),
    var(--shell);
}

a { color: inherit; text-underline-offset: 0.2em; }
a:hover { color: #245fad; }

.page-shell {
  width: min(100%, 1500px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 22px clamp(18px, 3vw, 52px) 50px;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 48px;
  border-bottom: 1px solid var(--hairline);
}

.wordmark {
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;
}

.site-header nav { display: flex; gap: 18px; font-size: 0.84rem; }
.site-header nav a { text-decoration: none; }
.site-header nav a[aria-current="page"] { text-decoration: underline; }

.work { padding-top: clamp(34px, 6vw, 86px); }

.intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 34rem);
  align-items: end;
  gap: 28px;
  margin-bottom: 26px;
}

.eyebrow {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.intro .eyebrow { grid-column: 1 / -1; margin-bottom: -10px; }

h1 {
  margin: 0;
  max-width: 18ch;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: clamp(2.25rem, 5vw, 5.8rem);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 0.96;
}

.intro > p:last-child {
  margin: 0 0 0.25rem;
  color: var(--muted);
  font-size: clamp(0.9rem, 1.4vw, 1.06rem);
  line-height: 1.55;
}

.paper {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 3 / 2;
  border: 1px solid rgba(41, 72, 117, 0.2);
  border-radius: 3px;
  background-color: var(--paper);
  background-image:
    linear-gradient(90deg, transparent 0 7.5%, var(--paper-margin) 7.5% calc(7.5% + 1px), transparent calc(7.5% + 1px)),
    repeating-linear-gradient(0deg, transparent 0 31px, var(--paper-line) 31px 32px),
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.7), transparent 42%),
    radial-gradient(circle at 60% 65%, rgba(30, 45, 65, 0.04), transparent 34%);
  box-shadow: 0 22px 60px rgba(35, 43, 58, 0.11);
  touch-action: none;
}

.paper::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  opacity: 0.26;
  background-image: url("/paper-grain.svg");
  mix-blend-mode: multiply;
}

#quote-canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  outline: none;
}

#quote-canvas:focus-visible { box-shadow: inset 0 0 0 4px rgba(74, 137, 232, 0.75); }

.credit {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 17px 2px 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.credit p { margin: 0; }
.credit-author { color: var(--ink); font-weight: 750; }
.keyboard-note { margin: 36px 0 0; color: var(--muted); font-size: 0.72rem; }

.text-page article {
  width: min(100%, 820px);
  margin: clamp(80px, 15vh, 170px) auto 0;
}

.text-page article h1 { max-width: 13ch; margin-bottom: 38px; }
.text-page article > p:not(.eyebrow) { font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.62; }
.back-link { font-family: Inter, ui-sans-serif, sans-serif; font-size: 0.82rem; font-weight: 750; letter-spacing: 0.05em; text-transform: uppercase; }

@media (max-width: 720px) {
  .page-shell { padding-inline: 14px; }
  .intro { grid-template-columns: 1fr; gap: 18px; }
  .intro .eyebrow { margin-bottom: 0; }
  h1 { font-size: clamp(2.5rem, 14vw, 4.2rem); }
  .paper { background-image: linear-gradient(90deg, transparent 0 10%, var(--paper-margin) 10% calc(10% + 1px), transparent calc(10% + 1px)), repeating-linear-gradient(0deg, transparent 0 25px, var(--paper-line) 25px 26px); }
  .credit { align-items: flex-start; flex-direction: column; gap: 5px; }
  .keyboard-note { display: none; }
  .site-header nav { gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  #quote-canvas { cursor: pointer; }
}