@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@125,700&family=Playfair+Display:ital,wght@0,500;0,800;1,500&display=swap');
/* Same type as commercialathletics.club: Helvetica Neue for text, Pragmatica Extended (Adobe Fonts) for
   titles. Pragmatica can't be loaded here without our own Adobe kit, so Archivo at full width stands in. */
:root{color-scheme:dark;--text-font:'Helvetica Neue',Helvetica,Arial,sans-serif;--title-font:'pragmatica-extended','Archivo',sans-serif;font-family:var(--text-font);color:#fff;background:#000}
[hidden]{display:none!important}*{box-sizing:border-box}body{margin:0;background:#000}
button{font:inherit;color:inherit;touch-action:manipulation}button:focus-visible{outline:1px solid #fff;outline-offset:4px}

.journey{height:800vh}
.stage{height:100vh;height:100svh;position:sticky;top:0;overflow:hidden;background:#000;isolation:isolate}
.stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

.intro{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:40px 6vw;pointer-events:none;z-index:2;background:radial-gradient(ellipse at center,#0006,transparent 70%)}
.intro h1{font-family:'Playfair Display',Georgia,serif;font-size:clamp(30px,4.5vw,64px);line-height:1.1;font-weight:500;letter-spacing:-1px;margin:0;text-shadow:0 2px 24px #0008}
/* Swiss-flag red (#FF0000, the flag's screen red), outlined in white so it still reads for colour-blind viewers.
   paint-order puts the stroke behind the fill, so only its outer half shows and the letters keep their weight. */
.kicker{font-family:'Playfair Display',Georgia,serif;font-size:clamp(48px,7.6vw,116px);line-height:1;font-weight:800;letter-spacing:-2px;margin:0 0 20px;color:#f00;-webkit-text-stroke:.03em #fff;paint-order:stroke fill;text-shadow:0 2px 24px #0006}
.scroll-hint{font-size:10px;letter-spacing:2px;text-transform:uppercase;margin:28px 0 0;opacity:.8}
.scroll-hint::before{content:'↓';display:block;font-size:18px;margin-bottom:6px}
.scroll-hint.up::before{content:'↑'}
.scroll-hint:not([hidden]){animation:fade-in .6s ease}
@keyframes fade-in{from{opacity:0}}
/* Load progress sits where the scroll hint will appear; scrolling stays locked until the film is ready. */
.loader{margin:28px 0 0;padding:14px 22px 16px;display:flex;flex-direction:column;align-items:center;gap:10px;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;font-variant-numeric:tabular-nums;border-radius:12px;background:#0007;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.loader-bar{width:200px;height:3px;border-radius:2px;background:#fff3;overflow:hidden}
.loader-bar>span{display:block;height:100%;width:0;background:#fff;transition:width .2s linear}
.loader-bar.indeterminate>span{width:30%;animation:indeterminate 1.2s ease-in-out infinite}
/* Offered a few seconds into loading (or straight away if the film fails); the intro ignores the pointer, so it opts back in. */
.loader-escape{margin-top:18px;font-size:13px;color:inherit;text-decoration:underline;text-underline-offset:3px;text-shadow:0 1px 8px #000c;pointer-events:auto;animation:fade-in .6s ease}
.loader-escape:focus-visible{outline:1px solid #fff5;outline-offset:5px;border-radius:4px}
@keyframes indeterminate{from{transform:translateX(-100%)}to{transform:translateX(470%)}}

/* A spot is a dot pinned to a part of the frame, with its label beside it. */
/* No will-change:opacity here: it would cut the text window's backdrop blur off from the video. */
.spot{position:absolute;z-index:3;opacity:0;visibility:hidden}
.spot.shown{visibility:visible}
.spot-toggle{all:unset;position:relative;z-index:1;display:flex;align-items:center;gap:10px;cursor:pointer;transform:translate(-7px,-50%);white-space:nowrap}
.spot-toggle:focus{outline:none}.spot-toggle:focus-visible{outline:1px solid #fff5;outline-offset:5px;border-radius:4px}
.dot{flex:none;width:14px;height:14px;border-radius:50%;border:1.5px solid #fff;box-shadow:0 0 0 4px #0003;display:grid;place-items:center;transition:transform .3s ease}
.dot::after{content:'';width:4px;height:4px;border-radius:50%;background:#fff}
.spot-label{font-family:var(--title-font);font-weight:700;font-stretch:125%;text-transform:uppercase;letter-spacing:.01em;font-size:12px;text-shadow:0 1px 8px #000c,0 0 2px #0008;border-bottom:1px solid #fff8;padding-bottom:1px}
.spot.flip .spot-toggle{flex-direction:row-reverse;transform:translate(calc(-100% + 7px),-50%)}
/* The centred label (About me) sits just above the frame's centre in a padded window cut out of the
   darkened frame; its text window opens centred below it. */
.spot.center .spot-toggle{transform:translate(-50%,-100%);padding:28px 56px;border-radius:20px;box-shadow:0 0 0 100vmax #0006}.spot.center .dot{display:none}
.spot.center .spot-toggle:focus-visible{outline-offset:-6px;border-radius:20px}
/* Set in the intro kicker's typeface, in plain white. */
.spot.center .spot-label{font-family:'Playfair Display',Georgia,serif;font-size:clamp(48px,7.6vw,116px);line-height:1;font-weight:800;font-stretch:normal;text-transform:none;letter-spacing:-2px;text-shadow:0 2px 24px #0006;border-bottom:0;padding-bottom:0}
.spot.open .dot{transform:scale(1.25)}

/* The text window: blur with a very light darkening, feathered out at the edges. The feather lives in
   the padding (--feather), so the text itself is never faded; offsets pull the text back in line with the dot. */
.spot-body{--feather:26px;position:absolute;top:6px;left:-29px;width:min(370px,100vw);padding:calc(var(--feather) + 4px) calc(var(--feather) + 6px);background:#00000024;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);-webkit-mask-image:linear-gradient(to right,transparent,#000 var(--feather),#000 calc(100% - var(--feather)),transparent),linear-gradient(to bottom,transparent,#000 var(--feather),#000 calc(100% - var(--feather)),transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 var(--feather),#000 calc(100% - var(--feather)),transparent),linear-gradient(to bottom,transparent,#000 var(--feather),#000 calc(100% - var(--feather)),transparent);mask-composite:intersect;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .25s ease,transform .25s ease,visibility 0s .25s}
.spot.flip .spot-body{left:auto;right:-29px}
/* left:0, not 50%: the spot is as wide as its label, so 50% would push the window off centre. */
.spot.center .spot-body{left:0;top:0;text-align:center;transform:translate(-50%,-4px)}
.spot.center.above .spot-body{top:0;bottom:auto}
.spot.above .spot-body{top:auto;bottom:6px}
.spot.open .spot-body{opacity:1;visibility:visible;transform:none;transition:opacity .25s ease,transform .25s ease}
.spot.center.open .spot-body{transform:translateX(-50%)}
.spot-body p{font-size:14px;line-height:1.6;margin:0 0 8px;text-shadow:0 1px 3px #0009,0 0 12px #0006}.spot-body p:last-child{margin:0}
.spot-body strong{font-weight:700}
.spot-label:empty{display:none}
.spot-body a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* Link to the plain-text version, styled like a label; it fades out with the intro. */
.boring-link{position:absolute;top:28px;left:28px;z-index:3;display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none}
.boring-link:focus-visible{outline:1px solid #fff5;outline-offset:5px;border-radius:4px}
.progress{position:absolute;left:0;right:0;bottom:0;height:2px;background:#ffffff1a;z-index:3}.progress>div{height:100%;width:0;background:#fffc}
.replay{position:absolute;left:50%;bottom:36px;transform:translateX(-50%);background:none;border:0;border-bottom:1px solid #fff8;padding:4px 0;font-size:12px;letter-spacing:.5px;cursor:pointer;opacity:0;visibility:hidden;z-index:3;text-shadow:0 1px 8px #000c}
.media-error{position:absolute;bottom:20px;left:20px;right:20px;margin:0;font-size:12px;z-index:5}.media-error button{margin-left:8px;background:none;border:1px solid #fff8;border-radius:4px;padding:2px 8px;cursor:pointer}

/* Phones: the open card docks to the bottom of the screen instead of hanging off its label. */
@media (max-width:600px){.spot-label{font-size:11px}.spot-body p{font-size:13px;line-height:1.5}
  .spot .spot-body,.spot.center .spot-body,.spot.flip .spot-body,.spot.above .spot-body,.spot.center.above .spot-body{position:fixed;left:0;right:0;top:auto;bottom:8px;width:auto;transform:translateY(4px)}
  .spot.open .spot-body,.spot.center.open .spot-body{transform:none}}
@media(prefers-reduced-motion:reduce){.spot-body,.dot,.loader-bar>span{transition:none}.scroll-hint,.loader-escape,.loader-bar.indeterminate>span{animation:none}}