*{box-sizing:border-box}
body{margin:0;background:#080E28;font-family:"Noto Sans JP",system-ui,sans-serif}
a{color:#C6A664;transition:color .15s}
a:hover{color:#E3CB94}

@keyframes heroA{0%,30%{opacity:1;pointer-events:auto}36%,94%{opacity:0;pointer-events:none}100%{opacity:1;pointer-events:auto}}
@keyframes heroB{0%,30%{opacity:0;pointer-events:none}36%,63%{opacity:1;pointer-events:auto}69%,100%{opacity:0;pointer-events:none}}
@keyframes heroC{0%,63%{opacity:0;pointer-events:none}69%,94%{opacity:1;pointer-events:auto}100%{opacity:0;pointer-events:none}}
@media (prefers-reduced-motion:reduce){
  .hero-slide{animation:none!important;opacity:1!important;pointer-events:auto!important}
  .hero-slide+.hero-slide{display:none}
}

.hero-photo,.photo-cover{width:100%;height:100%;object-fit:cover;display:block}

/* real photography not available yet — see CLAUDE.md content rules */
.img-placeholder{
  width:100%;height:100%;display:flex;align-items:flex-end;justify-content:center;
  text-align:center;padding:12px;box-sizing:border-box;
  background:rgba(198,166,100,.08);
  border:1px dashed rgba(198,166,100,.35);
  color:rgba(255,255,255,.32);
  font:400 10px/1.6 "Noto Sans JP",sans-serif;letter-spacing:.02em;
}

/* interactive hover states (style-hover in the design source has no
   plain-HTML equivalent, so these are real CSS classes instead) */
.view-more{transition:color .15s}
.view-more:hover{color:#fff}
.back-pill{transition:background .15s;min-height:44px;align-items:center}
.back-pill:hover{background:rgba(255,255,255,.14)}
.back-pill-footer{transition:background .15s;min-height:44px;align-items:center}
.back-pill-footer:hover{background:rgba(255,255,255,.1)}

/* DESIGN.md §25/§30-4: 44x44 minimum tap target, everywhere —
   these are the interactive elements that were falling short */
.header-bar a[href="#contact"]{min-height:44px}
details summary{min-height:44px}

#detail{display:none}

/* DESIGN.md §26/27: each section block fades + rises as it enters the
   viewport. The `.reveal` class is added by app.js (not present in the
   HTML), so a JS failure/old browser just leaves everything visible. */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease}
.reveal.is-visible{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1 !important;transform:none !important;transition:none !important}
}

/* DESIGN.md §32 Mobile Sticky CTA — desktop already has the header's
   CONTACT pill in view at all times, so this only needs to exist once
   the header nav collapses (same breakpoint as .nav-text-items) */
.mobile-cta{display:none}
@media (max-width:760px){
  body{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
  .mobile-cta{
    display:flex;align-items:center;justify-content:center;
    position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));
    z-index:20;min-height:44px;background:#C6A664;color:#0A1132;border-radius:999px;
    font:700 12px/1 Poppins,sans-serif;letter-spacing:.16em;
    box-shadow:0 12px 30px rgba(0,0,0,.35);cursor:pointer;
  }
}

/* ============================================================
   Responsive layer (DESIGN.md §30 fluid-scaling rule)
   The base inline styles in index.html are the desktop design;
   these classes are additive and override just the properties
   that need to change per viewport, via !important where the
   inline style would otherwise win the cascade.
   ============================================================ */

/* fluid section padding — replaces fixed "120px 56px" */
.section-pad{padding:clamp(56px,12vw,120px) clamp(20px,6vw,56px) !important}
.section-pad-sm{padding:clamp(40px,9vw,84px) clamp(20px,6vw,56px) !important}
.section-pad-md{padding:clamp(48px,10vw,96px) clamp(20px,6vw,56px) !important}
.footer-pad{padding:clamp(48px,10vw,88px) clamp(20px,6vw,56px) clamp(24px,5vw,36px) !important}

/* fluid headline sizes (inline `font` shorthand still supplies
   weight/line-height/family; only size needs the override) */
.fluid-h1{font-size:clamp(34px,5vw + 1rem,66px) !important}
.fluid-h2-lg{font-size:clamp(26px,4vw + 0.5rem,52px) !important}
.fluid-h2{font-size:clamp(24px,3vw + 0.8rem,40px) !important}
.fluid-h2-sm{font-size:clamp(22px,2.4vw + 0.8rem,32px) !important}
.fluid-h2-34{font-size:clamp(23px,2.6vw + 0.8rem,34px) !important}
.fluid-h2-30{font-size:clamp(22px,2.2vw + 0.8rem,30px) !important}

/* header nav: hide the plain-text link list under the pill CTA
   breakpoint — there's no mobile menu content defined yet
   (DESIGN.md's [MENU] hamburger has no confirmed items), so we
   keep logo + CONTACT reachable and drop the decorative-only list */
@media (max-width:760px){
  .nav-text-items{display:none !important}
  .header-bar{padding:18px 20px !important}
  .logo-sub{display:none}
}

/* body-copy blocks: on mobile these read as loose floating text with no
   containment, and one spot (.grid-2col below) was still forcing a
   2-column split that wrapped every line at ~10 characters. Stack to one
   column and box the paragraph groups so they read as organized cards */
@media (max-width:760px){
  .grid-2col{grid-template-columns:1fr !important;gap:20px !important}
  .mobile-card{
    background:rgba(255,255,255,.04);
    border:1px solid rgba(198,166,100,.18);
    border-radius:14px;
    padding:22px 20px;
  }
  .mobile-card p{margin:0 0 16px !important}
  .mobile-card p:last-child{margin-bottom:0 !important}
}

/* two-column "label + content" pattern used across most sections */
@media (max-width:860px){
  .grid-side{grid-template-columns:1fr !important;gap:32px !important}
  .grid-story{grid-template-columns:1fr !important;gap:40px !important}
  .grid-destinations{grid-template-columns:1fr !important;gap:40px !important}
  .grid-destinations > div:first-child{max-width:420px}
  .timeline-row{grid-template-columns:1fr !important;gap:8px !important;padding:20px 0 !important}
  .contact-grid{grid-template-columns:1fr !important}
  .contact-divider{width:100% !important;height:1px !important}
  .contact-pad{padding:36px 28px !important}
  .footer-grid{grid-template-columns:1fr !important;gap:40px !important}
  .cta-flex{flex-direction:column !important;align-items:flex-start !important;gap:28px !important}
}

@media (max-width:980px){
  .grid-services{grid-template-columns:repeat(2,1fr) !important}
}
@media (max-width:560px){
  .grid-services{grid-template-columns:1fr !important}
}

@media (max-width:560px){
  .grid-stats,.grid-stats-3{grid-template-columns:1fr !important}
  .grid-stats > div,.grid-stats-3 > div{border-left:none !important;border-top:1px solid rgba(198,166,100,.22);padding-left:0 !important}
  .grid-stats > div:first-child,.grid-stats-3 > div:first-child{border-top:none;padding-top:0}
}

@media (max-width:760px){
  .footer-nav{grid-template-columns:repeat(2,1fr) !important}
}
@media (max-width:420px){
  .footer-nav{grid-template-columns:1fr !important}
}

@media (max-width:640px){
  .grid-gallery{grid-template-columns:1fr !important;height:auto !important}
  .grid-gallery > div{padding-top:0 !important;height:280px !important}
  .grid-gallery .img-placeholder{height:280px !important}
}

@media (max-width:640px){
  .route-row{grid-template-columns:32px 84px 1fr !important;gap:10px !important}
  .schedule-row{grid-template-columns:1fr !important;gap:6px !important}
}

@media (max-width:600px){
  /* DESIGN.md §9/§30-4: svh-based so the hero doesn't jank as the
     mobile browser chrome shows/hides. Capped at 660px (the height
     the diagonal overlay gradient was tuned for) — letting it run to
     the full height of a tall phone (800px+) stretches that gradient
     into a large flat dead zone between the subhead and the news box */
  .hero-wrap{height:clamp(480px,100svh,660px) !important}
  .hero-copy{left:20px !important;right:20px !important;top:150px !important}
  .hero-news{left:20px !important;right:20px !important;max-width:none !important;bottom:36px !important}
  .hero-scroll{display:none}
}

@media (max-width:600px){
  .detail-hero{height:440px !important}
  .detail-back{left:20px !important;top:84px !important}
  .detail-copy{left:20px !important;right:20px !important;bottom:40px !important}
}

@media (max-width:600px){
  .footer-bottom{flex-direction:column !important;align-items:flex-start !important;gap:10px !important}
}

@media (max-width:460px){
  .cta-buttons{flex-direction:column !important;align-items:stretch !important;width:100%}
  .cta-buttons a,.cta-buttons > div{justify-content:center !important;text-align:center}
}

/* the decorative ring rings (DESIGN.md §3 Principle 07) are sized in
   fixed px against a desktop-width section; at narrow widths they
   overpower the text instead of reading as background texture, so
   drop just that gradient layer and keep the diagonal-line texture */
@media (max-width:640px){
  .deco-a{background:repeating-linear-gradient(-45deg,rgba(255,255,255,.028) 0 1px,transparent 1px 26px),linear-gradient(180deg,#0A1132,#070C24) !important}
  .deco-b{background:repeating-linear-gradient(45deg,rgba(255,255,255,.03) 0 1px,transparent 1px 26px),linear-gradient(180deg,#0B1233,#080E27) !important}
  .deco-c{background:repeating-linear-gradient(45deg,rgba(255,255,255,.03) 0 1px,transparent 1px 26px),linear-gradient(180deg,#0B1233,#070C24) !important}
}