/* Halden, an illustrative sourdough bakery by Matt's Websites. Hand written; every class starts with hd-.
   Layout, type, colour and motion values follow the reference measurements in reference/spec.json and
   reference/motion/motion.json; departures are in the Art direction deviation ledger. */
@font-face{font-family:"Funnel Sans";src:url("/examples/halden/assets/fonts/funnel-sans-350-400.woff2") format("woff2");font-weight:350 400;font-style:normal;font-display:swap}
@font-face{font-family:"Inconsolata";src:url("/examples/halden/assets/fonts/inconsolata-400-84.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
:root{
  --hd-white:#F8F6F0;--hd-warm3:#F4EFE5;--hd-linen:#EEE9DE;--hd-warm5:#F5F0DE;--hd-warm6:#DED6C6;--hd-sage:#707265;--hd-onsage:#F8F6F0;--hd-blue:#A4ACB1;
  --hd-ink:#282728;--hd-light:#FCFDFD;--hd-border:#28272820;--hd-rule:rgba(40,39,40,.45);--hd-grey:#605e5f;--hd-night:#0b0907;
  --hd-ground:var(--hd-linen);--hd-fg:var(--hd-ink);--hd-dim:.72;
  --ribbon:34px;--hd-g:30px;--hd-gap:20px;--hd-sec:90px;--hd-head:94px;
  --hd-sans:"Funnel Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--hd-mono:"Inconsolata",ui-monospace,Menlo,Consolas,monospace;
  /* the reference's eases */
  --e-p4o:cubic-bezier(.22,1,.36,1);--e-p3o:cubic-bezier(.25,1,.5,1);--e-p2o:cubic-bezier(.33,1,.68,1);
  --e-p3io:cubic-bezier(.76,0,.24,1);--e-p2io:cubic-bezier(.65,0,.35,1);--e-xo:cubic-bezier(.16,1,.3,1);
  --e-xio:cubic-bezier(.87,0,.13,1);--e-sio:cubic-bezier(.37,0,.63,1);--e-so:cubic-bezier(.61,1,.88,1);--e-fade:cubic-bezier(.17,.17,0,1)
}
@media (max-width:1023px){:root{--hd-g:20px;--hd-gap:15px;--hd-sec:40px;--hd-head:58px}}
@media (max-width:383px){:root{--ribbon:50px}}
:root.hd-ribbon-closed{--ribbon:0px}
.hd-pg-shop,.hd-pg-product{--hd-ground:var(--hd-white)}
.hd-pg-faqs{--hd-ground:var(--hd-warm3)}
.hd-pg-contact{--hd-ground:var(--hd-warm5)}
.hd-pg-location{--hd-ground:var(--hd-blue);--hd-rule:rgba(40,39,40,.5);--hd-dim:.9}
.hd-pg-artisan{--hd-ground:var(--hd-sage);--hd-fg:var(--hd-onsage);--hd-rule:rgba(248,246,240,.5);--hd-grey:var(--hd-onsage);--hd-dim:1}

html{background:var(--hd-ground);color:var(--hd-fg);scroll-behavior:auto;scroll-padding-top:calc(var(--hd-head) + 36px)}
html.hd-pg-shop,html.hd-pg-faqs{scroll-padding-top:calc(var(--hd-head) + 100px)}
@media (max-width:1023px){html.hd-pg-shop,html.hd-pg-faqs{scroll-padding-top:136px}}
body{margin:0;background:var(--hd-ground);color:var(--hd-fg);font:400 16px/24px var(--hd-sans);text-rendering:geometricPrecision;overflow-x:clip}
h1,h2,h3,p,ul,ol,dl,dd,blockquote,figure,fieldset{margin:0;padding:0}
h1,h2,h3{font-weight:350}
ul,ol{list-style:none}
fieldset{border:0;min-width:0}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;border-radius:0;cursor:pointer}
img{display:block;max-width:none}
.hd-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{z-index:1000}
main{display:block}
main:focus{outline:0}
.hd-arrow{display:inline-block;width:6px;height:6px;margin-left:6px;overflow:visible;vertical-align:.2em}
:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.hd-g24{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));column-gap:var(--hd-gap);padding:0 var(--hd-g)}

/* page entrance and leave: our own link clicks fade the page out and the next one in over 0.52 s, as the reference;
   a direct load shows at once (the head script sets hd-enter only after our fade or a back or forward step) */
.hd-enter body{animation:hd-fade .52s var(--e-sio) both}
.hd-leave body{opacity:0;transition:opacity .52s var(--e-sio)}
@keyframes hd-fade{from{opacity:0}}

/* illustrative notice (contract), in flow above everything; closes for the visit */
.hd-ribbon{position:relative;z-index:70;display:flex;align-items:center;height:var(--ribbon);padding-left:var(--hd-g);background:var(--hd-ink);color:var(--hd-linen);font:400 12px/16px var(--hd-sans);letter-spacing:.01em}
.hd-ribbon p{flex:1;min-width:0;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;column-gap:16px;row-gap:2px}
.hd-ribbon a{padding:9px 0;margin:-9px 0;text-decoration:underline;text-underline-offset:3px}
.hd-ribbon-x{flex:none;display:none;width:44px;height:100%;font-size:18px;line-height:1}
.hd-ready .hd-ribbon-x{display:block}
.hd-ribbon-x:focus-visible{outline-offset:-6px}
.hd-ribbon-closed .hd-ribbon{display:none}
@media (max-width:383px){.hd-ribbon p{flex-direction:column;align-items:flex-start;justify-content:center}}

/* header: a zero height sticky holder right after the ribbon, so the header rides the top of the window
   once the ribbon has scrolled away (no script needed) */
.hd-stick{position:sticky;top:0;z-index:60;height:0}
.hd-head{position:absolute;left:0;right:0;top:0;height:var(--hd-head);color:var(--hd-pfg,var(--hd-fg));font:350 12px/15px var(--hd-sans);letter-spacing:.3px;text-transform:uppercase;transition:color .433s var(--e-sio) .03s,transform .6s var(--e-xo)}
.hd-hide .hd-head{transform:translateY(-100%)}
.menu-open .hd-head{transform:none}
.hd-panel{position:absolute;inset:0;background:var(--hd-pbg,var(--hd-ground));opacity:0;transition:opacity .6s var(--e-xo),background-color .5s var(--e-p2io)}
.hd-solid .hd-panel{opacity:1}
[data-head=solid] .hd-panel,html:not(.hd-js) .hd-panel{opacity:1;transition:background-color .5s var(--e-p2io)}
.hd-js[data-head=hero] .hd-head:not(.hd-solid),.hd-js[data-head=gallery] .hd-head:not(.hd-solid){color:#fff}
.hd-mark{position:absolute;z-index:2;left:30px;top:23.6px;width:117px;padding:13px 0;color:inherit}
.hd-mark svg{display:block;width:100%;height:auto}
/* the hairline and tagline show only on the home page near the top, and go together (0.3 s) */
.hd-rule{position:absolute;z-index:2;left:30px;top:63.2px;width:117.1px;height:.6px;background:currentColor}
.hd-tag{position:absolute;z-index:2;left:30px;top:68px;font:400 10px/12.5px var(--hd-mono);letter-spacing:2.2px;white-space:nowrap}
.hd-rule,.hd-tag{transition:opacity .3s var(--e-sio),visibility 0s}
.hd-scrolled .hd-rule,.hd-scrolled .hd-tag{opacity:0;visibility:hidden;transition:opacity .3s var(--e-sio),visibility 0s .3s}
.hd-nav{position:absolute;z-index:3;left:calc(50% + 10px);top:25px;height:44px;display:flex;align-items:center;gap:40px}
.hd-nav>a{position:relative;display:flex;align-items:center;height:44px;transition:opacity .3s}
.hd-nav>a::after,.hd-tl::after{content:"";position:absolute;left:0;right:0;bottom:13px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--e-p2o)}
.hd-nav>a:hover::after,.hd-nav>a[aria-current]::after{transform:scaleX(1)}
@media (min-width:1440px){.hd-nav{left:calc(30px + (100% - 40px) * 13 / 24 + 2.5px)}}
.hd-burger{position:relative;display:none;width:44px;height:44px;margin:0 -10px}
.has-js .hd-burger{display:block}
.hd-burger i{position:absolute;left:10px;width:24px;height:1px;background:currentColor;transition:transform .8s var(--e-p3o)}
.hd-burger i:first-child{top:18px}.hd-burger i:last-child{top:26px}
[aria-expanded=true]>i:first-child{transform:translateY(4px) rotate(45deg)}
[aria-expanded=true]>i:last-child{transform:translateY(-4px) rotate(-45deg)}
.hd-pick{position:absolute;z-index:3;right:30px;top:25px;height:44px;display:flex;align-items:center}
/* legibility over the hero photo and the product galleries (ledger 30): soft pools of the photo's own near black
   behind the nav cluster and Pickup; they fade as the photo's foot nears the header and once the header turns solid */
