@font-face { font-family: "Newsreader"; src: url(/assets/fonts/newsreader-normal-300-700.woff2) format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url(/assets/fonts/newsreader-italic-300-700.woff2) format("woff2"); font-weight: 300 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Albert Sans"; src: url(/assets/fonts/albert-sans-normal-300-700.woff2) format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url(/assets/fonts/dm-mono-normal-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url(/assets/fonts/dm-mono-normal-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
  :root {
    --bg: #fdfdfb;
    --ink: #1b1a17;
    --soft: #6d6a63;
    --line: #e8e6e0;
    --red: #c8201a;
    --f-display: "Newsreader", Georgia, serif;
    --f-body: "Albert Sans", system-ui, sans-serif;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; background: var(--bg); color: var(--ink); }
  body { font: 400 1rem/1.55 var(--f-body); min-height: 100vh; overflow-x: hidden; }

  .lb-head { max-width: 640px; margin: 0 auto; padding: 14vh 20px 6vh; text-align: center; }
  .lb-head h1 { font: 400 clamp(2.6rem, 7vw, 4.6rem)/1 var(--f-display); margin: 0 0 .4em; letter-spacing: -.01em; }
  .lb-head h1 em { color: var(--red); }
  .lb-head p { color: var(--soft); margin: 0; }

  /* Pockets of information: small, scattered, quiet until opened */
  .lb-field {
    position: relative; max-width: 1100px; margin: 0 auto; padding: 0 20px 18vh;
    display: grid; grid-template-columns: repeat(12, 1fr); gap: 7vh 20px;
  }
  .pk {
    grid-column: span 4; align-self: start;
    border: 1px solid var(--line); border-radius: 14px; background: #fff;
    padding: 16px 18px; transition: border-color .4s, box-shadow .4s, transform .4s, opacity .28s;
  }
  .pk:nth-child(1) { grid-column: 2 / span 3; }
  .pk:nth-child(2) { grid-column: 7 / span 3; margin-top: 8vh; }
  .pk:nth-child(3) { grid-column: 10 / span 3; margin-top: -2vh; }
  .pk:nth-child(4) { grid-column: 1 / span 3; margin-top: 4vh; }
  .pk:nth-child(5) { grid-column: 5 / span 3; margin-top: 12vh; }
  .pk:nth-child(6) { grid-column: 9 / span 3; margin-top: 6vh; }

  /* Perches: things on the page the insects can land on */
  .pk { position: relative; z-index: 1; }
  .pk:nth-child(-n+3) { grid-row: 1; }
  .pk:nth-child(n+4):nth-child(-n+6) { grid-row: 2; }
  .perch { align-self: start; pointer-events: none; z-index: 0; filter: drop-shadow(0 6px 8px rgba(40,30,10,.13)); }
  .perch svg { display: block; width: 100%; height: auto; }
  .perch--daisy  { grid-row: 1; grid-column: 5 / span 2; width: 120px; justify-self: center; margin-top: 2vh; }
  .perch--cosmos { grid-row: 3; grid-column: 2 / span 2; width: 128px; justify-self: center; transform: rotate(14deg); }
  .perch--leaf   { grid-row: 2; grid-column: 8 / span 1; width: 190px; justify-self: center; margin-top: 2vh; transform: rotate(-24deg); }
  .perch--twig   { grid-row: 3; grid-column: 6 / span 4; width: 270px; justify-self: center; margin-top: 2vh; transform: rotate(-6deg); }
  .perch--clover { grid-row: 2; grid-column: 4 / span 1; width: 84px; justify-self: center; margin-top: 22vh; transform: rotate(-18deg); }
  .perch--daisy2 { grid-row: 3; grid-column: 11 / span 2; width: 96px; justify-self: center; transform: rotate(30deg); }

  .friends {
    margin-top: 22px; border: 1px solid var(--ink); background: var(--ink); color: #fff; cursor: pointer;
    font: 500 .95rem/1 var(--f-body); padding: 12px 20px; border-radius: 999px; transition: background .25s, color .25s;
  }
  .friends:hover { background: #fff; color: var(--ink); }
  .friends[aria-pressed="true"] { background: #fff; color: var(--ink); }
  .friends:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
  .pk.is-swapping { opacity: 0; transform: translateY(6px); }
  .pk summary { list-style: none; cursor: pointer; }
  .pk summary::-webkit-details-marker { display: none; }
  .pk__k { display: block; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--soft); }
  .pk__t { display: block; font: 400 1.45rem/1.15 var(--f-display); margin-top: 4px; }
  .pk__t::after { content: " +"; color: var(--red); font-family: var(--f-body); font-size: .9em; }
  .pk[open] .pk__t::after { content: " –"; }
  .pk p { margin: 10px 0 0; color: #3d3b36; font-size: .95rem; }
  .pk:hover, .pk[open] { border-color: #d9d5cc; box-shadow: 0 10px 30px -18px rgba(0,0,0,.25); }
  /* The ladybird is sitting on this one */
  .pk.is-visited { border-color: rgba(200,32,26,.35); box-shadow: 0 0 0 4px rgba(200,32,26,.06); }




  /* Lower sections */
  .sec { position: relative; padding: 4vh 20px 16vh; }
  .sec__in { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; }
  .sec__in--narrow { max-width: 780px; text-align: center; }
  .sec__k { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--soft); margin: 0 0 8px; }
  .sec h2 { font: 400 clamp(2rem, 4.6vw, 3.2rem)/1.05 var(--f-display); margin: 0 0 28px; letter-spacing: -.01em; }
  .sec h2 em { color: var(--red); }
  .sec__lede { color: var(--soft); max-width: 560px; margin: -12px auto 32px; }
  .sec--who .sec__in, .sec--tips .sec__in { text-align: left; }

  .who-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .who { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px 20px; display: flex; flex-direction: column; transition: border-color .4s, box-shadow .4s; }
  .who__pic { width: 120px; height: 120px; margin: 0 auto 8px; display: block; }
  .who h3 { font: 400 1.5rem/1.1 var(--f-display); margin: 0; }
  .who__latin { font-style: italic; color: var(--soft); font-size: .85rem; margin: 2px 0 12px; }
  .who dl { margin: 0 0 12px; display: grid; gap: 6px; }
  .who dl div { display: grid; grid-template-columns: 84px 1fr; gap: 8px; font-size: .88rem; border-top: 1px solid var(--line); padding-top: 6px; }
  .who dt { color: var(--soft); }
  .who dd { margin: 0; }
  .who > p:not(.who__latin) { font-size: .92rem; color: #3d3b36; margin: 0 0 16px; }
  .who__fly { margin-top: auto; align-self: flex-start; border: 1px solid var(--ink); background: #fff; color: var(--ink); border-radius: 999px; padding: 9px 16px; font: 500 .85rem/1 var(--f-body); cursor: pointer; transition: background .25s, color .25s; }
  .who__fly:hover, .who.is-lead .who__fly { background: var(--ink); color: #fff; }
  .who.is-lead { border-color: rgba(200,32,26,.35); }
  .who.is-lead .who__fly::before { content: "Following you"; }
  .who.is-lead .who__fly { font-size: 0; }
  .who.is-lead .who__fly::before { font-size: .85rem; }
  .who__fly:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

  .tl { display: grid; gap: 10px; text-align: left; }
  .tl-row { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 14px; padding: 6px 10px; border-radius: 12px; transition: background .4s; }
  .tl-row.is-lead { background: #f7e9e7; }
  .tl-name { font: 400 1.15rem/1 var(--f-display); }
  .tl-bar { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; }
  .tl-m { height: 22px; border-radius: 6px; background: #efede7; }
  .tl-m.on { background: linear-gradient(180deg, #8cc153, #5f9e35); }
  .tl-row.is-lead .tl-m.on { background: linear-gradient(180deg, #e2503f, #b8221a); }
  .tl-head { padding-top: 0; padding-bottom: 0; }
  .tl-l { text-align: center; font-size: .72rem; letter-spacing: .1em; color: var(--soft); }

  .tip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 28px; }
  .tip { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; transition: border-color .4s, box-shadow .4s; }
  .tip:nth-child(3n+2) { margin-top: 4vh; }
  .tip__k { display: block; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--soft); }
  .tip h3 { font: 400 1.4rem/1.15 var(--f-display); margin: 4px 0 8px; }
  .tip p { margin: 0; color: #3d3b36; font-size: .95rem; }
  .who.is-visited, .tip.is-visited { border-color: rgba(200,32,26,.35); box-shadow: 0 0 0 4px rgba(200,32,26,.06); }

  .sec--end { padding-bottom: 10vh; }
  .sec--end h2 { font-size: clamp(2.4rem, 6vw, 4rem); }
  .top-link { display: inline-block; color: var(--ink); border: 1px solid var(--ink); border-radius: 999px; padding: 12px 20px; text-decoration: none; font-weight: 500; transition: background .25s, color .25s; }
  .top-link:hover { background: var(--ink); color: #fff; }
  .top-link:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

  /* perches between and beside the lower sections */
  .perch--low { position: absolute; }
  .pl-1 { width: 110px; top: -40px; left: max(2%, calc(50% - 600px)); transform: rotate(-10deg); }
  .pl-2 { width: 230px; top: 10px; right: max(1%, calc(50% - 620px)); transform: rotate(-8deg); }
  .pl-3 { width: 120px; top: 34%; left: max(2%, calc(50% - 560px)); transform: rotate(20deg); }
  .pl-4 { width: 180px; top: 58%; right: max(1%, calc(50% - 580px)); transform: rotate(-150deg); }
  .pl-5 { width: 80px; top: -20px; right: max(4%, calc(50% - 520px)); transform: rotate(12deg); }
  .pl-6 { width: 100px; bottom: 6vh; left: max(3%, calc(50% - 480px)); transform: rotate(-24deg); }
  .pl-7 { width: 170px; top: 6vh; left: max(1%, calc(50% - 520px)); transform: rotate(-20deg); }
  .pl-8 { width: 116px; top: 2vh; right: max(3%, calc(50% - 480px)); transform: rotate(8deg); }
  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

  @media (max-width: 1000px) {
    .who-grid { grid-template-columns: repeat(2, 1fr); }
    .tip-grid { grid-template-columns: repeat(2, 1fr); }
    .tip:nth-child(3n+2) { margin-top: 0; }
    .tip:nth-child(even) { margin-top: 4vh; }
  }

  #bug-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 70; }

  @media (max-width: 800px) {
    .lb-field { grid-template-columns: 1fr; gap: 18px; }
    .pk, .pk:nth-child(n) { grid-column: auto; margin-top: 0; }
    .pk:nth-child(even) { margin-left: 12%; }
    .pk:nth-child(odd) { margin-right: 12%; }
    .lb-field .pk:nth-child(n) { grid-row: auto; }
    .perch { position: absolute; margin: 0 !important; }
    .perch--daisy  { width: 74px; top: 22px; right: -4px; }
    .perch--leaf   { width: 104px; top: 318px; left: -18px; }
    .perch--clover { width: 56px; top: 440px; right: 2px; }
    .perch--cosmos, .perch--twig, .perch--daisy2 { display: none; }
    .who-grid, .tip-grid { grid-template-columns: 1fr; }
    .tip:nth-child(n) { margin-top: 0; }
    .tl-row { grid-template-columns: 1fr; gap: 6px; }
    .tl-head .tl-name { display: none; }
    .tl-m { height: 16px; }
    .sec { padding-bottom: 10vh; }
    .perch--low { display: none; }
    .pl-1, .pl-5, .pl-8 { display: block; }
    .pl-1 { width: 70px; top: -26px; left: auto; right: 10px; }
    .pl-5 { width: 56px; top: -10px; right: 14px; }
    .pl-8 { width: 74px; top: -40px; right: 12px; }
  }

/* ===================== Standalone site additions ===================== */
:root { --card: #fff; --mono: "DM Mono", ui-monospace, monospace; }
.pk__k, .sec__k, .tip__k, .tl-l, .pick__l { font-family: var(--mono); letter-spacing: .1em; }
.pk, .who, .tip { background: var(--card); }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--ink); color: var(--bg); padding: 10px 14px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 8px; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.site-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1180px; margin: 0 auto; padding: 18px 20px; position: relative; z-index: 5; }
.site-head__name { font: 400 1.5rem/1 var(--f-display); text-decoration: none; letter-spacing: -.01em; }
.site-head__name em { color: var(--red); }
.site-head nav { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.site-head nav a { text-decoration: none; font-size: .92rem; padding: 8px 12px; border-radius: 999px; }
.site-head nav a:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.site-head nav a[aria-current="page"] { background: var(--ink); color: var(--bg); }
.lb-head { padding-top: 8vh; max-width: 860px; }
.lb-head p { margin: 0 auto; max-width: 600px; }
.lb-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
.lb-btns .friends { margin-top: 0; }
.lights { border: 1px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; font: 500 .95rem/1 var(--f-body); padding: 12px 20px; border-radius: 999px; }
.lights:hover { background: var(--ink); color: var(--bg); }

/* "From egg to wing" teaser */
.sec--lc { padding-top: 0; padding-bottom: 12vh; }
.lc-card { display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: center; max-width: 860px; margin: 0 auto; text-decoration: none; color: inherit;
  background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 22px 30px 22px 22px; transition: box-shadow .3s, border-color .3s; }
.lc-card:hover { border-color: #d9d5cc; box-shadow: 0 16px 40px -26px rgba(0,0,0,.35); }
.lc-card canvas { width: 220px; height: 220px; background: radial-gradient(circle, #f7e4ea 0%, transparent 70%); border-radius: 50%; }
.lc-card__h { display: block; font: 400 clamp(2rem, 4vw, 2.8rem)/1.05 var(--f-display); margin: 4px 0 10px; }
.lc-card__p { display: block; color: var(--soft); }
.lc-card__go { display: inline-block; margin-top: 14px; font-weight: 600; color: var(--red); }

.who-grp { font: 400 1.6rem/1.1 var(--f-display); margin: 40px 0 6px; }
.who-grp:first-of-type { margin-top: 8px; }
.who-note { color: var(--soft); margin: 0 0 14px; max-width: 640px; }
.who-grid { margin-top: 14px; }
.tl-name { font-size: 1.05rem; }

/* bottom bar + chooser sheet */
.pick { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 40; display: flex; align-items: center; gap: 14px;
  padding: 9px 9px 9px 12px; background: color-mix(in srgb, var(--card) 94%, transparent); border: 1.5px solid var(--red); border-radius: 999px;
  box-shadow: 0 10px 30px -16px rgba(0,0,0,.3); backdrop-filter: blur(8px); transition: opacity .3s, transform .3s; max-width: calc(100vw - 24px); }
.pick.is-away { opacity: 0; pointer-events: none; transform: translate(-50%, 24px); }
.pick__now { width: 56px; height: 56px; }
.pick__txt { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.pick__l { font-size: .7rem; text-transform: uppercase; color: var(--soft); white-space: nowrap; }
.pick__name { font: 400 1.45rem/1.1 var(--f-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 44vw; }
.pick__open { border: 0; background: var(--ink); color: var(--bg); border-radius: 999px; padding: 16px 26px; font: 600 1.05rem/1 var(--f-body); cursor: pointer; white-space: nowrap;
  transition: background .2s, transform .2s; }
.pick__open::after { content: " ▴"; font-size: .8em; }
.pick__open:hover { background: var(--red); color: #fff; transform: translateY(-1px); }
.sheet { position: fixed; inset: 0; z-index: 80; background: rgba(20,18,14,.35); display: grid; place-items: end center; padding: 16px; }
.sheet[hidden] { display: none; }
html.sheet-open, html.sheet-open body { overflow: hidden; }
.sheet, .sheet__box { overscroll-behavior: contain; }
.sheet__box { background: var(--bg); color: var(--ink); width: min(1000px, 100%); max-height: min(82vh, 820px); overflow: auto; border-radius: 22px; padding: 22px 24px 28px;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.5); animation: sheet-in .28s cubic-bezier(.2,.8,.2,1); }
@keyframes sheet-in { from { transform: translateY(30px); opacity: 0; } }
.sheet__top { position: sticky; top: -22px; background: var(--bg); padding: 4px 0 12px; z-index: 1; }
.sheet__top h2 { font: 400 1.8rem/1 var(--f-display); margin: 0; }
.sheet__close { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.sheet__grp h3 { font-family: var(--mono); font-weight: 500; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--red); margin: 18px 0 8px; }
.sheet__note { margin: -4px 0 10px; color: var(--soft); font-size: .9rem; }
.sheet__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.sheet__grid button { display: grid; justify-items: center; text-align: center; gap: 2px; padding: 10px 8px 12px; border: 1px solid var(--line); border-radius: 16px;
  background: var(--card); color: var(--ink); cursor: pointer; font: inherit; transition: border-color .2s, background .2s; }
.sheet__grid button:hover { border-color: #cfcabe; }
.sheet__grid button[aria-pressed="true"] { border-color: rgba(200,32,26,.5); background: color-mix(in srgb, var(--red) 7%, var(--card)); }
.sheet__grid canvas { width: 64px; height: 64px; }
.sheet__n { font: 400 1.12rem/1.1 var(--f-display); }
.sheet__h { font-size: .76rem; color: var(--soft); line-height: 1.3; }

.site-foot { position: relative; z-index: 2; max-width: 860px; margin: 0 auto; padding: 40px 20px 130px; text-align: center; color: var(--soft); border-top: 1px solid var(--line); }
.site-foot__name { font: 400 1.6rem/1 var(--f-display); color: var(--ink); margin: 0 0 10px; }
.site-foot__name em { color: var(--red); }
.site-foot nav { display: flex; gap: 18px; justify-content: center; margin: 14px 0; flex-wrap: wrap; }
.site-foot__by { font-size: .88rem; }

/* night: the page goes dark and your pointer becomes a lamp */
.lamp { position: fixed; inset: 0; pointer-events: none; z-index: 60; opacity: 0; transition: opacity .6s;
  background: radial-gradient(circle 260px at var(--lx, 50%) var(--ly, 40%), rgba(255,214,140,.2), rgba(255,214,140,.06) 45%, transparent 75%); }
html.night { --bg: #0d1520; --ink: #e8ecef; --soft: #9eaab5; --line: #233140; --card: #131e2a; --red: #ff7d6e; }
html.night body { background: var(--bg); color: var(--ink); }
html.night .lamp { opacity: 1; }
html.night .perch { filter: brightness(.7) saturate(.85) drop-shadow(0 6px 8px rgba(0,0,0,.3)); }
html.night .pk p, html.night .who > p:not(.who__latin), html.night .tip p { color: #c6cfd6; }
html.night .tl-m:not(.on) { background: #1d2a37; }
html.night .tl-row.is-lead { background: #2a1d22; }
html.night .friends { background: var(--ink); color: var(--bg); border-color: var(--ink); }
html.night .who__fly { background: transparent; color: var(--ink); border-color: var(--ink); }
body { transition: background-color .6s, color .6s; }

@media (max-width: 800px) {
  .site-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .lc-card { grid-template-columns: 1fr; text-align: center; padding: 18px; }
  .lc-card canvas { margin: 0 auto; width: 160px; height: 160px; }
  .pick { gap: 10px; padding: 7px 7px 7px 9px; bottom: 12px; }
  .pick__now { width: 46px; height: 46px; }
  .pick__name { max-width: 34vw; font-size: 1.25rem; }
  .pick__open { padding: 14px 20px; font-size: 1rem; }
}

/* ===================== Habitat pages ===================== */
.sheet__row { display: flex; justify-content: space-between; align-items: center; }
.sheet__tabs { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.sheet__tabs button { border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 999px; padding: 9px 18px; font: 500 .95rem/1 var(--f-body); cursor: pointer; }
.sheet__tabs button:hover { border-color: #cfcabe; }
.sheet__tabs button[aria-selected="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.sheet__panel[hidden] { display: none; }
.sheet__panel > .sheet__note { margin: 14px 0 0; }
.sheet__box { min-height: min(60vh, 520px); }

/* pond: the page is water */
body.pond { --bg: #d7ebe8; --line: #bcd7d3; --soft: #55706d; background: linear-gradient(180deg, #e1f1ee 0%, #cfe6e3 45%, #c4dfdd 100%) fixed; }
body.pond .site-foot { border-top-color: #b4d2ce; }
body.pond .perch { filter: drop-shadow(0 5px 7px rgba(20,60,60,.2)); }
body.pond .pk, body.pond .who, body.pond .tip { background: rgba(255,255,255,.92); }
body.pond .tl-m:not(.on) { background: #c3dbd8; }

/* night page: always dark */
html.night body.nightpage { background: radial-gradient(1200px 700px at 70% -10%, #16233a 0%, #0d1520 60%) fixed, #0d1520; }

@media (max-width: 800px) {
  .site-head nav { gap: 2px; }
  .site-head nav a { padding: 7px 10px; font-size: .88rem; }
}

/* ===================== Photo gallery pop-up ===================== */
.gallery-btn { border: 1px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; font: 500 .95rem/1 var(--f-body); padding: 12px 20px; border-radius: 999px; }
.gallery-btn:hover { background: var(--ink); color: var(--bg); }
.gal { position: fixed; inset: 0; z-index: 80; background: rgba(20,18,14,.35); display: grid; place-items: end center; padding: 16px; overscroll-behavior: contain; }
.gal[hidden] { display: none; }
.gal__box { background: var(--bg); color: var(--ink); width: min(1000px, 100%); max-height: min(86vh, 900px); overflow: auto; border-radius: 22px; padding: 22px 24px 28px;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.5); animation: sheet-in .28s cubic-bezier(.2,.8,.2,1); overscroll-behavior: contain; }
.gal__box .sheet__note { margin: 8px 0 0; }
.gal__grp h3 { font: 400 1.35rem/1.1 var(--f-display); margin: 22px 0 8px; }
.gal__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gal__thumb { padding: 0; border: 0; background: var(--line); border-radius: 12px; overflow: hidden; cursor: zoom-in; aspect-ratio: 4 / 3; }
.gal__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.gal__thumb:hover img { transform: scale(1.05); }
.gal__credits { margin: 22px 0 0; font-size: .82rem; color: var(--soft); }
.gal__view { position: fixed; inset: 0; z-index: 2; background: rgba(12,12,10,.9); display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; padding: 16px 8px; }
.gal__view[hidden] { display: none; }
.gal__view figure { margin: 0; display: grid; justify-items: center; gap: 10px; min-width: 0; }
.gal__view img { max-width: 100%; max-height: calc(100vh - 120px); border-radius: 12px; box-shadow: 0 20px 60px -20px #000; }
.gal__view figcaption { color: #f1efe9; text-align: center; font-size: .88rem; }
.gal__name { display: block; font: 400 1.3rem/1.2 var(--f-display); }
.gal__by a { color: inherit; }
.gal__nav { width: 48px; height: 48px; justify-self: center; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); background: rgba(255,255,255,.1); color: #fff; font-size: 1.7rem; line-height: 1; cursor: pointer; }
.gal__nav:hover { background: rgba(255,255,255,.25); }
.gal__back { position: absolute; top: 14px; right: 14px; }
@media (max-width: 800px) {
  .gal { padding: 10px; }
  .gal__box { padding: 18px 14px 22px; }
  .gal__view { grid-template-columns: 1fr; padding: 12px; }
  .gal__nav { position: absolute; bottom: 14px; }
  .gal__prev { left: 14px; } .gal__next { right: 14px; }
  .gal__view img { max-height: calc(100vh - 190px); }
}

/* ===================== Pond: more movement ===================== */
html.water { background: linear-gradient(180deg, #e1f1ee 0%, #cfe6e3 45%, #c4dfdd 100%) fixed; }
html.water body.pond { background: transparent; }
.water-fx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; opacity: .5; filter: blur(9px); }
@keyframes pad-bob { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 3px 6px; rotate: 2.5deg; } }
body.pond .perch { animation: pad-bob 6s ease-in-out infinite; }
body.pond .perch:nth-of-type(2n) { animation-duration: 7.6s; animation-delay: -2.4s; }
body.pond .perch:nth-of-type(3n) { animation-duration: 5.2s; animation-delay: -1.1s; }
@media (prefers-reduced-motion: reduce) { body.pond .perch { animation: none; } }

/* ===================== Weather ===================== */
#wx-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 72; }
.wx { margin: 26px auto 0; max-width: 640px; }
.wx[hidden] { display: none; }
.lb-head .wx__now { margin: 0; font-size: .95rem; color: var(--ink); }
.wx__place { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--soft); margin-right: 6px; }
.wx__txt { font-weight: 600; }
.lb-head .wx__mood { margin: 4px auto 12px; font: 400 1.25rem/1.25 var(--f-display); color: var(--ink); max-width: 560px; min-height: 1.25em; }
.wx__sky { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; }
.wx__l { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--red); margin-right: 4px; }
.wx__sky button { border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 999px; padding: 7px 13px; font: 500 .84rem/1 var(--f-body); cursor: pointer; }
.wx__sky button:hover { border-color: #cfcabe; }
.wx__sky button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
/* a warm glow in the corner when the sun is out */
html.wx-sun:not(.night) body::before { content: ""; position: fixed; top: -22vmin; right: -22vmin; width: 70vmin; height: 70vmin; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(255,214,120,.5) 0%, rgba(255,214,120,.18) 40%, rgba(255,214,120,0) 70%); }
/* things on the page stir in a strong wind */
@keyframes wx-sway { 0%, 100% { rotate: -2.5deg; } 50% { rotate: 3deg; } }
html.wx-windy .perch { animation: wx-sway 1.1s ease-in-out infinite; }
html.wx-windy .perch:nth-of-type(2n) { animation-duration: 1.4s; animation-delay: -.5s; }
@media (prefers-reduced-motion: reduce) { html.wx-windy .perch { animation: none; } }

/* ===================== Seashore: a rock pool ===================== */
body.shore { --bg: #dcecec; --line: #bdd6d8; --soft: #50696c; }
html.water:has(body.shore) { background: linear-gradient(180deg, #e6f2f0 0%, #d2e8ea 40%, #c3dfe3 75%, #d9e2cf 100%) fixed; }
html.water body.shore { background: transparent; }
body.shore .site-foot { border-top-color: #b4d0d2; }
body.shore .perch { filter: drop-shadow(0 5px 7px rgba(20,50,60,.25)); }
body.shore .pk, body.shore .who, body.shore .tip { background: rgba(255,255,255,.92); }
body.shore .tl-m:not(.on) { background: #c2d9db; }
/* seaweed and anemones sway with the water; rocks and shells stay put */
@keyframes weed-sway { 0%, 100% { rotate: -2.5deg; translate: 0 0; } 50% { rotate: 3deg; translate: 4px 2px; } }
body.shore .perch[data-kind="wrack"], body.shore .perch[data-kind="kelp"] { animation: weed-sway 7s ease-in-out infinite; transform-origin: 4% 50%; }
body.shore .perch[data-kind="kelp"] { animation-duration: 9s; animation-delay: -3s; }
@keyframes anem-breathe { 0%, 100% { scale: 1; } 50% { scale: 1.06; } }
body.shore .perch[data-kind="anemone"] { animation: anem-breathe 5s ease-in-out infinite; }
/* the tide: every so often a thin sheet of foam slides in over the pool and drains away */
.tide { position: fixed; left: -5%; right: -5%; bottom: -30vh; height: 75vh; z-index: -1; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0, rgba(255,255,255,.75) 5%, rgba(255,255,255,.32) 9%, rgba(214,236,238,.3) 30%, rgba(214,236,238,.42) 100%);
  border-radius: 46% 54% 0 0 / 9% 7% 0 0; animation: tide-in 19s ease-in-out infinite; }
@keyframes tide-in { 0%, 34% { transform: translateY(70vh); opacity: 0; } 42% { opacity: 1; } 60% { transform: translateY(8vh) skewX(-2deg); opacity: 1; } 88% { opacity: .5; } 100% { transform: translateY(70vh); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { body.shore .perch { animation: none; } .tide { display: none; } }
/* the newer sections close up the room the garden pages leave under the cards, and keep the low decorations clear of the next heading */
@media (min-width: 801px) {
  :is(body.shore, body.woodland, body.logpage, body.tight) .lb-field { padding-bottom: 5vh; row-gap: 4vh; }
  :is(body.shore, body.woodland, body.logpage, body.tight) :is(.perch--cosmos, .perch--twig, .perch--daisy2) { margin-top: -3vh; }
  :is(body.shore, body.woodland, body.logpage, body.tight) .sec--who { padding-top: 0; }
  :is(body.shore, body.woodland, body.logpage, body.tight) .pl-1 { top: -120px; }
  :is(body.shore, body.woodland, body.logpage, body.tight) .pl-2 { top: -90px; }
}

/* ===================== Woodland: the woodland floor ===================== */
body.woodland { --bg: #f3f4ea; --line: #dcdfcb; background: radial-gradient(900px 600px at 82% -8%, #fbf3cf 0%, transparent 60%), linear-gradient(180deg, #f7f7ef 0%, #eef0e2 55%, #e6ead6 100%) fixed; }
body.woodland .perch { filter: drop-shadow(0 5px 7px rgba(40,40,10,.2)); }
body.woodland .tl-m:not(.on) { background: #dfe2cf; }

/* phones: the section menu is one row you can swipe sideways (there are too many sections to wrap neatly) */
@media (max-width: 800px) {
  .site-head nav { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; max-width: 100%; width: 100%; scrollbar-width: none; -webkit-overflow-scrolling: touch; position: relative;
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%); padding-right: 24px; }
  .site-head nav::-webkit-scrollbar { display: none; }
  .site-head nav a { flex: none; white-space: nowrap; }
}

/* ===================== Under a log: damp earth ===================== */
body.logpage { --bg: #efe7da; --line: #d9ccb8; --soft: #6a5e4e; background: radial-gradient(1000px 700px at 20% 0%, #f6efe2 0%, transparent 60%), linear-gradient(180deg, #f2eadc 0%, #e8dcc8 55%, #dccdb4 100%) fixed; }
body.logpage .perch { filter: drop-shadow(0 5px 7px rgba(50,34,14,.25)); }
body.logpage .tl-m:not(.on) { background: #dccfba; }

/* ===================== Spreading the decorations evenly (desktop) =====================
   They used to bunch in a third row under the cards. Now: two in the first row, three in the second, one below. */
@media (min-width: 801px) {
  .lb-field .perch--cosmos { grid-row: 1; grid-column: 11 / span 2; align-self: end; justify-self: center; margin-top: 0; margin-bottom: -7vh; }
  .lb-field .perch--daisy2 { grid-row: 2; grid-column: 12 / span 1; justify-self: start; align-self: start; margin-top: 15vh; }
  .lb-field .perch--daisy { grid-column: 5 / span 2; margin-top: 0; }
  .lb-field .perch--twig { grid-row: 3; grid-column: 5 / span 5; justify-self: center; margin-top: -2vh; }
  .lb-field .perch--clover { margin-top: 1vh; }
  :is(body.shore, body.woodland, body.logpage, body.tight) :is(.perch--cosmos, .perch--daisy2) { margin-top: 0; }
  :is(body.shore, body.woodland, body.logpage, body.tight) .perch--daisy2 { margin-top: 15vh; }
}

/* ===================== The top menu stays put as you scroll ===================== */
.site-head { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--bg) 92%, transparent); box-shadow: 0 0 0 100vmax color-mix(in srgb, var(--bg) 92%, transparent); clip-path: inset(0 -100vmax); padding-top: 12px; padding-bottom: 12px; }
@media (max-width: 800px) { .site-head { padding-top: 10px; padding-bottom: 8px; gap: 6px; } .site-head__name { font-size: 1.25rem; } }

/* ===================== Tiny World: the magnifying glass page ===================== */
body.tinypage { --bg: #f1ede4; --line: #ddd5c6; background: linear-gradient(180deg, #f6f3ec 0%, #ece6d9 100%) fixed; }
body.tinypage .pick, body.tinypage #bug-canvas { display: none; }
.tw-head h1 { max-width: 16ch; margin-left: auto; margin-right: auto; }
.tw-wrap { max-width: 1240px; margin: 0 auto; padding: 0 20px; display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 22px; align-items: start; }
.tw-stage { position: relative; aspect-ratio: 16 / 10; border-radius: 22px; overflow: hidden; background: #6c5640; box-shadow: 0 30px 60px -34px rgba(40,26,10,.6), 0 0 0 1px rgba(60,40,20,.25); cursor: none; touch-action: pan-y; outline-offset: 4px; }
.tw-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tw-lens { position: absolute; left: 0; top: 0; border-radius: 50%; touch-action: none; }
.tw-side { position: sticky; top: 84px; }
.tw-count { font: 500 .78rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--red); margin: 4px 0 10px; }
.tw-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 20px 22px 22px; min-height: 240px; }
.tw-card.is-new { animation: tw-pop .5s cubic-bezier(.2,.9,.3,1.3); }
@keyframes tw-pop { from { transform: scale(.94); box-shadow: 0 0 0 6px rgba(200,32,26,.25); } to { transform: none; box-shadow: 0 0 0 0 rgba(200,32,26,0); } }
.tw-card__k { font: 500 .72rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--soft); margin: 0 0 10px; }
.tw-card__pic { display: block; width: 120px; height: 120px; margin: 0 auto 6px; }
.tw-card h2 { font: 400 1.7rem/1.1 var(--f-display); margin: 0; }
.tw-card__latin { font-style: italic; color: var(--soft); margin: 4px 0 8px; font-size: .92rem; }
.tw-card__size { font: 500 .78rem/1.3 var(--mono); letter-spacing: .04em; margin: 0 0 10px; }
.tw-card__blurb { margin: 0 0 10px; }
.tw-card__facts { margin: 0; padding: 0 0 0 1.1em; font-size: .93rem; color: var(--soft); display: grid; gap: 7px; }
.tw-touch { display: none; font-size: .85rem; color: var(--soft); margin: 10px 2px 0; }
@media (hover: none) { .tw-touch { display: block; } }
.tw-chips { max-width: 1240px; margin: 22px auto 0; padding: 0 20px; display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; }
.tw-chip { border: 1px dashed #cfc6b4; background: transparent; border-radius: 14px; padding: 8px 4px 10px; display: grid; justify-items: center; gap: 2px; font: 500 .82rem/1.2 var(--f-body); color: var(--soft); }
.tw-chip canvas { width: 54px; height: 54px; filter: brightness(0) opacity(.16); }
.tw-chip.is-found { border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; }
.tw-chip.is-found canvas { filter: none; }
.tw-chip.is-found:hover { border-color: var(--red); }
.tw-done { text-align: center; margin: 22px 20px 0; font: 400 1.4rem/1.3 var(--f-display); }
.tw-done[hidden] { display: none; }
.tw-reset { margin-left: 10px; border: 1px solid var(--ink); background: transparent; border-radius: 999px; padding: 9px 16px; font: 500 .9rem/1 var(--f-body); cursor: pointer; vertical-align: middle; }
body.tinypage .sec--who { padding-top: 9vh; }
@media (max-width: 980px) {
  .tw-wrap { grid-template-columns: 1fr; }
  .tw-side { position: static; }
  .tw-card { min-height: 0; }
  .tw-chips { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 620px) {
  .tw-wrap { padding: 0 12px; }
  .tw-stage { aspect-ratio: 10 / 13; border-radius: 16px; }
  .tw-chips { padding: 0 12px; gap: 8px; }
}
.tw-hint { border: 1px solid var(--ink); background: var(--ink); color: #fff; cursor: pointer; font: 500 .95rem/1 var(--f-body); padding: 12px 20px; border-radius: 999px; transition: background .25s, color .25s; }
.tw-hint:hover { background: #fff; color: var(--ink); }
.tw-hint:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

/* ===================== Meadow ===================== */
body.meadow { --bg: #f4f6e6; --line: #dfe4c6; background: radial-gradient(900px 600px at 80% -8%, #fff3bf 0%, transparent 60%), linear-gradient(180deg, #f9f9ec 0%, #eef3d8 55%, #e3ecc6 100%) fixed; }
body.meadow .perch { filter: drop-shadow(0 5px 7px rgba(40,50,10,.2)); }
body.meadow .tl-m:not(.on) { background: #dfe5c8; }
@keyframes grass-sway { 0%, 100% { rotate: -3deg; } 50% { rotate: 3.5deg; } }
body.meadow .perch[data-kind="grass"] { animation: grass-sway 6s ease-in-out infinite; transform-origin: 12% 50%; }
/* ===================== River: flowing water ===================== */
body.river { --bg: #d6e9e6; --line: #b8d4d0; --soft: #53706c; }
html.water:has(body.river) { background: linear-gradient(180deg, #e2f0ec 0%, #cbe4e1 45%, #bcd9d8 100%) fixed; }
html.water body.river { background: transparent; }
body.river .site-foot { border-top-color: #b0cfcb; }
body.river .perch { filter: drop-shadow(0 5px 7px rgba(20,60,60,.22)); }
body.river .pk, body.river .who, body.river .tip { background: rgba(255,255,255,.92); }
body.river .tl-m:not(.on) { background: #c0d9d6; }
body.river .perch[data-kind="lilypad"], body.river .perch[data-kind="lilyflower"] { animation: pad-bob 6s ease-in-out infinite; }
body.river .perch[data-kind="reed"] { animation: grass-sway 7s ease-in-out infinite; transform-origin: 4% 50%; }
@media (prefers-reduced-motion: reduce) { body.meadow .perch, body.river .perch { animation: none; } }
body.river .perch[data-kind="pondweed"], body.river .perch[data-kind="crowfoot"] { animation: pad-bob 7s ease-in-out infinite; }
@media (min-width: 801px) { body.river .perch--daisy2 { width: 132px; } body.river .pl-5 { width: 112px; } }
/* pond: the reed mace lies along the bank, and the smaller plants get a bit more room */
@media (min-width: 801px) { body.pond .perch--clover { width: 120px; } body.pond .perch--twig { width: 300px; } }

/* ===================== A page per animal, and the A to Z ===================== */
.who__btns { margin: auto 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.who__btns .who__fly { margin-top: 0; }
.who__more { font-size: .86rem; color: var(--ink); text-underline-offset: 3px; }
.who__more:hover { color: var(--red); }
.crumbs { max-width: 1100px; margin: 18px auto 0; padding: 0 20px; font: 500 .74rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--soft); display: flex; gap: 10px; align-items: center; }
.crumbs a { color: inherit; text-underline-offset: 3px; }
.ap-head { max-width: 1100px; margin: 0 auto; padding: 3vh 20px 5vh; display: grid; grid-template-columns: minmax(200px, 340px) 1fr; gap: 20px 48px; align-items: center; }
.ap-pic { width: 100%; height: auto; max-width: 340px; justify-self: center; }
.ap-intro h1 { font: 400 clamp(2.4rem, 6vw, 4.4rem)/1 var(--f-display); letter-spacing: -.02em; margin: 4px 0 6px; }
.ap-latin { font-style: italic; color: var(--soft); margin: 0 0 14px; }
.ap-blurb { font: 400 1.3rem/1.4 var(--f-display); margin: 0 0 18px; max-width: 34em; }
.ap-facts { margin: 0 0 16px; display: grid; gap: 6px; max-width: 34em; }
.ap-facts div { display: grid; grid-template-columns: 110px 1fr; gap: 10px; border-top: 1px solid var(--line); padding-top: 7px; font-size: .95rem; }
.ap-facts dt { font: 500 .72rem/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--soft); }
.ap-facts dd { margin: 0; }
.ap-note { font-size: .92rem; color: var(--soft); margin: 0; }
.ap-note a { color: inherit; }
.sec.ap-sec { padding: 2vh 20px 7vh; }
.ap-sec .sec__in { text-align: left; }
.ap-sec h2 { font: 400 clamp(1.8rem, 3.6vw, 2.6rem)/1.1 var(--f-display); margin: 4px 0 20px; }
.ap-grid .tip:nth-child(n) { margin-top: 0; }
.ap-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ap-photos figure { margin: 0; }
.ap-photos img { display: block; width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; border-radius: 14px; background: var(--line); }
.ap-photos figcaption { font-size: .76rem; color: var(--soft); margin-top: 6px; line-height: 1.4; }
.ap-photos figcaption a { color: inherit; }
.ap-two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ap-two .tip:nth-child(n) { padding: 24px 26px; margin-top: 0; }
.ap-two .tip h2 { margin: 6px 0 10px; font-size: clamp(1.6rem, 3vw, 2.1rem); }
.ap-two .tip p { font-size: 1.02rem; }
.ap-mates { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.ap-mate { display: grid; justify-items: center; gap: 2px; padding: 10px 6px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink); text-decoration: none; font: 500 .88rem/1.2 var(--f-body); text-align: center; transition: border-color .25s, transform .25s; }
.ap-mate canvas { width: 64px; height: 64px; }
.ap-mate:hover { border-color: var(--red); transform: translateY(-2px); }
.ap-nav { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; }
.ap-nav .top-link { padding: 10px 16px; font-size: .92rem; }
body.pond .ap-mate, body.shore .ap-mate, body.river .ap-mate { background: rgba(255,255,255,.92); }
.az { max-width: 1100px; margin: 0 auto; padding: 0 20px 6vh; }
.az-sec { margin: 0 0 5vh; }
.az-sec h2 { font: 400 1.9rem/1.1 var(--f-display); margin: 0 0 12px; }
.az-sec h2 a { color: inherit; text-decoration: none; }
.az-sec h2 a:hover { color: var(--red); }
@media (max-width: 800px) {
  .ap-head { grid-template-columns: 1fr; padding-top: 1vh; text-align: left; }
  .ap-pic { max-width: 200px; justify-self: start; }
  .ap-photos { grid-template-columns: 1fr; }
  .ap-two { grid-template-columns: 1fr; }
  .ap-mates { grid-template-columns: repeat(3, 1fr); }
}
body.tinypage.animalpage #bug-canvas { display: block; }
#who-h, [id^="az-"] { scroll-margin-top: 96px; }

/* ===================== Menu: habitats on their own row, things to do beside the name ===================== */
.site-head { flex-wrap: wrap; row-gap: 6px; }
.site-head nav.site-head__tools { order: 2; gap: 4px; flex-wrap: nowrap; width: auto; max-width: none; overflow: visible; mask-image: none; padding-right: 0; }
.site-head nav.site-head__tools a { border: 1px solid var(--line); padding: 7px 13px; font-weight: 500; }
.site-head nav.site-head__tools a[aria-current="page"] { border-color: var(--ink); }
.site-head nav.site-head__secs { order: 3; flex: 0 0 100%; justify-content: flex-start; gap: 2px; margin-left: -10px; }
.site-head nav.site-head__secs a { padding: 6px 10px; font-size: .88rem; }
@media (max-width: 800px) {
  .site-head { flex-direction: row; align-items: center; }
  .site-head nav.site-head__tools a { padding: 6px 9px; font-size: .8rem; }
  .site-head nav.site-head__secs { margin-left: 0; }
}
@media (max-width: 420px) { .site-head__name { font-size: 1.05rem; } .site-head nav.site-head__tools a { padding: 5px 7px; font-size: .76rem; } }
#who-h, [id^="az-"], [id^="sp-"] { scroll-margin-top: 120px; }

/* ===================== Seasons ===================== */
.season { max-width: 44em; margin: 14px auto 0; font-size: .95rem; color: var(--soft); }
.season-tag { align-self: flex-start; margin: 0 0 6px; font: 500 .66rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 5px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--soft); }
.season-tag.is-on { background: #e9f4dc; border-color: #c4dfa6; color: #3d6a1f; }
html.night .season-tag.is-on { background: #1f3320; border-color: #35592f; color: #a8d98a; }
.sheet [data-pick].is-away canvas { opacity: .45; }
.sheet__away { display: block; font: 500 .62rem/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--red); margin-top: 3px; }
.tl-l.is-now { color: var(--red); font-weight: 700; }
.ap-season { margin: 0 0 14px; font-size: .95rem; padding: 9px 13px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); max-width: 34em; }
.ap-season.is-on { border-color: #c4dfa6; background: #eef6e4; color: #2f5516; }
html.night .ap-season.is-on { background: #1f3320; border-color: #35592f; color: #a8d98a; }
.ap-mate.is-away canvas, .sp-card.is-away canvas { opacity: .5; }

/* ===================== Spotter's list ===================== */
.seen-btn { border: 1px solid var(--ink); background: transparent; color: var(--ink); border-radius: 999px; padding: 9px 15px; font: 500 .86rem/1 var(--f-body); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.seen-btn:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.seen-btn[aria-pressed="true"] { background: #3d7a24; border-color: #3d7a24; color: #fff; }
.seen-btn[aria-pressed="true"]::before { content: "\2713\00a0"; }
.seen-btn.pop { animation: seen-pop .45s cubic-bezier(.2,.9,.3,1.4); }
@keyframes seen-pop { 0% { transform: scale(.9); } 60% { transform: scale(1.08); } 100% { transform: none; } }
.seen-btn:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.ap-seen { margin: 0 0 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: .88rem; }
.ap-seen a { color: var(--soft); text-underline-offset: 3px; }
.sp-total { max-width: 460px; margin: 22px auto 0; display: grid; gap: 8px; }
.sp-total__n { font: 400 1.5rem/1 var(--f-display); }
.sp-bar { display: block; height: 10px; border-radius: 999px; background: var(--line); overflow: hidden; }
.sp-bar i { display: block; height: 100%; width: calc(var(--done, 0) * 100%); background: linear-gradient(90deg, #8cc153, #3d7a24); border-radius: 999px; transition: width .5s; }
.sp-badges { max-width: 1100px; margin: 5vh auto 0; padding: 0 20px; }
.sp-badges h2 { font: 400 1.9rem/1.1 var(--f-display); margin: 0 0 14px; }
.sp-badge-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 14px 8px; }
.sp-badge { display: grid; justify-items: center; text-align: center; gap: 3px; font-size: .84rem; color: var(--soft); }
.sp-badge b { color: var(--ink); font-weight: 500; line-height: 1.2; }
.sp-badge small { font: 500 .62rem/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.sp-badge__m { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: #e9e6de; border: 3px solid #d2cec3; box-shadow: inset 0 0 0 3px #f6f4ee; }
.sp-badge__m canvas { width: 54px; height: 54px; filter: grayscale(1) opacity(.35); }
.sp-badge.is-won .sp-badge__m { background: radial-gradient(circle at 35% 30%, #fff6c8, #f1c84a 60%, #c8962a); border-color: #b9851e; box-shadow: inset 0 0 0 3px #fff3bd, 0 6px 14px -6px rgba(140,96,10,.7); }
.sp-badge.is-won .sp-badge__m canvas { filter: none; }
.sp-badge.is-won b::after { content: " \2713"; color: #3d7a24; }
.sp-list { margin-top: 6vh; }
.sp-n { font: 500 .78rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--soft); margin-left: 8px; vertical-align: middle; }
.sp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.sp-card { display: grid; justify-items: center; gap: 6px; padding: 10px 8px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); text-align: center; }
.sp-card a { display: grid; justify-items: center; gap: 2px; color: var(--ink); text-decoration: none; font: 500 .88rem/1.2 var(--f-body); }
.sp-card canvas { width: 64px; height: 64px; }
.sp-card .seen-btn { padding: 7px 12px; font-size: .78rem; }
.sp-card.is-seen { border-color: #a9cf8a; background: #f1f8e9; }
.sp-card__d { font: 500 .62rem/1 var(--mono); letter-spacing: .06em; color: #3d6a1f; min-height: .7em; }
.sp-tools { display: flex; gap: 10px; flex-wrap: wrap; margin: 4vh 0 0; }
.sp-tools .top-link { background: transparent; cursor: pointer; font: 500 .92rem/1 var(--f-body); padding: 11px 18px; }
@media print { .site-head, .site-foot, .pick, #bug-canvas, #wx-canvas, .sp-tools, .sp-badges, .seen-btn { display: none !important; } .sp-card.is-seen { border: 2px solid #000; } .sp-card.is-seen span::after { content: " \2713"; } .sp-grid { grid-template-columns: repeat(6, 1fr); } }

/* ===================== Who am I? ===================== */
body.quizpage .pick { display: none; }
.qz { max-width: 980px; margin: 0 auto; padding: 0 20px 8vh; }
.qz-status { font: 500 .78rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--red); margin: 0 0 12px; text-align: center; }
.qz-main { display: grid; grid-template-columns: minmax(0, 400px) 1fr; gap: 28px; align-items: start; }
.qz-frame { aspect-ratio: 1; border-radius: 22px; background: radial-gradient(circle at 50% 40%, #fff, #eeeae0); border: 1px solid var(--line); display: grid; place-items: center; }
.qz-pic { width: 86%; height: 86%; transition: filter .6s; }
.qz-pic.is-hidden { filter: brightness(0) opacity(.86); }
.qz-opts { display: grid; gap: 8px; }
.qz-opt { text-align: left; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 14px; padding: 14px 16px; font: 500 1.02rem/1.2 var(--f-body); cursor: pointer; transition: border-color .2s, background .2s; }
.qz-opt:hover:not(:disabled) { border-color: var(--ink); }
.qz-opt:disabled { cursor: default; opacity: .6; }
.qz-opt.is-right { background: #e9f4dc; border-color: #7ab04a; opacity: 1; }
.qz-opt.is-right::after { content: " \2713"; color: #3d7a24; }
.qz-opt.is-wrong { background: #f9e4e1; border-color: #d98a80; opacity: 1; }
.qz-opt:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.qz-clues p { margin: 10px 0 0; padding: 10px 14px; border-left: 3px solid var(--red); background: var(--card); border-radius: 0 10px 10px 0; font-size: .95rem; }
.qz-btns { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 0; }
.qz-btns--mid { justify-content: center; }
.qz-btns .top-link { background: transparent; cursor: pointer; font: 500 .92rem/1 var(--f-body); padding: 11px 18px; }
.qz-btns .top-link:disabled { opacity: .45; cursor: default; }
.qz-go { border: 1px solid var(--ink); background: var(--ink); color: #fff; cursor: pointer; font: 500 .95rem/1 var(--f-body); padding: 12px 20px; border-radius: 999px; }
.qz-go:hover { background: #fff; color: var(--ink); }
.qz-go:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.qz-after { margin-top: 14px; }
.qz-after p { margin: 0 0 8px; }
.qz-verdict { font: 400 1.4rem/1.2 var(--f-display); color: var(--ink) !important; }
.qz-after a { color: var(--ink); text-underline-offset: 3px; font-size: .92rem; }
.qz-end { text-align: center; padding: 2vh 0 0; }
.qz-score { font: 400 clamp(3rem, 9vw, 5.4rem)/1 var(--f-display); margin: 6px 0 8px; }
.qz-title { font: 400 1.7rem/1.2 var(--f-display); color: var(--red); margin: 0 0 6px; }
.qz-best { color: var(--soft); margin: 0 0 18px; }
.qz-end[hidden], .qz-play[hidden], .qz-after[hidden], .qz-next[hidden], .qz-clue[hidden] { display: none; }
@media (max-width: 800px) { .qz-main { grid-template-columns: 1fr; gap: 16px; } .qz-frame { max-width: 300px; margin: 0 auto; width: 100%; } }
/* the site name, a size up now the menu has its own row */
.site-head__name { font-size: 2rem; }
@media (max-width: 800px) { .site-head__name { font-size: 1.5rem; } }
@media (max-width: 420px) { .site-head__name { font-size: 1.22rem; } }
.lb-head .season { margin: 26px auto 0; max-width: 40em; font-size: .93rem; line-height: 1.5; padding-top: 16px; border-top: 1px solid var(--line); }
.site-head nav.site-head__secs a { font-size: 1.02rem; padding: 7px 12px; }
@media (max-width: 800px) { .site-head nav.site-head__secs a { font-size: .96rem; padding: 7px 10px; } }

/* ---------- moorland, farmland and town ---------- */
body.moor { --bg: #efeee6; --line: #d9d6c6; background: radial-gradient(900px 600px at 82% -8%, #f1e3f2 0%, transparent 60%), linear-gradient(180deg, #f4f3ec 0%, #e9e6da 55%, #dfdccb 100%) fixed; }
body.moor .perch { filter: drop-shadow(0 5px 7px rgba(50,40,50,.22)); }
body.moor .tl-m:not(.on) { background: #dcd9c9; }
body.moor .perch[data-kind="grass"], body.moor .perch[data-kind="fern"] { animation: grass-sway 6s ease-in-out infinite; transform-origin: 12% 50%; }
body.farmland { --bg: #f6f1e0; --line: #e4dcc0; background: radial-gradient(900px 600px at 80% -8%, #ffeeb4 0%, transparent 60%), linear-gradient(180deg, #faf6e8 0%, #f1e9cf 55%, #e8dfbd 100%) fixed; }
body.farmland .perch { filter: drop-shadow(0 5px 7px rgba(70,50,10,.2)); }
body.farmland .tl-m:not(.on) { background: #e6dec2; }
body.farmland .perch[data-kind="wheat"] { animation: grass-sway 6s ease-in-out infinite; transform-origin: 4% 50%; }
body.town { --bg: #eeeeec; --line: #dadad6; background: linear-gradient(90deg, rgba(0,0,0,.035) 1px, transparent 1px) 0 0 / 190px 190px, linear-gradient(0deg, rgba(0,0,0,.035) 1px, transparent 1px) 0 0 / 190px 120px, linear-gradient(180deg, #f4f4f2 0%, #e9e9e6 100%); }
body.town .perch { filter: drop-shadow(0 4px 6px rgba(30,30,40,.22)); }
body.town .tl-m:not(.on) { background: #dcdcd8; }
@media (prefers-reduced-motion: reduce) { body.moor .perch, body.farmland .perch { animation: none; } }
@media (min-width: 801px) { body.town .perch--daisy { width: 136px; } body.farmland .perch--leaf { width: 210px; } body.moor .perch--daisy { width: 132px; } }

/* ---------- front page ---------- */
body.front .lb-head { padding-bottom: 4vh; }
.fp-go { display: inline-block; padding: 11px 22px; border-radius: 999px; background: var(--ink); color: #fff; font: 600 .98rem/1 var(--f-body); text-decoration: none; }
.fp-go--quiet { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.fp-go:hover { background: var(--red); color: #fff; box-shadow: none; }
.fp { max-width: 1140px; margin: 0 auto; padding: 2vh 20px 5vh; }
.fp h2 { font: 400 clamp(1.8rem, 4vw, 2.5rem)/1.1 var(--f-display); margin: 0 0 18px; text-align: center; }
.fp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.fp-card { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 4px; padding: 16px 18px 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--card, #fff); color: var(--ink); text-decoration: none; transition: transform .18s, border-color .18s, box-shadow .18s; }
.fp-card:hover, .fp-card:focus-visible { transform: translateY(-3px); border-color: var(--red); box-shadow: 0 10px 24px rgba(30,25,15,.08); }
.fp-card__pics { display: flex; justify-content: center; align-items: center; gap: 2px; padding: 10px 6px; margin-bottom: 8px; border-radius: 12px; background: #f6f5f0; }
.fp-card__pics canvas { width: 30%; max-width: 78px; height: auto; aspect-ratio: 1; }
.fp-card__n { font: 400 1.6rem/1.1 var(--f-display); }
.fp-card__t { color: var(--soft); font-size: .95rem; line-height: 1.4; }
.fp-card__c { margin-top: 4px; font: 500 .74rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--red); }
.fp-card--pond .fp-card__pics, .fp-card--river .fp-card__pics, .fp-card--shore .fp-card__pics { background: #dcecea; }
.fp-card--night .fp-card__pics { background: #18243a; }
.fp-card--wood .fp-card__pics, .fp-card--meadow .fp-card__pics { background: #edf1dc; }
.fp-card--log .fp-card__pics, .fp-card--tiny .fp-card__pics { background: #eee5d4; }
.fp-card--moor .fp-card__pics { background: #ece6ea; }
.fp-card--farm .fp-card__pics { background: #f4ecd0; }
.fp-card--town .fp-card__pics { background: #e9e9e6; }
.fp-do { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.fp-doc { display: grid; gap: 6px; padding: 18px 20px; border-radius: 16px; background: var(--ink); color: #fff; text-decoration: none; transition: transform .18s, background .18s; }
.fp-doc b { font: 400 1.5rem/1.1 var(--f-display); }
.fp-doc span { font-size: .93rem; line-height: 1.4; opacity: .82; }
.fp-doc:hover, .fp-doc:focus-visible { transform: translateY(-3px); background: var(--red); }
@media (max-width: 560px) { .fp-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .fp-card { padding: 10px 12px 14px; } .fp-card__n { font-size: 1.25rem; } .fp-card__t { font-size: .84rem; } }

.site-foot__brand { margin: 14px 0 4px; font: 400 1.15rem/1.2 var(--f-display); color: var(--ink); }
.site-foot__brand b { font-weight: 400; font-style: italic; color: var(--red); }

/* decorations sit a few pixels over the edge on phones: never let that make the page scroll sideways */
html, body { overflow-x: clip; }