/* ==========================================================================
   Jun Hayakawa — Official Site
   Shared stylesheet
   ========================================================================== */

:root {
  --accent: #BE1111;
  --accent-deep: #7A2420;
  --ink: #303030;
  --paper: #FFFFFF;
  --dark: #22201F;
  --ease-out-soft: cubic-bezier(0.19, 1, 0.22, 1);
  --font-heading-ja: 'Hina Mincho', 'Zen Kaku Gothic New', serif;
  --font-heading-en: 'Cormorant', 'Zen Kaku Gothic New', serif;
  --font-body-ja: 'Zen Kaku Gothic New', sans-serif;
  --font-body-en: 'Roboto', 'Zen Kaku Gothic New', sans-serif;
  --heading-weight-ja: 400;
  --heading-weight-en: 300;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

/* Language-driven font swap: body[data-lang="en"] flips headings/body to the EN
   stack. es/fr are Latin-script like en, so they share the same EN font stack
   (no dedicated Spanish/French display face is loaded). */
[data-lang="ja"] .f-heading { font-family: var(--font-heading-ja); font-weight: var(--heading-weight-ja); }
[data-lang="en"] .f-heading, [data-lang="es"] .f-heading, [data-lang="fr"] .f-heading { font-family: var(--font-heading-en); font-weight: var(--heading-weight-en); }
[data-lang="ja"] .f-body { font-family: var(--font-body-ja); }
[data-lang="en"] .f-body, [data-lang="es"] .f-body, [data-lang="fr"] .f-body { font-family: var(--font-body-en); }

a { color: inherit; text-decoration: none; cursor: pointer; }
button { font: inherit; cursor: pointer; }
img { max-width: 100%; display: block; }

.big-heading, .hero-statement { letter-spacing: 0.02em; }

/* ---- Underline link with letter-rise hover (inspired by Benjamin Beilman's
   site: Salient's nectar_cta_letter_animation — each character lifts on
   hover with a slight per-letter stagger). Populated by JS (wrapLetters). ---- */
.underline-link {
  position: relative;
  display: inline-flex;
  width: fit-content;
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  letter-spacing: 0.04em;
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
  overflow: hidden;
}
.underline-link .letter {
  display: inline-block;
  transition: transform 0.45s var(--ease-out-soft), opacity 0.45s var(--ease-out-soft);
}
.underline-link:hover .letter {
  transform: translateY(-4px);
  opacity: 0.55;
}

/* ---- Scroll reveal: fade + rise (Benjamin Beilman's has-animation /
   fade-in-from-bottom pattern) ---- */
.reveal {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 1s var(--ease-out-soft), transform 1s var(--ease-out-soft);
  transition-delay: var(--reveal-delay, 0s);
}
.reveal.from-left { transform: translateX(-40px); }
.reveal.from-right { transform: translateX(40px); }
.reveal.is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* ---- Image reveal: subtle grow-in on scroll (Benjamin Beilman's
   img-with-animation[data-animation=grow-in]) ---- */
.img-reveal { overflow: hidden; }
.img-reveal img {
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 1.1s var(--ease-out-soft), transform 1.3s var(--ease-out-soft);
}
.img-reveal.is-visible img {
  opacity: 1;
  transform: scale(1);
}

/* ---- Image hover zoom + color-overlay fade (Benjamin Beilman's
   .img-with-aniamtion-wrap .hover-wrap / .color-overlay pattern) ---- */
.img-hover { overflow: hidden; position: relative; }
.img-hover img {
  transition: transform 0.9s var(--ease-out-soft);
}
.img-hover:hover img { transform: scale(1.06); }
.img-hover .color-overlay {
  position: absolute; inset: 0;
  background: var(--accent);
  mix-blend-mode: multiply;
  opacity: 0;
  transition: opacity 0.65s cubic-bezier(0.2, 1, 0.2, 1);
  pointer-events: none;
}
.img-hover:hover .color-overlay { opacity: 0.18; }

/* ---- Highlighted text underline sweep (Benjamin Beilman's
   .nectar-highlighted-text em: background-size 0 -> 100% on reveal) ---- */
.highlight { position: relative; }
.highlight em {
  font-style: normal;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 0.3em;
  transition: background-size 1s var(--ease-out-soft);
  padding: 0 2px;
}
.highlight.is-visible em { background-size: 100% 0.3em; }

/* ---- Page-load curtain fade ---- */
#page-curtain {
  position: fixed; inset: 0; z-index: 999;
  background: var(--paper);
  pointer-events: none;
  opacity: 1;
  transition: opacity 1.1s var(--ease-out-soft);
}
#page-curtain.is-hidden { opacity: 0; }
body.no-js #page-curtain { display: none; }

