:root{
  --paper:#F7F8F3;
  --card:#FFFFFF;
  --ink:#1F2A22;
  --ink-soft:#56645A;
  --line:rgba(31,42,34,.11);
  --line-strong:rgba(31,42,34,.26);
  --rose:#C2447A;
  --pink:#F8D3E1;
  --on-pink:#5E1F3B;
  --green:#46774A;
  --on-green:#FFFFFF;
  --mint:#DDEFE3;
  --apple:#C93A33;
  --st-open:#FBE1EA; --st-open-ink:#98305E;
  --st-move:#FAF0C6; --st-move-ink:#6A520D;
  --st-here:#D9EEF6; --st-here-ink:#22586E;
  --st-done:#DDEFE1; --st-done-ink:#2E6034;
  --wash-o:1;
  --grain:none;
  --chk-a:#D6ECDD; --chk-b:#F6FBF4;
  --pink-a:#FADAE6; --pink-b:#F5C6D7;
  --sky-band:#DDEDF5; --dot:rgba(255,255,255,.9);
  --ging-base:#F2F8EE; --ging-line:rgba(118,178,128,.2);
  --foot-band:#FADAE6;
  --pt-h:44px;
  --pt-hero:#C3E3CE; --pt-pink:#F2B3CE; --pt-ging:#C6DFC9; --pt-sky:#B9DCEB; --pt-paper:#E9EBE1;
  --pt-mask:url("data:image/svg+xml,<svg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%27480%27%20height=%2744%27%20viewBox=%270%200%20480%2044%27>%20<defs><filter%20id=%27fc%27%20x=%270%25%27%20y=%27-40%25%27%20width=%27100%25%27%20height=%27180%25%27><feGaussianBlur%20stdDeviation=%270%200.8%27/></filter></defs>%20<g%20filter=%27url%28%23fc%29%27%20fill=%27%23fff%27><path%20d=%27M0,0%20L0.0,29.57%20L4.0,29.57%20L8.0,29.58%20L12.0,29.59%20L16.0,29.59%20L20.0,29.56%20L24.0,29.49%20L28.0,29.37%20L32.0,29.21%20L36.0,29.0%20L40.0,28.78%20L44.0,28.54%20L48.0,28.33%20L52.0,28.16%20L56.0,28.05%20L60.0,28.0%20L64.0,28.03%20L68.0,28.12%20L72.0,28.26%20L76.0,28.42%20L80.0,28.57%20L84.0,28.67%20L88.0,28.7%20L92.0,28.62%20L96.0,28.43%20L100.0,28.13%20L104.0,27.72%20L108.0,27.24%20L112.0,26.71%20L116.0,26.17%20L120.0,25.68%20L124.0,25.27%20L128.0,24.98%20L132.0,24.82%20L136.0,24.81%20L140.0,24.94%20L144.0,25.18%20L148.0,25.51%20L152.0,25.87%20L156.0,26.23%20L160.0,26.51%20L164.0,26.7%20L168.0,26.74%20L172.0,26.62%20L176.0,26.33%20L180.0,25.88%20L184.0,25.29%20L188.0,24.58%20L192.0,23.8%20L196.0,22.97%20L200.0,22.14%20L204.0,21.33%20L208.0,20.57%20L212.0,19.86%20L216.0,19.23%20L220.0,18.66%20L224.0,18.14%20L228.0,17.67%20L232.0,17.25%20L236.0,16.85%20L240.0,16.5%20L244.0,16.19%20L248.0,15.93%20L252.0,15.74%20L256.0,15.64%20L260.0,15.64%20L264.0,15.76%20L268.0,16.0%20L272.0,16.35%20L276.0,16.82%20L280.0,17.37%20L284.0,18.0%20L288.0,18.67%20L292.0,19.35%20L296.0,20.02%20L300.0,20.66%20L304.0,21.27%20L308.0,21.85%20L312.0,22.4%20L316.0,22.94%20L320.0,23.51%20L324.0,24.12%20L328.0,24.79%20L332.0,25.55%20L336.0,26.4%20L340.0,27.33%20L344.0,28.33%20L348.0,29.37%20L352.0,30.4%20L356.0,31.37%20L360.0,32.25%20L364.0,32.97%20L368.0,33.51%20L372.0,33.85%20L376.0,33.96%20L380.0,33.86%20L384.0,33.57%20L388.0,33.12%20L392.0,32.57%20L396.0,31.96%20L400.0,31.34%20L404.0,30.76%20L408.0,30.26%20L412.0,29.87%20L416.0,29.6%20L420.0,29.45%20L424.0,29.41%20L428.0,29.44%20L432.0,29.54%20L436.0,29.66%20L440.0,29.79%20L444.0,29.88%20L448.0,29.94%20L452.0,29.96%20L456.0,29.94%20L460.0,29.88%20L464.0,29.8%20L468.0,29.72%20L472.0,29.65%20L476.0,29.6%20L480.0,29.57%20L480,0%20Z%27/></g>%20</svg>");
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#141B16; --card:#1D2620; --ink:#EDF2EC; --ink-soft:#A9B9AD;
    --line:rgba(237,242,236,.11); --line-strong:rgba(237,242,236,.28);
    --rose:#F4A7C4; --pink:#4B2536; --on-pink:#F9D6E3; --green:#8DC28B; --on-green:#0F1A11; --mint:#22352A; --apple:#F07A70;
    --st-open:#43222F; --st-open-ink:#F5B5CC; --st-move:#3D3418; --st-move-ink:#EFD98E;
    --st-here:#1B3440; --st-here-ink:#A6D8EA; --st-done:#203725; --st-done-ink:#B3DDB2;
    --wash-o:.28;
    --chk-a:#1C2C22; --chk-b:#17221B; --pink-a:#3A2130; --pink-b:#321B29;
    --sky-band:#16242C; --dot:rgba(255,255,255,.07); --ging-base:#18231C; --ging-line:rgba(141,194,139,.09); --foot-band:#3A2130;
    --pt-hero:#24352A; --pt-pink:#4E2C40; --pt-ging:#24352A; --pt-sky:#22323C; --pt-paper:#26312A;
  }
}
:root[data-theme="dark"]{
  --paper:#141B16; --card:#1D2620; --ink:#EDF2EC; --ink-soft:#A9B9AD;
  --line:rgba(237,242,236,.11); --line-strong:rgba(237,242,236,.28);
  --rose:#F4A7C4; --pink:#4B2536; --on-pink:#F9D6E3; --green:#8DC28B; --on-green:#0F1A11; --mint:#22352A; --apple:#F07A70;
  --st-open:#43222F; --st-open-ink:#F5B5CC; --st-move:#3D3418; --st-move-ink:#EFD98E;
  --st-here:#1B3440; --st-here-ink:#A6D8EA; --st-done:#203725; --st-done-ink:#B3DDB2;
  --wash-o:.28;
  --chk-a:#1C2C22; --chk-b:#17221B; --pink-a:#3A2130; --pink-b:#321B29;
  --sky-band:#16242C; --dot:rgba(255,255,255,.07); --ging-base:#18231C; --ging-line:rgba(141,194,139,.09); --foot-band:#3A2130;
    --pt-hero:#24352A; --pt-pink:#4E2C40; --pt-ging:#24352A; --pt-sky:#22323C; --pt-paper:#26312A;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{
  margin:0; background-color:var(--paper); background-image:var(--grain); color:var(--ink);
  font:400 16.5px/1.6 "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing:antialiased;
}
main{overflow-x:clip}
.wrap{max-width:1160px; margin:0 auto; padding-inline:clamp(16px,4vw,40px)}
.script{font-family:"Imperial Script","Pinyon Script","Snell Roundhand","Apple Chancery",cursive; font-weight:400}
.label{font-size:12.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; line-height:1.4; color:var(--ink-soft)}
h1,h2,h3{text-wrap:balance; margin:0}
p{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--rose); outline-offset:3px; border-radius:6px}

