@font-face{font-family:"Special Gothic HB";src:url(/assets/fonts/specimen/special-gothic-wdth-var.woff2) format("woff2");font-weight:400 700;font-stretch:75% 125%;font-display:swap}

body.spec-handbreadth{margin:0;background:#EEF0EF}
.hb-site{
  --hb-ground:#EEF0EF;--hb-ink:#141618;--hb-tan:#FF7A00;--hb-graphite:#2B2F33;--hb-rule:#C9CDCC;--hb-linen:#D9DAD4;
  --hb-font:"Special Gothic HB","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --mm:3.78px;--m:calc(10 * var(--mm));--hb-g:max(16px,min(var(--m),5vw));--hb-nav:56px;
  background:var(--hb-ground);color:var(--hb-ink);font-family:var(--hb-font);font-weight:400;font-stretch:100%;
  font-size:clamp(1rem,.97rem + .15vw,1.0625rem);line-height:1.55;font-variant-numeric:lining-nums tabular-nums;
  -webkit-font-smoothing:antialiased;overflow-x:clip
}
@media (resolution >= 2dppx) and (pointer: fine){.hb-site{--mm:4.5px}}
@media (pointer: coarse){.hb-site{--mm:5.2px}}
@media (pointer: coarse) and (max-width: 600px){.hb-site{--mm:5.8px}}
@media (max-width: 700px){.hb-site{--hb-nav:48px}}
.hb-site *,.hb-site *::before,.hb-site *::after{box-sizing:border-box}
.hb-site :focus-visible{outline:2px solid var(--hb-ink);outline-offset:3px}
.hb-site a{color:inherit}
.hb-site h1,.hb-site h2,.hb-site h3,.hb-site p,.hb-site figure,.hb-site ul,.hb-site ol{margin:0}

/* nav */
.hb-nav{position:sticky;top:var(--bar-h,40px);z-index:60;height:var(--hb-nav);display:flex;align-items:center;gap:1rem;padding:0 var(--hb-g);background:var(--hb-ground);border-bottom:1px solid var(--hb-rule)}
.hb-brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;font-size:1.0625rem;font-weight:600;font-stretch:115%;letter-spacing:.01em;margin-right:auto;min-height:44px}
.hb-mark{width:28px;height:28px;flex:none;fill:var(--hb-ink)}
.hb-mark .hb-mark-t{fill:var(--hb-tan)}
.hb-links{display:flex;gap:clamp(1rem,2.4vw,2.2rem)}
.hb-links a,.hb-menu-list a{text-decoration:none;font-size:.9375rem;font-weight:500;font-stretch:110%;padding:.7rem 0;background:linear-gradient(var(--hb-ink),var(--hb-ink)) 0 calc(100% - .55rem)/0 1px no-repeat;transition:background-size .2s}
.hb-links a:hover{background-size:100% 1px}
.hb-menu{display:none;position:relative}
.hb-menu summary{list-style:none;cursor:pointer;font-size:.9375rem;font-weight:600;font-stretch:100%;min-height:44px;display:flex;align-items:center;padding:0 .2rem}
.hb-menu summary::-webkit-details-marker{display:none}
.hb-menu-list{position:absolute;right:calc(-1 * var(--hb-g));top:calc(100% + 2px);width:min(100vw,22rem);display:grid;background:var(--hb-ground);border-bottom:1px solid var(--hb-rule);padding:.4rem var(--hb-g) 1rem}
.hb-menu-list a{font-size:1.5rem;font-stretch:120%;font-weight:600;padding:.55rem 0;background:none}
@media (max-width: 700px){.hb-links{display:none}.hb-menu{display:block}}
@media (max-width: 360px){.hb-brand{font-stretch:88%}}

