/* =====================================================================
   1. STYLES
   ===================================================================== */

/* ---------- Colours — from the home-page mock-up ---------- */
:root {
  --panel-colour:          rgba(12, 12, 12, .9);    /* wrappers: #0C0C0C at .9, no border */
  --gold:                  #CC9900;                  /* the gold of the buttons, links and menu bars */
  --button-border:         rgba(204, 153, 0, .7);    /* 1px border, #CC9900 at .7 */
  --button-fill-selected:  rgba(96, 56, 19, .7);     /* #603813 — selected and hover */
  --title-text:            rgba(230, 231, 232, .58); /* panel titles, button labels and the word "Menu" (#E6E7E8; the artwork sets .8 inside .72) */
  --heading-text:          rgba(255, 255, 255, .70); /* headings inside a content panel, e.g. "Natural History", "Red Belt" */
  --body-text:             rgba(255, 255, 255, .55); /* body text (white at .55 in the artwork) */
  --link:                  rgba(204, 153, 0, .75);   /* links, e.g. "More"  (#CC9900) */
  --link-hover:            #3399FF;                  /* links under the pointer — no visited colour */
  --menu-icon:             rgba(204, 153, 0, .8);    /* the three bars, #CC9900 at .8 */
  --ribbon-band:           rgba(0, 0, 0, .7);        /* the "Desktop Images" ribbon's band */
  --ribbon-text:           rgba(204, 153, 0, .7);    /* the ribbon's lettering */
  --placeholder-tag:       #CC9900;                  /* the tag that marks placeholder text */
}

/* ---------- Type — Optima; your PC substitute Franklin Gothic Medium ---------- */
:root {
  --font: Optima, "Franklin Gothic Medium", "Franklin Gothic", sans-serif;
  --ribbon-font: "Book Antiqua", Palatino, "Palatino Linotype", serif;  /* the ribbon in the mock-up */
  --title-size: 21px;      /* panel titles — Optima Bold 21; the word "Menu" — Optima Regular 21 */
  --label-size: 18px;      /* button labels — Optima Regular 18 */
  --body-size: 18px;       /* body text — Optima Regular 18 */
  --body-leading: 21px;    /* leading 21 */
  --body-tracking: -0.3px; /* the artwork sets body text 3.5% narrower; this keeps its line breaks. Delete to set it plain. */
}

/* ---------- Measurements — the mock-up's pixels, "based on the center of the button lines" ---------- */
:root {
  --content-width: 925px;  /* 295 + 20 + 295 + 20 + 295 */
  --content-top: 110px;    /* 80 header + 30 */
  --gap: 20px;             /* between panels */
  --panel-w: 295px;
  --panel-h: 345px;
  --panel-corner: 10px;
  --title-band: 37px;      /* the title's band at the top of a panel */
  --inset: 17px;           /* photographs and buttons sit 17 in from a panel's edge */
  --photo-w: 261px;
  --photo-h: 160px;
  --photo-gap: 18px;       /* photograph to the first row of buttons */
  --button-w: 122px;
  --button-h: 48px;
  --button-corner: 4px;
  --button-gap: 17px;
  --desktop-panel-w: 610px;
  --desktop-inset: 22px;   /* the slider sits 22 in from the Desktop Images panel's top and left */
  --desktop-col-gap: 16px; /* slider to its buttons, and the buttons to the panel's right edge */
  --slider-w: 434px;       /* the mock-up's 434×260 */
  --slider-h: 260px;
  --nav-panel-h: 131px;    /* Home / Search / Site Map / Go Back (the order from v0.8, E5) */
  --nav-button-h: 40px;
  --content-panel-h: 750px;   /* a plain content panel is at least this tall; the series panels are as tall as their content */
  --content-item-gap: 22px;
  --tile-gap: 30px;        /* Common Species: between the two columns of photographs */
  --tile-row-gap: 24px;    /* …and between the rows */
  --tile-caption-gap: 4px; /* photograph to its caption */
  --header-h: 80px;
  --logo-w: 290px;
  --menu-edge: 15px;       /* the Menu button sits 15 from the top and 15 from the right */
  --menu-button-w: 104px;  /* the box round "Menu" and the bars */
  --menu-button-h: 36px;
  --menu-bar-w: 30px;      /* each of the three bars */
  --menu-bar-h: 5px;
  --menu-bar-gap: 3px;
  --menu-panel-gap: 15px;  /* Menu button to the menu panel */
  --menu-panel-h: 345px;
  --menu-search-w: 179px;
  --menu-close-w: 65px;
  --menu-search-h: 30px;
  --menu-search-gap: 30px; /* the search row to the first row of buttons */
  --menu-button-row-h: 40px;
  --menu-icon-size: 22px;  /* the social-media icons */
  --menu-icon-gap: 10px;
  --menu-icons-above: 19px;
  --menu-icons-below: 14px;
  --phone-gutter: 16px;
}

/* ---------- The page ---------- */
* { box-sizing: border-box; }
html { background: #000; }
body {
  margin: 0; min-height: 100vh; display: flow-root;   /* flow-root: the stage's top margin stays inside the body, so a short page does not scroll (NAT4 finding) */
  font-family: var(--font); font-size: var(--body-size); line-height: var(--body-leading);
  color: var(--body-text);
  -webkit-font-smoothing: antialiased;
}
.background {                         /* the surf-and-forest photograph, 1600×900, centred, filling the window; a page may name another */
  position: fixed; inset: 0; z-index: -1;
  background: #000 url(images/background.jpg) center top / cover no-repeat;
}
a { color: var(--link); text-decoration: none; }
a:hover, a:focus-visible { color: var(--link-hover); }
img { display: block; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: bold; }

/* ---------- 2. Header: the logo block (290×80 at top left) and the Menu button ---------- */
.site-header { position: absolute; top: 0; left: 0; right: 0; height: var(--header-h); z-index: 20; }
.logo { position: absolute; top: 0; left: 0; }
.logo img { width: var(--logo-w); height: var(--header-h); }
.menu-button {                         /* "Menu" and three gold bars in a gold-bordered box, 104×36, 15 from the top and the right */
  position: absolute; top: var(--menu-edge); right: var(--menu-edge);
  width: var(--menu-button-w); height: var(--menu-button-h);
  display: flex; align-items: center; justify-content: space-evenly; padding: 0;   /* NAT26 (N4, Q1 Even): left, between and right the same */
  border: 1px solid var(--button-border); border-radius: var(--button-corner);
  background: var(--panel-colour); cursor: pointer;
  -webkit-appearance: none; appearance: none;
  font-family: var(--font); font-size: var(--title-size); line-height: 1; color: var(--title-text);
}
.menu-button__word { display: block; }
.menu-button__bars { display: block; width: var(--menu-bar-w); flex: none; }
.menu-button__bars span {              /* each bar sized on its own, so Safari draws them too (the NAT2 finding) */
  display: block; width: var(--menu-bar-w); height: var(--menu-bar-h); border-radius: 2.5px; background: var(--menu-icon);
}
.menu-button__bars span + span { margin-top: var(--menu-bar-gap); }
.menu-button:hover, .menu-button[aria-expanded="true"] { background: var(--button-fill-selected); }
.menu-button:hover .menu-button__bars span, .menu-button[aria-expanded="true"] .menu-button__bars span { background: var(--gold); }

/* ---------- Panels ("wrappers") ---------- */
.panel {
  background: var(--panel-colour); border-radius: var(--panel-corner); border: 0;
  width: var(--panel-w); position: relative;
}
.panel__title {                        /* Optima Bold 21, centred in the 37 band */
  height: var(--title-band); line-height: var(--title-band);
  font-size: var(--title-size); font-weight: bold; text-align: center;
  color: var(--title-text);
}
.panel__photo-link {                   /* the photograph is a link to the panel's first page ("The Seasoned Observer") — his note on the mock-up */
  display: block; width: var(--photo-w); margin: 0 var(--inset);
}
.panel__photo { width: 100%; height: auto; aspect-ratio: 261 / 160; object-fit: cover; }
.panel__buttons {                      /* two columns of 122×48 buttons, 17 apart, 17 in from the edges */
  display: grid; grid-template-columns: repeat(2, var(--button-w)); gap: var(--button-gap);
  padding: var(--photo-gap) var(--inset) var(--inset);
}
.panel__buttons--no-photo { padding-top: var(--inset); }
.panel__buttons .gold-button--wide { grid-column: 1 / -1; width: auto; }

/* ---------- Gold buttons ---------- */
.gold-button {
  -webkit-appearance: none; appearance: none;
  display: flex; align-items: center; justify-content: center; text-align: center;
  width: var(--button-w); height: var(--button-h);
  border: 1px solid var(--button-border); border-radius: var(--button-corner);
  background: none;
  font-family: var(--font); font-size: var(--label-size); line-height: var(--label-size); font-weight: normal;
  color: var(--title-text); cursor: pointer; padding: 0 4px;
}
.gold-button:hover, .gold-button:focus-visible, .gold-button.is-selected {
  background: var(--button-fill-selected); color: var(--title-text); outline: none;
}
.gold-button--nav { height: var(--nav-button-h); }
.back-arrow {                          /* NAT19: the circular arrow in front of Back (his opening design) — as tall as the capital B: 1cap is
                                          the font's own capital height (Safari 17.2 and Chrome 118 on); .7em before them, about Optima's */
  display: inline-block; height: .7em; height: 1cap; width: auto; aspect-ratio: 20.03 / 18; vertical-align: baseline;
  margin-right: .3em; flex: none; overflow: visible;
}

/* ---------- Group panels: The Naturalist, Community, J&J's Blog, About (295×345) ---------- */
.panel--group { height: var(--panel-h); }

/* ---------- Desktop Images panel (610×345): the slider, four buttons to its right, the caption ---------- */
.panel--desktop {
  width: var(--desktop-panel-w); height: var(--panel-h);
  display: grid; grid-template-columns: var(--slider-w) var(--button-w); grid-template-rows: var(--slider-h) 1fr; column-gap: var(--desktop-col-gap);
  padding: var(--desktop-inset) var(--desktop-col-gap) 0 var(--desktop-inset);
}
.store-buttons { display: grid; grid-template-rows: repeat(4, var(--button-h)); row-gap: var(--button-gap); }
.panel--desktop .caption {             /* "Enjoy beautiful desktop images…" — centred on the panel, under the slider; the same space above and below it (E4) */
  grid-column: 1 / -1; text-align: center; align-self: center; margin: 0 0 0 -6px; color: var(--body-text);
  letter-spacing: var(--body-tracking);
}

/* The slider — one image at a time, the "Desktop Images" ribbon across its top-left corner */
.slider { position: relative; width: var(--slider-w); height: var(--slider-h); overflow: hidden; container-type: inline-size; }
.slider__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .7s ease; }
.slider__slide.is-current { opacity: 1; }
.ribbon {                              /* the band: a diagonal strip from 85 to 134.5 along the top edge and down the left edge
                                          (at the slider's 434 width; "cqw" units scale it with the image on a phone: 1cqw = 4.34px) */
  position: absolute; left: 0; top: 0; width: 31cqw; height: 31cqw; pointer-events: none;
  background: var(--ribbon-band);
  clip-path: polygon(31cqw 0, 0 31cqw, 0 19.6cqw, 19.6cqw 0);
}
.ribbon span {                         /* "Desktop Images", Book Antiqua Bold 18.9px, gold, reading up the band */
  position: absolute; left: 2.26cqw; top: 21.6cqw; height: 4.4cqw; white-space: nowrap;
  font-family: var(--ribbon-font); font-weight: bold; font-size: 4.355cqw; line-height: 4.4cqw; letter-spacing: -.046cqw;
  color: var(--ribbon-text); transform: rotate(-45deg); transform-origin: 0 3.45cqw;
}
.slider__arrow {                       /* arrows and dots show only while the pointer is over the slider */
  position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 48px;
  -webkit-appearance: none; appearance: none;
  border: 0; background: rgba(12,12,12,.55); color: var(--gold); font: 28px/48px var(--font);
  cursor: pointer; opacity: 0; transition: opacity .25s; border-radius: var(--button-corner);
}
.slider__arrow--prev { left: 8px; } .slider__arrow--next { right: 8px; }
.slider__dots { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center; gap: 8px; opacity: 0; transition: opacity .25s; }
.slider__dot { -webkit-appearance: none; appearance: none; width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--gold); background: rgba(12,12,12,.55); padding: 0; cursor: pointer; }
.slider__dot.is-current { background: var(--gold); }
.slider:hover .slider__arrow, .slider:focus-within .slider__arrow,
.slider:hover .slider__dots, .slider:focus-within .slider__dots { opacity: 1; }
.slider__arrow:hover, .slider__dot:hover { background: var(--button-fill-selected); }
.slide-note {                          /* marks a placeholder slide, visibly */
  position: absolute; right: 8px; bottom: 8px; padding: 2px 8px; border-radius: var(--button-corner);
  background: rgba(12,12,12,.75); color: var(--placeholder-tag); font-size: 13px; line-height: 17px;
  opacity: 0; transition: opacity .7s; pointer-events: none;
}
.slide-note.is-current { opacity: 1; }

