@font-face{font-family:"DM Serif Display";src:url(fonts/dm-serif-display-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"DM Serif Display";src:url(fonts/dm-serif-display-latin-400-italic.woff2) format("woff2");font-style:italic;font-display:swap}
@font-face{font-family:"Manrope";src:url(fonts/manrope-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Manrope";src:url(fonts/manrope-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}

:root{--ink:#14213d;--ink2:#1d2d52;--paper:#f6f1e7;--paper2:#ece4d3;--must:#d9a43a;--must2:#b98620;--rose:#c2185b;--text:#1c1f26;--muted:#5d6270;--r:20px;--ease:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:"Manrope",system-ui,sans-serif;background:var(--paper);color:var(--text);font-size:17px;line-height:1.65;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,.logo{font-family:"DM Serif Display",Georgia,serif;font-weight:400;line-height:1.04}
h2{font-size:clamp(2.1rem,5.6vw,3.8rem)}
h1 em,h2 em,.lit em,.logo em{font-style:italic;color:var(--must)}
h2 em{color:var(--must2)}
.eyebrow{font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--must2);margin-bottom:.8rem}
.sub{color:var(--muted);max-width:34rem;margin-top:1rem}

.btn{display:inline-flex;align-items:center;justify-content:center;padding:1rem 1.5rem;border-radius:999px;font-weight:700;text-decoration:none;transition:transform .25s var(--ease),background .25s,color .25s;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn-m{background:var(--must);color:var(--ink)}
.btn-m:hover{background:#e8b74f;transform:translateY(-2px)}
.btn-o{border:1.5px solid rgba(246,241,231,.6);color:var(--paper)}
.btn-o:hover{background:var(--paper);color:var(--ink)}
.btn-i{background:var(--ink);color:var(--paper);margin-top:2rem}
.btn-i:hover{background:var(--ink2);transform:translateY(-2px)}
.btn-sm{padding:.6rem 1.1rem;font-size:.9rem}
.wide{width:100%;margin-top:1.6rem}

.bar{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;gap:1.5rem;padding:.9rem clamp(1rem,4vw,3rem);color:var(--paper);transition:background .35s,color .35s}
.bar.solid{background:rgba(20,33,61,.97)}
.logo{font-size:1.5rem;text-decoration:none}
.nav{display:flex;gap:1.6rem;margin-left:auto;font-weight:700;font-size:.93rem}
.nav a{text-decoration:none;opacity:.85;transition:opacity .2s}
.nav a:hover{opacity:1}

.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;background:var(--ink);color:var(--paper);overflow:hidden}
.hero-img{position:absolute;inset:0}
.hero-img img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);animation:pan 22s ease-in-out infinite alternate}
.hero-img::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,33,61,.94) 0%,rgba(20,33,61,.7) 45%,rgba(20,33,61,.2) 100%),linear-gradient(0deg,rgba(20,33,61,.8),transparent 50%)}
@keyframes pan{to{transform:scale(1.2) translate(-3%,2%)}}
.hero-inner{position:relative;max-width:1200px;width:100%;margin:0 auto;padding:7rem clamp(1.1rem,4vw,3rem) 5rem}
.kicker{font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:.78rem;opacity:.85;margin-bottom:1.1rem}
h1{font-size:clamp(3rem,9vw,7rem);max-width:11ch}
h1 span,h1 em{display:inline-block;opacity:0;transform:translateY(34px) rotate(1.5deg);animation:up 1s var(--ease) forwards}
h1 .l2{animation-delay:.12s}h1 .l3{animation-delay:.26s}
@keyframes up{to{opacity:1;transform:none}}
.lead{max-width:32rem;margin-top:1.4rem;font-size:1.1rem;opacity:.9}
.cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
.seam{position:absolute;left:0;right:0;bottom:18px;width:100%;height:40px}
.seam path{fill:none;stroke:var(--must);stroke-width:2;stroke-dasharray:10 9;stroke-linecap:round;animation:sew 14s linear infinite}
@keyframes sew{to{stroke-dashoffset:-380}}

