/* ==========================================================================
   silicate.css — a brutally minimal, content-first stylesheet
   --------------------------------------------------------------------------
   No frameworks. No classes. No build step.
   Style raw HTML elements. The browser's defaults are 90% right.
   We fix line length, leading, and contrast — and stop.
   ========================================================================== */

:root {
  /* ---------- type ---------- */
  --silicate-font-serif:
    "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
    Georgia, "Times New Roman", Times, serif;
  --silicate-font-sans:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  --silicate-font-mono:
    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
  --silicate-font-body: var(--silicate-font-serif);

  --silicate-size-base: 1.125rem;     /* 18px */
  --silicate-leading: 1.55;
  --silicate-leading-tight: 1.2;
  --silicate-measure: 34rem;          /* ~70 characters at 18px serif */

  /* ---------- color (light) — gruvbox light ---------- */
  --silicate-bg:        #fbf1c7;      /* gruvbox light bg0 */
  --silicate-fg:        #3c3836;      /* gruvbox dark fg, used on light */
  --silicate-fg-muted:  #665c54;      /* fg2 */
  --silicate-rule:      #d5c4a1;      /* bg2 */
  --silicate-mark:      #fabd2f;      /* yellow */
  --silicate-accent:    #af3a03;      /* faded orange — links + focus */
  --silicate-accent-on: #fbf1c7;      /* text on accent */
  --silicate-code-bg:   #ebdbb2;      /* bg1 */

  /* ---------- spacing ---------- */
  --silicate-space-1:  0.25rem;
  --silicate-space-2:  0.5rem;
  --silicate-space-3:  1rem;
  --silicate-space-4:  1.5rem;
  --silicate-space-5:  2rem;
  --silicate-space-6:  3rem;
  --silicate-space-7:  5rem;

  /* ---------- structure ---------- */
  --silicate-rule-width: 1px;
  --silicate-focus-ring: 2px;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* gruvbox dark */
    --silicate-bg:        #282828;   /* bg0 */
    --silicate-fg:        #ebdbb2;   /* fg1 */
    --silicate-fg-muted:  #a89984;   /* fg4 */
    --silicate-rule:      #504945;   /* bg2 */
    --silicate-mark:      #d79921;   /* yellow */
    --silicate-accent:    #fe8019;   /* bright orange — links + focus */
    --silicate-accent-on: #282828;
    --silicate-code-bg:   #3c3836;   /* bg1 */
  }
}

/* ==========================================================================
   reset — the lightest possible
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  background: var(--silicate-bg);
  color: var(--silicate-fg);
  font-family: var(--silicate-font-body);
  font-size: var(--silicate-size-base);
  line-height: var(--silicate-leading);
  text-wrap: pretty;
}

/* ==========================================================================
   layout — one column, wide margins, optional hang
   ========================================================================== */

body > * {
  max-width: var(--silicate-measure);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--silicate-space-4);
  padding-right: var(--silicate-space-4);
}

body > header,
body > footer,
body > nav {
  padding-top: var(--silicate-space-5);
  padding-bottom: var(--silicate-space-5);
}

main { padding-top: var(--silicate-space-4); padding-bottom: var(--silicate-space-7); }

/* full-bleed escape hatch — apply to <figure> or <hr> when needed */
figure[data-bleed],
hr[data-bleed] {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* ==========================================================================
   prose — headings, paragraphs, lists
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--silicate-font-body);
  font-weight: 600;
  line-height: var(--silicate-leading-tight);
  text-wrap: balance;
  margin: var(--silicate-space-6) 0 var(--silicate-space-3);
}

h1 { font-size: 2.25rem; letter-spacing: -0.01em; }
h2 { font-size: 1.625rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.0625rem; }
h5 { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--silicate-fg-muted); }
h6 { font-size: 0.9375rem; color: var(--silicate-fg-muted); }

h1 + p, h2 + p, h3 + p { margin-top: 0; }

p { margin: 0 0 var(--silicate-space-3); }

ul, ol { margin: 0 0 var(--silicate-space-3); padding-left: var(--silicate-space-4); }
li { margin-bottom: var(--silicate-space-1); }
li > ul, li > ol { margin: var(--silicate-space-1) 0 0; }

dl { margin: 0 0 var(--silicate-space-3); }
dt { font-weight: 600; }
dd { margin: 0 0 var(--silicate-space-2) var(--silicate-space-4); color: var(--silicate-fg-muted); }

blockquote {
  margin: var(--silicate-space-4) 0;
  padding-left: var(--silicate-space-3);
  border-left: var(--silicate-rule-width) solid var(--silicate-rule);
  color: var(--silicate-fg-muted);
  font-style: italic;
}
blockquote > :last-child { margin-bottom: 0; }
blockquote cite { display: block; margin-top: var(--silicate-space-2); font-style: normal; font-size: 0.9rem; }
blockquote cite::before { content: "— "; }

/* ==========================================================================
   inline
   ========================================================================== */