.hd-nav::before,.hd-pick::before{content:"";position:absolute;z-index:-1;top:-29px;bottom:-33px;left:-56px;right:-56px;border-radius:50%;background:rgba(11,9,7,.55);filter:blur(22px);pointer-events:none;opacity:0;transition:opacity .3s}
.hd-pick::before{left:-40px;right:-24px;background:rgba(11,9,7,.6)}
.hd-mark::before{content:"";position:absolute;z-index:-1;inset:-14px -40px -14px -36px;border-radius:50%;background:rgba(11,9,7,.5);filter:blur(20px);pointer-events:none;opacity:0;transition:opacity .3s}
.hd-js[data-head=hero] .hd-head:not(.hd-solid) .hd-mark::before,.hd-js[data-head=gallery] .hd-head:not(.hd-solid) .hd-mark::before{opacity:var(--hd-pool,1)}
.hd-js[data-head=gallery] .hd-nav::before{background:rgba(11,9,7,.64)}
.hd-js[data-head=gallery] .hd-pick::before{background:rgba(11,9,7,.64)}
.hd-js[data-head=hero] .hd-head:not(.hd-solid) .hd-nav::before,.hd-js[data-head=hero] .hd-head:not(.hd-solid) .hd-pick::before,
.hd-js[data-head=gallery] .hd-head:not(.hd-solid) .hd-nav::before,.hd-js[data-head=gallery] .hd-head:not(.hd-solid) .hd-pick::before{opacity:var(--hd-pool,1)}
@media (max-width:1023px){
  .hd-mark{left:20px;top:7.5px;width:83px;padding:15.5px 0}
  .hd-rule,.hd-tag,.hd-nav>a{display:none}
  .hd-nav{left:auto;right:10px;top:7px;gap:0}
  .hd-burger{margin:0}
  .hd-pick{right:74px;top:7px}
  .hd-nav::before,.hd-pick::before{top:-3px;bottom:-11px;background:rgba(11,9,7,.66);filter:blur(16px)}
  .hd-nav::before{left:-20px;right:-8px}
  .hd-pick::before{left:-30px;right:-24px}
  .hd-js[data-head=gallery] .hd-nav::before,.hd-js[data-head=gallery] .hd-pick::before{background:rgba(11,9,7,.74)}
  .hd-hide .hd-head{transform:none}
}

/* menu: the shared toggle contract (showcase.js) sets data-open on the panel and menu-open on body */
.hd-scrim{position:fixed;z-index:0;inset:0;background:rgba(0,0,0,.4);opacity:0;visibility:hidden;transition:opacity .25s var(--e-sio),visibility 0s .25s}
.menu-open .hd-scrim{opacity:1;visibility:visible;transition:opacity .25s var(--e-sio)}
.hd-menu{position:fixed;z-index:1;left:0;top:0;width:100%;height:599px;max-height:100vh;max-height:100dvh;overflow:hidden;background:var(--hd-sage);color:var(--hd-onsage);visibility:hidden;transform:translateY(-100%);transition:transform .6s var(--e-xo),visibility 0s .6s;text-transform:none;letter-spacing:0}
.hd-menu[data-open]{visibility:visible;transform:none;transition:transform 1s var(--e-p3io),visibility 0s}
.hd-menu-in{position:relative;height:100%;overflow-y:auto;overscroll-behavior:contain;transform:translateY(100%);transition:transform .6s var(--e-xo)}
.hd-menu[data-open] .hd-menu-in{transform:none;transition:transform 1s var(--e-p3io)}
.hd-menu-main{position:absolute;top:160px;left:calc(30px + (100% - 40px) * 13 / 24 - 5.3px)}
.hd-menu-main li{margin-bottom:40px}
.hd-menu-main a{display:inline-block;padding:2.5px 0;font:350 32px/40px var(--hd-sans);letter-spacing:-.32px}
.hd-menu-main .hd-arrow{width:12px;height:12px;margin-left:4px;vertical-align:.45em}
.hd-menu-side{position:absolute;top:168px;left:min(calc(30px + (100% - 40px) * 13 / 24 + 363.7px),calc(100% - 275px));width:245px;padding-bottom:40px}
.hd-menu-group{margin-bottom:34px}
.hd-menu-group h2{font:400 14px/21px var(--hd-sans)}
.hd-menu-rule{display:block;height:1px;max-width:200px;margin-bottom:9px;background:currentColor;opacity:.5;transform-origin:left}
.hd-menu-group li{margin-bottom:6px}
.hd-menu-group a{display:inline-block;font:400 16px/20px var(--hd-sans)}
.hd-menu-main li,.hd-menu-group{opacity:0;transform:translateY(-20px);transition:opacity .3s,transform 0s .3s}
.hd-menu-group{transform:translateX(-10px)}
.hd-menu-rule{transform:scaleX(0);transition:transform 0s .3s}
.hd-menu[data-open] .hd-menu-main li{opacity:1;transform:none;transition:opacity .8s var(--e-p2o),transform .8s var(--e-p2o);transition-delay:calc(.5s + var(--i) * .1s)}
.hd-menu[data-open] .hd-menu-group{opacity:1;transform:none;transition:opacity .8s var(--e-p2o),transform .8s var(--e-p2o);transition-delay:calc(.8s + var(--i) * .15s)}
.hd-menu[data-open] .hd-menu-rule{transform:none;transition:transform .6s var(--e-xio) calc(.7s + var(--i, 0) * .15s)}
.menu-open .hd-head{color:var(--hd-onsage)!important;transition:color .3s}
.menu-open .hd-panel{opacity:0!important}
.menu-open .hd-nav>a{opacity:0;visibility:hidden}
.menu-open .hd-nav::before,.menu-open .hd-pick::before,.menu-open .hd-mark::before{opacity:0!important}
@media (max-width:1023px){
  .hd-menu{height:100%;transform:translateX(-100%);transition:transform 1s var(--e-xo),visibility 0s 1s}
  .hd-menu[data-open]{transition:transform 1s var(--e-p3io),visibility 0s}
  .hd-menu-in{transform:none;transition:none;padding:150px 20px 40px}
  .hd-menu[data-open] .hd-menu-in{transition:none}
  .hd-menu-main,.hd-menu-side{position:static;width:auto}
  .hd-menu-main li{margin-bottom:5px}
  .hd-menu-side{margin-top:70px;padding:0}
  .hd-menu-group h2{font-size:16px;line-height:24px}
  .hd-menu-group li{margin-bottom:0}
  .hd-menu-group a{padding:12px 0;margin:-6px 0}
  .hd-menu-main li,.hd-menu-group{transform:none}
  .hd-menu-main li,.hd-menu-group{transition:opacity .92s var(--e-so)}
  .hd-menu[data-open] .hd-menu-main li,.hd-menu[data-open] .hd-menu-group{transition:opacity 2s var(--e-so);transition-delay:calc(.25s + var(--i) * .08s)}
  .hd-menu[data-open] .hd-menu-group{transition-delay:calc(.57s + var(--i) * .08s)}
  .menu-open .hd-mark,.menu-open .hd-pick{opacity:0;visibility:hidden}
}
@media (max-width:1023px) and (max-height:500px){.hd-menu-in{padding-top:calc(var(--ribbon) + 64px)}.hd-menu-side{margin-top:32px}}