/* ---------- Nav panel: Home · Search · Site Map · Go Back (295×131; on a tablet one row, 610 wide — below) ---------- */
.panel--nav { height: var(--nav-panel-h); }
.panel--nav .panel__buttons { padding-top: var(--inset); }

/* ---------- NAT16 (his word, 1 Nov 2026, 07:31): a page without a side panel — the Site Map — has Home · Search · Site Map · Go Back
   on top of its directory, in one row as wide as the directory, on a desktop, a tablet and a phone ---------- */
.page--navtop .columns { grid-template-columns: var(--desktop-panel-w); justify-content: center; }
.page--navtop .panel--nav { width: var(--desktop-panel-w); height: auto; order: 1; }
.page--navtop .panel--nav .panel__buttons { grid-template-columns: repeat(4, 1fr); padding: var(--inset); }
.page--navtop .panel--nav .gold-button { width: auto; }
.page--navtop .panel--edit { width: var(--desktop-panel-w); }
.page--navtop .panel--edit .panel__buttons { grid-template-columns: 1fr 1fr; }
.page--navtop .panel--edit .gold-button { width: auto; }

/* ---------- NAT20 (his word, 1 Nov 2026, 14:06): the Search page laid out as the Site Map — the four buttons on top, no side panel,
   the Search panel as wide as the Site Map's.  On both, the title sits in a 37 band (as NAT19 set the Search title), and what follows
   starts at the band's bottom: the search box's top edge, and the Site Map's first line of capitals (alignMap() in the script). ---------- */
.page--navtop .content { padding-top: 0; }
.page--navtop .content > h1:first-child { line-height: var(--title-band); margin: 0 0 calc(-1 * var(--content-item-gap)); }

/* ---------- Content panels on a sub-page (610 wide) ---------- */
.main { display: grid; gap: var(--gap); align-content: start; width: var(--desktop-panel-w); }
.content {                             /* a wrapper like the others, 610 wide; a plain one is at least 750 tall */
  background: var(--panel-colour); border-radius: var(--panel-corner);
  width: var(--desktop-panel-w); min-height: var(--content-panel-h);
  padding: var(--content-item-gap) var(--inset);
  display: flex; flex-direction: column; gap: var(--content-item-gap);
}
.content--auto { min-height: 0; }                                          /* as tall as its content — the series panels */
.content--titled { padding: 0 var(--inset) var(--inset); gap: 0; }         /* a title band, then the text straight under it; 17 below */
.content--titled p + p { margin-top: var(--body-leading); }
.content--tiles { --tiles-gap: 8px; padding-top: 0; gap: var(--tiles-gap); }   /* a title band, then photographs two across */
.content > .panel__title {             /* a content panel's title (NAT12, F4): centred in its 37 band, as a group panel's is — not set on a
                                          heading's 21 line at the band's top — and what follows starts at the band's bottom */
  line-height: var(--title-band); margin: 0 calc(-1 * var(--inset));
}
.content--tiles > .panel__title { margin-bottom: calc(-1 * var(--tiles-gap)); }   /* the photographs start at the band's bottom, not a gap below it */

/* A list row: the photograph at the left, the heading and text to its right (TEMPLATE 1, and the series pages) */
.item { display: grid; grid-template-columns: var(--photo-w) 1fr; column-gap: var(--inset); align-items: start; }
.item__photo { width: var(--photo-w); height: var(--photo-h); object-fit: cover; }
.item__photo--placeholder {            /* a marked box where a photograph is still to come */
  display: flex; align-items: center; justify-content: center; text-align: center;
  border: 1px dashed var(--placeholder-tag); border-radius: var(--button-corner); color: var(--placeholder-tag); font-size: 14px; line-height: 18px; padding: 8px;
}
.item__heading, .content h1, .content h2 { font-size: var(--label-size); line-height: var(--body-leading); color: var(--heading-text); margin: 0 0 8px; }
.item__text, .content p, .content li { color: var(--body-text); letter-spacing: var(--body-tracking); }
.content p + p { margin-top: var(--body-leading); }
.page[data-list="resources"] .content p + p { margin-top: 0; }   /* NAT37 (his words, 16:25): ID Resources' listings closer — the panel's own gap alone, about half the space (43 → 22 px) */
.lead-words { color: var(--body-text); }                                     /* NAT37: the row's words under a sub-page's title — as the page's own words */
.lead-note { font-size: 14px; line-height: 18px; font-style: italic; color: var(--placeholder-tag); }   /* NAT37: in Edit Mode, where those words are edited */
.content ul { margin: 0; padding-left: 22px; }
a.item { color: inherit; }                                                 /* a row that leads to the next page down */
.item--split > a.item__pic, a.item__title { display: block; color: inherit; }   /* NAT23: a group's row — photograph and heading to its page, More to its introduction */
.item--split > a.item__pic:hover + div .item__heading, a.item__title:hover .item__heading, a.item__title:focus-visible .item__heading { color: var(--link-hover); }
body.is-editing .item--split a { cursor: default; }
body.is-editing .item--split > a.item__pic:hover + div .item__heading, body.is-editing a.item__title:hover .item__heading { color: var(--heading-text); }
a.item:hover .item__heading, a.item:focus-visible .item__heading { color: var(--link-hover); }
.placeholder__tag {                    /* "Placeholder" — marks text that is not yet written */
  display: inline-block; padding: 0 6px; margin-right: 6px; border: 1px solid var(--placeholder-tag);
  border-radius: var(--button-corner); color: var(--placeholder-tag); font-size: 14px; line-height: 18px; letter-spacing: 0;
  vertical-align: 1px;
}

