@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 { 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 { 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; }
}