/* K.ONE: artist site.
   Colours come from K.ONE's own pictures: the cobalt sweater, the powder blue
   wall, the cream cap, over a blue-black night. */

@property --r { syntax: "<percentage>"; inherits: false; initial-value: 0%; }

:root {
  --night: #07090e;
  --deep: #0b0e16;
  --cream: #e8e4d6;
  --dim: rgba(232, 228, 214, .6);
  --faint: rgba(232, 228, 214, .5);
  --mute: #9aa5ba;
  --hair: rgba(232, 228, 214, .16);
  --blue: #4a74ff;
  --cobalt: #1234c8;
  --powder: #b7c9e1;
  --m: 10px;
  --serif: "Times New Roman", Times, serif;
  --sans: Arial, Helvetica, sans-serif;
  --out: cubic-bezier(.16, 1, .3, 1);
  --dock: 0px;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--night); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--night); color: var(--cream); font: 400 16px/1.3 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; padding-bottom: var(--dock); }
h1, h2, h3, p, ul, figure { margin: 0; padding: 0; }
ul { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; border-radius: 0; }
:focus-visible { outline: 1px solid var(--blue); outline-offset: 4px; }
::selection { background: var(--cobalt); color: var(--cream); }
[hidden] { display: none !important; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: var(--m); top: -60px; z-index: 300; background: var(--cream); color: var(--night); padding: 10px 14px; font: 13px var(--sans); text-transform: uppercase; }
.skip:focus { top: var(--m); }