/* ---------- Common Species — TEMPLATE 3: photographs two across, each captioned with its names, each a link ---------- */
.tiles { display: grid; grid-template-columns: repeat(2, var(--photo-w)); column-gap: var(--tile-gap); row-gap: var(--tile-row-gap); justify-content: center; }
.tile { display: block; color: inherit; }
.tile__photo { width: var(--photo-w); height: var(--photo-h); object-fit: cover; }
.tile__caption { margin: var(--tile-caption-gap) 0 0; line-height: var(--body-leading); letter-spacing: var(--body-tracking); }
.tile__common { font-weight: bold; color: var(--heading-text); }
.tile__latin { font-style: italic; color: var(--body-text); }
a.tile:hover .tile__common, a.tile:focus-visible .tile__common { color: var(--link-hover); }
.tile__caption .placeholder__tag { margin-right: 0; }

/* ---------- Species page — TEMPLATE 2 (from his Red Belt page): the photograph across the panel; under it the names on one
              line; then the topics, one paragraph each, with a line's space between them ---------- */
:root {
  --species-photo-ratio: 16 / 9;     /* NAT25 (his word, 3 Nov 2026, 20:04): the 1600 × 900's own shape, 576 × 324 — every photograph and drawing whole (was 261 / 160) */
  --species-names-gap: 10px;         /* photograph to the names */
}
.content--species { min-height: 0; gap: 0; }
.species__photo { width: 100%; height: auto; aspect-ratio: var(--species-photo-ratio); object-fit: cover; }
.content .species__names { margin: var(--species-names-gap) 0 0; font-size: var(--label-size); line-height: var(--body-leading); font-weight: bold; color: var(--heading-text); }
.species__names em { font-style: italic; }
.species__names .species__latin { display: block; font-weight: normal; }   /* NAT27 (his note, 4 Nov 2026, 14:25): the scientific name under the common name, regular italic, the comma gone */
.species__topics p { margin-top: var(--body-leading); }
/* NAT27 (his eleventh list, 4 Nov 2026, 13:46; his word at the open): a species' habitat icons — his drawing in a button as the site's
   buttons are, 122 × 65 (1-px gold edge at .7, 4-px corners, #603813 under the pointer), 8 apart, at the right of the names line with
   their tops on its top, the first chosen at the right; the names and topics keep their place at the left, their words never under an
   icon.  Drawn only when a species has a habitat (or in Edit Mode, with the + Habitat space), so every other page is as before. */
.species__body { display: block; }
.species__habitats { float: right; position: relative; display: flex; flex-direction: row-reverse; flex-wrap: wrap; gap: 8px; max-width: 100%;
  margin: var(--species-names-gap) 0 0 var(--content-item-gap); }
.habitat { position: relative; display: block; flex: none; box-sizing: border-box; width: 122px; height: 65px; padding: 0; margin: 0;
  border: 1px solid var(--button-border); border-radius: var(--button-corner); background: none; cursor: pointer; }
.habitat img { position: absolute; left: -1px; top: -1px; display: block; width: 122px; height: 65px; }
a.habitat:hover, a.habitat:focus-visible { background: var(--button-fill-selected); outline: none; }
.habitat--space { -webkit-appearance: none; appearance: none; border-style: dashed; border-color: var(--gold); color: var(--gold);
  font: var(--label-size)/1 var(--font); letter-spacing: 0; }
.habitat--space:hover, .habitat--space:focus-visible, .habitat--space.is-open { background: var(--button-fill-selected); outline: none; }
.habitat-list { position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; box-sizing: border-box; width: 346px; max-width: calc(100vw - 32px);
  background: var(--panel-colour); border: 1px solid var(--button-border); border-radius: var(--panel-corner); padding: 0 var(--inset) var(--inset);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .65); text-align: left; }
.habitat-list__title { margin: 0 calc(-1 * var(--inset)); font-size: var(--label-size); }
.habitat-list__choices { display: grid; grid-template-columns: repeat(3, 98px); justify-content: space-between; row-gap: 8px; }
.habitat-list__choice { -webkit-appearance: none; appearance: none; position: relative; box-sizing: border-box; width: 98px; height: 52px; padding: 0;
  border: 1px solid var(--button-border); border-radius: var(--button-corner); background: none; cursor: pointer; }
.habitat-list__choice img { position: absolute; left: -1px; top: -1px; width: 98px; height: 52px; display: block; }
.habitat-list__choice:hover, .habitat-list__choice:focus-visible { background: rgba(96, 56, 19, .4); outline: none; }
.habitat-list__choice.is-selected { background: var(--button-fill-selected); border-color: var(--gold); }
.habitat-list__note { margin: 12px 0 0; font-size: 15px; line-height: 19px; color: var(--body-text); letter-spacing: var(--body-tracking); }
.habitat-list__done { width: 100%; height: 40px; margin-top: 12px; }
@media (max-width: 659px) {   /* a phone: the icons on their own line under the names, from the right; the names keep the panel's width */
  .species__body { display: flex; flex-direction: column; }
  .species__body > .species__names { order: 1; }
  .species__body > .species__habitats { order: 2; float: none; align-self: stretch; margin: 8px 0 0; }
  .species__body > .species__topics { order: 3; }
  .habitat-list { width: 100%; max-width: none; }
  .habitat-list__choices { grid-template-columns: repeat(auto-fill, 98px); justify-content: space-evenly; }
}

/* ---------- A slideshow window (NAT10): several photographs in one window — a row's, a species card's or a species page's.
              It stays on a photograph until the visitor presses an arrow (his word: with arrows only).  The arrows show under
              the pointer, as the home page's slider's do, and always where there is no pointer; the count shows always. ---------- */
.show { position: relative; overflow: hidden; display: block; }
.show__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s ease; }
.show__slide.is-current { opacity: 1; }
.show__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); width: 28px; height: 40px; z-index: 2;
  background: rgba(12,12,12,.55); color: var(--gold); font: 24px/40px var(--font); text-align: center; letter-spacing: 0;
  border-radius: var(--button-corner); cursor: pointer; opacity: 0; transition: opacity .25s; user-select: none; -webkit-user-select: none;
}
.show__arrow--prev { left: 6px; } .show__arrow--next { right: 6px; }
.show:hover .show__arrow, .show:focus-within .show__arrow { opacity: 1; }
.show__arrow:hover, .show__arrow:focus-visible { background: var(--button-fill-selected); }
.show__count {                         /* "2 / 5" — the visitor can see there is more to this window */
  position: absolute; right: 6px; bottom: 6px; z-index: 2; padding: 0 6px; border-radius: var(--button-corner);
  background: rgba(12,12,12,.55); color: var(--title-text); font-size: 13px; line-height: 18px; letter-spacing: 0; pointer-events: none;
}
@media (hover: none) { .show__arrow { opacity: .85; } }
@media (prefers-reduced-motion: reduce) { .show__slide { transition: none; } }
.show { touch-action: pan-y pinch-zoom; }  /* NAT17: a sideways swipe turns the window; up and down still scroll the page */

/* ---------- NAT17: full screen for a species page's photographs (his word, 31 Oct 2026, 10:24).  The double-arrow box at the
              window's top right, drawn as the grab handle's box; the photographs as large as the screen allows, each one's
              1600 × 900 copy where there is one; the × box at the top right or Esc closes; the arrows, the keys and a swipe turn. ---------- */
.species__frame { position: relative; }
.show__full, .zoom__close {
  position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; z-index: 3; border-radius: var(--button-corner);
  background: rgba(12,12,12,.82); border: 1px solid var(--button-border); color: var(--gold);
  display: flex; align-items: center; justify-content: center; cursor: pointer; user-select: none; -webkit-user-select: none;
}
.show__full svg { width: 12px; height: 12px; display: block; }
.show__full::before, .zoom__close::before { content: ''; position: absolute; inset: -9px; }   /* a finger-sized target round the small box */
.show__full:hover, .show__full:focus-visible, .zoom__close:hover, .zoom__close:focus-visible { background: var(--button-fill-selected); border-color: var(--gold); outline: none; }
.zoom {
  position: fixed; inset: 0; z-index: 1000; background: rgba(12,12,12,.96);
  display: flex; align-items: center; justify-content: center; touch-action: pan-y pinch-zoom;
}
.zoom[hidden] { display: none; }
.zoom__img { display: block; max-width: calc(100vw - 120px); max-height: calc(100vh - 96px); width: auto; height: auto; object-fit: contain; user-select: none; -webkit-user-select: none; }
@media (max-width: 600px) { .zoom__img { max-width: calc(100vw - 16px); } }   /* a phone: the photograph across the screen, the arrows over its edges */
.zoom__close { top: 12px; right: 12px; z-index: 2; font: 18px/20px var(--font); letter-spacing: 0; }
.zoom__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 52px; z-index: 2;
  background: rgba(12,12,12,.55); color: var(--gold); font: 30px/52px var(--font); text-align: center; letter-spacing: 0;
  border-radius: var(--button-corner); cursor: pointer; user-select: none; -webkit-user-select: none;
}
.zoom__arrow--prev { left: 12px; } .zoom__arrow--next { right: 12px; }
.zoom__arrow:hover, .zoom__arrow:focus-visible { background: var(--button-fill-selected); outline: none; }
.zoom__count {
  position: absolute; right: 12px; bottom: 12px; z-index: 2; padding: 0 6px; border-radius: var(--button-corner);
  background: rgba(12,12,12,.55); color: var(--title-text); font-size: 13px; line-height: 18px; letter-spacing: 0;
}
body.is-zoomed { overflow: hidden; }