/* ---------- strip + header ---------- */
.preview-strip{background:var(--ink); color:var(--paper); text-align:center; padding:7px 16px; font-size:13px; font-weight:500}
.site-head{position:sticky; top:0; z-index:30; background:color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; gap:8px 24px; flex-wrap:wrap; padding-block:8px}
.logo{display:flex; align-items:center; gap:6px; text-decoration:none; color:var(--rose); font-size:40px; line-height:1}
.logo svg{width:24px; height:24px}
.nav-links{display:flex; gap:2px; flex-wrap:wrap}
.nav-links a{font-size:14.5px; font-weight:500; text-decoration:none; padding:6px 11px; border-radius:999px}
.nav-links a:hover{background:var(--mint)}
.track-btn{margin-left:auto}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font:600 15px/1 "Figtree", system-ui, sans-serif; padding:12px 20px; border-radius:999px; border:0; background:var(--green); color:var(--on-green); text-decoration:none; cursor:pointer; transition:transform .15s ease, filter .15s ease}
.btn:hover{transform:translateY(-1px); filter:brightness(1.05)}
.btn.pink{background:var(--pink); color:var(--on-pink)}
.btn.line{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.btn.sm{padding:9px 15px; font-size:14px}
.brand-link{font-size:14px; font-weight:500; color:var(--ink-soft); text-decoration:underline; text-decoration-color:var(--line-strong); text-underline-offset:3px}
.brand-link:hover{color:var(--rose); text-decoration-color:currentColor}

/* ---------- whimsical bands ---------- */
.band{position:relative; z-index:1}
.band > .wrap{position:relative; z-index:1}
.band-hero{background-color:var(--chk-b); background-image:var(--grain), repeating-conic-gradient(var(--chk-a) 0 25%, var(--chk-b) 0 50%); background-size:auto, 64px 64px; padding-block:34px 64px; --edge:var(--pt-hero)}
.band-paper{background-color:var(--paper); background-image:var(--grain); --edge:var(--pt-paper)}
.band-pink{background-color:var(--pink-a); background-image:var(--grain), repeating-conic-gradient(var(--pink-b) 0 25%, var(--pink-a) 0 50%); background-size:auto, 76px 76px; --edge:var(--pt-pink)}
.band-sky{background-color:var(--sky-band); background-image:var(--grain), radial-gradient(circle, var(--dot) 3px, transparent 3.6px); background-size:auto, 26px 26px; --edge:var(--pt-sky)}
.band-ging{background-color:var(--ging-base); background-image:var(--grain), linear-gradient(90deg, var(--ging-line) 50%, transparent 50%), linear-gradient(var(--ging-line) 50%, transparent 50%); background-size:auto, 36px 36px, 36px 36px; --edge:var(--pt-ging)}
.paint-bottom{z-index:2}
.paint-bottom::after, .paint-top::before{content:""; position:absolute; left:0; right:0; height:var(--pt-h); background-color:var(--edge,var(--pt-pink)); -webkit-mask-image:var(--pt-mask); mask-image:var(--pt-mask); -webkit-mask-size:480px var(--pt-h); mask-size:480px var(--pt-h); -webkit-mask-repeat:repeat-x; mask-repeat:repeat-x; -webkit-mask-position:center top; mask-position:center top; pointer-events:none; z-index:3}
.paint-bottom::after{bottom:calc(var(--pt-h) * -1)}
.paint-top::before{top:calc(var(--pt-h) * -1); transform:scaleY(-1)}
.band-sticker{position:absolute; pointer-events:none; z-index:0}
@media (max-width:640px){ .band-sticker.wide{display:none} }

/* ---------- hero ---------- */
.hero{position:relative; isolation:isolate; border:6px solid var(--card); border-radius:30px; box-shadow:0 30px 60px -44px rgba(20,40,25,.5); overflow:hidden; display:grid; grid-template-columns:minmax(0,600px) 1fr; padding:clamp(20px,5vw,56px); min-height:540px; align-items:center; background:#E2EFD8}
.hero-paint{position:absolute; inset:0; width:100%; height:100%; z-index:-1}
.hero-card{background:rgba(255,255,255,.94); color:#1F2A22; border-radius:22px; padding:clamp(22px,3.5vw,40px); display:grid; gap:14px; box-shadow:0 30px 60px -40px rgba(20,40,25,.55)}
.hero-card .label{color:#56645A}
.hero h1{font-size:clamp(78px,11vw,136px); line-height:.82; color:#C2447A; margin:6px 0 4px}
.hero h1 span{display:block; padding-left:.5em}
.lede{font-size:clamp(18px,1.9vw,21px); line-height:1.45; font-weight:500; max-width:34ch}
.sub{color:#56645A; max-width:44ch}
.cta{display:flex; gap:10px; flex-wrap:wrap; margin-top:6px}
.hero .btn.pink{background:#F8D3E1; color:#5E1F3B}
.hero .btn:not(.pink){background:#46774A; color:#fff}
/* hero brand chips + fine print (v14) */
.brand-chips{display:flex; flex-wrap:wrap; gap:7px; margin-top:2px}
.brand-chips span{font-size:13px; font-weight:600; line-height:1; padding:6px 12px; border-radius:999px; background:#fff; border:1.6px solid #1F2A22; color:#1F2A22}
.brand-chips span.more{background:transparent; border-style:dashed; border-color:#7E8A80; color:#56645A; font-weight:500}
.fineprint{margin:10px 0 0; font-size:13.5px; line-height:1.5; color:#6B7871; max-width:46ch}
.sticker{position:absolute; pointer-events:none}
@media (max-width:820px){
  .hero{grid-template-columns:1fr; padding-top:150px; min-height:0}
  .sticker.wide{display:none}
}
@media (max-width:720px){
  .nav{flex-wrap:wrap; row-gap:2px}
  .nav-links{order:3; width:100%; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-inline:-8px; padding-bottom:2px}
  .nav-links::-webkit-scrollbar{display:none}
  .nav-links a{white-space:nowrap; font-size:14px}
  .logo{font-size:34px}
}

/* ---------- this week ---------- */
.week{margin-top:18px; background:var(--card); border-radius:22px; padding:14px 16px 14px 20px; display:grid; grid-template-columns:auto 1fr auto; gap:12px 24px; align-items:center}
.week-list{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; list-style:none; margin:0; padding:0}
.week-list li{background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:12px 14px; display:grid; gap:6px}
.week-list .nm{font-weight:600; line-height:1.25; font-size:15px}
.week-list .nm small{display:block; font-weight:400; color:var(--ink-soft); font-size:13.5px}
.bar{display:grid; grid-template-columns:repeat(5,1fr); gap:3px}
.bar i{height:4px; border-radius:2px; background:var(--line)}
.bar i.on{background:var(--green)}
@media (max-width:980px){ .week{grid-template-columns:1fr} .week-list{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:480px){ .week-list{grid-template-columns:1fr} }

/* ---------- pills ---------- */
.pill{font-size:12.5px; font-weight:600; padding:4px 10px; border-radius:999px; white-space:nowrap; justify-self:start}
.st-0{background:var(--st-open); color:var(--st-open-ink)}
.st-1,.st-2{background:var(--st-move); color:var(--st-move-ink)}
.st-3{background:var(--st-here); color:var(--st-here-ink)}
.st-4{background:var(--st-done); color:var(--st-done-ink)}

/* ---------- sections ---------- */
.sec{padding-block:92px 96px; scroll-margin-top:54px}
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:14px 40px; flex-wrap:wrap; margin-bottom:28px}
.title-wash{position:relative; isolation:isolate; display:inline-block; padding:10px 18px 4px 6px}
.title-wash canvas{position:absolute; inset:-18px -44px -10px -30px; width:calc(100% + 74px); height:calc(100% + 28px); z-index:-1; opacity:var(--wash-o)}
.sec-head h2{font-size:clamp(58px,8vw,96px); line-height:.9; color:var(--rose)}
.intro{max-width:40ch; color:var(--ink-soft); font-size:17px}
.sub-head{display:flex; align-items:baseline; gap:6px 16px; flex-wrap:wrap; margin:8px 0 16px}
.sub-head h3{font-size:22px; font-weight:700}
.sub-head p{color:var(--ink-soft)}

.chips{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:24px}
.chip{font:500 14.5px/1 "Figtree", system-ui, sans-serif; padding:9px 15px; border-radius:999px; border:0; box-shadow:inset 0 0 0 1.5px var(--line-strong); background:transparent; color:var(--ink); cursor:pointer}
.chip[aria-pressed="true"]{background:var(--green); color:var(--on-green); box-shadow:none}

/* ---------- product cards ---------- */
.card{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:12px; display:grid; align-content:start}
.stock-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); gap:22px}
.open-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr)); gap:18px}
.swatch-wrap{position:relative}
.swatch{display:block; width:100%; max-width:100%; aspect-ratio:4/5; height:auto; border-radius:12px}
.ph{position:absolute; left:10px; top:10px; background:rgba(255,255,255,.9); color:#1F2A22; font-size:12px; font-weight:600; padding:3px 9px; border-radius:999px}
.meta{display:grid; gap:4px; padding:12px 6px 4px}
.row{display:flex; justify-content:space-between; align-items:center; gap:10px}
.left{font-size:13.5px; font-weight:600; color:var(--apple)}
.name{font-size:42px; line-height:1; color:var(--ink); margin-top:2px}
.detail{font-size:15px; color:var(--ink-soft); line-height:1.4}
.price{font-weight:700; font-size:21px; font-variant-numeric:tabular-nums}
.buy{margin-top:10px}
.stock-card[hidden]{display:none}
.open-chip{position:absolute; right:10px; top:10px; font-size:12px; font-weight:600; color:#2E6034; background:#DDEFE1; padding:3px 9px; border-radius:999px}

/* group order */
.group{display:grid; grid-template-columns:260px 1fr; gap:26px; padding:16px; margin-bottom:40px}
.group .swatch{aspect-ratio:4/5}
.group-body{display:grid; gap:12px; align-content:center; padding:6px 8px 6px 0}
.group-body .name{font-size:52px}
.sum{display:flex; flex-wrap:wrap; align-items:stretch; gap:6px; font-variant-numeric:tabular-nums}
.sum div{background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:8px 12px; display:grid; line-height:1.2}
.sum b{font-size:18px}
.sum small{font-size:12.5px; color:var(--ink-soft)}
.sum .op{background:none; border:0; padding:8px 0; align-content:center; color:var(--ink-soft); font-weight:600}
.sum .total{background:var(--pink); color:var(--on-pink); border-color:transparent}
.sum .total small{color:var(--on-pink); opacity:.8}
.facts{display:flex; flex-wrap:wrap; gap:6px 22px; font-size:15px}
.facts b{font-weight:600}
.places{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.apples{display:flex; gap:4px}
.apples svg{width:26px; height:26px}
.apples svg:nth-child(odd){transform:rotate(-8deg)}
.apples svg:nth-child(even){transform:rotate(7deg) translateY(2px)}
.group-price{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px}
.group-price .price{font-size:30px}
.alone{font-size:15px; color:var(--ink-soft); border-left:3px solid var(--mint); padding-left:10px}
.fine{margin-top:18px; font-size:14.5px; color:var(--ink-soft); display:flex; gap:8px; align-items:flex-start; max-width:80ch}
@media (max-width:720px){ .group{grid-template-columns:1fr} .group .swatch{aspect-ratio:3/2} .group-body{padding:0 4px 4px} }

/* ---------- batch updates ---------- */
.finder{display:grid; grid-template-columns:minmax(0,380px) 1fr; gap:10px 28px; align-items:end; padding:20px 22px; background:var(--card); border:1px solid var(--line); border-radius:18px; margin-bottom:16px}
.finder label{display:block; margin-bottom:6px}
.finder input{width:100%; font:600 19px/1.2 "Figtree", system-ui, sans-serif; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); background:var(--paper); border:1.5px solid var(--line-strong); border-radius:12px; padding:11px 14px}
.finder input::placeholder{color:var(--ink-soft); opacity:.55; font-weight:500}
.finder input:focus-visible{outline:none; border-color:var(--green); box-shadow:0 0 0 3px var(--mint)}
.finder-result{font-size:15.5px; color:var(--ink-soft); min-height:2.8em; display:flex; align-items:center}
.finder-result.hit{color:var(--st-done-ink); font-weight:600}
.finder-result.miss{color:var(--apple)}
@media (max-width:760px){ .finder{grid-template-columns:1fr} .finder-result{min-height:0} }

.batches{display:grid; gap:12px}
.batch{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:18px 22px 14px; display:grid; gap:14px}
.batch.done{opacity:.72}
.batch-top{display:flex; justify-content:space-between; align-items:flex-start; gap:8px 20px; flex-wrap:wrap}
.batch-top h3{font-size:21px; font-weight:700; line-height:1.25; margin-top:2px}
.track{display:grid; grid-template-columns:repeat(5,1fr); list-style:none; margin:0; padding:0}
.track li{position:relative; display:grid; justify-items:center; gap:6px; text-align:center}
.track li::after{content:""; position:absolute; top:10px; left:calc(50% + 14px); right:calc(-50% + 14px); height:2px; background:var(--line)}
.track li.done::after{background:var(--green)}
.track li:last-child::after{display:none}
.track .dot{width:22px; height:22px; border-radius:50%; box-shadow:inset 0 0 0 2px var(--line-strong); display:grid; place-items:center}
.track li.done .dot{box-shadow:none; background:var(--green); color:var(--on-green)}
.track li.done .dot svg{width:12px; height:12px}
.track li.now .dot{box-shadow:none; width:28px; height:28px; margin-block:-3px}
.track li.now .dot svg{width:28px; height:28px; animation:bob 2.8s ease-in-out infinite}
.track .lbl{font-size:13px; color:var(--ink-soft)}
.track li.now .lbl{color:var(--ink); font-weight:700}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-3px) rotate(5deg)}}
.batch-note{font-size:15.5px}
.drawer{border-top:1px solid var(--line); padding-top:10px}
.drawer summary{list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px; font-size:14.5px; font-weight:600; color:var(--ink-soft)}
.drawer summary::-webkit-details-marker{display:none}
.drawer .chev{display:inline-block; transition:transform .2s ease}
.drawer[open] .chev{transform:rotate(90deg)}
.stamps{display:flex; flex-wrap:wrap; gap:8px; padding:12px 0 6px}
.stamp{font-weight:600; font-size:14.5px; letter-spacing:.06em; padding:6px 12px; border-radius:10px; background:var(--paper); border:1px solid var(--line); font-variant-numeric:tabular-nums}
.stamp.match{background:#F7E7A1; color:#1F2A22; border-color:#1F2A22}

/* ---------- journal ---------- */
.journal{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr)); gap:20px}
.entry{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:12px 12px 18px; display:grid; gap:8px; align-content:start}
.entry > :not(.photo){margin-inline:8px}
.photo{position:relative; aspect-ratio:3/2; max-width:100%; border-radius:12px; overflow:hidden; background:var(--mint); display:grid; place-items:center; margin-bottom:6px}
.photo canvas{position:absolute; inset:0; width:100%; height:100%; opacity:var(--wash-o)}
.photo .ph-tag{position:relative; background:rgba(255,255,255,.9); color:#1F2A22; font-size:13px; font-weight:600; padding:5px 12px; border-radius:999px}
.entry h3{font-size:20px; font-weight:700; line-height:1.25}
.entry p{font-size:15.5px; line-height:1.5; color:var(--ink-soft)}
.came-in{list-style:none; margin:4px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px}
.came-in li{font-size:13px; font-weight:500; padding:3px 10px; border-radius:999px; background:var(--paper); border:1px solid var(--line)}
.reviews{background:var(--pink); color:var(--on-pink); border-color:transparent}
.reviews p{color:var(--on-pink); opacity:.85}
.shots{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:4px}
.shots div{aspect-ratio:9/12; border-radius:12px; border:1.5px dashed currentColor; opacity:.6; display:grid; place-items:center; font-size:13px; font-weight:600; text-align:center; padding:8px}

/* ---------- how to order ---------- */
.steps{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; list-style:none; margin:0; padding:0}
.steps li{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:20px; display:grid; gap:8px; align-content:start}
.num{width:40px; height:40px}
.steps h3{font-size:18px; font-weight:700}
.steps p{font-size:15.5px; color:var(--ink-soft)}
.contact{margin-top:18px; display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px}
.contact p{color:var(--ink-soft)}
@media (max-width:980px){ .steps{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .steps{grid-template-columns:1fr} }

/* ---------- for you ---------- */
.band-last{padding-block:72px 90px}
.for-you{background:var(--card); border:2px dashed var(--line-strong); border-radius:22px; padding:clamp(18px,3.5vw,34px); display:grid; gap:14px}
.for-you .flag{color:var(--apple)}
.for-you h2{font-size:clamp(22px,3vw,28px); font-weight:700; line-height:1.2}
.for-you > p{max-width:72ch; color:var(--ink-soft)}
.tbl-wrap{overflow-x:auto}
table{border-collapse:collapse; width:100%; min-width:660px}
th{font-size:12.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; text-align:left; color:var(--ink-soft); padding:8px 14px 8px 0; border-bottom:1.5px solid var(--ink)}
td{font-size:15px; line-height:1.45; padding:12px 14px 12px 0; border-bottom:1px solid var(--line); vertical-align:top}
td:first-child{font-weight:600; white-space:nowrap}
td code{font:600 13px/1 "Figtree", system-ui, sans-serif; background:var(--mint); padding:2px 7px; border-radius:6px}
.placeholders{display:flex; flex-wrap:wrap; gap:8px}
.placeholders span{font-size:13.5px; padding:4px 11px; border-radius:999px; box-shadow:inset 0 0 0 1px var(--line-strong)}

footer{position:relative; z-index:1; background-color:var(--foot-band); background-image:var(--grain); padding-block:48px 40px; --edge:var(--pt-pink)}
.foot{display:flex; justify-content:space-between; align-items:flex-end; gap:14px 30px; flex-wrap:wrap}
.foot .script{font-size:56px; line-height:.9; color:var(--rose)}
.foot p{color:var(--ink-soft)}
.foot nav{display:flex; gap:16px}

/* ---------- dialog ---------- */
dialog{border:0; border-radius:22px; background:var(--card); color:var(--ink); padding:24px; width:min(92vw,480px); max-width:92vw; box-shadow:0 40px 80px -40px rgba(0,0,0,.5)}
dialog::backdrop{background:rgba(20,27,22,.5)}
.dlg-head{display:flex; justify-content:space-between; align-items:flex-start; gap:12px}
.dlg-head h3{font-size:21px; font-weight:700; line-height:1.25; margin-top:2px}
.x{background:none; border:0; font-size:26px; line-height:1; color:var(--ink-soft); cursor:pointer; padding:2px 6px}
.dlg-help{margin-top:12px; color:var(--ink-soft)}
dialog textarea{width:100%; margin-top:10px; font:400 15px/1.55 "Figtree", system-ui, sans-serif; color:var(--ink); background:var(--paper); border:1.5px solid var(--line-strong); border-radius:12px; padding:12px 14px; resize:vertical}
.dlg-actions{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.dlg-status{margin-top:10px; font-size:14px; color:var(--st-done-ink); min-height:1.4em}

@media (prefers-reduced-motion: reduce){
  .track li.now .dot svg{animation:none}
  .btn,.drawer .chev{transition:none}
}
@media (max-width:520px){
  .track .lbl{font-size:11.5px}
  .batch{padding:16px 14px 12px}
}

/* ---------- multi-page additions ---------- */
.nav-links a[aria-current="page"]{background:var(--mint); font-weight:700}
.week-item{display:grid; gap:6px; text-decoration:none; color:inherit}
.week-list li{padding:0}
.week-list li a{padding:12px 14px; border-radius:14px}
.week-list li a:hover{background:var(--mint)}
.page-top{padding-block:44px 76px}
.page-top .sec-head{margin-bottom:22px}
.page-top .intro{color:var(--ink)}
.band-tight{padding-block:64px 90px}
.batch.linked{box-shadow:0 0 0 3px var(--rose)}
.cta-band{padding-block:70px 80px}
.cta-row{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px 30px; background:var(--card); border-radius:22px; padding:clamp(20px,3.5vw,34px)}
.cta-row h2{font-size:clamp(44px,6vw,64px); line-height:.95; color:var(--rose)}
.cta-row p{color:var(--ink-soft)}
.links-list{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.links-list li{display:grid; grid-template-columns:minmax(0,180px) 1fr; gap:4px 16px; padding:10px 0; border-bottom:1px solid var(--line)}
.links-list b{font-weight:600}
.links-list code{font:600 14px/1.5 "Figtree", system-ui, sans-serif; background:var(--mint); padding:2px 8px; border-radius:6px; word-break:break-all}
.links-list small{display:block; color:var(--ink-soft); font-size:14px; margin-top:4px}
@media (max-width:600px){ .links-list li{grid-template-columns:1fr} }

/* ---------- logo beside title + flexible pre-orders ---------- */
.title-row{display:flex; align-items:center; gap:clamp(12px,2.2vw,26px); margin:6px 0 4px}
.title-row h1{margin:0}
.logo-slot{flex:none; width:clamp(84px,11vw,138px); aspect-ratio:1; max-width:100%; border-radius:50%; border:2px dashed #C2447A; background:#FFF4F8; color:#98305E; display:grid; place-items:center; text-align:center; font-size:12.5px; font-weight:600; line-height:1.2; padding:10px}
.logo-slot img{width:100%; height:100%; object-fit:contain; border-radius:50%}
.type-tag{font-size:12px; font-weight:600; color:var(--ink-soft); padding:2px 9px; border-radius:999px; box-shadow:inset 0 0 0 1px var(--line-strong)}
.soon-card{grid-column:1 / -1; border:2px dashed var(--line-strong); background:color-mix(in srgb, var(--card) 72%, transparent); display:flex; flex-wrap:wrap; align-items:center; justify-content:center; text-align:center; gap:6px 16px; padding:16px 22px}
.soon-card svg{width:34px; height:34px; flex:none}
.soon-card .script{font-size:40px; line-height:1; color:var(--rose)}
.soon-card p:not(.script){color:var(--ink-soft)}
.open-card[hidden], .soon-card[hidden]{display:none}
.pre-more-wrap{display:flex; justify-content:center; margin-top:18px}
.pre-more-wrap button[hidden]{display:none}
.hero{grid-template-columns:minmax(0,680px) 1fr}
.hero-card{min-width:0}
.title-row h1{font-size:clamp(54px,9vw,118px); min-width:0}
.title-row h1 span{padding-left:.35em}
@media (max-width:820px){ .hero{grid-template-columns:minmax(0,1fr)} }
@media (max-width:520px){ .logo-slot{width:64px; font-size:10.5px; padding:6px} .title-row{gap:10px} }

/* ---------- v6: five pages, collections, versions ---------- */
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.logo{gap:8px}
.logo-mini{width:32px; height:32px; flex:none; border-radius:50%; border:1.5px dashed #C2447A; background:#FFF4F8; color:#98305E; font:700 8px/1 "Figtree", system-ui, sans-serif; letter-spacing:.06em; text-transform:uppercase; display:grid; place-items:center}
.page-top h1{font-size:clamp(58px,8vw,96px); line-height:.9; color:var(--rose)}
.page-top .intro{background:color-mix(in srgb, var(--card) 88%, transparent); padding:10px 14px; border-radius:14px}
.sec-head .btn{align-self:flex-end}
.toolbar{background:var(--card); border-radius:22px; padding:16px 18px; display:grid; gap:12px}
.toolbar .chips{margin:0; align-items:center}
.toolbar .chips[hidden]{display:none}
.toolbar .chips .label{margin-right:4px}
.chip.sm{padding:7px 12px; font-size:13.5px}
.search-row{display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center}
.search-row input{flex:1 1 240px; min-width:0; font:500 16px/1.2 "Figtree", system-ui, sans-serif; color:var(--ink); background:var(--paper); border:1.5px solid var(--line-strong); border-radius:12px; padding:11px 14px}
.search-row input:focus-visible{outline:none; border-color:var(--green); box-shadow:0 0 0 3px var(--mint)}
.count{font-size:14px; font-weight:600; color:var(--ink-soft)}
.brand-group{margin-bottom:48px}
.brand-group:last-child{margin-bottom:0}
.brand-head{display:flex; justify-content:space-between; align-items:baseline; gap:8px 16px; flex-wrap:wrap; padding-bottom:10px; border-bottom:2px solid var(--ink); margin-bottom:22px}
.brand-head h2{font-size:clamp(22px,2.6vw,30px); font-weight:700; letter-spacing:.06em; text-transform:uppercase}
.collection{margin-bottom:32px}
.collection h3{font-size:19px; font-weight:700; margin-bottom:14px; display:flex; align-items:baseline; gap:10px}
.collection h3 small{font-size:14px; font-weight:500; color:var(--ink-soft)}
.stock-card .name{font-size:40px}
.vers{display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 4px}
.ver{font:500 13.5px/1 "Figtree", system-ui, sans-serif; padding:8px 12px; border-radius:999px; border:0; background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--line-strong); cursor:pointer}
.ver[aria-pressed="true"]{background:var(--ink); color:var(--paper); box-shadow:none}
.ver:disabled{opacity:.5; text-decoration:line-through; cursor:not-allowed}
.empty{display:flex; align-items:center; gap:14px; padding:22px}
.empty svg{width:40px; height:40px; flex:none}
.link-pair{display:flex; flex-wrap:wrap; gap:4px 16px}
.tip-card, .note-card{background:var(--card); border-radius:20px; padding:18px 22px; display:flex; gap:16px; align-items:flex-start; max-width:780px}
.note-card{margin-top:28px; border:1px solid var(--line)}
.tip-card svg, .note-card svg{width:40px; height:40px; flex:none}
.tip-card h3, .note-card h3{font-size:19px; font-weight:700; margin-bottom:4px}
.tip-card p, .note-card p{color:var(--ink-soft)}
.week-cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr)); gap:16px}
.week-card{display:grid; gap:10px; align-content:start; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:18px; text-decoration:none; color:inherit; transition:transform .15s ease, border-color .15s ease}
.week-card:hover{transform:translateY(-2px); border-color:var(--line-strong)}
.wk-name{font-size:19px; font-weight:700; line-height:1.25}
.wk-note{font-size:15px; color:var(--ink-soft)}
.wk-more{font-size:14px; font-weight:600; color:var(--rose)}
.steps{grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
.steps a{color:var(--rose); font-weight:600}
.foot nav{flex-wrap:wrap; gap:8px 16px}
@media (prefers-reduced-motion: reduce){ .week-card{transition:none} }

.meta{align-content:start}

/* ---------- real logo ---------- */
.logo-slot, .logo-mini{position:relative; overflow:hidden; display:flex; align-items:flex-end; justify-content:center; padding:0; background:#FDEBF2; border:2px solid #1F2A22; color:transparent}
.logo-slot img, .logo-mini img{width:94%; height:auto; border-radius:0; object-fit:contain; display:block}
.logo-slot{box-shadow:0 10px 24px -14px rgba(31,42,34,.45)}
.logo-mini{width:36px; height:36px; border-width:1.5px}
.logo svg{display:none}

/* ---------- live data states ---------- */
.is-live .preview-strip, .is-live .preview-only{display:none !important}
img.swatch{object-fit:cover; background:var(--mint)}
.photo.has-img{background:var(--mint)}
.photo.has-img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.shots img{width:100%; aspect-ratio:9/12; object-fit:cover; border-radius:12px; display:block}
.empty-note{grid-column:1 / -1; color:var(--ink-soft); background:var(--card); border:1px dashed var(--line-strong); border-radius:16px; padding:16px 18px; margin:0}
.load-error{background:#FBE1EA; color:#7A2447; text-align:center; padding:10px 16px; font-weight:600; font-size:14.5px}

h4{margin:0}

/* ================= compact sizing (v8) ================= */
body{font-size:15.5px}
.wrap{max-width:1080px}
.label{font-size:11.5px}
.intro{font-size:15.5px; max-width:44ch}
.nav{padding-block:6px}
.logo{font-size:32px}
.logo-mini{width:32px; height:32px}
.nav-links a{font-size:13.5px; padding:5px 10px}
.btn{font-size:14px; padding:10px 16px}
.btn.sm{font-size:13px; padding:7px 12px}
.brand-link{font-size:13px}
.chip{font-size:13.5px; padding:7px 12px}
.chip.sm{font-size:12.5px; padding:6px 10px}

/* hero */
.band-hero{padding-block:24px 48px}
.hero{min-height:420px; grid-template-columns:minmax(0,540px) 1fr; padding:clamp(16px,4vw,40px); border-width:5px; border-radius:24px}
.hero-card{padding:clamp(18px,3vw,30px); gap:10px; border-radius:18px}
.title-row{gap:clamp(10px,1.8vw,18px)}
.title-row h1{font-size:clamp(46px,7vw,92px)}
.logo-slot{width:clamp(66px,8.5vw,104px)}
.lede{font-size:clamp(16px,1.6vw,18px)}
.sub{font-size:14.5px}
@media (max-width:820px){ .hero{padding-top:120px} }
@media (max-width:520px){ .logo-slot{width:56px} .title-row h1{font-size:48px} }

/* sections */
.sec{padding-block:64px 70px}
.page-top{padding-block:32px 56px}
.band-tight{padding-block:48px 70px}
.cta-band{padding-block:52px 60px}
.sec-head{margin-bottom:20px}
.sec-head h2{font-size:clamp(42px,5.6vw,66px)}
.page-top h1{font-size:clamp(44px,6vw,70px)}
.title-wash{padding:8px 14px 2px 4px}
.cta-row{padding:clamp(16px,3vw,26px)}
.cta-row h2{font-size:clamp(34px,4.6vw,48px)}
.tip-card, .note-card{padding:14px 18px; gap:12px}
.tip-card svg, .note-card svg{width:32px; height:32px}
.tip-card h3, .note-card h3{font-size:16.5px}
.tip-card p, .note-card p{font-size:14.5px}

/* this week + steps */
.week-cards{grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr)); gap:12px}
.week-card{padding:14px; gap:8px; border-radius:16px}
.wk-name{font-size:16.5px}
.wk-note{font-size:14px}
.steps{grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr)); gap:12px}
.steps li{padding:16px; border-radius:16px}
.num{width:32px; height:32px}
.steps h3{font-size:16px}
.steps p{font-size:14.5px}

/* ready stock */
.toolbar{padding:12px 14px; gap:10px; border-radius:18px}
.search-row input{font-size:15px; padding:9px 12px}
.brand-group{margin-bottom:36px}
.brand-head{margin-bottom:16px; padding-bottom:8px}
.brand-head h2{font-size:clamp(19px,2.2vw,24px)}
.collection{margin-bottom:24px}
.collection h3{font-size:16.5px; margin-bottom:10px}
.stock-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr)); gap:16px}
.card{padding:10px; border-radius:16px}
.swatch{border-radius:10px}
.meta{padding:10px 4px 2px; gap:3px}
.stock-card .name, .name{font-size:30px}
.price{font-size:17px}
.left{font-size:12.5px}
.detail{font-size:13.5px}
.ver{font-size:12.5px; padding:6px 10px}
.buy{margin-top:8px}
.ph{font-size:11px; padding:2px 8px}

/* pre-order */
.group{grid-template-columns:200px 1fr; gap:20px; padding:12px; margin-bottom:0}
.group-body{gap:9px}
.group-body .name{font-size:40px}
.group-price .price{font-size:24px}
.apples svg{width:22px; height:22px}
.open-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr)); gap:14px}
.open-card .name{font-size:30px !important}
.open-chip{font-size:11px; padding:2px 8px}
.type-tag{font-size:11px}
.soon-card{padding:12px 18px}
.soon-card .script{font-size:32px}
.soon-card svg{width:28px; height:28px}
@media (max-width:720px){ .group{grid-template-columns:1fr} }

