/* dariocannizzaro.com — "the box"
   One idea: a 640px black box with a white hairline around it, and everything
   inside it obeys the box. Uppercase Helvetica for structure, sentence case for
   prose, hollow circles that go red on rollover, hairlines between bands.
   Nothing eases, nothing fades. See CLAUDE.md → Design system. */

:root {
  --black: #000;
  --white: #fff;
  --soft: #ddd;      /* prose */
  --grey: #999;      /* meta, copyright */
  --dim: #555;       /* odometer tile border */
  --rule-soft: #333; /* hairline between entries; white rules are for bands only */
  --red: #d10000;
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --box: 640px;
  --gutter: 12px;
}

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

html {
  background: var(--black);
  color: var(--white);
  font: 13px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}
body { padding: 24px 8px 32px; }

a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 1px dotted var(--white); outline-offset: 2px; }
img { display: block; max-width: 100%; height: auto; }

.skip { position: absolute; left: -999px; }
.skip:focus { left: 8px; top: 8px; background: var(--black); padding: 4px 8px; }

/* Uppercase structure */
.caps, .btn, .head, .shelf-title, .entry-title, .entry-meta, .greeting,
.wordmark, .section-name, .derelict, .copyright, .cite, .jobs, .eyebrow, .notice p {
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ---------- The box ---------- */
.box {
  width: min(var(--box), 100%);
  margin: 0 auto;
  border: 1px solid var(--white);
  background: var(--black);
}

/* A band is a horizontal slice of the box; bands are divided by white rules. */
.band + .band { border-top: 1px solid var(--white); }

/* ---------- The button: ○ LABEL ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}
.btn::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border: 1px solid var(--white);
  border-radius: 50%;
  background: var(--black);
}
.btn:hover::before,
.btn[aria-current]::before {
  background: var(--red);
  box-shadow: inset 0 0 0 1px var(--black); /* red centre, black gap, white ring — the 2004 "on" state */
}

/* ---------- Two-column grid (Lynch's footer: 215 | rule | rest) ---------- */
.grid2 {
  display: grid;
  grid-template-columns: 215px 1fr;
}
.grid2 > * {
  padding: 9px var(--gutter);
  border-bottom: 1px solid var(--white);
}
.grid2 > *:nth-child(odd) { border-right: 1px solid var(--white); }
/* The last row loses its bottom rule. With an even count that is the last two cells;
   with an odd count (five doors) only the last one — the second-to-last sits on the
   right of the row above and keeps its rule. */
.grid2 > *:last-child { border-bottom: 0; }
.grid2 > *:nth-child(odd):nth-last-child(2) { border-bottom: 0; }
.grid2 > *:nth-child(odd):last-child { border-right: 0; }

/* ---------- Front page ---------- */
.hero { position: relative; }
.hero > img { width: 100%; }
.hero-text {
  position: absolute;
  top: 20px;
  left: 50%;
  right: 16px;
  bottom: 0;
  padding-left: 8px;
}
.wordmark-big {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 21px;
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
.mono {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  border: 1px solid var(--white);
  border-radius: 50%;
  font-size: .5em;
  letter-spacing: 0;
}
.greeting {
  margin-top: 16px;
  font-size: 12px;
  line-height: 1.35;
}
.greeting p + p { margin-top: 10px; }
.signature { margin-top: 10px; width: 170px; }

.strip img { width: 100%; }

.derelict {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 8px var(--gutter);
  font-size: 10px;
  color: var(--grey);
}
.derelict > span { display: inline-flex; align-items: center; gap: 8px; }
.odo { display: inline-flex; gap: 2px; }
.odo span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 18px;
  border: 1px solid var(--dim);
  background: var(--black);
  color: var(--white);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.odo-img { height: 18px; width: auto; }

.copyright {
  margin-top: 14px;
  text-align: center;
  font-size: 10px;
  color: var(--grey);
}

/* ---------- Inner pages ---------- */
.head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 11px var(--gutter);
  font-size: 12px;
}
.wordmark { display: inline-flex; align-items: center; gap: 8px; }
.wordmark .mono { font-size: 9px; width: 18px; height: 18px; }
.section-name { color: var(--white); }

.page { padding: 14px var(--gutter) 22px; }

.shelf-title {
  font-size: 11px;
  padding: 6px 0;
  border-bottom: 1px solid var(--white);
  margin: 18px 0 2px;
  font-weight: 400;
}
.shelf-title:first-child { margin-top: 2px; }
.shelf-aside { display: flex; gap: 20px; margin: 12px 0 4px; }

