/* flow.css: the normal-flow site below the journey (after scene 9).
   It slides up over the pinned hall (z-index 3) and reads like a calm, plain document.
   Motion is CSS only, transform/opacity only: scroll-driven parallax bands and reveals via
   animation-timeline: view(), static where unsupported, off under prefers-reduced-motion. */

.flow {
  --t: 95 227 201;                      /* card tint, "r g b" like the journey's --tint */
  --gut: max(16px, var(--pad));
  --rule: rgb(95 227 201 / .16);
  --body: #cfe0d9;
  position: relative; z-index: 3;
  background: var(--bg);
  padding: 0 0 4rem;
  color: var(--body);
}
.fl-wrap { width: min(72rem, 100% - 2 * var(--gut)); margin-inline: auto; }
.flow p { margin: 0 0 1rem; }
.flow a { text-underline-offset: 4px; text-decoration-thickness: 1px; }
.flow .ph { font-size: .8rem !important; line-height: 1.4 !important; }

/* ---------- head: picks up where the hall's fire left off ---------- */
.fl-head { padding: clamp(3rem, 9vw, 6.5rem) 0 clamp(2rem, 5vw, 3.5rem); }
.fl-name {
  margin: 0 0 1.1rem; color: var(--ink);
  font: 400 clamp(2.6rem, 8vw, 5.2rem)/1 var(--display); letter-spacing: -.02em;
  text-shadow: 0 0 50px rgb(255 179 92 / .18);
}
.fl-lead { max-width: 38rem; color: var(--ink); font: 400 clamp(1.25rem, 2.6vw, 1.7rem)/1.4 var(--display); }
.fl-where { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin: 1.4rem 0 0 !important; font: 400 .8rem/1.4 var(--mono); color: var(--fire); letter-spacing: .04em; }

/* ---------- sticky section nav ---------- */
.fl-nav {
  position: sticky; top: 0; z-index: 5;
  background: rgb(4 16 15 / .86);
  -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  border-block: 1px solid var(--rule);
}
.fl-nav ul {
  list-style: none; margin-block: 0; padding: 0;
  display: flex; gap: .2rem 1.5rem; overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent);
}
.fl-nav ul::-webkit-scrollbar { display: none; }
.fl-nav li { flex: none; }
.fl-nav a {
  display: block; padding: .85rem 0; white-space: nowrap;
  font: 400 .9rem/1 var(--ui); color: var(--ink-dim); text-decoration: none;
}
.fl-nav a:hover, .fl-nav a:focus-visible { color: var(--teal); }
@media (min-width: 60rem) { .fl-nav ul { justify-content: space-between; -webkit-mask-image: none; mask-image: none; } }

/* ---------- sections ---------- */
.fl-sec { padding-block: clamp(3.5rem, 9vw, 6.5rem); scroll-margin-top: 3rem; }
.fl-sec + .fl-sec { border-top: 1px solid var(--rule); }
.fl-sec > h2 {
  margin: 0 0 clamp(1.6rem, 4vw, 2.6rem); color: var(--teal);
  font: 400 clamp(2rem, 5vw, 3.2rem)/1.05 var(--display); letter-spacing: -.01em;
}
.fl-sub { margin: 2.6rem 0 1.1rem; font: 400 1.35rem/1.2 var(--display); color: var(--ink); }
.xp-cols > div > .fl-sub:first-child, .tk-cols .fl-sub { margin-top: 0; }
.xp-cols > div > .xp:last-child { margin-bottom: 0; }
.fl-stamp { font: 400 .8rem/1.4 var(--mono); color: var(--ink-dim); letter-spacing: .03em; margin-top: -1rem !important; margin-bottom: 1.6rem !important; }

.prose { max-width: 40rem; }
.prose p { font-size: 1.0625rem; line-height: 1.7; margin-bottom: 1.3rem; }
.fl-more a, .pc-links a { color: var(--teal); }
.fl-more a:hover, .pc-links a:hover, .fl-more a:focus-visible, .pc-links a:focus-visible { color: var(--ink); }