/* ---------- NAT24 (his words, 3 Nov 2026, 17:34): full screen for a kingdom's or group's page — the box at the top right of the
              Introduction panel; the options panel over the page dimmed; the caption under each picture, from its left edge ---------- */
.content--intro { position: relative; }
.page-full { top: 6px; right: 6px; }
.zoom__stage { display: flex; flex-direction: column; align-items: flex-start; }
.zoom.has-caption .zoom__img { max-height: calc(100vh - 96px - 132px); }
.zoom.is-page .zoom__img { max-width: none; max-height: none; }   /* sized by the script to fill the screen */
.zoom__caption { width: 0; min-width: 100%; margin-top: 12px; min-height: 120px; color: var(--body-text); letter-spacing: var(--body-tracking); }
.zoom__caption[hidden] { display: none; }
.zoom__title { display: inline-block; font-weight: bold; font-size: var(--label-size); line-height: var(--body-leading); color: var(--heading-text); }
.zoom__names { font-weight: normal; }
.zoom__names .tile__common { font-weight: bold; color: var(--heading-text); }
a.zoom__title:hover, a.zoom__title:focus-visible { color: var(--link-hover); outline: none; }
a.zoom__title:hover .tile__common, a.zoom__title:hover .tile__latin { color: var(--link-hover); }
.zoom__text { margin: 6px 0 0; max-width: max(50%, 320px); }
.zoom__text .item__more a { color: var(--link); }
.zoom__text .item__more a:hover { color: var(--link-hover); }
@media (max-width: 600px) { .zoom__text { max-width: none; } .zoom__caption { padding: 0 8px; } }
.fsmenu { position: fixed; inset: 0; z-index: 999; background: rgba(0, 0, 0, .6); display: flex; align-items: center; justify-content: center; padding: 16px; }
.fsmenu[hidden] { display: none; }
.fsmenu__panel { position: relative; width: 380px; max-width: 100%; background: var(--panel-colour); border-radius: var(--panel-corner); padding: 0 var(--inset) var(--content-item-gap); }
.fsmenu__panel > .panel__title { line-height: var(--title-band); margin: 0 calc(-1 * var(--inset)); text-align: center; font-size: var(--label-size); color: var(--title-text); }
.fsmenu__close { top: 7px; right: 7px; }
.fsmenu__body { gap: 18px; }
.fsmenu__body .settings__note { margin: 8px 0 0; font-size: 15px; line-height: 19px; color: var(--body-text); }
.fsmenu__start { width: 100%; margin-top: 4px; }
.is-faint { opacity: .4; }
body.is-asking { overflow: hidden; }
/* ---------- NAT26 (his item 3, 4 Nov 2026, 07:55): View All — the contact sheet in a page's full screen ---------- */
.zoom__sheet, .zoom__back { display: none; }
.zoom.is-sheet .zoom__stage, .zoom.is-sheet .zoom__arrow, .zoom.is-sheet .zoom__count { display: none; }
.zoom.is-sheet .zoom__sheet {
  display: grid; position: absolute; inset: 0; z-index: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  grid-template-columns: repeat(var(--per-row, 3), minmax(0, 1fr)); gap: 12px 10px; align-content: start; padding: 48px 16px 24px;
}
.zoom__cell { margin: 0; min-width: 0; }
.zoom__pic { display: block; cursor: zoom-in; border-radius: 2px; outline: none; }
.zoom__pic img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; user-select: none; -webkit-user-select: none; }
.zoom__pic:hover img, .zoom__pic:focus-visible img { outline: 2px solid var(--gold); outline-offset: -2px; }
.zoom__sheet-cap { margin: 6px 0 0; font-size: 15px; line-height: 19px; color: var(--body-text); letter-spacing: var(--body-tracking); overflow-wrap: anywhere; }
.zoom:not(.has-caption) .zoom__sheet-cap { display: none; }
.zoom__sheet-name { font-weight: bold; color: var(--heading-text); }
.zoom__sheet-name.zoom__names { font-weight: normal; }
a.zoom__sheet-name:hover, a.zoom__sheet-name:focus-visible, a.zoom__sheet-name:hover .tile__common, a.zoom__sheet-name:hover .tile__latin { color: var(--link-hover); outline: none; }
.zoom.from-sheet .zoom__back {
  display: flex; align-items: center; position: absolute; top: 12px; left: 12px; z-index: 2; height: 22px; padding: 0 8px;
  border-radius: var(--button-corner); background: rgba(12,12,12,.82); border: 1px solid var(--button-border); color: var(--gold);
  font: 14px/20px var(--font); letter-spacing: 0; cursor: pointer; user-select: none; -webkit-user-select: none;
}
.zoom__back:hover, .zoom__back:focus-visible { background: var(--button-fill-selected); border-color: var(--gold); outline: none; }
.settings .settings__count .gold-button { min-width: 48px; width: 48px; padding: 0; font-size: 24px; }
.settings__count { align-items: center; }
.fsmenu__panel { max-height: 100%; overflow-y: auto; }

.site-map { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--content-item-gap); align-items: start; }
/* NAT20 (his word, 1 Nov 2026, 14:06): Species Tutorials and its kingdoms in the left column, the main sections in the right; a column
   grows downward when something in it opens, the other never moves.  The kingdoms fold only on a phone (below). */
.site-map__col--tutorials { grid-column: 1; grid-row: 1; }
.site-map__col--main { grid-column: 2; grid-row: 1; }
@media (min-width: 660px) {
  .site-map__fold--kingdom { display: none; }
  .site-map ul.site-map__kingdom-list[hidden] { display: block; }
}
.site-map h2 { break-after: avoid; margin-top: var(--body-leading); }
.site-map h2:first-child { margin-top: 0; }
.site-map ul { list-style: none; padding: 0; }
/* NAT19 (his word, 1 Nov 2026): the Site Map folds.  The white headings are links in their own white; the solid arrow (his picture)
   sits in an 18-px gutter at the left of a heading or a page with pages beneath it, pointing right when closed and down when open;
   every name lines up whether it has an arrow or not, and the pages beneath one sit 18 px further in. */
:root { --map-gutter: 18px; }
.site-map h2, .site-map li { position: relative; padding-left: var(--map-gutter); }
.site-map ul ul { margin: 0; padding: 0 0 0 var(--map-gutter); }
.site-map li > ul { padding-left: 0; }
.site-map li li { padding-left: var(--map-gutter); }
.site-map ul[hidden] { display: none; }
.site-map h2 a { color: inherit; text-decoration: none; }
.site-map h2 a:hover, .site-map h2 a:focus-visible { color: var(--link-hover); }
.site-map__fold {
  -webkit-appearance: none; appearance: none; position: absolute; left: 0; top: 0; width: var(--map-gutter); height: var(--body-leading);
  padding: 0; margin: 0; border: 0; background: none; cursor: pointer; color: var(--title-text);
}
.site-map__fold::before {              /* the solid arrow: a small triangle, drawn (the same in every browser) */
  content: ''; position: absolute; left: 3px; top: 50%; margin-top: -4.5px;
  border-style: solid; border-width: 4.5px 0 4.5px 7px; border-color: transparent transparent transparent currentColor;
  transition: transform .15s ease; transform-origin: 3.5px 4.5px;
}
.site-map__fold[aria-expanded="true"]::before { transform: rotate(90deg); }
.site-map__fold:hover, .site-map__fold:focus-visible { color: var(--gold); outline: none; }
@media (prefers-reduced-motion: reduce) { .site-map__fold::before { transition: none; } }
.search-field {                        /* the Search box: a gold-bordered field */
  -webkit-appearance: none; appearance: none;
  width: 100%; height: var(--nav-button-h); padding: 0 10px; border: 1px solid var(--button-border); border-radius: var(--button-corner);
  background: none; color: var(--title-text); font: var(--label-size) var(--font);
}
.search-field::placeholder { color: var(--title-text); }
.search-field:focus { outline: none; border-color: var(--gold); }
.search-results { display: grid; gap: var(--body-leading); }                   /* the results (NAT11, E7): the page's name as a link, then a line of its words */
.search-result__title { display: block; font-size: var(--label-size); line-height: var(--body-leading); font-weight: bold; color: var(--heading-text); }
.search-result__title:hover, .search-result__title:focus-visible { color: var(--link-hover); }
.content .search-result__text { margin: 2px 0 0; }
.search-result mark { background: rgba(204, 153, 0, .32); color: rgba(255, 255, 255, .9); border-radius: 2px; padding: 0 2px; }   /* the word found */
.item__more { white-space: nowrap; }                                           /* "[…] More" — the continuation link, kept on one line (NAT12, F5) */
.item__more-link { color: var(--link); }                                        /* NAT21: More in a row that is itself the link — drawn as a link, */
a.item:hover .item__more-link, a.item:focus-visible .item__more-link { color: var(--link-hover); }   /* blue with the row under the pointer */
body.is-editing a.item:hover .item__more-link { color: var(--link); }
.search-result--species .item__heading { margin-bottom: 0; }                   /* a species found (F5), laid out like a list row: the common name, the scientific name under it, then the start of its account */
.content .search-result__latin { margin: 0 0 8px; }
.search-result--article .item__heading { margin-bottom: 2px; }                 /* an article found: its title, then the sentence holding the word */

