@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,200..600;1,6..72,200..500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,400;0,600;1,400;1,600&display=swap');

:root {
  --paper:  #fdfdfa;
  --ink:    #1c211d;
  --soft:   #5d675f;
  --verde:  #2f5d46;
  --sage:   #e6eae2;
  --rule:   #d3d8cf;
  --ember:  #a6452c;   /* the orange used for wildfire and invasive species */

  /* Width of the reading column. This one value controls how much empty
     space sits either side of the text on a wide screen. Raise it for a
     wider column, lower it for a narrower one. Below ~36rem lines get
     short; above ~46rem they get hard to track back to the next line. */
  --measure: 42rem;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
  font-size: 1.125rem;
  line-height: 1.65;
  font-weight: 380;
}

/* ---- the one visual idea: graphite illustrations sit directly on the paper,
   no frame, no card. multiply drops their white ground away. ---- */
figure { margin: 2.6rem 0; }
figure img {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
}
figcaption {
  max-width: var(--measure);
  margin: 0.75rem auto 0;
  padding: 0 1.25rem;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--soft);
}

.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 1.25rem; }

/* Images are allowed to run wider than the text, which fills the page
   and keeps the reading column at a comfortable length. */
figure:not(.hero) { max-width: 56rem; margin-left: auto; margin-right: auto; padding: 0 1.25rem; }

/* ---- masthead ---- */
.masthead {
  border-bottom: 1px solid var(--rule);
  padding: 0.7rem 0;
  margin-bottom: 0;
}
/* The masthead spans the window rather than the text column, so the logo
   sits at the far left and the menu at the far right. */
.masthead .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  max-width: none;
  padding: 0 2rem;
}
@media (max-width: 40rem) {
  .masthead .wrap { padding: 0 1.25rem; }
}
.masthead a { color: var(--ink); text-decoration: none; }
.sitename { font-size: 1rem; font-weight: 500; letter-spacing: 0.01em; }

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.15;
}
.brandtext { display: block; }
.tagline {
  display: block;
  font-size: 0.82rem;
  font-style: italic;
  color: var(--soft);
  margin-top: 0.1rem;
}

.brand img {
  height: 46px;
  width: auto;
  display: block;
  flex: none;
  /* the badge file has a white square behind the circle; multiply drops it
     into the page background the way the illustrations do */
  mix-blend-mode: multiply;
}
/* On a phone the full name plus two menu links will not fit on one line,
   so the badge carries the identity and the name steps aside. */
@media (max-width: 34rem) {
  .brand .brandtext { display: none; }
  .brand img { height: 40px; }
  .masthead .wrap { align-items: center; }
  .masthead nav { text-align: right; line-height: 1.5; }
  /* wrap between the links, never inside one */
  .masthead nav a { font-size: 0.82rem; display: inline-block; white-space: nowrap; }
  .masthead nav a + a { margin-left: 1rem; }
}
.masthead nav a { font-size: 0.95rem; color: var(--verde); }
.masthead nav a + a { margin-left: 2.2rem; }
/* the page you are on, marked rather than removed */
.masthead nav a.here {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
}
.masthead nav { text-align: right; }

/* ---- the menu bar, a row of its own under the photograph ---- */
.mainnav {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.navinner {
  max-width: 68rem;
  margin: 0 auto;
  padding: 0 1.25rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.mainnav a {
  display: block;
  /* set in the same italic as the welcome line beneath it: the menu reads as
     part of the page's voice rather than as a row of form fields */
  font-family: 'Bitter', Georgia, serif;
  font-style: italic;
  /* sized so all six items hold a single line on a desktop window */
  padding: 1rem 0.85rem;
  font-size: 1.08rem;
  line-height: 1.2;
  color: var(--verde);
  text-decoration: none;
}
/* no dividers: boxed cells in a row read as officialdom, and the spacing
   separates the items well enough on its own */
.mainnav a:hover, .mainnav a:focus-visible { background: var(--sage); }
.mainnav a.here {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
}
@media (max-width: 52rem) {
  /* a finger needs 44px; centring the label inside that height costs less
     vertical space than padding it out, and the tighter sides let six items
     wrap onto two rows instead of three */
  .mainnav a {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0.5rem;
    font-size: 0.95rem;
  }
  /* the row wraps on a narrow screen, and a divider on the first item of a
     new line looks like a mistake */
  .mainnav a + a { box-shadow: none; }
}

/* On the home page the bar straddles the bottom edge of the photograph
   rather than sitting below it, so it is inset and carries its own
   background instead of spanning the window. */
.heroband + .mainnav {
  position: relative;
  z-index: 2;
  margin-top: -2.2rem;
  margin-bottom: 1.2rem;
  background: none;
  border-bottom: none;
}
.heroband + .mainnav .navinner {
  max-width: 62rem;
  padding: 0;
  background: rgba(253, 253, 250, 0.92);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.16);
}
@media (max-width: 52rem) {
  .heroband + .mainnav { margin-top: -1.2rem; }
  .heroband + .mainnav .navinner { margin: 0 0.8rem; }
}

/* a greeting across the top of the photograph, between the badge and the
   social buttons */
.hero-welcome {
  position: absolute;
  /* down close to the line below it */
  top: 36%;
  left: 0;
  right: 0;
  margin: 0 auto;
  /* kept clear of the badge on the left and the social buttons on the right */
  max-width: calc(100% - 28rem);
  text-align: center;
  /* Bitter italic: a slab serif, the nearest free match to the badge lettering */
  font-family: 'Bitter', Georgia, serif;
  font-size: clamp(0.9rem, 2.9vw, 2.7rem);
  line-height: 1.3;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: #1a3a29;
  /* a pale halo, since dark green needs light behind it on a photograph */
  text-shadow: 0 1px 10px rgba(255, 255, 255, 0.85),
               0 2px 22px rgba(255, 255, 255, 0.6);
}

/* between about 1024 and 1200 the badge takes up proportionally more of the
   picture, so the greeting eases off to keep clear of it */

/* between about 1024 and 1200 the badge fills more of the picture, so the
   greeting eases off a size to stay clear of it */
@media (min-width: 64.0625rem) and (max-width: 78rem) {
  .hero-welcome { font-size: clamp(0.9rem, 2.5vw, 2.2rem); }
}

/* ---- the words across the photograph ---- */
.hero-words {
  position: absolute;
  left: 50%;
  /* a little below centre, so the longer lead line clears the logo panel */
  top: 63%;
  transform: translate(-50%, -50%);
  width: 94%;
  max-width: 80rem;
  text-align: center;
}
.hero-lead {
  margin: 0 0 0.5rem;
  font-style: italic;
  /* a little more weight behind the strokes, so the line holds its own
     against the busy hillside without needing a panel behind it */
  font-weight: 500;
  font-size: clamp(1.45rem, 5.6vw, 5.2rem);
  line-height: 1.12;
  /* slightly see-through, so the ridge and sky read through the letters */
  color: rgba(255, 255, 255, 0.76);
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.45);
}
.hero-title {
  margin: 0;
  text-align: center;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.05rem, 2.6vw, 2.2rem);
  line-height: 1.28;
  color: #fff;
  /* the sky behind it is pale, so the letters need their own shadow */
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.4);
}
/* the photograph is only a shallow band on a phone, so the title tucks in */
/* between about 700 and 1024px the photograph has shrunk with the window while
   the logo has not, so the words drop to the foot of the picture to clear it */
@media (max-width: 64rem) and (min-width: 40.0625rem) {
  /* just above the phone breakpoint the panorama would be barely 190px deep,
     so it keeps a floor here too */
  /* .heroband raises the specificity so this beats the `object-fit: fill`
     declared later in the file, which was stretching the panorama */
  .heroband .hero.photo img { min-height: 210px; object-fit: cover; object-position: center 58%; }
  .hero-words {
    top: auto;
    bottom: 3.6rem;
    transform: translateX(-50%);
  }
  .hero-welcome { top: 30%; font-size: clamp(0.72rem, 2.2vw, 1.5rem); }
  .hero-lead { font-size: clamp(1.3rem, 4.2vw, 2.6rem); }
  .hero-title { font-size: clamp(0.85rem, 2.4vw, 1.45rem); }
}
@media (max-width: 40rem) {
  /* at the panorama's own proportions the photograph is only ~116px deep on a
     phone, too shallow to hold the logo, the social buttons and two lines of
     text, so here it is cropped to a taller band instead */
  .heroband .hero.photo img { height: 230px; object-fit: cover; object-position: center 55%; }
  /* on a phone the greeting drops below the badge and the social buttons
     instead of trying to sit between them */
  .hero-welcome {
    top: 7.4rem;
    max-width: 92%;
    left: 0;
    right: 0;
    font-size: clamp(0.6rem, 2.7vw, 1rem);
  }
  .hero-words {
    top: auto;
    /* clear of the menu bar, which laps 1.2rem over the foot of the picture */
    bottom: 3.4rem;
    transform: translateX(-50%);
    width: 92%;
  }
  .hero-lead {
    font-size: clamp(1.6rem, 8.4vw, 2.7rem);
    margin-bottom: 0.3rem;
    /* the hillside behind it is bright and busy at this size */
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.65), 0 2px 5px rgba(0, 0, 0, 0.55);
  }
  .hero-title { font-size: clamp(0.6rem, 2.7vw, 0.95rem); line-height: 1.25; }
}

/* ---- the two social buttons, top right of the photograph ---- */
.heroband .call-social {
  position: absolute;
  top: 1.2rem;
  left: 1.6rem;
  z-index: 3;
}
.heroband .call-social .social { box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3); }
@media (max-width: 40rem) {
  .heroband .call-social { top: 0.6rem; left: 0.7rem; gap: 0.4rem; }
  .heroband .call-social .social { width: 44px; height: 44px; font-size: 0.72rem; }
}

