/* ============================================================
   NUZZ TYPE. Drawn for this brand, not licensed from anyone.
   Three cuts off one skeleton: a flat footed geometric sans
   whose round forms settle on the baseline rather than
   balancing on a point.
   ============================================================ */
@font-face{
  font-family:"Nuzz Sans";
  src:url("type/NuzzSans-Regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Nuzz Sans";
  src:url("type/NuzzSans-Bold.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
}

/* ============================================================
   NUZZ. Cat & dog. Saturated, soft-formed, alive.
   Layout: full-bleed colour bands, oversized display type,
   soft arcs derived from a curled sleeping animal.
   ============================================================ */

:root{
  --cream:#FFFBF4;
  --cream-2:#FBF0DF;
  --plum:#F7E7D6;
  --plum-deep:#3A2A20;
  --ink:#2E221C;
  --muted:#7A6A5E;
  --persimmon:#D4522B;
  --persimmon-br:#F4703F;
  --pistachio:#7FA55F;
  --pistachio-soft:#DCEBC9;
  --pistachio-ink:#4F6F36;
  --sky:#7FA9C7;
  --on-dark:#2E221C;
  --on-dark-mute:#7A6A5E;
  --line:rgba(46,34,28,.13);
  --line-dark:rgba(46,34,28,.13);
  --card:#FFFFFF;
  --shadow:0 2px 4px rgba(90,60,40,.05),0 12px 30px rgba(90,60,40,.08);
  --shadow-lift:0 6px 12px rgba(90,60,40,.08),0 24px 54px rgba(90,60,40,.15);
  --r-sm:10px;
  --r-md:18px;
  --r-lg:30px;
  --r-pill:999px;
  --f-display:"Nuzz Sans",ui-sans-serif,system-ui,sans-serif;
  --f-body:"Nuzz Sans",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --maxw:1200px;
  color-scheme:light;
}
/* Single committed light look. A shop for people who love animals should
   feel like a sunlit room, never a nightclub, so no dark variant. */

*{box-sizing:border-box}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--f-body);font-size:17.5px;line-height:1.66;letter-spacing:-.002em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}

