@import url("https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,600;1,400;1,600&display=swap");
/* ==========================================================================
   viaVARIA — brand stylesheet
   Palette: Sable / Palmetto / Sand / Limestone / Gulf / Terra / Shell
   ========================================================================== */

:root{
  --sable:#2E2A25;        /* primary text / dark ground */
  --sable-70:rgba(46,42,37,.70);
  --sable-45:rgba(46,42,37,.45);
  --sable-16:rgba(46,42,37,.16);
  --sable-08:rgba(46,42,37,.08);
  --palmetto:#4A5D3A;     /* primary green */
  --palmetto-dk:#38482B;
  --palmetto-lt:#EDF0E8;
  --sand:#E8DFD2;         /* base tint */
  --limestone:#F5F1EA;    /* card fill */
  --shell:#FFFDF9;        /* page ground */
  --gulf:#5C7C93;         /* accent / water */
  --gulf-lt:#E7EEF2;
  --terra:#B4643C;        /* highlight — sparingly */
  --terra-dk:#96502E;
  --terra-lt:#F7EAE3;
  --gold:#B8892B;

  --r-sm:6px; --r:10px; --r-lg:16px; --r-xl:24px;
  --sh-sm:0 1px 2px rgba(46,42,37,.06), 0 1px 3px rgba(46,42,37,.05);
  --sh:0 2px 4px rgba(46,42,37,.05), 0 8px 20px rgba(46,42,37,.07);
  --sh-lg:0 4px 8px rgba(46,42,37,.06), 0 20px 48px rgba(46,42,37,.12);

  --ff-display:"Fraunces","Iowan Old Style",Georgia,"Times New Roman",serif;
  --ff-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --ff-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --wrap:1140px;
  --nav-h:68px;
  --planbar-h:74px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
body{
  margin:0;background:var(--shell);color:var(--sable);
  font-family:var(--ff-body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--palmetto);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--palmetto-dk)}
button{font:inherit}
:focus-visible{outline:3px solid var(--gulf);outline-offset:2px;border-radius:4px}

h1,h2,h3,h4{font-family:var(--ff-display);font-weight:600;line-height:1.12;letter-spacing:-.018em;margin:0 0 .5em}
h1{font-size:clamp(2.1rem,5.4vw,3.6rem)}
h2{font-size:clamp(1.65rem,3.6vw,2.5rem)}
h3{font-size:clamp(1.15rem,2vw,1.4rem);letter-spacing:-.01em}
h4{font-size:1.02rem;font-family:var(--ff-body);font-weight:650;letter-spacing:.01em}
p{margin:0 0 1.1em}
em.hl{font-style:italic;color:var(--palmetto)}
.lede{font-size:clamp(1.06rem,1.9vw,1.24rem);color:var(--sable-70);max-width:62ch;line-height:1.62}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:22px}
.wrap-n{max-width:840px}
section{padding:clamp(48px,7vw,88px) 0;scroll-margin-top:calc(var(--nav-h) + 12px)}
[id]{scroll-margin-top:calc(var(--nav-h) + 12px)}
.eyebrow{font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sable-45);margin:0 0 14px;display:block}
.rule{height:1px;background:var(--sable-16);border:0;margin:0}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:.78em 1.5em;border-radius:999px;border:1.5px solid transparent;
  font-weight:600;font-size:.95rem;letter-spacing:.005em;
  cursor:pointer;text-decoration:none;transition:transform .12s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease;
  line-height:1.2;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--palmetto);color:#fff;box-shadow:var(--sh-sm)}