/* ---------- Layout of a page ---------- */
.stage { width: var(--content-width); margin: var(--content-top) auto 40px; }
.page { display: none; }
.page.is-current { display: block; }
.home-grid { display: grid; grid-template-columns: repeat(3, var(--panel-w)); gap: var(--gap); }
.home-grid .panel--desktop { grid-column: span 2; }
.columns { display: grid; grid-template-columns: var(--panel-w) var(--desktop-panel-w); gap: var(--gap); align-items: start; }
.side { display: grid; gap: var(--gap); }

/* ---------- 3. The menu panel (opens from the Menu button; 295×345, 15 below the button, to the mock-up) ---------- */
.menu {
  position: absolute; top: calc(var(--menu-edge) + var(--menu-button-h) + var(--menu-panel-gap)); right: var(--menu-edge); z-index: 30;
  width: var(--panel-w); min-height: var(--menu-panel-h); padding: var(--inset) var(--inset) var(--menu-icons-below);
}
.menu[hidden] { display: none; }
.menu__search { display: flex; gap: var(--inset); align-items: center; }
.menu__search .search-field { width: var(--menu-search-w); height: var(--menu-search-h); flex: none; }
.menu__close { width: var(--menu-close-w); height: var(--menu-search-h); flex: none; }
.menu .panel__buttons { padding: var(--menu-search-gap) 0 0; }
.menu .panel__buttons .gold-button { height: var(--menu-button-row-h); }
.menu__social { display: flex; gap: var(--menu-icon-gap); margin-top: var(--menu-icons-above); }
.menu__social a { display: block; width: var(--menu-icon-size); height: var(--menu-icon-size); border-radius: 3px; }
.menu__social img { width: var(--menu-icon-size); height: var(--menu-icon-size); }
.menu__social a:hover, .menu__social a:focus-visible { outline: 1px solid var(--link-hover); }

/* =====================================================================
   NARROW SCREENS — tablet: the panels wrap; phone: one column, to the phone mock-up
   ===================================================================== */
@media (max-width: 999px) {
  .stage { width: auto; margin: var(--content-top) 20px 40px; }
  .home-grid { grid-template-columns: repeat(auto-fill, var(--panel-w)); justify-content: center; }
  /* A sub-page on a tablet or a phone (NAT11, E5): one column, each panel centred — the group panel, then the content panels,
     then Home / Search / Site Map / Go Back, then the Edit Mode panel while he is editing.  The home page keeps its grid. */
  .columns { display: flex; flex-direction: column; align-items: center; gap: var(--gap); }
  .columns > .side { display: contents; }
  .columns > .main, .columns > .content { order: 2; }
  .panel--nav { order: 3; }
  .panel--edit { order: 4; }
  .page--navtop .panel--nav { order: 1; }                                   /* NAT16: the Site Map's four buttons on top */
}
@media (min-width: 660px) and (max-width: 999px) {   /* the tablet alone (E5): a tablet held upright, or a window narrower than about 1,000 pixels */
  :root { --tablet-button-w: 136px; --tablet-button-h: 52px; --tablet-button-gap: 20px; }
  .page--sub .side .panel--group {                   /* the group panel as wide as the content panels: its photograph at the left, its four buttons two by two at the right */
    width: var(--desktop-panel-w); height: auto;
    display: grid; grid-template-columns: var(--photo-w) 1fr; grid-template-areas: "title title" "photo buttons";
    padding: 0 var(--inset) var(--inset);
  }
  .page--sub .side .panel--group .panel__title { grid-area: title; }
  .page--sub .side .panel--group .panel__photo-link { grid-area: photo; margin: 0; }
  .page--sub .side .panel--group .panel__buttons {   /* NAT19 (his example image, 1 Nov 2026): 136 × 52, 20 apart, 20 from the photograph and
                                                        20 from the panel's edge, centred top to bottom on the photograph — every group panel */
    grid-area: buttons; padding: 0; justify-self: end; align-self: center; margin-right: 3px;
    grid-template-columns: repeat(2, var(--tablet-button-w)); grid-auto-rows: var(--tablet-button-h); gap: var(--tablet-button-gap);
  }
  .page--sub .side .panel--group .panel__buttons .gold-button { width: var(--tablet-button-w); height: var(--tablet-button-h); }
  .page--sub .panel--nav { width: var(--desktop-panel-w); height: auto; }     /* Home · Search · Site Map · Go Back in one row, as wide as the content panels */
  .page--sub .panel--nav .panel__buttons { grid-template-columns: repeat(4, 1fr); padding: var(--inset); }
  .page--sub .panel--nav .gold-button { width: auto; }
  .page--sub .panel--edit { width: var(--desktop-panel-w); }                  /* the Edit Mode panel under them, as wide */
  .page--sub .panel--edit .panel__buttons { grid-template-columns: 1fr 1fr; }
  .page--sub .panel--edit .gold-button { width: auto; }
}
@media (max-width: 659px) {
  :root { --header-h: 60px; --logo-w: 218px; }
  .site-header { background: var(--panel-colour); }
  .logo { left: 6px; }
  .menu-button {                                                          /* on a phone, the bars alone: no word, no box */
    top: 8px; right: 8px; width: 44px; height: 44px; padding: 0; border: 0; background: none; justify-content: center;
  }
  .menu-button__word { display: none; }
  .menu-button:hover, .menu-button[aria-expanded="true"] { background: none; }
  .menu { top: calc(var(--header-h) + var(--phone-gutter)); left: var(--phone-gutter); right: var(--phone-gutter); width: auto; min-height: 0; }
  .menu__search .search-field { width: auto; flex: 1; }
  .stage { margin: calc(var(--header-h) + var(--phone-gutter)) var(--phone-gutter) 24px; }
  .home-grid, .columns, .side, .main { grid-template-columns: 1fr; justify-items: stretch; width: 100%; }
  .home-grid .panel--desktop { grid-column: auto; }
  .panel, .panel--desktop, .content, .side, .slider { width: 100%; height: auto; min-height: 0; }
  .menu { width: auto; }                                                  /* the open menu keeps inside the phone's margins — the rule above had been overriding it (NAT10) */
  .panel__photo-link { width: auto; }
  .panel__buttons { grid-template-columns: 1fr 1fr; }
  .gold-button { width: auto; }
  .panel--desktop { grid-template-columns: 1fr; grid-template-rows: none; row-gap: var(--button-gap); padding: var(--inset); }
  .slider { aspect-ratio: 434 / 260; }
  .store-buttons { grid-template-rows: none; grid-template-columns: 1fr 1fr; gap: var(--button-gap); }
  .panel--desktop .caption { margin: 0; }
  .page--sub .side .panel--group .panel__photo-link { display: none; }  /* the phone mock-up drops the photo on a sub-page */
  .page--sub .side .panel--group .panel__buttons { padding-top: var(--inset); }
  /* the order of the panels — the nav last, the Edit Mode panel under it — is set for a tablet and a phone alike, above (E5) */
  .item { grid-template-columns: 1fr; row-gap: 8px; }
  .item__photo { width: 100%; height: auto; aspect-ratio: 261 / 160; }
  .tiles { grid-template-columns: 1fr; }
  .tile__photo { width: 100%; height: auto; aspect-ratio: 261 / 160; }
  .site-map { grid-template-columns: 1fr; }                                         /* NAT20: on a phone the main sections first, then Species Tutorials */
  .site-map__col--main { grid-column: 1; grid-row: 1; }
  .site-map__col--tutorials { grid-column: 1; grid-row: 2; margin-top: var(--body-leading); }
  .page--navtop .panel--nav, .page--navtop .panel--edit { width: 100%; }               /* NAT16: on a phone the Site Map's buttons on top, two by two, as on every page */
  .page--navtop .panel--nav .panel__buttons { grid-template-columns: 1fr 1fr; padding: var(--inset); }
}
@media (prefers-reduced-motion: reduce) { .slider__slide { transition: none; } }

/* =====================================================================
   6. THE EDITOR (index.html#editor) — built from the site's own panels, buttons, type and colours
   ===================================================================== */