/* ---------- home ---------- */
/* H1 hero: 120vh (100vh on phones), the statement lower right at the nav x, its box bottom 48.4 px (phone 118.4)
   above the window bottom at the top of the page. The section itself is clear, so the intro curtain lifts over the
   linen ground; the dark ground rides on the moving photo wrapper. */
.hd-hero{position:relative;height:120vh;overflow:hidden;margin-bottom:var(--hd-sec)}
.hd-hero-photo,.hd-hero-inner,.hd-hero-zoom{position:absolute;inset:0}
.hd-hero-photo{overflow:hidden;background:var(--hd-night)}
.hd-hero-zoom{transform-origin:50% 50%}
.hd-hero picture,.hd-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
@media (min-width:1024px){.hd-hero img{object-position:50% 10%}}
.hd-st{position:absolute;left:calc(50% + 10px);bottom:calc(20vh + 48.4px + var(--ribbon));width:calc((100% - 520px) * .375 + 162.5px);padding-bottom:calc(1.5em + 1.6px);color:var(--hd-light);font-size:2vw;line-height:1.2;letter-spacing:-.02em;font-weight:350}
@media (min-width:1440px){.hd-st{left:calc(30px + (100% - 40px) * 13 / 24 + 2.5px)}}
.hd-st-in{display:block}
/* a soft pool of the crust's own shadow under the desktop statement (ledger 30): the crop sits lower since build 4b */
.hd-st::before{content:"";position:absolute;z-index:-1;inset:-48px -56px -8px -48px;border-radius:50%;background:rgba(11,9,7,.4);filter:blur(42px);pointer-events:none}
.hd-ln{display:block;overflow:hidden;padding:0 0 .12em;margin-bottom:-.12em;white-space:nowrap}
.hd-ln>span{display:block}
.hd-nw{white-space:nowrap}
.hd-st a{position:relative;display:inline-block;line-height:1.25;white-space:nowrap}
.hd-st a::before,.hd-st a::after{content:"";position:absolute;left:0;right:0;top:100%;height:1px;background:currentColor}
.hd-st a::before{transform:scaleX(0);transform-origin:left;transition:transform .3s var(--e-p2io)}
.hd-st a::after{transform-origin:right;transition:transform .3s var(--e-p2io) .3s}
.hd-st a:hover::after{transform:scaleX(0);transition:transform .3s var(--e-p2io)}
.hd-st a:hover::before{transform:scaleX(1);transition:transform .3s var(--e-p2io) .3s}
.hd-st a svg{display:inline-block;width:.36em;height:.36em;margin-left:.12em;vertical-align:.08em;overflow:visible}
@media (max-width:1023px){
  .hd-hero{height:100vh;min-height:420px}
  .hd-st{left:20px;right:20px;width:auto;bottom:calc(118.4px + var(--ribbon));font-size:28px;line-height:33.6px;letter-spacing:-.56px}
  .hd-ln,.hd-ln>span{display:inline;white-space:normal;overflow:visible;padding:0;margin:0}
  .hd-st::before{content:"";position:absolute;z-index:-1;inset:-36px -18px calc(1.5em + 1.6px - 40px) -18px;border-radius:40%;background:rgba(11,9,7,.48);filter:blur(30px);pointer-events:none}
}
@media (min-width:600px) and (max-width:1023px){.hd-st::before{background:rgba(11,9,7,.62);filter:blur(34px)}}
@media (max-width:599px){.hd-hero img{object-position:50% 100%}}
@media (max-width:359px){.hd-hero img{transform:scale(1.25);transform-origin:50% 100%}}
/* the intro, once per visit (the head script sets hd-intro, the page script hd-go once the photo is decoded;
   never with reduced motion): the photo rises at --hd-t0 (about 1.1 s), the header 0.45 s later, then the lines
   0.24 s apart (measured against the reference: photo settle 1786 ms, header t50 2069, lines t50 2253, 2536 and 2719) */
.hd-intro body,.hd-nofade body{animation:none}
.hd-intro .hd-hero-photo{transform:translateY(100%)}
.hd-intro .hd-hero-inner{transform:translateY(-100%) scale(1.1)}
.hd-intro .hd-head{opacity:0}
.hd-intro .hd-st-in,.hd-intro .hd-st::before{opacity:0}
.hd-intro.hd-go .hd-hero-photo{transform:none;animation:hd-photo-up 1.05s var(--e-p4o) var(--hd-t0,0s) both}
.hd-intro.hd-go .hd-hero-inner{transform:none;animation:hd-photo-in 1.05s var(--e-p4o) var(--hd-t0,0s) both}
.hd-intro.hd-go .hd-head{opacity:1;animation:hd-fade 1s var(--e-sio) calc(var(--hd-t0,0s) + .45s) both}
.hd-intro.hd-go .hd-st-in{opacity:1}
.hd-intro.hd-go .hd-st::before{opacity:1;animation:hd-fade .9s var(--e-sio) calc(var(--hd-t0,0s) + .3s) both}
.hd-intro.hd-go .hd-ln>span{animation:hd-line 1.4s var(--e-p4o) both;animation-delay:calc(var(--hd-t0,0s) + .95s + var(--i) * .24s)}
@keyframes hd-photo-up{from{transform:translateY(100%)}}
@keyframes hd-photo-in{from{transform:translateY(-100%) scale(1.1)}}
@keyframes hd-line{from{transform:translateY(100%);opacity:0}}
@keyframes hd-rise{from{transform:translateY(40px);opacity:0}}
@media (max-width:1023px){
  .hd-intro.hd-go .hd-ln>span{animation:none}
  .hd-intro.hd-go .hd-st-in{animation:hd-rise 1.4s var(--e-p4o) calc(var(--hd-t0,0s) + .95s) both}
}