/* ---- the logo in the top left corner of the photograph ---- */
.heroband { position: relative; }
.brand.onphoto {
  position: absolute;
  top: 1.2rem;
  left: 1.6rem;
  /* the badge carries its own white disc, so it needs no panel behind it */
  padding: 0;
  background: none;
  border-radius: 50%;
  overflow: visible;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.brand.onphoto:hover, .brand.onphoto:focus-visible {
  transform: scale(1.03);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}
/* the artwork is cut out, so it sits straight on the photograph with only a
   soft shadow to lift it off the sky */
.brand.onphoto img {
  border-radius: 50%;
  display: block;
}
.brand.onphoto img {
  height: auto;
  width: 9rem;
  mix-blend-mode: normal;
}
@media (max-width: 64rem) { .heroband .brand.onphoto img { width: 5rem; }
                            .heroband .brand.onphoto { padding: 0.45rem; } }
@media (max-width: 40rem)  { .heroband .brand.onphoto img { width: 5.5rem; } }
@media (max-width: 40rem) {
  /* left, not right: setting both would stretch the badge across the picture */
  .brand.onphoto { top: 0.6rem; left: 0.7rem; }
}

/* ---- opening ---- */
.hero { margin: 0; }
/* a photograph, not a graphite drawing: it needs no white knocked out,
   and its 3.37:1 shape is already a band, so it is not cropped */
.hero.photo img {
  mix-blend-mode: normal;
  max-height: none;
  object-fit: fill;
}
.hero img {
  mix-blend-mode: multiply;
  width: 100%;
  display: block;
  /* The drawing is taller than a screen at full width, so it is cropped to
     a band. Raise max-height for more picture, lower it for less;
     object-position picks which part of the drawing the band shows. */
  max-height: 52vh;
  object-fit: cover;
  object-position: center 38%;
}

h1 {
  color: var(--verde);
  font-size: clamp(2rem, 6vw, 3.1rem);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 3.5rem 0 0.4rem;
}
.standfirst.ruled {
  border-left: 2px solid var(--verde);
  padding-left: 1.1rem;
}

/* the opening pair sits directly under the green banner, so it needs air above */
.opener { margin-top: 2.6rem; }
.standfirst {
  font-size: 1.3rem;
  font-style: italic;
  font-weight: 300;
  color: var(--soft);
  margin: 0 0 2rem;
}

h2 {
  font-size: 1.55rem;
  font-weight: 400;
  line-height: 1.25;
  margin: 2.4rem 0 0.7rem;
}
h3 {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 2rem 0 0.4rem;
}

p { margin: 0 0 1.2rem; }

a { color: var(--verde); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; border-radius: 2px; }

ul { padding-left: 1.1rem; margin: 0 0 1.4rem; }
li { margin-bottom: 0.35rem; }
li::marker { color: var(--verde); }

.latin { font-style: italic; color: var(--soft); }

/* a block of native desert fact, set apart without a card */
.pull {
  border-left: 2px solid var(--verde);
  padding-left: 1.1rem;
  margin: 2rem 0;
  font-size: 1.2rem;
  font-style: italic;
  font-weight: 300;
}

/* a run-in label: the first few words name what the paragraph explains, in the
   site's green, so a reader scanning can find the mechanism without a heading */
main.wrap > p > strong:first-child { color: var(--verde); }

/* a consequence set: heading, lead-in and list held together in one panel, so
   the three kinds of loss read as three parcels rather than one long column */
.factbox {
  background: var(--paper);
  border: 2px solid var(--ember);
  border-radius: 0.4rem;
  padding: 1.3rem 1.5rem 1.4rem;
  margin: 2.2rem 0;
}
.factbox h3 { color: var(--ember); }
.factbox > :first-child { margin-top: 0; }
.factbox > :last-child { margin-bottom: 0; }
.factbox h3 { margin-top: 0; }
body.twocol main.wrap > .factbox {
  /* the consequence panels run under both columns: each is a heading, a lead-in
     and a list, which reads better wide than stacked in a narrow measure */
  max-width: none;
  clear: both;
}

/* the break before the page signs off: two fine rules rather than one, so it
   reads as a deliberate close and not an accidental border */
.closing-rule {
  border: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  height: 4px;
  margin: 3.4rem 0 2.6rem;
}
body.twocol main.wrap > .closing-rule { max-width: none; clear: both; }

/* a second-level heading given the weight of the page's own title: this one
   opens the longest stretch of the page and earns the same scale */
h2.major {
  color: var(--ember);
  font-size: clamp(2rem, 4vw, 3.1rem);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin-top: 3.2rem;
}

  /* the two notes that follow the panels, and the line that closes the section,
     keep the same full width so the whole passage reads as one block */
  body.twocol main.wrap > .factbox ~ p { max-width: none; }

/* a quote held in a green frame rather than hung off a single rule */
.pull.framed {
  /* matched to the margin quotes: same size, leading and weight */
  font-size: 1.3rem;
  line-height: 1.45;
  border: 2px solid var(--verde);
  border-radius: 0.4rem;
  padding: 1.1rem 1.3rem;
  margin: 2.4rem 0;
}

/* a quote already held by a panel, or standing centred, needs no rule as well:
   the frame or the centring is doing that work */
.factbox .pull,
.closing .pull {
  border-left: 0;
  padding-left: 0;
}

/* in the closing the six lines are one statement, so the three middle ones
   drop the quote's italic and sit in the same upright type as the rest */
.closing .pull {
  font-style: normal;
  font-weight: 380;
  /* inherited rather than pinned, so it stays the same size as the running
     text around it whatever the page's body size is */
  font-size: inherit;
  line-height: inherit;
}

/* The drawings are scanned on white, which is a shade brighter and bluer than
   the page's cream, so each one showed as a faint rectangle. Multiply makes
   their white vanish into the page: white times anything is that thing, while
   the graphite still darkens the cream underneath. */
main.wrap figure img { mix-blend-mode: multiply; }
/* the first illustration is drawn right to its edges, so blending it into the
   page would only smear the picture: it keeps its own crisp crop */
main.wrap figure img[src$="valley-homes.png"] { mix-blend-mode: normal; }

/* The inner pages carry the full horizontal lockup. It is set large enough for
   its second line to read: below about 22rem that line turns to grey mush, and
   a masthead is the one place a page can afford the room. */
.brand.wordmark { display: block; text-decoration: none; }
.brand.wordmark img {
  display: block;
  width: 24rem;
  max-width: 100%;
  height: auto;
  mix-blend-mode: multiply;
}
.brand.wordmark .tagline {
  display: block;
  margin-top: 0.25rem;
  padding-left: 0.3rem;
}
@media (max-width: 40rem) {
  /* a phone cannot give it 24rem, so it takes the full column instead */
  .brand.wordmark img { width: 100%; }
}

/* ---- chapter index: genuinely a sequence, so it is numbered ---- */
.contents { margin: 3rem 0 1rem; border-top: 1px solid var(--rule); }
.contents li {
  list-style: none;
  border-bottom: 1px solid var(--rule);
  margin: 0;
  padding: 0.85rem 0;
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  align-items: baseline;
  gap: 0.5rem;
}
.contents { padding-left: 0; }
.num { font-size: 0.95rem; color: var(--verde); }
.contents a { text-decoration: none; }
.contents a:hover { text-decoration: underline; }
.pending { color: var(--soft); }
.pending::after { content: ' — not yet written up'; font-size: 0.85rem; font-style: italic; }

/* ---- desert layers ---- */
.layers { list-style: none; padding: 0; margin: 1.5rem 0 2rem; }
.layers li {
  padding: 0.9rem 0 0.9rem 1.1rem;
  border-left: 3px solid var(--sage);
  margin-bottom: 0.2rem;
}
.layers li:nth-child(1) { border-left-color: var(--verde); }
.layers li:nth-child(2) { border-left-color: #6f9078; }
.layers li:nth-child(3) { border-left-color: #b3c4b0; }
/* the layer names carry the section, so they are set larger and in the
   site's green rather than as plain bold run-in labels */
.layers strong {
  display: block;
  font-weight: 600;
  font-size: 1.2em;
  color: var(--verde);
  margin-bottom: 0.15rem;
}

/* ---- the plant index door: the one loud element on the site ---- */
.index-door {
  display: block;
  margin: 3rem 0;
  padding: 1.6rem 1.5rem;
  background: var(--verde);
  color: #f4f7f2;
  text-decoration: none;
  border-radius: 0.6rem;
}
.index-door:hover, .index-door:focus-visible { background: #27503c; }
.index-door.fire { background: var(--ember); }
.index-door.fire:hover, .index-door.fire:focus-visible { background: #8d3922; }
.index-door.fire .door-sub { color: #e8c9bf; }
.index-door .door-title {
  display: block;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 0.35rem;
}
.index-door .door-sub {
  display: block;
  font-size: 1rem;
  font-style: italic;
  color: #c3d4c7;
}

/* a coloured box in the side column that opens its content underneath
   rather than going to a page */
.door-btn {
  font: inherit;
  width: 100%;
  text-align: left;
  border: 0;
  cursor: pointer;
}
.side-panel {
  margin: 0 0 3rem;
  padding: 1.2rem 1.25rem 1.4rem;
  background: var(--sage);
  border-radius: 0 0 0.6rem 0.6rem;
  font-size: 0.95rem;
}
.side-panel h2 { margin: 0 0 0.6rem; font-size: 1.05rem; }
.side-panel ul { margin: 0; padding-left: 1.1rem; }
.side-panel li + li { margin-top: 0.6rem; }
.side-panel > :last-child { margin-bottom: 0; }
/* the box it opens from sits flush on top of it */
.door-btn[aria-expanded="true"] { border-radius: 0.6rem 0.6rem 0 0; margin-bottom: 0; }

/* ---- plant index ---- */
.index-wide { max-width: 58rem; }

/* Species entries are short lines, so on a wide screen they flow into
   columns rather than leaving half the page blank. */
@media (min-width: 60rem) {
  .species { columns: 2; column-gap: 3rem; }
  .species li { break-inside: avoid; }
  /* keep an indented sub-species with the parent it belongs to, so a
     column break never strands "P. florida" away from "Palo verdes" */
  .species li.sub { break-before: avoid; break-before: avoid-column; }
  .index-wide > h1, .index-wide > .standfirst, .index-wide > p,
  .index-wide > h2, .index-wide > h3, .index-wide > .legend,
  .index-wide > .pull,
  /* these two sit inside the finder and the species groups, so they were
     missed by the list above and ran the full 58rem */
  .index-wide .finder .count,
  .index-wide .group > .wclass { max-width: 42rem; }
}

.finder {
  position: sticky;
  top: 0;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  padding: 1rem 0 0.9rem;
  margin-bottom: 1.5rem;
  z-index: 5;
}
.finder input {
  width: 100%;
  font: inherit;
  font-size: 1.05rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: #fff;
  color: var(--ink);
}
.finder input:focus-visible { outline: 2px solid var(--verde); outline-offset: 1px; }
.count { font-size: 0.9rem; color: var(--soft); margin-top: 0.5rem; }

.group { margin: 2.5rem 0; }
.group > h2 { margin-top: 0; }

.species { list-style: none; padding: 0; margin: 0; }
.species li {
  padding: 0.55rem 0;
  border-bottom: 1px solid #eceee8;
  margin: 0;
}
.species li.sub { padding-left: 1.4rem; border-bottom-color: #f4f5f2; }
.species .common { font-weight: 500; }
.species .sci { font-style: italic; color: var(--soft); }
.species .note { display: block; font-size: 0.9rem; color: var(--soft); }

/* protection codes: the legend in chapter 2 is the key to this list */
.code {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.1rem 0.4rem;
  border-radius: 2px;
  margin-left: 0.3rem;
  border: 1px solid var(--rule);
  color: var(--soft);
  cursor: help;
  vertical-align: 0.1em;
}
.code-ESA, .code-HS { background: var(--verde); color: #fff; border-color: var(--verde); }
.code-SR, .code-SA { background: var(--sage); color: #2f5d46; border-color: #c2cebe; }
.code-PP { background: #fff; color: var(--verde); border-color: var(--verde); }

.legend { list-style: none; padding: 0; margin: 1.2rem 0 2rem; }
.legend li { padding: 0.45rem 0; border-bottom: 1px solid #eceee8; margin: 0; }

/* non-natives read as a warning without shouting */
.invasive { border-left: 3px solid #a6452c; padding-left: 1.1rem; }
.invasive .common { color: #8f3b25; }
.wclass { font-size: 0.95rem; color: var(--soft); margin: 1.4rem 0 0.5rem; }

.empty { color: var(--soft); font-style: italic; padding: 2rem 0; }

/* ---- chapter 7: steps as actions ---- */
.step {
  border-top: 2px solid var(--verde);
  padding-top: 1.1rem;
  margin: 2.8rem 0;
}
.step-head {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin-bottom: 0.6rem;
}
.step-n {
  flex: none;
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  background: var(--verde);
  border-radius: 50%;
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  align-self: center;
}
.step-head h2 { margin: 0; font-size: 1.35rem; }
.do {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}
.do li {
  padding: 0.5rem 0 0.5rem 1.6rem;
  position: relative;
  margin: 0;
}
.do li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.05rem;
  width: 0.7rem;
  height: 0.7rem;
  border: 1.5px solid var(--verde);
  border-radius: 2px;
}
.caution {
  border-left: 3px solid #a6452c;
  padding-left: 1.1rem;
  margin: 1.5rem 0;
  font-size: 1rem;
}
.doing-nothing {
  background: var(--sage);
  padding: 1.4rem 1.3rem;
  margin: 2rem 0 3rem;
  border-radius: 2px;
}
.doing-nothing p:last-child { margin-bottom: 0; }

/* ---- marginalia: reference lists set beside the text, not in its way ---- */
.sidebox {
  background: var(--sage);
  padding: 1rem 1.1rem;
  border-radius: 2px;
  font-size: 0.92rem;
  line-height: 1.4;
  margin: 0.5rem 0 1.5rem;
}
.sidebox h3 {
  margin: 0 0 0.6rem;
  font-size: 1rem;
  font-weight: 600;
}
.sidebox ul { margin: 0; padding-left: 1rem; }
.sidebox p { margin: 0; }
.sidebox p strong { color: var(--verde); }
.sidebox li { margin-bottom: 0.3rem; }
.sidebox li::marker { color: #6f9078; }
.sidebox .latin { color: #4e6455; }

/* Short one-line entries set in two columns, so the box does not run
   taller than the text beside it and push the next item down the page. */
.sidebox.two-col ul { columns: 2; column-gap: 1.2rem; }
/* a sub-heading inside a side box: the list that follows is one part of the
   box, not a new box, so it is quieter than the box's own title */
.sidebox h4 {
  margin: 1rem 0 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--verde);
}
.sidebox p + h4 { margin-top: 1.1rem; }

/* the run of plant boxes gets more air between them than a lone box needs */
.sidebox + .sidebox { margin-top: 1rem; }
.sidebox p + p { margin-top: 0.7rem; }

/* Take Heart is the one encouraging note among the reference boxes, so it is
   set apart: paper rather than sage, a fine rule around it, and an ember edge
   across the top picking up the colour used elsewhere for the fire pages. */
/* the constructive answer to the problems beside it: given the weight of the
   Take Heart box, but in the site's green rather than the ember */
/* the consequence boxes are outlined in the ember red, so the side note that
   explains their mechanism carries the same colour as a wash */
.sidebox.warn {
  background: #f7ece8;
  border: 1px solid #e3c3b8;
  border-radius: 0.4rem;
  font-size: 1rem;
  line-height: 1.5;
}
.sidebox.warn h3 {
  margin: 0 0 0.5rem;
  color: var(--ember);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.sidebox.solution {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--verde);
  border-radius: 0 0 0.5rem 0.5rem;
  padding: 1.15rem 1.25rem 1.3rem;
  font-size: 1rem;
  line-height: 1.5;
}
.sidebox.solution h3 {
  margin: 0 0 0.6rem;
  color: var(--verde);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.sidebox.heart {
  /* this box is a short read on its own, not a reference list, so it is set
     a step larger than the other side boxes */
  font-size: 1.02rem;
  line-height: 1.5;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--ember);
  border-radius: 0 0 0.5rem 0.5rem;
  padding: 1.15rem 1.25rem 1.3rem;
}
.sidebox.heart h3 {
  margin: 0 0 0.6rem;
  color: var(--ember);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sidebox.heart p {
  font-style: italic;
  color: var(--verde);
}
.sidebox.two-col li { break-inside: avoid; }

/* Once the window is wide enough to hold it, the box moves out into the
   margin beside the text. Below that it stays in the flow. */
@media (min-width: 78rem) {
  .sidebox {
    float: right;
    width: 15rem;
    margin-right: -17rem;
    margin-left: 2rem;
    margin-top: 0.3rem;
  }
}

/* ---- get involved: each way in, with its own action ---- */
.way { margin: 2.6rem 0; }
.way h2 { margin-top: 0; }
.action {
  display: inline-block;
  margin-top: 0.6rem;
  padding: 0.55rem 1rem;
  background: var(--verde);
  color: #f4f7f2;
  text-decoration: none;
  border-radius: 2px;
  font-size: 1rem;
}
.action:hover, .action:focus-visible { background: #27503c; }
/* the bright spring green of the sign-up buttons, with the same dark green
   ink on it at 7.1:1 */
.action.bright {
  background: #8ed05a;
  color: #183624;
  font-weight: 600;
  font-size: 1.15rem;
  padding: 0.7rem 1.3rem;
  border-radius: 0.4rem;
}
.action.bright:hover, .action.bright:focus-visible { background: #9cde66; }

/* A link whose destination is not settled yet: it reads as an ordinary
   link until the real URL arrives. */
.todo-link { color: var(--verde); }

/* ---- the one invitation on the page: full width, its own colour ---- */
.call {
  display: block;
  /* sized to what it holds rather than running edge to edge */
  width: fit-content;
  max-width: calc(100% - 3rem);
  margin: 0 auto;
  padding: 1.8rem 2.2rem;
  background: var(--verde);
  color: #f2f6f1;
  text-decoration: none;
  border-radius: 2px;
}
/* the whole band reads as one left-aligned block, on the same left edge
   as the tiles below it */
/* the row runs the width of the band, so the title sits at the far left */
.call-inner { max-width: none; margin: 0; }
/* the heading, subtitle and tiles on the left; the paragraph on the right */
@media (min-width: 60rem) {
  .call-inner {
    align-items: center;
    display: grid;
    /* both halves size to their content and sit together, rather than the text
       column stretching and pushing the sign away */
    grid-template-columns: auto auto;
    justify-content: center;
    gap: 2.5rem;
    /* the quote sits centred against the row of option boxes */
    align-items: center;
  }
}
.call-aside {
  display: flex;
  align-items: center;
  max-width: 42rem;
  margin-top: 1.3rem;
  gap: 1.3rem;
  font-size: 1.15rem;
  line-height: 1.55;
  color: #dce7dc;
}
.call-aside p { margin: 0; font-style: italic; }
.quote-lead {
  flex: 0 0 auto;
  max-width: 17rem;
  font-size: 1.55rem;
  line-height: 1.2;
  color: #f2f6f1;
}
/* the rule between the two halves of the line */
/* the headline doubles as the way in to the Take Heart message, so it carries
   a button's affordances while keeping the look of the line it replaced */
button.quote-lead {
  font: inherit;
  font-size: 1.55rem;
  color: #f2f6f1;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
  transition: border-color 0.15s ease;
}
button.quote-lead:hover,
button.quote-lead:focus-visible { border-bottom-color: #f2f6f1; }
.lead-arrow { display: inline-block; transition: transform 0.15s ease; }
button.quote-lead:hover .lead-arrow { transform: translateX(3px); }

.quote-rest {
  border-left: 1px solid rgba(255, 255, 255, 0.4);
  padding-left: 1.3rem;
  font-size: 1.22rem;
  align-self: stretch;
  display: flex;
  align-items: center;
}
@media (max-width: 60rem) {
  .call-aside { display: block; }
  .quote-lead { max-width: none; margin-bottom: 0.7rem; }
  .quote-rest {
    display: block;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    padding: 0.7rem 0 0;
  }
}

/* ---- the Habitat Host sign, a picture that is also the link ----
   It is the one thing in the banner we want people to act on, so it is set
   on a cream mount like a framed sign rather than sitting flat on the green. */
.sign-item { display: block; }
/* the sign is a button, so the button chrome comes off it */
.call-tiles > li { min-width: 0; }
.call-tiles .tile.sign {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
}
.sign {
  position: relative;
  display: block;
  cursor: pointer;
  width: 24rem;
  max-width: 100%;
  /* one button: the sign standing on a solid bar that carries the call */
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0.7rem;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.sign:hover, .sign:focus-visible {
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45);
  transform: translateY(-2px);
}
.sign img { filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.35)); }
.sign:hover img, .sign:focus-visible img { filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.5)); }
.sign img { display: block; width: 100%; height: auto; }
/* the bar the sign stands on, and the thing you click */
.sign-banner {
  display: block;
  margin: 0;
  padding: 0.85rem 1rem;
  /* a bright spring green let down over the banner: it lifts off the dark
     ground without turning into a flat slab, and carries dark ink at 5.7:1 */
  background: rgba(142, 208, 90, 0.85);
  color: #183624;
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.2;
  text-align: center;
  letter-spacing: 0.01em;
  transition: background 0.15s ease;
}
.sign-arrow { display: inline-block; margin-left: 0.35rem; transition: transform 0.15s ease; }
.sign:hover .sign-banner, .sign:focus-visible .sign-banner { background: rgba(156, 222, 102, 0.96); }
.sign:hover .sign-arrow { transform: translateX(3px); }
.sign:hover img, .sign:focus-visible img { opacity: 0.92; }

/* the three options are one size: portrait boxes matching the sign, ready
   for a picture to replace the text in the two that have none yet */
.call-tiles > li { display: flex; }
.call-tiles .tile.option {
  width: 11rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  font-size: 1.15rem;
  line-height: 1.3;
}

/* ---- the two social buttons at the far right of the band ---- */
.call-social {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0.7rem;
}
.call-social .social {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 0;
  background: rgba(255, 255, 255, 0.85);
  color: var(--verde);
  border-radius: 50%;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}
.call-social .social img, .call-social .social svg {
  width: 1.5rem; height: 1.5rem; display: block;
}
@media (max-width: 60rem) {
  .call-aside { margin-top: 1.8rem; max-width: 34rem; }
  .call-social { margin-top: 1.6rem; }
}

.call-tiles {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  max-width: none;
  margin: 0;
  padding: 0;
  list-style: none;
}
.call-tiles .tile {
  font: inherit;
  display: block;
  cursor: pointer;
  padding: 0.7rem 1.3rem;
  border-radius: 0.6rem;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.34);
  color: #f2f6f1;
  text-decoration: none;
  font-size: 1.12rem;
  line-height: 1.2;
}
.call .tile:hover, .call .tile:focus-visible {
  background: rgba(255, 255, 255, 0.24);
}
/* the open one reads as a tab joined to the panel below */
.call .tile[aria-expanded="true"] {
  background: var(--sage);
  border-color: var(--sage);
  color: #1f4634;
}
/* the headline trigger is a line of type, not a chip: when it is open it keeps
   the banner's colour and simply shows the rule beneath it filled in */
.call button.quote-lead[aria-expanded="true"] {
  background: none;
  color: #f2f6f1;
  border-bottom-color: #f2f6f1;
}
.call button.quote-lead[aria-expanded="true"] .lead-arrow { transform: rotate(90deg); }

/* ---- the panel a tile opens ---- */
/* the mission, across the top of the banner, split by a rule like the line
   below it */
.call-strap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.3rem;
  margin: 0 auto 1.6rem;
  max-width: none;
  text-align: center;
  font-size: clamp(0.85rem, 1.72vw, 1.95rem);
  line-height: 1.3;
  font-style: italic;
  color: #eaf1ea;
}
.strap-lead { flex: 0 0 auto; color: #fff; }
.strap-rest {
  flex: 0 1 auto;
  padding-left: 1.3rem;
  border-left: 1px solid rgba(255, 255, 255, 0.45);
  text-align: left;
}
@media (max-width: 40rem) {
  .call-strap { gap: 0.5rem; }
  .strap-rest { padding-left: 0; border-left: 0; text-align: center; }
}

/* the mission sits on the paper above the green banner */
/* the welcome line, lifted off the photograph and set above the mission
   statement so the banner carries one line of type instead of two */
.welcome-line {
  max-width: 54rem;
  margin: 2.4rem auto 0.9rem;
  padding: 0 1.5rem;
  text-align: center;
  font-family: 'Bitter', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.25rem, 2.6vw, 2.3rem);
  line-height: 1.3;
  color: #1a3a29;
}

/* the mission follows straight on from the welcome, so it sits closer to it
   than it would as a standalone opening line */
.welcome-line + .mission { margin-top: 1.4rem; }

.mission {
  max-width: 54rem;
  margin: 2.6rem auto 2.4rem;
  padding: 0 1.5rem;
  text-align: center;
  font-size: clamp(1.15rem, 2vw, 1.75rem);
  line-height: 1.4;
  font-style: italic;
  color: var(--verde);
}

.call-panels {
  background: var(--sage);
  width: fit-content;
  min-width: min(100% - 3rem, 46rem);
  max-width: calc(100% - 3rem);
  margin: 0 auto 2.5rem;
  border-radius: 0 0 0.8rem 0.8rem;
}
.panel { max-width: 44rem; margin: 0 auto; padding: 2rem 1.5rem 2.4rem; }
.panel[hidden] { display: none; }
.panel h2 { margin-top: 0; }
.panel > :last-child { margin-bottom: 0; }
.todo-note { color: var(--soft); font-style: italic; }
@media (max-width: 40rem) {
  .call-tiles { gap: 0.55rem; }
  .call-tiles .tile { padding: 0.7rem 1rem; font-size: 0.95rem; }
}
.call-title {
  display: block;
  font-size: clamp(2.1rem, 5vw, 3.2rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.call-sub {
  display: block;
  margin-top: 0;
  font-size: 2.3rem;
  line-height: 1.15;
  font-style: italic;
  color: #d5e3d6;
}
@media (max-width: 60rem) {
  .call-sub { font-size: 1.6rem; }
}

/* ---- partner logos along the bottom ---- */
.partners {
  list-style: none;
  padding: 0;
  margin: 2.2rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  align-items: stretch;
  justify-content: center;
}
.partners li { margin: 0; }
.partner {
  display: grid;
  place-items: center;
  width: 9rem;
  min-height: 4.75rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--soft);
  text-decoration: none;
  font-size: 0.74rem;
  line-height: 1.25;
  text-align: center;
}
.partner img { display: block; max-width: 9rem; max-height: 4.2rem; width: auto; height: auto; }
.partner:has(img) { border: 0; padding: 0; min-height: 0; }
.partner span::after { content: ' [logo needed]'; font-style: italic; }

/* ---- footer ---- */
.footer-logo {
  display: block;
  width: 150px;
  height: auto;
  margin: 0 auto 1.4rem;
}

footer {
  text-align: center;
  border-top: 1px solid var(--rule);
  margin-top: 4rem;
  padding: 2rem 0 4rem;
  font-size: 0.95rem;
  color: var(--soft);
}

.next {
  display: inline-block;
  margin: 2.5rem 0 0;
  border-bottom: 1px solid var(--verde);
  text-decoration: none;
  padding-bottom: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ============================================================
   TWO-COLUMN PAGE  (preview — only applies to <body class="twocol">)
   Text keeps a fixed 34rem measure on the left; illustrations and
   side boxes float into a 20rem column on the right. Because the
   text is capped independently of the container, line length stays
   the same whether or not a picture is beside it.
   ============================================================ */
@media (min-width: 70rem) {
  body.twocol main.wrap {
    max-width: 58rem;
    /* contain the floated side column so a low item cannot spill past the
       end of the page and over the footer */
    display: flow-root;
  }

  body.twocol main.wrap > h1,
  body.twocol main.wrap > h2,
  body.twocol main.wrap > h3,
  body.twocol main.wrap > p,
  body.twocol main.wrap > ul,
  body.twocol main.wrap > ol,
  body.twocol main.wrap > .pull,
  body.twocol main.wrap > .layers,
  body.twocol main.wrap > .contents,
  body.twocol main.wrap > .step,
  body.twocol main.wrap > .way,
  body.twocol main.wrap > .doing-nothing { max-width: 34rem; }

  /* the opening pair runs the full width, above the two-column flow */
  body.twocol main.wrap > .opener { max-width: none; }
  /* the side-by-side opener needs the home page's wider 58rem container:
     on a standard single-column page it squeezes the standfirst to a sliver,
     so there the heading and standfirst simply stack */
  body.twocol .opener {
    display: flex;
    align-items: stretch;
    gap: 2.4rem;
    margin: 0 0 3rem;
  }
  body.twocol .opener h1,
  body.twocol .opener h2 { flex: 0 1 26rem; margin: 0; }
  body.twocol .opener .standfirst {
    flex: 1 1 0;
    margin: 0;
    padding-left: 2.4rem;
    border-left: 1px solid var(--rule);
    display: flex;
    align-items: center;
    font-size: 1.35rem;
  }

  body.twocol main.wrap > .side-quote,
  body.twocol main.wrap > figure,
  body.twocol main.wrap > .guide,
  body.twocol main.wrap > .index-door,
  body.twocol main.wrap > .standfirst.ruled,
  body.twocol main.wrap > .sidebox,
  body.twocol main.wrap > .side-panel {
    float: right;
    width: 20rem;
    /* 34rem text + 2rem gutter + 20rem side = 56rem, inside the 58rem
       container. A wider gutter makes the two overlap and pushes
       full-width images below the float. */
    margin: 0.2rem 0 1rem 2rem;
    clear: right;
    padding: 0;
    max-width: none;
  }

  /* a pull quote set in the margin: it keeps the green rule and the italic of
     an inline quote, but takes the width of a side box */
  body.twocol main.wrap > .side-quote {
    padding-left: 1.1rem;
    margin-top: 0.4rem;
    font-size: 1.3rem;
    line-height: 1.45;
  }
  body.twocol main.wrap > .sidebox { padding: 1rem 1.1rem; }
  body.twocol main.wrap > .side-panel { margin: 0 0 3rem; padding: 1.2rem 1.25rem 1.4rem; }
  body.twocol main.wrap > .index-door { padding: 1.3rem 1.2rem; margin-top: 0; }
  body.twocol main.wrap > .standfirst.ruled { font-size: 1.05rem; margin-top: 0; }
  body.twocol main.wrap > .guide { margin-top: 0; }
  body.twocol .guide .contents { margin: 0; font-size: 0.95rem; }
  body.twocol .guide h2 { margin: 0 0 0.6rem; font-size: 1.05rem; }
  body.twocol .guide .contents li { padding: 0.6rem 0; }

  body.twocol main.wrap > figure figcaption {
    max-width: none;
    margin: 0.6rem 0 0;
    padding: 0;
  }

  /* the closing runs the full width of the page, under both columns, with the
     two drawings that frame it doing the same */
  body.twocol main.wrap > .closing {
    max-width: none;
    clear: both;
  }
  /* the closing is the page signing off, so it is centred -- the quotes keep
     their rule but are pulled in to a narrower measure so the centring reads */
  .closing { text-align: center; }
  .closing .pull {
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }
  body.twocol main.wrap > figure.in-column.wide {
    max-width: none;
    width: 100%;
    clear: both;
    margin-left: auto;
    margin-right: auto;
  }
  body.twocol main.wrap > figure.in-column.wide img { width: 100%; height: auto; }
  /* a caption under a picture that spans both columns is centred on it, rather
     than hanging off the left edge of a 900px image */
  body.twocol main.wrap > figure.in-column.wide figcaption { text-align: center; }

  /* A figure marked in-column stays in the reading flow at the full width
     of the text column, instead of shrinking into the side column. */
  body.twocol main.wrap > figure.in-column {
    float: none;
    /* the text column is narrower than the layout, so this can sit beside a
       floated box rather than waiting for it to finish */
    clear: none;
    width: auto;
    /* 1rem narrower than the text column: a paragraph's lines can shorten
       beside a float, but an image cannot, so it needs real clearance. */
    max-width: 33rem;
    margin: 1rem 0 2.6rem;
  }
}

/* a long unbroken URL used to push the Conservation Guide sideways on a 320px
   phone; links may break mid-string rather than overflow the column */
main.wrap a, footer a { overflow-wrap: anywhere; }

/* touch targets: on a phone every standing control is at least 44px tall,
   the minimum a fingertip can hit reliably. Links inside a sentence are left
   alone -- padding those out would break the line spacing of the prose. */
@media (max-width: 52rem) {
  .action {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0.55rem 1.1rem;
  }
  .next {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* an .action is inline-block, so a "back" link straight after it would sit on
   the same line; give the link a line of its own */
.action + .next { display: block; }

/* ---- the invasive group in the plant index ----
   It sits last, after some two hundred natives, so it carries the same red
   outline as the consequence panels on the home page: a reader scrolling past
   can tell at a glance that this list is a different kind of thing. */
.group.invasives {
  border: 2px solid var(--ember);
  border-radius: 0.4rem;
  padding: 0.2rem 1.5rem 1.4rem;
  margin-top: 2.6rem;
}
@media (max-width: 40rem) {
  .group.invasives { padding: 0.2rem 1rem 1.2rem; }
}

/* an encouraging aside set apart from the running text, in the flow at full
   measure rather than floated into the margin like a .sidebox */
.infobox {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--verde);
  border-radius: 0.3rem;
  padding: 1.4rem 1.6rem 1.5rem;
  margin: 2.4rem 0;
}
.infobox h2 {
  margin: 0 0 0.8rem;
  font-size: 1.3rem;
  color: var(--verde);
}
.infobox p { margin: 0 0 0.9rem; }
.infobox p:last-child { margin-bottom: 0; }
@media (max-width: 40rem) { .infobox { padding: 1.1rem 1.1rem 1.2rem; } }

/* ---- the mission on the green banner ----
   The banner runs the width of the page again, carrying the name and the
   mission in white on the green, with the Habitat Host sign beside them. */
.call { width: auto; max-width: none; margin: 0 1.5rem; }
/* the name sits above the mission, not beside it -- the side-by-side layout
   belongs to the quote pair this block replaced */
.call-aside.mission-text { display: block; max-width: 38rem; }
.call .welcome-line,
.call .mission {
  max-width: none;
  margin: 0;
  padding: 0;
  text-align: left;
  color: #f2f6f1;
}
.call .welcome-line { margin-bottom: 0.7rem; }
.call .welcome-line, .call .mission { text-align: left; }
@media (max-width: 60rem) {
  .call-aside.mission-text { max-width: none; }
}

/* a page can open on the same green banner as the home page, carrying its
   title and standfirst in white instead of the mission */
.call.pagehead { margin: 1.6rem 1.5rem 2.6rem; }
.call.pagehead h1 {
  margin: 0 0 0.7rem;
  color: #f2f6f1;
}
.call.pagehead .mission { font-size: 1.2rem; }

/* on the page head the title and its standfirst sit side by side, divided by
   the same hairline the home banner used for its pair */
.call.pagehead .headline-pair { max-width: none; align-items: center; }
.call.pagehead .headline-pair h1 {
  flex: 0 1 24rem;
  margin: 0;
  color: #f2f6f1;
}
.call.pagehead .headline-pair .mission {
  flex: 1 1 0;
  margin: 0;
  padding-left: 1.6rem;
  border-left: 1px solid rgba(255, 255, 255, 0.4);
  font-size: clamp(1.3rem, 1.9vw, 1.75rem);
  line-height: 1.45;
}
@media (max-width: 52rem) {
  .call.pagehead .headline-pair { display: block; }
  .call.pagehead .headline-pair h1 { margin-bottom: 0.9rem; }
  .call.pagehead .headline-pair .mission {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    padding-top: 0.9rem;
  }
}

/* the one thing this page asks people to do, so it is a full-width button
   rather than a line of link text */
.signup-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 60px;
  margin: 2.6rem 0 2.4rem;
  padding: 1rem 1.4rem;
  /* the bright spring green of the Become a Habitat Host banner, solid here
     because this one sits on paper rather than over the sign photo. Dark
     green ink on it reads at 7.1:1. */
  background: #8ed05a;
  color: #183624;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  text-align: center;
  border-radius: 0.5rem;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  line-height: 1.25;
  box-shadow: 0 2px 10px rgba(28, 33, 29, 0.18);
  transition: background 0.15s ease, transform 0.15s ease;
}
.signup-button:hover,
.signup-button:focus-visible { background: #9cde66; transform: translateY(-1px); }
.signup-button:hover .sign-arrow { transform: translateX(3px); }
/* until the real sign-up URL arrives it is marked as a placeholder */
/* .todo marks a link whose URL has not arrived yet; it carries no styling
   of its own, so an unfinished control looks exactly like a finished one. */

/* on the Invasive Plants page the three actions are plain sections rather than
   the dropdowns they were inside the guide */
.openbox {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--ember);
  border-radius: 0.3rem;
  padding: 1.3rem 1.5rem 1.4rem;
  margin: 2.2rem 0;
}
.openbox h2 { margin: 0 0 0.8rem; font-size: 1.35rem; color: var(--ember); }
.openbox > p:first-of-type { margin-top: 0; }
.openbox ul { margin-bottom: 0; }
@media (max-width: 40rem) { .openbox { padding: 1.1rem 1.1rem 1.2rem; } }

/* the Desert Clearing page opens in the warning red its panels use, rather
   than the green the other pages take */
body.clearing main.wrap > .opener h1 { color: var(--ember); }
body.clearing main.wrap > .opener .standfirst { color: var(--ember); }

/* ---- plain section headings ----
   Wildfire, Plant Protections and the Plant Index are the three pages whose
   section headings sit directly on the page rather than inside a tinted box.
   They share one treatment so the pages read as one site. */
main.wrap > h2 {
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--ember);
}

/* the home page keeps its own black section headings at their original size:
   the red treatment belongs to the three plain inner pages */
body.twocol:not(.clearing):not(.invasives) main.wrap > h2 {
  font-size: 1.55rem;
  color: var(--ink);
}

/* the Wildfire Guide keeps the shared size but sets its headings in black */
body.wildfire main.wrap > h2 { color: var(--ink); }

/* Native Plant Protections sets out law rather than warning, so its headings
   stay black */
body.protections main.wrap > h2 { color: var(--ink); }
/* the Wildfire Guide takes the red on its page title instead, as the Desert
   Clearing page does */
body.wildfire main.wrap > h1 { color: var(--ember); }

/* the Invasive Plants page takes the red on its title too */
body.invasives main.wrap > h1 { color: var(--ember); }

/* the weed-class lines sit at the same size and colour as the Class A note in
   the paragraph above them, so the four classes read as one set */
#invasives .wclass { font-size: 1.125rem; color: var(--ink); }

/* the native species heading is green: this list is the natives, set against
   the red the invasive page carries */
main.wrap > h2.native-heading { color: var(--verde); }

main.wrap > h2.plain-heading { color: var(--ink); }

/* ---- single-column page measure ----
   The one-column pages run at 46rem rather than the 42rem default, so they
   fill more of a desktop window. The home page keeps its own two-column
   measure and the plant index keeps its wider 58rem list container. */
body:not(.twocol) main.wrap:not(.index-wide) { max-width: 46rem; }
/* below the two-column breakpoint a twocol page falls back to the same
   single-column measure as the rest of the site, not the 42rem default */
@media (max-width: 69.99rem) {
  body.twocol main.wrap { max-width: 46rem; }
}

/* a quotation that carries its own quote marks needs no rule beside it */
.pull.noline { border-left: 0; padding-left: 0; }

/* the quoted list from the ordinance: its opening line and the numbered
   clauses read as one quotation, indented together away from the prose */
.ordinance-lead { margin-bottom: 0.6rem; }
ol.ordinance { margin: 0 0 1.6rem; padding-left: 2.2rem; }
ol.ordinance li { margin-bottom: 0.7rem; }
ol.ordinance li:last-child { margin-bottom: 0; }

/* the footer sits on the same measure as the single-column pages above it */
footer .wrap { max-width: 46rem; }

/* On the Desert Clearing page the consequence panels sit in the text column
   rather than spanning both, so the margin notes have somewhere to sit beside
   them. (On the home page they still run the full width.) */
@media (min-width: 70rem) {
  body.clearing main.wrap > .factbox {
    max-width: 34rem;
    clear: none;
  }
}

/* the species list runs the full width of the Invasive Plants page: it sets
   its own two columns, so squeezing it into the text column would waste them */
@media (min-width: 70rem) {
  body.invasives main.wrap > .group { max-width: none; clear: both; }
}

/* ---- the mission band ----
   With the sign gone it carries only the name and the mission, so it steps
   back: a pale green band with dark green type instead of a solid dark one. */
body.twocol .call {
  background: var(--sage);
  box-shadow: none;
}
body.twocol .call .welcome-line,
body.twocol .call .mission { color: #24503a; }

/* the Habitat Host sign sits in the right column with the index doors */
@media (min-width: 70rem) {
  body.twocol main.wrap > .tile.sign {
    float: right;
    width: 20rem;
    margin: 0 0 2rem 2.5rem;
    clear: right;
  }
}
main.wrap > .tile.sign { display: block; margin: 0 0 2rem; }

/* with the sign gone from the band, the name and mission use its full width
   rather than staying in the half-column the pair used to share */
body.twocol .call .call-inner { display: block; }
body.twocol .call .call-aside.mission-text { max-width: none; }

/* the band is pulled in to the page's own measure so it lines up with the
   content below it rather than running the full window */
body.twocol .call {
  max-width: min(58rem, calc(100% - 3rem));
  margin-left: auto;
  margin-right: auto;
}

/* ---- the Habitat Host sign beside the mission band ----
   The sign sits outside the sage box, to its right, on the page itself. The
   row takes the page's own measure, so the band ends where the text column
   ends and the sign stands over the side column below it. The sign is held
   a little narrower than that column, which gives the mission more room to
   spread to the right. */
@media (min-width: 62rem) {
  body.home .bandrow {
    max-width: 58rem;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 16rem;
    gap: 2rem;
    align-items: center;
  }
  body.home .bandrow .call { max-width: none; margin: 0; }
}
.bandrow .sign.band-sign { display: block; width: 100%; margin: 0; }
.bandrow .sign.band-sign .sign-banner { font-size: 1.1rem; padding: 0.7rem 0.8rem; }
/* narrow: the sign drops below the band and keeps the band's side margin */
@media (max-width: 61.99rem) {
  .bandrow .sign.band-sign {
    width: auto;
    max-width: 22rem;
    margin: 1.7rem 1.5rem 0;
  }
}

/* ---- the Conservation Guide and Plant Index buttons ----
   They sit beside the menu rather than in it: these two are the pages we most
   want people to open, so they read as buttons, not as more menu items. */
.guide-button {
  background: var(--verde);
  color: #f4f7f2 !important;
  border-radius: 0.35rem;
  margin: 0.45rem 0 0.45rem 0.8rem;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  align-self: center;
}
.guide-button:hover,
.guide-button:focus-visible { background: #27503c; }
.mainnav a.guide-button.here {
  text-decoration: none;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55);
}
@media (max-width: 52rem) {
  .guide-button { margin-left: 0.4rem; min-height: 44px; padding: 0.4rem 0.9rem; }
}

/* the closing points carry a drawn checkmark rather than a bullet: the list
   is centred on the page while its lines stay left-aligned behind the marks */
.closing-points {
  list-style: none;
  display: inline-block;
  text-align: left;
  margin: 1.8rem 0;
  padding: 0;
  max-width: 40rem;
}
.closing-points li {
  position: relative;
  padding-left: 2.1rem;
  margin-bottom: 1rem;
}
.closing-points li:last-child { margin-bottom: 0; }
.closing-points li::before {
  content: '';
  position: absolute;
  left: 0.2rem;
  top: 0.42em;
  width: 0.78rem;
  height: 0.42rem;
  border-left: 2.5px solid var(--verde);
  border-bottom: 2.5px solid var(--verde);
  transform: rotate(-45deg);
}

/* the page head takes the same soft green as the mission band on the home
   page, with dark green type and a matching hairline between the pair */
.call.pagehead {
  background: var(--sage);
  box-shadow: none;
}
.call.pagehead .headline-pair h1,
.call.pagehead .headline-pair .mission { color: #24503a; }
.call.pagehead .headline-pair .mission { border-left-color: rgba(47, 93, 70, 0.3); }
@media (max-width: 52rem) {
  .call.pagehead .headline-pair .mission { border-top-color: rgba(47, 93, 70, 0.3); }
}

/* the three buttons start a row of their own, below the menu links */
.nav-break { flex-basis: 100%; height: 0; }

/* a margin note that belongs to a warning panel takes the red rule */
.sidebox.solution.warn { border-top-color: var(--ember); }

/* on the Desert Clearing page the list markers take the warning red the
   panels carry, rather than the green used elsewhere */
body.clearing main.wrap li::marker { color: var(--ember); }

/* on the two invasive-plant pages the bold lead-in to a paragraph takes the
   warning red rather than the green used elsewhere */
body.invasives main.wrap p > strong:first-child,
body.clearing main.wrap p > strong:first-child,
body.clearing .sidebox p > strong:first-child { color: var(--ember); }

/* ---- the ecosystem quote runs under both columns ----
   It keeps the green rule and italic of a .pull, but drops below the floated
   side column instead of sitting in it, so it spans the full page width. */
@media (min-width: 70rem) {
  body.twocol main.wrap > .pull.wide-quote {
    max-width: none;
    clear: both;
    font-size: 1.3rem;
    line-height: 1.45;
  }
}

/* ---- home page body copy, one step up ----
   Only the inherited running text moves: headings, pull quotes and the nav
   set their own rem sizes, so they stay exactly where they were. */
body.home { font-size: 1.2rem; }

/* ---- the closing message on the page's soft green ----
   The same sage as the mission band at the top, so the page opens and closes
   on the same colour, with the dark green type that band already uses. */
.closing.band {
  background: var(--sage);
  border-radius: 0.4rem;
  padding: 2.8rem 2.6rem 3rem;
  margin: 0 0 2.8rem;
}
.closing.band h2,
.closing.band p,
.closing.band li { color: #24503a; }
/* the drawn checkmarks keep their green against the sage */
.closing.band .closing-points li::before {
  border-left-color: var(--verde);
  border-bottom-color: var(--verde);
}
/* spacing inside the band: the heading sits closer to the sentence it
   introduces, and the checkmark pair gets room of its own */
.closing.band h2 { margin-top: 0; margin-bottom: 1.1rem; }
/* the list shrink-wraps and centres like an inline-block, but as a table box
   it carries no inline leading above and below, which was adding 20px of
   dead space under the last checkmark */
.closing.band .closing-points {
  display: table;
  margin: 1.9rem auto 1.9rem;
}
.closing.band .closing-points li { margin-bottom: 1.2rem; }
.closing.band > p:last-child { margin-bottom: 0; }
/* my own li spacing above outranks the list's own last-child reset, which was
   leaving 19px of margin hanging under the final checkmark */
.closing.band .closing-points li:last-child { margin-bottom: 0; }
/* the sign-off closes the page at the same scale as the heading that opens
   the band, so the two frame the message between them */
.closing.band .signoff {
  font-size: 1.55rem;
  line-height: 1.25;
}
@media (max-width: 40rem) {
  .closing.band { padding: 2rem 1.3rem 2.2rem; border-radius: 0.3rem; }
}

/* ---- the sign-up inside a side panel ----
   The same green action button as the Habitat Host page, scaled down to sit
   in a 20rem column instead of running the full width of the page. */
.side-panel .signup-button {
  min-height: 48px;
  margin: 1.4rem 0 0;
  padding: 0.85rem 1rem;
  border-radius: 0.4rem;
  font-size: 1.3rem;
  line-height: 1.2;
  box-shadow: none;
}
.side-panel .signup-button:hover,
.side-panel .signup-button:focus-visible { transform: none; }

/* ---- the Habitat Host page in two columns ----
   The encouragement box moves into the margin, the sign and the sign-up run
   under both columns. */
@media (min-width: 70rem) {
  body.twocol main.wrap > .infobox {
    float: right;
    width: 20rem;
    margin: 0.2rem 0 1.5rem 2rem;
    clear: right;
    max-width: none;
    padding: 1.2rem 1.3rem 1.4rem;
  }
  body.twocol main.wrap > .infobox h2 { font-size: 1.2rem; }
  body.twocol main.wrap > .signup-button { clear: both; }
}

/* the Invasive Plants opener takes the same paired heading as the home page,
   in the red this page already uses for its title */
body.invasives main.wrap > .opener h1,
body.invasives main.wrap > .opener .standfirst { color: var(--ember); }

/* ---- a paired opener on a single-column page ----
   main.wrap carries .has-opener, and the heading pair alone spans the full
   58rem the two-column pages use, so the standfirst has room beside the
   title. Everything below it keeps the 46rem reading measure. */
@media (min-width: 70rem) {
  body:not(.twocol) main.wrap.has-opener { max-width: 58rem; }
  body:not(.twocol) main.wrap.has-opener > :not(.opener) { max-width: 46rem; }
  body:not(.twocol) main.wrap.has-opener > .opener {
    display: flex;
    align-items: stretch;
    gap: 2.4rem;
    margin: 0 0 3rem;
  }
  body:not(.twocol) main.wrap.has-opener > .opener h1 { flex: 0 1 26rem; margin: 0; }
  body:not(.twocol) main.wrap.has-opener > .opener .standfirst {
    flex: 1 1 0;
    margin: 0;
    padding-left: 2.4rem;
    border-left: 1px solid var(--rule);
    display: flex;
    align-items: center;
    font-size: 1.35rem;
  }
}

/* ---- the email button with the address beside it ----
   If the visitor's browser has no mail program set up the button can do
   nothing at all, so the address sits next to it in plain text, ready to be
   read or copied. It wraps underneath on a narrow screen. */
.email-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 1.2rem;
  margin: 1.8rem 0 0;
}
.email-row .action { margin-top: 0; }
.email-address { font-size: 1.05rem; }

/* ---- the numbered sections on the Wildfire Guide ----
   The same numbered heads as the Conservation Guide, in this page's red
   rather than green. White on the red reads at 6.0:1. */
body.wildfire .step-head {
  border-top: 2px solid var(--ember);
  padding-top: 1.1rem;
  margin: 2.8rem 0 0.6rem;
}
body.wildfire .step-head:first-of-type { margin-top: 0; }
body.wildfire .step-n { background: var(--ember); }

/* ---- room above a paired opener ----
   The flex opener zeroes its own margins, so where it is the first thing in
   main.wrap the title sat flush against the menu bar above it. This restores
   the same 2rem the plain h1 carries on every other page. */
@media (min-width: 70rem) {
  body.twocol main.wrap > .opener:first-child,
  body:not(.twocol) main.wrap.has-opener > .opener:first-child { margin-top: 3.5rem; }
}

/* ---- the opener's dividing rule ----
   Drawn as an inset line rather than a border on the standfirst, so it stops
   short of the top and bottom of the block instead of running edge to edge
   and meeting whatever rule sits above or below it. */
@media (min-width: 70rem) {
  body.twocol main.wrap > .opener .standfirst,
  body:not(.twocol) main.wrap.has-opener > .opener .standfirst {
    position: relative;
    border-left: 0;
  }
  body.twocol main.wrap > .opener .standfirst::before,
  body:not(.twocol) main.wrap.has-opener > .opener .standfirst::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.9rem;
    bottom: 0.9rem;
    border-left: 1px solid var(--rule);
  }
}

/* ---- the email button, with the address on its own line under it ---- */
.email-row {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}

/* ---- Native Plant Protections: a narrower title column ----
   18rem is the floor at which "Native Plant Protections" still sets on two
   lines, and it hands the sentence beside it 523px instead of 395px, taking
   it from six lines to four. Scoped to this page only. */
@media (min-width: 70rem) {
  body.protections main.wrap.has-opener > .opener h1 { flex: 0 1 18rem; }
}

/* ---- the Contact page in two columns ----
   The email block sits in the right margin beside the three bullets. */
@media (min-width: 70rem) {
  body.twocol main.wrap > .email-row {
    float: right;
    width: 20rem;
    margin: 0.4rem 0 1.5rem 2rem;
    clear: right;
    max-width: none;
  }
  /* the label is long for a 20rem column, so it sets a little smaller here
     and centres on its own two lines rather than overflowing */
  body.twocol main.wrap > .email-row .action.bright {
    display: block;
    text-align: center;
    font-size: 1.05rem;
  }
  body.twocol main.wrap > .email-row { align-items: stretch; }
}

/* ---- a box on the page's soft green ----
   The same sage and dark green ink as the mission and closing bands, for a
   note that offers a way forward rather than a warning. */
.sagebox {
  background: var(--sage);
  border-radius: 0.4rem;
  padding: 1.6rem 1.8rem 1.7rem;
  margin: 2.8rem 0 2.4rem;
}
.sagebox h3 { margin: 0 0 0.7rem; font-size: 1.3rem; color: #24503a; }
.sagebox p { margin: 0; color: #24503a; }
@media (max-width: 40rem) {
  .sagebox { padding: 1.2rem 1.2rem 1.3rem; border-radius: 0.3rem; }
}

/* the sage box in the right column, at the side-column width */
@media (min-width: 70rem) {
  body.twocol main.wrap > .sagebox {
    float: right;
    width: 20rem;
    margin: 0.2rem 0 1.5rem 2rem;
    clear: right;
    max-width: none;
    padding: 1.2rem 1.3rem 1.4rem;
  }
  body.twocol main.wrap > .sagebox h3 { font-size: 1.15rem; }
}

/* ---- arrow bullets ----
   The same arrow the buttons use, in place of a disc, so each item reads as
   something to act on. */
ul.arrows {
  list-style: none;
  padding-left: 0;
  margin: 1.4rem 0;
}
ul.arrows li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 1.1rem;
}
ul.arrows li:last-child { margin-bottom: 0; }
ul.arrows li::before {
  content: '\2192';
  position: absolute;
  left: 0.1rem;
  top: 0;
  color: var(--verde);
  font-weight: 600;
}

/* the Invasive Plants page takes the same red list markers as Desert Clearing */
body.invasives main.wrap li::marker { color: var(--ember); }

/* ---- the photo row at the top of the plant index ----
   Six square thumbnails across the full width, dropping to three and then
   two as the screen narrows. Decorative: the page's content is the list. */
.photostrip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.55rem;
  margin: 1.7rem 0 2.4rem;
}
.photostrip img {
  width: 100%;
  /* the width/height attributes act as style hints, so height must be
     released before aspect-ratio can square the thumbnail */
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border-radius: 0.25rem;
  mix-blend-mode: normal;
}
@media (max-width: 52rem) {
  .photostrip { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 30rem) {
  .photostrip { grid-template-columns: repeat(2, 1fr); gap: 0.45rem; }
}

/* ---- the salvage codes explain themselves ----
   Hover a code (or tap it on a phone) and its meaning appears. The wording
   lives here rather than on every one of the forty-odd spans, so the page
   stays small; the Key section above the list remains the version that is
   always readable, including to a screen reader. */
.code { position: relative; cursor: help; }
.code::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.45rem);
  transform: translateX(-50%);
  width: max-content;
  max-width: 17rem;
  padding: 0.4rem 0.6rem;
  background: var(--ink);
  color: #f6f8f4;
  font-size: 0.8rem;
  font-weight: 400;
  font-style: normal;
  line-height: 1.35;
  letter-spacing: 0;
  text-align: left;
  border-radius: 0.25rem;
  box-shadow: 0 2px 10px rgba(28, 33, 29, 0.22);
  z-index: 20;
  pointer-events: none;
  /* kept out of the layout entirely while hidden: left in it, the bubble
     pushed the page wide enough to scroll sideways on a phone */
  display: none;
}
.code:hover::after, .code:focus::after { display: block; }
/* the wording for each code */
.code-SR::after { content: 'Salvage Restricted \2014 permits and tags required to move'; }
.code-SA::after { content: 'Salvage Assessed \2014 permits required'; }
.code-HR::after { content: 'Harvest Restricted \2014 fruit, seed and byproduct harvest limited'; }
.code-PP::after { content: 'Protected Plant under the Pima County Native Plant Preservation Ordinance'; }
/* HR now has a colour of its own rather than borrowing SR\'s */
.code-HR { color: var(--ember); }
/* near the right edge the bubble would overflow, so those flip inward */
.species li:last-child .code::after { left: auto; right: 0; transform: none; }
/* the legend\'s own chips need no bubble: the wording is already beside them */
.legend .code::after { content: none; }

/* on a narrow screen the bubble hangs from the left of the code rather than
   centring on it, so it cannot run off the edge */
@media (max-width: 40rem) {
  .code::after {
    left: 0;
    right: auto;
    transform: none;
    max-width: min(15rem, 68vw);
  }
}

/* ---- a pair of photographs side by side ----
   Two pictures of the same subject that belong together; they stack on a
   narrow screen. Full width, under both columns. */
.photopair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1.8rem 0 2.2rem;
  clear: both;
}
.photopair figure { margin: 0; }
.photopair img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: 0.25rem;
  mix-blend-mode: normal;
}
.photopair figcaption {
  max-width: none;
  margin: 0.5rem 0 0;
  padding: 0;
  font-size: 0.9rem;
  color: var(--ink);
  text-align: left;
}
.credit, .credit-line {
  display: block;
  font-size: 0.8rem;
  font-style: italic;
  color: var(--soft);
  margin-top: 0.15rem;
}
.credit-line { margin: 0.6rem 0 2.2rem; text-align: right; }
/* on the Invasive Plants page the pair sits in the right column, one above
   the other, rather than running across the page */
@media (min-width: 70rem) {
  body.invasives main.wrap > .photopair {
    float: right;
    width: 20rem;
    max-width: none;
    grid-template-columns: 1fr;
    gap: 1.1rem;
    margin: 0.2rem 0 1.6rem 2rem;
    clear: right;
  }
}
@media (max-width: 46rem) {
  .photopair { grid-template-columns: 1fr; gap: 1.3rem; }
}

/* ---- the code key, folded away ----
   A plain <details>, so it works without script and opens for anyone who
   wants the wording spelled out rather than hovering each code. */
.keybox {
  border: 1px solid var(--rule);
  border-radius: 0.3rem;
  padding: 0 1rem;
  margin: 1.6rem 0 2.2rem;
  background: var(--paper);
}
.keybox summary {
  cursor: pointer;
  padding: 0.7rem 0;
  font-size: 1rem;
  color: var(--verde);
  list-style: none;
}
.keybox summary::-webkit-details-marker { display: none; }
.keybox summary::before {
  content: '+';
  display: inline-block;
  width: 1.1rem;
  font-weight: 500;
}
.keybox[open] summary::before { content: '\2013'; }
.keybox[open] summary { border-bottom: 1px solid var(--rule); }
.keybox > p { margin: 0.9rem 0 0.6rem; }
.keybox .legend { margin-bottom: 1rem; }

/* ---- the code key as a dialog ----
   The question carries the four codes themselves, so a reader sees what is
   being asked about before opening it. */
.keyopen {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
  background: none;
  border: 1px solid var(--rule);
  border-radius: 0.3rem;
  padding: 0.55rem 0.9rem;
  margin: 1.6rem 0 1.2rem;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--verde);
  cursor: pointer;
}
.keyopen:hover, .keyopen:focus-visible { border-color: var(--verde); background: var(--sage); }
.keyopen .code { margin: 0 0.08rem; }

.keydialog {
  border: 0;
  border-radius: 0.4rem;
  padding: 1.5rem 1.7rem 1.7rem;
  max-width: 34rem;
  width: calc(100% - 2.5rem);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 12px 44px rgba(28, 33, 29, 0.32);
}
.keydialog::backdrop { background: rgba(28, 33, 29, 0.45); }
.keydialog h2 { margin: 0 0 0.5rem; font-size: 1.3rem; font-weight: 400; color: var(--verde); }
.keydialog p { margin: 0 0 0.9rem; }
.keydialog .legend { margin: 0; }
.keyclose {
  float: right;
  background: none;
  border: 0;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--soft);
  cursor: pointer;
  padding: 0 0 0.3rem 0.6rem;
}
.keyclose:hover { color: var(--ink); }

/* a code in the list is now something you can click */
.species .code { cursor: pointer; }
/* no hover bubbles on the chips inside the question or the dialog: the
   wording is right there beside them */
.keyopen .code::after, .keydialog .code::after { content: none; }

/* the Suggest a Plant button sits against the right edge of the column,
   opposite the question about the codes */
.action.bright.suggest {
  display: block;
  width: max-content;
  max-width: 100%;
  margin-left: auto;
}

/* a photograph in the reading column: unlike the pencil drawings it must not
   be multiplied into the paper, which would tint it */
main.wrap figure.snapshot img { mix-blend-mode: normal; border-radius: 0.25rem; }
figure.snapshot figcaption { text-align: left; }

/* a sub-category inside a resources section: set under its parent heading
   rather than beside it */
main.wrap h4.subcat {
  font-size: 1rem;
  font-weight: 600;
  color: var(--soft);
  margin: 1.4rem 0 0.3rem 1.6rem;
}
main.wrap h4.subcat + ul.do { margin-left: 1.6rem; }

/* the link across to the Conservation Guide: the full step heading, so it
   is clear where it lands, set a little smaller than a page-wide sign-up */
.signup-button.guide-link {
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  line-height: 1.35;
  text-align: center;
  padding: 0.9rem 1.3rem;
  margin: 2rem 0 2.4rem;
  clear: both;
}

/* ---- the commitments, framed ----
   The list is the substance of this page, so it sits in a box of its own
   rather than running on as ordinary text. */
.commitbox {
  border: 1px solid var(--verde);
  border-radius: 0.35rem;
  padding: 1.25rem 1.5rem 1.4rem;
  margin: 1.6rem 0 2.2rem;
  background: var(--paper);
}
.commitbox > p:first-child { margin-top: 0; }
.commitbox ol { margin-bottom: 0; }
@media (min-width: 70rem) {
  /* match the reading column rather than the full two-column width */
  body.twocol main.wrap > .commitbox { max-width: 34rem; }
}
@media (max-width: 40rem) {
  .commitbox { padding: 1rem 1.1rem 1.2rem; }
}

/* numbered circles in the commitments box, matching the badges on the
   Conservation Guide's steps */
.commitbox ol.do {
  list-style: none;
  counter-reset: commit;
  padding-left: 0;
  margin: 0.9rem 0 0;
}
.commitbox ol.do li {
  counter-increment: commit;
  position: relative;
  padding: 0 0 0 2.5rem;
  margin: 0 0 0.75rem;
}
.commitbox ol.do li:last-child { margin-bottom: 0; }
.commitbox ol.do li::before {
  content: counter(commit);
  position: absolute;
  left: 0;
  top: 0.08em;
  width: 1.7rem;
  height: 1.7rem;
  border: 0;
  border-radius: 50%;
  background: var(--verde);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  display: grid;
  place-items: center;
}

/* ---- the three red doors on the Invasive Plants page ----
   In the side column they sat only 1rem apart, which read as one block
   rather than three separate invitations. An open door still joins flush
   to the panel it opens. */
@media (min-width: 70rem) {
  body.twocol main.wrap > .index-door { margin-bottom: 2.4rem; }
  body.twocol main.wrap > .door-btn[aria-expanded="true"] { margin-bottom: 0; }
}

/* ---- the one line to take away from a page ----
   A tinted panel with the page's own accent down the side: louder than a pull
   quote, quieter than a heading, and it holds a full statement rather than a
   fragment. Contrast measured at 7.6:1 green, 9.0:1 ember. */
.takeaway {
  margin: 2.2rem 0;
  padding: 1.15rem 1.35rem;
  border-left: 4px solid var(--verde);
  border-radius: 0 0.3rem 0.3rem 0;
  background: var(--sage);
  color: #24503a;
  font-size: 1.15rem;
  line-height: 1.5;
}
body.invasives .takeaway {
  border-left-color: var(--ember);
  background: #f7ece8;
  color: #6b2d1c;
}

/* the heading that opens the species list, in the page's own ember */
body.invasives .group .group-title {
  margin: 0 0 1rem;
  color: var(--ember);
}

/* a red-outlined note inside the species box */
body.invasives .group .classnote {
  border: 1px solid var(--ember);
  border-radius: 0.3rem;
  padding: 1.1rem 1.25rem;
  margin: 0 0 1.5rem;
}
body.invasives .group .classnote > p:last-child { margin-bottom: 0; }

/* ---- the noxious-weed class labels and their popups ----
   The class name is a button; its definition opens in a small panel rather
   than sitting above every list as a block of regulation. */
.wclass .classbtn {
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  background: none;
  border: 1px solid var(--ember);
  color: var(--ember);
  border-radius: 0.3rem;
  padding: 0.3rem 0.85rem;
}
.wclass .classbtn:hover, .wclass .classbtn:focus-visible { background: #f7ece8; }
.classpop {
  border: 0;
  border-radius: 0.4rem;
  padding: 1.4rem 1.6rem 1.5rem;
  max-width: 32rem;
  width: calc(100% - 2.5rem);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 12px 44px rgba(28, 33, 29, 0.32);
}
.classpop p { margin: 0; font-size: 1.02rem; line-height: 1.55; }
.classpop strong { color: var(--ember); }
.classpop::backdrop { background: rgba(28, 33, 29, 0.45); }
.popclose {
  float: right;
  background: none;
  border: 0;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--soft);
  cursor: pointer;
  padding: 0 0 0.3rem 0.6rem;
}
.popclose:hover { color: var(--ink); }
/* a browser without the popover API ignores the attribute and would show the
   panel inline, so it is hidden here and shown by the fallback class instead */
.classpop { display: none; }
.classpop.is-open {
  display: block;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 60;
}
@supports selector(:popover-open) {
  .classpop { display: revert; }
}

/* a run-in label at the head of a resource item, set to match the Books:
   sub-heading beneath it so the categories read as one set */
main.wrap .lbl { font-weight: 600; color: var(--soft); }