/* ============================================================
   CHAKRA GLASS — Page styles (header, heroes, sections)
   ============================================================ */

/* ---------------- Header ---------------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(14px, 2vw, 22px) var(--gutter);
  transition: background .5s var(--ease), box-shadow .5s var(--ease), padding .5s var(--ease);
}
.site-header.scrolled {
  background: rgba(246,241,233,.86);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--line);
  padding-block: clamp(10px, 1.4vw, 14px);
}
.brand { display: flex; flex-direction: column; line-height: 1; flex: none; }
.brand .mark { font-family: var(--serif-en); font-size: clamp(1.2rem, 2vw, 1.55rem); letter-spacing: .16em; font-weight: 500; white-space: nowrap; }
.brand .mark sup { font-size: .5em; vertical-align: super; }
.brand .sub { font-size: .56rem; letter-spacing: .5em; color: var(--ink-faint); margin-top: .5em; text-indent: .5em; }

.nav { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 34px); flex-wrap: wrap; justify-content: flex-end; }
.nav a.navlink { font-size: .84rem; letter-spacing: .12em; color: var(--ink); position: relative; padding-block: 4px; }
.nav a.navlink::after { content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background: var(--clay); transition: width .4s var(--ease); }
.nav a.navlink:hover::after { width: 100%; }
.nav .ig {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--serif-en); font-style: italic; font-size: .95rem; letter-spacing: .06em;
  padding: .5em 1.2em; border: 1px solid var(--ink); border-radius: 999px;
  transition: all .4s var(--ease);
}
.nav .ig:hover { background: var(--ink); color: var(--bg); }
.nav .ig svg { width: 15px; height: 15px; }
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  place-items: center;
  cursor: pointer;
}
.nav-toggle .bar {
  width: 18px;
  height: 1px;
  background: currentColor;
  display: block;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.nav-toggle .bar + .bar { margin-top: 5px; }

@media (max-width: 860px) {
  .site-header { align-items: center; }
  .nav-toggle { display: grid; }
  .nav {
    position: fixed;
    top: clamp(70px, 11vw, 86px);
    left: var(--gutter);
    right: var(--gutter);
    display: grid;
    gap: 0;
    padding: 12px;
    background: rgba(255,254,251,.96);
    border: 1px solid var(--line);
    box-shadow: 0 24px 70px -36px rgba(56,49,44,.55);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: none;
  }
  body.nav-open .nav { opacity: 1; transform: none; pointer-events: auto; }
  .nav a.navlink,
  .nav .ig {
    display: flex;
    justify-content: space-between;
    width: 100%;
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid var(--line-soft);
    padding: 13px 10px;
  }
  .nav .ig { justify-content: flex-start; border-bottom: 0; }
  body.nav-open .nav-toggle .bar:first-child { transform: translateY(3px) rotate(45deg); }
  body.nav-open .nav-toggle .bar:last-child { transform: translateY(-3px) rotate(-45deg); }
}

/* ---------------- HERO (shared) ---------------- */
.hero { display: none; }
#hero-a { display: flex; }

.hero-tag-list { display: flex; flex-wrap: wrap; gap: .6em 1.4em; }
.hero-tag {
  font-size: .76rem; letter-spacing: .14em; color: var(--ink-soft);
  display: inline-flex; align-items: center; gap: .55em;
}
.hero-tag::before { content:""; width: 5px; height: 5px; border-radius: 50%; background: var(--clay); }

