/* Studio Matisse — palette sampled from her own wordmark */
/* Studio Matisse. Palette and type from "00 Studio Matisse Brand Kit.pdf"
   (Brand Identity Kit by @linesbyalysa, May 2026). Values are the kit's own. */
:root{
  --terra:#DD4912;      /* kit: primary. fills, marks, display type 24px+. 4.06:1 on cream, so not for small text */
  --terra-ink:#CE4410;  /* same hue, darkened until it passes 4.5:1 on cream. links, small text, buttons */
  --forest:#2D5928;     /* kit */
  --wheat:#EFD497;      /* kit */
  --peri:#9DBCED;       /* kit */
  --cream:#FFFCF3;      /* kit: the ground */
  --ink:#3B0D02;        /* kit: dark brown. body text */
  --ink-2:#5E463B;      /* brown at 70% on cream: secondary copy */
  --ink-3:#7A6559;      /* brown at 55%: labels, meta. 4.6:1 on cream */
  --rule:#D0C2B4;       /* kit: taupe. borders and dividers */
  --paper:#F8F1E0;      /* wheat at 30% on cream: panels, image mats */
  --card:#FFFDF8;       /* lifted sheet, never pure white */
  /* type, per the kit's Fonts page: H1 Beth Ellen, H2 Thistails Sans, body Poppins.
     The wordmark is hand-lettered and is not a font. */
  --sans:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --hand:"Beth Ellen",cursive;
  --head:"Thistails Sans Rough","Thistails Sans",var(--sans);
  --head-clean:"Thistails Sans",var(--sans);
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* the paper: 05 Textures/light.png from the kit, resized to 2048 and served as webp */
  /* the kit's paper with its contrast pulled to 38% at the pixel level: the speckle
     stays where the designer put it, but its darkest dot is 150/255 instead of 0, so it
     never reads as dirt under type. one declaration, viewport-pinned, so nav, bars
     and canvas render the same */
  --sheet:var(--cream);
  --paper-img:url(/assets/brand/paper-soft.webp);
  /* clear where she reads, paper toward the edges */
  --paper-mask:radial-gradient(ellipse 58% 62% at 50% 45%, transparent 0%, rgba(0,0,0,.25) 46%, rgba(0,0,0,.72) 72%, #000 100%);
}
@font-face{font-family:"Beth Ellen"; src:url(/assets/fonts/beth-ellen.woff2) format("woff2"); font-display:swap}
@font-face{font-family:"Thistails Sans"; src:url(/assets/fonts/thistails-sans.woff2) format("woff2"); font-display:swap}
@font-face{font-family:"Thistails Sans Rough"; src:url(/assets/fonts/thistails-sans-rough.woff2) format("woff2"); font-display:swap}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
img{max-width:100%; height:auto; display:block}
body{margin:0; color:var(--ink); font:400 16px/1.6 var(--sans); overflow-x:clip; -webkit-font-smoothing:antialiased; min-height:100%;
  background:var(--cream)}
/* The paper, masked. The studio reads down the middle of the screen, so the
   texture is faded out of the reading column and left at full strength toward
   the edges. Fixed, so the quiet band stays under the text as the page scrolls.
   One layer, painted once, no repaint on scroll. */
body::before{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:var(--paper-img) center/cover;
  -webkit-mask-image:var(--paper-mask); mask-image:var(--paper-mask)}
/* a phone is nearly all reading column, so the clear middle widens and the
   edges never get loud enough to crowd the type */
@media(max-width:700px){
  :root{--paper-mask:radial-gradient(ellipse 96% 52% at 50% 42%, transparent 0%, rgba(0,0,0,.2) 55%, rgba(0,0,0,.6) 100%)}
}
header,main,footer{position:relative; z-index:1}
.wrap{max-width:1120px; margin:0 auto; padding:0 20px}
a{color:var(--terra-ink)}

/* header */
.top{border-bottom:1px solid var(--rule); background:var(--cream); position:sticky; top:0; z-index:50}
/* the nav sits on the same sheet as the page: the texture is viewport-anchored
   and the mask is viewport-sized, so the grain continues straight through the
   rule instead of stopping at it */
.top::after{content:""; position:absolute; inset:0; pointer-events:none; z-index:-1;
  background:var(--paper-img) center/cover fixed;
  -webkit-mask-image:var(--paper-mask); mask-image:var(--paper-mask);
  -webkit-mask-size:100vw 100vh; mask-size:100vw 100vh;
  -webkit-mask-position:0 0; mask-position:0 0}
.top .wrap{position:relative}
.top .wrap{display:flex; align-items:center; gap:16px; padding-top:14px; padding-bottom:14px}
.brand{appearance:none; border:0; background:none; padding:0; cursor:pointer; display:flex}
.brand img{width:min(176px,42vw)}
.nav{margin-left:auto; display:flex; align-items:center; gap:4px}
.nav button{appearance:none; border:0; background:none; font:600 14px/1 var(--sans); color:var(--ink-2);
  padding:11px 12px; min-height:44px; cursor:pointer; border-radius:8px}
.nav button[aria-current=true]{color:var(--forest); background:var(--paper)}
.bag{appearance:none; border:1px solid var(--forest); background:var(--forest); color:#fff; border-radius:8px;
  padding:11px 15px; min-height:44px; font:700 14px/1 var(--sans); cursor:pointer; display:flex; align-items:center; gap:8px}
.bag b{background:var(--terra-ink); border-radius:20px; padding:2px 7px; font:700 11px/1.5 var(--sans); font-variant-numeric:tabular-nums}

/* hero */
.hero{padding:44px 0 30px; border-bottom:1px solid var(--rule)}
/* page titles are the kit's Heading 1, Beth Ellen. the home hero is the one exception:
   Poppins with the key phrase in Beth Ellen, so the wordmark's two voices meet once. */
.hero h1{font:400 clamp(34px,5vw,54px)/1.2 var(--hand); color:var(--forest); margin:0 0 .42em; max-width:none}
.hero.hero-home h1{font:800 clamp(28px,4.6vw,44px)/1.12 var(--sans); letter-spacing:-.02em; color:var(--forest); margin:0 0 12px; max-width:34ch}
.hero.hero-home h1 .hand{font:400 1.32em/1 var(--hand); color:var(--forest); letter-spacing:0; display:inline-block; padding:0 .04em; white-space:nowrap}
.hero p{margin:0; color:var(--ink-2); max-width:58ch; font-size:17px}
.hero .trusted{margin-top:20px; font:600 11px/1.7 var(--sans); font-variant-numeric:tabular-nums; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); max-width:64ch}

/* filters */
.filters{display:flex; flex-wrap:wrap; gap:8px; padding:26px 0 20px}
.filters button{appearance:none; border:1px solid var(--rule); background:var(--card); border-radius:22px; padding:10px 15px;
  min-height:44px; font:600 13.5px/1 var(--sans); color:var(--forest); cursor:pointer}
.filters button[aria-pressed=true]{background:var(--forest); border-color:var(--forest); color:#fff}

/* grid */
.grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; padding-bottom:0}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}}
.card{border:1px solid var(--rule); background:var(--card); border-radius:11px; overflow:hidden; display:flex; flex-direction:column;
  min-width:0; text-align:left; padding:0; font:inherit; color:inherit; cursor:pointer}
/* one ratio per grid, per the research: 1:1, cover. 37 of her 50 lead photos are
   square already; cover trims only the tall phone-socket shots. the second photo
   fades in on hover where a pointer exists, so a lifestyle shot answers the
   "what is it like" question without a click. */
.card{width:100%}
.card .imgwrap{position:relative; width:100%; aspect-ratio:1/1; overflow:hidden; background:var(--paper)}
.card .imgwrap img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center;
  transition:opacity .25s cubic-bezier(.25,1,.5,1), transform .5s cubic-bezier(.25,1,.5,1)}
.card .imgwrap img.alt{opacity:0}
@media(hover:hover) and (pointer:fine){
  .card:hover .imgwrap img.main{transform:scale(1.03)}
  .card:hover .imgwrap img.alt{opacity:1}
}
.card .m{padding:12px 13px; display:flex; flex-direction:column; flex:1}
.card b{font:650 14px/1.35 var(--sans); color:var(--forest); margin-bottom:5px}
.card .pr{font:600 13.5px/1 var(--sans); font-variant-numeric:tabular-nums; margin-top:auto}
.card .out{font:600 11px/1.3 var(--sans); letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); margin-top:6px}
.tag{position:absolute; margin:10px; background:var(--terra-ink); color:#fff; border-radius:5px;
  font:700 9.5px/1 var(--sans); font-variant-numeric:tabular-nums; letter-spacing:.1em; text-transform:uppercase; padding:5px 8px}
.cardwrap{position:relative; display:flex}

/* drawer */
.scrim{position:fixed; inset:0; background:rgba(20,18,14,.5); z-index:90; display:none}
.scrim.on{display:block}
.drawer{position:fixed; top:0; right:0; bottom:0; width:min(430px,100%); background:var(--sheet); z-index:100;
  transform:translateX(100%); transition:transform .32s cubic-bezier(.16,1,.3,1); display:flex; flex-direction:column}
