@font-face {
  font-family: "DM Sans";
  src: url("assets/dm-sans.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "DM Serif";
  src: url("assets/dm-serif.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Plex Mono";
  src: url("assets/ibm-plex-mono.ttf") format("truetype");
  font-display: swap;
}

:root {
  --paper: #f1eee5;
  --paper-light: #f8f6f0;
  --ink: #172a2e;
  --red: #b93f2f;
  --gold: #e2a72d;
  --sage: #789078;
  --line: rgba(23, 42, 46, 0.35);
  --max: 1320px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--paper);
}

body {
  margin: 0;
  color: var(--ink);
  background:
    linear-gradient(rgba(23, 42, 46, 0.022) 1px, transparent 1px),
    var(--paper);
  background-size: 100% 4px;
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

button, input, select { font: inherit; }
button, select { cursor: pointer; }
img { display: block; max-width: 100%; }
a { color: inherit; }

button:focus-visible,
input:focus-visible,
select:focus-visible,
a:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 10px;
  left: 10px;
  padding: 10px 15px;
  background: var(--ink);
  color: white;
  transform: translateY(-150%);
}

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

.page-width {
  width: min(calc(100% - 64px), var(--max));
  margin-inline: auto;
}

.utility-row {
  display: flex;
  justify-content: space-between;
  padding: 14px 0 9px;
  border-bottom: 1px solid var(--ink);
  font-family: "Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.utility-row p { margin: 0; }

.masthead {
  min-height: 164px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.masthead-mark {
  width: 47px;
  height: 47px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ink);
  border-radius: 50%;
  color: var(--red);
  font: 38px/.8 "DM Serif", serif;
}

.wordmark {
  text-decoration: none;
  font: clamp(52px, 7vw, 96px)/.85 "DM Serif", Georgia, serif;
  letter-spacing: -.055em;
}

.wordmark span {
  position: relative;
  top: -3.4em;
  left: 2.5em;
  margin-right: -1.2em;
  font: 11px/1 "Plex Mono", monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.tagline {
  justify-self: end;
  margin: 0;
  font-family: "DM Serif", serif;
  font-size: 17px;
  font-style: italic;
  line-height: 1.15;
  text-align: right;
}

.rule {
  height: 7px;
  border-top: 1px solid var(--ink);
  border-bottom: 3px solid var(--ink);
}

.intro {
  position: relative;
  min-height: 405px;
  padding: 78px 0 65px;
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 60px;
  overflow: hidden;
}

.eyebrow {
  margin: 0 0 18px;
  color: var(--red);
  font-family: "Plex Mono", monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.intro h1 {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 780px;
  font: clamp(68px, 8.2vw, 118px)/.78 "DM Serif", Georgia, serif;
  letter-spacing: -.055em;
}

.intro-copy {
  align-self: end;
  max-width: 330px;
  margin: 0 0 12px auto;
  font-family: "DM Serif", Georgia, serif;
  font-size: 22px;
  line-height: 1.3;
}

.city-line {
  position: absolute;
  right: 21%;
  bottom: 21px;
  width: min(390px, 35%);
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.3;
  opacity: .82;
}

.browse {
  padding: 54px 0 88px;
  background: var(--paper-light);
  border-top: 1px solid var(--ink);
}

.browse-tools {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 40px;
}

.browse-heading h2 {
  margin: 0;
  font: 46px/1 "DM Serif", Georgia, serif;
  letter-spacing: -.035em;
}

.controls {
  display: flex;
  align-items: end;
  gap: 10px;
}

.controls label > span:first-child {
  display: block;
  margin-bottom: 6px;
  font: 10px/1 "Plex Mono", monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.input-wrap,
.select-wrap {
  position: relative;
  display: block;
}

.input-wrap svg {
  position: absolute;
  left: 14px;
  top: 50%;
  width: 18px;
  transform: translateY(-50%);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.search-control input,
.filter-control select,
.saved-toggle {
  height: 45px;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
}

.search-control input {
  width: 230px;
  padding: 0 13px 0 43px;
}

.search-control input::placeholder { color: rgba(23, 42, 46, .6); }

.filter-control select {
  width: 160px;
  padding: 0 38px 0 13px;
  appearance: none;
}

.select-wrap svg {
  position: absolute;
  right: 13px;
  top: 50%;
  width: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  pointer-events: none;
  transform: translateY(-50%);
}

.saved-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 9px 0 13px;
  margin-top: 16px;
}

.saved-toggle svg,
.save-item svg {
  width: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.saved-toggle[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper-light);
}

.saved-toggle[aria-pressed="true"] svg,
.save-item[aria-pressed="true"] svg { fill: currentColor; }

.saved-count {
  min-width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  font: 11px/1 "Plex Mono", monospace;
}

.results-bar {
  display: flex;
  justify-content: space-between;
  padding: 38px 0 10px;
  border-bottom: 1px solid var(--ink);
  font: 10px/1 "Plex Mono", monospace;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.results-bar p { margin: 0; }

.story-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 24px;
}

.story-card {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  padding: 32px 0 30px;
  border-bottom: 1px solid var(--ink);
}

.story-card:nth-child(5n + 1) { grid-column: span 8; }

.card-image-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1.5;
  margin-bottom: 20px;
  background: #d7d2c6;
}

.story-card:nth-child(5n + 1) .card-image-wrap { aspect-ratio: 2.12; }

.card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.72) contrast(.93);
  transition: transform .5s cubic-bezier(.2,.7,.2,1), filter .4s ease;
}

.story-card:hover .card-image {
  transform: scale(1.025);
  filter: saturate(.9) contrast(.96);
}

.card-number {
  position: absolute;
  right: 9px;
  bottom: 8px;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  background: var(--paper-light);
  font: 10px/1 "Plex Mono", monospace;
}

.card-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  color: var(--red);
  font: 10px/1.2 "Plex Mono", monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.card-meta p { margin: 0; }

.saved-badge {
  display: none;
  color: var(--ink);
}

.story-card.is-saved .saved-badge { display: inline; }

.story-card h3 {
  margin: 0 0 10px;
  max-width: 740px;
  font: clamp(27px, 2.5vw, 39px)/1.02 "DM Serif", Georgia, serif;
  letter-spacing: -.025em;
}

.story-card:not(:nth-child(5n + 1)) h3 { font-size: 29px; }

.story-card .summary {
  max-width: 680px;
  margin: 0 0 18px;
  color: #405155;
  line-height: 1.45;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 5px;
}

.author {
  margin: 0;
  font: 10px/1 "Plex Mono", monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.open-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0 6px;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}

.open-item span:last-child {
  font-size: 18px;
  line-height: 1;
  transition: transform .2s ease;
}

.open-item:hover span:last-child { transform: translateX(4px); }

.empty-state {
  min-height: 440px;
  display: grid;
  grid-template-columns: .35fr 1fr;
  align-items: center;
  gap: 50px;
  border-bottom: 1px solid var(--ink);
}

.empty-state[hidden] { display: none; }
.empty-state .empty-number { margin: 0; color: var(--gold); font: 220px/.8 "DM Serif", serif; }
.empty-state h2 { margin: 0 0 10px; font: 40px/1 "DM Serif", serif; }
.empty-state > div > p:not(.eyebrow) { margin: 0 0 24px; }
.empty-state button { padding: 12px 17px; border: 1px solid var(--ink); background: var(--ink); color: white; }

.site-footer {
  padding: 45px 0;
  background: var(--ink);
  color: var(--paper);
}

.footer-inner {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: end;
  gap: 30px;
}

.footer-inner p { margin: 0; font-size: 12px; }
.footer-mark { margin-bottom: 7px !important; font: 29px/1 "DM Serif", serif !important; }
.footer-inner > p { font-family: "Plex Mono", monospace; font-size: 9px; line-height: 1.7; text-transform: uppercase; }
.footer-inner a { font-size: 13px; text-underline-offset: 5px; }

.story-dialog {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--paper-light);
  color: var(--ink);
}

.story-dialog::backdrop { background: rgba(12, 23, 25, .7); }
.story-dialog[open] { animation: reveal .32s ease-out; }
body:has(.story-dialog[open]) { overflow: hidden; }

@keyframes reveal {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.detail-shell { min-height: 100%; }

.detail-topbar {
  position: sticky;
  z-index: 3;
  top: 0;
  height: 64px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 28px;
  border-bottom: 1px solid var(--ink);
  background: rgba(248, 246, 240, .96);
}

.detail-topbar > p {
  margin: 0;
  font: 11px/1 "Plex Mono", monospace;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.close-detail,
.save-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: max-content;
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 12px;
  font-weight: 600;
}

.close-detail svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.save-item { justify-self: end; }

.detail-layout {
  display: grid;
  grid-template-columns: minmax(370px, 44vw) 1fr;
  min-height: calc(100vh - 64px);
}

.detail-visual {
  position: sticky;
  top: 64px;
  height: calc(100vh - 64px);
  background: var(--ink);
}

.detail-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset -1px 0 var(--ink);
  pointer-events: none;
}

.detail-visual img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.75) contrast(.93); }
.detail-visual > p { position: absolute; left: 18px; bottom: 14px; margin: 0; padding: 5px 7px; background: rgba(248,246,240,.92); font: 8px/1 "Plex Mono", monospace; text-transform: uppercase; }