/* ==========================================================================
   Layout primitives shared across pages
   ========================================================================== */

.site-header {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 48px;
  background: var(--paper);
  border-bottom: 1px solid rgba(0,0,0,0.08);
  transition: box-shadow 0.4s ease;
}
.site-header.scrolled { box-shadow: 0 6px 24px rgba(0,0,0,0.06); }

.logo-block { display: flex; flex-direction: column; line-height: 1.4; }
.logo-name { font-size: 22px; letter-spacing: 0.06em; }
.logo-name br.name-break { display: none; }
.logo-role { font-size: 11px; letter-spacing: 0.24em; opacity: 0.6; margin-top: 4px; }

.header-actions { display: flex; align-items: center; gap: 18px; }
.lang-select {
  background: transparent; border: 1px solid var(--ink); color: var(--ink);
  font-family: 'Roboto', sans-serif; font-size: 12px; letter-spacing: 0.1em;
  padding: 7px 22px 7px 12px; cursor: pointer;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23303030'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center;
  transition: border-color 0.3s ease;
}
.lang-select:hover { border-color: var(--accent); }
.lang-select:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.lang-select option { color: #101010; background: #FFFFFF; }
.menu-btn { background: transparent; border: none; padding: 6px; display: flex; align-items: center; }
.menu-btn svg line { transition: transform 0.3s ease, opacity 0.3s ease; }

@media (max-width: 880px) {
  .split { flex-direction: column !important; }
  /* Taller than the old 360px so the landscape source photo (which spans
     head-to-bandoneon top-to-bottom) doesn't need such an aggressive crop
     on tablet-width screens — see .parallax-photo below for the slow
     scroll-linked pan that reveals the rest as the section scrolls by.
     (The .parallax-img override that pairs with this lives further down,
     right after the desktop .split-photo rule it must out-cascade — see
     the comment there for why it can't live in this block.) */
  .split-photo { width: 100% !important; height: 640px !important; }
  .split-copy {
    width: 100% !important; padding: 40px 24px !important;
    text-align: center !important;
  }
  .split-copy p { width: 100% !important; margin: 0 auto !important; }
  .statement-banner { min-height: 420px !important; padding: 56px 24px !important; }
  .statement-banner-row { flex-direction: column !important; align-items: stretch !important; gap: 16px !important; max-width: 100% !important; width: 100% !important; }
  .statement-bar { width: 40px !important; height: 3px !important; align-self: center !important; }
  .statement-copy-inner { text-align: center !important; width: 100% !important; min-width: 0 !important; }
  .statement-text { width: 100% !important; font-size: 22px !important; }
  .statement-quote { width: 100% !important; max-width: 100% !important; }
  .schedule-row-top { flex-wrap: wrap !important; row-gap: 6px; }
  .schedule-venue { padding-left: 0 !important; }
  .schedule-city { display: none !important; }
  .hero-statement { font-size: 30px !important; }
  h2.big-heading { font-size: 34px !important; }
  h1.big-heading { font-size: 34px !important; }
  .site-header, .hero-header-row { padding-left: 24px !important; padding-right: 24px !important; }
  .header-actions { gap: 10px !important; }
  .header-social { gap: 9px !important; }
  br.soft-break { display: none; }
  .logo-name br.name-break { display: block; }
}

/* On real phone widths the 640px height above (tuned for tablet-width
   screens, ~700-880px, where it shows the full head-to-instrument photo
   with only a moderate horizontal crop) becomes a very tall, narrow strip —
   at e.g. 390px wide it's still forced to scale-to-height, which crops in
   hard on the width and leaves a towering column that dominates the screen
   while scrolling. Shorten it here; the photo is still fully visible
   top-to-bottom at this height for any phone-width viewport (no need for
   the scroll-pan effect to reveal anything), just less exaggeratedly zoomed. */
@media (max-width: 600px) {
  .split-photo { height: 300px !important; }
}

/* ---- Slide-out nav menu, staggered item reveal on open ---- */
.nav-overlay {
  position: fixed; inset: 0; z-index: 20;
  background: var(--paper);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  opacity: 0; visibility: hidden;
  transition: opacity 0.5s var(--ease-out-soft);
}
.nav-overlay.is-open { opacity: 1; visibility: visible; }
.nav-overlay .nav-link {
  position: relative;
  font-size: 16px; letter-spacing: 0.04em;
  padding-bottom: 4px;
  opacity: 0; transform: translateX(-72px);
  /* Opacity settles quickly so the label is readable while it is still
     sliding — with --ease-out-soft's steep front-loaded curve, matching
     durations made the slide finish (visually) almost as soon as it
     started, reading as a plain fade rather than a sideways move. */
  transition: opacity 0.22s ease-out, transform 0.5s ease-out, color 0.3s ease;
}
.nav-overlay.is-open .nav-link {
  opacity: 1; transform: translateX(0);
}
/* Red hover with a growing underline, echoing the .underline-link treatment
   used elsewhere on the site. */
.nav-overlay .nav-link::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out-soft);
}
.nav-overlay .nav-link:hover,
.nav-overlay .nav-link:focus-visible {
  color: var(--accent);
}
.nav-overlay .nav-link:hover::after,
.nav-overlay .nav-link:focus-visible::after {
  transform: scaleX(1);
}
.nav-overlay.is-open .nav-link:nth-child(2) { transition-delay: 0.05s; }
.nav-overlay.is-open .nav-link:nth-child(3) { transition-delay: 0.10s; }
.nav-overlay.is-open .nav-link:nth-child(4) { transition-delay: 0.15s; }
.nav-overlay.is-open .nav-link:nth-child(5) { transition-delay: 0.20s; }
.nav-overlay.is-open .nav-link:nth-child(6) { transition-delay: 0.25s; }
.nav-overlay.is-open .nav-link:nth-child(7) { transition-delay: 0.30s; }
.nav-overlay.is-open .nav-link:nth-child(8) { transition-delay: 0.35s; }
.nav-overlay.is-open .nav-link:nth-child(9) { transition-delay: 0.40s; }
.nav-overlay.is-open .nav-link:nth-child(10) { transition-delay: 0.45s; }
@media (min-height: 700px) {
  .nav-overlay .nav-link { font-size: 18px; }
}
@media (min-height: 860px) {
  .nav-overlay { gap: 22px; }
}
.nav-close { position: absolute; top: 30px; right: 48px; background: none; border: none; }

