@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap');
:root{--paper:#f6efe3;--ink:#1a130d;--dark:#17110c;--gold:#b77b38;--cream:#fff7e4;--muted:#817466}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Noto Sans JP',sans-serif}
a{text-decoration:none;color:inherit}
.glow{position:fixed;width:320px;height:320px;border-radius:50%;pointer-events:none;z-index:40;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(255,218,156,.18),transparent 68%);opacity:0}
header{position:fixed;z-index:30;inset:0 0 auto;height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 4vw;color:#fff;background:linear-gradient(#17100acc,transparent)}
.brand{display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:3px}.brand img{width:34px;height:34px}
header nav{display:flex;gap:26px;font-size:10px;letter-spacing:2px}header nav a{opacity:.8}
.headerRight{display:flex;align-items:center;gap:12px}.mini{padding:10px 17px;border:1px solid #fff8;border-radius:30px;font-size:10px}
.langSwitch{display:flex;align-items:center;gap:5px;font-size:9px;letter-spacing:.5px;white-space:nowrap}
.langSwitch span{opacity:.45}.langBtn{border:0;background:transparent;color:#fff;padding:5px 2px;cursor:pointer;font:inherit;opacity:.55}.langBtn.active{opacity:1;font-weight:700}
.hero{height:100svh;min-height:680px;position:relative;display:grid;place-items:center;color:#fff;overflow:hidden}
.bg{position:absolute;inset:0;background:url('assets/page1.jpg') center/cover no-repeat;transform:scale(1.025)}
.veil{position:absolute;inset:0;background:linear-gradient(#08060355 0%,#08060312 48%,#080603b8 100%)}
.heroIn{position:relative;z-index:2;text-align:center;width:min(920px,92vw);margin-top:35px}.eyebrow{font-size:10px;letter-spacing:5px;font-weight:700}.gold{color:#a36f37}
.logo{width:min(720px,95vw);display:block;margin:0 auto 4px;filter:drop-shadow(0 14px 30px #0007)}
.lead{font-size:13px;line-height:2;text-shadow:0 2px 10px #000;margin:0 0 25px}
.actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;gap:16px;padding:14px 24px;border-radius:999px;font-size:11px;font-weight:700;cursor:pointer;transition:.25s}
.primary{background:linear-gradient(120deg,#fff4d8,#d29a51);color:#2c1a0b;box-shadow:0 12px 30px #0004}.primary:hover{transform:translateY(-2px)}
.ghost{border:1px solid #fff8;background:#0002;color:#fff}
.stats{width:min(660px,94vw);margin:35px auto 0;padding:11px 15px;border:1px solid #fff3;background:#130d08a8;backdrop-filter:blur(12px);border-radius:16px;display:flex;align-items:center;text-align:left;gap:11px}
.stats>img{width:46px;height:46px;border-radius:12px}.stats b{font-size:11px;letter-spacing:2px}.stats div{flex:1}.stats div small{display:block;font-size:8px;opacity:.65;margin-top:3px}
.stats>span{border-left:1px solid #fff2;padding-left:16px;text-align:center;min-width:65px}.stats strong{display:block;color:#ffe1a8;font:20px Georgia}.stats span small{font-size:7px;letter-spacing:1px;opacity:.65}
.scroll{position:absolute;bottom:20px;z-index:2;left:50%;transform:translateX(-50%);font-size:8px;letter-spacing:4px;opacity:.7}
.section{padding:115px 6vw}.head{max-width:800px;text-align:center;margin:0 auto 55px}
.head h2,.splitText h2,.event h2,.join h2{font:600 clamp(40px,5vw,70px)/.98 'Cormorant Garamond',serif;margin:12px 0 18px}
.head h2 em,.splitText em,.join em{font-style:normal;color:var(--gold)}
.head>p:last-child,.splitText>p{font-size:14px;line-height:2;color:var(--muted)}
.cards{max-width:1180px;margin:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#d9c9b1}
.cards article{position:relative;background:#fbf6ed;padding:35px 28px;min-height:280px}
.cards article>i{position:absolute;right:18px;top:17px;color:#b58a58;font:italic 17px Georgia}.cards article>b{display:block;color:#b67c3c;font-size:24px;margin-bottom:45px}
.cards h3{font:600 26px/1.1 'Cormorant Garamond',serif;margin:0 0 14px}.cards p{font-size:12px;line-height:1.9;color:var(--muted)}
.split{display:grid;grid-template-columns:1.1fr .9fr;background:#eee3d2}.splitImg{min-height:590px;background:linear-gradient(90deg,transparent,#eee3d2),url('assets/page2.jpg') center/cover}
.splitText{align-self:center;padding:70px 8vw 70px 4vw}.pills{display:flex;gap:7px;flex-wrap:wrap;margin:24px 0}.pills span{border:1px solid #d1b487;border-radius:99px;padding:7px 11px;font-size:9px}.link{font-size:11px;color:#8a5c2d;font-weight:700}
.dark{background:var(--dark);color:#fff}.dark .head>p:last-child{color:#9f9383}.channels{max-width:1060px;margin:auto;border-top:1px solid #fff2}
.channels article{display:grid;grid-template-columns:60px 1fr 30px;gap:18px;align-items:center;padding:26px 6px;border-bottom:1px solid #fff2;transition:.25s}.channels article:hover{background:#fff0008;padding-left:15px}
.channels article>b{font:italic 18px Georgia;color:#c99b5c}.channels small{letter-spacing:3px;font-size:8px;color:#d2a566}.channels h3{font:600 24px 'Cormorant Garamond',serif;margin:5px 0}.channels p{font-size:11px;color:#918576;margin:0}.channels em{font-style:normal;color:#e0bb7e}
.gallery{background:#f8f0e4}.grid{max-width:1180px;margin:auto;display:grid;grid-template-columns:1.3fr 1fr;grid-template-rows:260px 260px;gap:12px}.grid img{width:100%;height:100%;object-fit:cover}.grid .big{grid-row:1/3}
.event{padding:0px 6vw;background:linear-gradient(120deg,#25170c,#7d542e);color:#fff}.eventIn{max-width:1100px;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}.event h2{margin:10px 0}.eventIn>div:last-child p{color:#dfd1bd;font-size:13px;line-height:2}.light{background:#fff6e5;color:#35200e;margin-top:15px}
.staff{background:#f2e8d9}.staffGrid{max-width:900px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.staffGrid article{text-align:center;background:#fffaf2;padding:35px 20px;border:1px solid #e1d0b7}.staffIcon{width:72px;height:72px;border-radius:50%;display:block;object-fit:cover;margin:0 auto 15px;box-shadow:0 4px 12px rgba(0,0,0,.16)}.staffGrid h3{font:600 22px 'Cormorant Garamond',serif;margin:0}.staffGrid p{font-size:8px;letter-spacing:2px;color:#8e806e}.staffX{display:inline-block;margin-top:10px;font-size:10px;letter-spacing:1px;color:#8a5c2d;font-weight:700;transition:.2s}.staffX:hover{opacity:.65;text-decoration:underline}
.join{padding:95px 5vw;background:var(--dark);color:#fff}.joinBox{max-width:900px;margin:auto;text-align:center;padding:65px 25px;border:1px solid #d3a15d55;background:radial-gradient(circle at 50% 0,#c38b471c,transparent 55%)}.joinBox>img{width:68px}.join h2{margin:12px 0}.joinBox>p:not(.eyebrow){color:#a99b89;font-size:12px;margin-bottom:25px}.big{padding:16px 30px}
footer{padding:28px 6vw;background:#100c09;color:#8e8274;display:flex;gap:22px;align-items:center;flex-wrap:wrap;font-size:9px}footer div{display:flex;align-items:center;gap:8px;color:#eee2cd;letter-spacing:2px}footer img{width:28px}footer small{margin-left:auto}
.reveal{opacity:0;transform:translateY(22px);transition:.8s}.reveal.visible{opacity:1;transform:none}
@media(max-width:900px){header nav{display:none}.headerRight{gap:8px}.cards{grid-template-columns:1fr 1fr}.split{grid-template-columns:1fr}.splitImg{min-height:390px;background:linear-gradient(180deg,transparent,#eee3d2),url('assets/page2.jpg') center/cover}.splitText{padding:65px 8vw}.eventIn{grid-template-columns:1fr;gap:15px}.staffGrid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){header{padding:0 4vw}.brand b{display:none}.langSwitch{font-size:8px}.mini{padding:9px 11px;font-size:9px}.section{padding:85px 5vw}.hero{min-height:720px}.lead{font-size:11px}.stats{display:grid;grid-template-columns:46px 1fr 58px 58px}.stats>span{min-width:0;padding-left:9px}.cards,.staffGrid{grid-template-columns:1fr}.cards article{min-height:230px}.channels article{grid-template-columns:40px 1fr 18px}.channels h3{font-size:20px}.grid{grid-template-columns:1fr;grid-template-rows:240px 180px 180px}.grid .big{grid-row:auto}.event{padding:75px 6vw}footer small{width:100%;margin:0}}

/* Main Mecho logo: slightly smaller display size, high-resolution source */
.hero-logo img,
.hero .logo,
.hero-logo,
.main-logo,
.site-logo {
  width: min(459px, 64.8vw);
  height: auto;
}


/* ===== Updated community sections ===== */

/* ABOUT: slightly larger supporting text */
.cards p{font-size:14px;line-height:1.9}
.cards h3{font-size:27px}

/* JP / EN COMMUNITY: give the text side more room so explicit <br> breaks are respected */
.split{grid-template-columns:minmax(0,.9fr) minmax(540px,1.1fr)}
.splitText{padding:78px clamp(5vw,7vw,100px) 78px 5vw}
.splitText h2{max-width:760px}
.splitText>p{max-width:760px}

/* CHANNEL GUIDE: left channel list + right preview panel */
.channelExplorer{
  max-width:1180px;
  margin:auto;
  display:grid;
  grid-template-columns:minmax(300px,.78fr) minmax(0,1.22fr);
  gap:26px;
  align-items:stretch;
}
.channelList{
  border-top:1px solid #fff2;
}
.channelItem{
  width:100%;
  min-height:78px;
  display:grid;
  grid-template-columns:55px 1fr 28px;
  align-items:center;
  gap:15px;
  padding:17px 12px;
  border:0;
  border-bottom:1px solid #fff2;
  background:transparent;
  color:#fff;
  text-align:left;
  cursor:pointer;
  transition:.25s ease;
  font-family:inherit;
}
.channelItem:hover,
.channelItem.active{
  background:linear-gradient(90deg,#ffffff12,transparent);
  padding-left:20px;
}
.channelItem b{
  font:italic 18px Georgia,serif;
  color:#c99b5c;
}
.channelItem span{
  font:600 25px 'Cormorant Garamond',serif;
}
.channelItem em{
  font-style:normal;
  color:#d8b475;
  font-size:18px;
  transition:transform .25s ease;
}
.channelItem.active em{transform:rotate(45deg)}

.channelPreview{
  position:relative;
  min-height:500px;
  overflow:hidden;
  border:1px solid #fff2;
  background:#21170f;
  isolation:isolate;
}
.channelPreviewBg{
  position:absolute;
  inset:0;
  background-position:center;
  background-size:cover;
  transition:background-image .35s ease,transform .7s ease;
  transform:scale(1.01);
}
.channelPreview:hover .channelPreviewBg{transform:scale(1.035)}
.channelPreviewVeil{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#0b0806dd 0%,#0b080688 55%,#0b080633 100%);
  z-index:1;
}
.channelPreviewContent{
  position:absolute;
  z-index:2;
  inset:auto auto 42px 42px;
  width:min(30em,calc(100% - 84px));
}
.channelPreviewContent .eyebrow{
  color:#d8b475;
  margin-bottom:12px;
}
.channelPreviewContent h3{
  font:600 clamp(34px,4vw,52px)/1 'Cormorant Garamond',serif;
  margin:0 0 20px;
}
.channelPreviewContent p{
  margin:0;
  max-width:30em;
  font-size:14px;
  line-height:2;
  color:#fff;
  text-shadow:0 2px 8px #000;
}

/* GALLERY base styles; JavaScript controls the continuous loop */
.galleryViewport{
  max-width:100%;
  overflow:hidden;
  position:relative;
  padding:8px 0 18px;
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.galleryTrack{
  display:flex;
  width:max-content;
  will-change:transform;
  animation:galleryMarquee 95s linear infinite;
}
.gallerySet{
  display:flex;
  flex:none;
  gap:14px;
  padding-right:14px;
}
.gallerySet img{
  flex:none;
  width:300px;
  height:205px;
  object-fit:cover;
  display:block;
  border-radius:2px;
}
@keyframes galleryMarquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.galleryViewport:hover .galleryTrack{animation-play-state:paused}

/* COMMUNITY EVENTS: title + description on left, one photo on right */
.eventIn{
  grid-template-columns:minmax(0,1fr) minmax(360px,.9fr);
  gap:65px;
}
.eventCopy{
  min-width:0;
}
.eventCopy h2{
  max-width:760px;
}
.eventCopy>p:last-child{
  color:#dfd1bd;
  font-size:14px;
  line-height:2;
  max-width:700px;
  margin:28px 0 0;
}
.eventPhoto{
  min-height:430px;
  background:
    linear-gradient(90deg,#25170c44,#25170c00),
    url('assets/page3.jpg') center/cover no-repeat;
  border:1px solid #d3a15d44;
}

/* STAFF: exactly two people */
.staffGrid{
  max-width:760px;
  grid-template-columns:repeat(2,1fr);
}

/* Mobile */
@media(max-width:1100px){
  .split{grid-template-columns:minmax(0,.85fr) minmax(480px,1.15fr)}
  .channelExplorer{grid-template-columns:minmax(250px,.72fr) minmax(0,1.28fr)}
}
@media(max-width:900px){
  .split{grid-template-columns:1fr}
  .splitText{padding:65px 8vw}
  .channelExplorer{grid-template-columns:1fr;gap:18px}
  .channelPreview{min-height:480px}
  .channelPreviewContent{inset:auto 28px 32px;width:calc(100% - 56px)}
  .eventIn{grid-template-columns:1fr;gap:28px}
  .eventPhoto{min-height:360px}
}
@media(max-width:600px){
  .cards p{font-size:13px}
  .cards h3{font-size:25px}
  .splitText h2{font-size:clamp(38px,10vw,54px)}
  .channelItem{grid-template-columns:42px 1fr 22px;min-height:68px}
  .channelItem span{font-size:23px}
  .channelPreview{min-height:520px}
  .channelPreviewContent p{font-size:13px;line-height:1.9}
  .galleryTrack{animation-duration:80s}
  .gallerySet img{width:250px;height:175px}
  .eventPhoto{min-height:300px}
  .staffGrid{grid-template-columns:1fr}
}


/* ===== Site update 8 ===== */
.splitText{padding-right:clamp(4vw,6vw,90px)}
.splitText h2{max-width:820px}

/* CHANNEL GUIDE: 7 channels */
.channelExplorer{grid-template-columns:minmax(320px,.8fr) minmax(0,1.2fr)}
.channelItem{min-height:74px}

/* GALLERY: up to 30 source images, automatically repeated for seamless looping */
.galleryViewport{
  cursor:grab;
  touch-action:pan-y;
  user-select:none;
}
.galleryViewport.is-dragging{cursor:grabbing}
.galleryTrack{
  animation:none !important;
  transform:translate3d(0,0,0);
}
.gallerySet{gap:21px;padding-right:21px}
.gallerySet img{
  width:656px;
  height:369px;
  aspect-ratio:16 / 9;
  object-fit:cover;
  object-position:center;
  cursor:zoom-in;
  flex:none;
  user-select:none;
  -webkit-user-drag:none;
}
/* ============================================================
   Gallery protection
   ============================================================ */

.galleryViewport,
.galleryViewport img,
.galleryLightbox,
.galleryLightbox img{
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}

.galleryViewport img,
.galleryLightbox img{
  -webkit-user-drag:none;
  user-drag:none;
}

.galleryViewport::selection,
.galleryViewport img::selection,
.galleryLightbox::selection,
.galleryLightbox img::selection{
  background:transparent;
}
.gallerySet img:active{cursor:grabbing}

/* Gallery lightbox */
.galleryLightbox{
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;
  place-items:center;
  padding:5vh 5vw;
  background:rgba(10,7,4,.88);
  opacity:0;
  transition:opacity .18s ease;
  cursor:zoom-out;
}
.galleryLightbox.visible{opacity:1}
.galleryLightbox img{
  max-width:90vw;
  max-height:88vh;
  width:auto;
  height:auto;
  object-fit:contain;
  box-shadow:0 20px 70px rgba(0,0,0,.55);
  cursor:default;
}
.galleryLightboxClose{
  position:absolute;
  top:22px;
  right:28px;
  width:44px;
  height:44px;
  border:1px solid rgba(255,255,255,.45);
  border-radius:50%;
  background:rgba(0,0,0,.25);
  color:#fff;
  font-size:30px;
  line-height:1;
  cursor:pointer;
}

/* COMMUNITY EVENTS: full-height right-edge photo, softly blended into the background toward the left. */
.eventIn{
  max-width:none;
  width:100%;
  grid-template-columns:minmax(0,1fr) minmax(420px,48%);
  gap:0;
  align-items:stretch;
  padding-left:6vw;
}
.eventCopy{
  min-width:0;
  padding:0 6vw 0 0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.eventCopy h2{
  max-width:none;
  width:100%;
  font-size:clamp(42px,5vw,70px);
}
.eventCopy>p:last-child{
  max-width:1080px;
  margin:28px 0 0;
}
.eventPhoto{
  position:relative;
  min-height:0;
  height:100%;
  align-self:stretch;
  border:0;
  background:url('assets/page3.jpg') center/cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.08) 12%,#000 43%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.08) 12%,#000 43%,#000 100%);
}
.eventPhoto::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#25170c 0%,#25170caa 20%,transparent 56%);
  pointer-events:none;
}

@media(max-width:900px){
  .eventIn{
    grid-template-columns:1fr;
    padding-left:0;
  }
  .eventCopy{
    padding:0;
  }
  .eventPhoto{
    min-height:360px;
    height:360px;
  }
}
@media(max-width:600px){
  .gallerySet{
    gap:14px;
    padding-right:14px;
  }

  .gallerySet img{
    width:360px;
    height:202.5px;
    aspect-ratio:16 / 9;
    object-fit:cover;
    object-position:center;
  }

  .galleryLightbox{
    padding:4vh 3vw;
  }

  .galleryLightbox img{
    max-width:94vw;
    max-height:86vh;
  }

  .galleryLightboxClose{
    top:14px;
    right:14px;
  }
}

/* Keep the intended COMMUNITY EVENTS line break on larger screens. */
@media(min-width:901px){
  .eventCopy h2 br{display:block}
}


/* ===== Site update 9: COMMUNITY EVENTS title/photo refinement ===== */
@media(min-width:901px){
  .eventIn{
    grid-template-columns:minmax(0,35fr) minmax(0,65fr);
    gap:0;
    padding-left:0;
    margin-right:-6vw;
    min-height:0px;
  }
  .eventCopy{
    padding-right:3vw;
  }
  .eventCopy h2{
    max-width:none;
    width:100%;
    white-space:nowrap;
  }
  .eventPhoto{
    width:100%;
    min-width:100%;
    min-height:620px;
    height:100%;
    justify-self:end;
  }
}

@media(max-width:900px){
  .eventCopy h2{
    white-space:normal;
  }
}

/* ============================================================
   FINAL MOBILE FIX
   PC layout/assets remain unchanged.
   ============================================================ */
@media(max-width:600px){

  /* Seven main section titles only — JP and EN both use these h2 elements. */
  #about .head h2,
  .splitText h2,
  #channels .head h2,
  #gallery .head h2,
  .event h2,
  #staff .head h2,
  .join h2{
    font-size:36px;
  }

  /* Keep the section eyebrow labels at their original size. */
  #about .eyebrow,
  .splitText .eyebrow,
  #channels .eyebrow,
  #gallery .eyebrow,
  .event .eyebrow,
  #staff .eyebrow,
  .join .eyebrow{
    font-size:10px;
  }

  /* JP / EN COMMUNITY uses the same image as desktop. */
  .splitImg{
    background:
      linear-gradient(180deg,transparent,#eee3d2),
      url('assets/page2.jpg') center/cover no-repeat;
  }

  /* CHANNEL GUIDE becomes a full-width vertical layout. */
  .channelExplorer{
    grid-template-columns:1fr;
    width:100%;
    max-width:none;
    gap:24px;
  }

  .channelList,
  .channelItem,
  .channelPreview{
    width:100%;
    max-width:none;
  }

  .channelItem{
    min-width:0;
  }

  /* Let the preview grow with its text instead of clipping it. */
  .channelPreview{
    min-height:520px;
    height:auto;
    overflow:hidden;
  }

  .channelPreviewContent{
    position:relative;
    inset:auto;
    width:auto;
    min-height:520px;
    padding:220px 24px 30px;
  }

  .channelPreviewContent h3{
    font-size:34px;
    margin-bottom:18px;
  }

  .channelPreviewContent p{
    max-width:none;
    font-size:13px;
    line-height:1.9;
  }

  /* Preserve the full preview background image/veil. */
  .channelPreviewBg,
  .channelPreviewVeil{
    position:absolute;
    inset:0;
  }

  .eventCopy h2{
    white-space:normal;
  }
}

/* ============================================================
   MOBILE UPDATE: COMMUNITY EVENTS / JOIN THE COMMUNITY
   PC layout/assets remain unchanged.
   ============================================================ */
@media(max-width:600px){

  /* COMMUNITY EVENTS:
     Keep the photo at the very bottom of the section and
     blend/fade it into the section background toward the top. */
  .event{
    padding-bottom:0;
    overflow:hidden;
  }

  .eventIn{
    grid-template-columns:1fr;
    gap:28px;
    min-height:0;
  }

  .eventPhoto{
    order:2;
    width:100%;
    min-width:0;
    min-height:360px;
    height:360px;
    margin-bottom:0;
    background-position:center;
    background-size:cover;
    border:0;

    /* Image remains strongest at the bottom and gradually
       blends into the event background toward the top. */
    -webkit-mask-image:linear-gradient(
      to top,
      #000 0%,
      #000 34%,
      rgba(0,0,0,.82) 52%,
      rgba(0,0,0,.35) 76%,
      transparent 100%
    );
    mask-image:linear-gradient(
      to top,
      #000 0%,
      #000 34%,
      rgba(0,0,0,.82) 52%,
      rgba(0,0,0,.35) 76%,
      transparent 100%
    );
  }

  .eventPhoto::after{
    background:linear-gradient(
      to top,
      #25170c33 0%,
      transparent 70%
    );
  }

  /* JOIN THE COMMUNITY:
     Make the title smaller so each explicit line fits cleanly. */
  .join h2{
    font-size:30px;
    line-height:1.05;
  }
}

/* ============================================================
   MOBILE ONLY: COMMUNITY EVENTS PHOTO POSITION / BLEND
   Based exclusively on the currently attached style (11).css.
   PC layout remains unchanged.
   ============================================================ */
@media(max-width:600px){

  .event{
    overflow:hidden;
  }

  /* Extend the mobile event content to the right edge of the viewport.
     The existing left-side spacing is preserved. */
  .eventIn{
    width:calc(100% + 6vw);
    margin-right:-6vw;
    grid-template-columns:1fr;
    gap:28px;
    min-height:0;
  }

  .eventPhoto{
    order:2;
    width:100%;
    min-width:0;
    min-height:360px;
    height:360px;
    margin:0;
    justify-self:end;
    align-self:end;
    background-position:center;
    background-size:cover;
    border:0;

    /* Fade from the left side into the background.
       The right side remains fully visible. */
    -webkit-mask-image:linear-gradient(
      to right,
      transparent 0%,
      rgba(0,0,0,.12) 10%,
      rgba(0,0,0,.45) 22%,
      rgba(0,0,0,.82) 38%,
      #000 55%,
      #000 100%
    );
    mask-image:linear-gradient(
      to right,
      transparent 0%,
      rgba(0,0,0,.12) 10%,
      rgba(0,0,0,.45) 22%,
      rgba(0,0,0,.82) 38%,
      #000 55%,
      #000 100%
    );
  }

  .eventPhoto::after{
    background:linear-gradient(
      to right,
      #25170c 0%,
      #25170c99 18%,
      #25170c35 38%,
      transparent 62%
    );
  }
}

/* ============================================================
   MOBILE ONLY: CHANNEL GUIDE text position
   Based exclusively on the currently attached style (12).css.
   PC layout remains unchanged.
   ============================================================ */
@media(max-width:600px){

  /* Place the channel preview text block at the bottom-left
     of the image, with all text aligned to the bottom area. */
  .channelPreviewContent{
    position:absolute;
    inset:auto 24px 30px 24px;
    width:auto;
    min-height:0;
    padding:0;
  }

  .channelPreviewContent .eyebrow{
    margin-bottom:10px;
  }

  .channelPreviewContent h3{
    margin:0 0 14px;
  }

  .channelPreviewContent p{
    margin:0;
    max-width:none;
  }
}


/* MOBILE ONLY: CHANNEL GUIDE — restore original darkness, fade top to bottom */
@media(max-width:600px){
  .channelPreviewVeil{
    background:linear-gradient(
      0deg,
      #0b0806dd 0%,
      #0b080688 40%,
      #0b080633 100%
    );
  }
}