:root {
  --paper: #f4efe4;
  --ink: #1a241c;
  --green: #1f4a38;
  --copper: #a86b32;
  --rule: #c9c0ae;
  --mute: #5e675f;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: Karla, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  background-image: repeating-linear-gradient(transparent, transparent 27px, rgba(31,74,56,.06) 27px, rgba(31,74,56,.06) 28px);
}

.ledger-top { position: sticky; top: 0; z-index: 20; background: var(--paper); border-bottom: 2px solid var(--green); }
.folio { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--copper); padding: 8px 6vw 0; }
.ledger-row { display: flex; align-items: center; gap: 20px; padding: 8px 6vw 12px; }
.mark { font-family: "Libre Caslon Text", serif; font-weight: 700; font-size: 28px; color: var(--green); text-decoration: none; letter-spacing: .04em; }
nav { display: flex; gap: 16px; margin-left: auto; font-size: 14px; }
nav a { color: var(--ink); text-decoration: none; }
nav a:hover { color: var(--copper); }
.lang { display: flex; border: 1px solid var(--green); }
.lang button { background: none; border: 0; padding: 6px 10px; font: inherit; cursor: pointer; color: var(--mute); }
.lang button.is-on { background: var(--green); color: var(--paper); }
.menu-btn { display: none; background: var(--green); color: var(--paper); border: 0; padding: 6px 12px; font-family: "Libre Caslon Text", serif; font-size: 20px; }

.cover { padding: 64px 6vw 48px; max-width: 1100px; }
.kicker { letter-spacing: .14em; text-transform: uppercase; font-size: 12px; color: var(--copper); margin-bottom: 14px; }
.cover h1 { font-family: "Libre Caslon Text", serif; font-size: clamp(40px, 6vw, 68px); line-height: 1.08; font-weight: 400; }
.lede { max-width: 66ch; margin: 22px 0 28px; color: var(--mute); }
.btn { display: inline-block; background: var(--green); color: var(--paper); text-decoration: none; padding: 14px 22px; }

.cols { display: grid; grid-template-columns: 1fr 1fr; border-top: 2px solid var(--green); border-bottom: 2px solid var(--green); }
.cols article { padding: 28px 6vw; }
.cols article:first-child { border-right: 1px solid var(--rule); }
.cols h2 { font-family: "Libre Caslon Text", serif; color: var(--copper); font-size: 28px; margin-bottom: 12px; }
.cols li { margin: 8px 0 8px 18px; }

.sheet, .ruled { padding: 64px 6vw; }
.ruled { background: #ebe4d4; }
.h { display: flex; gap: 16px; align-items: baseline; margin-bottom: 24px; border-bottom: 1px solid var(--rule); padding-bottom: 10px; }
.h span { color: var(--copper); font-size: 13px; letter-spacing: .12em; }
.h h2 { font-family: "Libre Caslon Text", serif; font-size: clamp(28px, 3vw, 40px); font-weight: 400; }
.prose p, .intro { margin-bottom: 16px; max-width: 78ch; color: var(--mute); }

.grid2, .editions { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid2 article, .editions article { border-top: 1px solid var(--green); padding-top: 16px; }
.grid2 h3, .editions h3 { font-family: "Libre Caslon Text", serif; font-size: 24px; margin-bottom: 8px; }
.editions small { letter-spacing: .14em; color: var(--copper); font-size: 11px; }

.steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: s; }
.steps li { counter-increment: s; }
.steps li::before { content: counter(s, upper-roman); color: var(--copper); font-family: "Libre Caslon Text", serif; display: block; margin-bottom: 6px; }
.steps h3 { font-family: "Libre Caslon Text", serif; font-size: 22px; margin-bottom: 8px; }

.faq details { border-bottom: 1px solid var(--rule); padding: 12px 0; }
.faq summary { cursor: pointer; font-family: "Libre Caslon Text", serif; font-size: 22px; }
.faq p { margin-top: 8px; color: var(--mute); max-width: 80ch; }

.office { background: var(--green); color: var(--paper); padding: 64px 6vw; }
.h.inv { border-color: #3d6b58; }
.h.inv span { color: #e0b57a; }
.of-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.vcard p { margin-bottom: 14px; }
.vcard span { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #e0b57a; }
.vcard a, .vcard strong { color: var(--paper); font-size: 20px; text-decoration: none; }
.note { font-size: 15px !important; color: #c9d7cf !important; max-width: 52ch; }

form { display: grid; gap: 12px; }
form label { display: grid; gap: 6px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #e0b57a; }
form input, form select, form textarea {
  background: transparent; border: 0; border-bottom: 1px solid #e0b57a; color: var(--paper); padding: 10px 0; font: inherit;
}
form button { background: var(--paper); color: var(--green); border: 0; padding: 14px; font-family: "Libre Caslon Text", serif; font-size: 20px; cursor: pointer; }
.form-ok { color: #e0b57a; }

footer { padding: 24px 6vw; font-size: 13px; color: var(--mute); display: grid; gap: 6px; border-top: 2px solid var(--green); }

@media (max-width: 900px) {
  .cols, .grid2, .editions, .steps, .of-grid { grid-template-columns: 1fr; }
  .cols article:first-child { border-right: 0; border-bottom: 1px solid var(--rule); }
  nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--paper); flex-direction: column; padding: 16px 6vw; border-bottom: 2px solid var(--green); }
  nav.open { display: flex; }
  .menu-btn { display: block; }
  .ledger-row { position: relative; }
}