/* Patrizia Manias · concrete, black glass and the green shelf light of Shelton Street */
:root{
  --ink:#121211; --ink2:#1b1b19; --concrete:#8c8983; --paper:#ecE8e1; --paper2:#d9d4cb;
  --line:rgba(236,232,225,.14); --green:#6fe39a; --red:#7b1a1a;
  --disp:'Archivo',system-ui,sans-serif; --body:'Inter',system-ui,sans-serif;
  --pad:clamp(20px,4vw,64px);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:clip}
html{background:var(--ink);color:var(--paper);-webkit-text-size-adjust:100%}
body{font:400 16px/1.6 var(--body);background:var(--ink)}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3{font-family:var(--disp);font-weight:700;font-stretch:112%;letter-spacing:-.01em;line-height:1.02}
h2{font-size:clamp(32px,3.6vw,54px)}
h3{font-size:17px;font-stretch:100%;letter-spacing:0}
.label{font:600 12px/1 var(--disp);font-stretch:125%;letter-spacing:.16em;text-transform:uppercase;color:var(--concrete);margin-bottom:22px}
.lede{color:var(--paper2);max-width:520px}
.logo{display:block;width:100%;height:auto}

.btn{display:inline-flex;align-items:center;height:48px;padding:0 24px;font:600 14px/1 var(--disp);font-stretch:115%;letter-spacing:.06em;text-transform:uppercase;transition:background .25s,color .25s,border-color .25s}
.btn-light{background:var(--paper);color:var(--ink)}
.btn-light:hover{background:#fff}
.btn-line{border:1px solid rgba(236,232,225,.5);color:var(--paper)}
.btn-line:hover{border-color:var(--paper);background:rgba(236,232,225,.08)}

/* header */
.top{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px var(--pad);transition:background .35s,padding .35s}
.top.solid{background:rgba(18,18,17,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding-top:14px;padding-bottom:14px}
.brand{width:190px;color:var(--paper)}
.menu{display:flex;gap:30px;font:500 13px/1 var(--disp);font-stretch:110%;letter-spacing:.05em;text-transform:uppercase}
.menu a{opacity:.72;transition:opacity .2s}
.menu a:hover{opacity:1}
.top-r{display:flex;align-items:center;gap:10px}
.ask-top{font:600 13px/1 var(--disp);font-stretch:110%;letter-spacing:.05em;text-transform:uppercase;padding:12px 16px;opacity:.85}
.ask-top:hover{opacity:1}
.book-top{font:600 13px/1 var(--disp);font-stretch:115%;letter-spacing:.08em;text-transform:uppercase;background:var(--paper);color:var(--ink);padding:12px 20px}

/* I. hero: one editorial portrait, still, on warm paper */
.btn-dark{background:var(--ink);color:var(--paper)}
.btn-dark:hover{background:#000}
.btn-ink-line{border:1px solid rgba(18,18,17,.35);color:var(--ink)}
.btn-ink-line:hover{border-color:var(--ink);background:rgba(18,18,17,.04)}
.top:not(.solid){color:var(--ink)}
.top:not(.solid) .brand{color:var(--ink)}
.top:not(.solid) .book-top{background:var(--ink);color:var(--paper)}
.hero{position:relative;min-height:100vh;min-height:100svh;background:var(--paper);color:var(--ink);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(40px,7vw,140px);padding:120px var(--pad) 64px clamp(20px,8vw,140px)}
.hero-copy{max-width:520px;animation:heroIn 1.8s cubic-bezier(.22,.61,.36,1) .15s both}
.hero-kicker{font:600 12px/1 var(--disp);font-stretch:125%;letter-spacing:.2em;text-transform:uppercase;color:#6f6b64;margin-bottom:30px}
.hero-kicker span{margin:0 6px}
.hero h1{font-size:clamp(38px,3.9vw,60px);font-weight:600;font-stretch:108%;letter-spacing:-.015em;line-height:1.06}
.hero-sub{margin:28px 0 40px;max-width:420px;color:#4a4742;font-size:16.5px;line-height:1.7}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-portrait{margin-right:clamp(0px,3vw,60px);animation:heroIn 2.4s cubic-bezier(.22,.61,.36,1) both}
.hero-frame{height:min(calc(100svh - 220px),760px);min-height:440px;aspect-ratio:4/5;overflow:hidden;background:#d9d4cb}
.hero-frame img{width:100%;height:112%;object-fit:cover;object-position:50% 30%;will-change:transform}
.hero-portrait figcaption{margin-top:16px;font:500 11px/1 var(--disp);font-stretch:115%;letter-spacing:.16em;text-transform:uppercase;color:#8a857d}
@keyframes heroIn{from{opacity:0}to{opacity:1}}

/* II. the chair */
.chair{position:relative;background:var(--ink)}
.chair-pin{position:relative;min-height:100vh;min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,.35fr);align-items:center;gap:clamp(24px,4vw,72px);padding:90px var(--pad) 40px}
.chair-text h2{margin-bottom:34px}
.chapters{list-style:none;border-left:1px solid var(--line)}
.chapters li{padding:10px 0 10px 22px;position:relative;opacity:.38;transition:opacity .4s}
.chapters li::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:2px;background:var(--green);transform:scaleY(0);transform-origin:top;transition:transform .4s}
.chapters li span{font:700 20px/1.2 var(--disp);font-stretch:112%}
.chapters li p{max-height:0;overflow:hidden;color:var(--paper2);font-size:15px;max-width:400px;transition:max-height .5s,margin .5s}
.chapters li.on{opacity:1}
.chapters li.on::before{transform:scaleY(1)}
.chapters li.on p{max-height:120px;margin-top:8px}
.mirror{position:relative;height:min(78vh,760px);aspect-ratio:9/16;background:#000;box-shadow:0 0 0 1px rgba(236,232,225,.1),0 0 0 10px #0b0b0a,0 0 0 11px rgba(111,227,154,.35),0 30px 80px rgba(0,0,0,.6)}
.mirror video{width:100%;height:100%;object-fit:cover}
.mirror figcaption{position:absolute;left:0;right:0;bottom:-40px;display:flex;justify-content:space-between;font:500 12px/1 var(--disp);font-stretch:115%;letter-spacing:.12em;text-transform:uppercase;color:var(--concrete)}
.mirror figcaption span:first-child{color:var(--paper);font-variant-numeric:tabular-nums}

/* III. menu */
.menu-sec{padding:140px var(--pad) 120px;background:linear-gradient(#121211,#171715)}
.menu-head{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:40px;margin-bottom:56px}
.menu-head .label{grid-column:1/-1;margin-bottom:0}
.ring-wrap{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:48px;align-items:start}
.ring{position:relative;padding-top:18px;display:flex;gap:14px;user-select:none}
.ring::before{content:"";position:absolute;left:-12px;right:-12px;top:0;height:12px;border-radius:12px;background:linear-gradient(#5a5953,#2b2a27);box-shadow:0 6px 20px rgba(0,0,0,.5)}
.group{position:relative;display:flex;gap:4px;flex:var(--n) 1 0;min-width:0}
.group-name{position:absolute;top:-44px;left:0;font:600 11px/1 var(--disp);font-stretch:125%;letter-spacing:.16em;text-transform:uppercase;color:var(--concrete);white-space:nowrap}
.tress{position:relative;flex:1 1 0;min-width:0;height:430px;transform-origin:50% 0;cursor:pointer;background:none;will-change:transform}
.tress .clip{position:absolute;left:18%;right:18%;top:-6px;height:22px;border-radius:3px;background:linear-gradient(#9a978f,#4a4944);z-index:2}
.tress .lock{position:absolute;inset:6px 0 0;clip-path:polygon(8% 0,92% 0,86% 72%,62% 100%,50% 97%,36% 100%,14% 74%);background:
  repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,transparent 1px 3px,rgba(0,0,0,.18) 3px 4px,transparent 4px 6px),
  linear-gradient(90deg,rgba(0,0,0,.35),rgba(255,255,255,.14) 38%,rgba(0,0,0,0) 55%,rgba(0,0,0,.3)),
  linear-gradient(var(--a),var(--b));transition:filter .25s}
.tress.gloss .lock{background:
  repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,transparent 1px 3px,rgba(0,0,0,.18) 3px 4px,transparent 4px 6px),
  linear-gradient(170deg,transparent 30%,rgba(255,255,255,.35) 42%,transparent 52%),
  linear-gradient(90deg,rgba(0,0,0,.35),rgba(255,255,255,.14) 38%,rgba(0,0,0,0) 55%,rgba(0,0,0,.3)),
  linear-gradient(var(--a),var(--b))}
.tress.curl .lock{clip-path:polygon(8% 0,92% 0,98% 14%,82% 28%,98% 42%,82% 56%,96% 70%,62% 100%,38% 100%,4% 70%,18% 56%,2% 42%,18% 28%,2% 14%)}
.tress .tag{position:absolute;left:50%;top:40px;writing-mode:vertical-rl;transform:translateX(-50%) rotate(180deg);font:600 12px/1 var(--disp);font-stretch:108%;letter-spacing:.06em;white-space:nowrap;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.7);opacity:.92;z-index:1;pointer-events:none}
.tress:hover .lock,.tress:focus-visible .lock{filter:brightness(1.18)}
.tress.sel .lock{filter:brightness(1.25)}
.tress.sel .clip{background:var(--green);box-shadow:0 0 12px var(--green)}
.tress:focus-visible{outline:none}
.tress-card{position:sticky;top:110px;border-top:2px solid var(--green);padding-top:24px;min-height:360px}
.tress-card .g{font:600 11px/1 var(--disp);font-stretch:125%;letter-spacing:.16em;text-transform:uppercase;color:var(--concrete)}
.tress-card h3{font-size:30px;font-stretch:110%;line-height:1.1;margin:14px 0 18px}
.tress-card .pd{display:flex;gap:18px;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:18px}
.tress-card .pd b{font:700 24px/1 var(--disp);font-stretch:105%}
.tress-card .pd span{color:var(--concrete);font-size:14px}
.tress-card p{color:var(--paper2);font-size:15px}
.tress-card .x{margin-top:14px;color:var(--paper);font-size:14px}
.tress-card .row{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap}
.tress-card .btn{height:44px;padding:0 18px;font-size:12px}
.notes{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;margin-top:100px;padding-top:36px;border-top:1px solid var(--line)}
.notes h3{margin-bottom:10px}
.notes p{color:var(--paper2);font-size:14.5px}

/* IV. wall */
.wall{padding:120px 0 110px;background:#0e0e0d;overflow:hidden}
.wall-head{padding:0 var(--pad);margin-bottom:54px}
.wall-row{display:flex;gap:18px;align-items:flex-end;padding:0 var(--pad);overflow-x:auto;scrollbar-width:none;cursor:grab}
.wall-row::-webkit-scrollbar{display:none}
.reel{flex:0 0 auto;width:250px;position:relative}
.reel.tall{width:300px}
.reel video,.reel img{width:100%;aspect-ratio:9/16;object-fit:cover;background:#000}
.reel:not(.tall) img{aspect-ratio:3/4}
.reel figcaption{margin-top:14px;font-size:13.5px;color:var(--concrete);line-height:1.45;max-width:280px}
.reel figcaption b{color:var(--paper);font-weight:500}
.wall-foot{padding:40px var(--pad) 0;font:600 12px/1 var(--disp);font-stretch:125%;letter-spacing:.16em;text-transform:uppercase;color:var(--concrete)}
.wall-foot a{color:var(--paper);border-bottom:1px solid var(--green);padding-bottom:3px}

/* V. house */
.house{padding:140px var(--pad);display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(32px,5vw,90px);align-items:center}
.house-photo img{width:100%;aspect-ratio:3/2;object-fit:cover}
.house-copy h2{margin-bottom:28px}
.house-copy p{color:var(--paper2);margin-bottom:16px;max-width:520px}
.house-copy b{color:var(--paper);font-weight:600}
.backstage{grid-column:1/-1;display:grid;grid-template-columns:1.1fr .8fr .8fr 1fr;gap:18px;align-items:end;margin-top:90px}
.backstage figure img{width:100%;object-fit:cover}
.bs-a img{aspect-ratio:3/4}
.bs-b img,.bs-c img{aspect-ratio:3/4}
.bs-b{margin-bottom:60px}
.backstage figcaption{margin-top:12px;font-size:13px;color:var(--concrete)}
.bs-copy{padding-left:18px}
.bs-copy h3{font-size:24px;font-stretch:112%;margin-bottom:12px}
.bs-copy p{color:var(--paper2);font-size:15px}

/* VI. words */
.words{padding:130px var(--pad);background:var(--paper);color:var(--ink)}
.words .label{color:#77736c}
.words-sum{font:700 clamp(26px,2.6vw,38px)/1.15 var(--disp);font-stretch:110%;max-width:760px;margin-bottom:70px}
.quotes{display:grid;grid-template-columns:repeat(6,1fr);gap:56px 48px}
.quotes blockquote{font:500 clamp(19px,1.6vw,24px)/1.35 var(--body);letter-spacing:-.01em}
.quotes cite{display:block;margin-top:14px;font:600 11px/1 var(--disp);font-stretch:125%;letter-spacing:.16em;text-transform:uppercase;font-style:normal;color:#77736c}
.q1{grid-column:1/4}.q2{grid-column:5/7;font-family:var(--disp)!important;font-weight:700!important;font-stretch:112%;font-size:clamp(32px,3.4vw,52px)!important;line-height:1!important}
.q3{grid-column:2/4}.q4{grid-column:4/6}.q5{grid-column:1/3}

/* VII. salons */
.salons{display:grid;grid-template-columns:1.3fr 1fr;min-height:740px}
.salon{position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:var(--pad);overflow:hidden}
.salon>div{position:relative;z-index:2}
.salon.london img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.55)}
.salon h2{font-size:clamp(28px,2.8vw,42px);margin-bottom:10px}
.salon .label{color:var(--paper2)}
.addr{color:var(--paper2);margin-bottom:20px}
.lines{display:flex;flex-wrap:wrap;gap:8px 26px;margin-bottom:28px;font-weight:500}
.lines a{border-bottom:1px solid rgba(236,232,225,.35);padding-bottom:2px}
.lines a:hover{border-color:var(--green)}
.salon-cta{display:flex;gap:12px;flex-wrap:wrap}
.salon.capri{background:#e9e1d3;color:#1d1a16}
.salon.capri .label{color:#8a8173}
.salon.capri .addr{color:#5b544a}
.salon.capri .lines a{border-color:rgba(29,26,22,.3)}
.capri-line{font-size:18px;margin-bottom:22px;max-width:420px}
.salon .capri-sun{position:absolute;right:clamp(40px,6vw,96px);top:72px;width:190px;height:190px;border-radius:50%;background:radial-gradient(circle at 50% 35%,#f4d9a2,#e7ad62);overflow:hidden}
.capri-sun::after{content:"";position:absolute;left:0;right:0;top:58%;bottom:0;background:repeating-linear-gradient(#e9e1d3 0 9px,transparent 9px 16px)}

/* footer */
.foot{padding:90px var(--pad) 40px;border-top:1px solid var(--line)}
.foot-logo{max-width:880px;color:var(--paper);margin-bottom:60px}
.foot-cols{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-bottom:40px}
.foot-cols p{display:flex;gap:26px;flex-wrap:wrap;font:500 13px/1 var(--disp);font-stretch:110%;letter-spacing:.06em;text-transform:uppercase}
.foot-cols a,.foot-cols button{opacity:.75;font:inherit;letter-spacing:inherit;text-transform:inherit}
.foot-cols a:hover,.foot-cols button:hover{opacity:1}
.fine{font-size:12px;color:var(--concrete)}

/* concierge */
.ask-fab{position:fixed;right:22px;bottom:22px;z-index:60;display:flex;align-items:center;gap:10px;height:50px;padding:0 20px;background:var(--paper);color:var(--ink);font:700 13px/1 var(--disp);font-stretch:115%;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 10px 30px rgba(0,0,0,.4);transition:transform .3s,opacity .3s}
.fab-dot{width:8px;height:8px;border-radius:50%;background:#1f9d57;box-shadow:0 0 0 3px rgba(31,157,87,.2)}
body.ask-open .ask-fab{opacity:0;pointer-events:none}
.ask{position:fixed;right:22px;bottom:22px;z-index:70;width:400px;max-width:calc(100vw - 24px);height:min(640px,calc(100vh - 44px));display:flex;flex-direction:column;background:#f1ede6;color:#171614;box-shadow:0 30px 80px rgba(0,0,0,.55);transform:translateY(16px);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s}
.ask.open{opacity:1;transform:none;pointer-events:auto}
.ask-head{display:flex;justify-content:space-between;align-items:flex-start;padding:18px 20px;background:var(--ink);color:var(--paper)}
.ask-head b{display:block;font:700 16px/1.2 var(--disp);font-stretch:112%;letter-spacing:.02em;text-transform:uppercase}
.ask-head small{display:block;color:var(--concrete);font-size:12px;margin-top:4px}
.ask-x{font-size:26px;line-height:1;opacity:.7;padding:0 4px}
.ask-log{flex:1;overflow-y:auto;padding:18px 20px;display:flex;flex-direction:column;gap:12px;overscroll-behavior:contain}
.m{max-width:88%;font-size:14.5px;line-height:1.5;padding:11px 14px}
.m.bot{background:#fff;align-self:flex-start;border-left:2px solid #1f9d57}
.m.me{background:var(--ink);color:var(--paper);align-self:flex-end}
.m a{text-decoration:underline}
.m .acts{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.m .acts a,.m .acts button{display:block;text-align:left;text-decoration:none;background:var(--ink);color:var(--paper);padding:10px 12px;font:600 12.5px/1.2 var(--disp);font-stretch:110%;letter-spacing:.04em;text-transform:uppercase}
.m .acts .alt{background:none;color:var(--ink);border:1px solid rgba(23,22,20,.3)}
.m select,.m input{width:100%;margin-top:8px;padding:10px;border:1px solid rgba(23,22,20,.25);background:#fbfaf7;font:inherit;font-size:14px;color:inherit}
.ask-quick{display:flex;flex-wrap:wrap;gap:6px;padding:0 20px 12px}
.ask-quick button{font-size:12.5px;padding:7px 10px;border:1px solid rgba(23,22,20,.22);background:#fbfaf7}
.ask-quick button:hover{border-color:#171614}
.ask-form{display:flex;border-top:1px solid rgba(23,22,20,.12)}
.ask-form input{flex:1;min-width:0;padding:16px 20px;border:0;background:#fbfaf7;font:inherit;font-size:15px;color:#171614;outline:none}
.ask-form button{padding:0 20px;background:var(--ink);color:var(--paper);font:700 12px/1 var(--disp);font-stretch:115%;letter-spacing:.08em;text-transform:uppercase}

/* responsive */
@media (max-width:1100px){
  .menu{display:none}
  .chair-pin{grid-template-columns:1fr auto;padding-top:80px}
  .ring-wrap{grid-template-columns:1fr}
  .tress-card{position:relative;top:0;min-height:0}
  .notes{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .brand{width:150px}
  .ask-top{display:none}
  .hero{grid-template-columns:1fr;gap:34px;padding:92px var(--pad) 60px;align-items:start}
  .hero-portrait{order:-1;margin:0}
  .hero-frame{height:auto;min-height:0;width:100%}
  .hero h1{font-size:36px}
  .hero-kicker{margin-bottom:20px;font-size:11px;letter-spacing:.14em;white-space:nowrap}
  .hero-sub{font-size:15.5px;margin:18px 0 26px}
  .chair-pin{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-items:start;gap:16px;padding:78px var(--pad) 50px}
  .chair-text h2{font-size:26px;margin-bottom:12px}
  .chair-text .label{margin-bottom:10px}
  .chapters{display:flex;border-left:0;border-top:1px solid var(--line);overflow:hidden}
  .chapters li{padding:10px 8px 0 0;flex:1 1 0;min-width:0}
  .chapters li::before{left:0;right:0;top:-1px;bottom:auto;height:2px;width:auto;transform:scaleX(0);transform-origin:left}
  .chapters li.on::before{transform:scaleX(1)}
  .chapters li span{font-size:11px;letter-spacing:.02em;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .chapters li p{display:none}
  .mirror{height:auto;width:min(100%,calc((100svh - 300px) * 9 / 16));justify-self:center}
  .mirror figcaption{bottom:-28px;font-size:10px}
  .menu-sec{padding:100px var(--pad) 90px}
  .menu-head{grid-template-columns:1fr;gap:18px;margin-bottom:40px}
  .ring{overflow-x:auto;padding-top:60px;margin:0 calc(-1 * var(--pad));padding-left:var(--pad);padding-right:var(--pad);scrollbar-width:none}
  .ring::before{top:42px;left:var(--pad);right:auto;width:calc(25 * 38px + 60px)}
  .ring::-webkit-scrollbar{display:none}
  .group{flex:none}
  .group-name{top:-38px}
  .tress{flex:none;width:34px;height:340px}
  .notes{grid-template-columns:1fr;gap:26px;margin-top:60px}
  .wall{padding:90px 0}
  .reel{width:200px}.reel.tall{width:220px}
  .house{grid-template-columns:1fr;padding:100px var(--pad)}
  .backstage{grid-template-columns:1fr 1fr;margin-top:50px}
  .bs-a{grid-column:1/-1}
  .bs-b{margin-bottom:0}
  .bs-copy{grid-column:1/-1;padding-left:0}
  .words{padding:90px var(--pad)}
  .quotes{grid-template-columns:1fr;gap:36px}
  .quotes blockquote{grid-column:auto!important}
  .salons{grid-template-columns:1fr}
  .salon{min-height:520px}
  .salon.capri{min-height:0;padding-top:230px}
  .salon .capri-sun{width:150px;height:150px;top:50px;right:auto;left:var(--pad)}
  .foot-logo{margin-bottom:40px}
  .ask{right:12px;bottom:12px;height:min(600px,calc(100svh - 24px))}
  .ask-fab{right:14px;bottom:14px}
}