/* =========================================================
   WIRED-INSPIRED EDITORIAL DESIGN SYSTEM
   for Die Gilde der Musiker KYUSHU / ギルド・ムジカ九州
   ========================================================= */

:root{
  /* INK */
  --ink-black:#000000;
  --ink-page:#1a1a1a;
  --paper:#ffffff;

  /* GRAYS */
  --caption:#757575;
  --disabled:#999999;
  --hairline:#e2e8f0;
  --soft-bg:#f6f6f3;

  /* THE ONE COLOR */
  --link-blue:#057dbc;

  /* TYPE STACKS — substitutes for proprietary WIRED faces */
  --display:'Playfair Display','Noto Serif JP',Georgia,serif;
  --body:'Source Serif 4','Noto Serif JP',Georgia,serif;
  --ui:'Inter','Noto Sans JP',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'JetBrains Mono','Noto Sans JP',Menlo,Monaco,Courier,monospace;

  /* GRID */
  --max:1440px;
  --pad-x:64px;
  --gut:32px;
}

@media (max-width:1023px){:root{--pad-x:32px;--gut:24px}}
@media (max-width:767px){:root{--pad-x:20px;--gut:20px}}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
/* Prevent horizontal overflow caused by full-bleed elements that
   use width:100vw / margin-left:calc(50% - 50vw). On mobile, 100vw
   includes the scrollbar gutter while the actual content area does
   not, so those elements end up ~15px wider than the viewport and
   the whole page becomes horizontally scrollable. `overflow-x: clip`
   visually clips the overflow without creating a new scroll container,
   so position:fixed / sticky inside the page still work normally. */
html,body{overflow-x:clip}
body{
  font-family:var(--body);
  font-size:16px;
  line-height:1.5;
  color:var(--ink-page);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
img,video{display:block;max-width:100%;height:auto;border:0}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}

/* —— NO ROUNDED CORNERS ANYWHERE —— */
*{border-radius:0}

/* —— TYPOGRAPHIC ROLES —— */
.kicker{
  font-family:var(--mono);
  font-size:12px;
  font-weight:400;
  line-height:1.23;
  letter-spacing:1.1px;
  text-transform:uppercase;
  color:var(--ink-page);
  display:inline-block;
}
.kicker--bold{font-weight:700}
.kicker--white{color:var(--paper)}
/* Filled black-tile variant — used for status labels next to a
   concert heading (e.g. "開催終了" / "次期開催予定"). Pairs with
   .concert-status-note (gray plain text shown beside the badge). */
.kicker--badge{
  background:var(--ink-black);
  color:var(--paper);
  padding:6px 12px;
  letter-spacing:1.6px;
}
.concert-status{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.concert-status-note{
  font-family:var(--body, Georgia, serif);
  font-size:13px;
  color:var(--caption, #666);
  line-height:1.5;
}
.kicker--blue{color:var(--link-blue)}

.eyebrow-rule{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}
.eyebrow-rule::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--ink-black);
  display:block;
}

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:400;
  color:var(--ink-page);
  margin:0;
  letter-spacing:-0.5px;
}
.display-xxl{
  font-family:var(--display);
  font-size:clamp(40px,6.4vw,82px);
  line-height:1.05;     /* +0.12 from the 0.93 token to compensate Playfair metrics */
  letter-spacing:-1.2px;
}
.display-xl{
  font-family:var(--display);
  font-size:clamp(32px,4.8vw,64px);
  line-height:1.06;
  letter-spacing:-0.9px;
}
.display-l{
  font-family:var(--display);
  font-size:clamp(26px,3vw,40px);
  line-height:1.12;
  letter-spacing:-0.5px;
}
.display-m{
  font-family:var(--display);
  font-size:clamp(22px,2.2vw,28px);
  line-height:1.18;
  letter-spacing:-0.28px;
}

/* Japanese-leaning headline variant — slightly looser, less negative tracking */
.display-jp{
  font-family:var(--display);
  font-feature-settings:"palt" 1;
  letter-spacing:-0.02em;
}

.deck{
  font-family:var(--body);
  font-size:19px;
  line-height:1.55;
  letter-spacing:0.05px;
  color:var(--ink-page);
}
.body{
  font-family:var(--body);
  font-size:16px;
  line-height:1.7;
  color:var(--ink-page);
}
.body p{margin:0 0 1.1em}
.body p:last-child{margin-bottom:0}

.caption{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.9px;
  text-transform:uppercase;
  color:var(--caption);
}
.timestamp{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--caption);
}

a.inline-link{
  color:var(--ink-page);
  border-bottom:1px solid currentColor;
  transition:color 120ms linear;
}
a.inline-link:hover{color:var(--link-blue)}

/* —— BUTTONS (square, 2px hard black, color-flip on hover) —— */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 24px;
  border:2px solid var(--ink-black);
  background:var(--paper);
  color:var(--ink-black);
  font-family:var(--ui);
  font-size:14px;
  font-weight:700;
  letter-spacing:0.6px;
  text-transform:uppercase;
  transition:background 150ms linear,color 150ms linear;
  min-height:46px;
}
.btn:hover{background:var(--ink-black);color:var(--paper)}
.btn--inverted{background:var(--ink-black);color:var(--paper);border-color:var(--paper)}
.btn--inverted:hover{background:var(--paper);color:var(--ink-black)}
.btn .arrow{font-family:var(--mono);font-weight:400}

/* —— TOP UTILITY BAR —— */
.utility-bar{
  background:var(--ink-black);
  color:var(--paper);
  height:60px;
  display:flex;
  align-items:center;
  padding:0 var(--pad-x) 0 0;     /* logo flush-left, content padding kept on right */
  position:sticky;
  top:0;
  z-index:100;
  font-family:var(--mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:1.2px;
  transition:height 220ms cubic-bezier(.2,.7,.2,1);
}
body.scrolled .utility-bar{height:38px}
.utility-bar nav{display:flex;align-items:center;gap:0;flex:1;overflow-x:auto;scrollbar-width:none;align-self:stretch}
.utility-bar nav::-webkit-scrollbar{display:none}

/* Burger button — hidden on desktop, shown on mobile (≤899px).
   Three short bars; animates to "X" when nav is open. */
.bar-burger{
  display:none;
  width:44px;
  height:44px;
  margin-left:auto;
  margin-right:8px;
  background:transparent;
  border:0;
  padding:0;
  cursor:pointer;
  align-self:center;
  flex:0 0 auto;
  position:relative;
}
.bar-burger span{
  position:absolute;
  left:10px;
  width:24px;
  height:2px;
  background:var(--paper);
  transition:transform 220ms cubic-bezier(.2,.7,.2,1),
             opacity 160ms linear,
             top 220ms cubic-bezier(.2,.7,.2,1);
}
.bar-burger span:nth-child(1){top:14px}
.bar-burger span:nth-child(2){top:21px}
.bar-burger span:nth-child(3){top:28px}
body.nav-open .bar-burger span:nth-child(1){top:21px;transform:rotate(45deg)}
body.nav-open .bar-burger span:nth-child(2){opacity:0}
body.nav-open .bar-burger span:nth-child(3){top:21px;transform:rotate(-45deg)}
.utility-bar a{
  color:var(--paper);
  padding:0 13px;
  display:inline-flex;
  align-items:center;
  border-right:1px solid #2a2a2a;
  transition:color 120ms linear,background 120ms linear;
  white-space:nowrap;
  flex:0 0 auto;
  align-self:stretch;
}
.utility-bar nav a:first-of-type{border-left:1px solid #2a2a2a}
.utility-bar a:hover{color:var(--link-blue)}

/* Brand logo — flush left of the bar, scales with bar height */
.bar-logo{
  display:inline-flex;
  align-items:center;
  padding:0 20px;
  border-right:1px solid #2a2a2a;
  align-self:stretch;
  flex:0 0 auto;
  transition:padding 220ms cubic-bezier(.2,.7,.2,1);
}
.bar-logo img{
  height:36px;
  width:auto;
  display:block;
  transition:height 220ms cubic-bezier(.2,.7,.2,1);
}
body.scrolled .bar-logo{padding:0 16px}
body.scrolled .bar-logo img{height:20px}

/* Inverted CTA inside the bar — pushes to the right edge on desktop */
.utility-bar .bar-cta{
  margin-left:auto;
  background:var(--paper);
  color:var(--ink-black) !important;
  font-weight:700;
  letter-spacing:1.4px;
  border-left:1px solid #2a2a2a;
}
.utility-bar .bar-cta:hover{
  background:var(--link-blue);
  color:var(--paper) !important;
}
/* Language selector — native <select> styled to fit the dark utility
   bar. Replaces the inline 7-token strip; saves horizontal real estate
   so the nav can fit comfortably on smaller widescreens. The chevron
   is drawn with two tiny rotated background gradients to avoid an SVG
   asset. The currently-active language is the selected option with
   value="" so picking it again is a no-op (the JS handler skips empty
   values). */
.utility-bar .lang-select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background-color:transparent;
  border:0;
  border-left:1px solid #2a2a2a;
  color:#9a9a9a;
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:1.6px;
  text-transform:uppercase;
  padding:0 26px 0 14px;
  height:100%;
  align-self:stretch;
  flex:0 0 auto;
  cursor:pointer;
  outline:none;
  /* Chevron — two 5px squares meeting at a point, drawn from the right edge. */
  background-image:
    linear-gradient(45deg,  transparent 50%, #9a9a9a 50%),
    linear-gradient(135deg, #9a9a9a 50%, transparent 50%);
  background-position:
    calc(100% - 12px) 50%,
    calc(100% -  8px) 50%;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat, no-repeat;
  transition:color 160ms;
}
.utility-bar .lang-select:hover,
.utility-bar .lang-select:focus-visible{color:var(--paper)}
.utility-bar .lang-select:focus-visible{
  box-shadow:inset 0 0 0 1px #4a4a4a;
}
/* Native option styling. Browsers honor background/color on <option>
   inside the open dropdown menu — fall back gracefully where ignored. */
.utility-bar .lang-select option{
  background:var(--ink-black);
  color:var(--paper);
  font-family:var(--mono);
  letter-spacing:0.4px;
}
@media (max-width:1023px){
  .utility-bar .lang-select{display:none}
}

/* Mobile / tablet (≤899px) — collapse the inline nav into a burger
   that opens a fullscreen overlay menu. */
@media (max-width:899px){
  .bar-burger{display:block}
  .utility-bar nav.bar-nav{
    position:fixed;
    top:0; left:0; right:0; bottom:0;
    background:var(--ink-black);
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    padding:80px 0 40px;
    overflow-y:auto;
    overflow-x:hidden;
    transform:translateX(100%);
    transition:transform 280ms cubic-bezier(.2,.7,.2,1);
    z-index:99;
    flex:none;
    align-self:auto;
  }
  body.nav-open .utility-bar nav.bar-nav{
    transform:translateX(0);
  }
  .utility-bar nav.bar-nav a{
    height:auto;
    padding:18px var(--pad-x);
    font-size:14px;
    letter-spacing:1.6px;
    border-right:0;
    border-bottom:1px solid #2a2a2a;
    width:100%;
    align-self:auto;
    flex:0 0 auto;
  }
  .utility-bar nav.bar-nav a:first-of-type{border-left:0}
  .utility-bar nav.bar-nav .bar-cta{
    margin-left:0;
    margin-top:16px;
    border-left:0;
    border-bottom:0;
    justify-content:center;
  }
  .utility-bar nav.bar-nav .lang-select{
    display:block !important;
    width:100%;
    height:auto;
    border-left:0;
    border-top:1px solid #2a2a2a;
    padding:18px var(--pad-x);
    margin-top:8px;
    background-position:
      calc(100% - var(--pad-x) - 4px) 50%,
      calc(100% - var(--pad-x) + 0px) 50%;
    font-size:14px;
    letter-spacing:1.6px;
  }
  /* Lock body scroll while menu open. */
  body.nav-open{overflow:hidden}
}

/* —— MASTHEAD —— */
.masthead{
  border-bottom:1px solid var(--ink-black);
  padding:28px var(--pad-x) 22px;
  background:var(--paper);
  position:relative;
}
.masthead-row{
  max-width:var(--max);
  margin:0 auto;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
}
.brand{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
}
.brand-mark{
  font-family:var(--display);
  font-style:italic;
  font-weight:500;
  font-size:clamp(28px,3.2vw,42px);
  line-height:1;
  letter-spacing:-0.5px;
  color:var(--ink-page);
}
.brand-sub{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:var(--caption);
  margin-top:4px;
}
.masthead-meta{
  display:flex;
  align-items:center;
  gap:18px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--caption);
}
.masthead-meta .ext{color:var(--ink-page)}
.icon-btn{
  width:38px;height:38px;
  border:1px solid var(--caption);
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:50% !important;       /* the only circle exception */
  transition:background 120ms linear,color 120ms linear;
}
.icon-btn:hover{background:var(--ink-black);color:var(--paper);border-color:var(--ink-black)}
@media (max-width:767px){
  .masthead{padding:20px var(--pad-x) 16px}
  .masthead-meta{display:none}
}

/* —— PRIMARY NAV STRIP —— */
.primary-nav{
  border-bottom:1px solid var(--ink-black);
  background:var(--paper);
}
.primary-nav-inner{
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--pad-x);
  display:flex;
  align-items:center;
  gap:0;
  height:54px;
  overflow-x:auto;
  scrollbar-width:none;
}
.primary-nav-inner::-webkit-scrollbar{display:none}
.primary-nav a{
  font-family:var(--ui);
  font-size:13px;
  font-weight:600;
  letter-spacing:0.4px;
  color:var(--ink-page);
  padding:0 18px;
  height:54px;
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  border-right:1px solid var(--hairline);
  transition:color 120ms linear,background 120ms linear;
}
.primary-nav a:first-child{border-left:1px solid var(--hairline);padding-left:18px}
.primary-nav a:first-child{padding-left:0;border-left:0}
.primary-nav a:hover{color:var(--link-blue)}
.primary-nav .nav-cta{
  margin-left:auto;
  font-family:var(--mono);
  font-weight:700;
  text-transform:uppercase;
  font-size:11px;
  letter-spacing:1.2px;
  color:var(--paper);
  background:var(--ink-black);
  padding:0 18px;
  height:54px;
  display:inline-flex;
  align-items:center;
  border:0 !important;
}
.primary-nav .nav-cta:hover{color:var(--ink-black);background:var(--link-blue);color:var(--paper)}

/* —— LAYOUT WRAPPERS —— */
.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--pad-x);
}
.wrap--narrow{max-width:980px}
.section{padding:80px 0}
.section--tight{padding:64px 0}
.section--xtight{padding:48px 0}
@media (max-width:767px){
  .section{padding:56px 0}
  .section--tight{padding:48px 0}
}
.divider{height:1px;background:var(--ink-black);margin:0;border:0}
.divider--soft{background:var(--hairline)}