.btn-primary:hover{background:var(--palmetto-dk);color:#fff}
.btn-terra{background:var(--terra);color:#fff;box-shadow:var(--sh-sm)}
.btn-terra:hover{background:var(--terra-dk);color:#fff}
.btn-ghost{background:transparent;color:var(--sable);border-color:var(--sable-16)}
.btn-ghost:hover{border-color:var(--sable-45);color:var(--sable)}
.btn-sm{padding:.55em 1.05em;font-size:.86rem}
.btn-block{width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}

/* ---------- nav ---------- */
.vv-nav{
  position:sticky;top:0;z-index:60;background:rgba(255,253,249,.9);
  backdrop-filter:saturate(1.3) blur(12px);-webkit-backdrop-filter:saturate(1.3) blur(12px);
  border-bottom:1px solid var(--sable-08);
}
.vv-nav-in{display:flex;align-items:center;gap:20px;height:var(--nav-h);max-width:var(--wrap);margin-inline:auto;padding-inline:22px}
.vv-mark{font-family:var(--ff-display);font-weight:600;font-size:1.22rem;letter-spacing:-.02em;color:var(--sable);text-decoration:none;white-space:nowrap;margin-right:auto}
.vv-mark span{font-weight:800;letter-spacing:.02em}
.vv-links{display:flex;align-items:center;gap:4px}
.vv-links a{
  color:var(--sable-70);text-decoration:none;font-size:.92rem;font-weight:550;
  padding:.5em .8em;border-radius:999px;transition:background .15s,color .15s;white-space:nowrap;
}
.vv-links a:hover{background:var(--sable-08);color:var(--sable)}
.vv-links a[aria-current="page"]{color:var(--palmetto);background:var(--palmetto-lt)}
.vv-links .btn{margin-left:8px}
.vv-burger{display:none;background:none;border:1.5px solid var(--sable-16);border-radius:999px;padding:.45em .9em;font-size:.86rem;font-weight:600;color:var(--sable);cursor:pointer}

/* ---------- hero ---------- */
.hero{
  padding:clamp(56px,9vw,116px) 0 clamp(44px,6vw,76px);
  background:linear-gradient(178deg,var(--limestone) 0%,var(--shell) 72%);
  border-bottom:1px solid var(--sable-08);
}
.hero .wordmark{font-family:var(--ff-display);font-size:clamp(2.6rem,8vw,5rem);font-weight:300;letter-spacing:-.03em;line-height:1;margin:0 0 .18em;color:var(--sable)}
.hero .wordmark b{font-weight:800;letter-spacing:.005em}
.hero-tag{font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--sable-45);margin:0 0 26px}
.hero h1{max-width:19ch}
.hero .lede{margin-bottom:30px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.byline{
  margin-top:34px;padding-top:22px;border-top:1px solid var(--sable-16);
  font-size:.9rem;color:var(--sable-70);max-width:64ch;
}
.byline strong{color:var(--sable);font-weight:600}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--sable-16);border:1px solid var(--sable-16);border-radius:var(--r-lg);overflow:hidden}
.stat{background:var(--shell);padding:22px 18px;text-align:center}
.stat b{display:block;font-family:var(--ff-display);font-size:clamp(1.5rem,3.4vw,2.15rem);font-weight:600;line-height:1;color:var(--palmetto);letter-spacing:-.02em}
.stat span{display:block;margin-top:7px;font-size:.76rem;letter-spacing:.07em;text-transform:uppercase;color:var(--sable-45);font-family:var(--ff-mono)}

/* ---------- cards ---------- */
.grid{display:grid;gap:22px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.card{
  background:var(--limestone);border:1px solid var(--sable-08);border-radius:var(--r-lg);
  padding:26px;display:flex;flex-direction:column;transition:transform .15s ease,box-shadow .18s ease;
}
.card-link{text-decoration:none;color:inherit}
.card-link:hover{transform:translateY(-3px);box-shadow:var(--sh);color:inherit}
.card .num{font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.14em;color:var(--terra);margin-bottom:12px}
.card h3{margin-bottom:.4em}
.card p{color:var(--sable-70);font-size:.95rem;margin-bottom:1em}
.card .go{margin-top:auto;font-weight:600;font-size:.9rem;color:var(--palmetto)}

/* ---------- opt-in ---------- */
.optin{background:var(--palmetto);color:#fff;border-radius:var(--r-xl);padding:clamp(30px,5vw,54px);position:relative;overflow:hidden}
.optin::after{content:"";position:absolute;inset:auto -60px -90px auto;width:280px;height:280px;border-radius:50%;background:rgba(255,255,255,.055)}
.optin .eyebrow{color:rgba(255,255,255,.62)}
.optin h2{color:#fff;max-width:16ch}
.optin h2 em.hl{color:#DCE8CE}
.optin p{color:rgba(255,255,255,.82);max-width:52ch}
.optin-form{display:flex;gap:10px;flex-wrap:wrap;max-width:520px;margin-top:22px;position:relative;z-index:2}
.optin-form input[type=email]{
  flex:1 1 240px;min-width:0;padding:.82em 1.1em;border-radius:999px;border:1.5px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.1);color:#fff;font-size:.98rem;
}
.optin-form input::placeholder{color:rgba(255,255,255,.55)}
.optin-form input:focus{background:rgba(255,255,255,.17);border-color:#fff;outline:none}
.optin .fine{font-size:.8rem;color:rgba(255,255,255,.6);margin:14px 0 0}
.optin .fine a{color:rgba(255,255,255,.85)}
.form-msg{margin-top:12px;font-size:.9rem;font-weight:550;min-height:1.2em}

/* ---------- plant selector ---------- */
.sel-layout{display:grid;grid-template-columns:266px 1fr;gap:34px;align-items:start}
/* The pick bar is sticky at bottom:0, so it floats over the last ~70px of the
   viewport. Without reserving that space the bottom filters ("Wind tolerant",
   the last GOOD FOR chips) sit underneath it and cannot be reached at all. The
   bar only exists once something is picked, so the reserve is conditional. */
.facets{
  position:sticky;top:calc(var(--nav-h) + 16px);
  max-height:calc(100vh - var(--nav-h) - 34px);
  overflow-y:auto;overscroll-behavior:contain;
  padding-right:6px;padding-bottom:18px;
}
:root.has-pickbar .facets{max-height:calc(100vh - var(--nav-h) - var(--planbar-h) - 34px)}
.facet{border-bottom:1px solid var(--sable-08);padding:16px 0}
.facet:first-child{padding-top:0}
.facet h4{margin:0 0 11px;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sable-45);font-family:var(--ff-mono);font-weight:500}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{
  border:1.5px solid var(--sable-16);background:var(--shell);color:var(--sable-70);
  padding:.36em .8em;border-radius:999px;font-size:.83rem;cursor:pointer;transition:all .13s ease;font-weight:550;
}
.chip:hover{border-color:var(--sable-45);color:var(--sable)}
.chip[aria-pressed="true"]{background:var(--palmetto);border-color:var(--palmetto);color:#fff}
.searchbar{position:relative;margin-bottom:18px}
.searchbar input{
  width:100%;padding:.85em 1.1em .85em 2.6em;border-radius:999px;border:1.5px solid var(--sable-16);
  background:var(--shell);font-size:1rem;color:var(--sable);
}
.searchbar input:focus{border-color:var(--palmetto);outline:none}
.searchbar svg{position:absolute;left:.95em;top:50%;transform:translateY(-50%);opacity:.4;pointer-events:none}
.result-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.result-count{font-family:var(--ff-mono);font-size:.82rem;color:var(--sable-45);letter-spacing:.04em}
.result-count b{color:var(--palmetto)}
.sortsel{padding:.5em 2em .5em .8em;border-radius:999px;border:1.5px solid var(--sable-16);background:var(--shell);font-size:.86rem;color:var(--sable);cursor:pointer}
.plant-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:18px}
.pcard{
  border:1px solid var(--sable-08);border-radius:var(--r-lg);overflow:hidden;background:var(--shell);
  cursor:pointer;transition:transform .15s ease,box-shadow .18s ease;text-align:left;padding:0;
}
.pcard:hover{transform:translateY(-3px);box-shadow:var(--sh)}
.pcard .ph{aspect-ratio:4/3;background:linear-gradient(150deg,var(--sand),var(--limestone));overflow:hidden}
.pcard .ph img{width:100%;height:100%;object-fit:cover}
.pcard .pb{padding:13px 14px 16px}
.pcard .cn{font-family:var(--ff-display);font-size:1.03rem;font-weight:600;line-height:1.2;margin:0 0 3px;letter-spacing:-.01em}
.pcard .bn{font-style:italic;font-size:.81rem;color:var(--sable-45);margin:0 0 9px;line-height:1.3}
.tags{display:flex;flex-wrap:wrap;gap:5px}
.tag{font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;padding:.24em .6em;border-radius:999px;background:var(--sable-08);color:var(--sable-70);font-weight:600;font-family:var(--ff-mono)}
.tag.native{background:var(--palmetto-lt);color:var(--palmetto-dk)}
.tag.salt{background:var(--gulf-lt);color:#3F5D72}
.tag.tox{background:var(--terra-lt);color:var(--terra-dk)}
.tag.sel{background:var(--terra);color:#fff}
.empty{padding:56px 20px;text-align:center;color:var(--sable-45);border:1px dashed var(--sable-16);border-radius:var(--r-lg)}

/* drawer */
.drawer-bd{position:fixed;inset:0;background:rgba(46,42,37,.5);z-index:90;opacity:0;pointer-events:none;transition:opacity .2s}
.drawer-bd.open{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(560px,100%);background:var(--shell);z-index:95;
  transform:translateX(101%);transition:transform .26s cubic-bezier(.4,0,.2,1);overflow-y:auto;box-shadow:var(--sh-lg);
}
.drawer.open{transform:none}
.drawer-x{position:sticky;top:0;float:right;margin:14px 14px 0;z-index:3;background:var(--shell);border:1.5px solid var(--sable-16);border-radius:999px;width:38px;height:38px;font-size:1.15rem;cursor:pointer;color:var(--sable)}
.drawer-hero{aspect-ratio:16/10;background:linear-gradient(150deg,var(--sand),var(--limestone))}
.drawer-hero img{width:100%;height:100%;object-fit:cover}
.drawer-body{padding:24px 26px 60px}
.drawer-body h2{margin-bottom:.15em}
.drawer-body .bn{font-style:italic;color:var(--sable-45);margin:0 0 4px}
.drawer-body .fam{font-size:.82rem;color:var(--sable-45);margin:0 0 16px;font-family:var(--ff-mono)}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0}
.gallery img{aspect-ratio:1;object-fit:cover;border-radius:var(--r-sm);background:var(--sand)}
.take{background:var(--palmetto-lt);border-left:3px solid var(--palmetto);padding:16px 18px;border-radius:0 var(--r) var(--r) 0;margin:18px 0}
.take h4{color:var(--palmetto-dk);margin:0 0 .4em;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;font-family:var(--ff-mono);font-weight:500}
.take p{margin:0;font-size:.96rem}
.warn{background:var(--terra-lt);border-left:3px solid var(--terra);padding:14px 18px;border-radius:0 var(--r) var(--r) 0;margin:16px 0;font-size:.93rem}
.warn strong{color:var(--terra-dk)}
.dsec{margin:22px 0 0;padding-top:18px;border-top:1px solid var(--sable-08)}
.dsec > h4{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sable-45);font-family:var(--ff-mono);font-weight:500;margin-bottom:12px}
.spec{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;font-size:.92rem}
.spec dt{color:var(--sable-45);white-space:nowrap}
.spec dd{margin:0;font-weight:550}
.srcline{font-size:.78rem;color:var(--sable-45);margin-top:22px;padding-top:14px;border-top:1px solid var(--sable-08);font-family:var(--ff-mono);line-height:1.5;word-break:break-word}

/* mobile filter toggle */
.filter-toggle{display:none;position:sticky;top:calc(var(--nav-h) + 8px);z-index:40;margin-bottom:14px}

/* ---------- plan builder ---------- */
.lock{
  background:var(--limestone);border:1.5px dashed var(--sable-16);border-radius:var(--r-xl);
  padding:clamp(28px,5vw,52px);text-align:center;
}
.lock .lockicon{font-size:2rem;margin-bottom:10px}
.price-row{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:560px;margin:26px auto 0}
.price{background:var(--shell);border:1.5px solid var(--sable-16);border-radius:var(--r-lg);padding:24px 20px;text-align:center}
.price.best{border-color:var(--palmetto);border-width:2px;position:relative}
.price.best::before{content:"Best value";position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--palmetto);color:#fff;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;padding:.28em .8em;border-radius:999px;font-weight:700;white-space:nowrap;font-family:var(--ff-mono)}
.price b{display:block;font-family:var(--ff-display);font-size:2.2rem;font-weight:600;line-height:1;color:var(--sable)}
.price .per{font-size:.82rem;color:var(--sable-45);margin:6px 0 16px;display:block}
.planbar{
  position:sticky;bottom:0;z-index:50;background:var(--shell);border-top:1px solid var(--sable-16);
  padding:12px 0;box-shadow:0 -6px 22px rgba(46,42,37,.07);
}
.planbar-in{display:flex;align-items:center;gap:14px;flex-wrap:wrap;max-width:var(--wrap);margin-inline:auto;padding-inline:22px}
.planbar .cnt{font-family:var(--ff-mono);font-size:.85rem;color:var(--sable-70);margin-right:auto}
.planbar .cnt b{color:var(--palmetto);font-size:1.05rem}
table.vt{width:100%;border-collapse:collapse;font-size:.92rem}
table.vt th,table.vt td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--sable-08)}
table.vt th{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sable-45);font-family:var(--ff-mono);font-weight:500;background:var(--limestone)}
table.vt tr:last-child td{border-bottom:0}
table.vt td.num{font-family:var(--ff-mono);font-weight:600;white-space:nowrap}
.tbl-scroll{overflow-x:auto;border:1px solid var(--sable-08);border-radius:var(--r-lg)}
.calmonth{border:1px solid var(--sable-08);border-radius:var(--r);padding:14px 16px;background:var(--limestone)}
.calmonth h4{margin:0 0 8px;color:var(--palmetto-dk)}
.calmonth ul{margin:0;padding-left:1.1em;font-size:.9rem;color:var(--sable-70)}
.calgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:14px}
.field{margin-bottom:16px}
.field label{display:block;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--sable-45);font-family:var(--ff-mono);margin-bottom:6px}
.field input,.field select{width:100%;padding:.68em .9em;border-radius:var(--r);border:1.5px solid var(--sable-16);background:var(--shell);font-size:1rem;color:var(--sable)}
.field input:focus,.field select:focus{border-color:var(--palmetto);outline:none}
.note{font-size:.85rem;color:var(--sable-45);font-style:italic}