.shell{
  max-width:var(--maxw);margin-inline:auto;
  padding-left:max(20px,env(safe-area-inset-left,0px));
  padding-right:max(20px,env(safe-area-inset-right,0px));
}
.band{width:100%;position:relative}
.band-cream2{background:var(--cream-2)}
.band-plum{background:var(--plum);color:var(--ink)}
.band-plum .muted,.band-plum .sub{color:var(--muted)}
.band-plum .tool{background:#fff;box-shadow:var(--shadow);border:0}
.band-plum .step{border-color:rgba(46,34,28,.12)}
.band-plum .step .n{background:#fff;color:var(--muted)}
.band-plum .tag{color:var(--persimmon)}
.band-plum .mechsvg .node{fill:#fff}
.band-persimmon{background:var(--persimmon);color:#fff}
.band-persimmon .muted{color:rgba(255,255,255,.82)}
.pad-xl{padding-block:clamp(72px,10vw,140px)}
.pad-lg{padding-block:clamp(52px,7vw,96px)}
.pad-md{padding-block:clamp(36px,5vw,64px)}

/* ---------- type ---------- */
h1,h2,h3,h4{margin:0;font-family:var(--f-display);font-weight:700;text-wrap:balance;letter-spacing:-.012em;line-height:1.04}
.xxl{font-size:clamp(38px,6.4vw,84px)}
.xl{font-size:clamp(28px,4.2vw,54px);line-height:1.06}
.lg{font-size:clamp(23px,2.9vw,37px);line-height:1.08}
.md{font-size:clamp(21px,2.3vw,28px);line-height:1.2;letter-spacing:-.008em}
.sm{font-family:var(--f-body);font-size:19px;font-weight:700;letter-spacing:0;line-height:1.34}
p{margin:0 0 1.1em;max-width:62ch}
.sub{font-size:clamp(18px,2vw,21px);line-height:1.52;color:var(--muted);font-weight:400}
.muted{color:var(--muted)}
.tag{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--f-display);font-size:12.5px;font-weight:700;
  letter-spacing:.10em;text-transform:uppercase;color:var(--persimmon);
  margin-bottom:20px;
}
.tag::before{content:"";width:22px;height:2px;background:currentColor;border-radius:2px}
.band-plum .tag,.band-persimmon .tag{color:var(--pistachio)}
.band-persimmon .tag{color:rgba(255,255,255,.9)}

/* ---------- header ---------- */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:var(--cream);border-bottom:1px solid var(--line)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:41;background:var(--cream)}
.head-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:16px}
.mark{display:inline-flex;align-items:center;text-decoration:none;color:var(--persimmon)}
.mark svg{height:30px;width:auto;flex:none;display:block}
.mark b{font-family:var(--f-display);font-size:28px;font-weight:700;letter-spacing:-.025em}
.nav{display:flex;align-items:center;gap:8px}
.nav a{
  font-weight:700;font-size:15px;color:var(--ink);text-decoration:none;
  padding:9px 15px;border-radius:var(--r-pill);transition:background .18s,color .18s;
}
.nav a:hover,.nav a:focus-visible{background:var(--cream-2)}
.nav a.cartlink{background:var(--plum);color:var(--on-dark)}
.nav a.cartlink:hover{background:var(--persimmon);color:#fff}
@media (max-width:760px){.nav a:not(.cartlink):not(.key){display:none}}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--f-body);font-size:16.5px;font-weight:700;
  padding:16px 30px;border-radius:var(--r-pill);border:2px solid var(--persimmon);
  background:var(--persimmon);color:#fff;text-decoration:none;cursor:pointer;
  position:relative;overflow:hidden;
  transition:transform .2s cubic-bezier(.34,1.3,.64,1),box-shadow .2s,background .2s,border-color .2s;
}
.btn:hover,.btn:focus-visible{transform:translateY(-2px) scale(1.012);box-shadow:var(--shadow-lift)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--ink);background:transparent}
.btn.light{background:#fff;color:var(--persimmon);border-color:#fff}
.band-plum .btn.ghost{color:var(--on-dark);border-color:var(--line-dark)}
.band-plum .btn.ghost:hover{border-color:var(--on-dark)}
.btn .rip{position:absolute;border-radius:50%;pointer-events:none;background:rgba(255,255,255,.35);transform:translate(-50%,-50%) scale(0);animation:rip .5s cubic-bezier(.2,0,0,1) forwards}
.btn.ghost .rip,.btn.light .rip{background:rgba(212,70,42,.2)}
@keyframes rip{to{transform:translate(-50%,-50%) scale(1);opacity:0}}

/* ---------- arc device ---------- */
.arc{display:block;width:100%;height:auto}
.arc-top{margin-bottom:-2px}
.arc-bot{margin-top:-2px}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(28px,5vw,70px);align-items:center}
@media (max-width:900px){.hero{grid-template-columns:minmax(0,1fr)}}
.hero-art{position:relative}
.blob{
  border-radius:150px 30px 150px 30px;
  overflow:hidden;background:var(--cream-2);
  aspect-ratio:1/.92;display:grid;place-items:center;
  box-shadow:var(--shadow-lift);
}
@media (max-width:620px){.blob{border-radius:90px 22px 90px 22px}}
.blob img{width:100%;height:100%;object-fit:cover}
.float-chip{
  position:absolute;background:var(--card);border-radius:var(--r-pill);
  padding:11px 18px;box-shadow:var(--shadow-lift);display:flex;align-items:center;gap:9px;
  font-weight:700;font-size:14px;white-space:nowrap;color:var(--ink);
}
.float-chip i{width:9px;height:9px;border-radius:50%;background:var(--pistachio);flex:none}
.float-chip.c1{top:8%;right:-2%}
.float-chip.c2{bottom:14%;left:-4%}
.float-chip.c3{bottom:2%;right:8%}
@media (max-width:520px){.float-chip.c1{right:0}.float-chip.c2{left:0}}

/* ---------- photo slot ---------- */
.shot{
  border-radius:var(--r-lg);overflow:hidden;background:var(--cream-2);
  position:relative;display:grid;place-items:center;text-align:center;padding:30px;
}
.shot img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.shot-note{display:flex;flex-direction:column;gap:7px;max-width:30ch}
.shot-note b{font-family:var(--f-display);font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--persimmon)}
.shot-note span{font-size:14px;color:var(--muted);line-height:1.5}

/* ---------- grids ---------- */
.grid{display:grid;gap:clamp(16px,2.4vw,26px)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid>*{min-width:0}
@media (max-width:980px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}}

/* ---------- cards ---------- */
.card{
  background:var(--card);border-radius:var(--r-md);padding:28px 26px;
  box-shadow:var(--shadow);display:flex;flex-direction:column;gap:12px;
  transition:transform .22s cubic-bezier(.34,1.3,.64,1),box-shadow .22s;
}
a.card{text-decoration:none;color:inherit}
a.card:hover,a.card:focus-visible{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.card .ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;flex:none}