/* A narrow photo strip stays visible at the edge of the menu on wider
   screens (inspired by Benjamin Beilman's slide-out menu, reimplemented
   with our own photo) — hidden on phones, where the space is too tight. */
.nav-overlay-photo { display: none; }
@media (min-width: 700px) {
  .nav-overlay-photo {
    display: block;
    position: absolute; top: 0; left: 0; bottom: 0;
    width: 220px;
    overflow: hidden;
  }
  .nav-overlay-photo::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,0.12), rgba(0,0,0,0) 60%);
  }
  .nav-overlay-photo img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: 45% 35%;
    opacity: 0; transform: scale(1.06) translateY(10px);
    /* Transition lives only on the .is-open rule below — same reasoning as
       the homepage hero photo: putting it here too would let this base,
       not-yet-open state animate on its own (e.g. right as the menu is
       toggled closed), eating into the rise the next time it opens. */
  }
  .nav-overlay.is-open .nav-overlay-photo img {
    opacity: 1; transform: scale(1) translateY(0);
    transition: opacity 0.9s cubic-bezier(0.33, 1, 0.68, 1) 0.15s, transform 1.1s cubic-bezier(0.33, 1, 0.68, 1) 0.15s;
  }
  .nav-overlay { padding-left: 220px; }
}
@media (min-width: 1000px) {
  .nav-overlay-photo { width: 280px; }
  .nav-overlay { padding-left: 280px; }
}

.header-social { display: flex; align-items: center; gap: 13px; }
.header-social a svg { transition: transform 0.3s var(--ease-out-soft), opacity 0.3s ease; }
.header-social a:hover svg { transform: translateY(-2px); opacity: 0.6; }

.site-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 28px 48px; flex-wrap: wrap; gap: 16px;
  border-top: 1px solid rgba(0,0,0,0.08);
}

/* ==========================================================================
   Home page sections
   ========================================================================== */

