@charset "UTF-8";

/* Preserve the completed SHOWCASE spacing within the shared ABOUT shell. */
.cs-default-page:has(.comrade-showcase){
  padding-top:calc(var(--cs-header-h) + var(--sp-xl));
  padding-bottom:var(--sp-xxl);
}
@media (max-width:768px){
  .cs-default-page:has(.comrade-showcase){
    padding-top:calc(var(--cs-header-h) + var(--sp-l));
    padding-bottom:var(--sp-xl);
  }
}

/* Optional editorial layout supplied by the BRAND SHOWCASE content. */
.cs-default-page .comrade-showcase{
  font-family:"Cormorant Garamond", "Noto Serif JP", serif;
}
.cs-default-page .comrade-showcase__content a{
  font-family:"Cormorant Garamond", "Noto Serif JP", serif;
}
.cs-default-page .comrade-showcase__visual{margin:0;max-width:480px;}
.cs-default-page .comrade-showcase__visual img{
  display:block;
  width:100%;
  height:auto;
}
.cs-default-page .comrade-showcase__content{
  padding-top:var(--sp-xxl);
}
.cs-default-page .comrade-showcase__title{
  margin:0 0 var(--sp-xl);
  font-family:"Cormorant Garamond", "Noto Serif JP", serif;
  font-size:var(--fs-lg);
  font-weight:400;
  line-height:var(--lh-tight);
  letter-spacing:.12em;
}
.cs-default-page .comrade-showcase__info,
.cs-default-page .comrade-showcase__block{
  margin:0 0 var(--sp-xl);
}
.cs-default-page .comrade-showcase__content p{margin:0;}
/* SOUND belongs to the first event: reduce only its surrounding gaps. */
.cs-default-page .comrade-showcase__info:not(.comrade-showcase__info--venue),
.cs-default-page .comrade-showcase__info:not(.comrade-showcase__info--venue) + .comrade-showcase__block{
  margin-bottom:calc(var(--sp-xl) / 2);
}
/* Connect the time directly to its venue for the two later events. */
.cs-default-page .comrade-showcase__info--venue{margin-bottom:0;}
.cs-default-page .comrade-showcase__block:last-child{margin-bottom:0;}
@media (max-width:768px){
  /* Follow the existing header inset without changing the shared page shell. */
  .cs-default-page .comrade-showcase{
    margin-left:calc(var(--cs-header-pad-x) - var(--cs-page-pad));
    /* 44px menu hit area contains a centered 18px visible line: inset 13px. */
    margin-right:calc(var(--cs-header-pad-x) + 13px - var(--cs-page-pad));
  }
  .cs-default-page .comrade-showcase__visual{max-width:none;}
  .cs-default-page .comrade-showcase__content{padding-top:var(--sp-xl);}
  .cs-default-page .comrade-showcase__title{font-size:18px;}
  .cs-default-page .comrade-showcase__info,
  .cs-default-page .comrade-showcase__block{margin-bottom:var(--sp-l);}
  .cs-default-page .comrade-showcase__info:not(.comrade-showcase__info--venue),
  .cs-default-page .comrade-showcase__info:not(.comrade-showcase__info--venue) + .comrade-showcase__block{
    margin-bottom:calc(var(--sp-l) / 2);
  }
}

@media (max-width:767px){
  /* Existing mobile menu hit area is 40px; its 18px line is inset 11px. */
  .cs-default-page .comrade-showcase{
    margin-right:calc(var(--cs-header-pad-x) + 11px - var(--cs-page-pad));
  }
}

@media (min-width:769px){
  /* Match the unchanged header: 44px hit area, centered 18px menu lines. */
  body:has(.cs-default-page .comrade-showcase){
    --cs-showcase-site-left:var(--cs-header-pad-x);
    --cs-showcase-site-right:calc(var(--cs-header-pad-x) + (44px - 18px) / 2);
  }
  .cs-default-page__inner:has(.comrade-showcase){
    width:100%;
    padding-left:var(--cs-showcase-site-left);
    padding-right:var(--cs-showcase-site-right);
  }
  .cs-default-page .comrade-showcase{
    display:grid;
    grid-template-columns:minmax(0, .9fr) minmax(0, 1fr);
    column-gap:4%;
    align-items:start;
  }
  .cs-default-page .comrade-showcase__visual{max-width:none;}
  .cs-default-page .comrade-showcase__content{
    min-width:0;
    /* Equal to 18% of the fluid visual height: .9 × 906/604 × .18. */
    padding-top:24.3%;
  }
}

/* Loading: opacity only; no page visibility, focus or scroll changes. */
.comrade-showcase-loading{
  position:fixed;
  inset:0;
  z-index:10000;
  display:grid;
  place-items:center;
  background:#fff;
  pointer-events:none;
  animation:comrade-showcase-loading-out 3s ease-in-out both;
}
.comrade-showcase-loading__logo{
  display:block;
  width:114.75px;
  max-width:calc(100% - 48px);
  height:auto;
  animation:comrade-showcase-loading-in 1.3s cubic-bezier(.42,0,.25,1) .2s both;
}
@keyframes comrade-showcase-loading-in{
  from{opacity:0;}
  to{opacity:.85;}
}
@keyframes comrade-showcase-loading-out{
  0%,60%{opacity:1;visibility:visible;}
  100%{opacity:0;visibility:hidden;}
}
@media (max-width:768px){
  .comrade-showcase-loading__logo{
    width:85px;
    max-width:calc(100% - 32px);
  }
}
@media (prefers-reduced-motion:reduce){
  .comrade-showcase-loading{display:none;animation:none;}
  .comrade-showcase-loading__logo{animation:none;}
}

/* Venue names: retain the existing type metrics and show the link at rest. */
.cs-default-page .comrade-showcase__content a{
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.2em;
  transition:opacity .25s ease;
}
@media(hover:hover){
  .cs-default-page .comrade-showcase__content a:hover{opacity:.7;}
}
.cs-default-page .comrade-showcase__content a:focus-visible{
  outline:1px solid currentColor;
  outline-offset:3px;
}
@media(prefers-reduced-motion:reduce){
  .cs-default-page .comrade-showcase__content a{transition:none;}
}

/* Poster: match existing text reveal duration, but fade with no movement. */
.cs-default-page .comrade-showcase__visual.reveal{
  transform:none;
  transition:opacity 1.18s cubic-bezier(.22,.61,.36,1);
}
.cs-default-page .comrade-showcase__visual.reveal.is-visible{transform:none;}

/* Keep date/time connected to each venue also on mobile (override the mobile info margin). */
.cs-default-page .comrade-showcase__info.comrade-showcase__info--venue{margin-bottom:0;}