:root { --paper:#fffdf6; --ink:#173b38; --pool:#24665e; --rust:#ad6747; --line:#c5d0c6; --muted:#52665e; --pearl:#edf2ec; }
* { box-sizing:border-box; }
html { scroll-padding-top:24px; }
body { margin:0; color:var(--ink); background:#dce3df; font-family:Tahoma,Verdana,sans-serif; }
.swamps-page { width:min(1180px,calc(100% - 32px)); margin:24px auto; background:var(--paper); border:1px solid #435b57; box-shadow:0 18px 48px #183b382b; }
.swamps-page a { color:#225d58; text-underline-offset:.22em; }
.swamps-page a:hover { text-decoration-thickness:2px; }
.swamps-page :focus-visible { outline:3px solid var(--rust); outline-offset:5px; }
.hierarchy-nav { display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:14px 30px; background:var(--pearl); border-bottom:1px solid var(--line); font-size:13px; }
.hierarchy-nav a { display:inline-flex; min-height:44px; align-items:center; }
.opening { display:grid; grid-template-columns:1.05fr 1fr; gap:45px; align-items:end; padding:46px 52px 38px; }
h1 { margin:0; font:normal clamp(46px,6.1vw,76px)/.98 Georgia,serif; letter-spacing:-.055em; }
.deck { margin:0; max-width:39ch; font:18px/1.65 Tahoma,Verdana,sans-serif; }
figure { margin:0; }
.hero-image img,.cycle-image img { display:block; width:100%; height:auto; }
.hero-image figcaption,.cycle-image figcaption { padding:13px 22px; color:var(--muted); background:var(--pearl); border-bottom:1px solid var(--line); font:12px/1.6 Tahoma,Verdana,sans-serif; }
.reading { padding:0 clamp(22px,5.5vw,72px) 48px; }
.reading section { padding:46px 0; border-bottom:1px solid var(--line); }
.reading section:last-child { border-bottom:0; padding-bottom:8px; }
h2 { margin:0 0 24px; font:normal clamp(26px,3vw,34px)/1.2 Georgia,serif; letter-spacing:-.025em; }
h3 { margin:0 0 12px; font:700 17px/1.4 Tahoma,Verdana,sans-serif; }
p { margin:0 0 19px; }
p:last-child { margin-bottom:0; }
.prose { max-width:76ch; font:18px/1.8 Georgia,serif; }
.introduction { display:grid; grid-template-columns:.64fr 1.36fr; gap:40px; }
.introduction h2 { font-size:29px; }
.dimensions { display:grid; grid-template-columns:repeat(3,1fr); margin:0; border-block:1px solid var(--line); background:var(--pearl); }
.dimensions div { padding:20px 24px; border-right:1px solid var(--line); }
.dimensions div:last-child { border-right:0; }
.dimensions dt { color:var(--muted); font-size:12px; margin-bottom:7px; }
.dimensions dd { margin:0; font:normal clamp(24px,3.6vw,39px)/1.2 Georgia,serif; font-variant-numeric:tabular-nums; }
.geometry-note { margin:12px 0 28px; color:var(--muted); font:12px/1.7 Tahoma,Verdana,sans-serif; }
.components { margin:0; }
.components>div { display:grid; grid-template-columns:180px 1fr; gap:32px; padding:21px 0; border-bottom:1px solid var(--line); }
.components dt { font:700 15px/1.65 Tahoma,Verdana,sans-serif; }
.components dd { margin:0; max-width:73ch; font:16px/1.8 Tahoma,Verdana,sans-serif; }
.design-note { display:grid; grid-template-columns:1fr 1fr; gap:30px; margin-top:25px; color:var(--muted); font:14px/1.8 Tahoma,Verdana,sans-serif; }
.design-note p { margin:0; }
.cycle-image { margin-bottom:28px; border:1px solid var(--line); }
.cycle { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin:0 0 30px; padding:0; list-style:none; counter-reset:phase; }
.cycle li { counter-increment:phase; padding-top:17px; border-top:2px solid var(--pool); }
.cycle h3::before { content:counter(phase,decimal-leading-zero) ' / '; font-weight:normal; color:var(--muted); }
.cycle p { font:15px/1.8 Tahoma,Verdana,sans-serif; }
.outputs { display:grid; grid-template-columns:1fr 1fr; gap:0; margin:30px 0; background:var(--pearl); border-block:1px solid var(--line); }
.outputs>div { padding:24px; }
.outputs>div+div { border-left:1px solid var(--line); }
.outputs p { font:15px/1.8 Tahoma,Verdana,sans-serif; }
.table-scroll { overflow-x:auto; margin:26px 0; }
table { width:100%; border-collapse:collapse; font:15px/1.75 Tahoma,Verdana,sans-serif; }
th,td { text-align:left; vertical-align:top; padding:16px; border-bottom:1px solid var(--line); }
thead { background:var(--pearl); }
tbody th { width:26%; font-weight:normal; color:#245c53; }
@media(max-width:760px) {
 .swamps-page { width:100%; margin:0; border-inline:0; }
 .opening { grid-template-columns:1fr; gap:24px; padding:32px 24px; }
 .deck { max-width:56ch; font-size:17px; }
 .hierarchy-nav { padding:8px 20px; gap:8px; }
 .introduction { display:block; }
 .reading section { padding:34px 0; }
 .prose { font-size:17px; }
 .components>div { grid-template-columns:1fr; gap:7px; }
 .dimensions div { padding:15px 12px; }
 .design-note,.cycle,.outputs { grid-template-columns:1fr; gap:20px; }
 .outputs { gap:0; }
 .outputs>div+div { border-left:0; border-top:1px solid var(--line); }
 .cycle li { padding-top:12px; }
 th,td { padding:12px 8px; }
 tbody th { width:31%; }
}
@media print {
 .swamps-page { width:100%; margin:0; box-shadow:none; border:0; }
 .hierarchy-nav { display:none; }
 .reading { padding-inline:0; }
 .opening { padding-inline:0; }
 .hero-image img,.cycle-image img { max-height:400px; object-fit:contain; }
 h2,h3 { break-after:avoid; }
 tr,.components>div { break-inside:avoid; }
}
.reaction-paths { display:grid; grid-template-columns:1fr 1fr; border-block:1px solid var(--line); margin:26px 0; background:var(--pearl); }
.reaction-paths>div { padding:22px; }
.reaction-paths .reaction-origin { grid-column:1/-1; display:flex; gap:24px; border-bottom:1px solid var(--line); }
.reaction-origin span { font-size:14px; line-height:1.7; }
.reaction-paths>div:last-child { border-left:1px solid var(--line); }
.reaction-paths p { font:15px/1.8 Tahoma,Verdana,sans-serif; }
.fleet-instrument { margin:28px 0; padding:26px; color:#f2f7f3; background:#173f3b; border:1px solid #0e302e; box-shadow:inset 0 2px 5px #08262280; }
.instrument-intro { max-width:75ch; font:14px/1.75 Tahoma,Verdana,sans-serif; color:#d6e8de; }
#fleet-form { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:end; }
#fleet-form label { display:flex; flex-direction:column; gap:9px; font:13px/1.5 Tahoma,Verdana,sans-serif; }
#fleet-form input { display:block; width:100%; min-height:44px; border:1px solid #73908c; padding:10px; border-radius:0; background:#fffef8; color:#163d39; font:17px Tahoma,Verdana,sans-serif; box-shadow:inset 1px 2px 3px #183b3826; }
#fleet-form button { min-height:47px; padding:10px 14px; font:700 14px Tahoma,Verdana,sans-serif; color:#173f3b; background:#e9f0e8; border:1px solid #a7bdb2; border-top-color:#fff; box-shadow:0 2px 1px #08262280; cursor:pointer; }
#fleet-form button:active { transform:translateY(1px); box-shadow:none; }
.fleet-results { display:grid; grid-template-columns:1fr 1fr; gap:20px; padding-top:23px; margin:26px 0 20px; border-top:1px solid #63817a; }
.fleet-results dt { color:#d0e1d8; font:12px/1.6 Tahoma,Verdana,sans-serif; }
.fleet-results dd { margin:7px 0 0; color:#fffdf6; font:normal clamp(21px,3vw,30px)/1.3 Georgia,serif; font-variant-numeric:tabular-nums; }
#fleet-area-cost { font:13px/1.7 Tahoma,Verdana,sans-serif; color:#d0e1d8; }
#fleet-error { margin-top:20px; color:#ffe1ca; }
[hidden] { display:none!important; }
@media(max-width:760px) {
 #fleet-form { grid-template-columns:1fr 1fr; }
 .fleet-instrument { padding:20px; }
 .reaction-origin { flex-direction:column; gap:8px!important; }
}
@media(max-width:480px) {
 #fleet-form,.fleet-results,.reaction-paths { grid-template-columns:1fr; }
 .reaction-paths>div:last-child { border-left:0; border-top:1px solid var(--line); }
}
@media print {
 .fleet-instrument { background:white; color:#173b38; box-shadow:none; }
 .fleet-instrument :is(p,dt,dd,label) { color:#173b38!important; }
 #fleet-form button { display:none; }
}