/* =========================================================
   龍宮殿本館「歴史ページ」LP
   Palette & type tokens derived from Figma design
   ========================================================= */
:root{
  --paper:        #f4efe5;   /* main warm page background */
  --paper-soft:   #f1ebe1;   /* the story band */
  --paper-warm:   #efe9dd;   /* heritage band */
  --paper-light:  #faf7f1;   /* today band */
  --greige:       #cdc3b0;   /* history band */
  --img-bed:      #efe8dd;

  --ink:    #2a2420;         /* headings */
  --body:   #5b5349;         /* body copy */
  --muted:  #928979;         /* sub captions */

  --gold:        #a98a4e;    /* primary accent */
  --gold-light:  #c7ac76;    /* accent on dark / hairlines */
  --gold-btn:    #cfa95d;    /* gold CTA */
  --terra:       #bc5937;    /* terracotta CTA */

  --footer-bg:   #c9b084;
  --footer-dark: #1f1b16;

  --serif: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --latin: "Cormorant Garamond", "Shippori Mincho", serif;

  --maxw: 1100px;
  --ease: cubic-bezier(.16,1,.3,1);
  --header-h: 84px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--serif);
  color:var(--body);
  background:var(--paper);
  line-height:1.8;
  letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,p{ margin:0; }

.max375, .max425 , .max560 { display: none; }

.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:32px; }
.container--narrow{max-width: 1164px;}
.container--wide{ max-width:1360px; }

/* ---------- shared section heads ---------- */
.section{ position:relative; }
.sec-head{ margin-bottom:0; }
.sec-head--center{ text-align:center; display:flex; flex-direction:column; align-items:center; }
.sec-head--left{ text-align:left; }

.eyebrow{
  font-family:var(--latin);
  font-weight:500;
  text-transform:uppercase;
  color:var(--gold);
  font-size:clamp(26px,3vw,40px);
  letter-spacing:.18em;
  line-height:1;
}
.eyebrow--gold{ color:var(--gold-light); }

.sec-title{
  font-family:var(--serif);
  font-weight:600;
  color:var(--ink);
  font-size:clamp(26px,3.4vw,32px);
  letter-spacing:.16em;
  line-height:1.7;
  margin-top:1.1em;
}
.sec-title--light{ color:#fff; }

.sec-sub{
  color:var(--muted);
  font-size:clamp(16px,2vw,21px);
  letter-spacing:.14em;
  margin-top:1.1em;
}

.rule-center{ display:block; width:50px; height:1px; background:var(--gold); margin:26px auto 0; }
.rule-left{ display:block; width:62px; height:1px; background:rgba(42,36,32,.28); margin:34px 0 0; }

/* ===================== HEADER ===================== */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  background:rgba(246,242,235,.92);
  backdrop-filter:saturate(140%) blur(8px);
  -webkit-backdrop-filter:saturate(140%) blur(8px);
  box-shadow:0 1px 0 rgba(42,36,32,.14);
  transition:transform .5s var(--ease);
}
.header-inner{
  max-width: 1480px;
  margin-inline:auto;
  min-height:var(--header-h);
  display:flex;
  align-items:center;
  gap:48px;
  padding:14px 40px;
}
.header-logo{ transition:opacity .2s; }
.header-logo:hover{ opacity:.7; }
.header-logo img{ height:54px; width:auto; }
.main-nav{display:flex;align-items:center;gap: 32px;margin-left:auto;}
.nav-links{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap:0;
}
.nav-links li{ position:relative; }
.nav-links li + li::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:1px;
  height:16px;
  background: #2A2420;
}
.nav-links a{
  display:block; padding:6px 16px;
  font-family:var(--latin); font-weight:500; text-transform:uppercase;
  color:var(--gold); font-size:15px; letter-spacing:.13em; white-space:nowrap;
  transition:color .3s, opacity .3s;
}
.nav-links a:hover{ opacity:.62; }
.nav-cta{ display:flex; gap:14px; }
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:var(--serif);
  font-weight:600;
  color:#fff;
  font-size: 15px;
  letter-spacing:.16em;
  padding:10px 24px;
  white-space:nowrap;
  transition:transform .25s var(--ease), filter .25s;
}
.btn:active{ transform:translateY(1px); }
.btn-gold{background:var(--gold-btn);font-size: 16px;}
.btn-terra{background:var(--terra);font-size: 18px;}
.btn:hover{ filter:brightness(1.06); }

.nav-toggle{ display:none; }