/* batch updates */
.finder{padding:14px 16px; border-radius:16px}
.finder input{font-size:16px; padding:9px 12px}
.finder-result{font-size:14.5px}
.batch{padding:14px 18px 10px; gap:10px; border-radius:16px}
.batch-top h3{font-size:17px}
.batch-note{font-size:14.5px}
.track .lbl{font-size:12px}
.track .dot{width:20px; height:20px}
.track li::after{top:9px}
.track li.now .dot, .track li.now .dot svg{width:24px; height:24px}
.stamp{font-size:13px; padding:5px 10px}
.drawer summary{font-size:13.5px}

/* journal */
.journal{grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr)); gap:16px}
.entry{padding:10px 10px 14px; border-radius:16px}
.entry h3{font-size:17px}
.entry p{font-size:14.5px}
.came-in li{font-size:12px}

/* footer + for-you */
footer{padding-block:36px 30px}
.foot .script{font-size:42px}
.for-you h2{font-size:clamp(20px,2.6vw,24px)}
td{font-size:14px}

/* ---------- request page ---------- */
.req-grid{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:18px; align-items:start}
.req-form{padding:18px 18px 16px; gap:12px}
.req-title{font-size:19px; font-weight:700}
.field{display:grid; gap:5px; min-width:0}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.field input, .field select{width:100%; min-width:0; font:500 15px/1.2 "Figtree", system-ui, sans-serif; color:var(--ink); background:var(--paper); border:1.5px solid var(--line-strong); border-radius:12px; padding:10px 12px}
.field input:focus-visible, .field select:focus-visible{outline:none; border-color:var(--green); box-shadow:0 0 0 3px var(--mint)}
.field input.invalid{border-color:var(--apple)}
.req{color:var(--apple)}
.opt{text-transform:none; letter-spacing:0; font-weight:500; opacity:.75}
.check{display:flex; align-items:center; gap:10px; font-size:14.5px; cursor:pointer}
.check input{width:18px; height:18px; accent-color:var(--green)}
.req-hint{font-size:13.5px; color:var(--ink-soft); margin:0}
.req-hint.ok{color:var(--st-done-ink); font-weight:600}
.req-side{display:grid; gap:14px; position:sticky; top:72px}
.req-preview{padding:16px; gap:8px}
.req-preview textarea{width:100%; font:400 14px/1.55 "Figtree", system-ui, sans-serif; color:var(--ink); background:var(--paper); border:1.5px solid var(--line-strong); border-radius:12px; padding:10px 12px; resize:vertical}
.req-preview .dlg-actions{margin-top:4px}
.req-photo-note{font-size:13.5px; color:var(--on-pink); background:var(--pink); border-radius:10px; padding:8px 12px; margin:0}
.req-photo-note[hidden]{display:none}
.req-next{padding:16px 18px; gap:8px}
.req-next h3{font-size:16.5px; font-weight:700}
.req-next ol{margin:0; padding-left:20px; display:grid; gap:4px; font-size:14.5px; color:var(--ink-soft)}
.req-small{font-size:13px; color:var(--ink-soft)}
@media (max-width:820px){ .req-grid{grid-template-columns:1fr} .req-side{position:static} }
@media (max-width:460px){ .field-row{grid-template-columns:1fr} }

