:root{
  --bg:#140a0d;
  --bg-2:#1b0d12;
  --bg-3:#0e0608;
  --wine:#722b3e;
  --gold:#cfa96b;
  --gold-bright:#e9d3a2;
  --ivory:#f4ebe3;
  --muted:#a89088;
  --dim:#7c6862;
  --line:rgba(207,169,107,.24);
  --line-soft:rgba(207,169,107,.12);
  --serif-lt:"Didot","Bodoni 72","Cormorant Garamond",Georgia,serif;
  --serif-jp:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --sans-jp:"Zen Kaku Gothic New","Hiragino Sans","Hiragino Kaku Gothic ProN",-apple-system,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ivory);font-family:var(--sans-jp);
  font-size:15px;line-height:2;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ---------- header ---------- */
.hd{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;
  justify-content:space-between;padding:18px 28px;transition:background .5s,padding .5s;
  background:linear-gradient(rgba(14,6,8,.55),transparent)}
.hd.solid{background:rgba(14,6,8,.92);padding:10px 28px;backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line-soft)}
/* brand logotype — the one true mark, shared everywhere */
.brand{display:inline-flex;align-items:baseline;gap:.55em;font-family:var(--serif-lt);
  font-style:italic;font-weight:400;color:var(--ivory);letter-spacing:.12em;line-height:1.1}
.brand .c{font-size:.52em;color:var(--gold);letter-spacing:.12em}
.hd .brand{font-size:22px}
.hd nav{display:flex;gap:26px;align-items:center}
.hd nav a{font-family:var(--serif-lt);font-size:11.5px;letter-spacing:.24em;color:var(--muted);
  text-transform:uppercase;transition:color .3s}
.hd nav a:hover{color:var(--gold-bright)}
.hd .hd-cta{display:flex;align-items:center}
.hd .rec-link{font-family:var(--serif-lt);font-size:11.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold);padding:7px 18px 7px 0;margin-right:18px;
  border-right:1px solid var(--line);transition:color .3s}
.hd .rec-link:hover{color:var(--gold-bright)}
.hd .tel{font-family:var(--serif-lt);font-size:13px;letter-spacing:.12em;color:var(--gold);
  padding:7px 0;transition:color .3s}
.hd .tel .tel-lbl{font-family:var(--serif-jp);font-size:10.5px;letter-spacing:.18em;
  color:var(--muted);margin-right:12px;padding-right:12px;
  border-right:1px solid var(--line);transition:color .3s}
.hd .tel:hover{color:var(--gold-bright)}
.hd .tel:hover .tel-lbl{color:var(--gold)}
@media(max-width:480px){.hd .tel .tel-lbl{display:none}}
@media(max-width:1000px){.hd nav{display:none}}
@media(max-width:480px){
  .hd{padding:14px 16px}
  .hd.solid{padding:8px 16px}
  .hd .brand{font-size:19px}
  .hd .rec-link{font-size:10px;letter-spacing:.14em;padding:7px 12px 7px 0;margin-right:12px}
  .hd .tel{font-size:12px}
}

/* ---------- hero ---------- */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;text-align:center}
.hero .ph{position:absolute;inset:0;background:center 65%/cover no-repeat;
  filter:brightness(.5) saturate(1.05);transform:scale(1.08);opacity:0;
  transition:opacity 2.6s ease .3s,transform 9.5s ease-out .3s;will-change:transform,opacity}
.hero .ph.p1{background-image:url(../img/hero.jpg)}
.hero .ph.p2{background-image:url(../img/whisky-dark.jpg)}
.hero .ph.p3{background-image:url(../img/glasses.jpg)}
.hero.in .ph.on{opacity:1;transform:scale(1)}
.hero .veil{position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 60%,rgba(20,10,13,.1) 0%,rgba(20,10,13,.72) 78%),
  linear-gradient(rgba(20,10,13,.5),rgba(20,10,13,.25) 40%,var(--bg) 98%)}
.hero canvas{position:absolute;inset:0;width:100%;height:100%}
.hero .inner{position:relative;padding:0 24px}
.hero .hero-t{margin:0;font-weight:400}
.hero .eb{display:block;font-family:var(--serif-jp);font-size:12px;letter-spacing:.42em;color:var(--gold);
  padding-left:.42em;margin:0 0 22px;opacity:0;transform:translateY(16px);
  transition:all 1.6s cubic-bezier(.22,1,.36,1) 1.1s}