/* product card */
.pcard{
  background:var(--card);border-radius:var(--r-md);overflow:hidden;
  box-shadow:var(--shadow);display:flex;flex-direction:column;text-decoration:none;color:inherit;
  transition:transform .22s cubic-bezier(.34,1.3,.64,1),box-shadow .22s;
}
.pcard:hover,.pcard:focus-visible{transform:translateY(-5px);box-shadow:var(--shadow-lift)}
.pcard .fig{aspect-ratio:4/3;background:var(--cream-2);position:relative;display:grid;place-items:center;padding:20px;text-align:center}
.pcard .fig img{width:100%;height:100%;object-fit:cover}
.pcard .body{padding:22px 22px 26px;display:flex;flex-direction:column;gap:9px;flex:1}
.pcard h3{font-size:25px}
.pcard .desc{font-size:15px;color:var(--muted);margin:0;flex:1}
.pricerow{display:flex;align-items:baseline;gap:10px;margin-top:4px}
.price{font-family:var(--f-display);font-size:22px;font-weight:700}
.was{font-size:15px;color:var(--muted);text-decoration:line-through}
.pill{
  display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
  font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:6px 12px;border-radius:var(--r-pill);background:var(--pistachio-soft);color:var(--ink);
}
.pill.hot{background:var(--persimmon);color:#fff}
.pill.calm{background:var(--cream-2);color:var(--muted)}

/* spec row, warm, not a mono strip */
.facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:14px}
.fact{
  font-size:12.5px;font-weight:700;padding:6px 11px;border-radius:var(--r-pill);
  background:var(--cream-2);color:var(--muted);
}
.fact.open{background:transparent;border:1px dashed var(--persimmon);color:var(--persimmon)}

/* ---------- interactive tools ---------- */
.tool{background:var(--card);border-radius:var(--r-lg);padding:clamp(24px,3.4vw,40px);box-shadow:var(--shadow)}
.band-plum .tool{background:rgba(255,255,255,.055);box-shadow:none;border:1px solid var(--line-dark)}
.tool-top{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap;margin-bottom:26px}
.readout{font-family:var(--f-display);font-weight:700;font-size:clamp(38px,5.4vw,62px);line-height:.95;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.readout small{font-family:var(--f-body);font-size:.26em;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-left:10px;letter-spacing:.12em}
.tool-label{font-weight:700;font-size:15px;color:var(--muted);display:block;margin-bottom:10px}
.tool-right{text-align:right}
.tool-right .who{font-family:var(--f-display);font-size:clamp(20px,2.6vw,30px);font-weight:700;letter-spacing:-.02em;display:block;line-height:1.1}
.tool-note{font-size:14.5px;color:var(--muted);margin:8px 0 0;max-width:34ch;margin-left:auto}

/* The visible track is 8px. The element is 44px so a thumb can actually
   grab it on a phone; the extra height is transparent. */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;margin:0;cursor:grab;display:block}
input[type=range]:active{cursor:grabbing}
input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:99px;background:var(--cream-2)}
input[type=range]::-moz-range-track{height:8px;border-radius:99px;background:var(--cream-2)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:50%;background:var(--persimmon);margin-top:-11px;border:4px solid var(--card);box-shadow:var(--shadow)}
input[type=range]::-moz-range-thumb{width:30px;height:30px;border-radius:50%;background:var(--persimmon);border:4px solid var(--card);box-shadow:var(--shadow)}
input[type=range]:focus-visible{outline:3px solid var(--persimmon);outline-offset:6px}
.ticks{display:flex;justify-content:space-between;margin-top:14px}
.ticks span{font-size:12.5px;font-weight:700;color:var(--muted)}

.chips{display:flex;gap:10px;flex-wrap:wrap}
.chip{
  font-family:var(--f-body);font-size:15px;font-weight:700;
  padding:12px 22px;border-radius:var(--r-pill);border:2px solid var(--line);
  background:transparent;color:var(--ink);cursor:pointer;transition:all .18s;
}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--persimmon);border-color:var(--persimmon);color:#fff}

