/* Sive Farm: the design system (~/claude/sivefarm-design-system) applied to the site.
   Sky, field, paper: a photograph above, a band in the season's field color with the title,
   the page beneath. Cut paper: no outlines, rounding or shadows. The season is set on <html>
   by the script in the template; night follows the reader's system setting. */

@font-face { font-family: "Jost"; src: url(/static/fonts/Jost-wght.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Literata"; src: url(/static/fonts/Literata-var.woff2) format("woff2"); font-weight: 200 900; font-display: swap; }
@font-face { font-family: "Literata"; src: url(/static/fonts/Literata-Italic-var.woff2) format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; }

:root {
  --paper: #FBF6EE; --clapboard: #E6D6B0; --board: #B6B5B2; --stone: #655A4E; --ink: #1F221B;
  --roof: #2E8A80; --roof-deep: #1F6B63; --kilim: #6E2A2E; --lamp: #ECB04A;
  --night: #1C1F18; --night-panel: #272B22;
  --page: var(--season-page, var(--paper)); --panel: var(--season-panel, #F3ECDF);
  --text: var(--ink); --muted: var(--stone); --rule: #D9D3C6; --link: var(--roof-deep);
  --band: var(--field); --on-band: var(--paper); --accent: var(--deep); --alert: var(--kilim); --photo: 1;
  --sans: "Jost", Futura, "Century Gothic", sans-serif; --serif: "Literata", Charter, Georgia, serif;
  /* the page: one width for the bar, the field, the page and the footer; running text keeps a reading measure
     inside it (about 85 characters), while tables, the books and wide figures may use the whole width */
  --wide: 78rem; --measure: 60rem; --gutter: clamp(1rem, 3vw, 2.5rem);
}
[data-season="winter"] { --field: #D6DCE4; --deep: #3F5481; --bloom: #3F5481; --bloom-night: #8FA6D0; --season-page: #F2F4F8; --season-panel: #E4E8EF; --season-night: #171B20; --season-night-panel: #22272E; --on-band: var(--ink); }
[data-season="spring"] { --field: #6B8A33; --deep: #5A5886; --bloom: #8B88B8; --bloom-night: #B3B0DC; --season-page: #F4F6E6; --season-panel: #E8EBD2; --season-night: #1A2019; --season-night-panel: #252D24; }
[data-season="summer"] { --field: #8D9349; --deep: #8E5E63; --bloom: #C2969A; --bloom-night: #E0B3B7; --season-page: #FBF8EE; --season-panel: #F1ECD9; --season-night: #1C1F18; --season-night-panel: #272B22; }
[data-season="fall"]   { --field: #8E7D42; --deep: #9A4512; --bloom: #C25A1F; --bloom-night: #E8884F; --season-page: #F9F1DE; --season-panel: #EFE3C8; --season-night: #1F1D16; --season-night-panel: #2B2820; }
@media (prefers-color-scheme: dark) {
  :root {
    --page: var(--season-night, var(--night)); --panel: var(--season-night-panel, var(--night-panel));
    --text: #ECE9DF; --muted: #A9A69A; --rule: #3B3F35; --link: #7CCBC0;
    --band: color-mix(in srgb, var(--field) 42%, var(--season-night, var(--night))); --on-band: #ECE9DF;
    --accent: var(--bloom-night); --alert: var(--lamp); --photo: .74;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--page); color: var(--text); font: 17px/1.65 var(--serif); -webkit-font-smoothing: antialiased; }
a { color: var(--link); text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--sans); font-weight: 400; text-wrap: balance; }
h2 { font-size: 1.6rem; line-height: 1.2; margin: 2.6rem 0 .7rem; }
h3 { font-size: 1.15rem; font-weight: 500; margin: 1.9rem 0 .5rem; }
.mark, .logo { display: block; fill: currentColor; }

/* the bar: seed mark, nameplate, the members' pages, sign out */
.top { border-bottom: 1px solid var(--rule); background: var(--page); }
.top .bar { max-width: var(--wide); margin: 0 auto; padding: .8rem var(--gutter); display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.6rem; }
.nameplate { display: flex; align-items: center; gap: .7rem; color: var(--text); text-decoration: none; margin-right: auto;
  font: 500 .95rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.nameplate .mark { width: 1.9rem; height: auto; }
nav { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.2rem; }
nav a { font: 500 .74rem/1.6 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--text); text-decoration: none; }
nav a:hover { color: var(--link); }
nav a.here { color: var(--link); text-decoration: underline; text-underline-offset: .45em; }
nav a.out { color: var(--muted); }
/* a heading with several pages: hover or tab into it to list them */
nav .grp { position: relative; }
nav .grp .sub { display: none; position: absolute; z-index: 10; top: 100%; left: -.9rem; min-width: 13rem; padding: .5rem .9rem .6rem;
  background: var(--page); border: 1px solid var(--rule); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
nav .grp:hover .sub, nav .grp:focus-within .sub { display: flex; flex-direction: column; gap: .15rem; }
nav .grp .sub a { white-space: nowrap; }
/* under the bar, the pages of the heading you are in (the only way to them on a phone) */
.subnav { max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter) .7rem; display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; }
.subnav a { font: 400 .78rem/1.6 var(--sans); letter-spacing: .06em; text-transform: none; color: var(--muted); text-decoration: none; }
.subnav a:hover { color: var(--link); }
.subnav a.here { color: var(--link); text-decoration: underline; text-underline-offset: .4em; }
@media (hover: none) { nav .grp .sub { display: none !important; } }

/* sky and field */
.sky { height: clamp(14rem, 38vh, 26rem); overflow: hidden; }
.sky img { display: none; width: 100%; height: 100%; object-fit: cover; filter: brightness(var(--photo)); }
[data-season="winter"] .sky .s-winter, [data-season="spring"] .sky .s-spring,
[data-season="summer"] .sky .s-summer, [data-season="fall"] .sky .s-fall { display: block; }
.sky img.art { object-position: 50% 35%; }
/* the collage: a mosaic of nine slots, a to i, in columns of different widths whose tiles break at
   different heights. The band's height follows the width so each slot keeps its shape. Each photo names
   its slot and focus point in the page's front matter. Narrower screens keep fewer slots (tablet a-f,
   phone a, b, c, e) rather than shrinking them all to slivers. */
.sky.collage { height: clamp(16rem, min(26.5vw, 42vh), 27rem); display: grid; gap: 3px; background: var(--band);
  grid-template-columns: 20fr 23fr 22fr 18fr 17fr; grid-template-rows: 4fr 1fr 1fr 4fr;
  grid-template-areas: "a b d f h" "a b e f i" "a b e g i" "a c e g i"; }
.sky.collage img { display: block; min-width: 0; min-height: 0; object-position: 50% 40%; }
.sky.collage .a { grid-area: a; } .sky.collage .b { grid-area: b; } .sky.collage .c { grid-area: c; }
.sky.collage .d { grid-area: d; } .sky.collage .e { grid-area: e; } .sky.collage .f { grid-area: f; }
.sky.collage .g { grid-area: g; } .sky.collage .h { grid-area: h; } .sky.collage .i { grid-area: i; }
@media (max-width: 60rem) {
  .sky.collage { height: clamp(16rem, min(50vw, 50vh), 30rem); grid-template-columns: 34fr 36fr 30fr; grid-template-rows: 9fr 1fr 2fr 8fr;
    grid-template-areas: "a b d" "a e d" "a e f" "c e f"; }
  .sky.collage :is(.g, .h, .i) { display: none; }
}
@media (max-width: 32rem) {
  .sky.collage { height: clamp(16rem, min(90vw, 45vh), 24rem); grid-template-columns: 55fr 45fr; grid-template-rows: 9fr 2fr 9fr;
    grid-template-areas: "c e" "a e" "a b"; }
  .sky.collage :is(.d, .f) { display: none; }
}
.field { background: var(--band); color: var(--on-band); }
.field .in { max-width: var(--wide); margin: 0 auto; padding: 1.5rem var(--gutter) 1.4rem; display: flex; flex-wrap: wrap; align-items: flex-end; gap: .4rem 2rem; }
.field h1 { margin: 0; font-size: clamp(2rem, 4.6vw, 3.2rem); line-height: 1.05; color: var(--on-band); }
.field .tag { font: 400 1rem/1.45 var(--serif); opacity: .92; max-width: 34em; margin: 0; }

/* paper */
main { max-width: var(--wide); overflow-wrap: break-word; margin: 0 auto; padding: 2.4rem var(--gutter) 4rem; }
/* running text at the reading measure, set flush with the title; tables, card grids, the books and figure.wide take the full width */
main :where(p, ul, ol, dl, blockquote, h2, h3, h4, pre, figure, .note, .warn, .glance, .sample, .review, .bq, .ledger, .crumbs, .cm-panel, .steps) { max-width: var(--measure); }
main :where(figure.wide, .cards, .artifacts, .two, .figs) { max-width: none; }
main > :first-child { margin-top: 0; }
main ul, main ol { padding-left: 1.3rem; }
li { margin: .3rem 0; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem 0; }
blockquote { margin: 1.5rem 0; padding: 0 0 0 1.1rem; border-left: 3px solid var(--rule); color: var(--muted); }
table { border-collapse: collapse; width: 100%; display: block; overflow-x: auto; margin: 1.4rem 0; font-size: .94rem; }
th, td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font: 500 .74rem/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
code { font-size: .88em; background: var(--panel); padding: .1em .35em; }
pre { background: var(--panel); padding: 1rem; overflow-x: auto; }
pre code { background: none; padding: 0; }
main figure { margin: 2rem 0; }
main figure img { width: 100%; display: block; }
main figure.pair .imgs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; align-items: start; }
main figure.pair .imgs img { aspect-ratio: 3 / 4; height: auto; object-fit: cover; }
main figcaption { font: 400 .86rem/1.5 var(--sans); color: var(--muted); margin-top: .55rem; }
.lead { font-size: 1.2rem; line-height: 1.6; }

/* cut-paper panels */
.note, .warn, .total { background: var(--panel); border-left: 4px solid var(--accent); padding: .95rem 1.15rem; margin: 1.6rem 0; font-size: .96rem; }
.warn { border-left-color: var(--alert); }
.warn strong { color: var(--alert); }
.sample { border: 1px dashed var(--alert); padding: .75rem 1rem; margin: 1.4rem 0; font: 400 .86rem/1.55 var(--sans); color: var(--alert); }
.embed { width: 100%; height: 46rem; border: 0; background: var(--panel); }

.cards { display: grid; gap: 0 1.4rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); margin: 1.6rem 0; }
.cards a { display: block; padding: 1rem .2rem 1.1rem; border-top: 1px solid var(--rule); text-decoration: none; }
.cards a:hover strong { color: var(--link); }
.cards a strong { display: block; font: 500 1rem/1.3 var(--sans); color: var(--text); margin-bottom: .3rem; }
.cards a span { color: var(--muted); font-size: .9rem; line-height: 1.45; }

.steps { counter-reset: step; list-style: none; padding-left: 0; }
.steps > li { counter-increment: step; position: relative; padding-left: 2.5rem; margin: .9rem 0; }
.steps > li::before { content: counter(step); position: absolute; left: 0; top: .15rem; width: 1.7rem; height: 1.7rem;
  background: var(--band); color: var(--on-band); font: 500 .85rem/1.7rem var(--sans); text-align: center; }

.ledger { margin: 1.8rem 0; }
.ledger-row { padding: .85rem 0; border-bottom: 1px solid var(--rule); }
.ledger-row:first-child { border-top: 1px solid var(--rule); }
.ledger-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .45rem; }
.ledger-head b { font: 500 1rem var(--sans); }
.ledger-head span { font: 400 .87rem var(--sans); color: var(--muted); white-space: nowrap; }
.track { position: relative; height: .6rem; background: var(--panel); overflow: hidden; }
.track i { position: absolute; inset: 0 auto 0 0; display: block; }
.track .spent { background: var(--accent); }
.track .over { background: var(--alert); }
.ledger-note { font: 400 .84rem/1.5 var(--sans); color: var(--muted); margin: .4rem 0 0; }
.total { display: flex; justify-content: space-between; gap: 1rem; font-size: 1.05rem; }
.total b { font-weight: 600; }

footer { border-top: 1px solid var(--rule); }
footer p { max-width: var(--wide); margin: 0 auto; padding: 1.4rem var(--gutter); font: 400 .84rem/1.5 var(--sans); color: var(--muted); }
footer a { color: inherit; }

/* the public front: the logo on paper, one way in, nothing else */
.front main { min-height: 100vh; max-width: 30rem; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 3rem 1.5rem; }
.front .front-logo { display: block; width: min(24rem, 80vw); color: var(--text); }
.front .front-logo .logo { width: 100%; height: auto; }
.front .front-logo:has(> .medallion) { width: min(21rem, 78vw); }
.front .front-logo .medallion { width: 100%; height: auto; display: block; }
.front .way-in { display: inline-block; margin-top: 2.4rem; padding: .8rem 1.6rem; background: var(--roof-deep); color: var(--paper);
  font: 500 .85rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.front .way-in:hover { background: var(--roof); }
.front .soon { margin: 2.2rem 0 0; font: 400 1.15rem/1.5 var(--serif); }
.front .soon + .way-in { margin-top: 1.4rem; }
.front .small { margin-top: 1.6rem; font: 400 .82rem/1.5 var(--sans); color: var(--muted); }
.front .small a { color: inherit; }
.front.text main { display: block; text-align: left; max-width: 36rem; min-height: 0; padding-top: 3.5rem; }
.front.text .front-logo { width: 9rem; margin-bottom: 2.2rem; }
.front.text h1 { font-size: 2rem; margin: 0 0 1rem; }

/* the preview banner across the top of every signed-in page (templates/base.html) */
.preview-banner { background: var(--lamp); color: var(--ink); font: 400 .9rem/1.45 var(--sans); }
.preview-banner p { max-width: var(--wide); margin: 0 auto; padding: .6rem var(--gutter); }
.preview-banner strong { font-weight: 600; }
.preview-banner button { margin-left: .4rem; padding: .3rem .7rem; border: 1px solid var(--ink); background: transparent; color: var(--ink);
  font: 500 .75rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.preview-banner button:hover { background: var(--ink); color: var(--lamp); }

/* the Feedback button and its panel (static/feedback.js) */
.fb-btn { position: fixed; right: 1rem; bottom: 1rem; z-index: 50; padding: .7rem 1.1rem; border: 0; cursor: pointer;
  background: var(--roof-deep); color: var(--paper); font: 500 .8rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.fb-btn:hover { background: var(--roof); }
.fb-panel { position: fixed; right: 1rem; bottom: 4.2rem; z-index: 50; width: min(22rem, calc(100vw - 2rem)); padding: 1.1rem 1.1rem 1rem;
  background: var(--panel); color: var(--text); border-top: 4px solid var(--band); font: 400 .92rem/1.45 var(--sans); }
.fb-panel[hidden], .fb-tip[hidden], .fb-about[hidden] { display: none; }
.fb-h { margin: 0 0 .7rem; font: 500 1rem/1.3 var(--sans); }
.fb-l { display: block; margin: .8rem 0 .35rem; color: var(--muted); }
.fb-panel textarea { width: 100%; padding: .6rem; border: 1px solid var(--rule); background: var(--page); color: var(--text); font: 400 1rem/1.45 var(--serif); resize: vertical; }
.fb-panel button { font: 500 .8rem/1 var(--sans); letter-spacing: .08em; cursor: pointer; }
.fb-point, .fb-cancel, .fb-clear { padding: .55rem .8rem; border: 1px solid var(--text); background: transparent; color: var(--text); }
.fb-clear { padding: .25rem .5rem; margin-left: .3rem; }
.fb-send { padding: .6rem 1.1rem; border: 0; background: var(--roof-deep); color: var(--paper); text-transform: uppercase; letter-spacing: .12em; }
.fb-send[disabled] { opacity: .6; }
.fb-row { display: flex; gap: .6rem; margin-top: .4rem; }
.fb-about { margin: .7rem 0 0; color: var(--muted); }
.fb-status { min-height: 1.2em; margin: .5rem 0; color: var(--accent); }
.fb-tip { position: fixed; left: 50%; top: 1rem; transform: translateX(-50%); z-index: 60; padding: .6rem 1rem;
  background: var(--text); color: var(--page); font: 500 .85rem/1.3 var(--sans); }
.fb-picking, .fb-picking * { cursor: crosshair !important; }
.fb-hover { outline: 3px solid var(--bloom) !important; outline-offset: 2px; }
footer { padding-bottom: 3.5rem; }

/* overview: tiles with icons, and the recently updated list */
.cards.icons a { display: grid; grid-template-columns: 2rem 1fr; column-gap: .7rem; align-items: start; align-content: start; }
.cards.icons a .ico { grid-row: span 2; width: 1.6rem; height: 1.6rem; margin-top: .05rem; color: var(--roof-deep); }
.cards.icons a:hover .ico { color: var(--link); }
.cards.icons a strong, .cards.icons a span { grid-column: 2; }
ul.recent { list-style: none; padding: 0; margin: 1rem 0 2rem; columns: 2 16rem; column-gap: 1.4rem; }
ul.recent li { break-inside: avoid; padding: .45rem 0; border-top: 1px solid var(--rule); }
ul.recent a { font: 500 .95rem/1.4 var(--sans); text-decoration: none; color: var(--text); }
ul.recent a:hover { color: var(--link); }
ul.recent span { color: var(--muted); font-size: .85rem; margin-left: .4rem; }

/* MEDALLION: start */
/* The medallion by season (generated by sive-logo-explore/final/final.py; do not edit by hand) */
.medallion .bare { display: none; }
html[data-season="winter"] .medallion .leaf { display: none; }
html[data-season="winter"] .medallion .bare { display: inline; }
.medallion .m-bg { fill: var(--m-bg); } .medallion .m-skyp { fill: var(--m-skyp); } .medallion .m-stars { fill: var(--m-stars); } .medallion .m-top { fill: var(--m-top); } .medallion .m-far { fill: var(--m-far); } .medallion .m-near { fill: var(--m-near); } .medallion .m-oak { fill: var(--m-oak); } .medallion .m-maple { fill: var(--m-maple); } .medallion .m-limb { fill: var(--m-limb); } .medallion .m-rim { fill: var(--m-rim); } .medallion .m-wall { fill: var(--m-wall); } .medallion .m-hink { fill: var(--m-hink); } .medallion .m-roofp { fill: var(--m-roofp); } .medallion .m-smoke { fill: var(--m-smoke); } .medallion .m-field { fill: var(--m-field); } .medallion .m-name { fill: var(--m-name); } .medallion .m-ring { fill: var(--m-ring); } .medallion .m-cut { fill: var(--m-cut); }
:root { --m-bg: #FBF8EE; --m-skyp: #FBF8EE; --m-stars: transparent; --m-top: #4D667D; --m-far: #3B4C59; --m-near: #484C2C; --m-oak: #FBF8EE; --m-maple: #FBF8EE; --m-limb: #484C2C; --m-rim: #FBF8EE; --m-wall: #FBF8EE; --m-hink: #484C2C; --m-roofp: #484C2C; --m-smoke: transparent; --m-field: #8D9349; --m-name: #FBF8EE; --m-ring: #484C2C; --m-cut: #FBF8EE; }
html[data-season="spring"] { --m-bg: #F4F6E6; --m-skyp: #F4F6E6; --m-stars: transparent; --m-top: #7C8B9B; --m-far: #61666B; --m-near: #4F5141; --m-oak: #F4F6E6; --m-maple: #F4F6E6; --m-limb: #4F5141; --m-rim: #F4F6E6; --m-wall: #F4F6E6; --m-hink: #4F5141; --m-roofp: #4F5141; --m-smoke: transparent; --m-field: #6B8A33; --m-name: #F4F6E6; --m-ring: #4F5141; --m-cut: #F4F6E6; }
html[data-season="fall"] { --m-bg: #F9F1DE; --m-skyp: #F9F1DE; --m-stars: transparent; --m-top: #C79A4A; --m-far: #C25A1F; --m-near: #8E3B1E; --m-oak: #F9F1DE; --m-maple: #F9F1DE; --m-limb: #8E3B1E; --m-rim: #F9F1DE; --m-wall: #F9F1DE; --m-hink: #8E3B1E; --m-roofp: #8E3B1E; --m-smoke: transparent; --m-field: #8E7D42; --m-name: #F9F1DE; --m-ring: #8E3B1E; --m-cut: #F9F1DE; }
html[data-season="winter"] { --m-bg: #F2F4F8; --m-skyp: #F2F4F8; --m-stars: transparent; --m-top: #8790A1; --m-far: #6F7684; --m-near: #3F444C; --m-oak: #F2F4F8; --m-maple: #F2F4F8; --m-limb: #3F444C; --m-rim: #F2F4F8; --m-wall: #F2F4F8; --m-hink: #3F444C; --m-roofp: #3F444C; --m-smoke: #F2F4F8; --m-field: #D6DCE4; --m-name: #3F444C; --m-ring: #3F444C; --m-cut: #3F444C; }
@media (prefers-color-scheme: dark) {
  :root, html[data-season="spring"], html[data-season="summer"], html[data-season="fall"] { --m-bg: #FBF6EE; --m-skyp: #1E2738; --m-stars: #F3E9C8; --m-top: #3A4252; --m-far: #232A2C; --m-near: #121612; --m-oak: #1E2738; --m-maple: #1E2738; --m-limb: #121612; --m-rim: #1E2738; --m-wall: #1E2738; --m-hink: #ECB04A; --m-roofp: #232A2C; --m-smoke: transparent; --m-field: #121612; --m-name: #F3E9C8; --m-ring: #121612; --m-cut: #FBF6EE; }
  html[data-season="winter"] { --m-bg: #1C1F18; --m-skyp: #1C1F18; --m-stars: #F3E9C8; --m-top: #5E6355; --m-far: #9A9D8E; --m-near: #E9E2D2; --m-oak: #1C1F18; --m-maple: #1C1F18; --m-limb: #E9E2D2; --m-rim: #1C1F18; --m-wall: #1C1F18; --m-hink: #ECB04A; --m-roofp: #E9E2D2; --m-smoke: #CFCABB; --m-field: #E9E2D2; --m-name: #1C1F18; --m-ring: #E9E2D2; --m-cut: #1C1F18; }
}
/* MEDALLION: end */

/* the design system pages (content/intranet/design-system.md and design-system/logo.md) */
/* (the design system pages use the full page width) */
.ds-small { font: 400 .86rem/1.55 var(--sans); color: var(--muted); }
.ds-switch { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 1.8rem 0 .4rem; position: sticky; top: 0; z-index: 5; background: var(--page); padding: .5rem 0; }
.ds-switch span { font: 500 .74rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-right: .4rem; }
.ds-switch button { font: 500 .74rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; padding: .6rem .8rem; border: 1px solid var(--muted); background: transparent; color: var(--text); cursor: pointer; }
.ds-switch button[aria-pressed="true"] { background: var(--roof-deep); border-color: var(--roof-deep); color: var(--paper); }
.ds-button { display: inline-block; padding: .8rem 1.4rem; background: var(--roof-deep); color: var(--paper); font: 500 .8rem/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.ds-button:hover { background: var(--roof); }

.ds-marks { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 2rem; margin: 1.6rem 0; align-items: end; }
.ds-marks figure { margin: 0; color: var(--text); }
.ds-marks svg { width: 100%; height: auto; display: block; }
.ds-marks .ds-seed svg { width: 5rem; }
.ds-marks figcaption, .lv figcaption { font: 400 .86rem/1.5 var(--sans); color: var(--muted); margin-top: .7rem; }
.ds-marks figcaption b, .lv figcaption b { display: block; color: var(--text); font-weight: 500; font-size: .95rem; }

.ds-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 1.4rem 1.2rem; margin: 1.4rem 0; }
.ds-swatches div { font: 400 .84rem/1.45 var(--sans); }
.ds-swatches i { display: block; height: 4.5rem; margin-bottom: .55rem; box-shadow: inset 0 0 0 1px var(--rule); }
.ds-swatches b { display: block; font-weight: 500; font-size: .95rem; }
.ds-swatches code { background: none; padding: 0; color: var(--muted); }
.ds-swatches span { display: block; color: var(--muted); margin-top: .2rem; }
.ds-seasons { font: 400 .8rem/1.35 var(--sans); }
.ds-seasons td { min-width: 5.5rem; color: var(--muted); }
.ds-seasons td i { display: block; height: 2.6rem; margin-bottom: .35rem; box-shadow: inset 0 0 0 1px var(--rule); }
.ds-seasons td code { display: block; background: none; padding: 0; }
.ds-seasons tbody th { font: 500 .95rem/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: var(--text); }
.ds-seasons small { display: block; font-weight: 400; font-size: .74rem; color: var(--muted); }

.ds-type > div { display: grid; grid-template-columns: 11rem 1fr; gap: 1rem; align-items: baseline; border-top: 1px solid var(--rule); padding: .9rem 0; }
.ds-type span { font: 400 .8rem/1.4 var(--sans); color: var(--muted); }
.ds-type p { margin: 0; }
.ds-name { font: 500 1.6rem/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.ds-t1 { font: 400 2rem/1.15 var(--sans); }
.ds-label { font: 500 .78rem/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.ds-read { font: 400 1.05rem/1.65 var(--serif); }

.ds-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.6rem, 1fr)); gap: 1.4rem .6rem; margin: 1.6rem 0; }
.ds-icons figure { margin: 0; text-align: center; }
.ds-icons i { display: block; width: 48px; height: 48px; margin: 0 auto .4rem; background: var(--text); -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.ds-icons figure:nth-child(5n+1) i { background: var(--accent); }
.ds-icons figcaption { font: 400 .76rem/1.3 var(--sans); color: var(--muted); }

.ds-patterns { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 1.4rem; margin: 1.6rem 0; }
.ds-patterns figure { margin: 0; }
.ds-patterns .ds-wide { grid-column: 1 / -1; }
.ds-patterns i { display: block; height: 9rem; background-size: 96px; }
.ds-patterns i.ds-ridges { height: 7rem; background-size: auto 100%; background-repeat: repeat-x; }
.ds-patterns figcaption { font: 400 .84rem/1.45 var(--sans); color: var(--muted); margin-top: .5rem; }
.ds-patterns figcaption b { display: block; color: var(--text); font-weight: 500; }

/* the logo page: every version on its ground */
.lv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 2rem 1.6rem; margin: 1.4rem 0 1rem; }
.lv-grid.lv-6 { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
.lv { margin: 0; }
.lv-g { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; padding: 1.4rem; }
.lv-g img, .lv-g > svg { display: block; max-width: 100%; max-height: 100%; width: 100%; height: auto; }
.lv-round .lv-g img { width: auto; height: 100%; }
.lv-small .lv-g img { width: 40%; }
.lv-none { padding: 0; }
.lv-none img { width: 100%; height: 100%; object-fit: contain; }
.lv-paper { background: #FBF6EE; color: #1F221B; }
.lv-rule { background: var(--panel); }
.lv-ink { background: #1F221B; }
.lv-page { background: var(--page); box-shadow: inset 0 0 0 1px var(--rule); color: var(--text); }
.lv-fieldink { background: #FBF6EE; color: var(--field); }
.lv-band { background: var(--band); color: var(--on-band); }
.lv-g .medallion { width: auto; height: 100%; }
.lv-np { display: flex; align-items: center; gap: .8rem; font: 500 1.2rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.lv-np .mark { width: 3rem; height: auto; }
.lv-dl { display: block; margin-top: .35rem; }
.lv-dl a { font-weight: 500; }
.lv-sizes { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1.6rem 2rem; padding: 1.6rem; background: #FBF6EE; margin: 1.4rem 0; }
.lv-sizes figure { margin: 0; }
.lv-sizes img { display: block; height: auto; }
.lv-sizes figcaption { font: 400 .74rem/1.3 var(--sans); color: #655A4E; margin-top: .5rem; }
@media (max-width: 600px) { .ds-type > div { grid-template-columns: 1fr; gap: .3rem; } }

/* committee reports: the approve-or-edit box (static/review.js) */
.review { margin: 1.5rem 0 2rem; padding: 1.1rem 1.2rem; border: 1px solid var(--roof-deep); border-left-width: 4px; background: color-mix(in srgb, var(--roof-deep) 8%, transparent); }
.rv-h { margin: 0 0 .3rem; font: 500 1.05rem/1.3 var(--sans); }
.rv-who { margin: 0 0 .8rem; color: var(--muted); }
.rv-row { display: flex; flex-wrap: wrap; gap: .6rem; }
.review button { padding: .6rem 1.1rem; border: 1px solid var(--roof-deep); cursor: pointer; font: 500 .85rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; background: transparent; color: var(--text); }
.review .rv-approve, .review .rv-send { background: var(--roof-deep); color: var(--paper); }
.review button[disabled] { opacity: .6; }
.rv-panel { margin-top: 1rem; }
.rv-panel[hidden] { display: none; }
.rv-l { display: block; margin-bottom: .4rem; }
.rv-panel textarea { width: 100%; box-sizing: border-box; padding: .6rem; font: 1rem/1.45 var(--sans); background: var(--page); color: var(--text); border: 1px solid var(--muted); }
.rv-status { min-height: 1.2em; margin: .5rem 0; color: var(--accent); }
mark.ask { background: color-mix(in srgb, var(--bloom) 28%, transparent); color: inherit; padding: 0 .15em; }

/* The finances project (Will only): state badges on the status board, answer boxes on the inputs page. */
.st { display: inline-block; padding: .1rem .5rem; border: 1px solid var(--rule); font: 500 .74rem/1.4 var(--sans); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.st-done { border-color: var(--roof-deep); color: var(--roof-deep); }
.st-working { border-color: var(--lamp); background: color-mix(in srgb, var(--lamp) 22%, transparent); }
.st-blocked, .st-waiting { border-color: var(--alert); color: var(--alert); }
.st-ready-for-g5a, .st-ready { background: var(--roof-deep); border-color: var(--roof-deep); color: var(--paper); }
.st-not-started { color: var(--muted); }
.when { color: var(--muted); font-size: .85rem; margin-left: .3rem; }
.pagelinks { margin: .4rem 0 1.4rem; }
.bq { margin: 1.2rem 0; padding: 1rem 1.2rem; border: 1px solid var(--rule); border-left: 4px solid var(--muted); background: color-mix(in srgb, var(--panel) 60%, transparent); }
.bq.answered { border-left-color: var(--roof-deep); }
.bq h3 { margin: 0 0 .3rem; }
.bq-saved { margin: .6rem 0; padding: .5rem .7rem; background: color-mix(in srgb, var(--roof-deep) 8%, transparent); }
.bq-saved[hidden] { display: none; }
.bq-answer { white-space: pre-wrap; }
.bq-l { display: block; margin-bottom: .3rem; color: var(--muted); font-size: .9rem; }
.bq textarea { width: 100%; box-sizing: border-box; padding: .6rem; font: 1rem/1.45 var(--sans); background: var(--page); color: var(--text); border: 1px solid var(--muted); resize: vertical; }
.bq-row { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-top: .5rem; }
.bq button { padding: .6rem 1.1rem; border: 1px solid var(--roof-deep); cursor: pointer; font: 500 .85rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; background: var(--roof-deep); color: var(--paper); }
.bq button[disabled] { opacity: .6; }
.bq-status { color: var(--accent); }
.bq-warn { color: var(--alert); }

/* plain-English Q&A (content/intranet/framework-faq.md) and printing */
.qa h3 { margin-top: 2.1rem; }
.print-btn { padding: .6rem 1.1rem; border: 1px solid var(--roof-deep); background: transparent; color: var(--text); cursor: pointer;
  font: 500 .8rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.print-btn:hover { background: var(--roof-deep); color: var(--paper); }
.print-only { display: none; }
@media print {
  :root { --page: #fff; --panel: #fff; --text: #000; --muted: #333; --rule: #999; --link: #000; --band: #fff; --on-band: #000; --alert: #000; }
  body { font-size: 11.5pt; line-height: 1.5; background: #fff; color: #000; }
  .preview-banner, .top, .sky, footer, .fb-btn, .fb-panel, .print-btn, .review, nav, .subnav { display: none !important; }
  .print-only { display: block; font: 400 9pt/1.4 var(--sans); color: #333; }
  .field .in { padding: 0 0 .6rem; border-bottom: 1px solid #000; }
  .field h1 { font-size: 22pt; color: #000; }
  main { max-width: none; padding: .8rem 0 0; }
  a { color: #000; text-decoration: none; }
  main a[href^="/"]::after { content: " (new.sivefarm.com" attr(href) ")"; font-size: .85em; color: #333; }
  table { display: table; overflow: visible; font-size: 10pt; }
  h2, h3 { break-after: avoid; }
  tr, figure, li, .sample, .warn { break-inside: avoid; }
  .sample { color: #000; border-color: #000; }
}

/* Where a page sits: Committees › Interior Committee › Report for Nov. 1 */
.crumbs { font: 500 .78rem/1.4 var(--sans); letter-spacing: .06em; color: var(--muted); margin: 0 0 1.2rem; }
.crumbs a { color: inherit; }

/* Artifact gallery and numbered references (The Old Kitchen Stove) */
.artifacts { display: grid; gap: 1.6rem 1.4rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin: 1.6rem 0 2rem; }
.artifacts figure { margin: 0; }
.artifacts { align-items: start; }
.artifacts figcaption strong { color: var(--text); font-weight: 500; }
main sup { font: 500 .68em/0 var(--sans); }
main sup a { text-decoration: none; }
.refs { font: 400 .86rem/1.55 var(--sans); color: var(--muted); padding-left: 1.4rem; }
.refs li { margin: .45rem 0; }
.refs li:target { color: var(--text); background: var(--panel); }
@media print { .artifacts { grid-template-columns: 1fr 1fr; } }

/* The books (Will only): the engine's reports (~/claude/sivefarm-books/reports/build.py --template)
   poured into this site's page shell (tools/books_shell.py). Money right-aligned in tabular figures;
   negatives in parentheses and the season's accent; wide tables scroll inside their own box. */
.books .banner { margin: 0 0 1.2rem; padding: .6rem .9rem; font: 500 .8rem/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.books .banner.real { border-left: 4px solid var(--alert); background: var(--panel); color: var(--alert); }
.books .banner.synthetic { border: 1px dashed var(--alert); color: var(--alert); }
.books-lede { font-size: 1.05rem; line-height: 1.6; margin: 0 0 1.2rem; max-width: var(--measure); }
.books-nav { gap: .3rem 1.1rem; padding: .7rem 0; margin: 0 0 .4rem; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.books-nav a, .books-years span { font-size: .7rem; }
.books-nav.books-years { border-top: 0; margin-top: -.4rem; }
.books-meta { font: 400 .8rem/1.5 var(--sans); color: var(--muted); margin: 0 0 1.4rem; }
.books h2 { font-size: 1.3rem; margin: 2.2rem 0 .5rem; }
.books .wrap { max-width: 100%; overflow-x: auto; margin: .8rem 0 1.6rem; }
.books table { display: table; width: 100%; overflow: visible; margin: 0; font-size: .9rem; }
.books th, .books td { padding: .45rem .6rem; }
.books th:first-child, .books td:first-child { padding-left: 0; }
.books th:last-child, .books td:last-child { padding-right: 0; }
.books td.n, .books th.n { text-align: right; white-space: nowrap; }
.books td.n, .books .books-meta, .books li b { font-variant-numeric: tabular-nums lining-nums; }
.books td small { font: 400 .8rem/1.4 var(--sans); color: var(--muted); }
.books .neg { color: var(--accent); }
.books tr.total { display: table-row; background: none; border: 0; padding: 0; margin: 0; font-size: inherit; }
.books tr.total td { font-weight: 600; border-top: 2px solid var(--text); border-bottom: 0; }
.books .ok { color: var(--roof-deep); font-weight: 600; }
.books .fail { color: var(--alert); font-weight: 600; }
.books ul { columns: 2 14rem; column-gap: 1.4rem; }
.books ul li { break-inside: avoid; }
@media (prefers-color-scheme: dark) { .books .ok { color: var(--link); } }
@media print { .books .wrap { overflow: visible; } .books .neg { color: #000; } }
.books td.d, .books th { white-space: nowrap; }
/* The tax label menus (static/tax-labels.js), for the Financial Manager. */
.tax-pick select { font: inherit; padding: .1rem .3rem; border: 1px solid var(--rule); background: var(--page); color: var(--text); }
.tax-pick .tax-status { display: block; color: var(--accent); }
@media print { .tax-pick .tax-status { display: none; } .tax-pick select { border: 0; appearance: none; padding: 0; } }
.books .wrap { scrollbar-width: thin; scrollbar-color: var(--muted) transparent; }

/* The books print pack (print.html, "Print all"): the farm letterhead and a contents list on the first sheet;
   in print, landscape letter with every report on its own sheets, compact tables, and the LLC and page numbers
   in the bottom margin. Links to Drive are dropped on paper; the source text stays. */
.books-letterhead { display: flex; align-items: center; gap: 1.4rem; padding: 0 0 1rem; margin: 0 0 1rem; border-bottom: 2px solid var(--text); }
.books-letterhead img { height: 5.5rem; width: auto; }
.books-letterhead p { margin: 0; font: 400 .85rem/1.5 var(--sans); color: var(--muted); }
.books-letterhead b { font: 500 1.05rem/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--text); }
.books-letterhead .lh-what { margin-left: auto; text-align: right; }
.books-print .books-contents { columns: 2 16rem; font: 400 .9rem/1.6 var(--sans); margin: 0 0 1.4rem; }
.books-print h2 small { display: block; font: 400 .8rem/1.4 var(--sans); color: var(--muted); letter-spacing: .04em; }
@page books-pack { size: letter landscape; margin: .45in .5in .6in;
  @bottom-left { content: "Sive Farm LLC \00b7  981 Burton Hall Road, Margaretville, NY 12455 \00b7  Confidential: for Members"; font: 7.5pt Jost, sans-serif; color: #555; }
  @bottom-right { content: "Page " counter(page) " of " counter(pages); font: 7.5pt Jost, sans-serif; color: #555; } }
@media print {
  html:has(.books-print), html:has(.books-print) body { page: books-pack; }
  body:has(.books-print) .field, body:has(.books-print) .crumbs { display: none !important; }
  body:has(.books-print) main { padding: 0; }
  .books-print > .banner, .books-print > .books-meta, .books-print > .books-lede { display: none; }
  .books-letterhead img { height: .95in; }
  .books-letterhead p { font-size: 9pt; color: #000; }
  .books-letterhead b { font-size: 12pt; }
  .books-print .books-contents { font-size: 9.5pt; }
  .books-print h2 { font-size: 15pt; margin: 0 0 4pt; }
  .books-print h2 small { font-size: 8.5pt; color: #333; margin-top: 2pt; }
  .books-print h2 + .books-lede { font-size: 9pt; line-height: 1.4; margin: 0 0 6pt; max-width: none; }
  .books-print section h2:not(:first-child) { font-size: 11pt; margin: 10pt 0 2pt; }
  .books-print .wrap { margin: 2pt 0 8pt; }
  .books-print table { font-size: 8pt; line-height: 1.3; }
  .books-print th { font-size: 6.5pt; }
  .books-print th, .books-print td { padding: 1.5pt 5pt; }
  .books-print td small { font-size: 7pt; color: #333; }
  .books-print p, .books-print li { font-size: 8.5pt; }
  .books-print a.src-link { display: none; }
  .books-print thead { display: table-header-group; }
}

/* Comments on the books review and the books (static/comments.js): a panel at the end of the page, and a small
   "Comment" button in the last cell of each table row. A row with comments, or the one a link points at, is tinted. */
.cm-panel { margin: 2.5rem 0 1rem; padding-top: 1.2rem; border-top: 1px solid var(--rule); }
.cm-panel h2 { margin-top: 0; }
.cm-intro { color: var(--muted); font-size: .95rem; }
.cm-list { list-style: none; margin: 1rem 0; padding: 0; }
.cm-item { margin: 0 0 1rem; padding: .7rem .9rem; border-left: 3px solid var(--roof-deep); background: color-mix(in srgb, var(--panel) 70%, transparent); }
.cm-item p { margin: 0 0 .3rem; }
.cm-meta { font: .85rem/1.4 var(--sans); color: var(--muted); }
.cm-meta strong { color: var(--text); font-weight: 600; }
.cm-about { font-size: .88rem; color: var(--muted); overflow-wrap: anywhere; }
.cm-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.cm-form { margin-top: 1rem; }
.cm-l { display: block; margin-bottom: .3rem; color: var(--muted); font-size: .9rem; }
.cm-form textarea { width: 100%; box-sizing: border-box; padding: .6rem; font: 1rem/1.45 var(--sans); background: var(--page); color: var(--text); border: 1px solid var(--muted); resize: vertical; }
.cm-chip { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: 0 0 .6rem; padding: .4rem .7rem; font-size: .88rem; background: color-mix(in srgb, var(--roof-deep) 10%, transparent); overflow-wrap: anywhere; }
.cm-chip[hidden] { display: none; }
.cm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-top: .5rem; }
.cm-send { padding: .6rem 1.1rem; border: 1px solid var(--roof-deep); cursor: pointer; font: 500 .85rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; background: var(--roof-deep); color: var(--paper); }
.cm-send[disabled] { opacity: .6; }
.cm-clear, .cm-row { padding: .15rem .45rem; border: 1px solid var(--rule); background: var(--page); color: var(--link); cursor: pointer; font: .72rem/1.3 var(--sans); }
.cm-status { color: var(--accent); }
.cm-row { margin-left: .5rem; opacity: 0; white-space: nowrap; }
tr:hover .cm-row, tr:focus-within .cm-row, tr.cm-has .cm-row { opacity: 1; }
@media (hover: none) { .cm-row { opacity: .8; } }
tr.cm-has > td { background: color-mix(in srgb, var(--lamp) 12%, transparent); }
tr.cm-target > td { background: color-mix(in srgb, var(--roof-deep) 16%, transparent); }
@media print { .cm-panel, .cm-row { display: none; } }

/* Members' finances: /intranet/farm-finances/ and each Family Unit's account (figures from the private books). */
.note.draft { border-left-color: var(--alert); }
.figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .8rem 1.4rem; margin: 1.4rem 0 1.8rem; }
.figs div { border-top: 1px solid var(--rule); padding-top: .7rem; }
.figs span { display: block; font: 400 .82rem/1.4 var(--sans); color: var(--muted); }
.figs strong { display: block; font: 500 1.35rem/1.3 var(--sans); font-variant-numeric: tabular-nums; margin-top: .2rem; }
.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0 2rem; }
.scroll { max-width: 100%; overflow-x: auto; margin: .8rem 0 1rem; }
table.fin { width: 100%; border-collapse: collapse; font: 400 .92rem/1.45 var(--sans); margin: .6rem 0 1.4rem; }
table.fin caption { text-align: left; font-weight: 500; padding-bottom: .4rem; }
table.fin th, table.fin td { padding: .45rem .5rem; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
table.fin td:not(:first-child), table.fin.years th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.fin thead th { font-weight: 500; color: var(--muted); font-size: .82rem; }
table.fin tbody th { font-weight: 500; white-space: nowrap; }
table.fin tfoot td { font-weight: 500; border-bottom: 0; border-top: 2px solid var(--rule); }
table.fin tr.sub td { color: var(--muted); }
table.fin.stmt { max-width: 34rem; }
.balance strong { font-variant-numeric: tabular-nums; }
.small { font-size: .86rem; color: var(--muted); }
.acct-pick { font: inherit; padding: .3rem .4rem; margin-left: .4rem; }

/* A screenshot on a members' page (kept beside its .md, e.g. content/intranet/finances/review/img/): shown at its
   own size or smaller, on a panel so paper on paper reads as a picture. */
main figure.shot { background: var(--panel); padding: .8rem; }
main figure.shot img { width: auto; max-width: 100%; height: auto; margin: 0 auto; }
main figure.shot figcaption { margin-top: .6rem; }
/* "At a glance" at the top of a long page, and headed panels */
.glance { background: var(--panel); border-left: 4px solid var(--accent); padding: 1rem 1.2rem; margin: 0 0 2rem; }
.glance h2 { margin: 0 0 .5rem; font-size: 1.15rem; font-weight: 500; }
.glance ul { margin: 0; padding-left: 1.2rem; }
.glance li { margin: .25rem 0; }
.note h3, .warn h3 { margin: 0 0 .4rem; font-size: 1.05rem; }
.note ul, .warn ul { margin: .4rem 0 0; }
.note > :last-child, .warn > :last-child, .glance > :last-child { margin-bottom: 0; }

/* The monthly bank statements page (static/bank-statements.js): a drop box, a line per file as it is read and
   uploaded, then a table of what is in. */
.bs-drop { display: block; position: relative; padding: 2rem 1.4rem; margin: 1.4rem 0 .6rem; border: 2px dashed var(--rule); background: var(--panel); text-align: center; cursor: pointer; }
.bs-drop.bs-over, .bs-drop:hover { border-color: var(--roof-deep); }
.bs-drop strong { display: block; font: 500 1.05rem/1.4 var(--sans); }
.bs-drop span { display: block; margin-top: .3rem; font: 400 .9rem/1.5 var(--sans); color: var(--muted); }
.bs-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.bs-files { list-style: none; margin: 0 0 1rem; padding: 0; }
.bs-file { margin: 0 0 .6rem; padding: .6rem .9rem; border-left: 3px solid var(--rule); font: 400 .92rem/1.5 var(--sans); }
.bs-file.bs-done { border-left-color: var(--roof-deep); }
.bs-what { color: var(--muted); }
.bs-status { margin: .2rem 0 0; font: 400 .9rem/1.5 var(--sans); }
.bs-status input[type=month] { margin: 0 .5rem; padding: .3rem .5rem; border: 1px solid var(--rule); background: var(--page); color: var(--text); color-scheme: light dark; font: inherit; }
.bs-status button { padding: .4rem .9rem; border: 1px solid var(--roof-deep); cursor: pointer; font: 500 .8rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; background: var(--roof-deep); color: var(--paper); }
.bs td.bs-missing { color: var(--muted); font-style: italic; }
.bs td { font: 400 .88rem/1.4 var(--sans); }

/* Wide tables on phones (static/tables.js marks a box whose table is wider than it: .overflows). The first
   column stays put while the rest swipes, with a shadow once it has moved; a line above says it swipes. */
.swipe { margin: .8rem 0 -.4rem; font: 400 .8rem/1.4 var(--sans); color: var(--muted); }
.overflows:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.overflows tr > :first-child { position: sticky; left: 0; z-index: 1; background: var(--page); overflow-wrap: anywhere; min-width: 9rem; }
.overflows tr > th:first-child { white-space: normal; }
.overflows.scrolled tr > :first-child { box-shadow: 6px 0 6px -6px rgba(0,0,0,.35); }
.overflows tr.cm-has > td:first-child { background: linear-gradient(color-mix(in srgb, var(--lamp) 12%, transparent), color-mix(in srgb, var(--lamp) 12%, transparent)) var(--page); }
.overflows tr.cm-target > td:first-child { background: linear-gradient(color-mix(in srgb, var(--roof-deep) 16%, transparent), color-mix(in srgb, var(--roof-deep) 16%, transparent)) var(--page); }
.overflows:not(.at-end) { background: linear-gradient(to left, color-mix(in srgb, var(--text) 12%, transparent), transparent 1.2rem) right / 1.2rem 100% no-repeat; }
@media print { .swipe { display: none !important; } .overflows { background: none; } .overflows tr > :first-child { position: static; box-shadow: none; min-width: 0; } }

/* Past years on the finance pages (tools/finance_pages.py): a table on wide screens and paper, and on a
   phone a list of years, each showing its key figure and opening to the rest when tapped. */
.yrs-list { display: none; margin: .8rem 0 1rem; border-top: 1px solid var(--rule); }
.yrs-list details { border-bottom: 1px solid var(--rule); }
.yrs-list summary { display: flex; align-items: center; gap: .8rem; min-height: 3rem; padding: .35rem .2rem; cursor: pointer; list-style: none; font-family: var(--sans); }
.yrs-list summary::-webkit-details-marker { display: none; }
.yrs-list summary::after { content: "+"; width: 1rem; text-align: center; color: var(--muted); font-size: 1.2rem; line-height: 1; }
.yrs-list details[open] summary::after { content: "\2212"; }
.yrs-list .y { font-weight: 500; }
.yrs-list .k { margin-left: auto; text-align: right; font-size: .78rem; line-height: 1.3; color: var(--muted); }
.yrs-list .k b { display: block; font-size: 1rem; font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; }
.yrs-list dl { display: grid; grid-template-columns: 1fr auto; gap: .35rem 1rem; margin: 0 0 .9rem; padding: .6rem .8rem; background: var(--panel); font: 400 .92rem/1.4 var(--sans); }
.yrs-list dt { color: var(--muted); }
.yrs-list dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.phone-only { display: none; }
@media (max-width: 40rem) { .yrs-table { display: none; } .yrs-list { display: block; } .phone-only { display: block; } }
@media print { .yrs-list { display: none !important; } .yrs-table { display: block !important; } }

/* The books on phones (sivefarm-books reports/build.py). Record-like tables (journal, a member's activity,
   suspense, bills, reconciliation: table.stack) become one block per entry, each figure labeled from its
   column (data-label); the cell text is unchanged, so comments stay attached to their rows. The report
   menu and the years become single rows that swipe, with room to tap. */
@media (max-width: 40rem) {
  .books .wrap:has(> table.stack) { overflow: visible; }
  .books table.stack, .books table.stack tbody, .books table.stack tr, .books table.stack td { display: block; }
  .books table.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .books table.stack tr { padding: .7rem 0; border-bottom: 1px solid var(--rule); }
  .books table.stack td { border: 0; padding: .12rem 0; }
  .books table.stack td:empty { display: none; }
  .books table.stack td::before { content: attr(data-label); color: var(--muted); font: 500 .68rem/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
  .books table.stack td:not([data-label])::before, .books table.stack td[data-label=""]::before { content: none; }
  .books table.stack td.n, .books table.stack td.d { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .8rem; text-align: right; }
  .books table.stack td.n::before, .books table.stack td.d::before { margin-right: auto; }
  .books table.stack td:not(.n):not(.d)::before { display: block; }
  .books table.stack tr.total td { border: 0; }
  /* dates head each entry, unlabeled; the journal and a member's activity open with one line (date, flag or
     type, payee), then the description and the postings or figures */
  .books table.stack td.d { display: inline-block; margin-right: .7rem; font: 500 .82rem/1.5 var(--sans); color: var(--muted); }
  .books table.stack td.d::before { content: none; }
  .books table.stack.journal td:nth-child(-n+3):not(.d), .books table.stack.activity td:nth-child(2) { display: inline-block; margin-right: .7rem; }
  .books table.stack.journal td::before, .books table.stack.activity td:nth-child(-n+3)::before { content: none; }
  .books table.stack.journal td:nth-child(2), .books table.stack.activity td:nth-child(2) { font: 500 .82rem/1.5 var(--sans); color: var(--muted); }
  .books table.stack.journal td:nth-child(3) { font: 500 .95rem/1.5 var(--sans); }
  .books table.stack.journal td:nth-child(6) { margin-top: .3rem; font-variant-numeric: tabular-nums; }
  .books table.stack.activity td:nth-child(4), .books table.stack.activity td:nth-child(5) { font-size: .88rem; }
  .books table.stack.activity td:nth-child(4)::before, .books table.stack.activity td:nth-child(5)::before { display: inline; margin-right: .5rem; }
  .cm-row { opacity: 1; }
  /* in an entry, the Comment button sits at its top right */
  .books table.stack tr { position: relative; }
  .books table.stack .cm-row { position: absolute; top: .55rem; right: 0; margin: 0; }
  .books table.stack tr > td:nth-child(-n+3) { max-width: calc(100% - 6.5rem); }
  .books table.stack tr.total { border-top: 2px solid var(--text); }
  .books-nav { flex-wrap: nowrap; overflow-x: auto; gap: 0 1.1rem; padding: 0; scrollbar-width: none; align-items: center; }
  .books-nav::-webkit-scrollbar { display: none; }
  .books-nav a, .books-nav span { flex: none; display: inline-flex; align-items: center; min-height: 2.75rem; font-size: .76rem; }
}
/* Comment buttons and form fields big enough for a finger. */
@media (pointer: coarse) {
  .cm-row { min-height: 2.75rem; padding: .3rem .8rem; font-size: .8rem; opacity: 1; }
  .cm-clear { min-height: 2.75rem; padding: .3rem .8rem; }
  .cm-send, .bq button, .review button { min-height: 2.75rem; }
}
@media (max-width: 40rem) {
  .bq-row button, .cm-actions .cm-send { width: 100%; }
  .cm-form.cm-inline { margin: .6rem 0 1.4rem; padding: .8rem; border-left: 3px solid var(--roof-deep); background: var(--panel); }
}

/* House Manual photos: small tiles beside the steps, each opening the full photograph. */
main .thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 1rem 1.2rem; max-width: var(--measure); margin: 1.4rem 0 2rem; align-items: start; }
main .thumbs figure { margin: 0; }
main .thumbs a { display: block; }
main .thumbs img { aspect-ratio: 4 / 3; object-fit: cover; }
main .thumbs figcaption { font-size: .8rem; }
main .artifacts.small { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 1rem 1.2rem; }
main .artifacts.small img { aspect-ratio: 4 / 3; object-fit: cover; }
main .artifacts.small figcaption { font-size: .8rem; }

/* A page's own menu of the pages under it ({{section-menu:…}}): Arriving and leaving's seasons and special cases. */
.secmenu { max-width: var(--measure); margin: 0 0 2rem; padding: .7rem 1rem; background: var(--panel); display: grid; gap: .35rem; }
.secmenu div { display: flex; flex-wrap: wrap; gap: .2rem 1.1rem; align-items: baseline; }
.secmenu div > span { flex-basis: 100%; }
@media (min-width: 40rem) { .secmenu div > span { flex-basis: auto; } }
.secmenu span { font: 500 .7rem/1.6 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); min-width: 7.5rem; }
.secmenu a { font: 400 .9rem/1.6 var(--sans); letter-spacing: 0; text-transform: none; color: var(--link); text-decoration: none; }
.secmenu a:hover, .secmenu a.here { text-decoration: underline; text-underline-offset: .3em; }
.secmenu a.here { color: var(--text); }
@media print { .secmenu { display: none; } }
/* One photo with a long caption: the photo small at left, the caption beside it (stacked on a phone). */
main .thumbs.side { grid-template-columns: 1fr; }
main .thumbs.side figure { display: grid; grid-template-columns: minmax(9.5rem, 15rem) 1fr; gap: 1.2rem; align-items: start; }
main .thumbs.side figcaption { margin-top: 0; font-size: .86rem; }
@media (max-width: 30rem) { main .thumbs.side figure { grid-template-columns: 1fr; gap: .5rem; } }