.drawer.on{transform:none}
.dhead{display:flex; align-items:center; gap:12px; padding:18px 20px; border-bottom:1px solid var(--rule)}
.dhead h2{margin:0; font:800 17px/1 var(--sans); color:var(--forest); flex:1}
.dhead button{appearance:none; border:0; background:none; font-size:26px; line-height:1; color:var(--ink-3);
  cursor:pointer; min-width:44px; min-height:44px}
.dbody{flex:1; overflow-y:auto; padding:18px 20px; -webkit-overflow-scrolling:touch}
.dfoot{border-top:1px solid var(--rule); padding:16px 20px calc(16px + env(safe-area-inset-bottom,0px)); background:var(--paper)}

.line{display:grid; grid-template-columns:64px 1fr auto; gap:12px; align-items:start; padding:12px 0; border-bottom:1px solid var(--rule)}
.line img{width:64px; height:64px; object-fit:contain; background:var(--paper); border-radius:7px}
.line b{display:block; font:650 14px/1.3 var(--sans); color:var(--forest)}
.line .u{font:500 12px/1.5 var(--sans); font-variant-numeric:tabular-nums; color:var(--ink-3)}
.qty{display:flex; align-items:center; gap:6px; margin-top:7px}
.qty button{appearance:none; width:44px; height:44px; border:1px solid var(--rule); background:var(--card); border-radius:8px;
  font:700 15px/1 var(--sans); color:var(--forest); cursor:pointer}
.qty span{font:600 14px/1 var(--sans); font-variant-numeric:tabular-nums; min-width:26px; text-align:center}
.line .rm{appearance:none; border:0; background:none; color:var(--ink-3); font:500 11.5px/1 var(--sans); font-variant-numeric:tabular-nums; cursor:pointer; padding:6px 0}

.row{display:flex; justify-content:space-between; gap:12px; padding:6px 0; font-size:14.5px}
.row.tot{border-top:1px solid var(--rule); margin-top:8px; padding-top:12px; font:700 17px/1 var(--sans); color:var(--forest)}
.btn{appearance:none; display:block; width:100%; border:0; border-radius:9px; background:var(--terra-ink); color:#fff;
  padding:16px; font:700 15.5px/1 var(--sans); cursor:pointer; min-height:52px}
