@font-face{font-family:'Fraunces';font-weight:800;font-style:normal;font-display:swap;src:url('/fonts/fraunces-latin-800-normal.woff2') format('woff2')}
@font-face{font-family:'Fraunces';font-weight:900;font-style:normal;font-display:swap;src:url('/fonts/fraunces-latin-900-normal.woff2') format('woff2')}
/* self-hosted fonts (SIL OFL, via Fontsource) */
@font-face{font-family:'Archivo';font-weight:400;font-style:normal;font-display:swap;src:url('/fonts/archivo-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-weight:500;font-style:normal;font-display:swap;src:url('/fonts/archivo-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-weight:600;font-style:normal;font-display:swap;src:url('/fonts/archivo-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-weight:700;font-style:normal;font-display:swap;src:url('/fonts/archivo-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-weight:400;font-style:italic;font-display:swap;src:url('/fonts/archivo-latin-400-italic.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:400;font-style:normal;font-display:swap;src:url('/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:600;font-style:normal;font-display:swap;src:url('/fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Caveat';font-weight:500;font-style:normal;font-display:swap;src:url('/fonts/caveat-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Caveat';font-weight:700;font-style:normal;font-display:swap;src:url('/fonts/caveat-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Newsreader';font-weight:400;font-style:italic;font-display:swap;src:url('/fonts/newsreader-latin-400-italic.woff2') format('woff2')}
@font-face{font-family:'Newsreader';font-weight:600;font-style:italic;font-display:swap;src:url('/fonts/newsreader-latin-600-italic.woff2') format('woff2')}
/* Layout: a botanist's field notebook. Ruled oatmeal pages, with every block a separate paper cut-out,
   taped down at a slight angle. Mustard is the hero colour, moss is the second paper, handwriting is for notes. */
:root{
  color-scheme:light;
  --ground:#ddd1b4;
  --panel:#f0e9d4;
  --paper2:#e5dbbd;
  --ink:#1b2117;
  --ink-soft:#4b523f;
  --hair:#b2a787;
  --rule:rgba(68,96,43,.14);
  --edge:#f8f3e3;
  --accent:#dba01a;
  --on-accent:#1b2117;
  --moss:#44602b;
  --on-moss:#f1ead6;
  --moss-line:#44602b;
  --good:#3b5a25;
  --warn:#a8231b;
  --tape:rgba(219,160,26,.82);
  --tape2:rgba(68,96,43,.6);
  --tape3:rgba(150,118,66,.5);
  --shadow:0 1px 1px rgba(45,35,15,.2),2px 5px 10px rgba(45,35,15,.22);
  --leaf-a:#44602b;
  --leaf-b:#72904a;
  --leaf-c:#dba01a;
  --leaf-d:#c3af84;
  --leaf-e:#2a3d1f;
  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --body:'Archivo','Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  --hand:'Caveat','Segoe Print','Bradley Hand',cursive;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#141910;--panel:#222a1c;--paper2:#2a3323;--ink:#ece3cd;--ink-soft:#b7af97;--hair:#444e37;
    --rule:rgba(163,196,122,.07);--edge:#46513a;
    --accent:#efb931;--on-accent:#1b2117;--moss:#3a5226;--on-moss:#f1ead6;--moss-line:#a3c47a;
    --good:#a3c47a;--warn:#ff8f86;
    --tape:rgba(239,185,49,.78);--tape2:rgba(163,196,122,.5);--tape3:rgba(200,170,110,.4);
    --shadow:0 1px 1px rgba(0,0,0,.45),3px 6px 12px rgba(0,0,0,.5);
    --leaf-a:#4a6a2e;--leaf-b:#7a9a50;--leaf-c:#efb931;--leaf-d:#8a7f5c;--leaf-e:#2f4422;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ground:#141910;--panel:#222a1c;--paper2:#2a3323;--ink:#ece3cd;--ink-soft:#b7af97;--hair:#444e37;
  --rule:rgba(163,196,122,.07);--edge:#46513a;
  --accent:#efb931;--on-accent:#1b2117;--moss:#3a5226;--on-moss:#f1ead6;--moss-line:#a3c47a;
  --good:#a3c47a;--warn:#ff8f86;
  --tape:rgba(239,185,49,.78);--tape2:rgba(163,196,122,.5);--tape3:rgba(200,170,110,.4);
  --shadow:0 1px 1px rgba(0,0,0,.45),3px 6px 12px rgba(0,0,0,.5);
  --leaf-a:#4a6a2e;--leaf-b:#7a9a50;--leaf-c:#efb931;--leaf-d:#8a7f5c;--leaf-e:#2f4422;
  color-scheme:dark;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background-color:var(--ground);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.14'/></svg>"),
    repeating-linear-gradient(to bottom,transparent 0 1.9rem,var(--rule) 1.9rem calc(1.9rem + 1px));
  color:var(--ink);
  font:400 1rem/1.5 var(--body);
}
.wrap{max-width:72rem;margin-inline:auto;padding-inline:16px;padding-block:0 3.5rem}
h1,h2,h3{font-family:var(--display);font-weight:900;text-transform:uppercase;margin:0;text-wrap:balance;line-height:.95;letter-spacing:.01em}
h2{font-size:clamp(1.9rem,5vw,2.6rem)}
h3{font-size:1.35rem}
p{margin:0}
a{color:var(--ink);text-decoration-thickness:2px;text-underline-offset:3px}
.kicker{font:600 .72rem/1.3 var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--ink-soft)}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
button,select,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}

/* every cut-out shares paper, shadow and a strip of tape */
.patch,.sheet,.gr,.rule,.join,.none,.steps li{position:relative;background:var(--panel);box-shadow:var(--shadow)}
.patch::before,.sheet::before,.gr::before,.rule::before,.join::before,.none::before,.steps li::before{
  content:"";position:absolute;top:-.75rem;left:50%;width:5.2rem;height:1.5rem;
  background:var(--tape);transform:translateX(-50%) rotate(-2.5deg);
  clip-path:polygon(0 0,100% 0,97% 25%,100% 50%,97% 75%,100% 100%,0 100%,3% 75%,0 50%,3% 25%);
}
.gr:nth-child(2n)::before,.rule:nth-child(3n+2)::before,.steps li:nth-child(2)::before{background:var(--tape2);transform:translateX(-50%) rotate(2deg)}
.rule:nth-child(3n)::before,.steps li:nth-child(3)::before{background:var(--tape3);transform:translateX(-50%) rotate(-1deg);width:4.2rem}
.patch::before{left:14%;transform:rotate(-3deg)}
.sheet::before{left:50%}
.join::before{background:var(--tape);left:22%;transform:rotate(-3deg)}

/* top bar */
.bar{display:flex;justify-content:space-between;align-items:baseline;gap:.75rem;padding-block:.9rem;border-bottom:2px dashed var(--ink-soft)}
.mark-word{display:inline-flex;align-items:center;gap:.55rem;font:900 1.9rem/1 var(--display);text-transform:uppercase;letter-spacing:.06em}
.logo{width:1.25rem;height:auto;flex:none;fill:var(--ink)}

/* hero */
.hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:1.5rem;padding-block:2rem 1.25rem}
.hero-copy{position:relative;z-index:1;display:grid;gap:1.25rem;min-width:0}
.hand-kicker{font:700 1.45rem/1 var(--hand);color:var(--ink-soft);transform:rotate(-1.5deg);transform-origin:left}
.hero h1{font-size:clamp(2.7rem,10.5vw,6.6rem);max-width:14ch}
.hero .mark{
  display:inline-block;background:var(--accent);color:var(--on-accent);padding:0 .14em;transform:rotate(-1.5deg);
  clip-path:polygon(1% 10%,7% 0,21% 5%,40% 0,63% 5%,85% 0,99% 8%,100% 40%,98% 70%,100% 94%,80% 100%,58% 94%,38% 100%,17% 95%,3% 100%,0 76%,2% 45%);
}
.lede{max-width:38rem;font-size:1.1rem;color:var(--ink-soft)}
.find{display:flex;flex-wrap:wrap;align-items:end;gap:.75rem 1rem}
.find .field{display:grid;gap:.35rem;flex:1 1 20rem;max-width:34rem}
#pc{
  width:100%;min-width:0;padding:.45rem .7rem;border:2px solid var(--ink);background:var(--panel);
  font:600 1.4rem/1.2 var(--mono);letter-spacing:.02em;border-radius:2px;box-shadow:var(--shadow);
}
#pc::placeholder{color:var(--hair)}
.go,.copy{
  background:var(--accent);color:var(--on-accent);border:0;border-radius:2px 3px 2px 4px/3px 2px 4px 2px;
  padding:.65rem 1.2rem;font:900 1.5rem/1 var(--display);text-transform:uppercase;letter-spacing:.05em;
  box-shadow:inset 0 0 0 1px rgba(27,33,23,.28),var(--shadow);transform:rotate(-1deg);
  transition:transform .12s ease,box-shadow .12s ease;
}
.go:hover,.copy:hover{transform:rotate(-1deg) translateY(-2px)}
.go:active,.copy:active{transform:rotate(-1deg) translateY(1px);box-shadow:inset 0 0 0 1px rgba(27,33,23,.28),0 1px 2px rgba(45,35,15,.3)}
.go:disabled{opacity:.55;cursor:progress}
.go.small{font-size:1.15rem;padding:.5rem 1rem}
.copy{font-size:1.25rem;padding:.55rem 1rem}
.copy:disabled{background:var(--paper2);color:var(--ink-soft);box-shadow:none;cursor:not-allowed;transform:none}
.linkbtn{display:inline-block;text-decoration:none;color:var(--on-accent)}
.msg{font:600 .85rem/1.4 var(--mono)}
.msg:empty{display:none}
.msg.bad{color:var(--warn)}
.try{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.eg{background:var(--panel);border:0;border-radius:2px;padding:.45rem .7rem;font:600 .75rem/1 var(--mono);letter-spacing:.06em;box-shadow:var(--shadow)}
.eg:nth-of-type(odd){transform:rotate(-1deg)}
.eg:nth-of-type(even){transform:rotate(.8deg)}
.eg:hover{background:var(--accent);color:var(--on-accent)}

.hero-art{position:absolute;right:-.25rem;top:3rem;width:6.6rem;z-index:0;pointer-events:none;transform:rotate(4deg)}
.hero-art svg{display:block;width:100%;height:auto;overflow:visible}
.hero-art .cut{stroke:var(--edge);stroke-width:3;stroke-linejoin:round;paint-order:stroke}
.hero-art .la{fill:var(--leaf-a)}
.hero-art .lb{fill:var(--leaf-b)}
.hero-art .lc{fill:var(--leaf-c)}
.hero-art .ld{fill:var(--leaf-d)}
.hero-art .le{fill:var(--leaf-e)}
.hero-art .stem{fill:none;stroke:var(--leaf-e);stroke-width:11;stroke-linecap:butt}
.hero-art .vein{fill:none;stroke:var(--edge);stroke-width:2.2;stroke-linecap:round;opacity:.8}
.hero-art .tape{fill:var(--tape3)}
.hero-art .fig{display:none}
.hero-art .tagpaper{fill:var(--panel);stroke:var(--edge);stroke-width:2}
.hero-art .tagtext{font:700 24px var(--hand);fill:var(--ink)}
.hero-art .tagsub{font:500 17px var(--hand);fill:var(--ink-soft)}
.hero-art .string{fill:none;stroke:var(--ink-soft);stroke-width:1.4}
@media (min-width:56rem){
  .hero{grid-template-columns:minmax(0,1.6fr) minmax(13rem,1fr);gap:2rem;align-items:center;padding-block:2.5rem 1.5rem}
  .hero-art{position:relative;right:auto;top:auto;width:min(100%,24rem);justify-self:center;transform:rotate(3deg)}
  .hero-art .fig{display:inline}
}

/* three steps */
.steps{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:1.4rem 1.25rem}
.steps li{display:grid;grid-template-columns:2.6rem minmax(0,1fr);column-gap:.9rem;row-gap:.1rem;padding:1.1rem 1rem .9rem;align-items:center}
.steps li:nth-child(1){transform:rotate(-.7deg)}
.steps li:nth-child(2){transform:rotate(.6deg)}
.steps li:nth-child(3){transform:rotate(-.4deg)}
.steps .n{grid-row:1 / span 2;width:2.6rem;height:2.6rem;display:grid;place-items:center;border:2.5px solid var(--moss-line);border-radius:50% 46% 52% 48%;color:var(--moss-line);font:700 1.9rem/1 var(--hand)}
.steps b{font:600 .78rem/1.3 var(--mono);text-transform:uppercase;letter-spacing:.12em}
.steps .d{font:500 1.2rem/1.15 var(--hand);color:var(--ink-soft)}
@media (min-width:44rem){.steps{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* patch */
.patch{display:grid;margin-top:1rem;transform:rotate(-.2deg)}
.patch-head{padding:1.4rem 1.1rem 1.1rem;display:grid;gap:1rem;border-bottom:2px dashed var(--hair)}
.tags{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.tag-val{font:900 clamp(1.5rem,4.2vw,2.2rem)/1 var(--display);text-transform:uppercase;margin-top:.25rem;text-wrap:balance}
.demo{font-size:.9rem;color:var(--ink-soft);max-width:48rem}
.demo b{color:var(--ink)}
.cls-wrap{display:grid;gap:.6rem}
.cls-grid{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.cls{display:grid;gap:.3rem;text-align:left;align-content:start;padding:.7rem .8rem;border:0;border-radius:2px;background:var(--paper2);box-shadow:var(--shadow)}
.cls:nth-child(odd){transform:rotate(-.5deg)}
.cls:nth-child(even){transform:rotate(.4deg)}
.cls b{font:900 1.25rem/1 var(--display);text-transform:uppercase;text-wrap:balance}
.cls small{font:600 .68rem/1.3 var(--mono);text-transform:uppercase;letter-spacing:.08em}
.cls[aria-pressed="true"]{background:var(--moss);color:var(--on-moss);transform:rotate(0)}
.bar-share{display:block;height:.45rem;border:1.5px solid currentColor;position:relative}
.bar-share i{position:absolute;inset:0 auto 0 0;background:currentColor}
.tabs{display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem;padding:1.1rem}
@media (min-width:44rem){.tabs{grid-template-columns:repeat(4,1fr)}}
.tab{display:grid;gap:.15rem;text-align:left;padding:.8rem 1rem;background:var(--paper2);color:var(--ink);border:0;border-radius:2px;box-shadow:var(--shadow)}
.tab:nth-child(odd){transform:rotate(-.8deg)}
.tab:nth-child(even){transform:rotate(.7deg)}
.tab b{font:900 2.8rem/.9 var(--display);font-variant-numeric:tabular-nums}
.tab span{font:600 .72rem/1.2 var(--mono);text-transform:uppercase;letter-spacing:.12em}
.tab[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);transform:rotate(0) scale(1.03)}

/* work area */
.work{display:grid;gap:2.25rem;margin-top:2.5rem;align-items:start}
@media (min-width:62rem){.work{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}}
.col{display:grid;gap:2.5rem;min-width:0}
.sec{display:grid;gap:1rem;min-width:0}
.sec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:.5rem 1rem}
.note{font:500 1.15rem/1.2 var(--hand);color:var(--ink-soft)}
.head{display:grid;gap:.5rem}

/* species slips */
.species{display:grid;gap:.9rem .8rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,15.5rem),1fr))}
.sp{position:relative;display:flex;gap:.7rem;align-items:flex-start;padding:.75rem .85rem;background:var(--panel);box-shadow:var(--shadow);border-radius:2px;cursor:pointer;min-width:0}
.sp:nth-child(3n+1){transform:rotate(-.5deg)}
.sp:nth-child(3n+2){transform:rotate(.4deg)}
.sp:nth-child(3n){transform:rotate(-.2deg)}
.sp input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.box{flex:none;width:1.4rem;height:1.4rem;border:2px solid var(--ink);border-radius:2px;margin-top:.1rem;position:relative;background:var(--ground)}
.sp input:checked + .box{background:var(--accent)}
.sp input:checked + .box::before,.sp input:checked + .box::after{content:"";position:absolute;left:50%;top:50%;width:2px;height:1rem;background:var(--on-accent);transform:translate(-50%,-50%) rotate(45deg)}
.sp input:checked + .box::after{transform:translate(-50%,-50%) rotate(-45deg)}
.sp:has(input:checked){background:color-mix(in srgb,var(--accent) 30%,var(--panel))}
.sp:has(input:focus-visible){outline:3px solid var(--ink);outline-offset:3px}
.sp-body{display:grid;gap:.1rem;min-width:0}
.sci{font:italic 600 1.08rem/1.2 var(--serif);overflow-wrap:anywhere}
.com{font:500 1.15rem/1.1 var(--hand);color:var(--ink-soft)}

/* growers */
.growers{display:grid;gap:1.6rem 1.1rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr));padding-top:.5rem}
.gr{padding:1.3rem 1.1rem 1rem;display:grid;gap:.7rem;align-content:start;min-width:0}
.gr:nth-child(odd){transform:rotate(-.6deg)}
.gr:nth-child(even){transform:rotate(.5deg)}
.gr-top{display:flex;flex-wrap:wrap;gap:.4rem .6rem;align-items:center}
.chip{font:600 .65rem/1 var(--mono);text-transform:uppercase;letter-spacing:.1em;padding:.3rem .5rem;background:var(--paper2);border-radius:2px}
.gr h3{font-size:1.5rem;overflow-wrap:anywhere}
.gr-meta{font-size:.9rem;color:var(--ink-soft)}
.cover{display:grid;gap:.4rem}
.dashes{display:flex;flex-wrap:wrap;gap:.25rem}
.dash{width:1.1rem;height:.5rem;background:var(--hair);border-radius:1px}
.dash.on{background:var(--moss-line)}
.cover-t{font:600 .8rem/1.3 var(--mono)}
.cover-t.full{color:var(--good)}
.missing{font-size:.82rem;color:var(--ink-soft)}
.gr-links{display:grid;gap:.2rem;font-size:.85rem;overflow-wrap:anywhere}
.pick{justify-self:start;background:var(--paper2);border:0;border-radius:2px;padding:.55rem .8rem;font:600 .75rem/1 var(--mono);text-transform:uppercase;letter-spacing:.1em;box-shadow:var(--shadow)}
.pick:hover{transform:translateY(-1px)}
.pick[aria-pressed="true"]{background:var(--moss);color:var(--on-moss)}

