/* ==========================================================================
   jpiot.html: the hero, the deployment plate, the field story and the site
   visit bridge. Loaded by that page only, after site.css. Namespaced .jh (hero),
   .cv (map) and .cvf (field story). The plate itself is generated by
   review/coverage-map.mjs.

   The plate is a map sheet, not a dashboard: a dark olive ground, the states
   that carry a record in pale sage, the rest hatched the way a surveyor marks
   ground with no data, and orange only for the one state being read.
   ========================================================================== */

/* ------------------------------ hero ------------------------------
   The three products stand together in front of a seconds dial, the headline's
   promise drawn once and left still. Nothing on it ticks. */
.jh .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.94fr);
  column-gap:clamp(24px,4vw,80px);align-items:center}
.jh .jh-mark{height:clamp(50px,5vw,72px);width:auto;margin-bottom:30px}
.jh .h1{font-size:clamp(2.7rem,5.3vw,5.2rem);max-width:14ch;text-wrap:balance}
.jh .lede{max-width:50ch}
.jh-stats{display:flex;margin-top:clamp(36px,5vh,58px);padding-top:28px;border-top:1px solid var(--line);max-width:560px}
.jh-stat{padding-right:clamp(30px,4vw,60px)}
.jh-stat+.jh-stat{padding-left:clamp(30px,4vw,60px);border-left:1px solid var(--line)}
.jh-stat .n{font-family:var(--display);font-weight:400;font-size:clamp(2.5rem,4.4vw,3.8rem);line-height:.95;
  letter-spacing:-.03em;color:var(--forest);font-variant-numeric:tabular-nums}
.jh-stat .l{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-2);margin-top:14px}

.jh-stage{position:relative;margin:0;width:100%;max-width:660px;justify-self:end;aspect-ratio:1 / .98}
.jh-dial{position:absolute;left:50%;top:44%;width:92%;height:auto;transform:translate(-50%,-50%);overflow:visible}
.jh-ring{fill:none;stroke:var(--line);stroke-width:1}
.jh-tk{fill:none;stroke:var(--line-2);stroke-width:1.2}
.jh-tk5{fill:none;stroke:var(--line-strong);stroke-width:1.8}
.jh-dial text{font-family:var(--mono);font-size:14px;letter-spacing:.14em;fill:var(--text-3);
  text-anchor:middle;dominant-baseline:central}
.jh-ground{position:absolute;left:4%;right:2%;bottom:5%;height:14%;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(54,68,29,.2),rgba(54,68,29,0) 72%)}
.jh-p{position:absolute;height:auto;display:block}
.jh-p--unit{left:10.6%;bottom:11%;width:39.4%}
.jh-p--pest{right:1%;bottom:11.5%;width:40%}
.jh-p--soil{left:34%;bottom:2%;width:44%}

@media (max-width:900px){
  .jh .wrap{grid-template-columns:minmax(0,1fr);row-gap:clamp(34px,6vw,56px)}
  .jh-stage{justify-self:center;max-width:540px}
}
@media (max-width:520px){
  .jh-dial text{display:none}
  .jh-stats{padding-top:22px}
  .jh-stat{padding-right:26px}
  .jh-stat+.jh-stat{padding-left:26px}
}

.cv, .cvf{
  --cv-ground:#2A3616;          /* the plate */
  --cv-land:#35431D;            /* neighbouring countries, barely there */
  --cv-rec:#BBCA93;             /* a recorded state */
  --cv-rec-hover:#D0DCB0;
  --cv-none:#3C4B23;            /* under the hatch */
  --cv-ink:#243014;             /* words on a recorded state */
  --cv-quiet:rgba(245,239,229,.52);
  --cv-accent-ink:#B4450F;      /* orange that can carry small text on paper */
}

/* ------------------------------ section ------------------------------ */
/* .sec clips its overflow, which would stop the record panel sticking */
.sec.cv{overflow:visible}
.cv-head,.cvf-head{max-width:780px}
.cv-head .h2,.cvf-head .h2{text-wrap:balance}
.cv-head .lede,.cvf-head .lede{max-width:50ch}

.cv-stage{
  margin-top:clamp(40px,6vh,70px);
  display:grid;
  grid-template-columns:minmax(0,2.1fr) minmax(300px,1fr);
  grid-template-areas:"map panel";
  column-gap:clamp(24px,3vw,52px);
  row-gap:clamp(26px,3.4vh,40px);
  align-items:start;
}
.cv-map{grid-area:map;margin:0;min-width:0;container-type:inline-size;container-name:cvmap}
.cv-panel{grid-area:panel;position:sticky;top:calc(var(--nav-h) + 20px)}
@media (max-width:1000px){
  .cv-stage{grid-template-columns:minmax(0,1fr);grid-template-areas:"map" "panel"}
  .cv-panel{position:static}
}