/* ===================== HERO ===================== */
.hero{
  position:relative; min-height:min(92vh,860px);
  display:flex; align-items:flex-end;
  overflow:hidden;
}
.hero-bg{ position:absolute; inset:-8% 0; z-index:0; will-change:transform; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; object-position: 60%;}
.hero-overlay{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(to bottom, rgba(0,0,0,0) 11%, rgba(0,0,0,.5) 100%);
}
.hero-content{
  position:relative; z-index:2;
  max-width:var(--maxw); margin-inline:auto; width:100%;
  padding:0 32px 80px;
}
.hero-title{
  font-weight:600; color:#fff;
  font-size:clamp(34px,5vw,48px); line-height:1.7; letter-spacing:.12em;
}
.hero-title span{ display:block; }
.hero-lead{
  color:rgba(255,255,255,.94);
  font-weight:500; font-size:clamp(18px,2.4vw,24px);
  letter-spacing:.12em; margin-top:30px;
}
.hero-sub{
  color:rgba(255,255,255,.8);
  font-size:clamp(15px,1.8vw,20px); line-height:2.3; letter-spacing:.04em;
  margin-top:24px;
}

/* ===================== OVERVIEW ===================== */
.overview{background:var(--paper);padding: 216px 0;}

#overview .container {
    max-width: 1464px;
}
.overview .sec-head{ padding-left:clamp(0px,9vw,150px); }
.ov-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:43px;
  max-width:1400px; margin:92px auto 0;
}
.ov-img{ background:var(--img-bed); aspect-ratio:427/320; overflow:hidden; }
.ov-img img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.ov-card:hover .ov-img img{ transform:scale(1.05); }
.ov-card h3{
  font-weight:600; color:var(--ink);
  font-size:clamp(24px,2.6vw,32px); letter-spacing:.1em; margin-top:38px;
}
.ov-card p{ font-size:16px; color:var(--body); margin-top:20px; }

/* ===================== HISTORY ===================== */
.history{background:var(--greige);padding: 216px 0;}
#history .container { max-width: 1664px; }
.timeline{ margin-top:78px; }
.timeline-track{ position:relative; height:30px; margin-bottom:34px; }
.timeline-line{
  position:absolute; left:0; right:0; top:50%; height:1px;
  background:rgba(42,36,32,.32); transform:translateY(-50%);
}
.timeline-progress{
  position:absolute; left:0; top:50%; height:1px; width:0;
  background:var(--ink); transform:translateY(-50%); transform-origin:left;
}
.dot{
  position:absolute;
  top:50%;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--ink);
  transform:translate(-50%,-50%) scale(.2);
  opacity:0;
  left:calc((100% - 5 * 32px) / 6 * var(--i) + 32px * var(--i));
  transition:transform .5s var(--ease), opacity .5s;
}
.timeline.in .dot{transform: translate(-50%,-50%) scale(1);opacity:1;}
.timeline.in .dot{ transition-delay:calc(var(--i) * .12s + .2s); }
.timeline-items{
  display:grid; grid-template-columns:repeat(6,1fr); gap:32px;
}
.tl-year{
  font-family:var(--latin); font-weight:400; color:var(--ink);
  font-size:34px; letter-spacing:.04em; display:block;
}
.tl-item h3{
  font-weight:600; color:var(--ink); font-size:18px; line-height:1.45;
  letter-spacing:.05em; margin-top:14px;
}
.tl-item p{ font-size:13.5px; line-height:1.95; color:#4f483e; margin-top:18px; }

/* ===================== THE STORY ===================== */
.story{background:var(--paper-soft);padding: 216px 0;}
.story .sec-head{ margin-bottom:24px; }
.story-row{
  display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:flex-start;
  padding-top:96px;
}
.story-fig{ margin:0; aspect-ratio:514/327; overflow:hidden; background:var(--img-bed); }
.story-fig img{ width:100%; height:100%; object-fit:cover; }
.story-text{ padding-top:6px; }
.story-label{ display:flex; align-items:center; gap:13px; margin-bottom:22px; }
.story-label .num{
  font-family:var(--latin); font-size:20px; letter-spacing:.17em; color:var(--ink);
}
.story-label .num--ja{ font-family:var(--serif); font-weight:500; font-size:16px; letter-spacing:.21em; }
.story-label .dash{ width:33px; height:1px; background:var(--gold); opacity:.6; }
.story-text p + p{ margin-top:1.7em; }
.story-text > p:not(.story-label){ font-size:16px; color:var(--ink); line-height:1.95; }

/* ===================== ARCHITECTURE ===================== */
.architecture{
  position:relative;
  overflow:hidden;
  padding: 216px 0;
  color:#fff;
}
.arch-bg{ position:absolute; inset:-8% 0; z-index:0; will-change:transform; }
.arch-bg img{ width:100%; height:100%; object-fit:cover; }
.arch-overlay{ position:absolute; inset:0; z-index:1; background:rgba(30,24,18,.6); }
.arch-content{ position:relative; z-index:2; }
.arch-body{
  color:rgba(244,238,228,.74); font-size:16px; line-height:1.9;
  letter-spacing:.05em; margin-top:40px;
}
.arch-marquee{
  position:relative; z-index:2; margin-top:54px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  overflow:hidden;
}
.arch-track{ display:flex; gap:24px; width:max-content; will-change:transform; }
.arch-track figure{ margin:0; width:360px; height:360px; flex:0 0 auto; overflow:hidden; }
.arch-track img{ width:100%; height:100%; object-fit:cover; }

/* ===================== HERITAGE ===================== */
.heritage{background:var(--paper-warm);padding: 216px 0 376px;}

#heritage .container {
    max-width: 1264px;
}
.heritage-grid{
  display:grid;
  grid-template-columns:minmax(0,647px) minmax(0,1fr);
  gap:60px;
  align-items:start;
  max-width:1200px;
  margin-inline:auto;
  position: relative;
}
.heritage-text .sec-title{ margin-top:.9em; }
.heritage-intro{
  font-size:16px; color:var(--ink); line-height:1.9; letter-spacing:.05em;
  margin-top:34px; margin-bottom:8px;
}
.heritage-list{ margin:0; }
.hl-row{ display:flex; gap:24px; align-items:baseline; padding:24px 0; border-top:1px solid var(--gold-light); }
.hl-row:last-child{ border-bottom:1px solid var(--gold-light); }
.hl-row--plain{ border:0 !important; padding-top:38px; padding-bottom:0; }
.hl-row dt{
  font-family:var(--latin); color:var(--gold); font-size:20px; letter-spacing:.08em;
  flex:0 0 auto; min-width:44px;
}
.hl-row--plain dt{ font-family:var(--serif); font-size:16px; }
.hl-row dd{ margin:0; font-size:16px; color:var(--body); line-height:1.7; }