.hero { position: relative; height: 880px; overflow: hidden; }
.hero img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 32%;
  filter: saturate(1.12) contrast(1.1);
  opacity: 0; transform: scale(1.045) translateY(16px);
  /* No transition here on purpose — this is the pre-reveal resting state,
     set the instant body.no-js is removed at DOMContentLoaded (well before
     the curtain lifts). If the transition lived on this rule too, that
     early no-js removal would itself animate opacity 1→0 and eat into the
     entrance rise below before it even starts. The transition belongs only
     on the .is-loaded rule, the one change we actually want to see. */
}
.hero.is-loaded img {
  opacity: 1; transform: scale(1) translateY(0);
  /* A gentler, more evenly-paced curve than --ease-out-soft on purpose: that
     curve is so front-loaded a transition reads as "arrived" within the
     first fraction of a second regardless of duration (see the nav-menu
     stagger above) — wrong here, where the whole point is a slow, visible
     rise rather than a snap. */
  transition: opacity 1.6s cubic-bezier(0.33, 1, 0.68, 1), transform 2s cubic-bezier(0.33, 1, 0.68, 1);
}
body.no-js .hero img { opacity: 1; transform: none; }
.hero-tint {
  position: absolute; inset: 0;
  background: var(--accent);
  mix-blend-mode: multiply;
  opacity: 0.16;
}
.hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 58%, rgba(0,0,0,0.55) 100%);
}
.hero-header-row {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 30px 48px; z-index: 3;
}
.hero-header-row .logo-name, .hero-header-row .logo-role { color: #FFFFFF; }
.hero-header-row .lang-select {
  border-color: #FFFFFF; color: #FFFFFF;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23FFFFFF'/%3E%3C/svg%3E");
}
.hero-header-row .lang-select:hover { border-color: #FFFFFF; opacity: 0.8; }
.hero-header-row .menu-btn svg { stroke: #FFFFFF; }
.hero-statement {
  position: absolute; left: 48px; right: 48px; bottom: 96px; max-width: 720px; z-index: 2;
  font-size: 46px; line-height: 1.3; color: #FFFFFF;
  opacity: 0; transform: translateY(22px);
  /* Transition lives on .is-loaded only — see the comment on .hero img above. */
}
.hero.is-loaded .hero-statement {
  opacity: 1; transform: translateY(0);
  transition: opacity 1.5s cubic-bezier(0.33, 1, 0.68, 1) 0.4s, transform 1.8s cubic-bezier(0.33, 1, 0.68, 1) 0.4s;
}
body.no-js .hero-statement { opacity: 1; transform: none; }

.split { display: flex; align-items: stretch; }
.split-photo { width: 46%; height: 640px; overflow: hidden; position: relative; }
/* At this box's desktop proportions the photo already shows top-to-bottom
   with zero vertical cropping (it's taller, relatively, than the source
   photo), so skip the shared .parallax-img oversize/drift here — it would
   only crop out content that was already fully visible. The narrower
   tablet/mobile box below is genuinely too short for that, so it keeps
   the oversize and gets the scroll-linked pan instead. */
/* No oversize/pan here (unlike most .parallax-photo instances): at every
   width this box is used at (46%-wide desktop row down to the full-width
   mobile block below), the box stays wider, relatively, than the source
   photo is tall — object-fit:cover is always height-bound here, so a plain
   100%-height box already shows the complete head-to-instrument photo with
   no vertical crop to hide and reveal via scrolling. Kept as one
   unconditional rule (rather than split desktop/mobile copies) so it can
   never drift out of sync with the .split-photo box heights below. */
.split-photo .parallax-img { height: 100% !important; top: 0 !important; object-position: 60% 45%; }
.split-copy { width: 54%; display: flex; flex-direction: column; justify-content: center; padding: 56px 64px; gap: 20px; }
.split-copy p { font-size: 15px; line-height: 1.9; max-width: 440px; margin: 0; }

.featured-album {
  position: relative; min-height: 480px; background: var(--dark); color: #FFFFFF;
  display: flex; align-items: center; flex-wrap: wrap;
}
.featured-album .art { width: 42%; min-width: 320px; display: flex; align-items: center; justify-content: center; padding: 48px; }
.featured-album .art img { width: 100%; max-width: 360px; height: auto; box-shadow: 0 18px 50px rgba(0,0,0,0.45); }
.featured-album .copy { width: 58%; min-width: 320px; padding: 48px 64px 48px 24px; }
.featured-album .eyebrow { font-family: 'Roboto', sans-serif; font-size: 13px; letter-spacing: 0.18em; margin-bottom: 10px; opacity: 0.85; }
.featured-album p { font-size: 14px; line-height: 1.85; margin: 0 0 18px 0; opacity: 0.92; max-width: 520px; }

/* ---- Reusable full-bleed photo backdrop with a gentle scroll parallax.
   The image sits 15% taller than its frame so JS (initParallax in main.js)
   can nudge it a few pixels off dead-center as the section crosses the
   viewport — a soft drift, not a hard pin. ---- */
.parallax-photo { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.parallax-photo .parallax-img {
  position: absolute; left: 0; top: -15%;
  width: 100%; height: 130%;
  object-fit: cover;
  will-change: transform;
}

.statement-banner {
  position: relative;
  min-height: 560px;
  display: flex; align-items: center;
  overflow: hidden;
  color: #FFFFFF;
  padding: 90px 64px;
}
.statement-banner .parallax-img { object-position: 63% 36%; }
.statement-banner-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(20,17,16,0.32) 0%, rgba(20,17,16,0.58) 100%);
}
.statement-banner-row {
  position: relative; z-index: 2;
  display: flex; flex-direction: row; align-items: flex-start; gap: 28px;
  /* Wide enough that each hand-placed <br class="soft-break"> line in the
     Japanese copy (measured up to ~821px at this font-size) renders as a
     single line instead of auto-wrapping mid-phrase. min-width:0 below lets
     this shrink gracefully on viewports too narrow to offer 860px. */
  max-width: 860px;
  /* .statement-banner is a row flex container with no justify-content, so
     without this the row just sits at its flex-start (left) edge — barely
     visible on a typical desktop-width screen where 860px fills most of
     the section, but on anything wider than ~988px (tablet landscape,
     smaller desktop windows) it leaves a growing, lopsided gap on the
     right. Center it explicitly instead of relying on leftover flex space. */
  margin: 0 auto;
}
.statement-bar { width: 3px; align-self: stretch; background: var(--accent); flex-shrink: 0; }
/* min-width: 0 overrides the flex-item default of min-width:auto, which
   otherwise refuses to shrink this column below the intrinsic width of its
   longest hard-broken (<br>) line — at 30px that line is wider than the
   640px row, so without this the text silently spills past the column
   instead of wrapping onto an extra line. */
.statement-copy-inner { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
.statement-text { font-size: 30px; line-height: 1.45; margin: 0; color: #FFFFFF; }
.statement-quote { margin: 0; padding-top: 26px; border-top: 1px solid rgba(255,255,255,0.3); max-width: 540px; }
.statement-quote p { font-family: 'Cormorant', 'Hina Mincho', serif; font-style: italic; font-size: 18px; line-height: 1.7; margin: 0; opacity: 0.92; }
.statement-quote cite { display: block; margin-top: 12px; font-family: 'Roboto', sans-serif; font-style: normal; font-size: 12px; letter-spacing: 0.05em; opacity: 0.7; }

.news-strip { background: var(--accent-deep); }
.news-strip-inner {
  max-width: 980px; margin: 0 auto; padding: 26px 48px;
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  color: #FFFFFF;
}
.news-strip-eyebrow { flex-shrink: 0; font-family: 'Roboto', sans-serif; font-size: 12px; letter-spacing: 0.18em; color: rgba(255,255,255,0.85); }
.news-strip-item {
  display: flex; align-items: baseline; gap: 16px; flex: 1 1 auto; min-width: 0;
  text-decoration: none; color: inherit;
}
.news-strip-date { font-family: 'Roboto', sans-serif; font-size: 13px; opacity: 0.65; flex-shrink: 0; }
.news-strip-title {
  font-size: 14px; opacity: 0.92; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: opacity 0.3s ease;
}
.news-strip-item:hover .news-strip-title { opacity: 1; }
.news-strip-link { flex-shrink: 0; font-family: 'Roboto', sans-serif; font-size: 12px; color: #FFFFFF; }
@media (max-width: 640px) {
  .news-strip-inner { flex-direction: column; align-items: flex-start; gap: 10px; padding: 22px 24px; }
  .news-strip-title { white-space: normal; }
}

.schedule-preview { padding: 96px 48px; text-align: center; }
.schedule-preview .schedule-list { max-width: 980px; margin: 0 auto; text-align: left; }
.schedule-row {
  display: flex; flex-direction: column; gap: 10px; padding: 22px 0;
  border-top: 1px solid rgba(0,0,0,0.15);
}
.schedule-end { border-top: 1px solid rgba(0,0,0,0.15); }
.schedule-row-top { display: flex; align-items: center; gap: 24px; }
.schedule-date { width: 130px; flex-shrink: 0; font-family: 'Roboto', sans-serif; font-size: 15px; }
.schedule-venue { font-size: 15px; padding-left: 154px; }
.schedule-city { width: 90px; flex: 0 0 auto; min-width: 0; font-size: 15px; opacity: 0.75; }
.schedule-detail {
  flex-shrink: 0; margin-left: auto; font-family: 'Roboto', sans-serif; font-size: 13px;
  background: rgba(0,0,0,0.05); border-radius: 4px; padding: 8px 14px;
  transition: background 0.3s ease;
}
.schedule-row:hover .schedule-detail { background: rgba(0,0,0,0.1); }

.contact-closer { display: flex; align-items: stretch; }
.contact-closer-photo { position: relative; width: 44%; min-width: 300px; flex-shrink: 0; height: 460px; overflow: hidden; }
.contact-closer-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 45%; filter: saturate(0.82) brightness(1.08) contrast(0.94); }
.contact-closer-photo::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,0) 58%, var(--paper) 100%);
}
.contact-closer-info {
  flex: 1 1 360px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  gap: 20px; padding: 60px 64px; text-align: left; background: var(--paper);
}
.contact-closer-info p { font-size: 15px; line-height: 1.9; opacity: 0.85; margin: 0; max-width: 420px; }
.contact-closer-info .contact-email { font-family: 'Roboto', sans-serif; font-size: 15px; }
@media (max-width: 720px) {
  .contact-closer { flex-direction: column; }
  .contact-closer-photo { width: 100%; height: 320px; }
  .contact-closer-photo::after { background: linear-gradient(180deg, rgba(255,255,255,0) 55%, var(--paper) 100%); }
  .contact-closer-info { padding: 40px 24px; }
}

.contact-section { padding: 100px 48px; text-align: center; background: var(--paper); }
.contact-section .eyebrow { font-family: 'Roboto', sans-serif; font-size: 13px; letter-spacing: 0.18em; color: var(--accent); margin-bottom: 16px; }
.contact-section h2 { font-size: 44px; margin: 0 0 20px 0; }
.contact-section p { font-size: 15px; line-height: 1.9; max-width: 560px; margin: 0 auto 32px auto; opacity: 0.85; }
.contact-email { display: inline-block; font-family: 'Roboto', sans-serif; font-size: 15px; letter-spacing: 0.02em; margin-bottom: 44px; border-bottom: none !important; }

/* ==========================================================================
   Concerts page
   ========================================================================== */

.page-hero { padding: 96px 48px 40px 48px; text-align: center; }
.page-hero .eyebrow { font-family: 'Roboto', sans-serif; font-size: 13px; letter-spacing: 0.18em; color: var(--accent); margin-bottom: 16px; }
.page-hero h1 { font-size: 56px; margin: 0 0 18px 0; }
.page-hero .note { font-size: 13px; max-width: 520px; margin: 0 auto; line-height: 1.8; opacity: 0.7; }

.page-hero-photo { position: relative; width: 100%; height: 420px; overflow: hidden; margin-bottom: 8px; }
.page-hero-photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.88) brightness(1.03) contrast(0.97); }
.page-hero-photo::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, var(--paper) 100%);
}
@media (max-width: 720px) {
  .page-hero-photo { height: 260px; }
}