/* ------------------------------ the plate ------------------------------ */
.cv-plate{
  position:relative;display:flex;align-items:stretch;
  background:var(--cv-ground);color:var(--bone);
  border-radius:22px;
  padding:clamp(16px,2.1cqi,30px) clamp(14px,2.1cqi,30px) clamp(14px,1.7cqi,24px);
}
.cv-frame{position:relative;min-width:0;display:flex;flex-direction:column}
.cv-frame--pen{flex:var(--fw) 1 0}
.cv-frame--east{flex:var(--fw) 1 0}
.cv-frame-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;height:18px;margin:0 0 12px;min-width:0}
.cv-region{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--sage-soft);margin:0;line-height:1.3;white-space:nowrap}
/* the one line that says the sheet can be used */
.cv-maphint{display:inline-flex;align-items:center;gap:7px;margin:0;white-space:nowrap;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--bone)}
.cv-maphint svg{width:11px;height:11px;color:var(--accent)}
.cv-canvas{position:relative;aspect-ratio:var(--fw) / var(--fh)}
.cv-svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}

.cv-grat{fill:none;stroke:rgba(245,239,229,.085);stroke-width:1;vector-effect:non-scaling-stroke}
.cv-nb{fill:var(--cv-land)}
.cv-hatch-bg{fill:var(--cv-none)}
.cv-hatch-ln{stroke:rgba(245,239,229,.36);stroke-width:1.6}

.cv-st{stroke-width:1;vector-effect:non-scaling-stroke;stroke-linejoin:round;
  transition:fill .3s var(--ease-soft),stroke .3s var(--ease-soft)}