/* request sheet */
.sheet{padding:1.5rem 1.1rem 1.1rem;display:grid;gap:1rem;min-width:0;transform:rotate(.35deg)}
@media (min-width:62rem){.sheet{position:sticky;top:calc(env(safe-area-inset-top,0px) + 20px)}}
.fields{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr))}
.f{display:grid;gap:.3rem;min-width:0}
.f select{width:100%;padding:.5rem .6rem;border:2px solid var(--ink);border-radius:2px;background:var(--paper2)}
.rows{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.row{display:grid;grid-template-columns:minmax(0,1fr) 4.5rem auto;gap:.6rem;align-items:center;border-bottom:1px dashed var(--hair);padding-bottom:.4rem}
.row label{overflow-wrap:anywhere;font:italic 600 .98rem/1.2 var(--serif)}
.row input{width:100%;padding:.3rem .4rem;border:2px solid var(--ink);border-radius:2px;background:var(--paper2);font:600 .95rem var(--mono);font-variant-numeric:tabular-nums}
.x{background:transparent;border:0;font:600 .68rem/1 var(--mono);text-transform:uppercase;letter-spacing:.1em;text-decoration:underline;padding:.3rem}
.empty{font:500 1.15rem/1.25 var(--hand);color:var(--ink-soft)}
.warnline{font-size:.85rem;border:2px dashed var(--ink);padding:.55rem .7rem;border-radius:2px}
#out{
  width:100%;min-height:15rem;resize:vertical;padding:.5rem .8rem;border:2px solid var(--ink);border-radius:2px;
  background-color:var(--paper2);
  background-image:repeating-linear-gradient(to bottom,transparent 0 calc(1.5rem - 1px),var(--rule) calc(1.5rem - 1px) 1.5rem);
  background-attachment:local;font:400 .82rem/1.5rem var(--mono);
}
.copy-row{display:flex;flex-wrap:wrap;gap:.75rem 1rem;align-items:center}