/* H2 row (and "You may also enjoy"): heading 60 px above three staggered cards (spans 8, 7, 9) */
.hd-grid{padding:0 var(--hd-g);margin-bottom:var(--hd-sec)}
.hd-grid-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;column-gap:24px;margin-bottom:60px}
.hd-grid h2{font:350 32px/40px var(--hd-sans)}
.hd-key{font:400 14px/21px var(--hd-mono);text-transform:uppercase;letter-spacing:.6px}
.hd-cards{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));column-gap:var(--hd-gap);align-items:start}
.hd-card{position:relative}
.hd-card a{display:block}
.hd-cards .hd-card:nth-child(1){grid-column:span 8}.hd-cards .hd-card:nth-child(2){grid-column:span 7}.hd-cards .hd-card:nth-child(3){grid-column:span 9}
.hd-ph{position:relative;overflow:hidden;background:var(--hd-warm6)}
.hd-pg-shop .hd-ph,.hd-pg-product .hd-ph{background:#ebe6db}
.hd-cards .hd-card:nth-child(1) .hd-ph{aspect-ratio:447/362}.hd-cards .hd-card:nth-child(2) .hd-ph{aspect-ratio:4/5}.hd-cards .hd-card:nth-child(3) .hd-ph{aspect-ratio:505/402}
.hd-ph picture{position:absolute;inset:0}
.hd-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hd-ph picture+picture{opacity:0;transition:opacity .25s var(--e-sio)}
.hd-card a:hover .hd-ph picture+picture,.hd-card a:focus-visible .hd-ph picture+picture{opacity:1}
.hd-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:8px}
.hd-nm{font:400 16px/24px var(--hd-sans)}
.hd-pr{font:400 14px/21px var(--hd-mono);white-space:nowrap}
.hd-pr span{margin-left:8px}
@media (hover:hover) and (pointer:fine){.hd-ready .hd-ph{cursor:none}}
@media (max-width:1023px){
  .hd-grid h2{font-size:24px;line-height:30px}
  .hd-grid-top{margin-bottom:30px}
  .hd-cards{display:flex;gap:15px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -20px;padding:0 20px;scroll-padding:0 20px;scrollbar-width:none}
  .hd-cards::-webkit-scrollbar{display:none}
  .hd-cards .hd-card{flex:0 0 167px;scroll-snap-align:start}
  .hd-cards .hd-card .hd-ph{aspect-ratio:4/5!important}
  .hd-cards .hd-row{flex-direction:column;align-items:flex-start;gap:0}
  .hd-cards .hd-nm{font-size:14px;line-height:21px}
}
/* the cursor tag over card photos (fine pointers only) */
.hd-cursor{position:fixed;z-index:90;left:0;top:0;width:16px;height:16px;pointer-events:none;visibility:hidden}
.hd-cursor.hd-on{visibility:visible}
.hd-cursor-dot{position:absolute;z-index:1;left:5px;top:5px;width:6px;height:6px;border-radius:50%;background:var(--hd-ink)}
.hd-cursor-box{position:absolute;left:-8px;top:-9.45px;display:block;padding:8px 16px 8px 48px;background:var(--hd-light);color:var(--hd-ink);font:400 14px/14px var(--hd-mono);letter-spacing:2.1px;text-transform:uppercase;white-space:nowrap;clip-path:inset(0 100% 0 0);transition:clip-path .2s var(--e-so)}
.hd-cursor-box b{font-weight:400;margin-left:12px}
.hd-cursor.hd-on .hd-cursor-box{clip-path:inset(0 0 0 0)}
.hd-cursor.hd-flip .hd-cursor-box{left:auto;right:-8px;padding:8px 48px 8px 16px;clip-path:inset(0 0 0 100%)}
.hd-cursor.hd-flip.hd-on .hd-cursor-box{clip-path:inset(0 0 0 0)}
/* the product wipe: a #F8F6F0 panel rises over the page before a product opens (desktop card clicks) */
.hd-wipe{position:fixed;z-index:95;inset:0;background:var(--hd-white);transform:translateY(100%);visibility:hidden;pointer-events:none}
.hd-wiping .hd-wipe{visibility:visible;transform:none;transition:transform 1s var(--e-p3io)}

/* H3: the founder's words on the warm stone block */
.hd-quote{padding:var(--hd-sec) var(--hd-g);background:var(--hd-warm6)}
.hd-quote blockquote{max-width:630px;font:350 32px/1.07 var(--hd-sans);letter-spacing:-.025em}
.hd-quote figcaption{margin-top:150px;font:400 16px/24px var(--hd-sans)}
@media (max-width:1023px){
  .hd-quote blockquote{font-size:24px;line-height:1.25;letter-spacing:.02em}
  .hd-quote figcaption{margin-top:100px}
}

/* photo boxes: a fixed aspect at each width; parallax boxes hold a 15% taller photo that drifts as they pass */
.hd-pb{position:relative;overflow:hidden;aspect-ratio:var(--ar);background:rgba(40,39,40,.08)}
.hd-pb picture,.hd-pb img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover}
.hd-par picture{top:-7.5%;height:115%}
@media (max-width:1023px){.hd-pb{aspect-ratio:var(--arm)}}
.hd-ready .hd-pb img,.hd-ready .hd-ph picture:first-child img{opacity:0;transition:opacity .5s ease-in-out}
.hd-ready .hd-pb img.hd-ok,.hd-ready .hd-ph picture:first-child img.hd-ok{opacity:1}

/* in view fades: 2.33 s on the reference's curve, once */
.hd-ready [data-hd-in]{opacity:0;transition:opacity 2.33s var(--e-fade) var(--hd-d,0s)}
.hd-ready [data-hd-in].hd-seen{opacity:1}
.hd-ready .hd-sc{opacity:0;transition:opacity 1s var(--e-fade)}
.hd-ready .hd-sc.hd-seen{opacity:1}

/* H4 and H5: the story block on #F8F6F0 to the footer */
.hd-story{background:var(--hd-white);color:var(--hd-ink);padding:var(--hd-sec) 0 var(--hd-sec)}
.hd-story-a{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));column-gap:var(--hd-gap);padding:0 var(--hd-g);align-items:start;margin-bottom:var(--hd-sec)}
.hd-story-t{grid-column:1/span 8;font:350 32px/40px var(--hd-sans)}
.hd-story-fig{grid-column:13/span 12;position:relative}
.hd-markt{position:absolute;right:calc(100% + 24px);top:22%;font:400 14px/21px var(--hd-mono);letter-spacing:4.62px;white-space:nowrap;text-transform:uppercase}
.hd-story-b{padding:0 var(--hd-g)}
.hd-clip{will-change:clip-path}
.hd-teaser{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));column-gap:var(--hd-gap);margin-top:var(--hd-sec)}
.hd-teaser>p:first-child{grid-column:14/span 9;font:350 32px/40px var(--hd-sans)}
.hd-links{grid-column:14/span 11;display:flex;flex-wrap:wrap;column-gap:40px;margin-top:56px}
.hd-tl{position:relative;display:inline-flex;align-items:center;min-height:44px;font:400 16px/24px var(--hd-sans)}
.hd-tl::after{bottom:9px;transform:scaleX(1);transform-origin:right}
.hd-tl:hover::after{animation:hd-redraw .6s var(--e-p2io)}
@keyframes hd-redraw{0%{transform:scaleX(1);transform-origin:right}49%{transform:scaleX(0);transform-origin:right}51%{transform:scaleX(0);transform-origin:left}100%{transform:scaleX(1);transform-origin:left}}
@media (max-width:1023px){
  .hd-story-a{display:block}
  .hd-story-t{font-size:24px;line-height:30px;margin-bottom:30px}
  .hd-markt{position:static;margin-bottom:12px;font-size:12px;letter-spacing:3.6px}
  .hd-teaser{display:block;margin-top:30px}
  .hd-teaser>p:first-child{font-size:24px;line-height:30px}
  .hd-links{margin-top:24px}
}

