/* Installation Brooklyn — base + home page */
:root{
  --cream:#f2ead8; --paper:#e9dfc8; --ink:#17130f; --rust:#e2582b; --mustard:#e8b04a;
  --teal:#2f6f64; --plum:#5b2a4a; --denim:#2d4a7a;
  --display:'Anton',Impact,sans-serif; --serif:'Instrument Serif',Georgia,serif; --mono:'Space Mono',ui-monospace,monospace;
  --nav-top:0px;
  --gut:max(16px,4vw);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden} /* the tilted marquees bleed a few px by design */
body{background:var(--cream);color:var(--ink);font-family:var(--mono);font-size:15px;line-height:1.55;overflow-x:hidden;overflow-x:clip}
img{max-width:100%;height:auto}
a{color:inherit}
::selection{background:var(--rust);color:var(--cream)}
.admin-bar{--nav-top:32px}
@media (max-width:782px){.admin-bar{--nav-top:46px}}
@media (max-width:600px){.admin-bar{--nav-top:0px}} /* WP's admin bar scrolls away on phones */
@media (hover:hover){body.ibk-fx,.ibk-fx a,.ibk-fx button{cursor:none}}

.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important}
.skip-link:focus{clip:auto;clip-path:none;height:auto;width:auto;left:12px;top:12px;z-index:300;background:var(--ink);color:var(--cream);padding:10px 16px}
:focus-visible{outline:2px solid var(--rust);outline-offset:3px}

/* grain */
.grain{position:fixed;inset:-50%;pointer-events:none;z-index:90;opacity:.09;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ibk-fx .grain{animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-5%,3%)}40%{transform:translate(4%,-6%)}60%{transform:translate(-3%,5%)}80%{transform:translate(6%,2%)}100%{transform:translate(0,0)}}

/* cursor */
.cursor{position:fixed;top:0;left:0;width:18px;height:18px;border-radius:50%;background:var(--cream);mix-blend-mode:difference;pointer-events:none;z-index:100;
  transition:width .3s,height .3s;display:grid;place-items:center;font:700 11px var(--mono);color:var(--ink);letter-spacing:.05em}
.cursor.big{width:92px;height:92px;mix-blend-mode:normal;background:var(--rust);color:var(--cream)}
@media (hover:none){.cursor{display:none}}
.thread{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:99}
.thread path{fill:none;stroke:var(--rust);stroke-width:1.6;stroke-linecap:round}
@media (hover:none){.thread{display:none}}