.cv-st.is-rec{fill:var(--cv-rec);stroke:var(--cv-ground)}
.cv-st.is-none{stroke:rgba(245,239,229,.62)}
.cv-st.is-sel{fill:var(--accent)}
.cv-st:focus{outline:none}
.cv-hit{fill:transparent;stroke:none}
.js .cv-hit{cursor:pointer}
.cv-ring{fill:none;pointer-events:none;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.cv-ring--sel{stroke:var(--bone);stroke-width:1.75}
.cv-ring--halo{stroke:rgba(18,24,8,.9);stroke-width:6}
.cv-ring--focus{stroke:#FFFFFF;stroke-width:2.5}
.js .cv-st[data-state]{cursor:pointer}
.cv-st.is-static{pointer-events:none}
.cv-st.is-rec.is-hover:not(.is-sel){fill:var(--cv-rec-hover)}
.cv-st.is-none.is-hover:not(.is-sel){stroke:var(--bone);stroke-width:1.6}

.cv-lead{fill:none;stroke:rgba(245,239,229,.55);stroke-width:1;vector-effect:non-scaling-stroke;
  transition:stroke .3s var(--ease-soft)}
.cv-lead.is-sel{stroke:var(--bone)}
.cv-lead.is-only:not(.is-sel){display:none}

/* words on the plate are page text, so they keep their size at any width */
.cv-lbl,.cv-nbl,.cv-tick{position:absolute;white-space:nowrap;line-height:1;margin:0;pointer-events:none}
.cv-lbl{
  font-family:var(--body);font-size:12px;font-weight:600;letter-spacing:.005em;
  padding:3px 4px;border-radius:5px;transform:translate(-50%,-50%);
  transition:background .3s var(--ease-soft),color .3s var(--ease-soft)}
.cv-lbl--r{transform:translate(-100%,-50%)}
.cv-lbl--l{transform:translate(0,-50%)}
.cv-lbl:has(br){line-height:1.12}
.cv-lbl.is-in{color:var(--cv-ink)}
.cv-lbl.is-in.is-none{color:var(--bone)}
.cv-lbl.is-out{color:var(--bone)}
.cv-lbl.is-only:not(.is-sel){display:none}
.js .cv-lbl{pointer-events:auto;cursor:pointer}
/* a chosen label is a light chip, whatever colour it had on the map */
.cv-lbl.is-sel,.cv-lbl.is-sel.is-in.is-none{background:var(--bone);color:var(--cv-ink)}
.cv-lbl.is-hover:not(.is-sel){text-decoration:underline;text-underline-offset:3px}

.cv-nbl{font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(245,239,229,.42);transform:translate(-50%,-50%)}
.cv-tick{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;color:var(--cv-quiet)}
.cv-tick--lat{right:4px;transform:translateY(calc(-100% - 3px))}
/* side by side the frames share their parallels, so the east edge carries them for both */
.cv-frame--pen .cv-tick--lat{display:none}
.cv-tick--lon{bottom:4px;transform:translateX(calc(-100% - 4px))}

/* the break: the sea between the two frames is shortened, and says so */
.cv-break{flex:0 0 clamp(30px,4.2cqi,52px);position:relative}
.cv-break::before{content:"";position:absolute;left:50%;top:24px;bottom:4px;
  border-left:1px dashed rgba(245,239,229,.22)}
.cv-break span{
  position:absolute;left:50%;top:52%;transform:translate(-50%,-50%) rotate(-90deg);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--cv-quiet);white-space:nowrap;background:var(--cv-ground);padding:6px 12px}

/* a narrower plate keeps only the names that sit inside their own state */
@container cvmap (max-width:800px){
  .cv-nbl{display:none}
}
@container cvmap (max-width:720px){
  .cv-lbl.is-out,.cv-lead{display:none}
  .cv-lbl{font-size:11px}
}
/* on a phone the frames stack, still at one scale, and the list does the naming.
   The sea label moves into the open water east of the peninsula. */
@container cvmap (max-width:600px){
  .cv-plate{display:grid;grid-template-columns:calc(538.7 / 997.6 * 100%) minmax(0,1fr);
    grid-template-areas:"pen sea" "east east";row-gap:18px;padding:18px 16px 14px}
  .cv-frame--pen{grid-area:pen}
  .cv-frame--east{grid-area:east}
  .cv-break{grid-area:sea}
  .cv-break::before{display:none}
  .cv-break span{top:50%;left:50%;transform:translate(-50%,-50%);white-space:normal;text-align:center;
    width:9ch;line-height:1.9;padding:0;background:none}
  .cv-lbl.is-in{display:none}
  .cv-lbl.is-in.is-sel{display:block}
  .cv-frame--pen .cv-tick--lat{display:block}
  .cv-tick{font-size:9px}
  .cv-frame--pen .cv-tick--lon{transform:translateX(4px)}
  .cv-frame--east .cv-tick--lon{display:none}
}

/* ------------------------------ legend and notes ------------------------------ */
.cv-cap{margin-top:18px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:14px clamp(20px,3vw,44px);align-items:start}
@media (max-width:760px){.cv-cap{grid-template-columns:minmax(0,1fr)}}
.cv-legend{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:14px;line-height:1.35;color:var(--text)}
.cv-legend li{display:flex;align-items:center;gap:11px}
.cv-notes{display:grid;gap:8px;padding-left:clamp(0px,1.6vw,22px);border-left:1px solid var(--line-2)}
@media (max-width:760px){.cv-notes{padding-left:0;border-left:0;padding-top:12px;border-top:1px solid var(--line-2)}}
.cv-notes p{font-family:var(--mono);font-size:11px;letter-spacing:.02em;line-height:1.7;color:var(--text-2)}

.cv-sw{display:inline-block;flex:0 0 auto;width:17px;height:12px;border-radius:3px}
.cv-sw--rec{background:var(--cv-rec);box-shadow:inset 0 0 0 1px rgba(36,48,20,.45)}
.cv-sw--none{background:repeating-linear-gradient(45deg,var(--cv-none) 0 2.6px,#9AA684 2.6px 3.8px);
  box-shadow:inset 0 0 0 1px rgba(36,48,20,.6)}
.cv-sw--sel{background:var(--accent)}

/* ------------------------------ the record ------------------------------ */
.cv-panel{background:var(--paper);border:1px solid var(--line);border-radius:22px;
  padding:clamp(24px,2.4vw,36px);min-height:0}
.cv-ov,.cv-sv{outline:none}
.cv-sv.is-new{animation:cvIn .32s var(--ease) both}
@keyframes cvIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.cv-eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--forest-2)}
.cv-big{margin-top:18px;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px;color:var(--forest)}
.cv-big-n{font-family:var(--display);font-weight:400;font-size:clamp(3.6rem,6vw,5.4rem);line-height:.86;
  letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.cv-big-of{font-family:var(--display);font-weight:400;font-size:clamp(1.35rem,1.9vw,1.7rem);letter-spacing:-.015em;color:var(--text)}
.cv-sub{margin-top:8px;color:var(--text-2);font-size:15.5px}
.cv-dl{margin:24px 0 0;padding:0}
.cv-dl div{display:grid;gap:4px;padding:13px 0;border-top:1px solid var(--line)}
.cv-dl dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-2)}
.cv-dl dd{margin:0;color:var(--text);font-size:15px;line-height:1.5}
.cv-hint{display:flex;align-items:baseline;gap:10px;padding-top:16px;border-top:1px solid var(--line);
  font-size:14.5px;font-weight:600;line-height:1.45;color:var(--forest-2)}