.schedule-full { max-width: 980px; margin: 0 auto; padding: 20px 48px 100px 48px; }
.schedule-full .schedule-row { padding: 24px 0; cursor: pointer; }
.schedule-full .schedule-date { width: 110px; }
.schedule-full .schedule-venue { padding-left: 134px; }
.schedule-full .schedule-city { width: 140px; flex: 0 0 auto; }
.schedule-full .schedule-time { width: 110px; flex-shrink: 0; font-size: 13px; opacity: 0.7; }
.schedule-detail[data-toggle-detail] { border: none; cursor: pointer; font-family: 'Roboto', sans-serif; }
.schedule-detail[data-toggle-detail][aria-expanded="true"] { background: var(--accent); color: #fff; }
.schedule-detail-panel {
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 0.45s var(--ease-out-soft), opacity 0.3s ease, padding 0.45s var(--ease-out-soft);
  padding: 0 0 0 0;
}
.schedule-detail-panel.is-open { max-height: 600px; opacity: 1; padding: 0 0 28px 0; }
.schedule-detail-panel .detail-inner {
  background: rgba(0,0,0,0.03); border-radius: 6px; padding: 20px 26px;
  font-size: 14px; line-height: 2; opacity: 0.85;
}
.schedule-detail-panel .detail-inner div { display: flex; gap: 10px; }
.schedule-detail-panel .detail-inner .detail-label { flex-shrink: 0; width: 70px; opacity: 0.6; font-size: 12px; letter-spacing: 0.04em; }
.schedule-detail-panel .detail-inner div > span:last-child { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
.tour-block {
  margin: 32px 0; padding: 32px 32px 16px 32px;
  background: rgba(190,17,17,0.045);
  border-left: 3px solid var(--accent);
  border-top: none;
}
.tour-block .tour-title { font-family: 'Cormorant', 'Hina Mincho', serif; font-size: 20px; margin: 0 0 8px 0; color: var(--accent); }
.tour-block .tour-note { font-size: 13px; line-height: 1.9; opacity: 0.75; max-width: 640px; margin: 0 0 20px 0; }
.tour-block .schedule-row { border-top: 1px solid rgba(190,17,17,0.12); padding: 18px 0 18px 20px; }
.tour-block .schedule-row:first-of-type { border-top: none; }
.tour-block .schedule-detail { background: rgba(190,17,17,0.1); }
.tour-block .schedule-row:hover .schedule-detail { background: rgba(190,17,17,0.18); }
@media (max-width: 640px) {
  .tour-block { padding: 28px 20px 12px 20px; margin: 24px -20px; border-radius: 0; }
}

/* ---- Tour flyer thumbnail in a tour-block's header ---- */
.tour-header-flyer { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 4px; }
.tour-flyer { flex-shrink: 0; width: 92px; height: 92px; overflow: hidden; display: block; box-shadow: 0 8px 20px rgba(0,0,0,0.18); }
.tour-flyer img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out-soft); }
.tour-flyer:hover img { transform: scale(1.07); }
.tour-header-copy { flex: 1 1 auto; min-width: 0; }
.tour-header-copy .tour-title { margin: 0 0 8px 0; }
.tour-header-copy .tour-note { margin: 0 0 20px 0; }
@media (max-width: 560px) {
  .tour-flyer { width: 72px; height: 72px; }
}