/* the rule: a steel rule laid along the far edge of the table, 0 at the gutter */
.hb-hero{--rh:58px;position:relative;background:var(--hb-ground)}
.hb-rule{--z:var(--hb-g);--card:85.6;position:relative;z-index:6;height:var(--rh);overflow:hidden;user-select:none;-webkit-user-select:none;
  background:repeating-linear-gradient(90deg,rgb(255 255 255 / .06) 0 1px,#0000 1px 3px,rgb(20 22 24 / .025) 3px 4px,#0000 4px 7px),
    linear-gradient(180deg,#f1f3f3 0,#dde0e1 30%,#cdd1d3 72%,#bfc4c6 100%);
  box-shadow:inset 0 -1px 0 rgb(20 22 24 / .28),0 2px 0 rgb(20 22 24 / .07),0 6px 12px -4px rgb(20 22 24 / .32)}
.hb-rule-steel{position:absolute;inset:0}
.hb-rule-ticks{position:absolute;left:var(--z);right:0;top:0;height:17px;
  background:repeating-linear-gradient(90deg,var(--hb-ink) 0 1px,#0000 1px calc(10 * var(--mm))) 0 0/100% 17px no-repeat,
    repeating-linear-gradient(90deg,var(--hb-ink) 0 1px,#0000 1px calc(5 * var(--mm))) 0 0/100% 11px no-repeat,
    repeating-linear-gradient(90deg,rgb(20 22 24 / .8) 0 1px,#0000 1px var(--mm)) 0 0/100% 6px no-repeat}
.hb-rule-n span{position:absolute;top:18px;left:calc(var(--z) + var(--n) * 10 * var(--mm));transform:translateX(-50%);font-size:.6875rem;font-weight:600;font-stretch:75%;line-height:1;color:var(--hb-ink)}
.hb-rule-n span:first-child{transform:none}
.hb-rule-tab{position:absolute;top:0;left:calc(var(--z) + var(--card) * var(--mm) - 22px);width:44px;height:100%;margin:0;padding:0;border:0;background:none;cursor:ew-resize;touch-action:none}
.hb-rule-tab::before{content:"";position:absolute;left:21px;top:0;width:2px;height:30px;background:var(--hb-tan)}
.hb-rule-tab::after{content:"";position:absolute;left:14px;top:30px;width:16px;height:22px;background:var(--hb-tan);box-shadow:0 1px 2px rgb(20 22 24 / .3)}
.hb-rule-tab:focus-visible{outline-offset:-2px}
.hb-rule-say{position:absolute;left:calc(var(--z) + var(--card) * var(--mm) + 30px);right:var(--hb-g);top:33px;font-size:.8125rem;font-weight:500;font-stretch:87.5%;line-height:1.2;color:var(--hb-ink);white-space:nowrap}
.hb-rule-say .hb-textbtn{min-height:0;font-weight:600}
.hb-card{position:absolute;z-index:7;left:var(--hb-g);top:var(--rh);width:calc(85.6 * var(--mm));height:calc(53.98 * var(--mm));border:1.5px dashed var(--hb-tan);border-top:0;border-radius:0 0 calc(3.18 * var(--mm)) calc(3.18 * var(--mm));pointer-events:none;opacity:0;transition:opacity .16s}
.hb-hero:has(.hb-rule.is-card) .hb-card{opacity:1}
@media (max-width: 1199px){
  .hb-hero{--rh:74px}
  .hb-rule-say{white-space:normal;top:31px;max-width:48ch}
}
@media (max-width: 600px){
  .hb-hero{--rh:84px}
  .hb-rule-say{left:var(--z);top:33px;max-width:min(40ch,calc(100% - 2 * var(--z)))}
  .hb-rule-tab{height:32px}.hb-rule-tab::after{top:25px;height:7px}.hb-rule-tab::before{height:25px}
  .hb-card{width:calc(53.98 * var(--mm));height:calc(85.6 * var(--mm))}
}

/* the table, from straight above */
.hb-table{position:relative;height:var(--hb-h,calc(100svh - var(--bar-h,40px) - var(--hb-nav) - var(--rh)));min-height:500px;overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none;background:#c8c8c3}
.hb-poster{position:absolute;inset:0;overflow:hidden}
.hb-poster img{position:absolute;display:block;max-width:none}
.hb-site:not(.hb-js) .hb-poster img{inset:0;width:100%;height:100%;object-fit:cover;object-position:67% 46%}
.hb-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hb-table.is-live .hb-poster{visibility:hidden}
.hb-table.is-live{cursor:grab}
.hb-table.is-grab{cursor:grabbing}
.hb-proxies{display:contents}
.hb-piece{position:absolute;left:-999px;top:0;width:1px;height:1px;margin:0;padding:0;border:0;border-radius:50%;background:none;color:inherit;font:inherit;touch-action:none;cursor:inherit}
.hb-piece[data-p="napkin"]{border-radius:0}
.hb-table.is-still .hb-piece{cursor:default}
.hb-piece:focus-visible,.hb-piece.is-held{outline:none}
.hb-piece:is(:focus-visible,.is-held)::after{content:"";position:absolute;inset:-9px;border:1.5px dashed var(--hb-ink);border-radius:inherit}

/* the words, printed on the cloth (the page draws them into the linen once the table is live) */
.hb-words{position:absolute;z-index:3;left:var(--hb-g);top:clamp(26px,5.5svh,64px);width:min(46%,40rem);pointer-events:none}
.hb-hl{position:relative;width:fit-content;max-width:100%}
.hb-h1{font-size:clamp(2rem,.9rem + 2.75vw,3.6rem);font-weight:650;font-stretch:125%;letter-spacing:-.005em;line-height:1.02;color:var(--hb-ink)}
.hb-h1 span{display:block}
.hb-hl-dim{position:absolute;left:0;right:0;bottom:-19px}
.hb-hl-dim i{font-size:.75rem}
.hb-sub{margin-top:clamp(2rem,4svh,2.8rem);max-width:34ch;font-size:clamp(1rem,.95rem + .25vw,1.1875rem);font-weight:450;font-stretch:112.5%;line-height:1.4;color:var(--hb-ink);text-wrap:pretty}
.hb-site .hb-sub{margin-top:clamp(2rem,4svh,2.8rem)}
.hb-table.is-live [data-print]{-webkit-text-fill-color:transparent}
.hb-ctl{position:absolute;z-index:4;left:var(--hb-g);bottom:clamp(16px,3svh,28px);display:grid;justify-items:start;gap:.55rem;max-width:min(30rem,calc(100% - 2 * var(--hb-g)))}
.hb-ctl a,.hb-ctl button{pointer-events:auto}
.hb-say{font-size:1rem;font-weight:500;font-stretch:100%;line-height:1.35;color:var(--hb-ink);text-wrap:pretty}
.hb-scale{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem}
.hb-scale [hidden]{display:none}
.hb-chip{display:inline-flex;align-items:center;height:32px;padding:0 .6rem;border:1px solid var(--hb-ink);font-size:.875rem;font-weight:600;font-stretch:75%;letter-spacing:.02em}
.hb-btn{appearance:none;border:0;border-radius:0;background:var(--hb-ink);color:var(--hb-ground);font:inherit;font-size:.9375rem;font-weight:600;font-stretch:100%;min-height:44px;padding:0 1.05rem;cursor:pointer}
.hb-btn:hover{background:#000}
.hb-textbtn{appearance:none;border:0;background:none;padding:0;font:inherit;color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;cursor:pointer;min-height:24px}
.hb-reward{font-size:1rem;font-weight:600;font-stretch:112.5%;line-height:1.4}
.hb-ctl:has(.hb-reward:not([hidden])) .hb-say{display:none}
.hb-reward a{text-decoration-thickness:1px;text-underline-offset:4px}
.hb-live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hb-sizes{margin:0;padding:.8rem var(--hb-g) 1.4rem;list-style:none;display:flex;flex-wrap:wrap;gap:.3rem 1.6rem;font-size:.9375rem;font-stretch:87.5%;color:var(--hb-graphite)}
.hb-js .hb-sizes{display:none}
/* tablets and phones held upright: the words at the top of the cloth, the pile under them */
@media (max-width: 999px){
  .hb-table{height:var(--hb-h,auto);min-height:0}
  .hb-words{position:relative;left:auto;top:auto;width:auto;padding:26px var(--hb-g) 0}
  .hb-h1{font-size:clamp(1.75rem,1rem + 4vw,3rem)}
  .hb-site:not(.hb-js) .hb-poster,.hb-table.is-still .hb-poster{position:relative;inset:auto;height:min(92vw,560px);margin-top:12px}
  .hb-table.is-still .hb-poster{position:absolute;inset:0;height:auto;margin:0}
  .hb-ctl{position:absolute;right:var(--hb-g);bottom:14px}
  .hb-site:not(.hb-js) .hb-ctl{position:relative;bottom:auto;left:auto;padding:12px var(--hb-g) 20px}
}
@media (max-width: 700px){.hb-sub{font-size:1rem}}
.hb-sub-short{display:none}
@media (max-width: 600px){.hb-sub-long{display:none}.hb-sub-short{display:inline}}
.hb-site:not(.hb-js) .hb-hl-dim{display:none}

/* dimension lines: 1px tangerine, 45° ticks, the number in a gap */
.hb-dim{position:absolute;display:flex;align-items:center;gap:.45em;pointer-events:none;color:var(--hb-ink);font-size:.8125rem;font-weight:500;font-stretch:75%;letter-spacing:.01em;line-height:1;white-space:nowrap;opacity:0;
  --tk:linear-gradient(45deg,#0000 calc(50% - .6px),var(--hb-tan) calc(50% - .6px) calc(50% + .6px),#0000 calc(50% + .6px));transition:opacity .16s}
.hb-dim::before,.hb-dim::after{content:"";flex:1 1 0;background:var(--hb-tan);transition:transform .16s cubic-bezier(.2,.7,.2,1)}
.hb-dim i{font-style:normal;font-stretch:75%;transition:font-stretch .2s .1s}
.hb-dim--w{height:9px;background:var(--tk) left center/9px 9px no-repeat,var(--tk) right center/9px 9px no-repeat}
.hb-dim--w::before,.hb-dim--w::after{height:1px}
.hb-dim--w::before{transform-origin:right}.hb-dim--w::after{transform-origin:left}
.hb-dim--h{flex-direction:column;width:9px;background:var(--tk) center top/9px 9px no-repeat,var(--tk) center bottom/9px 9px no-repeat}
.hb-dim--h::before,.hb-dim--h::after{width:1px}
.hb-dim--h::before{transform-origin:bottom}.hb-dim--h::after{transform-origin:top}
.hb-dim:not(.is-on)::before,.hb-dim:not(.is-on)::after{transform:scale(0)}
.hb-dim.is-on{opacity:1}
.hb-dim.is-on i{font-stretch:87.5%}
.hb-dims{display:contents}
.hb-dims .hb-dim{left:-999px;top:0;z-index:30}
.hb-dims .hb-dim i{background:rgb(238 240 239 / .9);padding:.22em .4em;border-radius:2px}
@supports (anchor-name: --a){
  #hb-piece-napkin{anchor-name:--hb-a-napkin}#hb-piece-plate{anchor-name:--hb-a-plate}#hb-piece-sbowl{anchor-name:--hb-a-sbowl}#hb-piece-cup{anchor-name:--hb-a-cup}
  .hb-dim[data-p="napkin"]{position-anchor:--hb-a-napkin}.hb-dim[data-p="plate"]{position-anchor:--hb-a-plate}
  .hb-dim[data-p="sbowl"]{position-anchor:--hb-a-sbowl}.hb-dim[data-p="cup"]{position-anchor:--hb-a-cup}
  .hb-dims .hb-dim--w{left:anchor(left);right:anchor(right);top:auto;bottom:calc(anchor(top) + 10px)}
  .hb-dims .hb-dim--h{top:anchor(top);bottom:anchor(bottom);left:calc(anchor(right) + 12px)}
  .hb-dims .hb-dim--w.is-below{bottom:auto;top:calc(anchor(bottom) + 10px)}
}

/* ---------- the rest of the page ---------- */
.hb-site section{--s:1}
.hb-site section:not(.hb-hero){position:relative;padding:calc(3 * var(--m)) var(--hb-g);overflow:clip}
.hb-h2{font-size:clamp(1.75rem,1.2rem + 2.2vw,3.4rem);font-weight:600;font-stretch:112%;letter-spacing:-.01em;line-height:1.02;text-wrap:balance}
.hb-name-h{font-size:clamp(2.4rem,1.1rem + 5vw,6.5rem);font-weight:700;font-stretch:125%;letter-spacing:-.025em;line-height:.92}
.hb-h3{font-size:1.375rem;font-weight:600;font-stretch:112%;line-height:1.1}
.hb-lead{font-size:clamp(1.125rem,1.02rem + .45vw,1.375rem);font-weight:450;font-stretch:110%;line-height:1.4;max-width:min(calc(110 * var(--mm)),62ch,100%);text-wrap:pretty}
.hb-body{max-width:min(calc(130 * var(--mm)),62ch,100%);text-wrap:pretty}
.hb-note-p,.hb-cap,.hb-foot,.hb-sizes-p,.hb-linen-sizes,.hb-at--p{font-size:clamp(1.0625rem,1rem + .2vw,1.1875rem);font-weight:450;font-stretch:100%;line-height:1.55;color:var(--hb-ink);max-width:min(calc(110 * var(--mm)),60ch,100%);text-wrap:pretty}
/* the condensed width is kept for what reads as drafting: sizes, scales, dimension labels */
.hb-sizes-p,.hb-at--p{font-size:1rem;font-stretch:80%;font-weight:500}
.hb-note-p + .hb-note-p{margin-top:.8em}
.hb-at{font-stretch:88%}
.hb-fig{position:relative;margin:0}
.hb-fig:focus-visible{outline-offset:6px}
.hb-box{position:absolute;pointer-events:none}
.hb-fig img{display:block;width:100%;height:auto}

/* the page's dimension lines: drawn once a section is in view, the rest on hover or focus */
.hb-site section:not(.hb-hero) .hb-dim{z-index:3}
.hb-dim--2 i{font-stretch:88%}
.hb-site .is-seen .hb-dim:not(.hb-dim--2),.hb-site section:has(.hb-fig:is(:hover,:focus-visible)) .hb-dim,.hb-site .hb-row:is(:hover,:focus-visible) .hb-dim{opacity:1}
.hb-site .is-seen .hb-dim:not(.hb-dim--2)::before,.hb-site .is-seen .hb-dim:not(.hb-dim--2)::after,
.hb-site section:has(.hb-fig:is(:hover,:focus-visible)) .hb-dim::before,.hb-site section:has(.hb-fig:is(:hover,:focus-visible)) .hb-dim::after{transform:none}
.hb-site .is-seen .hb-dim:not(.hb-dim--2) i{font-stretch:88%}
@supports (anchor-name: --a){
  #hb-spoon-box{anchor-name:--hb-a-spoon}
  .hb-site section .hb-dim--w[data-a]{left:anchor(left);right:anchor(right);bottom:calc(anchor(top) + .45 * var(--m))}
  .hb-site section .hb-dim--w.hb-dim--below{bottom:auto;top:calc(anchor(bottom) + .45 * var(--m))}
  .hb-site section .hb-dim--w.hb-dim--in{bottom:auto;top:calc(anchor(center) - 4.5px)}
  .hb-site section .hb-dim--h[data-a],.hb-lampdim{top:anchor(top);bottom:anchor(bottom);left:calc(anchor(right) + .6 * var(--m))}
  .hb-site section .hb-dim--h.hb-dim--l,.hb-lampdim{left:auto;right:calc(anchor(left) + .6 * var(--m))}
}
.hb-dim--in i{background:rgb(238 240 239 / .9);padding:.2em .35em}

/* 2 · the smallest thing in the shop */
.hb-spoon{min-height:92svh;display:grid;grid-template-rows:auto 1fr;padding-top:calc(5 * var(--m)) !important;padding-bottom:calc(4 * var(--m)) !important}
.hb-spoon-text{display:grid;gap:calc(.8 * var(--m));align-content:start}
.hb-spoon-text .hb-h2{max-width:14ch}
.hb-site .hb-spoon-fig{align-self:end;justify-self:start;margin-left:calc(70% - 31 * var(--mm));display:grid;gap:calc(1.6 * var(--m));justify-items:start}
.hb-spoon-turn{position:relative;width:calc(62 * var(--mm));transform:rotate(-8deg)}
.hb-spoon-svg{display:block;width:100%;height:auto;filter:drop-shadow(0 calc(.8 * var(--mm)) calc(.8 * var(--mm)) rgb(20 22 24 / .18))}
.hb-spoon-fig .hb-cap{max-width:calc(70 * var(--mm));margin-left:calc(4 * var(--mm))}
.hb-cap-phone{display:none}

/* 3 · the index, every name as wide as its thing */
.hb-index{--is:1;container-type:inline-size;padding-block:calc(2 * var(--m)) calc(2.5 * var(--m)) !important}
.hb-ruler{position:relative;height:calc(1.4 * var(--m));margin-bottom:calc(1.4 * var(--m))}
.hb-ruler-ticks{position:absolute;left:0;right:calc(-1 * var(--hb-g));top:0;height:14px;border-top:1px solid var(--hb-graphite);
  background:repeating-linear-gradient(90deg,var(--hb-graphite) 0 1px,#0000 1px calc(50 * var(--mm) * var(--is))) 0 0/100% 14px no-repeat,
    repeating-linear-gradient(90deg,var(--hb-graphite) 0 1px,#0000 1px calc(10 * var(--mm) * var(--is))) 0 0/100% 7px no-repeat}
.hb-ruler-n{position:absolute;left:0;right:0;top:18px;font-size:.75rem;font-stretch:75%;font-weight:500;color:var(--hb-graphite)}
.hb-ruler-n span{position:absolute;top:0;transform:translateX(-50%)}
.hb-ruler-n span:first-child{transform:none}
.hb-index > .hb-h2{max-width:min(calc(110 * var(--mm)),100%)}
.hb-index-scale{margin-top:.9rem;font-size:clamp(1.0625rem,1rem + .2vw,1.1875rem);font-weight:450;font-stretch:100%;color:var(--hb-ink);max-width:60ch}
.hb-rows{list-style:none;padding:0;margin-top:calc(1.6 * var(--m)) !important;display:grid;gap:calc(.75 * var(--m))}
.hb-row{display:grid;justify-items:start;gap:.3rem;outline-offset:6px}
.hb-name{font-size:clamp(1.75rem,1.1rem + 2.6vw,3.6rem);font-weight:600;font-stretch:100%;letter-spacing:-.01em;line-height:1;white-space:nowrap;cursor:default}
.hb-name-m{position:absolute;left:0;top:0;visibility:hidden;pointer-events:none;letter-spacing:0;white-space:nowrap}
.hb-line{position:relative;display:flex;align-items:center;gap:.5em;width:calc(var(--w) * var(--mm) * var(--is));height:9px;font-size:.8125rem;font-stretch:75%;font-weight:500;white-space:nowrap;
  background:linear-gradient(45deg,#0000 calc(50% - .6px),var(--hb-tan) calc(50% - .6px) calc(50% + .6px),#0000 calc(50% + .6px)) left center/9px 9px no-repeat}
.hb-line::before{content:"";flex:1;height:1px;background:var(--hb-tan)}
.hb-line::after{content:"";width:9px;height:9px;margin-left:-.2em;background:linear-gradient(45deg,#0000 calc(50% - .6px),var(--hb-tan) calc(50% - .6px) calc(50% + .6px),#0000 calc(50% + .6px))}
.hb-line i{font-style:normal}
/* longer than the screen: the line runs on out of the page, and says so where it leaves */
.hb-row{position:relative}
.hb-row:is(.is-off,.hb-row--off) .hb-line::after{display:none}
.hb-row:is(.is-off,.hb-row--off) .hb-line i{position:absolute;left:calc(var(--room,100cqw) - 2.2rem);transform:translateX(-100%);padding:0 .6em;background:var(--hb-ground);font-size:.875rem}
.hb-row:is(.is-off,.hb-row--off)::after{content:"";position:absolute;right:0;top:0;bottom:0;width:calc(2.2rem + var(--hb-g));margin-right:calc(-1 * var(--hb-g));background:linear-gradient(90deg,#0000,var(--hb-ground) 70%);pointer-events:none}
.hb-row:is(.is-off,.hb-row--off) .hb-line{--hb-arrow:1}
.hb-row:is(.is-off,.hb-row--off) .hb-line i::after{content:"";position:absolute;right:-1.7rem;top:50%;width:.7rem;height:.7rem;margin-top:-.35rem;border:solid var(--hb-tan);border-width:1px 1px 0 0;transform:rotate(45deg)}
.hb-note{font-size:1.0625rem;font-weight:450;font-stretch:100%;color:var(--hb-ink);transition:max-height .22s cubic-bezier(.2,.7,.2,1)}
.hb-note{overflow:hidden;max-height:0}
.hb-row:is(:hover,:focus-visible,:focus-within) .hb-note{max-height:4em}
.hb-foot{margin-top:calc(1.4 * var(--m)) !important}
/* each line is drawn out to its length as the row comes up the screen */
.hb-line::before{transform-origin:left}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .hb-line::before{animation:hb-draw linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
  }
}
@keyframes hb-draw{from{transform:scaleX(0)}}
@media (prefers-reduced-motion: no-preference){
  .hb-nosda .hb-line::before{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
  .hb-nosda .hb-row:not(.is-open) .hb-line::before{transform:scaleX(0)}
}

/* 4 · the large jug, taller than most screens */
.hb-jug{--W:calc(208 * var(--mm) * var(--s));min-height:max(100svh,calc(260 * var(--mm) * var(--s) + 3 * var(--m)));display:grid;align-content:center;padding-block:calc(4 * var(--m)) !important}
.hb-jug-text{position:relative;z-index:2;max-width:min(calc(48% - 2 * var(--m)),calc(100 * var(--mm)));display:grid;gap:1.1rem}
.hb-jug-text .hb-name-h{margin-bottom:.1em}
.hb-deck{font-size:clamp(1.125rem,1.02rem + .45vw,1.375rem);font-stretch:110%;font-weight:450;margin-bottom:calc(.6 * var(--m))}
.hb-sizes-p{color:var(--hb-ink);font-stretch:75%;font-weight:500;letter-spacing:.01em}
.hb-sizes-p .hb-at{display:block;margin-top:.2em}
.hb-sizes-p .hb-at[hidden]{display:none}
.hb-jug-fig{position:absolute !important;left:48%;bottom:calc(2 * var(--m) - .065 * 1.5 * var(--W));width:var(--W)}
.hb-jug-fig picture{display:block;-webkit-mask-image:linear-gradient(90deg,#0000,#000 9% 91%,#0000),linear-gradient(#0000,#000 6% 94%,#0000);mask-image:linear-gradient(90deg,#0000,#000 9% 91%,#0000),linear-gradient(#0000,#000 6% 94%,#0000);-webkit-mask-composite:source-in;mask-composite:intersect}

/* 5 · linen: a napkin at its real size, opening out as it comes up the page */
@property --hb-fr{syntax:"<angle>";inherits:true;initial-value:0deg}
@property --hb-fb{syntax:"<angle>";inherits:true;initial-value:0deg}
@property --hb-nw{syntax:"<integer>";inherits:true;initial-value:450}
@property --hb-nh{syntax:"<integer>";inherits:true;initial-value:450}
.hb-linen{--Q:calc(225 * var(--mm) * var(--s));--W:calc(508 * var(--mm) * var(--s));padding-block:calc(3 * var(--m)) calc(2 * var(--m)) !important}
.hb-linen-text{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));gap:1.1rem calc(1.4 * var(--m));align-items:start;max-width:min(100%,calc(330 * var(--mm)),76rem)}
.hb-linen-text .hb-h2{grid-column:1 / -1;max-width:16ch;margin-bottom:.3rem}
.hb-linen-sizes{grid-column:1 / -1;color:var(--hb-ink)}
.hb-linen-sizes span{display:block}
.hb-nap-fig{--hb-fr:0deg;--hb-fb:0deg;--hb-nw:450;--hb-nh:450;position:relative;margin-top:calc(1.6 * var(--m) + 30px) !important;margin-left:24px !important;width:calc(2 * var(--Q));height:calc(2 * var(--Q));counter-reset:hbw var(--hb-nw) hbh var(--hb-nh)}
.hb-nap-fig:focus-visible{outline-offset:10px}
.hb-nap{position:absolute;inset:0;perspective:calc(7 * var(--Q));perspective-origin:30% 20%;transform-style:preserve-3d}
.hb-nap-top,.hb-nap-bot{position:absolute;left:0;width:calc(2 * var(--Q));height:var(--Q);transform-style:preserve-3d}
.hb-nap-top{top:0}
.hb-nap-bot{top:var(--Q);transform-origin:50% 0;transform:translateZ(2px) rotateX(var(--hb-fb))}
.hb-nap-q{position:absolute;top:0;width:var(--Q);height:var(--Q);overflow:hidden;background:#d6d5cf;box-shadow:inset 0 0 0 1px rgb(20 22 24 / .04)}
/* every quarter is the same photographed linen, mirrored at each fold as a folded cloth is */
.hb-nap-q::before{content:"";position:absolute;inset:0;background:var(--hb-linen) calc(-.2708 * var(--Q)) calc(-.1875 * var(--Q)) / calc(2.8 * var(--Q)) auto no-repeat}
.hb-nap-q::after{content:"";position:absolute;inset:0;pointer-events:none}
.hb-nap-tl{left:0}
.hb-nap-tr{left:var(--Q);transform-origin:0 50%;transform:translateZ(1px) rotateY(var(--hb-fr))}
.hb-nap-bl{left:0}
.hb-nap-br{left:var(--Q);transform-origin:0 50%;transform:translateZ(1px) rotateY(calc(-1 * var(--hb-fr)))}
.hb-nap-tr::before{transform:scaleX(-1)}.hb-nap-bl::before{transform:scaleY(-1)}.hb-nap-br::before{transform:scale(-1,-1)}
/* the fold lines, a soft crease where the cloth was doubled, and the stitched hem round the outside */
.hb-nap{--hem:calc(9 * var(--mm) * var(--s));--st:repeating-linear-gradient(90deg,rgb(20 22 24 / .16) 0 5px,#0000 5px 8px);--sv:repeating-linear-gradient(180deg,rgb(20 22 24 / .16) 0 5px,#0000 5px 8px)}
.hb-nap-q::after{background-repeat:no-repeat}
.hb-nap-q>i{position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 22% 18%,rgb(255 255 255 / .16),#0000 55%),linear-gradient(160deg,#0000 45%,rgb(20 22 24 / .1));background-size:calc(2 * var(--Q)) calc(2 * var(--Q));background-repeat:no-repeat;background-position:0 0}
.hb-nap-tr>i{background-position:calc(-1 * var(--Q)) 0}.hb-nap-bl>i{background-position:0 calc(-1 * var(--Q))}.hb-nap-br>i{background-position:calc(-1 * var(--Q)) calc(-1 * var(--Q))}
.hb-nap-tl::after{background:var(--st) var(--hem) var(--hem) / calc(100% - var(--hem)) 1px,var(--sv) var(--hem) var(--hem) / 1px calc(100% - var(--hem)),linear-gradient(90deg,#0000 calc(100% - 26px),rgb(20 22 24 / .07)),linear-gradient(#0000 calc(100% - 22px),rgb(20 22 24 / .05));background-repeat:no-repeat}
.hb-nap-tr::after{background:var(--st) 0 var(--hem) / calc(100% - var(--hem)) 1px,var(--sv) calc(100% - var(--hem)) var(--hem) / 1px calc(100% - var(--hem)),linear-gradient(270deg,#0000 calc(100% - 26px),rgb(255 255 255 / .1)),linear-gradient(#0000 calc(100% - 22px),rgb(20 22 24 / .05));background-repeat:no-repeat}
.hb-nap-bl::after{background:var(--st) var(--hem) calc(100% - var(--hem)) / calc(100% - var(--hem)) 1px,var(--sv) var(--hem) 0 / 1px calc(100% - var(--hem)),linear-gradient(90deg,#0000 calc(100% - 26px),rgb(20 22 24 / .06)),linear-gradient(180deg,rgb(255 255 255 / .1),#0000 22px);background-repeat:no-repeat}
.hb-nap-br::after{background:var(--st) 0 calc(100% - var(--hem)) / calc(100% - var(--hem)) 1px,var(--sv) calc(100% - var(--hem)) 0 / 1px calc(100% - var(--hem)),linear-gradient(270deg,#0000 calc(100% - 26px),rgb(255 255 255 / .08)),linear-gradient(180deg,rgb(255 255 255 / .08),#0000 22px);background-repeat:no-repeat}
/* the napkin's own dimension lines, counting as it opens */
.hb-nap-dw,.hb-nap-dh{position:absolute;display:flex;align-items:center;gap:.45em;color:var(--hb-ink);font-size:.8125rem;font-weight:500;font-stretch:80%;white-space:nowrap;pointer-events:none;
  --tk:linear-gradient(45deg,#0000 calc(50% - .6px),var(--hb-tan) calc(50% - .6px) calc(50% + .6px),#0000 calc(50% + .6px))}
.hb-nap-dw{left:0;top:-30px;height:9px;width:calc(var(--hb-nw) * var(--mm) * var(--s));background:var(--tk) left center/9px 9px no-repeat,var(--tk) right center/9px 9px no-repeat}
.hb-nap-dh{top:0;left:-24px;width:9px;flex-direction:column;height:calc(var(--hb-nh) * var(--mm) * var(--s));background:var(--tk) center top/9px 9px no-repeat,var(--tk) center bottom/9px 9px no-repeat}
.hb-nap-dw::before,.hb-nap-dw::after{content:"";flex:1;height:1px;background:var(--hb-tan)}
.hb-nap-dh::before,.hb-nap-dh::after{content:"";flex:1;width:1px;background:var(--hb-tan)}
.hb-nap-dw i,.hb-nap-dh i{font-style:normal;background:var(--hb-ground);padding:.15em .35em}
.hb-nap-dw i::before{content:counter(hbw)}
.hb-nap-dh i::before{content:counter(hbh)}
.hb-nap-dh i{writing-mode:vertical-rl;transform:rotate(180deg)}
@keyframes hb-unfold{
  0%,8%{--hb-fr:-180deg;--hb-fb:180deg;--hb-nw:225;--hb-nh:225}
  46%{--hb-fr:0deg;--hb-fb:180deg;--hb-nw:450;--hb-nh:225}
  54%{--hb-fr:0deg;--hb-fb:180deg;--hb-nw:450;--hb-nh:225}
  92%,100%{--hb-fr:0deg;--hb-fb:0deg;--hb-nw:450;--hb-nh:450}
}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .hb-nap-fig{animation:hb-unfold linear both;animation-timeline:view();animation-range:entry 5% cover 44%}
  }
}
@media (prefers-reduced-motion: no-preference){
  .hb-nosda .hb-nap-fig{transition:--hb-fr .9s cubic-bezier(.3,.6,.2,1),--hb-fb .9s .8s cubic-bezier(.3,.6,.2,1),--hb-nw .9s steps(9),--hb-nh .9s .8s steps(9)}
  .hb-nosda .hb-nap-fig:not(.is-open){--hb-fr:-180deg;--hb-fb:180deg;--hb-nw:225;--hb-nh:225}
}

/* 6 · the dinner plate, the words around its rim */
.hb-plate{--W:calc(327 * var(--mm) * var(--s));display:flow-root;min-height:calc(270 * var(--mm) * var(--s) + 2 * var(--m));padding-block:calc(3 * var(--m)) !important}
.hb-plate-fig{float:right;width:var(--W);margin:calc(-2 * var(--m) - .081 * var(--W)) calc(28% - .44 * var(--hb-g) - .5 * var(--W)) 0 calc(1.2 * var(--m)) !important;
  shape-outside:circle(41.5% at 49.3% 49.1%) border-box;shape-margin:calc(1.1 * var(--m))}
.hb-plate-fig picture{display:block;-webkit-mask-image:radial-gradient(closest-side at 49.3% 49.1%,#000 86%,#0000 97%);mask-image:radial-gradient(closest-side at 49.3% 49.1%,#000 86%,#0000 97%)}
/* the words wrap the rim but stay out of the way of the pointer over the plate (text still paints over a float) */
.hb-plate .hb-name-h{position:relative;z-index:2;pointer-events:none}
.hb-plate .hb-name-h{text-align:right;margin-top:calc(1.2 * var(--m))}
.hb-plate-note{margin-top:1rem;max-width:none !important;padding-right:0}
.hb-plate-note:first-of-type{margin-top:calc(1.2 * var(--m))}
.hb-plate-note,.hb-plate .hb-at--p{max-width:none}

/* the plate's own rule: a line straight across it, wherever the pointer is */
.hb-chord{position:absolute;z-index:3;left:8.1%;width:82.4%;top:49.1%;height:9px;margin-top:-4.5px;display:flex;align-items:center;gap:.45em;pointer-events:none;opacity:0;transition:opacity .16s;
  font-size:.875rem;font-weight:500;font-stretch:80%;white-space:nowrap;color:var(--hb-ink);
  background:linear-gradient(45deg,#0000 calc(50% - .6px),var(--hb-tan) calc(50% - .6px) calc(50% + .6px),#0000 calc(50% + .6px)) left center/9px 9px no-repeat,linear-gradient(45deg,#0000 calc(50% - .6px),var(--hb-tan) calc(50% - .6px) calc(50% + .6px),#0000 calc(50% + .6px)) right center/9px 9px no-repeat}
.hb-chord::before,.hb-chord::after{content:"";flex:1;height:2px;background:var(--hb-tan)}
.hb-chord i{font-style:normal;background:rgb(255 255 255 / .9);padding:.2em .45em;border-radius:2px}
.hb-plate-fig.is-measuring .hb-chord{opacity:1}
.hb-chord::after{flex:0 0 22%}
.hb-site section.hb-plate:has(.is-measuring) .hb-dim.hb-dim--in{opacity:0}
.hb-plate-fig:focus-visible{outline:none}
.hb-plate-fig:focus-visible #hb-plate-box{border-radius:50%;outline:2px solid var(--hb-ink);outline-offset:5px}
.hb-plate-fig{cursor:crosshair}
.hb-chord-say{font-weight:500}

/* 7 · the one tangerine field */
.hb-hand{--W:calc(445 * var(--mm) * var(--s));--H:calc(var(--W) * 2 / 3);background:var(--hb-tan);color:var(--hb-ink);display:flex;flex-direction:column;gap:calc(1 * var(--m));padding-block:calc(2 * var(--m)) calc(3 * var(--m)) !important}
.hb-hand ::selection{background:var(--hb-ink);color:var(--hb-tan)}
.hb-field-say{position:relative;z-index:2;font-size:clamp(2.6rem,1.2rem + 5.8vw,7.5rem);font-weight:700;font-stretch:75%;letter-spacing:-.01em;line-height:.9;max-width:12ch;text-wrap:balance}
.hb-hand-fig{position:relative;overflow:hidden;margin-inline:calc(-1 * var(--hb-g)) !important;height:calc(.5 * var(--H))}
.hb-hand-win{position:absolute;width:var(--W);left:calc(50% - .48 * var(--W));top:calc(-.27 * var(--H));
  -webkit-mask-image:linear-gradient(90deg,#0000,#000 12% 88%,#0000),linear-gradient(#0000 27%,#000 36% 70%,#0000 77%);mask-image:linear-gradient(90deg,#0000,#000 12% 88%,#0000),linear-gradient(#0000 27%,#000 36% 70%,#0000 77%);-webkit-mask-composite:source-in;mask-composite:intersect}
.hb-hand-fig figcaption{position:absolute;right:var(--hb-g);bottom:.6rem;font-size:.875rem;font-weight:500}
.hb-hand .hb-dim{--hb-tan:var(--hb-ink)}
.hb-hand-text{display:grid;gap:1.1rem;max-width:calc(100 * var(--mm))}
.hb-hand .hb-h2{font-size:clamp(1.5rem,1.1rem + 1.6vw,2.6rem)}
.hb-measure{display:grid;gap:.8rem;justify-items:start;max-width:min(100%,26rem);font-size:.9375rem;font-stretch:100%}
.hb-measure-say{font-weight:500}
.hb-measure-out{font-size:1.125rem;font-weight:600;font-stretch:110%}
.hb-measure-row{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.hb-hand .hb-textbtn{min-height:44px}
.hb-bracket{--hb-hand:100;position:relative;width:calc(var(--hb-hand) * var(--mm));height:calc(3rem + 30px);flex:none;touch-action:none}
.hb-bracket-word{position:absolute;left:0;bottom:24px;font-size:3rem;font-weight:700;line-height:1;white-space:nowrap;font-variation-settings:"wdth" var(--wd,100)}
.hb-bracket-line{position:absolute;left:0;right:0;bottom:10px;height:14px;border:solid var(--hb-ink);border-width:0 1px;background:linear-gradient(var(--hb-ink),var(--hb-ink)) 0 50%/100% 1px no-repeat}
.hb-bracket-tab{position:absolute;right:-22px;bottom:-7px;width:44px;height:48px;border:0;padding:0;background:none;cursor:ew-resize;touch-action:none}
.hb-bracket-tab::before{content:"";position:absolute;left:17px;top:19px;width:10px;height:22px;background:var(--hb-ink)}
.hb-bracket-tab:focus-visible{outline:none}
.hb-bracket-tab:focus-visible::before{outline:2px solid var(--hb-ink);outline-offset:3px}
.hb-bracket.is-past{width:calc(var(--hb-hand) * var(--mm))}
/* the field at full size: the cup at 1:1, the words around the hands */
.hb-hand.is-full{display:block;min-height:calc(1 * var(--m) + .7 * var(--H));padding:0 !important}
.hb-hand.is-full .hb-hand-fig{position:absolute;inset:0;height:auto;margin:0 !important}
.hb-hand.is-full .hb-hand-win{left:calc(58% - .48 * var(--W));top:var(--m);-webkit-mask-image:linear-gradient(90deg,#0000,#000 8% 92%,#0000),linear-gradient(#0000,#000 12% 60%,#0000 70%);mask-image:linear-gradient(90deg,#0000,#000 8% 92%,#0000),linear-gradient(#0000,#000 12% 60%,#0000 70%);-webkit-mask-composite:source-in;mask-composite:intersect}
.hb-hand.is-full .hb-field-say{position:absolute;left:var(--hb-g);top:calc(1.6 * var(--m));max-width:calc(58% - .1 * var(--W))}
.hb-hand.is-full .hb-hand-text{position:absolute;z-index:2;right:var(--hb-g);top:calc(2 * var(--m));width:min(calc(100 * var(--mm)),calc(36% - var(--hb-g)))}
.hb-hand.is-full .hb-measure{position:absolute;z-index:2;left:var(--hb-g);top:calc(var(--m) + .45 * var(--H));width:min(26rem,calc(58% - .25 * var(--W) - 2 * var(--hb-g)))}
/* the measuring line gets clear orange of its own: the left column, between the words and the controls */
.hb-hand.is-full .hb-bracket{position:absolute;z-index:2;left:var(--hb-g);top:calc(var(--m) + .45 * var(--H) - 3rem - 30px - 1.6rem)}
.hb-hand.is-full .hb-hand-fig figcaption{display:none}

/* 8 · as tall as the lamp */
@property --hb-p{syntax:"<number>";inherits:true;initial-value:0}
@property --hb-n{syntax:"<integer>";inherits:true;initial-value:0}
.hb-lamp{--W:calc(345.6 * var(--mm) * var(--s));--H:calc(var(--W) * 1.7778);height:calc(480 * var(--mm) * var(--s) + 4 * var(--m));padding:0 var(--hb-g) !important}
.hb-lamp-fig{position:absolute !important;width:var(--W);left:calc(max(60%,var(--hb-g) + 100 * var(--mm) + 3 * var(--m) + 137.5 * var(--mm) * var(--s)) - .5004 * var(--W));bottom:calc(2 * var(--m) - .1645 * var(--H))}
.hb-lamp-fig picture{display:block;-webkit-mask-image:linear-gradient(90deg,#0000,#000 9% 91%,#0000),linear-gradient(#0000,#000 4%);mask-image:linear-gradient(90deg,#0000,#000 9% 91%,#0000),linear-gradient(#0000,#000 4%);-webkit-mask-composite:source-in;mask-composite:intersect}
.hb-lamp-text{position:sticky;top:30svh;z-index:2;width:min(calc(100 * var(--mm)),40%);display:grid;gap:1.1rem;padding-top:calc(3 * var(--m))}
.hb-lampdim{position:absolute;z-index:3;width:9px;pointer-events:none;--hb-p:1;--hb-n:480;counter-reset:hb var(--hb-n)}
.hb-lampdim::before{content:"";position:absolute;left:4px;top:0;width:1px;height:100%;background:var(--hb-tan);transform-origin:top;transform:scaleY(var(--hb-p))}
.hb-lampdim::after{content:counter(hb) " of 480 mm";position:absolute;right:16px;top:calc(var(--hb-p) * 100%);transform:translateY(-50%);font-size:.875rem;font-weight:500;font-stretch:75%;white-space:nowrap;background:var(--hb-ground);padding:.15em .3em}
.hb-lampdim{background:linear-gradient(45deg,#0000 calc(50% - .6px),var(--hb-tan) calc(50% - .6px) calc(50% + .6px),#0000 calc(50% + .6px)) center top/9px 9px no-repeat}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .hb-lampdim{view-timeline:--hb-lampt block;view-timeline-inset:30% 70%;animation:hb-count linear both;animation-timeline:--hb-lampt;animation-range:cover 0% cover 100%}
  }
}
@keyframes hb-count{from{--hb-p:0;--hb-n:0}to{--hb-p:1;--hb-n:480}}
/* still (reduced motion, or no scroll timelines): the whole height, said plainly */
.hb-lampdim::after{content:"480 mm, base to the top of the shade"}
@supports (animation-timeline: view()){@media (prefers-reduced-motion: no-preference){.hb-lampdim::after{content:counter(hb) " of 480 mm"}}}

/* 9 · before anything gets a shelf */
.hb-shelf{padding-block:calc(4 * var(--m)) calc(3 * var(--m)) !important;display:grid;grid-template-columns:minmax(0,1fr) min(calc(130 * var(--mm)),40%);column-gap:calc(2 * var(--m));row-gap:calc(1.6 * var(--m))}
.hb-shelf > .hb-h2{grid-column:1 / -1;max-width:16ch}
.hb-shelf-draw{grid-column:1 / -1;position:relative;display:grid;grid-template-columns:calc(190 * var(--mm) * var(--s)) minmax(14rem,24rem);column-gap:1.2rem;align-items:start;padding-top:calc(1.2 * var(--m))}
.hb-bowl-svg{display:block;width:100%;height:auto;overflow:visible}
.hb-bowl-c{stroke:var(--hb-graphite);stroke-width:1;stroke-dasharray:6 3 1 3;vector-effect:non-scaling-stroke;fill:none}
.hb-bowl-r{stroke:var(--hb-rule);stroke-width:1;vector-effect:non-scaling-stroke;fill:none}
.hb-bowl-cut{stroke:var(--hb-ink);stroke-width:1.25;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.hb-bowl-d path{stroke:var(--hb-tan);stroke-width:1;vector-effect:non-scaling-stroke;fill:none}
.hb-bowl-fig .hb-cap{margin-top:calc(1.4 * var(--m))}
.hb-shelf-list{list-style:none;padding:0;position:relative;align-self:stretch;height:calc(80 * var(--mm) * var(--s))}
.hb-shelf-list li{position:absolute;left:0;right:0;transform:translateY(-50%);font-size:1.0625rem;font-weight:450;font-stretch:100%;line-height:1.45;color:var(--hb-ink)}
.hb-shelf-list b{display:block;font-weight:600;font-stretch:100%;color:var(--hb-ink)}
.hb-shelf-lip{top:calc(4.5 * var(--mm) * var(--s))}
.hb-shelf-wall{top:calc(39.5 * var(--mm) * var(--s))}
.hb-shelf-foot{top:calc(76 * var(--mm) * var(--s))}
.hb-shelf-draw{margin-top:0 !important}
.hb-shelf-p{grid-column:2;font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);font-stretch:105%;line-height:1.5;max-width:none;margin-top:calc(1 * var(--m)) !important}
.hb-shelf .hb-dim{top:auto}

/* 10 · bring your measurements */
.hb-visit{padding-block:calc(4 * var(--m)) calc(2 * var(--m)) !important;border-top:1px solid var(--hb-rule)}
.hb-visit-head{display:grid;grid-template-columns:auto minmax(18rem,1fr);gap:calc(2 * var(--m));align-items:end}
@media (max-width: 1300px){.hb-visit-head{grid-template-columns:minmax(0,1fr);gap:calc(1 * var(--m))}.hb-visit-head .hb-lead{justify-self:start}}
.hb-visit-head .hb-lead{justify-self:end}
.hb-visit-grid{display:grid;grid-template-columns:minmax(0,55fr) minmax(0,40fr);column-gap:5%;margin-top:calc(3 * var(--m)) !important;align-items:start}
.hb-yours{display:grid;gap:.9rem;align-content:start;min-width:0}
.hb-yours-at{font-size:.9375rem;font-stretch:88%;color:var(--hb-graphite)}
.hb-yours-pic{border-top:1px solid var(--hb-rule);border-bottom:1px solid var(--hb-rule);padding:calc(.8 * var(--m)) 0;overflow:hidden}
.hb-yours-canvas{display:block;max-width:100%}
.hb-yours-still{display:block;width:100%;height:auto}
.hb-yours-still[hidden],.hb-yours-canvas[hidden]{display:none}
.hb-yours-list{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:.35rem 1.4rem;font-size:1rem;font-weight:450;font-stretch:100%;color:var(--hb-ink)}
.hb-yours-list b{font-weight:600;font-stretch:100%;color:var(--hb-ink);margin-right:.35em}
.hb-form{display:grid;gap:1.15rem;align-content:start}
.hb-form .hb-h3{margin-bottom:.2rem}
.hb-field{display:grid;gap:.3rem;font-size:.9375rem}
.hb-field span{font-weight:500;font-stretch:100%}
.hb-field small,.hb-fit-hint{font-size:.9375rem;font-stretch:100%;color:var(--hb-graphite)}
.hb-field input,.hb-field textarea,.hb-field select{font:inherit;font-size:1rem;font-stretch:100%;color:var(--hb-ink);background:transparent;border:0;border-bottom:1px solid var(--hb-graphite);border-radius:0;padding:.45rem 0;min-height:44px;width:100%}
.hb-field textarea{resize:vertical;line-height:1.45}
.hb-field select{appearance:none;background:linear-gradient(45deg,#0000 45%,var(--hb-ink) 45% 55%,#0000 55%) right 6px center/8px 8px no-repeat,linear-gradient(-45deg,#0000 45%,var(--hb-ink) 45% 55%,#0000 55%) right 0 center/8px 8px no-repeat;padding-right:1.6rem}
.hb-field-pair{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;align-items:end}
.hb-form .hb-btn{justify-self:start;margin-top:.4rem}
.hb-status{min-height:1.5em;font-size:.9375rem;font-weight:500}
.hb-space{margin-top:calc(2 * var(--m)) !important;min-height:0;display:none}
.hb-space.is-on{display:block}
.hb-space-box{position:relative;height:calc(2 * var(--m));border:1px solid var(--hb-tan);border-width:1px}
.hb-space-box.is-flat{height:0;border-width:1px 0 0}
.hb-space-box::before,.hb-space-box::after{content:"";position:absolute;top:-9px;width:1px;height:18px;background:var(--hb-tan)}
.hb-space-box::before{left:-1px}.hb-space-box::after{right:-1px}
.hb-space-n{position:absolute;left:.6rem;top:.5rem;font-size:.875rem;font-weight:500;font-stretch:75%}
.hb-space-box.is-flat .hb-space-n{top:.6rem;left:0}
.hb-space-over{display:block;margin-top:.6rem;font-size:.875rem;font-stretch:88%;color:var(--hb-graphite);text-align:right}
.hb-close{margin-top:calc(4 * var(--m)) !important;padding-top:calc(1 * var(--m));border-top:1px solid var(--hb-rule);display:flex;justify-content:space-between;align-items:center;gap:1rem 2rem;flex-wrap:wrap}
.hb-length{font-size:1rem;font-weight:450;font-stretch:100%;color:var(--hb-ink);max-width:62ch}
.hb-sign{display:flex;align-items:center;gap:.6rem;font-weight:600;font-stretch:115%}

/* photographs are set down, not faded up */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .hb-jug-fig picture,.hb-plate-fig picture,.hb-lamp-fig picture{animation:hb-set linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
  }
}
@keyframes hb-set{from{translate:0 calc(-6 * var(--mm))}}

/* tablets and small laptops */
@media (max-width: 999px){.hb-spoon{min-height:70svh;padding-top:calc(3 * var(--m)) !important}}
@media (max-width: 1100px){
  .hb-shelf{grid-template-columns:minmax(0,1fr)}
  .hb-shelf-p{grid-column:1;max-width:min(calc(130 * var(--mm)),100%)}
  .hb-visit-grid{grid-template-columns:minmax(0,1fr);row-gap:calc(3 * var(--m))}
  .hb-form{max-width:36rem}
}
@media (max-width: 900px){
  .hb-visit-head{grid-template-columns:minmax(0,1fr)}
  .hb-visit-head .hb-lead{justify-self:start}
}
/* phones */
@media (max-width: 700px){
  .hb-cap-phone{display:inline}
  .hb-spoon{min-height:0;padding-block:calc(3 * var(--m)) calc(2.4 * var(--m)) !important;gap:calc(1.5 * var(--m))}
  .hb-site .hb-spoon-fig{margin:0;justify-self:stretch;grid-template-rows:calc(66 * var(--mm)) auto;justify-items:center}
  .hb-spoon-turn{align-self:center;transform:rotate(-82deg)}
  .hb-spoon-fig .hb-cap{margin:0;justify-self:start;max-width:none}
  .hb-jug{display:block;min-height:0;padding-bottom:calc(2 * var(--m)) !important}
  .hb-jug-text{max-width:none}
  .hb-jug-fig{position:relative !important;left:auto;bottom:auto;margin:calc(1.2 * var(--m)) 0 0 calc(1.4 * var(--m) - .077 * var(--W)) !important}
  .hb-plate{display:block;min-height:0}
  .hb-plate-fig{float:none;margin:calc(1.4 * var(--m)) 0 0 calc(-.081 * var(--W)) !important}
  .hb-plate .hb-name-h{text-align:left}
  .hb-hand-win{top:calc(-.3 * var(--H))}
  .hb-lamp{height:auto;padding-block:calc(3 * var(--m)) 0 !important;display:flex;flex-direction:column}
  .hb-lamp-text{position:relative;top:auto;width:auto;padding:0}
  .hb-lamp-fig{position:relative !important;left:auto;bottom:auto;align-self:center;margin:calc(.5 * var(--m)) 0 calc(-.1 * var(--H)) !important}
  .hb-shelf-draw{grid-template-columns:minmax(0,calc(190 * var(--mm) * var(--s)));row-gap:1rem}
  .hb-shelf-list{height:auto;display:grid;gap:.8rem}
  .hb-shelf-list li{position:static;transform:none}
  .hb-field-pair{grid-template-columns:minmax(0,1fr)}
  .hb-close{display:grid;margin-top:56px !important;padding-top:20px}
  /* a phone's millimetre is big: spacing comes back to pixels */
  .hb-site section:not(.hb-hero){padding-top:64px !important;padding-bottom:64px !important}
  .hb-site .hb-hand{padding-top:48px !important;padding-bottom:56px !important;gap:28px}
  .hb-site .hb-lamp{padding-bottom:0 !important}
  .hb-lamp-text{order:-1}
  .hb-rows{margin-top:40px !important;gap:24px}
  .hb-ruler{margin-bottom:28px}
  .hb-plate .hb-name-h{margin-top:20px}
  .hb-plate-note:first-of-type{margin-top:16px}
  .hb-visit-head{gap:20px}
  .hb-visit-grid{margin-top:48px !important;row-gap:56px}
  .hb-shelf{row-gap:28px}
  .hb-shelf-draw{padding-top:0}
  .hb-bowl-fig .hb-cap{margin-top:16px}
  .hb-space{margin-top:40px !important}
  .hb-jug-text{gap:.9rem}
  .hb-deck{margin-bottom:0}
}

@media (prefers-reduced-motion: reduce){
  .hb-dim,.hb-dim::before,.hb-dim::after,.hb-dim i,.hb-note,.hb-name{transition:none}
  .hb-site section:not(.hb-hero) .hb-dim{opacity:1}
  .hb-site section:not(.hb-hero) .hb-dim::before,.hb-site section:not(.hb-hero) .hb-dim::after{transform:none}
}
.hb-scale[hidden]{display:none}

/* before the script measures (and without it): each picture at the scale this width usually allows */
@media (max-width: 1400px){.hb-site .hb-linen,.hb-site .hb-hand,.hb-site .hb-lamp{--s:.5}}
@media (max-width: 1150px){.hb-site .hb-plate{--s:.5}}
@media (max-width: 700px){
  .hb-site .hb-jug,.hb-site .hb-hand{--s:.5}.hb-site .hb-linen{--s:.25}.hb-site .hb-plate,.hb-site .hb-shelf{--s:.3333}.hb-site .hb-lamp{--s:.2}
}
.hb-site:not(.hb-js) .hb-ctl,.hb-site:not(.hb-js) .hb-measure-say,.hb-site:not(.hb-js) .hb-measure-row,.hb-site:not(.hb-js) .hb-bracket-tab{display:none}
/* the linen photograph is fetched as its section comes near, not with the first screen */
.hb-linen.is-near .hb-nap-q::before{background-image:url(/assets/work/handbreadth/hb-linen.webp)}
@media (scripting: none){.hb-nap-q::before{background-image:url(/assets/work/handbreadth/hb-linen.webp)}}
@media (max-width: 700px){.hb-linen.is-near .hb-nap-q::before{background-image:url(/assets/work/handbreadth/hb-linen-sm.webp)}}
@media (max-width: 700px) and (scripting: none){.hb-nap-q::before{background-image:url(/assets/work/handbreadth/hb-linen-sm.webp)}}