/* kalpa.earth — Samyak Farms boundary plantation
   Built on the Kalpa design system (tokens copied from kalpa.bighistory.in):
   the page follows the sunrise ramp — space at the hero, warming through the
   tide stops, breaking into morning light where the boundary map begins. */

:root{
  /* ── Kalpa brand tokens (RGB channels, as in tokens.css) ── */
  --kalpa-ink: 19 25 31;           /* #13191f */
  --kalpa-ink-soft: 70 81 90;      /* #46515a */
  --kalpa-paper: 253 253 251;      /* #fdfdfb */
  --kalpa-paper-warm: 241 240 234; /* #f1f0ea */
  --kalpa-dawn: 232 170 83;        /* #e8aa53 */
  --kalpa-dawn-soft: 250 234 211;  /* #faead3 */
  --kalpa-space: 7 11 16;          /* #070b10 */
  --kalpa-ocean: 16 44 69;         /* #102c45 */
  --kalpa-atmosphere: 109 179 214; /* #6db3d6 */
  --kalpa-tide-1: 10 22 34;
  --kalpa-tide-2: 13 33 51;
  --domain-agents: 58 167 109;     /* #3aa76d — the living/green domain */
  --domain-terrain: 201 135 58;    /* #c9873a */

  --ink:      rgb(var(--kalpa-ink));
  --ink-soft: rgb(var(--kalpa-ink-soft));
  --ink-faint:rgb(var(--kalpa-ink-soft) / .62);
  --paper:    rgb(var(--kalpa-paper));
  --paper-warm:rgb(var(--kalpa-paper-warm));
  --dawn:     rgb(var(--kalpa-dawn));
  --space:    rgb(var(--kalpa-space));
  --ocean:    rgb(var(--kalpa-ocean));
  --green:    rgb(var(--domain-agents));
  --terrain:  rgb(var(--domain-terrain));
  --line:     rgb(var(--kalpa-ink) / .12);

  --radius-sm:6px; --radius-md:10px; --radius-lg:16px; --radius-pill:999px;
  --ease:cubic-bezier(.4,0,.2,1); --dur-fast:160ms; --dur-med:500ms;

  --font:'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --deva:'Noto Sans Devanagari','Nirmala UI',sans-serif;
  --wrap:90rem;
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--space); scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
::selection{background:var(--dawn); color:var(--space)}
:lang(hi), .hi{font-family:var(--deva)}
img{max-width:100%; display:block}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--dawn); outline-offset:3px; border-radius:var(--radius-sm);
}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 1.5rem}
@media (min-width:600px){ .wrap{padding:0 3rem} }
@media (min-width:1024px){ .wrap{padding:0 4rem} }
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── header ───────────────────────────────────────────── */
.site-head{
  position:sticky; top:0; z-index:40; background:rgb(var(--kalpa-space) / .88);
  backdrop-filter:saturate(1.3) blur(12px);
  border-bottom:1px solid rgb(255 255 255 / .08); color:#fff;
}
.site-head .wrap{display:flex; align-items:center; gap:1rem; height:4rem}
.brand{display:flex; align-items:center; gap:.7rem; text-decoration:none; color:#fff}
.brand svg{height:26px; width:auto; flex:none}
.brand .sub{
  font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
  color:rgb(255 255 255 / .55); font-weight:600; padding-left:.7rem;
  border-left:1px solid rgb(255 255 255 / .18);
}
.head-sp{margin-left:auto}
.head-link{
  color:rgb(255 255 255 / .72); text-decoration:none; font-size:.86rem; font-weight:500;
  transition:color var(--dur-fast) var(--ease);
}
.head-link:hover{color:var(--dawn)}

/* ── hero: deep space, stars, earth limb ─────────────── */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--space); color:#fff;
  padding:7rem 0 5rem; display:flex; align-items:flex-end; min-height:76svh;
}
.hero .bg{position:absolute; inset:0; z-index:-1; pointer-events:none}
.stars{
  position:absolute; inset:0; opacity:.7;
  background-image:
    radial-gradient(circle at 18% 24%, rgba(255,255,255,.65) 0 1px, transparent 1.4px),
    radial-gradient(circle at 72% 18%, rgba(255,255,255,.45) 0 1px, transparent 1.3px),
    radial-gradient(circle at 45% 62%, rgba(255,255,255,.38) 0 1px, transparent 1.2px),
    radial-gradient(circle at 88% 52%, rgba(255,255,255,.55) 0 1px, transparent 1.4px);
  background-size:31rem 27rem, 37rem 29rem, 23rem 31rem, 41rem 35rem;
}
.limb{
  position:absolute; left:50%; bottom:-34vw; transform:translateX(-50%);
  width:112vw; min-width:58rem; height:70vw; min-height:34rem; border-radius:50%;
  background:
    radial-gradient(circle at 50% 0%, rgb(var(--kalpa-dawn) / .34) 0%, transparent 46%),
    linear-gradient(to bottom, rgb(var(--kalpa-ocean) / .95), rgb(var(--kalpa-space)) 62%);
  box-shadow:0 -1px 60px rgb(var(--kalpa-dawn) / .16);
}
.hero .veil{position:absolute; inset:0;
  background:linear-gradient(to bottom, rgb(var(--kalpa-space) / .2), rgb(var(--kalpa-space) / .2) 55%, rgb(var(--kalpa-space) / .95));}