/* the arrow points at the map: beside the record on a wide screen, above it on one column */
.cv-hint::before{content:"\2190";font-weight:400;color:var(--accent)}
@media (max-width:1000px){.cv-hint::before{content:"\2191"}}
@media print{.cv-hint{display:none}}

.cv-sv-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:30px}
.cv-back{
  display:inline-flex;align-items:center;gap:8px;min-height:36px;margin-right:-8px;padding:6px 10px;
  border:0;border-radius:999px;background:transparent;color:var(--text-2);cursor:pointer;
  font-family:var(--body);font-size:13px;font-weight:600}
.cv-back:hover{background:rgba(124,145,77,.13);color:var(--text)}
.cv-back svg{width:12px;height:12px}
.cv-name{margin-top:14px;font-size:clamp(2.3rem,3.6vw,3.3rem);letter-spacing:-.025em;line-height:1}
.cv-status{margin-top:16px;display:flex;align-items:center;gap:11px;font-weight:600;font-size:15px;line-height:1.35;color:var(--text)}
.cv-copy{margin-top:18px;padding-top:18px;border-top:1px solid var(--line);color:var(--text-2);font-size:15.5px;line-height:1.65}
.cv-go{
  margin-top:22px;display:inline-block;padding:4px 0;line-height:1.5;
  color:var(--cv-accent-ink);font-weight:600;font-size:15px;text-decoration:none}
/* the dash rides on the last word, so a wrapped link still ends in it */
.cv-go::after{content:"";display:inline-block;vertical-align:middle;margin:0 0 2px 12px;
  width:16px;height:1px;background:currentColor;transition:width .4s var(--ease)}
.cv-go:hover::after{width:28px}

/* ------------------------------ in the field ------------------------------
   One installation large, the equipment and the people beside it at a smaller
   size, and the invitation as a band that closes the whole coverage story. */
.cvf-grid{
  margin-top:clamp(40px,6vh,70px);
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  column-gap:clamp(18px,2.2vw,32px);row-gap:clamp(22px,2.6vw,34px);
  align-items:start;
}
.cvf-fig{margin:0;min-width:0}
.cvf-fig--main{grid-column:1;grid-row:1 / span 2}
.cvf-fig--eq{grid-column:2;grid-row:1}
.cvf-fig--walk{grid-column:2;grid-row:2}
.cvf-visit{grid-column:1 / -1;grid-row:3;margin-top:clamp(18px,3vw,40px)}
.cvf-img{border-radius:18px;overflow:hidden;background:var(--bone-2)}
.cvf-img img{width:100%;height:100%;object-fit:cover;display:block}
.cvf-fig--main .cvf-img{aspect-ratio:5 / 4}
.cvf-fig--eq .cvf-img{aspect-ratio:2 / 1}
.cvf-fig--eq img{object-position:50% 22%}
.cvf-fig--walk .cvf-img{aspect-ratio:2 / 1}
.cvf-fig--walk img{object-position:50% 30%}
.cvf-cap{margin-top:14px;display:grid;gap:7px;max-width:58ch}
.cvf-tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--forest-2)}
.cvf-tags span+span::before{content:"";display:inline-block;width:18px;height:1px;margin:0 10px 3px;
  background:currentColor;opacity:.55;vertical-align:middle}
.cvf-text{font-size:15.5px;line-height:1.6;color:var(--text-2)}

.cvf-visit{
  position:relative;background:var(--paper);border:1px solid var(--line);border-radius:22px;
  padding:clamp(26px,3vw,44px) clamp(26px,3.4vw,52px);
  /* the same 7:5 split as the photographs above, so the words line up under them */
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:18px clamp(28px,4vw,72px);align-items:center}
.cvf-visit::before{content:"";position:absolute;left:-1px;top:50%;width:3px;height:52px;margin-top:-26px;
  border-radius:0 3px 3px 0;background:var(--accent)}