a {
  color: var(--silicate-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover { text-decoration-thickness: 2px; }
a:visited { color: var(--silicate-accent); }

strong, b { font-weight: 600; }
em, i { font-style: italic; }
small { font-size: 0.85em; color: var(--silicate-fg-muted); }
mark { background: var(--silicate-mark); color: inherit; padding: 0 0.15em; }
abbr[title] { text-decoration: underline dotted; cursor: help; }
kbd {
  font-family: var(--silicate-font-mono);
  font-size: 0.85em;
  padding: 0.1em 0.35em;
  border: var(--silicate-rule-width) solid var(--silicate-rule);
  border-bottom-width: 2px;
  background: var(--silicate-bg);
}

/* ==========================================================================
   code
   ========================================================================== */

code, pre, samp {
  font-family: var(--silicate-font-mono);
  font-size: 0.9em;
}

code {
  background: var(--silicate-code-bg);
  padding: 0.1em 0.35em;
}

pre {
  background: var(--silicate-code-bg);
  padding: var(--silicate-space-3);
  overflow-x: auto;
  line-height: 1.5;
  margin: 0 0 var(--silicate-space-3);
}
pre code { background: none; padding: 0; font-size: 1em; }

/* ==========================================================================
   media
   ========================================================================== */

img, video, svg { max-width: 100%; height: auto; display: block; }

figure { margin: var(--silicate-space-4) 0; }
figcaption {
  margin-top: var(--silicate-space-2);
  font-size: 0.9rem;
  color: var(--silicate-fg-muted);
  text-align: left;
}

/* ==========================================================================
   tables
   ========================================================================== */

table {
  border-collapse: collapse;
  width: 100%;
  margin: var(--silicate-space-3) 0;
  font-size: 0.95em;
}
caption {
  caption-side: bottom;
  margin-top: var(--silicate-space-2);
  color: var(--silicate-fg-muted);
  font-size: 0.9rem;
  text-align: left;
}
th, td {
  text-align: left;
  padding: var(--silicate-space-2) var(--silicate-space-3) var(--silicate-space-2) 0;
  border-bottom: var(--silicate-rule-width) solid var(--silicate-rule);
  vertical-align: top;
}
th { font-weight: 600; }
thead th { border-bottom-width: 2px; }

/* ==========================================================================
   forms — keep native, fix the obvious
   ========================================================================== */

label { display: block; margin-bottom: var(--silicate-space-1); font-weight: 500; }
label + small { display: block; margin-bottom: var(--silicate-space-2); color: var(--silicate-fg-muted); }

input, textarea, select, button {
  font: inherit;
  color: inherit;
}

input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="url"], input[type="tel"],
input[type="number"], input[type="date"], textarea, select {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: var(--silicate-rule-width) solid var(--silicate-rule);
  padding: var(--silicate-space-2) 0;
  margin-bottom: var(--silicate-space-3);
  border-radius: 0;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus,
input[type="search"]:focus, input[type="url"]:focus, input[type="tel"]:focus,
input[type="number"]:focus, input[type="date"]:focus, textarea:focus, select:focus {
  outline: none;
  border-bottom-color: var(--silicate-accent);
  border-bottom-width: 2px;
}

textarea { min-height: 6em; resize: vertical; }

button, input[type="submit"], input[type="button"], input[type="reset"] {
  background: transparent;
  color: var(--silicate-fg);
  border: var(--silicate-rule-width) solid currentColor;
  padding: var(--silicate-space-2) var(--silicate-space-4);
  cursor: pointer;
  border-radius: 0;
}
button:hover, input[type="submit"]:hover {
  background: var(--silicate-fg);
  color: var(--silicate-bg);
}
button[disabled] { opacity: 0.5; cursor: not-allowed; }

/* primary-ish: a <button type="submit"> — fg-filled by default, accent on hover */
button[type="submit"], input[type="submit"] {
  background: var(--silicate-fg);
  border-color: var(--silicate-fg);
  color: var(--silicate-bg);
}
button[type="submit"]:hover, input[type="submit"]:hover {
  background: var(--silicate-accent);
  border-color: var(--silicate-accent);
  color: var(--silicate-accent-on);
}

fieldset {
  border: none;
  border-top: var(--silicate-rule-width) solid var(--silicate-rule);
  padding: var(--silicate-space-3) 0 0;
  margin: var(--silicate-space-4) 0;
}
legend { font-weight: 600; padding-right: var(--silicate-space-2); }

/* ==========================================================================
   structure: rules, details, hr
   ========================================================================== */

hr {
  border: none;
  border-top: var(--silicate-rule-width) solid var(--silicate-rule);
  margin: var(--silicate-space-5) 0;
}

details {
  border-top: var(--silicate-rule-width) solid var(--silicate-rule);
  padding: var(--silicate-space-3) 0;
}
details + details { border-top: none; }
details:last-of-type { border-bottom: var(--silicate-rule-width) solid var(--silicate-rule); }
summary { cursor: pointer; font-weight: 600; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::before { content: "+ "; color: var(--silicate-fg-muted); }
details[open] > summary::before { content: "− "; }
details > :not(summary) { margin-top: var(--silicate-space-2); }

/* ==========================================================================
   focus — single accent ring
   ========================================================================== */

:focus-visible {
  outline: var(--silicate-focus-ring) solid var(--silicate-accent);
  outline-offset: 2px;
}

/* ==========================================================================
   article header niceties (optional — uses semantics, not classes)
   ========================================================================== */

article > header time { color: var(--silicate-fg-muted); font-size: 0.95rem; }
article > header h1 { margin-top: var(--silicate-space-3); }

/* selection */
::selection { background: var(--silicate-accent); color: var(--silicate-accent-on); }

/* print */
@media print {
  :root { --silicate-bg: #fff; --silicate-fg: #000; --silicate-rule: #888; }
  a { color: inherit; text-decoration: underline; }
}