/* —— SECTION RIBBON (full-bleed black bar) —— */
.ribbon{
  background:var(--ink-black);
  color:var(--paper);
  padding:14px var(--pad-x);
  font-family:var(--mono);
  font-size:12px;
  font-weight:700;
  letter-spacing:1.4px;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:14px;
}
.ribbon .num{color:var(--link-blue);font-weight:400}
.ribbon .ribbon-jp{
  margin-left:auto;
  font-family:var(--ui);
  font-weight:500;
  font-size:12px;
  letter-spacing:0.8px;
  text-transform:none;
  color:#bcbcbc;
}
@media (max-width:767px){.ribbon .ribbon-jp{display:none}}

/* =========================================================
   HERO — full-bleed video, no overlay
   ========================================================= */
.hero{
  width:100%;
  background:var(--ink-black);
  position:relative;
  overflow:hidden;
}
.hero video{
  width:100%;
  height:auto;
  display:block;
  aspect-ratio:16/9;
  object-fit:cover;
}
.hero-strip{
  background:var(--ink-black);
  color:var(--paper);
  padding:14px var(--pad-x);
  display:flex;
  align-items:center;
  gap:24px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:1.2px;
  text-transform:uppercase;
}
.hero-strip .live{
  background:#cc0000;
  color:var(--paper);
  padding:3px 8px;
  font-weight:700;
  letter-spacing:1.4px;
  border-radius:1920px !important;  /* pill exception */
}
.hero-strip .src{margin-left:auto;color:#9a9a9a}

/* =========================================================
   OPENING STATEMENT
   ========================================================= */
.opening{
  padding:96px 0 72px;
}
.opening .lede{
  font-family:var(--display);
  font-size:clamp(34px,5vw,68px);
  line-height:1.12;
  letter-spacing:-0.6px;
  color:var(--ink-page);
  margin-bottom:36px;
  max-width:1100px;
}
.opening .lede .accent{font-style:italic;color:var(--ink-page)}
.opening-cols{
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:64px;
  align-items:start;
  margin-top:40px;
  padding-top:36px;
  border-top:1px solid var(--ink-black);
}
.opening-cols .meta{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:1.1px;
  text-transform:uppercase;
  color:var(--caption);
  line-height:2;
}
.opening-cols .meta b{color:var(--ink-page);font-weight:700;display:block;margin-bottom:8px}
.opening-cols .body{
  font-size:18px;
  line-height:1.72;
  letter-spacing:0.05px;
}
.opening-cols .body p+p{margin-top:1em}
@media (max-width:899px){
  .opening{padding:64px 0 48px}
  .opening-cols{grid-template-columns:1fr;gap:32px}
}

/* =========================================================
   ABOUT — two-column editorial
   ========================================================= */
.about{padding:80px 0}
.about-grid{
  display:grid;
  grid-template-columns:5fr 7fr;
  gap:64px;
  align-items:start;
}
.about-grid .left .display-jp{
  font-size:clamp(36px,4.6vw,64px);
  line-height:1.08;
  letter-spacing:-0.5px;
}
.about-grid .left .latin-title{
  font-family:var(--display);
  font-style:italic;
  font-size:clamp(22px,2.4vw,32px);
  line-height:1.2;
  color:var(--caption);
  margin-top:18px;
  letter-spacing:-0.2px;
}
.about-grid .right .body{font-size:17px;line-height:1.72}
.about-pull{
  font-family:var(--display);
  font-style:italic;
  font-size:clamp(22px,2.4vw,30px);
  line-height:1.35;
  color:var(--ink-page);
  border-left:2px solid var(--ink-black);
  padding-left:24px;
  margin:32px 0;
}
@media (max-width:899px){
  .about-grid{grid-template-columns:1fr;gap:32px}
}

/* =========================================================
   WHAT WE DO — 3 columns with vertical hairlines
   ========================================================= */
.threecol{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--ink-black);
}
.threecol > .col{
  padding:32px 24px 32px 0;
  border-right:1px solid var(--hairline);
}
.threecol > .col:last-child{border-right:0;padding-right:0}
.threecol > .col:not(:first-child){padding-left:24px}
.col .num{
  font-family:var(--display);
  font-size:48px;
  line-height:1;
  color:var(--ink-page);
  margin-bottom:14px;
  letter-spacing:-1px;
}
.col h3{
  font-family:var(--display);
  font-size:28px;
  line-height:1.15;
  letter-spacing:-0.4px;
  margin:8px 0 14px;
}
.col .body{font-size:15.5px;line-height:1.66;color:var(--ink-page)}
@media (max-width:899px){
  .threecol{grid-template-columns:1fr}
  .threecol > .col{border-right:0;border-bottom:1px solid var(--hairline);padding:28px 0}
  .threecol > .col:last-child{border-bottom:0}
  .threecol > .col:not(:first-child){padding-left:0}
}

/* =========================================================
   RECORDINGS — left column = song list, right column = thumbnail
   stage (loops a sample video). Hovering a song swaps the stage
   to that song's thumbnail. The play button on the stage opens
   the YouTube modal player for the currently selected song.
   ========================================================= */
