/* THE BLONDER COMPANY — bespoke stylesheet */
:root{
  --ink:#14213D; --ink-2:#1D2D52; --chalk:#F2EFE9; --paper:#E8E2D6;
  --brass:#B8894A; --brass-2:#D9B06A; --verd:#3F7D6E; --blush:#E3B7A0;
  --serif:"Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;
  --sans:"Avenir Next","Avenir","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --ease:cubic-bezier(.77,0,.18,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--chalk);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;overflow-x:hidden;cursor:none}
a{color:inherit;text-decoration:none}
img{max-width:100%}
::selection{background:var(--brass);color:var(--chalk)}
:focus-visible{outline:3px solid var(--brass);outline-offset:4px}

/* ===== cursor ===== */
.cur{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;mix-blend-mode:difference}
.cur-dot{width:8px;height:8px;background:#fff;border-radius:50%;transform:translate(-50%,-50%)}
.cur-ring{position:fixed;top:0;left:0;width:44px;height:44px;border:1.5px solid #fff;border-radius:50%;transform:translate(-50%,-50%);transition:width .3s,height .3s,background .3s;z-index:9998;pointer-events:none;mix-blend-mode:difference}
body.hovering .cur-ring{width:80px;height:80px;background:rgba(255,255,255,.18)}
@media (hover:none){.cur,.cur-ring{display:none}body{cursor:auto}}

/* ===== preloader ===== */
.loader{position:fixed;inset:0;z-index:5000;background:var(--ink);display:grid;place-items:center;overflow:hidden}
.loader .roll{position:absolute;left:0;top:0;width:100%;height:100%;background:var(--brass);transform:scaleY(0);transform-origin:top}
.loader .pat{position:absolute;inset:0;opacity:0;background:
  radial-gradient(circle at 25% 25%,var(--chalk) 2px,transparent 3px) 0 0/40px 40px,
  radial-gradient(circle at 75% 75%,var(--chalk) 2px,transparent 3px) 0 0/40px 40px}
.loader h1{position:relative;font:400 clamp(28px,6vw,72px)/1 var(--serif);color:var(--chalk);letter-spacing:.02em;overflow:hidden}
.loader h1 span{display:inline-block;transform:translateY(110%)}
.loader small{position:absolute;bottom:40px;font-size:13px;letter-spacing:.3em;color:var(--brass-2)}

/* ===== page peel transition ===== */
.peel{position:fixed;inset:0;z-index:4000;pointer-events:none}
.peel i{position:absolute;top:0;bottom:0;width:20%;background:var(--ink);transform:scaleY(0);transform-origin:bottom}
.peel i:nth-child(1){left:0}.peel i:nth-child(2){left:20%}.peel i:nth-child(3){left:40%}.peel i:nth-child(4){left:60%}.peel i:nth-child(5){left:80%}

/* ===== grain ===== */
.grain{position:fixed;inset:-50%;width:200%;height:200%;pointer-events:none;z-index:3000;opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(10) infinite}
@keyframes grain{0%{transform:translate(0,0)}10%{transform:translate(-5%,-10%)}30%{transform:translate(3%,-15%)}50%{transform:translate(12%,9%)}70%{transform:translate(9%,4%)}90%{transform:translate(-1%,7%)}100%{transform:translate(0,0)}}

/* ===== nav ===== */
.nav{position:fixed;top:0;left:0;right:0;z-index:2000;display:flex;align-items:center;justify-content:space-between;padding:22px 5vw;mix-blend-mode:difference;color:#fff}
.nav .logo{font:400 22px var(--serif);letter-spacing:.06em;display:flex;align-items:center;gap:12px}
.nav .logo b{display:inline-block;width:30px;height:30px;border-radius:50%;background:
  repeating-conic-gradient(#fff 0 15deg,transparent 15deg 30deg);animation:spin 14s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.nav ul{display:flex;gap:34px;list-style:none;font-size:14px;letter-spacing:.08em}
.nav ul a{position:relative;padding:6px 0}
.nav ul a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:#fff;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.nav ul a:hover::after,.nav ul a.on::after{transform:scaleX(1);transform-origin:left}
.burger{display:none;width:34px;height:22px;flex-direction:column;justify-content:space-between;background:none;border:0;cursor:none}
.burger i{display:block;height:2px;background:#fff;transition:transform .4s,opacity .3s}
@media(max-width:820px){
  .nav ul{position:fixed;inset:0;background:var(--ink);flex-direction:column;justify-content:center;align-items:center;gap:30px;font-size:28px;font-family:var(--serif);letter-spacing:.02em;transform:translateY(-100%);transition:transform .6s var(--ease);mix-blend-mode:normal}
  .nav.open ul{transform:none}
  .burger{display:flex;position:relative;z-index:1}
  .nav.open .burger i:nth-child(1){transform:translateY(10px) rotate(45deg)}
  .nav.open .burger i:nth-child(2){opacity:0}
  .nav.open .burger i:nth-child(3){transform:translateY(-10px) rotate(-45deg)}
}

/* ===== magnetic button ===== */
.btn{display:inline-flex;align-items:center;gap:14px;padding:18px 32px;border-radius:999px;border:1.5px solid currentColor;font-size:14px;letter-spacing:.12em;position:relative;overflow:hidden;transition:color .4s var(--ease);will-change:transform}
.btn::before{content:"";position:absolute;inset:0;background:var(--brass);border-radius:999px;transform:scale(0);transition:transform .5s var(--ease);z-index:-1}
.btn:hover::before{transform:scale(1.4)}
.btn:hover{color:var(--chalk);border-color:var(--brass)}
.btn.solid{background:var(--ink);color:var(--chalk);border-color:var(--ink)}
.btn.solid::before{background:var(--brass)}

/* ===== hero ===== */
.hero{position:relative;min-height:100vh;display:grid;grid-template-columns:1.1fr .9fr;align-items:end;padding:0 5vw 8vh;overflow:hidden;background:var(--ink);color:var(--chalk)}
.hero .wall{position:absolute;inset:0;z-index:0}
.hero .wall svg{width:100%;height:100%;display:block}
.hero .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,33,61,.15),rgba(20,33,61,.85) 90%);z-index:1}
.hero .hd{position:relative;z-index:2}
.hero h1{font:400 clamp(52px,9.5vw,150px)/.92 var(--serif);letter-spacing:-.02em}
.hero h1 .l{display:inline-block;overflow:hidden;vertical-align:top}
.hero h1 .l span{display:inline-block;transform:translateY(110%)}
.hero h1 em{font-style:italic;color:var(--brass-2)}
.hero p{max-width:34ch;font-size:19px;margin-top:28px;color:rgba(242,239,233,.82)}
.hero .aside{position:relative;z-index:2;justify-self:end;text-align:right;font-family:var(--serif);font-size:15px;line-height:1.7;color:rgba(242,239,233,.7)}
.hero .aside strong{display:block;font-size:clamp(60px,8vw,120px);line-height:1;color:var(--chalk);font-weight:400}
.hero .scroll{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:2;width:1px;height:60px;background:linear-gradient(var(--brass-2),transparent);animation:drip 2s var(--ease) infinite}
@keyframes drip{0%{transform:translateX(-50%) scaleY(0);transform-origin:top}50%{transform:translateX(-50%) scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:translateX(-50%) scaleY(0);transform-origin:bottom}}
@media(max-width:900px){.hero{grid-template-columns:1fr;align-items:end;gap:40px;padding-top:120px}.hero .aside{justify-self:start;text-align:left}}

/* ===== sections ===== */
.sec{padding:14vh 5vw}
.sec h2{font:400 clamp(36px,5.5vw,84px)/1.02 var(--serif);letter-spacing:-.015em;max-width:16ch}
.sec .lead{font-size:20px;max-width:56ch;color:rgba(20,33,61,.78);margin-top:22px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:6vw;align-items:start}
@media(max-width:900px){.split{grid-template-columns:1fr}}
.rev{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rev.in{opacity:1;transform:none}

/* marquee */
.marq{overflow:hidden;background:var(--brass);color:var(--ink);padding:26px 0;transform:rotate(-1.5deg) scale(1.03);font:italic 400 clamp(26px,4vw,56px)/1 var(--serif);white-space:nowrap}
.marq .t{display:inline-block;animation:marq 26s linear infinite}
.marq .t span{padding:0 40px}
.marq .t span::after{content:"✦";padding-left:40px;font-style:normal;color:var(--ink)}
@keyframes marq{to{transform:translateX(-50%)}}

/* swatch grid (collections) */
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px;margin-top:60px}
.sw{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:6px 6px 40px 6px;transform-style:preserve-3d;transition:transform .5s var(--ease),border-radius .5s var(--ease)}
.sw:hover{border-radius:40px 6px 6px 6px}
.sw .p{position:absolute;inset:0;transition:transform .8s var(--ease)}
.sw:hover .p{transform:scale(1.12) rotate(2deg)}
.sw .cap{position:absolute;left:0;right:0;bottom:0;padding:22px;background:linear-gradient(transparent,rgba(20,33,61,.9));color:var(--chalk);transform:translateY(30%);opacity:0;transition:.6s var(--ease)}
.sw:hover .cap{transform:none;opacity:1}
.sw .cap h3{font:400 26px var(--serif)}
.sw .cap small{display:block;margin-top:6px;font-size:13px;letter-spacing:.1em;color:var(--brass-2)}
.sw .num{position:absolute;top:18px;left:18px;font:italic 400 15px var(--serif);color:rgba(255,255,255,.9);mix-blend-mode:difference}

/* stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:40px;margin-top:70px;border-top:1px solid rgba(20,33,61,.18);padding-top:40px}
.stats b{display:block;font:400 clamp(44px,6vw,86px)/1 var(--serif)}
.stats span{display:block;margin-top:8px;color:rgba(20,33,61,.7)}

/* dark band */
.band{background:var(--ink);color:var(--chalk)}
.band .sec h2,.band .sec .lead{color:inherit}
.band .lead{color:rgba(242,239,233,.75)}

/* sample book */
.book{display:grid;grid-template-columns:200px 1fr;gap:40px;margin-top:60px;min-height:540px}
.book .tabs{display:flex;flex-direction:column;gap:6px}
.book .tabs button{text-align:left;background:none;border:0;border-left:2px solid rgba(242,239,233,.2);padding:14px 18px;color:rgba(242,239,233,.6);font:400 20px var(--serif);cursor:none;transition:.4s}
.book .tabs button.on,.book .tabs button:hover{color:var(--chalk);border-color:var(--brass-2);padding-left:28px}
.book .page{position:relative;border-radius:8px;overflow:hidden;background:var(--paper);min-height:480px;box-shadow:0 60px 80px -40px rgba(0,0,0,.6)}
.book .page .pt{position:absolute;inset:0;transition:opacity .8s var(--ease)}
.book .page .info{position:absolute;left:0;right:0;bottom:0;padding:28px;color:var(--ink);background:linear-gradient(transparent,rgba(232,226,214,.95) 40%)}
.book .page .info h3{font:400 34px var(--serif)}
.book .page .info p{max-width:52ch;margin-top:8px;color:rgba(20,33,61,.75)}
@media(max-width:800px){.book{grid-template-columns:1fr}.book .tabs{flex-direction:row;overflow-x:auto}.book .tabs button{border-left:0;border-bottom:2px solid rgba(242,239,233,.2);white-space:nowrap}}

/* timeline (about) */
.tl{position:relative;margin-top:70px;padding-left:40px;border-left:1px solid rgba(20,33,61,.25)}
.tl li{list-style:none;position:relative;padding:0 0 60px}
.tl li::before{content:"";position:absolute;left:-46px;top:12px;width:11px;height:11px;border-radius:50%;background:var(--brass);box-shadow:0 0 0 0 rgba(184,137,74,.5);transition:box-shadow .6s}
.tl li.in::before{box-shadow:0 0 0 12px rgba(184,137,74,0)}
.tl li b{display:block;font:400 clamp(36px,5vw,64px)/1 var(--serif);color:var(--verd)}
.tl li p{margin-top:12px;max-width:50ch;color:rgba(20,33,61,.8)}

/* people */
.people{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:26px;margin-top:60px}
.person{padding:30px;background:var(--paper);border-radius:6px;transition:.5s var(--ease)}
.person:hover{transform:translateY(-8px);background:var(--ink);color:var(--chalk)}
.person .av{width:70px;height:70px;border-radius:50%;margin-bottom:22px;background:conic-gradient(var(--brass),var(--verd),var(--blush),var(--brass))}
.person h3{font:400 24px var(--serif)}
.person span{display:block;margin-top:4px;font-size:14px;opacity:.7}

/* ===== showroom / address ===== */
.addr-hero{position:relative;min-height:100vh;display:grid;place-items:center;background:var(--ink);color:var(--chalk);overflow:hidden;padding:120px 5vw 80px;text-align:center}
.addr-hero .rings{position:absolute;inset:0;pointer-events:none}
.addr-hero .rings i{position:absolute;left:50%;top:50%;border:1px solid rgba(217,176,106,.35);border-radius:50%;transform:translate(-50%,-50%);animation:ring 6s var(--ease) infinite}
.addr-hero .rings i:nth-child(2){animation-delay:2s}.addr-hero .rings i:nth-child(3){animation-delay:4s}
@keyframes ring{from{width:0;height:0;opacity:1}to{width:140vmax;height:140vmax;opacity:0}}
.addr{position:relative;z-index:2}
.addr .eyebrow{font:italic 400 clamp(20px,3vw,34px) var(--serif);color:var(--brass-2)}
.addr .line{font:400 clamp(44px,9vw,150px)/.95 var(--serif);letter-spacing:-.02em;margin-top:14px}
.addr .line span{display:inline-block;opacity:0;transform:translateY(60%) rotate(4deg);transition:transform 1s var(--ease),opacity .6s;transform-origin:left bottom}
.addr.in .line span{opacity:1;transform:none}
.addr .city{margin-top:22px;font-size:clamp(20px,3vw,32px);color:rgba(242,239,233,.8)}
.addr .city b{color:var(--brass-2);font-weight:400}
.addr .pin{margin:40px auto 0;width:22px;height:22px;background:var(--brass);border-radius:50% 50% 50% 0;transform:rotate(-45deg);position:relative;animation:bounce 1.6s var(--ease) infinite}
.addr .pin::after{content:"";position:absolute;inset:6px;background:var(--ink);border-radius:50%}
@keyframes bounce{0%,100%{transform:rotate(-45deg) translate(0,0)}50%{transform:rotate(-45deg) translate(-8px,-8px)}}
.addr .btns{margin-top:44px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.addr .btns .btn{color:var(--chalk)}

.map{display:grid;grid-template-columns:1fr 1fr;gap:5vw;align-items:center}
.map svg{width:100%;height:auto;border-radius:8px;background:var(--paper)}
.map .road{stroke:var(--ink);stroke-width:2;fill:none;stroke-dasharray:1200;stroke-dashoffset:1200;transition:stroke-dashoffset 3s var(--ease)}
.map.in .road{stroke-dashoffset:0}
.map .river{stroke:var(--verd);stroke-width:14;fill:none;opacity:.35}
.map .dot{fill:var(--brass);transform-origin:center;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{r:9}50%{r:14}}
.map dl{display:grid;grid-template-columns:auto 1fr;gap:14px 30px;margin-top:30px;font-size:16px}
.map dt{color:rgba(20,33,61,.55)}
.map dd{font-family:var(--serif);font-size:20px}
@media(max-width:900px){.map{grid-template-columns:1fr}}

/* contact form */
.form{display:grid;gap:34px;margin-top:50px;max-width:680px}
.form label{position:relative;display:block}
.form input,.form textarea{width:100%;border:0;border-bottom:1.5px solid rgba(20,33,61,.3);background:none;padding:14px 0;font:inherit;font-size:20px;color:var(--ink);outline:none;resize:vertical;cursor:none}
.form input:focus,.form textarea:focus{border-color:var(--brass)}
.form span{position:absolute;left:0;top:14px;pointer-events:none;color:rgba(20,33,61,.5);transition:.35s var(--ease)}
.form input:focus+span,.form input:not(:placeholder-shown)+span,.form textarea:focus+span,.form textarea:not(:placeholder-shown)+span{top:-14px;font-size:13px;color:var(--brass);letter-spacing:.1em}
.form button{cursor:none;font-family:inherit}
.form .ok{display:none;padding:30px;background:var(--verd);color:var(--chalk);border-radius:6px;font-family:var(--serif);font-size:24px}
.form.sent .ok{display:block}.form.sent .fields{display:none}

/* ===== footer ===== */
footer{background:var(--ink);color:var(--chalk);padding:14vh 5vw 40px;position:relative;overflow:hidden}
footer .big{font:400 clamp(60px,13vw,220px)/.85 var(--serif);letter-spacing:-.03em;color:transparent;-webkit-text-stroke:1px rgba(242,239,233,.35);transition:color 1.2s var(--ease)}
footer .big:hover{color:var(--brass-2)}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-top:70px;font-size:15px}
footer .cols h4{font:400 18px var(--serif);margin-bottom:16px;color:var(--brass-2)}
footer .cols a{display:block;padding:4px 0;opacity:.75;transition:.3s}
footer .cols a:hover{opacity:1;padding-left:8px}
footer .base{margin-top:60px;padding-top:22px;border-top:1px solid rgba(242,239,233,.15);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px;opacity:.6}
@media(max-width:900px){footer .cols{grid-template-columns:1fr 1fr}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important}
  .rev,.addr .line span{opacity:1;transform:none}
  .loader{display:none}
}
.hero .btn.solid,.band .btn.solid{background:var(--brass);border-color:var(--brass);color:var(--ink)}
.hero .btn.solid::before,.band .btn.solid::before{background:var(--chalk)}