/* nursery sign-up */
.join{margin-top:3.5rem;background:var(--moss);color:var(--on-moss);padding:1.6rem 1.25rem 1.3rem;display:grid;gap:.8rem;justify-items:start;transform:rotate(-.4deg);overflow:hidden}
.join::after{
  content:"";position:absolute;right:-1.5rem;bottom:-1.5rem;width:11rem;height:11rem;opacity:.16;pointer-events:none;
  background:no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><g fill='%23f1ead6'><path d='M100 190C20 170 6 90 30 20C110 40 150 110 100 190Z'/><path d='M104 190C130 120 170 70 196 60C200 130 160 180 104 190Z'/></g></svg>");
}
.join .lede{color:var(--on-moss);opacity:.92}

/* rules */
.rules{margin-top:3.5rem;display:grid;gap:1.25rem}
.rule-grid{display:grid;gap:1.9rem 1.4rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));padding-top:.5rem}
.rule{padding:1.3rem 1rem 1rem;display:grid;gap:.4rem;align-content:start}
.rule:nth-child(odd){transform:rotate(-.7deg)}
.rule:nth-child(even){transform:rotate(.6deg)}
.rule h3{color:var(--moss-line)}
.rule p{font-size:.95rem;color:var(--ink-soft)}
.none{margin-top:1.6rem;padding:1.4rem 1.25rem 1.25rem;display:grid;gap:.8rem;justify-items:start;transform:rotate(.3deg)}
.foot{margin-top:3.5rem;padding-top:1rem;border-top:2px dashed var(--ink-soft);display:grid;gap:.4rem;font-size:.85rem;color:var(--ink-soft)}

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