/* ================= compact sizing, pass 2 (v9) ================= */
body{font-size:15px}
.wrap{max-width:1040px}
.label{font-size:11px}
.intro{font-size:14.5px}
.logo{font-size:29px}
.logo-mini{width:30px; height:30px}
.nav-links a{font-size:13px; padding:5px 9px}
.btn{font-size:13.5px; padding:9px 14px}
.btn.sm{font-size:12.5px; padding:6px 11px}
.chip{font-size:13px; padding:6px 11px}
.brand-link{font-size:12.5px}

.band-hero{padding-block:20px 40px}
.hero{min-height:350px; grid-template-columns:minmax(0,470px) 1fr; padding:clamp(14px,3.4vw,34px); border-width:4px; border-radius:22px}
.hero-card{padding:clamp(16px,2.6vw,24px); gap:8px}
.title-row h1{font-size:clamp(40px,5.8vw,76px)}
.logo-slot{width:clamp(56px,7vw,86px)}
.lede{font-size:clamp(15px,1.4vw,16.5px)}
.sub{font-size:13.5px}
@media (max-width:820px){ .hero{padding-top:100px} }
@media (max-width:520px){ .logo-slot{width:52px} .title-row h1{font-size:44px} }

.sec{padding-block:50px 56px}
.page-top{padding-block:24px 44px}
.band-tight{padding-block:38px 56px}
.cta-band{padding-block:42px 48px}
.sec-head{margin-bottom:16px}
.sec-head h2{font-size:clamp(36px,4.6vw,54px)}
.page-top h1{font-size:clamp(38px,5vw,58px)}
.cta-row h2{font-size:clamp(30px,3.8vw,40px)}
.cta-row p{font-size:14px}
.tip-card h3, .note-card h3{font-size:15.5px}
.tip-card p, .note-card p{font-size:14px}