/* ---------- shop ---------- */
.prod{background:var(--limestone);border:1px solid var(--sable-08);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column}
.prod .cover{aspect-ratio:4/5;background:var(--sand);overflow:hidden;position:relative}
.prod .cover img{width:100%;height:100%;object-fit:cover}
.prod .cover .ph-fallback{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--ff-display);font-size:1.1rem;color:var(--sable-45);text-align:center;padding:20px;background:linear-gradient(160deg,var(--sand),var(--limestone))}
.prod .pb{padding:20px;display:flex;flex-direction:column;flex:1}
.prod .tagline{font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--terra);margin-bottom:8px}
.prod h3{font-size:1.1rem;margin-bottom:.35em}
.prod p{font-size:.9rem;color:var(--sable-70);flex:1}
.prod .prow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}
.prod .amt{font-family:var(--ff-display);font-size:1.4rem;font-weight:600}
.prod .amt.free{color:var(--palmetto)}

/* ---------- videos ---------- */
.vplayer{aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;background:var(--sable);border:1px solid var(--sable-08)}
.vplayer iframe{width:100%;height:100%;border:0;display:block}
.vcard{border:1px solid var(--sable-08);border-radius:var(--r-lg);overflow:hidden;background:var(--limestone);cursor:pointer;text-align:left;padding:0;transition:transform .15s,box-shadow .18s}
.vcard:hover{transform:translateY(-3px);box-shadow:var(--sh)}
.vcard .th{aspect-ratio:16/9;background:var(--sand)}
.vcard .th img{width:100%;height:100%;object-fit:cover}
.vcard .vb{padding:14px 16px 18px}
.vcard h3{font-size:1rem;margin-bottom:.3em}
.vcard p{font-size:.86rem;color:var(--sable-70);margin:0}

/* ---------- prose (legal / about) ---------- */
.prose{max-width:70ch}
.prose h2{margin-top:1.8em;font-size:1.5rem}
.prose h3{margin-top:1.5em}
.prose ul,.prose ol{padding-left:1.3em;margin-bottom:1.2em}
.prose li{margin-bottom:.45em}
.prose table{width:100%;border-collapse:collapse;margin-bottom:1.4em;font-size:.94rem}
.prose th,.prose td{border:1px solid var(--sable-16);padding:9px 12px;text-align:left}
.prose th{background:var(--limestone)}

/* ---------- footer ---------- */
.vv-foot{background:var(--sable);color:rgba(255,255,255,.66);padding:56px 0 30px;margin-top:60px}
.vv-foot a{color:rgba(255,255,255,.82);text-decoration:none}
.vv-foot a:hover{color:#fff;text-decoration:underline}
.foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:34px}
.foot-grid h4{color:#fff;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;font-family:var(--ff-mono);font-weight:500;margin-bottom:14px}
.foot-grid ul{list-style:none;margin:0;padding:0}
.foot-grid li{margin-bottom:9px;font-size:.92rem}
.foot-mark{font-family:var(--ff-display);font-size:1.3rem;color:#fff;margin-bottom:10px;display:block}
.foot-blurb{font-size:.92rem;max-width:34ch;line-height:1.6}
.socials{display:flex;gap:10px;margin-top:18px}
.socials a{width:36px;height:36px;border:1px solid rgba(255,255,255,.2);border-radius:999px;display:grid;place-items:center;transition:background .15s,border-color .15s}
.socials a:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.42)}
.socials svg{width:17px;height:17px;fill:currentColor}
.foot-meta{margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);font-size:.82rem;line-height:1.75;color:rgba(255,255,255,.5)}
.foot-meta a{color:rgba(255,255,255,.68)}

/* ---------- utility ---------- */
.mt0{margin-top:0}.mb0{margin-bottom:0}
.center{text-align:center}
.mx-auto{margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.bg-stone{background:var(--limestone)}
.hide{display:none!important}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .sel-layout{grid-template-columns:1fr}
  .facets{position:fixed;inset:var(--nav-h) 0 0 auto;width:min(340px,86%);background:var(--shell);z-index:70;
          padding:22px 22px 26px;max-height:none;height:calc(100vh - var(--nav-h));transform:translateX(101%);
          transition:transform .24s ease;box-shadow:var(--sh-lg);overflow-y:auto}
  .facets.open{transform:none}
  :root.has-pickbar .facets{height:calc(100vh - var(--nav-h) - var(--planbar-h))}
  .filter-toggle{display:block}
  .foot-grid{grid-template-columns:1fr 1fr;gap:28px}
}
@media (max-width:860px){
  body{font-size:16px}
  .vv-links{
    position:fixed;top:var(--nav-h);left:0;right:0;background:var(--shell);flex-direction:column;
    align-items:stretch;gap:2px;padding:14px 20px 24px;border-bottom:1px solid var(--sable-16);
    box-shadow:var(--sh);transform:translateY(-140%);transition:transform .22s ease;z-index:59;
  }
  .vv-links.open{transform:none}
  .vv-links a{padding:.7em .8em}
  .vv-links .btn{margin:8px 0 0}
  .vv-burger{display:block}
  .grid-3,.grid-2{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .price-row{grid-template-columns:1fr}
  .plant-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
  .gallery{grid-template-columns:repeat(3,1fr)}
  .drawer-body{padding:20px 20px 60px}
  .spec{grid-template-columns:1fr;gap:2px 0}
  .spec dt{margin-top:8px}
}
@media (max-width:520px){
  .foot-grid{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .cta-row .btn{width:100%}
}

@media print{
  .vv-nav,.vv-foot,.planbar,.filter-toggle,.optin,.btn{display:none!important}
  /* the plan print is the plan. The palette has its own sheet and its own
     button, so it must not ride along on this one. */
  .pal-band,.pdet,.pdet-scrim{display:none!important}
  body{background:#fff;font-size:11pt}
  .card,.calmonth,.tbl-scroll{break-inside:avoid}
  a[href]::after{content:""}
}

/* ============================================================================
   SHOP — product preview lightbox                        (added 2026-08-21)
   ========================================================================== */
.prod .cover{position:relative;cursor:zoom-in}
/* cover art must sit above .ph-fallback (absolute, opaque) — 2026-08-21 */
.prod .cover img{position:relative;z-index:1}
/* tool cards carry inline SVG cover art instead of a photo - 2026-08-28 */
.prod .cover>svg{position:relative;z-index:1;width:100%;height:100%;display:block}
.prod .cover .pv-hint{z-index:3}

.prod .cover.no-pv{cursor:default}
.pv-hint{
  position:absolute;left:10px;bottom:10px;z-index:2;
  font:500 11px/1 var(--ff-mono);letter-spacing:.06em;text-transform:uppercase;
  color:var(--shell);background:var(--sable-70);
  padding:6px 9px;border-radius:var(--r-sm);
  backdrop-filter:saturate(140%) blur(3px);
  opacity:0;transform:translateY(4px);transition:opacity .18s ease,transform .18s ease;
}
.prod .cover:hover .pv-hint,.prod .cover:focus-visible .pv-hint{opacity:1;transform:none}
@media (hover:none){.pv-hint{opacity:1;transform:none}}

.pv-scrim{
  position:fixed;inset:0;z-index:90;background:rgba(46,42,37,.72);
  opacity:0;pointer-events:none;transition:opacity .2s ease;
  backdrop-filter:blur(2px);
}
.pv-scrim.open{opacity:1;pointer-events:auto}

.pv{
  position:fixed;z-index:91;inset:50% auto auto 50%;transform:translate(-50%,-48%) scale(.985);
  width:min(940px,calc(100vw - 32px));max-height:calc(100vh - 48px);
  display:flex;flex-direction:column;
  background:var(--shell);border-radius:var(--r-lg);box-shadow:var(--sh-lg);
  opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;
  overflow:hidden;
}
.pv.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}

.pv-stage{
  position:relative;flex:1 1 auto;min-height:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--sand);padding:18px;
}
.pv-stage img{max-width:100%;max-height:calc(100vh - 190px);width:auto;height:auto;
  border-radius:var(--r-sm);box-shadow:var(--sh);background:var(--shell)}

.pv-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:40px;height:40px;border:0;border-radius:50%;cursor:pointer;
  background:var(--shell);color:var(--sable);box-shadow:var(--sh);
  font:400 22px/1 var(--ff-body);display:grid;place-items:center;
  transition:background .15s ease,color .15s ease;
}
.pv-nav:hover{background:var(--palmetto);color:var(--shell)}
.pv-prev{left:14px}
.pv-next{right:14px}

