/* My journey (journey.html). The painting fills the top of the page; the landmark of the current stop grows out of it
   (a cut-out layer in assets/journey/marks/ scaled up) while the rest of the painting fades back. Below it: the timeline
   (a logo for each stop),
   pictures that fan out above the current stop (they open in a viewer with their captions), one line for the stop with
   links to its papers, code and videos, and the skills as coloured bars that start at the stop where each was learned
   and reach to the current stop. Built by scripts/build_journey.py; behaviour in assets/journey-page.js. */
:root { --jy-veil: rgba(255,255,255,.2); --jy-ghost: #6B777C; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --jy-veil: rgba(15,26,31,.28); --jy-ghost: #9DAEB2; } }
:root[data-theme="dark"] { --jy-veil: rgba(15,26,31,.28); --jy-ghost: #9DAEB2; }

.jy-page { background: var(--paper); }

/* Header and title sit on the sky */
.jy-hero { position: relative; }
.jy-top { position: absolute; z-index: 7; top: 0; left: 0; right: 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; padding: 22px max(24px, calc((100% - 1072px) / 2)); text-shadow: 0 1px 8px rgba(10,35,60,.45); }
/* The top bar: the EJ mark (home) and the page's title, "My journey", in place of the name used on other pages. */
.jy-brand { display: flex; align-items: center; gap: 12px; }
.jy-home { display: block; border-radius: 50%; }
.jy-home .ej { width: 38px; height: 38px; box-shadow: 0 0 0 2px rgba(255,255,255,.85), 0 2px 10px rgba(10,35,60,.35); }
.jy-home:hover .ej { box-shadow: 0 0 0 3px #fff, 0 2px 12px rgba(10,35,60,.4); }
.jy-nav { display: flex; flex-wrap: wrap; gap: 4px 22px; font-size: .95rem; }
.jy-nav a { color: rgba(255,255,255,.92); text-decoration: none; }
.jy-nav a:hover { color: #fff; text-decoration: underline; }
.jy-nav a[aria-current="page"] { color: #fff; font-weight: 600; }
.jy-title { margin: 0; font: 500 clamp(1.7rem, 2.8vw, 2.4rem)/1.05 var(--head); letter-spacing: -.02em; color: #fff; text-shadow: 0 2px 16px rgba(10,35,60,.4); }

/* The painting, edge to edge */
.jy-scene { position: relative; width: 100%; aspect-ratio: 1672 / 941; overflow: hidden; background: #D4DDCB; }
.jy-land { display: block; width: 100%; height: 100%; object-fit: cover; transition: filter .35s; }
.jy-veil { position: absolute; inset: 0; z-index: 1; background: var(--jy-veil); opacity: 0; transition: opacity .35s; pointer-events: none; }
.jy-scene.has-mark .jy-land { filter: saturate(.72) brightness(1.03); }
.jy-scene.has-mark .jy-veil { opacity: 1; }
.jy-scrim { position: absolute; z-index: 2; top: 0; left: 0; right: 0; height: min(230px, 30%); background: linear-gradient(rgba(12,40,70,.42), rgba(12,40,70,0)); pointer-events: none; }
/* Each landmark's cut-out sits exactly over its painted self, so it is invisible until it grows. */
.jy-mark { position: absolute; z-index: 3; left: var(--x); top: var(--y); width: var(--w); height: var(--h); opacity: 0; transform-origin: 50% 92%; transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .25s, filter .45s; pointer-events: none; }
.jy-mark.is-on { opacity: 1; transform: scale(1.1); filter: drop-shadow(0 8px 11px rgba(23,32,38,.28)); }
.jy-tag { position: absolute; z-index: 4; left: var(--tx); top: var(--ty); transform: translate(-50%, 2px); opacity: 0; padding: 4px 9px; border-radius: 999px; background: #fff; color: #172026; font: 600 .78rem/1.3 var(--head); white-space: nowrap; box-shadow: 0 3px 10px rgba(23,32,38,.18); pointer-events: none; transition: opacity .25s, transform .35s; }
.jy-tag.is-on { opacity: 1; transform: translate(-50%, 9px); }
.jy-hit { position: absolute; z-index: 5; left: var(--x); top: var(--y); width: var(--w); height: var(--h); padding: 0; border: 0; border-radius: 12px; background: transparent; cursor: pointer; }
.jy-hit:focus { outline: none; }

/* Timeline, pictures, story line and skill bars share one grid of --n columns, so each sits under its stop. */
.jy-path { position: relative; z-index: 8; max-width: 1200px; margin: 0 auto; padding: 36px 24px 0; }
.jy-scroll { overflow-x: auto; padding: 130px 0 10px; margin-top: -130px; } /* the top padding leaves room for the pictures, which a scroll box would otherwise clip */
.jy-inner { --col-w: calc((100% - 88px) / var(--n)); position: relative; min-width: 1000px; padding: 0 44px; }
.jy-track { position: absolute; left: calc(44px + var(--col-w) / 2); right: calc(44px + var(--col-w) / 2); top: 15px; height: 2px; background: var(--line); }
.jy-progress { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--end) / var(--last) * 100%); background: var(--ink); transition: width .4s; }
.jy-stops { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.jy-stop { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 0 2px 6px; border: 0; border-radius: 6px; background: none; color: inherit; font: inherit; text-align: center; cursor: pointer; }
.jy-stop:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
/* Each stop shows the logo of where I was, on a white tile over the track: grey until reached, in colour after,
   ringed at the current stop. CNR and RIES have text tiles until logo files are added. */
.jy-logo { display: flex; align-items: center; justify-content: center; height: 32px; min-width: 32px; max-width: 64px; box-sizing: border-box; padding: 3px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: #172026; opacity: .5; filter: grayscale(1); transition: opacity .25s, filter .25s, box-shadow .25s, border-color .25s, transform .25s; }
.jy-logo img { display: block; width: auto; height: 24px; max-width: 56px; object-fit: contain; }
.jy-logo.is-text { padding: 0 6px; font: 700 .62rem/1 var(--head); letter-spacing: .05em; }
.jy-stop:hover .jy-logo { opacity: .85; filter: none; }
.jy-year { font-size: .85rem; font-weight: 600; color: var(--jy-ghost); }
.jy-place { font-size: .75rem; line-height: 1.3; color: var(--ink-2); }
.jy-stop.is-same .jy-logo { border-color: var(--ink-2); }
.jy-stop.is-past .jy-logo { opacity: 1; filter: none; }
.jy-stop.is-past .jy-year { color: var(--ink); }
.jy-stop.is-now .jy-logo { border-color: var(--ink); box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink); transform: scale(1.08); }
.jy-stop.is-now .jy-year { font-weight: 700; }

/* Pictures fan out above the current stop, over the bottom of the painting. */
.jy-fans { position: absolute; inset: 0 44px auto; height: 0; }
.jy-fan { position: absolute; left: calc(var(--col-w) * (var(--col) + .5)); bottom: 18px; width: 0; height: 0; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .25s, transform .35s cubic-bezier(.2,.8,.2,1); }
.jy-fan.is-on { opacity: 1; transform: none; pointer-events: auto; }
.jy-card { position: absolute; bottom: 0; left: -58px; width: 116px; height: 86px; padding: 3px; border: 0; border-radius: 4px; background: #fff; box-shadow: 0 6px 16px rgba(23,32,38,.25); cursor: zoom-in; transform: translateX(calc(var(--k) * 60px)) translateY(calc(var(--k) * var(--k) * 6px)) rotate(calc(var(--k) * 8deg)); transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .2s; }
.jy-card img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 2px; background: #EEF1F2; }
.jy-card:hover, .jy-card:focus-visible { z-index: 2; box-shadow: 0 12px 26px rgba(23,32,38,.35); transform: translateX(calc(var(--k) * 64px)) translateY(-8px) rotate(calc(var(--k) * 5deg)) scale(1.06); }
.jy-card:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
/* A video card (the startup's UX demos): Drive's thumbnail under a play button; it plays in the viewer. */
.jy-card.is-video { background: #1F2A30; cursor: pointer; }
.jy-card.is-video img { opacity: .8; }
.jy-play { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: rgba(255,255,255,.92); box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.jy-play::after { content: ""; position: absolute; left: 13px; top: 10px; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent #172026; }

/* The stop's line, and links to its papers, code, videos and talks */
.jy-stories { max-width: 780px; margin: 22px auto 0; text-align: center; }
.jy-story p { margin: 0 0 6px; font-size: 1.125rem; line-height: 1.5; color: var(--ink); }
.jy-story strong { font-weight: 600; }
.js .jy-story:not(.is-active) { display: none; }
.jy-works { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 10px 0 4px; }
.jy-work { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font-size: .82rem; text-decoration: none; }
.jy-work:hover { border-color: var(--ink); }
.jy-work svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.jy-work svg .fill { fill: currentColor; stroke: none; }

.jy-lanes { position: relative; height: calc(var(--rows) * 28px); margin-top: 26px; }
.jy-band { position: absolute; top: -6px; bottom: -6px; left: calc(var(--end) * 100% / var(--n)); width: calc(100% / var(--n)); border-radius: 8px; background: color-mix(in srgb, var(--ink) 5%, transparent); transition: left .4s; }
.jy-bars { list-style: none; margin: 0; padding: 0; }
.jy-bar { position: absolute; top: calc(var(--row) * 28px); left: calc(var(--start) * 100% / var(--n) + .4%); height: 22px; box-sizing: border-box; display: flex; align-items: center; width: 0; min-width: max-content; padding: 0 10px; border: 1px dashed var(--line); border-radius: 11px; background: var(--paper); color: var(--jy-ghost); font-size: .78rem; font-weight: 500; line-height: 1; white-space: nowrap; transition: width .55s cubic-bezier(.2,.8,.2,1), background-color .3s, color .3s, border-color .3s; }
.jy-bar.is-on { width: calc((var(--end) - var(--start) + 1) * 100% / var(--n) - .8%); border: 1px solid var(--bg); background: var(--bg); color: var(--fg); }
/* MATLAB and Python fade from their first colour (under the label) to their second. */
.jy-bar.has-fade.is-on { border-color: transparent; background: linear-gradient(90deg, var(--bg) 0, var(--bg) max(var(--solid), 40%), var(--to) 100%) border-box; background: linear-gradient(in oklab 90deg, var(--bg) 0, var(--bg) max(var(--solid), 40%), var(--to) 100%) border-box; }
/* MATLAB is orange then blue, with a short blend between, like its logo. */
.jy-bar.has-split.is-on { border-color: transparent; background: linear-gradient(90deg, var(--bg) 0, var(--bg) max(var(--solid), 48%), var(--to) min(100%, calc(max(var(--solid), 48%) + 14rem)), var(--to) 100%) border-box; background: linear-gradient(in oklab 90deg, var(--bg) 0, var(--bg) max(var(--solid), 48%), var(--to) min(100%, calc(max(var(--solid), 48%) + 14rem)), var(--to) 100%) border-box; }
/* A skill learned at the last stop grows leftward from the right edge, so its label stays inside the page. */
.jy-bar.at-end { left: auto; right: .4%; }
/* A skill learned at the stop just reached gives one soft pulse. */
@keyframes jy-pulse { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bg) 55%, transparent); } to { box-shadow: 0 0 0 9px transparent; } }
.jy-bar.is-new { animation: jy-pulse .9s ease-out; }
.jy-page .site-foot { margin-top: 72px; }

/* Picture viewer */
.jy-viewer { width: min(920px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 8px; background: transparent; color: #fff; overflow: visible; }
.jy-viewer::backdrop { background: rgba(12,18,22,.88); }
.jy-viewer figure { margin: 0; }
.jy-viewer-video { width: 100%; aspect-ratio: 16 / 9; max-height: calc(100dvh - 170px); border-radius: 6px; overflow: hidden; background: #000; }
.jy-viewer-video[hidden], .jy-viewer img[hidden] { display: none; }
.jy-viewer-video iframe { display: block; width: 100%; height: 100%; border: 0; }
.jy-viewer img { display: block; width: 100%; max-height: calc(100dvh - 170px); object-fit: contain; border-radius: 6px; background: #fff; }
.jy-viewer figcaption { padding: 12px 2px 0; }
.jy-viewer figcaption p { margin: 0; font-size: 1.05rem; line-height: 1.45; }
.jy-viewer figcaption strong { font-weight: 600; }
.jy-viewer .jy-viewer-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 4px; font-size: .85rem; color: #C9D3D6; }
.jy-viewer-btn { position: absolute; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; font: 400 1.5rem/1 var(--head); cursor: pointer; }
.jy-viewer-btn:hover { background: rgba(255,255,255,.28); }
.jy-viewer-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.jy-close { top: -52px; right: 0; }
.jy-prev { top: 40%; left: -60px; }
.jy-next { top: 40%; right: -60px; }
.jy-viewer.is-single .jy-prev, .jy-viewer.is-single .jy-next { display: none; }

@media (max-width: 760px) {
  .jy-top { position: relative; padding: 16px; text-shadow: none; }
  .jy-home .ej { width: 32px; height: 32px; box-shadow: none; }
  .jy-nav a { color: var(--ink-2); }
  .jy-nav a:hover, .jy-nav a[aria-current="page"] { color: var(--ink); }
  .jy-scrim { display: none; }
  .jy-title { color: var(--ink); text-shadow: none; font-size: 1.6rem; }
  .jy-tag { font-size: .66rem; padding: 2px 6px; }
  .jy-path { padding: 24px 16px 0; }
  /* On phones the timeline fits the screen as dots (only the current year is named), the pictures sit in a row under
     the line, and the skills wrap as boxes. */
  .jy-scroll { overflow: visible; padding: 0; margin-top: 0; }
  .jy-inner { min-width: 0; padding: 0; --col-w: calc(100% / var(--n)); }
  .jy-track { left: calc(var(--col-w) / 2); right: calc(var(--col-w) / 2); }
  .jy-place, .jy-year { display: none; }
  .jy-stop.is-now .jy-year { display: block; position: absolute; top: 29px; white-space: nowrap; font-size: .8rem; }
  .jy-track { top: 10px; }
  .jy-logo { height: 22px; min-width: 22px; max-width: 26px; padding: 2px; border-radius: 5px; }
  .jy-logo img { height: 16px; max-width: 20px; }
  .jy-logo.is-text { padding: 0 2px; font-size: .45rem; letter-spacing: 0; }
  .jy-stop { position: relative; padding-bottom: 18px; }
  .jy-inner { display: flex; flex-direction: column; }
  .jy-stops { order: 1; } .jy-stories { order: 2; } .jy-fans { order: 3; } .jy-lanes { order: 4; }
  .jy-fans { position: static; height: auto; }
  .jy-fan { position: static; width: auto; height: auto; display: none; gap: 8px; justify-content: center; margin-top: 14px; transform: none; }
  .jy-fan.is-on { display: flex; }
  .jy-card, .jy-card:hover, .jy-card:focus-visible { position: relative; left: auto; width: 96px; height: 72px; transform: none; }
  .jy-stories { margin-top: 16px; }
  .jy-story p { font-size: 1rem; }
  .jy-lanes { height: auto; margin-top: 20px; }
  .jy-band { display: none; }
  .jy-bars { display: flex; flex-wrap: wrap; gap: 6px; }
  .jy-bar, .jy-bar.is-on { position: static; width: auto; min-width: 0; height: 28px; border-radius: 6px; }
  .jy-bar.has-fade.is-on, .jy-bar.has-split.is-on { padding-right: 34px; background: linear-gradient(90deg, var(--bg) 0, var(--bg) calc(100% - 30px), var(--to) 100%) border-box; background: linear-gradient(in oklab 90deg, var(--bg) 0, var(--bg) calc(100% - 30px), var(--to) 100%) border-box; }
  .jy-prev { left: 4px; top: auto; bottom: -56px; }
  .jy-next { right: 4px; top: auto; bottom: -56px; }
}
@media (prefers-reduced-motion: reduce) {
  .jy-land, .jy-veil, .jy-mark, .jy-tag, .jy-progress, .jy-logo, .jy-band, .jy-bar, .jy-fan, .jy-card { transition: none; }
  .jy-bar.is-new { animation: none; }
}