.hero .brand-hero{position:relative;left:-.91em;
  font-size:clamp(46px,9.5vw,96px);margin:0;
  opacity:0;transform:translateY(24px);
  transition:all 2s cubic-bezier(.22,1,.36,1) 1.5s;text-shadow:0 0 80px rgba(114,43,62,.6)}
.hero .brand-hero .c{color:var(--gold-bright)}
.brand-hero .n{margin-right:-.12em}
.hero .rule{width:0;height:2px;margin:26px auto;
  background:linear-gradient(90deg,var(--gold),var(--gold-bright),var(--gold));
  clip-path:ellipse(50% 50% at 50% 50%);
  transition:width 1.8s cubic-bezier(.22,1,.36,1) 2.4s}
.hero .tg{font-family:var(--serif-jp);font-size:clamp(13px,2.4vw,16px);letter-spacing:.34em;
  padding-left:.34em;color:var(--ivory);margin:0;opacity:0;transform:translateY(12px);transition:all 1.6s ease 2.9s}
.hero .info{font-family:var(--serif-jp);font-size:12px;letter-spacing:.24em;color:var(--muted);
  padding-left:.24em;margin:30px 0 0;opacity:0;transition:opacity 1.6s ease 3.5s}
.hero .info .seg{white-space:nowrap}
.hero .info .sep{margin:0 .9em;opacity:.55}
@media(max-width:600px){
  .hero .info .sep{display:none}
  .hero .info .seg{display:block;line-height:2.1}
}
.hero.in .eb,.hero.in .tg{opacity:1;transform:none}
.hero.in .brand-hero{opacity:1;transform:none}
.hero.in .rule{width:min(150px,30%)}
.hero.in .info{opacity:1}
.hero .cue{position:absolute;bottom:28px;left:50%;width:1px;height:56px;overflow:hidden;
  opacity:0;transition:opacity 1s ease 4.2s}
.hero.in .cue{opacity:1}
.hero .cue::after{content:"";position:absolute;top:-56px;left:0;width:1px;height:56px;
  background:linear-gradient(transparent,var(--gold));animation:cue 2.4s ease-in-out infinite}
@keyframes cue{to{top:56px}}

/* ---------- shared section chrome ---------- */
section{position:relative}
.sec{max-width:1080px;margin:0 auto;padding:110px 26px}
.eb2{font-family:var(--serif-lt);font-size:11px;letter-spacing:.5em;color:var(--gold);
  text-transform:uppercase;margin:0 0 14px}
.h2{font-family:var(--serif-jp);font-weight:500;font-size:clamp(22px,4vw,31px);
  letter-spacing:.14em;line-height:1.8;margin:0 0 26px;color:var(--ivory);text-wrap:balance;
  padding-left:.5em;text-indent:-.5em}
.body{color:var(--muted);max-width:36em;margin:0;text-wrap:pretty}
.body strong{color:var(--ivory);font-weight:500}

.nw{white-space:nowrap}
/* reveal utility */
.rv{opacity:0;transform:translateY(30px);transition:opacity 1.4s cubic-bezier(.22,1,.36,1),transform 1.4s cubic-bezier(.22,1,.36,1)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.15s}.rv.d2{transition-delay:.3s}.rv.d3{transition-delay:.45s}
.frame{overflow:hidden;position:relative}
.frame img{transform:scale(1.12);transition:transform 2.2s cubic-bezier(.22,1,.36,1)}
.frame.rv{clip-path:inset(8% 6% 8% 6%);transition:clip-path 1.6s cubic-bezier(.22,1,.36,1),opacity 1.2s ease,transform 1.6s cubic-bezier(.22,1,.36,1)}
.frame.rv.in{clip-path:inset(0 0 0 0)}
.frame.rv.in img{transform:scale(1)}

/* ---------- news ---------- */
#news .sec{padding:64px 26px 56px}
#news .news-list{list-style:none;margin:0;padding:0;max-width:720px}
#news li{display:flex;gap:28px;align-items:baseline;padding:15px 2px;
  border-bottom:1px solid var(--line-soft);font-family:var(--serif-jp)}