.rec-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:start;
}
.rec-list{
  display:flex;
  flex-direction:column;
  border-top:1px solid var(--ink-black);
}
.rec-item{
  display:grid;
  grid-template-columns:80px 1fr;
  gap:24px;
  align-items:start;
  padding:24px 0;
  border:0;
  border-bottom:1px solid var(--hairline);
  background:transparent;
  text-align:left;
  font:inherit;
  color:inherit;
  cursor:pointer;
  width:100%;
  transition:background 120ms linear;
}
.rec-item:last-child{border-bottom:1px solid var(--ink-black)}
.rec-item.is-active{background:rgba(0,0,0,0.04)}
.rec-item .num{
  font-family:var(--display);
  font-size:48px;
  line-height:0.9;
  color:var(--ink-page);
  letter-spacing:-1.2px;
}
.rec-item .meta{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:1.1px;
  text-transform:uppercase;
  color:var(--caption);
  margin-bottom:8px;
}
.rec-item h3{
  font-family:var(--display);
  font-size:clamp(20px,2vw,26px);
  line-height:1.18;
  letter-spacing:-0.4px;
  margin:0 0 6px;
  transition:color 150ms linear;
}
.rec-item:hover h3,
.rec-item.is-active h3{color:var(--link-blue)}
.rec-item .sub{
  font-family:var(--body);
  font-size:14px;
  color:var(--caption);
  font-style:italic;
}

/* Right-column thumbnail stage. Sticky so it follows the user's eye
   as they scan the list. */
.rec-stage{
  position:sticky;
  top:80px;
  width:100%;
  aspect-ratio:16/9;
  background:#000;
  overflow:hidden;
}
.rec-stage-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.rec-stage-play{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:80px;
  height:80px;
  border-radius:50% !important;
  background:rgba(0,0,0,0.65);
  border:2px solid var(--paper);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  transition:background 150ms linear,transform 150ms linear;
}
.rec-stage-play:hover{
  background:var(--link-blue);
  transform:translate(-50%,-50%) scale(1.06);
}
.rec-stage-play .triangle{
  width:0;
  height:0;
  border-style:solid;
  border-width:14px 0 14px 22px;
  border-color:transparent transparent transparent var(--paper);
  margin-left:5px;
}

@media (max-width:899px){
  .rec-grid{grid-template-columns:1fr;gap:24px}
  .rec-stage{position:relative;top:auto}
}
@media (max-width:767px){
  .rec-item{grid-template-columns:48px 1fr;gap:14px;padding:18px 0}
  .rec-item .num{font-size:32px}
}

/* =========================================================
   Poster + program-notes panel below the sticky thumbnail.
   - JS sets position:fixed and computes top/left/width/height
     each frame so the panel fills the gap between the bottom of
     the sticky stage and min(viewport bottom, section bottom).
   - As the user scrolls and the section bottom approaches the
     stage bottom, the panel shrinks. JS toggles .is-hidden on
     the poster and adjusts text font-size and -webkit-line-clamp
     so the description gracefully degrades.
   - Disabled on mobile (single-column rec-grid).
   ========================================================= */
.rec-info{
  display:flex;
  gap:20px;
  background:var(--paper);
  z-index:1;
  overflow:hidden;
  pointer-events:none;
}
.rec-info[hidden]{display:none}
.rec-info-poster{
  flex:0 0 auto;
  height:100%;
  display:flex;
  align-items:flex-start;
  overflow:hidden;
}
.rec-info-poster.is-hidden{display:none}
.rec-info-poster-img{
  height:100%;
  width:auto;
  object-fit:contain;
  display:block;
  background:#f4f4f4;
  border:1px solid var(--hairline);
}
.rec-info-text{
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  color:var(--ink-page);
}
.rec-info-text-title{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--caption);
  margin:0 0 8px;
  flex:0 0 auto;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.rec-info-text-body{
  margin:0;
  flex:1 1 0;
  min-height:0;
  overflow:hidden;
  font-family:var(--body);
  font-size:14px;
  line-height:1.55;
  color:var(--ink-page);
  /* JS truncates text content with "…" using measured scrollHeight
     so a partial line never bleeds past the bottom edge. */
}
@media (max-width:899px){
  .rec-info{display:none !important}
}

/* =========================================================
   YouTube modal player
   ========================================================= */
.yt-modal[hidden]{display:none}
.yt-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  background:rgba(0,0,0,0.92);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px;
  animation:ytFadeIn 180ms ease-out;
}
@keyframes ytFadeIn{from{opacity:0}to{opacity:1}}
.yt-modal-close{
  position:absolute;
  top:16px;
  right:20px;
  width:48px;
  height:48px;
  background:transparent;
  color:var(--paper);
  border:0;
  font-size:34px;
  line-height:1;
  cursor:pointer;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:color 120ms linear;
}
.yt-modal-close:hover{color:var(--link-blue)}
.yt-modal-content{
  width:100%;
  max-width:1280px;
  aspect-ratio:16/9;
  background:#000;
}
.yt-modal-frame{
  width:100%;
  height:100%;
  border:0;
  display:block;
}
@media (max-width:767px){
  .yt-modal{padding:60px 16px 16px}
}

/* =========================================================
   CONCERTS / FEATURE — left/right with thick black rule
   ========================================================= */
.feature{
  display:grid;
  grid-template-columns:5fr 7fr;
  gap:48px;
  border-top:2px solid var(--ink-black);
  /* No bottom border — the next sibling (performers grid or
     the next .feature edition) provides its own top border so
     this block flows seamlessly into what follows. */
  padding:56px 0;
  align-items:center;
}
.feature .meta-box{
  border:2px solid var(--ink-black);
  padding:28px 24px;
  background:var(--paper);
}
.feature .meta-box .row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:20px;
  padding:14px 0;
  border-bottom:1px solid var(--hairline);
}
.feature .meta-box .row:last-child{border-bottom:0;padding-bottom:0}
.feature .meta-box .row:first-child{padding-top:0}
.feature .meta-box .label{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--caption);
}
.feature .meta-box .value{
  font-family:var(--display);
  font-size:18px;
  font-weight:500;
  color:var(--ink-page);
  text-align:right;
}
.feature .meta-box .value-jp{font-size:15px;font-weight:400}
.feature .right .display-jp{
  font-size:clamp(36px,4.6vw,58px);
  line-height:1.1;
  letter-spacing:-0.5px;
  margin-bottom:18px;
}
.feature .right .deck{
  font-style:italic;
  margin-bottom:24px;
  max-width:38ch;
}
.feature .right .body{font-size:16px;line-height:1.72;margin-bottom:28px}
.feature .right .actions{display:flex;gap:12px;flex-wrap:wrap}
@media (max-width:899px){
  .feature{grid-template-columns:1fr;gap:32px;padding:36px 0}
}

/* Programme list inside the .right column of .feature */
.programme{
  border-top:1px solid var(--ink-black);
  border-bottom:1px solid var(--ink-black);
  margin:0 0 28px;
  padding:18px 0 12px;
}
.programme-title{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:var(--caption);
  margin-bottom:10px;
}
.programme-row{
  display:grid;
  grid-template-columns:64px 1fr auto;
  gap:14px;
  align-items:baseline;
  padding:10px 0;
  border-bottom:1px solid var(--hairline);
}
.programme-row:last-child{border-bottom:0}
.programme-time{
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:1px;
  color:var(--ink-black);
}
.programme-work{
  font-family:var(--body);
  font-size:17px;
  line-height:1.4;
  color:var(--ink-black);
}
.programme-composer{
  font-family:var(--body);
  font-size:13px;
  font-style:italic;
  color:var(--caption);
  white-space:nowrap;
}
.programme-row--break{
  border-bottom:1px solid var(--hairline);
}
.programme-break{
  text-align:center;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--caption);
}

/* =========================================================
   PERFORMERS — grid of player photos + bios for the Vol.01
   festival. Lives inside section J (現代音楽祭), separate from
   the .feature block above.
   ========================================================= */
.performers{
  margin-top:8px;
  padding-top:0;
  /* No top border — the Vol.01 feature block above visually
     extends straight into this performer list. */
}
.performers-head{
  display:grid;
  grid-template-columns:5fr 7fr;
  gap:48px;
  margin-bottom:36px;
  align-items:end;
}
.performers-head h3{
  font-family:var(--body);
  font-size:clamp(28px,3.4vw,42px);
  line-height:1.1;
  letter-spacing:-0.4px;
  margin:14px 0 0;
}
.performers-head p{
  font-size:15px;
  line-height:1.7;
  color:var(--caption);
  margin:0;
  max-width:62ch;
}

/* Player grid — 3 cols on desktop, 2 on tablet, 1 on phone.
   Each card is laid out HORIZONTALLY: small photo on the left,
   bio text on the right. The photo is reduced so the bio
   dominates the card. */
.players-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:36px 32px;
}
@media (max-width:1023px){
  .players-grid{grid-template-columns:repeat(2,1fr);gap:32px}
}
@media (max-width:639px){
  .players-grid{grid-template-columns:1fr;gap:28px}
}

.player-card{
  display:grid;
  grid-template-columns:140px 1fr;
  gap:18px;
  align-items:start;
}
@media (max-width:480px){
  .player-card{grid-template-columns:96px 1fr;gap:14px}
}

