/* =========================================================
   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}
  /* Long composer-name + work-title strings (esp. translated ones)
     can otherwise push the row wider than the viewport on phones.
     Allow word breaks and slightly tighten the meta line to keep
     everything within the column. */
  .rec-item .meta{
    font-size:10px;
    letter-spacing:0.9px;
    overflow-wrap:break-word;
    word-break:break-word;
  }
  .rec-item h3{
    font-size:18px;
    overflow-wrap:break-word;
    word-break:break-word;
  }
  .rec-item .sub{
    overflow-wrap:break-word;
    word-break:break-word;
  }
}

/* =========================================================
   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 }