:root {
  --paper: #111;
  --ink: #eee;
  --muted: #aaa;
  --line: #555;
  --accent: #ff4d00;
  --gutter: clamp(1.25rem, 3vw, 3rem);
  --sans: "Roboto Condensed", Arial, sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 18px; line-height: 1.45; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover, a:focus-visible { color: var(--accent); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
::selection { background: var(--accent); color: white; }
.journal-shell { width: min(100%, 1600px); min-height: 100vh; margin: 0 auto; padding: 0 var(--gutter); }
.journal-header { min-height: 76px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--ink); font: .7rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.journal-header p { margin: 0; color: var(--muted); }
.journal-header > a:not(.journal-brand) { color: var(--muted); text-decoration: none; }
.journal-brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; }
.journal-brand span { display: grid; width: 32px; height: 32px; place-items: center; background: var(--ink); color: var(--paper); font-weight: 700; }
.journal-brand b { font-weight: 700; }
.journal-intro { display: grid; grid-template-columns: minmax(140px,.35fr) minmax(0,1.4fr) minmax(220px,.55fr); gap: var(--gutter); align-items: end; padding: clamp(4rem,10vw,10rem) 0 clamp(3rem,7vw,7rem); border-bottom: 1px solid var(--ink); }
.journal-label { margin: 0; color: var(--accent); font: .68rem/1.3 var(--mono); letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.journal-intro h1 { margin: 0; font-size: clamp(4rem,11vw,11rem); line-height: .78; letter-spacing: -.04em; }
.journal-intro > p:last-child { max-width: 30ch; margin: 0; color: var(--muted); }
.article-list { padding-bottom: clamp(4rem,9vw,9rem); }
.article-row { display: grid; grid-template-columns: minmax(140px,.35fr) minmax(0,1.95fr) auto; gap: var(--gutter); align-items: baseline; border-bottom: 1px solid var(--line); padding: clamp(1.25rem,2.5vw,2.5rem) 0; }
.article-row time, .article-head time { color: var(--muted); font: .68rem/1.4 var(--mono); letter-spacing: .06em; }
.article-row h2 { margin: 0; font-size: clamp(1.65rem,3.5vw,4rem); font-weight: 400; letter-spacing: -.025em; line-height: 1; }
.article-row h2 a { text-decoration: none; }
.article-arrow { color: var(--accent); font-size: 1.5rem; text-decoration: none; }
.journal-empty { margin: 3rem 0; color: var(--muted); }
.article-page { max-width: 1180px; margin: 0 auto; }
.article-head { padding: clamp(4rem,10vw,10rem) 0 clamp(3rem,6vw,6rem); border-bottom: 1px solid var(--ink); }
.article-head h1 { max-width: 15ch; margin: clamp(2rem,5vw,5rem) 0 2rem; font-size: clamp(3.2rem,8vw,8rem); font-weight: 700; letter-spacing: -.035em; line-height: .88; }
.article-body { width: min(100%, 720px); margin: 0 auto; padding: clamp(3rem,7vw,7rem) 0 clamp(5rem,10vw,10rem); font-size: clamp(1.15rem,1.7vw,1.45rem); line-height: 1.6; }
.article-body > *:first-child { margin-top: 0; }
.article-body h2, .article-body h3 { margin: 2.5em 0 .65em; line-height: 1.05; }
.article-body h2 { font-size: 2em; letter-spacing: -.025em; }
.article-body h3 { font-size: 1.4em; }
.article-body p, .article-body ul, .article-body ol, .article-body blockquote { margin: 0 0 1.35em; }
.article-body blockquote { margin-left: 0; border-left: 3px solid var(--accent); padding-left: 1.25em; color: var(--muted); }
.article-body code { font-family: var(--mono); font-size: .85em; }
.journal-footer { display: flex; justify-content: space-between; border-top: 1px solid var(--ink); padding: 1.5rem 0 3rem; color: var(--muted); font: .68rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.journal-footer a { text-decoration: none; }

@media (max-width: 720px) {
  .journal-header { min-height: 64px; }
  .journal-header p, .journal-brand b { display: none; }
  .journal-intro { grid-template-columns: 1fr; align-items: start; }
  .journal-intro h1 { font-size: clamp(4rem,22vw,7rem); }
  .article-row { grid-template-columns: 1fr auto; gap: .65rem 1rem; }
  .article-row time { grid-column: 1 / -1; }
  .article-head h1 { font-size: clamp(3rem,15vw,5.5rem); }
}