:root{
  --sign:#1c1b19;
  --sign-2:#25231f;
  --brass:#d1ad5c;
  --brass-soft:#e6cf96;
  --plaster:#efe9df;
  --boucle:#d9d1c4;
  --oak:#8b6a48;
  --ink:#23211e;
  --muted:#6b645a;
  --on-dark:#cfc8bb;
  --display:'GFS Didot',Didot,Georgia,serif;
  --body:'Commissioner',system-ui,sans-serif;
  --gutter:clamp(20px,5vw,72px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--plaster);color:var(--ink);font:400 17px/1.65 var(--body);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
figure{margin:0}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.1;margin:0}
h2{font-size:clamp(34px,4.4vw,58px);letter-spacing:-.01em}
h3{font-size:24px}
:focus-visible{outline:2px solid var(--brass);outline-offset:4px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 26px;border-radius:999px;font:600 15px/1 var(--body);text-decoration:none;transition:background .2s,color .2s,border-color .2s}
.btn-sm{min-height:42px;padding:0 20px;font-size:14px}
.btn-gold{background:var(--brass);color:var(--sign)}
.btn-gold:hover{background:var(--brass-soft)}
.btn-ghost{border:1px solid currentColor;color:inherit}
.btn-ghost:hover{background:rgba(209,173,92,.14)}

/* header */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:32px;padding:14px var(--gutter);background:rgba(28,27,25,.94);backdrop-filter:blur(8px);color:var(--plaster)}
.mark{display:inline-flex;flex-direction:column;align-items:center;line-height:1;text-decoration:none;color:var(--brass)}
.mark b{font:400 30px/1 var(--display);letter-spacing:.04em}
.mark span{font:400 13px/1 var(--display);letter-spacing:.18em;margin-top:2px}
.top nav{display:flex;gap:28px;margin-left:auto;font-size:15px}
.top nav a{text-decoration:none;color:var(--on-dark)}
.top nav a:hover{color:var(--brass-soft)}

