.ns-root{font:15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:#1b1b1b;max-width:44rem;padding:0 16px;box-sizing:border-box}
/* The hidden attribute must win over any display rule in this component. Without
   this, .ns-controls{display:flex} beat the UA rule and the no-JS reader saw a dead
   dropdown. Scoped to .ns- so it cannot affect a host page. */
.ns-root [hidden],.ns-controls[hidden],.ns-month[hidden]{display:none!important}
.ns-root h2{font-size:1.3rem;margin:0 0 .25rem}
.ns-root h3{font-size:1.05rem;margin:1.25rem 0 .4rem}
.ns-unit{margin:.25rem 0 1rem;color:#444}
.ns-headline h3{margin-top:.5rem}
.ns-ytd-total,.ns-total{font-size:1.05rem;margin:.3rem 0 .6rem}
.ns-ytd-total strong,.ns-total strong{font-size:1.5rem}
.ns-latest{margin:.2rem 0 .6rem;font-size:.95rem}
.ns-latest .ns-k{color:#444}
.ns-latest strong{font-variant-numeric:tabular-nums}
.ns-note{font-size:.9rem;color:#333;background:#fffbe8;border-left:3px solid #b8860b;
  padding:.6rem .75rem;border-radius:0 4px 4px 0;margin:.5rem 0 1rem}
.ns-note a{color:#31527a}
.ns-prov{display:grid;gap:.35rem;margin:.25rem 0 .75rem;padding:.6rem .75rem;
  background:#f4f6f8;border-left:3px solid #5b7083;border-radius:0 4px 4px 0}
.ns-prov dt{font-weight:600;font-size:.85rem}
.ns-prov dd{margin:0 0 .25rem;font-variant-numeric:tabular-nums}
.ns-hint{color:#5a5a5a;font-size:.85rem;font-weight:400;font-variant-numeric:normal}
.ns-fine{font-size:.85rem;color:#444;margin:.25rem 0 0}
.ns-figure{margin:1rem 0}
.ns-figure figcaption{font-size:.85rem;color:#444;margin-bottom:.5rem}
.ns-chart{display:block;max-width:100%;height:auto;overflow:visible}
.ns-bar{fill:#5b7083}.ns-bar-excluded{fill:#b9c2cb}
.ns-bar-label{font-size:11px;fill:#1b1b1b}
.ns-bar-value{font-size:11px;fill:#1b1b1b;font-weight:600}
.ns-controls{margin:1rem 0 .5rem;display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.ns-controls label{font-weight:600;font-size:.9rem}
.ns-controls select{font:inherit;padding:.3rem;max-width:100%}
.ns-table{border-collapse:collapse;width:100%;margin:.25rem 0 1rem}
.ns-table caption{text-align:left;font-size:.85rem;color:#444;padding-bottom:.4rem}
.ns-table th,.ns-table td{border-bottom:1px solid #d8dde2;padding:.4rem .5rem;text-align:left}
.ns-table td{text-align:right;font-variant-numeric:tabular-nums;width:6rem}
.ns-table tfoot th,.ns-table tfoot td{font-weight:700;border-top:2px solid #5b7083;border-bottom:none}
.ns-table th[scope=row]{font-weight:400}
.ns-excl,.ns-source{font-size:.9rem}
.ns-excl summary{cursor:pointer;color:#31527a}
@media (max-width:430px){.ns-root{font-size:14px;padding:0 12px}
  .ns-root h2{font-size:1.15rem}.ns-ytd-total strong,.ns-total strong{font-size:1.3rem}
  .ns-table td{width:4.5rem}.ns-bar-label{font-size:10px}}
:root{--paper:#f4f6f8;--white:#ffffff;--ink:#17324d;--text:#22303d;--muted:#526171;--line:#d6dbe1;--forest:#17324d;--sage:#e3e9ef;--gold:#b73532;--gold-light:#f6e3e2;--rust:#8e2b28;--radius:8px;--shadow:0 15px 50px #152e4810;--serif:Georgia,'Times New Roman',serif;--sans:Inter,'Inter Fallback',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;--ui-2xs:.6875rem;--ui-xs:.75rem;--ui-sm:.8125rem;--ui-md:.875rem;--ui-lg:.9375rem;--section-gap-lg:clamp(38px,4.5vw,72px);--section-gap-md:clamp(26px,4vw,46px);--section-gap-sm:clamp(16px,2.4vw,28px);--shell:1440px;--shell-tight:1100px;--measure:68ch;--gutter:clamp(20px,4.2vw,72px)}
/* Inter is the interface face, served from this origin (src/fonts/SOURCE.md):
   the Latin subset, variable weight 400-700, under the SIL Open Font License.
   'Inter Fallback' is Arial resized to Inter's metrics, so lines do not reflow
   when the web font swaps in. The five --ui-* steps are the interface type
   scale: 11, 12, 13, 14 and 15px. */
@font-face{font-family:Inter;font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/inter-v20-latin-wght.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter Fallback';src:local('Arial');ascent-override:90.2%;descent-override:22.48%;line-gap-override:0%;size-adjust:107.4%}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--text);font-family:var(--sans);line-height:1.6}a{color:inherit;text-underline-offset:4px}button,input,select{font:inherit}button,a,input,select,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default}button,a{touch-action:manipulation}button{color:inherit}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:var(--serif);font-weight:400;color:var(--ink);line-height:1.1}h1{font-size:clamp(42px,5.4vw,76px);letter-spacing:-2.8px}h2{font-size:clamp(30px,3.2vw,45px);letter-spacing:-1.2px}h3{font-size:27px;letter-spacing:-.5px}p{margin-bottom:1.15em}svg{flex-shrink:0}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #b73532;outline-offset:5px;border-radius:3px}main:focus{outline:none}button svg,.icon-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.sr-only{position:absolute;clip:rect(0,0,0,0);width:1px;height:1px;overflow:hidden;white-space:nowrap}.skip-link{position:fixed;top:-100px;left:20px;padding:12px 22px;background:var(--ink);color:white;z-index:100}.skip-link:focus{top:10px}.preview-bar{background:var(--forest);color:var(--paper);font-size:var(--ui-2xs);letter-spacing:1.8px;line-height:1.5}.preview-bar>.shell{padding-block:10px;display:flex;justify-content:space-between;gap:16px}.preview-bar b{border:1px solid #7d93ab;border-radius:3px;padding:2px 5px;margin-left:6px;font-weight:400}.site-header{max-width:var(--shell);margin-inline:auto;padding:24px var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--line);min-height:99px}.brand{text-decoration:none;display:flex;gap:11px;align-items:center;color:var(--forest);font:25px var(--serif);letter-spacing:-.6px}.brand em{font-style:normal}.brand-comma{margin-right:2px}.site-header nav{display:flex;gap:30px;font-size:var(--ui-sm)}.site-header nav a{text-decoration:none;position:relative;padding:8px 0}.site-header nav a.active:after{content:'';position:absolute;bottom:-4px;left:0;right:0;height:2px;background:var(--forest)}.header-tools{display:flex;gap:14px;align-items:center}.icon-btn{height:42px;width:42px;display:flex;align-items:center;justify-content:center;border:0;background:transparent;text-decoration:none;position:relative;border-radius:50%}.icon-btn:hover{background:var(--sage)}.count-dot{font:var(--ui-2xs) var(--sans);background:var(--forest);color:white;border-radius:20px;padding:2px 5px;position:absolute;right:0;top:0}.shell,.container{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}.shell-tight{max-width:var(--shell-tight)}.band{width:100%}.measure{max-width:var(--measure)}.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:6vw;padding-top:65px;padding-bottom:65px;align-items:center}.eyebrow{font:var(--ui-2xs)/1.5 var(--sans);letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin:0 0 22px;display:block}.hero h1{margin-bottom:26px}.hero h1 em{font-style:italic;font-weight:400}.hero .lead{max-width:490px;font-size:17px;color:var(--muted);line-height:1.75}.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px;align-items:center}.btn{display:inline-flex;align-items:center;justify-content:center;gap:13px;padding:13px 20px;min-height:48px;border:1px solid var(--forest);border-radius:3px;text-decoration:none;font-size:var(--ui-sm);background:var(--forest);color:var(--white);line-height:1.35}.btn:hover{background:#12283e}.btn.secondary{background:transparent;color:var(--forest)}.btn.secondary:hover{background:var(--sage)}.btn.small{padding:9px 14px;min-height:40px;font-size:var(--ui-xs)}.arrow{font-size:20px;font-family:var(--sans);line-height:1}.text-link,.text-btn{border:0;background:none;padding:4px 0;font-size:var(--ui-sm);color:var(--forest);text-decoration:underline;text-underline-offset:5px}.text-link{text-decoration:none;border-bottom:1px solid #8798aa;display:inline-flex;gap:18px;align-items:center}.fine{font-size:var(--ui-xs);line-height:1.65;color:var(--muted)}.hero-foot{margin-top:26px;display:flex;align-items:center;gap:12px;font-size:var(--ui-2xs);color:var(--muted)}.hero-foot i{width:7px;height:7px;border-radius:50%;background:var(--gold)}.hero-art{position:relative;min-height:445px;padding:30px;background:var(--sage);border:1px solid var(--line);border-radius:5px;isolation:isolate;overflow:hidden}.hero-art:before{content:'';position:absolute;inset:-80px;background:repeating-radial-gradient(ellipse at 98% 16%,transparent 0 35px,#a6afb830 36px 37px,transparent 38px 65px);z-index:-1;transform:rotate(-17deg)}.art-top{display:flex;justify-content:space-between;font-size:var(--ui-2xs);letter-spacing:1.7px;color:#57687a}.art-title{font:30px var(--serif);color:var(--forest);margin-top:35px;margin-bottom:24px}.thread-card{background:var(--white);padding:19px 20px;border:1px solid var(--line);box-shadow:0 6px 18px #152e4810;display:flex;gap:18px;align-items:center;position:relative;text-decoration:none}.thread-card:hover{transform:translateX(3px);border-color:#8495a7}.thread-card+.thread-card{margin-top:29px;margin-left:43px}.thread-card+.thread-card:before{content:'';position:absolute;top:-31px;left:35px;height:30px;width:1px;background:#7e90a3}.thread-card .year{font:31px var(--serif);border-right:1px solid var(--line);padding-right:18px;color:var(--gold)}.thread-card strong{font:18px var(--serif);display:block;color:var(--ink)}.thread-card small{font-size:var(--ui-2xs);color:var(--muted)}.art-footer{display:flex;gap:8px;align-items:center;margin-top:28px;font-size:var(--ui-2xs);color:var(--muted)}.small-ring{width:8px;height:8px;border:1px solid #75889d;border-radius:50%}.feature-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr);padding:20px 0;margin-bottom:65px;gap:25px}.feature-strip>div{display:flex;align-items:center;gap:14px}.feature-strip>div+div{border-left:1px solid var(--line);padding-left:25px}.feature-strip strong{font:21px var(--serif);color:var(--forest)}.feature-strip span{font-size:var(--ui-2xs);color:var(--muted);line-height:1.6}.section-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:28px}.section-head h2{margin-bottom:0}.section-head .eyebrow{margin-bottom:10px}.story-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),400px));gap:28px;justify-content:center}.story-card{background:var(--white);border:1px solid var(--line);border-radius:5px;overflow:hidden;box-shadow:0 1px 1px #0d1c2c02;transition:transform .2s,box-shadow .2s}.story-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.story-visual{height:220px;position:relative;text-decoration:none;display:flex;flex-direction:column;justify-content:center;padding:30px;overflow:hidden;border-bottom:1px solid var(--line)}.visual-nameplate{background:#dfe3e7;color:var(--forest)}.visual-nameplate:before,.visual-nameplate:after{position:absolute;content:'';height:1px;background:#8193a677;left:30px;right:30px;top:34px}.visual-nameplate:after{top:auto;bottom:34px}.visual-nameplate .huge{font:clamp(38px,4vw,59px) var(--serif);letter-spacing:3px;text-align:center}.visual-nameplate .subtitle{text-align:center;font:var(--ui-2xs) var(--sans);letter-spacing:2.5px;margin-top:12px}.visual-community{background:#efd4d4;color:#6c2f36}.visual-community .yearrow{display:flex;justify-content:space-between;align-items:center;gap:16px;font:43px var(--serif);border-bottom:1px solid #ac8a9488;padding-bottom:15px}.visual-community .yearrow span+span:before{content:'\00b7';margin-right:17px;font-size:20px;color:#a97982}.visual-community .subrow{display:flex;justify-content:space-between;font-size:var(--ui-2xs);letter-spacing:2px;padding-top:12px}.visual-caption{position:absolute;bottom:9px;right:15px;font-size:var(--ui-2xs);letter-spacing:.4px;color:#61535f}.card-body{padding:27px 30px 28px}.card-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:14px;font-size:var(--ui-2xs);letter-spacing:1.4px;text-transform:uppercase;color:var(--gold)}.card-body h3 a{text-decoration:none}.card-body h3{font-size:31px;margin-bottom:14px}.card-body p{font-size:var(--ui-md);color:var(--muted);margin-bottom:24px}.card-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px}.save-btn{background:none;border:1px solid var(--line);border-radius:50%;width:39px;height:39px;display:flex;align-items:center;justify-content:center}.save-btn:hover,.save-btn[aria-pressed=true]{background:var(--sage);border-color:#8797a9}.save-btn svg{width:18px;height:18px}.save-btn[aria-pressed=true] svg{fill:var(--forest);stroke:var(--forest)}.discovery-band{margin:60px 0;background:var(--forest);color:#f7e9e9;padding:37px 40px;border-radius:5px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:30px}.discovery-band h2{color:#f7e9e9;font-size:34px;margin-bottom:12px}.discovery-band p{font-size:var(--ui-md);color:#c8ced5;margin:0;max-width:630px}.discovery-band .btn{border-color:#acb4bd;background:transparent}.three-notes{display:grid;grid-template-columns:repeat(3,1fr);gap:38px;margin:0 0 65px}.three-notes .note-number{font:32px var(--serif);color:#6e8098;display:block;margin-bottom:16px}.three-notes h3{font-size:24px}.three-notes p{font-size:var(--ui-sm);color:var(--muted)}.page-intro{padding-top:52px;padding-bottom:30px;max-width:880px}.page-intro h1{font-size:clamp(42px,5vw,60px);margin-bottom:21px}.page-intro p{font-size:16px;color:var(--muted);max-width:var(--measure)}.page-intro .eyebrow{margin-bottom:15px}.breadcrumbs{font-size:var(--ui-xs);color:var(--muted);margin:32px 0 0;display:flex;gap:10px;flex-wrap:wrap}.breadcrumbs a{text-decoration:none}.breadcrumbs span{color:#76899d}.pill{border:1px solid var(--line);display:inline-flex;align-items:center;gap:7px;border-radius:30px;font-size:var(--ui-2xs);padding:5px 10px;color:var(--muted);background:#f9f0f0}.pill.qualified{border-color:#d9aeae;background:var(--gold-light);color:#6a2d34}.pill.unconfirmed{border-color:#d4a8a8;background:#f7e9e9;color:#76323a}.pill.supported{background:var(--sage);color:#21486f;border-color:#c4cad1}.article-header{max-width:850px;padding:36px 0 30px}.article-header h1{font-size:clamp(44px,6vw,76px);margin-bottom:25px}.article-header .subtitle{font-size:19px;line-height:1.65;color:var(--muted);max-width:700px;margin-bottom:22px}.article-header .meta{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.article-header .eyebrow{margin-bottom:17px}.article-grid{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:80px;padding-bottom:55px;align-items:start}.article-body{min-width:0}.article-body .story-visual{height:235px;margin-bottom:38px;border:1px solid var(--line);border-radius:4px}.article-section{margin-bottom:var(--section-gap-md)}.article-section h2{font-size:30px;margin-bottom:15px}.article-section p{font-family:var(--serif);font-size:19px;line-height:1.8;color:#1b3b5b;margin-bottom:13px}.evidence-links{display:flex;flex-wrap:wrap;gap:9px}.evidence-trigger{border:1px solid #ccd2d9;background:var(--sage);color:#204469;padding:7px 11px;border-radius:3px;font-size:var(--ui-2xs);display:inline-flex;align-items:center;gap:7px}.evidence-trigger:hover{background:var(--line)}.evidence-trigger svg{width:13px;height:13px}.evidence-trigger.warn{background:#f2dcdc;border-color:#deb1b1;color:#732c31}.article-aside{position:sticky;top:25px;padding:24px 0;border-top:2px solid var(--forest)}.article-aside h3{font-size:23px;margin-bottom:18px}.aside-item{padding:14px 0;border-bottom:1px solid var(--line)}.aside-item a{font-size:var(--ui-md);display:block;text-decoration:none}.aside-item small{font-size:var(--ui-2xs);text-transform:uppercase;letter-spacing:1.4px;color:var(--gold)}.aside-note{font-size:var(--ui-xs);color:var(--muted);margin-top:23px}.story-lede{font:21px/1.65 var(--serif);color:var(--forest);max-width:var(--measure);margin:0 0 30px}.takeaway{border-left:3px solid var(--gold);padding:6px 0 6px 24px;margin:var(--section-gap-md) 0;font:23px/1.5 var(--serif);color:var(--forest)}.takeaway .eyebrow{font:var(--ui-2xs) var(--sans);margin:0 0 9px;color:var(--gold)}.research-gap{padding:24px;background:#f2dcdb;border:1px solid #ccd2d8;border-radius:4px;margin:35px 0}.research-gap h3{font-size:23px}.research-gap p{font:var(--ui-md)/1.75 var(--sans);color:#26527e}.research-gap p:last-child{margin:0}.next-story{margin:40px 0 0;display:block;padding:27px;background:var(--sage);border:1px solid #c7ced5;text-decoration:none;border-radius:4px}.next-story .eyebrow{margin-bottom:12px}.next-story h3{font-size:27px;margin-bottom:12px}.next-story p{font-size:var(--ui-sm);margin-bottom:0;color:var(--muted)}.filter-panel{border:1px solid var(--line);background:var(--white);border-radius:5px;margin-bottom:24px;padding:23px}.filter-top{display:flex;justify-content:space-between;gap:20px;align-items:center;flex-wrap:wrap}.chips{display:flex;flex-wrap:wrap;gap:7px}.chip{font-size:var(--ui-xs);border:1px solid var(--line);border-radius:3px;padding:9px 15px;background:transparent;min-height:40px}.chip[aria-pressed=true]{background:var(--forest);color:white;border-color:var(--forest)}.segmented{display:flex;border:1px solid var(--line);padding:3px;border-radius:4px;background:var(--paper);gap:3px}.segmented button{border:0;background:transparent;padding:8px 14px;border-radius:2px;font-size:var(--ui-xs);min-height:37px}.segmented button[aria-pressed=true]{background:white;color:var(--forest);box-shadow:0 1px 4px #152e4814}.time-controls{display:flex;align-items:center;gap:24px;border-top:1px solid var(--line);padding-top:20px;margin-top:21px}.time-controls label{font-size:var(--ui-xs);white-space:nowrap}.time-controls output{font:24px var(--serif);color:var(--forest);margin-left:7px}.time-controls input[type=range]{min-width:100px;flex:1;accent-color:var(--forest);height:30px}.time-controls .check-label{display:flex;align-items:center;gap:8px;font-size:var(--ui-2xs);white-space:normal}.check-label input{width:16px;height:16px;accent-color:var(--forest)}.filter-hint{font-size:var(--ui-2xs);color:var(--muted);margin:15px 0 0}.list-tools{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:end;margin-top:18px}.list-tools label{display:flex;flex-direction:column;gap:6px;font-size:var(--ui-2xs);color:var(--muted)}.list-tools .list-find{flex:1 1 220px}.list-tools input[type=search],.list-tools select{font:inherit;font-size:var(--ui-sm);color:var(--text);background:var(--white);border:1px solid #aeb6be;border-radius:3px;padding:9px 11px;min-height:42px;width:100%}.list-tools .list-flag{flex-direction:row;align-items:center;gap:8px;min-height:42px;font-size:var(--ui-xs);color:var(--text)}.list-tools .list-flag input{width:17px;height:17px;accent-color:var(--forest)}.list-note{margin:12px 0 0}.viewer{width:min(1180px,100vw);max-width:100vw;height:min(94dvh,100%);max-height:100dvh;padding:0;border-radius:6px;display:none;flex-direction:column}.viewer[open]{display:flex}.viewer-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line)}.viewer-count{font-size:var(--ui-xs);color:var(--muted)}.viewer-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.viewer-tools button:not(.close-btn){min-height:40px;padding:6px 12px;border:1px solid var(--line);border-radius:3px;background:var(--white);font-size:var(--ui-xs)}.viewer-tools button:disabled{opacity:.45}.viewer-stage{flex:1 1 auto;min-height:0;overflow:auto;background:#1b2530;display:flex;align-items:center;justify-content:center}.viewer-stage img{max-width:100%;max-height:100%;object-fit:contain;display:block;margin:auto}.viewer-stage img.zoomed{max-width:none;max-height:none;margin:0}.viewer-caption{flex:0 0 auto;max-height:32dvh;overflow:auto;padding:12px 16px;border-top:1px solid var(--line);font-size:var(--ui-xs)}.viewer-caption h3{font-size:20px;letter-spacing:-.3px;margin-bottom:8px}.viewer-caption p{margin-bottom:8px}.photo-notes summary,.gate-details>summary{cursor:pointer;font-size:var(--ui-xs);color:var(--forest)}.gate-details{margin:40px 0}.contribute-note{font-size:var(--ui-xs);color:var(--muted);border-top:1px solid var(--line);padding-top:14px;margin:26px 0 0}.return-link{display:inline-flex;gap:8px;align-items:center;margin:14px 0 0;font-size:var(--ui-xs);color:var(--forest);text-decoration:none;border-bottom:1px solid #8798aa}.explore-grid{display:grid;grid-template-columns:1.12fr 1fr;gap:25px;align-items:start;margin-bottom:45px}.connection-panel{background:var(--sage);border:1px solid #c8ced5;border-radius:5px;overflow:hidden;position:sticky;top:20px}.connection-head{padding:23px 25px 0;display:flex;justify-content:space-between;gap:10px}.connection-head h3{font-size:25px;margin:0}.connection-head .fine{font-size:var(--ui-2xs);max-width:130px;text-align:right}.connection-map{position:relative;height:425px;overflow:hidden;margin:0 12px;background:repeating-radial-gradient(ellipse at 90% 12%,transparent 0 32px,#b0b8c122 33px 34px,transparent 35px 69px)}.connection-lines{width:100%;height:100%;position:absolute;inset:0}.node{position:absolute;transform:translate(-50%,-50%);width:142px;min-height:61px;padding:9px 10px;background:#fcf7f7;border:1px solid #b8bfc7;border-radius:4px;text-decoration:none;display:flex;flex-direction:column;justify-content:center;text-align:center;box-shadow:0 3px 7px #152e480a}.node strong{font:16px var(--serif);color:var(--forest);line-height:1.3}.node small{font-size:var(--ui-2xs);letter-spacing:1.1px;text-transform:uppercase;color:var(--gold);margin-top:5px}.node:hover,.node.selected{background:var(--forest);border-color:var(--forest)}.node:hover strong,.node.selected strong{color:#fcf7f7}.node:hover small,.node.selected small{color:#cdd3d9}.connection-note{font-size:var(--ui-2xs);color:var(--muted);padding:0 24px 22px;margin:0}.connection-legend{display:flex;flex-wrap:wrap;gap:12px;font-size:var(--ui-2xs);padding:5px 24px 15px;color:var(--muted)}.connection-legend span:before{content:'';display:inline-block;width:17px;height:1px;background:#607489;vertical-align:middle;margin-right:6px}.connection-legend span:last-child:before{height:0;border-top:1px dashed #607489;background:none}.result-head{display:flex;justify-content:space-between;gap:12px;align-items:center;padding-bottom:14px;margin-bottom:5px}.result-head h3{font-size:24px;margin:0}.timeline-list{margin:0;padding:0;list-style:none}.timeline-item{padding:19px 0 20px 20px;border-left:1px solid #c4cad1;position:relative;margin-left:8px}.timeline-item:before{content:'';position:absolute;left:-5px;top:27px;width:8px;height:8px;background:var(--forest);border-radius:50%;border:2px solid var(--paper)}.timeline-item .time-label{font-size:var(--ui-2xs);text-transform:uppercase;letter-spacing:1.3px;color:var(--gold);display:flex;gap:10px;align-items:center;margin-bottom:7px}.timeline-item h3{font-size:23px;margin-bottom:8px}.timeline-item h3 a{text-decoration:none}.timeline-item p{font-size:var(--ui-xs);color:var(--muted);margin-bottom:10px}.timeline-item .evidence-links{gap:5px}.timeline-item .evidence-trigger{font-size:var(--ui-2xs);padding:5px 7px}.timeline-label-kind{color:var(--muted);background:var(--sage);padding:2px 5px;font-size:var(--ui-2xs);letter-spacing:.5px}.explore-listonly{max-width:840px;margin:0 auto 45px}.explore-empty{padding:30px;border:1px dashed var(--line);background:var(--white);border-radius:5px}.entity-layout{display:grid;grid-template-columns:1.35fr 1fr;gap:65px;margin:10px 0 50px}.entity-layout h2{font-size:31px}.fact-row{border-top:1px solid var(--line);padding:17px 0}.fact-row p{font-size:var(--ui-md);line-height:1.7;margin:0 0 11px}.connection-list{display:grid;gap:11px}.connection-item{border:1px solid var(--line);padding:17px;background:var(--white);border-radius:4px}.connection-item a{font:23px var(--serif);text-decoration:none;color:var(--forest);display:block;margin-bottom:7px}.connection-item .rel{font-size:var(--ui-2xs);color:var(--muted);margin:0 0 10px}.subhead{font:var(--ui-2xs) var(--sans);letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);margin-bottom:15px}.source-list{display:grid;gap:14px;margin-bottom:50px}.source-item{border:1px solid var(--line);padding:24px 28px;background:var(--white);border-radius:4px}.source-item h3{font-size:25px;margin:9px 0 12px}.source-item .source-meta{display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-size:var(--ui-2xs);letter-spacing:1px;color:var(--gold);text-transform:uppercase}.source-item p{font-size:var(--ui-sm);color:var(--muted);margin:0 0 12px}.source-item .claims-using{font-size:var(--ui-2xs)}.notice{padding:18px 23px;background:#f2dcdb;border:1px solid #ccd2d8;border-radius:4px;font-size:var(--ui-sm);margin-bottom:27px}.about-copy{max-width:var(--measure);margin-bottom:55px}.about-copy h2{font-size:30px;margin-top:35px}.about-copy p{font-size:var(--ui-lg);line-height:1.8}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 0 26px}.stat{border:1px solid var(--line);background:var(--white);padding:22px;border-radius:4px}.stat b{display:block;font:35px var(--serif);color:var(--forest)}.stat span{font-size:var(--ui-2xs);color:var(--muted)}.desk-tabs{margin-bottom:25px}.review-table{width:100%;border-collapse:collapse;font-size:var(--ui-xs);margin-bottom:40px}.review-table th{font-size:var(--ui-2xs);letter-spacing:1.4px;text-transform:uppercase;text-align:left;color:var(--muted);border-bottom:2px solid var(--line);padding:13px}.review-table td{border-bottom:1px solid var(--line);padding:16px 13px;vertical-align:top}.review-table td:nth-child(2){width:52%;font-size:var(--ui-sm)}.review-table .pill{font-size:var(--ui-2xs)}.scroll-table{overflow-x:auto}.issue-list{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:40px}.issue-card{padding:25px;background:var(--white);border:1px solid var(--line);border-radius:4px}.issue-card h3{font-size:24px;margin:14px 0}.issue-card p{font-size:var(--ui-sm);color:var(--muted)}.site-footer{max-width:var(--shell);margin-inline:auto;border-top:1px solid var(--line);padding:37px var(--gutter) 30px;display:grid;grid-template-columns:1fr 1fr;column-gap:30px;align-items:start}.footer-title{font:24px var(--serif);text-decoration:none;color:var(--forest)}.site-footer>p:first-of-type{grid-column:1;font-size:var(--ui-xs);color:var(--muted);margin:11px 0 20px}.footer-links{grid-column:2;grid-row:1 / span 2;display:flex;justify-content:flex-end;flex-wrap:wrap;gap:20px;font-size:var(--ui-xs);align-items:center}.footer-links a{text-decoration:none}.footer-links .text-btn{font-size:var(--ui-xs);text-decoration:none}.site-footer .fine{grid-column:1 / -1;font-size:var(--ui-2xs);margin:0;max-width:880px}dialog{color:var(--text);border:1px solid var(--line);box-shadow:0 10px 70px #0d1d2d30;background:var(--white)}dialog::backdrop{background:#0e1d2dd0;backdrop-filter:blur(3px)}dialog.side-dialog{margin:0 0 0 auto;max-height:100dvh;height:100dvh;width:min(580px,100vw);max-width:100vw;border:0;border-left:1px solid var(--line);padding:35px;overflow-y:auto}.dialog-top{display:flex;justify-content:space-between;gap:22px;align-items:start;margin-bottom:23px}.dialog-top h2{font-size:32px;margin-bottom:0}.close-btn{width:42px;height:42px;border:1px solid var(--line);background:var(--white);font:29px var(--sans);border-radius:50%;flex-shrink:0;line-height:1}.side-dialog .eyebrow{margin-bottom:10px;font-size:var(--ui-2xs)}.side-dialog h3{font-size:23px;margin-top:26px;margin-bottom:12px}.claim-statement{font:27px/1.35 var(--serif);color:var(--forest);margin:24px 0}.side-dialog p{font-size:var(--ui-md);line-height:1.8}.source-box{border:1px solid var(--line);padding:18px 20px;margin-top:16px;background:#f7ecec;border-radius:4px}.source-box h4{font:20px/1.35 var(--serif);color:var(--forest);margin:6px 0 10px}.source-box p{font-size:var(--ui-xs);margin-bottom:12px}.source-box .locator{font-size:var(--ui-2xs);border-top:1px solid var(--line);padding-top:12px}.source-box blockquote{font:17px/1.6 var(--serif);margin:14px 0;padding-left:14px;border-left:2px solid #c09092}.source-box .excerpt-label{font-size:var(--ui-2xs);letter-spacing:1px;text-transform:uppercase;color:var(--muted)}.side-dialog .review-note{font-size:var(--ui-2xs);color:var(--muted);border-top:1px solid var(--line);padding-top:19px;margin-top:26px}.search-dialog{width:min(720px,92vw);max-height:85dvh;padding:30px;border-radius:7px;margin:10dvh auto}.search-dialog .dialog-top h2{font-size:34px}#global-search{width:100%;padding:16px;border:1px solid #aeb6be;border-radius:4px;font-size:16px;background:white;color:var(--text);margin-bottom:10px}#search-results{max-height:49dvh;overflow-y:auto}.search-result{display:block;text-decoration:none;border-top:1px solid var(--line);padding:15px 4px}.search-result small{font-size:var(--ui-2xs);color:var(--gold);letter-spacing:1.2px;text-transform:uppercase}.search-result strong{display:block;font:22px var(--serif);color:var(--forest);margin:5px 0}.search-result p{font-size:var(--ui-xs);color:var(--muted);margin:0}.search-result:hover{background:var(--sage)}.search-handoff{border-top:1px solid var(--line);padding-top:14px;margin:0}#search-results .empty-state{margin-bottom:24px}#toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,15px);padding:12px 20px;border-radius:4px;background:var(--forest);color:white;box-shadow:var(--shadow);font-size:var(--ui-xs);max-width:90vw;z-index:100;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s}#toast.show{opacity:1;transform:translate(-50%,0)}.empty-state{padding:55px 25px;background:var(--white);border:1px dashed var(--line);text-align:center;border-radius:5px;margin-bottom:55px}.empty-state h2{font-size:32px}.empty-state p{font-size:var(--ui-md);color:var(--muted)}.noscript{padding:40px}.context-note{font-size:var(--ui-xs);color:var(--muted);border-top:1px solid var(--line);padding-top:17px;margin-top:20px}.route-error{padding:60px 0}.local-only{font-size:var(--ui-2xs);color:var(--muted);margin-bottom:26px}

@media(max-width:1000px){.hero{gap:35px}.hero-art{padding:23px;min-height:420px}.hero h1{font-size:57px}.article-grid{gap:40px;grid-template-columns:minmax(0,1fr) 210px}.visual-community .yearrow{font-size:35px}.visual-community .yearrow span+span:before{margin-right:8px}.explore-grid{grid-template-columns:1fr 1fr}.node{width:122px}.node strong{font-size:var(--ui-md)}.time-controls{gap:12px}.entity-layout{gap:35px}}
@media(max-width:760px){.preview-bar{font-size:var(--ui-2xs);letter-spacing:1px;padding:9px 5vw}.hide-small{display:none}.site-header{padding:18px 5vw;gap:10px;flex-wrap:wrap}.brand{font-size:23px}.brand svg{width:27px}.header-tools{gap:2px;margin-left:auto}.site-header nav{order:3;width:100%;justify-content:center;border-top:1px solid var(--line);padding-top:10px;margin-top:4px;gap:35px;font-size:var(--ui-xs)}.hero{grid-template-columns:1fr;padding-top:40px;padding-bottom:35px;gap:33px}.hero h1{font-size:clamp(43px,9.5vw,66px);letter-spacing:-2px}.hero .lead{font-size:16px}.hero-art{min-height:370px;padding:25px}.art-title{margin-top:24px;font-size:28px}.thread-card{padding:15px}.thread-card+.thread-card{margin-top:24px}.hero-foot{font-size:var(--ui-2xs)}.hero .actions .btn{font-size:var(--ui-xs);padding:12px 15px}.feature-strip{margin-bottom:37px;padding:18px 0;gap:14px}.feature-strip>div{display:block}.feature-strip>div+div{padding-left:14px}.feature-strip strong{font-size:21px;display:block;margin-bottom:4px}.feature-strip span{font-size:var(--ui-2xs)}.story-grid{grid-template-columns:1fr;gap:23px}.story-visual{height:210px}.visual-nameplate .huge{font-size:48px}.visual-community .yearrow{font-size:39px}.visual-community .yearrow span+span:before{margin-right:13px}.section-head{align-items:start}.section-head .text-link{white-space:nowrap;font-size:var(--ui-2xs)}.section-head h2{font-size:33px}.card-body{padding:24px}.card-body h3{font-size:30px}.discovery-band{margin:38px 0;padding:29px;grid-template-columns:1fr;gap:21px}.discovery-band h2{font-size:31px}.discovery-band .btn{width:max-content}.three-notes{grid-template-columns:1fr;gap:22px;margin-bottom:40px}.three-notes>div{position:relative;padding-left:48px}.three-notes .note-number{position:absolute;left:0;top:-3px;font-size:27px}.three-notes h3{font-size:23px;margin-bottom:8px}.three-notes p{margin-bottom:0}.page-intro{padding-top:35px;padding-bottom:20px}.page-intro h1{font-size:44px;letter-spacing:-1.5px}.article-header{padding-top:28px}.article-header h1{font-size:48px;letter-spacing:-1.7px}.article-header .subtitle{font-size:17px}.article-grid{grid-template-columns:1fr;gap:30px}.article-aside{position:static;display:grid;grid-template-columns:1fr 1fr;gap:0 20px}.article-aside h3,.article-aside .aside-note{grid-column:1 / -1}.article-body .story-visual{height:220px}.article-section h2{font-size:29px}.article-section p{font-size:18px;line-height:1.8}.article-header .eyebrow{font-size:var(--ui-2xs)}.explore-grid{grid-template-columns:1fr}.connection-panel{position:relative;top:auto}.connection-map{height:420px}.node{width:138px}.node strong{font-size:16px}.filter-panel{padding:18px}.filter-top{gap:14px}.chips{gap:5px}.chip{font-size:var(--ui-2xs);padding:8px 11px}.time-controls{flex-wrap:wrap;gap:7px 15px}.time-controls>label:first-child{width:100%;margin-bottom:0}.time-controls input[type=range]{flex:1;min-width:150px}.time-controls .check-label{max-width:125px}.time-controls output{font-size:23px}.entity-layout{grid-template-columns:1fr;gap:30px}.stat-grid{grid-template-columns:1fr 1fr;gap:10px}.stat{padding:15px 20px}.stat b{font-size:30px}.issue-list{grid-template-columns:1fr}.review-table{min-width:580px}.source-item{padding:22px}.source-item h3{font-size:24px}.site-footer{grid-template-columns:1fr;padding-top:30px;gap:0}.footer-links{grid-column:1;grid-row:auto;justify-content:flex-start;margin:0 0 18px;gap:18px}.site-footer .fine{font-size:var(--ui-2xs)}.search-dialog{padding:21px;margin-top:5dvh;max-height:90dvh}.search-dialog .dialog-top h2{font-size:29px}.side-dialog{padding:24px!important}.claim-statement{font-size:25px}.desktop-only{display:none}}
@media(max-width:370px){.brand{font-size:21px}.site-header nav{gap:30px}.hero-art{padding:19px}.thread-card+.thread-card{margin-left:20px}.visual-nameplate .huge{font-size:39px;letter-spacing:2px}.visual-community .yearrow{font-size:32px}.visual-community .yearrow span+span:before{margin-right:8px}.connection-map{margin:0;height:400px}.node{width:112px}.node strong{font-size:var(--ui-md)}.article-header h1{font-size:42px}.section-head{flex-wrap:wrap}.time-controls input[type=range]{min-width:110px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}.story-card:hover,.thread-card:hover{transform:none}}
@media print{.skip-link,.preview-bar,.site-header,.site-footer,.header-tools,.save-btn,.actions,.article-aside,.filter-panel,#toast{display:none!important}body{background:white;color:black}.container{padding:0;max-width:none}.article-grid{display:block}.article-header h1{font-size:34pt}.article-section p{font-size:12pt}.article-section h2{font-size:20pt}.evidence-links{display:block}.evidence-trigger{display:inline-block;font-size:8pt;border:none;padding:0 8px 0 0}.story-visual{break-inside:avoid}.article-section,.source-box{break-inside:avoid}.page-intro{padding-top:0}a[href^=http]:after{content:' (' attr(href) ')';font-size:8pt}dialog:not([open]){display:none}}
/* Keep the editorial panels readable at every card width. */
.story-card > a{display:block;text-decoration:none}
.story-visual{container-type:inline-size}
.visual-nameplate .huge{font-size:clamp(24px,10cqw,59px);letter-spacing:2px;white-space:nowrap}
.visual-community .yearrow{font-size:clamp(25px,10cqw,43px);gap:6px}
.visual-community .yearrow span+span:before{margin-right:8px}
@media(max-width:440px){.story-visual{padding:22px}.visual-nameplate .subtitle{font-size:var(--ui-2xs);letter-spacing:1.7px}.visual-community .subrow{font-size:var(--ui-2xs);letter-spacing:1px}}
.date-nav{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 22px;padding-bottom:22px;border-bottom:1px solid var(--line)}.date-nav .btn{white-space:nowrap}.cal-picker{display:flex;align-items:center;gap:9px;font-size:var(--ui-xs);color:var(--muted);margin-left:auto}.cal-picker input{font:inherit;padding:10px 12px;min-height:40px;border:1px solid var(--line);border-radius:3px;background:var(--white);color:var(--text)}.cal-decade{margin-bottom:30px}.cal-list{display:grid;gap:14px}.cal-item{border:1px solid var(--line);border-left:3px solid var(--gold);background:var(--white);border-radius:4px;padding:20px 24px}.cal-item h3{font-size:24px;margin:12px 0 10px}.cal-item h3 a{text-decoration:none}.cal-item p{font-size:var(--ui-sm);color:var(--muted);margin-bottom:10px}.cal-item .fine{margin-bottom:12px}.cal-item-top{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}.cal-when{font-size:var(--ui-2xs);letter-spacing:1.3px;text-transform:uppercase;color:var(--muted)}.cal-month{border-top:1px solid var(--line);padding-top:32px;margin-top:34px}.cal-month h2{font-size:30px;margin-bottom:8px}@media(max-width:720px){.cal-picker{margin-left:0;width:100%}.date-nav .btn{flex:1}}
/* ---------------------------------------------------------------------------
   Evidence summary. Uses --forest (#17324d navy) and --gold (#b73532 heritage
   red): the variable names are legacy, the values are the Americana palette.
   The category is carried by WORDS:
   color only reinforces a label that is already written out. Red is a brand
   accent here, never a verdict of falsehood. */
.summary-chip{margin:10px 0 0;padding:9px 12px;border-left:3px solid var(--forest);
  background:#eef1f5;font-size:var(--ui-md);line-height:1.45;border-radius:0 4px 4px 0}
.summary-chip strong{display:block;letter-spacing:.06em;text-transform:uppercase;
  font-size:var(--ui-2xs);color:var(--forest)}
.summary-chip span{color:#33414f}
.summary-chip.summary-fact_or_fable{border-left-color:var(--gold)}
.summary-chip.summary-fact_or_fable strong{color:var(--gold)}

.evidence-summary{margin:0 0 34px;padding:22px 24px;border:1px solid var(--line);
  border-top:4px solid var(--forest);background:#f7f9fb;border-radius:3px}
.evidence-summary.summary-fact_or_fable{border-top-color:var(--gold)}
.evidence-summary h2{margin:.2em 0 .5em;font-size:1.45rem;line-height:1.25}
.evidence-summary>p{margin:0 0 16px;color:#33414f}
.focal-list{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:12px}
.focal-claim{background:#fff;border:1px solid var(--sage);border-radius:3px;padding:13px 15px}
.focal-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:6px}
.focal-asserts{font-size:var(--ui-2xs);letter-spacing:.08em;text-transform:uppercase;
  font-weight:700;color:var(--forest);background:var(--sage);padding:3px 8px;border-radius:2px}
.focal-claim p{margin:0 0 10px;font-size:var(--ui-lg)}
.focal-claim .evidence-trigger{margin:0;min-height:44px;padding:10px 14px;font-size:var(--ui-xs)}
/* 44px is the comfortable touch minimum. The site's other evidence buttons
   sit at about 34px; this is a targeted improvement inside the new panel
   rather than a restyle of every button on the site. */
@media (max-width:600px){
  .evidence-summary{padding:18px 16px}
  .evidence-summary h2{font-size:1.2rem}
  .focal-head{gap:6px}
}

/* ---------------------------------------------------------------------------
   Watch and Listen. Link-out cards, not embeds. Every card carries the honesty
   label in words; the muted band behind it reinforces a sentence that is
   already written out. */
.video-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),405px));gap:20px;margin-bottom:45px;justify-content:center}
.video-card{background:var(--white);border:1px solid var(--line);border-radius:5px;
  padding:22px 24px;display:flex;flex-direction:column}
.video-card h3{font-size:23px;margin:10px 0 8px;line-height:1.25}
.video-top{display:flex;justify-content:space-between;align-items:center;gap:12px;
  font-size:var(--ui-2xs);letter-spacing:1.3px;text-transform:uppercase}
.video-format{color:var(--gold)}
.video-place{color:var(--muted)}
.video-channel{font-size:var(--ui-xs);color:var(--muted);margin:0 0 12px}
.video-note{font-size:var(--ui-md);line-height:1.65;margin:0 0 12px}
.video-caution{font-size:var(--ui-xs);line-height:1.6;background:#eef1f5;border-left:3px solid var(--forest);
  padding:10px 12px;margin:0 0 14px;border-radius:0 3px 3px 0}
.video-caution strong{display:block;color:var(--forest)}
.video-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.video-tag{font-size:var(--ui-2xs);letter-spacing:.6px;text-transform:uppercase;background:var(--sage);
  color:var(--forest);border-radius:2px;padding:4px 8px}
.video-subjects{font-size:var(--ui-xs);color:var(--muted);margin:0 0 14px}
.video-card .btn{margin-top:auto;align-self:flex-start;min-height:44px}
@media(max-width:760px){.video-grid{grid-template-columns:1fr;gap:16px}
  .video-card{padding:18px}.video-card h3{font-size:21px}}

/* =========================================================================
   v0.2. New reader-facing components. The tokens above are reused unchanged,
   so the palette and type scale are the same; what changes is the structure.
   ========================================================================= */
.main-nav{display:flex;gap:22px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.main-nav::-webkit-scrollbar{display:none}
.hero-copy{min-width:0}
.hero .lead{font-size:clamp(16px,1.4vw,19px);max-width:34em}
.hero-foot{display:block;font-size:var(--ui-xs);letter-spacing:.3px}
.hero-panel{background:var(--white);border:1px solid var(--line);border-radius:6px;padding:30px 32px;box-shadow:var(--shadow);align-self:start}
.panel-eyebrow{display:block;font-size:var(--ui-2xs);letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.how-list{margin:0 0 18px;padding-left:0;list-style:none;counter-reset:how}
.how-list li{counter-increment:how;position:relative;padding:0 0 15px 40px;font-size:var(--ui-md);line-height:1.55}
.how-list li::before{content:counter(how,decimal-leading-zero);position:absolute;left:0;top:1px;font-size:var(--ui-xs);letter-spacing:1px;color:var(--gold)}
.how-list b{color:var(--ink)}
.panel-note{margin:0;padding-top:16px;border-top:1px solid var(--line);font-size:var(--ui-xs);color:var(--muted)}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0 0 60px}
.pillar{display:block;text-decoration:none;background:var(--white);border:1px solid var(--line);border-radius:6px;padding:26px 28px;transition:border-color .15s,transform .15s}
.pillar:hover{border-color:var(--ink);transform:translateY(-2px)}
.pillar-n{font-size:var(--ui-2xs);letter-spacing:2px;color:var(--gold)}
.pillar h3{margin:10px 0 8px;font-size:24px}
.pillar p{font-size:var(--ui-md);color:var(--muted);margin-bottom:14px}
.honesty-band{background:var(--forest);color:var(--sage);border-radius:6px;padding:46px 5%;margin:20px 0 60px}
.honesty-band h2{color:#fff;max-width:18em}
.honesty-band p{max-width:var(--measure);color:#c9d5e0;font-size:var(--ui-lg)}
.honesty-band .eyebrow{color:#9fb3c8}
.honesty-band .btn.secondary{border-color:#7d93ab;color:var(--paper)}
.type-group{margin-bottom:44px}
.group-head{font-size:22px;letter-spacing:-.4px;border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:20px;display:flex;align-items:baseline;gap:10px}
.group-head span{font-size:var(--ui-2xs);font-family:var(--sans);letter-spacing:1.5px;color:var(--muted)}
.entity-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),300px));gap:14px;justify-content:center}
.entity-card{background:var(--white);border:1px solid var(--line);border-radius:5px;padding:20px 22px;display:flex;flex-direction:column}
.entity-card a{text-decoration:none;display:block}
.entity-card .kind{font-size:var(--ui-2xs);letter-spacing:1.8px;text-transform:uppercase;color:var(--gold)}
.entity-card h3{font-size:21px;margin:6px 0 10px}
.entity-card p{font-size:var(--ui-md);color:var(--muted);flex:1}
.entity-foot{display:flex;flex-wrap:wrap;gap:14px;font-size:var(--ui-2xs);color:var(--muted);border-top:1px solid var(--line);padding-top:12px;margin-top:4px}
.connections-section{margin-top:20px}
.rel-list{list-style:none;margin:0 0 40px;padding:0;display:grid;gap:12px}
.rel-row{background:var(--white);border:1px solid var(--line);border-left:3px solid var(--sage);border-radius:5px;padding:18px 22px}
.rel-line{font-size:19px;font-family:var(--serif);color:var(--ink);margin-bottom:4px}
.rel-arrow{color:var(--gold);padding:0 4px}
.rel-label{font-size:var(--ui-md);color:var(--muted);margin-bottom:10px}
.rel-foot{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.century{margin-bottom:46px}
.century-head{font-size:24px;border-bottom:2px solid var(--ink);padding-bottom:10px;margin-bottom:0;display:flex;align-items:baseline;gap:10px}
.century-head span{font-size:var(--ui-2xs);font-family:var(--sans);letter-spacing:1.5px;color:var(--muted)}
.time-list{list-style:none;margin:0;padding:0}
.time-entry{display:grid;grid-template-columns:190px 1fr;gap:26px;padding:24px 0;border-bottom:1px solid var(--line)}
.time-when{display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.time-date{font-size:20px;font-family:var(--serif);color:var(--ink);letter-spacing:-.4px}
.time-prec{font-size:var(--ui-2xs);letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.role-tag{display:inline-block;font-size:var(--ui-2xs);letter-spacing:1.4px;text-transform:uppercase;padding:3px 8px;border-radius:3px;border:1px solid var(--line);background:var(--sage);color:var(--ink)}
.role-tag.role-document{background:var(--gold-light);border-color:#e2c4c3;color:var(--rust)}
.role-tag.role-publication{background:#e8e2f0;border-color:#cfc4de;color:#4a3a63}
.time-body h3{font-size:23px;margin-bottom:8px}
.time-body h3 a{text-decoration:none}
.time-body p{font-size:var(--ui-lg);margin-bottom:9px}
.time-role-note{font-size:var(--ui-xs);color:var(--muted);font-style:italic}
.time-entry.role-document,.time-entry.role-publication{background:var(--white)}
.notice-key{background:var(--white);border-left:3px solid var(--gold);font-size:var(--ui-md)}
.evidence-explainer{margin-bottom:46px}
.explain-grid,.vocab-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.explain-grid>div,.vocab{background:var(--white);border:1px solid var(--line);border-radius:5px;padding:24px 26px}
.explain-n{font-size:var(--ui-2xs);letter-spacing:2px;color:var(--gold)}
.explain-grid h3{font-size:20px;margin:8px 0}
.explain-grid p,.vocab p{font-size:var(--ui-md);color:var(--muted);margin-bottom:0}
.vocab-grid{margin-bottom:46px}
.vocab p{margin:12px 0}
.vocab-count{font-size:var(--ui-2xs);letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}
.worked-example{background:var(--white);border:1px solid var(--line);border-radius:6px;padding:34px 36px;margin-bottom:40px}
.worked-example .claim-statement{font-size:22px;line-height:1.4;font-family:var(--serif);color:var(--ink);margin:12px 0 16px}
.source-by{font-size:var(--ui-sm);color:var(--muted)}
.source-limit{font-size:var(--ui-md);overflow-wrap:anywhere}
.source-foot{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:14px;margin-top:6px}
.desk-callout{background:var(--white);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:5px;padding:30px 34px;margin-bottom:40px}
.desk-callout h2{font-size:28px;margin-bottom:14px}
.desk-callout p{font-size:var(--ui-lg);margin-bottom:14px}
.stat-grid.big{grid-template-columns:repeat(4,1fr)}
.stat-grid.big .stat b{font-size:38px}
.stat b{display:block;font-size:32px;font-family:var(--serif);color:var(--ink);line-height:1.1}
.stat span{display:block;margin-top:6px;font-size:var(--ui-xs);color:var(--muted)}
.stat.accent{background:var(--forest);border-color:var(--forest)}
.stat.accent b{color:#fff}
.stat.accent span{color:#b8c8d8}
.lane-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-bottom:30px}
.lane{background:var(--white);border:1px solid var(--line);border-radius:5px;padding:20px 22px}
.lane h3{font-size:18px;margin-bottom:8px;line-height:1.25}
.lane p{font-size:var(--ui-sm);color:var(--muted);margin:0}
.lane b{color:var(--ink)}
.mini-time{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:9px}
.mini-time li{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:var(--ui-md);padding-bottom:9px;border-bottom:1px solid var(--line)}
.mini-time span:first-child{font-size:16px;font-family:var(--serif);color:var(--ink);min-width:110px}
.fact-foot{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:8px}
.chip-rows{display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--line);padding-top:16px;margin-top:16px}
@media (max-width:1000px){
 .pillars,.explain-grid,.vocab-grid,.stat-grid.big{grid-template-columns:1fr 1fr}
 .hero-panel{padding:24px}
}
@media (max-width:760px){
 .pillars,.explain-grid,.vocab-grid,.stat-grid.big{grid-template-columns:1fr}
 .time-entry{grid-template-columns:1fr;gap:12px}
 .time-when{flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px}
 .honesty-band{padding:32px 24px}
 .worked-example,.desk-callout{padding:24px 22px}
 .rel-line{font-size:17px}
 .main-nav{gap:16px}
}
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
 .pillar:hover{transform:none}
}
.stat-grid.big.three{grid-template-columns:repeat(3,1fr)}

/* WO-2026-09-09-ourclarke-v02-mobile-hotfix: two phone-width repairs, appended
   LAST on purpose so ordinary cascade order settles them.
   1. .stat-grid.big.three above wins over the <=760px one-column .stat-grid.big
      rule on specificity (three classes against two), so the three research
      tiles stayed three columns on a 375px phone and the third ran 7px past the
      viewport. Same selector, same specificity, later in the file: one column.
   2. The 0.1.1 mobile rule .site-header nav centers the row. A centered flex row
      that overflows clips at BOTH ends and cannot be scrolled to its start, so
      Explore sat at left -67px and was unreachable. .site-header .main-nav
      out-specifies it (0,2,0 over 0,1,1); flex-start keeps the intentional
      horizontal scroll and makes the first link the first thing visible. */
@media (max-width:760px){
 .stat-grid.big.three{grid-template-columns:1fr}
 .site-header .main-nav{justify-content:flex-start}
}

/* ==========================================================================
   v0.3 — real routes, the visual archive, and the four-icon system.
   Palette unchanged: --forest #17324d navy, --gold #b73532 rust, --sage,
   --paper. No new color is introduced; rust is hover and accent only.
   ========================================================================== */

/* The icon set. Always beside text, always currentColor, never its own color. */
.icon{flex-shrink:0;vertical-align:-.18em}
.brand-mark{height:26px;width:auto;display:block}
.icon-btn{min-width:44px;min-height:44px}
.save-btn{width:44px;height:44px}

/* Icon+label pairings. The gap is the pairing; the text is never optional. */
.way h3 .icon,.evidence-trigger .icon,.go-deeper .icon,.format-marks .icon,.why-matters .icon{color:var(--forest)}
.eyebrow .icon,.hub-kind .icon{vertical-align:-.25em;margin-right:7px;color:var(--gold)}

/* ---- Hero ---------------------------------------------------------------- */
.hero-sub{max-width:490px;font-size:var(--ui-md);line-height:1.75;color:var(--muted);border-left:2px solid var(--sage);padding-left:16px;margin-top:22px}
.hero .lead{font-size:19px;color:var(--text)}

/* ---- Choose your way into Clarke ----------------------------------------- */
.ways{margin:10px 0 62px}
.ways-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.way{display:flex;flex-direction:column;gap:10px;padding:26px 24px 22px;background:var(--white);border:1px solid var(--line);border-top:3px solid var(--forest);border-radius:5px;text-decoration:none;min-height:44px;transition:transform .2s,box-shadow .2s,border-color .2s}
.way:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-top-color:var(--gold)}
.way:hover .way-icon{color:var(--gold)}
.way-icon{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:var(--sage);color:var(--forest);transition:color .2s,background .2s}
.way h3{font-size:24px;margin:6px 0 0;letter-spacing:-.4px}
.way p{font-size:var(--ui-sm);color:var(--muted);line-height:1.65;margin:0;flex:1}
.way .text-link{border-bottom:0;font-size:var(--ui-xs);gap:8px;color:var(--forest)}
.way-story{border-top-color:var(--forest)}.way-video{border-top-color:#2b4a6b}
.way-photo{border-top-color:#3d5f80}.way-evidence{border-top-color:var(--rust)}

/* ---- Home bands ---------------------------------------------------------- */
.feature-band,.era-band,.archive-band{margin-bottom:62px}
.feature-grid{grid-template-columns:repeat(3,1fr)}
.era-row{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.era{display:flex;flex-direction:column;gap:5px;padding:20px 18px;background:var(--white);border:1px solid var(--line);border-radius:4px;text-decoration:none;transition:background .2s,border-color .2s}
.era:hover{background:var(--sage);border-color:#8797a9}
.era-range{font:22px var(--serif);color:var(--forest);letter-spacing:-.4px}
.era-label{font-size:var(--ui-sm);color:var(--text)}
.era-count{font-size:var(--ui-2xs);color:var(--muted)}
.archive-preview{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),520px));gap:20px;justify-content:center}
.arch-card{display:flex;flex-direction:column;gap:9px;padding:28px;background:var(--forest);color:var(--paper);border-radius:5px;text-decoration:none;transition:transform .2s}
.arch-card:hover{transform:translateY(-3px)}
.arch-kind{font-size:var(--ui-2xs);letter-spacing:2px;text-transform:uppercase;color:#b9c6d4}
.arch-card b{font:38px var(--serif);color:#fff;line-height:1}
.arch-card p{font-size:var(--ui-sm);color:#c8ced5;margin:0;flex:1}
.arch-card .text-link{color:var(--paper);border-bottom-color:#7d93ab;width:max-content}

/* ---- Story cards: visual area, format marks ------------------------------ */
.card-visual{display:block;text-decoration:none}
.format-marks{display:flex;flex-wrap:wrap;gap:7px;list-style:none;margin:0 0 20px;padding:0}
.format-marks li{display:inline-flex;align-items:center;gap:6px;font-size:var(--ui-2xs);color:var(--muted);background:var(--paper);border:1px solid var(--line);border-radius:3px;padding:5px 9px;line-height:1.3}
.article-header .format-marks{margin:0}
.saved-card .card-body{padding-top:26px}

/* ---- Why this matters, pull facts, pull quote, go deeper ----------------- */
.why-matters{max-width:850px;margin:0 0 34px;padding:22px 26px;background:var(--sage);border-left:3px solid var(--forest);border-radius:0 4px 4px 0}
.why-matters .eyebrow{margin-bottom:9px;display:flex;align-items:center;color:var(--forest)}
.why-matters p{font:19px/1.65 var(--serif);color:var(--forest);margin:0}
.pull-facts{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 32px;padding:0 0 26px;border-bottom:1px solid var(--line)}
.pull-fact{display:flex;flex-direction:column;gap:2px;min-width:120px;flex:1}
.pull-fact b{font:31px var(--serif);color:var(--forest);line-height:1.1}
.pull-fact span{font-size:var(--ui-2xs);color:var(--muted);line-height:1.45}
.go-deeper{display:inline-flex;align-items:center;gap:9px;margin:30px 0 0;padding:12px 18px;min-height:44px;background:var(--white);border:1px solid var(--forest);border-radius:3px;text-decoration:none;font-size:var(--ui-sm);color:var(--forest)}
.go-deeper:hover{background:var(--sage)}
.go-deeper span{display:inline}

/* ---- Evidence drawers: native <details>, no dialog ----------------------- */
.evidence-drawer{border:1px solid #ccd2d9;border-radius:3px;background:var(--sage);overflow:hidden;margin:0}
.evidence-drawer.warn{background:#f2dcdc;border-color:#deb1b1}
.evidence-drawer>summary.evidence-trigger{display:flex;align-items:center;gap:8px;list-style:none;cursor:pointer;padding:9px 12px;min-height:44px;font-size:var(--ui-2xs);border:0;background:transparent;color:#204469}
.evidence-drawer>summary::-webkit-details-marker{display:none}
.evidence-drawer.warn>summary.evidence-trigger{color:#732c31}
.evidence-drawer>summary:hover{background:var(--line)}
.evidence-drawer.warn>summary:hover{background:#ecd2d2}
.evidence-drawer[open]>summary{border-bottom:1px solid #ccd2d9}
.evidence-body{padding:20px 22px;background:var(--white)}
.evidence-body h4{font:20px var(--serif);color:var(--forest);margin:22px 0 9px;font-weight:400}
.evidence-body h5{font:19px/1.35 var(--serif);color:var(--forest);margin:6px 0 10px;font-weight:400}
.evidence-body h5 a{text-decoration:none;border-bottom:1px solid #8798aa}
.evidence-body p{font-size:var(--ui-sm);line-height:1.75}
.evidence-body .claim-statement{font-size:21px;margin:16px 0}
.evidence-body .review-note{font-size:var(--ui-2xs);color:var(--muted);border-top:1px solid var(--line);padding-top:15px;margin-top:20px}
.evidence-body .focal-asserts{margin-left:8px}
.evidence-links{flex-direction:column;align-items:stretch;gap:7px}
.fact-foot .evidence-drawer,.rel-foot .evidence-drawer,.connection-item .evidence-drawer{width:100%;margin-top:9px}

/* ---- Research desk: stacked sections, no tabs ---------------------------- */
.jump-nav{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:0 0 22px;margin-bottom:26px;border-bottom:1px solid var(--line)}
.jump-nav a{font-size:var(--ui-sm);text-decoration:none;border-bottom:1px solid #8798aa;padding:10px 2px;min-height:44px;display:inline-flex;align-items:center}
.jump-nav .btn{margin-left:auto;border-bottom:1px solid var(--forest)}
#desk-research,#desk-method,#desk-released{scroll-margin-top:20px;margin-bottom:50px}
#desk-research h2,#desk-method h2,#desk-released h2{font-size:34px;margin-bottom:20px;padding-bottom:12px;border-bottom:2px solid var(--forest)}
.src-cell a{font-size:var(--ui-2xs);text-decoration:none;border-bottom:1px solid #8798aa;margin-right:6px;white-space:nowrap}

/* ---- The archive hub ----------------------------------------------------- */
.archive-hub{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),520px));gap:20px;margin-bottom:52px;justify-content:center}
.hub-card{display:flex;flex-direction:column;gap:6px;padding:34px 32px;background:var(--white);border:1px solid var(--line);border-top:3px solid var(--forest);border-radius:5px;text-decoration:none;transition:transform .2s,box-shadow .2s}
.hub-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.hub-kind{font-size:var(--ui-2xs);letter-spacing:2px;text-transform:uppercase;color:var(--gold)}
.hub-count{font:56px var(--serif);color:var(--forest);line-height:1.05}
.hub-label{font-size:var(--ui-xs);color:var(--muted);margin-bottom:8px}
.hub-card p{font-size:var(--ui-sm);color:var(--muted);line-height:1.7;flex:1}
.archive-why{max-width:var(--measure);margin-bottom:55px}
.archive-why h2{font-size:32px;margin-bottom:18px}
.archive-why p{font-size:var(--ui-lg);line-height:1.8}

/* ---- Photographs: the honest empty state and the rights gate ------------- */
.photo-empty{display:grid;grid-template-columns:280px 1fr;gap:38px;align-items:center;margin-bottom:50px;padding:34px;background:var(--white);border:1px solid var(--line);border-radius:5px}
.photo-empty-mark{aspect-ratio:4/3;border:2px dashed #b6bfc9;border-radius:4px;display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(135deg,transparent 0 11px,var(--sage) 11px 12px)}
.photo-empty-mark span{font-size:var(--ui-2xs);letter-spacing:2px;text-transform:uppercase;color:#6b7b8c;background:var(--white);padding:7px 12px;border-radius:3px}
.photo-empty-copy h2{font-size:31px;margin-bottom:14px}
.photo-empty-copy p{font-size:var(--ui-md);line-height:1.8;color:var(--muted)}
.photo-empty-copy p:last-child{margin-bottom:0}
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px;margin-bottom:48px}
.photo-item{margin:0;background:var(--white);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.photo-item img{width:100%;height:auto;display:block}
.photo-item figcaption{padding:18px 20px}
.photo-item h3{font-size:20px;margin-bottom:8px}
.photo-credit{margin-bottom:8px}
.story-illustration{margin:0 0 38px;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--white)}
.story-illustration img{width:100%;height:auto;display:block}
.story-illustration figcaption{padding:16px 20px}
.illus-what{margin-bottom:6px}
.story-illustration .fine{margin:0}
.gate{margin-bottom:44px}
.gate-list{list-style:none;margin:0 0 22px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.gate-list li{display:flex;gap:16px;padding:22px 24px;background:var(--white);border:1px solid var(--line);border-radius:4px}
.gate-n{font:26px var(--serif);color:var(--gold);line-height:1}
.gate-list h3{font-size:20px;margin-bottom:7px}
.gate-list p{font-size:var(--ui-sm);color:var(--muted);margin:0;line-height:1.65}

/* ---- Related media and per-story sources -------------------------------- */
.related-media,.story-sources{border-top:1px solid var(--line);padding-top:var(--section-gap-md);margin-bottom:16px}
.story-sources .source-list{margin-bottom:26px}

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width:1000px){
 .ways-grid{grid-template-columns:1fr 1fr}
 .era-row{grid-template-columns:repeat(3,1fr)}
 .feature-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
 .ways-grid,.archive-preview,.archive-hub,.gate-list,.feature-grid{grid-template-columns:1fr}
 .era-row{grid-template-columns:1fr 1fr}
 .way{padding:22px 20px}
 .way h3{font-size:22px}
 .hub-count{font-size:46px}
 .photo-empty{grid-template-columns:1fr;gap:24px;padding:24px}
 .photo-empty-mark{max-width:260px}
 .photo-empty-copy h2{font-size:27px}
 .why-matters{padding:18px 20px}
 .why-matters p{font-size:17px}
 .pull-facts{gap:18px}
 .pull-fact{min-width:calc(50% - 12px)}
 .jump-nav .btn{margin-left:0;width:100%;justify-content:center}
 #desk-research h2,#desk-method h2,#desk-released h2{font-size:28px}
 .evidence-body{padding:16px 17px}
 .archive-why h2{font-size:27px}
 .brand-mark{height:22px}
}
@media (max-width:370px){
 .era-row{grid-template-columns:1fr}
 .hub-count{font-size:40px}
 .pull-fact{min-width:100%}
}
@media (prefers-reduced-motion:reduce){
 .way:hover,.era:hover,.arch-card:hover,.hub-card:hover{transform:none}
}
@media print{
 .ways,.era-band,.archive-preview,.jump-nav,.go-deeper{display:none!important}
 .evidence-drawer{border:0;background:none}
 .evidence-drawer>summary{display:none}
 .evidence-body{display:block!important;padding:0}
}

/* ---- Contrast corrections found by qa/v03/verify.mjs ---------------------
   Two pairs measured under WCAG AA against the color actually painted behind
   them, not against an assumed page ground.

   The eyebrow at #b73532 clears 4.5:1 on the page ground (5.43) but lands at
   4.49:1 on the pink notice and research-gap panels -- one hundredth under, on
   11px text. #9c2c29 is the same rust one step darker: 6.91 on the page ground,
   5.7 on the pink. Still the Americana accent; the palette tokens are unchanged
   and this is a usage override.

   The breadcrumb separator sat at 3.32:1, well under the floor for small text. */
.eyebrow{color:#9c2c29}
.breadcrumbs span{color:var(--muted)}

/* ==========================================================================
   v0.3.1 — discovery first.
   Bands are full width; their contents sit in the shared shell. Palette,
   tokens and type scale unchanged.
   ========================================================================== */

.home .band{padding-block:var(--section-gap-lg)}
.home .band + .band{padding-top:0}
.home .hero-band{padding-top:clamp(30px,3.6vw,58px)}

/* ---- Hero: motto, one line, three ways on ------------------------------- */
.hero-v31{padding-bottom:clamp(10px,1.4vw,22px)}
.hero-v31 h1{margin-bottom:22px;max-width:16em}
.hero-v31 h1 em{font-style:italic}
.hero-v31 .lead{font-size:clamp(17px,1.35vw,21px);color:var(--text);line-height:1.65;margin-bottom:0}
.hero-v31 .actions{margin-top:30px}
.home-search{margin-top:26px;padding-top:22px;border-top:1px solid var(--line);max-width:var(--measure)}
.home-search label{display:block;font-family:var(--serif);font-size:19px;color:var(--ink);margin-bottom:6px}
.home-search .fine{margin-bottom:12px}
.home-search-row{display:flex;flex-wrap:wrap;gap:10px}
.home-search-row input{flex:1 1 220px;min-width:0;padding:14px 16px;border:1px solid #aeb6be;border-radius:4px;font-size:16px;background:var(--white);color:var(--text)}
.home-search-row .btn{flex:0 0 auto}
.home-search-fallback{margin-top:26px;padding-top:22px;border-top:1px solid var(--line);max-width:var(--measure)}
@media(max-width:440px){.home-search-row{flex-wrap:nowrap;flex-direction:column;align-items:stretch}.home-search-row input{flex:0 0 auto}.home-search-row .btn{width:100%}}
.btn.ghost{background:transparent;color:var(--forest);border-style:dashed}
.btn.ghost:hover{background:var(--sage);border-style:solid}

/* ---- Six doors, deliberately unequal ------------------------------------ */
/* 12 columns so the six doors can be deliberately unequal: two large, three
   medium, one full-width strip. Never a uniform four-across row. */
.doors{display:grid;gap:16px;grid-template-columns:repeat(12,1fr)}
.door{grid-column:span 4;display:flex;flex-direction:column;gap:8px;padding:24px 24px 22px;
 background:var(--white);border:1px solid var(--line);border-top:3px solid var(--forest);
 border-radius:5px;text-decoration:none;transition:transform .2s,box-shadow .2s,border-color .2s}
.door:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-top-color:var(--gold)}
.door:hover .door-icon{color:var(--gold)}
.door-lg{grid-column:span 6;padding:30px 30px 26px}
.door-wide{grid-column:span 12;flex-direction:row;align-items:center;justify-content:space-between;gap:24px;padding:20px 28px}
.door-wide-copy h3{margin-top:0}.door-wide-copy p{max-width:52ch}
.door-icon{display:flex;align-items:center;justify-content:center;width:46px;height:46px;
 border-radius:50%;background:var(--sage);color:var(--forest);transition:color .2s}
.door-lg .door-icon{width:56px;height:56px}
.door h3{font-size:23px;margin:6px 0 0;letter-spacing:-.4px}
.door-lg h3{font-size:31px}
.door p{font-size:var(--ui-sm);color:var(--muted);line-height:1.65;margin:0;flex:1;max-width:44ch}
.door-lg p{font-size:var(--ui-lg)}
.door-meta{font-size:var(--ui-2xs);letter-spacing:1.3px;text-transform:uppercase;color:var(--gold)}
.door-surprise{border-top-style:dashed}

/* ---- One featured story, given real weight ------------------------------ */
.featured{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,3vw,48px);
 align-items:center;background:var(--white);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.featured-visual{display:block;text-decoration:none;align-self:stretch}
.featured-visual .story-visual{height:100%;min-height:320px;border-bottom:0;border-right:1px solid var(--line)}
.featured-copy{padding:clamp(24px,2.4vw,40px) clamp(24px,2.4vw,40px) clamp(24px,2.4vw,36px) 0}
.featured-copy h3{font-size:clamp(30px,3vw,42px);margin:10px 0 16px;letter-spacing:-1px}
.featured-copy h3 a{text-decoration:none}
.featured-sub{font:italic 18px/1.5 var(--serif);color:var(--gold);margin:-8px 0 14px}
.featured-lead{font-size:16px;line-height:1.75;color:var(--muted);margin-bottom:20px}
.featured .card-meta{margin-bottom:0;flex-wrap:wrap;gap:12px;justify-content:flex-start}
.featured .format-marks{margin-bottom:22px}
.featured .card-bottom{justify-content:flex-start;gap:16px}

/* ---- How this works: the relocated methodology -------------------------- */
.how-band{background:var(--sage);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:clamp(20px,3vw,48px)}
.how-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(28px,3.5vw,64px);align-items:start}
.how-copy p{font-size:16px;line-height:1.8}
.trust-line{font:italic clamp(18px,1.5vw,23px)/1.55 var(--serif);color:var(--forest);
 max-width:var(--measure);margin:-6px 0 30px;padding-left:18px;border-left:3px solid var(--gold)}
.how-status{display:grid;gap:18px}
.how-group h3{font:var(--ui-2xs)/1.5 var(--sans);letter-spacing:2px;text-transform:uppercase;
 color:var(--gold);margin:0 0 8px}
.how-group ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.how-status li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
 background:var(--white);border:1px solid var(--line);border-radius:4px;padding:14px 16px}
.how-status span{font-size:var(--ui-sm);color:var(--muted);line-height:1.6}
.how-foot{margin:clamp(28px,3vw,44px) 0 0;max-width:var(--measure);border-top:1px solid #c9d2db;padding-top:18px}

/* ---- Public status pills ------------------------------------------------
   The friendly labels. The underlying assessment vocabulary is unchanged and
   is still printed in the evidence drawer, where a historian needs it. */
.pill.status-documented{background:var(--sage);color:#21486f;border-color:#c4cad1}
.pill.status-supported{background:var(--sage);color:#21486f;border-color:#c4cad1}
.pill.status-tradition{background:var(--gold-light);color:#6a2d34;border-color:#d9aeae}
.pill.status-unconfirmed{background:#f7e9e9;color:#76323a;border-color:#d4a8a8}
.pill.status-disputed{background:#f7e9e9;color:#76323a;border-color:#d4a8a8}
.evidence-body .tech-note{font-size:var(--ui-2xs);color:var(--muted);margin:10px 0 0}
.status-key{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:12px}
.status-key li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
 background:var(--white);border:1px solid var(--line);border-radius:4px;padding:15px 18px}
.status-key p{font-size:var(--ui-sm);color:var(--muted);margin:0;line-height:1.65}
.status-key .fine{margin-top:6px}

/* ---- A visible word on the search control ------------------------------- */
.search-btn{width:auto;min-width:44px;gap:8px;padding-inline:12px;border-radius:22px}
.btn-word{font-size:var(--ui-sm)}
@media (max-width:900px){.btn-word{position:absolute;clip:rect(0,0,0,0);width:1px;height:1px;overflow:hidden;white-space:nowrap}
 .search-btn{width:44px;padding-inline:0}}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width:1000px){
 .doors{grid-template-columns:repeat(6,1fr)}
 .door{grid-column:span 3}.door-lg{grid-column:span 6}.door-wide{grid-column:span 6}
 .featured{grid-template-columns:1fr}
 .featured-visual .story-visual{min-height:230px;border-right:0;border-bottom:1px solid var(--line)}
 .featured-copy{padding:clamp(20px,3vw,32px)}
 .how-grid{grid-template-columns:1fr}
}
@media (max-width:760px){
 .doors{grid-template-columns:1fr}
 .door,.door-lg,.door-wide{grid-column:span 1;padding:20px}
 .door-wide{flex-direction:column;align-items:flex-start;gap:8px}
 .door-lg h3{font-size:26px}
 .hero-v31 h1{max-width:none}
 .featured-copy h3{font-size:28px}
 .how-status li,.status-key li{grid-template-columns:1fr;gap:8px}
}
@media (prefers-reduced-motion:reduce){
 .door:hover{transform:none}
}
/* ---- Home: a selection, not the catalog (reader-navigation, 2026-09-25) --
   A text-only lead reuses the featured block without its picture column; the
   entrance row reuses the door cards four across. Palette tokens only. */
.featured--text{grid-template-columns:1fr}
.featured--text .featured-copy{padding:clamp(24px,2.4vw,40px)}
.doors--compact .door{grid-column:span 3;padding:22px 22px 20px}
.door-links{display:flex;flex-wrap:wrap;gap:10px 24px;margin:22px 0 0;font-size:var(--ui-sm)}
@media (max-width:1000px){.doors--compact .door{grid-column:span 3}}
@media (max-width:760px){.doors--compact .door{grid-column:span 1;padding:20px}}

/* ---- Records directory (/archive/, 2026-09-25) ---------------------------
   Groups of existing collections. The list rows reuse .group-links; the photo
   and video group reuses the hub cards. Palette tokens only, no imagery. */
.records-group{margin:0 0 var(--section-gap-md)}
.records-group-head{font-size:clamp(26px,2.4vw,34px);letter-spacing:-.6px;margin:0 0 6px}
.records-group-note{max-width:var(--measure);margin:0 0 16px;font-size:var(--ui-lg);color:var(--muted)}
.group-links .records-count{margin-top:8px;font-size:var(--ui-sm);color:var(--forest)}
.records-group .archive-hub{margin-bottom:0;justify-content:start}

@media print{.doors,.how-band{display:none!important}}

/* ---- Reading measure, applied to running text wherever it appears --------
   Measured on the built pages at 1440px before this rule existed: the notices
   and context notes on /evidence/, /through-time/ and the archive pages ran to
   220 characters per line, and the evidence-drawer body to 155. Small type
   spanning a full 1296px column is the least readable thing on a wide screen.
   The box is capped rather than the text inside it, so a callout keeps its
   background and its left edge. */
p.context-note,p.fine,p.local-only,p.filter-hint,p.aside-note,p.source-limit,p.source-by,
.notice,.evidence-body p,.source-item p,.desk-callout p,.video-note,.video-caution,
.time-body p,.about-copy p,.how-copy p,.photo-empty-copy p,.gate-list p,.archive-why p,
.story-sources p,.hub-card p,.era-count,
.article-section p,.why-matters p,.takeaway,.research-gap p,.featured-lead,
.evidence-summary>p,.focal-claim p{max-width:var(--measure)}
/* Inside a card the card is already the measure; do not double-constrain. */
.story-card p,.entity-card p,.door p,.arch-card p,.video-card p{max-width:none}

/* ---- Mobile navigation: give the scroll a cue ---------------------------
   `.main-nav` is `overflow-x:auto`, and v0.2 then hid the scrollbar twice --
   `scrollbar-width:none` plus `.main-nav::-webkit-scrollbar{display:none}`.
   The result is scrollability with no cue of any kind: measured, the nav is
   516px inside 351px at 390 and 519 inside 422 at 768, and "Research desk"
   is simply invisible with nothing to suggest it exists.

   A right-edge fade was the obvious fix and is the wrong one here. The nav
   overflows in two disjoint ranges -- roughly 375-590 and 761-955 -- and fits
   exactly at 600 (540 in 540). A media-query fade would therefore dim the tail
   of the last item at widths where nothing is hidden, which is a false cue.

   Restoring the scrollbar is self-limiting: the browser draws it only when
   there is something to scroll, at every width, with no query to keep in sync.
   Slim and in-palette so it reads as intentional. */
@media (max-width:960px){
 .main-nav{scrollbar-width:thin;scrollbar-color:#8ea3ba transparent;
  -ms-overflow-style:auto;scroll-padding-inline:12px;padding-bottom:6px}
 .main-nav::-webkit-scrollbar{display:block;height:4px}
 .main-nav::-webkit-scrollbar-track{background:transparent}
 .main-nav::-webkit-scrollbar-thumb{background:#8ea3ba;border-radius:2px}
 .main-nav a{flex:0 0 auto}
}

/* --- TransparentClarke: fire company finances ---------------------------------
 * A comparison table has one job the rest of the site does not: several kinds of
 * absence have to stay visibly different from each other and from a real zero.
 * That distinction is carried by words in the cell; color only reinforces it. */
/* A zero says what evidence stands behind it, visibly and to a screen reader.
   Small and muted, but present: the wording is the point, not decoration. */
.fc-table .zero-note,.fc-trend .zero-note{display:block;font-size:var(--ui-xs);line-height:1.3;font-weight:400;color:var(--muted);margin-top:.15rem;max-width:20ch;margin-left:auto;white-space:normal}
.fc-table .zero,.fc-trend .zero{display:inline-block;text-align:right}
.fc-controls{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap;margin-bottom:14px}
.fc-controls .field{display:flex;flex-direction:column;gap:4px}
.fc-controls label{font-size:var(--ui-xs);letter-spacing:.8px;text-transform:uppercase;color:var(--muted)}
.fc-controls select{padding:8px 11px;border:1px solid var(--line);border-radius:var(--radius);background:var(--white);min-width:9ch}
.fc-chips{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 16px}
.fc-chip{border:1px solid var(--line);border-left-width:5px;border-radius:var(--radius);background:var(--white);padding:9px 12px;font-size:var(--ui-sm);max-width:36ch}
.fc-chip b{display:block;color:var(--ink)}
.fc-chip[data-a=original_return_verified]{border-left-color:var(--forest)}
.fc-chip[data-a=extracted]{border-left-color:#8798aa}
.fc-chip[data-a=pdf_only_not_extracted]{border-left-color:#b78a35}
.fc-chip[data-a=no_filing_located]{border-left-color:var(--gold)}
.tablewrap{border:1px solid var(--line);border-radius:var(--radius);background:var(--white);overflow-x:auto;margin-bottom:8px}
.tablewrap .scrollnote{font-size:var(--ui-sm);color:var(--muted);padding:8px 12px;border-bottom:1px solid var(--line);display:none}
.tablewrap table{border-collapse:collapse;width:100%;min-width:640px}
.tablewrap caption{text-align:left;padding:12px 14px;font-size:var(--ui-sm);color:var(--muted)}
.tablewrap th,.tablewrap td{text-align:right;padding:9px 14px;border-bottom:1px solid var(--paper);font-size:var(--ui-lg);vertical-align:top}
.tablewrap th[scope=row],.tablewrap th.rowhead{text-align:left;font-weight:400;color:var(--text);position:sticky;left:0;background:var(--white);min-width:16rem}
.tablewrap thead th{font-size:var(--ui-xs);letter-spacing:.7px;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);text-align:right}
.tablewrap thead th:first-child{text-align:left}
.tablewrap tr.section th{background:var(--sage);color:var(--ink);font-family:var(--serif);font-size:16px;padding-top:14px}
.tablewrap tr.section td{background:var(--sage);color:var(--muted);font-size:var(--ui-sm);text-align:left;font-style:italic}
.tablewrap tr.total th[scope=row],.tablewrap tr.total td{font-weight:700;color:var(--ink)}
.tablewrap td.num{font-variant-numeric:tabular-nums}
.metric-note{display:block;font-size:var(--ui-xs);color:var(--muted)}
.tablewrap .absent{color:var(--muted);font-style:italic;font-size:var(--ui-sm);display:block;text-align:right}
.zero{font-variant-numeric:tabular-nums}
.zero::after{content:" (reported zero)";font-size:var(--ui-xs);color:var(--muted);font-style:italic}
/* ---- Fire service history: the top half of /transparentclarke/fire-companies/ --- */
.fh-companies{display:grid;gap:34px;margin-top:30px}
.fh-company{border-top:2px solid var(--forest);padding-top:22px}
.fh-company-head .eyebrow{margin-bottom:9px}
.fh-company-head h3{font-size:29px;margin-bottom:10px}
.fh-standfirst{font:18px/1.6 var(--serif);color:var(--forest);max-width:var(--measure);margin-bottom:18px}
.fh-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:12px;margin:0 0 22px;padding:0}
.fh-facts>div{border:1px solid var(--line);background:var(--white);border-radius:var(--radius);padding:13px 15px}
.fh-facts dt{font-size:var(--ui-2xs);letter-spacing:1.3px;text-transform:uppercase;color:var(--gold);margin-bottom:5px}
.fh-facts dd{margin:0;font:17px var(--serif);color:var(--forest);line-height:1.35}
.fh-prose p{font-size:var(--ui-lg);line-height:1.8}
.fh-cite{margin:-6px 0 18px;display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.fh-cite .text-link{gap:6px;font-size:var(--ui-2xs);border-bottom-color:#c3ccd5}
.fh-cite-label{font-size:var(--ui-2xs);letter-spacing:1.3px;text-transform:uppercase;color:var(--gold)}
.fh-timeline{margin-top:26px}
.fh-timeline .time-label{justify-content:flex-start}
.fh-timeline .fh-cite{margin:6px 0 0}
.fh-media{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:18px;margin:26px 0}
.fh-media figure{margin:0}
.fh-media img{width:100%;height:auto;border:1px solid var(--line);border-radius:var(--radius)}
.fh-credit{color:var(--muted)}
.fh-nomedia{border-left:3px solid var(--line);padding-left:14px;margin:24px 0;max-width:var(--measure)}
@media(max-width:640px){.fh-facts{grid-template-columns:1fr 1fr}.fh-company-head h3{font-size:25px}}
.fc-panel{border:1px solid var(--line);border-left:5px solid var(--ink);border-radius:var(--radius);background:var(--white);padding:18px 20px;margin-top:28px}
.fc-panel.warn{border-left-color:var(--gold)}
.fc-panel .obs{border-top:1px solid var(--line);padding-top:12px;margin-top:12px}
.fc-panel .obs .meta{font-size:var(--ui-sm);color:var(--muted);margin-bottom:.4em}
.fc-cellbtn{font:inherit;color:inherit;background:none;border:0;border-bottom:1px dotted var(--line);padding:0 0 1px;cursor:pointer;font-variant-numeric:tabular-nums;text-align:right}
.fc-cellbtn:hover{border-bottom-color:var(--ink)}
.fc-cellbtn[aria-pressed=true]{background:var(--sage);border-bottom:2px solid var(--ink);padding:0 4px 0}
#fc-srcpanel{margin:18px 0 26px}
#fc-srcpanel h3{margin:0 0 10px;font-size:16px}
.fc-srcrecs{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:14px;margin-bottom:8px}
.fc-srcrec{border:1px solid var(--line);border-radius:var(--radius);background:var(--white);padding:14px 16px}
.fc-srcrec h3{margin:0 0 8px;font-size:var(--ui-md);line-height:1.35}
.fc-srcrec dl,#fc-srcpanel dl{display:grid;grid-template-columns:minmax(7rem,auto) 1fr;gap:3px 14px;margin:0;font-size:var(--ui-sm)}
.fc-srcrec dt,#fc-srcpanel dt{color:var(--muted);font-size:var(--ui-xs);letter-spacing:.4px;text-transform:uppercase;padding-top:2px}
.fc-srcrec dd,#fc-srcpanel dd{margin:0;overflow-wrap:anywhere}
.fc-srcrec .hash,#fc-srcpanel dd{font-variant-numeric:tabular-nums}
.fc-srcrec .hash{font-size:var(--ui-xs);color:var(--muted)}
@media (max-width:760px){
  .tablewrap .scrollnote{display:block}
  .tablewrap th[scope=row],.tablewrap th.rowhead{min-width:12rem;font-size:var(--ui-md)}
  .fc-srcrec dl,#fc-srcpanel dl{grid-template-columns:1fr;gap:0 0}
  .fc-srcrec dd,#fc-srcpanel dd{margin-bottom:8px}
}

/* Battletown story-first presentation (src/views.mjs STORY_PRESENTATION).
   Every selector below is scoped to a class only that arrangement emits, so no
   other story's layout is reachable from here. The disclosures are native
   <details>, so the whole register and every source note still open with
   JavaScript off. */
.story-first>.article-section:first-of-type{padding-top:0;border-top:0}
.story-first>.article-section:first-of-type::before{display:none}
.about-accounts{margin:var(--section-gap-md) 0;border:1px solid var(--line);border-radius:4px;background:var(--sage)}
.about-accounts>summary{padding:14px 18px;display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;cursor:pointer;list-style:none}
/* display:flex on a <summary> drops the UA disclosure marker in Chrome, so the
   box stops reading as something you can open. The chevron puts that back. */
.about-accounts>summary::-webkit-details-marker{display:none}
.about-accounts>summary::after{content:"";margin-left:auto;align-self:center;width:9px;height:9px;border-right:2px solid var(--forest);border-bottom:2px solid var(--forest);transform:rotate(45deg);transition:transform .15s ease}
.about-accounts[open]>summary::after{transform:rotate(-135deg)}
.about-accounts .about-label{font:var(--ui-2xs) var(--sans);letter-spacing:1.6px;color:var(--forest)}
.about-accounts .about-lead{font-family:var(--serif);font-size:18px;color:#1b3b5b}
.about-accounts .evidence-summary{margin:0;border-radius:0;border-left:0;border-right:0;border-bottom:0}
.closing-notes{margin:var(--section-gap-md) 0;padding-top:var(--section-gap-sm);border-top:1px solid var(--line)}
.closing-notes>.eyebrow{display:block;margin-bottom:12px;color:var(--gold)}
.closing-note{margin-bottom:26px}
.closing-note h3{font-size:22px;margin-bottom:10px}
.closing-note p{font-family:var(--serif);font-size:18px;line-height:1.75;color:#1b3b5b}
.closing-question .eyebrow{display:block;margin-bottom:8px;color:var(--gold)}
.closing-question h3{font-size:21px}
.source-item-brief .source-by{margin-bottom:9px}
.source-item-brief .source-foot{border:0;padding:0;margin:0}
.source-detail{margin-top:12px}
.source-detail>summary{font:var(--ui-2xs) var(--sans);letter-spacing:1.4px;color:var(--forest);cursor:pointer}
.source-detail .source-meta{margin-top:12px}
/* Licensed stock banners (public/assets/stock/): decorative, always captioned as stock, never a Clarke scene. */

/* ---------------------------------------------------------------------------
   White primary (owner's direction, 10 Oct 2026): a white page and less colour
   fill. Large panels that were filled pale blue-grey or pink are white, held
   apart by a hairline or a navy/red edge; navy and red stay for type, rules and
   accents. Small hover tints and the palette tokens themselves are unchanged
   (tests/test_brand.mjs pins the tokens). Delete this block to return to the
   filled look. */
body{background:var(--white)}
.hero-art,.visual-nameplate,.visual-community,.next-story,.connection-panel,.source-box,.node,.why-matters,.about-accounts,.how-band{background:var(--white)}
.visual-community,.visual-nameplate{border-bottom:1px solid var(--line)}
.notice,.research-gap{background:var(--white);border:1px solid var(--line);border-left:3px solid var(--gold)}
.evidence-drawer,.evidence-drawer.warn{background:var(--white)}
.evidence-trigger,.evidence-trigger.warn{background:var(--white)}
.pill,.pill.qualified,.pill.unconfirmed,.pill.supported,.pill.status-documented,.pill.status-supported,.pill.status-tradition,.pill.status-unconfirmed,.pill.status-disputed{background:var(--white)}
.timeline-label-kind,.role-tag,.role-tag.role-document,.role-tag.role-publication{background:var(--white);border:1px solid var(--line)}

/* The veterans page strip (src/hubs/pages.mjs pagesMarquee). Its rules, including the
   reduced-motion stop, live in src/hubs/styles.css; keyframes cannot be scoped under .hubs. */

/* ---------------------------------------------------------------------------
   Beta submissions (/submit/). Scoped to .sub-page so nothing here can reach
   another route, and built only from existing palette tokens -- no new color
   is introduced, and the green family stays gone (removed in v0.1.1). The panel
   rules are the no-JavaScript type switch: :has() follows the checked radio,
   and [data-enhanced] hands control to the script once it runs.
   --------------------------------------------------------------------------- */
.sub-page .sub-privacy{border:1px solid var(--line);padding:1rem 1.15rem;margin:1.5rem 0;background:var(--sage)}
.sub-page .sub-privacy h2{margin-top:0;font-size:1rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
.sub-page .sub-privacy p{margin:.5rem 0;font-size:var(--ui-lg);line-height:1.5}
.sub-page .sub-field{margin:1.5rem 0;border:0;padding:0}
.sub-page fieldset.sub-field{border:0}
.sub-page .sub-field>label,.sub-page .sub-field>legend{display:block;font-weight:600;margin-bottom:.25rem;padding:0;color:var(--ink)}
.sub-page .sub-field input[type=text],.sub-page .sub-field input[type=email],.sub-page .sub-field input[type=url],.sub-page .sub-field select,.sub-page .sub-field textarea{width:100%;max-width:100%;box-sizing:border-box;padding:.6rem .7rem;border:1px solid var(--muted);border-radius:3px;font:inherit;background:var(--white);color:var(--text)}
.sub-page .sub-field textarea{resize:vertical;min-height:7rem}
.sub-page .sub-field input:focus-visible,.sub-page .sub-field textarea:focus-visible{outline:3px solid var(--forest);outline-offset:2px}
.sub-page [aria-invalid=true]{border-color:var(--rust);border-width:2px}
.sub-page .choices{display:grid;gap:.5rem;margin-top:.4rem}
.sub-page .choice{display:flex;align-items:flex-start;gap:.55rem}
.sub-page .choice input{margin-top:.28rem;flex:0 0 auto}
.sub-page .choice label{font-weight:400;display:block}
.sub-page .choice label strong{display:block}
.sub-page .choice label .fine{display:block;margin:0}
.sub-page .sub-error{color:var(--rust);font-size:var(--ui-md);margin:.35rem 0 0;font-weight:600}
.sub-page .sub-summary{border:2px solid var(--rust);padding:.9rem 1.1rem;margin:1.25rem 0;background:var(--gold-light)}
.sub-page .sub-summary h2{margin:0 0 .4rem;font-size:1rem;color:var(--rust)}
.sub-page .sub-summary ul{margin:0;padding-left:1.1rem}
.sub-page .sub-summary a{color:var(--rust)}
.sub-page .sub-receipt{border:2px solid var(--forest);padding:1rem 1.15rem;margin:1.25rem 0;background:var(--sage)}
.sub-page .sub-receipt h2{margin:0 0 .4rem;font-size:1.1rem;color:var(--ink)}
.sub-page .sub-note{font-style:italic;margin:0 0 1rem;padding-left:.8rem;border-left:3px solid var(--line);color:var(--muted)}
.sub-page .hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sub-page .sub-panel{display:none}
#submission-form:has(#type-feedback:checked) .sub-panel[data-panel=feedback]{display:block}
#submission-form:has(#type-story:checked) .sub-panel[data-panel=story]{display:block}
#submission-form:has(#type-veteran:checked) .sub-panel[data-panel=veteran]{display:block}
#submission-form:has(#type-church:checked) .sub-panel[data-panel=church]{display:block}
#submission-form:has(#type-correction:checked) .sub-panel[data-panel=correction]{display:block}
.sub-page .sub-field select:focus-visible{outline:3px solid var(--forest);outline-offset:2px}
#submission-form[data-enhanced] .sub-panel{display:none}
#submission-form[data-enhanced] .sub-panel[data-active=true]{display:block}
.np-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));gap:18px;margin:18px 0 8px}
.np-card{border:1px solid var(--line);border-radius:var(--radius);background:var(--white);padding:20px 22px;display:flex;flex-direction:column}
.np-card.featured{border-left:5px solid var(--forest)}
.np-card h3{font-size:23px;margin:0 0 10px;line-height:1.2}
/* The picture sits above the name, and bleeds to the card edge by cancelling the
   card's own padding. The caption stays inside that padding, because it is read
   as text and not looked at as part of the image. */
.np-figure{margin:-20px -22px 16px;border-bottom:1px solid var(--line)}
/* No forced aspect ratio, and no object-fit crop. A fixed 3/2 box cropped the
   top off the one portrait-ish frame in the set, which put a visibly cropped
   picture directly above a caption whose record says "Nothing cropped, retouched
   or added". That statement is about the file and stayed true, but a reader
   cannot see the difference between a cropped file and a cropped display box.
   Uneven image heights across the cards are the cheaper problem. */
.np-figure img{width:100%;height:auto;display:block}
.np-figure figcaption{padding:11px 22px 13px;background:var(--paper)}
.np-figcredit{display:block;margin:5px 0 3px}
.np-lead{font-size:var(--ui-lg);margin-bottom:12px}
.np-quote{font:italic var(--ui-md)/1.65 var(--serif);color:var(--ink);border-left:2px solid var(--sage);padding-left:14px;margin:0 0 12px}
.np-attrib{display:block;font:var(--ui-2xs) var(--sans);font-style:normal;color:var(--muted);letter-spacing:.3px;margin-top:7px}
.np-link{margin:0 0 14px;font-size:var(--ui-sm)}
.np-link.fine{color:var(--muted)}
.np-profile{margin:0 0 14px;font-size:var(--ui-sm);font-weight:600}
.np-more{margin-top:auto;border-top:1px solid var(--line);padding-top:12px}
.np-more>summary{font-size:var(--ui-sm);color:var(--forest);cursor:pointer;list-style:none;display:flex;gap:8px;align-items:center}
.np-more>summary::-webkit-details-marker{display:none}
.np-more>summary::before{content:"+";font:var(--ui-lg) var(--sans);color:var(--muted)}
.np-more[open]>summary::before{content:"\2212"}
.np-more>summary:hover{text-decoration:underline;text-underline-offset:4px}
.np-more dl{display:grid;gap:4px 0;margin:14px 0 10px;font-size:var(--ui-sm)}
.np-more dt{font-size:var(--ui-2xs);letter-spacing:.6px;text-transform:uppercase;color:var(--gold);margin-top:10px}
.np-more dd{margin:0;line-height:1.6}
.np-limit{display:block;font-size:var(--ui-xs);color:var(--muted);margin-top:5px}
@media (max-width:760px){
  .np-card{padding:17px 18px}
  .np-card h3{font-size:21px}
}

/* Annual letters. The index is a short list, not a grid of teasers: there is one
   letter a year and each is a long read. */
.year-list{display:flex;flex-direction:column;gap:18px;margin:0 0 40px}
.year-card{border:1px solid var(--line);border-radius:var(--radius);background:var(--white);padding:22px 24px}
.year-card .eyebrow{display:block;margin-bottom:6px}
.year-card h2{font-size:26px;margin:0 0 10px;line-height:1.2}
.year-card p{margin:0 0 8px}
@media (max-width:640px){.year-card{padding:18px}.year-card h2{font-size:22px}}

/* Print. An annual letter is the one page on this site people are likely to want
   on paper, so it prints as a letter: no navigation, no controls, links resolved
   to their addresses, and nothing that only makes sense on a screen. */
@media print{
  .site-header,.site-footer,.jump-nav,.breadcrumbs,.save-btn,.meta .pill,
  .search-trigger,.reading-list-btn,.evidence-drawer,.np-profile,
  .story-visual,.next-story,.story-illustration{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .container{max-width:none;padding:0}
  .year-letter .article-grid{display:block}
  .year-letter .article-section{break-inside:avoid;page-break-inside:avoid}
  .year-letter h1{font-size:24pt}
  .year-letter h2{font-size:13pt;margin-top:16pt}
  .year-letter a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;word-break:break-all}
  .why-matters,.takeaway{border:1px solid #999;background:#fff}
  img{max-width:100%!important}
}

/* Group links: the destinations each of the five primary choices holds.
   Written after the header dropped from nine links to five, so that nothing
   which left the header became unreachable. One column on a phone, filling
   across on wider screens; no min-width, because a card wider than the
   viewport is how a landing page starts scrolling sideways. Cards fill their
   cells; wide-screen rows share the tallest content-driven height, while
   stacked phone cards keep their natural height. No fixed height or clipping. */
.group-links{margin:0 0 34px}
.group-links-head{font:400 var(--ui-md)/1.4 var(--sans);letter-spacing:1.6px;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.group-links ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:1fr}
.group-links li{display:flex}
.group-links a{display:block;width:100%;text-decoration:none;border:1px solid var(--line);border-radius:5px;padding:14px 16px;background:var(--white)}
.group-links a:hover{border-color:var(--forest)}
.group-links b{display:block;font:400 19px/1.25 var(--serif);color:var(--ink);letter-spacing:-.3px}
.group-links span{display:block;margin-top:4px;font-size:var(--ui-md);color:var(--muted);line-height:1.45}
@media (min-width:760px){
  .group-links ul{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));grid-auto-rows:1fr}
}

/* Fire companies at-a-glance: three aligned cards at the top of
   /transparentclarke/fire-companies/ so the answer arrives before the reading. */
.fc-glance{margin:20px 0 32px}
.fc-glance-heading{font-size:22px;margin:0 0 18px;color:var(--forest)}
.fc-glance-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:18px}
.fc-glance-card{background:var(--white);border:1px solid var(--line);border-radius:5px;padding:20px 22px;border-top:3px solid var(--forest)}
.fc-glance-name{font-family:var(--serif);font-size:18px;color:var(--forest);margin:0 0 14px;line-height:1.3}
.fc-glance-stats{margin:0;display:flex;flex-direction:column;gap:12px}
.fc-glance-stats>div{border-top:1px solid var(--line);padding-top:10px}
.fc-glance-stats>div:first-child{border-top:0;padding-top:0}
.fc-glance-stats dt{font-size:var(--ui-2xs);letter-spacing:.4px;color:var(--muted);margin:0 0 4px;text-transform:none}
.fc-glance-stats dd{margin:0;font-family:var(--serif);font-size:22px;color:var(--forest);font-variant-numeric:tabular-nums}
.fc-glance-stats dd.num{font-family:var(--serif)}
.fc-glance-year{font-family:var(--sans);font-size:var(--ui-2xs);color:var(--muted);letter-spacing:.5px;margin-left:6px}
.fc-glance-note{font-size:var(--ui-xs);color:var(--muted);margin:18px 0 0;line-height:1.65;max-width:60ch}

/* ==========================================================================
   Design P1.1 — type and token tune-up. docs/handoff/design_audit_2026-09-13.md
   (Phase 1, change 1) and docs/handoff/design_upgrade_plan_2026-09-13.md (P1.1).

   Inter now sets the interface; Georgia still sets headlines and story prose.
   Every interface size in this file is one of the five --ui-* steps, and none
   is under 11px (tests/test_typography.mjs). Hex values that sat within a
   just-noticeable difference of a palette token now use the token, and captions
   put what a picture shows in the text color with the credit muted beneath.
   No color token was added.
   ========================================================================== */

/* Weight does the work Arial could only do with size. Navigation, buttons and
   the small-capitals labels are set at 500; running text stays at 400. */
.main-nav a,.btn,.go-deeper,.chip,.segmented button,
.eyebrow,.card-meta,.subhead,.aside-item small,.search-result small,.time-label,
.source-item .source-meta,.entity-card .kind,.door-meta,.hub-kind,.arch-kind,
.how-group h3,.panel-eyebrow,.np-more dt,.fh-facts dt,.group-links-head,
.review-table th,.tablewrap thead th{font-weight:500}

/* The accent red marks interaction. A text link's underline turns red under
   the pointer, where before it gave no response at all. */
.text-link:hover,.jump-nav a:hover,.src-cell a:hover,.evidence-body h5 a:hover{border-bottom-color:var(--gold)}

/* A credit set over a photograph sits on a light plate, so it stays legible
   wherever the picture underneath is dark. */
.visual-photo .visual-caption{color:var(--text);background:color-mix(in srgb,var(--white) 88%,transparent);padding:2px 7px;border-radius:2px}

/* The floor lifted the phone preview bar from 8px to 11px, and its two labels
   then broke mid-phrase. Each label now wraps whole and untracked: one line at
   390px and wider, two clean lines below that. Previews only; production
   renders no preview bar. */
@media (max-width:760px){
 .preview-bar{letter-spacing:0}
 .preview-bar>.shell{flex-wrap:wrap;row-gap:2px}
 .preview-bar>.shell>*{white-space:nowrap}
}

/* ==========================================================================
   Design P1.3 — vertical rhythm and section landmarks. docs/prompts/E2_P1_3_prompt.md,
   after docs/handoff/design_upgrade_plan_2026-09-13.md (P1.3).

   Section spacing comes from three tokens in :root: --section-gap-lg for the
   bands that divide a page, -md between the sections of a long read, -sm
   inside them. The pull quote lives in src/pull-quote/ and the "what this page
   covers" block in src/page-covers/. No color token was added.
   ========================================================================== */

/* Captions: one standard for every <figcaption> on the site. .caption is what
   the picture or chart shows, in the text color; .caption-credit is who made
   it and on what terms, muted and a step smaller. Rules elsewhere only place
   and pad them. */
.caption{font-size:var(--ui-sm);line-height:1.55;color:var(--text)}
.caption-credit{font-size:var(--ui-xs);line-height:1.55;color:var(--muted);font-style:normal;letter-spacing:0}

/* Section landmarks. Each section of a story opens on a hairline, and every
   hairline starts with a short accent in the heritage red, so the shape of a
   long page can be scanned before it is read. Indigenous Clarke and Life in
   Clarke draw the same mark in their own stylesheets. */
.article-section,.related-media,.story-sources{position:relative}
.article-section{padding-top:var(--section-gap-sm);border-top:1px solid var(--line)}
.article-section::before,.related-media::before,.story-sources::before{content:"";position:absolute;top:-1px;left:0;width:2.5rem;height:2px;background:var(--gold)}

/* The pull quote (Design P1.3): Georgia, set large and indented behind a rule
   in the heritage red. Its caption takes the site's caption standard. Values
   come from :root; this file declares no token. */
.pull-quote{margin:var(--section-gap-md) 0;padding:4px 0 4px 26px;border-left:3px solid var(--gold)}
.pull-quote blockquote,.pull-quote-text{display:block;max-width:var(--measure);font:23px/1.5 var(--serif);color:var(--forest);margin:0 0 12px}
.pull-quote figcaption .fine{display:block;margin-top:4px;font-size:var(--ui-2xs)}
.pull-quote-label{display:block;font:500 var(--ui-2xs)/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.pull-quote--echo .pull-quote-text{margin:0}
@media (max-width:760px){
 .pull-quote{margin:var(--section-gap-sm) 0;padding-left:18px}
 .pull-quote blockquote,.pull-quote-text{font-size:20px}
}
@media print{
 .pull-quote{border-left:2px solid currentColor;padding-left:12pt;margin:14pt 0;break-inside:avoid}
 .pull-quote blockquote,.pull-quote-text{font-size:14pt;color:inherit}
 .pull-quote--echo{display:none}
}

/* What this page covers (Design P1.3): one quiet box under a long page's
   title, not a grid of cards. A label, then the page's sections in order, in
   two columns wherever there is room. Values come from :root.

   On a phone (Design P1.4) the same box is a disclosure, folded to its
   "On this page" button and opened in place. Every folding rule sits behind
   .disclosures-ready, the class the header script sets, so with scripting off
   the list stays open and the button never shows. The open state is the
   button's aria-expanded, read through the sibling combinator, because the
   list directly follows the button. A map built in the browser for another
   long page (.page-covers--runtime) exists only at phone width. */
.page-covers{margin:var(--section-gap-sm) 0 var(--section-gap-md);padding:14px 20px 12px;background:var(--white);border:1px solid var(--line);border-top:2px solid var(--gold);border-radius:0 0 var(--radius) var(--radius)}
.page-covers-h{display:block;font:500 var(--ui-2xs)/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.page-covers-list{margin:0;padding-left:1.5em;columns:2 17rem;column-gap:36px;font-size:var(--ui-md);line-height:1.45}
.page-covers-list li{break-inside:avoid;margin:0 0 6px;padding-left:2px}
.page-covers-list li::marker{color:var(--muted);font-size:var(--ui-xs)}
.page-covers-list a{color:var(--forest);text-decoration:none;border-bottom:1px solid var(--line)}
.page-covers-list a:hover{border-bottom-color:var(--gold)}
.page-covers-toggle,.page-covers--runtime{display:none}
@media (max-width:760px){
 .page-covers--runtime{display:block}
 .disclosures-ready .page-covers{padding:0}
 .disclosures-ready .page-covers-h{display:none}
 .disclosures-ready .page-covers-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:48px;margin:0;padding:0 18px;border:0;background:transparent;color:var(--forest);font:500 var(--ui-2xs)/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;text-align:left}
 .disclosures-ready .page-covers-toggle::after{content:"";flex:none;width:7px;height:7px;margin-right:4px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg)}
 .disclosures-ready .page-covers-toggle[aria-expanded="true"]::after{transform:translateY(2px) rotate(225deg)}
 .disclosures-ready .page-covers-toggle[aria-expanded="false"]+.page-covers-list{display:none}
 .disclosures-ready .page-covers-list{padding:2px 18px 12px calc(18px + 1.5em)}
}
@media print{
 .page-covers{background:none;border:1px solid currentColor;break-inside:avoid}
 .page-covers-list a{color:inherit;border:0}
 .page-covers-toggle{display:none!important}
 .page-covers-h,.page-covers-list{display:block!important}
}

/* Phone navigation (Design P1.4). At 760px and below the header's four
   destinations fold behind a labeled Menu button and open in place, as a
   full-width list under the header row. The desktop header is not touched:
   the button is display:none above 760px. Every rule that shows the button or
   hides the navigation sits behind .disclosures-ready, the class the header
   script sets, so with scripting off the phone header keeps its two-row
   layout. The open state is the button's own aria-expanded, read through the
   sibling combinator, because the navigation directly follows the button.

   Brand, Menu and the two tools share one row from 360px up, which is why the
   row's column gap and the button's padding are tight. Narrower than that the
   tools wrap to a second row rather than shrink a 44px target or the brand.
   Nothing here transitions or animates. Values come from :root. */
.site-header .menu-btn{display:none}
@media (max-width:760px){
 .disclosures-ready .site-header{min-height:0;column-gap:4px}
 .disclosures-ready .site-header .menu-btn{display:flex;width:auto;gap:6px;padding-inline:10px;margin-left:auto;border-radius:22px}
 .disclosures-ready .site-header .menu-btn svg{width:20px;height:20px}
 .disclosures-ready .site-header .menu-btn[aria-expanded="true"]{background:var(--sage)}
 .disclosures-ready .site-header .menu-word{font-size:var(--ui-sm);font-weight:500;line-height:1}
 .disclosures-ready .site-header .header-tools{margin-left:0}
 .disclosures-ready .site-header .menu-btn[aria-expanded="false"]+.main-nav{display:none}
 .disclosures-ready .site-header .menu-btn+.main-nav{flex-direction:column;gap:0;overflow:visible;padding:0;margin-top:10px;font-size:var(--ui-sm)}
 .disclosures-ready .site-header .menu-btn+.main-nav a{display:flex;align-items:center;min-height:48px;padding:0 2px;border-top:1px solid var(--line)}
 .disclosures-ready .site-header .menu-btn+.main-nav a:first-child{border-top:0}
 .disclosures-ready .site-header .menu-btn+.main-nav a.active{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
 .disclosures-ready .site-header .menu-btn+.main-nav a.active:after{content:none}
}
@media print{
 .menu-btn{display:none!important}
}

/* Evidence-media figure (Design P2.1). One figure for every image: the
   picture, then the caption, what the image does and does not show, the credit
   with its rights link, and the source. Nothing sits on top of the picture and
   nothing waits behind a hover. A crop happens only when the record carries a
   focal point and the page asks for a frame; the focal point arrives as two
   custom properties on the image, with the center as the fallback. The
   evidence drawer reuses the site's own .evidence-drawer. No transitions or
   animations, and no rule depends on a minimum width. Values come from :root. */
.media-figure{margin:var(--section-gap-sm) 0;background:var(--white);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.media-figure-frame{display:block;background:var(--sage)}
.media-figure-frame img{display:block;width:100%;height:auto}
.media-figure--cropped .media-figure-frame img{height:100%;object-fit:cover;object-position:var(--focal-x,50%) var(--focal-y,50%)}
.media-figure--inset{max-width:20rem}
.media-figure-caption{padding:14px 20px 16px}
.media-figure-caption>p{margin:0 0 6px;max-width:var(--measure)}
.media-figure-caption>p:last-child{margin-bottom:0}
.media-figure-context{font-size:var(--ui-sm)}
.media-figure-label{display:block;margin-bottom:2px;font:500 var(--ui-2xs)/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.media-figure-evidence{margin-top:10px}
@media print{
 .media-figure{break-inside:avoid;border:0;background:none}
 .media-figure-frame{background:none}
 .media-figure-frame img{width:auto;max-width:100%;max-height:4.5in}
 .media-figure-caption{padding:6pt 0 0}
 .media-figure-context,.media-figure-credit,.media-figure-source{display:block!important}
}

/* Entity hero (Design P2.2). An entity with a released picture opens with its
   intro on the left and the P2.1 figure on the right, 40/60. On a phone the two
   stack with the intro first, which is also the reading order. The picture is
   never cropped here and nothing sits on top of it. On paper the figure drops
   to a small column beside the intro, so a printed entity page still leads with
   its name and the facts below are not pushed onto a second sheet. No rule
   depends on a minimum width, nothing animates, and every screen value comes
   from :root. The print block comes last because a printed page is narrow
   enough to match the phone block too. */
.entity-hero{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);column-gap:var(--section-gap-md);align-items:start}
.entity-hero .media-figure{margin-top:var(--section-gap-md)}
@media (max-width:760px){
 .entity-hero{grid-template-columns:minmax(0,1fr)}
 .entity-hero .media-figure{margin-top:0}
}
@media print{
 .entity-hero{grid-template-columns:minmax(0,1fr) 2.75in;column-gap:18pt}
 .entity-hero .media-figure{margin:0}
 .entity-hero .media-figure-frame img{max-height:2.5in}
 .entity-hero .media-figure-caption .text-link{display:inline}
}

/* Financial explorer.
   Scoped: every rule is under .fx or starts .fx-, so appending this to the site
   stylesheet cannot reach any existing page. Uses the site's own custom
   properties -- no new palette. Series are told apart by dash pattern, marker
   shape and a direct label; the colors below are a second signal, never the
   only one, and the chart stays readable in monochrome. */
.fx{margin:0 0 55px}
.fx-controls{border:1px solid var(--line);background:var(--white);border-radius:var(--radius,5px);padding:22px;margin-bottom:24px;display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.fx-controls-h{grid-column:1/-1;font-size:22px;margin:0}
.fx-field{border:0;margin:0;padding:0;min-width:0}
.fx-field legend{font:10px var(--sans);letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);padding:0;margin-bottom:9px}
.fx-field select{width:100%;max-width:100%;padding:10px 12px;min-height:44px;border:1px solid var(--line);border-radius:3px;background:var(--white);color:var(--text);font-size:13px}
.fx-orgs{grid-column:1/-1}
.fx-orglist{display:grid;gap:7px;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.fx-org{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:9px;padding:9px 11px;border:1px solid var(--line);border-radius:3px;font-size:13px;min-height:44px;background:var(--paper)}
.fx-org:has(input:checked){background:var(--sage);border-color:var(--forest)}
.fx-org input{width:18px;height:18px;accent-color:var(--forest)}
.fx-org-name{min-width:0}
.fx-scope{grid-column:3;font-size:11px;color:var(--muted)}
.fx-swatch{width:22px;height:0;border-top-width:3px;border-top-style:solid;border-color:var(--forest)}
.fx-orgactions,.fx-actions{margin:11px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.fx-actions{grid-column:1/-1;border-top:1px solid var(--line);padding-top:16px}
.fx-blurb{font-size:12px;line-height:1.6;color:var(--muted);margin:9px 0 0}
.fx-status{grid-column:1/-1;margin:0;font-size:12px;color:var(--forest)}
.fx-yearpair{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fx-yearpair label{font-size:12px;color:var(--muted)}
.fx-yearpair select{width:auto;flex:1;min-width:90px}
.fx-toggle{display:flex;gap:6px;border:1px solid var(--line);border-radius:4px;padding:3px;background:var(--paper)}
.fx-toggle label{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:9px 10px;font-size:12px;border-radius:2px;min-height:40px}
.fx-toggle label:has(input:checked){background:var(--white);color:var(--forest);box-shadow:none}
.fx-figure{margin:0 0 22px;border:1px solid var(--line);background:var(--white);border-radius:var(--radius,5px);padding:18px}
.fx-chart{width:100%;height:auto;display:block;overflow:visible}
.fx-figcap{margin-top:12px}
.fx-grid{stroke:var(--line);stroke-width:1}
.fx-zero{stroke:var(--muted);stroke-width:1.4}
.fx-axis{font:10px var(--sans);fill:var(--muted)}
.fx-slabel{font:11px var(--sans)}
.fx-line{stroke-width:2.1;stroke-linejoin:round;stroke-linecap:round}
.fx-mark{stroke-width:1.4}
/* Series colors are mixed from the site's own palette tokens -- navy, red and
   rust -- so no new brand color enters the stylesheet and nothing green does.
   Each declaration states a plain token first and the mix second, so a browser
   without color-mix still paints a real palette color rather than nothing.
   Color is the third signal here in any case: the dash pattern, the marker
   shape and the direct label all carry the series on their own. */
.fx-s0{stroke:var(--forest);fill:var(--forest)}
.fx-s1{stroke:var(--gold);fill:var(--gold)}
.fx-s2{stroke:var(--rust);fill:var(--rust)}
.fx-s3{stroke:var(--text);fill:var(--text);stroke:color-mix(in srgb,var(--forest) 55%,var(--gold));fill:color-mix(in srgb,var(--forest) 55%,var(--gold))}
.fx-s4{stroke:var(--forest);fill:var(--forest);stroke:color-mix(in srgb,var(--forest) 62%,var(--muted));fill:color-mix(in srgb,var(--forest) 62%,var(--muted))}
.fx-s5{stroke:var(--rust);fill:var(--rust);stroke:color-mix(in srgb,var(--rust) 60%,var(--text));fill:color-mix(in srgb,var(--rust) 60%,var(--text))}
.fx-s6{stroke:var(--text);fill:var(--text);stroke:color-mix(in srgb,var(--text) 78%,var(--gold));fill:color-mix(in srgb,var(--text) 78%,var(--gold))}
.fx-s7{stroke:var(--ink);fill:var(--ink);stroke:color-mix(in srgb,var(--forest) 45%,var(--text));fill:color-mix(in srgb,var(--forest) 45%,var(--text))}
text.fx-slabel.fx-s0,text.fx-slabel.fx-s1,text.fx-slabel.fx-s2,text.fx-slabel.fx-s3,text.fx-slabel.fx-s4,text.fx-slabel.fx-s5,text.fx-slabel.fx-s6,text.fx-slabel.fx-s7{stroke:none}
.fx-mixgroup{margin-bottom:26px}
.fx-mixgroup h4{font:var(--serif);font-size:21px;color:var(--forest);margin:0 0 12px}
.fx-bars{display:grid;gap:9px}
.fx-bar-row{display:grid;grid-template-columns:minmax(140px,1.1fr) minmax(70px,2fr) minmax(90px,auto);gap:12px;align-items:start;font-size:13px}
.fx-bar-label{line-height:1.35}
.fx-bar-note{display:block;font-size:11px;color:var(--muted);line-height:1.5;margin-top:2px}
.fx-bar-track{background:var(--sage);border-radius:2px;min-height:20px;margin-top:2px;position:relative}
.fx-bar{display:block;height:20px;border-radius:2px;min-width:2px}
.fx-bar.fx-s0{background:var(--forest)}
.fx-bar.fx-s1{background:var(--gold)}
.fx-bar.fx-s2{background:var(--rust)}
.fx-bar.fx-s3{background:var(--text);background:color-mix(in srgb,var(--forest) 55%,var(--gold))}
.fx-bar.fx-s4{background:var(--forest);background:color-mix(in srgb,var(--forest) 62%,var(--muted))}
.fx-bar.fx-s5{background:var(--rust);background:color-mix(in srgb,var(--rust) 60%,var(--text))}
.fx-bar.fx-s6{background:var(--text);background:color-mix(in srgb,var(--text) 78%,var(--gold))}
.fx-bar.fx-s7{background:var(--ink);background:color-mix(in srgb,var(--forest) 45%,var(--text))}
.fx-bar-value{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.fx-reconcile{font-size:12px;line-height:1.7;color:var(--muted);margin:12px 0 0;max-width:var(--measure)}
.fx-tablewrap table{min-width:760px}
.fx-table th,.fx-table td{border-bottom:1px solid var(--line);padding:11px 13px;vertical-align:top;font-size:13px;text-align:left}
.fx-table thead th{font:9px var(--sans);letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);border-bottom:2px solid var(--line);white-space:nowrap}
.fx-table td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.fx-rowhead{font-weight:400;color:var(--forest);position:sticky;left:0;background:var(--white);min-width:150px}
.fx-absent{font-style:italic;color:var(--muted);font-size:12px}
.fx-zero{white-space:nowrap}
.fx-zero-note{display:block;font-size:11px;font-style:normal;color:var(--muted);line-height:1.5;max-width:220px;white-space:normal}
.fx-src{max-width:270px}
.fx-srcdetail summary{font-size:12px;color:var(--forest);cursor:pointer;padding:4px 0;min-height:30px}
.fx-srcdetail p{font-size:12px;line-height:1.6;margin:6px 0}
.fx-srch{font-size:23px;margin:34px 0 8px}
.fx-srcrecs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:14px;margin-top:14px}
.fx-srcrec{border:1px solid var(--line);background:var(--white);border-radius:4px;padding:18px 20px}
.fx-srcrec h4{font-family:var(--serif);font-size:20px;color:var(--forest);margin:0 0 10px;font-weight:400}
.fx-srcrec dl{margin:0;font-size:12px;line-height:1.6}
.fx-srcrec dt{font:9px var(--sans);letter-spacing:1.3px;text-transform:uppercase;color:var(--gold);margin-top:9px}
.fx-srcrec dd{margin:3px 0 0;color:var(--muted);overflow-wrap:anywhere}
.fx-panel{border:1px solid var(--line);background:var(--white);border-radius:var(--radius,5px);padding:24px 26px;margin-top:24px}
.fx-panel.warn{background:var(--sage)}
.fx-panel h3{font-size:24px;margin-bottom:12px}
.fx-panel p{font-size:13px;line-height:1.75;max-width:var(--measure)}
.fx-panel .obs{border-top:1px solid var(--line);padding-top:14px;margin-top:14px}
.fx-panel .obs .meta{font-size:11px;color:var(--muted);overflow-wrap:anywhere}
.fx-empty{margin-bottom:0}
.fx-dropped{margin-bottom:18px}
@media(max-width:760px){
.fx-controls{padding:16px;gap:14px;grid-template-columns:1fr}
.fx-controls-h{font-size:20px}
.fx-orglist{grid-template-columns:1fr}
.fx-figure{padding:12px}
.fx-bar-row{grid-template-columns:1fr;gap:3px}
.fx-bar-value{text-align:left}
.fx-bar-track{max-width:100%}
.fx-actions .btn,.fx-orgactions .btn{flex:1 1 auto}
.fx-tablewrap .scrollnote{display:block}
.fx-tablewrap table{min-width:700px}
.fx-src{max-width:220px}
.fx-panel{padding:18px 19px}
.fx-srcrecs{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.fx *{transition:none!important;animation:none!important}}

/* Subject-filtered timeline. Scoped: every rule is under .tt or starts .tt-,
   so this file cannot reach any existing page. Uses the site's own custom
   properties; no new palette and no raw hex, which the repository's brand and
   submissions guards both check. */
.tt{margin:0 0 55px}
.tt-controls{border:1px solid var(--line);background:var(--white);border-radius:var(--radius,5px);padding:22px;margin-bottom:22px;display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.tt-field{border:0;margin:0;padding:0;min-width:0}
.tt-field label,.tt-field legend{display:block;font:10px var(--sans);letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);padding:0;margin-bottom:9px}
.tt-field select{width:100%;max-width:100%;padding:11px 12px;min-height:46px;border:1px solid var(--line);border-radius:3px;background:var(--white);color:var(--text);font-size:14px}
.tt-hint,.tt-note{font-size:11px;line-height:1.55;color:var(--muted)}
.tt-hint{margin:9px 0 0}
.tt-note{display:block;margin-top:2px}
.tt-roles{grid-column:1/-1}
.tt-role{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;padding:10px 12px;border:1px solid var(--line);border-radius:3px;background:var(--paper);font-size:13px;min-height:46px;margin-bottom:7px;text-transform:none;letter-spacing:0;color:var(--text)}
.tt-role:has(input:checked){background:var(--sage);border-color:var(--forest)}
.tt-role input{width:18px;height:18px;accent-color:var(--forest);margin-top:2px}
.tt-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:9px;margin:0;border-top:1px solid var(--line);padding-top:16px}
.tt-status{grid-column:1/-1;margin:0;font-size:12px;color:var(--forest)}
.tt-count{font-size:13px;color:var(--muted);margin:0 0 14px}
.tt-empty{margin-bottom:22px}
.tt-dropped,.tt-deeplink{margin-bottom:18px}
.tt-evidence{margin-top:10px}
[data-tt-needs-js] .btn{opacity:.6}
.tt-list{list-style:none;margin:0;padding:0}
.tt-entry{padding:19px 0 20px 20px;border-left:1px solid var(--line);position:relative;margin-left:8px}
.tt-entry:before{content:'';position:absolute;left:-5px;top:27px;width:8px;height:8px;background:var(--forest);border-radius:50%;border:2px solid var(--paper)}
.tt-when{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 7px}
.tt-date{font-size:10px;letter-spacing:1.3px;text-transform:uppercase;color:var(--gold)}
.tt-role-tag{font-size:8px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);background:var(--sage);padding:2px 5px;border-radius:2px}
.tt-title{font-size:23px;margin:0 0 8px;line-height:1.25;overflow-wrap:anywhere}
.tt-summary{font-size:13px;color:var(--muted);margin:0;max-width:var(--measure)}
@media(max-width:760px){
.tt-controls{padding:16px;gap:14px;grid-template-columns:1fr}
.tt-actions .btn{flex:1 1 auto}
.tt-title{font-size:21px}
.tt-entry{padding-left:16px}
}
@media(prefers-reduced-motion:reduce){.tt *{transition:none!important;animation:none!important}}
.tt-indigenous-opener{border:1px solid var(--line);background:var(--sage);border-radius:5px;padding:24px 26px;margin:0 0 22px}
.tt-indigenous-opener h2{font-size:26px;margin:0 0 12px}
.tt-indigenous-opener p.measure{margin:0 0 16px}
.tt-indigenous-actions{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;margin:0}
.tt-photo-doorway{font-size:var(--ui-sm);margin:0 0 28px;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline}
@media(max-width:760px){
.tt-indigenous-opener{padding:19px}
.tt-indigenous-opener h2{font-size:22px}
}

/* Life in Clarke, 1920s.
   Every rule is scoped under .lic and every value comes from the site's own
   :root tokens, so this file adds no token, restyles nothing existing, and can
   be concatenated in any order. */

.lic{max-width:var(--shell-tight);margin:0 auto;padding-block:clamp(28px,5vw,64px);padding-inline:var(--gutter)}
.lic p{margin-bottom:1.15em}
.lic-eyebrow{font-family:var(--sans);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin:0 0 .55em}

.lic-head{border-bottom:1px solid var(--line);padding-bottom:var(--section-gap-sm);margin-bottom:var(--section-gap-sm)}
.lic-head h1{margin:0 0 .3em;overflow-wrap:anywhere}
.lic-lede{font-family:var(--serif);font-size:clamp(18px,2.2vw,23px);line-height:1.45;color:var(--ink);max-width:var(--measure);margin:0}

.lic-intro{max-width:var(--measure);font-size:17px}

/* The jump list. Wraps rather than scrolls; at 390px it becomes a stack of
   rows and never widens the page. The built site hands in the shared section
   map instead (src/page-covers/), so this list only renders without it. */
.lic-browse{margin:clamp(20px,3vw,32px) 0}
.lic-browse ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.lic-browse li{min-width:0}
.lic-browse a{display:inline-block;padding:7px 14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--white);text-decoration:none;font-size:13px;letter-spacing:1.1px;text-transform:uppercase;color:var(--ink);overflow-wrap:anywhere}
.lic-browse a:hover{border-color:var(--ink)}

/* Sections open on the site's landmark (Design P1.3): a hairline that starts
   with a short accent in the heritage red. */
.lic-section{position:relative;padding-top:var(--section-gap-md);margin-top:var(--section-gap-md);border-top:1px solid var(--line)}
.lic-section::before,.lic-closing::before{content:"";position:absolute;top:-1px;left:0;width:2.5rem;height:2px;background:var(--gold)}
.lic-section h2{margin:0 0 .55em;max-width:var(--measure);overflow-wrap:anywhere}
.lic-body{max-width:var(--measure);font-size:17px}

/* Statements in the record's own words. Set apart from the page's prose,
   because they are the census speaking and not this page. */
.lic-statements{list-style:none;margin:1.3em 0 0;padding:0;display:grid;gap:10px;max-width:var(--measure)}
.lic-statement{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;font-size:16px;line-height:1.5;min-width:0;overflow-wrap:anywhere}

/* One citation per document. Small, quiet, and never the same width as the
   prose, so a reader can tell narrative from apparatus at a glance. */
.lic-cites{display:grid;gap:12px;margin-top:1.4em}
.lic-cite{border-left:3px solid var(--sage);padding:10px 0 10px 14px;min-width:0}
.lic-cite-line{margin:0;font-size:14px;line-height:1.5;color:var(--muted);overflow-wrap:anywhere}
.lic-cite-line cite{font-style:normal;font-weight:700;color:var(--ink)}
.lic-cite-route{margin:.5em 0 0;font-size:14px}

/* The shared evidence drawer is dropped in here by the integrator's hook. This
   component styles the box it sits in and nothing inside it. */
.lic-evidence{margin-top:1.4em;min-width:0}

.lic-links{margin-top:1.5em}
.lic-links ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.lic-links li{min-width:0}
.lic-links a{font-size:15px;overflow-wrap:anywhere}

.lic-closing{position:relative;padding-top:var(--section-gap-md);margin-top:var(--section-gap-md);border-top:1px solid var(--line);max-width:var(--measure)}
.lic-closing h2{margin:0 0 .55em}

/* The homepage tile, sized by whatever grid it is dropped into. */
.lic-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:20px;min-width:0}
.lic-tile-title{font-size:22px;margin:0 0 .4em;overflow-wrap:anywhere}
.lic-tile p{margin:0;font-size:15px;color:var(--muted)}

/* Source-density strip on decade pages. Its edge was written against --rule,
   which the site never declared, so it did not draw until Design P1.3. */
.lic-density {
  margin: 24px 0 32px;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(0,0,0,0.02);
}
.lic-density-head { margin-bottom: 14px; }
.lic-density-head .eyebrow {
  display: block;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.7;
  margin-bottom: 6px;
}
.lic-density-sum {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  margin: 0;
}
.lic-density-sum strong { color: var(--ink); }
.lic-density-bars { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 12px; }
.lic-fam {
  display: grid;
  grid-template-columns: minmax(6em, 14em) 1fr minmax(1.5em, 2em);
  gap: 10px;
  align-items: center;
  font-size: 13px;
}
.lic-fam-label { color: var(--text); text-align: right; padding-right: 4px; }
.lic-fam-track {
  height: 12px;
  background: rgba(0,0,0,0.05);
  border-radius: 2px;
  overflow: hidden;
}
.lic-fam-fill {
  display: block;
  height: 100%;
  background: var(--ink);
  opacity: 0.75;
}
.lic-fam-count {
  font-size: 12px;
  color: var(--ink);
  font-weight: 600;
  text-align: left;
}
.lic-density-note {
  font-size: 12px;
  color: var(--text);
  opacity: 0.75;
  margin: 8px 0 0;
}
.lic-density-note a { color: var(--forest); }


/* Life in Clarke decade-index tiles and coming-soon landing shared styles. */
.lic-index-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),400px));margin-bottom:55px}
.lic-tile{display:block;text-decoration:none}
.lic-tile h3{font-size:26px}
.lic-pending{opacity:.85}
.lic-pending h3{color:var(--muted)}
.lic-pending-label{color:var(--muted)}
.lic-inline-link{text-decoration:underline}

/* Life in Clarke homepage hero block. */
.lic-band{padding-block:36px 30px}
.lic-hero-quote{font-family:var(--serif);font-size:clamp(28px,3.2vw,42px);line-height:1.25;color:var(--forest);border-left:3px solid var(--gold);padding:2px 0 6px 28px;margin:22px 0 26px;max-width:60ch}
.lic-hero-quote cite{display:block;font-family:var(--sans);font-size:12px;font-style:normal;color:var(--muted);letter-spacing:.5px;margin-top:14px}
.lic-hero-lede{color:var(--muted);font-size:16px;line-height:1.7;margin-bottom:24px}
.lic-hero-actions{margin:0}

/* Life in Clarke index — pending decades as a quiet roadmap list, not a
   dominant grid of empty tiles. */
.lic-pending-section{margin:56px 0 30px;padding-top:30px;border-top:1px solid var(--line)}
.lic-pending-heading{font-size:18px;color:var(--muted);margin:0 0 18px;font-family:var(--sans);font-weight:400;letter-spacing:.3px}
.lic-pending-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:11px 26px}
.lic-pending-row{font-size:14px;color:var(--muted);padding:4px 0}
.lic-pending-label{display:inline-block;font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--gold);border:1px solid var(--gold);padding:2px 7px;border-radius:2px;margin-right:9px}
.lic-pending-name{color:var(--text)}
.lic-pending-count{color:var(--muted);font-size:12px}
.lic-pending-note{margin-top:22px}

/* Third-party illustrations lane. Scoped under .ill- so nothing here affects
   the corpus media/story renderers. */
.ill-gallery{margin:36px 0 45px;padding:24px;background:var(--white);border:1px solid var(--line);border-radius:5px}
.ill-gallery-heading{font-size:22px;margin:0 0 8px}
.ill-gallery-note{font-size:12px;color:var(--muted);margin:0 0 22px;max-width:52em}
.ill-figure{margin:0 0 22px}
.ill-figure:last-child{margin-bottom:0}
.ill-image{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:3px}
/* The caption takes the site's caption standard (.caption in src/styles.css);
   this rule only lays it out. The credit line keeps its own class, which
   tests/test_illustrations.mjs counts, and restates the standard's credit
   tokens instead of a size and style of its own. */
.ill-caption{display:flex;flex-direction:column;gap:4px;margin-top:9px}
.ill-credit{font-size:var(--ui-xs);line-height:1.55;color:var(--muted)}

/* Page headers (src/page-header/render.mjs, assets/page-headers.json). Every image carries
   its own width and height, so nothing shifts as it loads; the H1 keeps its left placement. */
.ph{margin:0}
.ph img{display:block;max-width:100%;height:auto}
.ph figcaption{margin-top:8px;max-width:var(--measure);color:var(--muted)}
.ph--band{margin:0 0 var(--section-gap-sm)}
.ph--band img{width:100%}
.ph--rule{margin:0 0 var(--section-gap-sm)}
.ph--rule img{width:100%}
.ph-artifact{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(28px,4vw,64px);align-items:start}
.ph-artifact>.page-intro{min-width:0}
.ph--artifact{padding-top:52px;padding-bottom:30px}
.ph--artifact img{border:1px solid var(--line);border-radius:4px;background:var(--white)}
.ph--artifact figcaption{max-width:540px}
.ph--small img{max-width:min(100%,360px)}
.ph--small{margin:0 0 var(--section-gap-sm);padding:0}
.hero-v31 .ph--band{margin-top:var(--section-gap-sm);margin-bottom:0}
@media (max-width:900px){
  .ph-artifact{grid-template-columns:minmax(0,1fr);gap:0}
  .ph--artifact{padding-top:0;margin-bottom:var(--section-gap-sm)}
}

/* Entity external-record links. Scoped under .ext- so nothing here affects
   other entity page renderers. */
.ext-block{margin:36px 0 45px;padding:22px 24px;background:var(--white);border:1px solid var(--line);border-radius:5px}
.ext-heading{font-size:22px;margin:0 0 16px}
.ext-item{padding:14px 0;border-top:1px solid var(--line)}
.ext-item:first-of-type{border-top:0;padding-top:0}
.ext-link{font-size:16px;color:var(--forest);text-decoration:none;font-family:var(--serif);border-bottom:1px solid var(--line);padding-bottom:3px}
.ext-link:hover{border-bottom-color:var(--forest)}
.ext-dates{font-family:var(--sans);font-size:12px;color:var(--muted);margin-left:6px}
.ext-basis{font-size:13px;color:var(--muted);margin:9px 0 0;line-height:1.6}

/* Fact or Fable scoreboard. Scoped under .ff- so nothing else on the site
   picks up the verdict palette. Institutional restraint: no new brand
   colours; verdicts differentiate via border weight, chip fill (varying the
   existing palette's opacity), and short labels rather than a rainbow. */
.ff-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:22px;margin:32px 0 55px}
.ff-card{background:var(--white);border:1px solid var(--line);border-left:5px solid var(--ink);border-radius:5px;padding:22px 24px 20px;display:flex;flex-direction:column;gap:12px}
.ff-verdict{margin:0}
.ff-verdict-label{display:inline-block;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;padding:4px 10px;border-radius:3px;font-weight:600;background:var(--sage);color:var(--ink)}
.ff-belief{font-family:var(--serif);font-size:22px;line-height:1.3;margin:0;color:var(--forest)}
.ff-one-line{font-size:14px;color:var(--muted);line-height:1.65;margin:0}
.ff-note{font-size:11px;color:var(--muted);font-style:italic;margin:0}
.ff-cta{margin:auto 0 0}
.ff-cta a{font-size:13px;color:var(--forest);text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:2px}

/* Verdicts differentiate by border weight/style + chip fill only, using
   navy (ink), rust, and sage from the existing palette. No new hexes. */
.ff-verdict--documented{border-left-color:var(--ink);border-left-width:5px}
.ff-verdict--documented .ff-verdict-label{background:var(--sage);color:var(--ink)}
.ff-verdict--reported{border-left-color:var(--muted);border-left-width:4px;border-left-style:solid}
.ff-verdict--reported .ff-verdict-label{background:var(--paper);color:var(--muted);border:1px solid var(--line)}
.ff-verdict--contested{border-left-color:var(--rust);border-left-style:dashed}
.ff-verdict--contested .ff-verdict-label{background:var(--paper);color:var(--rust);border:1px solid var(--rust)}
.ff-verdict--unresolved{border-left-color:var(--line);border-left-style:dotted;border-left-width:5px}
.ff-verdict--unresolved .ff-verdict-label{background:var(--paper);color:var(--muted);border:1px dashed var(--line)}
.ff-verdict--unproven{border-left-color:var(--gold);border-left-style:dashed}
.ff-verdict--unproven .ff-verdict-label{background:var(--paper);color:var(--gold);border:1px solid var(--gold)}
.ff-verdict--fable{border-left-color:var(--gold);border-left-width:6px}
.ff-verdict--fable .ff-verdict-label{background:var(--gold);color:var(--white)}

/* Legend at the foot of the page. */
.ff-legend{margin:40px 0 30px;padding:26px;background:var(--sage);border:1px solid var(--line);border-radius:5px}
.ff-legend-heading{font-size:18px;margin:0 0 18px;color:var(--forest)}
.ff-legend-list{margin:0;display:grid;grid-template-columns:auto 1fr;gap:12px 20px;align-items:baseline}
.ff-legend-term{margin:0}
.ff-legend-term>span{display:inline-block;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;padding:3px 10px;border-radius:3px;font-weight:600;white-space:nowrap;background:var(--paper);color:var(--muted);border:1px solid var(--line)}
.ff-legend-list dd{margin:0;font-size:13px;color:var(--muted);line-height:1.6}
.ff-legend-term.ff-verdict--documented>span{background:var(--sage);color:var(--ink);border-color:transparent}
.ff-legend-term.ff-verdict--reported>span{background:var(--paper);color:var(--muted);border-color:var(--line)}
.ff-legend-term.ff-verdict--contested>span{background:var(--paper);color:var(--rust);border-color:var(--rust)}
.ff-legend-term.ff-verdict--unresolved>span{background:var(--paper);color:var(--muted);border-style:dashed}
.ff-legend-term.ff-verdict--unproven>span{background:var(--paper);color:var(--gold);border-color:var(--gold)}
.ff-legend-term.ff-verdict--fable>span{background:var(--gold);color:var(--white);border-color:transparent}

/* /silences/<decade>/ - the honest counterweight

   Rules use --line. They were written against --rule, a token the site never
   declared, so until Design P1.3 none of these borders drew: the header had no
   rule and the silences had no edges. Spacing comes from --section-gap-*. */

.silences-page {
  max-width: 780px;
  margin: 0 auto;
  padding: 24px 20px 80px;
}

.silences-header {
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--section-gap-sm);
  margin-bottom: var(--section-gap-md);
}

.silences-header .eyebrow {
  display: block;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.65;
  margin-bottom: 12px;
}

.silences-header h1 {
  font-size: 30px;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 16px;
}

.silences-lede {
  font-size: 17px;
  line-height: 1.55;
  color: var(--text);
  margin: 0 0 12px;
}

.silences-why {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  opacity: 0.85;
  margin: 0;
  padding: 12px 14px;
  border-left: 3px solid var(--line);
  background: rgba(0, 0, 0, 0.02);
}

.silences-list {
  display: flex;
  flex-direction: column;
  gap: var(--section-gap-sm);
}

.silence-card {
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
}

.silence-head {
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.silence-subject {
  font-size: 19px;
  line-height: 1.35;
  color: var(--ink);
  margin: 0;
  font-weight: 600;
}

.silence-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.silence-block h4 {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.65;
  margin: 0 0 6px;
  font-weight: 600;
}

.silence-block p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  margin: 0;
}

.silence-block--have p {
  color: var(--text);
}

.silence-block--why {
  padding-left: 12px;
  border-left: 2px solid var(--line);
}

.silence-block--how p {
  color: var(--forest);
  font-style: normal;
}

.silences-checked {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  margin: 12px 0 0;
}

.silence-coverage {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.silence-coverage-item {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
}

.silence-coverage-state {
  display: inline-block;
  margin-right: 6px;
  padding: 0 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 3px;
}

.silences-footer {
  margin-top: var(--section-gap-md);
  padding-top: var(--section-gap-sm);
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--text);
  opacity: 0.85;
}

.silences-footer a {
  color: var(--forest);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 640px) {
  .silences-page {
    padding: 16px 14px 60px;
  }
  .silences-header h1 {
    font-size: 24px;
  }
  .silence-card {
    padding: 18px 16px;
  }
}

/* Composed entity narrative on entity pages

   Rules use --line. They were written against --rule, a token the site never
   declared, so until Design P1.3 the narrative's edge, the rule under its
   heading, the closing note's bar and the rule above its evidence never drew.
   Spacing comes from --section-gap-*. */

.entity-narrative {
  max-width: 720px;
  margin: var(--section-gap-md) 0;
  padding: 28px 32px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
}

.entity-narrative .narr-head {
  border-bottom: 1px solid var(--line);
  padding-bottom: 16px;
  margin-bottom: 20px;
}

.entity-narrative .eyebrow {
  display: block;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.65;
  margin-bottom: 8px;
}

.entity-narrative h2 {
  font-size: 24px;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 8px;
}

.entity-narrative .narr-subtitle {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  opacity: 0.9;
  margin: 4px 0 0;
  font-style: italic;
}

.narr-body p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  margin: 0 0 16px;
}

.narr-body p:last-child {
  margin-bottom: 0;
}

.narr-cite {
  font-size: 11px;
  vertical-align: super;
  line-height: 1;
  margin-left: 2px;
}

.narr-cite a {
  color: var(--forest);
  text-decoration: none;
  padding: 0 2px;
  border-bottom: 1px solid transparent;
}

.narr-cite a:hover,
.narr-cite a:focus {
  border-bottom-color: var(--forest);
}

.narr-closing {
  font-size: 14px;
  color: var(--text);
  opacity: 0.85;
  padding: 14px 16px;
  margin: 20px 0 0;
  border-left: 3px solid var(--line);
  background: rgba(0, 0, 0, 0.02);
  font-style: italic;
}

.narr-evidence {
  margin-top: var(--section-gap-sm);
  padding-top: var(--section-gap-sm);
  border-top: 1px solid var(--line);
}

.narr-evidence-h {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.65;
  margin: 0 0 12px;
}

/* Optional sections and onward links (a narrative's `sections` and
   `read_next`; first used by Millwood). */
.narr-section {
  margin-top: var(--section-gap-sm);
}

.narr-section h3 {
  font-size: 20px;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 10px;
}

.narr-next {
  margin-top: var(--section-gap-sm);
  padding-top: var(--section-gap-sm);
  border-top: 1px solid var(--line);
}

.narr-next h3 {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.65;
  margin: 0 0 12px;
}

.narr-next ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

.narr-next-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 2px;
}

.narr-next a {
  font: 18px/1.3 var(--serif);
  color: var(--forest);
  text-underline-offset: 3px;
}

.narr-next p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  margin: 4px 0 0;
}

@media (max-width: 640px) {
  .entity-narrative {
    padding: 22px 20px;
  }
  .entity-narrative h2 {
    font-size: 20px;
  }
}

/* /clarke-in/ - decade dashboard */

.ci-dash {
  max-width: 1000px;
  margin: 0 auto;
  padding: 24px 20px 80px;
}

.ci-header {
  border-bottom: 1px solid var(--line);
  padding-bottom: 22px;
  margin-bottom: 24px;
}

.ci-header .eyebrow {
  display: block;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.65;
  margin-bottom: 8px;
}

.ci-header h1 {
  font-size: 30px;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 14px;
}

.ci-lede {
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  margin: 0;
  max-width: 760px;
}

.ci-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 24px 0 28px;
  padding: 12px;
  background: rgba(0,0,0,0.02);
  border: 1px solid var(--line);
  border-radius: 4px;
}

.ci-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--paper);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}

.ci-chip:hover {
  border-color: var(--ink);
  background: rgba(0,0,0,0.03);
}

.ci-chip--active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.ci-chip--active .ci-chip-count {
  color: var(--paper);
  opacity: 0.8;
}

.ci-chip--empty {
  opacity: 0.55;
}

.ci-chip-label {
  font-weight: 500;
}

.ci-chip-count {
  font-size: 11px;
  color: var(--text);
  opacity: 0.7;
}

.ci-decade {
  animation: ci-fade 220ms ease-out;
}

@keyframes ci-fade {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.ci-decade-head {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.ci-decade-h {
  font-size: 26px;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 10px;
}

.ci-decade-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 13px;
  color: var(--text);
  margin: 0;
}

.ci-decade-counts strong {
  color: var(--ink);
  font-weight: 600;
}

.ci-band {
  margin-bottom: 28px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
}

.ci-band--empty {
  opacity: 0.75;
  background: rgba(0,0,0,0.015);
}

.ci-band-title {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.75;
  margin: 0 0 14px;
}

.ci-band-body h4 {
  font-size: 13px;
  color: var(--ink);
  margin: 14px 0 6px;
  font-weight: 600;
}

.ci-band-body h4:first-child {
  margin-top: 0;
}

.ci-empty {
  font-size: 14px;
  color: var(--text);
  opacity: 0.75;
  margin: 0;
  font-style: italic;
}

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

.ci-list li {
  padding: 6px 0;
  font-size: 14px;
  line-height: 1.5;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  color: var(--text);
}

.ci-list li:last-child {
  border-bottom: none;
}

.ci-list--pop li {
  padding: 10px 0;
  font-size: 15px;
}

.ci-list--people li,
.ci-list--events li {
  display: flex;
  gap: 10px;
  align-items: baseline;
}

.ci-list a {
  color: var(--forest);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.ci-list a:hover {
  border-bottom-color: var(--forest);
}

.ci-span,
.ci-ev-date {
  font-size: 12px;
  color: var(--text);
  opacity: 0.7;
  min-width: 78px;
}

.ci-story-sub {
  display: block;
  font-size: 12px;
  color: var(--text);
  opacity: 0.8;
  font-style: italic;
  margin-top: 2px;
}

.ci-list--silences li {
  padding: 10px 0;
  font-size: 14px;
}

.ci-list--silences strong {
  color: var(--ink);
}

.ci-list--context li {
  color: var(--text);
  font-size: 13px;
}

.ci-more {
  margin-top: 12px;
  font-size: 13px;
}

.ci-more a {
  color: var(--forest);
}

.ci-note {
  font-size: 13px;
  color: var(--text);
  margin: 0 0 12px;
  padding: 8px 12px;
  border-left: 3px solid var(--line);
  background: rgba(0,0,0,0.02);
}

.ci-ev-role {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0 4px;
}

.ci-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.ci-bar {
  display: grid;
  grid-template-columns: 200px 1fr 36px;
  gap: 10px;
  align-items: center;
  font-size: 13px;
}

.ci-bar-label {
  color: var(--text);
  text-align: right;
  padding-right: 4px;
}

.ci-bar-track {
  height: 14px;
  background: rgba(0,0,0,0.04);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

.ci-bar-fill {
  display: block;
  height: 100%;
  background: var(--ink);
  opacity: 0.8;
  border-radius: 2px;
}

.ci-bar-count {
  color: var(--ink);
  font-weight: 600;
  font-size: 12px;
  text-align: left;
}

.ci-footer {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--text);
  opacity: 0.85;
}

@media (max-width: 640px) {
  .ci-header h1 { font-size: 24px; }
  .ci-decade-h { font-size: 22px; }
  .ci-decade-counts { gap: 12px; font-size: 12px; }
  .ci-band { padding: 16px 14px; }
  .ci-bar { grid-template-columns: 130px 1fr 28px; font-size: 12px; }
  .ci-bar-label { font-size: 12px; }
}

/* Deep decade-context block: presidents, governors, population, events, culture */
.ci-context {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.ci-context-block {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(0,0,0,0.02);
}
.ci-context-h {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.7;
  margin: 0 0 10px;
  font-weight: 600;
}
.ci-context-subh {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.6;
  margin: 8px 0 4px;
  font-weight: 600;
}
.ci-context-dl {
  display: grid;
  grid-template-columns: minmax(9em, 14em) 1fr;
  gap: 6px 14px;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}
.ci-context-dl dt { color: var(--text); opacity: 0.75; }
.ci-context-dl dd { margin: 0; color: var(--ink); }
.ci-context-events {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
}
.ci-context-events ul { margin: 0; padding-left: 18px; }
.ci-context-events li { margin: 2px 0; font-size: 13px; }
.ci-context-culture {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  font-style: italic;
}
.ci-context-local {
  padding: 14px 16px;
  border-top: 1px solid var(--line);
  margin-top: 4px;
}
.ci-note {
  font-size: 12px;
  color: var(--text);
  opacity: 0.6;
}
.ci-empty-inline {
  color: var(--text);
  opacity: 0.6;
}

/* Era grouping in the chip strip */
.ci-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 24px;
  margin: 18px 0 26px;
}
.ci-chip-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.ci-chip-group-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.55;
  font-weight: 600;
  padding-left: 2px;
}
.ci-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* Cross-link out of the wider-context band to the Indigenous Clarke page */
.ci-context-cross {
  margin: 4px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(0,0,0,0.02);
  font-size: 13px;
}
.ci-context-cross a {
  color: var(--forest);
  text-decoration: none;
  font-weight: 600;
}
.ci-context-cross a:hover { text-decoration: underline; }

/* Zoomable timeline (/through-time/) */
.zt {
  margin: 32px 0 24px;
}
.zt-head { margin-bottom: 24px; }
.zt-h {
  font-size: 22px;
  margin: 0 0 8px;
  color: var(--ink);
  font-weight: 600;
}
.zt-lede {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  margin: 0 0 8px;
  max-width: 65ch;
}
.zt-stats {
  font-size: 13px;
  color: var(--text);
  opacity: 0.75;
  margin: 0;
}

.zt-era {
  margin: 0 0 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(0,0,0,0.015);
}
.zt-era-head {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 14px 18px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  border-radius: 4px;
}
.zt-era-head:hover { background: rgba(0,0,0,0.03); }
.zt-era-title { flex: 1; }
.zt-era-h {
  font-size: 16px;
  margin: 0 0 3px;
  color: var(--ink);
  font-weight: 600;
}
.zt-era-sub {
  font-size: 13px;
  margin: 0;
  color: var(--text);
  opacity: 0.75;
}
.zt-era-count {
  font-size: 16px;
  color: var(--ink);
  font-weight: 600;
  min-width: 3em;
  text-align: right;
}
.zt-era-body {
  padding: 0 18px 18px;
  display: none;
}
.zt-era--open .zt-era-body { display: block; }
/* Without the script, a link to #era-<key> still opens that era. */
.zt-era:target .zt-era-body { display: block; }
.zt-era { scroll-margin-top: 80px; }
.zt-era--empty .zt-era-body { display: block; padding-top: 0; }
.zt-empty {
  font-size: 13px;
  color: var(--text);
  opacity: 0.6;
  margin: 8px 0 0;
}

.zt-decade {
  margin: 18px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}
.zt-decade:first-child { border-top: none; padding-top: 0; }
.zt-decade-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.zt-decade-title { display: flex; align-items: baseline; gap: 8px; }
.zt-decade-label {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}
.zt-decade-count {
  font-size: 13px;
  color: var(--text);
  opacity: 0.7;
}
.zt-decade-context {
  font-size: 12px;
  color: var(--text);
  opacity: 0.7;
  font-style: italic;
  flex: 1;
}
.zt-decade-more {
  font-size: 12px;
  color: var(--forest);
  text-decoration: none;
}
.zt-decade-more:hover { text-decoration: underline; }

.zt-decade-bars {
  display: flex;
  gap: 3px;
  align-items: flex-end;
  height: 80px;
  margin-bottom: 4px;
  padding: 0 2px;
}
.zt-year {
  flex: 1;
  min-width: 1.8em;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  padding: 2px 0 0;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
}
.zt-year:hover .zt-year-bar { background: var(--forest); opacity: 1; }
.zt-year[aria-expanded="true"] .zt-year-bar { background: var(--forest); opacity: 1; }
.zt-year-bar {
  display: block;
  width: 100%;
  min-height: 3px;
  background: var(--ink);
  opacity: 0.5;
  border-radius: 1px 1px 0 0;
  transition: opacity 0.15s, background 0.15s;
}
.zt-year-label {
  font-size: 10px;
  color: var(--text);
  opacity: 0.6;
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  margin-top: 4px;
}
.zt-year-count {
  font-size: 10px;
  color: var(--ink);
  font-weight: 600;
  opacity: 0.7;
}
.zt-year:hover .zt-year-count,
.zt-year[aria-expanded="true"] .zt-year-count { opacity: 1; }

.zt-decade-details { margin-top: 6px; }
.zt-year-detail {
  display: none;
  margin: 8px 0;
  padding: 12px 14px;
  background: rgba(0,0,0,0.03);
  border-radius: 3px;
  border-left: 3px solid var(--forest);
}
.zt-year-detail--open { display: block; }
.zt-item-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.zt-item {
  padding: 3px 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
  border-bottom: 1px dotted var(--line);
}
.zt-item:last-child { border-bottom: none; }
.zt-item-date {
  display: inline-block;
  min-width: 6em;
  font-family: var(--mono, monospace);
  font-size: 12px;
  color: var(--text);
  opacity: 0.7;
  margin-right: 8px;
}
.zt-item--event { color: var(--ink); }
.zt-item--claim { color: var(--text); }
.zt-item--person { color: var(--text); font-style: italic; }

/* Preamble link at the top of an era body (used on Colonial frontier) */
.zt-era-preamble {
  margin: 0 0 18px;
  padding: 14px 16px;
  border-left: 3px solid var(--forest);
  background: rgba(0,0,0,0.02);
  border-radius: 3px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
}
.zt-era-preamble strong { color: var(--ink); }
.zt-era-preamble a {
  color: var(--forest);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--forest);
}

/* Indigenous Clarke page (/indigenous-clarke/)
   Scoped under .ind. No tokens declared; uses site :root variables. */

.ind {
  max-width: var(--shell-tight);
  margin: 0 auto;
  padding-block: clamp(28px, 5vw, 64px);
  padding-inline: var(--gutter);
}
.ind p { margin-bottom: 1.15em; }

.ind-eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 .55em;
}
.ind-head {
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--section-gap-sm);
  margin-bottom: var(--section-gap-sm);
}
.ind-head h1 {
  margin: 0 0 .3em;
  overflow-wrap: anywhere;
}
.ind-lede {
  font-family: var(--serif);
  font-size: clamp(18px, 2.2vw, 23px);
  line-height: 1.45;
  color: var(--ink);
  max-width: var(--measure);
  margin: 0;
}
/* Sections open on the site's landmark (Design P1.3): a hairline that starts
   with a short accent in the heritage red. The first section follows the
   section map and has neither. */
.ind-section {
  position: relative;
  padding-top: var(--section-gap-md);
  margin-top: var(--section-gap-md);
  border-top: 1px solid var(--line);
}
.ind-section::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 2.5rem;
  height: 2px;
  background: var(--gold);
}
.ind-section:first-of-type {
  padding-top: 0;
  margin-top: 0;
  border-top: none;
}
.ind-section:first-of-type::before {
  content: none;
}
.ind-section-h {
  margin: 0 0 .55em;
  max-width: var(--measure);
  overflow-wrap: anywhere;
}
.ind-body {
  max-width: var(--measure);
  font-size: 17px;
  color: var(--text);
  line-height: 1.7;
}
.ind-cites {
  margin-top: 1.6em;
  padding: 14px 16px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,0.02);
  border-radius: var(--radius);
}
.ind-cites-label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.7;
  margin: 0 0 8px;
  font-weight: 600;
}
.ind-cites-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
  font-size: 13px;
}
.ind-cites-list li a {
  color: var(--forest);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.ind-cites-list li a:hover {
  border-bottom-color: var(--forest);
}

.ind-nations {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin: 24px 0 8px;
}
.ind-nation {
  padding: 18px 20px;
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: var(--radius);
}
.ind-nation-name {
  font-family: var(--serif);
  font-size: 20px;
  margin: 0 0 6px;
  color: var(--ink);
}
.ind-nation-status {
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 12px;
  font-style: italic;
}
.ind-nation-connection {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  margin: 0 0 12px;
}
.ind-nation-link {
  margin: 0;
  font-size: 13px;
}
.ind-nation-link a {
  color: var(--forest);
  text-decoration: none;
  font-weight: 600;
}
.ind-nation-link a:hover { text-decoration: underline; }

.ind-foot {
  margin-top: var(--section-gap-lg);
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
  max-width: var(--measure);
}

/* The /rockhallfarm/ feature page. Scoped under .rhf; site :root tokens only.
   Shipped in the shared site.css. Captions follow the site caption standard. */
.rhf{max-width:var(--shell-tight);margin:0 auto;padding-block:clamp(28px,5vw,64px);padding-inline:var(--gutter)}
.rhf p{margin-bottom:1.15em}
.rhf-eyebrow{font-family:var(--sans);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin:0 0 .55em;display:block}
.rhf-head{border-bottom:1px solid var(--line);padding-bottom:var(--section-gap-sm);margin-bottom:var(--section-gap-sm)}
.rhf-head h1{margin:0 0 .3em;overflow-wrap:anywhere}
.rhf-subtitle{font-family:var(--sans);font-size:var(--ui-md);line-height:1.5;color:var(--muted);max-width:var(--measure);margin:0 0 .8em}
.rhf-lede{font-family:var(--serif);font-size:clamp(18px,2.2vw,23px);line-height:1.45;color:var(--ink);max-width:var(--measure);margin:0}
.rhf-hero{margin:0 0 var(--section-gap-sm)}
.rhf-figure{margin:1.2em 0 1.4em}
.rhf-hero img,.rhf-figure img{display:block;width:100%;height:auto;border-radius:var(--radius)}
.rhf-hero figcaption,.rhf-figure figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.3rem 1rem;margin-top:.5em}
.rhf-intro{max-width:var(--measure);margin:0 0 var(--section-gap-sm)}
.rhf-jump a{font-family:var(--sans);font-size:var(--ui-md);text-decoration:none;border-bottom:1px solid var(--gold)}
.rhf-section{position:relative;padding-top:var(--section-gap-md);margin-top:var(--section-gap-md);border-top:1px solid var(--line)}
.rhf-section::before{content:"";position:absolute;top:-1px;left:0;width:2.5rem;height:2px;background:var(--gold)}
.rhf-h{margin:0 0 .55em;max-width:var(--measure)}
.rhf-body{max-width:var(--measure)}
.rhf-timeline{list-style:none;margin:1.4em 0 0;padding:0;border-left:1px solid var(--line)}
.rhf-timeline>li{display:grid;grid-template-columns:4.5rem 1fr;gap:1rem;padding:0 0 1.4em 1rem;position:relative}
.rhf-timeline>li::before{content:"";position:absolute;left:-5px;top:.55em;width:9px;height:9px;border-radius:50%;background:var(--gold)}
.rhf-year{font-family:var(--serif);font-size:22px;color:var(--ink);line-height:1.2}
.rhf-timeline h3{font-size:22px;margin:0 0 .3em}
.rhf-item-src,.rhf-cites{font-size:var(--ui-sm);color:var(--muted)}
.rhf-cites-label{font-size:var(--ui-xs);letter-spacing:1.5px;text-transform:uppercase;margin:0 0 .4em}
.rhf-cites ul{margin:0;padding-left:1.1em}
.rhf-cites li{margin-bottom:.3em}
.rhf-document{display:grid;grid-template-columns:minmax(9rem,14rem) 1fr;gap:clamp(16px,3vw,40px)}
.rhf-date{display:flex;flex-direction:column;gap:.2em;color:var(--muted)}
.rhf-big{font-family:var(--serif);font-size:clamp(44px,6vw,72px);line-height:1;color:var(--ink)}
.rhf-quote{margin:0 0 1em;padding:0 0 0 1rem;border-left:3px solid var(--gold)}
.rhf-quote p{font-family:var(--serif);font-size:clamp(22px,2.6vw,30px);line-height:1.3;color:var(--ink)}
.rhf-notes details{border-top:1px solid var(--line);padding:.8em 0}
.rhf-notes summary{cursor:pointer;display:flex;justify-content:space-between;gap:1rem}
.rhf-notes summary span{color:var(--muted);font-size:var(--ui-sm);white-space:nowrap}
.rhf-notes details p{max-width:var(--measure);margin-top:.8em;font-size:var(--ui-lg)}
.rhf-foot{margin-top:var(--section-gap-md);padding-top:var(--section-gap-sm);border-top:1px solid var(--line);color:var(--muted);font-size:var(--ui-md)}
/* Scenes: a level-3 section inside the chapter before it, set off by a quieter rule. */
.rhf-sub{margin-top:var(--section-gap-sm);padding-top:var(--section-gap-sm);border-top-style:dashed}
.rhf-sub::before{content:none}
.rhf-sub .rhf-h{font-size:clamp(23px,2.4vw,30px)}
/* The six-date chronology. The kind of each date is a word, not a color. */
.rhf-chron{margin:0 0 var(--section-gap-sm);padding:clamp(16px,2.4vw,24px);background:var(--white);border:1px solid var(--line);border-radius:var(--radius)}
.rhf-chron-h{font-size:clamp(22px,2.2vw,28px);margin:0 0 .7em}
.rhf-chron ol{list-style:none;margin:0;padding:0}
.rhf-chron li{display:grid;grid-template-columns:4rem 10rem minmax(0,1fr);gap:.2rem 1rem;padding:.75em 0;border-top:1px solid var(--line)}
.rhf-chron li:first-child{border-top:0;padding-top:0}
.rhf-chron-year{font-family:var(--serif);font-size:22px;line-height:1.2;color:var(--ink)}
.rhf-chron-kind{font-family:var(--sans);font-size:var(--ui-xs);font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--muted);padding-top:.4em}
.rhf-chron-text{font-size:var(--ui-lg);line-height:1.55;max-width:var(--measure)}
.rhf-chron-text a{white-space:nowrap}
.rhf-chron-note{font-size:var(--ui-sm);color:var(--muted);margin:.9em 0 0}
/* Selected records: citation and access stated beside each one. */
.rhf-evidence{list-style:none;margin:1.2em 0 0;padding:0;display:grid;gap:1rem}
.rhf-evidence>li{padding:1rem 1.15rem;background:var(--white);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:var(--radius);scroll-margin-top:1rem}
.rhf-evidence h3{font-size:clamp(20px,2vw,24px);margin:0 0 .45em}
.rhf-evidence p{margin-bottom:.6em}
.rhf-evidence p:last-child{margin-bottom:0}
.rhf-ev-date{font-family:var(--sans);font-size:var(--ui-xs);letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}
.rhf-ev-cite{font-size:var(--ui-sm);color:var(--muted)}
.rhf-ev-link{font-family:var(--sans);font-size:var(--ui-md)}
.rhf-ev-link a{margin-right:.35em}
.rhf-ev-access{color:var(--muted)}
/* A separate note: a story that carries the name but is not placed on this farm. */
.rhf-aside{margin-top:var(--section-gap-md);padding:clamp(18px,3vw,30px);background:var(--white);border:1px solid var(--line);border-top:3px double var(--muted);border-radius:var(--radius)}
.rhf-aside .rhf-h{font-size:clamp(23px,2.4vw,30px)}
/* Cabin photographs: every view open on the page, whole (never cropped to fit), each linking to its full file. */
.rhf-gallery-group{margin-top:1.6em}
.rhf-gallery-h{font-size:clamp(20px,2vw,24px);margin:0 0 .35em}
.rhf-gallery-note{font-size:var(--ui-md);color:var(--muted);max-width:var(--measure)}
.rhf-grid{list-style:none;margin:.8em 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:1.4rem 1.2rem}
.rhf-tile{margin:0}
.rhf-tile a{display:block;background:var(--white);border:1px solid var(--line);border-radius:var(--radius)}
.rhf-tile img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;border-radius:var(--radius)}
.rhf-tile figcaption{display:flex;flex-direction:column;gap:.2rem;margin-top:.45em}
@media (max-width:640px){
  .rhf-document{grid-template-columns:1fr}
  .rhf-timeline>li{grid-template-columns:1fr;gap:.2rem}
  .rhf-notes summary{flex-direction:column;gap:.2rem}
  .rhf-chron li{grid-template-columns:3.5rem minmax(0,1fr)}
  .rhf-chron-text{grid-column:1/-1}
}

/* Scoped to the CCHA catalog view. Every rule is under .cc, so this file
   cannot reach another page even if it is ever served site-wide. */
/* Painted with the site palette only. A color declared here would be a
   second brand, and tests/test_submissions.mjs reads this far down the
   shared stylesheet looking for exactly that. */
.cc { --cc-rule: var(--line); --cc-quiet: var(--muted); }
.cc .cc-credit { border-left: 3px solid currentColor; padding: .6rem 0 .6rem .9rem; margin: 0 0 1.25rem; }
.cc .cc-credit p { margin: 0 0 .5rem; }
.cc .cc-credit p:last-child { margin-bottom: 0; }
.cc-controls { display: grid; gap: .75rem 1rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); align-items: end; margin: 0 0 .5rem; }
.cc-controls label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .25rem; }
.cc-controls input, .cc-controls select { width: 100%; padding: .45rem .5rem; font: inherit; border: 1px solid var(--cc-rule); border-radius: 4px; background: var(--white); color: inherit; }
.cc-field--wide { grid-column: 1 / -1; }
/* Said once, beside the control it qualifies. Repeating it on every card
   would push the entries off the screen it is meant to explain. */
.cc-scope { font-size: .88rem; color: var(--cc-quiet); margin: 0 0 1rem; }
.cc-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: 0 0 1rem; }
.cc-actions button { font: inherit; padding: .4rem .8rem; border: 1px solid var(--cc-rule); border-radius: 4px; background: var(--white); color: inherit; cursor: pointer; }
.cc-actions button:hover { border-color: currentColor; }
.cc-count { font-weight: 600; }
.cc-count .cc-quiet, .cc-quiet { font-weight: 400; color: var(--cc-quiet); }
.cc-list { list-style: none; margin: 0; padding: 0; }
/* Entries carry no class of their own beyond cc-has-thumb; the list is their
   scope. A heading may sit inside the thumbnail card's body, so the heading
   rules reach any depth of the entry. */
.cc-list > li { border-top: 1px solid var(--cc-rule); padding: .8rem 0; }
.cc-list > li:target { background: var(--gold-light); box-shadow: 0 0 0 .5rem var(--gold-light); }
.cc-list > li h3 { font-size: 1.02rem; font-weight: 700; margin: 0 0 .15rem; }
.cc-list > li h3 a { color: inherit; text-decoration: none; }
.cc-list > li h3 a:hover, .cc-list > li h3 a:focus { text-decoration: underline; }
/* Catalog titles and accessions run long and some carry no spaces at all
   ("2005.00023.266.J", "1989.00317.155-174"). A browser has nowhere to break
   those, and at 390px an unbroken run takes the whole page sideways with it.
   `anywhere` lets the break happen inside the run and, unlike `break-word`,
   is honored when the element's intrinsic min-content width is computed.
   No cataloged string is altered: this changes where a line may break. */
.cc-list > li h3, .cc-list .cc-m, .cc-list .cc-id { overflow-wrap: anywhere; }
.cc-list .cc-m { font-size: .86rem; color: var(--cc-quiet); margin: 0; }
.cc-list .cc-id { font-size: .86rem; margin: .2rem 0 0; font-variant-numeric: tabular-nums; }
.cc-list .cc-rel { font-size: .88rem; margin: .25rem 0 0; }
.cc-list .cc-rel-label { font-size: .74rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; border: 1px solid var(--cc-rule); border-radius: 3px; padding: .05rem .35rem; margin-right: .25rem; }
.cc-list .cc-src { font-size: .88rem; margin: .3rem 0 0; }
/* The entry's own address, kept on the card once its title links out to the
   catalog. Quiet, because it is a utility and not a second heading. */
.cc-list .cc-perma { font-size: .82rem; margin: .15rem 0 0; }
.cc-list .cc-perma a { color: var(--cc-quiet); }
/* A CCHA thumbnail, shown with the association's permission as a pointer to
   its record. It sits in plain whitespace to the left of the entry and above
   the title on a narrow screen. Fixed width, height from the image, so
   nothing is cropped or stretched. */
.cc-list > li.cc-has-thumb { display: grid; grid-template-columns: 90px minmax(0, 1fr); column-gap: 1rem; align-items: start; }
.cc-list .cc-thumb { display: block; width: 90px; height: auto; }
.cc-list .cc-body { min-width: 0; }
/* The filter hides entries with the hidden attribute. A grid card would
   otherwise stay visible, because display: grid outranks the browser's own
   rule for [hidden]. */
.cc-list > li[hidden], .cc-list > li.cc-has-thumb[hidden] { display: none; }
.cc .cc-rights { font-size: .86rem; color: var(--cc-quiet); }
.cc-empty { padding: 1.25rem 0; }
.cc-hidden { display: none !important; }
/* Without JavaScript every entry is present and readable; the controls only
   JavaScript can honor are not shown at all, rather than shown dead. */
.cc-needs-js, .cc-scope { display: none; }
.cc-on .cc-needs-js, .cc-on .cc-scope { display: block; }
.cc-on .cc-controls { display: grid; }
.cc-on .cc-actions { display: flex; }
.cc-linkish { font: inherit; color: inherit; background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
@media (max-width: 40rem) {
  .cc-controls { grid-template-columns: 1fr; }
  .cc-list > li.cc-has-thumb { grid-template-columns: 1fr; row-gap: .5rem; }
}

/* "Download the evidence" (src/evidence-download). A quiet box between a
   story's introduction and its chapter list: the link first, then what the
   packet covers, then its version and dates. */
.evidence-download {
  max-width: var(--measure);
  margin: var(--section-gap-sm) 0;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--forest);
  border-radius: 4px;
  background: var(--white);
}

.evidence-download-h {
  font-size: var(--ui-2xs);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 6px;
}

.evidence-download-link {
  margin: 0 0 6px;
}

.evidence-download-link a {
  font: 20px/1.3 var(--serif);
  color: var(--forest);
  text-underline-offset: 4px;
}

.evidence-download-size {
  font: var(--ui-xs) var(--sans);
  color: var(--muted);
  white-space: nowrap;
}

.evidence-download-scope {
  font-size: var(--ui-sm);
  color: var(--text);
  margin: 0 0 10px;
}

.evidence-download-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  margin: 0 0 8px;
  font-size: var(--ui-xs);
}

.evidence-download-meta div {
  display: flex;
  gap: 6px;
}

.evidence-download-meta dt {
  color: var(--muted);
}

.evidence-download-meta dd {
  margin: 0;
  color: var(--ink);
}

.evidence-download-note {
  font-size: var(--ui-2xs);
  color: var(--muted);
  margin: 0;
}

@media (max-width: 760px) {
  .evidence-download {
    padding: 14px 16px;
  }
  .evidence-download-meta {
    flex-direction: column;
  }
}

@media print {
  .evidence-download {
    display: none;
  }
}

/* Church and veteran hubs: profile pages and the two hub pages. Scoped under .hubs;
   site :root tokens only, no literal colour. Included in site.css only when a build
   emits a hub (scripts/build.mjs), so a build that emits neither ships none of it.
   Mobile: one column, tables become stacked rows labelled by data-label, 44px targets,
   no horizontal scroll. Captions follow the site caption standard. */
.hubs{padding-bottom:var(--section-gap-md)}
.hubs p{max-width:var(--measure)}
.hubs-head{border-bottom:1px solid var(--line);padding-bottom:var(--section-gap-sm);margin-bottom:var(--section-gap-sm)}
.hubs-head h1{margin:0 0 .3em;overflow-wrap:anywhere}
.hubs-subline{font-family:var(--sans);font-size:var(--ui-lg);line-height:1.5;color:var(--text);margin:0 0 .5em}
.hubs-aliases{font-size:var(--ui-md);color:var(--muted);margin:0 0 .5em}
.hubs-tier{font-family:var(--sans);font-size:var(--ui-md);color:var(--muted);margin:0}
.hubs-strip{list-style:none;margin:0 0 var(--section-gap-sm);padding:0;display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;font-family:var(--sans);font-size:var(--ui-md);color:var(--text)}
.hubs-strip li{padding:.2rem 0}
.hubs-section{position:relative;margin-top:var(--section-gap-md);padding-top:var(--section-gap-sm);border-top:1px solid var(--line)}
.hubs-section::before{content:"";position:absolute;top:-1px;left:0;width:2.5rem;height:2px;background:var(--gold)}
.hubs-section h2{margin:0 0 .5em;overflow-wrap:anywhere}
.hubs-section h2 span{font-family:var(--sans);font-size:var(--ui-md);color:var(--muted)}
.hubs-section h3{font-size:22px;margin:1.1em 0 .4em}
.hubs-lede{font-size:var(--ui-lg);color:var(--muted)}
.hubs-section ul{margin:0 0 1em;padding-left:1.2em}
.hubs-section li{margin-bottom:.4em}
.hubs-basis,.hubs-label-reason{font-size:var(--ui-md);color:var(--muted)}
.hubs-label-reason{display:block;margin-top:.3em}

/* Labels. The word is always printed; the border and fill only reinforce it. */
.hubs-labels{margin:.6em 0 .3em;display:flex;flex-wrap:wrap;gap:.35rem .6rem}
.hubs-label{display:inline-block;font-family:var(--sans);font-size:var(--ui-xs);line-height:1.4;border:1px solid var(--line);border-radius:3px;padding:.15rem .5rem;background:var(--white);color:var(--ink)}
.hubs-label-k{font-size:var(--ui-2xs);letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin-right:.3em}
.hubs-label--confirmed{background:var(--sage);border-color:var(--forest)}
.hubs-label--likely{background:var(--gold-light);border-color:var(--gold)}
.hubs-label--unconfirmed{background:var(--white);border-style:dashed;border-color:var(--muted)}

/* Tables: a real table on a wide screen, stacked labelled rows on a phone. */
.hubs-table{width:100%;border-collapse:collapse;font-size:var(--ui-md);line-height:1.5}
.hubs-table th{font-family:var(--sans);font-size:var(--ui-xs);letter-spacing:1px;text-transform:uppercase;text-align:left;color:var(--muted);padding:.5rem .75rem;border-bottom:2px solid var(--line)}
.hubs-table td{vertical-align:top;padding:.8rem .75rem;border-bottom:1px solid var(--line)}
.hubs-table td p{margin:0 0 .4em}
.hubs-sources{list-style:none;margin:0 0 .4em;padding:0}
.hubs-table .hubs-row{display:table-row;padding:0;border:0;border-radius:0;background:transparent}
.hubs-table .hubs-row[hidden]{display:none}
.hubs-table .hubs-row a{display:inline}

/* The gallery: one list, one card per image, readable with no script. */
.hubs-gallery-list{list-style:none;margin:1.2em 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:1.4rem}
.hubs-card-evidence{margin:0;padding:1rem;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);scroll-margin-top:1rem}
.hubs-card-evidence:target{border-color:var(--gold);box-shadow:var(--shadow)}
.hubs-cap{margin-top:.8em;border-top:1px solid var(--line);padding-top:.7em}
.hubs-cap-list{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:.25rem .8rem;margin:0 0 .5em;font-size:var(--ui-sm)}
.hubs-cap-list dt{font-family:var(--sans);font-size:var(--ui-2xs);letter-spacing:1px;text-transform:uppercase;color:var(--muted);padding-top:.15em}
.hubs-cap-list dd{margin:0;overflow-wrap:anywhere}
.hubs-people,.hubs-newspaper{margin:0 0 .5em;font-size:var(--ui-sm)}
.hubs-people .media-figure-label{display:inline;margin-right:.5em}
.hubs-transcription{margin:0 0 .6em}
.hubs-transcription blockquote{margin:.2em 0 0;padding:.1em 0 .1em .8em;border-left:3px solid var(--line);font-size:var(--ui-sm);overflow-wrap:anywhere}
.hubs-transcription blockquote p{margin:0}

/* Hub pages. */
.hubs-coverage{font-size:var(--ui-lg);color:var(--text);margin:0 0 var(--section-gap-sm)}
.hubs-filters .chips{margin-bottom:.6rem}
.hubs-entry .kind{overflow-wrap:anywhere}
.hubs-thumb{display:block;position:relative;margin:.6rem 0 .4rem}
.hubs-thumb img{display:block;width:100%;height:auto;border-radius:var(--radius)}
.hubs-thumb-credit{display:block;margin-top:.3em;font-size:var(--ui-2xs);color:var(--muted)}
.hubs-help-list{list-style:none;padding:0}
.hubs-help-list li{margin:0}
.hubs-help-list a{display:inline-block;padding-block:.65rem;min-height:44px}
.hubs-how{color:var(--muted)}
.hubs-defs{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:.4rem 1.2rem;margin:0 0 1.2em;font-size:var(--ui-md)}
.hubs-defs dt{font-family:var(--sans);font-size:var(--ui-xs);letter-spacing:1px;text-transform:uppercase;color:var(--forest);padding-top:.15em}
.hubs-defs dd{margin:0}
.hubs-back{font-family:var(--sans);font-size:var(--ui-md);margin:.4em 0 0}
.hubs-roll-legend{margin:0 0 1em;font-size:var(--ui-md)}
.hubs-roll-legend summary{cursor:pointer;color:var(--forest);min-height:44px;display:flex;align-items:center}
.hubs-roll-scope{margin:0 0 .8em}
.hubs-roll-table td:nth-child(3),.hubs-roll-table td:nth-child(4),.hubs-roll-table td:nth-child(6){font-size:var(--ui-sm);overflow-wrap:anywhere}
.hubs-roll-error,.hubs-roll-noscript{color:var(--muted)}
.hubs-roll-noscript-list{columns:3 14rem;column-gap:1.5rem;font-size:var(--ui-md)}

/* Hub pages use the full page container: no narrow intro column, notes laid out across the width. */
.hubs-page p,.hubs-page .page-intro p{max-width:none}
.hubs-page .page-intro{max-width:none;padding-top:20px;padding-bottom:6px;display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem 1.5rem}
.hubs-page .page-intro .eyebrow{flex:0 0 100%;margin-bottom:4px}
.hubs-page .page-intro h1{font-size:clamp(30px,3.4vw,44px);letter-spacing:-1.2px;margin:0}
.hubs-page .page-intro .hubs-count-badge{display:inline-block;font-size:var(--ui-md);font-weight:600;color:var(--muted);border:1px solid currentColor;border-radius:999px;padding:.1em .75em;white-space:nowrap}
.hubs-page .page-intro p{margin:0;font-size:var(--ui-lg)}
.hubs-page .page-intro p:not(.fine){flex:1 1 30rem}
.hubs-page .hubs-section{margin-top:var(--section-gap-sm);padding-top:var(--section-gap-sm)}
.hubs-page .hubs-section h2{font-size:clamp(22px,2.2vw,28px);letter-spacing:-.5px;margin-bottom:.35em}
.hubs-page .hubs-lede{font-size:var(--ui-lg);margin:0 0 .6em}
.hubs-page .hubs-roll-add{margin:0 0 .4em;font-size:var(--ui-md)}
.hubs-page .hubs-roll-add .text-link{display:inline-block;padding-block:.5rem}
.hubs-roll-about{margin:0 0 .4em}
.hubs-roll-about ul{columns:2 22rem;column-gap:2rem;margin:0 0 .6em}
.hubs-roll-about li{break-inside:avoid}
.hubs-roll-about .hubs-roll-scope{margin:0 0 .6em}
.hubs-page .list-tools{margin-top:8px}
.hubs-page .filter-hint{margin-top:8px}

/* The slim strip of entries that have a full page: one row of short lines, no card text. */
.hubs-strip-section .hubs-lede{font-size:var(--ui-md);color:var(--muted);margin:0 0 .5em}
.hubs-page .hubs-strip-section{margin-top:var(--section-gap-sm);padding-top:12px}
.hubs-section .hubs-pick-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));gap:.5rem .7rem}
.hubs-section .hubs-pick{margin:0}
.hubs-pick{padding:.45rem .65rem;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);display:flex;flex-direction:column;gap:.1rem;font-size:var(--ui-md);line-height:1.4}
.hubs-pick > *{flex:0 0 auto}
.hubs-pick-name{font-family:var(--serif);font-size:1rem;color:var(--ink);overflow-wrap:anywhere;padding-block:.2rem}
.hubs-pick-kind{font-family:var(--sans);font-size:var(--ui-2xs);letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.hubs-pick-sum{color:var(--text);font-size:var(--ui-sm)}

@media (max-width:760px){
  .hubs .hubs-honor h2{font-size:40px}
  .hubs-honor-name{font-size:17px}
  .hubs-honor-eyebrow{letter-spacing:4px}
  .hubs-table,.hubs-table thead,.hubs-table tbody,.hubs-table tr,.hubs-table td{display:block;width:100%}
  .hubs-table thead{position:absolute;clip:rect(0,0,0,0);width:1px;height:1px;overflow:hidden}
  .hubs-table tr{padding:.7rem 0;border-bottom:1px solid var(--line)}
  .hubs-table td{border:0;padding:.25rem 0;flex:0 0 auto}
  .hubs-table td::before{content:attr(data-label);display:block;font-family:var(--sans);font-size:var(--ui-2xs);letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
  .hubs-table .hubs-row{display:block;padding:.7rem 0}
  .hubs-table .hubs-row[hidden]{display:none}
  .hubs-table td:empty{display:none}
  .hubs-page .page-intro{display:block}
  .hubs-page .page-intro h1{margin-bottom:.3em}
  .hubs-page .page-intro .hubs-count-badge{margin-bottom:.5em}
  .hubs-gallery-list{grid-template-columns:minmax(0,1fr)}
  .hubs-cap-list{grid-template-columns:minmax(0,1fr)}
  .hubs-defs{grid-template-columns:minmax(0,1fr)}
  .hubs-strip{flex-direction:column;gap:.1rem}
  .hubs-strip li{flex:0 0 auto}
  .hubs-labels{flex-direction:column;align-items:flex-start}
  .hubs-labels .hubs-label{flex:0 0 auto}
}
.hubs-grave-facts{margin:0 0 .75rem}
.hubs-grave-facts div{display:grid;grid-template-columns:9rem 1fr;gap:.5rem;padding:.3rem 0;border-bottom:1px solid var(--line)}
.hubs-grave-facts dt{font-weight:600}
.hubs-grave-facts dd{margin:0}
.hubs-grave-photo{margin:1rem 0 0}
.hubs-grave-photo img{display:block;max-width:100%;height:auto;border:1px solid var(--line)}
@media (max-width:600px){.hubs-grave-facts div{grid-template-columns:1fr;gap:0}}

/* The veterans' "full page" strip as two moving rows (pagesMarquee in pages.mjs).
   Each card carries its own right margin, so the echoed half is exactly half the
   track and -50% loops without a jump. Hover, focus or the pause switch stop it;
   reduced motion turns it into two still rows a reader scrolls by hand. */

/* Veterans page in the AmericanAcorns look: a white page, navy type, red accents. */
.hubs-page--veteran .page-intro .eyebrow{color:var(--gold)}
.hubs-page--veteran h1,.hubs-page--veteran .hubs-section h2{color:var(--ink)}
.hubs-page--veteran .page-intro .hubs-count-badge{color:var(--gold)}
.hubs-page--veteran .hubs-pick{border-left:3px solid var(--ink)}
.hubs-page--veteran .hubs-pick:hover{border-left-color:var(--gold)}
/* Veterans hub (OC-WO-2026-10-12-veterans-engagement.md): stories of service, the still grid of
   full pages grouped by war, and the ways into the roll. */
.hubs-section .hubs-story-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:.6rem .8rem}
.hubs-story{margin:0;padding:.7rem .85rem;background:var(--white);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:var(--radius);display:flex;flex-direction:column;gap:.2rem}
.hubs-story-title{font-family:var(--serif);font-size:1.15rem;line-height:1.3;color:var(--ink)}
.hubs-story-range{font-size:var(--ui-2xs);letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.hubs-story-sub{font-size:var(--ui-sm);color:var(--muted);line-height:1.45}
.hubs-story > *{flex:0 0 auto}
.hubs-grid-war{margin:0 0 var(--section-gap-sm)}
.hubs-grid-war h3{font-size:1.25rem;margin:.4rem 0 .5rem}
.hubs-grid-war h3 span{font-family:var(--sans);font-size:var(--ui-sm);color:var(--muted)}
.hubs-section .hubs-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));gap:.7rem}
.hubs-grid .hubs-pick{padding:.6rem .75rem .7rem}
.hubs-pick-thumb{display:block;aspect-ratio:3 / 2;margin:0 0 .45rem;overflow:hidden;border-radius:calc(var(--radius) - 2px);background:var(--sage)}
.hubs-pick-thumb img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.hubs-pick-credit{font-size:var(--ui-2xs);color:var(--muted);line-height:1.4;margin-top:.25rem}
.hubs-browse-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:.4rem 1.6rem}
.hubs-browse-group h3{font-size:1.15rem;margin:.3rem 0 .4rem}
.hubs-section .hubs-browse-list{list-style:none;margin:0 0 .4rem;padding:0;display:flex;flex-direction:column;gap:.15rem}
.hubs-section .hubs-browse-list li{flex:0 0 auto;font-size:var(--ui-md);line-height:1.5}
.hubs-browse-list a{display:inline-flex;align-items:center;min-height:36px}
.hubs-roll-match{margin:.4rem 0 0}
/* The lead under a veteran's H1 (A2), and the evidence depth moved below the identity block. */
.hubs-head .hubs-opening{font-family:var(--serif);font-size:clamp(1.15rem,1.6vw,1.35rem);line-height:1.55;color:var(--ink);max-width:var(--measure);margin:.2rem 0 .8rem}
.hubs-depth{margin:0 0 var(--section-gap-sm)}
.hubs-depth .hubs-tier{margin:0 0 .2rem}
/* Readable records under /veterans/ (A5): the clipping beside its transcription in print order. */
.hubs-records-page .hubs-roh-context{font-size:var(--ui-md);color:var(--text)}
.hubs-roh-layout{display:grid;grid-template-columns:minmax(0,26rem) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start;margin:0 0 var(--section-gap-md)}
.hubs-roh-image{min-width:0}
.hubs-roh-image .media-figure img{width:100%;height:auto;display:block}
.hubs-roh-text h2 span{font-family:var(--sans);font-size:var(--ui-sm);color:var(--muted)}
.hubs-roh-printed-head{font-family:var(--serif);font-size:1.3rem;letter-spacing:.04em;color:var(--ink);margin:1rem 0 .5rem}
.hubs-roh-intro{font-size:var(--ui-md);max-width:var(--measure)}
.hubs-roh-block{margin:0 0 1rem}
.hubs-roh-head{font-family:var(--serif);font-size:1.15rem;letter-spacing:.06em;margin:1.2rem 0 .4rem}
.hubs-roh-sub{font-family:var(--serif);font-size:1rem;margin:.6rem 0 .3rem}
.hubs-section .hubs-roh-list{list-style:none;margin:0;padding:0;columns:2 14rem;column-gap:2rem}
.hubs-roh-list li{break-inside:avoid;font-size:var(--ui-md);line-height:1.6}
.hubs-roh-list a.hubs-roh-page{font-weight:600}
@media (max-width:900px){
  .hubs-roh-layout{grid-template-columns:minmax(0,1fr)}
}
.hubs-roh-layout--text{grid-template-columns:minmax(0,1fr)}
.hubs-roh-source{font-size:var(--ui-md)}
.hubs-roh-dedication{text-align:center;max-width:var(--measure);margin:0 0 1rem}
.hubs-roh-dedication .hubs-roh-intro{margin:0 auto .15rem;font-family:var(--serif)}
/* V-18 (OC-WO-2026-10-13-veterans-mobile.md): search first, swipe rows and compact browse on a phone. */
.hubs-find{margin:.4rem 0 .6rem;max-width:34rem}
.hubs-find-label{display:block;font-family:var(--sans);font-size:var(--ui-sm);font-weight:600;color:var(--ink);margin:0 0 .3rem}
.hubs-find-row{display:flex;gap:.5rem}
.hubs-find-row input{flex:1 1 auto;min-width:0;min-height:44px;padding:.5rem .7rem;font:inherit;font-size:var(--ui-md);color:var(--text);background:var(--white);border:1px solid var(--muted);border-radius:3px}
.hubs-find-row .btn{min-height:44px}
.hubs-find-note{display:block;min-height:1.4em;margin-top:.3rem}
.hubs-swipe-all{display:none}
.hubs-browse-war h3{font-size:1.15rem;margin:.3rem 0 .4rem}
.hubs-section .hubs-browse-inline{list-style:none;margin:0 0 .8rem;padding:0;display:flex;flex-wrap:wrap;gap:.2rem 1.1rem}
.hubs-browse-inline li{font-size:var(--ui-md);line-height:1.6}
.hubs-browse-group summary{cursor:pointer;font-family:var(--serif);font-size:1.1rem;color:var(--ink);min-height:44px;display:flex;align-items:center;gap:.4rem}
.hubs-more-filters{flex:1 1 100%}
.hubs-more-filters-body{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:end}
@media (min-width:721px){
  .hubs-more-filters > summary{display:none}
}
@media (max-width:720px){
  .hubs-section .hubs-swipe{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:.7rem;padding:0 0 .6rem;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .hubs-section .hubs-story-list.hubs-swipe > li{flex:0 0 80%;scroll-snap-align:start}
  .hubs-section .hubs-asks.hubs-swipe{flex-direction:row;align-items:stretch}
  .hubs-section .hubs-asks.hubs-swipe > li{flex:0 0 80%;scroll-snap-align:start}
  .hubs-story-sub{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .hubs-grid-wars.hubs-swipe .hubs-grid-war{display:contents}
  .hubs-grid-wars.hubs-swipe .hubs-grid-war h3{display:none}
  .hubs-section .hubs-grid-wars.hubs-swipe .hubs-grid{display:contents}
  .hubs-grid-wars.hubs-swipe .hubs-pick{flex:0 0 80%;scroll-snap-align:start}
  .hubs-grid-wars .hubs-pick-thumb{aspect-ratio:auto;height:96px}
  .hubs-grid-wars .hubs-pick-credit{display:none}
  .hubs-grid-wars .hubs-pick-sum{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .hubs-swipe-all{display:block;margin:.2rem 0 0}
  .hubs-grid-section:target .hubs-grid-wars{display:block;overflow:visible}
  .hubs-grid-section:target .hubs-grid-wars .hubs-grid-war{display:block}
  .hubs-grid-section:target .hubs-grid-wars .hubs-grid-war h3{display:block}
  .hubs-section.hubs-grid-section:target .hubs-grid-wars .hubs-grid{display:grid}
  .hubs-grid-section:target .hubs-grid-wars .hubs-pick-sum{display:block}
  .hubs-grid-section:target .hubs-swipe-all{display:none}
  .hubs-roll > .hubs-lede{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .hubs-records-links .hubs-story-sub{display:none}
  /* The roll's rows on a phone: the label runs in line with its value, so a row is half as tall. */
  .hubs-roll-table td::before{display:inline;margin-right:.4em}
  .hubs-roll-table td{padding:.12rem 0;line-height:1.45}
  .hubs-roll-table td:first-child{font-size:var(--ui-md)}
}
/* V-17 A6/B3: specific asks on a veteran page and "Most wanted" on /veterans/. */
.hubs-section .hubs-asks{list-style:none;margin:0 0 1rem;padding:0;display:flex;flex-direction:column;gap:.45rem}
.hubs-section .hubs-asks > li{flex:0 0 auto}
.hubs-ask{font-size:var(--ui-md);line-height:1.5;padding:.55rem .75rem;background:var(--white);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:var(--radius)}
.hubs-ask-name{font-family:var(--serif);font-size:1.05rem;color:var(--ink);display:block}
.hubs-ask .text-link{white-space:nowrap}

/* The honor banner at the top of /veterans/ (renderRollBanner, src/hubs/roll.mjs): a navy band between red and
   white stripes, a faint field of stars, and every name on the roll scrolling past, grouped by war (src/hubs/roll.js).
   The ticker is decorative and can be paused; the roll below is the readable list. */
.hubs-honor{position:relative;margin:var(--section-gap-sm) 0 var(--section-gap-md);padding:12px 0;background:var(--ink);color:var(--white);border-radius:var(--radius);overflow:hidden;text-align:center}
.hubs-honor::before,.hubs-honor::after{content:"";position:absolute;left:0;right:0;height:8px;background:repeating-linear-gradient(90deg,var(--gold) 0 18px,var(--white) 18px 36px)}
.hubs-honor::before{top:0}
.hubs-honor::after{bottom:0}
.hubs-honor-band{position:relative;padding:26px 0 18px}
.hubs-honor-band::before{content:"";position:absolute;inset:0;background-image:radial-gradient(var(--white) 1.1px,transparent 1.6px);background-size:28px 28px;opacity:.13;pointer-events:none}
.hubs-honor-eyebrow{position:relative;margin:0 auto .3rem;font-family:var(--sans);font-size:var(--ui-sm);font-weight:600;letter-spacing:6px;text-transform:uppercase;color:var(--white)}
.hubs .hubs-honor h2{position:relative;margin:0 auto;color:var(--white);font-size:clamp(40px,6vw,72px);letter-spacing:-1.5px;line-height:1}
.hubs-honor h2 span{display:block;margin-top:.35rem;font-style:italic;font-size:.55em;letter-spacing:0}
.hubs .hubs-honor-count{position:relative;margin:.9rem auto 0;font-size:var(--ui-md)}
.hubs-honor-count a{color:var(--white)}
.hubs-honor-ticker{position:relative;margin-top:20px;padding:12px 0;overflow:hidden;border-top:1px solid var(--gold);border-bottom:1px solid var(--gold);text-align:left;mask-image:linear-gradient(90deg,transparent,var(--ink) 7%,var(--ink) 93%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,var(--ink) 7%,var(--ink) 93%,transparent)}
.hubs-honor-track{position:relative;display:inline-flex;align-items:center;white-space:nowrap;will-change:transform}
.hubs-honor-name{font-family:var(--serif);font-size:20px;line-height:1.4;padding-right:1rem}
.hubs-honor-name::before{content:"\2605";color:var(--gold);font-size:.7em;vertical-align:.2em;margin-right:1rem}
.hubs-honor-war{margin:0 1rem;padding:.3rem .8rem;border-radius:3px;background:var(--gold);color:var(--white);font-family:var(--sans);font-size:var(--ui-xs);font-weight:600;letter-spacing:2px;text-transform:uppercase}
.hubs-honor-toggle{position:relative;margin-top:16px;min-height:44px;padding:0 1.3rem;border:1px solid var(--white);border-radius:999px;background:transparent;color:var(--white);font-size:var(--ui-sm)}
.hubs .hubs-honor-toggle:focus-visible,.hubs .hubs-honor-count a:focus-visible{outline-color:var(--white)}

/* Scoped to the Green Hill directory. Every rule is under .gh, so this file
   cannot reach another page even if it is ever served site-wide. */
/* Painted with the site palette only. A color declared here would be a
   second brand, and tests/test_submissions.mjs reads this far down the
   shared stylesheet looking for exactly that. */
.gh { --gh-rule: var(--line); --gh-quiet: var(--muted); }
.gh .gh-credit { border-left: 3px solid currentColor; padding: .6rem 0 .6rem .9rem; margin: 0 0 1.25rem; }
.gh .gh-credit p { margin: 0 0 .5rem; }
.gh .gh-credit p:last-child { margin-bottom: 0; }
.gh-controls { display: grid; gap: .75rem 1rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); align-items: end; margin: 0 0 1rem; }
.gh-controls label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .25rem; }
.gh-controls input, .gh-controls select { width: 100%; padding: .45rem .5rem; font: inherit; border: 1px solid var(--gh-rule); border-radius: 4px; background: var(--white); color: inherit; }
.gh-field--wide { grid-column: 1 / -1; }
.gh-years { display: flex; gap: .4rem; align-items: center; }
.gh-years input { min-width: 0; }
.gh-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: 0 0 1rem; }
.gh-actions button { font: inherit; padding: .4rem .8rem; border: 1px solid var(--gh-rule); border-radius: 4px; background: var(--white); color: inherit; cursor: pointer; }
.gh-actions button:hover { border-color: currentColor; }
.gh-count { font-weight: 600; }
.gh-count .gh-quiet { font-weight: 400; color: var(--gh-quiet); }
.gh-list { list-style: none; margin: 0; padding: 0; }
/* Records carry no class of their own; the list is their scope. */
.gh-list > li { border-top: 1px solid var(--gh-rule); padding: .7rem 0; }
.gh-list > li:target { background: var(--gold-light); box-shadow: 0 0 0 .5rem var(--gold-light); }
.gh-list > li > h3 { font-size: 1.02rem; font-weight: 700; margin: 0 0 .15rem; }
.gh-list > li > h3 a { color: inherit; text-decoration: none; }
.gh-list > li > h3 a:hover, .gh-list > li > h3 a:focus { text-decoration: underline; }
.gh-list .d { margin: 0 0 .15rem; font-variant-numeric: tabular-nums; }
.gh-list .m { font-size: .86rem; color: var(--gh-quiet); margin: 0; }
/* The compilers wrote some notes with no spaces at all -- one runs 75
   characters, `w#1CharlesJShipeSr.;w#2CharlesTMarshall;d/...`. A browser has
   nowhere to break that, so at 390px it painted 144px past the viewport and
   took the whole page sideways with it. `anywhere` lets the break happen
   inside the run and, unlike `break-word`, is honoured when the element's
   intrinsic min-content width is being computed. The note text itself is not
   altered: this changes where a line may break, never a character of it. */
.gh-list .n { font-size: .9rem; margin: .2rem 0 0; overflow-wrap: anywhere; }
.gh-list .w { font-size: .82rem; color: var(--gh-quiet); margin: .2rem 0 0; }
.gh-list .m b { display: inline-block; font-size: .74rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; border: 1px solid var(--gh-rule); border-radius: 3px; padding: .05rem .35rem; margin-right: .2rem; }
.gh-pager { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: 1rem 0 0; }
.gh-pager button[disabled] { opacity: .45; cursor: default; }
.gh-empty { padding: 1.25rem 0; }
.gh-hidden { display: none !important; }
.gh-kinds dt { font-weight: 700; margin-top: .6rem; }
.gh-kinds dd { margin: .15rem 0 0; }
/* Without JavaScript every record is present and readable; the controls that
   only JavaScript can honor are not shown at all, rather than shown dead. */
.gh-needs-js { display: none; }
.gh-on .gh-needs-js { display: block; }
.gh-on .gh-controls { display: grid; }
.gh-on .gh-actions, .gh-on .gh-pager { display: flex; }
.gh-linkish { font: inherit; color: inherit; background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
@media (max-width: 40rem) {
  .gh-controls { grid-template-columns: 1fr 1fr; }
  .gh-field--wide { grid-column: 1 / -1; }
  .gh-rec { padding: .8rem 0; }
}

/* Scoped to /data/ and /data/snapshots/. Every rule is under .dl, so nothing
   here can reach another route, and it paints with the site palette only. */
.dl .dl-about { max-width: 46rem; }
.dl .dl-about h2 { font-size: 1.1rem; margin: 1.5rem 0 .4rem; letter-spacing: normal; }
.dl .dl-about p { margin: 0 0 .7rem; }
.dl .dl-tier { margin-top: 2rem; }
.dl .dl-tier-about { margin: 0 0 .5rem; color: var(--muted); max-width: 46rem; }
.dl .dl-list { list-style: none; margin: .5rem 0 0; padding: 0; }
.dl .dl-set { border-top: 1px solid var(--line); padding: 1rem 0; }
.dl .dl-set h3, .dl .dl-snap-h { font-size: 1.15rem; margin: 0 0 .3rem; letter-spacing: normal; }
.dl .dl-set > p { margin: 0 0 .6rem; max-width: 46rem; }
.dl .dl-status { color: var(--muted); }
/* One label width for every entry, so the facts line up from set to set. */
.dl .dl-facts { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: .35rem 1rem; margin: 0; }
.dl .dl-facts dt { font-weight: 600; font-size: .9rem; }
.dl .dl-facts dd { margin: 0; overflow-wrap: anywhere; }
.dl .dl-files { list-style: none; margin: 0; padding: 0; }
.dl .dl-files li { margin: 0 0 .4rem; }
.dl .dl-size { color: var(--muted); }
/* A checksum is 64 characters with no break in it; let it wrap anywhere. */
.dl .dl-hash { font-size: var(--ui-sm); color: var(--muted); overflow-wrap: anywhere; }
.dl .dl-hash code { overflow-wrap: anywhere; word-break: break-all; }
@media (max-width: 40rem) {
  .dl .dl-facts { grid-template-columns: 1fr; gap: 0; }
  .dl .dl-facts dd { margin-bottom: .5rem; }
}
@media print {
  .dl .dl-set { break-inside: avoid; }
}

/* A dataset's own page: /data/<id>/. The facts are the index's, so they need
   no rules of their own; what is new is the way back, and the README and
   column schema rendered into the page instead of served as raw markdown. */
.dl-page .dl-back { margin: 0 0 1rem; font-size: var(--ui-sm); }
.dl-page h1 + .lede { max-width: 46rem; }
.dl .dl-go { margin: 0 0 .6rem; font-weight: 600; }
.dl-page .dl-jump { margin: 1.5rem 0 0; font-size: var(--ui-sm); color: var(--muted); }
.dl-page .dl-back:last-child { margin: 2rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); }
.dl .dl-doc { border-top: 1px solid var(--line); margin-top: 2rem; padding-top: 1rem; max-width: 52rem; }
.dl .dl-doc h2 { font-size: 1.15rem; margin: 0 0 .2rem; letter-spacing: normal; }
.dl .dl-doc h3 { font-size: 1.05rem; margin: 1.4rem 0 .4rem; letter-spacing: normal; }
.dl .dl-doc h4 { font-size: .95rem; margin: 1.2rem 0 .3rem; letter-spacing: normal; }
.dl .dl-doc-raw { margin: 0 0 1rem; font-size: var(--ui-sm); color: var(--muted); }
.dl .dl-doc p { margin: 0 0 .7rem; }
.dl .dl-doc ul { margin: 0 0 .8rem; padding-left: 1.2rem; }
.dl .dl-doc li { margin: 0 0 .35rem; }
.dl .dl-doc code { overflow-wrap: anywhere; word-break: break-all; font-size: .9em; }
/* A README prints bare URLs and 64-character checksums. Neither has a break
   in it, so on a phone they push the page sideways unless told to wrap. */
.dl .dl-doc { overflow-wrap: anywhere; }
.dl .dl-doc a { overflow-wrap: anywhere; }
/* A schema table is as wide as its descriptions; let it scroll rather than
   push the page sideways. */
.dl .dl-doc-table { overflow-x: auto; margin: 0 0 1rem; }
.dl .dl-doc-table table { border-collapse: collapse; width: 100%; font-size: var(--ui-sm); }
.dl .dl-doc-table th, .dl .dl-doc-table td { border-bottom: 1px solid var(--line); padding: .4rem .6rem .4rem 0; text-align: left; vertical-align: top; }
.dl .dl-doc-table th { font-weight: 600; }
@media print {
  .dl .dl-doc { break-inside: auto; }
  .dl-page .dl-jump, .dl-page .dl-back { display: none; }
  .dl .dl-doc-table { overflow-x: visible; }
}


.ferry-story{max-width:48rem;margin:0 auto;padding-block:clamp(24px,5vw,64px)}
.ferry-story .article-header{margin-bottom:2.5rem}
.ferry-story h1{overflow-wrap:normal}
.ferry-story section{margin-block:2.5rem}
.ferry-story p{max-width:var(--measure);margin-bottom:1.2em}
.ferry-date{color:var(--muted);font-family:var(--sans)}
.ferry-citations{display:block;margin-top:.45rem;font-family:var(--sans);font-size:var(--ui-sm);line-height:1.5;color:var(--muted)}
.ferry-notes details{border-top:1px solid var(--line);padding-block:1rem}
.ferry-notes summary{cursor:pointer;font-family:var(--sans);font-weight:600}
.ferry-notes details p{margin-top:1rem;font-size:var(--ui-lg)}
.ferry-back{border-top:1px solid var(--line);padding-top:1.5rem}

/* Scoped to the marriages page. Every rule is under .mr, so nothing here can
   reach another route. Painted with the site palette only: a color declared
   here would be a second brand, and tests/test_submissions.mjs reads the shared
   stylesheet looking for exactly that. */
.mr .mr-about { max-width: 46rem; }
/* The site's display tracking is set for large headings; at these sizes it
   runs the letters together, so the small headings here set it back. */
.mr .mr-about h2 { font-size: 1.1rem; margin: 1.5rem 0 .4rem; letter-spacing: normal; }
.mr .mr-about p { margin: 0 0 .7rem; }
.mr .mr-filters { border: 1px solid var(--line); border-radius: 4px; padding: .6rem .9rem; margin: 0 0 1rem; }
.mr .mr-filters > summary { cursor: pointer; font-weight: 600; }
.mr .mr-form { display: grid; gap: .75rem 1rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); align-items: end; margin: .75rem 0 .25rem; }
.mr .mr-form label, .mr .mr-form legend { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .25rem; }
.mr .mr-form input[type="search"], .mr .mr-form input[type="number"], .mr .mr-form select { width: 100%; padding: .45rem .5rem; font: inherit; border: 1px solid var(--line); border-radius: 4px; background: var(--white); color: inherit; }
.mr .mr-wide { grid-column: 1 / -1; }
.mr .mr-years { display: flex; gap: .4rem; align-items: center; }
.mr .mr-years input { min-width: 0; }
.mr .mr-marks { border: 0; padding: 0; margin: 0; min-width: 0; }
.mr .mr-marks label { display: inline-flex; gap: .35rem; align-items: center; font-weight: 400; margin: 0 1rem .25rem 0; }
.mr .mr-form button, .mr .mr-linkish { font: inherit; color: inherit; cursor: pointer; }
.mr .mr-form button { padding: .4rem .8rem; border: 1px solid var(--line); border-radius: 4px; background: var(--white); }
.mr .mr-form button:hover { border-color: currentColor; }
.mr .mr-linkish { background: none; border: 0; padding: 0; text-decoration: underline; }
.mr .mr-count { font-weight: 600; }
.mr .mr-empty { padding: 1rem 0; }
.mr .mr-list { list-style: none; margin: 0; padding: 0; }
/* Cards carry no class of their own; the list is their scope. Multiplied by
   every entry, a repeated class name is bytes a phone has to fetch. */
.mr .mr-list > li { border-top: 1px solid var(--line); padding: .75rem 0; }
/* A card off screen is not laid out until it nears the viewport. Showing all
   of them again after a filter otherwise costs the browser a full layout of
   every entry. Find-in-page, anchors and printing still reach every card. */
.mr .mr-list > li { content-visibility: auto; contain-intrinsic-size: auto 7rem; }
.mr .mr-list > li:target { background: var(--gold-light); box-shadow: 0 0 0 .5rem var(--gold-light); }
.mr .mr-list h3 { font-size: 1.02rem; margin: 0 0 .2rem; letter-spacing: normal; }
.mr .mr-list h3 a { color: inherit; text-decoration: none; }
.mr .mr-list h3 a:hover, .mr .mr-list h3 a:focus { text-decoration: underline; }
/* A value can run to seventy characters with no space in it. Let the line
   break inside the run; this moves where a line may break, never a character. */
.mr .mr-list h3, .mr .mr-list p { overflow-wrap: anywhere; }
.mr .mr-list p { margin: .15rem 0 0; }
.mr .mr-list p > b { font-weight: 600; }
.mr .mr-list i { font-style: normal; color: var(--muted); }
.mr .mr-list .s, .mr .mr-list .n { font-size: .86rem; color: var(--muted); }
.mr .mr-legend { display: grid; grid-template-columns: max-content 1fr; gap: .2rem 1rem; }
.mr .mr-legend dt { font-weight: 600; }
.mr .mr-legend dd { margin: 0; }
/* Without JavaScript every entry is present and readable; the controls only
   JavaScript can honor are not shown at all, rather than shown dead. */
.mr .mr-needs-js { display: none; }
.mr.mr-on .mr-needs-js { display: block; }
@media (max-width: 40rem) {
  .mr .mr-form { grid-template-columns: 1fr; }
  .mr .mr-legend { grid-template-columns: 1fr; }
  .mr .mr-legend dd { margin-bottom: .4rem; }
}
@media print {
  .mr .mr-filters, .mr .mr-count, .mr .mr-empty { display: none !important; }
  .mr .mr-list > li { break-inside: avoid; }
  .mr .mr-list > li:target { background: none; box-shadow: none; }
}

/* Scoped to the deaths page. Every rule is under .dr, so nothing here can
   reach another route. Painted with the site palette only, as the marriages
   page is: a color declared here would be a second brand. */
.dr .dr-about { max-width: 46rem; }
/* The site's display tracking is set for large headings; at these sizes it
   runs the letters together, so the small headings here set it back. */
.dr .dr-about h2 { font-size: 1.1rem; margin: 1.5rem 0 .4rem; letter-spacing: normal; }
.dr .dr-about p, .dr .dr-section > p { margin: 0 0 .7rem; max-width: 46rem; }
.dr .dr-toc { margin: 0 0 1rem; }
.dr .dr-section > h2 { margin-top: 2rem; }
.dr .dr-section > h3 { font-size: 1.1rem; margin: 1.5rem 0 .4rem; letter-spacing: normal; }
.dr .dr-filters { border: 1px solid var(--line); border-radius: 4px; padding: .6rem .9rem; margin: 0 0 1rem; }
.dr .dr-filters > summary { cursor: pointer; font-weight: 600; }
.dr .dr-form { display: grid; gap: .75rem 1rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); align-items: end; margin: .75rem 0 .25rem; }
.dr .dr-form label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .25rem; }
.dr .dr-form input[type="search"], .dr .dr-form input[type="number"], .dr .dr-form select { width: 100%; padding: .45rem .5rem; font: inherit; border: 1px solid var(--line); border-radius: 4px; background: var(--white); color: inherit; }
.dr .dr-wide { grid-column: 1 / -1; }
.dr .dr-years { display: flex; gap: .4rem; align-items: center; }
.dr .dr-years input { min-width: 0; }
.dr .dr-form button, .dr .dr-linkish { font: inherit; color: inherit; cursor: pointer; }
.dr .dr-form button { padding: .4rem .8rem; border: 1px solid var(--line); border-radius: 4px; background: var(--white); }
.dr .dr-form button:hover { border-color: currentColor; }
.dr .dr-linkish { background: none; border: 0; padding: 0; text-decoration: underline; }
.dr .dr-count { font-weight: 600; }
.dr .dr-empty { padding: 1rem 0; }
.dr .dr-list, .dr .dr-groups { list-style: none; margin: 0; padding: 0; }
.dr .dr-group > h4 { font-size: 1rem; margin: 1.25rem 0 .2rem; letter-spacing: normal; }
.dr .dr-group > h4 i, .dr .dr-pages i { font-style: normal; color: var(--muted); }
/* Cards carry no class of their own; the list is their scope. Multiplied by
   every entry, a repeated class name is bytes a phone has to fetch. */
.dr .dr-list > li { border-top: 1px solid var(--line); padding: .75rem 0; }
/* A card off screen is not laid out until it nears the viewport. Find-in-page,
   anchors and printing still reach every card. */
.dr .dr-list > li { content-visibility: auto; contain-intrinsic-size: auto 7rem; }
.dr .dr-list > li:target { background: var(--gold-light); box-shadow: 0 0 0 .5rem var(--gold-light); }
.dr .dr-list h3, .dr .dr-list h5 { font-size: 1.02rem; margin: 0 0 .2rem; letter-spacing: normal; }
.dr .dr-list h3 a, .dr .dr-list h5 a { color: inherit; text-decoration: none; }
.dr .dr-list h3 a:hover, .dr .dr-list h3 a:focus, .dr .dr-list h5 a:hover, .dr .dr-list h5 a:focus { text-decoration: underline; }
/* A value can run long with no space in it. Let the line break inside the run;
   this moves where a line may break, never a character. */
.dr .dr-list h3, .dr .dr-list h5, .dr .dr-list p { overflow-wrap: anywhere; }
.dr .dr-list p { margin: .15rem 0 0; }
.dr .dr-list i { font-style: normal; color: var(--muted); }
.dr .dr-list .s, .dr .dr-list .n { font-size: .86rem; color: var(--muted); }
.dr .dr-pages { border-collapse: collapse; width: 100%; max-width: 46rem; font-size: .92rem; }
.dr .dr-pages th, .dr .dr-pages td { text-align: left; vertical-align: top; padding: .3rem .6rem .3rem 0; border-top: 1px solid var(--line); }
.dr .dr-pages tbody th { font-weight: 600; white-space: nowrap; }
/* Without JavaScript every entry is present and readable; the controls only
   JavaScript can honor are not shown at all, rather than shown dead. */
.dr .dr-needs-js { display: none; }
.dr.dr-on .dr-needs-js { display: block; }
@media (max-width: 40rem) {
  .dr .dr-form { grid-template-columns: 1fr; }
}
@media print {
  .dr .dr-filters, .dr .dr-count, .dr .dr-empty { display: none !important; }
  .dr .dr-list > li { break-inside: avoid; }
  .dr .dr-list > li:target { background: none; box-shadow: none; }
}

/* Scoped to the cemeteries page. Every rule is under .cm, so nothing here can
   reach another route. Painted with the site palette only, as the marriages
   page is: a color declared here would be a second brand. */
.cm .cm-about { max-width: 46rem; }
/* The site's display tracking is set for large headings; at these sizes it
   runs the letters together, so the small headings here set it back. */
.cm .cm-about h2 { font-size: 1.1rem; margin: 1.5rem 0 .4rem; letter-spacing: normal; }
.cm .cm-about p, .cm .cm-section > p { margin: 0 0 .7rem; max-width: 46rem; }
.cm .cm-toc { margin: 0 0 1rem; }
.cm .cm-section > h2 { margin-top: 2rem; }
.cm .cm-section > h3 { font-size: 1.1rem; margin: 1.5rem 0 .4rem; letter-spacing: normal; }
.cm .cm-filters { border: 1px solid var(--line); border-radius: 4px; padding: .6rem .9rem; margin: 0 0 1rem; }
.cm .cm-filters > summary { cursor: pointer; font-weight: 600; }
.cm .cm-form { display: grid; gap: .75rem 1rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); align-items: end; margin: .75rem 0 .25rem; }
.cm .cm-form label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .25rem; }
.cm .cm-form input[type="search"], .cm .cm-form input[type="number"], .cm .cm-form select { width: 100%; padding: .45rem .5rem; font: inherit; border: 1px solid var(--line); border-radius: 4px; background: var(--white); color: inherit; }
.cm .cm-wide { grid-column: 1 / -1; }
.cm .cm-years { display: flex; gap: .4rem; align-items: center; }
.cm .cm-years input { min-width: 0; }
.cm .cm-form button, .cm .cm-linkish { font: inherit; color: inherit; cursor: pointer; }
.cm .cm-form button { padding: .4rem .8rem; border: 1px solid var(--line); border-radius: 4px; background: var(--white); }
.cm .cm-form button:hover { border-color: currentColor; }
.cm .cm-linkish { background: none; border: 0; padding: 0; text-decoration: underline; }
.cm .cm-count { font-weight: 600; }
.cm .cm-empty { padding: 1rem 0; }
.cm .cm-list, .cm .cm-groups { list-style: none; margin: 0; padding: 0; }
.cm .cm-group > h4 { font-size: 1rem; margin: 1.25rem 0 .2rem; letter-spacing: normal; }
.cm .cm-group > h4 i, .cm .cm-pages i { font-style: normal; color: var(--muted); }
/* Cards carry no class of their own; the list is their scope. Multiplied by
   every entry, a repeated class name is bytes a phone has to fetch. */
.cm .cm-list > li { border-top: 1px solid var(--line); padding: .75rem 0; }
/* A card off screen is not laid out until it nears the viewport. Find-in-page,
   anchors and printing still reach every card. */
.cm .cm-list > li { content-visibility: auto; contain-intrinsic-size: auto 7rem; }
.cm .cm-list > li:target { background: var(--gold-light); box-shadow: 0 0 0 .5rem var(--gold-light); }
.cm .cm-list h4 { font-size: 1.02rem; margin: 0 0 .2rem; letter-spacing: normal; }
.cm .cm-list h4 a { color: inherit; text-decoration: none; }
.cm .cm-list h4 a:hover, .cm .cm-list h4 a:focus { text-decoration: underline; }
/* A value can run long with no space in it. Let the line break inside the run;
   this moves where a line may break, never a character. */
.cm .cm-list h4, .cm .cm-list p { overflow-wrap: anywhere; }
.cm .cm-list p { margin: .15rem 0 0; }
.cm .cm-list i { font-style: normal; color: var(--muted); }
.cm .cm-list .s, .cm .cm-list .n { font-size: .86rem; color: var(--muted); }
.cm .cm-pages { border-collapse: collapse; width: 100%; max-width: 46rem; font-size: .92rem; }
.cm .cm-pages th, .cm .cm-pages td { text-align: left; vertical-align: top; padding: .3rem .6rem .3rem 0; border-top: 1px solid var(--line); }
.cm .cm-pages tbody th { font-weight: 600; white-space: nowrap; }
/* Without JavaScript every entry is present and readable; the controls only
   JavaScript can honor are not shown at all, rather than shown dead. */
.cm .cm-needs-js { display: none; }
.cm.cm-on .cm-needs-js { display: block; }
@media (max-width: 40rem) {
  .cm .cm-form { grid-template-columns: 1fr; }
}
@media print {
  .cm .cm-filters, .cm .cm-count, .cm .cm-empty { display: none !important; }
  .cm .cm-list > li { break-inside: avoid; }
  .cm .cm-list > li:target { background: none; box-shadow: none; }
}

/* Scoped to /books-and-sources/. Every rule is under .bk, so nothing here can
   reach another route, and it paints with the site palette only. */
.bk .bk-about { max-width: 46rem; }
/* The site's display tracking is set for large headings; at these sizes it
   runs the letters together, so the small headings here set it back. */
.bk .bk-about h2 { font-size: 1.1rem; margin: 1.5rem 0 .4rem; letter-spacing: normal; }
.bk .bk-about p { margin: 0 0 .7rem; }
.bk .bk-list { list-style: none; margin: 1rem 0 0; padding: 0; }
.bk .bk-list > li { border-top: 1px solid var(--line); padding: 1rem 0; }
.bk .bk-list h3 { font-size: 1.15rem; margin: 0 0 .15rem; letter-spacing: normal; overflow-wrap: anywhere; }
.bk .bk-by { margin: 0 0 .6rem; color: var(--muted); }
/* One label width for every card, so the facts line up from book to book. */
.bk .bk-facts { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: .3rem 1rem; margin: 0; }
.bk .bk-facts dt { font-weight: 600; font-size: .9rem; }
.bk .bk-facts dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 40rem) {
  .bk .bk-facts { grid-template-columns: 1fr; gap: 0; }
  .bk .bk-facts dd { margin-bottom: .45rem; }
}
@media print {
  .bk .bk-list > li { break-inside: avoid; }
}
/* The full-text search section: separate index, separate results, from the
   site's own curated search -- see librarySearchSection() in ingested.mjs. */
.bk .bk-search { max-width: 46rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.bk .bk-search h2 { font-size: 1.1rem; margin: 0 0 .4rem; letter-spacing: normal; }
.bk .bk-search-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.bk .bk-search-row input[type=search] { flex: 1 1 14rem; min-width: 0; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: 4px; font-size: 1rem; background: var(--white); color: var(--text); }
.bk .bk-search-row select { flex: 0 1 14rem; min-width: 0; max-width: 100%; padding: .7rem .5rem; border: 1px solid var(--line); border-radius: 4px; font: inherit; font-size: .95rem; background: var(--white); color: var(--text); }
.bk .bk-search-row .btn { flex: 0 0 auto; }
.bk .bk-search-fallback { margin-top: .6rem; }
#bk-search-results .search-result { display: block; text-decoration: none; border-top: 1px solid var(--line); padding: .9rem .2rem; }
#bk-search-results .search-result small { display: block; font-size: var(--ui-2xs); color: var(--gold); letter-spacing: .07em; text-transform: uppercase; margin-bottom: .2rem; }
#bk-search-results .search-result p { margin: .3rem 0 0; color: var(--text); }
@media (max-width: 26rem) {
  .bk .bk-search-row { flex-direction: column; align-items: stretch; }
  .bk .bk-search-row input[type=search], .bk .bk-search-row select { flex: 0 0 auto; width: 100%; max-width: 100%; }
}

/* Scoped to the recipes page. Every rule is under .rc, so nothing here can
   reach another route, and it paints with the site palette only. */
.rc .rc-about { max-width: 46rem; }
/* The site's display tracking is set for large headings; at these sizes it
   runs the letters together, so the small headings here set it back. */
.rc .rc-about h2 { font-size: 1.1rem; margin: 1.5rem 0 .4rem; letter-spacing: normal; }
.rc .rc-about p { margin: 0 0 .7rem; }
.rc .rc-filters { border: 1px solid var(--line); border-radius: 4px; padding: .6rem .9rem; margin: 0 0 1rem; }
.rc .rc-filters > summary { cursor: pointer; font-weight: 600; }
.rc .rc-form { display: grid; gap: .75rem 1rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); align-items: end; margin: .75rem 0 .25rem; }
.rc .rc-form label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .25rem; }
.rc .rc-form input[type="search"], .rc .rc-form select { width: 100%; padding: .45rem .5rem; font: inherit; border: 1px solid var(--line); border-radius: 4px; background: var(--white); color: inherit; }
.rc .rc-wide { grid-column: 1 / -1; }
.rc .rc-form button, .rc .rc-linkish { font: inherit; color: inherit; cursor: pointer; }
.rc .rc-form button { padding: .4rem .8rem; border: 1px solid var(--line); border-radius: 4px; background: var(--white); }
.rc .rc-form button:hover { border-color: currentColor; }
.rc .rc-linkish { background: none; border: 0; padding: 0; text-decoration: underline; }
.rc .rc-count { font-weight: 600; }
.rc .rc-empty { padding: 1rem 0; }
.rc .rc-list { list-style: none; margin: 0; padding: 0; }
.rc .rc-list > li { border-top: 1px solid var(--line); padding: .9rem 0; }
.rc .rc-list > li:target { background: var(--gold-light); box-shadow: 0 0 0 .5rem var(--gold-light); }
.rc .rc-list h3 { font-size: 1.05rem; margin: 0 0 .25rem; letter-spacing: normal; }
.rc .rc-list h3 a { color: inherit; text-decoration: none; }
.rc .rc-list h3 a:hover, .rc .rc-list h3 a:focus { text-decoration: underline; }
/* A scanned value can run long with no space in it. Let the line break inside
   the run; this moves where a line may break, never a character. */
.rc .rc-list h3, .rc .rc-list p, .rc .rc-list li { overflow-wrap: anywhere; }
.rc .rc-list p { margin: .2rem 0 0; }
.rc .rc-list i { font-style: normal; color: var(--muted); }
.rc .rc-tag { display: inline-block; font-size: .74rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; border: 1px solid var(--line); border-radius: 3px; padding: .05rem .35rem; margin-left: .3rem; }
.rc .rc-ing { margin: .5rem 0 .3rem; padding-left: 1.2rem; columns: 2 16rem; column-gap: 2rem; }
.rc .rc-ing li { break-inside: avoid; margin: 0 0 .1rem; }
.rc .rc-ing li.h { list-style: none; margin-left: -1.2rem; font-weight: 600; }
.rc .rc-dir { max-width: 46rem; }
.rc .rc-period { font-size: .9rem; border-left: 3px solid var(--line); padding-left: .6rem; margin: .35rem 0; max-width: 46rem; }
.rc .rc-prov { font-size: .9rem; border-left: 3px solid var(--line); padding-left: .6rem; margin: .35rem 0; max-width: 46rem; }
.rc .rc-src { font-size: .9rem; margin: .2rem 0; }
.rc .rc-src i { font-style: normal; font-weight: 600; }
.rc .rc-more { margin: .3rem 0 0; font-size: .86rem; }
.rc .rc-more > summary { cursor: pointer; color: var(--muted); }
.rc .rc-more > p { margin: .3rem 0 0; max-width: 46rem; }
/* The ingredient lines as printed keep their printed line breaks. */
.rc .rc-raw { white-space: pre-line; }
.rc .rc-list .n, .rc .rc-list .s { font-size: .86rem; color: var(--muted); }
/* Without JavaScript every recipe is present and readable; the controls only
   JavaScript can honor are not shown at all, rather than shown dead. */
.rc .rc-needs-js { display: none; }
.rc.rc-on .rc-needs-js { display: block; }
/* The portion calculator shows only once its script is running. */
.rc .rc-scale { display: none; }
.rc.rc-scale-ready .rc-scale { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; margin: .2rem 0 .5rem; font-size: .9rem; }
.rc .rc-scale-h { font-weight: 600; }
.rc .rc-scale label { color: var(--muted); }
.rc .rc-scale input { width: 4.5rem; padding: .25rem .4rem; font: inherit; border: 1px solid var(--line); border-radius: 4px; background: var(--white); color: inherit; }
.rc .rc-scale-or { color: var(--muted); }
.rc .rc-scale button { font: inherit; color: inherit; cursor: pointer; padding: .2rem .6rem; border: 1px solid var(--line); border-radius: 4px; background: var(--white); }
.rc .rc-scale-status { flex-basis: 100%; color: var(--muted); }
.rc .rc-scale-status:empty { display: none; }
.rc .rc-ing li.rc-scaled { font-weight: 600; }
.rc .rc-approx { font-weight: normal; font-size: .86em; color: var(--muted); }
/* Estimated nutrition: a small plain table, figures right-aligned. */
.rc .rc-macros { margin: .4rem 0 .6rem; font-size: .9rem; }
.rc .rc-macros table { border-collapse: collapse; }
.rc .rc-macros caption { text-align: left; font-weight: 600; padding-bottom: .15rem; }
.rc .rc-macros th, .rc .rc-macros td { padding: .1rem .9rem .1rem 0; border-bottom: 1px solid var(--line); text-align: left; font-weight: normal; }
.rc .rc-macros thead th { color: var(--muted); }
.rc .rc-macros td { text-align: right; font-variant-numeric: tabular-nums; }
.rc .rc-macros-note { color: var(--muted); }
.rc .rc-macros-scaled td { font-weight: 600; }
.rc .rc-macros-basis { margin: .25rem 0 0; font-size: .86rem; color: var(--muted); }
@media (max-width: 40rem) {
  .rc .rc-form { grid-template-columns: 1fr; }
  .rc .rc-ing { columns: 1; }
}
@media print {
  .rc .rc-filters, .rc .rc-count, .rc .rc-empty, .rc .rc-scale button, .rc .rc-scale input, .rc .rc-scale label, .rc .rc-scale-h, .rc .rc-scale-or { display: none !important; }
  .rc .rc-list > li { break-inside: avoid; }
  .rc .rc-list > li:target { background: none; box-shadow: none; }
}