.player-card .photo{
  aspect-ratio:3/4;
  width:100%;
  background:#1a1a1a;
  overflow:hidden;
  position:relative;
}
.player-card .photo img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.player-card .photo--placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  background:#1a1a1a;
  color:rgba(255,255,255,0.28);
  font-family:var(--display,Georgia);
  font-size:32px;
  letter-spacing:-1px;
}
.player-card .text{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.player-card .inst{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:var(--caption);
  margin:0 0 4px;
}
.player-card .inst--lead{color:var(--ink-black);font-weight:700}
.player-card .name{
  font-family:var(--body);
  font-size:17px;
  font-weight:600;
  letter-spacing:-0.1px;
  margin:0 0 8px;
}
.player-card .bio{
  font-family:var(--body);
  font-size:12.5px;
  line-height:1.6;
  color:var(--caption);
  margin:0;
}

@media (max-width:899px){
  .performers-head{grid-template-columns:1fr;gap:18px}
}

/* =========================================================
   COMPOSERS — between F (statement) and G (about). 4-card grid
   with stacked-portrait layout: square photo on top, role/name/
   bio underneath. Differs from .player-card (which puts photo
   beside text) so the composer profiles read as primary
   editorial subjects rather than ensemble-list entries.
   ========================================================= */
.composers{padding:88px 0 104px}
.composers-head{
  display:grid;
  grid-template-columns:5fr 7fr;
  gap:48px;
  margin-bottom:48px;
  align-items:end;
}
.composers-head h2{
  font-family:var(--body);
  font-size:clamp(28px,3.4vw,42px);
  line-height:1.1;
  letter-spacing:-0.4px;
  margin:14px 0 0;
}
.composers-head p{
  font-size:16px;
  line-height:1.7;
  color:var(--caption);
  margin:0;
  max-width:62ch;
}
@media (max-width:899px){
  .composers-head{grid-template-columns:1fr;gap:18px}
}
.composers-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:36px 28px;
}
@media (max-width:1099px){
  .composers-grid{grid-template-columns:repeat(2,1fr);gap:36px 32px}
}
@media (max-width:559px){
  .composers-grid{grid-template-columns:1fr;gap:32px}
}
.composer-card{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.composer-card .photo{
  aspect-ratio:3/4;       /* portrait — matches the source images
                             which the user has already trimmed to
                             aligned 3:4 portraits. Square crop would
                             re-crop and break the head alignment. */
  width:100%;
  background:#1a1a1a;
  overflow:hidden;
  position:relative;
}
.composer-card .photo img{
  width:100%; height:100%;
  object-fit:cover;       /* CSS-side trim; no need to pre-crop the
                             source images. */
  display:block;
}
.composer-card .role{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:var(--caption);
  margin:0;
}
.composer-card .name{
  font-family:var(--body);
  font-size:18px;
  font-weight:600;
  letter-spacing:-0.1px;
  margin:0;
}
.composer-card .name-en{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:1.2px;
  color:var(--caption);
  margin:0;
}
.composer-card .bio{
  font-family:var(--body);
  font-size:13px;
  line-height:1.65;
  color:var(--ink-page);
  margin:6px 0 0;
}

/* =========================================================
   HISTORY / TIMELINE
   ========================================================= */

/* K (History) — Variant A pinned scroll-video.
   Wraps the K ribbon + section--history in a pinwrap. The full-width
   black ribbon and the right-60% white panel sit ON TOP as foreground;
   the LEFT 40% transparent area shows the pinned bg video through.
   currentTime is scrubbed by scroll progress through the wrap. */
.k-pinwrap{
  position:relative;
  isolation:isolate;            /* contain the fixed bg's z-index */
}
.k-pinwrap-bg{
  position:fixed;
  top:0; left:0;
  width:100vw; height:100vh;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  visibility:hidden;            /* JS toggles via .is-active */
}
.k-pinwrap-bg.is-active{visibility:visible}
.k-pinwrap-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  background:#000;
}
.k-pinwrap-content{
  position:relative;
  z-index:1;                    /* above the pinned bg */
}

/* Section K layout — the content panel sits in the RIGHT 60% of
   the viewport, leaving the LEFT 40% as transparent empty space.
   The full-width black ribbon above is unaffected.
   Selector uses `section.section--history` (specificity 0,0,1,1) so
   it beats the global `.section--tight { background: var(--paper) }`
   rule defined later in the stylesheet. */
section.section--history{
  background:transparent;
  padding:0;                    /* padding handled inside the panel */
}
.history-panel{
  /* Layout container only — no background. The two inner blocks
     (header block transparent, timeline block white) supply their
     own backgrounds. */
  width:60%;
  margin-left:40%;
  padding:0;
}
.history-header-block{
  background:transparent;
  padding:64px 0 32px;
}
/* Big editorial "History" wordmark sitting on the transparent
   header block. White over the muse_dance video bg.
   Roman (no italic), no text-shadow per spec. */
.history-mega{
  font-family:'Cormorant Garamond','Noto Serif JP',Georgia,serif;
  font-style:normal;
  font-weight:400;
  font-size:clamp(72px,10vw,160px);
  line-height:0.95;
  letter-spacing:-3px;
  color:#fff;
  margin:0 0 28px;
}
@media (max-width:899px){
  .history-mega{
    font-size:clamp(56px,12vw,96px);
    letter-spacing:-1.6px;
    margin:0 0 18px;
  }
}

/* The kicker + heading + intro paragraph in the K header block
   sit over the dark video bg, so they need to be white. */
.history-header-block .kicker{color:#fff}
.history-header-block .display-jp{color:#fff}
.history-header-block .body{color:#fff}
.history-timeline-block{
  background:var(--paper);
  /* No top padding: the white panel's top edge sits where the
     timeline's old black border-top used to be. */
  padding:0 0 64px;
}
.history-panel .wrap{
  /* The panel is already 60% wide and right-positioned; reset .wrap's
     max-width / margin so its content fills the panel. Horizontal
     padding from .wrap (var(--pad-x)) is preserved as the inner gutter. */
  max-width:none;
  margin:0;
}
@media (max-width:899px){
  /* On small screens, drop the 60% inset — full width keeps the
     timeline readable and the heading/intro from cramping. */
  .history-panel{
    width:100%;
    margin-left:0;
  }
  .history-header-block{padding:48px 0 24px}
  .history-timeline-block{padding:0 0 48px}
}

.timeline{
  /* Top border removed per spec — the white panel's top edge
     replaces the old line. Bottom hairline kept. */
  border-bottom:1px solid var(--ink-black);
}
.t-row{
  display:grid;
  /* year (left) | event title + meta + grant stack (right) */
  grid-template-columns:110px 1fr;
  gap:40px;
  align-items:baseline;
  padding:24px 0;
  border-bottom:1px solid var(--hairline);
}
.t-row:last-child{border-bottom:0}
/* Year column — back to plain text, no inner wrappers needed. */
.t-year{
  font-family:var(--display);
  font-size:clamp(36px,4vw,56px);
  line-height:1;
  letter-spacing:-1px;
  color:var(--ink-page);
}

.t-event{
  font-family:var(--display);
  font-size:clamp(20px,2vw,26px);
  line-height:1.25;
  letter-spacing:-0.3px;
  color:var(--ink-page);
}
/* "Date  Venue" line stacked under the event title.
   Multi-date rows simply repeat .t-meta-line. */
.t-event .t-meta-line{
  display:flex;
  gap:12px;
  align-items:baseline;
  margin-top:14px;
  font-family:var(--mono);
  font-size:12px;
  font-weight:400;
  letter-spacing:1.3px;
  text-transform:uppercase;
  color:var(--caption);
  line-height:1.45;
}
.t-event .t-meta-line + .t-meta-line{margin-top:4px}
.t-event .t-meta-date{
  color:var(--ink-page);
  min-width:46px;
  flex-shrink:0;
}
.t-event .t-meta-venue{flex:1 1 auto}

/* Grant / programme adoption note. Sits after meta lines. */
.t-grant{
  display:block;
  margin-top:14px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--caption);
}
@media (max-width:767px){
  .t-row{grid-template-columns:90px 1fr;gap:18px}
  .t-year{font-size:30px}
  .t-event{font-size:17px}
}

/* =========================================================
   ARTISTS — 4 column kicker grid
   ========================================================= */
.fourcol{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--ink-black);
}
.fourcol > .cell{
  padding:32px 20px 32px 0;
  border-right:1px solid var(--hairline);
}
.fourcol > .cell:last-child{border-right:0}
.fourcol > .cell:not(:first-child){padding-left:20px}
.fourcol .cell .role{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--ink-page);
  font-weight:700;
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:14px;
}
.fourcol .cell .role::before{
  content:"";
  width:8px;height:8px;
  background:var(--ink-black);
  display:inline-block;
}
.fourcol .cell h3{
  font-family:var(--display);
  font-size:clamp(20px,2vw,26px);
  line-height:1.15;
  letter-spacing:-0.3px;
  margin:0 0 12px;
}
.fourcol .cell .body{font-size:14.5px;line-height:1.6}
@media (max-width:1023px){
  .fourcol{grid-template-columns:repeat(2,1fr)}
  .fourcol > .cell:nth-child(2){border-right:0}
  .fourcol > .cell:nth-child(1),.fourcol > .cell:nth-child(2){border-bottom:1px solid var(--hairline)}
}
@media (max-width:599px){
  .fourcol{grid-template-columns:1fr}
  .fourcol > .cell{border-right:0;border-bottom:1px solid var(--hairline);padding:24px 0}
  .fourcol > .cell:last-child{border-bottom:0}
  .fourcol > .cell:not(:first-child){padding-left:0}
}

/* —— LEAD CALLED-OUT NAME LIST —— */
.lead-list{
  margin-top:40px;
  border-top:1px solid var(--hairline);
  padding-top:24px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}
.lead-list .role{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--caption);
  margin-bottom:6px;
}
.lead-list .name{
  font-family:var(--display);
  font-size:20px;
  letter-spacing:-0.3px;
  color:var(--ink-page);
}
@media (max-width:899px){.lead-list{grid-template-columns:repeat(2,1fr);gap:20px}}
@media (max-width:559px){.lead-list{grid-template-columns:1fr;gap:18px}}

/* =========================================================
   CRITICISM — 2x2
   ========================================================= */
.twobytwo{
  display:grid;
  grid-template-columns:1fr 1fr;
  border-top:1px solid var(--ink-black);
  border-left:1px solid var(--hairline);
}
.twobytwo > .cell{
  padding:32px;
  border-right:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
  position:relative;
}
.twobytwo > .cell:nth-child(2n){border-right:0}
.twobytwo > .cell:nth-last-child(-n+2){border-bottom:0}
.twobytwo .cell .num{
  font-family:var(--display);
  font-size:48px;
  line-height:1;
  letter-spacing:-1px;
  color:var(--caption);
  position:absolute;
  top:24px;
  right:24px;
  font-style:italic;
}
.twobytwo .cell h3{
  font-family:var(--display);
  font-size:clamp(22px,2vw,28px);
  line-height:1.18;
  letter-spacing:-0.3px;
  margin:0 0 12px;
  max-width:80%;
}
.twobytwo .cell .role{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--ink-page);
  margin-bottom:14px;
}
.twobytwo .cell .body{font-size:15px;line-height:1.65}
@media (max-width:767px){
  .twobytwo{grid-template-columns:1fr;border-left:0}
  .twobytwo > .cell{border-right:0;padding:24px 0}
  .twobytwo > .cell:nth-last-child(-n+2){border-bottom:1px solid var(--hairline)}
  .twobytwo > .cell:last-child{border-bottom:0}
}