.heritage-collage{position: absolute;min-height:820px;max-width: 680px;left: 0;transform: translateX(100%);}
.heritage-collage .hc{margin:0;position:absolute;overflow:hidden;box-shadow:0 18px 50px rgba(42,36,32,.18);}
.heritage-collage .hc.hc-2 { position: relative;}
.heritage-collage img{width:100%;height:100%;object-fit:cover;}
.hc-1{ top:26px; right:0; width:94%; aspect-ratio:619/402; z-index:1; }
.hc-2{ top: 475px;left:0;width: 51%;aspect-ratio:346/261;z-index:2;}
.hc-3{top: 500px;right:0;width: 44%;aspect-ratio:297/331;z-index:3;}

/* ===================== DIVIDER ===================== */
.divider{ position:relative; height:clamp(360px,42vw,620px); overflow:hidden; }
.divider-bg{ position:absolute; inset:-12% 0; will-change:transform; }
.divider-bg img{ width:100%; height:100%; object-fit:cover; }

/* ===================== TODAY ===================== */
.today{background:var(--paper-light);padding: 216px 0;}
.today .sec-sub{ font-size:16px; color:var(--body); letter-spacing:.14em; line-height:1.8; }
.today-marquee{
  position:relative; margin-top:54px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  overflow:hidden;
}
.today-track{ display:flex; gap:24px; width:max-content; will-change:transform; }
.today-track figure{ margin:0; width:360px; height:360px; flex:0 0 auto; overflow:hidden; background:var(--img-bed); }
.today-track img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.today-track figure:hover img{ transform:scale(1.06); }
.today-closing{ text-align:center; margin-top:64px; }
.today-lead{ font-size:20px; color:var(--ink); line-height:1.8; letter-spacing:.1em; }
.today-note{ font-size:16px; color:var(--body); line-height:1.8; letter-spacing:.1em; margin-top:30px; }