#news li:last-child{border-bottom:none}
#news time{font-family:var(--serif-lt);font-size:12px;letter-spacing:.14em;
  color:var(--gold);white-space:nowrap;flex:0 0 96px}
#news li span{font-size:13.5px;letter-spacing:.1em;line-height:1.9;
  color:var(--muted);text-wrap:pretty}
#news .pickup a{display:flex;gap:28px;align-items:baseline}
#news .tag{flex:0 0 96px;text-align:center;font-family:var(--serif-lt);font-size:10px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
  border:1px solid var(--line);padding:4px 0;transition:all .3s}
#news .pickup span:not(.tag){transition:color .3s}
#news .pickup a:hover .tag{background:var(--gold);color:var(--bg-3);border-color:var(--gold)}
#news .pickup a:hover span:not(.tag){color:var(--ivory)}
@media(max-width:600px){
  #news li,#news .pickup a{flex-direction:column;gap:2px}
  #news time{flex:none}
  #news .pickup a{gap:10px;align-items:flex-start}
  #news .tag{flex:none;padding:4px 14px}
}

/* ---------- concept ---------- */
#concept .grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:64px;align-items:center}
#concept .imgs{position:relative}
#concept .imgs .a{width:100%}
#concept .sign{margin-top:34px;font-family:var(--serif-jp);color:var(--dim);
  font-size:12.5px;letter-spacing:.2em}
#concept .sign b{color:var(--gold);font-weight:500}
#concept .imgs .a img{width:100%;aspect-ratio:15/16;object-fit:cover;object-position:50% 100%}

/* wire art — one-line drawing, drawn on scroll */
.wire-mark svg{width:100%;display:block;overflow:visible;
  filter:drop-shadow(0 0 5px rgba(207,169,107,.3))}
.wire-mark path{stroke:var(--gold);fill:none;stroke-width:4.5;
  stroke-linecap:round;stroke-linejoin:round}
#concept .wire-mark{width:132px;margin:-52px 6px 0 auto}
@media(max-width:860px){#concept .grid{grid-template-columns:1fr;gap:48px}}
@media(max-width:600px){#concept .wire-mark{width:110px;margin:16px 8px 0 auto}}

/* ---------- interior ---------- */
#interior{background:var(--bg-3)}
#interior .lead{margin-bottom:56px}
#interior .lead .body{max-width:640px;margin-top:26px}
#interior .gal{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
#interior .gal .g1{grid-column:span 7}
#interior .gal .g2{grid-column:span 5}
#interior .gal .g3{grid-column:span 4}
#interior .gal .g4{grid-column:span 4}
#interior .gal .g5{grid-column:span 4}
#interior .gal .g6{grid-column:span 5}
#interior .gal .g7{grid-column:span 7}
#interior .gal img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
@media(max-width:860px){
  #interior .gal{grid-template-columns:1fr 1fr;gap:10px}
  #interior .gal .g2,#interior .gal .g3,#interior .gal .g4,
  #interior .gal .g5,#interior .gal .g6,#interior .gal .g7{grid-column:span 1}
  #interior .gal .g1{grid-column:span 2}}

/* ---------- selection ---------- */
#selection .sel-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px 56px}
#selection .big{aspect-ratio:4/3;object-fit:cover;width:100%}
#selection .main{grid-column:1;grid-row:1/3;align-self:center}
#selection .txt-head{grid-column:2;grid-row:1;align-self:end;padding-right:8px}
#selection .txt-head .h2{margin-bottom:0}
#selection .txt-body{grid-column:2;grid-row:2;align-self:start;padding-right:8px}
#selection .row{grid-column:1/-1;grid-row:3;margin-top:18px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
#selection .ss{position:relative;aspect-ratio:4/3;overflow:hidden}
#selection .ss img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.8s ease,transform 2.2s cubic-bezier(.22,1,.36,1)}
#selection .ss img.on{opacity:1}
#selection .note{display:block;margin-top:16px;
  font-size:12px;color:var(--dim);letter-spacing:.1em;line-height:1.9;text-wrap:pretty}
@media(max-width:860px){#selection .sel-grid{grid-template-columns:1fr;gap:30px}
  #selection .main,#selection .txt-head,#selection .txt-body{grid-column:auto;grid-row:auto;align-self:auto}
  #selection .txt-head,#selection .txt-body{padding-right:0}
  #selection .row{grid-column:auto;grid-row:auto;margin-top:0;grid-template-columns:1fr;gap:12px}
  #selection .ss{aspect-ratio:4/3}}

/* ---------- system ---------- */
#system{background:var(--bg-3)}
#system .sys-wrap{position:relative}
#system .wire-mark.sys{position:absolute;width:150px;bottom:-30px;left:calc(50% - 518px)}
#system .wire-mark.sys svg{filter:drop-shadow(0 0 5px rgba(244,235,227,.22))}
#system .wire-mark.sys path{stroke:var(--ivory);opacity:.88}
@media(max-width:1120px){
  #system .sys-wrap{display:flex;flex-direction:column}
  #system .wire-mark.sys{position:relative;order:2;width:96px;
    left:auto;bottom:auto;margin:12px 0 0 max(12px,50% - 344px)}
}
#system .card{max-width:640px;margin:0 auto;border:1px solid var(--line);
  padding:clamp(30px,6vw,58px);text-align:center;position:relative;background:var(--bg)}
#system .card::before{content:"";position:absolute;inset:7px;border:1px solid var(--line-soft);pointer-events:none}
#system .h2{text-align:center;padding-left:.14em;text-indent:0}
#system .eb2{text-align:center;padding-left:.5em}
#system table{width:100%;border-collapse:collapse;font-family:var(--serif-jp)}
#system td{padding:15px 6px;border-bottom:1px solid var(--line-soft);font-size:14.5px;
  letter-spacing:.12em;text-align:left;color:var(--muted)}