.pv-count{
  font:500 11px/1 var(--ff-mono);letter-spacing:.08em;
  color:var(--sable-70);background:var(--sable-08);
  padding:7px 11px;border-radius:999px;white-space:nowrap;
}
.pv-count:empty{display:none}

.pv-bar{
  flex:0 0 auto;display:flex;align-items:center;gap:16px;justify-content:space-between;
  padding:14px 18px;border-top:1px solid var(--sable-16);background:var(--limestone);
}
.pv-bar .pv-t{font:600 15px/1.3 var(--ff-display);color:var(--sable);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pv-bar .pv-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto}

.pv-close{
  position:absolute;top:10px;right:10px;z-index:3;
  width:34px;height:34px;border:0;border-radius:50%;cursor:pointer;
  background:var(--shell);color:var(--sable);box-shadow:var(--sh-sm);
  font:400 20px/1 var(--ff-body);display:grid;place-items:center;
}
.pv-close:hover{background:var(--terra);color:var(--shell)}

@media (max-width:640px){
  .pv{width:calc(100vw - 16px)}
  .pv-stage{padding:10px}
  .pv-stage img{max-height:calc(100vh - 210px)}
  .pv-bar{flex-direction:column;align-items:stretch;gap:10px}
  .pv-bar .pv-t{white-space:normal}
  .pv-bar .pv-actions{justify-content:stretch}
  .pv-bar .pv-actions .btn{flex:1}
}
@media (prefers-reduced-motion:reduce){
  .pv,.pv-scrim,.pv-hint{transition:none}
}

/* ============================================================================
   V2 BRAND IDENTITY RESTORE                                        2026-08-22
   ----------------------------------------------------------------------------
   Chris preferred the V2 look (ac888fac deployment). This layer ports V2's
   brand.css identity onto V3's structure: linen ground, charcoal ink, coral
   accent, sage green, Lora body serif, mono uppercase pill buttons, and the
   soft hero blobs. V3's markup, data and behaviour are untouched — this is
   pure presentation, appended last so it wins the cascade.

   Source of truth: @BACKUPS/via-varia-site-v2-DEPLOY.zip → assets/css/brand.css
   ========================================================================== */

:root{
  /* --- V2 palette, mapped onto V3's token names --- */
  --sable:#3A3530;                    /* charcoal */
  --sable-70:rgba(58,53,48,.74);
  --sable-45:#9A9088;                 /* mid */
  --sable-16:rgba(58,53,48,.13);
  --sable-08:rgba(58,53,48,.07);

  --palmetto:#849C78;                 /* sage */
  --palmetto-dk:#536A49;              /* dk-sage */
  --palmetto-lt:#E6EBE1;

  --sand:#E3DCCF;
  --limestone:#EDE8DF;                /* pale — card fill */
  --shell:#F8F3EA;                    /* linen — page ground */

  --gulf:#7FA6BC;                     /* sky, darkened enough to sit on linen */
  --gulf-lt:#DCECF4;                  /* lt-sky */

  --terra:#E8795A;                    /* coral — the signature accent */
  --terra-dk:#D8664A;
  --terra-lt:#FBEBE5;

  --gold:#E8D494;                     /* straw */

  /* V2 used tighter corners and deeper, softer shadows */
  --r-sm:5px; --r:8px; --r-lg:10px; --r-xl:14px;
  --sh-sm:0 8px 24px rgba(58,53,48,.10);
  --sh:0 14px 40px rgba(58,53,48,.12);
  --sh-lg:0 20px 60px rgba(58,53,48,.14);

  --ff-body:"Lora",Georgia,"Times New Roman",serif;
}

/* ---------- type ---------- */
body{font-size:16px;line-height:1.6}

h1,h2,h3,.h1,.h2{font-family:var(--ff-display);font-weight:900;letter-spacing:-.02em;line-height:1.06}
h1 em,h2 em,h3 em,em.hl,.hl{font-style:italic;color:var(--terra);font-weight:700}

.lede{
  font-family:var(--ff-body);font-style:italic;color:var(--sable-45);
  font-size:clamp(15px,1.8vw,19px);line-height:1.7;
}
.lede strong{color:var(--sable);font-style:normal}

/* section labels get V2's coral tick */
.eyebrow{
  font-family:var(--ff-mono);font-size:9px;letter-spacing:.25em;text-transform:uppercase;
  color:var(--sable-45);display:flex;align-items:center;gap:14px;margin:0 0 26px;
}
.eyebrow::before{content:"";width:28px;height:2px;background:var(--terra);flex:none}