/* ===================== CTA ===================== */
.cta{position:relative;padding: 216px 0;min-height:600px;display:flex;align-items:center;overflow:hidden;color:#fff;}
.cta-bg{ position:absolute; inset:-8% 0; z-index:0; will-change:transform; }
.cta-bg img{ width:100%; height:100%; object-fit:cover; }
.cta-overlay{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(to bottom, rgba(20,16,12,.72), rgba(20,16,12,.55) 50%, rgba(20,16,12,.8));
}
.cta-content{ position:relative; z-index:2; text-align:center; display:flex; flex-direction:column; align-items:center; }
.cta-content .sec-title{margin-top: 0.9em;}
.cta-buttons{display:flex;gap:19px;margin-top: 80px;flex-wrap:wrap;justify-content:center;}
.cta-btn{
  font-family:var(--serif); font-weight:400; color:#fff;
  font-size:20px; letter-spacing:.18em; padding:26px 40px; min-width:280px; text-align:center;
  transition:transform .25s var(--ease), filter .25s, background .25s;
}
.cta-btn:active{ transform:translateY(1px); }
.cta-btn--gold{ background:var(--gold-btn); border:1px solid var(--gold); }
.cta-btn--terra{ background:var(--terra); }
.cta-btn--ghost{ border:1px solid rgba(255,255,255,.55); }
.cta-btn--gold:hover,.cta-btn--terra:hover{ filter:brightness(1.07); }
.cta-btn--ghost:hover{ background:rgba(255,255,255,.1); }

/* ===================== FOOTER ===================== */
.site-footer{ background:var(--footer-bg); }
.footer-main{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:80px 24px 64px;
}
.footer-logo{ width:300px; max-width:80%; height:auto; }
.footer-name{ font-weight:500; color:#333; font-size:24px; letter-spacing:.05em; margin-top:32px; }
.footer-addr{ font-weight:500; color:#333; font-size:18px; line-height:1.6; letter-spacing:.04em; margin-top:24px; }
.footer-ig{ margin-top:40px; display:inline-block; transition:opacity .3s; }
.footer-ig:hover{ opacity:.7; }
.footer-ig img{ width:42px; height:42px; }
.footer-brands{
  display:flex; align-items:center; gap:16px; color:#333; font-weight:500;
  font-size:18px; letter-spacing:.04em; margin-top:36px; flex-wrap:wrap; justify-content:center;
}
.footer-brands a{ color:inherit; text-decoration:none; transition:opacity .2s; }
.footer-brands a:hover{ opacity:.7; }
.footer-brands .sep{ width:1px; height:24px; background:rgba(51,51,51,.5); }
.footer-copy{ background:var(--footer-dark); text-align:center; padding:24px; }
.footer-copy p{ color:#f7f7f7; font-family:var(--latin); font-size:13px; letter-spacing:.02em; }

/* ===================== BACK TO TOP ===================== */
.to-top{
  position:fixed; right:34px; bottom:34px; z-index:90;
  width:56px; height:56px; display:grid; place-items:center;
  color:#fff; background:rgba(42,36,32,.62); border:1px solid rgba(255,255,255,.25);
  backdrop-filter:blur(4px);
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .4s, transform .4s, background .3s;
}
.to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
.to-top:hover{ background:var(--gold); }

/* ===================== REVEAL ANIMATION ===================== */
.reveal-lines span{ display:block; }
.js .reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.in{ opacity:1; transform:none; }
.js .reveal-lines span{ opacity:0; transform:translateY(110%); }
.js .reveal-lines.in span{ animation:lineUp .95s var(--ease) forwards; }
.reveal-lines.in span:nth-child(2){ animation-delay:.12s; }
@keyframes lineUp{ to{ opacity:1; transform:none; } }
.hero-title{ overflow:hidden; }

/* ===================== INTRO ===================== */
.intro{ display:none; }                    /* hidden without JS so content is never trapped */
.js .intro{
  display:flex; align-items:center; justify-content:center;
  position:fixed; inset:0; z-index:9999;
  background:var(--paper);
  will-change:opacity, transform;
}
.intro-inner{
  display:flex; flex-direction:column; align-items:center; gap:30px;
  opacity:0; transform:translateY(16px) scale(.98);
}
.intro-emblem{ width:min(440px,74vw); height:auto; }
.intro-rule{ display:block; width:0; height:1px; background:var(--gold); }

.intro--in .intro-inner{ animation:introIn 1.05s var(--ease) forwards; }
.intro--in .intro-rule{ animation:introRule .9s var(--ease) .5s forwards; }
.intro--out{ animation:introOut .95s var(--ease) forwards; pointer-events:none; }

@keyframes introIn{ to{ opacity:1; transform:none; } }
@keyframes introRule{ to{ width:120px; } }
@keyframes introOut{ to{ opacity:0; transform:translateY(-3%); } }

/* hold the page still + keep the hero hidden behind the curtain so it animates
   in only once the curtain lifts */
html.intro-running{ overflow:hidden; }
.intro-running .hero .reveal{ opacity:0 !important; transform:translateY(28px) !important; }
.intro-running .hero-title.reveal-lines span{
  animation:none !important; opacity:0 !important; transform:translateY(110%) !important;
}

/* ===================== RESPONSIVE ===================== */
@media (max-width:1600px){
  .heritage-collage {position: relative; transform: unset;}
}

@media (max-width:1280px){
  .heritage-collage {display: flex; flex-direction: column; gap: 12px;}
  .heritage-collage .hc {position: unset; width: 100%;}
  .heritage-collage .hc.hc-2 {position: unset; }
  .min1280 { display: none; }
}

@media (max-width:1100px){
  .nav-cta{ display:none; }
  .main-nav{ gap:0; }
}
@media (max-width:980px){
  :root{ --header-h:64px; }
  .header-inner{ padding:12px 22px; gap:20px; }
  .header-logo img{ height:42px; }
  .main-nav{ display:none; position:fixed; inset:64px 0 auto 0; flex-direction:column;
    background:rgba(246,242,235,.98); padding:18px 22px 26px; gap:6px; box-shadow:0 14px 30px rgba(42,36,32,.16); }
  .main-nav.open{ display:flex; }
  .nav-links{ flex-direction:column; align-items:stretch; width:100%; }
  .nav-links li + li::before{ display:none; }
  .nav-links a{ padding:13px 4px; border-bottom:1px solid rgba(169,138,78,.18); font-size:16px; }
  .nav-cta{ display:flex; width:100%; margin-top:14px; }
  .nav-cta .btn{ flex:1; }
  .nav-toggle{ display:flex; flex-direction:column; gap:5px; margin-left:auto;
    width:42px; height:42px; align-items:center; justify-content:center; background:none; border:0; cursor:pointer; }
  .nav-toggle span{ width:24px; height:1.5px; background:var(--ink); transition:transform .3s, opacity .3s; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

  .section{ }
  .overview,.history,.story,.heritage,.today{ padding:96px 0; }
  .overview .sec-head{ padding-left:0; text-align:center; align-items:center; }
  .sec-head--left{ text-align:center; }

  /* history -> vertical timeline */
  .timeline{ margin-top:48px; }
  .timeline-track{ display:none; }
  .timeline-items{ display:block; position:relative; padding-left:28px; gap:0; }
  .timeline-items::before{
    content:""; position:absolute; left:4px; top:12px; bottom:12px; width:1px;
    background:rgba(42,36,32,.32);
  }
  .tl-item{ position:relative; }
  .tl-item + .tl-item{ margin-top:40px; }
  .tl-item::before{
    content:""; position:absolute; left:-28px; top:15px;
    width:9px; height:9px; border-radius:50%; background:var(--ink);
  }
  .tl-year{ font-size:30px; }
  .tl-item h3 br{ display:none; }

  .story-row,.story-row--rev{ grid-template-columns:1fr; gap:28px; padding-top:64px; }
  .story-row--rev .story-fig{ order:-1; }

  .heritage-grid{ grid-template-columns:1fr; gap:48px; }
  .heritage-collage{ min-height:0; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  .heritage-collage .hc{ position:static; width:auto !important; box-shadow:0 12px 30px rgba(42,36,32,.16); }
  .hc-1{ grid-column:1 / -1; }

  .arch-track figure,
  .today-track figure{ width:260px; height:260px; }
}
@media (max-width:768px){
  .ov-grid {gap: 20px;}
}
@media (max-width:560px){
  .max560 {display: block;}
  .container{ padding-inline:16px; }
  .hero-content{ padding:0 22px 56px; }
  .ov-grid { grid-template-columns: 1fr; gap: 40px;}
  .ov-card h3 {margin-top: 8px;}
  .ov-card p {margin-top: 12px;}
  .today-track figure{ width:220px; height:220px; }
  .cta-btn{ min-width:0; width:100%; font-size:18px; padding:22px; }
  .cta-buttons{ width:100%; }
  .footer-brands{ flex-direction:column; gap:10px; }
  .footer-brands .sep{ display:none; }
  .to-top{ right:18px; bottom:18px; width:48px; height:48px; }
}

@media (max-width:425px){
  .max425 {display: block;}
}

@media (max-width:375px){
  .max375 {display: block;}
}

/* ===================== REDUCED MOTION ===================== */
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal-lines span{ opacity:1 !important; transform:none !important; animation:none !important; }
  .dot{ opacity:1 !important; transform:translate(-50%,-50%) scale(1) !important; }
  .intro{ display:none !important; }
  *{ scroll-behavior:auto !important; }
}