/* shared form pieces (join page and planting report) */
.form{display:grid;gap:1.15rem}
.fld{display:grid;gap:.35rem;min-width:0}
.fld > label,.legend{font:600 .72rem/1.3 var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--ink-soft)}
.fld .req{color:var(--warn)}
.fld .help{font:500 1.1rem/1.15 var(--hand);color:var(--ink-soft)}
.fld input[type="text"],.fld input[type="email"],.fld select,.fld textarea{
  width:100%;min-width:0;padding:.6rem .7rem;border:2px solid var(--ink);border-radius:2px;background:var(--paper2);
  font:400 1rem/1.4 var(--body);
}
.fld textarea{min-height:6.5rem;resize:vertical}
.fld input::placeholder,.fld textarea::placeholder{color:var(--ink-soft);opacity:.7}
.two{display:grid;gap:1.15rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.checks{display:grid;gap:.6rem;border:0;margin:0;padding:0}
.check{display:flex;gap:.7rem;align-items:flex-start;cursor:pointer;line-height:1.35}
.check input{flex:none;width:1.3rem;height:1.3rem;margin:.1rem 0 0;accent-color:var(--moss);cursor:pointer}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.err{font:600 .85rem/1.4 var(--mono);color:var(--warn)}
.err:empty{display:none}

/* planting map */
.plant{margin-top:3.5rem;display:grid;gap:1rem}
.plant .head{display:grid;gap:.5rem}
.plant .hand{margin:0 0 .8rem;font:700 clamp(1.8rem,6vw,2.6rem)/1 var(--hand);color:var(--moss-line);transform:rotate(-2deg);display:inline-block}
.plant-grid{display:grid;gap:1.4rem;align-items:start}
@media (min-width:60rem){.plant-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}}
.mapcard{position:relative;background:var(--panel);box-shadow:var(--shadow);padding:.7rem .7rem .5rem;transform:rotate(-.3deg)}
.mapcard::before{content:"";position:absolute;top:-.75rem;left:30%;width:5.2rem;height:1.5rem;background:var(--tape2);transform:rotate(2deg);z-index:500;
  clip-path:polygon(0 0,100% 0,97% 25%,100% 50%,97% 75%,100% 100%,0 100%,3% 75%,0 50%,3% 25%)}
#map{height:min(26rem,70vw);min-height:19rem;background:var(--paper2);border:2px solid var(--ink);z-index:1}
#map .leaflet-tile-pane{filter:grayscale(1) sepia(.35) contrast(.95)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #map .leaflet-tile-pane{filter:grayscale(1) invert(.9) sepia(.2) brightness(.8)}}
:root[data-theme="dark"] #map .leaflet-tile-pane{filter:grayscale(1) invert(.9) sepia(.2) brightness(.8)}
.tally{display:flex;gap:.6rem 1.4rem;flex-wrap:wrap;align-items:baseline;padding:.6rem .2rem .2rem}
.tally b{font:900 2.2rem/1 var(--display);color:var(--ink)}
.tally span{font:600 .75rem/1.3 var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--ink-soft)}
.plantform{position:relative;background:var(--panel);box-shadow:var(--shadow);padding:1.5rem 1.1rem 1.1rem;transform:rotate(.3deg)}
.plantform h3{margin:0 0 .8rem}
.plantform .thanks{margin-top:0;transform:none;box-shadow:none}

/* why local plants */
.why{margin-top:3.5rem;display:grid;gap:1rem}
.why .head{display:grid;gap:.5rem}
.why .hand{margin:0 0 .8rem;font:700 clamp(1.8rem,6vw,2.6rem)/1 var(--hand);color:var(--moss-line);transform:rotate(-2deg);display:inline-block}
.statrow{display:grid;gap:1.3rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));margin-top:.5rem}
.stat{margin:0;position:relative;background:var(--panel);box-shadow:var(--shadow);padding:1.3rem 1rem 1rem;display:grid;gap:.4rem;min-width:0}
.stat:nth-child(1){transform:rotate(-.6deg)}.stat:nth-child(2){transform:rotate(.5deg)}.stat:nth-child(3){transform:rotate(-.3deg)}
.stat::before{content:"";position:absolute;top:-.6rem;left:14%;width:4rem;height:1.2rem;background:var(--tape);transform:rotate(-3deg);
  clip-path:polygon(0 0,100% 0,97% 25%,100% 50%,97% 75%,100% 100%,0 100%,3% 75%,0 50%,3% 25%)}
.stat b{font:900 clamp(2rem,7vw,2.8rem)/1 var(--display);text-transform:uppercase;color:var(--ink);overflow-wrap:anywhere}
.stat figcaption{font:400 1rem/1.35 var(--body);color:var(--ink-soft)}
.stat small{display:block;margin-top:.45rem;font:600 .68rem/1.3 var(--mono);text-transform:uppercase;letter-spacing:.1em}

.more{grid-column:1/-1;margin:.5rem 0 0}
.disclaimer{padding:.6rem .8rem;border-left:4px solid var(--moss-line);background:var(--paper2);max-width:44rem}
.disclaimer b{font:700 .72rem/1 var(--mono);text-transform:uppercase;letter-spacing:.12em;margin-right:.4rem}

.grp{grid-column:1/-1;margin:.6rem 0 0;font-size:1.5rem}
.grp-note{grid-column:1/-1;margin:0;font:500 1.15rem/1.2 var(--hand);color:var(--ink-soft)}

/* get involved */
.involved{margin-top:3.5rem;display:grid;gap:1rem}
.involved .head{display:grid;gap:.5rem}
.involved .hand{margin:0 0 .8rem;font:700 clamp(1.8rem,6vw,2.6rem)/1 var(--hand);color:var(--moss-line);transform:rotate(-2deg);display:inline-block}
.inv-grid{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));margin-top:.4rem}
.inv{position:relative;background:var(--panel);box-shadow:var(--shadow);padding:1.4rem 1.1rem 1.1rem;display:grid;gap:.7rem;justify-items:start;min-width:0}
.inv:nth-child(1){transform:rotate(-.5deg)}.inv:nth-child(2){transform:rotate(.4deg)}
.inv::before{content:"";position:absolute;top:-.65rem;left:16%;width:4.4rem;height:1.3rem;background:var(--tape);transform:rotate(-3deg);
  clip-path:polygon(0 0,100% 0,97% 25%,100% 50%,97% 75%,100% 100%,0 100%,3% 75%,0 50%,3% 25%)}
.inv p{margin:0;color:var(--ink-soft)}
.inv-links{display:flex;flex-wrap:wrap;gap:.7rem 1.1rem;align-items:center}
.inv-alt{font:600 .8rem/1 var(--mono);text-transform:uppercase;letter-spacing:.1em}
.fine{margin:0;font:500 1.1rem/1.2 var(--hand);color:var(--ink-soft)}
.inv-stat{margin:0;max-width:44rem;color:var(--ink-soft)}
.inv-stat b{font:900 1.5rem/1 var(--display);color:var(--ink);margin-right:.15rem}