/* =========================================================
   INTERNATIONAL — inverted block
   ========================================================= */
.inverted{
  background:var(--ink-page);
  color:var(--paper);
}
.inverted .kicker{color:#bcbcbc}
.inverted h2,.inverted h3,.inverted .display-jp,
.inverted .display-l,.inverted .display-xl{color:var(--paper)}
.inverted .body{color:#dcdcdc}
.inverted .caption{color:#9a9a9a}
.inverted .divider--soft{background:#2a2a2a}
.inverted a.inline-link{color:var(--paper);border-bottom-color:#666}
.inverted a.inline-link:hover{color:var(--link-blue)}

.intl-grid{
  display:grid;
  grid-template-columns:6fr 5fr;
  gap:48px;
  align-items:start;
}
/* When the right-side English aside is removed, the left column
   spans the full row instead of leaving a 5fr empty gutter. */
.intl-grid--single{grid-template-columns:1fr}
.intl-grid .left .display-jp{
  font-size:clamp(34px,4.4vw,56px);
  line-height:1.1;
  letter-spacing:-0.4px;
  margin-bottom:14px;
}
.intl-grid .left .display-en{
  font-family:var(--display);
  font-style:italic;
  font-size:clamp(22px,2.2vw,30px);
  line-height:1.2;
  color:#bcbcbc;
  margin-bottom:32px;
  letter-spacing:-0.2px;
}
.intl-grid .right{padding-left:48px;border-left:1px solid #2a2a2a}
.intl-grid .right .english-label{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:#9a9a9a;
  margin-bottom:14px;
}
.intl-grid .right .english-body{
  font-family:var(--body);
  font-style:italic;
  font-size:17px;
  line-height:1.6;
  color:var(--paper);
}
@media (max-width:899px){
  .intl-grid{grid-template-columns:1fr;gap:32px}
  .intl-grid .right{padding-left:0;border-left:0;border-top:1px solid #2a2a2a;padding-top:32px}
}

/* =========================================================
   ARTS × INDUSTRY — wide editorial
   ========================================================= */
.industry{padding:80px 0}
.industry .display-jp{
  font-size:clamp(36px,4.6vw,60px);
  line-height:1.1;
  letter-spacing:-0.5px;
  margin-bottom:32px;
  max-width:18ch;
}
.industry-cols{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
}
.industry-cols .body{font-size:17px;line-height:1.74}
@media (max-width:899px){.industry-cols{grid-template-columns:1fr;gap:24px}}

.industry-tag{
  margin-top:48px;
  border-top:1px solid var(--ink-black);
  padding-top:24px;
  font-family:var(--display);
  font-style:italic;
  font-size:clamp(20px,2.2vw,26px);
  line-height:1.4;
  color:var(--ink-page);
  max-width:60ch;
}

/* =========================================================
   SUPPORT — CTA grid
   ========================================================= */
.support{padding:96px 0}
.support .deck{margin-bottom:36px;max-width:60ch}
.support-cta{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:2px solid var(--ink-black);
  border-bottom:2px solid var(--ink-black);
}
.support-cta .cell{
  padding:32px 20px;
  border-right:1px solid var(--hairline);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:200px;
  cursor:pointer;
  transition:background 150ms linear,color 150ms linear;
}
.support-cta .cell:last-child{border-right:0}
.support-cta .cell:hover{background:var(--ink-black);color:var(--paper)}
.support-cta .cell:hover h3,
.support-cta .cell:hover .sub,
.support-cta .cell:hover .arrow,
.support-cta .cell:hover .index{color:var(--paper)}
.support-cta .index{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--caption);
  margin-bottom:16px;
}
.support-cta h3{
  font-family:var(--display);
  font-size:clamp(20px,2vw,26px);
  line-height:1.18;
  letter-spacing:-0.3px;
  margin:0 0 8px;
}
.support-cta .sub{
  font-family:var(--body);
  font-style:italic;
  font-size:14px;
  color:var(--caption);
  margin-bottom:24px;
}
.support-cta .arrow{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--ink-page);
  display:inline-flex;
  align-items:center;
  gap:8px;
}
@media (max-width:899px){
  .support-cta{grid-template-columns:1fr 1fr}
  .support-cta .cell:nth-child(2){border-right:0}
  .support-cta .cell:nth-child(1),.support-cta .cell:nth-child(2){border-bottom:1px solid var(--hairline)}
}
@media (max-width:599px){
  .support-cta{grid-template-columns:1fr}
  .support-cta .cell{border-right:0;border-bottom:1px solid var(--hairline);min-height:0}
  .support-cta .cell:last-child{border-bottom:0}
}

/* =========================================================
   CONTACT
   ========================================================= */
.contact{padding:80px 0}
.contact-grid{
  display:grid;
  grid-template-columns:5fr 7fr;
  gap:48px;
  align-items:start;
}
.contact-list{border-top:1px solid var(--ink-black);margin-top:32px}
.contact-row{
  display:grid;
  grid-template-columns:140px 1fr auto;
  gap:24px;
  align-items:center;
  padding:20px 0;
  border-bottom:1px solid var(--hairline);
  cursor:pointer;
  transition:padding 150ms linear;
}
.contact-row:hover{padding-left:8px}
.contact-row:hover .channel-name{color:var(--link-blue)}
.contact-row .channel-label{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--caption);
}
.contact-row .channel-name{
  font-family:var(--display);
  font-size:20px;
  letter-spacing:-0.2px;
  color:var(--ink-page);
  transition:color 120ms linear;
}
.contact-row .channel-arrow{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:1.2px;
  color:var(--caption);
}
@media (max-width:767px){
  .contact-grid{grid-template-columns:1fr;gap:24px}
  .contact-row{grid-template-columns:100px 1fr 24px;gap:16px}
  .contact-row .channel-name{font-size:16px}
}

/* =========================================================
   CONTACT FORM (Formspree-backed)
   Visual style matches the editorial wired aesthetic — mono
   uppercase labels, single hairline underline inputs, no
   chrome. Status messages live in a polite live region.
   ========================================================= */
.contact-form{
  margin-top:48px;
  padding-top:32px;
  border-top:1px solid var(--ink-black);
  display:flex;
  flex-direction:column;
  gap:20px;
}
.contact-form__title{
  font-family:var(--display, Georgia, serif);
  font-size:22px;
  font-weight:600;
  margin:0 0 4px;
  color:var(--ink-page, #111);
  letter-spacing:0.02em;
}
.contact-form__honeypot{
  position:absolute;
  left:-9999px;
  width:1px; height:1px;
  overflow:hidden;
}
.contact-form__field{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.contact-form__field label{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--caption);
}
.contact-form__field .req{color:var(--link-blue, #1a4eff)}
.contact-form__field input,
.contact-form__field textarea,
.contact-form__field select{
  width:100%;
  border:1px solid rgba(0,0,0,0.45);
  background:var(--paper, #fff);
  padding:10px 12px;
  font-family:var(--body, Georgia, serif);
  font-size:16px;
  line-height:1.55;
  color:var(--ink-page, #111);
  border-radius:2px;
  outline:none;
  transition:border-color 120ms ease, box-shadow 120ms ease;
}
.contact-form__field input:hover,
.contact-form__field textarea:hover,
.contact-form__field select:hover{
  border-color:var(--ink-black);
}
.contact-form__field input:focus,
.contact-form__field textarea:focus,
.contact-form__field select:focus{
  border-color:var(--link-blue, #1a4eff);
  box-shadow:0 0 0 1px var(--link-blue, #1a4eff);
}
/* :user-invalid only flags fields the user has actually interacted
   with (after blur or submit attempt). Avoids painting required-but-
   empty fields red on first paint. */
.contact-form__field input:user-invalid,
.contact-form__field textarea:user-invalid,
.contact-form__field select:user-invalid{
  border-color:#c0392b;
}
/* Custom dropdown caret since `appearance: none` is needed to make
   the select share the same border + radius as text inputs across
   browsers. SVG chevron, sized small, right-aligned. */
.contact-form__field select{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  padding-right:36px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23222' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:12px 8px;
  cursor:pointer;
}
.contact-form__field select:invalid,
.contact-form__field select option[value=""]{
  color:var(--caption, #666);
}
.contact-form__field select option{
  color:var(--ink-page, #111);
}
.contact-form__field textarea{
  resize:vertical;
  min-height:140px;
}
.contact-form__consent{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-family:var(--body, Georgia, serif);
  font-size:14px;
  line-height:1.5;
  color:var(--ink-page, #111);
}
.contact-form__consent input[type="checkbox"]{
  margin-top:4px;
  width:16px; height:16px;
  flex:0 0 auto;
  accent-color:var(--ink-black);
}
.contact-form__consent .req{color:var(--link-blue, #1a4eff)}
.contact-form__consent a{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:2px;
}
.contact-form__actions{
  display:flex;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
}
.contact-form__actions button[type="submit"]{
  cursor:pointer;
  font-family:inherit;
}

/* Disabled state — gray bg with white text, no wait-cursor.
   Pairs with the tooltip wrap below to surface the reason
   when the user hovers a disabled submit button. */
.contact-form__submit-wrap{
  position:relative;
  display:inline-flex;
}
.contact-form__submit-wrap button[disabled]{
  background:#94a3b8;
  border-color:#94a3b8;
  color:var(--paper);
  cursor:not-allowed;
  opacity:1;
}
.contact-form__submit-wrap button[disabled]:hover{
  background:#94a3b8;
  color:var(--paper);
}

/* Hover tooltip — only shown when the button is disabled. The
   :has() selector keeps the tip CSS-only without a JS toggle.
   pointer-events:none on the tip lets the underlying button keep
   receiving the hover (disabled buttons still fire :hover on the
   parent in modern browsers). */
.contact-form__submit-wrap::before,
.contact-form__submit-wrap::after{
  pointer-events:none;
  opacity:0;
  transition:opacity 150ms ease;
}
.contact-form__submit-wrap::before{
  content:"個人情報保護方針をご確認ください";
  position:absolute;
  bottom:100%;
  left:50%;
  transform:translateX(-50%) translateY(-10px);
  background:var(--ink-black);
  color:var(--paper);
  padding:8px 14px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.8px;
  white-space:nowrap;
  border-radius:3px;
  z-index:5;
}
.contact-form__submit-wrap::after{
  /* tooltip arrow */
  content:"";
  position:absolute;
  bottom:100%;
  left:50%;
  transform:translateX(-50%) translateY(-2px);
  border:6px solid transparent;
  border-top-color:var(--ink-black);
  z-index:5;
}
.contact-form__submit-wrap:has(button[disabled]):hover::before,
.contact-form__submit-wrap:has(button[disabled]):hover::after{
  opacity:1;
}
.contact-form__status{
  margin:0;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.6px;
  color:var(--caption);
}
.contact-form__status[data-state="success"]{color:var(--ink-page, #111)}
.contact-form__status[data-state="error"]{color:#c0392b}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{
  background:var(--ink-black);
  color:var(--paper);
  padding:64px 0 32px;
  margin-top:0;
}
.footer-mark{
  font-family:var(--display);
  font-style:italic;
  font-size:clamp(36px,5vw,56px);
  line-height:1;
  letter-spacing:-0.5px;
  text-align:center;
  padding-bottom:32px;
  border-bottom:1px solid #2a2a2a;
  margin-bottom:32px;
}
.footer-cols{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:32px;
  padding-bottom:48px;
  border-bottom:1px solid #2a2a2a;
  margin-bottom:32px;
}
.footer-cols .col h4{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:#9a9a9a;
  margin:0 0 14px;
  font-weight:700;
}
/* Sub-section heading inside a .col (used for Legal under Channels).
   Keeps the same h4 visual treatment but with a small top gap so it
   reads as a quiet sibling group rather than detached. */
.footer-cols .col h4.col-subhead{margin-top:24px}
.footer-cols .col a{
  display:block;
  font-family:var(--ui);
  font-size:13px;
  font-weight:500;
  color:var(--paper);
  padding:6px 0;
  letter-spacing:0.2px;
  transition:color 120ms linear;
}
.footer-cols .col a:hover{color:var(--link-blue)}
.footer-bottom{
  /* 3-column layout: credit (left) · copyright (center) · locale (right).
     CSS grid with explicit columns so the copyright stays centered
     even when the side cells differ in width. */
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:16px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:1.1px;
  text-transform:uppercase;
  color:#9a9a9a;
}
.footer-bottom .footer-credit{justify-self:start}
.footer-bottom .footer-copy{justify-self:center;text-align:center}
.footer-bottom .footer-locale{justify-self:end}
.footer-bottom a{color:#9a9a9a;text-decoration:none}
.footer-bottom a:hover{color:var(--paper)}
@media (max-width:767px){
  .footer-bottom{
    grid-template-columns:1fr;
    text-align:center;
    gap:12px;
  }
  .footer-bottom .footer-credit,
  .footer-bottom .footer-copy,
  .footer-bottom .footer-locale{justify-self:center}
  /* Mobile stacking order: copyright → locale → credit (bottom). */
  .footer-bottom .footer-copy{order:1}
  .footer-bottom .footer-locale{order:2}
  .footer-bottom .footer-credit{order:3}
}
@media (max-width:767px){
  .footer-cols{grid-template-columns:1fr 1fr;gap:24px}
}

/* =========================================================
   SECTION CHIPS  ·  DEVELOPMENT MARKERS (A–R)
   Small black squares in the top-right of each section, so
   modification instructions can be addressed by letter.
   ========================================================= */
/* NOTE: .utility-bar is intentionally excluded — it has its own position:sticky
   above, which already establishes a containing block for the absolute chip. */
.masthead,.primary-nav,.hero,.hero-strip,
.opening,.about,.section,.section--tight,.section--xtight,
.industry,.support,.contact,.footer,.ribbon,.inverted{position:relative}

/* Lift B (masthead) and F (statement) above the GHI fixed video layer.
   The .gh-video-wrap forms a stacking context (isolation:isolate) painted
   in layer 6 (positioned with z-index:auto) of the body's stacking context.
   B and F also land in layer 6 (position:relative + z-index:auto) and —
   being earlier in DOM order — paint BEFORE the wrap, so the wrap's
   contained position:fixed video covers them when active. Promoting B
   and F to z-index:1 puts them in layer 7 (positive z-index), above the
   wrap. The explicit background on #statement keeps the video from
   showing through (B already has background:var(--paper)). */
.masthead{ z-index:1 }
#statement{ z-index:1; background:var(--paper) }

/* Lift every major top-level section above the GHI play_10s.mp4 layer
   AND the I score_5s.mp4 layer. Both fixed video layers paint at z-index 0
   (or 0 inside their stacking context); these sections need positive
   z-index + an opaque background so they overlay the videos cleanly when
   either is active. Exceptions whose own bg should win (.scroll-video-section
   for L's cello video, .inverted for the black N block) keep their bg via
   later/equal-specificity rules; here we only force z-index. */
.section,
.section--tight,
.section--xtight,
.industry,
.support,
.contact,
.composers,
.footer,
.inverted{
  position:relative;
  z-index:1;
}
.section,
.section--tight,
.section--xtight,
.industry,
.support,
.contact,
.composers{
  background:var(--paper);
}

.section-chip{
  position:absolute;
  top:10px;
  right:10px;
  width:26px;
  height:26px;
  background:var(--ink-black);
  color:var(--paper);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--mono);
  font-size:12px;
  font-weight:700;
  letter-spacing:0.4px;
  z-index:60;
  pointer-events:none;
  border:0 !important;
  border-radius:0 !important;
}
.section-chip--inv{
  background:var(--paper);
  color:var(--ink-black);
  outline:1px solid var(--ink-black);
  outline-offset:-1px;
}
.section-chip--bar{
  top:50%;
  transform:translateY(-50%);
  right:10px;
  width:22px;
  height:22px;
  font-size:11px;
}
@media print{.section-chip{display:none}}

/* =========================================================
   SCROLL-DRIVEN VIDEO  ·  scrubbable on scroll, with parallax
   - No sticky shrink-wrap; document scroll never stalls.
   - Progress is measured across viewport entry → viewport exit:
       progress = (innerHeight - rect.top) / (innerHeight + rect.height)
   - INSIDE parallax: the video element itself is rendered at 200%
     of its frame's height and translateY'd over a large range, so
     the visible crop of the video moves dramatically inside its
     frame as the user scrolls.
   ========================================================= */

/* =========================================================
   G + H  ·  COMBINED SCROLL-VIDEO BACKGROUND  (pinned)
   - Video layer is position:sticky 100vh — pinned to viewport
     while scrolling through G+H, then naturally released when
     H ends. I and later sections then scroll on top of it.
   - Video is full viewport width, full viewport height, no
     transform, no parallax — only its currentTime is tied
     to scroll progress over the GH wrap.
   - Progress: 0 when wrap.top reaches viewport.top
              1 when wrap.bottom reaches viewport.top
   ========================================================= */
.gh-video-wrap{
  position:relative;
  isolation:isolate;
  /* isolation creates a new stacking context. The fixed video layer
     inside is z-index:0 INSIDE the wrap's context — it never rises
     above sibling elements like B (masthead), F (statement), or any
     section after I. Those siblings stay above without per-element
     z-index hacks. */
}
/* Video layer is position:fixed at z-index:0. JS toggles .is-active
   to show/hide based on whether GHI is in scroll range. Surrounding
   sections (F, J onwards) are lifted above it via z-index:1 + relative. */
.gh-video-bg{
  position:fixed;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  visibility:hidden;
}
.gh-video-bg.is-active{visibility:visible}
.gh-video-bg video.gh-bg-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  background:var(--ink-black);
}
.gh-video-bg .scroll-video-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.30);
  pointer-events:none;
  z-index:1;
}

/* GHI content layer — sits on top of the fixed video */
.gh-content{
  position:relative;
  z-index:1;
}

/* Divider between G and H — visible on top of the video */
.gh-content > hr.divider{
  background:rgba(255,255,255,0.30);
  border:0;
  height:1px;
  margin:0;
  position:relative;
  z-index:3;
}

/* —— Text & rule whitening within G (#about) and H (#practice) —— */
.gh-content #about,
.gh-content #practice{
  background:transparent;
}
/* Inside the GH wrap, #about's top padding is removed so the
   sticky black ribbon sits flush against the very top of G. */
.gh-content #about{padding-top:0}
/* Full-bleed variant of the ribbon: spans the full viewport width
   regardless of any parent's max-width. */
.ribbon--full{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}

/* I (Recordings) lives inside .gh-content too. It keeps a solid
   white background so it visually slides up OVER the pinned video
   as the user scrolls. */
.gh-content #recordings,
.gh-content #recordings + .section--tight{
  background:var(--paper);
  position:relative;
}
.gh-content #recordings{position:relative;z-index:3}
.gh-content #about .display-jp,
.gh-content #about .display-l,
.gh-content #about .display-xl,
.gh-content #about .display-xxl,
.gh-content #about h1,
.gh-content #about h2,
.gh-content #about h3,
.gh-content #about .deck,
.gh-content #about .body,
.gh-content #about .latin-title,
.gh-content #about .about-pull,
.gh-content #practice .display-jp,
.gh-content #practice .display-l,
.gh-content #practice .display-xl,
.gh-content #practice h1,
.gh-content #practice h2,
.gh-content #practice h3,
.gh-content #practice .deck,
.gh-content #practice .body,
.gh-content #practice .col .num{
  color:var(--paper) !important;
}
.gh-content #about .latin-title{color:rgba(255,255,255,0.72) !important}
.gh-content #about .kicker,
.gh-content #about .kicker--bold,
.gh-content #practice .kicker,
.gh-content #practice .kicker--bold{
  color:var(--paper) !important;
}
.gh-content #about .ribbon{background:var(--ink-black)}
.gh-content #practice .eyebrow-rule::after{background:var(--paper)}
.gh-content #about .about-pull{border-left-color:var(--paper)}
.gh-content #practice .threecol{
  border-top:1px solid rgba(255,255,255,0.42);
}
.gh-content #practice .threecol > .col{
  border-right:1px solid rgba(255,255,255,0.16);
}
@media (max-width:899px){
  .gh-content #practice .threecol > .col{
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,0.16);
  }
  .gh-content #practice .threecol > .col:last-child{border-bottom:0}
}
.gh-content #about .body p{color:var(--paper) !important}
.gh-content #about > .section-chip,
.gh-content #practice > .section-chip{
  background:var(--paper);
  color:var(--ink-black);
  outline:1px solid var(--ink-black);
  outline-offset:-1px;
}

/* —— Inline parallax video frame (used in I / Recordings) —— */
.scroll-video-block{
  position:relative;
  margin:0 0 48px;
}
/* Full-bleed variant: video stretches to viewport width,
   figcaption stays inside the editorial wrap. */
.scroll-video-block--bleed{
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  width:100vw;
  max-width:100vw;
}
.scroll-video-block--bleed > figure{margin:0}
.scroll-video-block--bleed figcaption{
  max-width:var(--max);
  margin-left:auto;
  margin-right:auto;
  padding-left:var(--pad-x);
  padding-right:var(--pad-x);
  box-sizing:border-box;
}

.scroll-video-frame{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  background:var(--ink-black);
  border-top:2px solid var(--ink-black);
  border-bottom:2px solid var(--ink-black);
}
.scroll-video-frame > video.scroll-video{
  position:absolute;
  left:0;
  top:-15%;          /* video is 130% the frame height; sit centred */
  width:100%;
  height:130%;       /* gentle oversize — minimal crop, room for parallax */
  object-fit:cover;
  display:block;
  background:var(--ink-black);
  will-change:transform;
}

/* =========================================================
   I (Recordings) — pinned scroll-video, same pattern as GHI
   .gh-video-bg play_10s.mp4. The score video stays fixed to the
   viewport for the entire I scroll range; the recordings ribbon,
   the "記録された音楽" heading block, and the recordings list each
   sit on top with white backgrounds, while the .i-video-spacer
   between them is transparent so the pinned score video shows.
   ========================================================= */
.i-video-wrap{
  position:relative;
}
.i-video-bg{
  position:fixed;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  visibility:hidden;
}
.i-video-bg.is-active{visibility:visible}
.i-video-bg .i-bg-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  background:var(--ink-black);
}

/* Inside .gh-content the I body section--tight is white-bg; we drop
   that bg so the spacer can reveal the pinned score video, and bring
   the white back only on the two .i-content-block wrappers around the
   heading and the recordings list. */
.gh-content #recordings + .section--tight{
  background:transparent;
  padding:0;
  z-index:2;
}
.gh-content #recordings + .section--tight .i-content-block{
  background:var(--paper);
  padding:64px 0;
  position:relative;
  z-index:2;
}
@media (max-width:767px){
  .gh-content #recordings + .section--tight .i-content-block{
    padding:48px 0;
  }
}

/* The transparent gap inside section--tight where the pinned score
   video shows through. Full-bleed so the score fills the viewport
   width. Height is one viewport so there's a comfortable window of
   pure-video before the recordings list rises in over it. */
.i-video-spacer{
  position:relative;
  height:100vh;
  width:100vw;
  margin:0 calc(50% - 50vw);
  background:transparent;
  z-index:1;
  pointer-events:none;
}
.i-video-caption{
  position:absolute;
  left:0;
  right:0;
  bottom:24px;
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--pad-x);
  display:flex;
  flex-direction:column;
  gap:6px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:#fff;
  pointer-events:none;
  isolation:isolate;          /* contain the ::before plate */
}
/* Semi-opaque black plate behind the caption text. Extends from
   the viewport's left edge (using the centered-parent trick:
   left = 50% - 50vw, width = 100vw) and fades to full transparency
   around the horizontal centre so it doesn't visually compete with
   the right-hand side of the score video. */
.i-video-caption::before{
  content:"";
  position:absolute;
  left:calc(50% - 50vw);
  width:100vw;
  top:-14px;
  bottom:-14px;
  background:linear-gradient(to right,
    rgba(0,0,0,0.72) 0%,
    rgba(0,0,0,0.58) 35%,
    rgba(0,0,0,0)    60%);
  z-index:-1;
  pointer-events:none;
}
.i-video-caption .src{font-weight:700;letter-spacing:1.4px;color:#fff}
.i-video-caption .desc{
  text-transform:none;
  letter-spacing:0.4px;
  color:rgba(255,255,255,0.95);
  font-family:var(--body);
  font-size:13px;
  line-height:1.5;
  max-width:62ch;
}

/* —— Full-bleed background video section (used in L / Artists) —— */
.scroll-video-section{
  position:relative;
  background:var(--ink-black);
  overflow:hidden;
  isolation:isolate;
}
.scroll-video-bg{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.scroll-video-bg video.scroll-video{
  position:absolute;
  left:0;
  top:-15%;
  width:100%;
  height:130%;
  object-fit:cover;
  display:block;
  will-change:transform;
}
.scroll-video-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.42);
  pointer-events:none;
}
.scroll-video-grad-top{
  position:absolute;
  top:0;left:0;width:100%;
  height:30vh;
  background:linear-gradient(to bottom,#000 0%,transparent 100%);
  pointer-events:none;
}
.scroll-video-grad-bottom{
  position:absolute;
  bottom:0;left:0;width:100%;
  height:35vh;
  background:linear-gradient(to top,#000 0%,transparent 100%);
  pointer-events:none;
}
.scroll-video-section > .wrap{
  position:relative;
  z-index:3;
}

/* —— Reduced motion: collapse to flat fit, no transforms —— */
@media (prefers-reduced-motion:reduce){
  .scroll-video-frame > video.scroll-video,
  .scroll-video-bg video.scroll-video{
    transform:none !important;
    top:0;
    height:100%;
  }
}

/* =========================================================
   L  ·  ARTISTS  (white panel, black ink — no background video)
   ========================================================= */
#artists{padding:120px 0 140px;background:var(--paper)}

/* 200px breathing gap between K (History) and L (Artists), centered on
   the hairline divider (100px above + 100px below). */
.k-pinwrap + hr.divider{margin:100px 0}

/* =========================================================
   N + O  ·  shared pinned scroll-video bg (fukuoka.mp4)
   Both sections share ONE fixed bg layer. Two separate fixed
   layers would create overlapping stacking contexts where
   O's bg would paint over N's content. A single wrap fixes
   this — the video stays pinned across both sections.
   ========================================================= */
.no-pinwrap{
  position:relative;
  isolation:isolate;
}
.no-pinwrap-bg{
  position:fixed;
  top:0; left:0;
  width:100vw; height:100vh;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  visibility:hidden;
}
.no-pinwrap-bg.is-active{visibility:visible}
.no-pinwrap-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  background:var(--ink-black);
}

/* Both N and O sit transparently over the shared bg. The inner
   .section div inside #international also needs the override —
   the global .section{background:var(--paper)} rule would
   otherwise paint a solid white panel over the fixed video. */
section#international,
section.industry,
#international > .section{
  background:transparent;
  color:var(--paper);
  position:relative;
  z-index:1;
}

/* O (Industry) text overrides for white-on-dark. */
#industry .kicker,
#industry .kicker--bold,
#industry .display-jp,
#industry h2,
#industry .body,
#industry .body p,
#industry .industry-tag{
  color:var(--paper) !important;
}
#industry .body,
#industry .body p{color:rgba(255,255,255,0.88) !important}
#industry .industry-tag{
  color:rgba(255,255,255,0.78) !important;
  border-top-color:var(--paper);
}
#industry .eyebrow-rule::after{background:var(--paper)}
#industry > .section-chip{
  background:var(--paper);
  color:var(--ink-black);
  outline:1px solid var(--ink-black);
  outline-offset:-1px;
}