/* ---------- cards: the journey's tag card, at rest ---------- */
.pc-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.pc-grid + .pc-grid { margin-top: 1rem; }
.pc-grid--lead { grid-template-columns: 1fr; }
.pc {
  position: relative; min-width: 0;
  padding: 1.3rem 1.25rem 1.2rem;
  background:
    linear-gradient(180deg, rgb(var(--t) / .07), rgb(var(--t) / 0) 45%),
    linear-gradient(160deg, rgb(5 26 28 / .72), rgb(3 12 14 / .6));
  border: 1px solid rgb(var(--t) / .26);
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgb(0 0 0 / .25), 0 14px 36px rgb(0 0 0 / .35);
  transition: translate .35s cubic-bezier(.2, .8, .2, 1);
}
.pc::before, .pc::after {   /* corner brackets */
  content: ""; position: absolute; width: 12px; height: 12px; pointer-events: none;
  border: 0 solid rgb(var(--t));
}
.pc::before { left: -1px; top: -1px; border-left-width: 2px; border-top-width: 2px; }
.pc::after { right: -1px; bottom: -1px; border-right-width: 2px; border-bottom-width: 2px; }
.pc:hover { border-color: rgb(var(--t) / .6); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .pc:hover { translate: 0 -3px; } }
.pc--fire { --t: 255 179 92; }
.pc--quiet { background: none; box-shadow: none; border-style: dashed; }

.pc h3 { margin: .1rem 0 .3rem; font: 400 clamp(1.5rem, 3.4vw, 2rem)/1.1 var(--display); color: var(--ink); }
.pc h4 { margin: .1rem 0 .45rem; font: 400 1.35rem/1.15 var(--display); color: rgb(var(--t)); }
.pc p { font-size: .975rem; line-height: 1.55; }
.pc > :last-child, .pc-main > :last-child, .split dd:last-child { margin-bottom: 0; }
.pc-meta {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2rem 1rem;
  margin-bottom: .5rem !important;
  font: 400 .75rem/1.4 var(--mono) !important; color: var(--ink-dim); letter-spacing: .03em;
}
.pc-meta time { color: var(--fire); }
.pc-role { margin-bottom: .9rem !important; color: var(--ink); font: 400 1.05rem/1.4 var(--display) !important; }
.pc-result { margin-bottom: .6rem !important; font: 500 .8rem/1.4 var(--mono) !important; color: var(--fire); letter-spacing: .02em; }
.pc-note { color: var(--ink-dim); font-size: .9rem !important; font-style: italic; }
.pc-links { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin-top: .9rem !important; font: 400 .85rem/1.4 var(--mono) !important; }