/* paper texture: fine grain plus faint fibres, layered over the paper cut-outs and the page */
:root{--grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='g' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.36 0 0 0 0 0.28 0 0 0 0 0.16 1.0 0 0 0 -.50'/></filter><filter id='f' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.018 .55' numOctaves='2' seed='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.33 0 0 0 0 0.18 .45 0 0 0 -.24'/></filter><rect width='260' height='260' filter='url(%23f)'/><rect width='260' height='260' filter='url(%23g)'/></svg>")}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='g' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95 0 0 0 0 0.92 0 0 0 0 0.78 .8 0 0 0 -.52'/></filter><filter id='f' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.018 .55' numOctaves='2' seed='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95 0 0 0 0 0.92 0 0 0 0 0.78 .35 0 0 0 -.20'/></filter><rect width='260' height='260' filter='url(%23f)'/><rect width='260' height='260' filter='url(%23g)'/></svg>")}}
:root[data-theme="dark"]{--grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='g' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95 0 0 0 0 0.92 0 0 0 0 0.78 .8 0 0 0 -.52'/></filter><filter id='f' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.018 .55' numOctaves='2' seed='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95 0 0 0 0 0.92 0 0 0 0 0.78 .35 0 0 0 -.20'/></filter><rect width='260' height='260' filter='url(%23f)'/><rect width='260' height='260' filter='url(%23g)'/></svg>")}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--grain);background-size:300px 300px;opacity:.3}
@media print{body::before{display:none}}
.foot .country{color:var(--ink);font-size:.95rem;max-width:62ch;padding-bottom:.6rem;border-bottom:1px solid var(--hair)}
.chip-first{background:var(--accent);color:var(--on-accent);border:1px solid var(--on-accent)}
.why .heat{margin-top:1.4rem;max-width:68ch}
.why .reasons{display:grid;gap:.9rem;margin-top:1.4rem;max-width:68ch}
.why .reasons b{font-family:var(--display);text-transform:uppercase;letter-spacing:.02em}
.why .sub{margin:2rem 0 .8rem;font-size:1.35rem}
.why .who{display:grid;gap:2.2rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr));margin-top:1rem;align-items:start}
.why .who-col .sub{margin-top:1rem}
.why .who-col .reasons{margin-top:1.4rem}
.why .three{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));margin-top:2rem;align-items:start}
.why .reason{display:grid;gap:1rem;min-width:0}
.why .reason .sub{margin:0}
.why .reason .stat{transform:rotate(-.4deg)}
.why .reason:nth-child(2) .stat{transform:rotate(.4deg)}
.why .why-native{margin-top:1.8rem;max-width:68ch}
.why .statrow.two{grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr))}
.why .norm{margin-top:1rem;font-weight:600}
.why .three.two{grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr))}

/* ===== Aesthetic pass: calmer layout. The seedling in the hero is the one collage moment.
   Everything else is flat oatmeal panels with hairline edges, plain labels and one loud block: Why native. ===== */
body{background-image:none}
body::before{opacity:.12}
:root{--shadow:none}
.patch::before,.sheet::before,.gr::before,.rule::before,.join::before,.none::before,.steps li::before,
.mapcard::before,.stat::before,.inv::before{display:none}
.patch,.sheet,.gr,.rule,.none,.steps li,.mapcard,.plantform,.stat,.inv,.sp,.cls,.tab,.eg{
  transform:none!important;box-shadow:none;border:1px solid var(--hair);border-radius:4px}
.join{transform:none;box-shadow:none;border-radius:6px}
.tab[aria-pressed="true"]{transform:none!important;border-color:var(--ink)}
.cls[aria-pressed="true"]{border-color:var(--moss)}
.plantform .thanks{border:0}
.patch{border-radius:6px}
.patch-head{border-bottom:1px solid var(--hair)}
.bar{border-bottom:1px solid var(--hair)}
.foot{border-top:1px solid var(--hair)}
.row{border-bottom:1px solid var(--hair)}
.warnline{border-style:solid;border-width:1px}

/* labels: plain sentence case */
.kicker,.fld > label,.legend,.steps b,.cls small,.tab span,.tally span,.chip,.pick,.x,.inv-alt,.stat small,.disclaimer b{
  font-family:var(--body);text-transform:none;letter-spacing:0;font-weight:600}
.kicker{font-size:.9rem;color:var(--ink-soft)}
.fld > label,.legend{font-size:.9rem}
.steps b{font-size:1rem}
.cls small,.tab span,.tally span{font-size:.85rem}
.chip{font-size:.78rem;padding:.3rem .55rem}
.pick{font-size:.9rem;padding:.55rem .85rem;border:1px solid var(--ink);background:transparent}
.pick[aria-pressed="true"]{background:var(--moss);color:var(--on-moss);border-color:var(--moss)}
.x{font-size:.85rem}
.inv-alt{font-size:.95rem}
.stat small{font-size:.8rem;font-weight:500;color:var(--ink-soft)}
.eg{font-family:var(--body);letter-spacing:0;font-size:.9rem;padding:.4rem .75rem;background:transparent}

/* handwriting: only the hero line and short hints keep it, unrotated */
.hand-kicker{transform:none;font-size:1.6rem}
.note,.fine,.empty,.grp-note,.fld .help,.com{font-family:var(--body);font-size:.95rem;line-height:1.45;font-weight:400}
.com{font-style:italic;font-size:.95rem}
.steps .d{font-family:var(--body);font-size:.98rem;line-height:1.35;font-weight:400}
.steps .n{font-family:var(--display);font-size:1.5rem;border-radius:50%;border-width:2px}
.steps li{padding:1rem}

/* type: headings lose the all-caps stencil below h2 */
h3{font-family:var(--body);text-transform:none;font-weight:700;letter-spacing:0;line-height:1.2;font-size:1.2rem}
.gr h3{font-size:1.2rem}
.cls b{font-family:var(--body);text-transform:none;font-weight:700;font-size:1.05rem}
.tag-val{font-size:clamp(1.4rem,3.6vw,1.9rem)}
h2{font-size:clamp(2rem,5.5vw,3rem);max-width:22ch}
.head{gap:.6rem}

/* buttons: square, no tilt */
.go,.copy{transform:none!important;border-radius:3px;box-shadow:none;font-size:1.25rem}
.go:hover,.copy:hover{filter:brightness(.94)}
#pc{box-shadow:none;border-radius:3px;font-family:var(--body);font-weight:600;font-size:1.3rem}
.hero .mark{transform:none}

/* rules of the patch: a quiet two-column list */
.rule-grid{gap:0 3rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));padding-top:0;border-top:1px solid var(--hair)}
.rule{background:transparent;border:0;border-bottom:1px solid var(--hair);border-radius:0;padding:1rem 0}
.rule h3{color:var(--ink)}

/* section spacing and the Why block */
.why,.plant,.involved,.rules{margin-top:4.5rem}
.why .statrow{margin-top:0}
.why .three{margin-top:1.5rem;gap:1.75rem}
.why .reason .sub{font-family:var(--display);text-transform:uppercase;font-weight:900;font-size:1.7rem;letter-spacing:.01em}
.why .stat{background:transparent;padding:.9rem 1rem}
.why .stat b{font-size:2rem}
.why .lede{max-width:46rem;font-size:1.15rem;color:var(--ink)}
.native{
  margin-top:2rem;background:var(--moss);color:var(--on-moss);border-radius:6px;
  padding:clamp(1.5rem,5vw,3rem);display:grid;gap:1rem 3rem;align-items:center;grid-template-columns:minmax(0,1fr);
}
.native-num{font:900 clamp(5rem,22vw,11rem)/.85 var(--display);text-transform:uppercase;color:var(--accent);margin:0;white-space:nowrap}
.native h3{font:900 clamp(1.8rem,5vw,2.6rem)/1 var(--display);text-transform:uppercase;margin:0 0 .8rem;color:var(--on-moss)}
.native-big{font:500 clamp(1.25rem,3.2vw,1.75rem)/1.35 var(--body);max-width:36rem;color:var(--on-moss)}
@media (min-width:52rem){.native{grid-template-columns:auto minmax(0,1fr)}}
.why .why-seed{margin-top:1rem;max-width:62ch;color:var(--ink-soft)}
.why .norm{font-weight:600;color:var(--ink)}

