/* The standing pages, September 2026, from standing.html.

   About, contact, list your place, stockists, privacy, terms, the basket and
   the page that is not there. One shell - a stone top with the title and the
   lede - and then whatever the page is.

   The chrome is _shared.css's. Generated by scratchpad/design-2026/
   build-standing-2026.py - change the builder, not this file.           */

: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;--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}
*{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}
:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
.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}
.stone{background:var(--stone)}
.forest{background:var(--forest);color:var(--on-forest)}
.h2{font-family:var(--face);font-weight:400;font-size:min(clamp(28px,2.8vw,40px), 28px + (clamp(28px,2.8vw,40px) - 28px) * 0.6);line-height:1.05;letter-spacing:-.005em}
.h2 em,h1 em{font-family:var(--script);font-style:italic;font-weight:500;font-size:1.12em;letter-spacing:0}
header.site .in{position:relative;display:flex;align-items:center;justify-content:center;height:var(--bar)}
header.site .mk{position:absolute;left:var(--edge);display:flex;align-items:center}
header.site .mk img{display:block;height:34px;width:auto}
.flow a{position:relative;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--ink);padding:8px 0;transition:color .3s}
.flow a:hover{color:var(--moss)}
.flow a i{position:absolute;left:0;top:100%;white-space:nowrap;font-family:var(--serif);font-style:italic;font-size:14.5px;letter-spacing:0;text-transform:none;font-weight:400;color:var(--ink-75);opacity:0;transform:translateY(-4px);transition:opacity .3s,transform .4s var(--ease);pointer-events:none}
.flow a:hover i{opacity:1;transform:none}
.lines{display:block;width:24px;height:1.5px;background:currentColor;position:relative}
.lines::before,.lines::after{content:"";position:absolute;left:0;width:100%;height:1.5px;background:currentColor;top:-7px}
.lines::after{top:7px}
/* the top: kicker, title, lede, on stone */
.top{padding:clamp(44px,7vh,80px) 0 clamp(40px,6vh,64px)}
.top h1{font-family:var(--face);font-weight:400;font-size:min(clamp(38px,4.6vw,66px), 28px + (clamp(38px,4.6vw,66px) - 28px) * 0.6);line-height:1;letter-spacing:-.012em;max-width:16ch;text-wrap:balance}
.top .lede{margin-top:18px;font-family:var(--serif);font-style:italic;font-size:clamp(17px,1.4vw,20px);line-height:1.5;max-width:56ch;color:var(--ink-75)}
.band{padding:clamp(56px,9vh,100px) 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;margin-top:24px}
.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)}
.btn.quiet{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.quiet:hover{background:var(--ink);color:var(--paper)}
.c{display:block;position:relative;aspect-ratio:var(--tall);overflow:hidden;background:var(--stone-2);color:#fff}
.c img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}
.c:hover img{transform:scale(1.035)}
.c .sh{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.6) 0,rgba(0,0,0,.16) 44%,rgba(0,0,0,0) 64%);pointer-events:none}
.c .t{position:absolute;left:22px;right:22px;bottom:22px}
.c .k{display:block;margin-bottom:10px;font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.88)}
.c h3{font-family:var(--face);font-weight:400;font-size:min(clamp(24px,2.3vw,32px), 28px + (clamp(24px,2.3vw,32px) - 28px) * 0.6);line-height:1.06}
.c .w{display:block;margin-top:8px;font-family:var(--serif);font-style:italic;font-size:15.5px;line-height:1.45;color:rgba(255,255,255,.92);max-width:30ch}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,110px);align-items:start}
.say{margin-top:18px;font-family:var(--serif);font-size:clamp(17px,1.4vw,19px);line-height:1.62;max-width:48ch;text-wrap:pretty}
.say a,.fine a,.row p a{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--ink-35);color:var(--ink)}
.fine{margin-top:22px;font-family:var(--serif);font-size:15.5px;line-height:1.6;color:var(--ink-75)}
/* the writers drift */
.faces{display:flex;overflow:hidden;margin:0 calc(-1*var(--edge));padding:4px 0;mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent)}
.track{display:flex;flex:0 0 auto;gap:clamp(14px,1.8vw,26px);padding-right:clamp(14px,1.8vw,26px);animation:drift-x 70s linear infinite}
.faces:hover .track{animation-play-state:paused}
.face{flex:0 0 auto;width:clamp(96px,9vw,132px);text-align:center}
.face img{width:100%;aspect-ratio:1;object-fit:cover;background:var(--stone-2);filter:saturate(.85)}
.face span{display:block;margin-top:12px;font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-75)}
/* rows with forest squares */
.rows{display:flex;flex-direction:column;gap:22px}
.row{display:grid;grid-template-columns:46px minmax(0,1fr);gap:18px;align-items:start}
.row .n{width:46px;height:46px;display:grid;place-items:center;background:var(--forest);color:var(--paper);font-family:var(--face);font-size:17px}
.row h3{font-family:var(--face);font-weight:400;font-size:min(clamp(20px,1.8vw,24px), 28px + (clamp(20px,1.8vw,24px) - 28px) * 0.6);line-height:1.12}
.row p{margin-top:6px;font-family:var(--serif);font-size:16px;line-height:1.6;color:var(--ink-75)}
/* forms */
.form{max-width:30rem}
.form .h2{margin-bottom:24px}
label{display:block;margin-bottom:16px}
label span{display:block;font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-75);margin-bottom:8px}
input,textarea{width:100%;padding:0 16px;background:var(--stone);color:var(--ink);font-family:var(--serif);font-size:17px;transition:background .2s}
input{height:52px}
textarea{padding:14px 16px;resize:vertical;line-height:1.5}
input:focus,textarea:focus{background:var(--stone-2);outline:none}
input::placeholder,textarea::placeholder{color:var(--ink-35)}
/* stockists */
.towns{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.town h3{font-family:var(--face);font-weight:400;font-size:min(clamp(22px,2vw,28px), 28px + (clamp(22px,2vw,28px) - 28px) * 0.6);line-height:1.1}
.town p{margin-top:8px;font-family:var(--serif);font-size:16px;color:var(--ink-75)}
.cov{display:block;position:relative;aspect-ratio:var(--tall);max-width:320px;overflow:hidden;background:var(--stone-2)}
.cov img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* the legal reading column */
.reading{max-width:40rem}
.reading h2{font-family:var(--face);font-weight:400;font-size:min(clamp(26px,2.4vw,32px), 28px + (clamp(26px,2.4vw,32px) - 28px) * 0.6);line-height:1.12;margin:clamp(36px,5vh,52px) 0 14px}
.reading h2:first-child{margin-top:0}
.reading p{font-family:var(--serif);font-size:clamp(17px,1.4vw,19px);line-height:1.7;text-align:left;hyphens:auto;margin-top:14px}
/* the basket */
.items{display:flex;flex-direction:column;gap:22px}
.lineitem{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:20px;align-items:center}
.lineitem .thumb{display:block;aspect-ratio:var(--tall);overflow:hidden;background:var(--stone-2)}
.lineitem .thumb img{width:100%;height:100%;object-fit:cover}
.lineitem h3{font-family:var(--face);font-weight:400;font-size:min(clamp(20px,1.8vw,24px), 28px + (clamp(20px,1.8vw,24px) - 28px) * 0.6);line-height:1.12}
.lineitem p{margin-top:4px;font-family:var(--serif);font-style:italic;font-size:15.5px;color:var(--ink-75)}
.lineitem b{font-family:var(--face);font-weight:400;font-size:22px}
.qty{display:inline-flex;align-items:center;gap:12px;margin-top:12px;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.2em}
.qty button{width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--ink);font-size:16px}
.qty button:hover{background:var(--ink);color:var(--paper)}
.sum{max-width:24rem;justify-self:end;width:100%}
.srow{display:flex;justify-content:space-between;padding:12px 0;font-family:var(--serif);font-size:17px;color:var(--ink-75)}
.srow b{font-weight:400;color:var(--ink)}
.srow.total{font-family:var(--face);font-size:24px;color:var(--ink);margin-top:8px}
.sum .btn{width:100%;margin-top:18px}
.sum .btn.quiet{margin-top:8px}
.top .lede a{font-style:normal;color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--ink-35)}
/* contact (15 October 2026, redrawn the same afternoon on /design-2026/contact-2/, W1 "the open door"): a photograph across the top with the title and the address on it, the six as photographs, the answers and the form on oat once one is picked, every question on stone. New names cu-; the questions keep region-faqs.tsx's qa- names */
.cu{--cu-hero:60vh;--cu-veil:.45;--cu-h1:5.6vw;--cu-across:var(--cu-desk,6);--cu-tile:4/5;--cu-tgap:16px;--cu-name:19px;--cu-ans:22px;--cu-q:18px;--cu-qgap:12px;--cu-groups:56px}
.cu-hero{position:relative;display:flex;align-items:center;min-height:min(var(--cu-hero),680px);background:var(--forest);overflow:hidden;color:var(--shell);text-align:center}
.cu-hero > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.cu-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 62% 64% at 50% 50%,rgba(16,14,12,calc(var(--cu-veil) + .2)) 0%,rgba(16,14,12,var(--cu-veil)) 58%,rgba(16,14,12,calc(var(--cu-veil) - .12)) 100%)}
.cu-hero > .in{position:relative;z-index:2;width:100%;padding-top:56px;padding-bottom:76px}
.cu-hero .kick{color:rgba(249,245,238,.8);margin-bottom:20px}
.cu-hero h1{margin:0 auto;font-family:var(--face);font-weight:400;font-size:min(clamp(44px,var(--cu-h1),110px), 28px + (clamp(44px,var(--cu-h1),110px) - 28px) * 0.6);line-height:1.02;letter-spacing:-.016em;color:var(--shell);text-shadow:0 2px 30px rgba(0,0,0,.3)}
.cu-line{margin:24px auto 0;max-width:30em;font-family:var(--serif);font-size:clamp(18px,1.4vw,22px);line-height:1.55;color:var(--shell);text-wrap:balance}
.cu-line a{color:var(--shell);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:rgba(249,245,238,.65);transition:text-decoration-color .3s var(--ease)}
.cu-line a:hover{text-decoration-color:var(--shell)}
.cu-foot{position:absolute;z-index:2;left:0;right:0;bottom:24px;text-align:left}
.cu-cap{font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(249,245,238,.85)}
.cu-h{margin-bottom:clamp(24px,3.4vh,36px)}
.cu-tiles{display:grid;grid-template-columns:repeat(var(--cu-across),minmax(0,1fr));gap:28px var(--cu-tgap);align-items:start}
.cu-tile{display:block;width:100%;padding:0;text-align:left;color:var(--ink);cursor:pointer}
.cu-ph{display:block;overflow:hidden;background:var(--stone)}
.cu-ph img{display:block;width:100%;aspect-ratio:var(--cu-tile);object-fit:cover;transition:transform 1.1s var(--ease),opacity .45s var(--ease)}
.cu-tile b{display:block;margin-top:14px;font-family:var(--face);font-weight:400;font-size:var(--cu-name);line-height:1.22;letter-spacing:-.006em;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:7px;text-decoration-color:transparent;transition:text-decoration-color .3s var(--ease)}
.cu-tile:hover .cu-ph img{transform:scale(1.035)}
.cu-tile:hover b{text-decoration-color:var(--ink-35)}
.cu-tile.on b{text-decoration-color:var(--bracken)}
.cu-tiles.has .cu-tile:not(.on) .cu-ph img{opacity:.68}
.cu-tiles.has .cu-tile:not(.on):hover .cu-ph img{opacity:1}
.band.cu-room:not(.stone):not(.forest){background:var(--oat)}
.cu-room{scroll-margin-top:var(--bar)}
.cu-ans + .cu-ans{margin-top:30px}
.cu-ans h3{font-family:var(--face);font-weight:400;font-size:var(--cu-ans);line-height:1.2;letter-spacing:-.008em}
.cu-a{margin-top:8px;font-family:var(--serif);font-size:17px;line-height:1.65;color:var(--ink-75);max-width:52ch}
.cu-a p + p{margin-top:.8em}
.cu-a a,.cu-more,.cu-again{color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--ink-35)}
.cu-more{display:inline-block;margin-top:30px;font-family:var(--serif);font-size:16px}
.cu-done h3{font-family:var(--face);font-weight:400;font-size:min(clamp(28px,2.6vw,36px), 28px + (clamp(28px,2.6vw,36px) - 28px) * 0.6);line-height:1.1;letter-spacing:-.01em}
.cu-done p{margin-top:14px;font-family:var(--serif);font-size:18px;line-height:1.6;max-width:40ch}
.cu-again{display:inline-block;margin-top:22px;padding:0;background:none;border:0;font-family:var(--serif);font-size:16px;cursor:pointer}
.cu-faq .h2{margin-bottom:clamp(28px,4vh,44px)}
.cu-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,110px);align-items:start;scroll-margin-top:calc(var(--bar) + 24px)}
.cu-g + .cu-g{margin-top:var(--cu-groups)}
.cu-g h3{font-family:var(--face);font-weight:400;font-size:min(clamp(22px,2vw,28px), 28px + (clamp(22px,2vw,28px) - 28px) * 0.6);line-height:1.12;padding-top:var(--cu-qgap)}
.qa-q{width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:var(--cu-qgap) 0;border:0;background:transparent;text-align:left;cursor:pointer;color:var(--ink)}
.qa-q span{font-family:var(--serif);font-size:var(--cu-q);font-weight:500;line-height:1.4;letter-spacing:-.008em}
.qa-q i{flex:0 0 auto;position:relative;width:13px;height:13px;margin-top:6px}
.qa-q i::before,.qa-q i::after{content:"";position:absolute;background:var(--ink-55);transition:transform .3s var(--ease),background .2s}
.qa-q i::before{left:0;right:0;top:6px;height:1px}
.qa-q i::after{top:0;bottom:0;left:6px;width:1px}
.qa-i.on .qa-q i::after{transform:scaleY(0)}
.qa-q:hover i::before,.qa-q:hover i::after{background:var(--ink)}
.qa-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s var(--ease)}
.qa-i.on .qa-wrap{grid-template-rows:1fr}
.qa-a{overflow:hidden;font-family:var(--serif);font-size:16px;line-height:1.72;color:var(--ink-75);max-width:60ch}
.qa-i.on .qa-a{padding-bottom:14px}
.qa-a p + p{margin-top:.9em}
.qa-a a{color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--ink-35)}