/* ---------- footer: mailing list and acknowledgement, a quiet gap, then four link columns ---------- */
.hd-foot{padding:40px var(--hd-g);background:var(--hd-ground);color:var(--hd-fg)}
.hd-foot-top{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));column-gap:var(--hd-gap);margin-bottom:310px}
.hd-mail{grid-column:1/span 12}
.hd-mail h2{font:350 32px/40px var(--hd-sans);margin-bottom:24px;max-width:600px}
.hd-mail-row{display:flex;align-items:flex-end;gap:8px}
.hd-mail input{width:100%;max-width:260px;min-height:44px;padding:8px 0 6px;border:0;border-bottom:1px solid currentColor;border-radius:0;background:none;font:400 16px/20px var(--hd-sans)}
.hd-mail input::placeholder{color:inherit;opacity:.62}
.hd-mail button{min-height:44px;padding:8px 4px 6px;border-bottom:1px solid currentColor;font:400 16px/20px var(--hd-sans)}
fieldset[disabled]{opacity:.62}
.hd-done{max-width:440px}
.hd-done p{font:400 16px/22.4px var(--hd-sans)}
.hd-done-sum{white-space:pre-line;margin-top:8px;opacity:.8}
.hd-done button{margin-top:12px;min-height:44px;border-bottom:1px solid currentColor}
.hd-done:focus{outline:0}
.hd-ack{grid-column:14/span 7;font:400 16px/22.4px var(--hd-sans)}
.hd-foot-cols{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));column-gap:var(--hd-gap)}
.hd-foot-cols>div:nth-child(1){grid-column:1/span 7}.hd-foot-cols>div:nth-child(2){grid-column:8/span 6}
.hd-foot-cols>div:nth-child(3){grid-column:14/span 6}.hd-foot-cols>div:nth-child(4){grid-column:20/span 5}
.hd-foot-cols h2{font:400 14px/21px var(--hd-sans);opacity:var(--hd-dim);margin-bottom:12px}
.hd-foot-cols li a{display:inline-block;font:400 16px/24px var(--hd-sans)}
.hd-foot-cols li a:hover{text-decoration:underline;text-underline-offset:3px}
.hd-visit li{margin-bottom:6px}
.hd-visit span{display:block;font:400 14px/20px var(--hd-sans);opacity:max(var(--hd-dim),.75)}
.hd-foot-cols p{font:400 14px/20px var(--hd-sans);margin-bottom:8px}
@media (max-width:1023px){
  .hd-foot-top{display:block;margin-bottom:72px}
  .hd-mail h2{font-size:32px;line-height:40px}
  .hd-ack{margin-top:40px;max-width:520px}
  .hd-foot-cols{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:15px;row-gap:40px}
  .hd-foot-cols>div:nth-child(n){grid-column:auto}
  .hd-foot-cols li{margin-bottom:10px}
  .hd-foot-cols li a{padding:10px 0;margin:-10px 0}
}

/* ---------- UP NEXT: the next page's photo band at the foot of every page but the products ---------- */
.hd-up{position:relative;height:53vh;min-height:300px;background:var(--hd-ink);color:var(--hd-light);overflow:hidden}
.hd-up-a{position:absolute;inset:0;display:block}
.hd-up-ph,.hd-up-sc{position:absolute;inset:0;overflow:hidden}
.hd-up-sc{transform:scale(1.1)}
.hd-up-sc picture{position:absolute;left:0;top:-7.5%;width:100%;height:115%}
.hd-up-sc img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover}
.hd-up-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(20,17,14,.7),rgba(20,17,14,.58) 30%,rgba(20,17,14,.24) 60%,rgba(20,17,14,0) 86%)}
.hd-up-l,.hd-up-b{position:absolute;top:60px;font:400 16px/22.4px var(--hd-mono);letter-spacing:2.4px;text-transform:uppercase;transition:color .2s var(--e-sio)}
.hd-up-l{left:30px}
.hd-up-b,.hd-up h2{left:calc(30px + (100% - 40px) * 7 / 24)}
.hd-up h2{position:absolute;top:96px;font:350 52px/58.24px var(--hd-sans)}
.hd-up .hd-chev{position:absolute;right:30px;top:63px;width:31px;height:16px;transition:transform .5s var(--e-so)}
.hd-up-a:hover .hd-chev{transform:translateY(6px)}
.hd-up-a:hover .hd-up-l,.hd-up-a:hover .hd-up-b{color:var(--hd-linen)}
.hd-up-a:focus-visible{outline-offset:-6px}
.hd-up-wipe{position:fixed;z-index:96;inset:0;background:var(--hd-next,var(--hd-white));transform:translateY(100%);visibility:hidden;pointer-events:none}
.hd-up-cover{position:fixed;z-index:97;overflow:hidden;pointer-events:none;background:var(--hd-ink)}
.hd-up-cover img{position:absolute;left:0;top:-7.5%;width:100%;height:115%;object-fit:cover}
@media (max-width:1023px){
  .hd-up{height:50vh;min-height:280px}
  .hd-up-l,.hd-up-b{top:40px}
  .hd-up-l{left:20px}
  .hd-up-b,.hd-up h2{left:calc(20px + (100% - 25px) * 2 / 6)}
  .hd-up h2{top:72px;font-size:32px;line-height:40px}
  .hd-up .hd-chev{right:20px;top:43px}
}

/* ---------- buttons, text links and fields ---------- */
.hd-btn{position:relative;display:flex;align-items:center;justify-content:center;min-height:66px;padding:0 24px;border:1px solid rgba(40,39,40,.31);font:400 16px/24px var(--hd-sans);text-align:center;transition:background-color .3s var(--e-sio),border-color .3s var(--e-sio)}
.hd-btn:hover{background:rgba(40,39,40,.06);border-color:var(--hd-ink)}
.hd-pg-artisan .hd-btn{border-color:rgba(248,246,240,.45)}
.hd-f{margin-bottom:28px}
.hd-f label{display:block;font:400 14px/21px var(--hd-sans);color:var(--hd-grey)}
.hd-f input,.hd-f select,.hd-f textarea{display:block;width:100%;min-height:44px;padding:8px 0 7px;border:0;border-bottom:1px solid currentColor;border-radius:0;background:none;font:400 16px/24px var(--hd-sans)}
.hd-f select{appearance:none;background:linear-gradient(45deg,transparent calc(50% - .6px),currentColor calc(50% - .6px),currentColor calc(50% + .6px),transparent calc(50% + .6px)) no-repeat calc(100% - 10px) 50%/7px 7px,linear-gradient(-45deg,transparent calc(50% - .6px),currentColor calc(50% - .6px),currentColor calc(50% + .6px),transparent calc(50% + .6px)) no-repeat calc(100% - 4px) 50%/7px 7px;padding-right:28px}
.hd-f textarea{resize:none;min-height:88px}
.hd-f input:focus,.hd-f select:focus,.hd-f textarea:focus{outline:0;border-bottom-width:2px;padding-bottom:6px}
.hd-f input:focus-visible,.hd-f select:focus-visible,.hd-f textarea:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.hd-f2{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--hd-gap)}

/* ---------- shop ---------- */
.hd-shead{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));column-gap:var(--hd-gap);padding:min(250px,27.78vh) var(--hd-g) 0}
.hd-shead-l{grid-column:1/span 8}
.hd-shead h1{font:350 32px/40px var(--hd-sans);letter-spacing:-.32px}
.hd-shead-r{grid-column:14/span 8}
.hd-shead-r>p:first-child{font:350 32px/40px var(--hd-sans);max-width:440px}
.hd-shead .hd-key{margin-top:14px}
.hd-sub{position:sticky;top:var(--hd-head);z-index:40;display:flex;justify-content:space-between;align-items:center;height:64px;padding:0 var(--hd-g);margin-top:min(200px,22.22vh);background:var(--hd-ground);font:350 12px/19.9px var(--hd-sans);letter-spacing:.24px;text-transform:uppercase;transition:top .6s var(--e-xo)}
.hd-js .hd-sub{top:var(--hd-st,var(--hd-head))}
.hd-hide .hd-sub{--hd-st:0px}
.hd-sub a{position:relative;display:flex;align-items:center;min-height:44px}
.hd-sub a::after{content:"";width:4px;height:4px;margin-left:8px;border-radius:50%;background:currentColor;opacity:0;transition:opacity .3s}
.hd-sub a[aria-current]::after{opacity:1}
.hd-shop{padding:36px var(--hd-g) 0}
.hd-sgroup{padding-bottom:var(--hd-sec)}
.hd-sgrid{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));column-gap:var(--hd-gap);row-gap:60px;align-items:start}
.hd-sc .hd-ph{height:34.7vw}
.hd-s2 .hd-ph{height:50vw}
.hd-s1,.hd-s3,.hd-s8{grid-column:1/span 9}.hd-s2{grid-column:12/span 13}.hd-s4,.hd-s6,.hd-s9{grid-column:10/span 7}.hd-s5,.hd-s7{grid-column:17/span 8}
.hd-srule{height:1px;margin:0 0 80px;border:0;background:var(--hd-rule);opacity:.5}
@media (max-width:1023px){
  .hd-shead{display:block;padding-top:150px}
  .hd-shead .hd-key{margin-top:10px}
  .hd-shead h1,.hd-shead-r>p:first-child{font-size:24px;line-height:30px}
  .hd-shead-r{margin-top:30px}
  .hd-sub{top:0;height:100px;padding-top:50px;margin-top:60px}
  .hd-js .hd-sub{top:0}
  .hd-sgrid{grid-template-columns:repeat(6,minmax(0,1fr));row-gap:30px}
  .hd-sc{grid-column:span 3!important}
  .hd-sc.hd-sf{grid-column:1/-1!important}
  .hd-sc .hd-ph,.hd-s2 .hd-ph{height:53.33vw}
  .hd-sc:not(.hd-sf) .hd-row{flex-direction:column;align-items:flex-start;gap:0}
  .hd-sc:not(.hd-sf) .hd-nm{font-size:14px;line-height:21px}
  .hd-srule{margin-bottom:40px}
}