/* N (International) text overrides for white-on-dark. */
#international .kicker,
#international .display-jp,
#international h2,
#international .display-en,
#international .body,
#international .english-label,
#international .english-body{
  color:var(--paper) !important;
}
#international .body{color:rgba(255,255,255,0.88) !important}
#international .display-en{color:rgba(255,255,255,0.72) !important}
#international .english-label{color:rgba(255,255,255,0.65) !important}
#international .english-body{color:rgba(255,255,255,0.92) !important}
#international .intl-grid .right{
  border-left-color:rgba(255,255,255,0.24);
}
@media (max-width:899px){
  #international .intl-grid .right{
    border-top-color:rgba(255,255,255,0.24);
    border-left-color:transparent;
  }
}
#international .btn{
  background:var(--paper);
  color:var(--ink-black);
  border-color:var(--paper);
}
#international .btn:hover{
  background:transparent;
  color:var(--paper);
}
#international [style*="border-top:1px solid"]{
  border-top-color:rgba(255,255,255,0.24) !important;
}

/* =========================================================
   M  ·  CRITICISM  solid-black backdrop
   White-on-dark text overrides match the K-style chip on a
   black ground. No video, no scroll-linked behaviour.
   ========================================================= */
section.section--criticism{
  background:var(--ink-black);
}
/* White-on-dark text overrides scoped to #criticism. The cells'
   hairlines also lift to translucent white so they read on dark. */