/* ---- Featured show: a single flagship performance called out with a
   flyer image and dark card treatment (mirrors .featured-album) ---- */
.featured-show {
  position: relative; margin: 40px 0; background: var(--dark); color: #FFFFFF;
  display: flex; align-items: stretch; flex-wrap: wrap; overflow: hidden;
}
.featured-show .flyer { width: 34%; min-width: 260px; overflow: hidden; }
.featured-show .flyer img { width: 100%; height: 100%; object-fit: cover; display: block; }
.featured-show .info { flex: 1 1 320px; min-width: 280px; padding: 44px 48px; }
.featured-show .eyebrow { font-family: 'Roboto', sans-serif; font-size: 13px; letter-spacing: 0.18em; color: var(--accent); margin-bottom: 12px; }
.featured-show h3 { font-family: 'Cormorant', 'Hina Mincho', serif; font-weight: 400; font-size: 28px; margin: 0 0 6px 0; }
.featured-show .fs-date { font-family: 'Roboto', sans-serif; font-size: 13px; letter-spacing: 0.03em; opacity: 0.85; margin-bottom: 18px; }
.featured-show .fs-note { font-size: 14px; line-height: 1.85; opacity: 0.9; margin: 0 0 22px 0; max-width: 460px; }
.featured-show .fs-detail { font-size: 13px; line-height: 2.1; opacity: 0.85; }
.featured-show .fs-detail .detail-label { display: inline-block; width: 84px; opacity: 0.6; }
@media (max-width: 720px) {
  .featured-show .flyer { width: 100%; min-width: 0; height: 320px; }
  .featured-show .info { padding: 32px 24px; }
}

