/* Tide-Line Atlas · region, introduction and biodiversity pages.
   Loaded after chapter.css (the page templates): maps its variables onto tokens.css, then lays the
   sections out on one editorial grid. */

/* the templates' own variables now point at the design tokens */
:root{--ink:var(--ink-strong);--ink-2:var(--ink-body);--muted:var(--ink-muted);--paper:var(--bg-canvas);--paper-2:#EDF1EC;--line:var(--border-soft);
  --deep:var(--bg-dark);--deep-2:var(--bg-dark-raised);--gold:var(--accent-coral);--gold-2:var(--accent-coral-soft);
  --display:var(--font-display);--reading:var(--font-body);--arabic:var(--font-arabic)}
body{background:var(--bg-canvas);color:var(--ink-body);font-family:var(--font-body)}
.h-display,.h-2,.t-cover h1,.sl-title h2,.ft-hero h2,.name{font-family:var(--font-display);font-weight:500;letter-spacing:-.015em}
.eyebrow{color:var(--accent-coral)}
[data-dark] .eyebrow,.on-dark .eyebrow{color:var(--accent-coral-soft)}

/* top bar: site menu, then where you are, then the Sections control */
.bar{height:var(--bar-h);background:color-mix(in srgb,var(--bg-canvas) 92%,transparent);border-bottom:1px solid var(--border-soft)}
.bar.on-dark{background:#071f13b3;border-color:#F8F5EC1a}
.bar .bar-site{flex:none}
.bar .bar-title{padding-left:18px;border-left:1px solid color-mix(in srgb,currentColor 18%,transparent)}
.bar-title strong{font-family:var(--font-display);font-weight:500}
.bar-title span{font-size:14px;opacity:.8}
.bar.on-dark .sn-brand img{filter:brightness(0) invert(1)}
.bar-nav button{min-height:44px;min-width:44px;font:650 14px var(--font-body)}
.bar:focus-within{transform:none}
.bar-progress{height:3px}
.bar-progress i{background:linear-gradient(90deg,var(--accent-tide),var(--accent-coral))!important}
@media (max-width:700px){.bar .bar-title{display:none}.bar .bar-site{flex:1}}

/* Sections panel ("On this page") */
.pages-panel{background:var(--bg-canvas);box-shadow:-20px 0 60px #071f1333}
.pages-head h2{font-family:var(--font-display);font-weight:500}
#pages-list a{min-height:56px;border-radius:var(--radius)}
#pages-list a img,#pages-list a .ph{width:64px;height:48px;border-radius:8px;object-fit:cover}
#pages-list a[aria-current=true]{background:var(--bg-mist);box-shadow:inset 3px 0 0 var(--accent-tide)}
#pages-list a:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
#close-pages{min-width:44px;min-height:44px}

/* side rail: labels on focus as well as hover */
.rail a:focus-visible span{opacity:1;transform:translate(0,-50%)}
.rail a.active{background:var(--accent-tide);border-color:var(--accent-tide)}

/* cover figures: one solid shelf so a busy photo never fights the numbers */
.cover-stats{display:inline-flex!important;flex-wrap:wrap;gap:0!important;width:fit-content;max-width:100%;padding:22px 6px;border-radius:var(--radius-l);background:#00000066;backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);border:1px solid #F8F5EC22;box-shadow:0 24px 60px #0005}
.cover-stats div,.t-rcover .cover-stats div{position:relative;background:none!important;border-left:1px solid #F8F5EC1f;padding:4px clamp(20px,2.6vw,38px) 2px}
.cover-stats div:first-child{border-left:0}
.cover-stats div::before{content:'';display:block;width:24px;height:3px;margin-bottom:14px;border-radius:2px;background:var(--accent-coral-soft)}
.cover-stats strong{font:600 clamp(34px,3.6vw,56px)/1 var(--font-body)!important;letter-spacing:-.02em;color:var(--ink-inverse);font-variant-numeric:lining-nums tabular-nums!important}
.cover-stats span{display:block;margin-top:10px;font:650 12px/1.4 var(--font-body)!important;letter-spacing:1.4px;color:var(--ink-inverse-muted)!important;max-width:220px}
@media (max-width:700px){.cover-stats{padding:16px 2px}.cover-stats div{padding:4px 16px 2px;flex:1 1 40%}.cover-stats div:nth-child(3){border-left:0}}

/* up next: a quiet landmark between the parts of a long page */
.up-next{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;padding:36px max(var(--pad),calc((100vw - 1240px) / 2));background:var(--bg-canvas)}
.up-next p{display:grid;justify-items:center;gap:4px;text-align:center}
.un-k{font:700 12px var(--font-body);letter-spacing:1.8px;text-transform:uppercase;color:var(--accent-coral)}
.up-next b{font:500 clamp(22px,2vw,30px)/1.15 var(--font-display);color:var(--ink-strong);max-width:28ch}
.un-dots{grid-column:1/-1;justify-self:center;display:flex;gap:8px;list-style:none;margin:0;padding:0}
.un-dots li{width:8px;height:8px;border-radius:50%;border:1.5px solid var(--accent-tide)}
.un-dots li.done{background:var(--accent-tide)}
.un-dots li.now{width:22px;border-radius:4px;background:var(--accent-coral);border-color:var(--accent-coral)}

/* charts, tables and data folds sit on the same cards as the home page */
.r-table{border-radius:var(--radius);overflow:hidden}
.r-table thead th,.idx-table thead th{background:var(--bg-dark);color:var(--ink-inverse)}
.iucn-chart,.idx-chart{max-width:760px;margin:34px auto 6px}
.idx-chart .r-chart{margin-bottom:26px}
.pg > .r-charts{grid-column:1/-1;width:100%}
.t-rband > .r-charts{margin-top:110px;padding-bottom:20px}
.t-rband:not([data-var="1"]) > .r-charts{margin-top:30px;padding-bottom:80px}
.rt-body{display:grid;gap:18px}
.btn{font-family:var(--font-body)}
.t-end{background:var(--bg-dark)}

/* Region pages, editorial layout layer (loaded last).
   Map, chart, table, text and figure sections share one grid: the heading stays pinned in a
   narrow left column while the reader moves through the text, data and figures on the right.
   Wide things (maps, chart groups, photo rows, key figures) run the full width under it. */

:root{--wrap:1240px;--lay-gutter:clamp(36px,5vw,96px);--mist:var(--bg-mist)}

/* one content width for every section */
#chapter .pg:not([data-dark]){padding-left:max(var(--pad),calc((100vw - var(--wrap)) / 2));padding-right:max(var(--pad),calc((100vw - var(--wrap)) / 2))}
#chapter .rm-copy,#chapter .rt-copy,#chapter .rx-copy,#chapter .rcl-copy{max-width:none}

@media (min-width:1000px){
  #chapter :is(.t-rmap,.t-rchart,.t-rtable,.t-rtext,.t-rstats,.t-rband:not([data-var="1"]),.t-rduo,.t-rclosing:not([data-dark])){display:grid;grid-template-columns:minmax(0,4.2fr) minmax(0,7.8fr);column-gap:var(--lay-gutter);row-gap:0;align-content:start;overflow:clip}
  #chapter :is(.t-rmap,.t-rchart,.t-rtable,.t-rtext,.t-rstats,.t-rband:not([data-var="1"]),.t-rduo,.t-rclosing:not([data-dark])) > :is(.rm-copy,.rt-copy,.rx-copy,.rb-copy,.rd-copy,.rcl-copy){display:contents}
  /* everything goes to the reading column unless it is wide */
  #chapter :is(.t-rmap,.t-rchart,.t-rtable,.t-rtext,.t-rstats,.t-rband:not([data-var="1"]),.t-rduo,.t-rclosing:not([data-dark])) > *,
  #chapter :is(.t-rmap,.t-rchart,.t-rtable,.t-rtext,.t-rstats,.t-rband:not([data-var="1"]),.t-rduo,.t-rclosing:not([data-dark])) > :is(.rm-copy,.rt-copy,.rx-copy,.rb-copy,.rd-copy,.rcl-copy) > *{grid-column:2;min-width:0}
  #chapter :is(.t-rmap,.t-rchart,.t-rtable,.t-rtext,.t-rstats,.t-rband:not([data-var="1"]),.t-rduo,.t-rclosing:not([data-dark])) > :is(.rm-copy,.rt-copy,.rx-copy,.rb-copy,.rd-copy,.rcl-copy) > .eyebrow{grid-column:1/-1;grid-row:1}
  #chapter :is(.t-rmap,.t-rchart,.t-rtable,.t-rtext,.t-rstats,.t-rband:not([data-var="1"]),.t-rduo,.t-rclosing:not([data-dark])) > :is(.rm-copy,.rt-copy,.rx-copy,.rb-copy,.rd-copy,.rcl-copy) > .h-2{grid-column:1;grid-row:2/span 30;align-self:start;max-width:none;font-size:clamp(34px,3.1vw,52px);line-height:1.04;margin:0}
  #chapter :is(.t-rmap,.t-rchart,.t-rtable,.t-rtext,.t-rstats,.t-rband:not([data-var="1"]),.t-rduo,.t-rclosing:not([data-dark])) > :is(.rm-copy,.rt-copy,.rx-copy,.rb-copy,.rd-copy,.rcl-copy) > .part-head{grid-column:1/-1}
  #chapter :is(.t-rmap,.t-rchart,.t-rtable,.t-rtext,.t-rstats,.t-rband:not([data-var="1"]),.t-rduo,.t-rclosing:not([data-dark])) > :is(.rm-copy,.rt-copy,.rx-copy,.rb-copy,.rd-copy,.rcl-copy) > .lead{margin-top:0}
  #chapter :is(.t-rmap,.t-rchart,.t-rtable,.t-rtext,.t-rstats,.t-rband:not([data-var="1"]),.t-rduo,.t-rclosing:not([data-dark])) > :is(.rm-copy,.rt-copy,.rx-copy,.rb-copy,.rd-copy,.rcl-copy) > .prose{max-width:68ch}
  #chapter :is(.t-rmap,.t-rchart,.t-rtable,.t-rtext,.t-rstats,.t-rband:not([data-var="1"]),.t-rduo,.t-rclosing:not([data-dark])) > :is(.rm-copy,.rt-copy,.rx-copy,.rb-copy,.rd-copy,.rcl-copy) > .prose.cols{columns:1}
  /* wide pieces */
  #chapter :is(.t-rmap,.t-rchart,.t-rtable,.t-rtext,.t-rstats,.t-rband:not([data-var="1"]),.t-rduo,.t-rclosing:not([data-dark])) > :is(.am,.rm-grid,.r-charts,.r-extra,.st-grid,.items-title,.items-note,.r-map,.rb-photo,.rd-photos){grid-column:1/-1}
  #chapter :is(.t-rmap,.t-rchart,.t-rtable,.t-rtext,.t-rstats,.t-rband:not([data-var="1"]),.t-rduo,.t-rclosing:not([data-dark])) > .rt-body{grid-column:2;max-width:none;margin-top:34px}
  #chapter .rt-body > .am{margin-top:8px}
  #chapter .t-rmap > .am,#chapter .t-rmap > .rm-grid{margin-top:46px}
  #chapter .t-rtext{align-items:start}
  /* stats sections carry their heading directly, not inside a copy block */
  #chapter .t-rstats > .eyebrow{grid-column:1/-1;grid-row:1}
  #chapter .t-rstats > .h-2{grid-column:1;grid-row:2/span 30;align-self:start;max-width:none;font-size:clamp(34px,3.1vw,52px);line-height:1.04;margin:0}
  #chapter .t-rstats > .prose{max-width:68ch;columns:1}
  /* a section without a heading in the left column would leave it empty: its text reads from the left edge instead */
  #chapter :is(.t-rmap,.t-rchart,.t-rtable,.t-rtext,.t-rstats,.t-rband:not([data-var="1"]),.t-rduo,.t-rclosing:not([data-dark])):not(:has(> .h-2, > :is(.rm-copy,.rt-copy,.rx-copy,.rb-copy,.rd-copy,.rcl-copy) > .h-2)) > *,
  #chapter :is(.t-rmap,.t-rchart,.t-rtable,.t-rtext,.t-rstats,.t-rband:not([data-var="1"]),.t-rduo,.t-rclosing:not([data-dark])):not(:has(> .h-2, > :is(.rm-copy,.rt-copy,.rx-copy,.rb-copy,.rd-copy,.rcl-copy) > .h-2)) > :is(.rm-copy,.rt-copy,.rx-copy,.rb-copy,.rd-copy,.rcl-copy) > *{grid-column:1/-1}
  /* a single chart fills the content width instead of hugging the left */
  #chapter .r-charts > .r-chart:only-child{max-width:none}
}

/* data sections carry a soft sea tint so the page alternates story and evidence */
#chapter :is(.t-rchart,.t-rtable,.t-rstats){background:linear-gradient(180deg,var(--mist),color-mix(in srgb,var(--mist) 55%,var(--paper)))}
#chapter :is(.t-rchart,.t-rtable,.t-rstats) .r-chart,#chapter :is(.t-rchart,.t-rtable,.t-rstats) .r-data{background:#fffdf9}
#chapter .pg{padding-top:clamp(84px,9vw,128px);padding-bottom:clamp(72px,8vw,112px)}

/* section label: one short line instead of the printed numbering run-on */
#chapter .pg .eyebrow{letter-spacing:2.2px}

/* maps sit in a grid of two when a section shows a pair */
#chapter .rm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr));gap:22px}

/* closing photo sections: the text sits on a frosted panel so the photo never fights it */
#chapter .t-rclosing[data-dark] .rcl-copy,#chapter .t-rhero .rh-copy{max-width:760px;padding:34px 38px 30px;border-radius:22px;background:#071f13a6;backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);border:1px solid #ffffff1c;box-shadow:0 30px 80px #0006}
#chapter .t-rclosing[data-dark] .rcl-copy .h-2,#chapter .t-rhero .rh-copy .h-display{font-size:clamp(34px,3.4vw,54px);max-width:none}
#chapter .t-rclosing[data-dark] .rcl-copy .prose.cols{columns:1}
#chapter .t-rclosing[data-dark] .rcl-copy .prose p{font-size:16px;line-height:1.7}
#chapter .t-rclosing[data-dark]::before{background:linear-gradient(90deg,#03120ecc 0%,#03120e66 40%,transparent 75%),linear-gradient(0deg,#03120e99,transparent 40%)!important}
#chapter .t-rclosing[data-dark] > .r-extra{max-width:760px}

@media (max-width:999px){
  #chapter :is(.t-rmap,.t-rchart,.t-rtable,.t-rtext,.t-rstats,.t-rband:not([data-var="1"]),.t-rduo,.t-rclosing:not([data-dark])) > :is(.rm-copy,.rt-copy,.rx-copy,.rb-copy,.rd-copy,.rcl-copy) > .h-2{position:static}
  #chapter .t-rclosing[data-dark] .rcl-copy,#chapter .t-rhero .rh-copy{padding:24px 20px;border-radius:16px}
}

@media (min-width:1000px){
  #chapter .t-rband:not([data-var="1"]) > .rb-photo,#chapter .t-rduo > .rd-photos{margin-top:48px}
}

/* the heading follows the reader only where nothing runs full width below it; otherwise it would slide over maps and charts */
@media (min-width:1000px){
  #chapter .pg:not(:has(> :is(.am,.rm-grid,.r-charts,.r-extra,.st-grid,.items-title,.items-note,.r-map,.rb-photo,.rd-photos))) > :is(.rm-copy,.rt-copy,.rx-copy,.rb-copy,.rd-copy,.rcl-copy) > .h-2{position:sticky;top:104px}
}

/* ---------- biodiversity: group openers ---------- */
/* species, map and field photos leave the narrow text column and get a full-width row of their own */
.t-group > .grp-bottom{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,1fr);gap:28px;align-items:start;margin-top:clamp(28px,4vw,56px);padding-top:28px;border-top:1px solid var(--border-soft)}
.t-group[data-cut] > .grp-bottom{padding-left:var(--pad);padding-right:var(--pad)}
/* the torn-paper photo starts at the screen edge, top and left; text and the species row keep the site's content edges on wide screens */
#chapter .t-group[data-cut]{padding-top:0}
@media (min-width:1101px){
  #chapter .t-group[data-cut]{padding-left:0;padding-right:max(var(--pad),calc((100vw - var(--wrap)) / 2))}
  #chapter .t-group[data-cut] > .grp-bottom{margin-left:max(var(--pad),calc((100vw - var(--wrap)) / 2));padding-left:0;padding-right:0}
}
.grp-species h3,.grp-map h3,.grp-field h3{font:700 12.5px var(--font-body)!important;letter-spacing:1.6px;text-transform:uppercase;color:var(--accent-coral)!important;margin:0 0 14px!important}
.grp-species ul{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px!important}
.grp-species li{position:relative;display:block!important;padding:0!important;border-radius:var(--radius)!important;background:var(--bg-surface)!important;border:1px solid var(--border-soft)!important;box-shadow:var(--shadow-1);transition:transform .25s var(--ease),border-color .25s}
.grp-species li > b,.grp-species li > i,.grp-species li > span{margin:0 14px}
.grp-species li > b{margin-top:12px}
.grp-species li > span:last-child,.grp-species li > i:last-child{margin-bottom:12px}
.grp-species li a{display:grid!important;gap:2px;height:100%;padding:12px 14px;color:inherit}
.grp-species li b{display:flex!important;align-items:flex-start;justify-content:space-between;gap:8px;font:650 15.5px/1.25 var(--font-body);color:var(--ink-strong)}
.grp-species li i{display:block;font:italic 15px/1.3 var(--font-display)!important;color:var(--ink-muted)!important}
.grp-species li [lang=ar]{display:block;font:14px/1.4 var(--font-arabic)!important;color:var(--ink-muted)!important;text-align:right}
.grp-species li .chip-iucn{flex:none;font:700 11px/1 var(--font-body);font-style:normal;padding:4px 7px;border-radius:999px;background:var(--bg-mist);color:var(--ink-strong)}
.grp-species li .chip-iucn[data-c=LC]{background:#DDF3E8;color:#14583F}
.grp-species li .chip-iucn[data-c=NT]{background:#EEF6CF;color:#4C5A0C}
.grp-species li .chip-iucn[data-c=VU]{background:var(--status-warning-bg);color:#573d0f}
.grp-species li.has{border-color:color-mix(in srgb,var(--accent-tide) 45%,var(--border-soft))!important}
.grp-species li.has a::after{content:'Read more →';margin-top:6px;font:650 13px var(--font-body);color:var(--accent-tide)}
.grp-species li.has:hover{background:var(--bg-surface)!important;color:inherit!important;transform:translateY(-3px);border-color:var(--accent-tide)!important}
.grp-species li.has:hover i{color:var(--ink-muted)!important}
.grp-map{position:sticky;top:calc(var(--bar-h) + 20px)}
.grp-map figure{padding:10px!important;border-radius:var(--radius-l)!important;box-shadow:var(--shadow-2)!important}
.grp-map figure:hover{transform:none!important}
.grp-map figcaption{font-size:13px!important}
.t-group > .grp-bottom .grp-field{grid-column:1/-1}
@media (max-width:900px){.t-group > .grp-bottom{grid-template-columns:1fr}.grp-map{position:static}}

/* cover label: readable on the dark cover */
.t-cover > .eyebrow,.t-rcover > .eyebrow{color:var(--accent-coral-soft)!important;opacity:1!important}
.t-cover > .eyebrow,.t-rcover > .eyebrow{position:relative;z-index:4}
.t-group > .grp-bottom .grp-species{grid-column:1;grid-row:1}
.t-group > .grp-bottom .grp-map{grid-column:2;grid-row:1 / span 2}
.t-group > .grp-bottom .grp-field{grid-column:1;grid-row:2}
@media (max-width:900px){.t-group > .grp-bottom .grp-species,.t-group > .grp-bottom .grp-map,.t-group > .grp-bottom .grp-field{grid-column:1;grid-row:auto}}

/* group distribution maps stay the atlas images, shown large: the map takes nearly half the row */
.t-group > .grp-bottom{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,3vw,44px)}
.t-group > .grp-bottom .grp-species ul{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.grp-map figure{position:relative;padding:12px!important;background:var(--bg-surface)!important}
.grp-map img{width:100%;height:auto;aspect-ratio:1278/1051;object-fit:contain;border-radius:8px}
.grp-map figure::after{content:'Enlarge';position:absolute;right:22px;top:22px;padding:6px 12px;border-radius:999px;background:#071f13cc;color:var(--ink-inverse);font:650 13px var(--font-body);pointer-events:none}
.grp-map figcaption{display:flex;justify-content:space-between;gap:12px;padding:10px 6px 2px!important;font:14px var(--font-body)!important;color:var(--ink-muted)!important}
@media (max-width:900px){.t-group > .grp-bottom{grid-template-columns:1fr}}
.t-group > .grp-bottom{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
@media (max-width:900px){.t-group > .grp-bottom{grid-template-columns:1fr}}

/* ---------- print: one region as a clean document ---------- */
@media print{
  @page{margin:16mm 14mm}
  html,body{background:#fff!important;color:#000}
  .bar,.rail,.pages-panel,.to-top,.skip-link,.up-next .un-dots,.am-ui,.am-open,.am-feat,.am-list,.strip-controls,.idx-tools,#viewer,.sn-drawer,.viz-tip,.scroll-hint{display:none!important}
  #chapter .pg{min-height:0!important;padding:10mm 0!important;break-inside:avoid-page;background:#fff!important;color:#000!important}
  #chapter .pg[data-dark] *{color:#000!important;text-shadow:none!important}
  .rh-bg,.sl-bg,.rc-bg{position:relative!important;inset:auto!important;max-height:90mm;overflow:hidden}
  .t-rclosing[data-dark]::before,.t-cover::before{display:none!important}
  .reveal,.par{opacity:1!important;transform:none!important}
  .am{box-shadow:none;border:1px solid #999;break-inside:avoid}
  .am-map{min-height:0!important;height:40mm!important;aspect-ratio:auto!important;background:#eee!important}
  .am-map::after{content:'Live map: open this page online to explore it';display:grid;place-items:center;height:100%;font:12pt var(--font-body);color:#333}
  .am-map > *{display:none!important}
  .am figcaption{background:#fff!important;color:#000!important}
  .r-chart,.r-data{box-shadow:none!important;border:1px solid #bbb!important;break-inside:avoid}
  .r-chart *{animation:none!important}
  .prose.cols{columns:1!important}
  a{color:#000;text-decoration:none}
}
@media (max-width:1400px){.bar-nav #copy-link span,.bar-nav #print-page span{display:none}}
/* Arabic: words that live in the stylesheet, and no second Arabic name under an Arabic title */
.lang-ar .grp-species li.has a::after{content:'اقرأ المزيد ←'}
.lang-ar .grp-map figure::after{content:'تكبير';right:auto;left:22px}
.lang-ar .grp-species li [lang=ar],.lang-ar .ar-name{display:none!important}
#pages-list a .ph{display:grid;place-items:center;background:var(--bg-dark);color:var(--accent-coral-soft)}
#pages-list a .ph .ic{width:22px;height:22px}

/* reading sizes: opening paragraphs and leads stay generous on desktop, calmer on phones */
#chapter p.first,#chapter .lead{font-size:clamp(17px,1.05rem + .45vw,21px)!important;line-height:1.6!important}
@media (max-width:700px){
  #chapter p.first,#chapter .lead{font-size:17.5px!important;line-height:1.6!important}
  #chapter .prose p,#chapter .prose.cols p{font-size:16px!important;line-height:1.65!important}
  #chapter .h-2{font-size:clamp(28px,7.5vw,34px)!important}
  #chapter .h-display,#chapter .part-head .h-display{font-size:clamp(32px,9vw,40px)!important}
  #chapter .t-rcover h1,#chapter .t-cover h1{font-size:clamp(40px,12vw,56px)!important}
}
/* Species index: chart and table side by side on wide screens */
@media (min-width:1100px){
  .idx-body{display:grid;grid-template-columns:minmax(300px,.8fr) minmax(0,1.6fr);gap:28px;align-items:start}
  .idx-body .idx-chart{margin:0;max-width:none;position:sticky;top:calc(var(--bar-h,64px) + 16px)}
  .idx-body .idx-tools .field.search{flex:1 1 220px}
  .idx-body .idx-scroll{max-height:calc(100vh - var(--bar-h,64px) - 120px)}
  .idx-body .idx-table td{padding:9px 14px}
  .idx-body .idx-table th{padding:13px 14px}
}
.iucn-note{max-width:760px;margin:18px auto 0}
/* calmer rhythm between sections: one modest gap, not two paddings stacked */
#chapter .pg{padding-top:clamp(52px,5vw,84px);padding-bottom:clamp(44px,4.5vw,72px)}
#chapter .t-species,#chapter .t-feature{padding-top:clamp(28px,3vw,48px);padding-bottom:clamp(28px,3vw,48px)}
#chapter .sp-intro{padding-top:0;padding-bottom:28px}
#chapter .ft-body{padding-bottom:clamp(28px,3vw,48px)}