/* Arboresq — "stratigraphic profile / field notebook" theme.
   Warm field paper + deep soil brown + clay/olive/teal earth tones,
   layered strata bars, grid-hatch marks, excavation-log cards,
   sharp corners, mono labels, no emoji, no hover float. */

:root {
  --bg: #f3ecdd;          /* field paper */
  --bg-raised: #faf5ea;   /* log sheet */
  --soil: #3a2c1f;        /* deep soil brown */
  --soil-deep: #291f15;
  --clay: #b5651d;        /* fired clay */
  --olive: #6b7a4f;       /* vegetation */
  --teal: #2f6f6f;        /* scientific/lab */
  --sand: #c9a86a;        /* sand strata */
  --text: #2a2218;        /* ink */
  --muted: #6b5f4c;
  --faint: #a2907a;
  --line: #d9c8a4;
  --line-strong: #b9a878;
  --cream-on-soil: #e8dcc4;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    repeating-linear-gradient(0deg, rgba(185,101,29,0.03) 0 1px, transparent 1px 28px),
    var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 960px; margin: 0 auto; padding: 0 22px; }
a { color: var(--clay); text-decoration: none; }
a:hover { color: var(--teal); }

/* ---------- header ---------- */
.site-head { background: var(--soil); border-bottom: 3px solid var(--clay); }
.strata-bar {
  height: 10px;
  background: linear-gradient(90deg,
    var(--soil) 0 8%, var(--sand) 8% 22%, var(--olive) 22% 36%,
    var(--clay) 36% 55%, var(--teal) 55% 72%, var(--sand) 72% 100%);
  opacity: 0.9;
}
.head-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 14px; padding-bottom: 14px; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); letter-spacing: 0.16em; font-weight: 700; font-size: 18px; color: var(--cream-on-soil); }
.brand:hover { color: var(--sand); }
.brand-mark { color: var(--sand); font-size: 17px; line-height: 1; }
.nav { display: flex; flex-wrap: wrap; gap: 16px; font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em; }
.nav a { color: var(--cream-on-soil); opacity: 0.85; text-transform: uppercase; }
.nav a:hover { color: var(--sand); opacity: 1; }

/* ---------- hero / index ---------- */
.hero { padding: 46px 0 18px; }
.eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--clay); margin: 0 0 12px; }
.hero h1 { font-size: 38px; line-height: 1.15; margin: 0 0 14px; letter-spacing: -0.01em; }
.hero-sub { color: var(--muted); max-width: 46em; font-size: 18px; }

.cat-block { padding: 30px 0 8px; border-top: 1px solid var(--line); }
.cat-block:first-of-type { border-top: none; }
.cat-title { display: flex; align-items: baseline; gap: 12px; font-size: 23px; margin: 0 0 6px; }
.cat-no { font-family: var(--mono); color: var(--teal); font-size: 15px; }
.cat-blurb { color: var(--muted); margin: 0 0 16px; max-width: 46em; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; padding-bottom: 16px; }
.card {
  position: relative;
  display: flex; flex-direction: column; gap: 4px;
  border: 1px solid var(--line-strong); background: var(--bg-raised);
  padding: 14px 15px 14px 24px; color: var(--text);
}
/* stratigraphic strata band on the left edge */
.card::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 6px;
  background: linear-gradient(180deg, var(--clay) 0 25%, var(--olive) 25% 50%, var(--teal) 50% 75%, var(--sand) 75% 100%);
}
.card::after {
  content: ""; position: absolute; top: 12px; right: 12px;
  width: 13px; height: 13px;
  background: repeating-linear-gradient(45deg, var(--faint) 0 2px, transparent 2px 4px);
  opacity: 0.55;
}
.card:hover { border-color: var(--teal); }
.card-no { font-family: var(--mono); font-size: 12px; color: var(--faint); letter-spacing: 0.08em; }
.card-name { font-weight: 600; font-size: 16px; line-height: 1.35; }
.card-meta { font-family: var(--mono); font-size: 12px; color: var(--teal); text-transform: uppercase; letter-spacing: 0.05em; }

/* ---------- article ---------- */
.article { padding: 38px 0 56px; }
.article h1 { font-size: 33px; line-height: 1.18; margin: 0 0 20px; letter-spacing: -0.01em; }

.dossier { border: 1px solid var(--line-strong); background: var(--bg-raised); padding: 4px 0; margin: 0 0 32px; border-top: 4px solid var(--olive); }
.dossier-item { display: flex; gap: 16px; padding: 10px 16px; border-bottom: 1px solid var(--line); font-size: 15px; }
.dossier-item:last-child { border-bottom: none; }
.d-label { flex: 0 0 100px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); padding-top: 3px; }
.dossier-tags { display: flex; flex-wrap: wrap; gap: 8px; }

.stamp {
  display: inline-block; font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal);
  border: 2px dotted var(--teal); border-radius: 50%; padding: 8px 10px;
  line-height: 1; white-space: nowrap;
}

.tag { display: inline-block; font-family: var(--mono); font-size: 12px; border: 1px solid var(--line-strong); color: var(--clay); padding: 3px 9px; letter-spacing: 0.03em; }
.tag:hover { border-color: var(--clay); color: var(--teal); }
.tag-tool { color: var(--olive); border-color: var(--line-strong); }
.tag-dim { color: var(--faint); border-color: var(--line); }

.sections .sec { margin: 0 0 28px; }
.sec h2 { display: flex; align-items: baseline; gap: 12px; font-size: 21px; margin: 0 0 10px; }
.sec-no { font-family: var(--mono); font-size: 13px; color: var(--teal); }
.sec p { margin: 0 0 14px; }
.sec p:last-child { margin-bottom: 0; }

.related-nav { border-top: 1px solid var(--line); padding-top: 20px; }
.related-nav h2 { font-size: 19px; margin: 0 0 12px; }

/* ---------- category / legal / notfound ---------- */
.cat-blurb.big { font-size: 18px; }
.back { margin: 24px 0 0; font-family: var(--mono); font-size: 14px; }
.legal { padding: 38px 0 56px; max-width: 760px; }
.legal h1 { font-size: 31px; margin: 0 0 8px; }
.legal h2 { font-size: 21px; margin: 26px 0 8px; }
.legal p, .legal li { color: #4a4235; }
.legal ul { padding-left: 22px; }
.notfound { padding: 66px 0 86px; }
.notfound h1 { font-size: 33px; }

/* ---------- footer ---------- */
.site-foot { border-top: 4px solid var(--clay); background: var(--soil); padding: 26px 0 34px; color: var(--cream-on-soil); font-size: 14px; }
.site-foot p { margin: 0 0 10px; max-width: 50em; }
.site-foot a { color: var(--sand); }
.foot-links { font-family: var(--mono); display: flex; flex-wrap: wrap; gap: 12px; }
.foot-links span { color: var(--cream-on-soil); opacity: 0.5; }
.foot-fine { color: var(--cream-on-soil); opacity: 0.55; font-family: var(--mono); font-size: 12px; }

@media (max-width: 640px) {
  .hero h1 { font-size: 29px; }
  .article h1 { font-size: 26px; }
  .head-row { flex-direction: column; align-items: flex-start; }
  .dossier-item { flex-direction: column; gap: 4px; }
  .d-label { flex: none; }
}