.eyebrow{
  font-size:.68rem; font-weight:600; letter-spacing:.26em; text-transform:uppercase;
  color:var(--dawn); margin:0 0 1.4rem;
}
.hero h1{
  font-size:clamp(2.6rem,7.4vw,6.4rem); font-weight:500; line-height:.94;
  letter-spacing:-.05em; margin:0; max-width:18ch; text-wrap:balance;
}
.hero .lede{
  margin:2rem 0 0; max-width:44rem; font-size:1.06rem; line-height:1.65;
  color:rgb(255 255 255 / .72);
}
.hero .lede .hi{display:block; margin-top:.5rem; color:rgb(255 255 255 / .55); font-size:.98rem}
.hero-cta{display:flex; gap:.75rem; flex-wrap:wrap; margin-top:2.4rem}

.btn{
  display:inline-flex; align-items:center; justify-content:center; min-height:3rem;
  padding:0 1.6rem; border-radius:var(--radius-pill); border:0; cursor:pointer;
  font:inherit; font-size:.9rem; font-weight:500; text-decoration:none;
  background:#fff; color:var(--space);
  transition:background var(--dur-med) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn:hover{background:var(--dawn)}
.btn--ghost{background:rgb(255 255 255 / .03); color:#fff; border:1px solid rgb(255 255 255 / .25)}
.btn--ghost:hover{background:rgb(255 255 255 / .08); border-color:rgb(255 255 255 / .6)}
.btn--ink{background:var(--ink); color:#fff}
.btn--ink:hover{background:var(--ocean)}

/* counters sit in the hero, on dark */
.counts{display:flex; flex-wrap:wrap; gap:2.6rem; margin-top:3rem;
  padding-top:2rem; border-top:1px solid rgb(255 255 255 / .12)}
.count b{display:block; font-size:2.4rem; font-weight:500; line-height:1;
  letter-spacing:-.04em; color:#fff; font-variant-numeric:tabular-nums}
.count span{display:block; margin-top:.5rem; font-size:.66rem; letter-spacing:.2em;
  text-transform:uppercase; color:rgb(255 255 255 / .5); font-weight:600}

/* ── the dawn break: dark gives way to morning light ─── */
.dawnbreak{height:9rem; background:linear-gradient(to bottom, var(--space), rgb(var(--kalpa-dawn-soft)))}

/* ── light sections ──────────────────────────────────── */
.section{padding:4.5rem 0}
.section--warm{background:var(--paper-warm)}
.section-head{display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap; margin-bottom:1.5rem}
.section-head h2{font-size:clamp(1.5rem,3.4vw,2.5rem); font-weight:500; letter-spacing:-.035em; margin:0}
.section-head p{margin:0; color:var(--ink-faint); font-size:.92rem}

.panel{background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:1.5rem}
@media (min-width:600px){ .panel{padding:2rem} }

/* ── map ─────────────────────────────────────────────── */
.mapwrap{position:relative}
#plot{width:100%; height:auto; display:block; touch-action:manipulation}
#plot .ground{fill:rgb(var(--domain-agents) / .06); stroke:rgb(var(--kalpa-ink) / .55); stroke-width:2.5}
#plot .edge-label{fill:rgb(var(--kalpa-ink) / .42); font-size:15px; font-weight:600; letter-spacing:.2em}
#plot .plot-mark{fill:rgb(var(--kalpa-ink) / .16); font-size:26px; font-weight:600; letter-spacing:.24em}
#plot .edge-dim{fill:rgb(var(--kalpa-ink) / .32); font-size:13px; font-weight:500; letter-spacing:.06em}
#plot .plot-dim{fill:rgb(var(--kalpa-ink) / .30); font-size:15px; font-weight:600; letter-spacing:.08em}
#plot .plot-mark--sm{font-size:14px; letter-spacing:.16em; fill:rgb(var(--kalpa-ink) / .13)}
#plot .dot{cursor:pointer; transition:stroke-width var(--dur-fast) var(--ease)}
#plot .dot:hover{stroke:var(--ink); stroke-width:2.5}
#plot .dot.vacant{stroke-dasharray:2 2}
#plot .dot.dim{opacity:.14}
#plot .dot.here{stroke:var(--ink); stroke-width:3}
#plot .pulse{fill:none; stroke:var(--dawn); stroke-width:2.5; opacity:.9}
@media (prefers-reduced-motion:no-preference){
  #plot .pulse{animation:ping 2.2s var(--ease) infinite}
  @keyframes ping{0%{r:9; opacity:.9} 70%{r:26; opacity:0} 100%{opacity:0}}
}
.maphint{color:var(--ink-faint); font-size:.82rem; margin:.75rem .25rem 0}

.tip{position:absolute; pointer-events:none; z-index:5; opacity:0; transform:translate(-50%,-118%);
  background:var(--space); color:#fff; padding:.45rem .7rem; border-radius:var(--radius-sm);
  font-size:.8rem; font-weight:600; white-space:nowrap;
  transition:opacity var(--dur-fast) var(--ease)}
.tip.on{opacity:1}
.tip .sp{color:rgb(255 255 255 / .6); font-weight:400}

/* ── legend chips ────────────────────────────────────── */
.legend{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.25rem}
.chip{display:inline-flex; align-items:center; gap:.5rem; cursor:pointer;
  background:var(--paper); border:1px solid var(--line); color:inherit;
  border-radius:var(--radius-pill); padding:.45rem .9rem .45rem .55rem;
  font:inherit; font-size:.85rem; font-weight:500;
  transition:border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease)}
.chip:hover{border-color:rgb(var(--kalpa-ink) / .35)}
.chip[aria-pressed="true"]{border-color:var(--ink); background:var(--ink); color:#fff}
.chip[aria-pressed="true"] .n{color:rgb(255 255 255 / .6)}
.chip .sw{width:12px;height:12px;border-radius:50%;flex:none}
.chip .n{color:var(--ink-faint); font-variant-numeric:tabular-nums; font-size:.8rem}

/* ── finder ──────────────────────────────────────────── */
.finder{display:flex; gap:.65rem; flex-wrap:wrap}
.finder input{flex:1 1 16rem; min-width:0; padding:.9rem 1rem; font:inherit; font-size:1rem;
  background:var(--paper); color:var(--ink); border:1px solid rgb(var(--kalpa-ink) / .22);
  border-radius:var(--radius-pill)}
.finder input::placeholder{color:var(--ink-faint)}
.finder .msg{flex-basis:100%; color:#9a3412; font-size:.86rem; font-weight:600; margin:.25rem}

/* ── tree grid ───────────────────────────────────────── */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(8rem,1fr)); gap:.6rem; margin-top:1.5rem}
.tcard{display:block; text-decoration:none; color:inherit; padding:.8rem .9rem;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-md);
  border-left:3px solid var(--dot,var(--line));
  transition:transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease)}
.tcard:hover{transform:translateY(-2px); border-color:rgb(var(--kalpa-ink) / .3)}
.tcard .c{font-size:1.1rem; font-weight:600; letter-spacing:-.03em}
.tcard .s{font-size:.82rem; color:var(--ink-soft); margin-top:.1rem}
.tcard .h{font-size:.72rem; color:var(--ink-faint); letter-spacing:.04em}
.tcard.is-vacant{opacity:.55}

/* ── gallery ─────────────────────────────────────────── */
.gal{columns:3 15rem; column-gap:.75rem; margin-top:1.5rem}
.gal a{display:block; margin:0 0 .75rem; break-inside:avoid; border-radius:var(--radius-md);
  overflow:hidden; background:var(--paper-warm)}
.gal img{width:100%; height:auto; transition:transform var(--dur-med) var(--ease)}
.gal a:hover img{transform:scale(1.03)}
.lb{position:fixed; inset:0; z-index:80; background:rgb(var(--kalpa-space) / .95);
  display:none; align-items:center; justify-content:center; padding:1.5rem}
.lb.on{display:flex}
.lb figure{margin:0; display:flex; flex-direction:column; align-items:center; gap:1rem}
.lb img{max-width:min(75rem,94vw); max-height:78vh; width:auto; border-radius:var(--radius-md)}
.lb-x{position:absolute; top:1rem; right:1.1rem; background:rgb(255 255 255 / .12); color:#fff;
  border:0; border-radius:var(--radius-pill); width:2.75rem; height:2.75rem; font-size:1.3rem; cursor:pointer}

/* ── sharing ─────────────────────────────────────────── */
.share{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem}
.share-l{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft); margin-right:.15rem}
.sbtn{display:inline-flex; align-items:center; gap:.4rem; padding:.44rem .85rem;
  border:1px solid rgb(var(--kalpa-ocean) / .18); border-radius:var(--radius-pill);
  background:var(--paper); color:var(--ink); font:inherit; font-size:.83rem; font-weight:500;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
             transform var(--dur-fast) var(--ease)}
