/* DISCURSA — PAPER EDITION: long-form documents (field guides and legal pages).
   A single sheet, set like a journal article: a title block, a numbered margin,
   a readable measure, and quiet furniture for tables, notes and Q&As. */

.doc-page { padding-top: clamp(56px, 7vw, 100px); --tilt: 0deg; }
.crumbs { color: var(--muted); margin-bottom: 36px; display: flex; gap: 10px; flex-wrap: wrap; }
.crumbs a { color: var(--teal); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.art-head { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 0 48px; padding-bottom: 40px; margin-bottom: 56px; position: relative; }
.art-head::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; border-top: 2px solid var(--ink); transform-origin: left; animation: drawx 1.3s var(--ease) 0.2s both; }
.art-head::before { content: ''; position: absolute; left: 0; right: 0; bottom: -5px; border-top: 1px solid var(--ink); transform-origin: left; animation: drawx 1.3s var(--ease) 0.35s both; }
.art-head .kicker { grid-column: 2; margin-bottom: 22px; }
.art-head h1 { grid-column: 2; font: 700 clamp(44px, 6vw, 86px)/1 var(--display); letter-spacing: -0.02em; margin: 0 0 24px; max-width: 14em; }
.art-head h1 em { font-weight: 500; color: var(--teal); }
.art-head .standfirst { grid-column: 2; font: italic 400 clamp(21px, 1.9vw, 26px)/1.45 var(--text); color: var(--ink-2); max-width: 32em; margin: 0 0 22px; }
.art-head .post-meta, .art-head .legal-meta { grid-column: 2; font: 500 14px var(--sans); letter-spacing: 0.04em; color: var(--muted); margin: 0; }
.art-head .side { grid-column: 1; grid-row: 1 / span 4; align-self: start; padding-top: 6px; color: var(--muted); }
.art-head .side .sect { font: italic 500 46px/1 var(--display); color: var(--ink); display: block; margin-bottom: 8px; }
.art-head > * { animation: fadeup 1s var(--ease) both; }
.art-head > :nth-child(2) { animation-delay: 0.08s; } .art-head > :nth-child(3) { animation-delay: 0.16s; } .art-head > :nth-child(4) { animation-delay: 0.24s; } .art-head > :nth-child(5) { animation-delay: 0.32s; }
@keyframes fadeup { from { opacity: 0; transform: translateY(16px); } }

