/* Free Son. Printed in two inks: riso pink over riso blue, on paper. */

@font-face{font-family:"Unbounded";src:url("../fonts/unbounded.woff2") format("woff2");font-weight:200 900;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("../fonts/instrument-sans.woff2") format("woff2");font-weight:400 700;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:"DM Mono";src:url("../fonts/dm-mono-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"DM Mono";src:url("../fonts/dm-mono-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Zen Kaku Gothic New";src:url("../fonts/zen-kaku-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Zen Kaku Gothic New";src:url("../fonts/zen-kaku-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Zen Kaku Gothic New";src:url("../fonts/zen-kaku-900.woff2") format("woff2");font-weight:900;font-display:swap}

:root{
  --paper:#F2F1EC;
  --blue:#0078BF;          /* riso blue */
  --pink:#FF48B0;          /* riso fluorescent pink */
  --navy:#16225C;          /* the two inks overprinted */
  --navy-2:#3E4980;
  --rule:rgba(22,34,92,.26);
  --mx:.034em; --my:.026em; /* misregistration */
  --gut:16px;
  --maxw:1360px;
  --display:"Unbounded","Arial Black",system-ui,sans-serif;
  --body:"Instrument Sans","Helvetica Neue",Arial,system-ui,sans-serif;
  --mono:"DM Mono","Instrument Sans",ui-monospace,Menlo,monospace;
  --jp:"Zen Kaku Gothic New","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP",sans-serif;
  color-scheme:light;
}
@media (min-width:700px){:root{--gut:32px}}
@media (min-width:1200px){:root{--gut:48px}}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--paper);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper) url("../img/grain.png");color:var(--navy);font-family:var(--body);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased}
img,video{max-width:100%}
p,h1,h2,h3,h4,ul,ol,figure{margin:0}
a{color:inherit;text-decoration-thickness:1.5px;text-underline-offset:.18em}
a:hover{color:var(--pink)}
:focus-visible{outline:2px solid var(--pink);outline-offset:3px}
[lang="ja"]{font-family:var(--jp)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:var(--gut);top:-60px;background:var(--navy);color:var(--paper);padding:8px 12px;font:500 13px var(--mono);z-index:10}
.skip:focus{top:12px}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}

/* Overprint: the same word twice, blue under pink, both multiplied onto whatever is behind */
.ov{display:grid;justify-items:start}
.ov > span{grid-area:1/1;mix-blend-mode:multiply}
.ov-b{color:var(--blue);transform:translate(var(--mx),var(--my))}
.ov-p{color:var(--pink)}

/* Anything printed gets paper grain on top */
.print{position:relative;overflow:hidden;background:var(--blue)}
.print.pink{background:var(--pink)}
.print::after{content:"";position:absolute;inset:0;background:url("../img/grain.png");mix-blend-mode:multiply;opacity:.9;pointer-events:none}
.print video,.print img{display:block;width:100%;height:100%;object-fit:cover}