.sbtn svg{width:1rem; height:1rem; flex:none}
.sbtn:hover{background:var(--paper-warm); border-color:rgb(var(--kalpa-ocean) / .4); transform:translateY(-1px)}
.sbtn--go{background:var(--ocean); border-color:var(--ocean); color:#fff}
.sbtn--go:hover{background:var(--space); border-color:var(--space)}
@media (max-width:34rem){ .share-l{width:100%; margin:0 0 .1rem} }
.sharepanel{margin-top:1.25rem; display:flex; gap:1.25rem; flex-wrap:wrap;
  align-items:center; justify-content:space-between}
.sharepanel-t{max-width:38ch}
.sharepanel-t strong{display:block; font-weight:600}
.sharepanel-t span{color:var(--ink-soft); font-size:.92rem}
/* on dark ground — the lightbox */
.lb-share{width:100%; display:flex; justify-content:center}
.lb-share .share-l{color:rgb(255 255 255 / .55)}
.lb-share .sbtn{background:rgb(255 255 255 / .1); border-color:rgb(255 255 255 / .2); color:#fff}
.lb-share .sbtn:hover{background:rgb(255 255 255 / .2); border-color:rgb(255 255 255 / .45)}
.lb-share .sbtn--go{background:var(--dawn); border-color:var(--dawn); color:var(--space)}
.lb-share .sbtn--go:hover{background:var(--dawn-soft); border-color:var(--dawn-soft)}

/* ── tree page ───────────────────────────────────────── */
.treehero{background:var(--space); color:#fff; position:relative; overflow:hidden; padding:4rem 0 3.5rem}
.treehero .stars{opacity:.5}
.treehead{display:grid; gap:2rem; align-items:center}
.treehead > *{min-width:0}      /* let the scrollable map shrink */
.mapwrap{min-width:0}
@media (min-width:900px){ .treehead{grid-template-columns:1fr 1fr; gap:3.5rem} }
.bigcode{font-size:clamp(3.6rem,12vw,7.5rem); font-weight:500; letter-spacing:-.06em;
  line-height:.9; margin:.1em 0 0; color:#fff}
.species-name{font-size:clamp(1.5rem,3.6vw,2.3rem); font-weight:500; letter-spacing:-.03em;
  margin:.4em 0 0; color:#fff}
.species-hi{font-family:var(--deva); font-size:1.15rem; color:var(--dawn); margin-top:.15rem}
.sci{font-style:italic; color:rgb(255 255 255 / .5); font-size:.94rem; margin-top:.4rem}
.badge{display:inline-flex; align-items:center; gap:.5rem; margin-top:1.2rem;
  padding:.5rem 1rem; border-radius:var(--radius-pill);
  background:rgb(255 255 255 / .06); border:1px solid rgb(255 255 255 / .18);
  font-size:.84rem; font-weight:500; color:#fff}
.badge .sw{width:10px;height:10px;border-radius:50%}
.treehero .panel{background:rgb(255 255 255 / .04); border-color:rgb(255 255 255 / .12)}
/* The tree page draws the same map on the dark hero, so every ink-coloured
   fill has to be inverted. All of these must stay scoped to .treehero —
   unscoped, they turn the home page's light map invisible. */
.treehero #plot .ground{fill:rgb(255 255 255 / .04); stroke:rgb(255 255 255 / .4)}
.treehero #plot .edge-label{fill:rgb(255 255 255 / .38)}
.treehero #plot .edge-dim{fill:rgb(255 255 255 / .30)}
.treehero #plot .plot-mark{fill:rgb(255 255 255 / .10)}
.treehero #plot .plot-mark--sm{fill:rgb(255 255 255 / .14)}
.treehero #plot .plot-dim{fill:rgb(255 255 255 / .22)}
/* every other dot has a white ring here, so an ink ring made the user's own
   tree the least visible dot on the map */
.treehero #plot .dot.here{stroke:var(--dawn); stroke-width:3.5}
.treehero #plot .dot.vacant{stroke:rgb(255 255 255 / .45)}
.treehero .maphint{color:rgb(255 255 255 / .5)}

.facts-row{display:grid; gap:1rem; grid-template-columns:1fr}
@media (min-width:760px){ .facts-row{grid-template-columns:repeat(3,1fr)} }
.fact{background:var(--paper); border:1px solid var(--line); border-top:3px solid var(--dawn);
  border-radius:var(--radius-lg); padding:1.4rem}
.fact .k{font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--terrain); font-weight:600}
.fact p{margin:.6rem 0 0; color:var(--ink-soft); line-height:1.6}

.kv{display:grid; grid-template-columns:repeat(auto-fit,minmax(9rem,1fr)); gap:1.5rem}
.kv .k{font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); font-weight:600}
.kv .v{font-size:1.1rem; margin-top:.25rem; font-weight:500}
.kv .v small{display:block; font-size:.78rem; color:var(--ink-faint); font-weight:400; margin-top:.15rem}

.empty{border:1px dashed rgb(var(--kalpa-ink) / .22); border-radius:var(--radius-lg);
  padding:2rem; text-align:center; color:var(--ink-faint); background:var(--paper-warm)}
.empty b{display:block; color:var(--ink-soft); font-weight:600; margin-bottom:.25rem}

.neighbours{display:flex; gap:.75rem; flex-wrap:wrap}
.nb{display:flex; align-items:center; gap:.6rem; text-decoration:none; color:inherit;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-pill);
  padding:.65rem 1.1rem; font-size:.9rem}
.nb:hover{border-color:rgb(var(--kalpa-ink) / .35)}
.nb .sw{width:10px;height:10px;border-radius:50%}

table.obs{width:100%; border-collapse:collapse; font-size:.92rem}
table.obs th{text-align:left; padding:.6rem .25rem; font-size:.64rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-faint); font-weight:600}
table.obs td{padding:.6rem .25rem; border-top:1px solid var(--line)}

/* ── footer ──────────────────────────────────────────── */
.site-foot{background:var(--space); color:rgb(255 255 255 / .55); padding:3rem 0 3.5rem; font-size:.86rem}
.site-foot .row{display:flex; gap:1rem 1.5rem; flex-wrap:wrap; align-items:center}
.site-foot a{color:rgb(255 255 255 / .8); text-decoration:none}
.site-foot a:hover{color:var(--dawn)}
.site-foot .mark{opacity:.5; height:22px; width:auto; margin-bottom:1.25rem}

/* ── planted by ──────────────────────────────────────── */
.planted{display:flex; flex-direction:column; gap:1.25rem}
.planters{display:flex; flex-wrap:wrap; gap:.6rem}
.planter{display:inline-flex; align-items:center; padding:.5rem 1.1rem;
  background:var(--paper-warm); border:1px solid var(--line);
  border-radius:var(--radius-pill); font-size:1.02rem; font-weight:500}
.planter::before{content:''; width:.5rem; height:.5rem; border-radius:50%;
  background:var(--green); margin-right:.6rem; flex:none}
.planted-note{margin:0; color:var(--ink-faint); font-size:.9rem}
.planted-none strong{display:block; font-size:1.15rem; font-weight:500; margin-bottom:.35rem}
.planted-none span{color:var(--ink-soft); display:block; max-width:52ch; line-height:1.6}
.planted-ask{display:flex; gap:1rem; flex-wrap:wrap; align-items:center;
  justify-content:space-between; padding-top:1.25rem; border-top:1px solid var(--line)}
.planted-ask span{color:var(--ink-soft); max-width:44ch}

/* names read as one sentence — "Nistha M. and Aastha S." */
.planters{align-items:center}
.joiner{color:var(--ink-faint); font-size:.9rem; padding:0 .15rem}
.consent-note{margin:0; font-size:.82rem; line-height:1.6; color:var(--ink-faint); max-width:64ch}
.consent-note .hi{display:block; margin-top:.2rem}

/* ══ mobile ══════════════════════════════════════════════
   The site was laid out desktop-first. Everything below is
   phone-specific: the map needed the most work — at 375px it
   squeezed to 277px wide with 4px dots, which is untappable. */
@media (max-width:40rem){

  /* header: "Why these trees" was wrapping to three lines inside
     a 4rem bar. Drop the sub-label, stop the links wrapping. */
  .site-head .wrap{gap:.6rem; height:3.5rem}
  .brand svg{height:22px}
  .brand .sub{display:none}
  .head-link{font-size:.8rem; white-space:nowrap;
    display:inline-flex; align-items:center; padding:.7rem .15rem}
  .head-link + .head-link{margin-left:.9rem !important}

  /* hero */
  .hero{padding:5rem 0 3rem; min-height:auto}
  .hero .lede{font-size:1rem; margin-top:1.5rem}
  .hero-cta{margin-top:1.8rem; gap:.6rem}
  .hero-cta .btn{flex:1 1 auto; min-width:calc(50% - .3rem)}
  .eyebrow{margin-bottom:1rem; letter-spacing:.18em}
  .counts{gap:1.5rem 2rem; margin-top:2rem; padding-top:1.5rem}
  .count b{font-size:1.9rem}
  .dawnbreak{height:5rem}

  /* sections */
  .section{padding:3rem 0}
  .section-head{margin-bottom:1.1rem; gap:.4rem}
  .panel{padding:1.1rem}

  /* the map: render it larger than the screen and let it scroll,
     so the 109 positions stay big enough to hit with a thumb */
  .mapwrap{overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:thin; padding-bottom:.4rem}
  .mapwrap #plot{min-width:58rem}
  #plot .dot{r:8}                     /* ~13px across once scaled */
  #plot .pulse{r:13}
  #plot .edge-label{font-size:17px}
  #plot .edge-dim{font-size:14px}
  .maphint{font-size:.8rem}
  .maphint::before{content:'Swipe the map sideways · '; color:var(--ink)}

  /* legend + tree grid: fewer, bigger targets */
  .legend{gap:.4rem}
  .chip{min-height:2.5rem; font-size:.85rem}
  .grid{grid-template-columns:repeat(auto-fill,minmax(6.5rem,1fr)); gap:.5rem}
  .tcard{padding:.7rem .75rem; min-height:4.25rem}
  .tcard .c{font-size:1rem}
  .tcard .s{font-size:.76rem}
  .tcard .h{font-size:.68rem}

  /* finder */
  .finder{flex-direction:column; align-items:stretch}
  .finder input, .finder .btn{width:100%}

  /* gallery: two columns is plenty on a phone */
  .gal{columns:2 8rem; column-gap:.5rem}
  .gal a{margin-bottom:.5rem}

  /* tree page */
  .treehero{padding:2.5rem 0 2rem}
  .planted-ask{flex-direction:column; align-items:flex-start; gap:.75rem}
  .planted-ask .btn{width:100%}
  .sharepanel{flex-direction:column; align-items:flex-start; gap:.9rem}
  .sharepanel-b{width:100%}
  .sbtn{flex:1 1 auto; justify-content:center}

  /* lightbox */
  .lb{padding:.75rem}
  .lb img{max-height:68vh}
  .lb-x{top:.5rem; right:.5rem}
}

/* very small phones */
@media (max-width:22.5rem){
  .head-link{font-size:.74rem}
  .head-link + .head-link{margin-left:.7rem !important}
  .grid{grid-template-columns:repeat(auto-fill,minmax(5.5rem,1fr))}
}