.detail-article {
  width: min(100% - 80px, 720px);
  margin-inline: auto;
  padding: 86px 0 120px;
}

.detail-article h2 {
  margin: 0;
  font: clamp(48px, 5.2vw, 76px)/.94 "DM Serif", Georgia, serif;
  letter-spacing: -.04em;
}

.detail-summary {
  margin: 28px 0;
  color: #45575a;
  font: 22px/1.4 "DM Serif", Georgia, serif;
  font-style: italic;
}

.byline {
  display: flex;
  flex-wrap: wrap;
  gap: 11px 24px;
  padding: 17px 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  font: 9px/1 "Plex Mono", monospace;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.byline strong { color: var(--red); font-weight: 500; }

.detail-body {
  padding-top: 40px;
  font-family: "DM Serif", Georgia, serif;
  font-size: 21px;
  line-height: 1.66;
}

.detail-body p { margin: 0 0 1.35em; }
.detail-body p:first-child::first-letter { float: left; margin: .05em .1em 0 0; color: var(--red); font-size: 4.2em; line-height: .74; }

.detail-end { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 15px; margin-top: 55px; color: var(--red); font: 13px/1 "DM Serif", serif; }
.detail-end span { height: 1px; background: var(--line); }

@media (max-width: 900px) {
  .page-width { width: min(calc(100% - 40px), var(--max)); }
  .masthead { min-height: 130px; }
  .masthead-mark { display: none; }
  .masthead { grid-template-columns: 1fr auto; }
  .wordmark { justify-self: start; }
  .intro { min-height: 380px; grid-template-columns: 1fr .55fr; }
  .browse-tools { grid-template-columns: 1fr; }
  .controls { flex-wrap: wrap; }
  .story-card, .story-card:nth-child(5n + 1) { grid-column: span 6; }
  .story-card:nth-child(5n + 1) .card-image-wrap { aspect-ratio: 1.5; }
  .detail-layout { grid-template-columns: 39% 1fr; }
  .detail-article { width: min(100% - 48px, 720px); }
}

@media (max-width: 600px) {
  .page-width { width: calc(100% - 32px); }
  .utility-row { padding-top: 10px; font-size: 8px; }
  .utility-row p:last-child { display: none; }
  .masthead { min-height: 104px; grid-template-columns: 1fr auto; }
  .wordmark { font-size: 52px; }
  .wordmark span { top: -3.6em; left: 2.6em; font-size: 7px; }
  .tagline { font-size: 12px; }
  .intro { min-height: 400px; display: block; padding: 58px 0 42px; }
  .intro h1 { font-size: clamp(64px, 20vw, 80px); }
  .intro-copy { width: 68%; margin: 45px 0 0 auto; font-size: 18px; }
  .city-line { right: 30%; bottom: 28px; width: 57%; }
  .browse { padding: 42px 0 60px; }
  .browse-heading h2 { font-size: 39px; }
  .controls { display: grid; grid-template-columns: 1fr auto; width: 100%; margin-top: 8px; }
  .search-control { grid-column: 1 / -1; }
  .search-control input { width: 100%; }
  .filter-control select { width: 100%; }
  .saved-toggle { margin-top: 16px; }
  .results-bar { padding-top: 30px; }
  .results-bar p:last-child { display: none; }
  .story-grid { display: block; }
  .story-card { padding: 28px 0; }
  .story-card .card-image-wrap,
  .story-card:nth-child(5n + 1) .card-image-wrap { aspect-ratio: 1.35; }
  .story-card:not(:nth-child(5n + 1)) h3,
  .story-card h3 { font-size: 30px; }
  .story-card .summary { font-size: 14px; }
  .card-footer { align-items: end; }
  .empty-state { min-height: 400px; display: block; padding: 65px 0; }
  .empty-state .empty-number { font-size: 120px; margin-bottom: 25px; }
  .footer-inner { grid-template-columns: 1fr auto; }
  .footer-inner > p { display: none; }
  .detail-topbar { height: 58px; grid-template-columns: 1fr auto; padding: 0 16px; }
  .detail-topbar > p { display: none; }
  .close-detail span { display: none; }
  .detail-layout { display: block; }
  .detail-visual { position: relative; top: auto; height: 36vh; min-height: 270px; }
  .detail-article { width: calc(100% - 36px); padding: 45px 0 80px; }
  .detail-article h2 { font-size: clamp(43px, 13vw, 58px); }
  .detail-summary { font-size: 19px; margin: 22px 0; }
  .detail-body { padding-top: 32px; font-size: 19px; line-height: 1.6; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}