/* Small Anvil Software LLC — panel-CMS layout, modernised.
 *
 * The structure is deliberately old-school: a fixed-width shell that sits ON a
 * background rather than bleeding to the viewport edges, a masthead, a nav
 * strip, a breadcrumb line, a left panel column beside the content, and every
 * block of anything closed inside a bordered panel with a caption bar.
 *
 * What is NOT old-school, on purpose:
 *   - CSS Grid, not nested layout tables
 *   - 15px type on a real scale, not 11px Verdana
 *   - AA contrast throughout
 *   - flat 1px edges and solid caption bars, not bevel GIFs and gradients
 *   - semantic header/nav/main/aside/footer, and it collapses on a phone
 *
 * Written from scratch. PHP-Fusion is AGPL — none of its CSS is used here,
 * only the layout idea, which is not copyrightable.
 *
 * Class vocabulary is shared with the Cullwise site so the two stay
 * structurally identical and only the skin differs. Change one, consider the
 * other.
 */

:root {
  --desk:      #D9D3C4;   /* the ground the shell sits on */
  --shell:     #FBFAF7;
  --panel:     #FFFFFF;
  --panel-alt: #F4F1EA;   /* alternating rows, meta strips */
  --cap:       #2E2C29;   /* caption bar */
  --cap-ink:   #F7F5F0;
  --nav:       #3D3934;
  --edge:      #C0B8A8;
  --edge-soft: #DFD8C9;
  --ink:       #1A1917;
  --ink-soft:  #55514A;
  --ink-faint: #7E786F;
  --ember:     #A24C1C;
  --ember-lo:  #8A3F16;

  --font: Verdana, Geneva, "DejaVu Sans", Tahoma, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 22px 16px 44px;
  background: var(--desk);
  color: var(--ink);
  font: 400 15px/1.62 var(--font);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ember); }
a:hover { color: var(--ember-lo); }

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 50%;
  top: 6px;
  transform: translateX(-50%);
  z-index: 10;
  background: var(--cap);
  color: var(--cap-ink);
  padding: 8px 14px;
  border-radius: 2px;
}

/* ---------- the shell ---------- */

.shell {
  max-width: 1000px;
  margin: 0 auto;
  background: var(--shell);
  border: 1px solid var(--edge);
  box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 6px 18px rgba(0,0,0,.07);
}

/* ---------- masthead ---------- */

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding: 18px 20px;
  background: var(--panel);
  border-bottom: 1px solid var(--edge);
}

.lockup { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }

.anvil { width: 40px; height: 26.1px; fill: var(--cap); flex: none; }

.wordmark {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1;
}

.wordmark small {
  display: block;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  margin-top: 4px;
}

.masthead .tagline {
  font-size: 12px;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
  margin: 0;
  text-align: right;
}

/* ---------- nav strip ---------- */

.navbar {
  display: flex;
  flex-wrap: wrap;
  background: var(--nav);
  border-bottom: 1px solid var(--edge);
}

.navbar a {
  padding: 9px 18px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #D8D2C6;
  text-decoration: none;
  border-right: 1px solid rgba(255,255,255,.10);
}