/* section heads that used handwriting are now plain headings */
.plant .hand,.involved .hand,.why .hand{display:none}
.join{padding:clamp(1.5rem,4vw,2.5rem)}
.join::after{opacity:.1}
.mapcard{padding:.6rem}
#map{border:1px solid var(--hair);border-radius:3px}
.tally b{font-size:1.8rem}
.steps li{align-items:start}
.steps .d{margin-top:.15rem}

/* ===== Character pass: fonts now load, and a little of the cut-and-tape craft returns.
   Rule: cards stay straight and readable; the tape, a soft paper edge and the handwriting carry the personality. ===== */
:root{--shadow:0 1px 0 rgba(255,255,255,.35) inset,0 1px 2px rgba(45,35,15,.22),0 5px 12px -4px rgba(45,35,15,.25)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--shadow:0 1px 2px rgba(0,0,0,.5),0 6px 14px -4px rgba(0,0,0,.55)}}
:root[data-theme="dark"]{--shadow:0 1px 2px rgba(0,0,0,.5),0 6px 14px -4px rgba(0,0,0,.55)}
.patch,.sheet,.gr,.none,.steps li,.mapcard,.plantform,.stat,.inv,.sp,.rule-card{border:0;box-shadow:var(--shadow);border-radius:2px}
.cls,.tab{border:0;box-shadow:var(--shadow);border-radius:2px}
.steps li:nth-child(1){transform:rotate(-.5deg)!important}
.steps li:nth-child(2){transform:rotate(.4deg)!important}
.steps li:nth-child(3){transform:rotate(-.3deg)!important}
.gr:nth-child(odd){transform:rotate(-.35deg)!important}
.gr:nth-child(even){transform:rotate(.3deg)!important}
.why .stat:nth-child(1),.why .reason:first-child .stat{transform:rotate(-.4deg)!important}
.why .reason:nth-child(2) .stat{transform:rotate(.4deg)!important}
.inv:nth-child(1){transform:rotate(-.3deg)!important}
.inv:nth-child(2){transform:rotate(.3deg)!important}
.eg{border:0;box-shadow:var(--shadow);background:var(--panel)}
.eg:nth-of-type(odd){transform:rotate(-1deg)!important}
.eg:nth-of-type(even){transform:rotate(.8deg)!important}
.sp:nth-child(3n+1){transform:rotate(-.3deg)!important}
.sp:nth-child(3n+2){transform:rotate(.25deg)!important}
/* tape returns on the cards that carry content you read once, not on controls */
.patch::before,.sheet::before,.gr::before,.steps li::before,.mapcard::before,.stat::before,.inv::before,.plantform::before{
  display:block;content:"";position:absolute;top:-.7rem;width:4.6rem;height:1.35rem;background:var(--tape);
  clip-path:polygon(0 0,100% 0,97% 25%,100% 50%,97% 75%,100% 100%,0 100%,3% 75%,0 50%,3% 25%)}
.plantform{position:relative}
.plantform::before{left:50%;transform:translateX(-50%) rotate(-2deg);background:var(--tape2)}
.stat::before{left:14%;transform:rotate(-3deg)}
.inv::before{left:16%;transform:rotate(-3deg)}
.mapcard::before{left:30%;transform:rotate(2deg);background:var(--tape2)}
.patch::before{left:14%;transform:rotate(-3deg)}
.sheet::before{left:50%;transform:translateX(-50%) rotate(-2deg)}
.steps li::before{left:50%;transform:translateX(-50%) rotate(-2.5deg)}
.steps li:nth-child(2)::before{background:var(--tape2);transform:translateX(-50%) rotate(2deg)}
.steps li:nth-child(3)::before{background:var(--tape3);transform:translateX(-50%) rotate(-1deg)}
.gr::before{left:50%;transform:translateX(-50%) rotate(-2deg)}
.gr:nth-child(2n)::before{background:var(--tape2);transform:translateX(-50%) rotate(2deg)}
.steps li,.gr,.stat,.inv,.mapcard,.plantform,.sheet{padding-top:1.4rem}
.why .stat{background:var(--panel)}
.growers,.inv-grid,.why .three{row-gap:1.8rem}
.join{box-shadow:var(--shadow)}
.join::before{display:block;content:"";position:absolute;top:-.7rem;left:22%;width:5rem;height:1.4rem;background:var(--tape);transform:rotate(-3deg);
  clip-path:polygon(0 0,100% 0,97% 25%,100% 50%,97% 75%,100% 100%,0 100%,3% 75%,0 50%,3% 25%)}
.native{position:relative;box-shadow:var(--shadow)}
.native::before{content:"";position:absolute;top:-.7rem;right:12%;width:6rem;height:1.5rem;background:var(--tape);transform:rotate(2.5deg);
  clip-path:polygon(0 0,100% 0,97% 25%,100% 50%,97% 75%,100% 100%,0 100%,3% 75%,0 50%,3% 25%)}
/* handwriting labels over section headings */
.plant .hand,.involved .hand,.why .hand{display:inline-block;font:700 clamp(1.7rem,5vw,2.3rem)/1 var(--hand);color:var(--moss-line);transform:rotate(-1.5deg);margin:0 0 .3rem;transform-origin:left}
/* notes and hints return to handwriting */
.note,.fine,.empty,.grp-note,.fld .help,.steps .d{font-family:var(--hand);font-weight:500;font-size:1.2rem;line-height:1.2}
.why .why-seed{font-size:1.2rem}
.com{font-family:var(--hand);font-style:normal;font-size:1.2rem}
/* the cut-out hero mark stays slightly tilted */
.hero .mark{transform:rotate(-1.5deg)}
.hand-kicker{transform:rotate(-1.5deg);transform-origin:left}
/* rules of the patch: keep the clean list, mark each with a tape tick */
.rule h3{position:relative;padding-left:1.1rem}
.rule h3::before{content:"";position:absolute;left:0;top:.35em;width:.6rem;height:.6rem;background:var(--accent);transform:rotate(45deg)}
.why .why-seed{font-family:var(--body);font-size:.95rem;line-height:1.5;font-weight:400}
/* the stencil cuts out too much at small sizes: use it from 2rem up, Archivo below */
.why .reason .sub,.native h3,.gr h3{font-family:var(--body);text-transform:none;font-weight:800;letter-spacing:0}
.why .reason .sub{font-size:1.5rem}
.native h3{font-size:clamp(1.6rem,4vw,2.2rem)}
.stat b,.tally b,.inv-stat b,.tab b,.go,.copy{letter-spacing:.04em}
.go,.copy{font-size:1.15rem}
h2,.hero h1,.native-num,.mark-word{letter-spacing:.03em}