/* ---------- small parts ---------- */
/* arrow: drawn, so it never turns into an emoji */
.ar { display: inline-block; width: .52em; height: .52em; margin-left: .9em; background: var(--blue); flex: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 1h7v7M9 1 1 9' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 1h7v7M9 1 1 9' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .5s var(--out); }
.ar.dn { transform: rotate(90deg); }
.ar.up { transform: rotate(-45deg); }
a:hover > .ar:not(.dn):not(.up), .br:hover > .ar:not(.dn):not(.up), .item:hover .ar { transform: translate(2px, -2px); }
/* the four-point star from K.ONE's own name line */
.star { display: inline-block; width: .62em; height: .62em; background: var(--blue); flex: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.8 7 5 11.2 12 12-7 .8-11.2 5-12 12-.8-7-5-11.2-12-12 7-.8 11.2-5 12-12z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.8 7 5 11.2 12 12-7 .8-11.2 5-12 12-.8-7-5-11.2-12-12 7-.8 11.2-5 12-12z'/%3E%3C/svg%3E") center / contain no-repeat; }

/* tiny label: a blue square, capitals, a short rule */
.tag { display: flex; align-items: center; gap: 10px; font: 12px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: rgba(232, 228, 214, .7); }
.tag::before { content: ""; width: 6px; height: 6px; background: var(--blue); flex: none; }
.tag:not(.plain)::after { content: ""; width: 48px; height: 1px; background: var(--hair); margin-left: 6px; }
.tag i { font-style: normal; color: var(--faint); }
.mini { font: 11px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.fine { font: italic 14px var(--serif); color: var(--faint); }

/* button with four corner marks that open out on hover */
.br { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 1.02em 1.2em; font: 19px var(--serif); letter-spacing: .02em; text-transform: uppercase; color: var(--cream); background: rgba(7, 9, 14, .55); white-space: nowrap; transition: background .4s, color .4s; }
.br::before { content: ""; position: absolute; inset: 0; pointer-events: none; transition: inset .5s var(--out);
  --c: var(--cream); --l: 9px;
  background:
    linear-gradient(var(--c), var(--c)) left top / var(--l) 1px no-repeat, linear-gradient(var(--c), var(--c)) left top / 1px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) right top / var(--l) 1px no-repeat, linear-gradient(var(--c), var(--c)) right top / 1px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / var(--l) 1px no-repeat, linear-gradient(var(--c), var(--c)) left bottom / 1px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / var(--l) 1px no-repeat, linear-gradient(var(--c), var(--c)) right bottom / 1px var(--l) no-repeat; }
.br:hover::before, .br:focus-visible::before { inset: -5px; }
.br.sm { font-size: 15px; padding: .9em 1em; }

/* big words: Times, tight, each line rising out of its own slot */
.big, .mid { font: 400 clamp(54px, 10.4vw, 200px)/.86 var(--serif); letter-spacing: -.035em; }
.mid { font-size: clamp(50px, 6.5vw, 124px); line-height: .88; }
.ln { display: block; overflow: hidden; padding: .04em 0 .16em; margin-bottom: -.16em; }
.ln > span { display: block; }
.js .ln > span { transform: translateY(112%); transition: transform 1.1s var(--out); }
.js .ln:nth-child(2) > span { transition-delay: .09s; }
.js .in .ln > span, .js .ln.in > span { transform: none; }
.js .rv { opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform 1.1s var(--out); }
.js .rv.in { opacity: 1; transform: none; }

/* ---------- opening ---------- */
#intro { display: none; }
.js #intro { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: #000; transition: opacity .9s ease .1s, visibility 0s 1s; }
.intro-name { font: 400 clamp(84px, 21vw, 400px)/.8 var(--serif); letter-spacing: -.045em; color: transparent;
  background: linear-gradient(100deg, #55585f 0%, #55585f 38%, #f1ede0 50%, #55585f 62%, #55585f 100%) 100% 0 / 300% 100%;
  -webkit-background-clip: text; background-clip: text; animation: sheen 1.5s cubic-bezier(.4, 0, .2, 1) .15s both; }
@keyframes sheen { from { background-position: 100% 0; opacity: 0; } 18% { opacity: 1; } to { background-position: 0 0; opacity: 1; } }
.js.ready #intro { opacity: 0; visibility: hidden; pointer-events: none; }
.js.gone #intro { display: none; }

/* ---------- top corners ---------- */
#bar { position: fixed; left: 0; right: 0; top: 0; z-index: 120; display: flex; justify-content: space-between; align-items: flex-start; padding: var(--m); pointer-events: none; }
#bar > * { pointer-events: auto; }
.logo { display: inline-flex; align-items: center; gap: .06em; font: 400 clamp(54px, 6.4vw, 96px)/.8 var(--serif); letter-spacing: -.05em; color: var(--cream); padding: .12em .1em 0; transform-origin: left top; transition: transform .8s var(--out); }
.logo .star { width: .3em; height: .3em; margin: 0 .03em; background: var(--blue); transition: transform .9s var(--out); }
.logo:hover .star { transform: rotate(180deg) scale(1.25); }
.small #bar .logo { transform: scale(.5); }
.menu-btn { gap: 1.1em; font-size: 17px; padding: .78em 1.1em; margin: 2px; }
.menu-ic { position: relative; width: 18px; height: 8px; }
.menu-ic::before, .menu-ic::after { content: ""; position: absolute; right: 0; height: 1px; background: currentColor; transition: transform .5s var(--out), width .5s var(--out), top .5s var(--out); }
.menu-ic::before { top: 0; width: 18px; }
.menu-ic::after { top: 7px; width: 11px; }
.open .menu-btn { background: var(--cream); color: var(--night); }
.open .menu-btn::before { inset: -5px; }
.open .menu-ic::before { top: 4px; transform: rotate(45deg); }
.open .menu-ic::after { top: 4px; width: 18px; transform: rotate(-45deg); }

#menu { position: fixed; inset: 0; z-index: 110; background: var(--night); display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: auto; opacity: 0; transition: opacity .45s ease; }
.open #menu { opacity: 1; }
.menu-list { width: 100%; text-align: center; padding: 70px 0 50px; }
.menu-list li { overflow: hidden; }
.menu-list a { position: relative; display: inline-flex; align-items: center; justify-content: center; transform: translateY(105%); transition: transform .9s var(--out), opacity .4s; }
.open .menu-list a { transform: none; }
.menu-list li:nth-child(2) a { transition-delay: .04s, 0s; } .menu-list li:nth-child(3) a { transition-delay: .08s, 0s; }
.menu-list li:nth-child(4) a { transition-delay: .12s, 0s; } .menu-list li:nth-child(5) a { transition-delay: .16s, 0s; }
.menu-list li:nth-child(6) a { transition-delay: .2s, 0s; } .menu-list li:nth-child(7) a { transition-delay: .24s, 0s; }
.menu-list b { font: 400 clamp(46px, min(9.6vh, 7.2vw), 110px)/.92 var(--serif); letter-spacing: -.035em; text-transform: uppercase; }
.menu-list em { position: absolute; top: 50%; transform: translateY(-50%); font: italic clamp(14px, 1.4vw, 20px) var(--serif); color: var(--faint); white-space: nowrap; }
.menu-list em.l { right: 100%; margin-right: .9em; }
.menu-list em.r { left: 100%; margin-left: .9em; }
.menu-list .hot b { color: var(--blue); }
.menu-list:hover a { opacity: .32; }
.menu-list a:hover, .menu-list a:focus-visible { opacity: 1; }
.pillrow { display: inline-flex; align-items: center; gap: .04em; }
.pillrow .star { width: .5em; height: .5em; margin-right: .1em; }
.pill { display: inline-block; width: 1.05em; height: .74em; border-radius: .07em; overflow: hidden; background: var(--cobalt); margin: 0 .02em; transform: translateY(.03em); }
.pill img { width: 100%; height: 100%; object-fit: cover; }
.menu-foot { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; padding: 16px; font: 12px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.menu-foot a:hover { color: var(--cream); }

/* ---------- landing ---------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; background: #05070b; }
.hero-pic { position: absolute; inset: -4% 0; display: block; will-change: transform; }
.hero-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 30%; transform: scale(1.12); transition: transform 2.6s var(--out); }
.ready .hero-pic img, html:not(.js) .hero-pic img { transform: none; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 9, 14, .45) 0, rgba(7, 9, 14, 0) 22%, rgba(7, 9, 14, 0) 55%, rgba(7, 9, 14, .78) 100%); pointer-events: none; }
.plat { position: absolute; left: calc(var(--m) + 8px); bottom: calc(var(--m) + 6px + var(--dock)); transition: bottom .6s var(--out); z-index: 2; font: 400 clamp(30px, 2.95vw, 48px)/1.19 var(--serif); letter-spacing: -.045em; text-transform: uppercase; }
.plat li { overflow: hidden; }
.plat a { display: flex; align-items: baseline; width: 7.15em; }
.js .plat a { transform: translateY(110%); transition: transform 1.1s var(--out); }
.js.ready .plat a { transform: none; }
.js.ready .plat li:nth-child(2) a { transition-delay: .07s; } .js.ready .plat li:nth-child(3) a { transition-delay: .14s; } .js.ready .plat li:nth-child(4) a { transition-delay: .21s; }
.plat span { transition: transform .7s var(--out); }
.plat span + span { margin-left: auto; }
.plat .ar { width: .26em; height: .26em; margin-left: .22em; align-self: flex-end; margin-bottom: .22em; }
.plat a:hover span:first-child, .plat a:focus-visible span:first-child { transform: translateX(calc(var(--g, 0px) / 2)); }
.plat a:hover span + span, .plat a:focus-visible span + span { transform: translateX(calc(var(--g, 0px) / -2)); }

.latest { position: absolute; right: var(--m); bottom: calc(var(--m) + var(--dock)); z-index: 2; width: clamp(236px, 20.9vw, 320px); aspect-ratio: 1; padding: 16px; background: var(--powder); color: var(--night); display: grid; grid-template: auto 1fr auto / 1fr 44%; text-align: left; }
.js .latest { transform: translateY(calc(100% + 20px)); transition: transform 1.2s var(--out) .25s, bottom .6s var(--out); }
.js.ready .latest { transform: none; }
.latest-top { grid-column: 1 / -1; display: flex; justify-content: space-between; font: 12px var(--sans); letter-spacing: -.02em; text-transform: uppercase; }
.latest-top .star { background: var(--cobalt); margin-right: .45em; width: .8em; height: .8em; vertical-align: -.08em; transition: transform .8s var(--out); }
.latest:hover .latest-top .star { transform: rotate(180deg); }
.latest-title { grid-column: 1 / -1; font: 400 clamp(52px, 4.5vw, 70px)/.9 var(--serif); letter-spacing: -.035em; text-transform: uppercase; padding-top: .16em; }
.latest-by { align-self: end; font: 12px var(--sans); letter-spacing: -.02em; }
.latest img { align-self: end; justify-self: end; width: 100%; transition: transform .8s var(--out); }
.latest:hover img { transform: scale(1.04); }
.latest.playing .latest-top span:first-child::before { content: "Playing · "; }

/* ---------- section frame ---------- */
.sec { position: relative; padding: clamp(96px, 13vw, 220px) var(--m) 0; }
.head { display: grid; grid-template-columns: 1fr auto; column-gap: 40px; align-items: end; margin-bottom: clamp(26px, 3.4vw, 54px); }
.head .tag { grid-column: 1 / -1; margin-bottom: clamp(18px, 2.2vw, 34px); }
.side { width: clamp(250px, 22.3vw, 330px); padding-bottom: .9vw; }
.side p, .seen-p, .contact-sub { font: 16px/1.42 var(--sans); letter-spacing: -.025em; text-transform: uppercase; text-align: justify; color: var(--mute); }
.side .br { margin-top: 26px; }

/* ---------- music ---------- */
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(36px, 4.6vw, 70px) clamp(10px, 1.4vw, 20px); }
.tile { display: block; text-align: left; min-width: 0; }
.js .tile { opacity: 0; transform: translateY(30px); transition: opacity .9s ease, transform 1.1s var(--out); }
.js .tile.in { opacity: 1; transform: none; }
.tile.extra { display: none; }
.all .tile.extra { display: block; }
.cover { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--deep); }
.cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--out); }
/* a veil over the sleeve with a round window that opens: the record seen through its sleeve */
.cover::after { content: ""; position: absolute; inset: 0; background: rgba(7, 9, 14, .34); --r: 0%;
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent var(--r), #000 calc(var(--r) + .4%));
  mask: radial-gradient(circle at 50% 50%, transparent var(--r), #000 calc(var(--r) + .4%));
  transition: --r .9s var(--out); }
.tile:hover .cover::after, .tile:focus-visible .cover::after, .tile.playing .cover::after { --r: 47%; }
.tile:hover .cover img, .tile.playing .cover img { transform: scale(1.03); }
.glyph { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: var(--night); display: grid; place-items: center; transform: scale(0); transition: transform .6s var(--out); z-index: 1; }
.glyph::before { content: ""; border: solid transparent; border-width: 6px 0 6px 10px; border-left-color: var(--cream); margin-left: 3px; }
.tile:hover .glyph, .tile:focus-visible .glyph, .tile.playing .glyph { transform: none; }
.tile.playing .glyph::before { border: 0; width: 10px; height: 12px; margin: 0; background: linear-gradient(90deg, var(--cream) 0 3px, transparent 3px 7px, var(--cream) 7px 10px); }
.tile.playing .cover img { animation: spin 14s linear infinite; }
.tile.playing .cover::after { background: var(--night); }
@keyframes spin { to { transform: rotate(360deg) scale(1.03); } }
.cap { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; column-gap: 8px; border-top: 1px solid var(--hair); margin-top: 12px; padding-top: 12px; }
.cap .n { font: 11px var(--sans); letter-spacing: .04em; color: var(--faint); }
.cap .t { font: 21.6px/1.05 var(--serif); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .3s; }
.cap .k { font: 11px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
.cap .w { grid-column: 2 / -1; font: 12px var(--sans); letter-spacing: .02em; color: var(--faint); margin-top: 5px; min-height: 1.3em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile:hover .t, .tile.playing .t { color: var(--blue); }
.nojs { padding: 20px 0; color: var(--mute); } .nojs a { text-decoration: underline; }

/* ---------- ticket ---------- */
.ticket { display: grid; grid-template-columns: 41.5% 1fr 124px; border: 1px solid var(--hair); background: var(--deep); position: relative; }
.ticket-poster { background: radial-gradient(ellipse at 50% 40%, #1a2540 0, #0d1220 70%); display: grid; place-items: center; padding: clamp(18px, 2vw, 30px); border-right: 1px solid var(--hair); }
.poster { position: relative; width: min(100%, 404px); aspect-ratio: 4 / 5; overflow: hidden; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7); color: #0a1230; text-align: center; text-transform: uppercase; transition: transform .9s var(--out); }
.ticket:hover .poster { transform: rotate(-1.2deg) scale(1.015); }
.poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.poster p { position: absolute; left: 0; right: 0; }
.poster-top { top: 5.5%; font: 700 clamp(7px, .62vw, 9px) var(--sans); letter-spacing: .34em; }
.poster-name { bottom: 15.5%; z-index: 1; color: var(--cream); font: 400 clamp(30px, 3.6vw, 54px)/1 var(--serif); letter-spacing: .14em; margin-left: .07em; }
.poster-foot { bottom: 5%; display: grid; gap: 5px; color: var(--cream); mix-blend-mode: normal; }
.poster-foot b { font: 700 clamp(13px, 1.3vw, 19px) var(--sans); letter-spacing: .12em; }
.poster-foot span { font: 400 clamp(8px, .75vw, 11px) var(--serif); letter-spacing: .4em; }
.poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(183, 201, 225, 0) 48%, rgba(8, 14, 40, .82) 100%); }
.poster-foot { z-index: 1; }
.ticket-main { padding: clamp(22px, 2.8vw, 44px) clamp(18px, 2.8vw, 40px); display: flex; flex-direction: column; min-width: 0; }
.ticket-status { display: flex; justify-content: space-between; align-items: baseline; }
.ticket-status em { font: italic 18px var(--serif); color: var(--dim); }
.ticket-date { display: flex; align-items: flex-end; gap: clamp(10px, 1.2vw, 18px); margin-top: clamp(14px, 1.8vw, 28px); padding-bottom: clamp(18px, 2.4vw, 36px); border-bottom: 1px solid var(--hair); }
.ticket-date b { font: 400 clamp(110px, 15vw, 230px)/.74 var(--serif); letter-spacing: -.06em; padding-right: .04em; }
.ticket-date span { display: grid; padding-bottom: .3em; }
.ticket-date i { font: normal clamp(30px, 3.5vw, 52px)/1 var(--serif); text-transform: uppercase; letter-spacing: -.02em; }
.ticket-date small { font: 12px var(--sans); letter-spacing: .12em; color: var(--faint); margin-top: 6px; }
.ticket-date em { font: italic 18px var(--serif); color: var(--dim); margin-top: 2px; }
.ticket-city { font: 400 clamp(34px, 4vw, 60px)/1 var(--serif); letter-spacing: -.02em; text-transform: uppercase; margin-top: clamp(16px, 2vw, 30px); }
.ticket-city span { color: var(--faint); }
.ticket-venue { font: 13px var(--sans); letter-spacing: .08em; text-transform: uppercase; margin-top: 10px; }
.ticket-venue span { color: var(--faint); }
.ticket-go { display: flex; align-items: center; gap: 26px; margin-top: auto; padding-top: clamp(24px, 3vw, 44px); }
.plus { font: 15px var(--serif); letter-spacing: .02em; text-transform: uppercase; color: var(--dim); transition: color .3s; }
.plus i { font-style: normal; color: var(--blue); display: inline-block; transition: transform .6s var(--out); }
.plus:hover { color: var(--cream); } .plus:hover i { transform: rotate(90deg); }
.ticket-stub { border-left: 1px dashed rgba(232, 228, 214, .3); display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 28px 0; position: relative; }
.ticket-stub::before, .ticket-stub::after { content: ""; position: absolute; left: -13px; width: 26px; height: 26px; border-radius: 50%; background: var(--night); }
.ticket-stub::before { top: -14px; } .ticket-stub::after { bottom: -14px; }
.ticket-stub span { writing-mode: vertical-rl; transform: rotate(180deg); font: 11px var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }
.barcode { display: block; width: 44px; height: 188px; background:
    repeating-linear-gradient(180deg, var(--cream) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(180deg, var(--cream) 0 1px, transparent 1px 13px),
    repeating-linear-gradient(180deg, transparent 0 7px, var(--cream) 7px 10px, transparent 10px 17px),
    repeating-linear-gradient(180deg, transparent 0 21px, var(--cream) 21px 25px, transparent 25px 29px); opacity: .85; }
.barcode.sm { display: inline-block; width: 64px; height: 20px; vertical-align: middle; margin-right: 14px; opacity: .5; background:
    repeating-linear-gradient(90deg, var(--cream) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(90deg, var(--cream) 0 1px, transparent 1px 13px),
    repeating-linear-gradient(90deg, transparent 0 7px, var(--cream) 7px 10px, transparent 10px 17px); }
.noshow { border: 1px solid var(--hair); padding: clamp(30px, 5vw, 80px) var(--m); display: grid; justify-items: center; gap: 26px; text-align: center; }
.noshow p { font: 400 clamp(30px, 4vw, 60px)/1 var(--serif); letter-spacing: -.02em; }
.earlier { margin-top: 18px; font: 12px/1.7 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.earlier span { color: var(--faint); margin-right: 14px; }

/* ---------- about ---------- */
.cols { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(40px, 5vw, 80px); }
.col { border-left: 1px solid var(--hair); padding: 2px 12px 0; height: clamp(440px, 41vw, 620px); display: flex; flex-direction: column; min-width: 0; }
.col:nth-child(2) { transition-delay: .07s; } .col:nth-child(3) { transition-delay: .14s; } .col:nth-child(4) { transition-delay: .21s; }
.col h3 { font: 400 clamp(26px, 2.4vw, 36px)/1.1 var(--serif); letter-spacing: -.02em; transition: color .3s; }
.col p { font: 11px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--faint); margin-top: 8px; }
.col img { margin-top: auto; align-self: center; width: auto; max-width: 100%; height: 76%; object-fit: contain; object-position: 50% 100%; transition: transform 1s var(--out); transform-origin: 50% 100%; }
.col:nth-child(3) img { height: 62%; }
.col:nth-child(4) img { height: 66%; }
.col:hover h3 { color: var(--blue); }
.col:hover img { transform: scale(1.04); }

/* ---------- pictures ---------- */
.seen { display: grid; grid-template-columns: minmax(250px, 26.4%) 1fr; gap: clamp(16px, 1.6vw, 26px); align-items: start; }
.seen-side { position: sticky; top: 96px; padding-bottom: 30px; }
.seen-side .tag { margin-bottom: clamp(30px, 4.5vw, 70px); }
.seen-p { margin: 26px 0; text-align: left; max-width: 300px; font-size: 13px; }
.seen-side .br { font-size: 15px; }
.seen-side .fine { margin-top: 18px; max-width: 260px; font-size: 13px; }
.feat { position: relative; overflow: hidden; }
.feat img { width: 100%; }
.feat figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: flex-end; padding: 60px 14px 12px; background: linear-gradient(180deg, transparent, rgba(7, 9, 14, .75)); }
.feat figcaption b { font: 400 clamp(26px, 3.2vw, 46px)/1 var(--serif); letter-spacing: -.02em; }
.wall { columns: 3; column-gap: 10px; margin-top: 10px; }
.wall img { width: 100%; margin-bottom: 10px; break-inside: avoid; }

/* ---------- unreleased ---------- */
.scatter { position: relative; height: clamp(600px, 54vw, 800px); margin-top: clamp(20px, 3vw, 50px); }
.card { position: absolute; left: var(--x); top: var(--y); width: var(--w); transform: rotate(var(--a)); transition: transform 1.1s var(--out); }
.js .card.rv { transform: rotate(var(--a)) translateY(40px); }
.js .card.rv.in { transform: rotate(var(--a)); }
.js .card.rv.in:hover, .card:hover { transform: rotate(calc(var(--a) * .4)) scale(1.02); z-index: 3; }
.card-pic { position: relative; aspect-ratio: var(--ar, 1); overflow: hidden; background: #15181f; box-shadow: 0 30px 50px -24px #000; }
.card-pic img { width: 100%; height: 100%; object-fit: cover; opacity: .8; transition: opacity .8s; }
.file { position: absolute; left: 10px; top: -15px; z-index: 2; display: flex; align-items: center; gap: 9px; padding: 5px 9px 5px 7px; background: #dcd7c8; color: #15171c; font: 11px/1.05 var(--sans); box-shadow: 0 4px 10px rgba(0, 0, 0, .4); transform: rotate(calc(var(--a) * -.6)); }
.file::before { content: ""; width: 9px; height: 12px; border: 1px solid #15171c; border-radius: 1px; background: linear-gradient(225deg, #dcd7c8 3px, transparent 3px); }
.file small { display: block; font-size: 8.5px; color: #6b6d72; }
.file b { font-weight: 400; color: var(--cobalt); margin-left: 4px; }
.stamp { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-9deg); padding: .5em 1em; border: 2px solid var(--blue); color: var(--blue); font: 700 clamp(11px, 1.05vw, 15px) var(--sans); letter-spacing: .24em; text-transform: uppercase; white-space: nowrap; transition: opacity .5s, transform .7s var(--out); }
.card:nth-child(odd) .stamp { transform: translate(-50%, -50%) rotate(7deg); }
.card-info { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 14px; opacity: 0; transform: translateY(14px); transition: opacity .6s .15s, transform .9s var(--out) .15s; pointer-events: none; }
.card-info b { font: 400 clamp(22px, 2.3vw, 34px)/1 var(--serif); letter-spacing: -.02em; }
.card-info span { font: 11px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); margin-top: 7px; }
.card-info a { margin-top: 12px; align-self: flex-start; font: 14px var(--serif); letter-spacing: .03em; text-transform: uppercase; border-bottom: 1px solid var(--blue); padding-bottom: 2px; }
.unlocked .stamp { opacity: 0; transform: translate(-50%, -50%) scale(1.5); }
.unlocked .card-pic img { opacity: .42; }
.unlocked .card-info { opacity: 1; transform: none; pointer-events: auto; }
.unlocked .card, .js .unlocked .card.rv.in { transform: rotate(calc(var(--a) * .35)); }
.hold { position: absolute; left: 50%; top: 62%; transform: translate(-50%, -50%); z-index: 4; display: grid; justify-items: center; gap: 14px; transition: top 1s var(--out), opacity .5s; }
.hold-btn { font-size: 20px; padding: 1.2em 1.4em; gap: .9em; overflow: hidden; background: rgba(7, 9, 14, .9); touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.lock { position: relative; width: 12px; height: 9px; border: 1.5px solid var(--blue); margin-top: 6px; }
.lock::before { content: ""; position: absolute; left: 1px; right: 1px; bottom: 100%; height: 7px; border: 1.5px solid var(--blue); border-bottom: 0; border-radius: 5px 5px 0 0; transition: transform .5s var(--out); transform-origin: 100% 100%; }
.hold-fill { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--blue); transform: scaleX(0); transform-origin: 0 50%; }
.holding .hold-fill { transform: scaleX(1); transition: transform .9s linear; }
.unlocked .hold { top: 100%; }
.unlocked .lock::before { transform: rotate(40deg) translateY(-2px); }

/* ---------- contact ---------- */
.contact { display: grid; grid-template-columns: 44% 1fr; column-gap: 7%; }
.contact-l .tag { margin-bottom: clamp(18px, 2.2vw, 34px); }
.contact-sub { margin-top: 30px; text-align: left; }
.contact-l .mini { margin: 56px 0 12px; }
.topics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.topics button { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 8px 16px; border: 1px solid var(--hair); font: 19px/1.05 var(--serif); letter-spacing: .01em; text-transform: uppercase; transition: border-color .3s, background .3s; }
.topics button:hover { border-color: rgba(232, 228, 214, .45); }
.topics small { font: 10px var(--sans); letter-spacing: .08em; color: var(--blue); }
.box { width: 11px; height: 11px; border: 1px solid var(--dim); flex: none; position: relative; }
.box::after { content: ""; position: absolute; inset: 2px; background: var(--blue); transform: scale(0); transition: transform .4s var(--out); }
.topics [aria-checked="true"] { border-color: var(--cream); background: rgba(232, 228, 214, .05); }
.topics [aria-checked="true"] .box::after { transform: none; }
.pick { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding: 20px 0; border: solid var(--hair); border-width: 1px 0; font: italic 18px var(--serif); color: var(--dim); }
.pick .star { background: var(--dim); width: 15px; height: 15px; }
.contact-r { padding-top: clamp(0px, 3vw, 40px); min-width: 0; }
.contact-r h3 { font: 400 clamp(30px, 2.7vw, 40px)/1 var(--serif); letter-spacing: -.02em; margin-bottom: 34px; }
.field { display: grid; gap: 14px; padding: 14px 0 18px; border-bottom: 1px solid rgba(232, 228, 214, .3); min-width: 0; }
.field span { font: 13px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.field b, .field a { font: 400 clamp(22px, 2.3vw, 34px)/1.1 var(--serif); letter-spacing: -.02em; overflow-wrap: anywhere; }
.field a { transition: color .3s; } .field a:hover { color: var(--blue); }
.field.tall { min-height: 150px; align-content: start; }
.field.tall b { font-size: clamp(18px, 1.5vw, 22px); color: var(--mute); letter-spacing: -.01em; line-height: 1.25; }
.contact-go { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 34px; }
.swap { animation: swap .7s var(--out); }
@keyframes swap { from { opacity: 0; transform: translateY(12px); } }

/* ---------- latest ---------- */
.news { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: clamp(10px, 1.4vw, 20px); align-items: start; }
.item { display: grid; gap: 12px; min-width: 0; }
.item:nth-child(2) { transition-delay: .08s; } .item:nth-child(3) { transition-delay: .16s; }
.item-pic { display: block; overflow: hidden; aspect-ratio: 16 / 10; background: var(--deep); }
.item-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--out); }
.item:hover .item-pic img { transform: scale(1.04); }
.item .tag { margin-top: 4px; font-size: 11px; }
.item b { font: 400 clamp(26px, 2.9vw, 44px)/1 var(--serif); letter-spacing: -.03em; }
.go { display: inline-flex; align-items: center; font: 17px var(--serif); letter-spacing: .02em; text-transform: uppercase; margin-top: 8px; }

/* ---------- the end ---------- */
#foot { margin-top: clamp(100px, 12vw, 200px); }
.pulse { position: relative; height: 40px; overflow: hidden; }
.pulse svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pulse path { stroke: rgba(74, 116, 255, .42); stroke-width: 1.2; }
.pulse i { position: absolute; top: 50%; left: 0; width: 22%; height: 3px; margin-top: -1.5px; background: radial-gradient(ellipse at center, rgba(74, 116, 255, .95) 0, rgba(74, 116, 255, 0) 70%); animation: run 6s linear infinite; }
@keyframes run { from { transform: translateX(-100%); } to { transform: translateX(455%); } }
.foot-grid { display: grid; grid-template-columns: 26.4% 1fr 1fr 23.5%; column-gap: clamp(20px, 2.8vw, 40px); padding: clamp(50px, 6.5vw, 100px) var(--m) clamp(50px, 5.5vw, 84px); }
.foot-nav + .foot-nav + .foot-side { padding-left: clamp(0px, .6vw, 10px); }
.logo.big { font-size: clamp(70px, 8vw, 116px); padding-left: 0; }
.foot-mark p { font: italic 18px/1.3 var(--serif); color: var(--dim); max-width: 250px; margin: 26px 0; }
.foot-nav .mini { padding-bottom: 14px; border-bottom: 1px solid var(--hair); }
.foot-nav a { display: flex; align-items: baseline; gap: 14px; padding: 9px 12px 8px 6px; border-bottom: 1px solid var(--hair); font: 400 clamp(24px, 2vw, 29px)/1.2 var(--serif); text-transform: uppercase; transition: padding .6s var(--out), color .3s; }
.foot-nav a small { font: 10px var(--sans); letter-spacing: .08em; color: var(--faint); }
.foot-nav a .ar { margin-left: auto; width: 7px; height: 7px; }
.foot-nav a:hover { padding-left: 16px; color: var(--blue); }
.foot-date { display: grid; margin: 8px 0 34px; }
.foot-date b { font: 400 clamp(48px, 4.6vw, 68px)/1 var(--serif); letter-spacing: -.035em; text-transform: uppercase; }
.foot-date span { font: 22px var(--serif); text-transform: uppercase; display: inline-flex; align-items: center; }
.foot-date .ar { width: 7px; height: 7px; }
.foot-side .mini { margin-bottom: 16px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 34px; font: 13px var(--sans); }
.foot-links a:hover, .foot-end a:hover { color: var(--blue); }
.foot-end { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin: 0 var(--m); padding: 22px 0 26px; border-top: 1px solid var(--hair); font: 11px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.foot-end p:last-child { display: flex; gap: 22px; color: var(--dim); }

/* ---------- player (wide screens) ---------- */
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 105; height: 56px; display: flex; align-items: center; gap: 18px; padding: 0 var(--m); background: var(--night); border-top: 1px solid var(--hair); font: 12px var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.dock-art { width: 38px; height: 38px; object-fit: cover; }
.dock-play { min-width: 4.6em; color: var(--blue); letter-spacing: .1em; text-transform: uppercase; }
.dock-play.paused .ic-pause, .dock-play:not(.paused) .ic-play { display: none; }
.dock-title { font: 18px var(--serif); letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34%; }
.dock-bar { flex: 1; height: 24px; position: relative; cursor: pointer; }
.dock-bar::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--hair); }
.dock-bar span { position: absolute; left: 0; top: 50%; height: 3px; margin-top: -1px; width: 0; background: var(--blue); }
.dock-time { color: var(--dim); min-width: 8em; text-align: right; font-variant-numeric: tabular-nums; }
.dock-out, .dock-close { color: var(--dim); letter-spacing: .1em; text-transform: uppercase; transition: color .3s; }
.dock-out:hover, .dock-close:hover { color: var(--cream); }
.sc-tap { position: fixed; right: var(--m); bottom: 68px; z-index: 104; width: 320px; background: var(--night); border: 1px solid var(--hair); padding: 10px; transform: translateY(20px); opacity: 0; pointer-events: none; transition: transform .5s var(--out), opacity .3s; }
.sc-tap.on { transform: none; opacity: 1; pointer-events: auto; }
.sc-tap p { font: 11px var(--sans); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px; color: var(--blue); }
.sc-frame { width: 100%; height: 120px; border: 0; display: block; }

/* ---------- tablets ---------- */
@media (max-width: 1024px) {
  .dock, .sc-tap { display: none !important; }
  body { padding-bottom: 0; }
  .grid { grid-template-columns: repeat(3, 1fr); }
  .ticket { grid-template-columns: 38% 1fr 84px; }
  .barcode { width: 34px; height: 150px; }
  .foot-grid { grid-template-columns: 1fr 1fr; row-gap: 50px; }
  .cap .t { font-size: 19px; }
}

/* ---------- phones ---------- */
@media (max-width: 760px) {
  :root { --m: 8px; }
  .br { font-size: 16px; padding: .95em 1.1em; }
  .menu-btn { padding: 12px 14px; }
  .menu-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .menu-btn { gap: 0; }
  .logo { font-size: 52px; }
  .small #bar .logo { transform: scale(.6); }
  .menu-list b { font-size: clamp(40px, min(8.2vh, 13vw), 64px); }
  .menu-list a { flex-direction: column; }
  .menu-list em { position: static; transform: none; margin: 0 0 2px !important; font-size: 13px; order: -1; }
  .menu-list li { padding-bottom: 6px; }
  .hero { min-height: 520px; }
  .hero-pic { inset: 0; }
  .hero-pic img { object-position: 50% 20%; }
  .plat { font-size: 26px; left: var(--m); bottom: calc(var(--m) + 2px); }
  .plat a { width: 6.85em; }
  .latest { width: 176px; padding: 10px; }
  .latest-title { font-size: 40px; }
  .latest-top, .latest-by { font-size: 9px; }
  .sec { padding-top: 110px; }
  .head { grid-template-columns: 1fr; }
  .side { width: auto; padding: 18px 0 0; }
  .side p, .contact-sub { font-size: 13px; }
  .big { font-size: clamp(50px, 14.8vw, 96px); }
  .mid { font-size: clamp(50px, 14.8vw, 96px); }
  .grid { grid-template-columns: 1fr 1fr; gap: 28px 8px; }
  .cap { grid-template-columns: auto 1fr; margin-top: 8px; padding-top: 9px; column-gap: 6px; }
  .cap .t { font-size: 16px; }
  .cap .k { grid-column: 2; margin-top: 4px; font-size: 9.5px; }
  .cap .w { font-size: 11px; margin-top: 3px; }
  .cover::after { background: rgba(7, 9, 14, .18); }
  .glyph { display: none; }
  .ticket { grid-template-columns: 1fr; overflow: hidden; }
  .ticket-poster { border-right: 0; border-bottom: 1px solid var(--hair); padding: 22px; }
  .poster { width: min(100%, 320px); }
  .poster-top { font-size: 8px; } .poster-name { font-size: 44px; } .poster-foot b { font-size: 16px; } .poster-foot span { font-size: 10px; }
  .ticket-main { padding: 20px 14px 22px; }
  .ticket-date b { font-size: 132px; }
  .ticket-go { margin-top: 26px; padding-top: 0; }
  .ticket-stub { border-left: 0; border-top: 1px dashed rgba(232, 228, 214, .3); flex-direction: row; padding: 16px 14px; gap: 12px; }
  .ticket-stub span { writing-mode: horizontal-tb; transform: none; font-size: 9px; white-space: nowrap; }
  .ticket-stub::before, .ticket-stub::after { left: auto; top: -13px; bottom: auto; }
  .ticket-stub::before { left: -14px; } .ticket-stub::after { right: -14px; }
  .barcode { flex: 1; width: auto; height: 34px; background:
    repeating-linear-gradient(90deg, var(--cream) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(90deg, var(--cream) 0 1px, transparent 1px 13px),
    repeating-linear-gradient(90deg, transparent 0 7px, var(--cream) 7px 10px, transparent 10px 17px),
    repeating-linear-gradient(90deg, transparent 0 21px, var(--cream) 21px 25px, transparent 25px 29px); }
  .earlier span { display: block; }
  .cols { grid-template-columns: 1fr 1fr; row-gap: 30px; }
  .col { height: 340px; padding: 2px 8px 0; }
  .col h3 { font-size: 26px; }
  .col p { font-size: 9.5px; letter-spacing: .12em; }
  .seen { grid-template-columns: 1fr; }
  .seen-side { position: static; }
  .seen-side .tag { margin-bottom: 18px; }
  .wall { columns: 2; column-gap: 8px; margin-top: 8px; }
  .wall img { margin-bottom: 8px; }
  .scatter { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 34px 10px; padding: 20px 4px 0; }
  .card { position: relative; left: auto; top: auto; width: auto; --ar: 1 !important; }
  .card:first-of-type { grid-column: 1 / -1; width: 78%; justify-self: center; }
  .card-info { padding: 10px; }
  .card-info b { font-size: 21px; }
  .card-info span { font-size: 9.5px; }
  .file { left: 4px; font-size: 10px; }
  .hold { position: static; transform: none; grid-column: 1 / -1; order: 9; margin-top: 4px; }
  .unlocked .hold { top: auto; }
  .contact { grid-template-columns: 1fr; row-gap: 46px; }
  .topics { grid-template-columns: 1fr; }
  .topics button { font-size: 17px; }
  .contact-l .mini { margin-top: 36px; }
  .pick { font-size: 15px; }
  .contact-go .br { flex: 1; }
  .news { grid-template-columns: 1fr; row-gap: 46px; }
  .item b { font-size: 32px; }
  .foot-grid { grid-template-columns: 1fr; padding-top: 50px; }
  .foot-end { flex-direction: column; align-items: flex-start; line-height: 1.6; }
  .foot-end p:last-child { flex-wrap: wrap; gap: 6px 20px; }
  .barcode.sm { display: block; margin: 0 0 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; transition-delay: 0s !important; }
  .pulse i { display: none; }
}