/* ═══════════════════════════════════════════
   KYOTO T-PLAZA — Shared Premium Styles
   ═══════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --ink:      #141414;
  --ash:      #2b2b2b;
  --warm:     #FAF9F6; /* Soft Washi off-white */
  --cream:    #F1ECE3; /* Warm champagne cream */
  --gold:     #b29158; /* Premium gold */
  --gold-lt:  #d0b07a;
  --gold-dk:  #8f713b;
  --muted:    #756d61;
  --border:   rgba(178,145,88,.18);
  --nav-h:    80px;
}

html { 
  scroll-behavior: smooth; 
  background-color: var(--warm);
}

body {
  background: var(--warm);
  color: var(--ink);
  font-family: 'Noto Serif JP', serif;
  font-weight: 300;
  line-height: 1.95;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ── SCROLL ANIMATIONS ──────────────────── */
.scroll-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1), transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ── NAV ────────────────────────────────── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 4.5rem;
  transition: background .4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .4s cubic-bezier(0.16, 1, 0.3, 1), height .4s;
  border-bottom: 1px solid transparent;
}
nav.scrolled {
  height: 72px;
  background: rgba(250,249,246,.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 4px 30px rgba(0,0,0,0.02);
  border-bottom: 1px solid var(--border);
}
nav.nav-light { 
  background: rgba(250,249,246,.95); 
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border); 
}
nav.nav-light .nav-logo-main { color: var(--ink); }
nav.nav-light .nav-logo-sub  { color: var(--muted); }
nav.nav-light .nav-links a   { color: var(--ash); }
nav.nav-light .hamburger span { background: var(--ink); }