/* ---------- buttons: V2's mono uppercase pill ---------- */
.btn{
  font-family:var(--ff-mono);font-size:10px;font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;
  padding:13px 24px;border-radius:100px;border:1px solid transparent;
  gap:9px;line-height:1;
}
.btn-primary,.btn-terra{background:var(--terra);color:#fff;box-shadow:none}
.btn-primary:hover,.btn-terra:hover{background:var(--terra-dk);color:#fff;transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--sable);border-color:var(--sable)}
.btn-ghost:hover{background:var(--sable);color:var(--shell);border-color:var(--sable)}
.btn-sm{padding:10px 18px;font-size:9px}

/* ---------- nav ---------- */
.vv-nav{background:rgba(248,243,234,.92);border-bottom:1px solid var(--sable-08)}
.vv-mark{color:var(--sable)}
.vv-links a{
  font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:400;color:var(--sable-45);
}
.vv-links a:hover{color:var(--sable)}
.vv-links a[aria-current],.vv-links a.is-active{color:var(--terra)}

/* ---------- hero ---------- */
.hero{
  background:var(--shell);
  border-bottom:1px solid var(--sable-08);
  position:relative;overflow:hidden;
}
.hero > .wrap{position:relative;z-index:2}

.hero .wordmark{
  font-family:var(--ff-display);font-weight:300;font-style:italic;
  color:var(--palmetto);letter-spacing:-.02em;line-height:1;
  font-size:clamp(52px,9vw,116px);margin:0 0 22px;
}
.hero .wordmark b{
  font-weight:900;font-style:normal;color:var(--sable);letter-spacing:-.03em;
}
.hero-tag{
  font-family:var(--ff-mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sable-45);margin:0 0 34px;
}
.hero h1{font-size:clamp(24px,3.4vw,38px);line-height:1.12;max-width:22ch}
.hero .lede{max-width:620px;margin-bottom:30px}
.byline{border-top:1px solid var(--sable-16);color:var(--sable-45);font-style:italic}
.byline strong{color:var(--sable);font-style:normal}

/* the home hero's soft blobs — V2's signature */
body[data-page="index"] .hero{min-height:82vh;display:flex;flex-direction:column;justify-content:center}
body[data-page="index"] .hero::before,
body[data-page="index"] .hero::after{
  content:"";position:absolute;border-radius:50%;pointer-events:none;z-index:0;
}
body[data-page="index"] .hero::before{
  width:520px;height:520px;background:var(--gulf-lt);opacity:.62;top:-120px;right:-120px;
}
body[data-page="index"] .hero::after{
  width:340px;height:340px;background:var(--gold);opacity:.38;bottom:-90px;left:-80px;
}

/* inner heroes on the other pages sit on the pale tint, like V2's .selector-hero */
body:not([data-page="index"]) .hero{background:var(--limestone)}

/* ---------- cards / surfaces ---------- */
.card,.prod,.vcard{background:var(--limestone);border-color:var(--sable-08)}
.prod .cover{background:var(--sand)}
.prod .tagline{color:var(--terra);font-family:var(--ff-mono);font-size:9px;letter-spacing:.16em}
.prod .amt{font-family:var(--ff-display);font-weight:900;color:var(--terra)}
.prod .amt.free{color:var(--palmetto)}
.prod h3,.vcard h3,.card h3{font-family:var(--ff-display);font-weight:700;letter-spacing:-.01em}
.prod p,.vcard p{color:var(--sable-70)}

/* ---------- opt-in band ----------
   This band is LIGHT here, overriding the dark-green base rule further up.
   Every foreground colour must be overridden with it - the base rule paints
   the text white, and white on --limestone (#F5F1EA) is invisible.
   Fixed 2026-08-24 after the signup box tested unreadable. */
.optin{background:var(--limestone);border:1px solid var(--sable-08)}
.optin .eyebrow{color:var(--palmetto-dk);justify-content:center}
.optin h2{color:var(--sable)}
.optin h2 em.hl{color:var(--palmetto-dk)}
.optin p{color:var(--sable-70)}
.optin::after{background:rgba(74,93,58,.055)}          /* decorative disc, was white-on-white */
.optin-form input[type=email]{
  background:var(--shell);
  border:1.5px solid #8A8078;                          /* 3.49:1 on the field - was 30% white, invisible */
  color:var(--sable);
}
.optin-form input::placeholder{color:var(--sable-70)}  /* was 55% white */
.optin-form input:focus{
  background:var(--shell);
  border-color:var(--terra);
  box-shadow:0 0 0 3px var(--terra-lt);
  outline:none;
}
.optin .fine{color:var(--sable-70)}
.optin .fine a{color:#974F3A;text-decoration:underline}

/* The confirmation line under an opt-in form. Measured on --limestone #F5F1EA:
   palmetto-dk 8.77:1, terra-dk 5.36:1. Both clear AA for body text. */
.form-msg.ok{color:var(--palmetto-dk)}
.form-msg.err{color:var(--terra-dk)}

/* ---------- four across ---------- */
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1080px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grid-4{grid-template-columns:1fr}}

/* ---------- the sign-up page: one landscape panel, two insets ---------- */
.join-panel{
  background:var(--limestone);border:1px solid var(--sable-08);border-radius:var(--r-xl);
  box-shadow:var(--sh);overflow:hidden;
  display:grid;grid-template-columns:1fr 1fr;
}
@media(max-width:900px){.join-panel{grid-template-columns:1fr}}
.join-side{padding:clamp(26px,3.6vw,46px);display:flex;flex-direction:column}
.join-side + .join-side{border-left:1px solid var(--sable-08)}
@media(max-width:900px){.join-side + .join-side{border-left:0;border-top:1px solid var(--sable-08)}}
.join-side h2{font-size:clamp(1.5rem,2.6vw,2.05rem);margin:.35em 0 .5em;color:var(--sable)}
.join-side > p{color:var(--sable-70);max-width:46ch}
.join-free{background:var(--shell)}
.join-paid{background:var(--palmetto);color:#fff}
.join-paid .eyebrow{color:rgba(255,255,255,.76)}   /* 4.98:1 on palmetto - .66 was 4.20 */
.join-paid h2{color:#fff}
.join-paid > p{color:rgba(255,255,255,.84)}
.join-paid .btn-ghost{border-color:rgba(255,255,255,.55);color:#fff}
.join-paid .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.10)}
/* Each row is a label line over a description line. NOT flex — a flex <li>
   turns the <b> and the sentence after it into two separate columns, which is
   how this rendered as two ragged strips. The marker is positioned instead. */
.join-list{list-style:none;padding:0;margin:24px 0 30px}
.join-list li{position:relative;padding:15px 0 15px 25px;border-top:1px solid rgba(255,255,255,.28)}  /* 1.98:1 - a visible hairline, decorative only */
.join-list li:first-child{border-top:0;padding-top:0}
.join-list li::before{
  content:"";position:absolute;left:2px;top:22px;
  width:7px;height:7px;border-radius:2px;transform:rotate(45deg);background:#DCE8CE;
}
.join-list li:first-child::before{top:7px}
.jl-h{
  display:block;font-weight:600;font-size:1.02rem;line-height:1.3;
  color:#fff;letter-spacing:-.006em;margin-bottom:4px;
}
.jl-b{display:block;font-size:.9rem;line-height:1.58;color:rgba(255,255,255,.80)}

/* the free side: what actually arrives, as a scannable list */
.join-label{
  font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sable-70);margin:26px 0 12px;display:block;
}
.join-freelist{list-style:none;padding:0;margin:0 0 6px;display:grid;gap:10px}
.join-freelist li{position:relative;padding-left:23px;font-size:.94rem;line-height:1.45;color:var(--sable)}
.join-freelist li::before{
  content:"";position:absolute;left:1px;top:.5em;
  width:6px;height:6px;border-radius:2px;transform:rotate(45deg);background:var(--palmetto);
}
.join-cta{margin-top:auto;display:flex;flex-wrap:wrap;gap:10px}

/* the free-download button, just after it fired */
.btn.is-took{background:var(--palmetto);border-color:var(--palmetto);color:#fff}
.btn.is-took:hover{background:var(--palmetto)}
.join-fine{font-size:.8rem;margin:14px 0 0}
.join-paid .join-fine{color:rgba(255,255,255,.76)} /* 4.98:1 - .62 was 3.90 */
.join-free .join-fine{color:var(--sable-70);margin-top:auto;padding-top:20px}
.join-free .join-fine a{color:#974F3A;text-decoration:underline}
/* the opt-in form is reused verbatim inside the free side */
.join-free .optin{background:transparent;border:0;padding:0;border-radius:0}
.join-free .optin::after{display:none}
.join-free .optin-form{margin-top:18px;max-width:none}  /* terra darkened to 4.92:1 - brand terra is only 2.35:1 here */

/* ---------- preview lightbox inherits the warmer ground ---------- */
.pv-stage{background:var(--sand)}
.pv-bar{background:var(--limestone)}
.pv-count{font-family:var(--ff-mono);letter-spacing:.14em}

/* ---------- misc ---------- */
::selection{background:var(--terra);color:#fff}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--terra);outline-offset:3px;
}
@media (max-width:640px){
  body[data-page="index"] .hero::before{width:320px;height:320px;top:-90px;right:-90px}
  body[data-page="index"] .hero::after{width:210px;height:210px;bottom:-60px;left:-60px}
}

/* --- fixes after first visual pass, 2026-08-22 --- */
/* the nav CTA is an .btn inside .vv-links; the link rule was out-specifying it */
.vv-links a.btn{color:#fff;font-size:9px;letter-spacing:.16em;padding:11px 18px}
.vv-links a.btn:hover{color:#fff}
.vv-links a.btn-ghost{color:var(--sable)}
.vv-links a.btn-ghost:hover{color:var(--shell)}

/* soften the hero blobs — they were reading as hard discs */
body[data-page="index"] .hero::before{
  width:440px;height:440px;top:-140px;right:-140px;
  background:radial-gradient(circle at 40% 40%,var(--gulf-lt) 0%,var(--gulf-lt) 55%,rgba(220,236,244,0) 72%);
  opacity:.85;
}
body[data-page="index"] .hero::after{
  width:300px;height:300px;bottom:-110px;left:-100px;
  background:radial-gradient(circle at 60% 40%,var(--gold) 0%,var(--gold) 52%,rgba(232,212,148,0) 70%);
  opacity:.5;
}

/* ============================================================================
   PLANT GRID — heart / favourite                                   2026-08-22
   ========================================================================== */
.pcard .ph{position:relative}

.fav{
  position:absolute;top:9px;right:9px;z-index:2;
  width:34px;height:34px;padding:0;border:0;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:rgba(248,243,234,.86);
  backdrop-filter:saturate(140%) blur(4px);-webkit-backdrop-filter:saturate(140%) blur(4px);
  box-shadow:0 2px 8px rgba(58,53,48,.18);
  transition:background .15s ease,transform .12s ease,box-shadow .15s ease;
}
.fav svg{width:18px;height:18px;display:block;
  fill:none;stroke:var(--sable);stroke-width:1.7;stroke-linejoin:round;
  transition:fill .16s ease,stroke .16s ease}
.fav:hover{background:var(--shell);transform:scale(1.08)}
.fav:hover svg{stroke:var(--terra)}
.fav.on svg{fill:var(--terra);stroke:var(--terra)}
.fav:focus-visible{outline:2px solid var(--terra);outline-offset:2px}
.fav:active{transform:scale(.94)}

/* a little acknowledgement when it's hearted */
@keyframes favpop{0%{transform:scale(1)}42%{transform:scale(1.28)}100%{transform:scale(1)}}
.fav.pop svg{animation:favpop .3s ease}
@media (prefers-reduced-motion:reduce){
  .fav,.fav svg{transition:none}
  .fav.pop svg{animation:none}
}

/* the card is a div now, so give it the affordances the button had */
.pcard{display:block;width:100%;font:inherit;color:inherit;background:var(--shell)}
.pcard:focus-visible{outline:2px solid var(--terra);outline-offset:3px}

/* ============================================================================
   MEMBER GATE — shared by guides, videos and the plant selector   2026-08-22
   ========================================================================== */
.gate{
  background:var(--limestone);border:1px solid var(--sable-08);
  border-radius:var(--r-lg);padding:30px 26px;text-align:center;
}
.gate-mark{width:38px;height:38px;margin:0 auto 14px;color:var(--terra)}
.gate-mark svg{width:100%;height:100%;display:block}
.gate h3{font-family:var(--ff-display);font-weight:900;font-size:1.35rem;margin:0 0 8px;letter-spacing:-.01em}
.gate p{color:var(--sable-70);margin:0 auto 20px;max-width:46ch;font-size:.95rem}
.gate-tiers{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:20px}

.gate-key{
  display:flex;gap:8px;max-width:420px;margin:0 auto;
  padding-top:18px;border-top:1px solid var(--sable-16);
}
.gate-key input{
  flex:1;min-width:0;font-family:var(--ff-body);font-size:.9rem;
  padding:11px 14px;border:1px solid var(--sable-16);border-radius:100px;
  background:var(--shell);color:var(--sable);
}
.gate-key input:focus{outline:2px solid var(--terra);outline-offset:1px;border-color:transparent}
.gate-key input::placeholder{color:var(--sable-45)}
.gate-msg{min-height:1.2em;margin:10px 0 0;font-size:.86rem}
.gate-msg.ok{color:var(--palmetto-dk)}
.gate-msg.bad{color:var(--terra-dk)}

/* ---------- the blurred peek + call to action ---------- */
.paywall{position:relative;margin-top:26px;border-radius:var(--r-lg);overflow:hidden}
.paywall-peek{
  filter:blur(6px);opacity:.5;pointer-events:none;user-select:none;
  max-height:230px;overflow:hidden;
}
.paywall-cta{
  position:absolute;inset:auto 0 0 0;top:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:24px 20px;gap:6px;
  background:linear-gradient(180deg,rgba(248,243,234,.55) 0%,var(--shell) 44%,var(--shell) 100%);
}
.paywall-cta h4{font-family:var(--ff-display);font-weight:900;font-size:1.1rem;margin:0}
.paywall-cta p{color:var(--sable-70);font-size:.9rem;margin:0 0 6px;max-width:38ch}
.paywall-note{
  font-family:var(--ff-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sable-45);margin:10px 0 0;
}
.paywall.spent .paywall-peek{max-height:150px}
.paywall.spent .paywall-cta{position:static;background:none;padding:0}
.paywall.spent{background:none}
.paywall.spent .paywall-peek{
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 92%);
          mask-image:linear-gradient(180deg,#000 0%,transparent 92%);
}

/* a member never sees any of it */
.is-member .paywall-peek{filter:none;opacity:1;max-height:none;pointer-events:auto;user-select:auto}
.is-member .paywall-cta{display:none}

@media (max-width:560px){
  .gate{padding:24px 18px}
  .gate-key{flex-direction:column;border-radius:0}
  .gate-key input,.gate-key .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){.paywall-peek{filter:none;opacity:.28}}

/* ============================================================================
   SHOP — above / below the line                                   2026-08-22
   ========================================================================== */
.shop-band{margin-bottom:14px}
.shop-band + .shop-line{margin-top:52px}

.shop-line{
  display:flex;align-items:center;gap:18px;margin:52px 0 6px;
  font-family:var(--ff-mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--sable-45);
}
.shop-line::before,.shop-line::after{content:"";height:1px;background:var(--sable-16);flex:1}
.shop-line span{flex:none;color:var(--terra)}

.shop-line-sub{
  color:var(--sable-45);font-style:italic;font-size:.94rem;
  margin:0 0 22px;max-width:60ch;
}

#shopJoin:not(:empty){margin-top:46px}

/* ---------- member video tier ---------- */
.vcard.locked-card .th{position:relative}

/* Locked member card: the low-res poster scaled up, softened, and veiled.
   The blur is cosmetic polish on an image that is genuinely low resolution,
   not a mask over a sharp one. */
.vcard .th.th-lock{position:relative;overflow:hidden}
.vcard .th.th-lock img{filter:blur(7px) saturate(1.06);transform:scale(1.14)}
.vlock-veil{
  position:absolute;inset:0;
  background:linear-gradient(175deg,rgba(46,42,37,.10) 0%,rgba(46,42,37,.46) 100%);
}
.vlock-tag{
  position:absolute;left:12px;bottom:11px;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;background:rgba(46,42,37,.72);border:1px solid rgba(255,255,255,.28);
  padding:5px 11px;border-radius:100px;backdrop-filter:blur(3px);
}
.vlock-tag svg{
  width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;flex:none;
}
.vcard:hover .th.th-lock img{transform:scale(1.18)}
.vlock{
  position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(58,53,48,.34);color:var(--shell);font-size:0;
}
.vlock::before{
  content:"";width:34px;height:34px;border-radius:50%;
  background:var(--shell);
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 10V7a5 5 0 0 1 10 0v3" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round"/><rect x="4.4" y="10" width="15.2" height="10.4" rx="2.2" fill="none" stroke="black" stroke-width="1.8"/></svg>') center/20px no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 10V7a5 5 0 0 1 10 0v3" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round"/><rect x="4.4" y="10" width="15.2" height="10.4" rx="2.2" fill="none" stroke="black" stroke-width="1.8"/></svg>') center/20px no-repeat;
}
.vlen{font-family:var(--ff-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--sable-45);margin:8px 0 0}
#vMember:not(:empty){margin-top:20px}

/* ---------- gate: licence-key fallback under the email field ---------- */
.gate-alt{margin-top:14px;text-align:center}
.gate-alt summary{
  cursor:pointer;list-style:none;display:inline-block;
  font-family:var(--ff-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sable-45);padding:6px 2px;border-bottom:1px dotted var(--sable-16);
}
.gate-alt summary::-webkit-details-marker{display:none}
.gate-alt summary:hover{color:var(--terra)}
.gate-alt summary:focus-visible{outline:2px solid var(--terra);outline-offset:3px;border-radius:3px}
.gate-alt[open] summary{color:var(--sable);margin-bottom:12px}
.gate-alt .gate-key{border-top:0;padding-top:0}

/* an item with no individual price simply says so */
.pill-note{
  font-family:var(--ff-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--palmetto-dk);background:var(--palmetto-lt);
  padding:7px 11px;border-radius:100px;white-space:nowrap;
}


/* ============================================================================
   FULL LIBRARY BAND  (guides page)  — added 2026-08-24
   The paid library sits above the free shelf and carries the membership
   offer in its own header, so the thing being sold is the first thing seen.
   ========================================================================= */
.lib-band{
  background:var(--limestone);border:1px solid var(--sable-08);
  border-radius:var(--r-xl);padding:clamp(22px,3.4vw,38px);margin-bottom:40px;
}
.lib-head{
  display:flex;gap:28px;align-items:flex-start;justify-content:space-between;
  flex-wrap:wrap;margin-bottom:26px;padding-bottom:22px;
  border-bottom:1px solid var(--sable-16);
}
.lib-head-txt{flex:1 1 320px;min-width:0}
.lib-head-txt .eyebrow{color:var(--terra-dk);margin-bottom:8px;display:block}
.lib-head-txt h2{margin:0 0 .35em;max-width:18ch;color:var(--sable)}
.lib-head-txt p{margin:0;color:var(--sable-70);max-width:52ch}
.lib-head-cta{
  flex:0 1 300px;display:flex;flex-direction:column;gap:10px;align-items:stretch;
}
.lib-head-cta .btn{width:100%;justify-content:center}
.lib-head-fine{
  margin:2px 0 0;font-size:.78rem;color:var(--sable-45);
  text-align:center;font-family:var(--ff-mono);letter-spacing:.02em;
}
@media (max-width:760px){
  .lib-head{gap:20px}
  .lib-head-cta{flex:1 1 100%}
}

/* the price doubles as the buy button for a single guide */
.amt-buy{
  font-family:var(--ff-display);font-weight:900;color:var(--terra-dk);
  background:none;border:1.5px solid transparent;border-radius:999px;
  padding:.15em .55em;margin-left:-.55em;cursor:pointer;font-size:inherit;
  transition:background .13s ease,border-color .13s ease,color .13s ease;
}
.amt-buy:hover,.amt-buy:focus-visible{
  background:var(--terra-lt);border-color:var(--terra);color:var(--terra-dk);
}
.amt-buy::after{
  content:"Buy";display:block;font-family:var(--ff-mono);font-size:9px;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sable-45);margin-top:-2px;
}
.amt-buy:hover::after,.amt-buy:focus-visible::after{color:var(--terra-dk)}
.amt.owned{
  font-family:var(--ff-mono);font-size:.72rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--palmetto-dk);
}

/* videos still in production — locked, and labelled as not yet available */
.vcard.in-prod{cursor:default;opacity:.92}
.vcard.in-prod .th{position:relative;background:linear-gradient(150deg,var(--sand),var(--limestone))}
.vprod-badge{
  position:absolute;left:10px;top:10px;z-index:2;
  font-family:var(--ff-mono);font-size:9px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;padding:.32em .7em;border-radius:999px;
  background:var(--sable);color:var(--shell);
}
.vlock{
  position:absolute;right:10px;top:10px;z-index:2;width:26px;height:26px;
  border-radius:50%;background:rgba(58,53,48,.72);color:#fff;
  display:grid;place-items:center;font-size:.7rem;
}

/* ============================================================================
   MEMBERS' VIDEO LIBRARY  — added 2026-08-24
   Deliberately a darker ground than anything else on the page. This is a
   separate tier of the site, not a footnote under the free episodes, and the
   membership offer sits at the TOP of it rather than below the grid.
   Every colour here is set explicitly against the dark ground — the opt-in
   band taught us what happens when only the background gets overridden.
   ========================================================================= */
.vlib-band{
  background:var(--sable);color:var(--shell);
  border-radius:var(--r-xl);padding:clamp(24px,3.6vw,42px);
  margin:48px 0 8px;position:relative;overflow:hidden;
}
.vlib-band::after{
  content:"";position:absolute;inset:auto -70px -110px auto;
  width:300px;height:300px;border-radius:50%;background:rgba(248,243,234,.04);
}
.vlib-head{
  display:flex;gap:30px;align-items:flex-start;justify-content:space-between;
  flex-wrap:wrap;margin-bottom:28px;padding-bottom:24px;
  border-bottom:1px solid rgba(248,243,234,.16);position:relative;z-index:2;
}
.vlib-head-txt{flex:1 1 320px;min-width:0}
.vlib-head-txt .eyebrow{color:var(--terra);margin-bottom:9px;display:block}
.vlib-head-txt h2{margin:0 0 .35em;color:var(--shell);max-width:18ch}
.vlib-head-txt p{margin:0;color:rgba(248,243,234,.80);max-width:54ch}
.vlib-head-cta{flex:0 1 300px;display:flex;flex-direction:column;gap:10px;align-items:stretch}
.vlib-head-cta .btn{width:100%;justify-content:center}
/* the ghost button needs its own light treatment on this ground */
.vlib-head-cta .btn-ghost{
  border-color:rgba(248,243,234,.42);color:var(--shell);background:transparent;
}
.vlib-head-cta .btn-ghost:hover{border-color:var(--shell);background:rgba(248,243,234,.09)}
.vlib-head-fine{
  margin:2px 0 0;font-size:.78rem;color:rgba(248,243,234,.62);
  text-align:center;font-family:var(--ff-mono);letter-spacing:.02em;
}
.vlib-grid{position:relative;z-index:2}
.vlib-grid .vcard{background:rgba(248,243,234,.06);border-color:rgba(248,243,234,.14)}
.vlib-grid .vcard h3{color:var(--shell)}
.vlib-grid .vcard p{color:rgba(248,243,234,.72)}
.vlib-grid .vlen{color:rgba(248,243,234,.55);font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}
.vlib-signin{position:relative;z-index:2;margin-top:26px}
.vlib-signin .gate{background:rgba(248,243,234,.06);border-color:rgba(248,243,234,.16)}
.vlib-signin .gate h3{color:var(--shell)}
.vlib-signin .gate p{color:rgba(248,243,234,.78)}
.vlib-signin .gate-key input{
  background:rgba(248,243,234,.10);border-color:rgba(248,243,234,.42);color:var(--shell); /* .34 was 2.69:1 — under the 3:1 UI minimum */
}
.vlib-signin .gate-key input::placeholder{color:rgba(248,243,234,.62)}
.vlib-signin .gate-mark{color:rgba(248,243,234,.62)}
/* Any button in here sits on the dark ground and needs its own colours.
   The default ghost button is dark-on-dark and was effectively invisible. */
.vlib-signin .btn-ghost{
  border-color:rgba(248,243,234,.52);color:var(--shell);background:rgba(248,243,234,.08);
}
.vlib-signin .btn-ghost:hover{border-color:var(--shell);background:rgba(248,243,234,.18);color:var(--shell)}
.vlib-signin .gate-msg{color:rgba(248,243,234,.80)}
.vlib-signin .gate-msg.bad{color:#F5A48D}
.vlib-signin .gate-msg.ok{color:#B9D3A8}
@media (max-width:760px){ .vlib-head-cta{flex:1 1 100%} }

/* ============================================================================
   PLANT PHOTO VIEWER — added 2026-08-24
   Thumbnails are square crops, so a bark or flower detail is mostly cropped
   away. This shows the whole frame, uncropped, and carries the Creative
   Commons credit with the photo where the attribution belongs.
   ========================================================================= */
.gshot{
  padding:0;border:none;background:var(--sand);cursor:zoom-in;
  border-radius:var(--r-sm);overflow:hidden;aspect-ratio:1;display:block;
  transition:transform .14s ease,box-shadow .16s ease;
}
.gshot img{width:100%;height:100%;object-fit:cover;display:block}
.gshot:hover{transform:scale(1.03);box-shadow:var(--sh)}
.gshot:focus-visible{outline:2px solid var(--terra);outline-offset:2px}
.drawer-hero[data-zoom]{cursor:zoom-in;position:relative}
.drawer-hero .zoom-hint{
  position:absolute;right:12px;bottom:12px;
  font-family:var(--ff-mono);font-size:9.5px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;padding:.42em .8em;border-radius:999px;
  background:rgba(46,42,37,.66);color:#fff;pointer-events:none;
}
.drawer-hero[data-zoom]:focus-visible{outline:2px solid var(--terra);outline-offset:-3px}

.pzoom{
  position:fixed;inset:0;z-index:120;display:none;
  align-items:center;justify-content:center;gap:clamp(4px,2vw,20px);
  background:rgba(24,21,18,.94);padding:clamp(12px,3vw,40px);
}
.pzoom.open{display:flex}
.pzoom-fig{margin:0;display:flex;flex-direction:column;gap:14px;align-items:center;max-width:min(1100px,92vw)}
.pzoom-fig img{
  max-width:100%;max-height:78vh;width:auto;height:auto;
  object-fit:contain;border-radius:var(--r-sm);background:#000;
}
.pzoom-fig figcaption{
  display:flex;flex-wrap:wrap;gap:9px;align-items:center;justify-content:center;
  font-size:.8rem;color:rgba(248,243,234,.72);text-align:center;max-width:70ch;
}
.pzoom-fig figcaption a{color:rgba(248,243,234,.92);text-decoration:underline}
.pz-what{font-weight:600;color:var(--shell)}
.pz-sep{color:rgba(248,243,234,.34)}
.pz-count{font-family:var(--ff-mono);letter-spacing:.1em;color:rgba(248,243,234,.55)}
.pzoom-x{
  position:absolute;top:clamp(10px,2vw,22px);right:clamp(10px,2vw,22px);
  width:44px;height:44px;border-radius:50%;border:1px solid rgba(248,243,234,.28);
  background:rgba(248,243,234,.10);color:var(--shell);font-size:1.5rem;line-height:1;
  cursor:pointer;display:grid;place-items:center;
}
.pzoom-x:hover{background:rgba(248,243,234,.20)}
.pzoom-nav{
  width:46px;height:46px;flex-shrink:0;border-radius:50%;
  border:1px solid rgba(248,243,234,.38);background:rgba(248,243,234,.12); /* .24 was 2.07:1 — under the 3:1 UI minimum */
  color:var(--shell);font-size:1.6rem;line-height:1;cursor:pointer;
  display:grid;place-items:center;
}
.pzoom-nav:hover{background:rgba(248,243,234,.20)}
.pzoom-nav[hidden]{display:none}
.pzoom-x:focus-visible,.pzoom-nav:focus-visible{outline:2px solid var(--terra);outline-offset:2px}
@media (max-width:620px){
  .pzoom{padding:10px}
  .pzoom-nav{position:absolute;bottom:18px;width:52px;height:52px}
  .pzoom-prev{left:18px} .pzoom-next{right:18px}
  .pzoom-fig img{max-height:64vh}
}
@media (prefers-reduced-motion:reduce){ .gshot{transition:none} }

/* ============================================================================
   OPT-IN NAME FIELDS — added 2026-08-24
   First and last name sit on their own row above the email, so the form still
   reads as two lines rather than a stack of four. Styled to match the email
   field exactly; the base rule only targets input[type=email], so text inputs
   would otherwise inherit nothing and render as raw browser boxes.
   ========================================================================= */
.optin-form .optin-name{
  flex:1 1 calc(50% - 5px);min-width:0;
  padding:.82em 1.1em;border-radius:999px;font-size:.98rem;
  background:var(--shell);
  border:1.5px solid #8A8078;          /* 3.49:1 on the field — same as the email box */
  color:var(--sable);
}
.optin-form .optin-name::placeholder{color:var(--sable-70)}
.optin-form .optin-name:focus{
  background:var(--shell);border-color:var(--terra);
  box-shadow:0 0 0 3px var(--terra-lt);outline:none;
}
.optin-form input[type=email]{flex:1 1 240px}
@media (max-width:520px){
  .optin-form .optin-name{flex:1 1 100%}
}

/* =============================================================================
   THE PLANT PALETTE
   Screen: a thumbnail strip on the plan page, and a favourites filter on the
   selector. Print: a dedicated sheet that replaces the page entirely.
   ============================================================================= */

/* ---- on-screen palette strip (plan page) ---- */
.pal-band{
  background:var(--limestone);border:1px solid var(--sable-08);border-radius:var(--r-lg);
  padding:clamp(20px,2.6vw,28px);margin-bottom:34px;
}
.pal-head{display:flex;flex-wrap:wrap;gap:12px;align-items:baseline;justify-content:space-between;margin-bottom:6px}
.pal-head h2{margin:0;font-size:clamp(1.35rem,2.2vw,1.75rem)}
.pal-head .pal-n{font-family:var(--ff-mono);font-size:.82rem;color:var(--sable-70)}
.pal-sub{color:var(--sable-70);margin:0 0 18px;font-size:.95rem}
.pal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:14px}
.pal-item{
  display:block;width:100%;padding:0;border:1px solid var(--sable-08);background:var(--shell);
  border-radius:var(--r);overflow:hidden;cursor:pointer;text-align:left;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.pal-item:hover{transform:translateY(-3px);box-shadow:var(--sh);border-color:var(--palmetto)}
.pal-item:focus-visible{outline:3px solid var(--palmetto);outline-offset:2px}
.pal-shot{aspect-ratio:1;background:var(--sand);overflow:hidden}
.pal-shot img{width:100%;height:100%;object-fit:cover;display:block}
.pal-cap{padding:9px 10px 11px}
.pal-cap b{display:block;font-size:.86rem;line-height:1.25;color:var(--sable)}
.pal-cap i{display:block;font-size:.74rem;color:var(--sable-45);font-style:italic;margin-top:2px}
.pal-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}

/* an active toggle button, used by the favourites filter */
.btn.btn-ghost.on{background:var(--palmetto);border-color:var(--palmetto);color:#fff}
.btn.btn-ghost.on:hover{background:var(--palmetto-dk);border-color:var(--palmetto-dk)}

/* ---- plant detail modal (plan page) ---- */
.pdet-scrim{position:fixed;inset:0;background:rgba(30,27,23,.62);z-index:120;display:none}
.pdet-scrim.open{display:block}
.pdet{
  position:fixed;z-index:121;inset:auto 0 0 0;max-height:88vh;overflow-y:auto;
  background:var(--shell);border-radius:var(--r-lg) var(--r-lg) 0 0;
  box-shadow:var(--sh-lg);display:none;
}
@media(min-width:760px){
  .pdet{inset:5vh 50% 5vh auto;transform:translateX(50%);width:min(720px,92vw);border-radius:var(--r-lg)}
}
.pdet.open{display:block}
.pdet-close{
  position:sticky;top:0;float:right;margin:10px 12px 0 0;z-index:2;
  width:38px;height:38px;border-radius:50%;border:1px solid var(--sable-16);
  background:var(--shell);color:var(--sable);font-size:1.3rem;line-height:1;cursor:pointer;
}
.pdet-close:hover{border-color:var(--palmetto);color:var(--palmetto)}
.pdet .pp-card{border:0;padding:clamp(20px,3vw,30px);box-shadow:none;background:transparent}
.pdet .pp-shot{aspect-ratio:16/10;border-radius:var(--r);overflow:hidden;background:var(--sand);margin-bottom:16px}
.pdet .pp-shot img{width:100%;height:100%;object-fit:cover}
.pdet-more{padding:0 clamp(20px,3vw,30px) clamp(20px,3vw,30px)}

/* gallery: every photo the selector holds, not just the hero */
.pp-gal{margin-bottom:16px}
.pdet .pp-main{aspect-ratio:16/10;border-radius:var(--r);overflow:hidden;background:var(--sand);margin-bottom:8px}
.pdet .pp-main img{width:100%;height:100%;object-fit:cover;display:block}
.pp-thumbs{display:flex;flex-wrap:wrap;gap:8px}
.pp-th{
  width:66px;height:66px;padding:0;border:2px solid transparent;border-radius:var(--r-sm);
  overflow:hidden;background:var(--sand);cursor:pointer;flex:none;
}
.pp-th img{width:100%;height:100%;object-fit:cover;display:block}
.pp-th.on{border-color:var(--palmetto)}
.pp-th:hover{border-color:var(--sable-45)}
.pp-th:focus-visible{outline:3px solid var(--palmetto);outline-offset:2px}
.pp-credit{margin:9px 0 0;font-size:.72rem;line-height:1.4;color:var(--sable-45)}

/* ---- shared palette card (screen modal + print sheet) ---- */
.pp-name{margin:0 0 2px;font-size:1.15rem;line-height:1.2}
.pp-bot{margin:0 0 10px;font-style:italic;color:var(--sable-45);font-size:.9rem}
.pp-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.pp-tag{
  font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 8px;border-radius:100px;background:var(--sable-08);color:var(--sable-70);
}
.pp-tag.native{background:var(--palmetto-lt);color:var(--palmetto-dk)}
.pp-tag.salt{background:var(--gulf-lt);color:#3C5B70}
.pp-spec{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin:0 0 12px;font-size:.86rem}
.pp-spec dt{font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--sable-45);padding-top:.28em}
.pp-spec dd{margin:0;color:var(--sable)}
.pp-take,.pp-watch,.pp-use{margin:0 0 8px;font-size:.87rem;line-height:1.5;color:var(--sable-70)}
.pp-take b,.pp-watch b,.pp-use b{color:var(--sable)}
.pp-watch{color:#7A4B33}

/* ---- the print sheet ----
   Never rendered on screen. Only exists while body.vv-printing is set, and
   only inside a print context, so nothing on the live page can shift. */
.pp-sheet{display:none}
@media print{
  body.vv-printing > *{display:none!important}
  body.vv-printing #vvPaletteSheet{display:block!important}
  body.vv-printing{background:#fff}
  #vvPaletteSheet{font-size:9.5pt;color:#221F1B}
  .pp-head{border-bottom:2px solid #221F1B;padding-bottom:10px;margin-bottom:16px}
  .pp-wm{font-family:var(--ff-display);font-size:15pt;margin-bottom:4px}
  .pp-wm .v1{font-style:italic;font-weight:300;color:#4A5D3A}
  .pp-wm .v2{font-weight:900;letter-spacing:-.03em}
  .pp-head h1{font-size:19pt;margin:0 0 3px}
  .pp-meta{font-family:var(--ff-mono);font-size:7.5pt;letter-spacing:.08em;text-transform:uppercase;color:#6B645C;margin:0}
  .pp-note{font-size:8.5pt;font-style:italic;color:#6B645C;margin:6px 0 0}
  /* the whole palette as one organised grid, before any detail */
  .pp-ch{font-size:12pt;margin:0 0 9px;padding-bottom:4px;border-bottom:1px solid #CFC8BD}
  .pp-ch2{margin-top:18px}
  .pp-contact{margin-bottom:4px}
  .pp-cgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}
  .pp-ct{margin:0;break-inside:avoid;page-break-inside:avoid}
  .pp-ct img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:4px;border:1px solid #CFC8BD;display:block}
  .pp-ct figcaption{margin-top:4px;line-height:1.25}
  .pp-ct figcaption b{display:block;font-size:7.6pt}
  .pp-ct figcaption i{display:block;font-size:6.4pt;color:#6B645C}

  /* every photo on the tile, hero large and the details beneath it */
  .pp-gal{margin:0}
  .pp-main{width:100px;height:100px;overflow:hidden;border-radius:4px;background:#EFEAE1;margin-bottom:4px}
  .pp-main img{width:100%;height:100%;object-fit:cover}
  .pp-thumbs{display:flex;flex-wrap:wrap;gap:3px}
  .pp-th{width:22px;height:22px;padding:0;border:1px solid #CFC8BD;border-radius:3px;overflow:hidden;background:#EFEAE1}
  .pp-thumbs{width:100px}
  .pp-th img{width:100%;height:100%;object-fit:cover}
  .pp-credit{display:none}

  .pp-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .pp-card{
    display:grid;grid-template-columns:auto 1fr;gap:11px;
    border:1px solid #CFC8BD;border-radius:5px;padding:10px;
    break-inside:avoid;page-break-inside:avoid;
  }
  .pp-shot{width:78px;height:78px;overflow:hidden;border-radius:4px;background:#EFEAE1}
  .pp-shot img{width:100%;height:100%;object-fit:cover}
  .pp-name{font-size:11pt}
  .pp-bot{font-size:8pt;margin-bottom:6px}
  .pp-tags{gap:4px;margin-bottom:7px}
  .pp-tag{font-size:6pt;padding:2px 6px;border:1px solid #CFC8BD;background:#fff;color:#4A4640}
  .pp-spec{font-size:8pt;gap:2px 9px;margin-bottom:7px}
  .pp-spec dt{font-size:6.2pt}
  .pp-take,.pp-watch,.pp-use{font-size:8pt;margin-bottom:5px}
  .pp-foot{margin-top:16px;padding-top:8px;border-top:1px solid #CFC8BD;font-size:7pt;color:#6B645C}
  @page{margin:14mm}
}