/* the body: a measured column with the section numbers in the margin */
.art-body { counter-reset: sec; display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 0 48px; }
.art-body > * { grid-column: 2; }
.art-body section, .art-body .legal-chunk { max-width: 38em; margin-bottom: 2.4em; position: relative; }
.art-body .legal-chunk { max-width: 42em; margin-bottom: 1.4em; }
.art-body section .col + .col { margin-top: 0.4em; }
.art-body h2 { font: 700 clamp(28px, 2.6vw, 36px)/1.12 var(--display); margin: 1.4em 0 0.6em; letter-spacing: -0.01em; position: relative; counter-increment: sec; }
.art-body section:first-child h2:first-child, .art-body h2:first-child { margin-top: 0; }
.art-body.numbered h2::before { content: '§ ' counter(sec); position: absolute; right: calc(100% + 48px); top: 0.12em; width: 200px; text-align: right; font: italic 500 24px var(--display); color: var(--teal); }
.art-body h2 .sn { position: absolute; right: calc(100% + 48px); top: 0.12em; width: 200px; text-align: right; font: italic 500 24px var(--display); color: var(--teal); }
.art-body h3 { font: 600 23px/1.25 var(--display); margin: 1.5em 0 0.5em; }
.art-body h3 a { color: var(--ink); }
.art-body p, .art-body li { font-size: 20px; line-height: 1.66; color: var(--ink-2); }
.art-body a { color: var(--teal); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.art-body strong, .art-body b { color: var(--ink); font-weight: 600; }
.art-body ul { padding-left: 1.1em; }
.art-body li { margin-bottom: 0.4em; }
.art-body li::marker { color: var(--teal); }
.art-body .lede { font-size: 23px; line-height: 1.55; color: var(--ink); }
.art-body .lede::first-letter { float: left; font: 700 4.6em/0.8 var(--display); padding: 0.07em 0.1em 0 0; color: var(--teal); }
.art-body section .note, .art-body .notice-box { background: #eef1e8 var(--grain); padding: 18px 22px; margin: 1.4em 0; font-size: 17px; }
.art-body .notice-box p { font-size: 17px; margin: 0 0 0.6em; } .art-body .notice-box p:last-child { margin: 0; }
/* categories and vendors: index cards laid in the column */
.art-body .cat { position: relative; background: #fdfbf6 var(--grain); padding: 22px 26px 8px; margin: 0 0 20px; }
.art-body .torn-w:nth-of-type(odd) { rotate: -0.45deg; } .art-body .torn-w:nth-of-type(even) { rotate: 0.4deg; }
.js .art-body .torn-w { transition: rotate 0.5s var(--ease), translate 0.5s var(--ease); }
.art-body .torn-w:hover { rotate: 0deg; translate: 0 -4px; }
.art-body .cat-q { font: 600 12px var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal); margin-bottom: 8px; }
.art-body .cat p { font-size: 18px; }
.art-body .vendor { position: relative; background: #fdfbf6 var(--grain); padding: 26px 28px 12px; margin: 0 0 26px;
  background-image: var(--grain), repeating-linear-gradient(180deg, transparent 0 32px, rgba(14,107,100,0.08) 32px 33px); background-position: 0 0, 0 70px; }
.art-body .vendor-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 2px solid var(--teal); padding-bottom: 8px; margin-bottom: 12px; }
.art-body .vendor-head h3 { margin: 0; }
.art-body .vendor-cat { font: 600 11px var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal); white-space: nowrap; }
.art-body .vendor p { font-size: 18px; }
.art-body .best { border-top: 1px solid var(--rule); padding-top: 10px; }
.art-body .faq-q { font: 600 21px/1.3 var(--display); color: var(--ink); margin: 1.3em 0 0.3em; }
.art-body .faq-a { margin-top: 0; }
/* tables: booktabs on a ledger slip */
.art-body .scroller, .art-body table.legal-table { margin: 1.4em 0; }
.art-body .scroller { overflow-x: auto; background: var(--ledger) var(--grain); padding: 10px 20px 16px; }
.art-body table { width: 100%; border-collapse: collapse; font-size: 16px; min-width: 560px; }
.art-body th { font: 600 11px var(--sans); letter-spacing: 0.14em; text-transform: uppercase; text-align: left; padding: 14px 10px 10px; border-bottom: 2px solid var(--ink); color: var(--ink); }
.art-body td { padding: 10px; border-bottom: 1px solid var(--rule); vertical-align: top; color: var(--ink-2); font-size: 16px; line-height: 1.5; }
.art-body tr:last-child td { border-bottom: 2px solid var(--ink); }
.art-body tbody tr { transition: background 0.25s; }
.art-body tbody tr:hover { background: var(--teal-soft); }
.legal-table-wrap { overflow-x: auto; }
/* end of article */
.art-end { grid-column: 2; max-width: 38em; margin-top: 2em; padding-top: 22px; border-top: 1px solid var(--rule-2); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; align-items: baseline; }
.art-end .fin { font: italic 500 22px var(--display); color: var(--teal); }
.js .art-body > section, .js .art-body > .legal-chunk { opacity: 0; transform: translateY(18px); transition: opacity 0.8s ease, transform 0.8s var(--ease); }
.js .art-body > section.in, .js .art-body > .legal-chunk.in { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .art-head, .art-body { grid-template-columns: 1fr; }
  .art-head > *, .art-body > *, .art-end { grid-column: 1; }
  .art-head .side { grid-row: auto; margin-bottom: 14px; }
  .art-head .side .sect { display: inline; font-size: 28px; margin-right: 10px; }
  .art-body.numbered h2::before, .art-body h2 .sn { position: static; display: block; width: auto; text-align: left; font-size: 18px; margin-bottom: 4px; }
  .art-body p, .art-body li { font-size: 19px; }
}
@media print { .js .art-body > * { opacity: 1 !important; transform: none !important; } }