#criticism .kicker,
#criticism .display-jp,
#criticism h2,
#criticism h3,
#criticism .body,
#criticism .role,
#criticism .num{
  color:var(--paper) !important;
}
#criticism .body{color:rgba(255,255,255,0.88) !important}
#criticism .role{color:rgba(255,255,255,0.7) !important}
#criticism .num{color:rgba(255,255,255,0.55) !important}
#criticism .twobytwo{
  border-top:1px solid rgba(255,255,255,0.42);
  border-left:1px solid rgba(255,255,255,0.18);
}
#criticism .twobytwo > .cell{
  border-right:1px solid rgba(255,255,255,0.18);
  border-bottom:1px solid rgba(255,255,255,0.18);
}
#criticism .twobytwo > .cell:nth-child(2n){border-right:0}
#criticism .twobytwo > .cell:nth-last-child(-n+2){border-bottom:0}
@media (max-width:767px){
  #criticism .twobytwo{border-left:0}
  #criticism .twobytwo > .cell{border-right:0}
  #criticism .twobytwo > .cell:nth-last-child(-n+2){
    border-bottom:1px solid rgba(255,255,255,0.18);
  }
  #criticism .twobytwo > .cell:last-child{border-bottom:0}
}

/* =========================================================
   EDITORIAL IMAGES  ·  figures, captions, posters
   ========================================================= */
