@font-face {
  font-family: 'FATCamera';
  src: url('fonts/FATCamera-Regular.woff') format('woff');
  font-weight: 400;
  font-display: block;
}
@font-face {
  font-family: 'FATCamera';
  src: url('fonts/FATCamera-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: block;
}
@font-face {
  font-family: 'ABCROMMono';
  src: url('fonts/ABCROMMono-Book.woff2') format('woff2');
  font-weight: 400;
  font-display: block;
}

:root {
  --red: #ff0000;
  --bg: #000;
  --fs: 13px;
  --lh: 16px;
  --margin: 14px;
}

@media (min-width: 720px) {
  :root { --fs: 14px; --lh: 18px; --margin: 32px; }
  nav.root { display: flex; gap: calc(var(--lh) * 1.5); }
  nav.root a { flex: 1; padding-bottom: 0; }
  .hero img { max-width: 1000px; }
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; background: var(--bg); color: var(--red); }

body {
  font-family: 'FATCamera', Arial, sans-serif;
  font-weight: 400;
  font-size: var(--fs);
  line-height: var(--lh);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: var(--margin);
  -webkit-text-size-adjust: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.mono,
.entry .idx,
.entry .body .meta,
.entry a.view,
footer {
  font-family: 'ABCROMMono', ui-monospace, Menlo, monospace;
  letter-spacing: 0.01em;
}

header, .hero, .subject, .entry {
  padding: calc(var(--lh) * 0.75) 0;
}

.hero img { display: block; width: 100%; height: auto; }

header div + div,
.subject > div + div,
.entry .body > div + div {
  margin-top: calc(var(--lh) * 0.25);
}

header a { display: block; text-decoration: none; }
header img { display: block; width: 9em; height: auto; margin: 0 auto calc(var(--lh) * 1.25); }
header .caption { display: flex; justify-content: space-between; }

.subject .title-display { font-weight: 700; }

.entry { display: grid; grid-template-columns: 4ch 1fr; gap: 1ch; }
.entry .body .title { font-weight: 700; margin-bottom: calc(var(--lh) * 0.5); }

.entry a.view {
  display: inline-block;
  margin-top: calc(var(--lh) * 0.75);
  padding: calc(var(--lh) * 0.5) 0;
}

a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }

nav.root { padding-top: calc(var(--lh) * 0.75); }
nav.root a { display: block; padding-bottom: calc(var(--lh) * 3.5); text-decoration: none; }
nav.root a:last-child { padding-bottom: 0; }
nav.root a img { display: block; width: 100%; height: auto; margin-bottom: calc(var(--lh) * 0.5); }
nav.root a .label { text-decoration: underline; text-underline-offset: 0.2em; }

footer { margin-top: auto; padding: calc(var(--lh) * 2) 0 var(--lh); font-size: 11px; }