.btn:disabled{background:#D8CFBE; cursor:not-allowed}
.btn.ghost{background:none; border:1px solid var(--forest); color:var(--forest)}

label{display:block; font:600 10.5px/1 var(--sans); font-variant-numeric:tabular-nums; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin:0 0 6px}
input,textarea,select{width:100%; border:1px solid var(--rule); border-radius:8px; padding:13px; background:var(--card);
  font:400 16px/1.4 var(--sans); color:var(--ink); margin-bottom:14px}
textarea{min-height:78px; resize:vertical}
.seg{display:flex; gap:8px; margin-bottom:14px}
.seg button{flex:1; appearance:none; border:1px solid var(--rule); background:var(--card); border-radius:8px; padding:13px;
  min-height:48px; font:600 14px/1 var(--sans); color:var(--forest); cursor:pointer}
.seg button[aria-pressed=true]{background:var(--forest); border-color:var(--forest); color:#fff}
.err{color:var(--terra-ink); font-size:13.5px; margin:0 0 12px}
.ok{border:1px solid var(--forest); background:rgba(40,88,40,.06); border-radius:10px; padding:20px; text-align:center}
.ok b{display:block; font:800 20px/1.2 var(--sans); color:var(--forest); margin-bottom:8px}
.ok .ref{font:700 15px/1 var(--mono); color:var(--terra); margin:12px 0; letter-spacing:.06em}
.empty{text-align:center; color:var(--ink-3); padding:40px 0; font-size:14.5px}


/* ── skip link + mobile menu ───────────────────────────────────── */
.skip{position:absolute; left:-9999px; top:0; background:var(--forest); color:#fff; padding:12px 16px; z-index:200}
.skip:focus{left:8px; top:8px}
.burger{display:none; appearance:none; border:1px solid var(--rule); background:var(--card); border-radius:8px;
  min-width:44px; min-height:44px; font-size:17px; color:var(--forest); cursor:pointer}
@media(max-width:900px){
  .nav{position:fixed; inset:64px 0 auto; background:var(--cream); border-bottom:1px solid var(--rule);
    flex-direction:column; align-items:stretch; padding:8px 14px 16px; gap:2px; display:none; z-index:60;
    box-shadow:0 18px 30px -22px rgba(20,18,14,.5)}
  body.menu .nav{display:flex}
  .nav button{text-align:left; padding:14px 10px; font-size:15.5px}
  .burger{display:block; order:3}
  .bag{margin-left:auto; order:2}
  .top .wrap{gap:10px}
}
@media(min-width:901px){ .nav{margin-left:auto} .bag{margin-left:10px} }

/* ── hero CTAs ─────────────────────────────────────────────────── */
.cta{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px}
.btn.inline{display:inline-flex; align-items:center; justify-content:center; width:auto; padding:14px 22px; min-height:48px}

/* ── section headers ───────────────────────────────────────────── */
/* a section heading is a label for what sits under it: close to its cards, with
   one consistent breath above it. desktop 56/14, phone 40/12 */
.sechead{display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; padding:56px 0 14px}
.sechead h2{font:400 clamp(15px,1.5vw,18px)/1.2 var(--head); text-transform:uppercase; letter-spacing:.1em; color:var(--forest); margin:0; display:flex; align-items:center; gap:.4em}
.more,.ilink,.flink{appearance:none; border:0; background:none; color:var(--terra-ink); font:600 13.5px/1.5 var(--sans);
  cursor:pointer; padding:0; text-align:left}
.more{margin-left:auto}
.ilink{text-decoration:underline; font-size:inherit}
.secsub{color:var(--ink-2); max-width:62ch; margin:10px 0 20px; font-size:15.5px}
.grid{padding-bottom:0}
.notice{border-top:1px solid var(--rule); padding:22px 0 60px; color:var(--ink-2); font-size:14.5px; max-width:60ch}

/* ── panel ─────────────────────────────────────────────────────── */
/* the one dark block on the page: forest ground, cream type, the kit's beige pot
   as a real second column rather than a corner ornament */
.panel{background:var(--forest); color:var(--cream); border:0; border-radius:14px; padding:clamp(28px,4vw,48px) clamp(24px,4.5vw,56px); margin:56px 0 64px;
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:clamp(20px,4vw,56px)}
.panel h2{font:400 clamp(26px,3.6vw,38px)/1.22 var(--hand); color:var(--cream); margin:0 0 .4em}
.panel p{color:rgba(255,252,243,.82); max-width:52ch; margin:0 0 22px; font-size:15.5px; line-height:1.6}
.panel .btn{background:var(--cream); color:var(--forest); width:auto}
.panel .btn:hover{background:#fff}
.panel .el-side{width:clamp(140px,17vw,220px); height:auto; margin:0; justify-self:end}
@media(max-width:700px){
  .panel{grid-template-columns:1fr; text-align:left; padding:28px 22px 26px; margin:40px 0 48px; gap:18px}
  .panel .el-side{width:120px; justify-self:center; order:-1}
}

/* ── variant picker ────────────────────────────────────────────── */
.opts{margin-bottom:18px}
.optlist{display:flex; flex-direction:column; gap:8px}
.opt{appearance:none; display:flex; align-items:center; gap:10px; width:100%; border:1px solid var(--rule);
  background:var(--card); border-radius:9px; padding:14px 15px; min-height:52px; cursor:pointer;
  font:600 14.5px/1.2 var(--sans); color:var(--ink); text-align:left}
.opt b{margin-left:auto; font:700 14px/1 var(--sans); font-variant-numeric:tabular-nums; color:var(--forest)}
.opt em{font:600 10px/1 var(--sans); font-variant-numeric:tabular-nums; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-style:normal}
.opt[aria-pressed=true]{border-color:var(--forest); box-shadow:inset 0 0 0 1px var(--forest); background:rgba(40,88,40,.05)}
.opt:disabled{opacity:.45; cursor:not-allowed; text-decoration:line-through}
.fineprint{font-size:13px; color:var(--ink-3); margin:0 0 12px}

/* ── prose pages (contact, policies, article) ──────────────────── */
.wrap.narrow{max-width:760px}
.prose{padding:8px 0 70px}
.prose h1{font:400 clamp(34px,5.5vw,54px)/1.2 var(--hand); color:var(--forest); margin:12px 0 .42em; text-wrap:balance}
.prose .date{font:600 12px/1.3 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin:0 0 24px}
.rte{color:var(--ink-2); font-size:16px; line-height:1.75}
.rte h2,.rte h3,.rte h4,.rte strong{color:var(--forest)}
.rte h2{font:800 22px/1.25 var(--sans); margin:34px 0 10px}
.rte h3,.rte h4{font:700 17px/1.3 var(--sans); margin:26px 0 8px}
.rte p{margin:0 0 15px}
.rte ul,.rte ol{margin:0 0 16px; padding-left:22px}
.rte li{margin-bottom:7px}
.rte a{color:var(--terra-ink)}
.rte img{border-radius:10px; margin:18px 0}
.rte table{width:100%; border-collapse:collapse; margin:0 0 18px; font-size:14.5px}
.rte td,.rte th{border:1px solid var(--rule); padding:9px 11px; text-align:left}
.after{border-top:1px solid var(--rule); margin-top:34px; padding-top:20px; color:var(--ink-2); font-size:14.5px}
.polnav{display:flex; flex-wrap:wrap; gap:8px 18px; border-top:1px solid var(--rule); margin-top:34px; padding-top:20px}
.contactgrid-old{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; border-top:1px solid var(--rule);
  margin-top:28px; padding-top:24px}
@media(max-width:640px){.contactgrid{grid-template-columns:1fr; gap:18px}}
.contactgrid p{margin:0 0 5px; font-size:14.5px; color:var(--ink-2)}

/* ── blog list ─────────────────────────────────────────────────── */
.artlist{display:grid; gap:14px; padding:30px 0 70px}
.artcard{appearance:none; display:flex; flex-direction:column; gap:8px; align-items:flex-start; text-align:left;
  border:1px solid var(--rule); background:var(--card); border-radius:12px; padding:26px 28px; cursor:pointer; font:inherit}
.artcard.has-img{flex-direction:row; align-items:stretch; gap:22px; padding:16px}
.artcard .aimg{flex:0 0 clamp(120px,24vw,220px); aspect-ratio:1223/1400; border-radius:9px; overflow:hidden; background:var(--paper)}
.artcard .aimg img{width:100%; height:100%; object-fit:contain; display:block}
.artcard .atext{display:flex; flex-direction:column; gap:8px; align-items:flex-start; padding:10px 8px 10px 0; min-width:0}
.artcard .ex{font-size:14.5px; line-height:1.55; color:var(--ink-2)}
.artcard .rd{margin-top:4px}
@media(max-width:560px){.artcard.has-img{flex-direction:column} .artcard .aimg{flex-basis:auto; width:100%} .artcard .atext{padding:4px 6px 8px}}
.artcard .date{font:600 11.5px/1.3 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.artcard b{font:800 19px/1.3 var(--sans); color:var(--forest)}
.artcard .rd{font:600 13px/1 var(--sans); color:var(--terra-ink)}


/* ── phone ──────────────────────────────────────────────────────
   The home hero measured 67% of an iPhone 13 and 74% of an SE, so the
   first screen was headline and nothing else: no hint that workshops
   are below. Everything here buys that back without shrinking the type
   people actually read. */
@media(max-width:560px){
  .hero{padding:24px 0 20px}
  .hero h1{font-size:31px; line-height:1.2; margin-bottom:12px}
  .hero.hero-home h1{font-size:28px; line-height:1.12; margin-bottom:10px}
  .hero.hero-home h1 .hand{font-size:1.26em}
  .hero p{font-size:16px}
  .cta{margin-top:18px; gap:8px}
  .cta .btn.inline{width:100%; min-height:50px; padding:13px 20px}
  /* the client list is reassurance, not a headline; it should not outweigh the CTAs */
  .hero .trusted{margin-top:16px; font-size:11px; line-height:1.75; letter-spacing:.06em}
  /* the section link floated right onto its own line and left a hole between
     the title and the grid; on a phone it sits under the title instead */
  .sechead{padding:40px 0 12px; flex-wrap:nowrap; align-items:center; gap:12px}
  .sechead .more{display:inline-flex; align-items:center; margin:-10px 0; padding:10px 0; white-space:nowrap; flex:0 0 auto}
  .sechead h2{min-width:0}
  .grid{gap:10px; padding-bottom:0}
  .card .m{padding:10px 11px}
  .secsub{font-size:15px; margin:8px 0 14px}
  .panel{padding:26px 22px; margin:14px 0 44px}
  footer{padding-top:26px}
}

/* a logo is the way home; it needs a thumb-sized target even at 320 */
.brand{min-height:44px; align-items:center}

/* real stock counts, from her Shopify export */
.card .low{font:700 11px/1.3 var(--sans); font-variant-numeric:tabular-nums; letter-spacing:.09em; text-transform:uppercase; color:var(--terra-ink); margin-top:6px}
.qty button:disabled{opacity:.4; cursor:not-allowed}

/* ── product page ─────────────────────────────────────────────── */
.back{appearance:none; border:0; background:none; color:var(--ink-3); font:600 13px/1 var(--sans); font-variant-numeric:tabular-nums; cursor:pointer;
  padding:16px 0; min-height:44px; display:inline-flex; align-items:center}
/* Desktop: gallery 7 / buy 5, gallery sticks while the description scrolls.
   Description sits under the buy column so the copy has a 62ch measure and
   the eye is not asked to read a 1,900-character wall beside a photo. */
.pv{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); column-gap:clamp(32px,5vw,72px); row-gap:0;
  grid-template-areas:"gallery buy" "gallery desc"; align-items:start; padding:8px 0 72px}
.pv>*{min-width:0}
.pv-gallery{grid-area:gallery; position:sticky; top:calc(var(--top-h,78px) + 20px)}
.pv-buy{grid-area:buy}
.pv-desc{grid-area:desc; max-width:58ch; margin-top:40px; padding-top:32px; border-top:1px solid var(--rule)}
.pv-desc h2{font:400 19px/1.2 var(--head); text-transform:uppercase; letter-spacing:.07em; color:var(--forest); margin:0 0 14px}
.pv-desc .rte{font-size:15.5px; line-height:1.7}
.pv-desc .rte p{margin:0 0 12px}
.pv-desc .rte h2,.pv-desc .rte h3,.pv-desc .rte h4{font:700 16px/1.35 var(--sans); margin:22px 0 8px}
.pv-desc .rte ul,.pv-desc .rte ol{margin:0 0 14px; padding-left:20px}
.pv-desc .rte li{margin-bottom:5px}
.pv-desc .rte br{display:none}
.pv-desc .rte strong{font-weight:650}
.pv-desc .rte em{color:var(--ink-2)}

/* gallery: one track that snaps everywhere; thumbs are a second way in */
.pv-track{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; border:1px solid var(--rule); border-radius:12px; background:var(--paper)}
.pv-track::-webkit-scrollbar{display:none}
.pv-slide{flex:0 0 100%; scroll-snap-align:start; margin:0; aspect-ratio:1/1}
.pv-slide img{width:100%; height:100%; object-fit:contain}
.pv-count{position:absolute; right:12px; top:12px; font:600 11px/1 var(--sans); font-variant-numeric:tabular-nums; letter-spacing:.06em; color:var(--ink-2);
  background:rgba(255,252,243,.88); border:1px solid var(--rule); border-radius:20px; padding:6px 9px; pointer-events:none}
.pv-thumbs{display:flex; gap:8px; margin-top:12px; overflow-x:auto; scrollbar-width:none; padding:2px}
.pv-thumbs::-webkit-scrollbar{display:none}
.pv-thumb{appearance:none; flex:0 0 auto; width:64px; height:64px; padding:0; border:1px solid var(--rule); border-radius:8px;
  background:var(--paper); cursor:pointer; overflow:hidden; touch-action:manipulation}
.pv-thumb img{width:100%; height:100%; object-fit:contain}
.pv-thumb[aria-selected=true]{border-color:var(--forest); box-shadow:0 0 0 1px var(--forest)}

/* buy block: kicker, title, price, options, action, three facts. tight inside, air outside */
.pv-kicker{font:400 13px/1 var(--head-clean); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin:6px 0 10px}
.pv h1{font:800 30px/1.15 var(--sans); color:var(--forest); margin:0 0 12px; letter-spacing:-.02em}
.pv-priceline{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:22px}
.pv .price{font:700 24px/1 var(--sans); font-variant-numeric:tabular-nums; color:var(--ink)}
.lowline{font:600 12.5px/1 var(--sans); color:var(--terra-ink)}
.pv .opts{margin-bottom:20px}
.pv-facts{list-style:none; margin:18px 0 0; padding:16px 0 0; border-top:1px solid var(--rule); color:var(--ink-2); font-size:14px; line-height:1.55}
.pv-facts li{position:relative; padding-left:16px; margin-bottom:6px}
.pv-facts li::before{content:""; position:absolute; left:0; top:.62em; width:6px; height:6px; border-radius:50%; background:var(--forest)}

/* sticky buy bar: phone only, appears when the real button is off screen */
.buybar{position:fixed; left:0; right:0; bottom:0; width:100%; z-index:80; box-sizing:border-box;
  background:var(--sheet); border-top:1px solid var(--rule);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px)); transform:translateY(0); transition:transform .2s cubic-bezier(.16,1,.3,1)}
.buybar[hidden]{display:none}
.buybar-in{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; max-width:1120px; margin:0 auto}
.buybar-txt{min-width:0; display:flex; flex-direction:column}
.buybar-txt b{font:650 13.5px/1.25 var(--sans); color:var(--forest); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.buybar-txt span{font:700 14px/1.4 var(--sans); font-variant-numeric:tabular-nums}
.buybar .btn{width:auto; padding:14px 22px; min-height:48px}
body.has-buybar{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
@media(min-width:1101px){.buybar{display:none} body.has-buybar{padding-bottom:0}}

/* tablet: two columns still fit, so keep gallery beside the buy block; the
   gallery stops sticking here because the description sits under both */
@media(min-width:701px) and (max-width:1100px){
  .pv{grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:28px}
  .pv h1{font-size:26px}
}
/* phone: one column, the counter stays anchored to the photo, sticky off */
@media(max-width:700px){
  .pv{grid-template-columns:minmax(0,1fr); grid-template-areas:"gallery" "buy" "desc"; row-gap:22px; padding:4px 0 56px}
  .pv-gallery{position:relative; top:auto}
  .pv-track{border-radius:10px}
  .pv-thumbs{display:none}          /* the counter and the swipe do the job on a phone */
  .pv-count{top:10px; right:10px}
  .pv h1{font-size:25px; max-width:none}
  .pv-desc{margin-top:8px; padding-top:24px}
}

/* ── tap targets: every link or button is at least 44px tall to the finger ── */
/* Inline links inside prose cannot be 44px tall without wrecking the line, so
   the hit area is padded out and pulled back with a negative margin. */
.ilink,.more,.contactgrid a,.fbot a{padding:13px 0; margin:-13px 0; display:inline-block; line-height:1.4}
.rte a{display:inline-block; padding:13px 2px; margin:-13px -2px; line-height:1.4}
.sechead .more{margin-left:auto; padding:13px 0; margin-top:-13px; margin-bottom:-13px}
.polnav{gap:0 22px}
.polnav .ilink{padding:12px 0; margin:0}

/* ── prose measure: 68ch, whatever the container ───────────────── */
.rte,.prose>p,.prose .rte{max-width:60ch}

.contactgrid p,.contactgrid a{font-size:15px}

/* ── iOS ────────────────────────────────────────────────────────── */
button,.card,.opt,.plan,.pv-thumb{touch-action:manipulation; -webkit-tap-highlight-color:transparent}
input,textarea,select{font-size:16px}

/* ── /brand: the theme sheet ─────────────────────────────────── */
.bs{padding:20px 0 80px}
.bs-title{font:800 clamp(28px,4.5vw,42px)/1.12 var(--sans); color:var(--forest); letter-spacing:-.02em; margin:0 0 12px}
.bs-title .hand{white-space:nowrap}
.bs-title .hand{font-size:1.25em; line-height:1}
.bs-intro{color:var(--ink-2); max-width:60ch; margin:0 0 8px; font-size:16.5px}
.bs-sec{padding-top:8px}
.bs-sec .sechead{padding-top:44px}
.bs-grid{display:grid; gap:16px}
.bs-grid-5{grid-template-columns:repeat(auto-fill,minmax(168px,1fr))}
.bs-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.bs-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.bs-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:900px){.bs-grid-4{grid-template-columns:repeat(3,minmax(0,1fr))} .bs-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.bs-grid-5{grid-template-columns:repeat(2,minmax(0,1fr))} .bs-grid-4,.bs-grid-3,.bs-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))} .bs-grid-2{grid-template-columns:minmax(0,1fr)}}
.bs-swatch{display:flex; flex-direction:column; gap:4px; min-width:0}
.bs-chip{aspect-ratio:4/3; border-radius:10px; border:1px solid var(--rule)}
.bs-swatch b{font:700 14px/1.3 var(--sans); color:var(--forest); margin-top:6px}
.bs-code{font:500 11px/1.5 var(--sans); font-variant-numeric:tabular-nums; color:var(--ink-3); word-break:break-all}
.bs-role{font-size:13px; line-height:1.45; color:var(--ink-2)}
.bs-surface{aspect-ratio:4/3; border-radius:12px; padding:16px; display:flex; flex-direction:column; justify-content:flex-end; gap:2px; min-width:0}
.bs-surface b{font:700 14px/1.3 var(--sans); color:var(--forest)}
.bs-surface span{font:500 11.5px/1.4 var(--sans); font-variant-numeric:tabular-nums; color:var(--ink-3)}
.bs-ground{border:1px dashed var(--rule)}
.bs-glass{background:rgba(255,252,243,.94); backdrop-filter:blur(8px); border:1px solid var(--rule)}
.bs-type{display:flex; flex-direction:column; gap:0; border-top:1px solid var(--rule)}
.bs-type .bs-spec{padding:20px 0; border-bottom:1px solid var(--rule)}
.bs-spec{display:flex; flex-direction:column; gap:10px; min-width:0}
.bs-label{font:600 10.5px/1 var(--sans); font-variant-numeric:tabular-nums; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}
.bs-h-display{font:800 clamp(28px,5vw,44px)/1.15 var(--sans); letter-spacing:-.02em; color:var(--forest); margin:0}
.bs-h-page{font:800 clamp(24px,4vw,36px)/1.18 var(--sans); letter-spacing:-.02em; color:var(--forest); margin:0}
.bs-h-product{font:800 30px/1.15 var(--sans); letter-spacing:-.02em; color:var(--forest); margin:0}
.bs-h-section{font:800 clamp(20px,3vw,27px)/1.2 var(--sans); letter-spacing:-.01em; color:var(--forest); margin:0}
.bs-h-prose{font:800 22px/1.25 var(--sans); color:var(--forest); margin:0}
.bs-body{font:400 16px/1.6 var(--sans); color:var(--ink); max-width:60ch; margin:0}
.bs-lead{font:400 17px/1.6 var(--sans); color:var(--ink-2); max-width:56ch; margin:0}
.bs-small{font:400 14px/1.55 var(--sans); color:var(--ink-2); margin:0}
.bs-row{display:flex; flex-wrap:wrap; gap:22px 36px; align-items:flex-start; padding:6px 0 18px}
.bs-row .bs-spec{min-width:0}
.bs .cardwrap{max-width:260px}
.bs-radii{display:flex; flex-wrap:wrap; gap:8px}
.bs-radii i{font:500 11px/1.3 var(--sans); font-variant-numeric:tabular-nums; font-style:normal; color:var(--ink-2); background:var(--card); border:1px solid var(--rule); padding:12px 10px; min-width:70px; text-align:center}
.bs-note{font-size:13.5px; color:var(--ink-2); margin:10px 0 0; line-height:1.55}
.bs-rules>div{margin:22px 0 6px}
.bs-nav{display:inline-flex; gap:4px}
.bs-nav button{appearance:none; border:0; background:none; font:600 14px/1 var(--sans); color:var(--ink-2); padding:11px 12px; min-height:44px; cursor:pointer; border-radius:8px}
.bs-nav button[aria-current=true]{color:var(--forest); background:var(--paper)}