/* ---------- product pages ---------- */
.hd-gal{position:relative;height:calc(100vh - 186px - var(--ribbon));min-height:300px;overflow:hidden;background:var(--hd-ground);outline-offset:-4px}
.hd-gal-t{position:absolute;inset:0}
.hd-gal-in{display:flex;gap:8px;height:100%;overflow-x:auto;scrollbar-width:thin}
.hd-gf{flex:none;height:100%;aspect-ratio:var(--ar);background:#ebe6db}
.hd-ready .hd-gf{background:none;overflow:hidden}
.hd-gf picture,.hd-gf img{display:block;width:100%;height:100%;object-fit:cover}
html:not(.hd-js) .hd-gf[aria-hidden]{display:none}
.hd-ready .hd-gal-in{display:block;overflow:visible;will-change:transform}
.hd-ready .hd-gf{position:absolute;left:0;top:0}
.hd-ready .hd-gal{cursor:grab;touch-action:pan-y}
.hd-ready .hd-gal.hd-drag{cursor:grabbing}
.hd-ready .hd-gal img{-webkit-user-drag:none;user-select:none}
@media (prefers-reduced-motion:no-preference){
  .hd-js .hd-gf picture{transform:translateY(110%);animation:hd-gal-safe 0s linear 4s forwards}
  .hd-js.hd-gal-go .hd-gf picture{animation:hd-gal-up 1s var(--e-p3o) calc(var(--hd-gd,0s) + var(--i,0) * .1s) both}
  /* the header waits for the frames (it would show white type and its dark pools on the bare ground), then fades in */
  .hd-js[data-head=gallery] .hd-head{opacity:0;animation:hd-show 0s linear 4s forwards}
  .hd-js[data-head=gallery].hd-gal-go .hd-head{opacity:1;animation:hd-fade .9s var(--e-sio) calc(var(--hd-gd,0s) + .55s) both}
}
@keyframes hd-gal-up{from{transform:translateY(110%)}to{transform:none}}
@keyframes hd-gal-safe{to{transform:none}}
@keyframes hd-show{to{opacity:1}}
.hd-ptitle{display:flex;justify-content:space-between;align-items:center;gap:30px;min-height:186px;padding:0 var(--hd-g);box-sizing:border-box}
.hd-ptitle h1{font:350 64px/70.4px var(--hd-sans);letter-spacing:-1.6px}
.hd-pbuy{flex:none;display:flex;align-items:center;gap:40px}
.hd-pprice{font:400 14px/21px var(--hd-mono);letter-spacing:.6px;white-space:nowrap}
.hd-pprice span{margin-left:8px}
.hd-pbtn{flex:none;width:345px;box-sizing:border-box}
.hd-details{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));column-gap:var(--hd-gap);margin:0 var(--hd-g);padding-top:80px;border-top:1px solid var(--hd-rule)}
.hd-details>h2{grid-column:1/span 8;font:350 32px/40px var(--hd-sans)}
.hd-dcol{grid-column:9/span 9}
.hd-lead{font:350 24px/30px var(--hd-sans)}
.hd-drows{margin-top:60px}
.hd-drow{position:relative;padding:12px 0;border-bottom:1px solid var(--hd-rule)}
.hd-drow h3{font:400 16px/24px var(--hd-sans)}
.hd-drow p{font:400 16px/24px var(--hd-sans);color:var(--hd-grey)}
.hd-ready .hd-dmore.hd-clamp p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:36px}
.hd-ready .hd-dmore.hd-clamp.hd-open p{white-space:normal}
.hd-more{position:absolute;right:-12px;bottom:4px;width:44px;height:44px;display:flex;align-items:center;justify-content:center}
.hd-plus{width:10px;height:10px;overflow:visible}
.hd-pv{transition:transform .25s var(--e-sio);transform-origin:5px 5px}
.hd-open .hd-pv,.hd-q[open] .hd-pv{transform:scaleY(0)}
.hd-marq{margin:var(--hd-sec) var(--hd-g);height:66px;border-top:1px solid var(--hd-rule);border-bottom:1px solid var(--hd-rule);overflow:hidden;display:flex;align-items:center}
.hd-marq-t{display:flex;flex:none;white-space:nowrap;will-change:transform}
.hd-marq-s{display:flex;flex:none;align-items:center}
.hd-marq span{font:400 14px/14px var(--hd-mono);letter-spacing:2.1px;text-transform:uppercase}
.hd-marq i{flex:none;width:6px;height:6px;margin:0 44px;border-radius:50%;background:currentColor}
.hd-origin{margin:0 var(--hd-g) var(--hd-sec)}
.hd-origin-t{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));column-gap:var(--hd-gap);padding-top:80px;border-top:1px solid var(--hd-rule);margin-bottom:var(--hd-sec)}
.hd-origin-t h2{grid-column:1/span 8;font:350 32px/40px var(--hd-sans)}
.hd-origin-t p{grid-column:9/span 8;font:400 16px/22.4px var(--hd-sans)}
@media (max-width:1023px){
  .hd-gal{height:min(66.6vh,calc(100vh - var(--ribbon) - 230px));min-height:240px}
  .hd-ptitle{display:block;min-height:0;padding:40px 20px 0}
  .hd-ptitle h1{font-size:42px;line-height:46.2px;letter-spacing:-1.05px}
  .hd-pbuy{display:block}
  .hd-pprice{margin-top:6px}
  .hd-pbtn{width:100%;margin-top:18px}
  .hd-details{display:block;margin-top:60px;padding-top:40px}
  .hd-details>h2,.hd-origin-t h2{font-size:24px;line-height:30px;margin-bottom:24px}
  .hd-drows{margin-top:36px}
  .hd-origin-t{display:block;padding-top:40px}
}