.week-cards{grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr)); gap:10px}
.week-card{padding:12px; gap:6px}
.wk-name{font-size:15.5px}
.wk-note{font-size:13.5px}
.steps li{padding:14px}
.num{width:28px; height:28px}
.steps h3{font-size:15px}
.steps p{font-size:13.5px}

.toolbar{padding:10px 12px}
.search-row input{font-size:14.5px; padding:8px 11px}
.brand-head h2{font-size:clamp(18px,2vw,22px)}
.collection h3{font-size:15.5px}
.stock-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr)); gap:14px}
.card{padding:9px; border-radius:14px}
.stock-card .name, .name{font-size:26px}
.price{font-size:16px}
.detail{font-size:13px}
.ver{font-size:12px; padding:5px 9px}

.group{grid-template-columns:170px 1fr; gap:18px}
.group-body .name{font-size:34px}
.group-price .price{font-size:21px}
.apples svg{width:19px; height:19px}
.open-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr)); gap:12px}
.open-card .name{font-size:26px !important}
.soon-card .script{font-size:28px}
@media (max-width:720px){ .group{grid-template-columns:1fr} }

.finder input{font-size:15px}
.batch{padding:12px 16px 8px}
.batch-top h3{font-size:16px}
.batch-note{font-size:14px}
.track .lbl{font-size:11.5px}
.journal{grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr)); gap:14px}
.entry h3{font-size:16px}
.entry p{font-size:14px}