/* Two things _shared.css says that this mock does not, and a sheet cannot
   unsay a property it never set. `.head h2` is 46px there and beats `.h2` on
   specificity; `.lede` there carries tracking this one does not want.     */
.head h2{font-size:min(clamp(28px,2.8vw,40px), 28px + (clamp(28px,2.8vw,40px) - 28px) * 0.6);line-height:1.05;letter-spacing:-.005em}
.top .lede{letter-spacing:normal}
.band .reading{padding-top:0}

/* The line a form lands with.

   Contact and List your place both send and, until 10 September, both said
   nothing at all: the fields emptied themselves and that was the whole
   acknowledgement, which reads like a form that failed. `.kept` is the site's
   own word for it - the Studio, the member pages and the membership page all
   use it - but standing.html has no such line to lift, so this is
   _membership.css's rule, "the line the Weekly sign-up lands with", which is
   the same case on the same kind of page. Without its page-width centring:
   here it sits under a 30rem form.                                       */
.kept{margin-top:18px;font-family:var(--serif);font-style:italic;font-size:15px;color:var(--forest)}

/* The at-rules, in the mock's own order. */
@media(max-width:700px){.flow{display:none}}
@media(max-width:900px){.three{grid-template-columns:1fr}}
@media(max-width:900px){.cols{grid-template-columns:1fr}}
@keyframes drift-x{to{transform:translateX(-100%)}}
@media(max-width:900px){.towns{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media(max-width:560px){.lineitem{grid-template-columns:64px minmax(0,1fr);gap:12px}.lineitem > :last-child{grid-column:2}}
@media(max-width:1100px){.cu{--cu-across:3}}
@media(max-width:900px){.cu-room .cols{row-gap:48px}.cu-g{grid-template-columns:minmax(0,1fr);gap:4px}.cu-g h3{padding-top:0;margin-bottom:6px}}
@media(max-width:560px){.cu{--cu-across:2;--cu-tgap:12px;--cu-name:17px;--cu-hero:74vh}.cu-hero > .in{padding-top:40px;padding-bottom:68px}.cu-tiles{row-gap:22px}.cu-foot{bottom:20px}}
@media(prefers-reduced-motion:reduce){.cu-ph img,.cu-tile b,.cu-line a,.qa-wrap,.qa-q i::before,.qa-q i::after{transition:none}}