.chips { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.chips li {
  padding: .28rem .55rem; border: 1px solid rgb(var(--t) / .3); border-radius: 2px;
  background: rgb(var(--t) / .06);
  font: 400 .75rem/1.35 var(--mono); color: var(--ink); letter-spacing: .01em;
}

.split { margin: 0; }
.split dt { margin: 0 0 .35rem; font: 400 .75rem/1.4 var(--mono); color: rgb(var(--t)); letter-spacing: .04em; }
.split dd { margin: 0 0 1.1rem; font-size: .975rem; line-height: 1.6; }
.split dd + dd { margin-top: -.4rem; }

@media (min-width: 52rem) {
  .pc--wide { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.5rem; padding: 1.8rem 1.9rem; }
  .pc--wide .split { border-left: 1px solid rgb(var(--t) / .18); padding-left: 2rem; }
}
@media (max-width: 51.99rem) { .pc--wide .split { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid rgb(var(--t) / .18); } }

/* milestones (Now) */
.ms { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.ms li { position: relative; padding-left: 1.3rem; font-size: .925rem; line-height: 1.45; }
.ms li::before {
  content: ""; position: absolute; left: 0; top: .42em; width: .6rem; height: .6rem;
  border: 1px solid rgb(var(--t) / .7); border-radius: 50%;
}
.ms li.done::before { background: rgb(var(--t)); box-shadow: 0 0 8px rgb(var(--t) / .6); }
.ms li.done { color: var(--ink); }

/* ---------- experience ---------- */
.xp-cols { display: grid; gap: 2.5rem 4rem; }
@media (min-width: 56rem) { .xp-cols { grid-template-columns: 1fr 1fr; } }
.xp { list-style: none; margin: 0 0 2rem; padding: 0; }
.xp li { display: grid; gap: .25rem 1.25rem; padding: .95rem 0; border-top: 1px solid var(--rule); }
.xp li:last-child { border-bottom: 1px solid var(--rule); }
.xp time { font: 400 .78rem/1.5 var(--mono); color: var(--fire); letter-spacing: .03em; }
.xp strong { display: block; font: 400 1.12rem/1.3 var(--display); color: var(--ink); }
.xp span { display: block; font-size: .9rem; color: var(--ink-dim); }
.xp p { margin: .4rem 0 0; font-size: .9rem; line-height: 1.5; }
@media (min-width: 30rem) { .xp li { grid-template-columns: 9.5rem minmax(0, 1fr); } .xp time { padding-top: .2rem; } }

/* "also" list (Beyond the lab) */
.also { margin: 2rem 0 0; display: grid; gap: .9rem; max-width: 46rem; }
.also > div { display: grid; gap: .1rem 1.25rem; }
.also dt { font: 400 1.05rem/1.4 var(--display); color: var(--ink); }
.also dd { margin: 0; font-size: .925rem; line-height: 1.55; color: var(--ink-dim); }
@media (min-width: 40rem) { .also > div { grid-template-columns: 12rem minmax(0, 1fr); } }

/* ---------- toolkit ---------- */
.tk-cols { display: grid; gap: 2.5rem 4rem; }
.tools { list-style: none; margin: 0; padding: 0; columns: 1; column-gap: 3rem; }
@media (min-width: 44rem) { .tools { columns: 2; } }
.tools li {
  break-inside: avoid; padding: .6rem 0; border-top: 1px solid var(--rule);
  font-size: .95rem; line-height: 1.4; color: var(--ink);
}
.tools li span { display: block; font: 400 .72rem/1.5 var(--mono); color: var(--ink-dim); letter-spacing: .03em; }

/* ---------- awards ---------- */
.aw { list-style: none; margin: 0; padding: 0; max-width: 56rem; }
.aw li { display: grid; gap: .3rem 1.5rem; padding: 1rem 0; border-top: 1px solid var(--rule); }
.aw li:last-child { border-bottom: 1px solid var(--rule); }
.aw-v { font: 500 .95rem/1.3 var(--mono); color: var(--fire); letter-spacing: .02em; }
.aw strong { display: block; font: 400 1.12rem/1.3 var(--display); color: var(--ink); }
.aw div span { display: block; margin-top: .15rem; font-size: .9rem; line-height: 1.5; color: var(--ink-dim); }
@media (min-width: 36rem) { .aw li { grid-template-columns: 8.5rem minmax(0, 1fr); } .aw-v { padding-top: .15rem; } }

/* ---------- contact ---------- */
.ct-mail { margin-bottom: 2rem !important; }
.ct-mail a {
  display: inline-block; max-width: 100%; overflow-wrap: anywhere;
  font: 400 clamp(1.6rem, 6vw, 3.4rem)/1.15 var(--display); color: var(--ink);
  text-decoration: none; border-bottom: 1px solid rgb(255 179 92 / .55); padding-bottom: .2rem;
}
.ct-mail a:hover, .ct-mail a:focus-visible { color: var(--fire); }
.ct-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 2rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); max-width: 60rem; }
.ct-links a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .85rem 0; border-top: 1px solid var(--rule);
  color: var(--ink); text-decoration: none; font: 400 1.1rem/1.3 var(--display);
}
.ct-links a span { font: 400 .72rem/1.3 var(--mono); color: var(--ink-dim); }
.ct-links a:hover, .ct-links a:focus-visible { color: var(--teal); }

.fl-foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem;
  padding: 2rem 0 0; border-top: 1px solid var(--rule);
  font: 400 .75rem/1.4 var(--mono); color: var(--ink-dim); letter-spacing: .04em;
}

/* ---------- parallax bands: the journey's stills, seen through a slot ---------- */
.band {
  position: relative; overflow: hidden;
  height: clamp(11rem, 34vh, 22rem);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 28%, #000 72%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 28%, #000 72%, transparent);
}
.band img {
  position: absolute; left: 0; top: -20%; width: 100%; height: 140%;
  object-fit: cover; display: block; opacity: .5;
}
.band-mark {  /* a reticle from the journey, on a nearer plane than the picture */
  position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px;
  border: 1px solid rgb(95 227 201 / .5); border-radius: 50%;
  box-shadow: 0 0 18px rgb(95 227 201 / .25), inset 0 0 8px rgb(95 227 201 / .2);
}
.band-mark::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px;
  border-radius: 50%; background: var(--teal); box-shadow: 0 0 8px var(--teal);
}
.band:nth-of-type(even) .band-mark { left: 72%; }

/* scroll-driven depth + reveals (static where unsupported or when motion is reduced) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .band img { animation: fl-far linear both; animation-timeline: view(); }
    .band-mark { animation: fl-near linear both; animation-timeline: view(); }
    .rv {
      animation: fl-rise linear both; animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
  }
}
@keyframes fl-far  { from { transform: translate3d(0, -12%, 0) scale(1.04); } to { transform: translate3d(0, 12%, 0) scale(1.04); } }
@keyframes fl-near { from { transform: translate3d(-40px, 70px, 0); } to { transform: translate3d(40px, -70px, 0); } }
@keyframes fl-rise { from { opacity: 0; transform: translate3d(0, 22px, 0); } to { opacity: 1; transform: none; } }