/* display face: Fraunces, sentence case, tighter and warmer than the old stencil */
h1,h2,h3,.native-num,.native h3,.mark-word,.tag-val,.stat b,.tally b,.tab b,.inv-stat b,.go,.copy,.cls b{text-transform:none}
h1,h2{font-weight:900;letter-spacing:-.015em;line-height:1.02}
.hero h1{font-size:clamp(2.8rem,10vw,6rem);max-width:12ch}
h2{font-size:clamp(2rem,5.5vw,3.1rem);max-width:20ch}
.mark-word{font-size:1.5rem;letter-spacing:-.01em;font-weight:900}
.native-num{font-weight:900;letter-spacing:-.03em;line-height:.9;text-transform:none}
.native h3{font-family:var(--display);font-weight:800;letter-spacing:-.01em}
.why .reason .sub,.gr h3{font-family:var(--display);font-weight:800;letter-spacing:-.005em}
.stat b,.tally b,.tab b,.inv-stat b,.tag-val{letter-spacing:-.01em;font-weight:900}
.go,.copy{font-family:var(--body);font-weight:800;letter-spacing:0;font-size:1.05rem}
.hero .mark{padding:0 .1em}

/* pass 3 fixes */
.hero .mark{padding:.02em .12em .16em;line-height:1.05}
.foot .country{margin-inline:auto;text-align:center;max-width:46rem}
.foot{justify-items:stretch}
.foot{max-width:56rem;margin-inline:auto;text-align:center;justify-items:center}
.foot .country{font-size:1rem;max-width:none}

/* how to plant */
.howto{margin-top:4.5rem;display:grid;gap:1rem}
.howto .hand{display:inline-block;font:700 clamp(1.7rem,5vw,2.3rem)/1 var(--hand);color:var(--moss-line);transform:rotate(-1.5deg);margin:0 0 .3rem;transform-origin:left}
.howto .lede{max-width:46rem;font-size:1.15rem;color:var(--ink)}
.howto-steps{counter-reset:s;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))!important;margin-top:1.2rem}
.howto-steps li{grid-template-columns:minmax(0,1fr);row-gap:.35rem;padding:1.6rem 1rem 1rem;align-items:start}
.howto-steps li::after{counter-increment:s;content:counter(s);position:absolute;top:.7rem;right:.8rem;font:900 1.6rem/1 var(--display);color:var(--moss-line);opacity:.5}
.howto-steps b{font-size:1.05rem}
.howto-steps .d{font-family:var(--body);font-size:.95rem;line-height:1.4;color:var(--ink);margin:0}
.howto .why-seed{max-width:62ch}
.howto-steps li{align-content:start}
.howto .why-seed{font-family:var(--body);font-size:.95rem;line-height:1.5;font-weight:400;color:var(--ink-soft)}

.stat .plant-line{display:block;margin-top:.55rem;padding:.35rem .5rem;background:var(--accent);color:var(--on-accent);font:600 1rem/1.3 var(--body)}
.threat{justify-self:start;margin-top:.3rem;padding:.2rem .45rem;background:var(--accent);color:var(--on-accent);font:700 .8rem/1.2 var(--body)}
/* Plain text notes use the body sans, like the intro line. Handwriting stays on short labels. */
.empty,.note,.disclaimer,.grp-note{font-family:var(--body);font-weight:400;font-size:1.05rem;line-height:1.5;color:var(--ink-soft)}
.disclaimer b{font-family:var(--body);font-size:1.05rem;font-weight:700;letter-spacing:0;text-transform:none;color:var(--ink)}
.sp .pn{position:relative;z-index:2;justify-self:start;margin-top:.3rem;font:500 .85rem/1.2 var(--body);color:var(--moss-line);text-decoration:underline;text-underline-offset:2px}
.sp .pn:hover{color:var(--ink)}
.pick{display:inline-block;text-decoration:none}

/* Before you plant: a plain list, not cards */
.rules{gap:1rem}
.before{list-style:none;margin:0;padding:0;max-width:46rem;display:grid;gap:0}
.before li{padding:1rem 0;border-top:1px solid var(--hair);font:400 1.05rem/1.55 var(--body);color:var(--ink-soft)}
.before li:last-child{border-bottom:1px solid var(--hair)}
.before b{color:var(--ink);font-weight:700}

/* Tape stays on the three steps, stat cards and planting tips only */
.patch::before,.sheet::before,.gr::before,.mapcard::before,.plantform::before,.inv::before,.none::before,.join::before,.rule::before{display:none!important}

/* Footnotes: a small number that shows the sources on hover, keyboard focus or tap */
.fn{position:relative;display:inline-block}
.fn-b{font:700 .72rem/1 var(--body);vertical-align:super;background:none;border:0;color:var(--moss-line);cursor:help;padding:0 .2rem;text-decoration:underline;text-underline-offset:2px}
.fn-b:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.fn-pop{position:absolute;left:0;top:calc(100% - 4px);z-index:30;display:none;width:min(24rem,80vw);padding:.8rem .95rem;background:var(--panel);box-shadow:var(--shadow);border-radius:2px;font:400 .9rem/1.4 var(--body);color:var(--ink);text-align:left}
.fn:hover .fn-pop,.fn:focus-within .fn-pop{display:block}
.fn-pop b{display:block;margin-bottom:.35rem;font-weight:700}
.fn-pop ul{list-style:none;margin:0;padding:0;display:grid;gap:.3rem}
.fn-pop a{color:var(--ink)}
@media (max-width:40rem){.fn{position:static}.fn-pop{position:fixed;left:1rem;right:1rem;bottom:1rem;top:auto;width:auto}}

.fn-pop a{display:block;margin-top:.3rem}
.native::before{display:none!important}
.inv-stat .fn-pop b{font:700 .9rem/1.4 var(--body);letter-spacing:0;margin:0 0 .35rem;color:var(--ink)}

/* Hero: NSW outline with a seedling planted at Sydney */
.hero-art .nsw{fill:var(--leaf-a)}
.hero-art .sstem{fill:none;stroke:var(--leaf-d);stroke-width:4;stroke-linecap:round}
.hero-art .spot{fill:var(--leaf-d);stroke:var(--edge);stroke-width:2}

/* Cards: footnote popups open leftwards so they stay on screen, and sit above neighbouring cards */
.stat:hover,.stat:focus-within{z-index:10}
.stat .fn-pop{left:auto;right:0}
.stat .fn-pop b{font:700 .9rem/1.4 var(--body);letter-spacing:0;margin:0 0 .35rem;text-transform:none}
@media (max-width:40rem){.stat .fn-pop{left:1rem;right:1rem}}

/* Seed note sits centred under the green block */
.why .why-seed{max-width:46rem;margin-inline:auto;text-align:center}

/* Before you plant: two columns with bold asterisk bullets */
.before{max-width:none;grid-template-columns:repeat(auto-fit,minmax(min(100%,21rem),1fr));gap:1.6rem 3rem}
.before li{position:relative;border:0;padding:0 0 0 3.2rem;font-size:1.05rem}
.before li:last-child{border:0}
.before li::before{content:"*";position:absolute;left:0;top:.35rem;font:900 4.2rem/.5 var(--display);color:var(--accent);transform:rotate(-8deg)}
.before li:nth-child(2)::before{color:var(--moss-line);transform:rotate(10deg)}
.before li:nth-child(3)::before{color:var(--warn);transform:rotate(-4deg)}
.before li:nth-child(4)::before{color:var(--leaf-b);transform:rotate(14deg)}
.before li:nth-child(5)::before{color:var(--accent);transform:rotate(-12deg)}
.before{margin-top:1.6rem}
.ps{margin:1.4rem 0 0;font:600 1.1rem/1.4 var(--body);color:var(--ink)}
.ps b{font:900 1.1rem/1 var(--display);color:var(--moss-line)}