.save-bar {                            /* the save bar: shown wherever you are, the moment anything is unsaved (NAT8) */
  position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 40; width: max-content; max-width: calc(100% - 24px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px;
  padding: 8px 14px; border: 1px solid var(--button-border); border-radius: var(--button-corner);
  background: var(--panel-colour); color: var(--title-text); font-size: 15px; line-height: 20px; text-align: center;
}
.save-bar[hidden] { display: none; }
.save-bar--saved { border-color: var(--gold); }
.save-bar .gold-button { width: auto; height: 32px; padding: 0 18px; border-color: var(--gold); }
.save-bar .gold-button[hidden] { display: none; }
.save-bar__hide { color: var(--body-text); }
body.has-save-bar .stage { margin-bottom: 80px; }   /* room under the last field for the bar */
.page--editor .panel { height: auto; }
.ed-side { padding-bottom: var(--inset); }
.ed-status { margin: 0 var(--inset) 14px; font-size: 15px; line-height: 20px; text-align: center; color: var(--title-text); }
.ed-status--unsaved { color: var(--gold); }
.ed-side .panel__buttons { padding-top: 0; }
.ed-side__more { margin-top: -4px; font-size: 14px; }
.ed-side__more a { color: var(--link); }
.ed-pages { padding: 0 var(--inset); }
.ed-pages summary { cursor: pointer; color: var(--title-text); font-size: var(--label-size); margin: 4px 0 6px; }
.ed-pages h3 { margin: 14px 0 4px; font-size: 14px; line-height: 18px; font-weight: bold; color: var(--title-text); }
.ed-pages button {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; border-radius: var(--button-corner); padding: 2px 6px;
  font: 16px/21px var(--font); color: var(--link);
}
.ed-pages button:hover, .ed-pages button:focus-visible { color: var(--link-hover); outline: none; }
.ed-pages button.is-current { background: var(--button-fill-selected); color: var(--title-text); }
.ed-panel { --ed-gap: 14px; padding-top: 0; gap: var(--ed-gap); }
.ed-panel > .panel__title { margin: 0 calc(-1 * var(--inset)) calc(-1 * var(--ed-gap)); }   /* the editor's panel titles centred in their band too (F4): the first field starts at the band's bottom */
.ed-panel > .ed-lead { margin-top: -4px; }
.ed-field { display: grid; gap: 4px; }
.ed-label { font-size: 15px; line-height: 20px; color: var(--title-text); }
.ed-input {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; max-width: 100%;
  border: 1px solid var(--button-border); border-radius: var(--button-corner); background: rgba(0, 0, 0, .35);
  color: rgba(255, 255, 255, .88); font: 16px/21px var(--font); padding: 6px 8px; margin: 0;
}
textarea.ed-input { resize: vertical; min-height: 36px; }
select.ed-input { height: 36px; padding-right: 26px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: calc(100% - 15px) 15px, calc(100% - 10px) 15px; background-size: 5px 5px; background-repeat: no-repeat; }
select.ed-input option, select.ed-input optgroup { color: #000; background: #fff; }
.ed-input:focus { outline: none; border-color: var(--gold); }
.ed-tick { display: flex; gap: 8px; align-items: center; font-size: 15px; line-height: 20px; color: var(--title-text); cursor: pointer; }
.ed-tick input { width: 18px; height: 18px; margin: 0; accent-color: #CC9900; flex: none; }
.ed-card { display: grid; gap: 10px; padding: 12px; border: 1px solid rgba(204, 153, 0, .35); border-radius: 6px; }
.ed-card__head { font-size: 15px; line-height: 20px; font-weight: bold; color: var(--heading-text); }
.ed-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.ed-small {
  -webkit-appearance: none; appearance: none; height: 32px; padding: 0 12px; cursor: pointer;
  border: 1px solid var(--button-border); border-radius: var(--button-corner); background: none;
  font: 15px/30px var(--font); color: var(--title-text); white-space: nowrap;
}
.ed-small:hover, .ed-small:focus-visible { background: var(--button-fill-selected); outline: none; }
.ed-small:disabled { opacity: .35; cursor: default; background: none; }
.ed-small--strong { border-color: var(--gold); color: rgba(255, 255, 255, .9); }
.ed-photo { display: grid; grid-template-columns: 170px 1fr; gap: 12px; align-items: start; }
.ed-photo__img { width: 170px; height: auto; aspect-ratio: 261 / 160; object-fit: cover; border-radius: 3px; background: #111; }
.ed-photo__img--tall { aspect-ratio: 16 / 9; }
.ed-photo__none { width: 170px; aspect-ratio: 261 / 160; display: flex; align-items: center; justify-content: center; text-align: center;
  border: 1px dashed var(--placeholder-tag); border-radius: var(--button-corner); color: var(--placeholder-tag); font-size: 13px; line-height: 17px; padding: 6px; }
.ed-photo__side { display: grid; gap: 8px; align-content: start; }
.ed-note { font-size: 14px; line-height: 19px; color: var(--body-text); letter-spacing: 0; }
.ed-note--gold { color: var(--gold); }
.ed-choices { display: grid; gap: 8px; }
.ed-choice { display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: start; cursor: pointer; }
.ed-choice input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: #CC9900; }
.ed-choice b { display: block; color: var(--heading-text); font-size: 16px; line-height: 20px; }
.ed-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
@media (max-width: 659px) {
  .ed-photo { grid-template-columns: 1fr; }
  .ed-photo__img, .ed-photo__none { width: 100%; }
}
.page--editor [hidden] { display: none !important; }   /* a hidden field stays hidden whatever its layout */
.page--editor .content p + p { margin-top: 0; }   /* the editor spaces its notes by the panel gap only */

/* ---------- 7. EDIT MODE (NAT9) — the panel under Home / Search / Site Map / Go Back, and editing on the page itself.
              Nothing here applies to a visitor: the panel and the marks are drawn only while he is editing. ---------- */
.panel--edit { height: auto; padding-bottom: 12px; }
.panel--edit .panel__title { position: relative; }
.panel--edit__word {                   /* the quiet words at either end of the title band (E3): Done at the left leaves editing; Undo at the right steps back one change */
  position: absolute; top: 0; font-size: 15px; font-weight: normal; color: var(--title-text); line-height: var(--title-band);
}
.panel--edit__done { left: var(--inset); }
.panel--edit__undo { right: var(--inset); }
.panel--edit__word:hover, .panel--edit__word:focus-visible { color: var(--link-hover); }
.panel--edit__undo.is-dim { opacity: .35; cursor: default; }                  /* nothing to undo */
.panel--edit__undo.is-dim:hover { color: var(--title-text); }
.panel--edit__status { margin: 0 var(--inset) 2px; font-size: 15px; line-height: 20px; text-align: center; color: var(--title-text); overflow-wrap: anywhere; }
.panel--edit__status:empty { display: none; }
.panel--edit .panel__buttons { padding: 10px var(--inset) 12px; }
.panel--edit .gold-button { font-size: var(--label-size); }
.gold-button--dim { opacity: .35; cursor: default; }                         /* + Add New: its place kept; its work comes with the next build */
.gold-button--dim:hover { background: none; }
.panel--edit__drop { cursor: copy; }
.panel--edit__drop.is-drop-target { outline: 2px solid var(--gold); outline-offset: 2px; background: var(--button-fill-selected); }
.panel--edit__own, .panel--edit__help { margin: 0 var(--inset) 4px; font-size: 14px; line-height: 18px; text-align: center; color: var(--body-text); letter-spacing: 0; }
.panel--edit__own { margin-top: -6px; margin-bottom: 10px; }
.panel--edit__own a, .panel--edit__help a { color: var(--link); }
.panel--edit__own a:hover, .panel--edit__help a:hover { color: var(--link-hover); }

/* the quiet marks: a faint dashed line round every text and every photograph window that can be changed; solid gold under the pointer */
body.is-editing [data-ed] { outline: 1px dashed rgba(204, 153, 0, .28); outline-offset: 3px; border-radius: 2px; cursor: text; }
body.is-editing [data-ed]:hover { outline: 1px solid var(--gold); }
body.is-editing [data-ed-photo] { outline: 1px dashed rgba(204, 153, 0, .35); outline-offset: -4px; cursor: copy; }
body.is-editing [data-ed-photo]:hover, body.is-editing [data-ed-photo].is-drop-target { outline: 2px solid var(--gold); outline-offset: -4px; }
body.is-editing a.item, body.is-editing a.tile { cursor: default; }
body.is-editing a.item:hover .item__heading, body.is-editing a.tile:hover .tile__common { color: var(--heading-text); }   /* a row's words are a field, not a link, while editing */
body.is-editing .ribbon { pointer-events: none; }
.gold-button[data-ed-button] { position: relative; }
.ed-pencil {                           /* on every button: a small gold pencil at its top-right corner opens the button for editing */
  position: absolute; top: -8px; right: -8px; width: 18px; height: 18px; border-radius: 50%; z-index: 2;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: var(--panel-colour); border: 1px solid var(--button-border);
}
.ed-pencil svg { width: 10px; height: 10px; display: block; }
.ed-pencil:hover { background: var(--button-fill-selected); border-color: var(--gold); }
.ed-open {                             /* a row's or a species card's “Open ›”: the way to the next page down while its words are fields */
  float: right; margin: 0 0 0 10px; font-size: 14px; line-height: 21px; color: var(--link); cursor: pointer; letter-spacing: 0; white-space: nowrap;
}
.ed-open:hover { color: var(--link-hover); }
.tile__caption .ed-open { float: none; margin-left: 8px; }

/* the field in place: the same words, type, size and width, with a gold line round them; it grows as he types */
.ed-inplace {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; max-width: 100%; margin: 0; padding: 0; border: 0;
  background: transparent; resize: none; overflow: hidden; outline: 1px solid var(--gold); outline-offset: 3px; border-radius: 2px;
  font: inherit; color: inherit; letter-spacing: inherit; text-align: inherit; white-space: pre-wrap;
}
.ed-inplace--inline { display: inline-block; vertical-align: top; width: auto; }
.ed-inplace-extra { margin: 8px 0 0; display: grid; gap: 6px; }
.ed-inplace-tick { display: flex; gap: 8px; align-items: center; font-size: 14px; line-height: 18px; color: var(--title-text); letter-spacing: 0; cursor: pointer; }
.ed-inplace-tick input { width: 16px; height: 16px; margin: 0; accent-color: #CC9900; flex: none; }
textarea.ed-inplace-note { font-size: 15px; line-height: 20px; }
.ed-inplace-extra [hidden] { display: none !important; }   /* the note stays hidden until the tick is on, whatever its layout (the NAT6 rule) */
.ed-inplace::placeholder { color: var(--title-text); opacity: .7; font-style: normal; }
.ed-card--button, .ed-card--ask {      /* the small card under a button (what it opens), and the question over the side panel's picture */
  position: absolute; left: var(--inset); right: var(--inset); z-index: 6;
  background: rgba(12, 12, 12, .96); border-color: var(--button-border); box-shadow: 0 8px 24px rgba(0, 0, 0, .6);
}
.ed-card--ask { top: var(--title-band); }
.ed-card--ask .gold-button { width: 100%; height: 40px; }
.ed-card--ask a.ed-note { color: var(--link); text-align: center; }
.ed-card--button .ed-field { gap: 4px; }

/* ---------- NAT29: a society on its type's page, in his form — each line under the last, a gap before the next society ---------- */
.content .society p + p { margin-top: 0; }
.society__name { font-weight: bold; }
.society__web a, .society__social a { overflow-wrap: anywhere; }
body.is-editing .society { position: relative; padding-left: 58px; min-height: 22px; }   /* room for its handle and × at its left, as a topic's */
body.is-editing .society .ed-grip, body.is-editing .society .ed-del { top: 0; }
body.is-editing .society [data-ed-hint]:empty::before { content: attr(data-ed-hint); color: var(--placeholder-tag); opacity: .7; font-style: italic; }
/* ---------- NAT30: region headings and the list of regions (item 4); an event and the By date · By region switch (item 3) ---------- */
.content .region-heading { margin: 6px 0 -10px; padding-top: 12px; border-top: 1px solid var(--button-border); }
.content > .region-heading:first-child { margin-top: 0; padding-top: 0; border-top: 0; }   /* the first under the panel's own top edge */
.region-group { display: flex; flex-direction: column; gap: var(--content-item-gap); }
.content--titled .regions { margin-top: var(--body-leading); line-height: 26px; }
.regions a { white-space: nowrap; }
.content--titled .events__switch { margin-top: var(--body-leading); }
.event__held { display: inline-block; margin-left: 10px; padding: 0 7px; border: 1px solid var(--button-border); border-radius: var(--button-corner); font-size: 15px; line-height: 19px; color: var(--title-text); }
body.is-editing .event { padding-left: 32px; }               /* an event has its × alone, no handle */
.event__order { opacity: .75; }
.event .society__line a, .event .society__line span { overflow-wrap: anywhere; }   /* a long address or word wraps on a phone, as a society's website does */

/* ---------- NAT10: grab handles, slideshow thumbnails, + Add New.  Drawn only while he is editing. ---------- */
.ed-grip {                             /* a small handle in the corner of a row, a species card and a topic: drag it to put the item in order */
  position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; z-index: 3; border-radius: var(--button-corner);
  background: rgba(12,12,12,.82); border: 1px solid var(--button-border); color: var(--gold);
  display: flex; align-items: center; justify-content: center; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
}
.ed-grip svg { width: 10px; height: 14px; display: block; }
.ed-grip:hover { background: var(--button-fill-selected); border-color: var(--gold); }
body.is-sorting, body.is-sorting .ed-grip, body.is-sorting .ed-thumb { cursor: grabbing; }
body.is-editing .item, body.is-editing .tile { position: relative; }
body.is-editing .species__topics p { position: relative; padding-left: 58px; }   /* room for the topic's handle and its × at its left */
body.is-editing .species__topics p .ed-grip, body.is-editing .species__topics p .ed-del { top: 0; }
.ed-del {                              /* × beside the handle (NAT11, E1): deletes the row, the species card or the topic — in the handle's own box, as he asked */
  position: absolute; top: 4px; left: 30px; width: 22px; height: 22px; z-index: 3; border-radius: var(--button-corner);
  background: rgba(12,12,12,.82); border: 1px solid var(--button-border); color: var(--gold);
  display: flex; align-items: center; justify-content: center; cursor: pointer; user-select: none; -webkit-user-select: none;
  font: 18px/20px var(--font); letter-spacing: 0;
}
.ed-del--alone { left: 4px; }          /* a row or a card that stands alone has no handle: the × takes its corner */
.ed-del:hover { background: var(--button-fill-selected); border-color: var(--gold); }
.ed-card--delete { top: 30px; left: 4px; right: 4px; }   /* the question, over the item itself */
.is-dragging { opacity: .5; outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 2px; }
body.is-sorting { user-select: none; -webkit-user-select: none; }
.ed-strip {                            /* a slideshow window while editing: its photographs as small thumbnails along the bottom, to reorder or remove */
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px;
  background: rgba(12,12,12,.72); cursor: default;
}
.ed-thumb { position: relative; width: 44px; height: 27px; border: 1px solid var(--button-border); border-radius: 2px; cursor: grab; touch-action: none; flex: none; }
.ed-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 2px; }
.ed-thumb.is-current { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.ed-thumb__x {                         /* removes that photograph from the window */
  position: absolute; top: -7px; right: -7px; width: 15px; height: 15px; border-radius: 50%; z-index: 2;
  background: var(--panel-colour); border: 1px solid var(--button-border); color: var(--gold); font: 12px/13px var(--font); text-align: center; cursor: pointer; letter-spacing: 0;
}
.ed-thumb__x:hover { background: var(--button-fill-selected); border-color: var(--gold); }
.ed-strip__add {                       /* drop more photographs here, or click to choose them */
  width: 44px; height: 27px; border: 1px dashed var(--gold); border-radius: 2px; color: var(--gold); font: 20px/25px var(--font); text-align: center; cursor: copy; flex: none; letter-spacing: 0;
}
.ed-strip__add:hover { background: var(--button-fill-selected); }
body.is-editing .show .show__arrow { opacity: 1; }                        /* while editing the arrows show always, so he can check each photograph */
.panel--edit button[data-ed-addnew] { cursor: pointer; }
.ed-inplace--name::placeholder { font-style: italic; }

/* =====================================================================
   NAT22 (his words, 2 Nov 2026, 09:22 and 10:08): the Settings page.  Each visitor's choices, set on the page (html) by the script;
   with every choice at its standard nothing below applies, and the site is v0.18's.
   ===================================================================== */
:root {
  --list-w: 877px;     /* a Common Species panel three across: 17 + 261 + 30 + 261 + 30 + 261 + 17 */
  --phone-min: 240px;  /* the narrowest a phone's page area may be at a size step, before enlarging */
  --z: 1;              /* the size step */
}
/* The size: everything inside the page area enlarged together — words, buttons, photographs and spacing.  The site's title and the
   Menu button are outside it, and never change.  The page area keeps its place under the header and its side margins. */
html[data-size="larger"]  { --z: 1.333333; }
html[data-size="largest"] { --z: 1.6; }
html[data-size] .stage { zoom: var(--z); margin-top: calc(var(--content-top) / var(--z)); }
@media (max-width: 999px) {
  html[data-size] .stage { margin-left: calc(20px / var(--z)); margin-right: calc(20px / var(--z)); }
}
@media (max-width: 659px) {
  html[data-size] .stage { margin: calc((var(--header-h) + var(--phone-gutter)) / var(--z)) calc(var(--phone-gutter) / var(--z)) 24px; }
}
/* Three across: on a page with a Common Species panel, where the screen has room (the script decides, at the chosen size) — every
   content panel of the page as wide as three cards, the Introduction row's text filling the width beside its photograph. */
@media (min-width: 1000px) {
  html.three-across .stage { width: calc(var(--panel-w) + var(--gap) + var(--list-w)); }
  html.three-across .columns { grid-template-columns: var(--panel-w) var(--list-w); }
  html.three-across .page--sub .main, html.three-across .page--sub .content { width: var(--list-w); }
  html.three-across .tiles { grid-template-columns: repeat(3, var(--photo-w)); }
}
/* NAT24 (his items 3 and 4): more than three cards across where the visitor chose Fit the window (the script sets --cards and --list-w);
   a kingdom's groups two across — two rows side by side, each as wide as a row is today — where the window has room */
:root { --types-w: 1220px; }   /* 17 + 576 + 34 + 576 + 17 */
@media (min-width: 1000px) {
  html.three-across .tiles { grid-template-columns: repeat(var(--cards, 3), var(--photo-w)); }
  html.two-types .stage { width: calc(var(--panel-w) + var(--gap) + var(--types-w)); }
  html.two-types .columns { grid-template-columns: var(--panel-w) var(--types-w); }
  html.two-types .page--sub .main, html.two-types .page--sub .content { width: var(--types-w); }
  html.three-across .page--sub .content--intro { width: calc(var(--inset) + 2 * var(--photo-w) + 1.5 * var(--tile-gap)); }   /* NAT26 (N1, his words 21:58): three or more across, the Introduction ends in the middle of the gap between the second and third cards — 17 + 2 × 261 + 30 + 15 = 584 */
  html.two-types .page--sub .content--intro { width: var(--desktop-panel-w); }   /* NAT26 (N2): a kingdom two across, the Introduction ends at the middle of the two columns — 17 + 576 + 17 = 610 */
  html.two-types .content--types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(2 * var(--inset)); row-gap: var(--content-item-gap); align-items: start; }
}
/* Brighter text (A): the words whiter, the links underlined */
html[data-text="brighter"] {
  --body-text: rgba(255, 255, 255, .86); --title-text: rgba(236, 237, 238, .9); --heading-text: rgba(255, 255, 255, .95); --link: rgba(224, 170, 20, .95);
}
html[data-text="brighter"] .content p a, html[data-text="brighter"] .item__more-link { text-decoration: underline; text-underline-offset: 2px; }
/* A quieter background (B): the photograph dimmed, or none — a plain dark grey */
html[data-background="dimmed"] .background { filter: brightness(.4); }
html[data-background="plain"] .background { background-image: none !important; background-color: #1d1d1d; }
/* The Settings page's controls: gold buttons, the chosen one lit; a size that needs a wider screen faint */
.settings { display: grid; gap: var(--content-item-gap); }
.settings__row .item__heading { margin-bottom: 10px; }
.settings__choices { display: flex; flex-wrap: wrap; gap: var(--button-gap); }
.settings .gold-button { width: auto; min-width: var(--button-w); padding: 0 16px; }
.settings .gold-button[aria-disabled="true"] { opacity: .35; cursor: not-allowed; background: none; }
.content .settings__note { margin-top: 8px; font-size: 15px; line-height: 19px; }
.settings__reset { margin-top: 4px; }
.settings__section { margin: 6px 0 0; padding-top: 18px; border-top: 1px solid var(--button-border); font-size: var(--label-size); color: var(--heading-text); }   /* NAT24: View Options */
.settings__seconds { align-items: center; }
.settings .settings__seconds .gold-button { min-width: 48px; width: 48px; padding: 0; font-size: 24px; }
.settings__value { min-width: 34px; text-align: center; font-size: var(--label-size); color: var(--heading-text); }
.settings__unit { color: var(--body-text); }

/* =====================================================================
   NAT41 (his sixteenth list, 10 Nov 2026, 19:53)
   ===================================================================== */
/* T3: the left-hand column held in view while the content beside it scrolls, where the page is two columns.  --side-top is set by
   the script only for a column taller than the window (its foot then holds at the window's foot). */
@media (min-width: 1000px) {
  .page--sub:not(.page--navtop) .columns > .side { position: -webkit-sticky; position: sticky; top: var(--side-top, 20px); align-self: start; }
}
/* T4: a species card's slideshow — the show's arrows and count on the card; a drawing whole on white */
.tile__show { display: block; }
.show__slide--whole { object-fit: contain; background: #fff; }
.tile__show .show__arrow { width: 24px; height: 34px; font-size: 22px; line-height: 34px; }
.tile__show .show__arrow--prev { left: 4px; } .tile__show .show__arrow--next { right: 4px; }
.tile__show .show__count { right: 4px; bottom: 4px; font-size: 12px; line-height: 16px; }
/* …and on View All's sheet, over the picture (16:9), the caption below untouched */
.zoom__cell { position: relative; }
.zoom__turns { position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 16 / 9; pointer-events: none; }
.zoom__turn {
  position: absolute; top: 50%; transform: translateY(-50%); width: 24px; height: 34px; z-index: 2; pointer-events: auto;
  background: rgba(12,12,12,.55); color: var(--gold); font: 22px/34px var(--font); text-align: center; letter-spacing: 0;
  border-radius: var(--button-corner); cursor: pointer; opacity: 0; transition: opacity .25s; user-select: none; -webkit-user-select: none;
}
.zoom__turn--prev { left: 4px; } .zoom__turn--next { right: 4px; }
.zoom__cell:hover .zoom__turn, .zoom__cell:focus-within .zoom__turn { opacity: 1; }
.zoom__turn:hover, .zoom__turn:focus-visible { background: var(--button-fill-selected); outline: none; }
.zoom__turn-count {
  position: absolute; right: 4px; bottom: 4px; padding: 0 6px; border-radius: var(--button-corner);
  background: rgba(12,12,12,.55); color: var(--title-text); font-size: 12px; line-height: 16px; letter-spacing: 0;
}
@media (hover: none) { .zoom__turn { opacity: .85; } }
.zoom__cell[data-turns] .zoom__pic { touch-action: pan-y pinch-zoom; }
/* T2: View / Hide, in the handle's box beside the handle and the × (the third box; the second when the card stands alone) */
.ed-hide {
  position: absolute; top: 4px; left: 56px; width: 22px; height: 22px; z-index: 3; border-radius: var(--button-corner);
  background: rgba(12,12,12,.82); border: 1px solid var(--button-border);
  display: flex; align-items: center; justify-content: center; cursor: pointer; user-select: none; -webkit-user-select: none;
}
.ed-hide--second { left: 30px; }
.ed-hide svg { width: 14px; height: 11px; display: block; }
.ed-hide:hover, .ed-hide:focus-visible { background: var(--button-fill-selected); border-color: var(--gold); outline: none; }
.tile.is-hidden .tile__photo, .tile.is-hidden .tile__caption { opacity: .38; }
.tile__hidden {
  position: absolute; top: 4px; right: 4px; z-index: 3; padding: 0 7px; border: 1px solid var(--button-border); border-radius: var(--button-corner);
  background: rgba(12,12,12,.82); color: var(--gold); font-size: 14px; line-height: 20px; letter-spacing: 0;
}
/* T1: a panel added with + Add Panel — its handle and × at its top left, as a row's */
.content--added { position: relative; }
/* T5: the cover page, laid out as his picture (measured at the site's scale: the panel 695 × 411, 20 in; the map's frame 354 × 371) */
.cover { position: fixed; inset: 0; z-index: 1000; background: rgba(144, 146, 149, .8); display: flex; padding: 16px; overflow: auto; }   /* his picture's veil: the page behind at a fifth of its light, over a light grey (measured) */
.cover[hidden] { display: none; }
body.is-covered { overflow: hidden; }
.cover__panel {
  margin: auto; outline: none; display: grid; grid-template-columns: 280px 354px; column-gap: 21px; width: 695px; height: 411px; padding: 20px;
  background: #101111; border-radius: var(--panel-corner);
}
.cover__side { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.cover__emblem { width: 151px; height: 136px; margin-top: 1px; flex: none; }
.cover__words { margin-top: 17px; font-size: 22px; line-height: 22px; letter-spacing: 0; color: #888A8D; text-align: center; }
.cover__buttons { margin-top: auto; display: flex; gap: var(--button-gap); }
.cover__buttons .gold-button { width: var(--button-w); height: var(--nav-button-h); }   /* the site's 122 × 40, on a phone too */
.cover__map { border: 1px solid #8C9496; border-radius: 7px; overflow: hidden; min-width: 0; }
.cover__map img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 739px) {   /* a phone: one column — the emblem, the words and the buttons, then the map */
  .cover { padding: 12px; }
  .cover__panel { grid-template-columns: minmax(0, 1fr); row-gap: 20px; width: 100%; max-width: 420px; height: auto; }
  .cover__words { font-size: 20px; line-height: 22px; }
  .cover__buttons { margin-top: 20px; }
  .cover__map { aspect-ratio: 354 / 371; }
}

/* NAT43 (his request 2, 11 Nov 2026): a card drawn from its species page's first picture before Save — a drawing whole on white */
.tile__photo--whole { object-fit: contain; background: #fff; }

/* NAT7 (going live, stage 1): the copyright line at the foot of every page — quiet, in the site's own type and colours */
.site-footer { margin: -16px auto 24px; padding: 0 16px; text-align: center; }
.site-footer p {
  display: inline-block; max-width: 925px; padding: 6px 14px; border-radius: var(--panel-corner);
  background: var(--panel-colour); color: var(--body-text); font-size: 13px; line-height: 17px; letter-spacing: 0;
}
.site-footer a { color: var(--link); }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--link-hover); }
body.is-editing .site-footer, body.has-save-bar .site-footer { margin-bottom: 84px; }