.past-note { text-align: center; font-size: 12px; opacity: 0.5; margin: 0 0 8px 0; font-family: 'Roboto', sans-serif; letter-spacing: 0.04em; }
.past-note a { border-bottom: 1px solid rgba(0,0,0,0.3); }

/* ==========================================================================
   Archive page
   ========================================================================== */
.archive-list-wrap { max-width: 820px; margin: 0 auto; padding: 20px 48px 120px 48px; }
.archive-year { border-top: 1px solid rgba(0,0,0,0.15); }
.archive-year:last-child { border-bottom: 1px solid rgba(0,0,0,0.15); }
.archive-year summary {
  cursor: pointer; padding: 26px 4px; display: flex; align-items: baseline; gap: 14px;
  list-style: none; user-select: none;
}
.archive-year summary::-webkit-details-marker { display: none; }
.archive-year summary::before {
  content: '+'; font-family: 'Cormorant', serif; font-size: 22px; width: 20px; flex-shrink: 0;
  color: var(--accent); transition: transform 0.3s ease;
}
.archive-year[open] summary::before { content: '–'; }
.archive-year-num { font-size: 26px; letter-spacing: 0.04em; }
.archive-year-count { font-size: 12px; opacity: 0.5; }
.archive-list { padding: 0 4px 32px 38px; display: flex; flex-direction: column; gap: 2px; }
.archive-row {
  display: flex; gap: 18px; padding: 7px 0; font-size: 13px; line-height: 1.6;
  border-top: 1px dotted rgba(0,0,0,0.1);
}
.archive-row:first-child { border-top: none; }
.archive-date { flex-shrink: 0; width: 108px; font-family: 'Roboto', sans-serif; opacity: 0.55; font-size: 12px; }
.archive-date-wide { width: auto; opacity: 0.85; font-family: inherit; font-size: 13px; }
.archive-venue { opacity: 0.85; }
@media (max-width: 640px) {
  .archive-list { padding-left: 4px; }
  .archive-row { flex-direction: column; gap: 2px; }
  .archive-date { width: auto; }
}
@media (max-width: 880px) {
  .schedule-full .schedule-city { display: none !important; }
}
/* On phones the general .schedule-row-top { flex-wrap: wrap } above (set
   for the homepage's shorter date-only preview rows) forces this page's
   wider date+time+detail row to wrap — the "詳細" button drops to its own
   line, doubling each row's height. This page's rows have room to stay on
   one line once given tighter spacing, so keep them there instead. */
