/* _shop.css · generated by scratchpad/design-2026/build-shop-css.py from public/design-2026/shop.html · do not hand-edit */
:root{--paper:#FBF9F6;--stone:#E4DED9;--stone-2:#D8D1CB;--forest:#2B301D;--moss:#414042;--ink:#414042;--ink-75:rgba(65,64,66,.78);--ink-55:rgba(65,64,66,.55);--ink-35:rgba(65,64,66,.35);--on-forest:#F1EDE8;--on-forest-55:rgba(241,237,232,.62);--serif:'Lora',Georgia,serif;--sans:'Jost','Helvetica Neue',Arial,sans-serif;--face:'Larken','Lora',Georgia,serif;--script:'Cormorant Garamond',Georgia,serif;--ease:cubic-bezier(.22,.8,.24,1);--edge:clamp(20px,4vw,60px);--bar:76px;--tall:1080/1337;--wide:1337/1080}
*{box-sizing:border-box;margin:0;padding:0}
html{color-scheme:light}
body{background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}img{display:block;max-width:100%}button,input,textarea{font:inherit;color:inherit;background:none;border:0}button{cursor:pointer}
.in{max-width:1400px;margin:0 auto;padding:0 var(--edge)}
.kick{display:block;font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-75);margin-bottom:16px}.forest .kick{color:var(--on-forest-55)}
.stone{background:var(--stone)}.forest{background:var(--forest);color:var(--on-forest)}
h1,.h2,h2{font-family:var(--face);font-weight:400;line-height:1.05;letter-spacing:-.005em}.h2,h2{font-size:min(clamp(32px,3.2vw,46px), 28px + (clamp(32px,3.2vw,46px) - 28px) * 0.6)}
h1 em,h2 em,.h2 em,.dk-q em{font-family:var(--script);font-style:italic;font-weight:500;font-size:1.12em;letter-spacing:0}
.bag{position:relative;display:grid;place-items:center;width:44px;height:44px}.bagi{display:block;width:16px;height:14px;border:1.5px solid currentColor;border-top-width:0;position:relative;margin-top:6px}.bagi::before{content:"";position:absolute;left:2px;right:2px;top:-7px;height:8px;border:1.5px solid currentColor;border-bottom:0;border-radius:6px 6px 0 0}
.bag .n{position:absolute;top:4px;right:2px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--forest);color:var(--paper);font-family:var(--sans);font-size:9px;font-weight:600;display:grid;place-items:center}.bag .n:empty{display:none}
@media(max-width:700px){.flow{display:none}}
.band{padding:clamp(56px,9vh,110px) 0}
.head{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:clamp(26px,4vh,40px)}.head .sub{display:block;margin-top:10px;font-family:var(--serif);font-style:italic;font-size:17px;color:var(--ink)}
.btns{display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-height:50px;padding:0 26px;font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;line-height:1;white-space:nowrap;border:1px solid var(--forest);color:var(--paper);background:var(--forest);transition:background .22s,color .22s,border-color .22s}.btn:hover{background:var(--moss);border-color:var(--moss)}
.fine{font-family:var(--serif);font-style:italic;font-size:14.5px;color:var(--ink-55)}.p{font-family:var(--serif);font-size:17px;color:var(--ink-75);max-width:46ch;margin-bottom:20px}
.top{padding:clamp(48px,8vh,96px) 0 clamp(36px,5vh,56px)}
.top h1{font-size:min(clamp(42px,5.6vw,84px), 28px + (clamp(42px,5.6vw,84px) - 28px) * 0.6);line-height:1;letter-spacing:-.012em}
.top .line{margin-top:18px;font-family:var(--serif);font-style:italic;font-size:clamp(17px,1.5vw,20px);max-width:52ch;color:var(--ink)}
.words{display:flex;flex-wrap:wrap;gap:6px clamp(18px,2.4vw,34px);margin-top:clamp(24px,4vh,36px)}
.words button{font-family:var(--face);font-size:min(clamp(20px,2vw,28px), 28px + (clamp(20px,2vw,28px) - 28px) * 0.6);line-height:1.2;color:var(--ink-35);transition:color .25s}.words button:hover{color:var(--ink-75)}.words .on{color:var(--ink)}
.lead{display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center}
.lead .ph{display:block;aspect-ratio:var(--tall);overflow:hidden;background:var(--stone-2);max-width:460px}.lead .ph img{width:100%;height:100%;object-fit:cover}
.lead h2{font-size:min(clamp(34px,4vw,60px), 28px + (clamp(34px,4vw,60px) - 28px) * 0.6);line-height:1.02;text-wrap:balance}.lead p{margin-top:16px;font-size:clamp(17px,1.4vw,19px);line-height:1.62;color:var(--ink-75);max-width:52ch}
.price{font-family:var(--face);font-size:min(clamp(22px,2vw,28px), 28px + (clamp(22px,2vw,28px) - 28px) * 0.6);color:var(--ink)}.price i{font-family:var(--serif);font-style:italic;font-size:16px;color:var(--ink-55)}.lead .price{margin-top:18px}.lead .btns{margin-top:22px}.lead .fine{margin-top:14px}
@media(max-width:820px){.lead{grid-template-columns:1fr}.lead .ph{max-width:320px}}
.picks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,3vh,40px) clamp(16px,2vw,28px)}.picks.two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px}
.c.book{display:flex;flex-direction:column;min-width:0}.c.book .ph{display:block;aspect-ratio:var(--tall);overflow:hidden;background:var(--stone-2)}.c.book .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}.c.book .ph:hover img{transform:scale(1.035)}
.c.book .tx{display:flex;flex-direction:column;flex:1;padding-top:14px}.c.book .k{display:block;margin-bottom:8px;font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-55)}
.c.book h3{font-family:var(--face);font-weight:400;font-size:clamp(20px,1.6vw,24px);line-height:1.15}.c.book p{margin-top:8px;font-family:var(--serif);font-size:15.5px;line-height:1.55;color:var(--ink-75)}
.c.book .btns{margin-top:auto;padding-top:14px}.c.book .btn{min-height:44px;padding:0 18px}
.soldout{display:inline-flex;align-items:center;font-family:var(--serif);font-style:italic;font-size:15px;color:var(--ink-55);margin-right:6px}
@media(max-width:1100px){.picks{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:820px){.picks{grid-template-columns:1fr 1fr}}@media(max-width:520px){.picks,.picks.two{grid-template-columns:1fr 1fr}}
.split{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(32px,5vw,90px);align-items:center}.split h2{color:#fff;max-width:16ch;text-wrap:balance}.split p{margin-top:14px;max-width:48ch}
@media(max-width:820px){.split{grid-template-columns:1fr}}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,110px)}@media(max-width:820px){.cols{grid-template-columns:1fr}}
.rows .row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px;padding:12px 0;border-top:1px solid var(--stone-2);font-family:var(--serif);font-size:16px}.rows .row span:first-child{font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-55);padding-top:5px}
.rows.small .row{grid-template-columns:110px minmax(0,1fr);font-size:14px;padding:8px 0}
.product{padding:clamp(40px,6vh,72px) 0}.product .in{display:grid;grid-template-columns:minmax(0,.5fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:start}
.product .cover{aspect-ratio:var(--tall);overflow:hidden;background:var(--stone-2);max-width:520px}.product .cover img{width:100%;height:100%;object-fit:cover}
.product h1{font-size:min(clamp(40px,5vw,72px), 28px + (clamp(40px,5vw,72px) - 28px) * 0.6);line-height:1;letter-spacing:-.012em}.product .line{margin-top:16px;font-family:var(--serif);font-size:clamp(17px,1.4vw,19px);line-height:1.62;color:var(--ink-75);max-width:52ch}
.product .price{margin-top:22px}.product .btns{margin-top:20px}.product .fine{margin-top:14px}
.pull{margin-top:clamp(28px,4vh,40px);padding-top:24px;border-top:1px solid var(--stone-2);max-width:46ch}.pull p{font-family:var(--script);font-style:italic;font-size:min(clamp(22px,2vw,28px), 28px + (clamp(22px,2vw,28px) - 28px) * 0.6);line-height:1.3}.pull cite{display:block;margin-top:10px;font-style:normal;font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-55)}
@media(max-width:820px){.product .in{grid-template-columns:1fr}.product .cover{max-width:320px}}
.rows.two{columns:2;column-gap:clamp(28px,4vw,72px)}.rows.two .row{break-inside:avoid;grid-template-columns:70px minmax(0,1fr)}.rows.two .t{font-family:var(--face);font-size:clamp(18px,1.5vw,21px);line-height:1.15}.rows.two .r{grid-column:2;font-style:italic;font-size:14.5px;color:var(--ink-55)}.rows.two .d{font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-55);padding-top:6px}
.rows.two .row:hover .t{color:var(--moss)}
@media(max-width:900px){.rows.two{columns:1}}
.bk-veil{position:fixed;inset:0;z-index:120;background:rgba(65,64,66,0);transition:background .38s var(--ease);pointer-events:none}.bk-veil.on{background:rgba(65,64,66,.4);pointer-events:auto}
.bk{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);background:var(--paper);z-index:121;display:flex;flex-direction:column;box-shadow:-30px 0 80px rgba(65,64,66,.25);transform:translateX(104%);transition:transform .42s var(--ease)}.bk.open{transform:none}
body.bk-lock{overflow:hidden}
.bk-top{display:flex;align-items:center;justify-content:space-between;height:60px;padding:0 16px 0 24px;background:var(--stone);flex:0 0 auto}
.bk-h{font-family:var(--face);font-size:20px}.bk-h i{font-style:normal;font-family:var(--sans);font-size:12px;color:var(--ink-55);margin-left:2px}
.bk-x{width:40px;height:40px;display:grid;place-items:center;font-size:24px;line-height:1;color:var(--ink);background:transparent}.bk-x:hover{background:var(--paper)}
.bk-body{flex:1 1 auto;overflow:auto;padding:24px}
.bk-added{display:flex;align-items:center;gap:12px;font-family:var(--face);font-size:20px;line-height:1.15;margin-bottom:20px;padding:14px 16px;background:var(--stone)}.bk-tick{width:22px;height:22px;flex:0 0 22px;background:var(--forest);position:relative;animation:bk-pop .5s var(--ease)}.bk-tick::after{content:"";position:absolute;left:8px;top:4px;width:5px;height:10px;border:solid var(--paper);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
@keyframes bk-pop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.12)}100%{transform:none;opacity:1}}
.bk-lines{display:flex;flex-direction:column}
.bk-l{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:16px;padding:16px 0;border-top:1px solid var(--stone-2);align-items:start;transition:opacity .2s}.bk-l:first-child{border-top:0;padding-top:0}.bk-l.wait{opacity:.7}
.bk-l img,.bk-noimg{width:72px;aspect-ratio:var(--tall);object-fit:cover;background:var(--stone-2);display:block}
.bk-lb b{display:block;font-family:var(--face);font-weight:400;font-size:19px;line-height:1.15}.bk-lb .k{display:block;margin-top:3px;font-family:var(--sans);font-size:12px;color:var(--ink-55)}
.bk-row{display:flex;align-items:center;gap:14px;margin-top:12px}
.bk .qty{display:inline-flex;align-items:center;border:1px solid var(--ink)}.bk .qty button{width:34px;height:34px;font-size:16px;line-height:1;color:var(--ink);background:transparent}.bk .qty button:hover{background:var(--ink);color:var(--paper)}.bk .qty span{min-width:30px;text-align:center;font-family:var(--sans);font-size:13px;font-weight:500}
.bk .rm{font-family:var(--sans);font-size:12px;color:var(--ink-55);text-decoration:underline;text-underline-offset:3px;background:transparent}.bk .rm:hover{color:var(--ink)}
.bk-p{font-family:var(--face);font-size:18px}
.bk-sum{margin-top:20px;border-top:1px solid var(--ink)}.bk-sum div{display:flex;justify-content:space-between;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--stone-2)}.bk-sum span{font-family:var(--sans);font-size:13px;color:var(--ink-75)}.bk-sum b{font-family:var(--face);font-weight:400;font-size:17px}.bk-sum .pay{border-bottom:0;padding-top:14px}.bk-sum .pay span{color:var(--ink);font-weight:500}.bk-sum .pay b{font-size:26px}
.bk-note{margin-top:16px;font-family:var(--sans);font-size:12.5px;line-height:1.5;color:var(--ink-55)}.bk-note a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.bk-foot{flex:0 0 auto;padding:16px 24px 20px;border-top:1px solid var(--stone-2);display:flex;flex-direction:column;gap:10px}.bk-foot .btn{width:100%}
.bk-empty .bk-q{font-family:var(--face);font-size:28px;line-height:1.08;margin-bottom:12px}.bk-empty .bk-q em{font-family:var(--script);font-style:italic;font-weight:500;font-size:1.12em}
.bk-empty p{color:var(--ink-75)}
.bk-empty .btns{margin-top:18px}
@media(prefers-reduced-motion:reduce){.bk,.bk-veil,.bk-tick{transition:none;animation:none}}
.order{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:clamp(32px,5vw,80px);align-items:start}
.ol{display:grid;grid-template-columns:80px minmax(0,1fr) auto;gap:6px 18px;align-items:center;padding:18px 0;border-top:1px solid var(--stone-2)}.ol .qty,.ol .rm{grid-column:2;grid-row:2;justify-self:start}.ol .rm{grid-column:3;justify-self:end}.ol img{width:80px;aspect-ratio:var(--tall);object-fit:cover;background:var(--stone-2)}
.olb .k{display:block;font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-55);margin-bottom:4px}.olb b{display:block;font-family:var(--face);font-weight:400;font-size:22px;line-height:1.15}.olb a{font-family:var(--serif);font-style:italic;font-size:14px;color:var(--ink-55);text-decoration:underline;text-underline-offset:3px}
.ol .qty{margin:0}.olp{font-family:var(--face);font-size:22px;min-width:60px;text-align:right}.ol .rm{font-family:var(--serif);font-style:italic;font-size:14px;color:var(--ink-55);text-decoration:underline;text-underline-offset:3px}
.gift{display:flex;gap:12px;align-items:flex-start;padding:18px 0 8px;border-top:1px solid var(--stone-2);font-family:var(--serif);font-size:16px}.gift input{width:18px;height:18px;margin-top:4px;accent-color:var(--forest)}
.giftnote{width:100%;border:1px solid var(--stone-2);background:#fff;padding:10px 12px;font-family:var(--serif);font-size:16px;resize:vertical}
.sum{position:sticky;top:calc(var(--bar) + 24px);border:1px solid var(--stone-2);padding:22px}.sum .row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--stone-2);font-family:var(--serif);font-size:16px}.sum .row.total{border-bottom:0;font-family:var(--face);font-size:24px;padding-top:16px}
.sum .btns{margin-top:16px;flex-direction:column}.sum .btn{width:100%}.sum .fine{margin-top:14px}.sum .rows.small{margin-top:16px}
@media(max-width:900px){.order{grid-template-columns:1fr}.sum{position:static}.ol{grid-template-columns:64px minmax(0,1fr) auto}}
.olines .ol:first-child{border-top:0}
@media(max-width:560px){.btns .btn{flex:1 1 100%}.bk-foot .btn{flex:1 1 100%}}
/* the bag in the bar, on the shop pages only (SiteBar with bag) */
header.site .right{position:absolute;right:calc(var(--edge) - 10px);display:flex;align-items:center;gap:6px}
header.site .right .menu-word{position:static;right:auto}
.bag{position:relative;display:grid;place-items:center;width:44px;height:44px;color:inherit}.bagi{display:block;width:16px;height:14px;border:1.5px solid currentColor;border-top-width:0;position:relative;margin-top:6px}.bagi::before{content:"";position:absolute;left:2px;right:2px;top:-7px;height:8px;border:1.5px solid currentColor;border-bottom:0;border-radius:6px 6px 0 0}
.bag .n{position:absolute;top:4px;right:2px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--forest);color:var(--paper);font-family:var(--sans);font-size:9px;font-weight:600;display:grid;place-items:center}.bag .n:empty{display:none}
/* the drawer on the site: fixed, and shut until opened */
.bk{position:fixed;z-index:121}
.bk-veil{position:fixed;inset:0;z-index:120;background:rgba(65,64,66,.35)}
.status{margin:0 0 20px;padding:14px 18px;border:1px solid var(--stone-2);font-family:var(--serif);font-style:italic;font-size:15px;color:var(--ink-75)}
.bk-empty{padding-top:8px}
/* the book cards' words in ink (8 October 2026): _shared.css colours every .c white for the cards that sit on a photograph,
   and these share the class name, so the guidebooks' and the calendar's titles came out white on grey */
.c.book{color:var(--ink)}