/* ── icons and marks ─────────────────────────────────────────── */
.ic{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto; vertical-align:-4px}
.bag .ic{width:18px; height:18px; margin-right:2px}
.burger .ic,#dClose .ic{width:22px; height:22px}
#dClose{font-size:0}
/* the kit's hand-drawn elements (06 Elements PNG), cut out one by one. Used the
   way the kit's bag mockup uses them: a loose row of small pots, full colour. */
.el{display:block; height:auto; pointer-events:none; user-select:none}
.hero{position:relative}
.hero-els{position:absolute; right:clamp(12px,4vw,60px); bottom:18px; display:flex; align-items:flex-end; gap:clamp(14px,2vw,30px); pointer-events:none}
.hero-els .el{width:clamp(44px,5.2vw,78px)}
.hero-els .el:nth-child(2n){transform:translateY(-14px)}
.hero-els .el:nth-child(3){width:clamp(38px,4.4vw,64px)}
@media(max-width:900px){.hero-els{right:16px; bottom:12px; gap:14px} .hero-els .el{width:40px} .hero-els .el:nth-child(n+4){display:none}}
/* the sketched pot: in the content column, right side, centred on the headline
   block, so it balances the text instead of hiding in the corner */
.hero.hero-home .wrap{position:relative; padding-right:clamp(220px,26vw,360px)}
@media(max-width:900px){.hero.hero-home .wrap{padding-right:160px}}
.hero-sketch{position:absolute; right:clamp(8px,4%,56px); top:50%; transform:translateY(-52%); width:clamp(170px,21vw,290px); aspect-ratio:1; pointer-events:none}
.hero-sketch .sketch{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
/* the static row is the fallback only: reduced motion, or the outlines failed to load */
.hero-els-static{display:none}
.hero-els-static.on{display:flex}
@media(prefers-reduced-motion:reduce){.hero-sketch{display:none} .hero-els-static{display:flex}}
@media(max-width:1100px){.hero-sketch{width:clamp(150px,19vw,220px); right:0}}
@media(max-width:900px){.hero-sketch{width:130px; right:0; top:auto; bottom:-6px; transform:none}}
@media(max-width:560px){
  /* room below the buttons for the jug, so it never sits on a label */
  .hero.hero-home .wrap{padding-right:20px; padding-bottom:96px}
  .hero-sketch{position:absolute; right:14px; bottom:-6px; top:auto; transform:none; width:104px; height:104px; margin:0}
  .hero .trusted{max-width:calc(100% - 112px)}
}
/* on a phone the pots stop being a background flourish and become a row under
   the hero, so they need the page's own gutter rather than sitting on the edge */
@media(max-width:560px){
  .hero-els{position:static; justify-content:space-between; margin:18px 20px 0; gap:0}
  .hero-els .el:nth-child(n+4){display:block}
  .hero-els .el{width:clamp(30px,9vw,42px)}
  .hero-els .el:nth-child(2n){transform:translateY(-7px)}
}
.sechead h2 .el{height:.95em; width:auto; margin-right:.1em}
.hand{font-family:var(--hand); font-weight:400; letter-spacing:0; color:var(--forest)}
.bs-title .hand{font-size:1.15em}
/* brand sheet additions */
.bs-h3{font:700 17px/1.3 var(--sans); color:var(--forest); margin:34px 0 8px}
.bs-typecard{display:flex; flex-direction:column; gap:8px; border:1px solid var(--rule); background:var(--card); border-radius:12px; padding:22px}
.bs-typecard b{font:700 15px/1.3 var(--sans); color:var(--forest)}
.bs-typecard span{font-size:14px; line-height:1.55; color:var(--ink-2)}
.bs-tablewrap{overflow-x:auto}
.bs-table{width:100%; border-collapse:collapse; font-size:13.5px}
@media(max-width:560px){.bs-table{font-size:12px} .bs-table td,.bs-table th{padding:8px 6px} .bs-pair{font-size:13px; padding:6px 7px}}
.bs-table th{font:600 11px/1 var(--sans); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); text-align:left; padding:8px 10px 10px; border-bottom:1px solid var(--rule)}
.bs-table td{padding:9px 10px; border-bottom:1px solid var(--rule); color:var(--ink-2); vertical-align:middle}
.bs-pair{display:inline-block; font:600 15px/1 var(--sans); padding:8px 10px; border-radius:6px; border:1px solid var(--rule); white-space:nowrap}
.bs-num{font-variant-numeric:tabular-nums; font-weight:600; color:var(--ink)}
.bs-ok{color:var(--forest); font-weight:600}
.bs-warn{color:var(--ink-2); font-weight:600}
.bs-bad{color:var(--terra); font-weight:600}
.bs-icons{display:flex; flex-wrap:wrap; gap:14px}
.bs-icon{display:flex; flex-direction:column; align-items:center; gap:8px; width:86px; padding:16px 8px; border:1px solid var(--rule); background:var(--card); border-radius:10px; color:var(--forest)}
.bs-icon span{font-size:11.5px; color:var(--ink-3)}
.bs-mark{display:flex; flex-direction:column; gap:8px; align-items:flex-start}
.bs-mark svg{width:100%; aspect-ratio:5/4; border:1px dashed var(--rule); border-radius:12px; padding:18px; fill:currentColor; box-sizing:border-box}
.bs-mark b{font:700 13.5px/1.3 var(--sans); color:var(--forest)}
.bs-els{display:flex; flex-wrap:wrap; gap:10px}
.bs-el{display:flex; flex-direction:column; align-items:center; gap:4px; width:96px; padding:10px 6px 8px; border:1px dashed var(--rule); border-radius:10px}
.bs-el .el{width:64px}
.bs-el span{font:400 11px/1 var(--head-clean); letter-spacing:.1em; color:var(--ink-3)}