.lit-wrap{max-width:1000px;margin:0 auto;padding:7rem clamp(1.1rem,4vw,3rem)}
.lit{font-family:"DM Serif Display",serif;font-size:clamp(1.8rem,4.4vw,3.1rem);line-height:1.18;color:var(--ink)}
.js .lit .w{opacity:.15;transition:opacity .4s}
.js .lit .w.on{opacity:1}

.try{background:var(--paper2);padding:6rem clamp(1.1rem,4vw,3rem)}
.try-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.swatches{display:flex;gap:.8rem;margin-top:2rem;flex-wrap:wrap}
.sw{width:64px;height:64px;border-radius:50%;border:3px solid var(--paper);background-size:cover;background-position:center;cursor:pointer;box-shadow:0 6px 16px -8px rgba(0,0,0,.5);transition:transform .3s var(--ease),box-shadow .3s}
.sw:hover{transform:translateY(-4px) rotate(-6deg)}
.sw.is-on{box-shadow:0 0 0 3px var(--ink),0 10px 20px -8px rgba(0,0,0,.5);transform:scale(1.08)}
.swname{margin-top:1rem;font-family:"DM Serif Display",serif;font-style:italic;font-size:1.4rem;color:var(--ink)}
.chair-wrap{background:radial-gradient(circle at 50% 60%,#fff 0%,var(--paper) 70%);border-radius:32px;padding:2rem}
.chair{width:100%;max-width:440px;margin:0 auto;display:block;overflow:visible}
.chair .up path{fill:url(#fab);stroke:rgba(20,33,61,.55);stroke-width:1.5}
.chair .sh path{fill:url(#shade);pointer-events:none}
.chair .piping path{fill:none;stroke:rgba(255,255,255,.35);stroke-width:2;stroke-dasharray:3 4}
.chair .legs path{fill:#6b4423}
.chair.swap .up{animation:swap .6s var(--ease)}
@keyframes swap{0%{opacity:.2;transform:translateY(6px)}100%{opacity:1;transform:none}}
.chair-note{text-align:center;color:var(--muted);font-size:.85rem;margin-top:1rem}

.works{max-width:1240px;margin:0 auto;padding:6rem clamp(1.1rem,4vw,3rem)}
.gal{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:220px;gap:12px;margin-top:3rem}
.g{border-radius:var(--r);overflow:hidden;background:var(--ink)}
.g-tall{grid-row:span 2}
.duo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) sepia(.35) hue-rotate(185deg) saturate(1.6) brightness(.85);transform:scale(1.08);transition:filter 1.2s var(--ease),transform 1.2s var(--ease)}
.duo.in img,.duo:hover img{filter:none;transform:scale(1)}

.services{background:var(--ink);color:var(--paper);padding:6rem clamp(1.1rem,4vw,3rem)}
.services .sub{color:rgba(246,241,231,.7)}
.svc-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1.2fr;gap:3rem}
.svc-list{list-style:none}
.svc-list li{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 1.2rem;padding:1.15rem 0;border-bottom:1px dashed rgba(246,241,231,.25);font-family:"DM Serif Display",serif;font-size:clamp(1.35rem,3vw,1.9rem);line-height:1.2;transition:padding .3s var(--ease),color .3s}
.svc-list li:hover{padding-left:.6rem;color:var(--must)}
.svc-list span{font-family:"Manrope",sans-serif;font-size:.8rem;font-weight:700;color:var(--must);width:2rem}
.svc-list small{width:100%;padding-left:3.2rem;font-family:"Manrope",sans-serif;font-size:.9rem;opacity:.65}

.fabrics{display:grid;grid-template-columns:1.1fr 1fr;gap:3rem;align-items:center;max-width:1200px;margin:0 auto;padding:6rem clamp(1.1rem,4vw,3rem) 3rem}
.fab-img{border-radius:28px;overflow:hidden;aspect-ratio:4/3}
.fab-txt p:not(.eyebrow){color:var(--muted);margin-top:1.2rem}
.marquee{overflow:hidden;border-block:1px solid var(--paper2);padding:1.2rem 0;margin-bottom:3rem}
.mq{display:flex;gap:3rem;width:max-content;animation:mq 40s linear infinite}
.mq span{font-family:"DM Serif Display",serif;font-size:1.6rem;color:var(--ink);white-space:nowrap}
.mq span:nth-child(odd){font-style:italic;color:var(--must2)}
@keyframes mq{to{transform:translateX(-50%)}}

.care{max-width:900px;margin:0 auto;padding:3rem clamp(1.1rem,4vw,3rem) 6rem}
.tips{margin-top:2.4rem}
.tips details{border-bottom:1px solid var(--paper2);padding:1.1rem 0}
.tips summary{cursor:pointer;list-style:none;font-family:"DM Serif Display",serif;font-size:1.45rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;color:var(--ink)}
.tips summary::-webkit-details-marker{display:none}
.tips summary::after{content:"+";font-family:"Manrope",sans-serif;font-size:1.5rem;color:var(--must2);transition:transform .3s}
.tips details[open] summary::after{transform:rotate(45deg)}
.tips p{color:var(--muted);margin-top:.6rem;max-width:44rem}

.contact{background:var(--paper2);padding:6rem clamp(1.1rem,4vw,3rem)}
.c-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:3rem}
.who{margin:1.4rem 0 .6rem;font-weight:700}
.big{font-family:"DM Serif Display",serif;font-size:clamp(1.4rem,3.6vw,2.1rem);text-decoration:none;border-bottom:2px solid var(--must);line-height:1.5;word-break:break-word}
.contact p{margin-bottom:.7rem}
.addr a,.ig a{font-weight:700;color:var(--ink)}
.hours{background:var(--paper);border-radius:28px;padding:2rem}
.hours h3{font-size:1.8rem;margin-bottom:.8rem;color:var(--ink)}
.hours p{color:var(--muted)}
.hours b{color:var(--text)}
.hol{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:1.2rem;padding:1rem 1.2rem;border-radius:14px;background:#fff;border:1px dashed var(--must)}

.foot{background:var(--ink);color:rgba(246,241,231,.7);padding:2.2rem clamp(1.1rem,4vw,3rem) 6.5rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-size:.9rem}

.dock{position:fixed;left:12px;right:12px;bottom:12px;z-index:60;display:none;gap:8px;padding:8px;border-radius:999px;background:rgba(20,33,61,.97);box-shadow:0 14px 30px -10px rgba(0,0,0,.5);transform:translateY(130%);transition:transform .45s var(--ease)}
.dock.show{transform:none}
.dock a{flex:1;text-align:center;padding:.85rem;border-radius:999px;color:var(--paper);text-decoration:none;font-weight:700}
.dock .dock-main{background:var(--must);color:var(--ink)}

.js .reveal{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .reveal.in{opacity:1;transform:none}

@media (max-width:900px){
  .nav{display:none}
  .bar .btn-sm{margin-left:auto}
  .try-grid,.svc-grid,.fabrics,.c-grid{grid-template-columns:1fr}
  .gal{grid-template-columns:repeat(2,1fr);grid-auto-rows:180px}
  .gal .g:last-child{grid-column:span 2}
}
@media (max-width:620px){
  body{font-size:16px}
  .dock{display:flex}
  .bar .btn-sm{display:none}
  .hero-inner{padding-bottom:4.5rem}
  .cta .btn{flex:1}
  .lit-wrap{padding:5rem 1.1rem}
  .try,.services,.contact,.works{padding-top:4.5rem;padding-bottom:4.5rem}
  .gal{grid-auto-rows:150px;gap:8px}
  .chair-wrap{padding:1.2rem}
  .sw{width:54px;height:54px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  h1 span,h1 em{opacity:1;transform:none}
  .js .reveal{opacity:1;transform:none}
  .js .lit .w{opacity:1}
}