.nav-logo {
  text-decoration: none; display: flex; flex-direction: column;
  line-height: 1.25; z-index: 210;
}
.nav-logo-main {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem; font-weight: 400; letter-spacing: .25em; transition: color .3s;
  color: var(--ink);
}
.nav-logo-sub {
  font-size: .58rem; letter-spacing: .45em;
  font-family: 'Cormorant Garamond', serif; font-style: italic; transition: color .3s;
  color: var(--muted);
}
nav:not(.scrolled):not(.nav-light) .nav-logo-main { color: #FAF9F6; }
nav:not(.scrolled):not(.nav-light) .nav-logo-sub  { color: rgba(250,249,246,.45); }
nav.scrolled .nav-logo-main { color: var(--ink); }
nav.scrolled .nav-logo-sub  { color: var(--muted); }
.menu-open .nav-logo-main,
.menu-open .nav-logo-sub { color: #FAF9F6 !important; }

.nav-links { display: flex; gap: 2.5rem; list-style: none; align-items: center; }
.nav-links a {
  font-size: .7rem; letter-spacing: .22em;
  text-decoration: none; text-transform: uppercase; transition: color .3s;
  position: relative;
  padding: 6px 0;
}
nav:not(.scrolled):not(.nav-light) .nav-links a { color: rgba(250,249,246,.75); }
nav.scrolled .nav-links a { color: var(--ash); }

/* Underline Animation on Hover */
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-links a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}
.nav-links a:hover { color: var(--gold) !important; }

/* ── DROPDOWN ── */
.nav-links li { position: relative; }
.nav-dropdown {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  padding-top: 1.2rem;
  min-width: 156px;
  opacity: 0; pointer-events: none;
  transition: opacity .22s cubic-bezier(0.16, 1, 0.3, 1), transform .22s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 300;
}
.nav-dropdown-inner {
  background: rgba(250,249,246,.98);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  box-shadow: 0 10px 30px rgba(20,20,20,.05);
  position: relative;
}
.nav-links li:hover .nav-dropdown {
  opacity: 1; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown-inner::before {
  content: ''; position: absolute; top: -5px; left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 8px; height: 8px;
  background: var(--warm);
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
}
.nav-dropdown-inner a {
  display: flex; align-items: center; gap: .6rem;
  padding: .9rem 1.3rem;
  font-size: .62rem !important;
  letter-spacing: .22em !important;
  color: var(--ash) !important;
  text-decoration: none;
  text-transform: none !important;
  border-bottom: 1px solid rgba(178,145,88,.1);
  white-space: nowrap;
  transition: background .2s, color .2s;
}
.nav-dropdown-inner a::after { display: none !important; } /* Disable nav line animation for dropdown */
.nav-dropdown-inner a:last-child { border-bottom: none; }
.nav-dropdown-inner a:hover { background: var(--cream); color: var(--gold) !important; }
.nav-dd-dot {
  display: inline-block; width: 5px; height: 5px;
  border-radius: 50%; flex-shrink: 0;
}
.nav-dd-dot.exp { background: var(--gold); }
.nav-dd-dot.ev  { background: var(--ink); }

/* ── LANG TOGGLE ── */
.lang-toggle {
  display: flex; align-items: center; gap: 0;
  font-family: 'Cormorant Garamond', serif;
  margin-right: .5rem; z-index: 210;
}
.lang-btn {
  background: none; border: none; cursor: pointer;
  font-family: 'Cormorant Garamond', serif;
  font-size: .75rem; letter-spacing: 0;
  padding: .3rem .25rem; transition: color .2s;
  line-height: 1;
}
.lang-sep {
  font-size: .7rem; line-height: 1; pointer-events: none;
  margin: 0;
}
nav:not(.scrolled):not(.nav-light) .lang-btn      { color: rgba(250,249,246,.55); }
nav:not(.scrolled):not(.nav-light) .lang-btn.active{ color: var(--gold-lt); }
nav:not(.scrolled):not(.nav-light) .lang-sep       { color: rgba(250,249,246,.22); }
nav.scrolled .lang-btn       { color: var(--muted); }
nav.scrolled .lang-btn.active{ color: var(--gold); }
nav.scrolled .lang-sep       { color: var(--border); }
nav.nav-light .lang-btn       { color: var(--muted); }
nav.nav-light .lang-btn.active{ color: var(--gold); }
nav.nav-light .lang-sep       { color: var(--border); }
.menu-open .lang-btn        { color: rgba(250,249,246,.4) !important; }
.menu-open .lang-btn.active { color: var(--gold-lt) !important; }
.menu-open .lang-sep        { color: rgba(250,249,246,.18) !important; }

/* ── NAV RIGHT WRAPPER ── */
.nav-right {
  display: flex;
  align-items: center;
  gap: .6rem;
  z-index: 210;
}
.nav-right-arrow {
  font-family: 'Cormorant Garamond', serif;
  font-size: .85rem;
  color: var(--muted);
  opacity: .55;
  transition: color .3s;
  pointer-events: none;
  margin-top: -1px;
}
nav:not(.scrolled):not(.nav-light) .nav-right-arrow {
  color: rgba(250, 249, 246, .45);
}

/* Hamburger Menu */
.hamburger {
  display: flex; flex-direction: column; gap: 5px;
  cursor: pointer; z-index: 210; padding: 6px;
  background: none; border: none;
}
.hamburger span {
  display: block; width: 24px; height: 1.5px;
  background: #FAF9F6;
  transition: transform .35s, opacity .25s, background .3s;
  transform-origin: center;
}
nav.scrolled .hamburger span   { background: var(--ink); }
nav.nav-light .hamburger span  { background: var(--ink); }
.menu-open .hamburger span     { background: #FAF9F6 !important; }
.menu-open .hamburger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu-open .hamburger span:nth-child(2) { opacity: 0; }
.menu-open .hamburger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Navigation Overlay for Mobile */
.nav-overlay {
  position: fixed; inset: 0; background: var(--ink); z-index: 190;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: calc(var(--nav-h) + 2rem) 3rem 3rem;
  opacity: 0; pointer-events: none; transition: opacity .4s cubic-bezier(0.16, 1, 0.3, 1);
}
.menu-open .nav-overlay { opacity: 1; pointer-events: auto; }
.nav-overlay ul { list-style: none; width: 100%; }
.nav-overlay ul li { border-bottom: 1px solid rgba(178,145,88,.1); }
.nav-overlay ul li a {
  display: block; padding: 1.2rem 0;
  font-size: 1.15rem; letter-spacing: .2em;
  color: rgba(250,249,246,.85); text-decoration: none; transition: color .2s;
}
.nav-overlay ul li a:hover { color: var(--gold-lt); }
.nav-overlay ul li a span {
  display: block; font-size: .58rem; letter-spacing: .45em;
  color: rgba(178,145,88,.45); font-family: 'Cormorant Garamond', serif;
  font-style: italic; margin-top: .15rem; text-transform: uppercase;
}
.nav-overlay-foot {
  margin-top: 4rem; font-size: .65rem; letter-spacing: .35em;
  color: rgba(178,145,88,.3); font-family: 'Cormorant Garamond', serif;
}

/* ── SECTION COMMON ─────────────────────── */
.sec { padding: 9rem 4.5rem; position: relative; }
.sec-inner { max-width: 1160px; margin: 0 auto; }
.sec-label {
  font-family: 'Cormorant Garamond', serif;
  font-size: .65rem; letter-spacing: .6em; color: var(--gold);
  text-transform: uppercase; display: block; margin-bottom: 1rem;
}
.sec-title {
  font-size: clamp(1.6rem, 3vw, 2.6rem); font-weight: 200;
  letter-spacing: .12em; line-height: 1.35; margin-bottom: .6rem;
}
.sec-title-en {
  font-family: 'Cormorant Garamond', serif; font-size: .95rem;
  font-style: italic; color: var(--muted); letter-spacing: .2em;
  display: block; margin-bottom: 2.2rem;
}
.divider { width: 48px; height: 1px; background: var(--gold); margin-bottom: 3.5rem; }
.sec-more {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: 'Cormorant Garamond', serif;
  font-size: .75rem; letter-spacing: .35em; color: var(--gold);
  text-decoration: none; text-transform: uppercase; transition: gap .25s cubic-bezier(0.16, 1, 0.3, 1), color .25s;
}
.sec-more::after { content: '→'; font-size: .9em; }
.sec-more:hover { gap: 1.2rem; color: var(--gold-dk); }

/* ── DETAIL PAGE HERO ────────────────── */
.page-hero {
  background: var(--ink); padding: 12rem 4.5rem 7rem;
  position: relative; overflow: hidden;
}
.page-hero-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 60% at 60% 50%, rgba(178,145,88,.08) 0%, transparent 70%);
}
.page-hero-kanji {
  position: absolute; right: 8%; top: 50%; transform: translateY(-50%);
  font-family: 'Noto Serif JP', serif; font-size: clamp(8rem, 18vw, 15rem);
  font-weight: 200; color: rgba(178,145,88,.18); line-height: 1; pointer-events: none;
  user-select: none;
}
.page-hero-content { position: relative; max-width: 760px; z-index: 3; }
.page-hero-back {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: 'Cormorant Garamond', serif; font-size: .68rem;
  letter-spacing: .35em; color: rgba(178,145,88,.55); text-decoration: none;
  text-transform: uppercase; margin-bottom: 2.8rem;
  transition: color .25s, gap .25s;
}
.page-hero-back::before { content: '←'; }
.page-hero-back:hover { color: var(--gold-lt); gap: .8rem; }
.page-hero-category {
  font-family: 'Cormorant Garamond', serif; font-size: .65rem;
  letter-spacing: .6em; color: var(--gold-lt); text-transform: uppercase;
  display: block; margin-bottom: 1.2rem;
}
.page-hero-title {
  font-size: clamp(2.2rem, 5.5vw, 3.8rem); font-weight: 200;
  letter-spacing: .12em; line-height: 1.25; color: var(--warm); margin-bottom: .8rem;
}
.page-hero-title-en {
  font-family: 'Cormorant Garamond', serif; font-size: 1.05rem;
  font-style: italic; color: rgba(250,249,246,.35); letter-spacing: .25em;
}

/* ── DETAIL CONTENT ─────────────────────── */
.page-content { padding: 8rem 4.5rem; background: var(--warm); }
.page-content .sec-inner { display: grid; grid-template-columns: 2fr 1fr; gap: 7rem; }
.page-body { font-size: .95rem; line-height: 2.6; color: var(--ash); }
.page-body p { margin-bottom: 1.8rem; }
.page-body h3 {
  font-size: 1.05rem; font-weight: 400; letter-spacing: .12em;
  margin: 3rem 0 1.2rem; color: var(--ink);
  position: relative;
  padding-left: 1rem;
}
.page-body h3::before {
  content: ''; position: absolute; left: 0; top: 0.55rem; bottom: 0.55rem; width: 2px; background: var(--gold);
}
.page-sidebar {}
.sidebar-box {
  border: 1px solid var(--border); padding: 2.2rem;
  background: var(--cream); margin-bottom: 2rem;
}
.sidebar-box-title {
  font-family: 'Cormorant Garamond', serif; font-size: .65rem;
  letter-spacing: .5em; color: var(--gold); text-transform: uppercase;
  display: block; margin-bottom: 1.5rem;
  padding-bottom: .8rem; border-bottom: 1px solid var(--border);
}
.sidebar-list { list-style: none; }
.sidebar-list li {
  font-size: .83rem; color: var(--ash); padding: .6rem 0;
  border-bottom: 1px solid rgba(178,145,88,.12);
  display: flex; align-items: flex-start; gap: .7rem;
}
.sidebar-list li::before { content: '—'; color: var(--gold); flex-shrink: 0; margin-top: .1rem; }
.sidebar-info { font-size: .8rem; color: var(--ash); }
.sidebar-info dt {
  font-family: 'Cormorant Garamond', serif; font-size: .6rem;
  letter-spacing: .4em; color: var(--gold); text-transform: uppercase; margin-top: 1.2rem; margin-bottom: .2rem;
}
.sidebar-info dd { border-bottom: 1px solid rgba(178,145,88,.12); padding-bottom: .6rem; }
.page-cta {
  margin-top: 3.5rem; padding: 2.8rem;
  background: var(--ink); text-align: center;
}
.page-cta p { font-size: .85rem; color: rgba(250,249,246,.5); margin-bottom: 1.8rem; line-height: 2.1; }
.btn-ghost-dark {
  display: inline-block; padding: .9rem 2.5rem;
  border: 1px solid rgba(178,145,88,.4); color: var(--gold-lt);
  font-family: 'Cormorant Garamond', serif;
  font-size: .68rem; letter-spacing: .45em; text-transform: uppercase;
  text-decoration: none; transition: all .3s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-ghost-dark:hover { background: rgba(178,145,88,.1); border-color: var(--gold-lt); color: #FFF; }

/* ── RELATED ────────────────────────────── */
.related { padding: 6rem 4.5rem; background: var(--cream); }
.related-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 1.8rem; margin-top: 3rem;
}
.rel-card {
  background: var(--warm); border: 1px solid var(--border);
  text-decoration: none; color: inherit; padding: 2.5rem 2.2rem;
  display: block; transition: box-shadow .3s cubic-bezier(0.16, 1, 0.3, 1), transform .3s;
  position: relative;
}
.rel-card:hover { 
  box-shadow: 0 10px 30px rgba(20,20,20,.05);
  transform: translateY(-2px);
}
.rel-card-cat {
  font-family: 'Cormorant Garamond', serif; font-size: .6rem;
  letter-spacing: .4em; color: var(--gold); text-transform: uppercase;
  display: block; margin-bottom: .8rem;
}
.rel-card-title { font-size: .95rem; font-weight: 300; letter-spacing: .06em; line-height: 1.5; }
.rel-card-arrow {
  display: block; margin-top: 1.5rem;
  font-family: 'Cormorant Garamond', serif; font-size: .68rem;
  letter-spacing: .3em; color: var(--gold);
}

/* ── FOOTER ─────────────────────────────── */
footer {
  background: #0f0f0f; padding: 5rem 4.5rem;
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--border); flex-wrap: wrap; gap: 2rem;
}
.foot-logo {
  font-family: 'Cormorant Garamond', serif; font-size: 1.3rem;
  font-weight: 400; letter-spacing: .28em; color: var(--warm); text-decoration: none;
  line-height: 1.2;
}
.foot-logo span {
  display: block; font-size: .58rem; letter-spacing: .4em;
  color: var(--muted); margin-top: .35rem; font-style: italic;
}
.foot-nav { display: flex; gap: 2rem; list-style: none; flex-wrap: wrap; }
.foot-nav a {
  font-size: .65rem; letter-spacing: .22em; color: var(--muted);
  text-decoration: none; text-transform: uppercase; transition: color .25s;
}
.foot-nav a:hover { color: var(--gold); }
.foot-copy { font-size: .6rem; letter-spacing: .12em; color: rgba(117,109,97,.35); }

/* ── RESPONSIVE ── */
@media (max-width: 960px) {
  :root { --nav-h: 68px; }
  nav { padding: 0 1.8rem; }
  .nav-links { display: none; }
  .hamburger { display: flex; }
  .sec { padding: 6rem 1.8rem; }
  .page-hero { padding: 10rem 1.8rem 5rem; }
  .page-hero-kanji { display: none; }
  .page-content { padding: 5rem 1.8rem; }
  .page-content .sec-inner { grid-template-columns: 1fr; gap: 4rem; }
  .related { padding: 5rem 1.8rem; }
  .related-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  footer { flex-direction: column; align-items: flex-start; padding: 4rem 1.8rem; gap: 2.2rem; }
  .foot-nav { gap: 1.5rem; }
}