@view-transition{navigation:auto}
::view-transition-group(root){animation-duration:.45s}
:root{
  --ink:#000;--paper:#fff;--red:#FF2B0F;--sub:#5C5F66;--line:#DCDFE3;
  --gutter:clamp(18px,3vw,48px);
  --sans:"Noto Sans JP",system-ui,-apple-system,"Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  --num:"Anton","Noto Sans JP",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{touch-action:manipulation;-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:#000}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);font-size:16px;line-height:1.85;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
h1,h2{font-feature-settings:"palt";font-weight:700;line-height:1.28;word-break:auto-phrase}
ol{list-style:none}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* header stays readable everywhere by inverting against the page */
.hd{position:fixed;inset:0 0 auto 0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:16px var(--gutter);color:#fff;mix-blend-mode:difference;font-feature-settings:"palt";transition:transform .35s}
.hd.is-hidden{transform:translateY(-110%)}
.hd-logo{font-size:15px;font-weight:700;letter-spacing:.06em}
.hd-nav{display:flex;gap:26px;font-size:13.5px;font-weight:500}
.hd-nav a{padding:6px 0;background:linear-gradient(currentColor,currentColor) left bottom/0 1px no-repeat;transition:background-size .3s}
.hd-nav a:hover{background-size:100% 1px}

/* hero */
.hero{height:260svh;position:relative;background:#000}
.stage{position:sticky;top:0;height:100svh;overflow:hidden;background:#fff}
.layer{position:absolute;inset:0}
.light{background:#fff;color:#000}
.dark{background:#000;color:#fff;will-change:clip-path}
.big{position:absolute;left:0;right:0;top:50%;transform:translateY(-52%);display:flex;justify-content:center;font-weight:900;font-feature-settings:"palt";font-size:min(45.5vw,84svh);line-height:1;letter-spacing:-.02em;white-space:nowrap}
.corner{position:absolute;bottom:clamp(16px,3vh,30px);font-size:clamp(14px,1.25vw,19px);font-weight:700;font-feature-settings:"palt";line-height:1.45}
.bl{left:var(--gutter)}
.br{right:var(--gutter);text-align:right}
.buoy{position:absolute;left:0;top:0;width:clamp(26px,3.2vw,50px);height:clamp(26px,3.2vw,50px);margin:calc(clamp(26px,3.2vw,50px) / -2) 0 0 calc(clamp(26px,3.2vw,50px) / -2);border-radius:50%;background:var(--red);will-change:transform}

/* about */
.about{background:#000;color:#fff;padding:clamp(70px,10vw,170px) var(--gutter) clamp(50px,6vw,100px)}
.about-lead{font-weight:700;font-feature-settings:"palt";font-size:clamp(26px,6vw,104px);line-height:1.28;letter-spacing:-.005em}
.ln{display:block}
.ln:nth-child(even){margin-left:clamp(0px,8vw,150px)}
.about-body{margin:clamp(36px,5vw,80px) 0 0 auto;max-width:36em;font-size:clamp(15px,1.2vw,17px);font-weight:500;line-height:2}

/* date */
.date{background:#000;color:#fff;padding:clamp(30px,4vw,60px) var(--gutter) clamp(120px,14vw,220px);overflow:hidden}
.date-num{display:flex;align-items:center;justify-content:space-between;font-family:var(--num);font-weight:400;font-size:29vw;line-height:1;letter-spacing:-.01em}
.date-num i{flex:1;min-width:.16em;height:.09em;background:var(--red);margin:0 .07em;transform-origin:left}
.js .date-num i{transform:scaleX(0);transition:transform 1.4s cubic-bezier(.7,0,.2,1)}
.js .date.is-in .date-num i{transform:none}
.date-sub{margin-top:14px;font-size:clamp(15px,1.3vw,19px);font-weight:700;font-feature-settings:"palt"}

/* wave dividers */
.wave-top{position:absolute;left:0;right:0;top:0;width:100%;height:clamp(50px,8.4vw,120px);transform:translateY(-99%);display:block}

/* works */
.works{position:relative;background:#fff;padding:clamp(40px,5vw,80px) var(--gutter) clamp(90px,11vw,170px)}
.works h2{font-size:clamp(25px,4.6vw,78px);line-height:1.22}
.grid{margin-top:clamp(36px,5vw,76px);display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(10px,1.2vw,20px);row-gap:clamp(40px,6vw,96px);align-items:start}
.w1{grid-column:1/10}
.w2{grid-column:10/13;margin-top:18vw}
.w3{grid-column:3/8;margin-top:10vw}
.w4{grid-column:8/13}
.w5{grid-column:1/8}
.w6{grid-column:8/13;margin-top:12vw}
.ph{display:block;width:100%;padding:0;border:0;background:#111;overflow:hidden;cursor:pointer;font:inherit;color:inherit}
.w1 .ph,.w3 .ph,.w5 .ph,.w6 .ph{aspect-ratio:16/11}
.w2 .ph,.w4 .ph{aspect-ratio:4/5}
.ph img{transition:transform 1.4s cubic-bezier(.2,.8,.2,1)}
.w:hover .ph img{transform:scale(1.04)}
figcaption{display:grid;margin-top:10px;font-size:13.5px;line-height:1.55;font-weight:500}
figcaption strong{grid-column:1/-1;font-size:clamp(18px,1.7vw,26px);font-weight:700;font-feature-settings:"palt";line-height:1.4;transition:color .2s}
.w:hover figcaption strong{color:var(--red)}
figcaption span:last-child{color:var(--sub)}

/* ports */
.ports{position:relative;background:#fff;min-height:100svh;overflow:hidden;padding:clamp(70px,8vw,130px) var(--gutter) clamp(150px,16vw,240px);border-top:1px solid var(--line)}
.ports-map{position:absolute;inset:0;width:100%;height:100%;-webkit-mask-image:linear-gradient(to right,transparent 30%,#000 54%);mask-image:linear-gradient(to right,transparent 30%,#000 54%)}
.ports-in{position:relative;max-width:min(980px,100%)}
.ports h2{font-size:clamp(28px,5.6vw,96px);line-height:1.2}
.plist{margin-top:clamp(36px,5vw,72px);display:grid;max-width:560px}
.plist li{display:grid;grid-template-columns:clamp(82px,9vw,130px) 1fr;column-gap:14px;align-items:baseline;padding:clamp(10px,1vw,14px) 0;border-top:1px solid var(--line)}
.pname{font-weight:700;font-feature-settings:"palt";font-size:clamp(19px,2vw,30px)}
.pdesc{font-size:14.5px;font-weight:500;line-height:1.75}

/* tickets */
.tickets{position:relative;background:#000;color:#fff;padding:clamp(50px,6vw,100px) var(--gutter) clamp(70px,9vw,140px)}
.tickets h2{font-size:clamp(25px,4.6vw,78px);line-height:1.24}
.tk{margin-top:clamp(40px,6vw,96px)}
.tk>div{display:grid;grid-template-columns:minmax(120px,1fr) minmax(0,1.5fr) minmax(200px,1.1fr);align-items:baseline;column-gap:clamp(12px,2vw,32px);padding:clamp(14px,1.8vw,28px) 0;border-top:1px solid rgba(255,255,255,.34)}
.tk dt{font-size:clamp(16px,1.6vw,24px);font-weight:700;font-feature-settings:"palt"}
.tk dd{font-weight:700;font-size:clamp(15px,1.3vw,19px)}
.tk b{font-family:var(--num);font-weight:400;font-size:clamp(52px,9.6vw,168px);line-height:1;margin-right:.06em;letter-spacing:.005em}
.tk dd b{display:inline-block}
.tk>div:last-child b{font-family:var(--sans);font-weight:900;font-feature-settings:"palt";letter-spacing:-.01em}
.tk p{font-size:14.5px;font-weight:500;line-height:1.7}

/* port filter */
.filter{margin-top:clamp(20px,2.4vw,36px);display:flex;flex-wrap:wrap;gap:6px}
.filter button{font:inherit;color:inherit;background:none;border:1px solid #000;cursor:pointer;min-height:44px;padding:6px 18px;font-size:15px;font-weight:700;font-feature-settings:"palt";transition:background .2s,color .2s}
.filter button:hover{background:#000;color:#fff}
.filter button[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:#000}
.grid.is-filtered .w:not(.is-on){display:none}
.grid.is-filtered .w.is-on{grid-column:span 6;margin-top:0}
.grid.is-filtered .ph{aspect-ratio:4/3}

/* artists */
.artists{background:#fff;padding:0 var(--gutter) clamp(90px,11vw,170px)}
.artists h2{font-size:clamp(25px,4.6vw,78px);line-height:1.22}
.names{list-style:none;margin-top:clamp(28px,4vw,64px);display:flex;flex-wrap:wrap;gap:clamp(2px,.4vw,8px) clamp(18px,2.6vw,46px);font-size:clamp(22px,3.5vw,60px);font-weight:700;font-feature-settings:"palt";line-height:1.32}
.names button{font:inherit;color:inherit;background:linear-gradient(var(--red),var(--red)) left 92%/100% .09em no-repeat;border:0;padding:0;cursor:pointer;transition:color .2s}
.names button:hover{color:var(--red)}

/* ferry */
.ferry{position:relative;background:#000;color:#fff;padding:clamp(50px,6vw,100px) var(--gutter) clamp(50px,6vw,90px)}
.ferry h2,.route h2{font-size:clamp(25px,4.6vw,78px);line-height:1.22}
.ferry-body{margin-top:clamp(28px,4vw,64px);display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(10px,1.2vw,20px);align-items:start}
.ferry-photo{grid-column:1/8;aspect-ratio:16/10}
.ferry-table{grid-column:8/13;padding-left:clamp(0px,1vw,16px)}
.ferry-next{font-size:clamp(17px,1.5vw,22px);font-weight:700;font-feature-settings:"palt";line-height:1.5;min-height:3em}
.tt{width:100%;border-collapse:collapse;margin-top:6px}
.tt th{font-size:12.5px;font-weight:700;text-align:left;padding:0 0 8px;border-bottom:1px solid rgba(255,255,255,.34);line-height:1.4}
.tt td{font-family:var(--num);font-size:clamp(23px,2.4vw,38px);line-height:1;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.18)}
.tt tr.is-next td{color:var(--red)}
.ferry-note{margin-top:14px;font-size:13.5px;font-weight:500;line-height:1.75}

/* route */
.route{background:#000;color:#fff;padding:clamp(50px,6vw,90px) var(--gutter) clamp(130px,14vw,220px)}
.stops{margin-top:clamp(30px,4vw,64px);display:grid;grid-template-columns:repeat(5,1fr);column-gap:clamp(10px,1.2vw,20px);position:relative;align-items:start}
.stops li{position:relative;padding-top:30px}
.stops li::before{content:"";position:absolute;left:0;right:calc(clamp(10px,1.2vw,20px) * -1);top:9px;height:1px;background:rgba(255,255,255,.5)}
.stops li:last-child::before{right:0}
.stops li::after{content:"";position:absolute;left:0;top:0;width:19px;height:19px;border-radius:50%;background:var(--red)}
.stops li:nth-child(even){margin-top:clamp(0px,3vw,52px)}
.stops b{display:block;font-family:var(--num);font-weight:400;font-size:clamp(34px,4.2vw,72px);line-height:1}
.stops h3{margin-top:10px;font-size:clamp(17px,1.5vw,22px);line-height:1.4;font-weight:700;font-feature-settings:"palt"}
.stops p{margin-top:4px;font-size:14px;font-weight:500;line-height:1.75}

/* events */
.events{position:relative;background:#fff;padding:clamp(40px,5vw,80px) var(--gutter) clamp(130px,14vw,220px)}
.events h2{font-size:clamp(25px,4.6vw,78px);line-height:1.22}
.ev{list-style:none;margin-top:clamp(30px,4vw,64px);border-top:1px solid #000}
.ev li{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(10px,1.2vw,20px);align-items:baseline;padding:clamp(10px,1.2vw,18px) 0;border-bottom:1px solid var(--line)}
.ev b{grid-column:1/4;font-family:var(--num);font-weight:400;font-size:clamp(44px,6.4vw,108px);line-height:1}
.ev div{grid-column:4/10}
.ev h3{font-size:clamp(19px,2vw,30px);font-weight:700;font-feature-settings:"palt";line-height:1.35}
.ev p{margin-top:2px;font-size:14.5px;font-weight:500;line-height:1.75}
.ev span{grid-column:10/13;font-size:14px;font-weight:700;text-align:right}

/* visit */
.visit{margin-top:clamp(70px,9vw,140px)}
.visit h2{font-size:clamp(23px,3.6vw,60px);line-height:1.28}
.vs{margin-top:clamp(24px,3vw,48px);border-top:1px solid rgba(255,255,255,.34)}
.vs div{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(10px,1.2vw,20px);padding:clamp(10px,1.2vw,18px) 0;border-bottom:1px solid rgba(255,255,255,.18);align-items:baseline}
.vs dt{grid-column:1/4;font-size:clamp(16px,1.5vw,22px);font-weight:700;font-feature-settings:"palt"}
.vs dd{grid-column:4/13;font-size:15px;font-weight:500;line-height:1.8}

/* work detail */
html.is-modal{overflow:hidden}
.wk{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0;padding:0;background:#000;color:#fff;overflow-y:auto;overscroll-behavior:contain}
.wk::backdrop{background:#000}
.wk-in{min-height:100%;display:flex;flex-direction:column}
.wk-x{position:fixed;z-index:2;right:clamp(8px,1.4vw,20px);top:clamp(8px,1.4vw,20px);width:52px;height:52px;display:grid;place-items:center;background:#000;color:#fff;border:0;border-radius:50%;cursor:pointer;transition:background .2s}
.wk-x:hover{background:var(--red)}
.wk-x svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.wk-photo{position:relative;height:min(68svh,62vw);flex:none;overflow:hidden;background:#111}
.wk-wave{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:clamp(40px,7vw,100px);display:block}
.wk-body{flex:1;display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(10px,1.2vw,20px);padding:clamp(14px,2vw,30px) var(--gutter) clamp(24px,3vw,44px)}
.wk-head{grid-column:1/7}
.wk h2{font-size:clamp(34px,6vw,104px);font-weight:900;font-feature-settings:"palt";line-height:1.1;letter-spacing:-.015em;outline:0}
.wk-artist{margin-top:8px;font-size:clamp(17px,1.6vw,24px);font-weight:700;font-feature-settings:"palt"}
.wk-text{grid-column:7/13;font-size:15.5px;font-weight:500;line-height:1.9}
.wk-bio{margin-top:12px;font-size:14px;color:#C9CBD0;line-height:1.8}
.wk-meta{margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.34);display:grid;grid-template-columns:4.4em 1fr;row-gap:2px;font-size:14px;line-height:1.75}
.wk-meta dt{font-weight:700}
.wk-nav{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;padding:12px var(--gutter) clamp(16px,2vw,26px);border-top:1px solid rgba(255,255,255,.34)}
.wk-nav button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;min-height:44px;font-size:15px;font-weight:700;font-feature-settings:"palt";text-align:left;transition:color .2s}
.wk-nav button:hover{color:var(--red)}
#wkMap{text-decoration:underline;text-underline-offset:4px;font-weight:500;font-size:14px}
#wkNext{text-align:right}

/* footer */
.ft{background:#000;color:#fff;padding:0 var(--gutter) 24px;overflow:hidden}
.ft-word{font-weight:900;font-feature-settings:"palt";font-size:19.4vw;line-height:1.08;letter-spacing:-.03em;white-space:nowrap;margin-left:-.04em}
.ft-note{margin-top:clamp(12px,2vw,28px);font-size:13px;font-weight:500;line-height:1.7}

.ft-back{display:inline-block;margin-top:6px;padding:6px 0;font-size:14px;font-weight:700;text-decoration:underline;text-underline-offset:4px}
@media (max-width:1024px){
  .w1{grid-column:1/-1}
  .w2{grid-column:7/13;margin-top:0}
  .w3{grid-column:1/-1}
  .w4{grid-column:1/8;margin-top:0}
  .w5{grid-column:1/-1}
  .w6{grid-column:4/13;margin-top:0}
  .tk>div{grid-template-columns:1fr}
  .tk p{margin-top:6px}
  .ferry-photo,.ferry-table{grid-column:1/-1}
  .ferry-table{margin-top:20px;padding:0}
  .stops{grid-template-columns:1fr;row-gap:22px}
  .stops li,.stops li:nth-child(even){margin-top:0;padding:0 0 0 34px}
  .stops li::before,.stops li:last-child::before{left:9px;right:auto;top:0;bottom:-22px;width:1px;height:auto}
  .stops li:last-child::before{bottom:0}
  .stops li::after{top:6px}
  .ev span{grid-column:4/13;text-align:left;margin-top:4px}
  .ev div{grid-column:4/13}
}
@media (max-width:768px){
  .hero{height:220svh}
  .big{flex-direction:column;align-items:center;top:47%;transform:translateY(-50%);font-size:min(84vw,38svh);line-height:1}
  .hd-nav{gap:12px;font-size:13px}
  .artists h2,.events h2,.ferry h2,.route h2,.visit h2{font-size:clamp(19px,6.1vw,44px);line-height:1.34}
  .names{font-size:clamp(20px,6vw,36px);gap:2px 16px}
  .filter button{padding:6px 12px;font-size:14px}
  .grid.is-filtered .w.is-on{grid-column:1/-1}
  .ev b{grid-column:1/-1}
  .ev div,.ev span{grid-column:1/-1}
  .vs dt,.vs dd{grid-column:1/-1}
  .wk-photo{height:62vw}
  .wk-head,.wk-text{grid-column:1/-1}
  .wk-text{margin-top:14px}
  .wk h2{font-size:clamp(30px,9.4vw,64px)}
  .wk-nav{grid-template-columns:1fr 1fr}
  #wkMap{grid-column:1/-1;grid-row:2;text-align:center}
  .corner{font-size:14px}
  .ln:nth-child(even){margin-left:0}
  .tickets h2,.works h2{font-size:clamp(19px,6.1vw,44px);line-height:1.34}
  .ports h2{font-size:clamp(20px,6.6vw,48px);line-height:1.3}
  .about-lead{font-size:clamp(25px,7.2vw,44px);line-height:1.4}
  .date-num{font-size:25vw}
  .ports{padding-bottom:58vh}
  .ports-map{-webkit-mask-image:linear-gradient(to bottom,transparent 50%,#000 64%);mask-image:linear-gradient(to bottom,transparent 50%,#000 64%)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .date-num i{transform:none;transition:none}
  .hero{height:100svh}
}