/* ---------- Masthead ---------- */
.masthead{display:grid;grid-template-columns:minmax(0,1fr);isolation:isolate;padding-block:14px 56px}
.topbar{grid-row:1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;font:500 11px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.topbar a{text-decoration:none;border-bottom:1.5px solid currentColor}
.topbar-route{display:none}
@media (min-width:520px){.topbar-route{display:inline}}

.wordmark{grid-row:2;position:relative;margin-top:34px;font-family:var(--display);font-weight:800;font-size:calc((100vw - 2 * var(--gut)) / 3.42);line-height:.8;letter-spacing:-.012em}
.ov-anim .ov-b{animation:register 1.1s cubic-bezier(.2,.8,.2,1) .15s both}
@keyframes register{from{transform:translate(.16em,-.11em)}to{transform:translate(var(--mx),var(--my))}}

.hero-media{grid-row:3;justify-self:end;width:min(62%,420px);aspect-ratio:9/16;margin-top:-.62em;font-size:calc((100vw - 2 * var(--gut)) / 3.42)}
.tate{display:none}
.intro{grid-row:4;display:grid;gap:14px;margin-top:26px;max-width:36rem}
.lede{font:600 clamp(22px,5.4vw,30px)/1.18 var(--display);letter-spacing:-.01em;text-wrap:balance}
.frisson{font-size:17px;color:var(--navy-2)}
.frisson em{font:italic 500 1.06em var(--body);color:var(--pink);font-style:italic}
.ja-lede{font-size:15px;font-weight:500;line-height:1.7;color:var(--navy-2)}

@media (min-width:700px){
  .hero-media{width:min(52%,420px)}
}
@media (min-width:1024px){
  .masthead{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding-block:22px 96px}
  .topbar{grid-column:1/-1}
  .wordmark{grid-column:1/-1;grid-row:2/4;align-self:start;margin-top:52px;font-size:calc((min(100vw, var(--maxw)) - 2 * var(--gut)) * .7 / 3.42)}
  .hero-media{grid-column:8/12;grid-row:2/5;justify-self:stretch;width:auto;margin-top:22vh;font-size:inherit}
  .tate{display:block;grid-column:12;grid-row:2/5;justify-self:end;align-self:start;margin-top:22vh;writing-mode:vertical-rl;font:900 22px/1.3 var(--jp);letter-spacing:.2em;color:var(--pink)}
  .intro{grid-column:1/7;grid-row:4;margin-top:40px}
}

/* ---------- Sections ---------- */
.block{padding-block:40px 64px}
@media (min-width:1024px){.block{padding-block:56px 110px}}
.sec{display:flex;align-items:baseline;gap:14px;margin-bottom:30px;padding-top:12px;border-top:3px solid var(--navy);font:500 12px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase}
.sec .ja{font:900 26px/1 var(--jp);letter-spacing:.04em;color:var(--pink);text-transform:none}

/* Next */
.dates{list-style:none;padding:0;display:grid;gap:0}
.date{display:grid;gap:10px;padding-block:18px 26px;border-bottom:1px solid var(--rule)}
.date:first-child{padding-top:0}
.when{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font:500 14px/1.3 var(--mono);letter-spacing:.05em;font-variant-numeric:tabular-nums}
.when .ja{font:700 18px/1 var(--jp);letter-spacing:.1em}
.city{font-family:var(--display);font-weight:800;font-size:calc((100vw - 2 * var(--gut)) / 4.72);line-height:.9;letter-spacing:-.01em}
.what{max-width:30rem;color:var(--navy-2)}
.booking{margin-top:28px;display:grid;gap:8px}
.booking a{font-weight:600}
.booking [lang="ja"]{font-size:15px;color:var(--navy-2)}
@media (min-width:1024px){
  .date{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end;padding-block:26px 30px}
  .when{grid-column:1/4;flex-direction:column;align-items:flex-start;gap:10px;padding-bottom:.9em}
  .city{grid-column:4/10;font-size:calc((min(100vw, var(--maxw)) - 2 * var(--gut)) * .46 / 4.72)}
  .what{grid-column:10/13;padding-bottom:.7em}
  .booking{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
  .booking p:first-child{grid-column:4/10}
  .booking p:last-child{grid-column:4/10}
}

/* Played: map */
.map{position:relative;max-width:940px;margin-inline:auto}
.map-svg{display:block;width:100%;height:auto}
.land{fill:url(#dots)}
.dot{fill:var(--blue)}
.cplayed{mix-blend-mode:multiply}
.cshape{fill:var(--pink)}
.cshape.cnext{fill:var(--pink);fill-opacity:.38;stroke:var(--pink);stroke-width:1.4}
.route{fill:none;stroke:var(--navy);stroke-width:1.6}
.route-next{stroke:var(--pink);stroke-width:2;stroke-dasharray:6 6}
.pin{fill:var(--paper);stroke:var(--navy);stroke-width:2.2}
.pin-next{stroke:var(--pink)}
.map-label{position:absolute;left:var(--x);top:var(--y);transform:translate(9px,-50%);font:500 10px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;background:var(--paper);padding:2px 4px;white-space:nowrap}
.map-label.left{transform:translate(calc(-100% - 9px),-50%)}
.map-label.next{color:#C4167F;transform:translate(calc(-100% - 12px),-150%)}
.map-label.low{transform:translate(9px,30%)}
.map-label [lang="ja"]{letter-spacing:.05em;margin-left:3px}
@media (min-width:700px){.map-label{font-size:12px}}

.tally{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px 22px;margin:22px 0 10px;font:500 13px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.tally b{font:800 26px/1 var(--display);color:var(--pink);margin-right:6px;vertical-align:-3px}

/* Played: countries and gigs */
.country{display:grid;gap:20px;padding-block:30px;border-top:1px solid var(--rule)}
.country-head{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}
.code{font:800 64px/.8 var(--display)}
.cname{font:600 20px/1.1 var(--display);padding-bottom:4px}
.cname .ja{display:block;margin-top:6px;font:700 13px/1 var(--jp);letter-spacing:.12em;color:var(--navy-2)}
.gigs{display:grid;gap:30px}
.gig{display:grid;grid-template-columns:minmax(0,44%) minmax(0,1fr);gap:16px;align-items:start}
.gig-media{aspect-ratio:9/16}
.gig-media.photo{aspect-ratio:4/5;background:var(--pink)}
.gig-text{display:grid;gap:6px;align-content:start;min-width:0}
.gig-when{font:500 12px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--navy-2)}
.gig-title{font:800 clamp(22px,6.4vw,34px)/1 var(--display);letter-spacing:-.01em;overflow-wrap:anywhere}
.gig-place{font-weight:600}
.gig-note{color:var(--navy-2);font-size:16px}
.reel-link{justify-self:start;margin-top:8px;font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;border-bottom:2px solid var(--pink);padding-bottom:4px}
.reel-link::before{content:"\25B6\FE0E";font-family:var(--display);font-size:.9em;margin-right:7px;color:var(--pink)}
.flyer{display:block;width:min(128px,100%);margin-top:14px;transform:rotate(-2.5deg);transform-origin:top left}
.flyer img{display:block;width:100%;height:auto}
.country.is-next .code .ov-p{color:transparent;-webkit-text-stroke:2px var(--pink)}
.country.is-next .code .ov-b{color:transparent;-webkit-text-stroke:2px var(--blue)}
.next-note{max-width:34rem}
.next-note a{font-weight:600}
@media (min-width:1024px){
  .country{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding-block:40px}
  .country-head{grid-column:1/4;flex-direction:column;align-items:flex-start;position:sticky;top:24px;align-self:start}
  .code{font-size:112px}
  .gigs{grid-column:4/13;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;row-gap:40px}
  .gig{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .next-note{grid-column:4/10;align-self:end;font-size:19px}
}

/* Listen */
.listen-grid{display:grid;gap:16px}
.listen-copy,.watch-copy,.contact-copy{max-width:34rem;font-size:19px;line-height:1.4}
.sc{border:3px solid var(--navy);background:var(--paper);min-height:120px}
.sc iframe{display:block;width:100%;border:0}
.sc-fallback{display:grid;gap:8px;padding:18px}
.sc-fallback b{font:700 18px/1.2 var(--display)}
.sc-fallback span{color:var(--navy-2);font-size:15px}
.out{font:500 12px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.out a{text-decoration:none;border-bottom:2px solid var(--pink);padding-bottom:3px}
@media (min-width:1024px){
  .listen-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start}
  .listen-copy{grid-column:1/4}
  .sc{grid-column:4/11}
  .listen-grid .out{grid-column:4/11}
}

/* Watch */
.watch-copy{margin-bottom:22px}
.reels{list-style:none;padding:0 0 12px;display:grid;grid-auto-flow:column;grid-auto-columns:min(58vw,260px);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.reels li{scroll-snap-align:start;min-width:0}
.reel-card{display:grid;gap:6px;text-decoration:none}
.reel-card .frame{aspect-ratio:9/16}
.play{position:absolute;left:10px;bottom:10px;z-index:1;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;background:var(--paper);padding:6px 8px}
.play::before{content:"\25B6\FE0E";font-family:var(--display);font-size:.9em;margin-right:6px;color:var(--pink)}
.reel-card .t{font:700 16px/1.2 var(--display);margin-top:4px}
.reel-card .m{font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--navy-2)}
.reel-card:hover .t{color:var(--pink)}
.reel-card:hover .frame img{transform:scale(1.03)}
.reel-card .frame img{transition:transform .5s ease}
#watch .out{margin-top:18px}
@media (min-width:1024px){
  .reels{grid-auto-flow:row;grid-template-columns:repeat(5,minmax(0,1fr));overflow:visible}
}

/* Contact */
.contact-grid{display:grid;gap:36px}
.contact-side{display:grid;gap:16px;align-content:start}
.ja-contact{font-size:15px;color:var(--navy-2)}
.elsewhere{list-style:none;padding:0;margin-top:10px;display:grid;gap:10px;max-width:30rem}
.elsewhere li{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid var(--rule);padding-bottom:10px}
.elsewhere span{font:500 12px/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--navy-2)}
.elsewhere a{font-weight:600}

.contact-form{position:relative;display:grid;gap:18px;max-width:40rem}
.field{display:grid;gap:6px}
.field label{font:500 12px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.field label [lang="ja"]{margin-left:6px;font:700 12px/1 var(--jp);letter-spacing:.06em;text-transform:none;color:var(--navy-2)}
.field .opt{text-transform:none;letter-spacing:.02em;color:var(--navy-2)}
.contact-form input,.contact-form select,.contact-form textarea{width:100%;margin:0;font:500 17px/1.4 var(--body);color:var(--navy);background:rgba(255,255,255,.5);border:0;border-bottom:2px solid var(--navy);border-radius:0;padding:10px 4px;-webkit-appearance:none;appearance:none}
.contact-form textarea{min-height:140px;resize:vertical;border:2px solid var(--navy);padding:10px 12px}
.contact-form select{padding-right:34px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%2316225C' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center}
.contact-form ::placeholder{color:var(--navy-2);opacity:.6}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline:none;border-color:var(--pink);background:#fff}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.send-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:6px}
.send{font:800 18px/1 var(--display);letter-spacing:.02em;color:var(--paper);background:var(--navy);border:0;border-radius:0;padding:16px 28px;cursor:pointer;box-shadow:.2em .16em 0 var(--pink)}
.send:hover{background:var(--blue)}
.send:active{transform:translate(.1em,.08em);box-shadow:.1em .08em 0 var(--pink)}
.send:disabled{opacity:.6;cursor:wait}
.form-status{flex:1 1 14rem;min-height:1.4em;font:500 14px/1.4 var(--body);color:var(--navy-2)}
.contact-form.is-sent .form-status{color:var(--navy);font-weight:600}
@media (min-width:1024px){
  .contact-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
  .contact-side{grid-column:1/5}
  .contact-form{grid-column:6/12}
}

/* Footer */
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;padding-block:22px 40px;border-top:3px solid var(--navy);font:500 11px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase}

/* Reel player */
.player{border:0;padding:0;background:transparent;color:var(--paper);width:min(92vw,calc(84vh * 9 / 16));max-width:none;overflow:visible}
.player::backdrop{background:rgba(22,34,92,.9)}
.player-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:10px;font:500 12px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.player video{display:block;width:100%;aspect-ratio:9/16;background:#0b1030}
.close{font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--navy);background:var(--paper);border:0;padding:9px 12px;cursor:pointer}
.close:hover{background:var(--pink)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ov-anim .ov-b{animation:none}
  .reel-card .frame img{transition:none}
}