/* --- Hero A : Editorial cover --- */
#hero-a { position: relative; min-height: 92svh; align-items: flex-end; }
#hero-a .cover {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(34,29,25,.7) 0%, rgba(34,29,25,.42) 36%, rgba(34,29,25,.12) 72%),
    linear-gradient(180deg, rgba(56,49,44,.08) 0%, rgba(56,49,44,.08) 54%, rgba(56,49,44,.58) 100%),
    url("../assets/images/hero-eyewear.png") center / cover no-repeat;
}
#hero-a .cover .cover-note {
  display: none;
}
#hero-a .hero-inner { position: relative; z-index: 2; width: 100%; padding-bottom: clamp(48px, 8vh, 110px); }
#hero-a .wordmark { font-family: var(--serif-en); color: var(--paper); font-weight: 500; font-size: clamp(3.2rem, 11vw, 9.5rem); line-height: .92; letter-spacing: .02em; }
#hero-a .wordmark sup { font-size: .26em; vertical-align: super; }
#hero-a .reg { display: block; font-family: var(--serif-jp); color: var(--paper); font-size: clamp(.85rem,2.6vw,1.15rem); letter-spacing: .5em; margin-top: 1.4em; opacity: .92; }
#hero-a .tagline { color: var(--paper); font-size: clamp(1.05rem, 2.4vw, 1.5rem); line-height: 2; margin-top: 1.4em; max-width: 32ch; text-shadow: 0 1px 18px rgba(56,49,44,.3); }
#hero-a .hero-cta { margin-top: 2.2em; display: flex; gap: 1em; flex-wrap: wrap; }
#hero-a .btn--ghost { color: var(--paper); border-color: rgba(255,255,255,.7); }
#hero-a .btn--ghost:hover { background: var(--paper); color: var(--ink); }

@media (max-width: 860px) {
  #hero-a { min-height: 88svh; }
  #hero-a .cover { background-position: 58% center; }
}

/* ---------------- Intro / statement ---------------- */
.statement { text-align: center; }
.statement .big {
  font-size: clamp(1.32rem, 3.6vw, 2.7rem); line-height: 1.9; font-weight: 500; letter-spacing: .07em;
  max-width: none; margin-inline: auto;
}
.statement .big .keep-line { white-space: nowrap; }
.statement .big em { font-style: normal; color: var(--clay-deep); }

/* ---------------- Effects ---------------- */
.effects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: clamp(20px,3vw,40px); margin-top: clamp(40px,6vw,72px); }
.effect {
  padding: clamp(28px,3vw,40px) clamp(22px,2.4vw,32px);
  background: var(--paper); border: 1px solid var(--line-soft);
  display: flex; flex-direction: column; gap: 1em;
}
.effect .no { font-family: var(--serif-en); font-style: italic; font-size: 1.4rem; color: var(--clay); }
.effect h3 { font-size: 1.18rem; line-height: 1.7; font-weight: 600; letter-spacing: .06em; }
.effect p { margin: 0; font-size: .94rem; line-height: 2; color: var(--ink-soft); }

/* ---------------- Concept (formula) ---------------- */
.concept { background: var(--bg-alt); }
.formula { display: flex; align-items: center; justify-content: center; gap: clamp(14px,2.4vw,34px); flex-wrap: wrap; text-align:center; margin-bottom: clamp(40px,6vw,68px); }
.formula .term { font-size: clamp(1.05rem,2.4vw,1.6rem); letter-spacing: .1em; font-weight: 600; }
.formula .op { font-family: var(--serif-en); font-size: clamp(1.4rem,3vw,2.2rem); color: var(--clay); }

/* ---------------- Voices ---------------- */
.voices { background: var(--ink); color: var(--bg); }
.voices .h2 { color: var(--bg); }
.voices .h2 .en { color: var(--clay); }
.voice-list { display: grid; gap: 1px; margin-top: clamp(40px,6vw,64px); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.1); }
.voice {
  background: var(--ink); padding: clamp(22px,2.6vw,32px) clamp(22px,3vw,40px);
  display: flex; gap: 1.2em; align-items: baseline; font-size: clamp(1rem,1.8vw,1.2rem); line-height: 1.9; letter-spacing: .05em;
}
.voice .q { font-family: var(--serif-en); font-style: italic; color: var(--clay); font-size: 1.6rem; line-height: 1; }
.voices .closing { margin-top: clamp(36px,5vw,56px); text-align:center; font-size: clamp(1.05rem,2.2vw,1.4rem); line-height: 2; color: rgba(246,241,233,.82); }
.voices .closing em { font-style: normal; color: var(--clay); }