.entry {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.entry:last-child { border-bottom: 0; }
.entry.has-cover { grid-template-columns: 72px 1fr auto; }
.entry-cover img { border: 1px solid var(--white); }
.entry-title { font-size: 12px; font-weight: 400; }
.entry-line { color: var(--soft); max-width: 58ch; margin-top: 3px; line-height: 1.45; }
.entry-note { color: var(--grey); max-width: 58ch; margin-top: 3px; font-size: 12px; }
.entry-pending { color: var(--red); font-size: 11px; margin-top: 3px; }
.entry-meta {
  font-size: 10px;
  color: var(--grey);
  text-align: right;
  line-height: 1.7;
  white-space: nowrap;
}
.entry-meta span { display: block; }
.links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 8px; }

/* Prose: the one place the site drops its voice to sentence case */
.prose { max-width: 58ch; color: var(--soft); line-height: 1.55; }
.prose p + p, .prose ul + p, .prose p + ul { margin-top: 12px; }
.prose strong { color: var(--white); font-weight: 400; }
.prose em { font-style: italic; }
.prose a { border-bottom: 1px solid var(--grey); }
.prose a:hover { border-bottom-color: var(--white); }
.prose h2, .prose h3 {
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--white);
  margin: 20px 0 6px;
}
.prose ul { padding-left: 1.2em; }
.prose blockquote { border-left: 1px solid var(--white); padding-left: 12px; color: var(--white); }
.prose hr { border: 0; border-top: 1px solid var(--rule-soft); margin: 18px 0; }
/* Dario's section mark in the stories: a lone # between passages, as in the book. */
.prose .sep { color: var(--grey); text-align: left; margin: 14px 0; }
.first { margin-top: 18px; font-size: 12px; }
.first a { border-bottom: 1px solid var(--grey); }
.first a:hover { border-bottom-color: var(--white); }

/* Poems: the line breaks are the poem, so the markup keeps every one of them. */
.poem { max-width: 58ch; color: var(--soft); line-height: 1.6; }
.poem p { white-space: pre-wrap; }
.poem p + p { margin-top: 16px; }
.poem em { font-style: italic; }
.gloss { margin-top: 18px; font-size: 12px; }

.eyebrow { font-size: 10px; color: var(--grey); margin-bottom: 10px; }
.eyebrow a:hover { color: var(--white); }
.page-title { font-size: 12px; font-weight: 400; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 14px; }

.portrait { float: left; width: 150px; margin: 2px 16px 8px 0; }
.portrait img { border: 1px solid var(--white); }

.jobs { font-size: 11px; line-height: 1.9; margin-bottom: 16px; }
.jobs span + span::before { content: " · "; color: var(--grey); }

.sub {
  clear: both;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--white);
}

/* Press */
.quote { padding: 14px 0; border-bottom: 1px solid var(--rule-soft); }
.quote:last-child { border-bottom: 0; }
.quote p { font-size: 14px; line-height: 1.45; max-width: 58ch; }
.cite { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 8px; font-size: 10px; color: var(--grey); }

/* Contact */
.bigmail { font-size: 16px; margin: 4px 0 12px; }
.bigmail::before { width: 11px; height: 11px; }
.aside { color: var(--grey); max-width: 58ch; }
.form { margin-top: 18px; display: grid; gap: 10px; max-width: 420px; }
.form label { display: grid; gap: 4px; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--grey); }
.form input, .form textarea {
  font: 13px/1.4 var(--font);
  color: var(--white);
  background: var(--black);
  border: 1px solid var(--white);
  padding: 6px 8px;
  border-radius: 0;
}
.form input:focus, .form textarea:focus { outline: 1px dotted var(--white); outline-offset: 2px; }
.form button {
  justify-self: start;
  background: none;
  border: 0;
  color: var(--white);
  font-family: var(--font);
  cursor: pointer;
}

/* 404 */
.notice { text-align: center; padding: 44px 24px 40px; }
.notice h1 { font-size: 26px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 18px; }
.notice p { font-size: 12px; max-width: 46ch; margin: 0 auto 22px; line-height: 1.4; }
.notice .btn { margin: 0 auto; }

/* ---------- Narrow ---------- */
@media (max-width: 600px) {
  body { padding: 8px 8px 24px; }
  .hero-text { position: static; padding: 16px var(--gutter) 18px; }
  .wordmark-big { font-size: 20px; }
  .grid2 { grid-template-columns: 1fr; }
  .grid2 > *:nth-child(odd) { border-right: 0; }
  .grid2 > *:nth-last-child(-n + 2) { border-bottom: 1px solid var(--white); }
  .grid2 > *:last-child { border-bottom: 0; }
  .derelict { flex-wrap: wrap; }
  .entry, .entry.has-cover { grid-template-columns: 1fr; }
  .entry-meta { text-align: left; white-space: normal; margin-top: 4px; }
  .entry-meta span { display: inline; }
  .entry-meta span + span::before { content: " · "; }
  .entry-cover { width: 72px; }
  .portrait { width: 110px; }
}

@media (prefers-reduced-motion: reduce) { /* nothing moves here anyway */ }