/* ── /brand: layouts, so type and colour can be judged together ── */
.bs-lay{display:grid; gap:18px}
.bs-lay-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:760px){.bs-lay-2{grid-template-columns:minmax(0,1fr)}}
.lay{border:1px solid var(--rule); border-radius:14px; overflow:hidden; background:var(--sheet)}
.lay-in{padding:clamp(22px,4vw,40px)}
.lay .lay-title{font:400 clamp(32px,4.6vw,48px)/1.05 var(--hand); color:var(--forest); margin:0 0 12px; max-width:none}
.lay h2{font:400 clamp(15px,1.5vw,18px)/1.2 var(--head); text-transform:uppercase; letter-spacing:.1em; color:var(--forest); margin:0 0 10px}
.lay p{margin:0 0 16px; color:var(--ink-2); max-width:44ch; font-size:15.5px}
.lay .cta{margin-top:4px}
.lay .btn.inline{margin-right:8px; margin-bottom:8px}
.lay-terra{background:var(--terra); color:var(--cream)}
.lay-terra .lay-title{color:var(--cream)}
.lay-terra h2,.lay-terra p{color:var(--cream)}
.lay-terra p{opacity:.92}
.lay-terra .btn.inline{background:var(--cream); color:var(--terra-ink)}
.lay-terra .btn.inline.ghost{background:none; border-color:var(--cream); color:var(--cream)}
.lay-forest{background:var(--forest); color:var(--cream)}
.lay-forest .lay-title{color:var(--wheat)}
.lay-forest h2,.lay-forest p{color:var(--cream)}
.lay-forest p{opacity:.9}
.lay-forest .btn.inline{background:var(--terra-ink); color:#fff}
.lay-forest .btn.inline.ghost{background:none; border-color:var(--cream); color:var(--cream)}
.lay-wheat{background:var(--wheat)}
.lay-wheat .lay-title{color:var(--forest)}
.lay-wheat h2,.lay-wheat p{color:var(--ink)}
.lay-peri{background:var(--peri)}
.lay-peri .lay-title{color:var(--ink)} .lay-peri h2{color:var(--ink)} .lay-peri p{color:var(--ink)}
.lay-peri .btn.inline{background:var(--ink); color:var(--cream)}
.lay-els{display:flex; gap:14px; align-items:flex-end; margin-top:18px}
.lay-els .el{width:46px}
.lay-terra .lay-els .el,.lay-forest .lay-els .el{filter:brightness(0) invert(1); opacity:.9}
.lay-wheat .lay-els .el{opacity:.9}
/* event card: the most common object on the site */
.ev{display:grid; grid-template-columns:auto minmax(0,1fr); gap:18px; align-items:start; border:1px solid var(--rule); background:var(--card); border-radius:12px; padding:18px}
.ev-date{text-align:center; min-width:64px; padding:8px 6px; background:var(--paper); border-radius:9px}
.ev-date b{display:block; font:400 30px/1 var(--head); color:var(--forest)}
.ev-date span{display:block; font:400 12px/1.2 var(--head-clean); letter-spacing:.1em; color:var(--ink-3); margin-top:4px}
.ev h3{font:700 17px/1.3 var(--sans); color:var(--forest); margin:0 0 4px}
.ev .meta{font-size:13.5px; color:var(--ink-3); margin:0 0 10px}
.ev .row{display:flex; align-items:center; gap:14px; justify-content:space-between; flex-wrap:wrap; padding:0}
.ev .price{font:700 20px/1 var(--sans); font-variant-numeric:tabular-nums; color:var(--ink)}
.ev .btn.inline{padding:12px 18px; min-height:44px; font-size:14px}
.lay-cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px}
@media(max-width:560px){.lay-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
.lay-cards .cardwrap{max-width:none}

/* brand sheet: the three strengths of the paper, judged under body copy */
.pp{border:1px solid var(--rule); border-radius:12px; padding:22px; min-height:220px}
.pp-a{background:linear-gradient(rgba(255,252,243,.46),rgba(255,252,243,.46)), url(/assets/brand/paper.webp) center/cover}
.pp-b{background:url(/assets/brand/paper-soft.webp) center/cover}
.pp-c{background:url(/assets/brand/paper-faint.webp) center/cover}
.pp b{display:block; font:400 15px/1 var(--head-clean); letter-spacing:.1em; text-transform:uppercase; color:var(--forest); margin-bottom:10px}
.pp p{margin:0 0 8px; color:var(--ink); font-size:15px; line-height:1.6}
.pp small{display:block; color:var(--ink-3); font-size:12.5px; line-height:1.5; margin-top:10px}

/* the brand sheet is reference material people actually read; on a phone its
   table and captions get the same 13px floor as the rest of the site */
@media(max-width:560px),(pointer:coarse){
  .bs-table{font-size:13px}
  .bs-table td,.bs-table th{padding:9px 7px}
  .bs-code{font-size:13px}
  .pp small,.bs-surface span,.bs-typecard span{font-size:13px}
  .bs-label{font-size:11px}
  .bs-ok,.bs-warn,.bs-bad{font-size:13px}
}

/* ── very small phones (320 to 360) ─────────────────────────────
   Measured on an iPhone SE: the home hero came to 108% of the viewport, so the
   first screen was headline and nothing else, with no hint that workshops are
   below. Tighter type and no decorative row here; 375 and up keep both. */
@media(max-width:360px){
  .hero{padding:18px 0 16px}
  .hero h1{font-size:28px}
  .hero.hero-home h1{font-size:25px; line-height:1.14; margin-bottom:8px}
  .hero-sketch{width:88px; height:88px}
  .hero .trusted{max-width:calc(100% - 96px)}
  .hero p{font-size:15.5px; line-height:1.5}
  .cta{margin-top:14px; gap:7px}
  .cta .btn.inline{min-height:46px; padding:11px 16px; font-size:15px}
  .hero .trusted{margin-top:12px; line-height:1.6}
  .hero-els{display:none}          /* decoration yields to the first real content */
  .sechead{padding:32px 0 10px}
}

/* ── pay by QR ─────────────────────────────────────────────── */
.seg.pay3 button{padding:12px 6px; font-size:13.5px}
.paysum{display:flex; justify-content:space-between; align-items:baseline; border:1px solid var(--forest); background:rgba(45,89,40,.06); border-radius:10px; padding:14px 18px; margin:0 0 18px}
.paysum span{color:var(--ink-2); font-size:14px}
.paysum b{font:700 24px/1 var(--sans); color:var(--forest); font-variant-numeric:tabular-nums}
.qrs{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:0 0 14px}
.qr{margin:0; background:#fff; border:1px solid var(--rule); border-radius:12px; padding:12px; text-align:center}
.qr img{display:block; width:100%; height:auto; border-radius:6px}
.qr figcaption{display:grid; gap:2px; margin-top:10px; font-size:13px; color:var(--ink-2); line-height:1.35}
.qr figcaption b{font-size:15px; color:var(--forest)}
.qr .acct{font:600 15px/1.3 var(--mono); color:var(--ink); letter-spacing:.03em}
.sent{border-top:1px solid var(--rule); margin-top:18px; padding-top:18px}
.sent label{display:block; font:600 13px/1.3 var(--sans); color:var(--ink-2); margin:0 0 8px}
.sent input{width:100%; border:1px solid var(--rule); border-radius:8px; padding:13px; font:500 16px/1.4 var(--mono); background:var(--card); color:var(--ink); margin:0 0 12px; letter-spacing:.04em}
.sent input:focus{outline:2px solid var(--peri); outline-offset:1px}
@media(max-width:520px){ .qrs{grid-template-columns:1fr} .seg.pay3{flex-direction:column} }

/* ── footer: one quiet row. the nav is in the header, so it is not repeated ── */
footer{border-top:1px solid var(--rule); padding:26px 0 calc(28px + env(safe-area-inset-bottom)); color:var(--ink-3); font-size:13px}
.foot{display:flex; justify-content:space-between; align-items:flex-start; gap:20px}
.foot p{margin:0; line-height:1.6}
.fbrand{font:600 14px/1.4 var(--sans); color:var(--forest); margin-bottom:2px}
.fbrand span{font:400 13px/1 var(--sans); color:var(--ink-3); margin-left:10px}
.foot a{color:var(--ink-2); text-decoration:none}
.foot a:hover{color:var(--terra-ink)}
.fs{display:flex; gap:4px; flex:0 0 auto}
.fs a{display:flex; align-items:center; justify-content:center; width:44px; height:44px; margin:-10px -6px -10px 0; color:var(--ink-3)}
.fs a:hover{color:var(--terra-ink)}
.fs .ic{width:18px; height:18px}
.fbot{display:flex; justify-content:space-between; align-items:center; gap:12px 20px; flex-wrap:wrap; margin-top:16px; font-size:12.5px}
.fbot p{margin:0}
.fpol{display:flex; gap:2px; flex-wrap:wrap; margin:-10px 0}
.flink{appearance:none; border:0; background:none; font:inherit; color:var(--ink-3); cursor:pointer; padding:10px 8px; min-height:44px}
.flink:hover{color:var(--terra-ink); text-decoration:underline}
.fpol .flink:first-child{padding-left:0}
@media(max-width:560px){
  .foot{flex-direction:column; gap:10px}
  .fbrand span{display:block; margin:2px 0 0}
  .fs a{margin-left:-12px; margin-right:0}
  .fbot{flex-direction:column; align-items:flex-start; gap:4px; margin-top:14px}
  .fpol{margin-left:-8px}
  .fpol .flink:first-child{padding-left:8px}
}

/* ── connect: a form that reaches the studio, and the ways to find it ── */
.connect{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(24px,4vw,56px); align-items:start; padding:40px 0 8px}
.ask{background:var(--card); border:1px solid var(--rule); border-radius:14px; padding:clamp(22px,3vw,34px)}
.ask h2{font:400 clamp(15px,1.5vw,18px)/1.2 var(--head); text-transform:uppercase; letter-spacing:.1em; color:var(--forest); margin:0 0 6px}
.ask .lead{color:var(--ink-2); font-size:15px; margin:0 0 18px; line-height:1.55}
.ask label{display:block; font:600 13px/1.3 var(--sans); color:var(--ink-2); margin:0 0 6px}
.ask input,.ask textarea,.ask select{width:100%; border:1px solid var(--rule); border-radius:9px; padding:12px 13px; font:400 16px/1.45 var(--sans); background:var(--cream); color:var(--ink); margin:0 0 14px}
.ask textarea{min-height:120px; resize:vertical}
.ask input:focus,.ask textarea:focus,.ask select:focus{outline:2px solid var(--peri); outline-offset:1px; border-color:var(--forest)}
/* a select is ours, not the browser's: no native chrome, our chevron in forest,
   room for it on the right. the open list is still the OS's; nothing styles that */
select,.ask select{appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%232D5928' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:20px}
select::-ms-expand{display:none}
select option{font:400 15px var(--sans); color:var(--ink); background:var(--card)}
.ask .two{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.ask .btn{width:auto; min-width:180px}
.ask .sent{border:1px solid var(--forest); background:rgba(45,89,40,.06); border-radius:10px; padding:20px; color:var(--ink-2)}
.ask .sent b{display:block; font:400 26px/1.1 var(--hand); color:var(--forest); margin-bottom:8px}
.ways{display:grid; gap:22px}
.way{display:grid; grid-template-columns:22px 1fr; gap:12px; align-items:start}
.way .ic{width:20px; height:20px; color:var(--terra-ink); margin-top:3px}
.way b{display:block; font:400 13px/1.3 var(--head-clean); letter-spacing:.12em; text-transform:uppercase; color:var(--forest); margin:0 0 4px}
.way p{margin:0; color:var(--ink-2); font-size:15px; line-height:1.55}
.way a{color:var(--ink); text-decoration:none; border-bottom:1px solid var(--rule)}
.way a:hover{color:var(--terra-ink); border-color:var(--terra-ink)}
.way .socials{display:flex; gap:2px; margin:2px 0 0 -12px}
.way .socials a{display:flex; align-items:center; justify-content:center; width:44px; height:44px; border:0; color:var(--ink-2)}
.way .socials a:hover{color:var(--terra-ink)}
.way .socials .ic{width:20px; height:20px; color:currentColor; margin:0}
.ways .el{width:clamp(110px,12vw,150px); margin:8px 0 0 auto; opacity:.95}
@media(max-width:820px){.connect{grid-template-columns:1fr; gap:28px; padding:28px 0 0} .ways .el{display:none} .ask .two{grid-template-columns:1fr; gap:0}}

/* ── workshops: dates first ───────────────────────────────────── */
.secnote{font-size:13.5px; color:var(--ink-3); margin-left:auto; padding-bottom:1px}
.agenda{display:grid; gap:10px}
.agrow{appearance:none; width:100%; text-align:left; border:1px solid var(--rule); background:var(--card); border-radius:12px; padding:0; cursor:pointer;
  display:grid; grid-template-columns:76px minmax(0,1fr) 120px auto; align-items:center; gap:0 20px; overflow:hidden; color:var(--ink); font:inherit}
.agrow:hover{border-color:var(--forest)}
.agrow.full{opacity:.72}
.agdate{display:grid; justify-items:center; align-content:center; gap:1px; width:76px; align-self:stretch; background:var(--paper); border-right:1px solid var(--rule); padding:14px 0}
.agdate .mon{font:600 11px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--terra-ink)}
.agdate .day{font:700 30px/1 var(--sans); color:var(--forest); font-variant-numeric:tabular-nums}
.agdate .wd{font:500 11px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.agbody{padding:16px 0}
.agsoon{display:inline-block; font:700 10.5px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:#fff; background:var(--terra-ink); border-radius:5px; padding:5px 7px; margin-bottom:8px}
.agbody b{display:block; font:600 17px/1.3 var(--sans); color:var(--forest)}
.agbody b span{font-weight:400; color:var(--ink-2)}
.agmeta{margin:4px 0 0; font-size:14px; color:var(--ink-2)}
.agseats{margin:6px 0 0; font:600 12px/1.3 var(--sans); letter-spacing:.04em; color:var(--forest)}
.agseats.low{color:var(--terra-ink)}
.agseats.none{color:var(--ink-3)}
.agimg{width:120px; aspect-ratio:1; overflow:hidden; background:var(--paper)}
.agimg img{width:100%; height:100%; object-fit:cover; display:block}
.agcta{display:grid; gap:8px; justify-items:end; padding:0 20px 0 0}
.agcta .pr{font:600 15px/1 var(--sans); font-variant-numeric:tabular-nums; color:var(--ink)}
.agcta .go{display:inline-block; background:var(--terra-ink); color:#fff; border-radius:8px; padding:11px 14px; font:600 13.5px/1 var(--sans); white-space:nowrap}
.agrow.full .agcta .go{background:var(--card); color:var(--forest); border:1px solid var(--rule)}
.agempty{border:1px dashed var(--rule); border-radius:12px; padding:22px 24px; color:var(--ink-2); font-size:15px}
.agempty p{margin:0}
.agempty b{color:var(--forest); font-weight:600}
/* classes */
.kmeta{margin:0 0 4px; font:600 10.5px/1.3 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--terra-ink)}
.card .kmeta.date{color:var(--terra-ink)}
.kmake{margin:0 0 8px; font-size:13.5px; color:var(--ink-2); line-height:1.45}
.card.klass .pr i{font:400 11.5px/1 var(--sans); color:var(--ink-3); font-style:normal; margin-left:6px}
/* past */
.paststrip{display:flex; gap:12px; overflow-x:auto; scrollbar-width:none; margin:0 -20px; padding:0 20px 6px; scroll-snap-type:x proximity}
.paststrip::-webkit-scrollbar{display:none}
.pastcard{appearance:none; border:0; background:none; padding:0; cursor:pointer; flex:0 0 150px; scroll-snap-align:start; text-align:left; font:inherit; color:var(--ink-2); display:grid; gap:2px}
.pastcard img{width:150px; aspect-ratio:1; object-fit:cover; border-radius:9px; display:block; margin-bottom:6px; filter:saturate(.85)}
.pastcard .pdate{font:600 10.5px/1.3 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.pastcard b{font:600 13.5px/1.3 var(--sans); color:var(--forest)}
.pastcard span:last-child{font-size:12.5px}
/* product page: the date block */
.pv-when{display:grid; grid-template-columns:76px 1fr; gap:16px; align-items:center; border:1px solid var(--rule); border-radius:12px; overflow:hidden; margin:0 0 18px; background:var(--card)}
.pv-when .agdate{align-self:stretch}
.pv-when b{display:block; font:600 15px/1.3 var(--sans); color:var(--forest)}
.pv-when p{margin:3px 0 0; font-size:13.5px; color:var(--ink-2); line-height:1.45}
.pv-when.gone{opacity:.7}
.pv-gone{font-size:14px; color:var(--ink-2); margin:10px 0 0}
@media(max-width:700px){
  .secnote{display:none}
  .agrow{grid-template-columns:64px minmax(0,1fr); gap:0 14px}
  .agdate{width:64px}
  .agdate .day{font-size:26px}
  .agbody{padding:14px 0}
  .agimg{display:none}
  .agcta{grid-column:2; grid-template-columns:auto auto; justify-content:space-between; align-items:center; padding:0 14px 14px 0; width:100%}
  .agcta .go{padding:12px 14px; min-height:44px; display:inline-flex; align-items:center}
  .grid.classes{grid-template-columns:1fr 1fr}
}

/* ── the two-up band: studio use and the gift card, not workshops ──
   The label sits on the frame like a tag, the button hangs off the bottom
   edge. Both break the box on purpose, so the short copy is not a gap. */
.duoband{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:22px 0 4px; padding-bottom:22px}
.duo{appearance:none; font:inherit; text-align:left; cursor:pointer; color:var(--ink); border:1px solid var(--rule); background:var(--paper); border-radius:12px; padding:0;
  position:relative; display:grid; grid-template-columns:minmax(140px,42%) minmax(0,1fr); align-items:stretch}
.duo:hover{border-color:var(--forest)}
.duo .badge{position:absolute; top:-12px; left:16px; z-index:1; background:var(--terra-ink); color:#fff; border-radius:6px; padding:6px 9px; font:700 10.5px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase}
.duoimg{aspect-ratio:1; background:var(--card); border-radius:11px 0 0 11px; overflow:hidden}
.duoimg img{width:100%; height:100%; object-fit:cover; display:block}
.duobody{padding:26px 22px 44px; display:flex; flex-direction:column; gap:6px}
.duobody b{font:600 19px/1.25 var(--sans); color:var(--forest)}
.duobody p{margin:0; font-size:14px; color:var(--ink-2); line-height:1.5}
.chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:6px}
.chips i{font:500 12px/1 var(--sans); font-style:normal; color:var(--ink-2); border:1px solid var(--rule); background:var(--card); border-radius:20px; padding:6px 9px; font-variant-numeric:tabular-nums}
.duo .go{position:absolute; right:18px; bottom:-20px; background:var(--forest); color:#fff; border-radius:8px; padding:0 16px; min-height:44px; display:inline-flex; align-items:center; font:600 13.5px/1 var(--sans); box-shadow:0 6px 18px rgba(45,89,40,.22); transition:transform .15s}
.duo:hover .go{transform:translateY(-1px); background:#244a20}
.duo:active .go{transform:translateY(1px)}
@media(max-width:820px){.duoband{grid-template-columns:1fr; gap:34px}}
@media(max-width:560px){
  .duo{grid-template-columns:1fr}
  .duoimg{aspect-ratio:4/3; border-radius:11px 11px 0 0}
  .duoimg img{object-position:top}
  .duobody{padding:18px 18px 44px}
  .duo .badge{top:12px; left:12px}
}

/* ── product page: pick a date ─────────────────────────────── */
.pv-dates{margin:0 0 16px}
.pv-dates label{display:block; font:600 13px/1.3 var(--sans); color:var(--ink-2); margin:0 0 8px}
.dt{appearance:none; width:100%; text-align:left; font:inherit; color:var(--ink); cursor:pointer; background:var(--card); border:1px solid var(--rule); border-radius:10px; padding:0; margin:0 0 8px;
  display:grid; grid-template-columns:52px minmax(0,1fr) auto; align-items:center; gap:0 12px; overflow:hidden; min-height:60px}
.dt[aria-pressed=true]{border-color:var(--forest); box-shadow:0 0 0 1px var(--forest)}
.dt:disabled{opacity:.55; cursor:default}
.dt .dtd{display:grid; justify-items:center; align-content:center; align-self:stretch; background:var(--paper); border-right:1px solid var(--rule); padding:8px 0}
.dt .dtd i{font:600 10px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--terra-ink); font-style:normal}
.dt .dtd b{font:700 20px/1.1 var(--sans); color:var(--forest); font-variant-numeric:tabular-nums}
.dt.any .dtd b{font-size:14px; text-transform:uppercase; letter-spacing:.06em}
.dt .dtb{display:grid; gap:2px; padding:9px 0}
.dt .dtb b{font:600 14px/1.3 var(--sans); color:var(--ink)}
.dt .dtb span{font-size:12.5px; color:var(--ink-2)}
.dt .dts{font:600 11.5px/1 var(--sans); letter-spacing:.04em; color:var(--forest); padding:0 12px; white-space:nowrap}
.dt .dts.low{color:var(--terra-ink)}
.dt .dts.none{color:var(--ink-3)}

/* ── inner heroes: title and copy left, a real photo right on wide screens ── */
.hero.hero-split .wrap{display:grid; grid-template-columns:minmax(0,1fr) clamp(260px,30vw,440px); gap:clamp(24px,4vw,56px); align-items:center}
.hero-photo{aspect-ratio:5/4; border-radius:12px; overflow:hidden; background:var(--paper)}
.hero-photo img{width:100%; height:100%; object-fit:cover; display:block}
.hero.hero-split{padding:36px 0 30px}
@media(max-width:820px){.hero.hero-split .wrap{grid-template-columns:1fr} .hero-photo{display:none} .hero.hero-split{padding:24px 0 20px}}

/* ── Ask the studio ────────────────────────────────────────────── */
.askfab{position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:85; appearance:none; border:0; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px; background:var(--forest); color:#fff; border-radius:26px; padding:0 18px 0 14px; min-height:48px;
  font:600 14px/1 var(--sans); box-shadow:0 8px 24px rgba(45,89,40,.28)}
.askfab .ic{width:18px; height:18px; color:#fff}
.askfab.on{background:var(--ink-2)}
.askfab:active{transform:translateY(1px)}
.askpanel{position:fixed; right:16px; bottom:calc(76px + env(safe-area-inset-bottom)); z-index:86; width:min(380px, calc(100vw - 32px)); max-height:min(600px, calc(100dvh - 110px));
  background:var(--card); border:1px solid var(--rule); border-radius:16px; box-shadow:0 18px 50px rgba(59,13,2,.16); display:flex; flex-direction:column; overflow:hidden}
.askpanel[hidden]{display:none}
.askhead{display:grid; grid-template-columns:1fr auto; gap:0 10px; padding:14px 14px 12px 18px; border-bottom:1px solid var(--rule); background:var(--paper)}
.askhead b{font:600 15px/1.2 var(--sans); color:var(--forest)}
.askhead span{grid-column:1; font-size:12.5px; color:var(--ink-3); line-height:1.4; margin-top:2px}
.askclose{grid-column:2; grid-row:1/3; appearance:none; border:0; background:none; font-size:26px; line-height:1; color:var(--ink-3); width:44px; height:44px; cursor:pointer; margin:-8px -8px -8px 0}
.asklog{flex:1; overflow-y:auto; padding:14px 14px 6px; display:flex; flex-direction:column; gap:8px; -webkit-overflow-scrolling:touch}
.msg{max-width:88%; padding:10px 13px; border-radius:14px; font-size:14.5px; line-height:1.5; color:var(--ink)}
.msg.bot{background:var(--paper); border-bottom-left-radius:4px; align-self:flex-start}
.msg.you{background:var(--forest); color:#fff; border-bottom-right-radius:4px; align-self:flex-end}
.msg.wait{display:flex; gap:4px; padding:12px 14px}
.msg.wait i{width:6px; height:6px; border-radius:50%; background:var(--ink-3); animation:blink 1.2s infinite}
.msg.wait i:nth-child(2){animation-delay:.2s} .msg.wait i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.25} 40%{opacity:1}}
.msg.handoff{max-width:100%; align-self:stretch; border:1px solid var(--forest); background:var(--card)}
.msg.handoff b{display:block; margin-bottom:8px; color:var(--forest); font:600 14.5px/1.4 var(--sans)}
.msg.handoff input{width:100%; border:1px solid var(--rule); border-radius:8px; padding:11px 12px; font:400 16px/1.3 var(--sans); background:var(--cream); color:var(--ink); margin:0 0 8px}
.msg.handoff .btn{min-height:44px; padding:12px; font-size:14px}
.msg.handoff .err{margin:0 0 8px}
.askchips{display:flex; flex-wrap:wrap; gap:6px; margin:2px 0 4px}
.askchips button{appearance:none; border:1px solid var(--rule); background:var(--card); color:var(--forest); border-radius:20px; padding:0 13px; min-height:40px; font:600 13px/1 var(--sans); cursor:pointer}
.askchips button:hover{border-color:var(--forest)}
.askform{display:grid; grid-template-columns:1fr 44px; gap:8px; padding:10px 12px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid var(--rule); background:var(--card)}
.askform input{width:100%; border:1px solid var(--rule); border-radius:22px; padding:0 14px; min-height:44px; font:400 16px/1 var(--sans); background:var(--cream); color:var(--ink); margin:0}
.askform input:focus{outline:2px solid var(--peri); outline-offset:1px}
.asksend{appearance:none; border:0; background:var(--terra-ink); color:#fff; border-radius:50%; width:44px; height:44px; display:grid; place-items:center; cursor:pointer}
.asksend .ic{width:18px; height:18px; color:#fff}
@media(prefers-reduced-motion:reduce){.msg.wait i{animation:none; opacity:.6}}
/* the product buy bar owns the bottom on phones; the button rides above it */
body:has(.buybar:not([hidden])) .askfab{bottom:calc(84px + env(safe-area-inset-bottom))}
body:has(.buybar:not([hidden])) .askpanel{bottom:calc(144px + env(safe-area-inset-bottom))}
@media(max-width:560px){
  .askfab span{display:none}
  .askfab{padding:0; width:52px; height:52px; justify-content:center; border-radius:50%}
  .askfab .ic{width:22px; height:22px}
  .askpanel{right:0; left:0; bottom:0; width:100%; max-height:min(80dvh, 640px); border-radius:16px 16px 0 0; border-bottom:0}
  body:has(.buybar:not([hidden])) .askpanel{bottom:0}
}

/* ── gift cards at checkout ── */
.giftto{border:1px solid var(--rule); border-radius:10px; padding:12px 12px 2px; margin:0 0 14px; background:var(--paper)}
.giftto label{margin-top:0}
.giftin{border-top:1px solid var(--rule); margin:4px 0 14px; padding-top:10px}
.giftin summary{cursor:pointer; font:600 14px/1.4 var(--sans); color:var(--forest); padding:8px 0; list-style:none}
.giftin summary::-webkit-details-marker{display:none}
.giftin summary::before{content:"+ "; color:var(--terra-ink)}
.giftin[open] summary::before{content:"– "}
.giftrow{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; margin:6px 0 6px}
.giftrow input{margin:0; font:600 16px/1.3 var(--mono); letter-spacing:.06em; text-transform:uppercase}
.giftrow .btn{width:auto; padding:0 16px; min-height:48px; margin:0}
.giftin .fineprint{margin:0 0 6px}

/* a post: the article, and beside it on wide screens a panel that stays in view with what the studio sells */
.post{padding-bottom:70px}
.post-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:28px}
.post-main{padding:0}
.post-main .date{margin:14px 0 10px}
.prose h1.post-title{font:800 clamp(28px,3.6vw,40px)/1.15 var(--sans); color:var(--forest); margin:0 0 26px; letter-spacing:-.02em; text-wrap:balance; max-width:22ch}
.post-main .rte img{border-radius:12px}
.post-aside .stick{background:var(--card); border:1px solid var(--rule); border-radius:14px; padding:22px}
.post-aside h2{font:400 24px/1.15 var(--head-clean); color:var(--forest); margin:0 0 14px; letter-spacing:.02em}
.post-aside .offer{display:grid; gap:4px; padding:14px 0; border-top:1px solid var(--rule)}
.post-aside .offer b{font:700 15px/1.3 var(--sans); color:var(--forest)}
.post-aside .offer span{font-size:14px; line-height:1.5; color:var(--ink-2); margin-bottom:8px}
.post-aside .offer .btn{width:100%}
.post-aside .picks{border-top:1px solid var(--rule); padding-top:14px; display:grid; gap:8px}
.post-aside .picks .ph{font:600 11.5px/1.3 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.post-aside .pick{appearance:none; border:0; background:none; padding:0; display:flex; gap:12px; align-items:center; text-align:left; cursor:pointer; font:inherit; min-height:56px}
.post-aside .pick img{width:56px; height:56px; border-radius:8px; object-fit:cover; flex:0 0 auto}
.post-aside .pick b{display:block; font:600 14px/1.3 var(--sans); color:var(--forest)}
.post-aside .pick i{font:600 13px/1.3 var(--sans); font-style:normal; color:var(--ink-2); font-variant-numeric:tabular-nums}
.post-aside .more{justify-self:start; margin-left:0}
@media(min-width:960px){
  .post-grid{grid-template-columns:minmax(0,1fr) 340px; gap:56px; align-items:stretch}
  .post-aside .stick{position:sticky; top:96px}
}

/* home: the client list gets its own band under the hero, one calm line */
.hero.hero-home .trusted{display:none}
.trustband{border-bottom:1px solid var(--rule); padding:18px 0}
.trustband .wrap{display:flex; align-items:baseline; gap:18px; flex-wrap:wrap}
.trustband .tl{font:600 12px/1.4 var(--sans); color:var(--ink-3); white-space:nowrap}
.trustband ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px 22px}
.trustband li{font:600 14px/1.4 var(--sans); color:var(--forest)}
@media(max-width:640px){.trustband li{font-size:13px} .trustband ul{gap:4px 14px}}

/* a product with no photo yet: the brand pot, centred, never a broken image */
.noimg{display:grid; place-items:center; width:100%; aspect-ratio:1/1; background:var(--paper)}
.noimg .el{width:46%; height:auto; opacity:.85}

/* the classes: one row on desktop, however many there are; on a phone an odd last card spans the row */
@media(min-width:1000px){ .grid.classes{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))} }
@media(max-width:640px){
  .grid.classes > :last-child:nth-child(odd){grid-column:1/-1; display:grid; grid-template-columns:44% minmax(0,1fr); align-items:stretch}
  .grid.classes > :last-child:nth-child(odd) .imgwrap{height:100%; aspect-ratio:auto; min-height:160px}
  .grid.classes > :last-child:nth-child(odd) .imgwrap img{height:100%; object-fit:cover}
}

/* a catalogue page: room between the hero rule, the grid and the footer */
.hero + .wrap > .grid:first-child{margin-top:clamp(20px,3vw,36px); margin-bottom:clamp(40px,6vw,72px)}
.card .imgwrap .noimg{position:absolute; inset:0; aspect-ratio:auto}
.card .imgwrap .noimg img{position:static; inset:auto; width:42%; height:auto; object-fit:contain; opacity:.8}

/* checkout: one way to pay */
.payline{display:grid; gap:2px; border:1px solid var(--forest); background:rgba(45,89,40,.05); border-radius:10px; padding:12px 14px; margin:4px 0 14px}
.payline b{font:700 15px/1.3 var(--sans); color:var(--forest)}
.payline span{font-size:13.5px; color:var(--ink-2)}
/* thank-you: the moment of confirmation */
.ok .checking b::after{content:""; display:inline-block; width:12px; height:12px; margin-left:8px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:smspin .8s linear infinite; vertical-align:-1px}
@keyframes smspin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.ok .checking b::after{animation:none}}
.ok .paidok b{color:var(--forest)}

.bootfail{max-width:440px;border:1px solid var(--rule);background:var(--card);border-radius:14px;padding:22px}
.bootfail b{display:block;font:700 18px/1.3 var(--sans);color:var(--forest);margin-bottom:6px}
.bootfail p{margin:0 0 14px;color:var(--ink-2)}

/* checkout: what you are paying for, restated before payment */
.cosum{border:1px solid var(--rule); background:var(--card); border-radius:12px; padding:12px 14px 4px; margin:0 0 16px}
.cosum .cohd{display:block; font:600 12px/1.3 var(--sans); color:var(--ink-3); margin:0 0 6px}
.cosum ul{list-style:none; margin:0; padding:0}
.cosum li{display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--paper)}
.cosum li b{font:600 14px/1.35 var(--sans); color:var(--forest)} .cosum li i{font-style:normal; color:var(--ink-2); font-size:13px}
.cosum li small{display:block; font-size:12.5px; color:var(--ink-2); margin-top:2px; line-height:1.4}
.cosum li em{font:600 14px var(--sans); font-style:normal; white-space:nowrap; color:var(--ink)}
.cosum .row{margin:0} .cosum .row.tot{border-top:0; padding:10px 0 8px}