/* ---------------- Chakra section (FULL COLOR) ---------------- */
.chakra { background: var(--bg-deep); position: relative; }
.chakra .intro-line { text-align:center; max-width: 40ch; margin: 0 auto clamp(44px,6vw,72px); color: var(--ink-soft); font-size: clamp(1rem,1.8vw,1.2rem); line-height: 2; }
.chakra-list { display: grid; gap: 14px; }
.chakra-row {
  display: grid; grid-template-columns: 56px clamp(64px,9vw,110px) 1fr; align-items: center; gap: clamp(16px,2.4vw,34px);
  background: var(--paper); border: 1px solid var(--line-soft); border-left: 6px solid var(--swatch);
  padding: clamp(18px,2.2vw,26px) clamp(20px,2.6vw,34px);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.chakra-row:hover { transform: translateX(6px); box-shadow: -6px 14px 36px -20px rgba(56,49,44,.4); }
.chakra-row .dot { width: 40px; height: 40px; border-radius: 50%; background: var(--swatch); box-shadow: inset 0 0 14px rgba(255,255,255,.45), 0 4px 14px -6px var(--swatch); }
.chakra-row .name { line-height: 1.3; }
.chakra-row .name .en { display:block; font-family: var(--serif-en); font-style: italic; font-size: 1.25rem; color: var(--ink); letter-spacing:.06em; }
.chakra-row .name .jp { display:block; font-size: .82rem; letter-spacing: .12em; color: var(--ink-soft); margin-top:.2em; }
.chakra-row .name .num { font-family: var(--serif-en); font-size: .8rem; color: var(--clay); }
.chakra-row .body .part { font-size: .76rem; letter-spacing:.1em; color: var(--ink-faint); display:block; margin-bottom:.3em; }
.chakra-row .body .desc { font-size: .94rem; line-height: 1.85; color: var(--ink-soft); }
.chakra-row .body .key { color: var(--ink); font-weight: 600; }
@media (max-width: 720px){
  .chakra-row { grid-template-columns: 40px 1fr; row-gap: 8px; }
  .chakra-row .body { grid-column: 1 / -1; }
}

/* ---------------- Process ---------------- */
.process-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(24px,3vw,48px); margin-top: clamp(44px,6vw,72px); counter-reset: step; }
.step { position: relative; padding-top: 2.4em; border-top: 1px solid var(--line); }
.step .num { font-family: var(--serif-en); font-style: italic; font-size: 2.6rem; color: var(--clay); line-height: 1; position:absolute; top: .3em; left:0; }
.step h3 { font-size: clamp(1.1rem,2vw,1.35rem); line-height: 1.75; font-weight: 600; margin-top: 1.6em; }
@media (max-width: 760px){ .process-grid { grid-template-columns: 1fr; } }

/* ---------------- Menu overview ---------------- */
.menu-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px,3vw,36px); margin-top: clamp(44px,6vw,68px); }
.menu-card { background: var(--paper); border: 1px solid var(--line); display: flex; flex-direction: column; overflow: hidden; }
.menu-card .ph { aspect-ratio: 16/10; }
.menu-card .mc-body { padding: clamp(26px,3vw,40px); display:flex; flex-direction: column; gap: 1em; flex: 1; }
.menu-card .mc-body h3 { font-size: clamp(1.2rem,2.2vw,1.55rem); line-height:1.6; font-weight:600; }
.menu-card .mc-body .en { font-family: var(--serif-en); font-style: italic; color: var(--clay); font-size: 1rem; }
.menu-card .mc-body p { margin: 0; font-size: .94rem; line-height: 2; color: var(--ink-soft); flex: 1; }
.menu-card .price { font-size: 1rem; letter-spacing: .06em; border-top: 1px solid var(--line-soft); padding-top: 1em; }
.menu-card .price b { font-family: var(--serif-en); font-size: 1.3rem; font-weight: 600; }
@media (max-width: 760px){ .menu-card-grid { grid-template-columns: 1fr; } }