/* ---------- our story ---------- */
.hd-pg-artisan .hd-head{--hd-pfg:var(--hd-onsage)}
.hd-a1{display:grid;grid-template-columns:330px 1fr;column-gap:var(--hd-gap);padding:calc(106px + var(--hd-head)) var(--hd-g) 0;min-height:149vh;box-sizing:border-box;margin-bottom:var(--hd-sec)}
.hd-a1 h1{grid-column:2;grid-row:1;justify-self:end;width:53.54vw;font:350 6.5vw/.95 var(--hd-sans);letter-spacing:-.02em}
.hd-a1 h1 span{display:block}
.hd-a1 h1 span+span{text-align:right}
.hd-a1-ph{grid-column:2;grid-row:2;justify-self:end;width:53.54vw;margin-top:22px;align-self:start}
.hd-a1-intro{grid-column:1;grid-row:1/span 2;align-self:start;position:sticky;bottom:30px;margin-top:calc(100vh - var(--hd-head) - 236px);font:400 16px/22.4px var(--hd-sans);max-width:330px}
.hd-a2,.hd-a6,.hd-a9{margin-bottom:var(--hd-sec)}
.hd-chap{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;padding:0 var(--hd-g);margin-bottom:60px}
.hd-chap h2,.hd-chap-n{font:350 52px/58.24px var(--hd-sans)}
.hd-chap h2{max-width:calc((100% - 460px) * 8 / 24 + 140px)}
.hd-a9 .hd-chap{margin-bottom:0}
.hd-a2-ph{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));column-gap:var(--hd-gap);padding:0 var(--hd-g);align-items:start}
.hd-a2-ph figure:first-child{grid-column:1/span 16}.hd-a2-ph figure:last-child{grid-column:17/span 8}
.hd-a2-ph figcaption{margin-top:10px;font:400 14px/21px var(--hd-mono);letter-spacing:.6px}
.hd-atext{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));column-gap:var(--hd-gap);padding:0 var(--hd-g);margin-bottom:var(--hd-sec)}
.hd-tcol{grid-column:9/span 8}
.hd-tcol p,.hd-a16-p p,.hd-a8-p,.hd-a14 p{font:400 16px/22.4px var(--hd-sans)}
.hd-tcol p+p,.hd-a16-p p+p{margin-top:22px}
.hd-awide{padding:0 var(--hd-g);margin-bottom:var(--hd-sec)}
.hd-trio,.hd-pair{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));column-gap:var(--hd-gap);padding:0 var(--hd-g)}
.hd-trio{align-items:end}
.hd-trio>.hd-pb{grid-column:span 8}
.hd-pair{align-items:start}
.hd-pair>.hd-pb:first-child{grid-column:9/span 8}.hd-pair>.hd-pb:last-child{grid-column:17/span 8}
.hd-a12{margin-bottom:var(--hd-sec)}
.hd-a8,.hd-a16{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));column-gap:var(--hd-gap);padding:0 var(--hd-g);margin-bottom:var(--hd-sec)}
.hd-a8-t,.hd-a16-t{grid-column:1/span 8;display:flex;flex-direction:column;justify-content:space-between;gap:60px}
.hd-a8-ph,.hd-a16-ph{grid-column:13/span 12}
.hd-a8 blockquote{font:350 32px/40px var(--hd-sans);letter-spacing:-.8px}
.hd-a8 figcaption{margin-top:40px;font:400 16px/24px var(--hd-sans)}
.hd-a13{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));column-gap:var(--hd-gap);padding:0 var(--hd-g) var(--hd-sec)}
.hd-a13 h2{font:350 32px/40px var(--hd-sans);margin-bottom:24px}
.hd-mission{background:var(--hd-white);color:var(--hd-ink);padding-top:var(--hd-sec);--hd-rule:rgba(40,39,40,.45);--hd-grey:#605e5f}
.hd-a14{padding:0 var(--hd-g);margin-bottom:var(--hd-sec)}
.hd-a14 h2,.hd-a16 h2{font:350 52px/58.24px var(--hd-sans)}
.hd-a14 p{max-width:calc((100vw - 520px) * 8 / 24 + 140px);margin-top:60px}
.hd-a16{padding-bottom:var(--hd-sec);margin-bottom:0}
.hd-a16 h2{max-width:520px}
@media (max-width:1023px){
  .hd-a1{display:block;min-height:0;padding-top:calc(92px + var(--hd-head))}
  .hd-a1 h1{width:auto;justify-self:auto;font-size:13vw;line-height:.95}
  .hd-a1-ph{width:auto;justify-self:auto;margin-top:24px}
  .hd-a1-intro{position:static;margin-top:24px}
  .hd-chap{margin-bottom:30px}
  .hd-chap h2,.hd-chap-n{font-size:32px;line-height:40px}
  .hd-chap h2{max-width:none}
  .hd-a2-ph,.hd-atext,.hd-a8,.hd-a13,.hd-a16{display:block}
  .hd-a2-ph figure+figure{margin-top:30px}
  .hd-a8-t,.hd-a16-t{display:block}
  .hd-a8-ph,.hd-a16-ph{margin-top:40px}
  .hd-a8 blockquote{font-size:24px;line-height:30px;letter-spacing:.48px}
  .hd-a8-p{margin-top:40px}
  .hd-a16-p{margin-top:30px}
  .hd-a14 h2,.hd-a16 h2{font-size:32px;line-height:40px}
  .hd-a14 p{max-width:none;margin-top:30px}
  .hd-trio,.hd-pair{display:flex;gap:15px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 20px;scrollbar-width:none;align-items:flex-end}
  .hd-pair{align-items:flex-start}
  .hd-trio::-webkit-scrollbar,.hd-pair::-webkit-scrollbar{display:none}
  .hd-trio>.hd-pb,.hd-pair>.hd-pb{flex:0 0 263px;scroll-snap-align:start}
}

/* ---------- locations ---------- */
.hd-loc-head{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));column-gap:var(--hd-gap);padding:calc(86px + var(--hd-head)) var(--hd-g) 0}
.hd-loc-pre,.hd-loc-head h1{grid-column:14/span 11;font:350 64px/70.4px var(--hd-sans);letter-spacing:-1.6px}
.hd-loc-head h1{display:flex;align-items:center;gap:6px}
.hd-loc-btn{display:flex;align-items:center;justify-content:center;width:52px;height:52px;margin-top:6px}
.hd-loc-btn .hd-chev{width:31px;height:16px;transition:transform .5s var(--e-so)}
.hd-loc-btn:hover .hd-chev{transform:translateY(4px)}
.hd-loc{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));column-gap:var(--hd-gap);padding:0 var(--hd-g);margin:80px 0 var(--hd-sec);align-items:start}
.hd-loc-ph{grid-column:1/span 11}
@media (min-width:1024px){.hd-loc{align-items:stretch}.hd-loc-ph{aspect-ratio:auto;min-height:calc((100vw - 60px) * 11 / 24 / 1.6)}.hd-loc-info{padding-bottom:36px}}
.hd-loc-info{grid-column:14/span 9}
.hd-lrows{border-top:1px solid var(--hd-rule)}
.hd-lrow{position:relative;padding:10px 0;border-bottom:1px solid var(--hd-rule)}
.hd-lrow p{font:400 16px/22.4px var(--hd-sans)}
.hd-lrow.hd-pushed{border-top:1px solid var(--hd-rule)}
.hd-cat{position:absolute;right:8px;bottom:-20.6px;width:auto;height:56px}
.hd-loc-p{max-width:330px;margin-top:36px}
.hd-loc-p p{font:400 16px/22.4px var(--hd-sans)}
.hd-loc-p p+p{margin-top:22px}
.hd-loc-btns{width:330px;max-width:100%;margin-top:36px}
.hd-loc-btns .hd-btn+.hd-map>summary{border-top:0}
.hd-map>summary{list-style:none}
.hd-map>summary::-webkit-details-marker{display:none}
.hd-map-in{padding:16px 0 0}
.hd-map-in svg{display:block;width:100%;height:auto;color:var(--hd-ink);font-family:var(--hd-sans)}
.hd-map-in p{margin-top:8px;font:400 14px/21px var(--hd-sans)}
.hd-bake{padding:0 var(--hd-g);margin-bottom:var(--hd-sec)}
.hd-bake .hd-srule{opacity:1;margin-bottom:90px}
.hd-bake-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:40px}
.hd-bake-top h2{font:350 32px/40px var(--hd-sans)}
.hd-bake-nav{display:flex}
.hd-bake-nav button{width:44px;height:44px;display:flex;align-items:center;justify-content:center}
.hd-bake-nav svg{width:8px;height:14px}
.hd-bake-nav button[disabled]{opacity:.35;cursor:default}
.hd-bake-row{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 60px) / 3.3);column-gap:var(--hd-gap);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;outline-offset:4px}
.hd-bake-row::-webkit-scrollbar{display:none}
.hd-bd{scroll-snap-align:start;display:flex;flex-direction:column}
.hd-bd h3{font:350 24px/30px var(--hd-sans);margin-bottom:20px}
.hd-bd-rows{border-top:1px solid var(--hd-rule);flex:1}
.hd-bd-rows p{padding:10px 0;border-bottom:1px solid var(--hd-rule);font:400 16px/22.4px var(--hd-sans)}
.hd-bd .hd-btn{margin-top:24px}
.hd-ls{position:fixed;z-index:80;inset:0;display:grid;grid-template-columns:repeat(24,minmax(0,1fr));column-gap:var(--hd-gap);align-items:center;padding:0 var(--hd-g);background:var(--hd-blue);color:var(--hd-ink);overflow:auto;opacity:0;transition:opacity .5s var(--e-sio)}
.hd-ls.hd-in{opacity:1}
.hd-ls[hidden]{display:none}
.hd-ls-photos{grid-column:1/span 11;position:relative;aspect-ratio:622/862;max-height:calc(100vh - 160px);overflow:hidden}
.hd-ls-ph{position:absolute;inset:0;opacity:0;transition:opacity .4s var(--e-sio)}
.hd-ls-ph.hd-on{opacity:1}
.hd-ls-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hd-ls nav{grid-column:14/span 11}
.hd-ls li a{display:inline-block;font:350 64px/80px var(--hd-sans);letter-spacing:-1.6px;transition:color .3s}
.hd-ls li a[aria-current],.hd-ls li a:hover{color:var(--hd-light)}
.hd-ls-x{position:absolute;right:var(--hd-g);top:calc(var(--ribbon) + 25px);min-height:44px;padding:0 4px;font:350 12px/15px var(--hd-sans);letter-spacing:.3px;text-transform:uppercase}
.hd-ls-open{overflow:hidden}
@media (max-width:1023px){
  .hd-loc-head{display:block;padding-top:calc(72px + var(--hd-head));text-align:center}
  .hd-loc-pre,.hd-loc-head h1{font-size:32px;line-height:35.2px;letter-spacing:-.8px}
  .hd-loc-head h1{justify-content:center}
  .hd-loc-btn{width:44px;height:44px;margin-top:2px}
  .hd-loc-btn .hd-chev{width:18px;height:10px}
  .hd-loc{display:flex;flex-direction:column;align-items:stretch;margin-top:40px}
  .hd-loc-info{display:contents}
  .hd-lrows{order:1}.hd-loc-btns{order:2;width:100%;margin-top:30px}.hd-loc-ph{order:3;margin-top:40px}.hd-loc-p{order:4;max-width:none;margin-top:30px}
  .hd-cat{height:46px;bottom:-16.9px;right:8px}
  .hd-bake .hd-srule{margin-bottom:40px}
  .hd-bake-top{margin-bottom:24px}
  .hd-bake-row{grid-auto-columns:min(280px,78vw);margin:0 -20px;padding:0 20px;scroll-padding:0 20px}
  .hd-ls{display:flex;flex-direction:column;justify-content:center;text-align:center}
  .hd-ls-photos{display:none}
  .hd-ls li a{font-size:32px;line-height:56px;letter-spacing:-.8px}
}

