/* ------------------------------------------------------------------
   Austere early-web theme.
   Everything visual lives here — this is the file to edit when you want
   to change the look and feel. Fonts, colors, spacing all in one place.
   ------------------------------------------------------------------ */

:root {
  --paper: #91903c;        /* primary: the one solid background color */
  --accent: #09290d;       /* the one accent color; change to retheme */
  --ink: #e8e7e3;          /* body text (light) */
  --link: #e8e7e3;         /* links (light) */
  --edge: #bcbba8;         /* hairline rules/borders (dimmed accent) */
  --muted: #dcdbcf;        /* secondary text (dates, meta) */
  --max: 640px;
  --mono: "American Typewriter", "Courier Prime", "Courier New", Courier, monospace;
}

html { background: var(--paper); }  /* one solid background, no framed panel */

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  max-width: var(--max);
  margin: 0 auto;
  padding: 28px 22px 60px;
}

a { color: var(--link); text-decoration: none; }
a:hover { background: var(--accent); color: var(--paper); }

/* --- header --- */
.site-title {
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 3px;
  text-transform: lowercase;
  margin: 0 0 2px;
}
.site-title a:hover { background: none; color: var(--ink); }
.tagline { color: var(--muted); font-size: 12px; margin-bottom: 4px; }
.cursor::after { content: "_"; animation: blink 1.1s steps(2) infinite; }
@keyframes blink { to { opacity: 0; } }

nav {
  font-size: 12px;
  border-bottom: 1px solid var(--edge);
  padding: 8px 0;
  margin-bottom: 26px;
}
nav a { margin-right: 24px; }
nav a:last-child { margin-right: 0; }

/* --- section headings --- */
.section {
  font-size: 12px;
  text-transform: lowercase;
  letter-spacing: 0;
  margin: 26px 0 8px;
}

/* --- post listing tables --- */
table.listing { width: 100%; border-collapse: collapse; font-size: 12px; }
table.listing td { padding: 8px 0; vertical-align: top; }
td.date { width: 82px; color: var(--muted); white-space: nowrap; }
/* width:1% + nowrap shrinks the tag column to its content on ONE line, so the
   title column takes the rest and runs to the right edge like the other lists. */
table.listing td.cat { width: 1%; white-space: nowrap; padding-right: 16px; color: var(--accent); text-transform: lowercase; }

.intro { margin-top: 0; }
.muted { color: var(--muted); }

/* small bio portrait, floated left with the about text wrapping beside it */
.bio-photo {
  float: left;
  width: 130px;
  height: auto;
  margin: 4px 18px 8px 0;
  border: 1px solid var(--edge);
}

/* --- full post --- */
.post-full { font-size: 13px; }
.post-title { font-size: 18px; margin: 8px 0 2px; }
.post-meta { color: var(--muted); font-size: 11px; margin-bottom: 18px; }
.post-meta .cat { color: var(--accent); }
.post-full img { max-width: 100%; height: auto; border: 1px solid var(--edge); }
.post-full h2, .post-full h3 { font-size: 14px; margin-top: 22px; }
.post-full blockquote {
  border-left: 3px solid var(--edge);
  margin: 14px 0; padding-left: 12px; color: var(--muted);
}
.back { margin-top: 28px; font-size: 12px; }

/* --- photos gallery --- */
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.gallery figure { margin: 0; }
.gallery img { width: 100%; height: auto; border: 1px solid var(--edge); display: block; }
.gallery figcaption { font-size: 11px; color: var(--muted); margin-top: 4px; }

/* --- forms --- */
.sub-form label { display: inline-block; }
.sub-form input[type=text],
.sub-form input[type=email],
.sub-form input[type=tel] {
  font-family: var(--mono); font-size: 13px;
  border: 1px solid var(--accent); padding: 3px 5px;
  background: var(--paper); color: var(--ink); width: 260px;
}
.sub-form fieldset { border: 1px solid var(--edge); margin: 14px 0; padding: 8px 12px; }
.sub-form .fineprint { font-size: 11px; }
/* honeypot: kept in the DOM for bots but removed from view and the tab order */
.sub-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sub-form legend { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }
.sub-form button, #go {
  font-family: var(--mono); font-size: 13px; cursor: pointer;
  border: 1px solid var(--accent); background: var(--accent); color: var(--paper); padding: 4px 14px;
}
.sub-form button:hover, #go:hover { background: var(--muted); }
.out { background: rgba(232,231,227,0.1); border: 1px solid var(--edge); padding: 10px; font-size: 11px; white-space: pre-wrap; }

/* --- footer --- */
footer {
  margin-top: 40px; padding-top: 10px;
  border-top: 1px solid var(--edge);
  font-size: 11px; color: var(--muted);
}

@media (max-width: 500px) {
  .gallery { grid-template-columns: 1fr; }
  .sub-form input { width: 100%; box-sizing: border-box; }
}