.foot .script{font-size:36px}
.req-form{padding:16px}
.req-title{font-size:17px}
.field input, .field select{font-size:14.5px; padding:9px 11px}
.req-preview textarea{font-size:13.5px}
.req-next h3{font-size:15.5px}
.req-next ol{font-size:14px}

.req-preview .dlg-status:empty{display:none}

/* ---------- always open: brands, collections, show all ---------- */
.pre-toolbar{margin-bottom:22px}
.open-groups .brand-group{margin-bottom:30px}
.open-groups .brand-head{border-bottom-color:var(--ink)}
.open-groups .brand-head h3{font-size:clamp(17px,1.9vw,21px); font-weight:700; letter-spacing:.06em; text-transform:uppercase}
.open-groups .brand-head h3 small{font-size:12.5px; font-weight:500; letter-spacing:0; text-transform:none; color:var(--ink-soft); margin-left:6px}
.col-title{font-size:15px; font-weight:700; margin:0 0 10px}
.open-groups .collection{margin-bottom:18px}
.show-brand{margin-top:2px}
.open-groups .soon-card{margin-top:6px}
.open-groups .empty{margin-bottom:16px}

.col-title small{font-size:12.5px; font-weight:500; color:var(--ink-soft); margin-left:4px}
.open-groups .open-grid + .show-brand{margin-top:12px}