/* ---------- FAQs ---------- */
.hd-ftitle,.hd-ctitle{padding:calc(86px + var(--hd-head)) var(--hd-g) 0}
.hd-ftitle h1,.hd-ctitle h1{max-width:calc((100% - 460px) * 12 / 24 + 220px);font:350 64px/70.4px var(--hd-sans);letter-spacing:-.6px}
.hd-ftitle .hd-pb,.hd-ctitle .hd-pb{margin-top:60px}
.hd-sub3{margin-top:var(--hd-sec)}
.hd-sub3{display:grid;grid-template-columns:1fr auto 1fr;column-gap:0}
.hd-sub3 a{white-space:nowrap;justify-self:start}
.hd-sub3 a:nth-child(2){justify-self:center}
.hd-sub3 a:nth-child(3){justify-self:end}
@media (max-width:359px){.hd-sub3{font-size:11px;letter-spacing:.1px}.hd-sub3 a::after{margin-left:6px}}
.hd-faqs{padding:60px var(--hd-g) 0}
.hd-fgroup{margin-bottom:100px}
.hd-fgroup h2{font:350 32px/40px var(--hd-sans);margin-bottom:70px}
.hd-faq{max-width:calc((100% - 460px) * 17 / 24 + 320px);border-bottom:1px solid var(--hd-rule)}
.hd-q{border-top:1px solid var(--hd-rule)}
.hd-q summary{display:grid;grid-template-columns:34px minmax(0,1fr) 44px;align-items:center;min-height:44px;padding:0;list-style:none;cursor:pointer}
.hd-q summary::-webkit-details-marker{display:none}
.hd-qn{font:400 14px/19.6px var(--hd-mono)}
.hd-qt{padding:10px 0;font:400 16px/22.4px var(--hd-sans)}
.hd-q .hd-plus{justify-self:end;margin-right:2px}
.hd-qa{overflow:hidden}
.hd-qa p{max-width:620px;padding:4px 44px 20px 34px;font:400 16px/22.4px var(--hd-sans)}
.hd-qa a{text-decoration:underline;text-underline-offset:3px}
@media (max-width:1023px){
  .hd-ftitle,.hd-ctitle{padding-top:calc(122px + var(--hd-head))}
  .hd-ftitle h1,.hd-ctitle h1{font-size:42px;line-height:46.2px;letter-spacing:-.4px;max-width:none}
  .hd-ftitle .hd-pb,.hd-ctitle .hd-pb{margin-top:40px}
  .hd-sub3{margin-top:40px}
  .hd-faqs{padding-top:40px}
  .hd-fgroup{margin-bottom:60px}
  .hd-fgroup h2{font-size:24px;line-height:30px;margin-bottom:30px}
  .hd-faq{max-width:none}
}

/* ---------- contact ---------- */
.hd-ctitle>p{max-width:calc((100% - 460px) * 8 / 24 + 140px);margin-top:40px;font:400 16px/22.4px var(--hd-sans)}
.hd-ccols{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));column-gap:var(--hd-gap);padding:0 var(--hd-g);margin:var(--hd-sec) 0 0}
.hd-ccol{grid-column:span 8;display:flex;flex-direction:column}
.hd-ccol h2{font:350 24px/30px var(--hd-sans);margin-bottom:30px}
.hd-crows{border-top:1px solid var(--hd-rule);flex:1}
.hd-crows p{padding:10px 0;border-bottom:1px solid var(--hd-rule);font:400 16px/24px var(--hd-sans)}
.hd-ccol .hd-btn{margin-top:20px;min-height:70px}
.hd-forms{padding:0 var(--hd-g) var(--hd-sec)}
.hd-form{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));column-gap:var(--hd-gap);margin-top:120px;padding-top:40px;border-top:1px solid var(--hd-rule)}
.hd-form-h{grid-column:1/span 8}
.hd-form-h h2{font:350 32px/40px var(--hd-sans)}
.hd-form-h p{margin-top:16px;max-width:330px;font:400 16px/22.4px var(--hd-sans)}
.hd-form-b{grid-column:9/span 9}
.hd-form-b .hd-btn{width:330px;max-width:100%;margin-top:8px}
@media (max-width:1023px){
  .hd-ctitle>p{max-width:none;margin-top:24px}
  .hd-ccols{display:block;margin-top:60px}
  .hd-ccol+.hd-ccol{margin-top:60px}
  .hd-form{display:block;margin-top:80px}
  .hd-form-h{margin-bottom:30px}
  .hd-f2{grid-template-columns:1fr}
}