/* ---------- steps / mechanism ---------- */
.steps{display:flex;flex-direction:column;gap:4px}
.step{
  display:grid;grid-template-columns:46px minmax(0,1fr);gap:18px;align-items:start;
  padding:18px 0;border-top:1px solid var(--line);opacity:.5;transition:opacity .35s;
}
.step.on{opacity:1}
.step .n{
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--f-display);font-weight:700;font-size:15px;
  background:var(--cream-2);color:var(--muted);transition:all .35s;
}
.step.on .n{background:var(--persimmon);color:#fff}
.step h4{font-family:var(--f-body);font-size:18px;font-weight:700;margin-bottom:4px;letter-spacing:-.01em}
.step p{margin:0;font-size:15px;color:var(--muted)}
.band-plum .step{border-color:var(--line-dark)}
.band-plum .step .n{background:rgba(255,255,255,.1);color:var(--on-dark-mute)}
.mechsvg{width:100%;height:auto;display:block;overflow:visible}
.mechsvg .flow{stroke:var(--persimmon);stroke-width:5;fill:none;stroke-linecap:round}
.mechsvg .node{fill:var(--cream-2);stroke:none;transition:fill .35s}
.mechsvg .node.on{fill:var(--pistachio)}
.band-plum .mechsvg .node{fill:rgba(255,255,255,.12)}

/* ---------- testimonial / proof ---------- */
.quote{background:var(--card);border-radius:var(--r-lg);padding:32px 30px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:16px}
.quote p{font-family:var(--f-display);font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1.3;margin:0}
.who-row{display:flex;align-items:center;gap:12px}
.avatar{width:42px;height:42px;border-radius:50%;background:var(--pistachio-soft);display:grid;place-items:center;font-family:var(--f-display);font-weight:700;color:var(--ink);flex:none}
.who-row small{display:block;color:var(--muted);font-size:13.5px}
.who-row b{font-size:15px}

/* ---------- footer ---------- */
.site-foot{background:var(--plum-deep);color:#FBF2E8}

.site-foot .hd{color:rgba(251,242,232,.6)}
.site-foot a{min-height:26px;display:inline-flex;align-items:center;color:#FBF2E8;text-decoration:none;opacity:.78;font-size:15.5px}
.site-foot a:hover{opacity:1}
.foot-grid{display:grid;grid-template-columns:1.5fr repeat(4,minmax(0,1fr));gap:36px}
@media (max-width:980px){.foot-grid{grid-template-columns:1.4fr repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fcol{display:flex;flex-direction:column;gap:12px}
.fcol .hd{font-family:var(--f-display);font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:rgba(251,242,232,.62)}

:focus-visible{outline:3px solid var(--persimmon);outline-offset:3px}
.skip{position:absolute;left:-9999px;background:var(--persimmon);color:#fff;padding:12px 18px;border-radius:var(--r-sm);z-index:60}
.skip:focus{left:10px;top:10px}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .btn:hover,a.card:hover,.pcard:hover{transform:none}
  .step{opacity:1}
}

/* ============================================================
   Pages beyond the homepage: shop, product, cart, promise, journal.
   Same palette, same two faces, no new voices.
   ============================================================ */

/* page masthead */
.masthead{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,60px);align-items:end}
@media (max-width:860px){.masthead{grid-template-columns:minmax(0,1fr)}}

/* thin reassurance strip */
.strip{display:flex;flex-wrap:wrap;gap:10px}
.strip span{
  display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;
  padding:9px 16px;border-radius:var(--r-pill);background:var(--card);
  box-shadow:var(--shadow);color:var(--muted);
}
.strip span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--pistachio);flex:none}

/* section rule */
.rule{border:0;border-top:1px solid var(--line);margin:0}

/* shop aisles */
.aisle-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:32px}
.aisle-head p{margin:10px 0 0}

/* product gallery */
.gal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.gal .shot:first-child{grid-column:1/-1;aspect-ratio:4/3}
.gal .shot{aspect-ratio:1/1}

/* buy column */
.buy{display:flex;flex-direction:column;gap:18px}
.buyrow{display:flex;gap:12px;flex-wrap:wrap}
.variants{display:flex;gap:10px;flex-wrap:wrap}

/* spec table, warm */
.spec{width:100%;border-collapse:collapse;font-size:15.5px;background:var(--card);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow)}
.spec caption{
  text-align:left;font-family:var(--f-display);font-weight:700;font-size:14px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--persimmon);padding:20px 22px 0;
}
.spec th,.spec td{padding:14px 22px;text-align:left;vertical-align:top;border-top:1px solid var(--line)}
.spec tr:first-child th,.spec tr:first-child td{border-top:0}
.spec th{font-weight:700;width:38%;color:var(--ink)}
.spec td{color:var(--muted)}
.spec .un{color:var(--persimmon);font-weight:700}
@media (max-width:560px){
  .spec th,.spec td{display:block;width:auto;padding:0 20px}
  .spec th{padding-top:14px;border-top:1px solid var(--line)}
  .spec td{padding-bottom:14px;border-top:0}
  .spec tr:first-child th{border-top:0}
}

/* honest objection cards */
.nope{background:var(--card);border-radius:var(--r-md);padding:22px 24px;box-shadow:var(--shadow);border-left:4px solid var(--persimmon)}
.nope h3{font-family:var(--f-body);font-size:18px;font-weight:700;letter-spacing:-.01em}
.nope p{margin:7px 0 0;font-size:15px;color:var(--muted)}

