/* Leather & Pottery · tokens and primitives (leather-and-pottery-ui skill) */
:root{
color-scheme: light;
/* surface */
--bone:#F2EEE5; --paper:#FAF7F0; --ink:#1C1B18; --ink-2:#4A463F; --ink-3:#6E685E;
--clay:#A5583F; --celadon:#829889; --celadon-ink:#4F6457; --leather:#643F29; --leather-2:#8A5A3B;
--brass:#A3824D; --brass-ink:#7A5E2E;
/* line */
--hairline:1px solid rgba(28,27,24,.14); --standard:1px solid rgba(28,27,24,.28); --emphasis:1px solid var(--brass);
/* radius */
--r-none:0; --r-subtle:2px; --r-media:4px;
/* space · 4pt scale */
--s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:144px;
/* type */
--serif:"Newsreader","Iowan Old Style",Georgia,serif;
--sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
--mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
--display-xl:clamp(52px,9vw,128px); --display-l:clamp(38px,5.6vw,72px);
--heading:clamp(26px,3vw,36px); --body:17px; --small:14px; --label:11.5px;
--gutter:clamp(16px,4vw,56px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bone);color:var(--ink);font-family:var(--sans);font-size:var(--body);line-height:1.6;
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* paper grain, very low */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.35;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .11 0 0 0 0 .1 0 0 0 0 .09 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
main,header,footer{position:relative;z-index:1}
main{overflow-x:clip}
.bigdate .mon{display:block;font-size:.2em;letter-spacing:.14em;font-family:var(--mono);text-transform:uppercase;color:var(--ink-2);margin-bottom:.4em}
img{max-width:100%;display:block}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--clay);outline-offset:3px}
.wrap{padding-inline:var(--gutter);max-width:1360px;margin-inline:auto}
.prose{max-width:62ch}
/* type primitives */
.display-xl{font-family:var(--serif);font-weight:400;font-size:var(--display-xl);line-height:.95;letter-spacing:-.02em;margin:0;text-wrap:balance}
.display-l{font-family:var(--serif);font-weight:400;font-size:var(--display-l);line-height:1.02;letter-spacing:-.015em;margin:0;text-wrap:balance}
.heading{font-family:var(--serif);font-weight:400;font-size:var(--heading);line-height:1.15;margin:0;text-wrap:balance}
.display-xl em,.display-l em,.heading em{font-style:italic}
.label{font-family:var(--mono);font-size:var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);line-height:1.5}
.label.brass{color:var(--brass-ink)}
.small{font-size:var(--small);color:var(--ink-2)}
p{margin:0 0 var(--s4)}
/* header: almost invisible */
.site-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);padding-block:var(--s5);flex-wrap:wrap}
.mark{display:flex;align-items:center;gap:var(--s3);text-decoration:none}
.mark svg{width:34px;height:34px}
.mark span{font-family:var(--serif);font-size:19px;line-height:1.05}
.mark small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--ink-3);text-transform:uppercase}
.nav{display:flex;gap:var(--s5);flex-wrap:wrap;align-items:center}
.nav a{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--ink-2);padding-block:12px}
.nav a:hover,.nav a[aria-current]{color:var(--ink);text-decoration:underline;text-decoration-color:var(--brass)}
@media (max-width:760px){.nav{gap:var(--s4);row-gap:0}.nav a{font-size:11px}}
/* buttons: square, quiet, 48px */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px;border:1px solid var(--ink);background:var(--ink);color:var(--bone);
font-family:var(--sans);font-size:15px;font-weight:500;text-decoration:none;border-radius:var(--r-subtle);cursor:pointer;transition:background .2s,color .2s}
.btn:hover{background:var(--leather);border-color:var(--leather)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--bone)}
.btn .arr{font-family:var(--mono)}
.link-arrow{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;border-bottom:var(--emphasis);padding-bottom:3px}
/* figures + missing-photo fallback (before the archive mirror lands in R2) */
figure{margin:0}
.fig{position:relative;background:var(--paper);overflow:hidden;border-radius:var(--r-media)}
.fig img{width:100%;height:100%;object-fit:cover}
.fig.missing{display:grid;place-items:center;min-height:220px}
.fig.missing img{display:none}
.fig.missing::before{content:"";position:absolute;inset:0;opacity:.55}
.fig.pottery.missing{background:#E7E4DA}
.fig.pottery.missing::before{background:
radial-gradient(circle at 50% 118%,transparent 38%,rgba(79,100,87,.22) 38.4%,transparent 39%),
radial-gradient(circle at 50% 118%,transparent 52%,rgba(79,100,87,.16) 52.4%,transparent 53%),
radial-gradient(circle at 50% 118%,transparent 66%,rgba(79,100,87,.1) 66.4%,transparent 67%)}
.fig.leather.missing{background:#E9DFD3}
.fig.leather.missing::before{background:
repeating-linear-gradient(0deg,rgba(100,63,41,.12) 0 10px,transparent 10px 20px),
repeating-linear-gradient(90deg,rgba(100,63,41,.12) 0 10px,transparent 10px 20px);
-webkit-mask:linear-gradient(90deg,#000 50%,transparent 50%) 0 0/40px 40px, linear-gradient(0deg,#000 50%,transparent 50%) 20px 20px/40px 40px;
mask:linear-gradient(90deg,#000 50%,transparent 50%) 0 0/40px 40px, linear-gradient(0deg,#000 50%,transparent 50%) 20px 20px/40px 40px}
.fig.missing .pending{position:relative;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--ink-3);text-align:center;padding:var(--s4);max-width:90%}
.fig .pending{display:none}
.fig.missing .pending{display:block}
figcaption,.caption{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-top:var(--s2);line-height:1.5}
/* ------- HOME ------- */
.hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s6);align-items:end;padding-block:var(--s7) var(--s9)}
.hero-copy{display:flex;flex-direction:column;gap:var(--s5);padding-bottom:var(--s6)}
.hero-copy .display-xl{margin-top:var(--s7)}
.hero-now{display:grid;gap:4px;border-top:var(--emphasis);padding-top:var(--s3);max-width:340px}
.hero-actions{display:flex;gap:var(--s3);flex-wrap:wrap}
.hero-media{position:relative}
.hero-media .fig{aspect-ratio:4/5}
.hero-media .fig-2{position:absolute;left:-6%;bottom:-14%;width:34%;aspect-ratio:3/4;border:6px solid var(--bone);box-shadow:0 18px 40px -24px rgba(28,27,24,.45)}
.hero-media figcaption.hang{position:absolute;right:0;bottom:-34px}
@media (max-width:860px){
.hero{grid-template-columns:1fr;padding-block:var(--s5) var(--s8);gap:var(--s5)}
.hero-copy .display-xl{margin-top:var(--s4)}
.hero-media{margin-inline:calc(var(--gutter) * -1)}
.hero-media .fig{border-radius:0;aspect-ratio:4/5}
.hero-media .fig-2{left:auto;right:var(--gutter);bottom:-10%;width:40%}
.hero-media figcaption.hang{position:static;padding-inline:var(--gutter);margin-top:var(--s7)}
}
.makers{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:var(--s8);align-items:center;padding-block:var(--s9)}
.makers .fig{aspect-ratio:4/5}
.makers blockquote{margin:0;font-family:var(--serif);font-size:clamp(24px,2.6vw,32px);line-height:1.3;font-style:italic}
.makers .pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6);margin-top:var(--s6);border-top:var(--hairline);padding-top:var(--s5)}
.makers .pair h3{font-family:var(--serif);font-weight:400;font-size:26px;margin:4px 0 var(--s2)}
@media (max-width:860px){.makers{grid-template-columns:1fr;gap:var(--s6);padding-block:var(--s8)}.makers .pair{grid-template-columns:1fr}}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:var(--s5);flex-wrap:wrap;margin-bottom:var(--s6)}
.now{padding-block:var(--s8);border-top:var(--hairline)}
.grid-objects{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s6) var(--s5)}
.obj{grid-column:span 3;text-decoration:none;display:flex;flex-direction:column;gap:var(--s2)}
.obj.lg{grid-column:span 6;grid-row:span 2}
.obj .fig{aspect-ratio:1/1}
.obj.lg .fig{aspect-ratio:auto;flex:1;min-height:360px}
.obj .t{font-family:var(--serif);font-size:20px;line-height:1.2}
.obj:hover .fig img{transform:scale(1.02)}
.obj .fig img{transition:transform .6s ease}
.state{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;display:inline-flex;gap:8px;align-items:center}
.state::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.state.available{color:var(--celadon-ink)}
.state.sold,.state.archive{color:var(--brass-ink)}
.state.archive::before,.state.sold::before{border-radius:0;transform:rotate(45deg);width:6px;height:6px}
@media (max-width:860px){.obj{grid-column:span 6}.obj.lg{grid-column:span 12;grid-row:auto}.obj.lg .fig{aspect-ratio:4/5;min-height:0}}
/* two worlds */
.world{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s5);padding-block:var(--s9);align-items:center}
.world.pottery{background:linear-gradient(180deg,transparent,rgba(130,152,137,.14) 18%,rgba(130,152,137,.14) 82%,transparent)}
.world .copy{grid-column:1 / span 4;display:grid;gap:var(--s4)}
.world .media{grid-column:6 / span 7}
.world .media .fig{aspect-ratio:5/4;border-radius:50% 50% var(--r-media) var(--r-media) / 38% 38% var(--r-media) var(--r-media)}
.world.leather{background:var(--ink);color:var(--bone)}
.world.leather .label{color:#C9BBA0}
.world.leather .copy{grid-column:8 / span 5;grid-row:1}
.world.leather .media{grid-column:1 / span 6;grid-row:1}
.world.leather .media .fig{aspect-ratio:16/10;border-radius:var(--r-subtle)}
.world.leather .btn.ghost{color:var(--bone);border-color:var(--bone)}
.world.leather .btn.ghost:hover{background:var(--bone);color:var(--ink)}
.stitch{height:10px;background:repeating-linear-gradient(90deg,var(--brass) 0 12px,transparent 12px 20px);-webkit-mask:linear-gradient(#000,#000) center/100% 1.5px no-repeat;mask:linear-gradient(#000,#000) center/100% 1.5px no-repeat;opacity:.8}
.tool-strip{height:28px;background:repeating-linear-gradient(90deg,transparent 0 6px,rgba(201,187,160,.35) 6px 7px,transparent 7px 14px),repeating-linear-gradient(0deg,transparent 0 6px,rgba(201,187,160,.25) 6px 7px,transparent 7px 14px);border-block:1px solid rgba(201,187,160,.35)}
@media (max-width:860px){.world .copy,.world .media,.world.leather .copy,.world.leather .media{grid-column:1 / -1;grid-row:auto}.world{padding-block:var(--s8)}.world .media{margin-inline:calc(var(--gutter) * -1)}.world .media .fig{border-radius:0}}
/* show */
.show{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s7);padding-block:var(--s9);align-items:start}
.bigdate{font-family:var(--serif);font-size:clamp(88px,14vw,200px);white-space:nowrap;line-height:.82;letter-spacing:-.04em;color:var(--clay)}
.bigdate small{display:block;font-size:.22em;letter-spacing:0;color:var(--ink);margin-top:var(--s4)}
.showlog{border-top:var(--standard)}
.showlog li{display:grid;grid-template-columns:110px 1fr;gap:var(--s4);padding-block:var(--s4);border-bottom:var(--hairline);list-style:none}
.showlog ul{margin:0;padding:0}
@media (max-width:860px){.show{grid-template-columns:1fr;gap:var(--s6);padding-block:var(--s8)}}
/* archive glimpse: the one weird idea on home = giant years behind postcards */
.archive-glimpse{position:relative;padding-block:var(--s9);overflow:hidden}
.years{position:absolute;inset:auto 0 12% 0;font-family:var(--serif);font-size:clamp(120px,24vw,360px);line-height:1;color:transparent;
-webkit-text-stroke:1px rgba(163,130,77,.45);white-space:nowrap;letter-spacing:-.03em;pointer-events:none;user-select:none}
.postcards{position:relative;display:flex;gap:var(--s5);overflow-x:auto;padding-block:var(--s6);scroll-snap-type:x mandatory}
.postcard{flex:0 0 clamp(200px,24vw,300px);scroll-snap-align:start}
.postcard .fig{aspect-ratio:6/4.25;box-shadow:0 14px 30px -22px rgba(28,27,24,.55);transform:rotate(var(--tilt,0deg))}
.postcard:nth-child(odd){--tilt:-1.2deg}.postcard:nth-child(3n){--tilt:1deg}
/* club invitation */
.club{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:var(--s8);padding-block:var(--s9);border-top:var(--hairline);align-items:center}
.club .note{background:var(--paper);padding:var(--s7) var(--s6);border:var(--hairline);position:relative}
.club .note::after{content:"";position:absolute;inset:8px;border:1px solid rgba(163,130,77,.35);pointer-events:none}
.club .hand{font-family:var(--serif);font-style:italic;font-size:22px;line-height:1.45}
.edition{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--brass-ink)}
@media (max-width:860px){.club{grid-template-columns:1fr;gap:var(--s6);padding-block:var(--s8)}}
/* forms */
form.quiet{display:grid;gap:var(--s4)}
.field{display:grid;gap:6px}
.field label{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.field input,.field select,.field textarea{min-height:48px;padding:12px 14px;border:var(--standard);border-radius:var(--r-subtle);background:var(--paper);font:inherit;color:var(--ink)}
.field textarea{min-height:110px}
.check{display:flex;gap:12px;align-items:flex-start;min-height:44px}
.check input{width:22px;height:22px;margin-top:2px;accent-color:var(--leather)}
.hp{position:absolute;left:-9999px}
.form-msg{font-size:15px;min-height:1.5em}
.form-msg.ok{color:var(--celadon-ink)}.form-msg.err{color:var(--clay)}
/* footer / visit */
.visit{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr);gap:var(--s7);padding-block:var(--s9) var(--s7);border-top:var(--standard)}
.visit .selectable{user-select:all;font-family:var(--serif);font-size:24px}
.foot{display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;padding-block:var(--s5) var(--s7);border-top:var(--hairline)}
@media (max-width:860px){.visit{grid-template-columns:1fr;gap:var(--s6)}}
/* inner pages */
.page-head{padding-block:var(--s8) var(--s7);display:grid;gap:var(--s4);max-width:900px}
.object-page{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:var(--s7);padding-block:var(--s6) var(--s9)}
.object-page .fig{aspect-ratio:4/5}
.object-record{position:sticky;top:var(--s5);display:grid;gap:var(--s4);align-self:start}
.object-record dl{display:grid;grid-template-columns:auto 1fr;gap:6px var(--s4);margin:0;border-top:var(--hairline);padding-top:var(--s4)}
.object-record dt{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);padding-top:3px}
.object-record dd{margin:0}
.price{font-family:var(--serif);font-size:32px}
@media (max-width:860px){.object-page{grid-template-columns:1fr}.object-page .media{margin-inline:calc(var(--gutter) * -1)}.object-page .fig{border-radius:0}.object-record{position:static}}
.timeline{display:grid;gap:0;border-top:var(--standard)}
.tl{display:grid;grid-template-columns:minmax(90px,160px) 1fr minmax(0,260px);gap:var(--s5);padding-block:var(--s5);border-bottom:var(--hairline);align-items:start}
.tl .y{font-family:var(--serif);font-size:44px;line-height:1;color:var(--brass-ink)}
.tl .fig{aspect-ratio:6/4.25}
@media (max-width:700px){.tl{grid-template-columns:1fr}}
.tiers{display:grid;gap:0;border-top:var(--standard)}
.tier{display:grid;grid-template-columns:120px 1fr auto;gap:var(--s5);padding-block:var(--s6);border-bottom:var(--hairline);align-items:baseline}
.tier .n{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--brass-ink)}
@media (max-width:700px){.tier{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
/* kiln moment (home §49.09) */
.kiln-moment{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s8);padding-block:var(--s9);border-top:var(--hairline);align-items:start}
.kiln-moment .k-main .fig{aspect-ratio:9/16;max-height:820px}
.kiln-moment .k-copy{padding-top:var(--s8);display:grid;gap:var(--s4)}
.kiln-moment .k-side{max-width:420px;margin-top:var(--s5);margin-left:auto}
.kiln-moment .k-side .fig{aspect-ratio:4/3}
@media (max-width:860px){.kiln-moment{grid-template-columns:1fr;gap:var(--s5);padding-block:var(--s8)}.kiln-moment .k-main{margin-inline:calc(var(--gutter) * -1)}.kiln-moment .k-main .fig{border-radius:0;aspect-ratio:4/5}.kiln-moment .k-copy{padding-top:0}.kiln-moment .k-side{margin-left:0}}
.fig img{background:#E7E4DA}
/* ================= style pass v2 ================= */
/* nav: one quiet row on desktop, a single Menu disclosure on phones */
.nav-m{display:none;position:relative}
.nav-m summary{list-style:none;cursor:pointer;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;min-height:44px;display:flex;align-items:center;gap:8px;padding-inline:4px}
.nav-m summary::-webkit-details-marker{display:none}
.nav-m summary::after{content:"";width:14px;height:7px;border-block:1px solid var(--ink)}
.nav-m[open] summary::after{height:0;border-bottom:none}
.nav-m nav{position:absolute;right:0;top:calc(100% + 6px);background:var(--paper);border:var(--hairline);box-shadow:0 18px 40px -24px rgba(28,27,24,.5);display:grid;min-width:200px;z-index:20;padding:6px 0}
.nav-m nav a{font-family:var(--serif);font-size:22px;text-decoration:none;padding:10px 20px;min-height:44px}
.nav-m nav a[aria-current]{color:var(--clay)}
@media (max-width:760px){.nav{display:none}.nav-m{display:block}.site-head{flex-wrap:nowrap;padding-block:var(--s4)}}
/* hero: poster proportions */
.hero{grid-template-columns:minmax(0,11fr) minmax(0,13fr);gap:var(--s7);padding-block:var(--s6) var(--s9)}
.hero-copy .display-xl{font-size:clamp(50px,7.2vw,112px)}
.nw{white-space:nowrap}
.hero-media .fig{aspect-ratio:4/5;box-shadow:0 30px 60px -40px rgba(28,27,24,.6)}
.hero-media .fig-2{left:-9%;bottom:-10%;width:36%;aspect-ratio:1/1}
.hero-media figcaption.hang{position:static;text-align:right;margin-top:var(--s4);padding-left:32%}
@media (max-width:860px){.hero-media figcaption.hang{padding-left:0;text-align:left;margin-top:var(--s8)}.hero-media .fig-2{bottom:-12%}}
/* photography: pottery was shot on a blue studio sweep; let the plates carry it */
.fig img{background:#1f2a36}
.obj .fig,.postcard .fig,.cw .fig{box-shadow:0 1px 0 rgba(28,27,24,.06)}
.obj .t{font-size:21px}
.obj{gap:6px}
/* collection grid: dense packing, no holes */
.grid-objects{grid-auto-flow:row dense}
.obj.lg .fig{aspect-ratio:1/1;min-height:0;flex:none}
@media (min-width:861px){.grid-objects{row-gap:var(--s7)}}
/* makers */
.makers{padding-block:var(--s8) var(--s9)}
.makers blockquote{max-width:30ch}
/* worlds */
.world{padding-block:var(--s10)}
.world .media .fig{box-shadow:0 40px 70px -50px rgba(28,27,24,.7)}
/* show: less dead air */
.show{padding-block:var(--s8);align-items:end}
.bigdate{line-height:.86}
/* kiln moment: calmer proportions */
.kiln-moment{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center}
.kiln-moment .k-main .fig{aspect-ratio:3/4;max-height:760px}
.kiln-moment .k-copy{padding-top:0}
/* club */
.club .note{align-self:start}
.club .club-fig .fig{aspect-ratio:4/5}
.firing-cal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5);padding-bottom:var(--s8);align-items:end}
.firing-cal .fc:nth-child(odd) .fig{aspect-ratio:3/4}
.firing-cal .fc:nth-child(even) .fig{aspect-ratio:1/1}
.firing-cal .fc figcaption{font-family:var(--mono)}
.fc-note{grid-column:1/-1;margin:0}
@media (max-width:760px){.firing-cal{grid-template-columns:1fr 1fr}}
/* archive: postcard wall + compact index */
.card-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--s6) var(--s5)}
.cw .fig{aspect-ratio:6/4.25;background:var(--paper)}
.cw .fig img{object-fit:contain;background:var(--paper)}
.cw:nth-child(3n+1) .fig{transform:rotate(-.8deg)}.cw:nth-child(3n+2) .fig{transform:rotate(.6deg)}
.index-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--s5) var(--s4)}
.index-grid .obj{grid-column:auto}
.index-grid .obj .t{font-size:16px}
.index-grid .label{font-size:10px}
/* object page: natural image ratios, gallery feel */
.object-page .media.natural{display:grid;gap:var(--s5)}
.object-page .media.natural .fig{aspect-ratio:auto;background:#1f2a36}
.object-page .media.natural .fig img{height:auto;max-height:86vh;object-fit:contain}
.object-record .heading{font-size:clamp(30px,3.4vw,44px)}
/* belt measure diagram */
.measure{margin:0;display:grid;gap:8px;border:var(--hairline);padding:var(--s4);background:var(--paper)}
.measure svg{width:100%;height:auto}
.measure figcaption{font-family:var(--sans);text-transform:none;letter-spacing:0;font-size:15px;color:var(--ink-2)}
/* visit footer spacing */
.visit{padding-block:var(--s8) var(--s6)}
/* focus + selection */
::selection{background:rgba(163,130,77,.3)}
@media (max-width:860px){
.hero{grid-template-columns:1fr;padding-block:var(--s4) var(--s8);gap:var(--s5)}
.hero-copy .display-xl{font-size:clamp(46px,13vw,64px);margin-top:var(--s3)}
.kiln-moment{grid-template-columns:1fr}
.object-page .media.natural .fig{border-radius:0}
}
@media (max-width:860px){
.hero-media .fig-2{left:auto;right:var(--gutter);bottom:-9%;width:38%}
.hero-media figcaption.hang{padding-inline:var(--gutter);margin-top:var(--s6);max-width:58%}
.world .copy{padding-inline:var(--gutter)!important}
}
/* ================= neumorphic tooled surfaces + six craft elements ================= */
/* One light source, upper left. Tight shadows, warm (clay/leather) shade, never grey. */
:root{
--lift-hi: rgba(255,253,247,.9); --lift-lo: rgba(99,73,48,.22); --lift-lo2: rgba(99,73,48,.12);
--raise: -5px -5px 12px var(--lift-hi), 5px 6px 14px var(--lift-lo);
--raise-sm: -2px -2px 6px var(--lift-hi), 3px 3px 7px var(--lift-lo);
--press: inset 3px 3px 7px var(--lift-lo), inset -3px -3px 7px var(--lift-hi);
--press-sm: inset 2px 2px 4px var(--lift-lo), inset -2px -2px 4px var(--lift-hi);
}
/* 1 · NEUMORPHISM — buttons as burnished leather tabs, ghost buttons embossed into bone */
.btn{border:none;background:linear-gradient(150deg,#7a4d31 0%,#5d3a24 55%,#4b2e1c 100%);color:#F6EFE3;
box-shadow:var(--raise-sm), inset 0 1px 0 rgba(255,230,200,.22), inset 0 -2px 0 rgba(0,0,0,.18);position:relative;transition:transform .15s,box-shadow .15s,background .2s}
.btn:hover{background:linear-gradient(150deg,#83543a 0%,#643F29 55%,#523220 100%);transform:translateY(-1px)}
.btn:active{transform:translateY(1px);box-shadow:inset 2px 2px 5px rgba(0,0,0,.35), inset -1px -1px 2px rgba(255,230,200,.15)}
.btn.ghost{background:var(--bone);color:var(--ink);box-shadow:var(--raise-sm)}
.btn.ghost:hover{background:var(--bone);color:var(--leather);box-shadow:-3px -3px 8px var(--lift-hi),4px 5px 10px var(--lift-lo)}
.btn.ghost:active{box-shadow:var(--press-sm);transform:none}
.world.leather .btn.ghost{background:#211f1b;color:#EFE6D6;border:none;box-shadow:-3px -3px 8px rgba(255,240,220,.05),4px 5px 12px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.04)}
.world.leather .btn.ghost:hover{color:var(--brass);background:#24211d}
.world.leather .btn.ghost:active{box-shadow:inset 3px 3px 7px rgba(0,0,0,.6), inset -2px -2px 5px rgba(255,240,220,.04)}
/* fields debossed into the paper */
.field input,.field select,.field textarea{background:var(--bone);border:1px solid rgba(28,27,24,.2);box-shadow:var(--press-sm)}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--clay);outline-offset:2px;box-shadow:var(--press)}
/* raised plates */
.plate{background:var(--bone);border-radius:var(--r-media);box-shadow:var(--raise);border:1px solid rgba(255,255,255,.5)}
.hero-now.plate{border-top:none;padding:16px 20px 16px;max-width:380px}
.object-record.plate{padding:var(--s5)}
.club .note.plate{background:var(--bone);border:none}
.club .note.plate::after{border-color:rgba(163,130,77,.45)}
.tier{padding-inline:var(--s5);margin-block:var(--s3);border-bottom:none;border-radius:var(--r-media);box-shadow:var(--raise);background:var(--bone)}
.tiers{border-top:none}
.firing-cal .fig,.obj:hover .fig{box-shadow:var(--raise-sm)}
.obj .fig{transition:box-shadow .3s,transform .3s}
.obj:hover .fig{transform:translateY(-2px)}
.nav-m nav{background:var(--bone);border:none;box-shadow:var(--raise)}
.measure{background:var(--bone);border:none;box-shadow:var(--press)}
/* 2 · BRASS RIVETS — four hardware studs on plaques (leather world grammar) */
.rivets{background-image:
radial-gradient(circle at 12px 12px, #d8bd84 0 1.2px, #A3824D 1.8px, #6e5429 3.2px, transparent 3.8px),
radial-gradient(circle at calc(100% - 12px) 12px, #d8bd84 0 1.2px, #A3824D 1.8px, #6e5429 3.2px, transparent 3.8px),
radial-gradient(circle at 12px calc(100% - 12px), #d8bd84 0 1.2px, #A3824D 1.8px, #6e5429 3.2px, transparent 3.8px),
radial-gradient(circle at calc(100% - 12px) calc(100% - 12px), #d8bd84 0 1.2px, #A3824D 1.8px, #6e5429 3.2px, transparent 3.8px)}
.hero-now.rivets{padding-inline:28px}
/* 3 · SADDLE STITCHING — dashed thread inside leather-world plates and primary buttons */
.btn:not(.ghost)::after{content:"";position:absolute;inset:4px;border:1px dashed rgba(246,239,227,.32);border-radius:1px;pointer-events:none}
.stitched-plate{position:relative;padding:var(--s6)!important;background:linear-gradient(160deg,#2a221b,#1f1a15);border-radius:var(--r-media);
box-shadow:-3px -3px 10px rgba(255,240,220,.04),8px 10px 24px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04)}
.stitched-plate::before{content:"";position:absolute;inset:10px;border:1.5px dashed rgba(163,130,77,.55);border-radius:2px;pointer-events:none}
@media (max-width:860px){.stitched-plate{margin-inline:var(--gutter)}}
/* 4 · GLAZE DRIP DIVIDER — a pour line with runs, in iron or celadon */
.drip{height:44px;margin-top:-1px;line-height:0}
.drip svg{width:100%;height:100%}
.drip.iron path{fill:#6b3a24;opacity:.9}
.drip.celadon path{fill:var(--celadon);opacity:.55}
.drip.iron{background:linear-gradient(180deg,rgba(130,152,137,.14),transparent)}
/* 5 · KILN GAUGE — Fahrenheit scale, heat colours with a material reason */
.gauge{margin:var(--s5) 0 0;padding:26px 18px 12px;border-radius:var(--r-media);box-shadow:var(--press);background:var(--bone)}
.g-track{position:relative;height:12px;border-radius:6px;background:rgba(28,27,24,.08);box-shadow:inset 1px 1px 3px rgba(99,73,48,.3)}
.g-fill{position:absolute;inset:0;border-radius:6px;background:linear-gradient(90deg,#3b3a36 0%,#6b3a24 35%,#A5583F 62%,#d9823f 82%,#f3c16b 100%)}
.g-tick{position:absolute;top:14px;width:1px;height:8px;background:rgba(28,27,24,.35)}
.g-tick i{position:absolute;top:10px;left:50%;transform:translateX(-50%);font-style:normal;font-family:var(--mono);font-size:10px;color:var(--ink-3)}
.g-mark{position:absolute;bottom:18px;transform:translateX(-50%)}
.g-mark em{font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;white-space:nowrap;color:var(--ink-2)}
.g-mark.top{transform:translateX(-100%)}
.g-mark.top em{color:var(--clay);font-weight:500}
.g-mark.ref::after,.g-mark.top::after{content:"";position:absolute;left:50%;top:100%;width:1px;height:10px;background:currentColor;opacity:.4}
.g-mark.top::after{left:auto;right:0}
.gauge figcaption{margin-top:28px}
.gauge.lit .g-fill{animation:heat 2.4s ease-out 1}
@keyframes heat{0%{filter:brightness(.55) saturate(.6)}60%{filter:brightness(1.25) saturate(1.2)}100%{filter:none}}
/* 6 · SHOW ROUTE MAP — schematic lines between the places their working life happened */
.route{margin:0;border-radius:var(--r-media);box-shadow:var(--press);background:var(--bone);padding:var(--s4);max-width:760px}
.route svg{width:100%;height:auto;display:block}
.route .r{fill:none;stroke:var(--clay);stroke-width:2;stroke-dasharray:6 7;stroke-linecap:round}
.route .r-old{stroke:var(--brass);stroke-dasharray:2 6}
.route.lit .r{animation:march 1.6s linear 2}
@keyframes march{to{stroke-dashoffset:-52}}
.route .pl circle{fill:var(--leather)}
.route .pl.home circle{fill:var(--clay)}
.route .pl .halo{fill:none;stroke:var(--clay);stroke-width:1;opacity:.5}
.route .pn{font-family:var(--serif);font-size:24px;fill:var(--ink)}
.route .pd{font-family:var(--mono);font-size:11px;letter-spacing:.06em;fill:var(--ink-2)}
.route .compass path{fill:var(--brass)}
.route .compass text{font-family:var(--mono);font-size:12px;fill:var(--ink-2)}
/* 7 · KILN OPENING COUNTDOWN */
.count{font-family:var(--mono);letter-spacing:.08em}
.count b{font-family:var(--serif);font-weight:400;font-size:1.5em;color:var(--clay);letter-spacing:0}
.kiln-count{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);margin-top:var(--s5);padding:16px 28px}
.kiln-count .count b{font-size:44px;line-height:1}
@media (prefers-reduced-motion:reduce){.gauge.lit .g-fill,.route.lit .r{animation:none}}
.hero-count{display:block;margin-top:4px}
.route-sec{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s7);align-items:end}
@media (max-width:860px){.route-sec{grid-template-columns:1fr}}
/* ================= motion + section highlighting ================= */
:root{
/* accents, each tied to a material */
--ember:#C8743A; /* kiln heat */
--amber:#E2A54B; /* flame at cone */
--oxblood:#6E2B2B; /* dyed leather */
--tobacco:#8A5A3B; /* oiled leather */
--celadon-mist:#C9D6CC;
--iron:#6b3a24;
--ease:cubic-bezier(.2,.7,.2,1);
}
/* scroll progress: a brass thread across the top */
.progress{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;height:3px;z-index:50;pointer-events:none}
.progress i{display:block;height:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--brass),var(--ember),var(--clay));transition:background .6s}
[data-tone="celadon"] .progress i{background:linear-gradient(90deg,var(--celadon),#5f7a69)}
[data-tone="tobacco"] .progress i,[data-tone="tobacco-light"] .progress i{background:linear-gradient(90deg,var(--brass),var(--tobacco),var(--oxblood))}
[data-tone="kiln"] .progress i,[data-tone="ember"] .progress i{background:linear-gradient(90deg,var(--iron),var(--ember),var(--amber))}
/* section tones: full-bleed washes behind each section; they bloom when the section is in view */
.tone{position:relative;isolation:isolate}
.tone::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);z-index:-1;pointer-events:none;
opacity:.45;transition:opacity 1.2s var(--ease)}
.tone.lit-tone::before{opacity:1}
.world.tone::before{display:none}
.tone[data-tone="dawn"]::before{background:
radial-gradient(60% 70% at 12% 8%, rgba(255,251,240,.95), transparent 60%),
radial-gradient(45% 55% at 78% 45%, rgba(130,152,137,.22), transparent 70%),
radial-gradient(40% 40% at 60% 95%, rgba(200,116,58,.10), transparent 70%)}
.tone[data-tone="clay"]::before{background:
radial-gradient(55% 70% at 18% 50%, rgba(165,88,63,.13), transparent 70%),
linear-gradient(180deg, transparent, rgba(165,88,63,.05) 50%, transparent)}
.tone[data-tone="bone"]::before{background:linear-gradient(180deg,transparent,rgba(250,247,240,.9) 20%,rgba(250,247,240,.9) 80%,transparent)}
.tone[data-tone="celadon"]::before{background:
radial-gradient(50% 60% at 70% 40%, rgba(130,152,137,.30), transparent 70%),
linear-gradient(180deg, transparent, rgba(201,214,204,.35) 30%, rgba(201,214,204,.35) 70%, transparent)}
.tone[data-tone="ember"]::before{background:
radial-gradient(40% 70% at 20% 55%, rgba(200,116,58,.18), transparent 70%),
radial-gradient(30% 40% at 80% 70%, rgba(226,165,75,.12), transparent 70%)}
.tone[data-tone="brass"]::before{background:
linear-gradient(180deg, transparent, rgba(163,130,77,.10) 35%, rgba(163,130,77,.10) 65%, transparent)}
.tone[data-tone="kiln"]::before{background:
radial-gradient(38% 60% at 26% 50%, rgba(226,165,75,.28), transparent 65%),
radial-gradient(55% 80% at 26% 50%, rgba(200,116,58,.14), transparent 75%),
radial-gradient(40% 50% at 85% 20%, rgba(107,58,36,.08), transparent 70%)}
.tone[data-tone="tobacco-light"]::before{background:
radial-gradient(55% 70% at 15% 30%, rgba(138,90,59,.16), transparent 70%),
repeating-linear-gradient(135deg, rgba(100,63,41,.035) 0 2px, transparent 2px 9px)}
.tone[data-tone="paper"]::before{background:linear-gradient(180deg,transparent,rgba(250,247,240,.95) 40%)}
/* pottery world: breathing celadon pool; leather world: tobacco sheen */
.world.pottery{background:radial-gradient(60% 70% at 72% 45%, rgba(130,152,137,.34), transparent 70%), linear-gradient(180deg,transparent,rgba(201,214,204,.45) 18%,rgba(201,214,204,.45) 82%,transparent)}
.world.leather{background:radial-gradient(45% 70% at 25% 40%, rgba(138,90,59,.28), transparent 70%), radial-gradient(35% 50% at 85% 80%, rgba(110,43,43,.25), transparent 70%), var(--ink)}
.world.leather.lit-tone .media .fig{box-shadow:0 30px 70px -30px rgba(200,116,58,.35)}
/* accents in type */
.bigdate{background:linear-gradient(100deg,var(--clay),var(--ember) 55%,var(--amber));-webkit-background-clip:text;background-clip:text;color:transparent}
.bigdate .mon,.bigdate small{-webkit-text-fill-color:initial;color:var(--ink)}
.display-l em,.display-xl em{color:var(--leather)}
.world.leather .display-l em{color:var(--amber)}
[data-tone="celadon"] .display-l em{color:#4F6457}
.kiln-moment .display-l em{color:var(--ember)}
/* hero entrance: plays once on load, from a readable state */
@media (prefers-reduced-motion:no-preference){
.hero-copy > *{animation:rise .9s var(--ease) both}
.hero-copy > :nth-child(2){animation-delay:.08s}.hero-copy > :nth-child(3){animation-delay:.16s}
.hero-copy > :nth-child(4){animation-delay:.24s}.hero-copy > :nth-child(5){animation-delay:.32s}
.hero-media > figure:first-child .fig{animation:unveil 1.4s var(--ease) both}
.hero-media .fig-2{animation:settle 1.2s .35s var(--ease) both}
.hero-media{--drift:0px}
.hero-media .fig-2{translate:0 var(--drift)}
}
@keyframes rise{from{opacity:.25;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes unveil{from{clip-path:inset(0 0 18% 0 round 4px);filter:saturate(.6) brightness(.9)}to{clip-path:inset(0 0 0 0 round 4px);filter:none}}
@keyframes settle{from{transform:rotate(-6deg) translateY(24px);opacity:.3}to{transform:rotate(-2deg);opacity:1}}
.hero-media .fig-2{transform:rotate(-2deg);transition:transform .5s var(--ease)}
.hero-media .fig-2:hover{transform:rotate(0) scale(1.03)}
/* scroll reveals: only elements that start below the fold; never hidden at rest */
@media (prefers-reduced-motion:no-preference){
.js .rv{transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i,0) * 70ms)}
.js .rv.pre{opacity:.55;transform:translateY(16px)}
.js .rv.pre.in{opacity:1;transform:none}
/* photographs "come out of the kiln": warm up and settle */
.js .fig.pre img{filter:saturate(.55) brightness(.92) sepia(.12);transform:scale(1.06)}
.js .fig img{transition:filter 1.4s var(--ease),transform 1.6s var(--ease)}
.js .fig.pre.in img{filter:none;transform:none}
}
/* burnish sweep across leather buttons */
.btn:not(.ghost){overflow:hidden}
.btn:not(.ghost)::before{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,230,190,.28),transparent);transform:skewX(-18deg);transition:left .7s var(--ease);pointer-events:none}
.btn:not(.ghost):hover::before{left:120%}
/* links: brass rule that draws in */
.link-arrow{border-bottom:none;background:linear-gradient(var(--brass),var(--brass)) 0 100%/100% 1px no-repeat;transition:background-size .4s var(--ease),color .3s;padding-bottom:4px}
.link-arrow:hover{background:linear-gradient(var(--ember),var(--ember)) 0 100%/100% 2px no-repeat;color:var(--clay)}
.nav a{background:linear-gradient(var(--brass),var(--brass)) 0 calc(100% - 8px)/0 1px no-repeat;transition:background-size .35s var(--ease),color .3s;text-decoration:none!important}
.nav a:hover,.nav a[aria-current]{background-size:100% 1px;color:var(--ink)}
/* tiles + postcards */
.obj .t{transition:color .3s}
.obj:hover .t{color:var(--leather)}
.obj:hover .state.archive{color:var(--ember)}
.postcard .fig,.cw .fig{transition:transform .5s var(--ease),box-shadow .5s}
.postcard:hover .fig,.cw:hover .fig{transform:rotate(0) translateY(-6px);box-shadow:0 24px 40px -22px rgba(107,58,36,.55)}
/* rivets glint once when plates arrive */
@media (prefers-reduced-motion:no-preference){
.plate.in,.hero-now.plate{animation:glint 1.6s .4s ease-out 1 both}
}
@keyframes glint{0%{filter:none}40%{filter:brightness(1.04)}100%{filter:none}}
/* drip: slow pour on view */
@media (prefers-reduced-motion:no-preference){
.drip path{transform-origin:top;animation:pour 2.2s var(--ease) 1 both}
}
@keyframes pour{from{transform:scaleY(.55)}to{transform:scaleY(1)}}
/* kiln photo breathing glow (heat behind Kathy) */
@media (prefers-reduced-motion:no-preference){
.kiln-moment.lit-tone .k-main .fig{animation:kilnglow 4.5s ease-in-out infinite alternate}
}
@keyframes kilnglow{from{box-shadow:0 30px 70px -35px rgba(200,116,58,.35)}to{box-shadow:0 30px 90px -25px rgba(226,165,75,.6)}}
@media (prefers-reduced-motion:reduce){.progress{display:none}}
/* =====================================================================
Leather & Pottery · v3 system + homepage chapters
Palette from the brand guide: cream, parchment, espresso, saddle brown,
terracotta, muted copper, kiln black, sage, dusty blue-gray.
===================================================================== */
:root{
--bone:#F7F2E7; --paper:#FBF8F1; --parchment:#EADFCC; --parchment-2:#E3D5BE;
--ink:#2E241B; --ink-2:#54483C; --ink-3:#6B5F52;
--leather:#7A4A2E; --terracotta:#C56545; --clay:#A9502F; --copper:#B8734E;
--kiln:#1F1B17; --kiln-2:#29221C; --sage:#7E8F72; --sage-ink:#4F5E45; --blue:#697A8F; --blue-ink:#4A596B;
--brass:#A3824D; --brass-ink:#7A5E2E; --celadon:#8FA08A; --celadon-ink:#4F5E45;
--sans:"Source Sans 3","Source Sans Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
--h-display:clamp(46px,6.2vw,100px); --h-h2:clamp(38px,4.8vw,72px);
--sec:clamp(72px,9vw,140px);
}
body{background:var(--bone);color:var(--ink);font-size:18px}
.label{color:var(--ink-3)}
.h-h2,.h-display{font-family:var(--serif);font-weight:400;letter-spacing:-.018em;margin:0;text-wrap:balance}
.h-display{font-size:var(--h-display);line-height:.98}
.h-h2{font-size:var(--h-h2);line-height:1}
.h-h2 em,.h-display em{font-style:italic;color:var(--terracotta)}
.h-body{font-size:clamp(17px,1.25vw,19px);line-height:1.62;max-width:52ch;color:var(--ink-2)}
.h-actions{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center}
.btn{font-family:var(--sans)}
.btn-sm{min-height:40px;padding:0 16px;font-size:14px}
.link-arrow{color:var(--clay);font-family:var(--serif);font-size:18px;letter-spacing:0;text-transform:none;font-style:normal}
.sel{user-select:all}
.bot{position:absolute;pointer-events:none;opacity:.55;z-index:0;height:auto}
section{position:relative}
.fig img{background:#2a2f36}
/* ---------- header ---------- */
.site-head2{position:relative;z-index:30;border-bottom:1px solid rgba(46,36,27,.12);background:linear-gradient(180deg,var(--paper),rgba(251,248,241,.6))}
.sh-row{display:flex;align-items:center;gap:28px;padding-block:14px}
.brand{display:grid;justify-content:start;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:12px;align-items:center;text-decoration:none;color:var(--ink)}
.brand img{grid-row:1/3;width:36px;height:auto}
.brand .bw i{font-style:italic;color:var(--terracotta);padding:0 .02em}
.brand .bw{font-family:var(--serif);font-size:23px;line-height:1;letter-spacing:-.01em}
.brand .bs{font-family:var(--mono);font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-3);margin-top:4px}
.nav2{display:flex;gap:22px;margin-left:auto;flex-wrap:nowrap}
.nav2 a{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--ink-2);padding-block:12px;white-space:nowrap;
background:linear-gradient(var(--terracotta),var(--terracotta)) 0 calc(100% - 6px)/0 1.5px no-repeat;transition:background-size .35s var(--ease),color .3s}
.nav2 a:hover,.nav2 a[aria-current]{color:var(--ink);background-size:100% 1.5px}
.cta-available{flex:none}
.site-head2 .nav-m{display:none;margin-left:auto}
.site-head2 .nav-m nav .btn{margin:10px 20px 6px;justify-content:center;color:#F6EFE3;font-family:var(--sans);font-size:16px}
@media (max-width:1240px){.nav2{gap:16px}.nav2 a{font-size:10.5px;letter-spacing:.12em}}
@media (max-width:1100px){.nav2,.cta-available{display:none}.site-head2 .nav-m{display:block}}
@media (max-width:480px){.brand .bw{font-size:20px}.brand img{width:30px}}
/* ---------- 01 hero ---------- */
.h-hero{padding-block:clamp(36px,5vw,72px) clamp(64px,8vw,120px);overflow:clip}
.h-hero-wash{position:absolute;inset:0 0 0 38%;background:url(/assets/editorial/plaster-light-wall.webp) center/cover no-repeat;opacity:.55;
-webkit-mask:linear-gradient(90deg,transparent,#000 35%,#000 80%,transparent);mask:linear-gradient(90deg,transparent,#000 35%,#000 80%,transparent);z-index:-1}
.h-hero-grid{display:grid;grid-template-columns:minmax(0,11fr) minmax(0,13fr);gap:clamp(28px,4vw,72px);align-items:center}
.h-hero-copy{display:flex;flex-direction:column;gap:26px;position:relative;z-index:2}
.h-kicker{margin:0}
.h-lede{font-size:clamp(18px,1.4vw,21px);line-height:1.55;max-width:44ch;margin:0;color:var(--ink-2)}
.h-next{display:grid;gap:4px;padding:16px 28px;max-width:420px}
.h-next strong{font-family:var(--serif);font-weight:400;font-size:21px}
.h-hero-art{position:relative;aspect-ratio:1/1.02;min-height:420px}
.h-hero-art > figure{position:absolute;margin:0}
.h-vase{right:0;top:0;width:66%;z-index:1}
.h-vase .fig{aspect-ratio:4/5;border-radius:4px;box-shadow:0 40px 70px -40px rgba(46,36,27,.6)}
.h-vase img{object-position:50% 40%}
.h-belt{left:2%;bottom:0;width:48%;z-index:3;transform:rotate(-2.5deg)}
.h-belt .fig{aspect-ratio:4/3;border:8px solid var(--paper);box-shadow:0 26px 40px -24px rgba(46,36,27,.55);border-radius:2px}
.h-kilnfig{left:6%;top:4%;width:26%;z-index:2;transform:rotate(1.5deg)}
.h-kilnfig .fig{aspect-ratio:3/4;border:6px solid var(--paper);box-shadow:0 18px 30px -20px rgba(46,36,27,.5)}
.h-hero-art figcaption{font-size:10px;margin-top:6px}
.h-vase figcaption{text-align:right}
.h-bot-grass{right:-60px;bottom:-40px;width:300px;opacity:.45}
@media (max-width:860px){
.h-hero-grid{grid-template-columns:1fr;gap:22px}
.h-hero-copy{display:contents}
.h-kicker{order:1}.h-display{order:2}.h-hero-art{order:3}.h-lede{order:4}.h-actions{order:5}.h-next{order:6}
.h-display{font-size:clamp(44px,12.5vw,64px)}
.h-hero-art{aspect-ratio:1/1.08;min-height:0;margin-top:6px}
.h-vase{width:78%}
.h-kilnfig{width:30%;left:0;top:10%}
.h-belt{width:56%;left:0}
.h-hero-wash{inset:0;opacity:.35}
}
/* ---------- 02 strip ---------- */
.h-strip{border-block:1px solid rgba(46,36,27,.14);background:var(--paper)}
.h-strip-row{display:grid;grid-template-columns:repeat(6,1fr)}
.h-strip a{display:grid;justify-items:center;gap:4px;padding:22px 8px 20px;text-decoration:none;color:var(--ink);border-left:1px solid rgba(46,36,27,.1);transition:background .3s}
.h-strip a:first-child{border-left:none}
.h-strip img{height:48px;width:auto;transition:transform .4s var(--ease)}
.h-strip a:hover{background:var(--bone)}
.h-strip a:hover img{transform:translateY(-3px) rotate(-3deg)}
.hs-t{font-family:var(--serif);font-size:20px;margin-top:6px}
.h-strip .label{font-size:10px}
@media (max-width:760px){.h-strip-row{grid-template-columns:repeat(3,1fr)}.h-strip a:nth-child(4){border-left:none}.h-strip a:nth-child(n+4){border-top:1px solid rgba(46,36,27,.1)}.h-strip img{height:40px}}
/* ---------- 03 makers ---------- */
.h-makers{padding-block:var(--sec)}
.h-makers-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,110px);align-items:center}
.h-makers-photo{position:relative;padding-bottom:70px}
.mk-main .fig{aspect-ratio:4/5;border-radius:3px}
.mk-main img{object-position:50% 25%}
.mk-old{position:absolute;right:-8%;bottom:0;width:52%;margin:0;background:var(--paper);padding:10px 10px 8px;transform:rotate(2deg);box-shadow:0 20px 36px -22px rgba(46,36,27,.55)}
.mk-old .fig{background:var(--paper)}
.mk-old img{object-fit:contain;background:var(--paper)}
.h-quote{margin:26px 0 30px;font-family:var(--serif);font-style:italic;font-size:clamp(24px,2.3vw,32px);line-height:1.3;max-width:26ch;color:var(--leather)}
.mk-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.mk-card{background:var(--paper);padding:22px 24px;border-radius:3px;box-shadow:var(--raise-sm);border-top:3px solid var(--sage)}
.mk-card + .mk-card{border-top-color:var(--leather)}
.mk-card h3{font-family:var(--serif);font-weight:400;font-size:28px;margin:6px 0 8px}
.mk-card p:last-child{font-size:16px;color:var(--ink-2);margin:0}
.mk-since{display:flex;flex-wrap:wrap;gap:6px 24px;margin:26px 0 18px}
@media (max-width:860px){.h-makers-grid{grid-template-columns:1fr}.mk-pair{grid-template-columns:1fr}.mk-old{right:0;width:56%}}
/* ---------- 04 gallery ---------- */
.h-gallery{padding-block:var(--sec) calc(var(--sec) * .8);border-top:1px solid rgba(46,36,27,.1)}
.h-sec-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px;align-items:end;margin-bottom:clamp(32px,4vw,56px)}
.h-sec-head .label{margin:0 0 14px}
.h-sec-note{font-size:16px;color:var(--ink-2);max-width:46ch;margin:0 0 8px}
.h-gal-grid{display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:380px 380px 330px;gap:28px 22px}
.mt{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);min-height:0}
.mt figure{margin:0;flex:1;min-height:0}
.mt .fig{height:100%;border-radius:2px}
.mt .fig img{transition:transform .8s var(--ease)}
.mt:hover .fig img{transform:scale(1.02)}
.mt-meta{display:grid;gap:2px;padding-top:10px}
.mt-meta .label{font-size:10px}
.mt-t{font-family:var(--serif);font-size:21px;line-height:1.15}
.mt-go{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--clay);opacity:0;transform:translateY(4px);transition:.35s var(--ease)}
.mt:hover .mt-go,.mt:focus-visible .mt-go{opacity:1;transform:none}
.mt-m{color:var(--ink-3)}
.g1{grid-column:1/7;grid-row:1/3}.g2{grid-column:7/10}.g3{grid-column:10/13}.g4{grid-column:7/10;grid-row:2}.g5{grid-column:10/13;grid-row:2}
.g6{grid-column:1/5;grid-row:3}.g7{grid-column:5/7;grid-row:3}.g8{grid-column:7/11;grid-row:3}.g9{grid-column:11/13;grid-row:3}
.h-gal-foot{display:flex;gap:32px;margin-top:40px}
@media (max-width:860px){
.h-sec-head{grid-template-columns:1fr}
.h-gal-grid{grid-template-columns:1fr 1fr;grid-template-rows:none;gap:26px 14px}
.h-gal-grid .mt{grid-column:auto;grid-row:auto}
.h-gal-grid .g1{grid-column:1/-1}
.mt .fig{height:auto;aspect-ratio:1/1}.g1 .fig{aspect-ratio:4/5}
.mt-go{opacity:1;transform:none}
.mt-t{font-size:18px}
}
/* ---------- 05 pottery (mineral, cool) ---------- */
.h-pottery{padding-block:var(--sec);background:
radial-gradient(60% 70% at 25% 40%, rgba(143,160,138,.30), transparent 70%),
radial-gradient(40% 50% at 80% 80%, rgba(105,122,143,.16), transparent 70%),
linear-gradient(180deg,#EEF0E8,#E6EAE3)}
.h-pottery.tone::before{display:none}
.h-pottery-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,110px);align-items:center}
.h-arch{margin:0}
.h-arch .fig{aspect-ratio:4/5;border-radius:48% 48% 4px 4px / 34% 34% 4px 4px;box-shadow:0 50px 80px -50px rgba(74,89,107,.7)}
.h-arch img{object-position:50% 45%}
.h-pottery-copy{display:grid;gap:22px;position:relative}
.h-pottery-copy .h-h2 em{color:var(--blue-ink)}
.h-steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid rgba(46,36,27,.18)}
.h-steps li{display:grid;grid-template-columns:36px 1fr;column-gap:10px;padding:14px 12px 14px 0;border-bottom:1px solid rgba(46,36,27,.18)}
.h-steps li:nth-child(odd){border-right:1px solid rgba(46,36,27,.12);margin-right:12px}
.h-steps .n{grid-row:1/3;font-family:var(--mono);font-size:12px;color:var(--blue-ink);padding-top:4px}
.h-steps strong{font-family:var(--serif);font-weight:400;font-size:20px}
.h-steps li > span:last-child{font-size:14.5px;color:var(--ink-2)}
.h-pt-detail{position:absolute;right:-4%;top:-10%;width:34%;margin:0;transform:rotate(3deg);z-index:0}
.h-pt-detail .fig{aspect-ratio:1/1;border-radius:50%;border:6px solid #EEF0E8;box-shadow:0 20px 40px -24px rgba(46,36,27,.5)}
.h-pt-detail figcaption{display:none}
.h-pottery-copy > :not(.h-pt-detail){position:relative;z-index:1}
.h-bot-pt{right:2%;bottom:0;width:220px;opacity:.4}
@media (max-width:860px){.h-pottery-grid{grid-template-columns:1fr}.h-pt-detail{width:36%;top:-6%;right:0}.h-steps{grid-template-columns:1fr}.h-steps li:nth-child(odd){border-right:none;margin-right:0}}
/* ---------- 06 leather (dark, tactile) ---------- */
.h-leather{background:radial-gradient(50% 70% at 70% 45%, rgba(184,115,78,.22), transparent 70%), radial-gradient(40% 60% at 10% 90%, rgba(110,43,43,.28), transparent 70%), var(--kiln);color:#EFE5D5;padding-block:var(--sec);overflow:clip}
.h-leather.tone::before{display:none}
.h-leather-wall{position:absolute;inset:0 55% 0 0;background:url(/assets/editorial/leather-light-wall.webp) center/cover;opacity:.16;filter:saturate(.8);-webkit-mask:linear-gradient(90deg,#000,transparent);mask:linear-gradient(90deg,#000,transparent)}
.h-leather-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,90px);align-items:center;position:relative}
.h-leather .label{color:#CDB894}
.h-leather .h-h2{color:#F3EADC}
.h-leather .h-h2 em{color:#E2A06E}
.h-leather-copy{display:grid;gap:24px}
.h-ledger{list-style:none;padding:0;margin:0;border-top:1px solid rgba(205,184,148,.25)}
.h-ledger li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px dashed rgba(205,184,148,.28);font-size:17px}
.h-ledger .label{color:#C98E62}
.h-leather .btn:not(.ghost){background:linear-gradient(150deg,#C98458,#9C5A36 60%,#80482A);color:#FFF6EA}
.h-leather-art{position:relative;margin-right:calc(var(--gutter) * -1);padding-bottom:60px}
.lt-big{margin:0}.lt-big .fig{aspect-ratio:4/3;border-radius:3px 0 0 3px;box-shadow:0 40px 80px -30px rgba(0,0,0,.8)}
.lt-big figcaption{color:#A89478}
.lt-small{position:absolute;left:-8%;bottom:0;width:26%;margin:0;transform:rotate(-3deg)}
.lt-small .fig{aspect-ratio:2/3;border:6px solid #2E2620;box-shadow:0 24px 40px -20px rgba(0,0,0,.8)}
.lt-small figcaption{display:none}
@media (max-width:860px){.h-leather-grid{grid-template-columns:1fr}.h-leather-art{order:-1;margin-inline:calc(var(--gutter) * -1)}.lt-big .fig{border-radius:0}.lt-small{left:var(--gutter);width:32%}}
/* ---------- 07 hands ---------- */
.h-hands{padding-block:var(--sec) calc(var(--sec) * .7)}
.h-hands-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px;align-items:end;margin-bottom:48px}
.h-reel{display:flex;gap:22px;overflow-x:auto;padding:10px var(--gutter) 26px;scroll-snap-type:x proximity;align-items:flex-start;scrollbar-width:thin}
.h-reel figure{margin:0;flex:none;scroll-snap-align:start}
.h-reel .fig{height:var(--h,360px);border-radius:2px}
.h-reel .fig img{height:100%;width:auto;max-width:none}
.h-reel .r1{--h:430px}.h-reel .r2{--h:300px;margin-top:90px}.h-reel .r3{--h:260px;margin-top:30px}
.h-reel .r4{--h:440px;margin-top:10px}.h-reel .r5{--h:320px;margin-top:70px}.h-reel .r6{--h:280px;margin-top:140px}
.h-reel figcaption{max-width:32ch}
@media (max-width:860px){.h-hands-head{grid-template-columns:1fr}.h-reel figure{--s:.62}.h-reel .fig{height:calc(var(--h) * .62)}.h-reel figure[class]{margin-top:0}}
/* ---------- 08 shows: a ticket ---------- */
.h-shows{padding-block:var(--sec)}
.h-shows-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,64px);align-items:start}
.ticket{display:grid;grid-template-columns:1fr 76px;background:var(--paper);border-radius:6px;box-shadow:var(--raise);position:relative;
-webkit-mask:radial-gradient(circle 12px at calc(100% - 76px) 0,transparent 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 12px at calc(100% - 76px) 100%,transparent 98%,#000) bottom/100% 51% no-repeat;
mask:radial-gradient(circle 12px at calc(100% - 76px) 0,transparent 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 12px at calc(100% - 76px) 100%,transparent 98%,#000) bottom/100% 51% no-repeat}
.tk-main{padding:clamp(24px,3.5vw,48px);display:grid;gap:10px}
.tk-mon{font-family:var(--mono);font-size:14px;letter-spacing:.3em;text-transform:uppercase;margin:0;color:var(--ink-2)}
.tk-days{font-family:var(--serif);font-size:clamp(96px,14vw,210px);line-height:.82;margin:0;letter-spacing:-.05em;
background:linear-gradient(100deg,var(--leather),var(--terracotta) 50%,#D9894F);-webkit-background-clip:text;background-clip:text;color:transparent}
.tk-days span{font-size:.6em;vertical-align:.25em;margin-inline:.04em}
.tk-name{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3vw,42px);margin:8px 0 0;line-height:1.1}
.tk-place{color:var(--ink-2);margin:0 0 12px}
.tk-stub{border-left:2px dashed rgba(46,36,27,.25);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;background:var(--parchment)}
.tk-stub span{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--leather)}
.tk-stub .tk-no{color:var(--ink-3)}
.h-shows-side{display:grid;gap:26px}
.sh-booth{margin:0}.sh-booth .fig{aspect-ratio:3/2}
.sh-then{display:grid;grid-template-columns:150px 1fr;gap:18px;align-items:center;padding-top:18px;border-top:1px solid rgba(46,36,27,.16)}
.sh-card{margin:0;transform:rotate(-3deg)}.sh-card .fig{aspect-ratio:6/4.25;box-shadow:0 14px 24px -14px rgba(46,36,27,.6)}
.sh-then p{margin:0}.sh-date{font-family:var(--serif);font-size:40px;line-height:1;color:var(--terracotta)}
.count-line{margin-top:8px!important}
@media (max-width:860px){.h-shows-grid{grid-template-columns:1fr}.ticket{grid-template-columns:1fr 54px}.sh-then{grid-template-columns:110px 1fr}}
/* ---------- 09 seventeen cards ---------- */
.h-cards{padding-block:var(--sec);overflow:clip;background:linear-gradient(180deg,transparent,rgba(234,223,204,.7) 30%,rgba(234,223,204,.7) 80%,transparent)}
.h-cards-ghost{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);font-family:var(--serif);font-size:clamp(120px,22vw,340px);white-space:nowrap;color:transparent;-webkit-text-stroke:1px rgba(163,130,77,.35);pointer-events:none;letter-spacing:-.03em}
.h-table{display:flex;overflow-x:auto;padding:40px var(--gutter) 50px;scroll-snap-type:x proximity;position:relative;scrollbar-width:thin}
.pc{flex:none;width:clamp(210px,22vw,290px);margin:0 0 0 -34px;transform:rotate(var(--r));transition:transform .45s var(--ease);scroll-snap-align:center;position:relative}
.pc:first-child{margin-left:0}
.pc .fig{aspect-ratio:6/4.25;background:var(--paper);box-shadow:0 18px 30px -18px rgba(46,36,27,.6),0 1px 0 rgba(0,0,0,.05)}
.pc .fig img{object-fit:contain;background:var(--paper)}
.pc figcaption{text-align:center}
.pc:hover,.pc:focus-within{transform:rotate(0) translateY(-10px) scale(1.04);z-index:5}
.h-cards .link-arrow{display:inline-block;margin-top:8px}
/* ---------- 10 kiln ---------- */
.h-kiln{padding-block:var(--sec)}
.h-kiln-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,2fr);gap:clamp(28px,4vw,64px);align-items:center}
.kl-kathy{margin:0}.kl-kathy .fig{aspect-ratio:3/4;border-radius:3px}
.kl-kathy img{object-position:50% 60%}
.kl-copy{display:grid;gap:22px}
.kl-copy .h-h2 em{color:#C4622F}
.kl-seq{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px 0;counter-reset:k}
.kl-seq li{counter-increment:k;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.kl-seq li::before{content:"0" counter(k) " ";color:#C4622F}
.kl-seq li:not(:last-child)::after{content:"→";margin:0 12px;color:var(--brass)}
.kl-loaded{margin:0;max-width:340px}.kl-loaded .fig{aspect-ratio:4/3}
.thermo{margin:0;position:relative;height:480px;display:grid;grid-template-columns:22px 1fr;gap:12px}
.th-tube{position:relative;height:100%;border-radius:12px;background:rgba(46,36,27,.08);box-shadow:inset 2px 2px 5px rgba(99,73,48,.3),inset -2px -2px 4px rgba(255,255,255,.7)}
.th-fill{position:absolute;left:4px;right:4px;bottom:4px;top:4px;border-radius:8px;background:linear-gradient(0deg,#3B2F27 0%,#6B3A24 30%,#A9502F 55%,#D9823F 78%,#F3C16B 100%)}
.th-scale{list-style:none;margin:0;padding:0;position:absolute;left:34px;top:0;bottom:0}
.th-scale li{position:absolute;bottom:var(--p);transform:translateY(50%);font-family:var(--mono);font-size:10.5px;color:var(--ink-3);white-space:nowrap}
.th-scale li::before{content:"";display:inline-block;width:8px;height:1px;background:currentColor;vertical-align:middle;margin-right:6px}
.th-mark{position:absolute;left:92px;bottom:var(--p);transform:translateY(50%);margin:0;font-size:13px;line-height:1.25;color:var(--ink-2);width:120px}
.th-mark strong{display:block;font-family:var(--serif);font-weight:400;font-size:22px;color:#C4622F}
.th-ref strong{color:var(--blue-ink)}
.thermo figcaption{position:absolute;bottom:-28px;left:0}
.thermo.in .th-fill{animation:fillup 2.2s var(--ease) 1 both}
@keyframes fillup{from{clip-path:inset(100% 0 0 0 round 8px)}to{clip-path:inset(0 0 0 0 round 8px)}}
@media (max-width:1100px){.h-kiln-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}.thermo{grid-column:1/-1;height:auto;grid-template-columns:1fr;padding:0 0 50px}
.th-tube{height:22px;width:100%}.th-fill{background:linear-gradient(90deg,#3B2F27 0%,#6B3A24 30%,#A9502F 55%,#D9823F 78%,#F3C16B 100%)}
.th-scale{position:relative;left:0;height:22px}.th-scale li{bottom:auto;left:var(--p);transform:translateX(-50%);top:4px}.th-scale li::before{display:none}
.th-mark{left:var(--p);bottom:auto;top:-8px;transform:translate(-100%,-100%);text-align:right}.th-ref{transform:translate(0,-100%);text-align:left}
.thermo{margin-top:70px}}
@media (max-width:760px){.h-kiln-grid{grid-template-columns:1fr}.th-scale li:nth-child(even){display:none}}
@media (prefers-reduced-motion:reduce){.thermo.in .th-fill{animation:none}}
/* ---------- 11 kiln club slip ---------- */
.h-club{padding-block:var(--sec)}
.h-club-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,5vw,90px);align-items:center}
.h-club-grid > div:first-child{display:grid;gap:20px}
.slip{display:grid;grid-template-columns:70px 1fr;background:var(--paper);box-shadow:var(--raise);position:relative;
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 14' preserveAspectRatio='none'%3E%3Cpath d='M0 14V6l8 3 9-4 7 5 10-6 8 4 9-2 7 3 10-5 9 4 7-3 8 5 10-6 9 4 8-2 7 4 9-5 10 3 8-3 9 4 7-4 10 5 8-3 9 2 7-4 10 5 9-4 8 3 7-5 9 4 10-2 8 4 9-5 7 3 10-4 8 5 9-3 7 2 10-4 8 4 9-5 8 3 9 4 7-4 10 3 8-2 9 4 7-5 10 4 8-3v8z'/%3E%3C/svg%3E") top/100% 14px no-repeat, linear-gradient(#000,#000) 0 13px/100% calc(100% - 13px) no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 14' preserveAspectRatio='none'%3E%3Cpath d='M0 14V6l8 3 9-4 7 5 10-6 8 4 9-2 7 3 10-5 9 4 7-3 8 5 10-6 9 4 8-2 7 4 9-5 10 3 8-3 9 4 7-4 10 5 8-3 9 2 7-4 10 5 9-4 8 3 7-5 9 4 10-2 8 4 9-5 7 3 10-4 8 5 9-3 7 2 10-4 8 4 9-5 8 3 9 4 7-4 10 3 8-2 9 4 7-5 10 4 8-3v8z'/%3E%3C/svg%3E") top/100% 14px no-repeat, linear-gradient(#000,#000) 0 13px/100% calc(100% - 13px) no-repeat}
.slip-stub{background:var(--sage-ink);color:#EFE8D8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;border-right:2px dashed rgba(247,242,231,.4)}
.slip-stub span{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase}
.slip-no{opacity:.75}
.slip-body{padding:clamp(26px,3vw,42px)}
.slip-hand{font-family:var(--serif);font-style:italic;font-size:26px;color:var(--leather);margin:0 0 14px}
.h-bot-club{left:-30px;top:30px;width:220px;opacity:.45;transform:scaleX(-1)}
@media (max-width:860px){.h-club-grid{grid-template-columns:1fr}.slip{grid-template-columns:44px 1fr}}
/* ---------- 12 visit ---------- */
.h-visit{padding-block:0 0;overflow:clip}
.vs-pano{margin:0}.vs-pano .fig{height:clamp(240px,34vw,460px);border-radius:0}
.vs-pano img{object-position:50% 55%}
.vs-pano figcaption{padding-inline:var(--gutter)}
.h-visit-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr);gap:clamp(28px,4vw,64px);padding-block:clamp(56px,7vw,110px);align-items:start}
.h-visit-grid > div:first-child{display:grid;gap:20px}
.vs-drive{color:var(--clay)}
.vs-info{margin:0;padding:26px 28px;display:grid;gap:14px}
.vs-info dd{margin:2px 0 0;font-family:var(--serif);font-size:21px}
.vs-go{margin-top:6px}
.vs-lamps{margin:0}.vs-lamps .fig{aspect-ratio:3/4}
.vs-land{margin:0}.vs-land .fig{height:clamp(120px,14vw,200px);border-radius:0;-webkit-mask:linear-gradient(180deg,transparent,#000 45%);mask:linear-gradient(180deg,transparent,#000 45%)}
.vs-land figcaption{padding:6px var(--gutter) 0}
@media (max-width:1000px){.h-visit-grid{grid-template-columns:1fr 1fr}.vs-lamps{display:none}}
@media (max-width:700px){.h-visit-grid{grid-template-columns:1fr}}
/* ---------- footer ---------- */
.foot2{position:relative;background:var(--parchment);border-top:1px solid rgba(46,36,27,.16);padding-block:clamp(48px,6vw,80px) 24px;overflow:clip}
.ft-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,2fr) minmax(0,3fr) minmax(0,3fr);gap:clamp(24px,4vw,56px);position:relative;z-index:1}
.ft-line{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--leather);margin:8px 0 0}
.ft-nav{display:grid;gap:8px;align-content:start}
.ft-nav a{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--ink-2)}
.ft-nav a:hover{color:var(--clay)}
.ft-contact p{margin:4px 0;font-family:var(--serif);font-size:19px}
.ft-sign .quiet{gap:10px}.ft-sign .field label{display:none}.ft-sign .field:nth-of-type(2){display:none}
.ft-base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:48px;padding-top:18px;border-top:1px solid rgba(46,36,27,.14);position:relative;z-index:1}
.ft-base .label{font-size:10px}
.ft-bot{position:absolute;right:2%;bottom:0;width:230px;opacity:.5;pointer-events:none}
@media (max-width:1000px){.ft-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.ft-grid{grid-template-columns:1fr}.ft-bot{width:150px}}
/* ---------- studio page grid ---------- */
.h-studio-grid{columns:3 300px;column-gap:22px;padding-bottom:var(--sec)}
.h-studio-grid figure{break-inside:avoid;margin:0 0 26px}
.h-studio-grid .fig img{height:auto}
/* ---------- reveal targets on the new homepage ---------- */
@media (prefers-reduced-motion:no-preference){
.js .h-hero-art > figure{animation:rise 1.1s var(--ease) both}
.js .h-hero-art > .h-belt{animation:settle2 1.1s .25s var(--ease) both}
.js .h-hero-art > .h-kilnfig{animation:settle3 1.1s .4s var(--ease) both}
}
@keyframes settle2{from{opacity:.3;transform:rotate(-7deg) translateY(30px)}to{opacity:1;transform:rotate(-2.5deg)}}
@keyframes settle3{from{opacity:.3;transform:rotate(6deg) translateY(-20px)}to{opacity:1;transform:rotate(1.5deg)}}
/* fixes after first review */
.h-reel,.h-table{scroll-padding-inline:var(--gutter)}
.h-leather .btn.ghost{background:#2A231D;color:#EFE5D5;box-shadow:-3px -3px 8px rgba(255,240,220,.05),4px 5px 12px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.05)}
.h-leather .btn.ghost:hover{color:#E2A06E}
.h-next .count{display:inline}
.h-next > .label:last-child{line-height:1.8}
@media (max-width:860px){
.h-belt figcaption,.h-kilnfig figcaption{display:none}
.h-vase figcaption{position:absolute;right:0;bottom:-22px;white-space:nowrap}
.lt-small{left:auto;right:var(--gutter);bottom:0;width:30%}
.lt-big figcaption{padding-inline:var(--gutter);max-width:60%}
}
/* =====================================================================
V4 · craft journal / studio archive art direction
===================================================================== */
:root{
--olive:#232B22; --olive-2:#2B3529; --espresso:#1E1813; --espresso-2:#2A211A;
--cream-ink:#EFE6D3; --cream-2:#CFC3AA; --hand:"Caveat","Bradley Hand",cursive;
--v4-h2:clamp(40px,5vw,78px);
}
.hand{font-family:var(--hand);font-weight:500;letter-spacing:0;text-transform:none}
.v4-h2{font-family:var(--serif);font-weight:400;font-size:var(--v4-h2);line-height:.98;letter-spacing:-.02em;margin:0;text-wrap:balance}
.v4-h2 em{font-style:italic;color:var(--leather)}
.v4-body{font-size:clamp(17px,1.25vw,19px);line-height:1.62;max-width:48ch;color:var(--ink-2);margin:0}
.btn-line{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 20px;border:1px solid rgba(169,80,47,.55);color:var(--clay);
font-family:var(--serif);font-size:17px;text-decoration:none;border-radius:2px;transition:background .3s,color .3s}
.btn-line:hover{background:var(--clay);color:#FFF6EA}
.btn-line.on-dark{border-color:rgba(239,230,211,.45);color:var(--cream-ink)}
.btn-line.on-dark:hover{background:var(--cream-ink);color:var(--olive)}
.btn.copper{background:linear-gradient(150deg,#C98458,#9C5A36 60%,#80482A);color:#FFF6EA}
/* paper prints + tape: photographs as physical objects */
.print{position:relative;margin:0;background:#FBF7EE;padding:9px 9px 8px;box-shadow:0 1px 1px rgba(46,36,27,.08),0 22px 34px -22px rgba(46,36,27,.55)}
.print .fig{border-radius:0}
.print figcaption{font-size:9.5px;margin-top:7px;color:var(--ink-3)}
.tape{position:absolute;top:-11px;left:50%;width:78px;height:22px;transform:translateX(-50%) rotate(-3deg);z-index:3;
background:linear-gradient(90deg,rgba(234,223,204,.85),rgba(222,208,182,.8));box-shadow:0 1px 2px rgba(46,36,27,.12);
-webkit-mask:linear-gradient(90deg,transparent 0 2px,#000 2px calc(100% - 2px),transparent 0);mask:linear-gradient(90deg,transparent 0 2px,#000 2px calc(100% - 2px),transparent 0);opacity:.92}
.tape.t-r{left:auto;right:14px;transform:rotate(6deg)}
.paper-tag{position:absolute;background:#F3E9D6;padding:10px 16px 8px;font-size:22px;line-height:1.05;color:var(--ink-2);box-shadow:0 12px 20px -14px rgba(46,36,27,.6)}
.stamp{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--clay);border:1px solid rgba(169,80,47,.5);padding:2px 7px;margin-right:12px;transform:rotate(-2deg)}
.v4-margin-l,.v4-margin-r,.v4-arch-bot,.v4-pt-bot,.v4-club-bot{position:absolute;pointer-events:none;z-index:0}
/* ─── 01 hero ─── */
.v4-hero{position:relative;overflow:clip;padding-block:clamp(40px,5vw,80px) clamp(70px,8vw,120px);min-height:min(92vh,880px)}
.v4-stage{position:absolute;top:0;bottom:0;right:0;width:47%;z-index:0;
background:radial-gradient(65% 55% at 55% 45%,rgba(64,78,92,.55),transparent 70%),radial-gradient(50% 40% at 20% 100%,rgba(122,74,46,.35),transparent 70%),#1C1F22;
-webkit-mask:linear-gradient(90deg,transparent,#000 9%);mask:linear-gradient(90deg,transparent,#000 9%)}
.v4-stage::after{content:"";position:absolute;inset:0;background:url(/assets/editorial/leather-light-wall.webp) center/cover;opacity:.12;mix-blend-mode:screen}
.v4-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(24px,4vw,64px);align-items:center}
.v4-hero-copy{display:flex;flex-direction:column;gap:24px;padding-block:20px}
.v4-kicker{color:var(--brass-ink);margin:0}
.v4-display{font-family:var(--serif);font-weight:400;font-size:clamp(52px,7.4vw,124px);line-height:.9;letter-spacing:-.035em;margin:0}
.v4-display .l1{display:block;white-space:nowrap}
.v4-display em{display:block;font-style:italic;color:var(--terracotta);letter-spacing:-.03em;margin-top:.06em;padding-left:.04em}
.v4-lede{font-family:var(--serif);font-size:clamp(19px,1.5vw,23px);line-height:1.45;max-width:36ch;margin:0;color:var(--ink-2)}
.v4-hero-art{position:relative;min-height:620px}
.v4-vase{position:absolute;right:calc(var(--gutter) * -1 + 4%);top:0;width:74%;margin:0;z-index:1}
.v4-vase .fig{aspect-ratio:4/5.2;background:transparent;border-radius:0;
-webkit-mask:radial-gradient(75% 70% at 50% 46%,#000 62%,transparent 100%);mask:radial-gradient(75% 70% at 50% 46%,#000 62%,transparent 100%)}
.v4-vase img{object-position:50% 38%;filter:contrast(1.04) saturate(1.05)}
.v4-tab{position:absolute;right:0;bottom:-6px;z-index:3;background:var(--paper);padding:6px 12px;font-size:9.5px!important;transform:rotate(-1deg);box-shadow:0 8px 14px -10px rgba(0,0,0,.5)}
.v4-kilnprint{position:absolute;left:2%;top:2%;width:30%;z-index:2;transform:rotate(-2.5deg)}
.v4-kilnprint .fig{aspect-ratio:3/4}
.v4-beltprint{position:absolute;left:-6%;bottom:6%;width:44%;z-index:3;transform:rotate(3deg)}
.v4-beltprint .fig{aspect-ratio:4/3}
.v4-note{position:absolute;right:0;top:-8px;z-index:3;color:#E8D9BC;font-size:25px;line-height:1.05;transform:rotate(-6deg);text-align:right}
.v4-margin-l{left:-40px;bottom:-30px;width:180px;opacity:.5}
@media (max-width:980px){
.v4-hero{min-height:0;padding-top:28px}
.v4-stage{top:auto;height:62%;width:100%;-webkit-mask:linear-gradient(180deg,transparent,#000 12%);mask:linear-gradient(180deg,transparent,#000 12%)}
.v4-hero-grid{grid-template-columns:1fr;gap:12px}
.v4-hero-copy{display:contents}
.v4-display{font-size:clamp(46px,13vw,76px)}
.v4-display .l1{white-space:normal}
.v4-hero-art{min-height:0;aspect-ratio:1/1.05;margin-top:30px}
.v4-vase{width:82%;right:-2%}
.v4-kilnprint{width:32%;left:0;top:6%}
.v4-beltprint{width:50%;left:0;bottom:4%}
.v4-note{font-size:20px;top:-18px}
}
/* ─── 02 chapter index ─── */
.v4-index{position:relative;z-index:2;background:var(--paper);border-block:1px solid rgba(46,36,27,.16);box-shadow:inset 0 3px 0 -2px rgba(46,36,27,.08),inset 0 -3px 0 -2px rgba(46,36,27,.08)}
.v4-index-row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr)}
.v4-index-row li + li{border-left:1px solid rgba(46,36,27,.12)}
.v4-index-row a{position:relative;display:grid;justify-items:center;gap:3px;padding:20px 10px 18px;text-decoration:none;color:var(--ink);transition:background .35s}
.v4-index-row img{height:46px;width:auto;margin-bottom:4px;transition:transform .45s var(--ease)}
.ix-n{position:absolute;left:12px;top:10px;font-family:var(--mono);font-size:10px;color:var(--brass-ink)}
.ix-t{font-family:var(--serif);font-size:21px;line-height:1.1}
.v4-index-row .label{font-size:9.5px}
.v4-index-row a::after{content:"";position:absolute;left:30%;right:30%;bottom:8px;height:1.5px;background:var(--terracotta);transform:scaleX(0);transition:transform .35s var(--ease)}
.v4-index-row a:hover{background:var(--bone)}.v4-index-row a:hover img{transform:translateY(-3px) rotate(-4deg)}.v4-index-row a:hover::after{transform:scaleX(1)}
@media (max-width:860px){
.v4-index .wrap{padding-inline:0}
.v4-index-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.v4-index-row::-webkit-scrollbar{display:none}
.v4-index-row li{flex:0 0 31%;scroll-snap-align:start}
.v4-index-row img{height:38px}
}
/* ─── 03 makers ─── */
.v4-makers{position:relative;padding-block:clamp(70px,8vw,130px) clamp(110px,12vw,190px);overflow:clip;
background:radial-gradient(50% 60% at 80% 40%,rgba(165,88,63,.08),transparent 70%)}
.v4-makers-grid{display:grid;grid-template-columns:minmax(0,11fr) minmax(0,13fr);gap:clamp(36px,6vw,110px);align-items:center;padding-right:var(--gutter)}
.v4-makers-photo{position:relative}
.mk-big{margin:0}.mk-big .fig{aspect-ratio:4/5;border-radius:0 3px 3px 0;box-shadow:0 40px 70px -40px rgba(46,36,27,.6)}
.mk-big img{object-position:50% 22%}
.v4-makers-photo .paper-tag{top:28px;left:calc(var(--gutter) + 8px);transform:rotate(-5deg);z-index:2}
.v4-oldprint{position:absolute;right:-14%;bottom:-54px;width:46%;transform:rotate(3deg);z-index:2}
.v4-oldprint .fig{background:#FBF7EE}.v4-oldprint img{object-fit:contain;background:#FBF7EE}
.v4-makers-copy{position:relative;display:grid;gap:22px}
.v4-quote{margin:0;font-family:var(--serif);font-style:italic;font-size:clamp(23px,2.1vw,30px);line-height:1.3;max-width:26ch;color:var(--clay)}
.v4-bios{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid rgba(46,36,27,.2);padding-top:22px}
.v4-bios > div{padding-right:26px}
.v4-bios > div + div{padding:0 0 0 26px;border-left:1px solid rgba(46,36,27,.16)}
.v4-bios h3{font-family:var(--serif);font-weight:400;font-size:28px;margin:0}
.v4-bios .label{margin:4px 0 10px;font-size:10px}
.v4-bios p:last-child{font-size:16px;line-height:1.6;color:var(--ink-2);margin:0}
.v4-annot{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:10px;font-family:var(--serif);font-style:italic;font-size:19px;color:var(--ink-2)}
.v4-margin-r{right:-60px;top:-40px;width:200px;opacity:.45}
@media (max-width:860px){.v4-makers-grid{grid-template-columns:1fr;padding-right:0}.v4-makers-copy{padding-inline:var(--gutter)}.v4-makers-photo{margin-right:12%}
.v4-oldprint{right:-18%;width:54%;bottom:-40px}.v4-bios{grid-template-columns:1fr;gap:22px}.v4-bios > div + div{padding:22px 0 0;border-left:none;border-top:1px solid rgba(46,36,27,.16)}
.v4-makers{padding-bottom:90px}.v4-margin-r{display:none}}
/* ─── 04 archive: dark olive, one torn edge ─── */
.v4-archive{position:relative;background:
radial-gradient(60% 50% at 80% 10%,rgba(126,143,114,.14),transparent 70%),
radial-gradient(50% 60% at 10% 90%,rgba(122,74,46,.12),transparent 70%),var(--olive);
color:var(--cream-ink);padding-block:clamp(90px,10vw,150px) clamp(150px,16vw,240px);margin-top:-2px}
.v4-archive::before{content:"";position:absolute;inset:0;opacity:.35;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .9 0 0 0 0 .85 0 0 0 0 .7 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.torn{position:absolute;left:0;right:0;top:-44px;width:100%;height:46px;display:block}
.torn path{fill:var(--olive)}
.v4-archive .label{color:#B9B08F}
.v4-archive .v4-h2{color:var(--cream-ink)}
.v4-archive .v4-h2 em{color:#E09A6E}
.v4-arch-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;align-items:end;margin-bottom:clamp(40px,5vw,72px);position:relative}
.v4-arch-head .label{margin:0 0 16px}
.v4-arch-note{display:grid;gap:18px;justify-items:start}
.v4-arch-note p{margin:0;color:var(--cream-2);font-size:16.5px;line-height:1.6;max-width:44ch}
.v4-archive .state.archive{color:#D9B27A;display:inline-flex}
.v4-wall{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:92px;gap:30px 22px;position:relative}
.v4-wall .mt{color:var(--cream-ink)}
.v4-wall .fig{outline:1px solid rgba(217,178,122,.28);outline-offset:6px;background:#1a2019}
.v4-wall .mt-meta .label{color:#A9A184}
.v4-wall .mt-m{color:#8E876E}
.v4-wall .mt-go{color:#E09A6E}
.w1{grid-column:1/6;grid-row:1/8}.w2{grid-column:6/10;grid-row:1/4}.w3{grid-column:10/13;grid-row:1/5}
.w4{grid-column:6/9;grid-row:4/8}.w5{grid-column:9/13;grid-row:5/8}
.w6{grid-column:1/4;grid-row:8/11}.w7{grid-column:4/8;grid-row:8/12}.w8{grid-column:8/10;grid-row:8/13}.w9{grid-column:10/13;grid-row:8/11}.w10{grid-column:1/4;grid-row:11/14}
.v4-arch-bot{right:-30px;bottom:40px;width:260px;opacity:.3}
@media (max-width:860px){.v4-arch-head{grid-template-columns:1fr}
.v4-wall{grid-template-columns:1fr 1fr;grid-auto-rows:auto;gap:30px 16px}
.v4-wall .mt{grid-column:auto;grid-row:auto}.v4-wall .w1{grid-column:1/-1}
.v4-wall .fig{height:auto;aspect-ratio:1/1}.v4-wall .w1 .fig{aspect-ratio:4/5}.v4-wall .w7 .fig{aspect-ratio:4/3}.v4-wall .w7{grid-column:1/-1}}
/* ─── 05 pottery: light, the arch crosses up into the archive ─── */
.v4-pottery{position:relative;padding-bottom:clamp(80px,9vw,140px);background:
radial-gradient(55% 60% at 70% 55%,rgba(105,122,143,.14),transparent 70%),linear-gradient(180deg,#EEF0E8,#E9ECE4 70%,var(--bone))}
.v4-pottery-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,5fr) minmax(0,2fr);gap:clamp(28px,5vw,80px);align-items:end}
.v4-arch{margin:clamp(-170px,-12vw,-110px) 0 0;position:relative;z-index:2}
.v4-arch .fig{aspect-ratio:4/5.1;border-radius:50% 50% 3px 3px / 36% 36% 3px 3px;box-shadow:0 60px 90px -50px rgba(20,24,20,.75);outline:1px solid rgba(217,178,122,.35);outline-offset:8px}
.v4-arch img{object-position:50% 45%}
.v4-pottery-copy{display:grid;gap:22px;padding-top:clamp(60px,8vw,120px)}
.v4-pottery-copy .v4-h2 em{color:var(--blue-ink)}
.v4-steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(46,36,27,.22)}
.v4-steps li{display:grid;gap:2px;padding:14px 10px 0 0}
.v4-steps li + li{padding-left:12px;border-left:1px solid rgba(46,36,27,.12)}
.v4-steps .n{font-family:var(--mono);font-size:11px;color:var(--blue-ink)}
.v4-steps strong{font-family:var(--serif);font-weight:400;font-size:21px}
.v4-steps li > span:last-child{font-size:13.5px;color:var(--ink-2);line-height:1.35}
.v4-pt-detail{margin:0 0 30px;transform:rotate(3deg)}
.v4-pt-detail .fig{aspect-ratio:1/1;border-radius:50%;border:7px solid #F2F2EC;box-shadow:0 20px 40px -24px rgba(46,36,27,.5)}
.v4-pt-detail figcaption{text-align:center}
.v4-pt-bot{right:1%;top:40px;width:220px;opacity:.35}
@media (max-width:1000px){.v4-pottery-grid{grid-template-columns:1fr 1fr}.v4-pt-detail{display:none}}
@media (max-width:760px){.v4-pottery-grid{grid-template-columns:1fr}.v4-arch{margin-top:-90px;margin-inline:8%}.v4-pottery-copy{padding-top:10px}.v4-steps{grid-template-columns:1fr 1fr;row-gap:14px}.v4-steps li:nth-child(3){padding-left:0;border-left:none}}
/* ─── 06 leather: espresso, image to the edge ─── */
.v4-leather{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);background:var(--espresso);color:var(--cream-ink);min-height:640px}
.v4-leather::before{content:"";position:absolute;inset:0;opacity:.4;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .8 0 0 0 0 .55 0 0 0 0 .35 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.v4-leather-text{position:relative;z-index:1;padding:clamp(70px,8vw,130px) clamp(28px,4vw,72px) clamp(70px,8vw,130px) var(--gutter);display:grid;gap:24px;align-content:center;
background:radial-gradient(70% 60% at 20% 30%,rgba(184,115,78,.14),transparent 70%)}
.v4-leather-text::after{content:"";position:absolute;inset:26px 18px 26px calc(var(--gutter) - 14px);border:1.5px dashed rgba(163,130,77,.38);pointer-events:none;border-radius:2px}
.v4-leather .label{color:#C9A676}
.v4-leather .v4-h2{color:#F3EADC}.v4-leather .v4-h2 em{color:#E2A06E}
.v4-ledger{list-style:none;padding:0;margin:0;border-top:1px solid rgba(205,184,148,.22)}
.v4-ledger li{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px dashed rgba(205,184,148,.24);font-size:17px}
.v4-ledger .label{color:#B98458}
.v4-leather-img{position:relative}
.v4-leather-img figure{margin:0;height:100%}
.v4-leather-img .fig{height:100%;border-radius:0}
.v4-leather-img img{object-position:50% 50%;filter:contrast(1.08) saturate(1.1)}
.v4-leather-img figcaption{position:absolute;right:16px;bottom:12px;color:#E8DCC6;background:rgba(30,24,19,.7);padding:4px 10px;margin:0}
.v4-wood{position:absolute;left:calc(41.6% - 70px);bottom:-60px;width:150px;z-index:3;transform:rotate(-4deg)}
.v4-wood .fig{aspect-ratio:2/3}
@media (max-width:860px){.v4-leather{grid-template-columns:1fr}.v4-leather-img{order:-1;height:320px}.v4-wood{left:auto;right:var(--gutter);top:240px;bottom:auto;width:110px}
.v4-leather-text::after{inset:14px 10px}}
/* ─── 07 hands: photographic notes ─── */
.v4-hands{padding-block:clamp(120px,12vw,180px) clamp(70px,8vw,120px);background:linear-gradient(180deg,#EFE7D8,var(--bone))}
.v4-hands-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px;align-items:end;margin-bottom:clamp(40px,5vw,70px)}
.v4-notes{display:grid;grid-template-columns:repeat(12,1fr);gap:40px 26px;padding-inline:var(--gutter);max-width:1360px;margin-inline:auto;align-items:start}
.note{position:relative;margin:0;background:#FBF7EE;padding:10px 10px 12px;box-shadow:0 22px 34px -24px rgba(46,36,27,.55)}
.note .fig{border-radius:0}
.note figcaption{display:grid;gap:0;margin-top:8px}
.note figcaption .label{font-size:10px;color:var(--ink)}
.note figcaption .hand{font-size:21px;color:var(--ink-3);line-height:1.1}
.n1{grid-column:1/5;transform:rotate(-1.5deg)}.n1 .fig{aspect-ratio:4/5}
.n2{grid-column:5/8;margin-top:70px;transform:rotate(2deg)}.n2 .fig{aspect-ratio:1/1}
.n3{grid-column:8/13;margin-top:20px;transform:rotate(-1deg)}.n3 .fig{aspect-ratio:16/7}
.n4{grid-column:2/5;margin-top:-10px;transform:rotate(1.5deg)}.n4 .fig{aspect-ratio:3/4}
.n5{grid-column:5/9;margin-top:40px;transform:rotate(-2deg)}.n5 .fig{aspect-ratio:4/3}
.n6{grid-column:9/12;margin-top:-60px;transform:rotate(2.5deg)}.n6 .fig{aspect-ratio:3/4}
@media (max-width:860px){.v4-hands-head{grid-template-columns:1fr}.v4-notes{display:flex;overflow-x:auto;gap:22px;padding:14px var(--gutter) 30px;scroll-snap-type:x proximity}
.note{flex:0 0 68%;margin-top:0!important;scroll-snap-align:center}.n3{flex-basis:86%}}
/* ─── 08 shows: printed program ─── */
.v4-shows{padding-block:clamp(60px,7vw,110px);background:radial-gradient(45% 60% at 18% 50%,rgba(200,116,58,.12),transparent 70%)}
.program{border:1px solid rgba(46,36,27,.35);outline:1px solid rgba(46,36,27,.2);outline-offset:6px;padding:clamp(22px,3vw,40px);background:rgba(251,248,241,.6)}
.pg-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-bottom:14px;border-bottom:3px double rgba(46,36,27,.4)}
.pg-main{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,.9fr);gap:clamp(24px,4vw,60px);align-items:center;padding-block:clamp(26px,3vw,40px)}
.pg-mon{font-family:var(--mono);font-size:14px;letter-spacing:.34em;text-transform:uppercase;margin:0;color:var(--ink-2)}
.pg-days{font-family:var(--serif);font-size:clamp(100px,13vw,200px);line-height:.8;margin:6px 0 0;letter-spacing:-.05em;color:var(--terracotta)}
.pg-days span{font-size:.5em;vertical-align:.3em;color:var(--brass);margin-inline:.04em}
.pg-what{display:grid;gap:10px}
.pg-name{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.2vw,46px);margin:0;line-height:1.05}
.pg-place{color:var(--ink-2);margin:0 0 8px}
.pg-photo{transform:rotate(2deg)}.pg-photo .fig{aspect-ratio:3/2}
.pg-then{display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;padding-top:18px;border-top:3px double rgba(46,36,27,.4)}
.pg-then-d{font-family:var(--serif);font-size:44px;line-height:1;color:var(--clay)}
.pg-then strong{font-family:var(--serif);font-weight:400;font-size:21px}
.pg-count .count b{font-size:34px}
@media (max-width:900px){.pg-main{grid-template-columns:1fr}.pg-photo{max-width:420px}.pg-then{grid-template-columns:auto 1fr}.pg-count{grid-column:1/-1}}
/* ─── 09 cards ─── */
.v4-cards{position:relative;overflow:clip;padding-block:clamp(70px,8vw,120px);background:linear-gradient(180deg,var(--bone),#E8DCC5 40%,#E8DCC5 80%,var(--bone))}
.v4-years{position:absolute;inset:auto 0 18% 0;display:flex;justify-content:space-around;pointer-events:none;font-family:var(--serif);font-size:clamp(90px,14vw,220px);color:transparent;-webkit-text-stroke:1px rgba(163,130,77,.3);letter-spacing:-.04em}
.v4-cards-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px;align-items:end}
.v4-cards-head .label{margin:0 0 14px}
.v4-cards .pc .fig{box-shadow:0 22px 34px -18px rgba(46,36,27,.65),0 0 0 1px rgba(46,36,27,.06)}
@media (max-width:860px){.v4-cards-head{grid-template-columns:1fr}.v4-years{font-size:80px;bottom:30%}.v4-years span:nth-child(odd){display:none}}
/* ─── 10 kiln ─── */
.v4-kiln{padding-block:clamp(80px,9vw,140px);background:radial-gradient(40% 55% at 28% 50%,rgba(226,165,75,.22),transparent 70%)}
.v4-kiln-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,7vw,120px);align-items:center}
.v4-kiln-photo{position:relative;padding-bottom:60px}
.kl-big{margin:0}.kl-big .fig{aspect-ratio:3/4;border-radius:2px;box-shadow:0 40px 80px -40px rgba(107,58,36,.7)}
.kl-big img{object-position:50% 60%}
.kl-print{position:absolute;right:-12%;bottom:0;width:48%;transform:rotate(3deg)}
.kl-print .fig{aspect-ratio:4/3}
.v4-kiln-copy{display:grid;gap:24px}
.v4-kiln-copy .v4-h2 em{color:#C4622F}
.margin-diagram{margin:10px 0 0;max-width:520px;padding:14px 0 10px;border-block:1px solid rgba(46,36,27,.18)}
.margin-diagram svg{width:100%;height:auto;overflow:visible}
.md-axis{stroke:rgba(46,36,27,.25);stroke-width:2}
.md-heat{stroke:url(#none);stroke:#C4622F;stroke-width:2.5;stroke-dasharray:500;stroke-dashoffset:0}
.margin-diagram.in .md-heat{animation:draw 2s var(--ease) both}
@keyframes draw{from{stroke-dashoffset:500}to{stroke-dashoffset:0}}
.md-tick{stroke:rgba(46,36,27,.35)}
.md-num{font-family:var(--mono);font-size:10px;fill:var(--ink-3);text-anchor:middle}
.md-lab{font-family:var(--mono);font-size:11px;letter-spacing:.06em;fill:var(--blue-ink);text-anchor:middle}
.md-lab.hot{fill:#C4622F;text-anchor:end}
.md-cool{fill:var(--blue)}.md-hot{fill:#C4622F}
.margin-diagram figcaption{font-size:9.5px}
.kl-seq{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;counter-reset:k}
.kl-seq li{counter-increment:k;font-family:var(--serif);font-size:20px;color:var(--ink-2)}
.kl-seq li::before{content:"0" counter(k) " ";font-family:var(--mono);font-size:11px;color:#C4622F;vertical-align:.3em}
.kl-seq li:not(:last-child)::after{content:"→";margin:0 14px;color:var(--brass)}
@media (max-width:860px){.v4-kiln-grid{grid-template-columns:1fr}.kl-print{right:-4%}.v4-kiln-photo{margin-right:10%}}
@media (prefers-reduced-motion:reduce){.margin-diagram.in .md-heat{animation:none}}
/* ─── 11 club: a note from the studio ─── */
.v4-club{position:relative;overflow:clip;padding-block:clamp(80px,9vw,140px);background:linear-gradient(180deg,var(--bone),#E7EBE1 30%,#E7EBE1 80%,var(--bone))}
.v4-club-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(36px,6vw,100px);align-items:center}
.v4-club-copy{display:grid;gap:20px}
.v4-club-copy .label{color:var(--sage-ink)}
.v4-club-copy .v4-h2 em{color:var(--sage-ink)}
.letter{position:relative;background:linear-gradient(170deg,#F6EEDD,#EFE3CC);padding:clamp(28px,3.4vw,46px);transform:rotate(-1.2deg);
box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 30px 50px -34px rgba(46,36,27,.6);border:1px solid rgba(163,130,77,.3)}
.letter::before{content:"";position:absolute;inset:10px;border:1px solid rgba(163,130,77,.28);pointer-events:none}
.letter .label{color:var(--brass-ink)}
.letter-hand{font-size:32px;color:var(--leather);margin:6px 0 16px;line-height:1.1}
.rivet{position:absolute;top:16px;right:18px;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#E5CC95,#A3824D 45%,#5F4822)}
.letter .field input{background:rgba(251,248,241,.8)}
.v4-club-bot{left:-80px;bottom:10px;width:420px;opacity:.35}
@media (max-width:860px){.v4-club-grid{grid-template-columns:1fr}.letter{transform:none}}
/* ─── 12 Pink Hill ─── */
.v4-visit{position:relative;overflow:clip}
.v4-visit .vs-pano .fig{height:clamp(260px,36vw,500px)}
.v4-visit-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr);gap:clamp(28px,4vw,64px);padding-block:clamp(60px,7vw,110px);align-items:start}
.v4-visit-copy{display:grid;gap:20px}
.v4-address{font-style:normal;display:grid;gap:4px;align-content:start}
.v4-address img{width:48px;height:auto;margin-bottom:6px}
.addr{font-family:var(--serif);font-size:clamp(30px,3vw,44px);line-height:1.08;margin-bottom:18px}
.ad-line{font-family:var(--serif);font-size:20px;margin-bottom:10px}
.v4-address .h-actions{margin-top:10px}
.vs-lamps{transform:rotate(2.5deg);margin-top:30px}.vs-lamps .fig{aspect-ratio:3/4}
.v4-visit .vs-land{margin:0}
@media (max-width:1000px){.v4-visit-grid{grid-template-columns:1fr 1fr}.vs-lamps{display:none}}
@media (max-width:700px){.v4-visit-grid{grid-template-columns:1fr}}
/* ─── motion hooks ─── */
@media (prefers-reduced-motion:no-preference){
.js .print.pre,.js .note.pre{transform:translateY(18px) rotate(var(--rot,0deg))}
.js .v4-vase{animation:rise 1.2s var(--ease) both}
.js .v4-kilnprint{animation:settle3 1.1s .3s var(--ease) both}
.js .v4-beltprint{animation:settle4 1.1s .45s var(--ease) both}
}
@keyframes settle4{from{opacity:.3;transform:rotate(9deg) translateY(30px)}to{opacity:1;transform:rotate(3deg)}}
@keyframes settle3{from{opacity:.3;transform:rotate(-7deg) translateY(-20px)}to{opacity:1;transform:rotate(-2.5deg)}}
/* V4 refinement pass */
.w6{grid-column:1/4;grid-row:9/12}.w7{grid-column:4/8;grid-row:9/15}.w8{grid-column:8/10;grid-row:9/15}.w9{grid-column:10/13;grid-row:9/12}
.w10{grid-column:1/4;grid-row:12/15}.w11{grid-column:10/13;grid-row:12/15}
.w3{grid-row:1/5}.w5{grid-row:5/9}.w4{grid-row:4/9}.w1{grid-row:1/9}
.v4-archive{padding-bottom:clamp(170px,18vw,260px)}
@media (max-width:860px){.v4-wall .w11{grid-column:auto}}
.v4-hero{padding-bottom:clamp(90px,9vw,130px)}
@media (max-width:980px){.v4-kilnprint figcaption,.v4-beltprint figcaption{display:none}.v4-tab{font-size:8.5px!important}}
@media (max-width:600px){.pg-then{grid-template-columns:1fr;gap:8px}.v4-leather-img figcaption{right:auto;left:var(--gutter);max-width:60%}}
/* =====================================================================
V4.5 · finishing touches: marginalia, atmosphere, documentary detail
===================================================================== */
/* paper: second, finer fiber layer + warm tonal drift on cream sections */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
background:radial-gradient(90% 60% at 0% 0%,rgba(222,204,170,.18),transparent 60%),radial-gradient(70% 50% at 100% 100%,rgba(210,190,150,.14),transparent 60%),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .35' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .36 0 0 0 0 .25 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E")}
main > section{isolation:isolate}
/* ghost botanicals: field-guide marginalia peeking in from the edges */
.ghost{position:absolute;pointer-events:none;z-index:0;height:auto;opacity:.16;user-select:none}
.g-hero-l{left:-70px;top:14%;width:230px;transform:rotate(12deg);opacity:.2}
.g-hero-r{right:-40px;bottom:-30px;width:300px;opacity:.22;z-index:1}
.g-mk{left:-30px;bottom:30px;width:240px;opacity:.26;transform:scaleX(-1) rotate(-8deg);z-index:2}
.g-ar-l{left:-90px;top:28%;width:260px;opacity:.1}
.g-ar-r{right:-160px;top:44%;width:520px;opacity:.1;transform:rotate(-80deg)}
.g-pt-l{left:-70px;bottom:40px;width:250px;opacity:.14}
.g-hd-r{right:-30px;top:60px;width:150px;opacity:.28}
.g-hd-l{left:-40px;bottom:120px;width:260px;opacity:.22;transform:rotate(18deg)}
.g-sh{right:-40px;top:-20px;width:220px;opacity:.2}
.g-kl{right:-26px;top:90px;width:140px;opacity:.26}
.g-cl{right:-30px;top:40px;width:230px;opacity:.26;transform:rotate(90deg)}
.g-vs{left:-60px;top:48%;width:250px;opacity:.2}
.g-vs2{right:-50px;top:52%;width:240px;opacity:.16}
@media (max-width:760px){.ghost{opacity:.1!important;width:150px!important}.g-ar-r,.g-hd-l,.g-vs2{display:none}}
/* folios: running chapter marks in the outer margin */
.folio{position:absolute;right:14px;top:clamp(70px,8vw,120px);writing-mode:vertical-rl;margin:0;z-index:3;
font-family:var(--mono);font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:rgba(107,95,82,.7)}
.folio span{font-family:var(--serif);font-style:italic;font-size:15px;letter-spacing:0;text-transform:none;margin-bottom:10px;color:var(--brass-ink)}
.v4-archive .folio,.v4-leather .folio{color:rgba(207,195,170,.55)}
.v4-archive .folio span,.v4-leather .folio span{color:#C9A676}
.v4-hero .folio{right:auto;left:14px;top:auto;bottom:40px;transform:rotate(180deg)}
@media (max-width:760px){.folio{display:none}}
/* ornament divider from the botanical set */
.orn{display:flex;align-items:center;gap:18px;justify-content:center;margin:0 auto clamp(26px,3vw,40px);max-width:560px;opacity:.75}
.orn span{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(163,130,77,.55))}
.orn span:last-child{background:linear-gradient(90deg,rgba(163,130,77,.55),transparent)}
.orn img{width:160px;height:auto}
.orn.left{margin:0 0 10px;justify-content:flex-start;max-width:340px}.orn.left span:first-child{display:none}
/* hand accents */
.plate-no{font-family:var(--hand);font-size:21px;color:var(--leather);margin:0 0 -10px;transform:rotate(-2deg);transform-origin:left;opacity:.85}
.mk-date{font-size:18px;color:var(--leather);letter-spacing:0;text-transform:none;margin-left:4px}
.hd-note{font-size:22px;color:var(--leather)}
.kl-aside{font-size:24px;color:#C4622F;margin:-14px 0 0 50%;transform:rotate(-4deg)}
/* ─── HERO: warmer, deeper, the vase lives in a scene ─── */
.v4-hero{background:radial-gradient(70% 80% at 18% 30%,rgba(255,250,238,.9),transparent 70%),radial-gradient(40% 50% at 45% 100%,rgba(165,88,63,.07),transparent 70%)}
.v4-stage{width:49%;background:
radial-gradient(42% 38% at 58% 44%,rgba(226,165,75,.20),transparent 70%),
radial-gradient(70% 60% at 55% 45%,rgba(64,78,92,.55),transparent 72%),
radial-gradient(60% 40% at 30% 100%,rgba(122,74,46,.45),transparent 70%),
linear-gradient(180deg,#1E2124,#191715 80%,#221A14);
-webkit-mask:linear-gradient(90deg,transparent,#000 14%);mask:linear-gradient(90deg,transparent,#000 14%)}
.v4-stage::after{opacity:.2}
.v4-glow{position:absolute;left:30%;right:6%;top:18%;bottom:22%;background:radial-gradient(closest-side,rgba(243,193,107,.14),transparent);filter:blur(10px)}
.v4-floor{position:absolute;left:0;right:0;bottom:0;height:24%;background:linear-gradient(180deg,transparent,rgba(58,40,28,.55) 40%,rgba(40,28,20,.8));
border-top:1px solid rgba(207,170,120,.12)}
.v4-shadow{position:absolute;right:calc(var(--gutter) * -1 + 16%);width:48%;bottom:4%;height:34px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent);z-index:0;filter:blur(4px)}
.v4-vase .fig{-webkit-mask:radial-gradient(78% 72% at 50% 46%,#000 64%,transparent 100%);mask:radial-gradient(78% 72% at 50% 46%,#000 64%,transparent 100%)}
.crop{position:absolute;width:22px;height:22px;z-index:3;border-color:rgba(232,217,188,.55);border-style:solid;border-width:0;pointer-events:none}
.crop.c1{right:6%;top:-10px;border-top-width:1px;border-right-width:1px}
.crop.c2{right:calc(74% - 6%);top:-10px;border-top-width:1px;border-left-width:1px}
.v4-kilnprint,.v4-beltprint{box-shadow:0 1px 1px rgba(46,36,27,.1),0 30px 44px -26px rgba(0,0,0,.7)}
.v4-beltprint .fig::after,.v4-kilnprint .fig::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 30px rgba(60,40,20,.25);pointer-events:none}
.v4-kilnprint .fig,.v4-beltprint .fig{position:relative}
.v4-margin-l{opacity:.55;width:200px;left:-50px}
.v4-lede{position:relative}
@media (max-width:980px){.crop{display:none}.v4-shadow{right:6%;width:60%}.plate-no{font-size:18px}}
/* ─── chapter index: a bound strip with stitched rule ─── */
.v4-index{background:linear-gradient(180deg,#FBF8F1,#F4EDDF)}
.v4-index::before,.v4-index::after{content:"";position:absolute;left:0;right:0;height:0;border-top:1px dashed rgba(163,130,77,.4)}
.v4-index::before{top:5px}.v4-index::after{bottom:5px}
/* ─── makers: a studio-journal page ─── */
.v4-makers{background:
radial-gradient(50% 60% at 80% 40%,rgba(165,88,63,.08),transparent 70%),
repeating-linear-gradient(180deg,transparent 0 33px,rgba(105,122,143,.07) 33px 34px) right/48% 100% no-repeat}
.v4-makers-copy::before{content:"";position:absolute;left:-26px;top:0;bottom:0;width:1px;background:rgba(197,101,69,.28)}
.paper-tag{background:linear-gradient(170deg,#F7EEDC,#EFE2C8);padding:14px 18px 10px}
.pin{position:absolute;top:-6px;left:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#E08A64,#A9502F 55%,#5E2716);box-shadow:0 3px 4px rgba(0,0,0,.35)}
.mk-cap{position:absolute;left:var(--gutter);bottom:-26px;font-size:9.5px!important;margin:0}
.v4-oldprint{box-shadow:0 1px 1px rgba(46,36,27,.1),0 30px 40px -24px rgba(46,36,27,.7);background:linear-gradient(170deg,#FBF7EE,#F1E7D3)}
.v4-oldprint::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.18),transparent 40%);pointer-events:none}
.v4-bios h3{position:relative}
.v4-bios h3::after{content:"";display:block;width:34px;height:1px;background:var(--terracotta);margin-top:8px}
.v4-annot li{display:flex;align-items:center}
.v4-annot{padding-top:14px;border-top:1px dashed rgba(46,36,27,.2)}
@media (max-width:860px){.v4-makers-copy::before{display:none}.v4-makers{background-size:100% 100%}.mk-cap{bottom:-22px}}
/* ─── archive transition + richer frame ─── */
.torn{filter:drop-shadow(0 -4px 6px rgba(35,43,34,.18))}
.v4-archive{box-shadow:inset 0 40px 60px -40px rgba(0,0,0,.35)}
.v4-archive::after{content:"";position:absolute;left:0;right:0;bottom:0;height:140px;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(20,26,20,.4))}
.corners{position:relative;padding:28px 30px}
.corners::before,.corners::after{content:"";position:absolute;width:26px;height:26px;border:1px solid rgba(217,178,122,.5);pointer-events:none}
.corners::before{left:0;top:0;border-right:0;border-bottom:0}
.corners::after{right:0;bottom:0;border-left:0;border-top:0}
.v4-archive .v4-h2{font-size:clamp(44px,5.4vw,84px)}
.v4-arch-note p{color:#D7CCB4}
.v4-wall .fig{outline:1px solid rgba(217,178,122,.32);outline-offset:7px;box-shadow:0 0 0 1px rgba(0,0,0,.25),0 30px 40px -30px rgba(0,0,0,.8)}
.v4-wall .mt-meta{padding-top:16px;border-top:1px solid rgba(217,178,122,.14);margin-top:10px}
.v4-wall .mt-t{font-size:22px;color:#F3EADC}
.v4-wall .mt:hover .fig{outline-color:rgba(224,154,110,.7)}
.arch-foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;margin:clamp(40px,5vw,70px) 0 0;padding-top:16px;border-top:1px solid rgba(217,178,122,.18);font-size:10px!important}
/* archive → pottery: soft handoff under the arch */
.v4-pottery{background:
radial-gradient(55% 60% at 70% 55%,rgba(105,122,143,.14),transparent 70%),
linear-gradient(180deg,#DDE1D6 0,#EEF0E8 160px,#E9ECE4 70%,var(--bone))}
.v4-arch::after{content:"";position:absolute;left:10%;right:10%;bottom:-18px;height:26px;border-radius:50%;background:radial-gradient(closest-side,rgba(40,50,40,.35),transparent);z-index:-1}
/* hands: a light desk surface */
.v4-hands{background:radial-gradient(60% 50% at 50% 60%,rgba(255,250,240,.7),transparent 70%),linear-gradient(180deg,#EFE7D8,var(--bone))}
.note{background:linear-gradient(170deg,#FCF8EF,#F2E9D8)}
/* shows / kiln / club / visit: atmosphere, not boxes */
.v4-shows{background:radial-gradient(45% 60% at 18% 50%,rgba(200,116,58,.12),transparent 70%),radial-gradient(40% 50% at 90% 20%,rgba(163,130,77,.08),transparent 70%)}
.program{background:linear-gradient(170deg,rgba(251,248,241,.85),rgba(243,234,217,.7));box-shadow:0 40px 60px -50px rgba(46,36,27,.5)}
.v4-kiln{background:radial-gradient(40% 55% at 28% 50%,rgba(226,165,75,.24),transparent 70%),radial-gradient(30% 40% at 90% 90%,rgba(126,143,114,.1),transparent 70%)}
.letter .tape{top:-12px}
.v4-visit-grid{position:relative}
.v4-visit .vs-pano{position:relative}
.v4-visit .vs-pano::after{content:"";position:absolute;left:0;right:0;bottom:0;height:40%;background:linear-gradient(180deg,transparent,rgba(247,242,231,.35));pointer-events:none}
.foot2{background:linear-gradient(180deg,#EADFCC,#E3D5BE)}
.v4-archive{padding-bottom:clamp(150px,13vw,200px)}
.arch-foot{margin-top:clamp(36px,4vw,56px)}
.ft-bot{opacity:.35}
.v4-hero .folio{bottom:24px}
/* name tag: pinned to the photo's top-right edge, off the faces */
.v4-makers-photo .paper-tag{top:-22px;left:auto;right:-34px;transform:rotate(4deg)}
@media (max-width:860px){.v4-makers-photo .paper-tag{right:-8px;top:-18px;font-size:19px}}
@media (max-width:860px){.mk-cap{display:none}}
.foot2 .brand img{width:44px}
/* Leather & Pottery: adopted from the Dustbloom leather kit (docs/brand-source/leather-kit/).
Site fonts and editorial radii swapped in; the Dustbloom plate is not used. */
/* ══════════════════════════════════════════════════════════════════
LEATHER KIT · tooled-leather UI system (extracted from Dustbloom)
Drop-in:
Everything is scoped under the `lk-` prefix so it won't collide.
Textures are real photographs, embedded as data URIs below.
Fonts (optional): Fraunces 500/700 · Archivo 400/500/600 · JetBrains Mono 400/700
══════════════════════════════════════════════════════════════════ */
:root{
/* hide palette */
--lk-honey:#b96e32; --lk-cognac:#995124; --lk-chestnut:#713819; --lk-walnut:#3e2115;
--lk-oxblood:#542520; --lk-cream:#d7b98d; --lk-moss:#5d6b43; --lk-tobacco:#7d4a24;
--lk-edge:#2c160e; --lk-groove:#241109;
/* metal */
--lk-brass:#a67a36; --lk-dbrass:#5f451f; --lk-copper:#925936; --lk-steel:#27231f;
/* ink on leather */
--lk-ink:#f2dcbb; --lk-ink-soft:#e8c99a; --lk-ink-label:#c08d55; --lk-ink-emb:#f0c48a;
--lk-stitch:rgba(226,196,150,.34);
/* type */
--lk-display:"Newsreader",Georgia,serif;
--lk-ui:"Source Sans 3","Source Sans Pro",system-ui,sans-serif;
--lk-mono:"IBM Plex Mono",ui-monospace,monospace;
/* geometry — Dustbloom used 18–26px. Set lower for editorial sites (e.g. 4px). */
--lk-r-case:6px; --lk-r-panel:4px; --lk-r-ctl:3px;
--lk-stitch-inset:11px;
/* photographed materials */
--lk-tex:url(/assets/leather-kit/leather.webp);
--lk-brasstex:url(/assets/leather-kit/brass.webp);
--lk-rivet:url(/assets/leather-kit/rivet.webp);
--lk-basket:url(/assets/leather-kit/basket.webp);
--lk-rosette:url(/assets/leather-kit/rosette.webp);
}
/* ── ground ─────────────────────────────────────────────────── */
.lk-ground{
font-family:var(--lk-ui);color:var(--lk-ink);
background-color:#4a2513;
background-image:
var(--lk-tex),
radial-gradient(130% 90% at 14% 0%, rgba(255,209,150,.20), transparent 62%),
radial-gradient(120% 120% at 88% 108%, rgba(28,11,4,.75), transparent 60%),
linear-gradient(168deg,#8a4820 0%, #6d3617 46%, #4a2412 100%);
background-size:340px auto, cover, cover, cover;
background-blend-mode:overlay,screen,multiply,normal;
}
/* ── material mixin: any surface becomes leather ────────────── */
.lk-mat{
background-image:
var(--lk-tex),
var(--lk-sheen,radial-gradient(120% 100% at 20% 6%,rgba(255,214,160,.17),transparent 58%)),
var(--lk-tone,linear-gradient(158deg,var(--lk-cognac),var(--lk-chestnut) 60%,#54280f));
background-size:var(--lk-ts,300px) auto, cover, cover;
background-blend-mode:overlay,screen,normal;
}
/* ── saddle stitching (concentric with the corner) ──────────── */
.lk-stitched{position:relative}
.lk-stitched::after{
content:"";position:absolute;inset:var(--lk-stitch-inset);pointer-events:none;
border:2px dashed var(--lk-stitch);
border-radius:max(0px,calc(var(--lk-r,var(--lk-r-panel)) - var(--lk-stitch-inset)));
filter:drop-shadow(0 1px 0 rgba(28,12,4,.7));
}
/* ── embossed / debossed lettering ──────────────────────────── */
.lk-emb{
color:var(--lk-ink-emb);
text-shadow:0 1px 0 rgba(255,232,192,.28), 0 -1px 1px rgba(38,17,7,.85), 0 2px 4px rgba(30,12,3,.6);
}
.lk-deb{ /* blind-debossed: pressed in, not raised */
color:rgba(40,18,6,.75);
text-shadow:0 1px 0 rgba(255,220,175,.22), 0 -1px 0 rgba(20,8,2,.5);
}
/* ── type roles ─────────────────────────────────────────────── */
.lk-display{font-family:var(--lk-display);font-weight:700;letter-spacing:.01em}
.lk-heading{font-family:var(--lk-display);font-weight:700;font-size:15px;letter-spacing:.12em;text-transform:uppercase}
.lk-label{font-family:var(--lk-mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--lk-ink-label);opacity:.6}
.lk-val{font-family:var(--lk-mono);font-size:11px;letter-spacing:.06em;color:#e7c795;opacity:.9}
.lk-caps{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#f2d3a4;
text-shadow:0 1px 2px rgba(28,11,3,.85), 0 -1px 0 rgba(255,214,160,.12)}
/* ── case: the outer object ─────────────────────────────────── */
.lk-case{
--lk-r:var(--lk-r-case);border-radius:var(--lk-r);
--lk-tone:linear-gradient(165deg,#9d5527,#71391a 58%,#4c2411);
padding:clamp(12px,2.6vw,22px);position:relative;
border:1px solid rgba(44,22,10,.9);
box-shadow:
inset 0 2px 0 rgba(255,220,175,.30), inset 0 -3px 6px rgba(30,13,4,.6),
0 2px 0 rgba(255,214,166,.08), 0 24px 60px -22px rgba(12,5,1,.9);
}
.lk-case::before{ /* burnished outer welt */
content:"";position:absolute;inset:6px;border-radius:max(0px,calc(var(--lk-r) - 6px));
border:1px solid rgba(38,18,7,.55);box-shadow:inset 0 1px 0 rgba(255,214,166,.16);pointer-events:none;
}
/* ── panel: a stitched leather card ─────────────────────────── */
.lk-panel{
--lk-r:var(--lk-r-panel);border-radius:var(--lk-r);position:relative;overflow:hidden;
padding:calc(var(--lk-stitch-inset) + clamp(7px,1.6vw,12px));
--lk-tone:linear-gradient(158deg,#8d4d23,#6b3517 62%,#4b2411);
}
.lk-panel-head{display:flex;align-items:center;gap:10px;margin:0 0 13px;flex-wrap:wrap}
/* ── inset well (a window cut into the leather) ─────────────── */
.lk-well{
border-radius:16px;overflow:hidden;background:#1b0d05;position:relative;
box-shadow:inset 0 4px 10px rgba(0,0,0,.95), inset 0 -2px 0 rgba(255,205,150,.10), 0 1px 0 rgba(255,214,166,.20);
}
.lk-well::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
box-shadow:inset 0 0 0 1px rgba(255,214,166,.14), inset 0 0 22px 6px rgba(23,10,3,.8)}
/* ── tooled dividers ────────────────────────────────────────── */
.lk-divider{height:11px;border-radius:4px;margin:16px 0 14px;
background-image:var(--lk-basket);background-size:auto 100%;opacity:.38;
box-shadow:inset 0 1px 3px rgba(20,8,2,.85), 0 1px 0 rgba(255,214,166,.14)}
.lk-rule{flex:1;height:9px;background-image:var(--lk-basket);background-size:auto 100%;
border-radius:3px;opacity:.4;box-shadow:inset 0 1px 2px rgba(24,10,3,.8), 0 1px 0 rgba(255,214,166,.14)}
.lk-stitchline{height:0;border-top:2px dashed var(--lk-stitch);margin:14px 0;
filter:drop-shadow(0 1px 0 rgba(28,12,4,.7))}
/* ── hardware ───────────────────────────────────────────────── */
.lk-rivet{display:inline-block;width:14px;height:14px;border-radius:50%;flex:0 0 auto;
background-image:var(--lk-rivet);background-size:cover;
box-shadow:0 1px 2px rgba(18,7,1,.8), inset 0 1px 0 rgba(255,225,185,.35)}
.lk-corner-rivets{position:absolute;inset:var(--lk-stitch-inset);pointer-events:none}
.lk-corner-rivets span{position:absolute;width:13px;height:13px;border-radius:50%;
background-image:var(--lk-rivet);background-size:cover;
box-shadow:0 1px 2px rgba(18,7,1,.8), inset 0 1px 0 rgba(255,225,185,.3)}
.lk-corner-rivets span:nth-child(1){left:0;top:0}
.lk-corner-rivets span:nth-child(2){right:0;top:0}
.lk-corner-rivets span:nth-child(3){left:0;bottom:0}
.lk-corner-rivets span:nth-child(4){right:0;bottom:0}
.lk-rosette{position:absolute;right:2%;bottom:-4%;width:min(42%,215px);aspect-ratio:330/228;
background:var(--lk-rosette) center/contain no-repeat;opacity:.5;
mix-blend-mode:soft-light;pointer-events:none;filter:saturate(.7) contrast(1.1)}
.lk-plate{display:block;width:100%;max-width:clamp(240px,40vw,420px);aspect-ratio:1;margin:0 auto;
background:var(--lk-plate) center/contain no-repeat;
filter:drop-shadow(0 12px 26px rgba(16,6,1,.6)) drop-shadow(0 2px 0 rgba(255,214,166,.08))}
/* ── strap + buckle button ──────────────────────────────────── */
.lk-strapbtn{appearance:none;border:0;padding:0;cursor:pointer;background:none;color:inherit;
display:inline-flex;align-items:center;-webkit-tap-highlight-color:transparent}
.lk-strapbtn .lk-strap{
--lk-tone:linear-gradient(178deg,#b06a33,#8e4b21 52%,#5d2d12);
border-radius:12px 4px 4px 12px;
padding:16px clamp(22px,4vw,34px) 16px clamp(20px,3.6vw,28px);
min-height:60px;display:flex;align-items:center;gap:12px;position:relative;
transition:transform .18s cubic-bezier(.3,1.4,.5,1),filter .18s;
}
.lk-strapbtn .lk-strap::after{content:"";position:absolute;inset:8px;border:2px dashed rgba(226,196,150,.30);
border-radius:5px 2px 2px 5px;filter:drop-shadow(0 1px 0 rgba(28,12,4,.7));pointer-events:none}
.lk-strapbtn .lk-word{font-family:var(--lk-display);font-weight:700;font-size:19px;letter-spacing:.10em;text-transform:uppercase}
.lk-strapbtn:active .lk-strap{transform:translateX(4px);filter:brightness(.94)}
.lk-strapbtn[aria-pressed="true"] .lk-strap{transform:translateX(10px)}
.lk-buckle{width:84px;height:70px;margin-left:-12px;flex:0 0 auto;filter:drop-shadow(0 3px 4px rgba(24,10,2,.7))}
.lk-buckle svg{display:block;width:100%;height:100%}
/* ── bookmark tabs ──────────────────────────────────────────── */
.lk-tabs{display:flex;gap:6px;flex-wrap:wrap;align-items:flex-end}
.lk-tab{appearance:none;border:0;cursor:pointer;font:inherit;
--lk-tone:linear-gradient(180deg,#7e4520,#5e3116 70%,#472310);--lk-ts:220px;
border-radius:12px 12px 3px 3px;padding:14px 16px 11px;min-height:46px;position:relative;
color:#e0b47c;letter-spacing:.16em;font-size:10.5px;font-weight:600;text-transform:uppercase;
transition:transform .16s,filter .16s;
box-shadow:inset 0 1px 0 rgba(255,205,150,.16), inset 0 -3px 5px rgba(28,12,4,.5), 0 3px 5px -2px rgba(22,9,2,.7)}
.lk-tab[aria-selected="true"]{
--lk-tone:linear-gradient(180deg,#bd7137,#9a5426 70%,#7c4019);color:#f4d9ae;transform:translateY(-3px);
box-shadow:inset 0 1px 0 rgba(255,225,182,.42), inset 0 -2px 4px rgba(40,18,6,.4), 0 5px 9px -3px rgba(20,8,2,.7)}
.lk-tab::before{content:"";position:absolute;top:5px;left:50%;transform:translateX(-50%);
width:9px;height:9px;border-radius:50%;background-image:var(--lk-rivet);background-size:cover;
opacity:0;transition:opacity .18s;box-shadow:0 1px 1px rgba(20,8,2,.7), inset 0 1px 0 rgba(255,220,180,.4)}
.lk-tab[aria-selected="true"]::before{opacity:1}
/* ── pressed chip (toggle button) ───────────────────────────── */
.lk-chip{appearance:none;border:0;font:inherit;cursor:pointer;
font-family:var(--lk-ui);font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
padding:8px 11px;border-radius:9px;min-height:34px;color:#c79a63;
background:linear-gradient(180deg,#4a2411,#5c2d14);
box-shadow:inset 0 2px 4px rgba(20,8,2,.8), 0 1px 0 rgba(255,214,166,.12);transition:color .2s,background .2s}
.lk-chip[aria-pressed="true"]{color:#f8ddb0;background:linear-gradient(180deg,#a75d29,#7f421b);
box-shadow:inset 0 1px 0 rgba(255,226,184,.42), 0 2px 5px -2px rgba(20,8,2,.8)}
/* ── raised leather tile / card (off → on lifts) ────────────── */
.lk-tile{border-radius:13px;padding:9px 10px;position:relative;
background:linear-gradient(180deg,#7b4220,#5e3016 72%,#4a2411);
box-shadow:inset 0 1px 0 rgba(255,205,150,.14), inset 0 -3px 6px rgba(26,11,3,.55), 0 2px 4px -1px rgba(20,8,2,.65);
transition:background .22s, box-shadow .22s, transform .22s}
.lk-tile.is-on,.lk-tile:hover{background:linear-gradient(180deg,#b56c33,#8d4a20 72%,#6d3617);
box-shadow:inset 0 1px 0 rgba(255,228,186,.44), inset 0 -2px 5px rgba(40,18,6,.4), 0 4px 9px -3px rgba(18,7,1,.75);
transform:translateY(-2px)}
/* ── word tag (pressed leather lozenge; .is-pin = brass) ───── */
.lk-tag{appearance:none;border:0;cursor:pointer;font:inherit;
font-family:var(--lk-display);font-weight:500;font-size:18px;color:#e7c496;padding:7px 12px;border-radius:10px;
background:linear-gradient(180deg,#5b2c14,#48210f);
box-shadow:inset 0 1px 0 rgba(255,205,150,.13), inset 0 -2px 4px rgba(22,9,2,.5), 0 1px 0 rgba(255,214,166,.09);
transition:color .28s, background .28s, transform .18s}
.lk-tag.is-pin{color:#1f0d05;background:linear-gradient(180deg,#e0b378,#bb8546);
box-shadow:inset 0 1px 0 rgba(255,240,210,.6), 0 2px 5px -1px rgba(18,7,1,.7)}
/* ── slider: leather channel + brass handle ─────────────────── */
.lk-track{position:relative;height:44px;border-radius:11px;cursor:pointer;touch-action:pan-y;user-select:none;
background:linear-gradient(180deg,#3d1d0c,#5a2c13 60%,#4a2410);
box-shadow:inset 0 3px 6px rgba(20,8,2,.9), inset 0 -1px 0 rgba(255,205,150,.14), 0 1px 0 rgba(255,214,166,.16)}
.lk-track .lk-groove{position:absolute;left:5px;right:5px;top:50%;transform:translateY(-50%);height:8px;border-radius:5px;
box-shadow:inset 0 2px 3px rgba(16,6,1,.85)}
.lk-track .lk-fill{position:absolute;left:5px;top:50%;transform:translateY(-50%);height:8px;border-radius:5px;width:var(--v,50%);
background:linear-gradient(90deg,rgba(151,84,38,.55),rgba(214,151,84,.85));
box-shadow:inset 0 1px 1px rgba(255,220,180,.35), 0 0 8px rgba(210,140,70,.25)}
.lk-handle{position:absolute;top:50%;left:var(--v,50%);width:34px;height:34px;border-radius:9px;transform:translate(-50%,-50%);
background-image:var(--lk-brasstex);background-size:cover;background-position:center;border:1px solid rgba(52,34,10,.7);
box-shadow:inset 0 1px 0 rgba(255,238,200,.5), inset 0 -2px 3px rgba(40,24,4,.6), 0 2px 3px rgba(20,8,2,.75), 0 6px 12px -6px rgba(0,0,0,.7)}
.lk-handle::after{content:"";position:absolute;left:50%;top:6px;bottom:6px;width:2px;transform:translateX(-50%);
background:rgba(52,32,8,.55);box-shadow:1px 0 0 rgba(255,226,180,.25)}
/* ── knob: stitched collar + brass cap ──────────────────────── */
.lk-knob{display:inline-grid;justify-items:center;gap:8px;cursor:ns-resize;user-select:none;touch-action:pan-x}
.lk-collar{width:clamp(78px,17vw,96px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;position:relative;
background:radial-gradient(circle at 32% 24%,#a45c2a,#6d3416 62%,#48210e);
box-shadow:inset 0 3px 8px rgba(20,8,2,.85), inset 0 -1px 0 rgba(255,205,150,.16), 0 1px 0 rgba(255,214,166,.16)}
.lk-collar::before{content:"";position:absolute;inset:5px;border-radius:50%;
border:2px dashed rgba(226,196,150,.24);filter:drop-shadow(0 1px 0 rgba(28,12,4,.6))}
.lk-cap{width:72%;aspect-ratio:1;border-radius:50%;position:relative;transform:rotate(var(--a,0deg));
background-image:var(--lk-brasstex);background-size:150% 150%;background-position:center;border:1px solid rgba(52,34,10,.75);
box-shadow:inset 0 2px 0 rgba(255,240,205,.45), inset 0 -3px 6px rgba(38,22,3,.65), 0 3px 5px rgba(20,8,2,.7), 0 10px 18px -10px rgba(0,0,0,.8)}
.lk-cap::after{content:"";position:absolute;left:50%;top:8%;width:3px;height:34%;border-radius:2px;
transform:translateX(-50%);background:#2e1c05;box-shadow:0 0 0 1px rgba(255,232,190,.3)}
/* ── toggle: brass pin in a leather slot ────────────────────── */
.lk-toggle{appearance:none;border:0;font:inherit;cursor:pointer;text-align:left;
display:inline-flex;align-items:center;gap:11px;padding:9px 12px;border-radius:13px;min-height:46px;
background:linear-gradient(180deg,#4a2410,#5d2e14 65%,#4a2310);
box-shadow:inset 0 3px 6px rgba(20,8,2,.85), inset 0 -1px 0 rgba(255,205,150,.13), 0 1px 0 rgba(255,214,166,.14)}
.lk-toggle .lk-slot{position:relative;width:44px;height:22px;border-radius:11px;flex:0 0 auto;
background:linear-gradient(180deg,#2c1509,#42200e);box-shadow:inset 0 2px 4px rgba(12,4,0,.9), inset 0 -1px 0 rgba(255,205,150,.12)}
.lk-toggle .lk-pin{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;
background-image:var(--lk-brasstex);background-size:cover;border:1px solid rgba(52,34,10,.7);
box-shadow:inset 0 1px 0 rgba(255,240,205,.5), 0 2px 3px rgba(16,6,1,.8);
transition:transform .17s cubic-bezier(.3,1.5,.5,1),filter .17s;filter:saturate(.35) brightness(.72)}
.lk-toggle[aria-checked="true"] .lk-pin{transform:translateX(22px);filter:none}
.lk-toggle .lk-tl{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#b98c55;text-shadow:0 1px 2px rgba(24,9,2,.8)}
.lk-toggle[aria-checked="true"] .lk-tl{color:#f6dcae}
/* ── progress: burnished groove ─────────────────────────────── */
.lk-progress{height:9px;border-radius:5px;position:relative;overflow:hidden;
background:linear-gradient(180deg,#3b1c0b,#4e2611);box-shadow:inset 0 2px 5px rgba(18,7,1,.9), 0 1px 0 rgba(255,214,166,.14)}
.lk-progress i{display:block;height:100%;width:var(--v,40%);border-radius:5px;
background:linear-gradient(90deg,#8a4a1e,#e2a35a 70%,#f6dcae);box-shadow:0 0 8px rgba(226,150,70,.35)}
/* ── tone presets (last, so they override component tones) ── */
.lk-tone-light {--lk-tone:linear-gradient(178deg,#b06a33,#8e4b21 52%,#5d2d12)}
.lk-tone-mid {--lk-tone:linear-gradient(158deg,#8d4d23,#6b3517 62%,#4b2411)}
.lk-tone-dark {--lk-tone:linear-gradient(180deg,#7e4520,#5e3116 70%,#472310)}
.lk-tone-ox {--lk-tone:linear-gradient(160deg,#6a2e27,#542520 60%,#3a1814)}
/* ── focus ──────────────────────────────────────────────────── */
.lk-ground :focus-visible{outline:2px dashed rgba(238,212,166,.92);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
.lk-ground *{transition:none!important}
}
/* =====================================================================
Leather & Pottery · leather-kit applications
Leather is a section material on a bone ground (never the page ground),
editorial radii, brass only as hardware (buckle, rivets).
===================================================================== */
:root{--lk-stitch:rgba(236,208,160,.42)}
.lk-ground{color:var(--lk-ink)}
/* brand marks */
.site-head2 .brand img{filter:drop-shadow(0 1px 1px rgba(30,12,3,.25))}
.foot2 .brand .ft-coin{width:62px;height:62px}
.lp-emblem{display:block;height:auto;pointer-events:none;user-select:none}
/* strap + buckle, sized for an editorial page */
.lk-strapbtn{text-decoration:none;color:var(--lk-ink-emb)}
.lk-strapbtn .lk-strap{min-height:52px;padding:12px 24px 12px 20px;border-radius:6px 2px 2px 6px;
box-shadow:inset 0 1px 0 rgba(255,222,180,.34), inset 0 -2px 4px rgba(30,13,4,.5), 0 2px 3px -1px rgba(20,8,2,.55)}
.lk-strapbtn .lk-strap::after{inset:6px;border-radius:3px 1px 1px 3px;border-color:rgba(236,208,160,.42)}
.lk-strapbtn .lk-word{font-family:var(--serif);font-weight:600;font-size:17px;letter-spacing:.06em;text-transform:none}
.lk-strapbtn .lk-buckle{width:68px;height:57px;margin-left:-10px}
.lk-strapbtn .lk-buckle img{display:block;width:100%;height:100%}
.lk-strapbtn:hover .lk-strap{transform:translateX(5px);filter:brightness(1.06)}
.lk-strapbtn:focus-visible{outline:2px dashed var(--terracotta);outline-offset:4px}
.lk-strapbtn[disabled]{opacity:.6;cursor:progress}
/* home · chapter V: the text column is cut from the hide */
.v4-leather{overflow:visible}
.v4-leather-text::after{border:2px dashed var(--lk-stitch);border-radius:3px;filter:drop-shadow(0 1px 0 rgba(28,12,4,.75))}
.v4-leather .v4-h2{text-shadow:0 1px 0 rgba(255,232,192,.14),0 -1px 1px rgba(38,17,7,.8)}
.v4-leather .v4-ledger{border-top:0;position:relative;padding-top:14px}
.v4-leather .v4-ledger::before{content:"";position:absolute;left:0;right:0;top:0;height:9px;border-radius:2px;
background-image:var(--lk-basket);background-size:auto 100%;opacity:.45;box-shadow:inset 0 1px 2px rgba(24,10,3,.8),0 1px 0 rgba(255,214,166,.14)}
.v4-leather .v4-ledger li{border-bottom:2px dashed rgba(236,208,160,.18)}
.lt-coin{position:absolute;z-index:3;width:clamp(120px,12vw,170px);left:calc(41.66% - clamp(60px,6vw,85px));top:clamp(40px,6vw,80px);transform:rotate(-8deg)}
@media (max-width:860px){.lt-coin{left:auto;top:auto;right:22px;bottom:40px;width:96px}}
/* leather collection · page head is a band of hide */
.lt-head{max-width:none;display:block;padding-block:clamp(56px,7vw,96px);margin-bottom:clamp(28px,4vw,48px);position:relative}
.lt-head::after{content:"";position:absolute;inset:12px;border:2px dashed var(--lk-stitch);border-radius:3px;pointer-events:none;filter:drop-shadow(0 1px 0 rgba(28,12,4,.75))}
.lt-head-in{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
.lt-head-in > div{display:grid;gap:20px;justify-items:start}
.lt-head .label{color:var(--lk-ink-label)}
.lt-head .display-l{color:#F3E4CC;text-shadow:0 1px 0 rgba(255,232,192,.14),0 -1px 1px rgba(38,17,7,.8)}
.lt-head .display-l em{color:#E9A874}
.lt-head .prose{color:#E8D2B2;max-width:56ch}
.lt-head-coin{width:clamp(120px,15vw,190px);transform:rotate(-6deg)}
@media (max-width:700px){.lt-head-in{grid-template-columns:1fr}.lt-head-coin{width:112px}}
/* belt order · a paper card held in a leather case */
.belt-case{--lk-r:6px;align-self:start;padding:clamp(18px,2.6vw,28px)}
.belt-case .lk-corner-rivets{inset:7px}
.belt-case .belt-card{position:static;background:var(--paper);border-radius:2px;padding:clamp(20px,3vw,34px);position:relative;
box-shadow:0 1px 0 rgba(255,236,206,.25),0 10px 24px -14px rgba(16,6,1,.8)}
.belt-case .lk-strapbtn{margin-top:6px}
/* a belt strap runs across the footer, above the base line */
.ft-strap{--lk-tone:linear-gradient(178deg,#9c5a2b,#7a3f1c 55%,#55290f);height:18px;margin-top:clamp(28px,3.5vw,44px);border-radius:2px;position:relative;
box-shadow:inset 0 1px 0 rgba(255,222,180,.3), inset 0 -2px 3px rgba(30,13,4,.5), 0 2px 4px -2px rgba(20,8,2,.5)}
.ft-strap::after{content:"";position:absolute;left:10px;right:10px;top:50%;border-top:1.5px dashed rgba(236,208,160,.5);transform:translateY(-50%)}
.ft-strap i{position:absolute;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:var(--lk-rivet) center/cover;box-shadow:0 1px 1px rgba(18,7,1,.8)}
.ft-strap i:first-child{left:22%}.ft-strap i:last-child{right:22%}
/* ── realistic saddle stitching (Sep 28): slanted waxed thread in punched holes,
replaces the dashed borders. Put .lk-seam on any ::after frame. ── */
:root{--lk-stitch-h:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cellipse cx='2.2' cy='5.1' rx='1.25' ry='1.05' fill='%231a0a03' fill-opacity='.75'/%3E%3Cellipse cx='9.8' cy='2.9' rx='1.25' ry='1.05' fill='%231a0a03' fill-opacity='.75'/%3E%3Cpath d='M2.6 5.6 9.6 3.4' stroke='%231a0a03' stroke-opacity='.55' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M2.5 4.9 9.5 2.7' stroke='%23c99e66' stroke-width='1.9' stroke-linecap='round'/%3E%3Cpath d='M3.1 4.4 8.9 2.5' stroke='%23f6e2bb' stroke-opacity='.75' stroke-width='.6' stroke-linecap='round'/%3E%3C/svg%3E");--lk-stitch-v:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12' viewBox='0 0 8 12'%3E%3Cg transform='rotate%2890 4 4%29 translate%280 0%29'%3E%3Cellipse cx='2.2' cy='5.1' rx='1.25' ry='1.05' fill='%231a0a03' fill-opacity='.75'/%3E%3Cellipse cx='9.8' cy='2.9' rx='1.25' ry='1.05' fill='%231a0a03' fill-opacity='.75'/%3E%3Cpath d='M2.6 5.6 9.6 3.4' stroke='%231a0a03' stroke-opacity='.55' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M2.5 4.9 9.5 2.7' stroke='%23c99e66' stroke-width='1.9' stroke-linecap='round'/%3E%3Cpath d='M3.1 4.4 8.9 2.5' stroke='%23f6e2bb' stroke-opacity='.75' stroke-width='.6' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");
--lk-seam:var(--lk-stitch-h) left top/12px 8px repeat-x,var(--lk-stitch-h) left bottom/12px 8px repeat-x,
var(--lk-stitch-v) left top/8px 12px repeat-y,var(--lk-stitch-v) right top/8px 12px repeat-y}
.lk-stitched::after,.lt-head::after,.v4-leather-text::after,.lk-strapbtn .lk-strap::after{border:0!important;background:var(--lk-seam);filter:none;border-radius:0}
.ft-strap::after{border:0;height:8px;background:var(--lk-stitch-h) left center/12px 8px repeat-x}
.lk-stitchline{border:0;height:8px;background:var(--lk-stitch-h) left center/12px 8px repeat-x;filter:none}
/* ── higher-resolution hide (scripts/leather_texture.py): 512px tile, 1024px for retina ── */
:root{--lk-tex:image-set(url(/assets/leather-kit/leather.webp) 1x,url(/assets/leather-kit/leather-2x.webp) 2x)}
.lk-ground,.lk-mat{background-blend-mode:screen,multiply,multiply,normal}
.lk-ground{background-image:radial-gradient(130% 90% at 14% 0%,rgba(255,214,160,.14),transparent 62%),
radial-gradient(120% 120% at 88% 108%,rgba(40,16,5,.62),transparent 60%),
linear-gradient(168deg,#b56a38 0%,#8e4d26 46%,#5a2d14 100%),var(--lk-tex);
background-size:cover,cover,cover,512px auto}
.lk-mat{background-image:var(--lk-sheen,radial-gradient(120% 100% at 20% 6%,rgba(255,214,160,.14),transparent 58%)),
radial-gradient(120% 120% at 90% 110%,rgba(40,16,5,.35),transparent 60%),
var(--lk-tone,linear-gradient(158deg,var(--lk-cognac),var(--lk-chestnut) 60%,#54280f)),var(--lk-tex);
background-size:cover,cover,cover,var(--lk-ts,512px) auto}
.lk-tab{--lk-ts:384px}
.v4-leather-text.lk-ground{background-size:cover,cover,cover,512px auto}
/* ── homepage leather chapter: spacing + contrast pass (Sep 28) ── */
.v4-leather-text{gap:18px;padding-block:clamp(56px,6.5vw,96px);padding-right:clamp(32px,4.5vw,80px)}
.v4-leather-text .label{color:#D8B07C}
.v4-leather .v4-h2{margin:0 0 6px}
.v4-lt-body{display:grid;gap:10px;max-width:46ch}
.v4-lt-body p{margin:0;color:#EFE1CB;font-size:17px;line-height:1.55}
.v4-lt-body .lt-lead{font-family:var(--serif);font-size:21px;color:#F6EBD6}
.v4-leather .v4-ledger{margin-top:8px;padding-top:12px;max-width:46ch}
.v4-leather .v4-ledger li{padding:8px 0;font-size:16px;color:#EFE1CB}
.v4-leather .v4-ledger .label{color:#C9A676;font-size:10px}
.v4-leather .h-actions{margin-top:10px}
.lt-coin{top:clamp(28px,4vw,52px)}
@media (max-width:860px){.v4-leather-text{padding-inline:var(--gutter)}}
/* Leather & Pottery: adopted from Graham's pottery kit (docs/brand-source/pottery-kit/). Glaze crops are Kathy's own work. */
/* ══════════════════════════════════════════════════════════════════
POTTERY KIT · Kathy Whitley glaze + clay UI system
Drop-in:
Everything is prefixed `pk-`. Glaze surfaces are crops of Kathy's own
photographed work (leatherandpottery.com archive, 2013–2022).
Fonts (matches the L&P homepage): Newsreader · Source Sans 3 · IBM Plex Mono
══════════════════════════════════════════════════════════════════ */
:root{
/* ground (L&P v3 tokens) */
--pk-bone:#F7F2E7; --pk-paper:#FBF8F1; --pk-ink:#2E241B; --pk-ink-2:#54483C; --pk-ink-3:#6B5F52;
--pk-kiln:#1F1B17;
/* clay + glaze colors, sampled from the work */
--pk-bisque:#D8C3A0; --pk-bisque-2:#C4A97F; --pk-slip:#EDE3CF;
--pk-copper:#C0432F; --pk-celadon:#A9C2A6; --pk-ash:#8E99A2; --pk-tenmoku:#2B2420;
--pk-iron:#A0622C; --pk-green:#6F9A5A; --pk-turq:#4F9A96; --pk-cobalt:#4B5F8F; --pk-amber:#9A5A2E;
--pk-ember:#C8743A; --pk-brass:#A3824D;
/* type */
--pk-serif:"Newsreader","Iowan Old Style",Georgia,serif;
--pk-sans:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif;
--pk-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
/* line + radius */
--pk-hair:1px solid rgba(46,36,27,.14); --pk-rule:1px solid rgba(46,36,27,.28);
--pk-r:3px;
/* photographed glazes (Kathy Whitley) */
--pk-g-tree:url(/assets/pottery-kit/sgraffito-tree.webp); /* carved tree, green/blue over speckled clay */
--pk-g-swirl:url(/assets/pottery-kit/ash-swirl.webp); /* carved spirals, blue-grey ash */
--pk-g-copper:url(/assets/pottery-kit/copper-red.webp); /* copper red, speckled */
--pk-g-fern:url(/assets/pottery-kit/celadon-fern.webp); /* mint celadon, wax-resist ferns */
--pk-g-tenmoku:url(/assets/pottery-kit/tenmoku-tree.webp); /* dark tenmoku, sgraffito trees */
--pk-g-iron:url(/assets/pottery-kit/iron-carved.webp); /* iron amber / green, incised */
--pk-g-lotus:url(/assets/pottery-kit/green-lotus.webp); /* green celadon, carved leaves */
--pk-g-heron:url(/assets/pottery-kit/amber-heron.webp); /* amber plate, heron */
--pk-g-ink:url(/assets/pottery-kit/ink-leaf.webp); /* black slip, white leaf band */
--pk-g-iris:url(/assets/pottery-kit/white-iris.webp); /* white shino, blue iris brushwork */
--pk-kilndoor:url(/assets/pottery-kit/kiln-door.webp);
/* bare clay speckle (procedural — replace with a scan of a real bisque tile when one exists) */
--pk-speckle:url(/assets/pottery-kit/speckle.webp);
/* glaze run edge */
--pk-drip:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 60' preserveAspectRatio='none'%3E%3Cpath d='M0 0H240V22C230 24 226 22 222 26C219 30 219 44 214 46C209 47 210 30 204 27C190 22 175 30 160 26C152 24 150 28 148 34C146 42 146 52 141 52C136 52 137 40 134 32C131 26 120 24 104 27C92 29 84 22 72 25C64 27 63 32 62 38C61 43 57 44 55 40C53 35 54 28 46 26C30 23 16 30 0 24Z'/%3E%3C/svg%3E");
}
/* ── ground ─────────────────────────────────────────────────── */
.pk-ground{background:var(--pk-bone);color:var(--pk-ink);font-family:var(--pk-sans);line-height:1.6}
/* ── bisque: bare fired clay ────────────────────────────────── */
.pk-bisque{background:var(--pk-speckle),linear-gradient(170deg,var(--pk-bisque),var(--pk-bisque-2));background-size:140px,cover}
/* ── glaze surface: any element becomes a glazed face ───────── */
/* set --pk-glaze to one of the --pk-g-* textures */
.pk-glaze{background:
radial-gradient(120% 90% at 28% 12%,rgba(255,255,255,.22),transparent 45%),
var(--pk-glaze,var(--pk-g-swirl)) center/cover,
var(--pk-ash)}
/* ── glaze run divider: a pour line with drips ──────────────── */
.pk-run{height:44px;position:relative;margin:0}
.pk-run::before{content:"";position:absolute;inset:0;
background:var(--pk-glaze,var(--pk-g-tenmoku)) center/cover,var(--pk-tenmoku);
-webkit-mask:var(--pk-drip) 0 0/240px 100% repeat-x;mask:var(--pk-drip) 0 0/240px 100% repeat-x}
/* ── glaze pool: circular chip, glaze settled in a well ─────── */
.pk-pools{display:flex;flex-wrap:wrap;gap:18px 22px;list-style:none;margin:0;padding:0}
.pk-pool{appearance:none;border:0;padding:0;cursor:pointer;background:none;font:inherit;color:inherit;
display:grid;justify-items:center;gap:10px;min-width:64px}
.pk-pool .pk-well{width:56px;height:56px;border-radius:50%;
background:
radial-gradient(circle at 34% 28%,rgba(255,255,255,.42),transparent 34%),
radial-gradient(circle at 50% 58%,transparent 52%,rgba(20,14,8,.35) 100%),
var(--pk-glaze) center/260% auto,var(--pk-ash);
box-shadow:inset 0 3px 7px rgba(20,14,8,.45),0 0 0 5px var(--pk-bisque),0 0 0 6px rgba(46,36,27,.25),0 6px 10px -4px rgba(46,36,27,.4);
transition:box-shadow .25s,transform .25s}
.pk-pool .pk-name{font-family:var(--pk-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--pk-ink-3)}
.pk-pool:hover .pk-well{transform:translateY(-2px)}
.pk-pool[aria-checked="true"] .pk-well,.pk-pool[aria-pressed="true"] .pk-well{
box-shadow:inset 0 3px 7px rgba(20,14,8,.45),0 0 0 5px var(--pk-bisque),0 0 0 7px var(--pk-ink),0 8px 14px -6px rgba(46,36,27,.5)}
.pk-pool[aria-checked="true"] .pk-name,.pk-pool[aria-pressed="true"] .pk-name{color:var(--pk-ink)}
/* ── test tile: glaze test tile with hang hole, dipped part-way ─ */
.pk-tiles{display:flex;flex-wrap:wrap;gap:16px}
.pk-tile{appearance:none;border:0;padding:0;background:none;cursor:pointer;font:inherit;color:inherit;
display:grid;gap:8px;width:104px;text-align:left}
.pk-tile .pk-tile-body{position:relative;display:block;aspect-ratio:3/4.4;border-radius:var(--pk-r);overflow:hidden;
background:var(--pk-speckle),linear-gradient(170deg,var(--pk-bisque),var(--pk-bisque-2));background-size:140px,cover;
-webkit-mask:radial-gradient(circle at 50% 12px,transparent 5px,#000 5.6px);mask:radial-gradient(circle at 50% 12px,transparent 5px,#000 5.6px);
box-shadow:inset 0 0 0 1px rgba(46,36,27,.12);transition:transform .25s}
.pk-tile .pk-tile-body::after{content:"";position:absolute;left:0;right:0;top:0;height:68%;
background:radial-gradient(120% 80% at 30% 10%,rgba(255,255,255,.25),transparent 50%),var(--pk-glaze) center/cover,var(--pk-ash);
-webkit-mask:linear-gradient(#000,#000) top/100% calc(100% - 20px) no-repeat,var(--pk-drip) bottom/120px 22px repeat-x;
mask:linear-gradient(#000,#000) top/100% calc(100% - 20px) no-repeat,var(--pk-drip) bottom/120px 22px repeat-x}
.pk-tile .pk-tile-id{font-family:var(--pk-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--pk-ink-3);line-height:1.35}
.pk-tile .pk-tile-id b{display:block;font-family:var(--pk-serif);font-weight:400;font-size:15px;letter-spacing:0;text-transform:none;color:var(--pk-ink)}
.pk-tile:hover .pk-tile-body{transform:translateY(-3px) rotate(-1deg)}
.pk-tile[aria-pressed="true"] .pk-tile-body{transform:translateY(-3px);outline:2px solid var(--pk-ink);outline-offset:3px}
/* ── dipped button: glaze over bisque, the drip is the edge ─── */
.pk-dip{appearance:none;border:0;cursor:pointer;position:relative;isolation:isolate;overflow:hidden;
display:inline-flex;align-items:flex-start;justify-content:center;min-height:58px;padding:13px 26px 0;border-radius:var(--pk-r);
font-family:var(--pk-sans);font-size:15px;font-weight:600;letter-spacing:.02em;color:#FBF3E4;text-decoration:none;
background:var(--pk-speckle),linear-gradient(170deg,var(--pk-bisque),var(--pk-bisque-2));background-size:140px,cover;
text-shadow:0 1px 2px rgba(20,14,8,.8),0 0 8px rgba(20,14,8,.45);box-shadow:0 1px 0 rgba(46,36,27,.12),0 8px 16px -10px rgba(46,36,27,.55);transition:transform .2s}
.pk-dip::before{content:"";position:absolute;inset:0 0 auto 0;height:100%;z-index:-1;
background:linear-gradient(rgba(20,14,8,.36),rgba(20,14,8,.36)),var(--pk-glaze,var(--pk-g-tenmoku)) center/cover,var(--pk-tenmoku);
-webkit-mask:linear-gradient(#000,#000) top/100% 36px no-repeat,var(--pk-drip) 0 34px/150px 20px repeat-x;
mask:linear-gradient(#000,#000) top/100% 36px no-repeat,var(--pk-drip) 0 34px/150px 20px repeat-x;
transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.pk-dip:hover::before{transform:translateY(3px)}
.pk-dip:active{transform:translateY(1px)}
.pk-dip.is-light{color:var(--pk-ink);text-shadow:0 0 6px rgba(251,248,241,.9),0 1px 0 rgba(255,255,255,.6)}
.pk-dip.is-light::before{background:linear-gradient(rgba(251,248,241,.5),rgba(251,248,241,.5)),var(--pk-glaze) center/cover,var(--pk-slip)}
/* ── kiln arch frame: image under an arched top ─────────────── */
.pk-arch{margin:0;position:relative}
.pk-arch .pk-arch-img{display:block;width:100%;aspect-ratio:var(--pk-ar,4/5);object-fit:cover;background:#2a2f36;
border-radius:50% 50% var(--pk-r) var(--pk-r) / 34% 34% var(--pk-r) var(--pk-r);
box-shadow:0 0 0 6px var(--pk-bone),0 0 0 7px rgba(46,36,27,.25),0 34px 60px -40px rgba(46,36,27,.7)}
.pk-kilndoor{display:block;width:100%;aspect-ratio:var(--pk-ar,4/5);background:var(--pk-kilndoor) center/cover,#2a2f36;
border-radius:50% 50% var(--pk-r) var(--pk-r) / 34% 34% var(--pk-r) var(--pk-r);
box-shadow:0 0 0 6px var(--pk-bone),0 0 0 7px rgba(46,36,27,.25),0 34px 60px -40px rgba(46,36,27,.7)}
/* ── firing cones: step / status indicator ──────────────────── */
/* li states: .is-done (bent flat) · .is-now (bending, heat) · default (standing) */
.pk-cones{display:flex;gap:clamp(18px,4vw,40px);list-style:none;margin:0;padding:0;align-items:flex-end}
.pk-cones li{display:grid;justify-items:center;gap:6px;min-width:64px}
.pk-cone-pat{position:relative;width:64px;height:70px;display:block}
.pk-cone-pat::after{content:"";position:absolute;left:4px;right:4px;bottom:0;height:10px;border-radius:5px 5px 3px 3px;
background:var(--pk-speckle),var(--pk-bisque-2);background-size:80px;box-shadow:inset 0 -2px 3px rgba(46,36,27,.25)}
.pk-cone{position:absolute;left:25px;bottom:8px;width:14px;height:56px;transform-origin:50% 100%;transform:rotate(8deg);
background:linear-gradient(90deg,#f4ecdc,#e3d4b8 55%,#c9b590);clip-path:polygon(50% 0,100% 100%,0 100%);
transition:transform 1.2s cubic-bezier(.3,.8,.3,1)}
.pk-cones .is-now .pk-cone{transform:rotate(42deg);background:linear-gradient(90deg,#ffe2a8,#f2b25e 55%,#c8743a)}
.pk-cones .is-now .pk-cone-pat::before{content:"";position:absolute;inset:-10px;border-radius:50%;
background:radial-gradient(circle at 50% 70%,rgba(226,165,75,.45),transparent 65%)}
.pk-cones .is-done .pk-cone{transform:rotate(74deg)}
.pk-cones .pk-cone-n{font-family:var(--pk-mono);font-size:10px;letter-spacing:.14em;color:var(--pk-ink-3)}
.pk-cones .pk-cone-t{font-family:var(--pk-serif);font-size:16px;line-height:1.1;color:var(--pk-ink-2)}
.pk-cones .is-now .pk-cone-t{color:var(--pk-ink)}
/* ── maker's chop: stamp pressed into clay ──────────────────── */
/* placeholder letters; swap for a scan of Kathy's real chop mark */
.pk-chop{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:50%;flex:0 0 auto;
background:var(--pk-speckle),radial-gradient(circle at 40% 35%,#e2d0ae,var(--pk-bisque-2));background-size:80px,cover;
box-shadow:inset 2px 3px 5px rgba(46,36,27,.45),inset -1px -1px 2px rgba(255,255,255,.5),0 1px 0 rgba(255,255,255,.6);
font-family:var(--pk-serif);font-size:17px;font-weight:600;letter-spacing:-.02em;color:rgba(70,48,28,.8);
text-shadow:0 1px 0 rgba(255,245,225,.55),0 -1px 0 rgba(40,24,10,.35)}
/* ── throwing rings: halo behind an isolated object ─────────── */
.pk-rings{background:repeating-radial-gradient(circle at 50% 62%,transparent 0 22px,rgba(46,36,27,.065) 22px 23px),var(--pk-bone)}
/* ── glaze type: letterforms filled with a real glaze ───────── */
.pk-glazetext{font-family:var(--pk-serif);font-weight:500;line-height:.95;letter-spacing:-.02em;
color:var(--pk-tenmoku);background:var(--pk-glaze,var(--pk-g-copper)) center/cover;
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
/* ── sgraffito panel: dark glaze, words carved to bare clay ─── */
.pk-sgraffito{position:relative;padding:clamp(24px,4vw,44px);border-radius:var(--pk-r);color:var(--pk-slip);
background:linear-gradient(rgba(31,27,23,.82),rgba(31,27,23,.9)),var(--pk-g-tenmoku) center/cover,var(--pk-tenmoku)}
.pk-sgraffito .pk-carved{font-family:var(--pk-serif);font-style:italic;font-size:clamp(24px,2.6vw,34px);line-height:1.3;
color:var(--pk-bisque);background:var(--pk-speckle),linear-gradient(var(--pk-slip),var(--pk-bisque));background-size:90px,cover;
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
filter:drop-shadow(0 -1px 0 rgba(0,0,0,.6))}
/* ── labels + state ─────────────────────────────────────────── */
.pk-label{font-family:var(--pk-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--pk-ink-3)}
.pk-glaze-id{display:inline-flex;align-items:center;gap:8px;font-family:var(--pk-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--pk-ink-2)}
.pk-glaze-id::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--pk-glaze) center/400% auto,var(--pk-ash);box-shadow:0 0 0 2px var(--pk-bisque)}
.pk-state{display:inline-flex;align-items:center;gap:8px;font-family:var(--pk-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.pk-state::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.pk-state.is-available{color:#4F5E45}
.pk-state.is-sold{color:#7A5E2E}
.pk-state.is-sold::before{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor}
/* ── object record: one piece alone on a quiet field ────────── */
.pk-object{display:grid;gap:14px;margin:0}
.pk-object .pk-object-field{position:relative;aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden;border-radius:var(--pk-r)}
.pk-object .pk-object-field img{width:78%;aspect-ratio:1/1;object-fit:cover;border-radius:50%;
box-shadow:0 30px 50px -30px rgba(46,36,27,.7);transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.pk-object:hover .pk-object-field img{transform:translateY(-4px)}
.pk-object figcaption{display:grid;gap:3px}
.pk-object .pk-maker{font-family:var(--pk-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--pk-ink-3)}
.pk-object .pk-title{font-family:var(--pk-serif);font-size:22px;line-height:1.15;color:var(--pk-ink)}
.pk-object .pk-price{font-family:var(--pk-serif);font-size:20px}
/* ── focus + motion ─────────────────────────────────────────── */
.pk-ground :focus-visible{outline:2px solid var(--pk-copper);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.pk-ground *{transition:none!important;animation:none!important}}
/* =====================================================================
Pottery-kit applications on the site (Sep 28). Pottery pages and the
pottery/kiln chapters only; leather keeps the leather kit.
===================================================================== */
.v4-pottery-copy .v4-body,.v4-kiln-copy .v4-body,.v4-hands-head .v4-body,.v4-cards-head .v4-body,.v4-club-copy .v4-body,.v4-visit-copy .v4-body,.mk-intro{display:grid;gap:12px}
.v4-body p{margin:0}
.pt-lead,.lt-lead,.arch-lead{font-family:var(--serif);font-size:1.18em;color:var(--ink)}
.mk-lines{font-family:var(--serif);font-style:italic;font-size:1.12em;line-height:1.55;color:var(--leather)}
/* 'fired.' in real glaze */
.v4-pottery .v4-h2 .pk-glazetext{font-style:italic;font-weight:400;line-height:inherit;filter:saturate(1.15) contrast(1.1)}
/* the four steps as glaze test tiles */
.pt-tiles{list-style:none;margin:6px 0 4px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;max-width:520px}
.pt-tiles .pk-tile{width:auto;cursor:default}
.pt-tiles .pk-tile.is-bare .pk-tile-body::after{display:none}
.pt-tiles .pk-tile-id{font-size:9.5px;line-height:1.45}
.v4-pottery .pk-dip{justify-self:start;min-width:260px}
.pt-run{margin-top:-2px}
/* firing cones for the kiln sequence */
.kl-cones{margin-top:18px;justify-content:flex-start;flex-wrap:wrap}
.kl-cones .pk-cone-c{font-size:13px;color:var(--ink-3);text-align:center;max-width:12ch}
.kl-cones .pk-cone-t{font-size:19px}
/* Kiln Club handwritten aside */
.club-hand{font-style:normal;font-size:1.35em;color:var(--leather)}
.ft-sign-note{margin:4px 0 10px;font-size:14px;color:var(--ink-2)}
.pg-intro{display:grid;gap:14px;padding:18px 0 22px;border-bottom:1px dashed rgba(46,36,27,.25);margin-bottom:18px}
.pg-title{font-size:clamp(34px,4vw,56px)}
@media (max-width:640px){
.pt-tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.pt-tiles .pk-tile-id{font-size:8.5px;letter-spacing:.08em}
.v4-pottery .pk-dip{min-width:0;width:100%}
.kl-cones{gap:14px}
.kl-cones li{min-width:0;flex:1 1 40%}
}
/* =====================================================================
Hero v5 (Sep 28) · after Graham's reference: an aged paper sheet with a
torn edge laid over a dark studio still life; Kathy's real vase stands on
the bench; the kiln and belt prints are taped across the tear.
The studio wall/bench is a generated atmosphere plate (no products);
the vase is her real photograph, cut from its studio backdrop.
===================================================================== */
.v4-hero{--tear:57%;background:#2a211b;min-height:min(94vh,900px);padding-block:clamp(64px,7vw,104px) clamp(56px,6vw,90px)}
.v4-hero > .folio,.v4-hero .g-hero-l,.v4-hero .g-hero-r,.v4-hero .v4-margin-l{display:none}
/* the studio: wall + bench, darkened, with a warm pool of light on the vase */
.v4-stage{inset:0 0 0 auto;width:calc(100% - var(--tear) + 6%);
background:
radial-gradient(38% 46% at 58% 46%,rgba(255,196,120,.18),transparent 70%),
linear-gradient(90deg,rgba(24,18,14,.72),rgba(24,18,14,.25) 40%,rgba(24,18,14,.45)),
linear-gradient(180deg,rgba(18,13,10,.55),rgba(18,13,10,.15) 45%,rgba(18,13,10,.55)),
url(/assets/editorial/leather-light-wall.webp) 70% 100%/cover no-repeat,#3a2b20;
-webkit-mask:none;mask:none;filter:saturate(.9)}
.v4-stage::after{display:none}
.v4-glow{left:34%;right:4%;top:14%;bottom:26%;background:radial-gradient(closest-side,rgba(255,206,140,.16),transparent)}
.v4-floor{height:18%;background:linear-gradient(180deg,transparent,rgba(20,14,10,.55))}
/* the paper sheet with a torn right edge */
.v4-paper{position:absolute;inset:0 auto 0 0;width:var(--tear);z-index:0;
background:
radial-gradient(90% 70% at 30% 40%,rgba(255,252,242,.55),transparent 70%),
radial-gradient(60% 40% at 100% 100%,rgba(150,110,70,.16),transparent 70%),
url(/assets/editorial/paper.webp) 0 0/900px auto,#F1E8D6;
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 1000' preserveAspectRatio='none'%3E%3Cpath d='M0 0H92.64 L92.64 0 L93.68 5.1 L93.31 9.6 L91.79 16.1 L91.72 23.7 L91.82 30.7 L92.96 35.3 L92.0 45.1 L93.61 50.7 L93.45 61.3 L94.72 68.1 L94.35 72.4 L92.06 78.5 L92.59 83.3 L94.18 93.0 L95.64 101.1 L95.35 107.7 L93.79 112.1 L95.78 117.6 L94.61 124.5 L95.05 132.6 L96.14 138.7 L94.38 147.6 L95.28 155.7 L95.93 165.8 L96.74 171.8 L94.94 176.6 L92.09 185.9 L91.73 193.4 L94.05 202.0 L94.4 210.0 L93.82 216.2 L93.46 224.4 L94.29 231.6 L93.12 242.2 L91.79 250.9 L93.67 259.8 L96.23 270.7 L94.83 276.7 L93.67 285.4 L94.14 292.6 L93.79 297.4 L94.01 306.8 L94.85 312.5 L93.86 322.6 L95.36 329.8 L96.22 340.0 L94.49 350.0 L94.75 356.9 L94.66 367.1 L92.16 372.2 L92.35 377.8 L93.49 385.2 L91.61 391.0 L92.78 398.0 L94.65 405.9 L93.25 414.8 L93.76 423.1 L94.48 427.5 L94.4 436.9 L92.86 446.5 L93.93 453.3 L93.8 461.7 L94.27 466.2 L94.69 471.4 L93.6 475.7 L93.92 480.8 L93.68 487.3 L95.57 497.4 L94.41 502.5 L94.77 508.9 L96.32 513.8 L95.09 524.7 L93.87 532.1 L94.7 536.8 L94.25 542.7 L91.67 547.8 L93.29 558.5 L93.34 563.5 L93.29 567.7 L94.36 578.5 L92.44 587.4 L92.13 594.0 L93.3 603.4 L92.65 612.8 L94.2 618.4 L94.33 629.3 L96.22 638.9 L94.33 648.1 L94.74 655.7 L93.69 659.9 L94.43 665.9 L96.66 674.7 L96.6 681.9 L96.66 692.8 L94.31 699.3 L94.23 704.9 L95.6 710.4 L94.29 720.7 L93.69 728.0 L91.87 737.6 L94.51 746.2 L94.0 755.7 L92.17 763.1 L92.66 772.6 L94.71 782.2 L92.88 789.0 L93.92 799.6 L92.01 804.8 L94.5 809.8 L94.07 819.5 L96.74 829.3 L94.72 837.9 L94.02 845.7 L96.71 849.8 L95.29 858.4 L94.99 868.9 L96.24 879.0 L94.41 884.5 L94.37 890.5 L94.43 898.6 L92.02 905.6 L92.73 915.9 L93.47 923.1 L92.95 933.5 L93.21 943.9 L93.28 951.6 L93.01 955.7 L91.61 961.0 L92.15 970.6 L93.92 977.9 L92.64 985.8 L95.38 993.5 L95 1000H0Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 1000' preserveAspectRatio='none'%3E%3Cpath d='M0 0H92.64 L92.64 0 L93.68 5.1 L93.31 9.6 L91.79 16.1 L91.72 23.7 L91.82 30.7 L92.96 35.3 L92.0 45.1 L93.61 50.7 L93.45 61.3 L94.72 68.1 L94.35 72.4 L92.06 78.5 L92.59 83.3 L94.18 93.0 L95.64 101.1 L95.35 107.7 L93.79 112.1 L95.78 117.6 L94.61 124.5 L95.05 132.6 L96.14 138.7 L94.38 147.6 L95.28 155.7 L95.93 165.8 L96.74 171.8 L94.94 176.6 L92.09 185.9 L91.73 193.4 L94.05 202.0 L94.4 210.0 L93.82 216.2 L93.46 224.4 L94.29 231.6 L93.12 242.2 L91.79 250.9 L93.67 259.8 L96.23 270.7 L94.83 276.7 L93.67 285.4 L94.14 292.6 L93.79 297.4 L94.01 306.8 L94.85 312.5 L93.86 322.6 L95.36 329.8 L96.22 340.0 L94.49 350.0 L94.75 356.9 L94.66 367.1 L92.16 372.2 L92.35 377.8 L93.49 385.2 L91.61 391.0 L92.78 398.0 L94.65 405.9 L93.25 414.8 L93.76 423.1 L94.48 427.5 L94.4 436.9 L92.86 446.5 L93.93 453.3 L93.8 461.7 L94.27 466.2 L94.69 471.4 L93.6 475.7 L93.92 480.8 L93.68 487.3 L95.57 497.4 L94.41 502.5 L94.77 508.9 L96.32 513.8 L95.09 524.7 L93.87 532.1 L94.7 536.8 L94.25 542.7 L91.67 547.8 L93.29 558.5 L93.34 563.5 L93.29 567.7 L94.36 578.5 L92.44 587.4 L92.13 594.0 L93.3 603.4 L92.65 612.8 L94.2 618.4 L94.33 629.3 L96.22 638.9 L94.33 648.1 L94.74 655.7 L93.69 659.9 L94.43 665.9 L96.66 674.7 L96.6 681.9 L96.66 692.8 L94.31 699.3 L94.23 704.9 L95.6 710.4 L94.29 720.7 L93.69 728.0 L91.87 737.6 L94.51 746.2 L94.0 755.7 L92.17 763.1 L92.66 772.6 L94.71 782.2 L92.88 789.0 L93.92 799.6 L92.01 804.8 L94.5 809.8 L94.07 819.5 L96.74 829.3 L94.72 837.9 L94.02 845.7 L96.71 849.8 L95.29 858.4 L94.99 868.9 L96.24 879.0 L94.41 884.5 L94.37 890.5 L94.43 898.6 L92.02 905.6 L92.73 915.9 L93.47 923.1 L92.95 933.5 L93.21 943.9 L93.28 951.6 L93.01 955.7 L91.61 961.0 L92.15 970.6 L93.92 977.9 L92.64 985.8 L95.38 993.5 L95 1000H0Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;
filter:drop-shadow(6px 0 10px rgba(0,0,0,.45))}
.v4-paper::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 86%,rgba(120,90,60,.2) 95.5%,rgba(255,251,240,.85) 97.4%,rgba(236,224,200,.9) 100%)}
.v4-botan{position:absolute;left:-26px;top:12%;width:170px;opacity:.75;z-index:1;pointer-events:none;filter:sepia(.25)}
.v4-botan2{position:absolute;left:10px;bottom:-10px;width:140px;opacity:.6;z-index:1;pointer-events:none}
/* copy on the paper */
.v4-hero-grid{grid-template-columns:minmax(0,calc(var(--tear) - 6%)) minmax(0,1fr);gap:0}
.v4-hero-copy{gap:22px;padding-right:clamp(12px,3vw,48px)}
.plate-no{font-family:var(--serif);font-style:italic;font-size:14px;letter-spacing:.24em;text-transform:uppercase;color:var(--clay);transform:none;margin:0;opacity:1}
.v4-kicker{color:var(--ink-2)}
.v4-display{font-size:clamp(54px,6.6vw,108px);font-weight:500;letter-spacing:-.04em;color:#1f1812}
.v4-display em{color:#A8452A;font-weight:400;letter-spacing:-.035em}
.v4-lede{font-family:var(--serif);font-size:clamp(18px,1.45vw,22px);line-height:1.5;color:var(--ink-2);max-width:40ch;display:grid;gap:10px}
.v4-lede p{margin:0}
.btn.btn-rust{background:#8E3A20;border-color:#8E3A20;color:#FBF1E4;box-shadow:0 10px 18px -12px rgba(90,30,10,.8)}
.btn.btn-rust:hover{background:#A8452A;border-color:#A8452A}
.v4-hero .btn-line{border-color:rgba(142,58,32,.55);color:#8E3A20}
.v4-hero .btn-line:hover,.v4-hero .btn-line:focus-visible{background:#8E3A20;border-color:#8E3A20;color:#FBF1E4}
/* the still life */
.v4-hero-art{min-height:640px}
.v4-vase-cut{position:absolute;right:6%;bottom:-3%;height:94%;width:auto;max-width:none;z-index:1;
filter:drop-shadow(0 30px 24px rgba(0,0,0,.55)) drop-shadow(-18px 0 30px rgba(0,0,0,.25))}
.v4-shadow{right:8%;width:46%;bottom:-4%;height:30px;opacity:1}
.v4-note{right:-2%;top:-4%;font-size:26px;color:#EFE2C8;transform:rotate(-8deg);text-align:right}
.v4-note-arrow{display:block;width:42px;height:42px;margin:4px 30px 0 auto;color:#EFE2C8}
.v4-tab{right:2%;bottom:-7%;font-size:9.5px!important;background:#F4ECDC}
.v4-hero .crop{display:none}
.v4-kilnprint{left:-8%;top:0;width:36%;transform:rotate(-4deg)}
.v4-beltprint{left:-12%;top:auto;bottom:10%;width:44%;transform:rotate(3.5deg)}
.v4-kilnprint figcaption,.v4-beltprint figcaption{font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;font-size:9px}
.v4-kilnprint,.v4-beltprint{background:#F6EFE0;box-shadow:0 1px 1px rgba(0,0,0,.2),0 26px 40px -20px rgba(0,0,0,.75)}
/* header: sits on the paper */
.site-head2{background:rgba(244,236,220,.92)}
.site-head2 .btn{background:#8E3A20;border-color:#8E3A20}
@media (max-width:980px){
.v4-hero{--tear:100%;background:#F1E8D6;padding-top:28px;padding-bottom:0}
.v4-paper{width:100%;bottom:auto;top:0;-webkit-mask:none;mask:none;height:calc(100% - var(--art-h,560px) + 2px);filter:none}
.v4-paper::after{display:none}
.v4-stage{inset:auto 0 0 0;width:100%;height:var(--art-h,560px)}
.v4-hero-grid{grid-template-columns:1fr;gap:18px}
.v4-hero-copy{padding-right:0}
.v4-hero-art{min-height:0;height:var(--art-h,560px);aspect-ratio:auto;margin-top:0}
.v4-vase-cut{height:86%;right:6%;bottom:5%}
.h-actions{order:4}.dk-cal{order:5;margin-bottom:28px}.v4-hero-art{order:6}
.v4-hero-grid{padding-inline:0}.v4-hero-copy > *{padding-inline:var(--gutter)}
.v4-hero-art{margin-inline:calc(var(--gutter) * -1);width:auto}
.v4-botan{display:none}
.v4-botan2{display:none}
}
/* =====================================================================
Leather page hero (Sep 28). The panel is a rendered piece of hand-tooled
veg-tan (scripts/leather_hero.py): tooling, seal, crease, stitch holes and
thread are all in the image, lit as one object. HTML sits on top: copy,
and a real strap-and-buckle CTA rendered the same way.
===================================================================== */
.lhero{padding:clamp(20px,3vw,40px) var(--gutter) 0;background:var(--bone)}
.lhero-panel{position:relative;max-width:1440px;margin:0 auto;aspect-ratio:2600/1120;border-radius:7px;overflow:hidden;isolation:isolate;
--px:0px;--py:0px;
background:#5a2710 image-set(url(/assets/leather-hero/panel-desktop-1x.webp) 1x,url(/assets/leather-hero/panel-desktop.webp) 2x) calc(50% + var(--px)) calc(50% + var(--py))/101.5% auto no-repeat;
box-shadow:0 1px 0 rgba(255,236,206,.5) inset,0 2px 3px rgba(40,16,5,.35),0 34px 60px -34px rgba(40,16,5,.75),0 12px 22px -16px rgba(40,16,5,.5);
transition:background-position .6s cubic-bezier(.2,.7,.2,1)}
/* a gentle dark pool under the copy, instead of heavy text shadows */
.lhero-panel::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background:radial-gradient(46% 62% at 58% 50%,rgba(34,12,4,.34),transparent 72%)}
.lhero-copy{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;justify-content:center;gap:clamp(14px,1.6vw,22px);
padding:0 8% 0 32%;max-width:1440px}
.lhero-eyebrow{margin:0;font-family:var(--mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:rgba(244,234,216,.62)}
.lhero-h{margin:0;font-family:var(--serif);font-weight:500;font-size:clamp(46px,5.4vw,86px);line-height:.98;letter-spacing:-.022em;color:#f4ead8;text-wrap:balance;
text-shadow:0 1px 0 rgba(20,7,2,.35)}
.lhero-h em{font-style:italic;font-weight:400;color:#deb983;letter-spacing:-.015em}
.lhero-body{margin:0;max-width:46ch;font-family:var(--serif);font-size:clamp(17px,1.35vw,21px);line-height:1.5;color:rgba(248,239,222,.88)}
/* CTA: a short belt strap into a brass buckle */
.lhero-cta{display:inline-flex;align-items:center;align-self:flex-start;margin-top:6px;text-decoration:none;color:#f6e8cd;-webkit-tap-highlight-color:transparent}
.lhero-strap{position:relative;display:inline-flex;align-items:center;gap:10px;height:64px;padding:0 30px 0 64px;min-width:320px;
background:url(/assets/leather-hero/strap.webp) left center/100% 100% no-repeat;
font-family:var(--serif);font-size:20px;letter-spacing:.02em;
text-shadow:0 1px 0 rgba(28,9,2,.7),0 -1px 0 rgba(255,214,166,.12);
filter:drop-shadow(0 3px 2px rgba(30,10,2,.55)) drop-shadow(0 10px 12px rgba(30,10,2,.28));
transition:transform .22s cubic-bezier(.3,1.3,.5,1)}
.lhero-strap .arr{transition:transform .22s}
.lhero-buckle{width:84px;height:auto;margin-left:-26px;position:relative;z-index:1;
filter:drop-shadow(0 3px 2px rgba(25,10,2,.6)) brightness(.96);transition:filter .22s,transform .22s}
.lhero-cta:hover .lhero-strap,.lhero-cta:focus-visible .lhero-strap{transform:translateX(2px)}
.lhero-cta:hover .lhero-strap .arr{transform:translateX(2px)}
.lhero-cta:hover .lhero-buckle{filter:drop-shadow(0 3px 2px rgba(25,10,2,.6)) brightness(1.1) contrast(1.05);transform:translateX(1px)}
.lhero-cta:active .lhero-strap{transform:translateX(3px) translateY(1px)}
.lhero-cta:focus-visible{outline:2px dashed #deb983;outline-offset:6px;border-radius:4px}
/* hand-off into the product grid */
.lhero-label{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:clamp(36px,4vw,56px);padding-bottom:18px;margin-bottom:22px;border-bottom:1px solid rgba(46,36,27,.16)}
.lhero-label .label:first-child{color:var(--ink)}
/* load: copy rises, CTA follows (the leather itself doesn't move) */
@media (prefers-reduced-motion:no-preference){
.lhero-panel{animation:lh-in .8s ease-out both}
.lhero-copy > *{animation:lh-rise .8s cubic-bezier(.2,.7,.2,1) both}
.lhero-copy > :nth-child(1){animation-delay:.15s}.lhero-copy > :nth-child(2){animation-delay:.25s}
.lhero-copy > :nth-child(3){animation-delay:.35s}.lhero-copy > :nth-child(4){animation-delay:.5s}
}
@keyframes lh-in{from{filter:brightness(.88) saturate(.9)}to{filter:none}}
@keyframes lh-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* tablet: the same panel, cropped to its left two thirds (seal + first corner) */
@media (max-width:1100px){
.lhero-panel{aspect-ratio:1.5;background-size:auto 101.5%;background-position:calc(0% + var(--px)) center}
.lhero-copy{padding:0 6% 0 47%}
.lhero-h{font-size:clamp(40px,6vw,64px)}
}
/* phone: its own tall panel, seal at the foot, copy above it */
@media (max-width:700px){
.lhero{padding-inline:10px}
.lhero-panel{aspect-ratio:1100/2100;
background:#5a2710 image-set(url(/assets/leather-hero/panel-mobile-1x.webp) 1x,url(/assets/leather-hero/panel-mobile.webp) 2x) center top/100% 100% no-repeat}
.lhero-panel::before{background:radial-gradient(80% 36% at 50% 28%,rgba(34,12,4,.3),transparent 75%)}
.lhero-copy{justify-content:flex-start;padding:13% 9% 0;gap:14px}
.lhero-h{font-size:clamp(36px,10.5vw,52px)}
.lhero-body{font-size:16.5px}
.lhero-strap{min-width:0;height:54px;padding:0 20px 0 48px;font-size:17px}
.lhero-buckle{width:68px;margin-left:-22px}
}
/* ── hero: quiet line + master width ── */
.lhero-panel,.lhero-label{max-width:1340px}
.lhero-quiet{margin:2px 0 0;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(244,234,216,.5)}
.lhero-copy{gap:clamp(16px,1.8vw,24px)}
.lhero-label{align-items:flex-end;padding-top:0;padding-bottom:14px;margin-bottom:clamp(38px,4vw,54px)}
.lhero-intro{margin:8px 0 0;font-family:var(--serif);font-size:18px;color:var(--ink-2);max-width:48ch}
.lhero + .belt-nav-wrap{margin-top:clamp(26px,3vw,34px)}
.belt-nav-wrap + .lhero-label{margin-top:clamp(32px,3.6vw,44px)}
/* ── the chapter belt ──
One finished belt (rendered leather: grain, burnished edge, crease, stitch
holes, waxed thread, brass rivets, stamped dividers) resting on the paper.
The items are stamped into it: dark recessed strokes with a warm lip. ── */
.belt-nav-wrap{max-width:1340px;margin:0 auto;padding:0 var(--gutter)}
.belt-nav{list-style:none;margin:0;padding:0 44px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));height:116px;
background:image-set(url(/assets/leather-nav/belt-1x.webp) 1x,url(/assets/leather-nav/belt.webp) 2x) center/100% 100% no-repeat;
filter:drop-shadow(0 2px 2px rgba(58,27,13,.28)) drop-shadow(0 12px 12px rgba(58,27,13,.18))}
.belt-nav:focus-visible{outline:2px dashed var(--terracotta);outline-offset:6px}
.belt-nav li{min-width:0;position:relative}
.belt-nav a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;height:100%;padding:20px 10px 18px;text-decoration:none;color:#2b140b;
transition:transform .18s ease}
.belt-nav a:hover,.belt-nav a:focus-visible{transform:translateY(-1px)}
.belt-nav a:focus-visible{outline:none}
.belt-nav a:focus-visible .bn-t{text-decoration:underline;text-underline-offset:4px;text-decoration-color:#d8af72}
.belt-nav a[aria-current="page"]::before{content:"";position:absolute;inset:9px 6px;border-radius:3px;pointer-events:none;
background:rgba(40,14,5,.22);box-shadow:inset 0 2px 4px rgba(30,10,3,.55),inset 0 -1px 0 rgba(255,200,140,.16)}
.belt-nav a[aria-current="page"]::after{content:"";position:absolute;left:18%;right:18%;bottom:7px;height:2px;
background:linear-gradient(90deg,transparent,#d8af72 20%,#8d651f 50%,#d8af72 80%,transparent);box-shadow:0 1px rgba(47,15,5,.45)}
.bn-n{position:absolute;top:10px;left:14px;font-family:var(--mono);font-size:9px;letter-spacing:.15em;color:rgba(255,205,150,.38);text-shadow:0 -1px 0 rgba(30,10,3,.7)}
.bn-ic{width:30px;height:30px;background:#e2c193;opacity:.92;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat;
filter:drop-shadow(0 -1px 0 rgba(20,6,2,.85)) drop-shadow(0 1px 0 rgba(255,214,166,.14));position:relative;z-index:1}
.bn-t{font-family:var(--serif);font-size:18px;line-height:1;letter-spacing:.01em;color:#f3e2c6;
text-shadow:0 -1px 0 rgba(30,10,3,.85),0 1px 0 rgba(255,214,166,.14);position:relative;z-index:1}
.bn-s{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,220,180,.7);text-shadow:0 -1px 0 rgba(30,10,3,.7);position:relative;z-index:1;text-align:center}
.belt-nav a:hover .bn-t{color:#fbefd9}.belt-nav a:hover .bn-s{color:rgba(255,224,190,.78)}
@media (max-width:1100px){.bn-t{font-size:16px}.bn-s{font-size:8px;letter-spacing:.14em}.belt-nav{padding:0 40px}}
@media (max-width:900px){
.belt-nav-wrap{padding-inline:12px}
.belt-nav{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;height:116px;
background-attachment:local;background-size:100% 100%;background-position:left center;padding:0 40px}
.belt-nav::-webkit-scrollbar{display:none}
.belt-nav li{flex:0 0 42%;scroll-snap-align:start}
.belt-nav a{padding:16px 6px 14px}
.bn-s{white-space:nowrap;font-size:8px;letter-spacing:.12em}
}
@media (max-width:480px){.belt-nav li{flex-basis:44%}}
@media (max-width:360px){.belt-nav li{flex-basis:50%}}
@media (prefers-reduced-motion:reduce){.belt-nav a{transition:none}}
/* ── leather gallery: every frame 4:3 (the studio photos are 4:3, nothing gets
cut off); the tall wood-grain belt is the one portrait tile, 2:3 and one
column wide, not a double-height hero; 3px radius throughout; the soft
512px duplicate (piece 0026) is left to the archive ── */
.lt-grid{max-width:1340px}
.lt-grid .grid-objects{gap:40px 24px;align-items:start}
.lt-grid .obj .fig{aspect-ratio:4/3;border-radius:3px;background:#dfe3e8}
.lt-grid .obj.lg{grid-column:span 3;grid-row:auto}
.lt-grid .obj.lg .fig{aspect-ratio:2/3;min-height:0;flex:none}
.lt-grid .obj .fig img{object-position:center}
@media (max-width:860px){.lt-grid .grid-objects{gap:28px 16px}.lt-grid .obj.lg{grid-column:span 6}.lt-grid .obj.lg .fig{aspect-ratio:2/3}}
/* homepage: the belt replaces the old paper index strip, resting on the bone
ground between the hero and the makers */
.belt-nav-wrap.on-home{padding-block:clamp(26px,3vw,34px) clamp(32px,3.6vw,44px);background:var(--bone);position:relative;z-index:2}
/* the strap CTA is also a