/* /ecology (preview): extends the Reel's style.css. Ink on paper, after umbrellamakers's The Whirlpool. */
html:has(.p-ecology) { background: #ecebe6; }
.p-ecology { --ink: #141414; --soft: #2f2f2c; --dim: #5a5954; --line: #bdbbb2; --gold: #8a2b0e; --paper: #ecebe6; --panel: #f6f5f1;
  --mono: ui-monospace, 'DejaVu Sans Mono', Menlo, Consolas, monospace; background: var(--paper); color: var(--ink); }
.p-ecology a { text-decoration: underline; text-underline-offset: 2px; }
.p-ecology nav.top { background: rgba(236,235,230,.95); border-bottom: 1.5px solid var(--ink); backdrop-filter: none; }
.p-ecology nav a { text-decoration: none; }
.p-ecology nav .brand, .p-ecology nav .links a { color: var(--ink); }
.p-ecology nav .links a[aria-current] { color: var(--gold); }
header.eco { width: min(1180px, 100%); margin: 0 auto; padding: 2.4rem clamp(1rem, 4vw, 3rem) .6rem; }
header.eco .eyebrow { margin: 0 0 .7rem; font: 600 .76rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
header.eco h1 { margin: 0; font: 700 clamp(2.3rem, 6.4vw, 4.6rem)/1 var(--serif); letter-spacing: -.015em; }
header.eco .kicker { max-width: 58ch; margin: 1rem 0 0; font: 400 clamp(1.1rem, 2vw, 1.32rem)/1.45 var(--serif); }
header.eco .byline { margin: 1rem 0 0; padding: .55rem .8rem; display: inline-block; font-size: .95rem; border: 1.5px solid var(--ink); background: var(--panel); }

.mapfig { margin: 1.4rem 0 0; }
svg.map { display: block; width: 100%; height: auto; background: var(--paper); }
svg.map.tall { display: none; }
svg.map text { font-family: var(--mono); fill: #141414; }
svg.map text.big { font-family: var(--sans); font-weight: 800; paint-order: stroke; stroke: #ecebe6; stroke-width: 5px; stroke-linejoin: round; }
svg.map .plain + rect + text.big, svg.map text.b { }
svg.map text.b { font-weight: 700; }
svg.map .bx { fill: #f6f5f1; stroke: #141414; stroke-width: 1.4; }
svg.map a:hover .bx { fill: #fff; stroke-width: 2.2; }
svg.map .ink { fill: none; stroke: #141414; stroke-width: 1.8; }
svg.map .sea { stroke: #141414; stroke-width: 2; }
svg.map .plain { fill: #f6f5f1; stroke: #141414; stroke-width: 1.8; }
svg.map .dash { fill: none; stroke: #141414; stroke-width: 1.2; stroke-dasharray: 5 4; }
svg.map .shoal { fill: rgba(236,235,230,.86); }
svg.map .cur { stroke-width: 1.3; }
svg.map .eye { fill: #141414; stroke: none; }
svg.map .pin { fill: #f6f5f1; stroke: #141414; stroke-width: 1.8; }
svg.map .cw { fill: #f6f5f1; stroke: #141414; stroke-width: 1.5; stroke-linejoin: round; }
svg.map .cb { fill: #141414; stroke: #141414; stroke-width: 1.5; stroke-linejoin: round; }
.mapfig figcaption { max-width: 74ch; margin-top: .7rem; font-size: .9rem; color: var(--soft); }
.p-ecology .intro { margin: 1.6rem 0 0; color: var(--ink); max-width: 66ch; }

.p-ecology h2 { font-size: clamp(1.45rem, 3vw, 2rem); margin: 2.8rem 0 .9rem; }
.p-ecology h2::after { background: var(--ink); height: 2px; }
.p-ecology section { max-width: 74ch; scroll-margin-top: 4.5rem; }
.p-ecology section#original { max-width: 860px; }
.p-ecology .sect { margin: -.2rem 0 .7rem; color: var(--soft); }
ul.plain, ul.moves { margin: 0 0 1rem; padding-left: 1.1rem; }
ul.plain li, ul.moves li { margin: .34rem 0; }
.p-ecology .note { font-size: .86rem; color: var(--dim); }
blockquote.said { margin: .7rem 0; padding-left: .9rem; border-left: 3px solid var(--ink); font: 400 1.08rem/1.45 var(--serif); white-space: pre-line; }
blockquote.said a { color: var(--ink); text-decoration: none; }
blockquote.said a:hover { text-decoration: underline; }
blockquote.said cite { display: block; font: normal .78rem var(--mono); color: var(--dim); margin-top: .15rem; }
table.echo { border-collapse: collapse; margin: .6rem 0 1rem; font: .86rem var(--mono); }
table.echo th, table.echo td { border: 1.4px solid var(--ink); padding: .35rem .7rem; text-align: right; background: var(--panel); font-weight: 400; }
table.echo tbody th { text-align: left; }
.p-ecology .verdict { padding: .7rem .9rem; border: 2px solid var(--ink); background: var(--panel); font: 500 1.08rem/1.45 var(--serif); }
.p-ecology .reading { font: italic 400 1.02rem/1.5 var(--serif); color: var(--soft); }
.orig { margin: 0; }
.orig img { width: 100%; max-width: 860px; display: block; border: 1.5px solid var(--ink); }
.orig figcaption { margin-top: .5rem; font-size: .9rem; color: var(--soft); }
.p-ecology aside.join { background: var(--panel); border: 1.5px solid var(--ink); color: var(--ink); }
.p-ecology aside.join a.invite { background: var(--ink); color: var(--paper); text-decoration: none; }
.p-ecology footer { border-top: 1.5px solid var(--ink); }
@media (max-width: 720px) { svg.map.wide { display: none; } svg.map.tall { display: block; } }