.cvf-visit-h{grid-column:1;grid-row:1 / span 2;
  font-size:clamp(1.9rem,3.2vw,2.8rem);letter-spacing:-.022em;line-height:1.04;max-width:14ch;text-wrap:balance}
.cvf-visit-p{grid-column:2;grid-row:1;align-self:end;color:var(--text-2);font-size:clamp(1rem,1.2vw,1.12rem);line-height:1.6;max-width:46ch}
.cvf-visit-acts{grid-column:2;grid-row:2;align-self:start;display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px}
.cvf-wa{color:var(--text);font-weight:600;font-size:14.5px;text-decoration:underline;
  text-decoration-color:var(--line-strong);text-underline-offset:4px;
  min-height:44px;display:inline-flex;align-items:center;transition:text-decoration-color .3s var(--ease-soft)}
.cvf-wa:hover{text-decoration-color:var(--text)}

@media (max-width:1000px){
  .cvf-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .cvf-fig--main{grid-column:1 / -1;grid-row:1}
  .cvf-fig--main .cvf-img{aspect-ratio:16 / 11}
  .cvf-fig--eq{grid-column:1;grid-row:2}
  .cvf-fig--walk{grid-column:2;grid-row:2}
  .cvf-fig--eq .cvf-img,.cvf-fig--walk .cvf-img{aspect-ratio:4 / 3}
  .cvf-visit{grid-row:3}
}
@media (max-width:720px){
  .cvf-visit{grid-template-columns:minmax(0,1fr);row-gap:16px}
  .cvf-visit-h,.cvf-visit-p,.cvf-visit-acts{grid-column:1;grid-row:auto}
  .cvf-visit-acts{margin-top:10px}
  .cvf-visit::before{top:clamp(26px,3vw,44px);margin-top:4px}
}
@media (max-width:620px){
  .cvf-grid{grid-template-columns:minmax(0,1fr);row-gap:30px}
  .cvf-fig--main,.cvf-fig--eq,.cvf-fig--walk,.cvf-visit{grid-column:1;grid-row:auto}
  .cvf-fig--main .cvf-img{aspect-ratio:5 / 4}
  .cvf-visit{margin-top:6px}
  .cvf-tags{display:grid;gap:5px}
  .cvf-tags span+span::before{display:none}
}

/* ------------------------------ motion and print ------------------------------ */
@media (prefers-reduced-motion:reduce){
  .cv-sv.is-new{animation:none}
}
@media print{
  .sec.cv,.sec.cvf{padding:28px 0;background:#fff}
  .cv-stage{display:block}
  .cv-legend-sel,.cv-sv,.cv-back,.cv-maphint,.cv-ring,.cvf-visit-acts .cvf-wa{display:none!important}
  .cv-ov{display:block!important}
  .cv-panel{position:static;margin-top:18px;break-inside:avoid}
  .cv-map{break-inside:avoid}
  /* the plate prints as a light sheet, and always as the whole footprint */
  .cv-plate{background:#fff;border:1px solid #9a9a8a;color:#243014}
  .cv-grat{stroke:rgba(36,48,20,.12)}
  .cv-nb{fill:#ECEBE4}
  .cv-hatch-bg{fill:#fff}
  .cv-hatch-ln{stroke:#8C9477}
  .cv-st.is-rec,.cv-st.is-rec.is-sel{fill:#7C914D;stroke:#fff;stroke-width:1}
  .cv-st.is-none,.cv-st.is-none.is-sel{fill:url(#cv-hatch-pen);stroke:#5B6147;stroke-width:1}
  .cv-frame--east .cv-st.is-none,.cv-frame--east .cv-st.is-none.is-sel{fill:url(#cv-hatch-east)}
  .cv-lbl.is-in,.cv-lbl.is-in.is-sel{color:#fff;background:none}
  .cv-lbl.is-out,.cv-lbl.is-in.is-none,.cv-lbl.is-sel{color:#243014;background:none}
  .cv-lbl.is-only,.cv-lead.is-only{display:none!important}
  .cv-lead{stroke:#5B6147}
  .cv-region,.cv-tick,.cv-nbl,.cv-break span{color:#5B6147;background:none}
  .cv-break::before{border-color:#b9b9aa}
  .cv-sw,.cvf-img,.cv-plate{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .cvf-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .cvf-fig--main{grid-column:1 / -1}
  .cvf-fig,.cvf-visit{break-inside:avoid}
  .cvf-visit{grid-column:1 / -1;border:1px solid #9a9a8a}
  .cvf-visit::before{display:none}
}