/* ---------- photo sliders ---------- */
.has-slides .slides{display:flex; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scroll-behavior:smooth; border-radius:10px; scrollbar-width:none; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain}
.has-slides .slides::-webkit-scrollbar{display:none}
.has-slides .slides:focus-visible{outline:2px solid var(--rose); outline-offset:2px}
.slide{flex:0 0 100%; min-width:0; scroll-snap-align:start; scroll-snap-stop:always}
.has-slides .swatch{border-radius:0; user-select:none; -webkit-user-drag:none}
.slide-nav{position:absolute; top:50%; transform:translateY(-50%); width:30px; height:30px; border-radius:50%; border:0; background:rgba(255,255,255,.94); color:#1F2A22; font:600 20px/1 "Figtree", system-ui, sans-serif; display:grid; place-items:center; padding:0 0 2px; cursor:pointer; box-shadow:0 2px 10px rgba(20,30,22,.2); opacity:0; transition:opacity .15s ease}
.slide-nav.prev{left:8px}
.slide-nav.next{right:8px}
.has-slides:hover .slide-nav, .slide-nav:focus-visible{opacity:1}
.slide-nav:disabled{opacity:0 !important; pointer-events:none}
@media (hover:none){ .slide-nav{display:none} }
.dots{position:absolute; left:50%; bottom:8px; transform:translateX(-50%); display:flex; gap:5px; padding:4px 7px; border-radius:999px; background:rgba(31,42,34,.38); pointer-events:none}
.dots i{width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.5); transition:background .2s}
.dots i.on{background:#fff}
@media (prefers-reduced-motion: reduce){ .has-slides .slides{scroll-behavior:auto} .slide-nav, .dots i{transition:none} }

/* ---------- sliders in journal + reviews ---------- */
.photo.has-slides{display:block}
.photo .slides{position:absolute; inset:0; display:flex; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; overscroll-behavior-x:contain}
.photo .slides::-webkit-scrollbar{display:none}
.photo .slide{position:relative; flex:0 0 100%; min-width:0; height:100%; display:grid; place-items:center; scroll-snap-align:start; scroll-snap-stop:always}
.photo .slide canvas{position:absolute; inset:0; width:100%; height:100%; opacity:var(--wash-o)}
.photo .slide img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; user-select:none}
.photo:hover .slide-nav{opacity:1}
.shots-slider{position:relative; margin-top:4px}
.shots-slider .slides{border-radius:12px}
.shot{display:block; width:100%; aspect-ratio:9/12; object-fit:cover; border-radius:12px; user-select:none}
.has-slides .shot{border-radius:0}
.shot-ph{border:1.5px dashed currentColor; opacity:.6; display:grid; place-items:center; font-size:13px; font-weight:600; background:rgba(255,255,255,.25)}
.has-slides .shot-ph{border-radius:12px}
.shots-slider:hover .slide-nav{opacity:1}
.reviews .shots{display:none}

/* watercolour band edges (v13) — shorter lip on phones */
@media (max-width:640px){ :root{--pt-h:30px} }

/* ================= v15 minimal (18 Sept 2026) =================
   Flat grounds everywhere except the band behind the hero and the footer.
   Band patterns, painted edges, title washes and floating stickers off;
   apples kept on How to Order. Product cards lose their box, two per row
   on phone, plain names. This block must stay LAST in the file. */

/* -- grounds -- */
.band-paper, .band-ging, .band-last{background-color:var(--card); background-image:none}
.band-sky, .band-pink{background-color:var(--paper); background-image:none}
.band-hero{background-image:none; background-color:color-mix(in srgb, var(--chk-a) 60%, var(--chk-b))}
.band-hero.page-top, .band-ging.page-top, .band-pink.page-top{background-color:var(--card); background-image:none}
.page-top .intro{background:transparent; padding:0}
.toolbar{background:transparent; padding:0; border-radius:0}

/* -- painted edges: the footer, and under the home hero -- */
.paint-top::before, .paint-bottom::after{display:none}
footer.paint-top::before{display:block}
main[data-page="home"] .band-hero.paint-bottom::after{display:block}

/* -- floating stickers + title washes off -- */
.band-sticker{display:none}
.title-wash canvas{display:none}
.title-wash{padding:0}

/* -- quieter headings, tighter sections -- */
.sec-head h2{font-size:clamp(32px,4.2vw,48px)}
.page-top h1{font-size:clamp(34px,4.4vw,50px)}
.cta-row h2{font-size:clamp(26px,3.2vw,34px)}
.sec{padding-block:44px 48px}
.page-top{padding-block:24px 34px}
.band-tight{padding-block:34px 48px}
.cta-band{padding-block:36px 42px}

/* -- how to order: apples, and step tiles that read on white -- */
#how{overflow:hidden}
.apl{position:absolute; pointer-events:none; z-index:0}
.apl.a1{width:42px; height:42px; right:6%; top:34px; transform:rotate(9deg)}
.apl.a2{width:26px; height:26px; left:5%; top:62px; transform:rotate(-12deg)}
.apl.a3{width:30px; height:30px; right:13%; bottom:30px; transform:rotate(-6deg); opacity:.55}
.steps li{background:var(--paper); border:1px solid var(--line)}
@media (max-width:640px){ .apl.a2, .apl.a3{display:none} .apl.a1{width:32px; height:32px; right:14px; top:26px} }

/* -- where's my order? (home) -- */
.findbar{background:var(--paper); padding-block:calc(var(--pt-h) + 14px) 22px}
.findin{display:flex; flex-wrap:wrap; gap:12px 28px; align-items:center; justify-content:space-between}
.findin h2{font-size:21px; font-weight:700; margin-top:2px}
.findrow{display:flex; gap:8px; flex:1 1 280px; max-width:440px}
.findrow input{flex:1; min-width:0; font:500 15px/1.2 "Figtree", system-ui, sans-serif; color:var(--ink); background:var(--card); border:1.5px solid var(--line-strong); border-radius:999px; padding:10px 14px}
.findrow input:focus-visible{outline:none; border-color:var(--green); box-shadow:0 0 0 3px var(--mint)}

/* -- product cards: photo first, plain names -- */
.stock-card, .open-card{background:transparent; border:0; padding:0}
.stock-card .swatch-wrap, .open-card .swatch-wrap{border-radius:12px; overflow:hidden}
.stock-card .meta, .open-card .meta{padding:9px 2px 0}
.name, .stock-card .name, .open-card .name{font-family:"Figtree", system-ui, -apple-system, sans-serif !important; font-size:16px !important; font-weight:600; line-height:1.3; letter-spacing:0}
.group-body .name{font-size:22px !important; font-weight:700}
.price{font-size:18px}

