/* THE TOUR (5 November 2026): one minute on the edition's paper. The stage holds the table (the two faces), the phone (the
   participant's page, as it is drawn), a caption, the end and the start; body[data-s] says the scene, the CSS moves
   everything with slow, short transitions (restrained: objects arrive and settle, nothing spins). Phone first. */
@font-face { font-family: 'CardSans'; font-weight: 100 900; font-display: swap; src: url(/continue/fonts/inter-latin.woff2) format('woff2'); }
@font-face { font-family: 'CardSerif'; font-weight: 300 600; font-display: swap; src: url(/continue/fonts/cormorant-garamond-latin.woff2) format('woff2'); }
@font-face { font-family: 'CardMono'; font-weight: 400; font-display: swap; src: url(/assets/fonts/ibm-plex-mono-400-latin.woff2) format('woff2'); }
:root { --tint: 45, 78, 196; --bg: #F3EFE6; --card: #F8F5EE; --ink: #1B1A17; --soft: #3A3833; --dim: #6B675E; --mute: #8C877C; --line: #1b1a171c; --edge-line: #1b1a1738; --rust: #B4491B;
  --sans: 'CardSans', Inter, Helvetica, Arial, sans-serif; --serif: 'CardSerif', 'Cormorant Garamond', Georgia, serif; --mono: 'IBM Plex Mono', 'CardMono', ui-monospace, Menlo, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; color: var(--ink); overflow: hidden; }