/* hero */
.hero{display:grid;grid-template-columns:1.1fr .9fr;min-height:calc(100svh - 70px);background:var(--sign);color:var(--plaster)}
.hero-sign{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:64px var(--gutter)}
.sign{position:relative;display:flex;flex-direction:column;align-items:center;padding:42px 56px 34px;border:1px solid rgba(209,173,92,.35);background:linear-gradient(180deg,#151412,#1f1d1a);box-shadow:inset 0 0 0 6px #121110,0 30px 60px -30px #000}
.sign::before{content:"";position:absolute;inset:-1px;border:1px solid var(--brass);opacity:0;animation:frame 1.6s .6s ease forwards}
.sign-jp{font:400 clamp(92px,11vw,150px)/.9 var(--display);letter-spacing:.06em;color:var(--brass)}
.sign-maison{font:400 clamp(40px,4.6vw,62px)/1 var(--display);letter-spacing:.12em;color:var(--brass);margin-top:4px}
.sign-rule{display:block;width:100%;height:1px;background:var(--brass);margin:22px 0 16px}
.sign-tag{font:500 13px/1 var(--body);letter-spacing:.32em;text-transform:uppercase;color:var(--brass)}
.sign-tag i{font-style:normal;margin:0 .5em}
.sign-jp,.sign-maison,.sign-rule,.sign-tag{animation:light 1.8s .2s ease-out both}
@keyframes light{
  0%{color:#3b3428;background-color:#3b3428;text-shadow:none;opacity:.6}
  35%{color:#7a6438;background-color:#7a6438;opacity:.85}
  45%{color:#4a3f2c;background-color:#4a3f2c}
  100%{color:var(--brass);background-color:var(--brass);text-shadow:0 0 18px rgba(232,196,110,.45),0 0 2px rgba(255,228,160,.6);opacity:1}
}
.sign-jp,.sign-maison,.sign-tag{background-color:transparent!important}
@keyframes frame{to{opacity:.55}}
.hero-line{max-width:34ch;margin:40px 0 0;font-size:19px;color:var(--on-dark)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero-photo{position:relative;overflow:hidden}
.hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--sign) 0,rgba(28,27,25,0) 22%)}

/* intro */
.intro{position:relative;display:grid;grid-template-columns:1fr minmax(280px,.8fr);gap:clamp(32px,6vw,96px);align-items:center;padding:clamp(72px,10vw,140px) var(--gutter);overflow:hidden}
.intro-text{max-width:560px;position:relative;z-index:1}
.intro-text h2{margin-bottom:28px}
.intro-text p{color:var(--muted);margin:0 0 18px}
.intro-photo{position:relative;z-index:1;aspect-ratio:3/4;overflow:hidden;border-radius:220px 220px 6px 6px;box-shadow:0 40px 70px -40px rgba(60,45,25,.55)}
.intro-photo img{width:100%;height:100%;object-fit:cover;object-position:40% 60%}
.slats{position:absolute;top:0;bottom:0;right:0;width:min(36vw,520px);background:repeating-linear-gradient(90deg,#9a7854 0 14px,#7c5d3d 14px 16px,#8f6d4a 16px 30px,#73563a 30px 32px);opacity:.9}

/* services */
.services{background:var(--sign);color:var(--plaster);padding:clamp(72px,9vw,128px) var(--gutter)}
.services-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:16px 40px;margin-bottom:36px}
.services-head h2{color:var(--brass)}
.services-head p{max-width:40ch;margin:0;color:var(--on-dark)}
.tabs{display:flex;gap:6px;border-bottom:1px solid rgba(207,200,187,.2);margin-bottom:44px;overflow-x:auto}
.tabs button{appearance:none;border:0;background:none;color:var(--on-dark);font:400 clamp(24px,3vw,34px)/1 var(--display);padding:14px 22px 18px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs button:hover{color:var(--plaster)}
.tabs button[aria-selected=true]{color:var(--brass);border-bottom-color:var(--brass)}
.panel{display:grid;grid-template-columns:1fr 300px;gap:clamp(32px,6vw,90px);align-items:start}
.panel[hidden]{display:none}
.panel-lede{font:400 clamp(22px,2.4vw,28px)/1.35 var(--display);color:var(--plaster);margin:0 0 26px;max-width:30ch}
.menu{list-style:none;margin:0;padding:0}
.menu li{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:18px 0;border-top:1px solid rgba(207,200,187,.16)}
.menu li:last-child{border-bottom:1px solid rgba(207,200,187,.16)}
.menu span{font-size:19px;font-weight:500}
.menu small{font-size:15px;color:#9d968a;text-align:right}
.panel-img{width:100%;aspect-ratio:3/5;object-fit:cover;border-radius:150px 150px 4px 4px;filter:saturate(.9)}

/* steps */
.steps{padding:clamp(72px,9vw,128px) var(--gutter);background:var(--boucle)}
.steps h2{max-width:16ch;margin-bottom:48px}
.steps ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px);counter-reset:s}
.steps li{counter-increment:s;padding-top:22px;border-top:2px solid var(--oak)}
.steps li::before{content:counter(s);display:block;font:400 54px/1 var(--display);color:var(--oak);margin-bottom:18px}
.steps h3{margin-bottom:10px}
.steps p{margin:0;color:var(--muted)}
.steps a{color:var(--ink);font-weight:600}

/* gallery */
.gallery{display:grid;grid-template-columns:1fr 1.6fr .75fr;grid-template-rows:300px 220px;gap:14px;padding:clamp(56px,7vw,96px) var(--gutter)}
.gallery figure{overflow:hidden;border-radius:4px}
.gallery img{width:100%;height:100%;object-fit:cover}
.g-a{grid-column:1;grid-row:1/3}
.g-b{grid-column:2;grid-row:1}
.g-b img{object-position:50% 72%}
.g-c{grid-column:3;grid-row:1/3}
.g-quote{grid-column:2;grid-row:2;margin:0;display:flex;align-items:center;padding:0 8px}
.g-quote p{margin:0;font:400 clamp(26px,2.8vw,40px)/1.2 var(--display);color:var(--oak)}

/* visit */
.visit{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(32px,5vw,80px);align-items:stretch;padding:clamp(72px,9vw,128px) var(--gutter);background:var(--sign);color:var(--plaster)}
.visit h2{color:var(--brass);margin-bottom:36px}
.visit dl{display:grid;grid-template-columns:auto 1fr;gap:18px 32px;margin:0 0 12px}
.visit dt{color:#9d968a;font-size:15px;padding-top:3px}
.visit dd{margin:0;font-size:19px}
.visit dd a{text-decoration:none}
.visit dd a:hover{color:var(--brass-soft)}
.map{min-height:380px;border-radius:4px;overflow:hidden;border:1px solid rgba(209,173,92,.3)}
.map iframe{width:100%;height:100%;min-height:380px;border:0;filter:grayscale(.35) contrast(1.05)}

footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;padding:32px var(--gutter);background:#141311;color:#9d968a;font-size:14px}
footer p{margin:0}
.credit{flex-basis:100%;text-align:center;font-size:12px;letter-spacing:.04em;color:#6f685d;padding-top:14px;border-top:1px solid rgba(207,200,187,.08)}
.credit a{color:var(--brass);text-decoration:none}
.credit a:hover{color:var(--brass-soft)}
.mark-sm b{font-size:24px}.mark-sm span{font-size:11px}

.callbar{display:none}

/* responsive */
@media (max-width:960px){
  .top nav{display:none}
  .top .btn{margin-left:auto}
  .hero{grid-template-columns:1fr;min-height:0}
  .hero-photo{aspect-ratio:4/3.4}
  .hero-photo::after{background:linear-gradient(180deg,var(--sign) 0,rgba(28,27,25,0) 25%)}
  .hero-sign{align-items:center;text-align:center;padding-top:48px}
  .hero-line{margin-inline:auto}
  .hero-actions{justify-content:center}
  .intro{grid-template-columns:1fr}
  .intro-photo{max-width:440px}
  .slats{top:auto;height:38%;width:100%}
  .panel{grid-template-columns:1fr}
  .panel-img{max-width:280px;aspect-ratio:3/4}
  .steps ol{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr 1fr;grid-template-rows:260px 340px auto}
  .g-b{grid-column:1/-1;grid-row:1}
  .g-a{grid-column:1;grid-row:2}
  .g-c{grid-column:2;grid-row:2}
  .g-quote{grid-column:1/-1;grid-row:3;padding:8px 0}
  .visit{grid-template-columns:1fr}
}
@media (max-width:560px){
  body{font-size:16px;padding-bottom:64px}
  .top{padding:10px 20px}
  .top .btn{display:none}
  .sign{padding:30px 26px 24px;width:100%}
  .sign-tag{font-size:10px;letter-spacing:.22em}
  .hero-actions .btn{width:100%}
  .menu li{flex-direction:column;gap:2px}
  .menu small{text-align:left}
  .visit dl{grid-template-columns:1fr;gap:4px}
  .visit dd{margin-bottom:14px}
  .callbar{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:30;justify-content:center;align-items:center;min-height:52px;border-radius:999px;background:var(--brass);color:var(--sign);font-weight:600;text-decoration:none;box-shadow:0 12px 30px -10px rgba(0,0,0,.6)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .sign *,.sign::before{animation:none!important}
  .sign::before{opacity:.55}
  .sign-jp,.sign-maison,.sign-tag{text-shadow:0 0 18px rgba(232,196,110,.45)}
}