:root {
  --bg: #0b0e12;
  --panel: #141920;
  --panel-deep: #0a0d10;
  --hairline: #232b36;
  --text: #dde4ec;
  --dim: #96a2b1;
  --ember: #e8833a;
  --ink: #140b05;
  --serif: "Instrument Serif", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
  --measure: 42rem;
}

* { margin: 0; padding: 0; box-sizing: border-box; border-radius: 0 !important; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  max-width: 46rem;
  margin: 0 auto;
  padding: 0 1.25rem 4rem;
  background-image: repeating-linear-gradient(
    90deg, transparent 0, transparent 3px, rgba(255,255,255,0.006) 3px, rgba(255,255,255,0.006) 4px);
}

::selection { background: var(--ember); color: var(--ink); }

a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--hairline); transition: border-color .15s, color .15s; }
a:hover { color: var(--ember); border-color: var(--ember); }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.dim { color: var(--dim); }
.rule { height: 1px; background: var(--hairline); margin: 1.5rem 0; }
.rule.ember { background: var(--ember); height: 2px; width: 4rem; }

.masthead {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 1.75rem 0 1rem;
  border-bottom: 1px solid var(--hairline);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  font-family: var(--mono);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--ember);
  border: none;
}
.wordmark:hover { color: var(--text); }

.mark {
  height: 2.6rem;
  width: 2.6rem;
  object-fit: cover;
  border: 1px solid var(--hairline);
  display: block;
}

.hero { padding: 4.5rem 0 2rem; }

.kicker {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 1.25rem;
}

.display {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.6rem, 8vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -.01em;
}
.display em { font-style: italic; color: var(--ember); }

.hero-line { color: var(--dim); max-width: var(--measure); }

.hero > * { opacity: 0; transform: translateY(10px); animation: rise .7s cubic-bezier(.2,.6,.2,1) forwards; }
.hero > *:nth-child(2) { animation-delay: .08s; }
.hero > *:nth-child(3) { animation-delay: .16s; }
.hero > *:nth-child(4) { animation-delay: .24s; }
@keyframes rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .hero > * { animation: none; opacity: 1; transform: none; }
}

.engraving { margin: 3rem 0; }

.plate {
  background: var(--panel-deep);
  border: 1px solid var(--hairline);
  padding: 1rem;
}

.plate img {
  display: block; width: 100%; height: auto;
  filter: grayscale(1) contrast(1.12) brightness(.82) sepia(.55) hue-rotate(-18deg) saturate(1.35);
}

.placard {
  display: block;
  border: 1px solid var(--hairline);
  border-top: none;
  background: var(--panel);
  padding: .8rem 1rem;
}
.placard-title { display: block; font-family: var(--serif); font-size: 1.15rem; }
.placard-meta { display: block; font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); margin: .3rem 0; }
.placard-note { display: block; font-size: .85rem; color: var(--dim); }

.section-label {
  font-family: var(--mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--dim);
}

.post-list { list-style: none; }

.post-row {
  display: flex; gap: 1.5rem; align-items: baseline;
  padding: .85rem .5rem;
  border: none;
  border-bottom: 1px solid var(--hairline);
}
.post-row:hover { background: var(--panel); }
.post-row:hover .post-name { color: var(--ember); }

.post-date { font-size: .78rem; color: var(--dim); flex-shrink: 0; }
.post-name { font-family: var(--serif); font-size: 1.35rem; line-height: 1.2; }

.post-head { padding: 3.5rem 0 .5rem; }

.post-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  line-height: 1.05;
}

.post-subtitle { color: var(--dim); font-size: 1.1rem; margin-top: .6rem; }

.prose { max-width: var(--measure); }
.prose p, .prose ul, .prose ol, .prose blockquote { margin-bottom: 1.15rem; }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose h2 { font-family: var(--serif); font-weight: 400; font-size: 1.9rem; margin: 2.2rem 0 .8rem; }
.prose h3 { font-family: var(--mono); font-size: .85rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ember); margin: 2rem 0 .7rem; }
.prose strong { color: var(--text); }
.prose em { font-style: italic; }

.prose blockquote {
  border-left: 2px solid var(--ember);
  padding: .4rem 0 .4rem 1.1rem;
  color: var(--dim);
  font-family: var(--serif);
  font-size: 1.15rem;
}

.prose code {
  font-family: var(--mono);
  font-size: .88em;
  background: var(--panel);
  border: 1px solid var(--hairline);
  padding: .1em .35em;
}

.prose pre {
  background: var(--panel-deep);
  border: 1px solid var(--hairline);
  padding: 1rem 1.2rem;
  overflow-x: auto;
  margin-bottom: 1.15rem;
}
.prose pre code { background: none; border: none; padding: 0; font-size: .82rem; line-height: 1.55; }

.prose img { max-width: 100%; border: 1px solid var(--hairline); }

.prose table { border-collapse: collapse; width: 100%; margin-bottom: 1.15rem; font-size: .9rem; }
.prose th { font-family: var(--mono); font-size: .72rem; letter-spacing: .15em; text-transform: uppercase; text-align: left; color: var(--dim); }
.prose th, .prose td { border: 1px solid var(--hairline); padding: .45rem .6rem; }

.prose hr { border: none; height: 1px; background: var(--hairline); margin: 2rem 0; }

.post-foot { margin-top: 3rem; }

.colophon { margin-top: 4rem; }
.colophon-row {
  display: flex; gap: 1.25rem; align-items: baseline;
  font-family: var(--mono); font-size: .75rem; letter-spacing: .08em;
  padding: .3rem 0;
}
.colophon-row a { color: var(--dim); border: none; }
.colophon-row a:hover { color: var(--ember); }
.col-label { color: var(--ember); font-size: .68rem; letter-spacing: .25em; text-transform: uppercase; min-width: 6.5rem; }

@media (max-width: 540px) {
  .post-row { flex-direction: column; gap: .15rem; }
  .colophon-row { flex-wrap: wrap; }
}