@media (max-width: 640px) {
  .schedule-full { padding-left: 24px !important; padding-right: 24px !important; }
  .schedule-full .schedule-row-top { flex-wrap: nowrap !important; gap: 10px; }
  .schedule-full .schedule-date { width: auto !important; font-size: 14px; }
  .schedule-full .schedule-time { width: auto !important; font-size: 12px; }
  .schedule-full .schedule-venue { padding-left: 0 !important; font-size: 13px; }
  .schedule-full .schedule-detail[data-toggle-detail] { padding: 6px 10px; font-size: 12px; }
  .tour-block .schedule-row { padding-left: 12px; }
}

/* ==========================================================================
   Discography page
   ========================================================================== */

.disco-hero { padding: 96px 48px 40px 48px; text-align: center; }
.disco-hero .eyebrow { font-family: 'Roboto', sans-serif; font-size: 13px; letter-spacing: 0.18em; color: var(--accent); margin-bottom: 16px; }
.disco-hero h1 { font-size: 56px; margin: 0 0 18px 0; }
.disco-hero .note { font-size: 13px; max-width: 560px; margin: 0 auto; line-height: 1.8; opacity: 0.7; }
.disco-list { max-width: 980px; margin: 0 auto; padding: 20px 48px 120px 48px; display: flex; flex-direction: column; gap: 64px; }
.disco-item { display: flex; gap: 48px; align-items: center; flex-wrap: wrap; }
.disco-item .art { width: 260px; flex-shrink: 0; }
.disco-item .art img { box-shadow: 0 18px 50px rgba(0,0,0,0.2); }
.disco-item .copy { flex: 1 1 320px; min-width: 280px; }
.disco-item .eyebrow { font-family: 'Roboto', sans-serif; font-size: 13px; letter-spacing: 0.18em; margin-bottom: 10px; opacity: 0.6; }
.disco-item h2 { font-size: 32px; margin: 0 0 14px 0; }
.disco-item p { font-size: 14px; line-height: 1.85; margin: 0 0 18px 0; max-width: 480px; }
.disco-note-box {
  max-width: 980px; margin: 0 auto 0 auto; padding: 0 48px 60px 48px;
  font-family: 'Roboto', sans-serif; font-size: 13px; line-height: 1.9; opacity: 0.65; text-align: center;
}

/* ---- Shop / purchase controls ---- */
.buy-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.buy-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ink); color: #FFFFFF;
  font-family: 'Roboto', sans-serif; font-size: 13px; letter-spacing: 0.06em;
  padding: 11px 22px; border-radius: 2px;
  transition: background 0.3s ease, transform 0.3s var(--ease-out-soft);
}
.buy-btn:hover { background: var(--accent); transform: translateY(-2px); }
.buy-btn[aria-disabled="true"] {
  background: rgba(0,0,0,0.08); color: var(--ink); opacity: 0.55; cursor: default; pointer-events: none;
}
.price-tag { font-family: 'Roboto', sans-serif; font-size: 13px; opacity: 0.6; }

.fs-reserve-btn {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 24px;
  background: var(--accent); color: #FFFFFF;
  font-family: 'Roboto', sans-serif; font-size: 13px; letter-spacing: 0.06em;
  padding: 12px 24px; border-radius: 2px;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s var(--ease-out-soft);
}
.fs-reserve-btn:hover { background: #FFFFFF; color: var(--dark); transform: translateY(-2px); }
.format-tags { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 18px 0; }
.format-tag {
  font-family: 'Roboto', sans-serif; font-size: 11px; letter-spacing: 0.08em;
  border: 1px solid rgba(0,0,0,0.2); border-radius: 20px; padding: 4px 12px; opacity: 0.7;
}
.coming-soon-badge {
  display: inline-block; font-family: 'Roboto', sans-serif; font-size: 11px; letter-spacing: 0.1em;
  color: var(--accent); border: 1px solid var(--accent); border-radius: 20px; padding: 4px 12px; margin-bottom: 12px;
}