/* Edible tag */
.edible{justify-self:start;margin-top:.3rem;font:500 .85rem/1.35 var(--body);color:var(--ink)}
.edible b{display:inline-block;margin-right:.3rem;padding:.15rem .45rem;background:var(--moss);color:var(--on-moss,#fff);font-weight:700;font-size:.8rem}

/* Before you plant: one even column, readable footnote numbers */
.before{max-width:46rem;grid-template-columns:1fr;gap:1.5rem}
.before li{font-size:1.1rem;line-height:1.55;min-height:3rem}
.before .fn-b{font-size:.95rem;padding:0 .25rem}

/* Section menu from the seedling */
.bar{position:relative;flex-wrap:wrap;align-items:center}
.brand{display:flex;align-items:center;gap:.9rem}
.menu-btn{display:inline-flex;align-items:center;gap:.45rem;padding:.4rem .65rem;font:700 .9rem/1 var(--body);color:var(--ink);background:transparent;border:1.5px dashed var(--ink);cursor:pointer}
.menu-btn:hover,.menu-btn[aria-expanded="true"]{background:var(--accent);color:var(--on-accent);border-style:solid}
.menu-btn:hover .logo,.menu-btn[aria-expanded="true"] .logo{fill:var(--on-accent)}
.menu-btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.menu-btn .logo{width:1rem}
.caret{width:.5rem;height:.5rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .15s}
.menu-btn[aria-expanded="true"] .caret{transform:translateY(1px) rotate(-135deg)}
.menu{flex-basis:100%;order:3;padding-top:.6rem}
.menu ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.3rem 1.2rem}
.menu a{color:var(--ink);font:600 1rem/1.4 var(--body)}
.menu a[aria-current]{text-decoration-thickness:2px}
.js .menu{display:none;position:absolute;left:0;top:calc(100% + .5rem);z-index:40;flex-basis:auto;order:0;width:min(20rem,calc(100vw - 2rem));padding:1.1rem 1.2rem 1rem;background:var(--panel);box-shadow:var(--shadow);transform:rotate(-.8deg)}
.js .menu.open{display:block}
.js .menu::before{content:"";position:absolute;top:-.7rem;left:1.2rem;width:4.2rem;height:1.4rem;background:var(--accent);opacity:.9;transform:rotate(-4deg)}
.js .menu ul{display:grid;gap:0}
.js .menu a{display:block;padding:.55rem .2rem;text-decoration:none;border-bottom:1px dashed var(--hair)}
.js .menu li:last-child a{border-bottom:0}
.js .menu a:hover,.js .menu a:focus-visible{background:var(--paper2);text-decoration:underline;text-underline-offset:.2em}
.js .menu a:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
html{scroll-padding-top:1rem}

/* Wordmark above the NSW map */
.hero-side{display:contents}
.hero-brand{order:-1;margin:0;font:900 1.5rem/1 var(--display);letter-spacing:-.01em;color:var(--ink)}
@media (min-width:56rem){
  .hero-side{display:flex;flex-direction:column;align-items:center;gap:.9rem;justify-self:center;width:min(100%,24rem)}
  .hero-brand{order:0;font-size:2.1rem;text-align:center}
  .hero-side .hero-art{width:100%}
}

/* Before you plant: centred, a row of paper notes */
.rules{text-align:center;justify-items:center}
.rules .head{justify-items:center}
.rules .before{max-width:none;width:100%;display:flex;flex-wrap:wrap;justify-content:center;gap:1.6rem 1.4rem;margin-top:1.4rem}
.rules .before li{position:relative;flex:0 1 20rem;padding:2.6rem 1.3rem 1.3rem;background:var(--panel);box-shadow:var(--shadow);text-align:left;font-size:1rem;line-height:1.55;min-height:0;border:0}
.rules .before li:nth-child(odd){transform:rotate(-.7deg)}
.rules .before li:nth-child(even){transform:rotate(.6deg)}
.rules .before li::before{left:50%;top:.2rem;margin-left:-1.2rem;font-size:3.6rem;line-height:1;transform:rotate(-8deg)}
.rules .before li:nth-child(2)::before{transform:rotate(10deg)}
.rules .before li:nth-child(3)::before{transform:rotate(-4deg)}
.rules .before li:nth-child(4)::before{transform:rotate(14deg)}
.rules .before li:nth-child(5)::before{transform:rotate(-12deg)}
.rules .before li b{display:block;margin-bottom:.45rem;font:900 1.2rem/1.2 var(--display);letter-spacing:-.005em;color:var(--ink)}
.rules .ps{text-align:center}
@media (max-width:40rem){.rules .before li{flex-basis:100%}}
.rules .before li{padding-top:3.6rem;flex-basis:21rem}
.rules .before li::before{top:.5rem}

/* Link button on the patch card */
.patch-head{position:relative}
.share-ico{position:absolute;top:.9rem;right:.9rem;display:grid;place-items:center;width:2.6rem;height:2.6rem;padding:0;background:var(--accent);color:var(--on-accent);border:0;border-radius:50%;box-shadow:var(--shadow);cursor:pointer;transform:rotate(-6deg);transition:transform .15s}
.share-ico:hover{transform:rotate(0) scale(1.06)}
.share-ico:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.share-msg{position:absolute;top:1.35rem;right:4.1rem;z-index:2;padding:.25rem .55rem;background:var(--ink);color:var(--panel);font:600 .8rem/1.3 var(--body)}
.share-msg:empty{display:none}
.patch-head .kicker{padding-right:3.4rem}

/* Plant list key */
.key{list-style:none;margin:.2rem 0 1.1rem;padding:0;display:grid;gap:.6rem;max-width:46rem}
.key li{display:grid;grid-template-columns:7.2rem 1fr;gap:.8rem;align-items:start;font:400 .95rem/1.45 var(--body);color:var(--ink-soft)}
.key .threat,.key .kchip,.key .edible-chip{justify-self:start;margin:0;padding:.2rem .45rem;font:700 .8rem/1.2 var(--body);text-align:center}
.kchip{border:1.5px dashed var(--ink);color:var(--ink)}
.edible-chip{background:var(--moss);color:var(--on-moss)}
@media (max-width:30rem){.key li{grid-template-columns:1fr;gap:.25rem}}

/* Where to get them: two tabs */
.gtabs{display:flex;gap:.7rem;margin:1.1rem 0 1rem;flex-wrap:wrap}
.gtab{display:inline-flex;align-items:baseline;gap:.5rem;padding:.6rem 1rem;font:700 1rem/1 var(--body);color:var(--ink);background:var(--paper2);border:1.5px dashed var(--ink);cursor:pointer}
.gtab b{font:900 1.1rem/1 var(--display);font-variant-numeric:tabular-nums}
.gtab[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);border-style:solid;box-shadow:var(--shadow)}
.gtab:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.gtabs,#growers .empty{grid-column:1/-1}
.gtabs{align-self:start}