#system td+td{text-align:right;color:var(--ivory);font-family:var(--serif-lt);
  font-size:16px;letter-spacing:.06em;white-space:nowrap}
#system tr:last-child td{border-bottom:none}
#system .sml{font-size:12px;color:var(--dim);letter-spacing:.1em;padding-left:.1em;margin-top:22px;line-height:1.9;text-wrap:pretty}
@media(max-width:860px){
  #system .eb2{text-align:left;padding-left:0}
  #system .h2{text-align:left;padding-left:.5em;text-indent:-.5em}
}

/* ---------- access ---------- */
#access .wrap2{display:grid;grid-template-columns:1fr 1fr;gap:0 64px}
#access .acc-head{grid-column:1;grid-row:1;align-self:end}
#access .wrap2 dl{grid-column:1;grid-row:2;align-self:start}
#access .wrap2 .frame{grid-column:2;grid-row:1/3;align-self:center}
#access dl{margin:0;font-size:14px;display:grid;grid-template-columns:1fr 1fr;column-gap:36px}
#access dl .full{grid-column:1/-1}
#access dt{font-family:var(--serif-lt);font-size:10.5px;letter-spacing:.4em;color:var(--gold);
  text-transform:uppercase;margin-top:24px}
#access dd{margin:4px 0 0;color:var(--ivory);letter-spacing:.1em;font-family:var(--serif-jp)}
#access dd small{color:var(--dim);font-size:12px;display:block;text-wrap:pretty}
#access dd a:not(.map),footer .fi a{transition:color .3s}
#access dd a:not(.map):hover,footer .fi a:hover{color:var(--gold)}
#access dd .map{margin-top:16px}
#access .map{display:inline-block;margin-top:32px;border:1px solid var(--line);color:var(--gold);
  font-family:var(--serif-lt);font-size:12px;letter-spacing:.22em;padding:13px 28px;
  text-transform:uppercase;transition:all .3s}
#access .map:hover{background:var(--gold);color:var(--bg-3)}
@media(max-width:860px){
  #access .wrap2{grid-template-columns:1fr;gap:32px}
  #access .acc-head,#access .wrap2 dl,#access .wrap2 .frame{grid-column:auto;grid-row:auto;align-self:auto}
}

/* ---------- recruit ---------- */
#recruit{position:relative;background:var(--bg-3);overflow:hidden}
#recruit .rec-bg{position:absolute;left:0;right:0;top:-8%;bottom:-8%;z-index:0;
  background:url(../img/rabbits.jpg) no-repeat 76% 32%/cover;will-change:transform}