/* journal */
.note-row{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;
  padding:28px 0;border-top:1px solid var(--line);text-decoration:none;color:inherit;
  transition:padding-left .22s cubic-bezier(.34,1.3,.64,1);
}
.note-row:last-of-type{border-bottom:1px solid var(--line)}
.note-row:hover,.note-row:focus-visible{padding-left:10px}
.note-row h3{font-size:clamp(20px,2.4vw,27px);margin-bottom:7px}
.note-row p{margin:0;font-size:15.5px;color:var(--muted);max-width:60ch}
.note-row .kind{
  font-family:var(--f-display);font-size:12px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--persimmon);white-space:nowrap;
}
.prose{max-width:66ch}
.prose h3{font-size:clamp(21px,2.4vw,27px);margin:38px 0 12px}
.prose p{font-size:17.5px}
.prose ul{margin:0 0 1.1em;padding-left:22px;max-width:62ch}
.prose li{margin-bottom:8px}
.prose .pull{
  font-family:var(--f-display);font-size:clamp(21px,2.6vw,29px);font-weight:700;
  letter-spacing:-.025em;line-height:1.2;color:var(--persimmon);
  margin:30px 0;padding-left:20px;border-left:4px solid var(--persimmon);max-width:34ch;
}
.byline{display:flex;gap:14px;flex-wrap:wrap;font-size:14px;color:var(--muted);font-weight:700}

/* cart */
.cart-wrap{display:grid;grid-template-columns:1.5fr .95fr;gap:clamp(24px,3.4vw,44px);align-items:start}
@media (max-width:900px){.cart-wrap{grid-template-columns:minmax(0,1fr)}}
.line{
  display:grid;grid-template-columns:84px minmax(0,1fr) auto;gap:18px;align-items:center;
  padding:20px 0;border-top:1px solid var(--line);
}
.line:last-child{border-bottom:1px solid var(--line)}
.line .thumb{width:84px;height:84px;border-radius:14px;background:var(--cream-2);display:grid;place-items:center;flex:none}
.line .thumb svg{width:34px;height:34px;opacity:.5}
.line h3{font-family:var(--f-body);font-size:18px;font-weight:700;letter-spacing:-.01em}
.line .meta{font-size:14.5px;color:var(--muted);margin:3px 0 0}
.line .right{text-align:right;display:flex;flex-direction:column;gap:8px;align-items:flex-end}

/* a line that repeats, and the card that sets one up */
.rhythm{display:inline-block;margin-left:9px;padding:3px 10px 4px;border-radius:var(--r-pill);
  background:var(--pistachio-soft);color:var(--pistachio-ink);font-size:11.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;vertical-align:2px;white-space:nowrap}
.line.is-rhythm{box-shadow:inset 3px 0 0 var(--pistachio)}
.line.is-rhythm .thumb{background:var(--pistachio-soft)}
.line .meta.save{color:var(--pistachio-ink)}
.refill{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(20px,3vw,28px);display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow)}
.refill h3{font-size:20px;font-weight:700;letter-spacing:-.015em;margin:0}
.refill .why{font-size:15px;color:var(--muted);margin:0}
.refill .chips{margin:2px 0 0}
.refill .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:6px}
.refill .acts .btn{flex:1 1 auto}
.refill .when{font-size:13.5px;color:var(--muted);margin:0}
.refill .when b{color:var(--ink)}
.save-pill{display:inline-block;padding:4px 11px 5px;border-radius:var(--r-pill);
  background:var(--pistachio-soft);color:var(--pistachio-ink);font-size:12px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;align-self:flex-start}