.navbar a:hover { background: rgba(255,255,255,.09); color: #fff; }

.navbar a.current {
  background: var(--ember);
  color: #fff;
}

/* ---------- breadcrumbs ---------- */

.crumbs {
  padding: 6px 20px;
  background: var(--panel-alt);
  border-bottom: 1px solid var(--edge-soft);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
}

.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* ---------- layout ---------- */

.layout {
  display: grid;
  /* Sidebar renders left but comes AFTER main in the DOM — screen readers and
   * phones get the content first, which the 2004 original did not manage. */
  grid-template-columns: 218px minmax(0, 1fr);
  grid-template-areas: "side main";
  gap: 18px;
  padding: 18px 20px 22px;
  align-items: start;
}

.main { grid-area: main; min-width: 0; }
.side { grid-area: side; }

/* ---------- the panel ---------- */

.panel {
  background: var(--panel);
  border: 1px solid var(--edge);
  margin-bottom: 18px;
}

.panel:last-child { margin-bottom: 0; }

.panel > .cap {
  /* The caption is an <h2> for document outline, so it inherits heading
   * margins — which show as a pale gap between the panel edge and the bar.
   * Reset it here, not by making the caption a <div>. */
  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 12px;
  background: var(--cap);
  color: var(--cap-ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.panel > .cap .cap-note {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: #B5AEA1;
  text-transform: none;
}

.panel > .body { padding: 15px 16px; }
.panel > .body > :first-child { margin-top: 0; }
.panel > .body > :last-child { margin-bottom: 0; }

.panel.tight > .body { padding: 0; }

/* A panel whose caption is the accent — used once per page at most, for the
 * thing the page is actually about. */
.panel.feature > .cap { background: var(--ember); }

/* ---------- content typography inside panels ---------- */

.main h1 {
  font-size: 25px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}

/* Scoped to .body so it can never reach a caption bar. */
.main .body h2 {
  font-size: 17px;
  line-height: 1.3;
  margin: 22px 0 8px;
}

.main p { margin: 0 0 12px; max-width: 68ch; }

.main ul, .main ol { margin: 0 0 12px; padding-left: 22px; max-width: 68ch; }
.main li { margin-bottom: 5px; }

.lede { font-size: 16px; color: var(--ink); }

/* The measure limit above is for prose only. Structural elements span the full
 * panel — a row list or a meta strip that stops short of the border looks
 * broken, not typeset.
 *
 * Two classes deep on purpose: the prose rules are `.main p` / `.main ul`,
 * which are (0,1,1). A bare `.rows` is (0,1,0) and silently loses no matter
 * where it sits in the file. */
.panel .rows,
.panel .itemfoot,
.panel .spec {
  max-width: none;
  margin: 0;
  padding-left: 0;
}

/* ---------- row lists (the alternating-shade list) ---------- */

.rows { list-style: none; margin: 0; padding: 0; }

.rows > li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 10px 16px;
  border-bottom: 1px solid var(--edge-soft);
}

.rows > li:nth-child(even) { background: var(--panel-alt); }
.rows > li:last-child { border-bottom: none; }

.rows .row-main { min-width: 0; flex: 1 1 260px; }
.rows .row-main strong { display: block; font-size: 15px; margin-bottom: 2px; }
.rows .row-main span { color: var(--ink-soft); font-size: 13px; }
.rows .row-side { flex: none; font-size: 12px; color: var(--ink-faint); }

/* ---------- key/value table ---------- */

.spec { width: 100%; border-collapse: collapse; font-size: 13px; }

.spec th, .spec td {
  text-align: left;
  padding: 8px 16px;
  border-bottom: 1px solid var(--edge-soft);
  vertical-align: top;
}

.spec tr:last-child th, .spec tr:last-child td { border-bottom: none; }
.spec tr:nth-child(even) { background: var(--panel-alt); }

.spec th {
  width: 34%;
  font-weight: 400;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* ---------- sidebar panels ---------- */

.side .panel { margin-bottom: 16px; }

.plist { list-style: none; margin: 0; padding: 0; }

.plist li { border-bottom: 1px solid var(--edge-soft); }
.plist li:last-child { border-bottom: none; }

.plist a {
  display: block;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--ink-soft);
  text-decoration: none;
}

.plist a::before { content: "\00BB"; color: var(--ember); margin-right: 7px; }
.plist a:hover { background: var(--panel-alt); color: var(--ink); }
.plist a.current { background: var(--panel-alt); color: var(--ink); font-weight: 700; }

.side .body { font-size: 13px; }
.side .spec { font-size: 12px; }
.side .spec th, .side .spec td { padding: 6px 12px; }
.side .spec th { width: 46%; }

/* ---------- item footer strip ---------- */

.itemfoot {
  padding: 7px 16px;
  background: var(--panel-alt);
  border-top: 1px solid var(--edge-soft);
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: 0.03em;
}

.itemfoot a { color: var(--ink-soft); }

/* ---------- buttons + tags ---------- */

.btn {
  display: inline-block;
  padding: 8px 16px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  color: var(--ink);
  background: linear-gradient(var(--panel), var(--panel-alt));
  border: 1px solid var(--edge);
}

.btn:hover { background: var(--panel-alt); color: var(--ink); }

.btn.primary {
  background: var(--ember);
  border-color: var(--ember-lo);
  color: #fff;
}

.btn.primary:hover { background: var(--ember-lo); color: #fff; }

.tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 6px;
  border: 1px solid currentColor;
  color: var(--ember);
  white-space: nowrap;
}

.tag.quiet { color: var(--ink-faint); }

/* ---------- footer ---------- */

.foot {
  padding: 12px 20px;
  background: var(--panel-alt);
  border-top: 1px solid var(--edge);
  font-size: 11px;
  color: var(--ink-faint);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.foot p { margin: 0; }
.foot a { color: var(--ink-soft); }

/* ---------- responsive ---------- */

@media (max-width: 760px) {
  body { padding: 0 0 28px; }
  .shell { border-left: none; border-right: none; }
  .layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "main" "side";
    padding: 14px;
    gap: 14px;
  }
  .masthead { padding: 14px; }
  .masthead .tagline { text-align: left; }
  .navbar a { flex: 1 1 auto; text-align: center; padding: 10px 12px; }
}