#recruit::before{content:"";position:absolute;inset:0;z-index:1;background:
  linear-gradient(90deg,rgba(14,6,8,.97) 0%,rgba(14,6,8,.88) 36%,rgba(14,6,8,.5) 64%,rgba(14,6,8,.22) 100%),
  linear-gradient(0deg,rgba(14,6,8,.92),rgba(14,6,8,.4) 14%,transparent 30%,transparent 72%,rgba(14,6,8,.55))}
#recruit .sec{position:relative;z-index:2}
#recruit .rec-txt{max-width:560px}
#recruit ul{list-style:none;padding:0;margin:26px 0 0;font-family:var(--serif-jp)}
#recruit li{padding:12px 0 12px 30px;font-size:14px;
  letter-spacing:.12em;color:var(--muted);position:relative}
#recruit li:not(:last-child){border-bottom:1px solid var(--line-soft)}
#recruit li::before{content:"✓";position:absolute;left:2px;top:50%;transform:translateY(-50%);
  color:var(--gold);font-size:13px}
#recruit .cta{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
#recruit .btn{border:1px solid var(--line);padding:13px 28px;font-size:12px;letter-spacing:.22em;
  color:var(--gold);font-family:var(--serif-lt);text-transform:uppercase;transition:all .3s}
#recruit .btn.main{background:var(--gold);color:var(--bg-3);border-color:var(--gold)}
#recruit .btn.main:hover{background:var(--gold-bright)}
#recruit .btn:not(.main):hover{background:var(--gold);color:var(--bg-3);border-color:var(--gold)}
@media(max-width:860px){
  #recruit .rec-bg{background-position:70% center}
  #recruit::before{background:rgba(14,6,8,.82)}
}

/* ---------- finale ---------- */
#finale{position:relative;height:72svh;min-height:520px;background:var(--bg-3);overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px}
#finale canvas{position:absolute;inset:0;width:100%;height:100%}
#finale .wire-mark.fin{position:relative;z-index:1;width:min(400px,76vw);margin:0}
#finale .fin-brand{position:relative;z-index:1;margin:0;text-align:center;
  opacity:0;transform:translateY(10px);transition:opacity 1.8s ease .1s,transform 1.8s ease .1s}
#finale .fin-brand .brand{font-size:30px;position:relative;left:-.85em}
#finale.in .fin-brand{opacity:1;transform:none}
#finale .msg{position:relative;text-align:center;pointer-events:none;margin-top:-4px}
#finale .msg p{font-family:var(--serif-jp);font-size:clamp(18px,3.6vw,26px);letter-spacing:.4em;
  padding-left:.4em;color:var(--ivory);margin:0;opacity:0;transform:translateY(14px);transition:all 2.2s ease .7s;
  text-wrap:balance}
#finale .msg small{display:block;margin-top:16px;font-size:11px;letter-spacing:.26em;padding-left:.26em;
  color:var(--dim);opacity:0;transition:opacity 2s ease 1.9s;font-family:var(--serif-jp)}
#finale.in .msg p{opacity:1;transform:none}
#finale.in .msg small{opacity:.9}

/* ---------- footer ---------- */
footer{background:var(--bg-3);border-top:1px solid var(--line-soft);
  padding:24px 26px 18px;text-align:center}
footer .fi{margin:0;font-size:12px;color:var(--dim);letter-spacing:.16em;padding-left:.16em;line-height:2;
  font-family:var(--serif-jp)}
footer .fi .seg{white-space:nowrap}
footer .fi .sep{margin:0 .7em;opacity:.55}
@media(max-width:600px){
  footer .fi .sep{display:none}
  footer .fi .seg{display:block}
}
footer .cp{margin-top:10px;font-family:var(--serif-lt);font-size:10.5px;letter-spacing:.24em;
  padding-left:.24em;color:var(--dim)}
footer .cp a{color:inherit;text-decoration:underline;text-underline-offset:3px;transition:color .3s}
footer .cp a:hover{color:var(--gold)}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;transition-delay:0s!important;animation:none!important}
  .rv,.hero .eb,.hero .brand-hero,.hero .tg,.hero .info,.hero .ph.on{opacity:1;transform:none}
}