html { background: var(--bg); }
body { background: radial-gradient(120% 90% at 30% 20%, #F7F3EB 0, #EEE8DC 60%, #E5DED0 100%); }
body { font: 400 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 4px; }
.grain { position: fixed; z-index: 0; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: multiply; background-image: repeating-radial-gradient(circle at 30% 20%, #00000014 0 .35px, transparent .7px 4px); background-size: 7px 7px; }
.k { margin: 0; font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }
.ar { width: 16px; height: 10px; flex: none; } .ar path { fill: none; stroke: currentColor; stroke-width: 1.3; }

.stage { position: fixed; z-index: 1; inset: 0 0 64px; overflow: hidden; }

/* the table: the two faces of their edition */
.table { position: absolute; left: 50%; top: 44%; width: min(78vw, 62vh, 560px); aspect-ratio: 1; transform: translate(-50%, -50%) scale(.94); opacity: 0; transition: transform 1.4s var(--ease), opacity 1.2s ease, left 1.4s var(--ease), top 1.4s var(--ease), width 1.4s var(--ease); }
.face { position: absolute; inset: 0; transition: transform 1.2s var(--ease), z-index 0s .3s; box-shadow: 1px 1px 0 #ddd3c0, 2px 2px 0 #d2c7b2, 3px 3px 0 #c9bea8, 0 24px 34px -16px #2c22145e, 0 60px 80px -50px #2c221570; }
.face canvas { display: block; width: 100%; height: 100%; }
.face-cover { z-index: 2; transform: rotate(-3deg); }
.face-verso { z-index: 1; transform: translate(14%, 6%) rotate(3deg); }
.scan { position: absolute; left: 68%; top: 67%; width: 26%; height: 26%; border: 1.5px solid var(--rust); opacity: 0; overflow: hidden; }
.scan::after { content: ''; position: absolute; left: 0; right: 0; height: 2px; top: 0; background: var(--rust); box-shadow: 0 0 12px var(--rust); animation: scan 1.6s ease-in-out infinite; }
@keyframes scan { 50% { top: calc(100% - 2px); } }

body:not([data-s="start"]) .table { opacity: 1; transform: translate(-50%, -50%) scale(1); }
body[data-s="back"] .face-cover, body[data-s="scan"] .face-cover { z-index: 1; transform: translate(-8%, -4%) rotate(-5deg); }
body[data-s="back"] .face-verso, body[data-s="scan"] .face-verso { z-index: 2; transform: translate(4%, 2%) rotate(1deg); }
body[data-s="scan"] .scan { opacity: 1; transition: opacity .6s ease .4s; }
body:is([data-s="ask"], [data-s="play"], [data-s="days"], [data-s="next"]) .table { opacity: 0; transform: translate(-50%, -50%) scale(.9); }
body[data-s="end"] .table { opacity: .0; }

/* the phone: the participant's page, as it is drawn */
.phone { position: absolute; left: 50%; top: 46%; width: min(64vw, 40vh, 300px); aspect-ratio: 9 / 19; padding: 10px; border-radius: 34px; background: #1B1A17; box-shadow: 0 40px 70px -30px #2c221580, inset 0 0 0 1.5px #3a3833;
  transform: translate(-50%, -44%); opacity: 0; transition: transform 1.2s var(--ease), opacity 1s ease; }
.ph-screen { position: relative; width: 100%; height: 100%; border-radius: 25px; overflow: hidden; background: #F3EFE6; }
body:is([data-s="scan"], [data-s="ask"], [data-s="play"], [data-s="days"], [data-s="next"]) .phone { opacity: 1; transform: translate(-50%, -50%); }
.ps { position: absolute; inset: 0; padding: 26px 16px 18px; opacity: 0; pointer-events: none; transition: opacity .8s ease, background-color 1.6s ease, color 1.6s ease; display: flex; flex-direction: column; }
body[data-s="scan"] .ps[data-k="cover"], body[data-s="ask"] .ps[data-k="ask"], body[data-s="play"] .ps[data-k="play"], body[data-s="days"] .ps[data-k="days"], body[data-s="next"] .ps[data-k="next"] { opacity: 1; pointer-events: auto; }
.ps canvas { display: block; width: 72%; aspect-ratio: 1; margin: 4px auto 12px; box-shadow: 1px 1px 0 #d2c7b2, 0 12px 18px -10px #2c221560; transform: rotate(-1.5deg); }
.pk { margin: 0; font-family: var(--mono); font-size: 7px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.pt { margin: 6px 0 0; font-family: var(--serif); font-weight: 400; font-size: 21px; line-height: 1.08; }
.pby { margin: 3px 0 0; font-family: var(--mono); font-size: 7px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.ps-s { margin: 8px 0 0; font-size: 9.5px; line-height: 1.5; color: var(--dim); }
.ps-s.small { text-align: center; margin-top: 14px; }
.pgo { align-self: flex-start; margin-top: 12px; padding: 7px 14px; border-radius: 99px; background: var(--ink); color: #F3EFE6; font-size: 7px; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; }
.pch { display: block; margin-top: 8px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); font-family: var(--serif); font-size: 14px; }
.pch { width: 100%; text-align: left; color: inherit; background: transparent; cursor: pointer; transition: background .4s ease, border-color .4s ease; }
.pch:hover { border-color: var(--edge-line); }
.pch.hit { background: #1b1a170d; border-color: var(--ink); }
.ps.dusk { background: #F3EFE6; text-align: center; align-items: center; }
body[data-s="play"] .ps.dusk.night { background: #2B241E; color: #EFE6D8; transition: opacity .8s ease, background-color 2.4s ease 1s, color 2.4s ease 1s; }
body[data-s="play"] .ps.dusk.night .pk, body[data-s="play"] .ps.dusk.night .ps-s { color: #efe6d8a3; }
.ps.dusk:not(.night) .seek { background: var(--line); } .ps.dusk:not(.night) .seek i { background: var(--ink); }
.ring { display: grid; place-items: center; width: 70px; height: 70px; margin: 26px auto 0; border-radius: 50%; border: 1px solid #C2531F; box-shadow: 0 0 0 5px #c2531f22; }
.ring svg { width: 26px; height: 26px; fill: currentColor; }
.seek { display: block; width: 100%; height: 2px; margin-top: 26px; background: #efe6d830; }
.seek i { display: block; height: 100%; width: 0; background: #EFE6D8; }
.pdays { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--line); }
.pdays li { display: grid; grid-template-columns: 34px 1fr; gap: 2px 8px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.pdays b { grid-row: span 2; font-family: var(--mono); font-weight: 400; font-size: 6.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); padding-top: 4px; }
.pdays li.open b { color: var(--rust); }
.pdays span { font-family: var(--serif); font-size: 13.5px; line-height: 1.15; }
.pdays small { font-size: 8px; color: var(--mute); }
.pbowls { display: block; width: 100%; aspect-ratio: 1.5; object-fit: cover; border-radius: 8px; margin-top: 10px; background: #040405; }
.pnext { margin-top: 10px; padding: 10px; border-radius: 10px; border: 1px solid var(--line); }
.pnext b { font-family: var(--mono); font-weight: 400; font-size: 6.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.pnext p { margin: 4px 0 0; font-family: var(--serif); font-size: 13px; line-height: 1.25; }
.pnext .pgo { margin-top: 8px; }

/* the colour, chosen while the edition is on the table: four swatches, nothing waits for them */
.swatches { position: absolute; z-index: 5; top: 2.6vh; right: 3vw; display: flex; align-items: center; gap: 2px; opacity: 0; pointer-events: none; transition: opacity .8s ease; }
body:is([data-s="object"], [data-s="back"]) .swatches { opacity: 1; pointer-events: auto; }
.swatches .k { margin-right: 8px; }
.swatches button { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; }
.swatches button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.swatches i { width: 18px; height: 18px; border-radius: 50%; box-shadow: 0 0 0 1px #00000022; transition: box-shadow .25s; }
.swatches button[aria-pressed="true"] i { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--ink); }

/* the caption */
.caption { position: absolute; left: 50%; bottom: 3.5vh; width: min(92vw, 760px); transform: translateX(-50%); margin: 0; text-align: center; font-family: var(--serif); font-size: clamp(21px, 3.6vw, 34px); line-height: 1.2; text-wrap: balance; opacity: 0; transition: opacity .6s ease; }
.caption.on { opacity: 1; }

/* the halo: two soft lights in the edition's colour, behind the start and the end (5 November: "softer, more inviting, in
   colour, round, a little glass") */
.halo { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1.6s ease; }
body:is([data-s="start"], [data-s="end"]) .halo { opacity: 1; }
.halo i { position: absolute; border-radius: 50%; filter: blur(40px); transition: background 1.2s ease; }
.halo i:first-child { width: 62vmax; height: 62vmax; right: -14vmax; top: -18vmax; background: radial-gradient(circle at 42% 44%, rgba(var(--tint), .42), rgba(var(--tint), .16) 46%, transparent 70%); }
.halo i:last-child { width: 40vmax; height: 40vmax; left: -12vmax; bottom: -16vmax; background: radial-gradient(circle, rgba(var(--tint), .22), transparent 68%); }
.end-art { position: absolute; right: 9vw; top: 50%; width: min(30vw, 46vh, 420px); aspect-ratio: 1; transform: translateY(-52%) rotate(4deg); box-shadow: 1px 1px 0 #ddd3c0, 2px 2px 0 #d2c7b2, 0 40px 70px -30px rgba(var(--tint), .45), 0 30px 50px -30px #2c221560; opacity: 0; transition: opacity 1.4s ease .3s, transform 1.6s var(--ease) .3s; }
body[data-s="end"] .end-art { opacity: 1; transform: translateY(-50%) rotate(2deg); }

/* the end: their edition's two sizes */
.end { position: absolute; inset: 0; display: grid; align-content: center; justify-items: start; padding: 0 max(24px, 8vw); opacity: 0; pointer-events: none; transition: opacity 1.2s ease; }
body[data-s="end"] .end { opacity: 1; pointer-events: auto; }
body[data-s="end"] .caption { opacity: 0; }
.end > :not(.end-art) { position: relative; }
.end h2 { margin: 12px 0 0; font-weight: 400; font-size: clamp(36px, 7vw, 64px); line-height: 1; letter-spacing: -.045em; max-width: 14ch; }
.sizes { display: flex; gap: 10px; margin-top: 22px; }
.sizes { gap: 14px; align-items: stretch; }
.sizes .size { display: grid; gap: 4px; margin: 0; padding: 16px 18px 16px 20px; min-width: 176px; border-radius: 22px; text-decoration: none;
  background: rgba(255, 255, 255, .46); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, .75); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 18px 40px -22px rgba(var(--tint), .55);
  transition: background .3s ease, box-shadow .35s ease; }
.sizes .size:hover { background: rgba(255, 255, 255, .62); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 24px 46px -20px rgba(var(--tint), .6); }
.sizes small { display: inline-flex; align-items: center; gap: 10px; justify-self: start; margin-top: 8px; padding: 8px 14px; border-radius: 999px; background: rgb(var(--tint)); color: #fff; font-size: 13px; }
.sizes small em { font-style: normal; }
.sizes b { display: block; font-family: var(--mono); font-weight: 400; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.sizes span { font-size: 30px; letter-spacing: -.04em; }
.end-s { margin: 16px 0 0; font-size: 15px; color: var(--soft); max-width: 46ch; }
.acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.go { display: inline-flex; align-items: center; justify-content: space-between; gap: 22px; min-height: 48px; padding: 0 22px; border: 1px solid transparent; border-radius: 999px; background: rgb(var(--tint)); color: #fff; font-size: 15px; text-decoration: none; }
.go.ghost { color: var(--ink); background: rgba(255, 255, 255, .4); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-color: rgba(255, 255, 255, .8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 8px 20px -14px rgba(var(--tint), .5); }
.go.ghost:hover { background: rgba(255, 255, 255, .6); }
.again { margin-top: 18px; min-height: 44px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); text-decoration: underline; text-underline-offset: 4px; }

/* the start */
.start { position: absolute; inset: 0; display: grid; align-content: center; justify-items: start; padding: 0 max(24px, 8vw); transition: opacity .9s ease; }
.start > * { position: relative; }
body:not([data-s="start"]) .start { opacity: 0; pointer-events: none; }
.start h1 { margin: 14px 0 0; font-weight: 400; font-size: clamp(40px, 9vw, 84px); line-height: .98; letter-spacing: -.05em; max-width: 13ch; text-wrap: balance; }
.start-s { margin: 18px 0 0; font-size: clamp(16px, 1.5vw, 20px); color: var(--soft); max-width: 40ch; }
.bigplay { display: inline-flex; align-items: center; gap: 16px; margin-top: 30px; min-height: 64px; padding: 0 26px 0 8px; border-radius: 99px; background: rgb(var(--tint)); color: #fff; font-size: 16px; box-shadow: 0 18px 40px -18px rgba(var(--tint), .7); }
.bigplay svg { width: 48px; height: 48px; padding: 14px; border-radius: 50%; background: #fff; fill: rgb(var(--tint)); }
.start-n { margin: 14px 0 0; font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }

/* the controls */
.ctl { position: fixed; z-index: 2; left: 0; right: 0; bottom: 0; height: 64px; display: flex; align-items: center; gap: 14px; padding: 0 max(16px, env(safe-area-inset-left)) env(safe-area-inset-bottom); border-top: 1px solid var(--line); background: #F3EFE6; }
.pp { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border: 1px solid var(--edge-line); border-radius: 50%; }
.pp svg { width: 16px; height: 16px; fill: currentColor; }
.pp .i-play { display: none; } .pp.paused .i-play { display: block; } .pp.paused .i-pause { display: none; }
.track { position: relative; flex: 1; height: 44px; cursor: pointer; }
.track::before { content: ''; position: absolute; left: 0; right: 0; top: 21px; height: 2px; background: var(--line); }
.track i { position: absolute; left: 0; top: 21px; height: 2px; width: 0; background: var(--rust); }
.track b { position: absolute; top: 17px; width: 1px; height: 10px; background: var(--edge-line); }
.skip { flex: none; display: inline-flex; align-items: center; min-height: 44px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); text-decoration: none; }
body[data-s="start"] .ctl { opacity: .35; pointer-events: none; }

@media (min-width: 900px) {
  body:is([data-s="scan"]) .table { left: 34%; width: min(40vw, 58vh, 520px); }
  body:is([data-s="scan"]) .phone { left: 70%; }
  .phone { width: min(24vw, 33vh, 280px); top: 43%; }
  .caption { bottom: 5vh; }
}
@media (max-width: 899px) {
  .end-art { display: none; }
  .sizes .size { min-width: 0; flex: 1; }
  .swatches { top: 1.2vh; right: 50%; transform: translateX(50%); }
  body[data-s="scan"] .table { top: 30%; width: min(70vw, 34vh); }
  body[data-s="scan"] .phone { top: 64%; transform: translate(-50%, -50%) scale(.62); }
  .skip { font-size: 0; width: 44px; justify-content: center; }
  .skip::after { content: ''; width: 16px; height: 10px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M0 5h14M10 1l4 4-4 4' fill='none' stroke='black' stroke-width='1.4'/%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 16 10'%3E%3Cpath d='M0 5h14M10 1l4 4-4 4' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat; }
  .acts .go { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .table, .face, .phone, .ps, .caption, .end, .start { transition: none !important; } .scan::after { animation: none; } }