/* loader — curtain reveal */
.loader{position:fixed;inset:0;color:var(--cream);z-index:200;display:flex;flex-direction:column;justify-content:flex-end;padding:var(--gut)}
.loader.done{pointer-events:none}
.loader .half{position:absolute;top:0;bottom:0;width:50.5%;z-index:-1;
  background:linear-gradient(90deg,#0004,transparent 30%,#fff1 50%,transparent 70%,#0004) 0 0/60px 100%,linear-gradient(#7a2412,#a5341a 60%,#6d1e0f);
  transition:transform 1.4s cubic-bezier(.77,0,.18,1),filter 1.4s}
.loader .half.l{left:0;transform-origin:left}
.loader .half.r{right:0;transform-origin:right}
.loader.done .half{transform:scaleX(.06);filter:brightness(.7)}
.loader.done .half.r{transition-delay:.05s}
.loader .inner{transition:opacity .4s}
.loader.done .inner{opacity:0}
.loader .yr{font:clamp(90px,22vw,320px)/.85 var(--display)}
.loader .lbl{font-size:12px;letter-spacing:.2em;text-transform:uppercase;opacity:.6;margin-bottom:1rem}
.loader .bar{height:2px;background:var(--mustard);width:0;margin-top:2rem}

/* nav */
.site-nav{position:fixed;top:var(--nav-top);left:0;right:0;z-index:80;display:flex;justify-content:space-between;align-items:center;gap:2rem;padding:18px var(--gut);mix-blend-mode:difference;color:var(--cream)}
body:not(.ibk-fx) .site-nav{mix-blend-mode:normal;color:var(--ink);background:#f2ead8f2;backdrop-filter:blur(8px);border-bottom:1px solid #17130f1a;padding-block:14px}
body:not(.ibk-fx) .site-nav .custom-logo{filter:none}
.site-nav .logo{font:22px var(--display);letter-spacing:.02em;text-decoration:none;white-space:nowrap}
.site-nav .custom-logo{max-height:40px;width:auto;filter:invert(1)}
.site-nav ul{display:flex;gap:2rem;list-style:none;font-size:12px;letter-spacing:.15em;text-transform:uppercase}
.site-nav ul a,.cart-btn{text-decoration:none;position:relative}
.site-nav ul a::after{content:"";position:absolute;left:0;bottom:-3px;height:1px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s}
.site-nav ul a:hover::after,.site-nav .current-menu-item a::after{transform:scaleX(1);transform-origin:left}
.nav-right{display:flex;align-items:center;gap:1.25rem;font-size:12px;letter-spacing:.15em;text-transform:uppercase}
.cart-btn{border:1px solid currentColor;border-radius:99px;padding:.45rem 1rem}
.menu-toggle{display:none;background:none;border:0;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit}
@media (max-width:860px){.site-nav ul{display:none}.menu-toggle{display:block}}
.mobile-menu{position:fixed;inset:0;z-index:79;background:var(--ink);color:var(--cream);padding:120px 6vw 6vw;display:flex;flex-direction:column;justify-content:space-between}
.mobile-menu[hidden]{display:none}
.mobile-menu ul{list-style:none}
.mobile-menu a{font:clamp(44px,12vw,80px)/1.05 var(--display);text-transform:uppercase;text-decoration:none}
.mobile-menu a:hover{color:var(--rust)}
.mobile-menu .mm-foot{font-size:12px;letter-spacing:.15em;text-transform:uppercase;opacity:.6}
body.menu-open{overflow:hidden}

/* hero */
.hero{min-height:100svh;padding:110px var(--gut) var(--gut);position:relative;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.hero h1{font-family:var(--display);font-weight:400;font-size:clamp(64px,15.5vw,270px);line-height:.82;letter-spacing:-.01em;text-transform:uppercase;position:relative;z-index:1}
.hero h1 .row{display:block;overflow:hidden}
.hero h1 .ch{display:inline-block;transform:translateY(110%);transition:transform 1.1s cubic-bezier(.2,.8,.2,1),color .3s}
.hero h1 .ch:hover{color:var(--rust)}
.ready .hero h1 .ch{transform:none}
.hero h1 em{font-family:var(--serif);font-style:italic;text-transform:none;font-size:.78em;color:var(--rust);letter-spacing:-.02em}
.hero .meta{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;position:relative;z-index:1}
.hero .meta p{max-width:34ch;font-size:14px}
.hero .meta .tag{font-size:12px;letter-spacing:.15em;text-transform:uppercase}
.badge{position:absolute;right:6vw;top:22vh;width:min(26vw,190px);aspect-ratio:1;z-index:2}
.badge svg{width:100%;height:100%;animation:spin 18s linear infinite}
.badge .core{position:absolute;inset:30%;border-radius:50%;background:var(--mustard);display:grid;place-items:center;font:clamp(18px,3vw,30px) var(--display);transition:transform .4s}
.badge:hover .core{transform:scale(1.15) rotate(-12deg);background:var(--rust);color:var(--cream)}
@keyframes spin{to{transform:rotate(360deg)}}
.blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;z-index:-1;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.blob.a{width:42vw;height:42vw;background:var(--mustard);right:-8vw;bottom:-10vw}
.blob.b{width:30vw;height:30vw;background:var(--rust);left:30vw;top:10vh;opacity:.25}
.sticker{position:absolute;width:120px;height:140px;border-radius:10px;padding:12px;pointer-events:none;z-index:0;box-shadow:0 14px 30px #0003;
  transform:translate(-50%,-50%) scale(0) rotate(var(--r));animation:stick 1.1s cubic-bezier(.2,.8,.2,1) forwards}
.sticker svg{width:100%;height:100%}
@keyframes stick{20%{transform:translate(-50%,-50%) scale(1) rotate(var(--r))}70%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(var(--r))}100%{opacity:0;transform:translate(-50%,-30%) scale(.85) rotate(var(--r))}}

/* marquee */
.marquee{background:var(--ink);color:var(--cream);overflow:hidden;white-space:nowrap;padding:18px 0;transform:rotate(-1.5deg) scale(1.03);border-block:2px solid var(--ink)}
.marquee.alt{background:var(--rust);transform:rotate(1.2deg) scale(1.03);margin-top:-14px}
.marquee .track{display:inline-flex;gap:3rem;animation:mq 28s linear infinite;font:clamp(28px,4vw,56px)/1 var(--display);text-transform:uppercase}
.marquee.alt .track{animation-direction:reverse;animation-duration:34s}
.marquee .track span{display:inline-flex;align-items:center;gap:3rem}
.marquee .track i{font-family:var(--serif);font-weight:400;text-transform:none}
.marquee .star{color:var(--mustard)}
@keyframes mq{to{transform:translateX(-50%)}}

section{position:relative}
.label{font-size:12px;letter-spacing:.2em;text-transform:uppercase;display:flex;gap:.75rem;align-items:center;margin-bottom:2rem}
.label::before{content:"";width:28px;height:1px;background:currentColor}

/* buttons */
.btns{display:flex;gap:1rem;flex-wrap:wrap;margin:1.5rem 0 2rem}
.btn{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;background:var(--ink);color:var(--cream);padding:1rem 1.6rem;border-radius:99px;border:1px solid var(--ink);font:13px var(--mono);letter-spacing:.1em;text-transform:uppercase;transition:background .3s,border-color .3s,color .3s;will-change:transform;cursor:pointer}
.btn.ghost{background:transparent;color:var(--ink)}
.btn:hover{background:var(--rust);color:var(--cream);border-color:var(--rust)}

/* intro */
.intro{padding:16vh var(--gut) 12vh;display:grid;grid-template-columns:1fr 2fr;gap:4vw}
.intro .big{font:clamp(30px,4.4vw,68px)/1.08 var(--serif)}
.intro .big .w{opacity:.14;transition:opacity .4s}
.intro .big .w.on{opacity:1}
.intro .big em{color:var(--rust)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:3rem;border-top:1px solid var(--ink);padding-top:1.5rem}
.stats b{font:clamp(40px,5vw,72px)/1 var(--display);display:block}
.stats span{font-size:12px;text-transform:uppercase;letter-spacing:.1em}
@media (max-width:820px){.intro{grid-template-columns:1fr}}

/* decades horizontal */
.decades{height:400vh}
.decades .sticky{position:sticky;top:0;height:100vh;overflow:hidden}
.decades .strip{display:flex;height:100%;will-change:transform}
.panel{flex:0 0 100%;height:100%;display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:4vw;padding:0 max(20px,6vw);position:relative;overflow:hidden}
.panel .num{font:clamp(140px,30vw,460px)/.8 var(--display);letter-spacing:-.03em;position:relative;z-index:1}
.panel .num sup{font:clamp(30px,4vw,60px) var(--serif);font-style:italic;vertical-align:top}
.panel h3{font:italic clamp(34px,4vw,64px)/1 var(--serif);margin-bottom:1rem}
.panel p{max-width:40ch}
.panel ul{list-style:none;margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:.5rem}
.panel li{border:1px solid currentColor;border-radius:99px;padding:.3rem .9rem;font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.panel .era-link{display:inline-block;margin-top:1.75rem;font-size:13px;letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid currentColor;text-decoration:none;position:relative;z-index:2}
.p0{background:var(--ink);color:var(--cream)}
.p70{background:var(--rust);color:var(--cream)}
.p80{background:var(--plum);color:var(--mustard)}
.p90{background:var(--denim);color:var(--cream)}
.p0 .num{font-size:clamp(70px,12vw,200px);line-height:.9}
.panel .deco{position:absolute;pointer-events:none;opacity:.22}
.stripes{right:-10vw;bottom:-10vh;width:60vw;height:60vh;background:repeating-linear-gradient(0deg,var(--mustard) 0 26px,transparent 26px 40px,#b03a14 40px 66px,transparent 66px 80px);border-radius:60vh 60vh 0 0;opacity:.35!important}
.grid80{inset:0;background-image:linear-gradient(var(--mustard) 1px,transparent 1px),linear-gradient(90deg,var(--mustard) 1px,transparent 1px);background-size:60px 60px;transform:perspective(500px) rotateX(55deg) translateY(30%);opacity:.18!important}
.check90{inset:0;background:conic-gradient(#fff2 25%,transparent 0 50%,#fff2 0 75%,transparent 0) 0 0/80px 80px}
.progress{position:absolute;left:6vw;right:6vw;bottom:5vh;height:2px;background:#fff3;z-index:3}
.progress i{display:block;height:100%;background:var(--cream);width:0}
@media (max-width:820px){.panel{grid-template-columns:1fr;align-content:center;gap:1rem}}

/* rack */
.rack{padding:16vh var(--gut) 10vh}
.rack h2,.objects h2,.visit h2,.board-sec h2{font:clamp(54px,9vw,150px)/.88 var(--display);text-transform:uppercase}
.rack h2 em,.objects h2 em,.visit h2 em,.board-sec h2 em{font:italic .7em var(--serif);text-transform:none;color:var(--rust)}
.rack .hint{margin-top:1rem;font-size:13px;opacity:.7}
.rack-ctrl{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:2rem}
.filters{display:flex;gap:.5rem;flex-wrap:wrap}
.filters button,.filters a{font:12px var(--mono);letter-spacing:.1em;text-transform:uppercase;background:none;border:1px solid var(--ink);color:var(--ink);padding:.5rem 1rem;border-radius:99px;transition:all .3s;text-decoration:none;cursor:pointer}
.filters .on,.filters button:hover,.filters a:hover{background:var(--ink);color:var(--cream)}
.arrows{display:flex;align-items:center;gap:.75rem;font-size:13px;letter-spacing:.1em}
.arrows button{width:52px;height:52px;border-radius:50%;border:1px solid var(--ink);background:none;color:var(--ink);font:20px var(--mono);transition:background .3s,color .3s,transform .3s;cursor:pointer}
.arrows button:hover{background:var(--rust);border-color:var(--rust);color:var(--cream);transform:scale(1.08)}
.arrows .count{min-width:7ch;text-align:center}
.rail{margin-top:5rem;position:relative;padding-top:10px}
.rail::before{content:"";position:absolute;left:calc(var(--gut)*-1);right:calc(var(--gut)*-1);top:0;height:10px;background:linear-gradient(#8a8a8a,#3a3a3a);border-radius:5px;box-shadow:0 4px 8px #0003}
.hangers{display:flex;gap:1.4rem;overflow-x:auto;padding:0 0 3rem;scrollbar-width:none;scroll-snap-type:x mandatory}
.hangers::-webkit-scrollbar{display:none}
.item{flex:0 0 230px;scroll-snap-align:start;transform-origin:50% -10px;perspective:900px;position:relative;padding-top:42px}
.item .hook{position:absolute;top:-12px;left:50%;width:30px;height:46px;transform:translateX(-50%);border:3px solid #555;border-bottom:none;border-radius:15px 15px 0 0;clip-path:inset(0 0 0 50%)}
.item .hook::after{content:"";position:absolute;bottom:-4px;left:-30px;width:86px;height:3px;background:#555}
.item.swing{animation:swing 1.4s cubic-bezier(.3,1.6,.5,1)}
.item.hide{display:none}
@keyframes swing{0%{transform:rotate(0)}20%{transform:rotate(9deg)}45%{transform:rotate(-6deg)}70%{transform:rotate(3deg)}100%{transform:rotate(0)}}
.card{position:relative;height:340px;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.item.flip .card{transform:rotateY(180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;border-radius:6px;padding:1rem;display:flex;flex-direction:column;justify-content:space-between;gap:.6rem;box-shadow:0 12px 30px #0002}
.face .ph{flex:1;min-height:0;border-radius:4px;overflow:hidden;display:grid}
.face .ph img{width:100%;height:100%;object-fit:cover}
.face .ph .ibk-art{background:transparent!important;padding:6px}
.face h4{font:22px/1 var(--display);text-transform:uppercase}
.face small{font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.8}
.tagline{display:flex;justify-content:space-between;align-items:center}
.back{transform:rotateY(180deg);background:var(--ink);color:var(--cream)}
.back p{font:italic 22px/1.2 var(--serif)}
.back .price{font-size:15px;opacity:1}
.back .shop-it{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mustard)}
.rack-more{margin-top:1rem}

/* art tiles */
.ibk-art{display:grid;place-items:center;width:100%;height:100%;padding:12%}
.ibk-art svg{width:100%;height:100%;max-height:100%}

/* mood board */
.board-sec{padding:14vh var(--gut);background:var(--paper)}
.board-sec h2 em{color:var(--teal)}
.board-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap}
.board-head p{max-width:34ch}
.board{position:relative;height:min(78vh,640px);margin-top:3rem;border:1.5px dashed #17130f55;border-radius:14px;overflow:hidden;
  background:radial-gradient(#17130f22 1px,transparent 1px) 0 0/22px 22px}
.board .hint2{position:absolute;inset:auto 0 18px;text-align:center;font-size:12px;letter-spacing:.15em;text-transform:uppercase;opacity:.5;pointer-events:none}
.swatch{position:absolute;left:0;top:0;width:clamp(130px,17vw,210px);aspect-ratio:4/5;border-radius:4px;touch-action:none;user-select:none;cursor:grab;
  box-shadow:0 10px 24px #0003;will-change:transform;
  clip-path:polygon(0 0,100% 0,100% 94%,96% 100%,90% 95%,84% 100%,78% 95%,72% 100%,66% 95%,60% 100%,54% 95%,48% 100%,42% 95%,36% 100%,30% 95%,24% 100%,18% 95%,12% 100%,6% 95%,0 100%)}
.swatch.drag{cursor:grabbing}
.swatch::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 6px #ffffff10,inset 0 -30px 40px #0002}
.swatch .lab{position:absolute;left:10px;top:10px;background:var(--cream);color:var(--ink);font:700 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:4px 8px;border-radius:2px}
.f-denim{background:repeating-linear-gradient(45deg,#2d4a7a 0 2px,#3c5f93 2px 4px,#2a4470 4px 5px)}
.f-leather{background:radial-gradient(circle at 30% 20%,#6b4127,transparent 60%),radial-gradient(circle at 80% 90%,#2a160c,transparent 60%),#47291a}
.f-cord{background:repeating-linear-gradient(90deg,#c48a3a 0 7px,#9e6a24 7px 9px)}
.f-plaid{background:repeating-linear-gradient(0deg,#e2582b55 0 14px,transparent 14px 28px,#17130f44 28px 34px,transparent 34px 48px),repeating-linear-gradient(90deg,#e2582b66 0 14px,transparent 14px 28px,#17130f44 28px 34px,transparent 34px 48px),#e8b04a}
.f-velvet{background:radial-gradient(ellipse at 30% 30%,#9b4f86,transparent 55%),linear-gradient(160deg,#5b2a4a,#2b1023)}
.f-leopard{background:radial-gradient(circle at 20% 30%,#3a2414 5px,transparent 6px),radial-gradient(circle at 60% 15%,#3a2414 4px,transparent 5px),radial-gradient(circle at 75% 55%,#3a2414 6px,transparent 7px),radial-gradient(circle at 35% 70%,#3a2414 5px,transparent 6px),radial-gradient(circle at 85% 85%,#3a2414 4px,transparent 5px),#d9a35a;background-size:70px 70px}
.f-check{background:conic-gradient(#17130f 25%,#f2ead8 0 50%,#17130f 0 75%,#f2ead8 0) 0 0/36px 36px}
.f-paisley{background:radial-gradient(circle at 50% 50%,#e8b04a 0 6px,#2f6f64 7px 10px,transparent 11px) 0 0/44px 44px,radial-gradient(circle at 50% 50%,#e2582b 0 4px,transparent 5px) 22px 22px/44px 44px,#1f4e46}

/* objects */
.objects{padding:12vh var(--gut);background:var(--ink);color:var(--cream)}
.objects h2 em{color:var(--mustard)}
.obj-list{margin-top:4rem;border-top:1px solid #fff3}
.obj{display:grid;grid-template-columns:80px 1fr auto;align-items:center;gap:2rem;padding:2rem 0;border-bottom:1px solid #fff3;position:relative;overflow:hidden}
.obj .n{font-size:12px;opacity:.5;position:relative;z-index:1}
.obj h3{font:clamp(36px,6vw,96px)/1 var(--display);text-transform:uppercase;transition:transform .5s cubic-bezier(.2,.8,.2,1),color .3s;position:relative;z-index:1}
.obj p{font-size:13px;max-width:28ch;opacity:.7;text-align:right;position:relative;z-index:1}
.obj::before{content:"";position:absolute;inset:0;background:var(--c,var(--rust));transform:scaleY(0);transform-origin:bottom;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.obj:hover::before{transform:scaleY(1)}
.obj:hover h3{transform:translateX(2vw);color:var(--ink)}
.obj:hover p,.obj:hover .n{color:var(--ink);opacity:1}
.preview{position:fixed;left:0;top:0;width:240px;height:300px;pointer-events:none;z-index:70;border-radius:8px;transform:translate(-50%,-50%) scale(0) rotate(-6deg);transition:transform .45s cubic-bezier(.2,.8,.2,1);display:grid;place-items:center;overflow:hidden;box-shadow:0 30px 60px #0006}
.preview.on{transform:translate(-50%,-50%) scale(1) rotate(-6deg)}
.preview svg{width:70%;height:70%}
@media (max-width:720px){.obj{grid-template-columns:1fr}.obj p{text-align:left}.obj .n{display:none}.preview{display:none}}

/* designers */
.designers{padding:16vh var(--gut);display:grid;grid-template-columns:1fr 1fr;gap:4vw;align-items:center}
.designers .quote{font:italic clamp(34px,4.5vw,70px)/1.05 var(--serif)}
.designers .quote em{color:var(--teal)}
.designers .card2{background:var(--teal);color:var(--cream);padding:2.5rem;border-radius:8px;transform:rotate(2deg);transition:transform .5s}
.designers .card2:hover{transform:rotate(-1deg) scale(1.02)}
.designers .card2 h3{font:40px/1 var(--display);text-transform:uppercase;margin-bottom:1rem}
@media (max-width:820px){.designers{grid-template-columns:1fr}}

/* visit */
.visit{padding:12vh var(--gut);background:var(--mustard)}
.visit-grid{display:grid;grid-template-columns:1fr 1fr;gap:4vw;margin-top:4rem}
.status{display:inline-flex;align-items:center;gap:.6rem;background:var(--ink);color:var(--cream);padding:.5rem 1rem;border-radius:99px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:2rem}
.status i{width:10px;height:10px;border-radius:50%;background:#888}
.status.open i{background:#4ade80;animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 #4ade80}70%{box-shadow:0 0 0 10px #4ade8000}100%{box-shadow:0 0 0 0 #4ade8000}}
.hours{width:100%;border-collapse:collapse;font-size:14px}
.hours td{padding:.75rem 0;border-bottom:1px solid #17130f33}
.hours td:last-child{text-align:right}
.hours tr.today td{font-weight:700}
.hours tr.today td:first-child::before{content:"→ "}
.hours tr.closed td:last-child{opacity:.55}
.addr{font:clamp(28px,3vw,44px)/1.1 var(--serif);margin-bottom:1.5rem}
.map{border:2px solid var(--ink);border-radius:8px;overflow:hidden;aspect-ratio:4/3;filter:grayscale(1) sepia(.35) contrast(1.05);transition:filter .5s}
.map:hover{filter:none}
.map iframe{width:100%;height:100%;border:0;display:block}
@media (max-width:820px){.visit-grid{grid-template-columns:1fr}}

/* footer */
.site-footer{background:var(--ink);color:var(--cream);padding:8vh var(--gut) 3vh;overflow:hidden}
.site-footer .huge{font:clamp(60px,17vw,300px)/.8 var(--display);text-transform:uppercase;white-space:nowrap;letter-spacing:-.01em}
.site-footer .huge span{display:inline-block;transition:transform .4s cubic-bezier(.3,1.6,.5,1),color .3s}
.site-footer .huge span:hover{transform:translateY(-12%) rotate(-6deg);color:var(--rust)}
.site-footer .huge span.up{transform:translateY(-140%) rotate(-20deg)}
.site-footer .huge span.fall{animation:fall .9s cubic-bezier(.3,1.5,.5,1) both}
@keyframes fall{from{transform:translateY(-140%) rotate(var(--fr,-20deg))}to{transform:none}}
.footer-links{list-style:none;display:flex;flex-wrap:wrap;gap:1.5rem;margin-top:3rem;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.footer-links a{text-decoration:none}
.footer-links a:hover{color:var(--rust)}
.site-footer .row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin-top:3rem;opacity:.7}
.site-footer .social{display:flex;gap:1.5rem}

/* inner pages */
.page-wrap{padding:140px var(--gut) 12vh;min-height:70vh}
.page-head{margin-bottom:3rem}
.page-head h1,.page-404 h1{font:clamp(48px,8vw,130px)/.9 var(--display);text-transform:uppercase}
.page-head h1 em,.page-404 h1 em{font:italic .7em var(--serif);text-transform:none;color:var(--rust)}
.post-meta{font-size:12px;letter-spacing:.15em;text-transform:uppercase;opacity:.65;margin-bottom:.75rem}
.prose{max-width:72ch}
.prose>*+*{margin-top:1.1em}
.prose h2,.prose h3{font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:1;margin-top:2em}
.prose h2{font-size:clamp(28px,3vw,42px)}
.prose a{color:var(--rust)}
.prose blockquote{font:italic clamp(24px,2.4vw,34px)/1.2 var(--serif);border-left:3px solid var(--rust);padding-left:1.25rem}
.prose ul,.prose ol{padding-left:1.25rem}
.woocommerce-cart .prose,.woocommerce-checkout .prose,.woocommerce-account .prose{max-width:none}
.hero-img{margin-bottom:3rem}
.hero-img img{width:100%;border-radius:8px}
.post-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:3rem 2rem}
.post-card h2{font:clamp(26px,2.4vw,36px)/1 var(--display);text-transform:uppercase;margin:.25rem 0 .75rem}
.post-card h2 a{text-decoration:none}
.post-card .thumb img{border-radius:6px;aspect-ratio:4/3;object-fit:cover;margin-bottom:1rem}
.page-404{display:flex;flex-direction:column;justify-content:center;gap:1.5rem}
.nav-links .page-numbers{display:inline-block;padding:.4rem .8rem;border:1px solid var(--ink);border-radius:99px;margin-right:.3rem;text-decoration:none}
.nav-links .current{background:var(--ink);color:var(--cream)}

/* reveal */
.reveal{opacity:0;transform:translateY(40px);transition:opacity 1s,transform 1s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .hero h1 .ch{transform:none}.reveal{opacity:1;transform:none}
}

/* responsive refinements: comfortable touch targets without changing the look */
.site-nav ul a{display:inline-block;padding:12px 0;margin:-12px 0}
.site-nav ul a::after{bottom:9px}
.menu-toggle,.cart-btn{white-space:nowrap}
.menu-toggle{padding:12px 6px;margin:-12px -6px;cursor:pointer}
.panel .era-link,.back .shop-it,.footer-links a,.site-footer .social a{display:inline-block;padding:10px 0}
.site-nav .logo{font-size:clamp(17px,5.2vw,22px);padding:8px 0;margin:-8px 0}
/* phones + tablets: the spinning badge moves into the space between the title and the intro instead of covering "Brooklyn" */
@media (max-width:900px){
  .hero h1{order:1}
  .badge{order:2;position:relative;top:auto;right:auto;align-self:flex-end;width:112px;margin:1.5rem 0}
  .hero .meta{order:3}
}
@media (max-width:420px){
  .site-nav{gap:.75rem}
  .nav-right{gap:.9rem}
  .cart-btn{padding:.4rem .75rem}
}

/* comments */
.comments-area{margin-top:5rem;border-top:1px solid var(--ink);padding-top:2rem}
.comments-title,.comment-reply-title{font:clamp(26px,3vw,40px)/1 var(--display);text-transform:uppercase}
.comment-list{list-style:none;padding:0}
.comment-list .children{list-style:none;padding-left:1.5rem;border-left:2px solid #17130f22}
.comment-body{padding:1.25rem 0;border-bottom:1px dashed #17130f44}
.comment-author{display:flex;align-items:center;gap:.75rem;font-weight:700}
.comment-author img{border-radius:50%}
.comment-metadata{font-size:12px;opacity:.65;margin:.25rem 0 .75rem}
.comment-form label{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.35rem}
.comment-form input[type=text],.comment-form input[type=email],.comment-form input[type=url],.comment-form textarea{width:100%;border:1px solid #17130f66;border-radius:6px;background:#fffaf0;padding:.75rem;font:inherit}
.comment-form .submit{background:var(--ink);color:var(--cream);border:0;border-radius:99px;padding:1rem 1.6rem;font:13px var(--mono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.comment-form .submit:hover{background:var(--rust)}
.alignwide{max-width:min(1400px,100%)}
.alignfull{width:100vw;max-width:none;margin-left:calc(50% - 50vw)}
.prose .alignfull{margin-left:calc(-1 * var(--gut));width:calc(100% + 2 * var(--gut))}
.wp-caption-text,figcaption{font-size:12px;opacity:.7;margin-top:.5rem}
.post-card.sticky h2::before{content:"★ ";color:var(--rust)}
.bypostauthor>.comment-body .fn::after{content:" · author";font-weight:400;opacity:.6}
.gallery-caption{font-size:12px}
.alignleft{float:left;margin:0 1.5rem 1rem 0}
.alignright{float:right;margin:0 0 1rem 1.5rem}
.aligncenter{display:block;margin-left:auto;margin-right:auto}
.comment-metadata a,.comment-reply-link{display:inline-block;padding:8px 0}
.comment-reply-link{font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.menu-toggle{min-width:44px;min-height:44px;text-align:right}
.comment-author a{display:inline-block;padding:8px 0}