.figure{
  margin:0;
}
.figure img{
  display:block;
  width:100%;
  height:auto;
  background:var(--ink-black);  /* matches dark photo edges, prevents flash */
}
.figure figcaption{
  margin-top:14px;
  display:flex;
  align-items:flex-start;
  gap:14px;
  border-top:1px solid var(--hairline);
  padding-top:10px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--caption);
  line-height:1.5;
}
.figure figcaption .src{
  font-family:var(--display);
  font-style:italic;
  font-size:12px;
  letter-spacing:0;
  text-transform:none;
  color:var(--ink-page);
  white-space:nowrap;
  flex:0 0 auto;
}
.figure figcaption .src::before{
  content:"";
  display:inline-block;
  width:8px;height:8px;
  background:var(--ink-black);
  margin-right:8px;
  vertical-align:middle;
}
.figure figcaption .desc{flex:1}

/* full-bleed figure that breaks out of .wrap */
.figure--bleed{
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  width:100vw;
  max-width:100vw;
}
.figure--bleed figcaption{
  max-width:var(--max);
  margin-left:auto;
  margin-right:auto;
  padding-left:var(--pad-x);
  padding-right:var(--pad-x);
}

/* —— Score, with a 2px black frame to read as artifact —— */
.figure--score img{
  border-top:2px solid var(--ink-black);
  border-bottom:2px solid var(--ink-black);
}

/* —— Rehearsal inset (in concerts feature) —— */
.feature-inset{
  margin-top:24px;
}
.feature-inset .figure img{aspect-ratio:16/9;object-fit:cover}

/* Poster variant — show the full A4 portrait without cropping.
   Constrain max-height so it doesn't dominate the column. */
.feature-inset--poster .figure{
  background:transparent;
}
.feature-inset--poster .figure img{
  aspect-ratio:auto;
  object-fit:contain;
  width:auto;
  max-width:100%;
  max-height:520px;
  margin:0 auto;
  display:block;
  background:#0e0e0e;
}

/* —— Poster thumbs in timeline (K).
   Lives inside .t-event, below the meta line(s). */
.t-thumb{
  display:block;
  width:64px;
  height:auto;
  margin:14px 0 0;
  outline:1px solid var(--hairline);
  outline-offset:0;
}
@media (max-width:767px){
  .t-thumb{width:54px}
}

/* —— UTILITIES —— */
.flex{display:flex}
.gap-12{gap:12px}
.gap-16{gap:16px}
.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}
.mt-24{margin-top:24px}.mt-32{margin-top:32px}.mt-48{margin-top:48px}
.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}
.mb-32{margin-bottom:32px}.mb-48{margin-bottom:48px}

/* =========================================================
   COOKIE CONSENT BANNER
   Bottom-fixed, dismissible. State stored in localStorage so
   the choice carries across pages and reload. GDPR/JP-APPI
   compliant: Reject is equally prominent as Accept.
   Hidden by default (the controller sets hidden attribute on
   load if a choice is already recorded).
   ========================================================= */
.cookie-banner{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:9000;
  /* Liquid Glass effect (Apple visionOS / iPadOS 26 style) — heavy
     backdrop blur with saturation+brightness boost, layered semi-
     transparent fills for vibrancy, plus a top-edge inner highlight
     for the characteristic glass-rim sheen. Falls back to plain
     translucent white on browsers without backdrop-filter. */
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.42) 0%,
      rgba(255,255,255,0.62) 100%),
    rgba(255,255,255,0.18);
  -webkit-backdrop-filter:blur(30px) saturate(200%) brightness(108%);
  backdrop-filter:blur(30px) saturate(200%) brightness(108%);
  color:var(--ink-page);
  border-top:1px solid rgba(255,255,255,0.55);
  padding:18px 22px;
  font-family:var(--ui);
  font-size:13px;
  line-height:1.65;
  /* Layered shadow:
     1. Inner top highlight — bright sheen edge.
     2. Inner bottom — subtle inner shadow on the top rim.
     3. Outer — soft lift above the content below. */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    inset 0 -1px 0 rgba(0,0,0,0.04),
    0 -8px 32px rgba(0,0,0,0.06),
    0 -1px 0 rgba(0,0,0,0.04);
  animation:cookieFadeUp 280ms cubic-bezier(.2,.7,.2,1);
}
/* Optional second layer adds a faint vertical gradient overlay
   above the content for extra glass depth perception. */
.cookie-banner::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,
    rgba(255,255,255,0.25) 0%,
    rgba(255,255,255,0) 40%);
  mix-blend-mode:screen;
}
/* Make sure the inner content sits above the ::before overlay. */
.cookie-banner__inner{position:relative;z-index:1}
.cookie-banner[hidden]{display:none}
@keyframes cookieFadeUp{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}
.cookie-banner__inner{
  display:flex;
  flex-direction:column;
  gap:14px;
  /* Keep the content centered and within editorial max-width on wide
     viewports while the bar itself spans full screen width. */
  max-width:var(--max,1440px);
  margin:0 auto;
}
@media (min-width:680px){
  .cookie-banner__inner{
    flex-direction:row;
    align-items:center;
    gap:24px;
  }
}
.cookie-banner__text{
  margin:0;
  flex:1 1 auto;
  color:var(--ink-page);
}
.cookie-banner__text a{
  color:var(--ink-black);
  text-decoration:underline;
  text-underline-offset:2px;
}
.cookie-banner__text a:hover{color:var(--link-blue)}
.cookie-banner__actions{
  display:flex;
  gap:8px;
  flex:0 0 auto;
  flex-wrap:wrap;
}
.cookie-banner__btn{
  font-family:var(--ui);
  font-size:12px;
  font-weight:600;
  letter-spacing:0.6px;
  padding:10px 18px;
  /* Glass-pill outline for Reject — fully transparent fill, soft
     dark border that matches the banner's translucent palette. */
  border:1px solid rgba(0,0,0,0.32);
  background:rgba(255,255,255,0.18);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  color:var(--ink-black);
  cursor:pointer;
  border-radius:999px;
  transition:background 160ms ease, color 160ms ease,
             border-color 160ms ease, transform 160ms ease,
             box-shadow 160ms ease;
  white-space:nowrap;
  position:relative;
  z-index:1;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
}
.cookie-banner__btn--accept{
  /* Solid pill — primary action stands out as a tactile dark capsule. */
  background:linear-gradient(180deg, #1a1a1a 0%, #000 100%);
  border-color:rgba(0,0,0,0.7);
  color:var(--paper);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 1px 4px rgba(0,0,0,0.12);
}
.cookie-banner__btn:hover{
  background:rgba(0,0,0,0.06);
  border-color:rgba(0,0,0,0.45);
  transform:translateY(-1px);
}
.cookie-banner__btn--accept:hover{
  background:linear-gradient(180deg, var(--link-blue,#1a4eff) 0%, #0028b6 100%);
  border-color:var(--link-blue,#1a4eff);
  color:var(--paper);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 4px 14px rgba(26,78,255,0.32);
  transform:translateY(-1px);
}
.cookie-banner__btn:active{transform:translateY(0)}

/* =========================================================
   RTL support — applied via <html dir="rtl"> on Arabic pages.
   Most flex/grid layout mirrors automatically; we override the
   inline text direction for body content, restore the LTR
   direction on UI elements that should stay left-to-right
   (logo, language select, English/numeric metadata, embedded
   YouTube IDs etc.), and flip a few padding/margin/border
   asymmetries that are explicit left/right.
   ========================================================= */
html[dir="rtl"] body{ text-align:right }
html[dir="rtl"] .wrap,
html[dir="rtl"] .legal-page,
html[dir="rtl"] .notes-page,
html[dir="rtl"] .work-body,
html[dir="rtl"] .movement-body,
html[dir="rtl"] .legal-intro,
html[dir="rtl"] .body{ text-align:right }

/* Lists in RTL — mirror padding so bullets/numbers sit on
   the right side of the text block. */
html[dir="rtl"] ul,
html[dir="rtl"] ol{ padding-right:24px; padding-left:0 }

/* The language switcher itself stays LTR — option labels
   like JA/EN/ES/AR are Latin abbreviations and the chevron
   should remain at the trailing (right) edge in the open
   direction users expect. */
html[dir="rtl"] .utility-bar .lang-select{ direction:ltr }

/* Logo and brand mark are bilingual / Latin — keep LTR. */
html[dir="rtl"] .bar-logo,
html[dir="rtl"] .footer-mark{ direction:ltr }

/* Mono-style technical metadata (timestamps, kickers,
   numeric refs) reads more naturally LTR even on RTL pages. */
html[dir="rtl"] .kicker,
html[dir="rtl"] .ribbon .num,
html[dir="rtl"] .legal-meta,
html[dir="rtl"] .notes-meta,
html[dir="rtl"] .footer-bottom,
html[dir="rtl"] .footer-credit,
html[dir="rtl"] .footer-copy,
html[dir="rtl"] .footer-locale{ direction:ltr; text-align:left }

/* The utility-bar uses a left border on the language select
   — in RTL that visually becomes the right edge. Swap so the
   border still separates the select from the preceding nav
   item visually on the trailing side. */
html[dir="rtl"] .utility-bar .lang-select{
  border-left:0;
  border-right:1px solid #2a2a2a;
}

/* Form labels / input flow — the contact form uses left-aligned
   labels above each field. Mirror to right-aligned in RTL. */
html[dir="rtl"] .form-row label,
html[dir="rtl"] .form-row .form-meta,
html[dir="rtl"] .form-consent label{ text-align:right }

/* Some headings in the editorial layout use specific letter-spacing
   that becomes awkward at RTL extremes; loosen slightly. */
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4{ letter-spacing:0 }