.qty{display:inline-flex;align-items:center;gap:2px;background:var(--cream-2);border-radius:var(--r-pill);padding:4px}
.qty button{
  width:30px;height:30px;border:0;border-radius:50%;background:transparent;cursor:pointer;
  font-size:17px;font-weight:700;color:var(--ink);line-height:1;display:grid;place-items:center;
}
.qty button:hover{background:#fff}
.qty b{min-width:26px;text-align:center;font-size:15px;font-variant-numeric:tabular-nums}
.drop{background:none;border:0;padding:0;font:inherit;font-size:14px;font-weight:700;color:var(--muted);cursor:pointer;text-decoration:underline}
.drop:hover{color:var(--persimmon)}
.totals{background:var(--card);border-radius:var(--r-lg);padding:28px 26px;box-shadow:var(--shadow);position:sticky;top:96px}
.trow{display:flex;justify-content:space-between;gap:16px;padding:9px 0;font-size:16px}
.trow.big{font-family:var(--f-display);font-weight:800;font-size:25px;letter-spacing:-.03em;border-top:1px solid var(--line);margin-top:10px;padding-top:18px}
.trow .muted{font-weight:400}
.ship-bar{height:7px;border-radius:99px;background:var(--cream-2);overflow:hidden;margin:6px 0 10px}
.ship-bar i{display:block;height:100%;background:var(--pistachio);border-radius:99px;transition:width .4s cubic-bezier(.34,1.1,.64,1)}
.empty{text-align:center;padding:clamp(40px,7vw,90px) 0}

/* current page in the nav */
.nav a.on{background:var(--cream-2)}
.nav a.cartlink.on{background:var(--persimmon);color:#fff}
.nav a.key.on{color:var(--persimmon)}

/* a disabled action should look it */
.btn:disabled{opacity:.5;cursor:default;box-shadow:none}
.btn:disabled:hover{transform:none;box-shadow:none}

/* spec plates: drawings, not photographs. They are designed to the frame,
   so they are contained rather than cropped. */
.fig img.plate,.shot img.plate{object-fit:contain;background:var(--cream)}
.plate{width:100%;height:100%;display:block}
.plate-note{
  display:block;margin-top:10px;font-size:13px;color:var(--muted);
}
.plate-note b{color:var(--persimmon);font-weight:700}
.gal3{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.gal3 .shot:first-child{grid-column:1/-1;aspect-ratio:4/3}
.gal3 .shot{aspect-ratio:4/3}
.gal4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.gal4 .shot{aspect-ratio:4/3}
.gal4 .shot:first-child,.gal4 .shot:nth-child(4){grid-column:1/-1}
.note-art{
  display:block;width:100%;border-radius:var(--r-lg);overflow:hidden;
  background:var(--cream);box-shadow:var(--shadow);margin:0 0 30px;
}
.note-art img{width:100%;display:block}


/* ---------- type specimen page ---------- */
.spec-row{border-top:1px solid var(--line);padding:30px 0}
.spec-row:last-child{border-bottom:1px solid var(--line)}
.glyphs{display:flex;flex-wrap:wrap;gap:10px 16px;font-family:var(--f-display);font-size:clamp(26px,3.2vw,40px);line-height:1}
.glyphs span{color:var(--ink)}
.waterfall div{font-family:var(--f-display);line-height:1.04;letter-spacing:-.012em;margin-bottom:10px}
.cutcard{background:var(--card);border-radius:var(--r-md);padding:26px 24px;box-shadow:var(--shadow)}
.cutcard .nm{font-family:var(--f-display);font-size:30px;letter-spacing:-.02em}
.cutcard .sp{font-size:14.5px;color:var(--muted);margin:6px 0 16px}
.cutcard .ex{font-size:21px;line-height:1.35}
.dna{display:grid;gap:14px}
.dna div{background:var(--card);border-radius:var(--r-md);padding:20px 22px;box-shadow:var(--shadow)}
.dna b{display:block;font-family:var(--f-display);font-size:19px;letter-spacing:-.01em;margin-bottom:5px}
.dna p{margin:0;font-size:15px;color:var(--muted)}

/* a correction, printed at the head of the piece it corrects */
.correction{
  background:var(--cream-2);border-left:4px solid var(--persimmon);
  border-radius:var(--r-sm);padding:20px 22px;margin:0 0 30px;
}
.correction b{font-family:var(--f-display);color:var(--persimmon);letter-spacing:-.01em}
.correction p{margin:8px 0 0;font-size:15.5px;color:var(--muted)}

/* a blank that has not been filled in yet, so it cannot ship unnoticed */
mark.gap{
  background:repeating-linear-gradient(45deg,#FFE9DF,#FFE9DF 8px,#FFDCCB 8px,#FFDCCB 16px);
  color:var(--persimmon);font-weight:700;padding:2px 8px;border-radius:4px;
  border:1px dashed var(--persimmon);
}

/* tap targets: a footer link on a phone needs a thumb's worth of room */
@media (max-width:780px){
  .site-foot a{min-height:44px}
  .site-head .mark{min-height:44px;display:inline-flex;align-items:center}
  .fcol{gap:2px}
}

/* the phone nav: a real menu rather than silently dropping two pages */
@media (max-width:760px){
  .nav{gap:4px}
  .nav details.more{position:relative}
  .nav details.more>summary{
    list-style:none;cursor:pointer;font-weight:700;font-size:15px;color:var(--ink);
    padding:9px 14px;border-radius:var(--r-pill);display:inline-flex;align-items:center;
    gap:7px;min-height:44px;
  }
  .nav details.more>summary::-webkit-details-marker{display:none}
  .nav details.more[open]>summary{background:var(--cream-2)}
  .nav details.more>summary::after{
    content:"";width:7px;height:7px;border-right:2.5px solid currentColor;
    border-bottom:2.5px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);
  }
  .nav details.more[open]>summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
  .nav details.more .sheet{
    position:absolute;right:0;top:calc(100% + 8px);z-index:40;min-width:186px;
    background:var(--card);border-radius:var(--r-md);box-shadow:var(--shadow-lift);
    padding:8px;display:flex;flex-direction:column;
  }
  .nav details.more .sheet a{
    display:flex;align-items:center;min-height:46px;padding:0 14px;
    border-radius:var(--r-sm);font-weight:700;font-size:15.5px;
    color:var(--ink);text-decoration:none;
  }
  .nav details.more .sheet a:hover,.nav details.more .sheet a:focus-visible{background:var(--cream-2)}
}
@media (min-width:761px){ .nav details.more{display:none} }

/* a label a screen reader reads and nobody sees */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* the refill benefit tiles: the marker is a short word or figure, not an icon */
.card .ico{
  background:var(--plum);color:var(--persimmon);
  font-family:var(--f-display);font-weight:700;font-size:17px;letter-spacing:-.02em;
}

/* the cart thumbnail is the product, not a logo */
.line .thumb img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
.line a.thumb{display:block;overflow:hidden}

/* A stacked strip is a list of promises, not a row of pills. Pills that wrap
   onto two lines read as broken, and this one sits beside the pay button. */
.strip.stack{flex-direction:column;align-items:stretch;gap:0}
.strip.stack span{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;
  background:none;box-shadow:none;border-radius:0;padding:11px 0;
  font-size:14.5px;font-weight:600;line-height:1.45;color:var(--muted);
  border-top:1px solid var(--line);
}
.strip.stack span:first-child{border-top:0}
.strip.stack span::before{margin-top:.5em}

/* ---------- product page, on a phone ----------
   The photography disclosure matters, but it does not matter before the
   product's name and price. Below 900px it moves under the buy column. */
@media (max-width:900px){
  .cart-wrap{gap:22px}
  .cart-wrap .galwrap{order:1}
  .cart-wrap .buy{order:2}
  .cart-wrap .plate-note{order:3;margin-top:4px}
}

/* a buy action that is always one tap away once the real one scrolls off */
.buybar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:none;gap:14px;align-items:center;
  padding:12px max(16px,env(safe-area-inset-left)) calc(12px + env(safe-area-inset-bottom));
  background:rgba(255,251,244,.94);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);box-shadow:0 -8px 28px rgba(46,34,28,.10);
  transform:translateY(110%);transition:transform .26s cubic-bezier(.34,1.1,.64,1);
}
.buybar.on{transform:translateY(0)}
.buybar .who{min-width:0;flex:1 1 auto}
.buybar .who b{display:block;font-family:var(--f-display);font-size:16px;letter-spacing:-.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.buybar .who span{display:block;font-size:14px;color:var(--muted)}
.buybar .btn{flex:none;padding:13px 22px;min-height:46px}
@media (max-width:900px){ .buybar{display:flex} }
@media (prefers-reduced-motion:reduce){ .buybar{transition:none} }

/* The disclosure is a third grid child now, so the desktop layout has to say
   where it goes: under the gallery, with the buy column spanning both rows. */
@media (min-width:901px){
  .cart-wrap .galwrap{grid-column:1;grid-row:1}
  .cart-wrap .plate-note{grid-column:1;grid-row:2;margin-top:0}
  .cart-wrap .buy{grid-column:2;grid-row:1 / span 2;align-self:start}
}

/* ---------- journal articles -------------------------------------------
   One readable column. The measure is capped in characters rather than
   pixels so it holds at every type size. ------------------------------- */
.prose{max-width:68ch;margin-inline:auto;font-size:18px;line-height:1.72;color:var(--ink)}
.prose>p{margin:0 0 1.15em}
.prose h2{font-family:var(--display);font-size:clamp(25px,3.1vw,33px);line-height:1.18;margin:2em 0 .6em;max-width:24ch}
.prose h3{font-size:20px;font-weight:700;margin:1.7em 0 .45em}
.prose ul,.prose ol{margin:0 0 1.15em;padding-left:1.35em}
.prose li{margin:0 0 .45em}
.prose a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:var(--line-2,#c9c2b6)}
.prose a:hover{text-decoration-color:currentColor}
.prose strong{font-weight:700}
.prose em{font-style:italic}
.prose blockquote{margin:1.6em 0;padding:2px 0 2px 20px;border-left:3px solid var(--persimmon);color:var(--muted)}
.prose table{width:100%;border-collapse:collapse;font-size:16px;margin:1.6em 0}
.prose th,.prose td{padding:10px 14px;text-align:left;vertical-align:top;border-top:1px solid var(--line)}
.prose th{font-weight:700}
.prose>p:first-of-type{font-size:20px;color:var(--muted)}
.art-head{max-width:68ch;margin:0 auto clamp(30px,4vw,48px)}
.art-meta{display:flex;gap:10px;flex-wrap:wrap;align-items:center;font-size:14.5px;color:var(--muted);margin-top:18px}
.art-sources{max-width:68ch;margin:clamp(40px,5vw,64px) auto 0;padding-top:26px;border-top:1px solid var(--line);font-size:15px;color:var(--muted)}
.art-sources h2{font-size:17px;font-weight:700;margin:0 0 12px;color:var(--ink);font-family:inherit}
.art-sources li{margin:0 0 7px;word-break:break-word}
.art-cta{max-width:68ch;margin:clamp(40px,5vw,60px) auto 0;padding:28px 30px;background:var(--cream-2);border-radius:var(--r-md)}
.art-cta h2{font-family:var(--display);font-size:24px;margin:0 0 8px;max-width:26ch}
.art-cta p{margin:0 0 18px;color:var(--muted);font-size:16.5px}
.jrnl-list{max-width:72ch;margin-inline:auto;display:grid;gap:2px}
.jrnl-item{display:block;padding:22px 2px;border-top:1px solid var(--line);text-decoration:none;color:inherit}
.jrnl-item:hover h3{text-decoration:underline;text-underline-offset:3px}
.jrnl-item h3{font-family:var(--display);font-size:clamp(20px,2.4vw,25px);line-height:1.22;margin:0 0 7px;max-width:30ch}
.jrnl-item p{margin:0;color:var(--muted);font-size:16px;line-height:1.5}
.jrnl-item .tag{margin-bottom:10px}

/* A markdown table can be wider than a phone. Let it scroll in its own box
   rather than giving the entire article a horizontal scrollbar. */
.prose .tablewrap{overflow-x:auto;margin:1.6em 0;-webkit-overflow-scrolling:touch}
.prose .tablewrap table{margin:0;min-width:min(100%,34rem)}
.prose .tablewrap th,.prose .tablewrap td{white-space:normal}

/* ---------- the shop shelf ---------------------------------------------
   The grid sits directly under the hero. Every card carries its own price
   and its own Add button, so buying never requires finding another page. */
.shelfbar{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.shelffilter{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.shelffilter .chip{padding:10px 20px;font-size:14.5px}
.shelfgrid .pcard h3{margin:0;font-size:23px;line-height:1.15}
/* The product name is a link, and at 390px the text box is only 24px tall,
   under the 40px target size in WCAG 2.5.8. Pad the hit area out to 42 and
   pull the same amount back off the margin so nothing moves visually. */
.shelfgrid .pcard h3 a{color:inherit;text-decoration:none;display:inline-block;padding-block:9px;margin-block:-9px}
.shelfgrid .pcard h3 a:hover,.shelfgrid .pcard h3 a:focus-visible{text-decoration:underline;text-underline-offset:3px}
.shelfgrid .pcard .fig{aspect-ratio:1/1;padding:0;display:block}
.shelfgrid .pcard .fig img{width:100%;height:100%;object-fit:cover;display:block}
.shelfgrid .pcard .body{gap:8px;padding:20px 20px 22px}
.shelfgrid .pcard .desc{font-size:14.5px;line-height:1.5}
.shelfgrid .pcard .facts{padding-top:10px;margin-top:4px}
.shelfgrid .pcard .pricerow{margin-top:10px}
.shelfgrid .pcard .buyrow{margin-top:12px}
.shelfgrid .pcard .buyrow .btn{flex:1;min-width:0;padding-inline:14px;font-size:15px;text-align:center;justify-content:center}
.shelfgrid .pcard[hidden]{display:none}
@media (max-width:900px){ .shelfgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .shelfgrid{grid-template-columns:1fr} }

/* ---------- journal search and filtering -------------------------------
   The list itself is server rendered. These styles dress the controls
   that filter it; with scripting off the controls simply do nothing and
   every guide stays visible and linked. ------------------------------- */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.jrnl-tools{max-width:72ch;margin:0 auto 10px;display:grid;gap:14px}
.jrnl-search input{
  width:100%;font-family:var(--f-body);font-size:17px;color:var(--ink);
  padding:15px 20px;border-radius:var(--r-pill);border:2px solid var(--line);
  background:var(--card);-webkit-appearance:none;appearance:none;
}
.jrnl-search input::placeholder{color:var(--muted)}
.jrnl-search input:focus-visible{outline:none;border-color:var(--persimmon)}
.jrnl-chips{display:flex;gap:9px;flex-wrap:wrap}
/* 40px is the WCAG 2.5.8 target size. At 14px type these came out at
   36, which is the same miss the shop card titles had. */
.jrnl-chips .chip{padding:11px 17px;font-size:14px;min-height:42px}
.jrnl-count{margin:0;font-size:14.5px}
.jrnl-empty{max-width:72ch;margin:26px auto 0;font-size:16px}
.jrnl-date{margin:8px 0 0;font-size:13.5px;color:var(--muted);letter-spacing:.02em}
.jrnl-item[hidden]{display:none}