/* -- phone: two products per row -- */
@media (max-width:640px){
  .stock-grid, .open-grid{grid-template-columns:1fr 1fr; gap:12px}
  .stock-card .meta, .open-card .meta{padding:8px 1px 0; gap:2px}
  .name, .stock-card .name, .open-card .name{font-size:14.5px !important}
  .price{font-size:16px}
  .detail, .left, .type-tag{font-size:12px}
  .stock-card .buy, .open-card .buy{flex-direction:column; align-items:stretch; gap:6px}
  .stock-card .buy .btn, .open-card .buy .btn{width:100%}
  .vers{gap:4px}
  .ver{font-size:11.5px; padding:4px 8px}
  .stock-card .brand-link, .open-card .link-pair{font-size:11.5px}
}

/* ---- sold out, but still on the page (19 Sept 2026) --------------------
   A print that has gone is proof that stock moves, so it keeps its card and
   its photos. The picture is dimmed, never hidden - the picture is the whole
   point of leaving it up. */
.stock-card.gone .swatch-wrap{position:relative}
.stock-card.gone .swatch-wrap img,
.stock-card.gone .swatch-wrap canvas{filter:saturate(.55) brightness(1.05)}
.gone-tag{
  position:absolute; left:8px; top:8px; z-index:2; pointer-events:none;
  font:600 11px/1 "Figtree", system-ui, sans-serif; letter-spacing:.06em; text-transform:uppercase;
  background:var(--ink); color:var(--paper); padding:6px 9px; border-radius:999px;
}
.left.gone{color:var(--ink-soft)}
.stock-card.gone .price{color:var(--ink-soft)}
@media (max-width:640px){
  .gone-tag{font-size:10px; padding:5px 8px; left:6px; top:6px}
}


/* ================= pre-order: collection cards (19 Sept 2026) =================
   A pre-order card is a COLLECTION; the prints inside it live in a strip that
   scrolls sideways. One row, fixed height, so a 2-print card and a 20-print
   card are exactly the same height and the grid stays square. */
.open-card{min-width:0}
.coll-card .swatch-wrap{margin-bottom:8px}
.print-strip-wrap{min-width:0}
.print-strip-wrap{position:relative}
.print-strip{min-width:0; display:flex; gap:7px; overflow-x:auto; scrollbar-width:none; padding:2px 0 4px; scroll-snap-type:x proximity; overscroll-behavior-x:contain}
.print-strip::-webkit-scrollbar{display:none}
.print-thumb{flex:0 0 50px; width:50px; height:50px; border-radius:10px; overflow:hidden; border:0; padding:0; background:none; cursor:pointer; scroll-snap-align:start; box-shadow:inset 0 0 0 1.5px var(--line-strong); opacity:.75; transition:opacity .12s ease}
.print-thumb img, .print-thumb canvas{width:100%; height:100%; object-fit:cover; display:block}
.print-thumb[aria-pressed="true"]{opacity:1; box-shadow:0 0 0 2.5px var(--green)}
.print-thumb:focus-visible{outline:none; box-shadow:0 0 0 3px var(--mint), inset 0 0 0 1.5px var(--line-strong)}
.print-strip-wrap::after{content:""; position:absolute; right:0; top:0; bottom:6px; width:24px; pointer-events:none; background:linear-gradient(90deg, transparent, var(--paper))}
.coll-count{font:500 12.5px/1 "Figtree", system-ui, sans-serif; color:var(--ink-soft); margin:2px 0}
@media (max-width:640px){ .print-thumb{flex:0 0 44px; width:44px; height:44px} }

/* -- group order collapses to one quiet line while no batch is open -- */
.go-quiet .sec-head{display:none}
.go-quiet{padding-block:26px 28px; background:var(--paper)}
.go-quiet .empty.card{background:transparent; border:0; padding:0; max-width:none}
.tip-slim{margin-top:26px}

/* -- tap a pre-order photo to see the print big, without leaving for the brand -- */
.open-card .swatch-wrap{cursor:zoom-in}
.zoom-hint{position:absolute; right:8px; bottom:8px; width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.92); color:#1F2A22; font:600 13px/26px "Figtree", system-ui, sans-serif; text-align:center; pointer-events:none; box-shadow:0 2px 8px rgba(20,30,22,.18)}
dialog.lightbox{width:auto; max-width:94vw; padding:10px; position:relative}
dialog.lightbox .lb-x{position:absolute; right:16px; top:16px; z-index:4; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.94); color:#1F2A22; box-shadow:0 2px 12px rgba(20,30,22,.28)}
.lb-wrap{position:relative; width:min(88vw,520px)}
.lb-img{display:block; width:100%; max-height:76vh; object-fit:contain; border-radius:12px; background:var(--paper)}
.lb-wrap.has-slides .slides{height:min(76vh,640px)}
.lb-wrap.has-slides .lb-img{height:100%; border-radius:0}
.lb-name{margin-top:8px; text-align:center; font-weight:600}

/* ================= v16 group-order shortcut (21 Sept 2026) ================= */
.go-pill{display:flex; align-items:center; gap:10px; justify-self:stretch; padding:9px 14px 9px 11px; border-radius:16px; background:#FDE7EF; border:1.6px solid #1F2A22; color:#1F2A22; text-decoration:none; transition:background .15s ease}
.go-pill[hidden]{display:none}
.go-pill svg{flex:0 0 22px; width:22px; height:22px}
.go-txt{display:grid; gap:1px; min-width:0; flex:1}
.go-txt b{font:700 14.5px/1.25 "Figtree", system-ui, sans-serif}
.go-txt small{font:500 13px/1.3 "Figtree", system-ui, sans-serif; color:#5E1F3B}
.go-pill .go-arrow{font:700 16px/1 "Figtree", system-ui, sans-serif; margin-left:auto}
.go-pill:hover{background:#FAD3E2}
.go-pill:focus-visible{outline:none; box-shadow:0 0 0 3px var(--mint)}
.pill.soon{background:#FFF1C9; color:#6B4E00}
#group-order{scroll-margin-top:72px}
.page-top + #group-order{padding-top:0}
@media (max-width:640px){
  .group{grid-template-columns:118px 1fr; gap:14px; align-items:start}
  .group .swatch{aspect-ratio:4/5}
  .group-body{padding:2px 0 0}
  .group-body .detail{font-size:14px !important}
  .group-price .price{font-size:20px}
  .group .apples{display:none}
}

/* ===== v17: private order tracker (order no. + last 4 of phone) ===== */
.finder{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto; gap:12px 16px; align-items:end}
.finder-field{min-width:0}
.finder input, .finder-go{height:44px; box-sizing:border-box}
.finder input{padding-top:0; padding-bottom:0}
.finder-go{padding:0 22px; white-space:nowrap}
.finder-go:disabled{opacity:.6; cursor:default; transform:none}
.finder-result{grid-column:1 / -1; min-height:1.6em}
@media (max-width:760px){
  .finder{grid-template-columns:1fr 1fr}
  .finder-go{grid-column:1 / -1; width:100%}
}

/* ===== v18: tap-to-enlarge everywhere, watermark on her own photos, no-save ===== */
.swatch-wrap[data-ph]{cursor:zoom-in}
.slide{position:relative}
.photo.has-img{position:relative}
.wm{position:absolute; left:0; right:0; bottom:14%; z-index:2; text-align:center; pointer-events:none;
  font:600 13px/1 "Figtree", system-ui, sans-serif; letter-spacing:.12em; color:rgba(255,255,255,.62);
  text-shadow:0 1px 3px rgba(20,30,22,.45)}
.lb-wrap .wm{font-size:18px; bottom:10%}
.swatch, .lb-img, .photo img, .shot, .print-thumb img{-webkit-touch-callout:none; -webkit-user-select:none; user-select:none}