/* ---------------- Profile ---------------- */
.profile { background: var(--bg-alt); }
.profile-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(32px,5vw,80px); align-items: center; }
.profile .ph { aspect-ratio: 4/5; }
.profile .name-en { font-family: var(--serif-en); font-style: italic; font-size: clamp(1.8rem,4vw,2.8rem); }
.profile .role { font-size: .82rem; letter-spacing:.2em; color: var(--clay); margin: .6em 0 1.8em; }
.profile p { font-size: .98rem; line-height: 2.1; color: var(--ink-soft); margin: 0 0 1.2em; }
@media (max-width: 820px){ .profile-grid { grid-template-columns: 1fr; } .profile .ph { max-width: 360px; } }

/* ---------------- Access ---------------- */
.access-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,4vw,64px); align-items: center; }
.access .ph { aspect-ratio: 16/11; }
.map-card {
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper);
}
.map-card iframe {
  width: 100%;
  min-height: 360px;
  border: 0;
  display: block;
  filter: saturate(.78) sepia(.08);
}
.map-card .map-link {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  padding: 1em 1.2em;
  font-size: .84rem;
  letter-spacing: .1em;
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
}
.map-card .map-link:hover { color: var(--clay-deep); }
.access dl { display: grid; grid-template-columns: auto 1fr; gap: 1em 1.8em; margin: clamp(28px,4vw,40px) 0 0; }
.access dt { font-size: .76rem; letter-spacing:.2em; color: var(--clay); padding-top:.3em; }
.access dd { margin: 0; font-size: 1.05rem; line-height: 1.9; }
@media (max-width: 760px){ .access-grid { grid-template-columns: 1fr; } }

/* ---------------- CTA band ---------------- */
.cta-band { text-align: center; background: var(--clay); color: var(--paper); }
.cta-band .h2, .cta-band .h2 .en { color: var(--paper); }
.cta-band .h2 .en { opacity: .8; }
.cta-band p { max-width: 40ch; margin: 1.4em auto 2.4em; line-height: 2; opacity: .92; }
.cta-band .btn { background: var(--paper); color: var(--clay-deep); }
.cta-band .btn:hover { background: var(--ink); color: var(--paper); }
.cta-band .sns-cta-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}
.cta-band .sns-big {
  display: inline-flex; align-items: center; justify-content: center; gap: .7em;
  min-height: 54px;
  font-size: clamp(.94rem, 2.5vw, 1.18rem);
  border: 1px solid rgba(255,255,255,.6); border-radius: 999px; padding: .72em 1.6em;
  transition: all .4s var(--ease); letter-spacing:.04em;
}
.cta-band .sns-big--line { background: var(--paper); color: var(--clay-deep); }
.cta-band .sns-big--instagram { font-family: var(--serif-en); font-style: italic; }
.cta-band .sns-big:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.cta-band .sns-big svg { width: 22px; height: 22px; flex: none; }

/* ---------------- Footer ---------------- */
.site-footer { background: var(--ink); color: rgba(246,241,233,.7); padding: clamp(56px,8vw,90px) 0 clamp(28px,4vw,40px); }
.footer-top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; align-items: flex-start; }
.site-footer .brand .mark, .site-footer .brand .sub { color: var(--bg); }
.site-footer .f-nav { display: flex; flex-wrap: wrap; gap: 14px 28px; }
.site-footer .f-nav a { font-size: .84rem; letter-spacing:.1em; transition: color .3s; }
.site-footer .f-nav a:hover { color: var(--clay); }
.site-footer .socials { display: flex; gap: 16px; margin-top: 24px; }
.site-footer .socials a { width: 40px; height: 40px; border:1px solid rgba(255,255,255,.22); border-radius:50%; display:grid; place-items:center; transition: all .3s var(--ease); }
.site-footer .socials a:hover { background: var(--clay); border-color: var(--clay); }
.site-footer .socials svg { width: 17px; height: 17px; }
.site-footer .copy { margin-top: clamp(40px,6vw,64px); padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); font-size: .72rem; letter-spacing:.14em; color: rgba(246,241,233,.45); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }