/* =========================================================
   KISEKI TRAVEL — minimalist Japanese-inspired
   ========================================================= */
:root{
  --paper:      #f6f1e8;   /* warm off-white paper */
  --paper-2:    #efe8dc;
  --surface:    #fdfbf7;
  --ink:        #23211f;   /* charcoal */
  --ink-soft:   #4a463f;
  --gray:       #8a847b;   /* soft gray */
  --line:       #dfd7c9;   /* hairline */
  --line-2:     #e9e2d6;
  --accent:     #9c2f24;   /* muted japanese red */
  --accent-soft:#b4543d;
  --serif: 'Cormorant Garamond', 'Noto Serif JP', Georgia, 'Times New Roman', serif;
  --jp:    'Noto Serif JP', var(--serif);
  --sans:  'Inter', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --pad-section: clamp(5rem, 11vw, 9.5rem);
  --shadow-soft: 0 24px 60px -38px rgba(40,30,20,.45);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:5rem; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--sans);
  font-weight:300;
  font-size:16px;
  line-height:1.7;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  letter-spacing:.01em;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; height:auto; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; font-weight:400; }
p{ margin:0; }
figure{ margin:0; }

.container{ width:min(1180px, calc(100% - 4rem)); margin-inline:auto; }

/* accent small jp glyphs */
.index{
  font-family:var(--sans);
  letter-spacing:.28em;
  font-size:.72rem;
  text-transform:uppercase;
  color:var(--gray);
}
.emphasize{
  font-family:var(--jp);
  font-style:italic;
  color:var(--accent);
  font-weight:400;
}
.sr-only{ position:absolute; width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap; }

.skip-link{
  position:fixed; top:-60px; left:16px; z-index:200;
  background:var(--ink); color:var(--paper);
  padding:.6rem 1rem; font-size:.8rem;
  transition:top .25s var(--ease);
}
.skip-link:focus{ top:12px; color:#fff; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.55em;
  padding:.86rem 1.7rem;
  font-family:var(--sans); font-size:.8rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  border:1px solid transparent;
  cursor:pointer; transition:all .32s var(--ease);
  background:none; line-height:1;
}
.btn span{ transition:transform .32s var(--ease); display:inline-block;
  font-family: var(--serif); letter-spacing:0; text-transform:none; font-size:1.05em;}
.btn:hover span{ transform:translateX(5px); }
.btn-solid{ background:var(--ink); color:var(--paper); }
.btn-solid:hover{ background:var(--accent); }
.btn-outline{ border-color:var(--ink); color:var(--ink); background:transparent; }
.btn-outline:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink);}
.btn-light{ background:var(--paper); color:var(--ink); }
.btn-light:hover{ background:#fff; box-shadow:var(--shadow-soft); }

/* text links */
.text-link{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.82rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink);
  border-bottom:1px solid transparent;
  padding-bottom:4px;
  position:relative;
  transition:.3s var(--ease);
}
.text-link span{ transition:transform .32s var(--ease); font-family:var(--serif); text-transform:none; letter-spacing:0;}
.text-link:hover{ color:var(--accent);}
.text-link:hover span{ transform:translateX(5px); color:var(--accent); }

/* =========================================================
   Header / Navigation
   ========================================================= */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  transition:background .4s var(--ease), box-shadow .4s var(--ease), padding .4s var(--ease);
  padding:1.4rem 0;
  color:var(--paper);
}
.site-header.scrolled{
  background:rgba(246,241,232,.92);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 1px 0 var(--line);
  color:var(--ink);
  padding:.9rem 0;
}
.nav-inner{
  width:min(1320px, calc(100% - 3rem)); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.brand{ display:inline-flex; align-items:baseline; gap:.6rem; }
.brand-name{
  font-family:var(--sans); font-weight:500; letter-spacing:.5em;
  font-size:1.12rem; text-transform:uppercase;
}
.brand-ja{ font-family:var(--jp); font-size:1rem; color:var(--accent); }
.site-header.scrolled .brand-ja{ }
.primary-nav{ display:flex; gap:2.4rem; margin-left:2rem; }
.primary-nav a{
  font-size:.78rem; font-weight:400; letter-spacing:.18em; text-transform:uppercase;
  color:var(--paper); opacity:.9; transition:.3s; position:relative;
}
.site-header.scrolled .primary-nav a{ color:var(--ink); }
.primary-nav a::after{
  content:''; position:absolute; left:0; bottom:-6px; width:0; height:1px;
  background:var(--accent); transition:width .3s var(--ease);
}
.primary-nav a:hover{ opacity:1; }
.primary-nav a:hover::after{ width:100%; }
.nav-cta{
  padding:.6rem 1.25rem; font-size:.72rem;
  color:var(--paper); border-color:rgba(255,255,255,.55);
}
.site-header.scrolled .nav-cta{ color:var(--ink); border-color:var(--ink); }
.nav-cta:hover{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.site-header.scrolled .nav-cta:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

/* hamburger */
.nav-toggle{
  display:none; width:42px;height:42px; border:1px solid var(--line);
  background:transparent; cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.nav-toggle span{ display:block; width:20px; height:1.6px; background:currentColor; transition:.3s var(--ease); }
.site-header:not(.scrolled) .nav-toggle{ border-color:rgba(255,255,255,.5); }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.6px) 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.6px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0; z-index:95;
  background:var(--paper);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.4rem;
  transform:translateX(100%); transition:transform .5s var(--ease), visibility .5s;
  visibility:hidden; pointer-events:none;
}
.mobile-menu[data-open="true"]{ transform:translateX(0); visibility:visible; pointer-events:auto; }
.mobile-menu a{ color:var(--ink); font-size:1.4rem; font-family:var(--serif); letter-spacing:.1em; }
.mobile-menu .mobile-cta{ font-family:var(--sans); font-size:.8rem; margin-top:.8rem; border-color:var(--ink); }

/* =========================================================
   Hero
   ========================================================= */
.hero{
  position:relative; min-height:100vh;
  display:flex; align-items:center;
  color:#fff;
  isolation:isolate;
  overflow:hidden;
}
.hero-media{
  position:absolute; inset:0; z-index:-2;
  background-size:cover; background-position:center 30%;
  transform:scale(1.08);
  animation:heroZoom 2.4s var(--ease) forwards;
}
@keyframes heroZoom{ to{ transform:scale(1);} }
.hero-shade{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(78deg, rgba(23,20,16,.72) 0%, rgba(23,20,16,.38) 42%, rgba(23,20,16,.06) 68%, rgba(10,8,6,.15) 100%),
    linear-gradient(0deg, rgba(12,10,8,.30) 0%, rgba(12,10,8,0) 28%);
}
.hero-vertical{
  position:absolute; right:3.4rem; top:50%; transform:translateY(-50%);
  font-family:var(--jp); font-size:1.6rem; letter-spacing:.2em;
  color:rgba(255,255,255,.85);
  writing-mode:vertical-rl;
  z-index:2;
  opacity:0; animation:fade 1.2s var(--ease) .6s forwards;
}
@keyframes fade{ to{opacity:1;} }

.hero-content{
  width:min(1180px, calc(100% - 4rem)); margin-inline:auto;
  padding:9rem 0 6rem;
}
.hero-eyebrow{
  color:rgba(255,255,255,.82);
  margin-bottom:2rem;
  letter-spacing:.34em; font-size:.74rem;
  display:inline-block; position:relative; padding-left:2.4rem;
}
.hero-eyebrow::before{
  content:''; position:absolute; left:0; top:50%; width:32px; height:1px; background:var(--accent-soft);
}
.hero-title{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(2.6rem, 6.4vw, 5.6rem);
  line-height:1.04;
  letter-spacing:.01em;
  text-transform:uppercase;
}
.hero-title .emphasize{ color:var(--accent-soft); font-family:var(--serif); font-style:italic;}
.hero-sub{
  margin:1.9rem 0 0; max-width:40ch;
  font-size:clamp(1rem,1.4vw,1.16rem); font-weight:300; color:rgba(255,255,255,.9);
  line-height:1.8;
}
.hero-actions{ margin-top:2.6rem; display:flex; align-items:center; gap:1.6rem; }
.hero-actions .btn-solid{ background:var(--paper); color:var(--ink);}
.hero-actions .btn-solid:hover{ background:#fff; }
.hero-scroll{
  display:inline-flex; align-items:center; gap:.7rem;
  font-size:.74rem; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.85);
}
.scroll-line{ width:34px; height:1px; background:rgba(255,255,255,.7); position:relative; overflow:hidden;}
.scroll-line::after{ content:''; position:absolute; inset:0; background:#fff; transform:translateX(-100%); animation:scrollHint 2.2s var(--ease) infinite;}
@keyframes scrollHint{ 55%{ transform:translateX(0);} 100%{ transform:translateX(100%);} }
.hero-meta{
  position:absolute; left:0; right:0; bottom:2rem; z-index:2;
  text-align:center;
}
.hero-meta span{
  font-size:.64rem; letter-spacing:.4em; color:rgba(255,255,255,.66); text-transform:uppercase;
}

/* ----- Scroll reveal system (scoped behind .js) ----- */
html:not(.js) .reveal, html:not(.js) .reveal-media{ opacity:1 !important; transform:none !important; }
html.js .reveal, html.js .reveal-media{ opacity:0; }

html.js .reveal.is-in{ animation:rise 1s var(--ease) forwards; }
html.js .reveal-media.is-in{ animation:mediaRise 1.3s var(--ease) forwards; }

@keyframes rise{ from{opacity:0; transform:translateY(30px);} to{opacity:1; transform:none;} }
@keyframes mediaRise{ from{opacity:0; transform:scale(1.045);} to{opacity:1; transform:scale(1);} }

.d1.is-in{ animation-delay:.15s !important; }
.d2.is-in{ animation-delay:.30s !important; }
.d3.is-in{ animation-delay:.45s !important; }

/* Respect reduced-motion users */
@media (prefers-reduced-motion: reduce){
  html.js .reveal, html.js .reveal-media{ opacity:1 !important; }
  .hero-media{ animation:none; transform:none; }
  .scroll-line::after,.hero-vertical{ animation:none; }
  *{ transition:none !important; }
}

/* =========================================================
   Shared sections & typography
   ========================================================= */
.section{ position:relative; }
.section + .section{ }
.section-title{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(2.1rem, 4.6vw, 3.9rem);
  line-height:1.08;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.section-sub{
  color:var(--gray); font-weight:300;
  margin-top:1.1rem; font-size:clamp(1rem,1.3vw,1.1rem);
}
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:2rem; flex-wrap:wrap;
  margin-bottom:clamp(3rem,6vw,5rem);
}
.section-index{ display:flex; align-items:center; gap:.9rem; color:var(--gray); }
.section-index i{ width:60px; height:1px; background:var(--line); display:block; }
.section-index .index{ color:var(--ink); }

/* section vertical rhythm */
.featured, .destinations, .journeys, .philosophy, .seasons, .journal, .stories, .cta{
  padding-top:var(--pad-section); padding-bottom:var(--pad-section);
}

.lead{ font-size:clamp(1.1rem,1.6vw,1.34rem); color:var(--ink-soft); font-weight:300; line-height:1.85; }

/* =========================================================
   Featured (editorial Kyoto)
   ========================================================= */
.featured{ background:var(--paper); }
.grid-editorial{
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:clamp(2.5rem,6vw,6.5rem);
  align-items:center;
}
.featured-media{ position:relative; }
.featured-media img{
  width:100%; height:min(74vh, 720px); object-fit:cover;
  box-shadow:var(--shadow-soft);
}
.featured-media::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(40,30,20,.05), rgba(40,30,20,.34));
}
.frame-number{
  position:absolute; z-index:2; top:-2.4rem; right:1.5rem;
  font-family:var(--serif); font-size:6rem; color:rgba(156,47,36,.16);
}
.featured-copy{ position:relative; padding:1rem 0 .5rem; }
.featured-copy::before{
  content:''; position:absolute; left:0; top:-1.6rem; width:56px; height:2px; background:var(--accent);
}
.featured-copy .lead{ margin:2rem 0 2.4rem; }

/* =========================================================
   Destinations (editorial stacked rows)
   ========================================================= */
.destinations{ background:var(--surface); }
.dest-list{ display:flex; flex-direction:column; }
.dest-row{
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(1.6rem,4vw,4rem); align-items:center;
  padding:clamp(2rem,5vw,3.6rem) 0;
  border-top:1px solid var(--line-2);
}
.dest-row-alt{ grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr); }
.dest-row-alt .dest-media{ order:2; }
.dest-row-alt .dest-text{ order:1; padding-left:0; }
.dest-row:last-of-type{ border-bottom:1px solid var(--line-2); }
.dest-media img{
  width:100%; height:clamp(240px,34vw,440px); object-fit:cover;
  filter:saturate(.92) contrast(1.02);
}
.dest-text{ padding-left:clamp(0rem,3vw,1rem); }
.dest-text .index{ display:inline-block; margin-bottom:1rem; }
.dest-name{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2.4rem,5.5vw,4.6rem); line-height:1;
  letter-spacing:.02em;
}
.dest-desc{ margin:1.2rem 0 1.8rem; color:var(--ink-soft); font-size:1.06rem; font-weight:300; }

/* =========================================================
   Curated Journeys
   ========================================================= */
.journeys{ background:var(--paper-2); }
.journeys .section-head{ margin-bottom:clamp(2.5rem,5vw,4rem); }
.journey-grid{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(1.6rem,3vw,2.4rem);
}
.journey-card{
  background:var(--surface);
  border:1px solid var(--line-2);
}
.journey-media{ overflow:hidden; position:relative; aspect-ratio:16/10; }
.journey-media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.journey-card:hover .journey-media img{ transform:scale(1.05); }
.journey-body{ padding:clamp(1.4rem,3vw,2.2rem); }
.journey-eyebrow{ font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gray); margin-bottom:.9rem; }
.journey-name{ font-family:var(--serif); font-weight:400; font-size:clamp(1.5rem,2.6vw,2.1rem); }
.journey-route{ display:flex; align-items:center; gap:.6rem; color:var(--ink-soft); font-weight:300; font-size:.9rem; margin:.35rem 0 1rem; letter-spacing:.05em;}
.journey-route .index{ font-size:.62rem; color:var(--accent); letter-spacing:.2em; }
.journey-desc{ color:var(--ink-soft); font-weight:300; line-height:1.7; margin-bottom:1.5rem; }
.journey-foot{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  border-top:1px solid var(--line-2); padding-top:1.2rem;
}
.price{ color:var(--gray); font-size:.82rem; letter-spacing:.06em; }
.price strong{ color:var(--ink); font-family:var(--serif); font-weight:500; font-size:1.15rem; margin-left:.3rem; }
.journey-grand{ border-color:transparent; box-shadow:0 30px 60px -45px rgba(40,30,20,.4); }

/* =========================================================
   Philosophy (Kiseki Difference)
   ========================================================= */
.philosophy{ background:var(--paper); }
.philosophy-kicker{ margin-bottom:1.6rem; }
.philosophy-title{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2rem,5vw,4.1rem); line-height:1.18;
  text-transform:uppercase; letter-spacing:.01em;
}
.philosophy-em{
  color:var(--ink-soft); display:block; margin-top:.4rem;
  font-style:italic; text-transform:none;
  font-size:calc(clamp(2rem,5vw,4.1rem) * .72);
}
.principle-grid{
  margin-top:clamp(3.5rem,7vw,6rem);
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1.5rem,3vw,2.5rem);
}
.principle{ padding:clamp(1.2rem,2vw,1.8rem); border-top:1px solid var(--ink); }
.principle-num{ font-family:var(--jp); color:var(--accent); font-size:1.3rem; display:block; margin-bottom:1.2rem; }
.principle-name{ font-family:var(--serif); font-weight:400; font-size:clamp(1.25rem,2vw,1.6rem); }
.principle-desc{ color:var(--ink-soft); font-weight:300; margin-top:.8rem; }

/* Seasons, Journal, Stories */
.seasons{ background:var(--surface); }
.season-sub{ margin-top:1rem; }
.season-grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(.75rem,1.6vw,1.25rem);
}
.season{ position:relative; aspect-ratio:3/4.2; overflow:hidden; background:var(--ink); }
.season img{ width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease); }
.season:hover img{ transform:scale(1.07); }
.season::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(200deg, rgba(20,15,10,0) 45%, rgba(18,14,10,.78));
}
.season-caption{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:clamp(1rem,1.5vw,1.6rem);
  display:flex; flex-direction:column; color:#fff;
}
.season-ja{ font-family:var(--jp); font-size:clamp(1.6rem,2.4vw,2.3rem); }
.season-en{ font-size:.7rem; letter-spacing:.34em; text-transform:uppercase; margin-top:.35rem; color:rgba(255,255,255,.92);}
.season-txt{ font-weight:300; font-size:.86rem; color:rgba(255,255,255,.82); line-height:1.5; margin-top:.35rem; }

.journal{ background:var(--paper); border-top:1px solid var(--line-2);}
.journal-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.6rem,3.5vw,3rem); align-items:start; }
.journal-media{ display:block; overflow:hidden; aspect-ratio:4/3; margin-bottom:1.4rem; }
.journal-media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.journal-media:hover img{ transform:scale(1.05); }
.journal-meta{ display:flex; justify-content:space-between; gap:1rem; margin-bottom:.8rem; }
.journal-read{ font-size:.7rem; letter-spacing:.2em; color:var(--gray); }
.journal-name{ font-family:var(--serif); font-weight:400; font-size:clamp(1.3rem,1.9vw,1.75rem); line-height:1.2; margin-bottom:.7rem; }
.journal-title:hover{ color:var(--accent); }
.journal-desc{ color:var(--ink-soft); font-weight:300; margin-bottom:1.2rem; }

.stories{ background:var(--paper-2); }
.stories-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,3vw,2.5rem); }
.story{
  background:var(--surface); border:1px solid var(--line-2);
  padding:clamp(1.8rem,3vw,2.6rem);
  display:flex; flex-direction:column;
}
.story-avatar{
  width:52px; height:52px; border-radius:50%;
  background:radial-gradient(circle at 32% 30%, #ece4d5, #cabba2);
  color:var(--ink); display:grid; place-items:center;
  font-family:var(--jp); font-size:1.1rem;
  border:1px solid var(--line); align-self:flex-start;
}
.story-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:1.3rem 0 .2rem; }
.story-name{ font-family:var(--serif); font-weight:500; font-size:1.22rem; }
.stars{ color:var(--accent); letter-spacing:.1em; font-size:.9rem; }
.story-quote{ color:var(--ink-soft); font-weight:300; font-style:italic; line-height:1.85; margin-top:.5rem; }

/* =========================================================
   Final CTA
   ========================================================= */
.cta{
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; align-items:center;
  color:#fff; text-align:center;
  padding-top:calc(var(--pad-section)*.7); padding-bottom:calc(var(--pad-section)*.7);
}
.cta-media{ position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center; }
.cta-shade{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(18,15,11,.65), rgba(15,12,9,.78)),
             radial-gradient(120% 80% at 78% 20%, rgba(120,66,45,.18), transparent 60%);
}
.cta-media{ filter:saturate(.9); transform:scale(1); transition:transform 6s var(--ease);}
.cta-inner{ position:relative; padding-top:3rem; }
.cta-ja{
  font-family:var(--jp); font-size:clamp(1.6rem,4vw,3rem); color:var(--accent-soft);
  display:block; margin-bottom:1.3rem; writing-mode:horizontal-tb;
}
.cta-title{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2.2rem,6vw,5.2rem); line-height:1.05; text-transform:uppercase;
}
.cta-title .emphasize{ font-family:var(--serif); font-style:italic; color:var(--accent-soft);}
.cta-text{ margin:1.8rem auto 0; max-width:46ch; font-weight:300; font-size:clamp(1.05rem,1.5vw,1.3rem); color:rgba(255,255,255,.9); }
.cta-actions{ margin-top:2.6rem; }
.cta-small{ margin-top:2.4rem; font-size:.72rem; letter-spacing:.34em; text-transform:uppercase; color:rgba(255,255,255,.72); }

/* =========================================================
   Footer
   ========================================================= */
.site-footer{
  background:var(--ink); color:rgba(255,255,255,.7);
}
.footer-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:clamp(2rem,4vw,4rem);
  padding:clamp(3.5rem,7vw,6rem) 0 clamp(2.5rem,5vw,4rem);
}
.footer-brand .brand-name{ color:#fff; }
.footer-brand .brand-ja{ color:var(--accent-soft); }
.tagline{ font-size:.74rem; letter-spacing:.3em; text-transform:uppercase; color:rgba(255,255,255,.55); margin-top:1.1rem; }
.footer-ja{ font-family:var(--jp); font-size:1.1rem; color:#fff; margin-top:1.8rem; }
.footer-ja-en{ font-style:italic; color:var(--accent-soft); margin-top:.4rem; font-family:var(--serif); font-size:1rem;}
.footer-col{ display:flex; flex-direction:column; gap:.95rem; font-weight:300; }
.footer-heading{
  font-size:.7rem; letter-spacing:.3em; text-transform:uppercase; color:rgba(255,255,255,.5);
  margin-bottom:.4rem; font-weight:500;
}
.footer-col a{ transition:color .3s; }
.footer-col a:hover{ color:#fff; }
.footer-wa{ display:flex; align-items:center; gap:.5rem; }
.footer-bottom{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  border-top:1px solid rgba(255,255,255,.12);
  padding:1.6rem 0 2rem;
  font-size:.74rem; letter-spacing:.12em; color:rgba(255,255,255,.5);
  text-transform:uppercase;
}
.footer-mark{ color:var(--accent-soft); letter-spacing:.4em; }

/* Floating WhatsApp */
.wa-float{
  position:fixed; right:1.4rem; bottom:1.4rem; z-index:120;
  width:56px; height:56px; border-radius:50%;
  background:#1f6f4a; color:#fff;
  display:grid; place-items:center;
  box-shadow:0 14px 30px -12px rgba(20,60,40,.6);
  transition:transform .3s var(--ease), background .3s;
}
.wa-float svg{ width:26px; height:26px; }
.wa-float:hover{ transform:translateY(-4px); background:#185a3b; }

/* =========================================================
   Responsive — tablet
   ========================================================= */
@media (max-width: 1024px){
  .primary-nav{ gap:1.6rem; }
  .featured .grid-editorial{ grid-template-columns:1fr; }
  .featured-media img{ width:100%; height:auto; aspect-ratio:4/3; }
  .featured-copy{ max-width:60ch; }
  .season-grid{ grid-template-columns:repeat(2,1fr); gap:1rem; }
  .season{ aspect-ratio:16/10; }
}

/* =========================================================
   Responsive — handheld
   ========================================================= */
@media (max-width: 760px){
  :root{ --pad-section: 4.4rem; }
  .container{ width:min(100% - 2.6rem, 1180px); }

  .primary-nav,.nav-cta{ display:none; }
  .nav-toggle{ display:inline-flex; }

  .hero{ min-height:92vh; }
  .hero-content{ padding:7rem 0 5.5rem; width:min(100% - 3rem,1180px); }
  .hero-vertical{ display:none; }
  .hero-meta{ display:none; }
  .hero-actions{ flex-wrap:wrap; gap:1.4rem; }

  .dest-row,.dest-row-alt{ grid-template-columns:1fr; gap:1.4rem; }
  .dest-row-alt .dest-media{ order:0; }
  .dest-row-alt .dest-text{ order:0; padding-left:0; }
  .dest-media img{ height:auto; aspect-ratio:4/3; }

  .journey-grid{ grid-template-columns:1fr; }
  .principle-grid{ grid-template-columns:1fr; gap:1.6rem; }
  .principle{ padding-top:1.4rem; }
  .season-txt{ font-size:.82rem; }

  .journal-grid,.stories-grid{ grid-template-columns:1fr; gap:2.4rem; }
  .story{ padding:1.8rem; }
  .story-head{ flex-direction:column; align-items:flex-start; gap:.2rem; }

  .cta-title{ text-transform:uppercase; }
  .cta-actions{ margin-top:2rem; }

  .footer-grid{ grid-template-columns:1fr 1fr; row-gap:2.6rem; }
  .footer-brand{ grid-column:1/-1; }
  .footer-bottom{ flex-direction:column; text-align:center; }
}

@media (max-width: 480px){
  .section-title{ font-size:clamp(1.9rem, 8.5vw, 2.6rem); }
  .philosophy-title{ font-size:2.1rem; }
  .philosophy-em{ font-size:1.5rem; }
  .season-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .btn{ padding:.8rem 1.4rem; }
  .wa-float{ right:1rem; bottom:1rem; width:52px; height:52px; }
}








