/*
  CONFIGURABLE STYLE OPTIONS
  --------------------------
  1) Core spacing/type/radius values: :root below
  2) Color palettes: html[data-palette="electric|ember|signal"]
  3) Light/dark modes: html[data-theme="light|dark"]
  4) Default theme/palette: data.js > SITE_DATA.config

  No third-party CSS is required in this build.
*/

:root {
  --max: 1180px;
  --site-bar-height: 94px;
  --site-bar-gutter: 1.5rem;
  --narrow: 860px;
  --section-pad: clamp(3.75rem, 6vw, 6.5rem);
  --radius-sm: 8px;
  --radius: 16px;
  --radius-lg: 20px;
  --shadow: 0 22px 70px rgba(8, 18, 35, .12);
  --thin-scrollbar: 12px;
  --font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

html[data-palette="electric"] {
  --accent: #6757ff;
  --accent-2: #16c9d8;
  --accent-3: #29c66f;
  --accent-warm: #f27b34;
  --hero-a: #09111c;
  --hero-b: #02060c;
  --gradient: linear-gradient(110deg, #3d116f 0%, #153ba9 44%, #04a9c8 76%, #0d7c73 100%);
}

html[data-palette="ember"] {
  --accent: #e95d3f;
  --accent-2: #ffb62e;
  --accent-3: #38b991;
  --accent-warm: #e94f75;
  --hero-a: #18100d;
  --hero-b: #080505;
  --gradient: linear-gradient(110deg, #6e1734 0%, #b93a2f 45%, #df8d24 75%, #2b846d 100%);
}

html[data-palette="signal"] {
  --accent: #00a7ff;
  --accent-2: #52e5a0;
  --accent-3: #d8f24a;
  --accent-warm: #a67cff;
  --hero-a: #071318;
  --hero-b: #020608;
  --gradient: linear-gradient(110deg, #093b60 0%, #006c83 42%, #00a56f 74%, #637c18 100%);
}

html[data-theme="light"] {
  --bg: #f7f8fa;
  --paper: #ffffff;
  --soft: #f1f3f6;
  --warm: #eeeae2;
  --ink: #12161c;
  --muted: #68707a;
  --line: rgba(15, 25, 40, .11);
  --card: rgba(255, 255, 255, .88);
  --header-bg: rgba(255, 255, 255, .84);
  --index-bg: var(--accent);
  --index-ink: #ffffff;
}

html[data-theme="dark"] {
  --bg: #090f17;
  --paper: #101923;
  --soft: #0c141d;
  --warm: #171713;
  --ink: #eef4f8;
  --muted: #a5b0ba;
  --line: rgba(255, 255, 255, .10);
  --card: rgba(18, 28, 39, .92);
  --header-bg: rgba(5, 10, 16, .78);
  --index-bg: var(--accent);
  --index-ink: #ffffff;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-offset, 0px);
  overflow-x: clip;
}

body {
  margin: 0;
  max-width: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  line-height: 1.55;
  overflow-x: clip;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

button {
  font: inherit;
}

::selection {
  background: var(--accent);
  color: white;
}

.skip-link {
  position: fixed;
  left: 1rem;
  top: -4rem;
  z-index: 999;
  background: #fff;
  color: #000;
  padding: .65rem 1rem;
  border-radius: 8px;
}

.skip-link:focus {
  top: 1rem;
}

.top-anchor {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
}

.site-settings {
  position: fixed;
  z-index: 1000;
  top: 90px;
  right: 1.25rem;
  width: min(500px, calc(100vw - 1.35rem));
  padding: .95rem 1rem 1rem;
  border: 1px solid var(--accent);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 18px 60px rgba(0, 0, 0, .3);
}

.site-settings-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--line);
  cursor: move;
  user-select: none;
}

.site-settings-head h2 {
  margin: .25rem 0 0;
  font-size: 1.04rem;
  letter-spacing: -.01em;
}

.site-settings-head button {
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.site-settings-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .45rem .55rem;
  padding: .72rem 0;
}

.site-settings-body fieldset {
  display: grid;
  gap: .34rem;
  margin: 0;
  padding: .48rem .52rem .56rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  min-width: 0;
}

.site-settings-body legend {
  padding: 0 .28rem;
  color: var(--muted);
  font: 700 .62rem/1 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.site-settings-body label {
  display: block;
  color: var(--ink);
  font-size: .66rem;
  cursor: pointer;
}

.site-settings-body fieldset label {
  font-size: .66rem;
}

.site-settings-body>label {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .66rem;
}

.site-settings-body>label:has(select) {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .55rem;
}

.site-settings-body input {
  accent-color: var(--accent);
}

.settings-theme-row {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
}

.settings-theme-row select,
.site-settings-body>label select {
  min-width: 6.35rem;
  padding: .22rem .36rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  font-size: .68rem;
}

.site-settings-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-top: .18rem;
}

.site-settings-copy {
  flex: 0 0 auto;
  padding: .46rem .55rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--soft);
  color: var(--ink);
  font: 700 .58rem/1 var(--font-mono);
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
}

.site-settings-copy:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.site-settings-reset {
  width: 100%;
  flex: 1 1 auto;
  margin: 0;
  padding: .55rem .7rem;
  border: 0;
  border-radius: 7px;
  background: var(--accent);
  color: #fff;
  font: 700 .64rem/1 var(--font-mono);
  cursor: pointer;
}

.site-settings-reset:hover {
  filter: brightness(1.1);
}

@media (max-width: 700px) {
  .site-settings {
    width: min(420px, calc(100vw - 1rem));
    right: .5rem;
    top: 72px;
    padding: 1rem;
  }

  .site-settings-body {
    grid-template-columns: 1fr;
  }

  .site-settings-body fieldset,
  .site-settings-body>label {
    grid-column: 1;
  }

  .site-settings-actions {
    flex-wrap: wrap;
  }

  .site-settings-copy,
  .site-settings-reset {
    width: 100%;
    flex: 1 1 100%;
  }
}

.container {
  width: min(calc(100% - 3rem), var(--max));
  margin-inline: auto;
}

.container.narrow {
  width: min(calc(100% - 3rem), var(--narrow));
}

.section {
  padding: var(--section-pad) 0;
  position: relative;
}

.section[hidden],
.hero[hidden] {
  display: none;
}

.section[data-section-theme="light"] {
  --paper: #ffffff;
  --soft: #f1f3f6;
  --warm: #eeeae2;
  --ink: #12161c;
  --muted: #68707a;
  --line: rgba(15, 25, 40, .11);
  --card: rgba(255, 255, 255, .88);
  color: var(--ink);
}

.section[data-section-theme="dark"] {
  --paper: #101923;
  --soft: #0c141d;
  --warm: #171713;
  --ink: #eef4f8;
  --muted: #a5b0ba;
  --line: rgba(255, 255, 255, .10);
  --card: rgba(18, 28, 39, .92);
  color: var(--ink);
}

.section-paper {
  background: var(--paper);
}

.section-soft {
  background: var(--soft);
}

.section-warm {
  background: var(--warm);
}

#about {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

#about::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  --cube-size: 320px;
  right: calc(max((100% - var(--max)) / 2, 1rem) + 6rem - var(--cube-size) / 2);
  width: var(--cube-size);
  aspect-ratio: 1;
  background: url("images/cubes.png") center / contain no-repeat;
  pointer-events: none;
}

#about .about-layout {
  position: relative;
  z-index: 1;
}

.color-splash {
  position: relative;
  height: clamp(138px, 15vw, 225px);
  overflow: hidden;
  isolation: isolate;
  background: var(--gradient);
}

.color-splash::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(5, 8, 18, .26), transparent 42%, rgba(255, 255, 255, .1));
  mix-blend-mode: soft-light;
}

.color-splash-grid {
  position: absolute;
  inset: 0;
  opacity: .25;
  background-image: linear-gradient(150deg, transparent 42%, rgba(5, 8, 18, .5) 42.5% 57%, transparent 57.5%), linear-gradient(25deg, transparent 48%, rgba(5, 8, 18, .34) 48.5% 63%, transparent 63.5%), linear-gradient(150deg, transparent 68%, rgba(255, 255, 255, .22) 68.5% 76%, transparent 76.5%);
  background-size: 360px 220px, 460px 220px, 520px 220px;
  background-position: 0 100%, 140px 100%, 300px 100%;
  transform: skewX(-8deg) scale(1.08);
}

.color-reference {
  background: var(--soft);
  border-top: 1px solid var(--line);
}

.color-reference {
  display: none !important;
}

.palette-toggle {
  display: none !important;
}

.color-reference .section-heading {
  margin-bottom: 1.5rem;
}

.color-reference .section-index {
  width: auto;
  min-width: 2.25rem;
  padding-inline: .5rem;
  border-radius: 4px;
  font-size: .56rem;
}

.color-reference-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.color-reference-item {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  min-width: 0;
  padding: .8rem;
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: var(--radius-sm);
}

.color-swatch {
  flex: 0 0 2.35rem;
  width: 2.35rem;
  height: 2.35rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}

.color-swatch.is-gradient {
  width: auto;
  height: 1.1rem;
  flex-basis: 100%;
}

.color-reference-item:has(.is-gradient) {
  display: block;
}

.color-reference-item strong,
.color-reference-item code,
.color-reference-item small {
  display: block;
  overflow-wrap: anywhere;
}

.hero {
  --hero-gutter: clamp(2rem, 8vw, 5rem);
  height: auto;
  min-height: calc(760px + var(--header-offset, 0px));
  padding: 0;
  overflow: hidden;
  color: #eaf2f6;
  background: #02070d url("images/light_trail_large.png") center top / cover no-repeat;
}

.hero-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: auto;
}

.hero-shell {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(calc(100% - 3rem), var(--max));
  min-height: calc(760px + var(--header-offset, 0px));
  align-items: center;
  padding-block: max(var(--hero-gutter), calc(var(--header-offset, 0px) / 2));
  padding-inline: 0;
  margin-inline: auto;
}

.hero-copy {
  position: relative;
  z-index: 2;
  width: min(44%, 620px);
  transform: translateY(calc(var(--header-offset, 0px) - clamp(2.5rem, 4.6vw, 4.15rem)));
}

.eyebrow,
.kicker {
  color: var(--accent-2);
  font-family: var(--font-mono);
  font-size: .72rem;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: .10em;
  font-weight: 700;
}

.hero-copy .eyebrow {
  max-width: 38rem;
  color: #08cfdf;
}

.hero-copy h1 {
  margin: .8rem 0 1.5rem;
  color: #f4f8fa;
  font-size: clamp(3rem, 5.2vw, 5.25rem);
  line-height: .92;
  letter-spacing: -.045em;
}

.hero-copy .hero-intro {
  max-width: 520px;
  color: #bac7d1;
  font-size: clamp(1rem, 1.35vw, 1.18rem);
  line-height: 1.5;
}

.hero-copy .button-row {
  margin-top: 2rem;
}

.hero .eyebrow {
  color: #08cfdf;
}

.hero h1 {
  margin: .55rem 0 .8rem;
  color: #f4f8fa;
  font-size: clamp(3rem, 5vw, 5.25rem);
  line-height: .92;
  letter-spacing: -.045em;
}

.hero-intro {
  white-space: pre-line;
  color: #a2b1bc;
  font-size: 1.02rem;
  line-height: 1.45;
}

.button-row {
  display: flex;
  gap: .8rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}

.button {
  padding: .8rem 1.05rem;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, .35);
  font-weight: 700;
  font-size: .82rem;
  transition: .2s ease;
}

.button-primary,
.button-ghost {
  background: transparent;
  color: #f4f8fa;
  border-color: rgba(255, 255, 255, .45);
}

.button:hover {
  transform: translateY(-2px);
}

.color-reference-item strong {
  font: 700 .76rem var(--font-mono);
  color: var(--ink);
}

.color-reference-item code {
  margin-top: .15rem;
  color: var(--muted);
  font-size: .68rem;
}

.color-reference-item small {
  margin-top: .35rem;
  color: var(--muted);
  font-size: .68rem;
  line-height: 1.3;
}

.section-dark {
  background: #060b11;
  color: #eef5f8;
}

.section-dark[data-effective-theme="light"],
.section-dark[data-effective-theme="dark"] {
  background: var(--paper);
  color: var(--ink);
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--site-bar-height);
  display: grid;
  grid-template-columns: minmax(200px, 1fr) auto auto;
  align-items: center;
  gap: 1.5rem;
  padding: .8rem var(--site-bar-gutter);
  background: var(--header-bg);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.brand-signature,
.footer-signature {
  width: clamp(145px, 13vw, 190px);
  height: auto;
  object-fit: contain;
  object-position: left center;
}

.brand-signature {
  margin-block: -5px -2px;
}

.brand-role {
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.1;
  margin-top: .25rem;
}

.footer-role-line {
  font-size: .76rem;
  line-height: 1.1;
}

.top-nav {
  display: flex;
  gap: 1.45rem;
  align-items: center;
}

.top-nav a {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  opacity: .86;
}

.top-nav a:hover {
  color: var(--accent-2);
  opacity: 1;
}

.theme-tools {
  display: flex;
  gap: .4rem;
}

.theme-tools button {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: .5rem;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  margin: 4px 0;
}

.intro-layout {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}

#intro {
  padding-block: clamp(3.25rem, 5vw, 5rem);
}

.section-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 1px solid var(--index-bg);
  background: var(--index-bg);
  color: var(--index-ink);
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

h2 {
  font-size: clamp(1.8rem, 3vw, 3.25rem);
  letter-spacing: -.045em;
  line-height: 1.02;
  margin: .2rem 0 1.1rem;
}

.lead {
  font-size: clamp(1rem, 1.25vw, 1.14rem);
  max-width: 740px;
}

.section p {
  color: var(--muted);
}

.capability-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem;
  margin-top: 1.8rem;
}

.capability-card {
  padding: .85rem 0;
  border-top: 1px solid var(--line);
}

.capability-card h3 {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  margin: .55rem 0 .3rem;
}

.capability-card p {
  font-size: .76rem;
  line-height: 1.4;
  margin: 0;
}

.line-icon svg,
.line-icon img,
.line-icon i {
  width: 34px;
  height: 34px;
  color: var(--accent);
}

.line-icon svg,
.line-icon img {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.line-icon i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  font-size: 1.55rem;
  line-height: 1;
  color: #111820;
}

html[data-theme="dark"] .line-icon img {
  filter: invert(1) brightness(1.15);
}

.sketch-panel {
  position: relative;
  aspect-ratio: 1.12;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--paper) 70%, var(--soft));
}

.sketch-panel img {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.hand-note,
.hand-notes span {
  font-family: "Segoe Print", "Bradley Hand", cursive;
  transform: rotate(-4deg);
}

.hand-note {
  position: absolute;
  color: #34383d;
  background: #fffdf5dd;
  padding: .3rem .45rem;
  box-shadow: 0 5px 18px rgba(0, 0, 0, .08);
}

.scribble-arrow {
  position: absolute;
  right: 20%;
  bottom: 24%;
  font-size: 3rem;
  color: #383838;
  transform: rotate(20deg)
}

.section-heading {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  align-items: end;
  margin-bottom: 2.4rem;
}

.section-heading>div {
  max-width: 820px;
}

.section-heading h2 {
  margin-bottom: .5rem;
}

.section-heading p {
  margin: 0;
}

.career-heading-actions {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.resume-callout {
  display: block;
  z-index: 1;
  width: 5.25rem;
  height: auto;
  pointer-events: none;
  transform: rotate(-4deg);
}

.resume-callout-link {
  position: absolute;
  inset: auto 0 calc(100% + 1rem);
  z-index: 1;
  width: 5.25rem;
  height: 5.25rem;
  margin-inline: auto;
}

.resume-callout-link[hidden] {
  display: none !important;
}

.resume-link {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--accent);
  font-weight: 800;
  font-size: .85rem;
  white-space: nowrap;
}

@media (max-width: 780px) {
  .career-heading-actions {
    gap: .45rem;
  }

  .resume-callout-link {
    position: relative;
    inset: auto;
    display: inline-flex;
    flex: 0 0 auto;
    z-index: 3;
    width: 3.25rem;
    height: auto;
  }

  .resume-callout {
    position: static;
    width: 3.25rem;
    transform: rotate(-4deg);
  }
}

.section-heading.inverse p {
  color: #9eacb8;
}

.deep-link,
.read-link {
  font-weight: 800;
  color: var(--accent);
  white-space: nowrap;
  font-size: .85rem;
}

.section-dark .deep-link {
  color: var(--accent-2);
}

.work-section {
  background: var(--soft);
}

.work-section .section-heading {
  margin-bottom: 1.4rem;
}

.work-arrows {
  display: none;
  gap: .45rem;
  align-self: end;
}

.work-arrows button {
  width: 2.35rem;
  height: 2.35rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  font-size: 1.35rem;
  cursor: pointer;
}

.work-arrows button:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.work-app {
  display: grid;
  gap: 1rem;
}

.work-main {
  display: flex;
  height: auto;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  box-shadow: var(--shadow);
}

.work-visual {
  position: relative;
  flex: 0 0 auto;
  aspect-ratio: 2.65;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #071522;
}

.work-media-visual {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
}

.work-media-rotator {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.work-media-rotator.is-crossfade .work-media-visual,
.work-media-rotator.is-slide .work-media-visual {
  transition: opacity var(--work-transition-speed, .55s) var(--ease), transform var(--work-transition-speed, .55s) var(--ease);
}

.work-media-rotator.is-crossfade .work-media-visual.is-current {
  opacity: 1;
}

.work-media-rotator.is-crossfade .work-media-visual.is-next {
  opacity: 0;
}

.work-media-rotator.is-slide .work-media-visual.is-current {
  z-index: 2;
  transform: translateX(0);
}

.work-media-rotator.is-slide .work-media-visual.is-next {
  z-index: 1;
  transform: translateX(100%);
}

.work-media-rotator.is-slide .work-media-visual.is-next.is-exiting {
  transform: translateX(-100%);
}

.work-copy {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  padding: clamp(1.4rem, 3vw, 2.4rem);
}

.work-copy h3 {
  display: -webkit-box;
  min-height: 1.3em;
  max-height: 1.3em;
  margin: .35rem 0 .45rem;
  padding: 0;
  overflow: hidden;
  font-size: clamp(1.7rem, 3vw, 2.7rem);
  line-height: 1.3;
  letter-spacing: -.035em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.work-detail-wrap {
  position: relative;
  min-height: 4.2em;
}

.work-detail {
  display: -webkit-box;
  margin: 0;
  min-height: 4.2em;
  max-width: none;
  max-height: 4.2em;
  overflow: hidden;
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.work-detail-wrap.has-detail-toggle .work-detail-full,
.work-detail-wrap.has-detail-toggle .work-detail-small {
  padding-right: 4.5rem;
}

.work-more-callout {
  position: absolute;
  top: -5.1rem;
  right: -2rem;
  z-index: 1;
  display: block;
  width: 6rem;
  height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transform: rotate(-11deg);
}

.work-more-callout img {
  display: block;
  width: 100%;
  height: auto;
}

.work-detail-toggle {
  position: absolute;
  top: .65rem;
  right: calc(.1rem + var(--thin-scrollbar) - 4px);
  z-index: 2;
  margin: 0;
  padding: .15rem .35rem;
  border: 1px solid var(--accent);
  border-radius: 4px;
  background: var(--accent);
  color: #fff;
  font: 700 .6rem/1 var(--font-mono);
  cursor: pointer;
}

.work-detail-extra {
  display: none;
  white-space: pre-line;
}

.work-detail-wrap.is-expanded {
  z-index: 4;
}

.work-detail-wrap.is-expanded .work-detail-extra {
  position: absolute;
  inset: 0 -.65rem auto;
  width: calc(100% + 1.3rem);
  display: block;
  max-height: none;
  padding: .9rem 1rem;
  padding-right: 3.75rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  background: #fff;
  box-shadow: 0 12px 28px rgba(8, 18, 35, .12);
  overflow-x: hidden;
  overflow-y: scroll;
  scrollbar-gutter: stable;
  color: #12161c;
  font-size: .84rem;
  line-height: 1.55;
}

.work-detail-wrap.is-expanded .work-more-callout {
  display: none;
}

.work-detail-wrap.is-expanded .work-detail-extra {
  scrollbar-width: thin;
}

.work-detail-wrap.is-expanded .work-detail-extra::-webkit-scrollbar {
  width: var(--thin-scrollbar);
  height: var(--thin-scrollbar);
}

.work-detail-wrap.is-expanded .work-detail-toggle {
  background: var(--accent);
  color: #fff;
}

.work-detail-small {
  display: none !important;
}

@media (max-width: 1099px) {
  .work-more-callout {
    width: 4.5rem;
    top: -4rem;
    right: -1.1rem;
  }
}

@media (max-width: 520px) {
  .work-more-callout {
    width: 4.5rem;
    top: -4rem;
    right: -1rem;
  }
}

.work-duo {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
  min-height: 0;
  margin-top: 1rem;
  padding-top: 0;
  border-top: 0;
  align-items: start;
}

.work-duo>div+div {
  padding-left: 0;
}

.work-fact-label {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .45rem;
  color: var(--ink);
  font: 700 .62rem/1 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.work-fact-label::after {
  content: "";
  flex: 1 1 auto;
  min-width: 1rem;
  height: 1px;
  background: var(--line);
}

.work-duo p {
  display: -webkit-box;
  margin: 0;
  min-height: 5.8em;
  max-height: 5.8em;
  overflow: hidden;
  font-size: .8rem;
  line-height: 1.45;
  color: var(--muted);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.work-duo>div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.work-selected {
  margin-top: 1rem;
  padding-top: 0;
}

.work-selected-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .55rem;
}

.work-selected-item {
  display: grid;
  justify-items: center;
  gap: .35rem;
  min-width: 0;
  color: var(--accent);
  text-align: center;
}

.work-selected-item img {
  width: 1.65rem;
  height: 1.65rem;
}

.work-selected-item i {
  margin-top: .25rem;
  font-size: 1.45rem;
  line-height: 1;
  color: var(--accent-2);
}

.work-selected-item span {
  min-height: 2.4em;
  max-width: 12ch;
  color: var(--muted);
  font-size: .64rem;
  line-height: 1.2;
}

.work-bottom {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
  min-height: 0;
  margin-top: 1.1rem;
  padding-top: 0;
}

.work-bottom .tag-row {
  min-height: 2.7rem;
  margin: 0;
  align-items: flex-start;
}

.work-bottom>div {
  min-width: 0;
  min-height: 0;
}

.work-bottom>div:last-child {
  grid-column: 3;
  text-align: center;
}

.work-bottom>div:last-child .work-fact-label {
  justify-content: center;
}

.work-bottom .tag-row span {
  display: block;
  max-width: 100%;
  overflow: hidden;
  background: var(--soft);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-proof {
  display: block;
  color: var(--accent-2);
  font-size: 1.4rem;
  line-height: 1.1;
}

.work-proof-detail {
  display: block;
  margin-top: .15rem;
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.35;
  min-height: 2.7em;
  max-height: 2.7em;
  overflow: hidden;
}

.work-index {
  display: grid;
  grid-template-columns: repeat(var(--active-work-count, 4), minmax(0, 1fr));
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
}

.work-index button {
  position: relative;
  display: grid;
  gap: .35rem;
  padding: 1rem 1.25rem;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
}

.work-index button:hover,
.work-index button.is-active {
  color: var(--ink);
}

.work-index button.is-active::after {
  content: "";
  position: absolute;
  left: 1.25rem;
  right: 1.25rem;
  bottom: 0;
  height: 3px;
  background: var(--accent);
}

.work-index button span {
  color: var(--accent);
  font: 700 .7rem/1 var(--font-mono);
}

.work-index button strong {
  font-size: .84rem;
}

.tag-row {
  display: flex;
  gap: .35rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.tag-row span {
  font-size: .57rem;
  padding: .2rem .35rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
}

.placeholder-badge {
  position: absolute;
  right: .65rem;
  top: .65rem;
  background: #ffdd5a;
  color: #231e00;
  padding: .3rem .45rem;
  border-radius: 4px;
  font: 800 .62rem/1 var(--font-mono);
  letter-spacing: .06em;
}

.placeholder-badge.mini {
  font-size: .62rem;
}

.thinking-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.thinking-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--card);
  box-shadow: 0 10px 26px rgba(8, 18, 35, .05);
}

.thinking-card .card-cover {
  display: block;
  aspect-ratio: 16 / 9;
  flex: 0 0 auto;
  background: var(--soft);
  overflow: hidden;
}

.thinking-card .card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thinking-card>div {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 1.2rem;
}

.thinking-card h3 {
  font-size: 1.2rem;
  margin: .55rem 0;
}

.thinking-card .read-link {
  margin-top: auto;
  padding-top: 1.1rem;
}

.thinking-card h3 a:hover {
  color: var(--accent);
}

/* ---- Career track ---- */
.career-track-wrap {
  margin-top: 1.5rem;
}

.ctrack {
  --zoom: 1;
  --role-rows: 1;
  --mark-rows: 1;
  --row-h: 26px;
  --mark-row-h: 19px;
  --bar-size: 15px;
}

.ctrack-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: .85rem;
}

.ctrack-chips {
  display: flex;
  gap: .35rem;
  flex-wrap: wrap;
}

.ctrack-chip {
  font: 700 .66rem/1 var(--font-mono);
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: .46rem .62rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: .18s var(--ease);
}

.ctrack-chip span {
  text-transform: lowercase;
}

.ctrack-chip:hover {
  color: var(--ink);
  border-color: var(--accent);
}

.ctrack-chip.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.ctrack-zoom {
  display: flex;
  align-items: center;
  gap: .45rem;
}

.ctrack-zoom-icon {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  color: var(--muted);
}

.ctrack-zoom-btn {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.ctrack-zoom-btn span {
  position: relative;
  top: -1px;
}

.ctrack-zoom-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.ctrack-zoom-range {
  width: 130px;
  accent-color: var(--accent);
}

.ctrack-viewport {
  position: relative;
  overflow-x: scroll;
  overflow-y: hidden;
  padding: .9rem .6rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  cursor: grab;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

.ctrack-viewport::-webkit-scrollbar {
  width: var(--thin-scrollbar);
  height: var(--thin-scrollbar);
}

.ctrack-viewport.is-panning {
  cursor: grabbing;
  user-select: none;
}

.ctrack-canvas {
  position: relative;
  width: calc(100% * var(--zoom));
  display: grid;
  gap: .5rem;
  grid-template-areas: "band" "axis" "roles" "marks";
}

.ctrack-layer {
  position: relative;
  min-width: 0;
}

.ctrack-bg {
  grid-area: 1 / 1 / -1 / -1;
  pointer-events: none;
  overflow: hidden;
  border-radius: 4px;
}

.ctrack-stripe {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--a) * 1%);
  width: calc(var(--b) * 1%);
  background: var(--soft);
  opacity: .6;
}

.ctrack-rule {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--a) * 1%);
  width: var(--bar-size);
  --rule-color: color-mix(in oklab, var(--accent), var(--accent-3) calc(var(--i) * 24%));
}

.ctrack-rule:before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--rule-color);
  opacity: .16;
}

.ctrack-rule em {
  display: none;
}

.ctrack-band {
  grid-area: band;
  height: 46px;
}

.ctrack-axis {
  grid-area: axis;
  height: 28px;
}

.ctrack-roles {
  grid-area: roles;
  height: calc(var(--role-rows) * var(--row-h));
}

.ctrack-marks {
  grid-area: marks;
  height: calc(var(--mark-rows) * var(--mark-row-h) + 26px);
  padding-top: .55rem;
  border-top: 1px solid var(--line);
}

.ctrack-marks {
  position: relative;
}

.ctrack:not([data-orient="v"]) .ctrack-marks {
  min-height: 95px;
}

.ctrack:not([data-lod="2"]) .ctrack-mark i {
  visibility: hidden;
}

.ctrack-era {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--a) * 1%);
  width: calc(var(--b) * 1%);
  display: grid;
  align-content: center;
  gap: .15rem;
  padding: .3rem .55rem;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  overflow: hidden;
  text-align: left;
  color: #fff;
  background: color-mix(in oklab, var(--accent), var(--accent-3) calc(var(--i) * 24%));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
  transition: filter .18s var(--ease);
}

.ctrack-era+.ctrack-era {
  margin-left: 0;
}

.ctrack-era:hover,
.ctrack-era.is-active {
  filter: brightness(1.12);
}

.ctrack-era em {
  font: 700 .68rem/1 var(--font-mono);
  letter-spacing: .08em;
  font-style: normal;
}

.ctrack-era span {
  font-size: .72rem;
  line-height: 1.2;
  opacity: .88;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ctrack-tick {
  position: absolute;
  left: calc(var(--a) * 1%);
  top: 0;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 3px;
  pointer-events: none;
}

.ctrack-tick i {
  display: block;
  width: 1px;
  height: 6px;
  background: var(--line);
}

.ctrack-tick[data-step="10"] i {
  height: 11px;
  background: var(--muted);
}

.ctrack-tick[data-step="5"] i {
  height: 8px;
}

.ctrack-tick b {
  font: 600 .6rem/1 var(--font-mono);
  color: var(--muted);
  letter-spacing: .04em;
}

.ctrack[data-lod="0"] .ctrack-tick:not([data-step="10"]) b,
.ctrack[data-lod="1"] .ctrack-tick[data-step="1"] b {
  visibility: hidden;
}

.ctrack-role {
  position: absolute;
  left: calc(var(--a) * 1%);
  width: calc(var(--b) * 1%);
  top: calc(var(--row) * var(--row-h));
  height: var(--bar-size);
  min-width: 5px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--role-color);
  cursor: pointer;
  text-align: left;
  transition: .18s var(--ease);
}

.ctrack-role[data-type="employee"] {
  --role-color: var(--accent);
}

.ctrack-role[data-type="contract"] {
  --role-color: var(--accent-3);
}

.ctrack-role[data-type="student"] {
  --role-color: #ffdd5a;
}

.ctrack-role b {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: .45rem;
  font: 600 .72rem/1.2 var(--font-sans);
  color: var(--ink);
  white-space: nowrap;
}

.ctrack-role.is-flip b {
  left: auto;
  right: 100%;
  margin: 0 .45rem 0 0;
}

.ctrack-role.is-crowded b {
  display: none;
}

.ctrack-role:hover,
.ctrack-role.is-active {
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--role-color), transparent 76%);
  z-index: 3;
}

.ctrack-role:hover b,
.ctrack-role.is-active b {
  display: block;
}

.ctrack-role.is-placeholder {
  background: repeating-linear-gradient(115deg, var(--role-color) 0 7px, color-mix(in oklab, var(--role-color), #fff 45%) 7px 14px);
}

.ctrack-role[data-accent="orange"] {
  --role-color: var(--accent-warm);
  background: repeating-linear-gradient(115deg, color-mix(in oklab, var(--accent-warm), #fff 48%) 0 7px, var(--accent-warm) 7px 14px);
}

.ctrack[data-lod="0"] .ctrack-role b {
  display: none;
}

.ctrack-mark {
  position: absolute;
  left: calc(var(--a) * 1%);
  top: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.ctrack-mark i {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: calc(var(--row) * var(--mark-row-h) + 12px);
  background: var(--line);
}

.ctrack-mark i:after {
  content: "";
  position: absolute;
  left: -2.5px;
  top: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-2);
}

.ctrack-mark b {
  position: absolute;
  left: 5px;
  top: calc(var(--row) * var(--mark-row-h) + 6px);
  font: 600 .68rem/1.2 var(--font-mono);
  color: var(--muted);
  white-space: nowrap;
}

.ctrack-mark.is-flip b {
  left: auto;
  right: 5px;
}

.ctrack-mark.is-crowded b {
  display: none;
}

.ctrack-mark:hover,
.ctrack-mark.is-active {
  z-index: 3;
}

.ctrack-mark:hover b,
.ctrack-mark.is-active b {
  color: var(--ink);
}

.ctrack-mark:hover i:after,
.ctrack-mark.is-active i:after {
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent-2), transparent 74%);
}

.ctrack[data-lod="0"] .ctrack-mark b,
.ctrack[data-lod="1"] .ctrack-mark b {
  display: none;
}

.ctrack-footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: .85rem;
}

.ctrack-legend {
  display: flex;
  gap: .9rem;
  flex-wrap: wrap;
  font: 600 .68rem/1 var(--font-mono);
  color: var(--muted);
}

.ctrack-legend span {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.ctrack-legend i {
  width: 14px;
  height: 8px;
  border-radius: 999px;
  background: var(--role-color);
}

.ctrack-legend [data-type="employee"] {
  --role-color: var(--accent);
}

.ctrack-legend [data-type="contract"] {
  --role-color: var(--accent-3);
}

.ctrack-legend [data-type="student"] {
  --role-color: #ffdd5a;
}

.ctrack-legend [data-type="milestone"] i {
  width: 8px;
  height: 8px;
  background: var(--accent-2);
}

.ctrack-stage {
  position: relative;
}

.ctrack-zoomnote {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  z-index: 4;
  align-items: center;
  gap: .4rem;
  padding: .35rem .8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in oklab, var(--paper), transparent 6%);
  color: var(--muted);
  font: 600 .74rem/1.2 var(--font-sans);
  box-shadow: 0 6px 18px rgba(8, 18, 35, .1);
  pointer-events: none;
}

.ctrack:not([data-lod="2"]) .ctrack-zoomnote {
  display: flex;
}

.ctrack-zoomnote svg {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
}

.ctrack-zoomnote {
  left: 50%;
  top: 50%;
  bottom: auto;
  transform: translate(-50%, -50%);
}

.ctrack[data-orient="h"] .ctrack-marks>.ctrack-zoomnote {
  top: calc(50% - 12px);
}

.ctrack[data-orient="v"] .ctrack-marks>.ctrack-zoomnote {
  left: 50%;
  right: auto;
  top: 50%;
  bottom: auto;
  width: max-content;
  max-width: calc(100% - 1rem);
  transform: translate(-50%, -50%);
  flex-direction: row;
  gap: .4rem;
  padding: .35rem .8rem;
  white-space: nowrap;
}

.ctrack-detail {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-top: .9rem;
  padding: .9rem 1rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  background: #fff;
  color: #12161c;
}

.ctrack-detail-text {
  flex: 1 1 auto;
  min-width: 0;
}

.ctrack-detail-image {
  flex: 0 0 auto;
  width: auto;
  max-width: 9rem;
  max-height: 5rem;
  object-fit: contain;
}

.ctrack-detail .kicker {
  display: block;
  margin-bottom: .2rem;
}

.ctrack-detail .era-label-s {
  text-transform: lowercase;
}

.ctrack-detail strong {
  font-size: 1rem;
}

.ctrack-detail-meta {
  font: 600 .7rem/1 var(--font-mono);
  color: var(--muted);
  letter-spacing: .04em;
}

.ctrack-detail p {
  font-size: .84rem;
  color: var(--muted);
  margin-top: .25rem;
  max-width: 72ch;
  min-height: calc(4 * 1.5em);
}

/* Vertical orientation (narrow screens) */
.ctrack[data-orient="v"] .ctrack-viewport {
  overflow-x: hidden;
  overflow-y: scroll;
  height: min(72vh, 640px);
  padding: .6rem .2rem .6rem .4rem;
}

.ctrack[data-orient="v"] .ctrack-canvas {
  width: 100%;
  height: calc(100% * var(--zoom));
  gap: 0;
  grid-template-areas: "band roles axis marks";
  grid-template-columns: 12px calc(41% + 20px) 42px minmax(0, 1fr);
}

.ctrack[data-orient="v"] .ctrack-band,
.ctrack[data-orient="v"] .ctrack-axis,
.ctrack[data-orient="v"] .ctrack-roles,
.ctrack[data-orient="v"] .ctrack-marks {
  height: auto;
}

.ctrack[data-orient="v"] .ctrack-marks {
  padding: 0;
  border-top: 0;
  border-left: 1px solid var(--line);
}

.ctrack[data-orient="v"] .ctrack-roles {
  padding-right: 0;
}

.ctrack[data-orient="v"] .ctrack-stripe {
  left: 0;
  right: 0;
  width: auto;
  top: calc(var(--a) * 1%);
  bottom: auto;
  height: calc(var(--b) * 1%);
}

.ctrack[data-orient="v"] .ctrack-rule {
  left: 0;
  right: 0;
  width: auto;
  top: calc(var(--a) * 1%);
  bottom: auto;
  height: var(--bar-size);
}

.ctrack[data-orient="v"] .ctrack-era {
  left: 0;
  right: 0;
  width: auto;
  top: calc(var(--a) * 1%);
  bottom: auto;
  height: calc(var(--b) * 1%);
  padding: 0;
  border-radius: 3px;
  overflow: visible;
}

.ctrack[data-orient="v"] .ctrack-era span {
  display: none;
}

.ctrack[data-orient="v"] .ctrack-era em {
  position: absolute;
  left: calc(100% + 5px);
  top: 1px;
  font-size: .66rem;
  color: color-mix(in oklab, var(--accent), var(--accent-3) calc(var(--i) * 24%));
  white-space: nowrap;
}

.ctrack[data-orient="v"] .ctrack-tick {
  left: 0;
  top: calc(var(--a) * 1%);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
}

.ctrack[data-orient="v"] .ctrack-tick i {
  width: 6px;
  height: 1px;
}

.ctrack[data-orient="v"] .ctrack-tick[data-step="10"] i {
  width: 11px;
}

.ctrack[data-orient="v"] .ctrack-tick[data-step="5"] i {
  width: 8px;
}

.ctrack[data-orient="v"] .ctrack-role {
  left: auto;
  right: calc(var(--row) * 12px + 10px);
  width: 7px;
  top: calc(var(--a) * 1%);
  height: calc(var(--b) * 1%);
  min-height: 6px;
  border-radius: 999px;
}

.ctrack[data-orient="v"] .ctrack-role b {
  left: auto;
  right: calc(100% + 8px);
  top: 0;
  transform: none;
  margin: 0;
  width: max-content;
  max-width: calc(min(34vw, 120px) - var(--row) * 12px);
  text-align: right;
  white-space: normal;
  font-size: .68rem;
}

.ctrack[data-orient="v"] .ctrack-mark {
  left: 0;
  right: 0;
  top: calc(var(--a) * 1%);
  width: auto;
  height: auto;
}

.ctrack[data-orient="v"] .ctrack-mark i {
  width: calc(var(--row) * 14px + 24px);
  height: 1px;
}

.ctrack[data-orient="v"] .ctrack-mark i:after {
  left: -3px;
  top: -2.5px;
}

.ctrack[data-orient="v"] .ctrack-mark b {
  left: calc(var(--row) * 14px + 28px);
  top: -.62em;
  max-width: calc(100% - (var(--row) * 14px + 30px));
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: .64rem;
}

@media (prefers-reduced-motion: reduce) {

  .ctrack-era,
  .ctrack-role {
    transition: none;
  }
}


.island-lab {
  position: relative;
  isolation: isolate;
  background-color: #060d14;
  background-image: url("images/lab_bg_medium.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  border-top: 1px solid rgba(255, 255, 255, .06);
}

.island-lab[data-effective-theme="light"],
.island-lab[data-effective-theme="dark"] {
  background-color: var(--paper);
  background-image: url("images/lab_bg_medium.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  border-top-color: var(--line);
}

.island-lab::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: rgba(3, 9, 15, .18);
  content: "";
}

.island-lab>.container {
  position: relative;
  z-index: 1;
}

.island-lab .section-heading {
  margin-bottom: 1rem;
}

.lab-app {
  height: auto;
  overflow: hidden;
  border: 1px solid rgba(100, 130, 155, .3);
  border-radius: 4px;
  padding: 1rem;
  background: rgba(3, 9, 15, .6);
  box-shadow: 0 0 0 1px rgba(0, 196, 255, .04), 0 18px 50px rgba(0, 0, 0, .22);
}

.lab-app {
  display: grid;
  grid-template-areas: "detail" "rail";
  gap: 1rem;
}

.lab-rail {
  grid-area: rail;
  display: flex;
  gap: .75rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding: .15rem .2rem .7rem;
  margin: 0 -.2rem;
  scroll-snap-type: x mandatory;
}

.lab-rail::-webkit-scrollbar {
  display: none;
}

.lab-card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  padding: .65rem;
  border: 1px solid rgba(113, 141, 161, .3);
  border-radius: 6px;
  background: #09131d;
  color: #eaf1f4;
  text-align: left;
  cursor: pointer;
  scroll-snap-align: start;
  transition: border-color .18s var(--ease), transform .18s var(--ease);
}

.lab-card:hover,
.lab-card.is-selected {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.lab-card.is-selected {
  box-shadow: 0 0 0 1px var(--accent), 0 8px 24px rgba(28, 108, 255, .12);
}

.lab-number {
  position: absolute;
  top: .55rem;
  left: .65rem;
  z-index: 1;
  font: 700 .66rem/1 var(--font-mono);
  color: #d9e5e9;
}

.lab-thumb {
  display: block;
  aspect-ratio: 1.45;
  overflow: hidden;
  margin: -.65rem -.65rem .65rem;
  background: #0e1b25;
}

.lab-thumb img,
.lab-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lab-card .kicker {
  display: block;
  margin-bottom: .25rem;
  color: var(--accent-2);
  font-size: .54rem;
}

.lab-card strong {
  display: block;
  overflow: hidden;
  font-size: .76rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lab-detail {
  grid-area: detail;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 1.1rem;
  align-items: stretch;
  margin-top: 1rem;
  padding: 1.25rem;
  border: 1px solid rgba(103, 69, 255, .75);
  border-radius: 5px;
  background: #08111a;
}

.lab-detail .lab-media {
  grid-column: 1;
  grid-row: 1 / span 3;
}

.lab-detail .lab-copy {
  grid-column: 2;
  grid-row: 1;
}

.lab-detail .lab-facts,
.lab-detail .lab-status {
  display: none;
}

.lab-copy,
.lab-facts,
.lab-status {
  min-width: 0;
}

.lab-copy h3 {
  margin: .35rem 0 .6rem;
  color: #f5f8fa;
  font-size: 1.12rem;
  line-height: 1.1;
}

.lab-copy p,
.lab-facts p {
  color: #c3ced4;
  font-size: .72rem;
  line-height: 1.5;
}

.lab-copy .lab-fact-label {
  margin-top: 1rem;
}

.lab-copy .tag-row {
  margin: 0;
  gap: .25rem;
}

.lab-copy .tag-row span {
  padding: .2rem .35rem;
  border-color: rgba(22, 201, 216, .5);
  color: #bce8ea;
  font-size: .57rem;
}

.lab-facts {
  display: grid;
  gap: .85rem;
}

.lab-fact-label {
  display: block;
  margin-bottom: .35rem;
  color: var(--accent-2);
  font: 700 .57rem/1 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.lab-facts p {
  margin: 0;
}

.lab-status {
  display: grid;
  align-content: start;
  gap: .45rem;
}

.lab-status strong {
  color: #c9d8de;
  font-size: .72rem;
}

.lab-status .tag-row {
  margin: 0;
  gap: .25rem;
}

.lab-status .tag-row span {
  padding: .2rem .35rem;
  border-color: rgba(22, 201, 216, .5);
  color: #bce8ea;
  font-size: .57rem;
}

.lab-media {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: .7rem;
}

.lab-media-rotator {
  position: relative;
  width: 100%;
  aspect-ratio: 1.65;
  overflow: hidden;
}

.lab-media-rotator .lab-media-visual {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
}

.lab-media.is-hidden-action {
  opacity: 1;
  pointer-events: auto;
}

.lab-media.is-hidden-action .lab-action {
  display: none;
}

.lab-media>img {
  min-height: 100px;
  aspect-ratio: 1.65;
  border: 1px solid rgba(100, 130, 155, .35);
  border-radius: 4px;
  object-fit: cover;
}

.lab-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .55rem .7rem;
  border: 0;
  border-radius: 4px;
  background: var(--accent);
  color: white;
  font: 700 .64rem/1 var(--font-mono);
  text-transform: uppercase;
  cursor: pointer;
}

.lab-action.is-disabled,
.lab-action:disabled {
  background: #34414c;
  color: #9daab3;
  cursor: not-allowed;
  opacity: .72;
}

.lab-action span {
  font-size: 1rem;
}

.about-layout {
  display: grid;
  grid-template-columns: .72fr 1.3fr .75fr;
  column-gap: clamp(2rem, 5vw, 5rem);
  row-gap: .75rem;
  align-items: center;
}

.about-heading {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

.about-heading>div {
  max-width: none;
}

.about-portrait-column {
  min-width: 0;
}

@media (min-width: 781px) {
  .about-portrait-column,
  .about-copy {
    align-self: start;
  }

  .about-copy {
    position: relative;
    top: -1em;
  }
}

.portrait-frame {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.portrait-frame img {
  width: 100%;
  aspect-ratio: .78;
  object-fit: cover;
}

.about-drawer {
  position: relative;
  height: 855px;
  min-height: 0;
  max-height: 855px;
  opacity: 1;
  transform: translateY(0);
  overflow: hidden;
  background-color: #090b0c;
  background-image: url("images/drawer.png"), url("images/desk.png");
  background-position: center -112px, center 0px;
  background-size: auto 1036px, 1450px auto;
  background-repeat: no-repeat, repeat-x;
  color: #f4eee3;
  box-shadow: inset 0 12px 32px rgba(0, 0, 0, .28), 0 -18px 28px rgba(0, 0, 0, .2);
  transition: height .2s var(--ease), background-position .2s var(--ease), opacity .2s ease, transform .2s var(--ease), box-shadow .2s var(--ease);
}

.about-drawer .container {
  width: min(1178px, calc(100vw - 32px));
  max-width: none;
}

.about-drawer.drawer-closed {
  height: 78px;
  min-height: 78px;
  max-height: 78px;
  opacity: 1;
  transform: translateY(0);
  box-shadow: 0 -16px 28px rgba(0, 0, 0, .26);
  pointer-events: auto;
  transition: none;
  background-image: url("images/drawer.png"), url("images/desk.png");
  background-position: center -889px, center;
  background-size: auto 1036px, cover;
}

.about-drawer.drawer-closed .drawer-top,
.about-drawer.drawer-closed .drawer-workspace {
  visibility: hidden;
  opacity: 0;
}

.about-drawer .drawer-top,
.about-drawer .drawer-workspace {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .12s ease, transform .12s var(--ease), visibility 0s linear;
}

.about-drawer.drawer-opening .drawer-top,
.about-drawer.drawer-opening .drawer-workspace {
  opacity: .15;
  transform: translateY(8px);
  transition-delay: 0s;
}

.about-drawer.drawer-closing .drawer-top,
.about-drawer.drawer-closing .drawer-workspace {
  opacity: 0;
  transform: translateY(-10px);
  transition-delay: 0s;
}

.about-drawer.drawer-opening {
  height: 855px;
  min-height: 0;
  max-height: 855px;
  background-position: center -112px;
  transition-duration: .2s, .2s, .15s, .2s, .2s;
  box-shadow: inset 0 12px 32px rgba(0, 0, 0, .28), 0 -28px 40px rgba(0, 0, 0, .34);
}

.about-drawer.drawer-closing {
  height: 78px;
  min-height: 0;
  max-height: 855px;
  background-position: center -889px;
  transition-duration: .18s, .18s, 0s, .18s, .18s;
  opacity: 1;
  transform: none;
  box-shadow: inset 0 12px 32px rgba(0, 0, 0, .28), 0 -28px 40px rgba(0, 0, 0, .34);
}

.drawer-handle-tab {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 8px;
  display: block;
  width: 300px;
  height: 56px;
  transform: translateX(-50%);
  border: 0;
  background: transparent;
  color: transparent;
  cursor: pointer;
}

.drawer-handle-tab:focus,
.drawer-handle-tab:focus-visible {
  outline: none;
  box-shadow: none;
}

.drawer-handle-tab span,
.drawer-handle-tab i {
  display: none;
}

.drawer-top {
  border: 0;
  background: transparent;
  padding: 2rem 0 1.8rem;
}

.drawer-top-inner {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
}

.drawer-kicker {
  color: var(--accent-warm);
  font: .68rem var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.sheet-category {
  color: var(--accent-2);
  font: .68rem var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.drawer-top h2 {
  color: #f4eee3;
  margin: .45rem 0 0;
}

.drawer-close {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 50%;
  background: rgba(9, 14, 20, .2);
  color: #f4eee3;
  font-size: 0;
  line-height: 1;
  cursor: pointer;
}

.drawer-close::before {
  content: "×";
  display: block;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1;
  transform: translateY(-.03em);
}

.drawer-close:hover {
  background: #f4eee3;
  color: #17130f;
}

.drawer-workspace {
  padding: 1.2rem 0 4rem;
}

.drawer-categories {
  display: flex;
  gap: .35rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 1.8rem;
}

.drawer-category {
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #d0c8ba;
  padding: .55rem .7rem;
  font-size: .72rem;
  cursor: pointer;
}

.drawer-category:hover,
.drawer-category.active {
  background: #2c3540;
  color: #fff;
}

.drawer-shuffle {
  margin-left: auto;
  color: var(--accent-warm);
}

.drawer-sheets {
  display: grid;
  contain: inline-size;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 5rem) / 5);
  gap: 1rem;
  align-items: start;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: .35rem .5rem 1.5rem;
  margin-inline: -.5rem;
  scroll-snap-type: x mandatory;
}

.drawer-sheets::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.drawer-sheet {
  scroll-snap-align: start;
}

.drawer-sheets .drawer-floating {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 390px;
  padding: 1rem;
  transform: rotate(var(--floating-tilt));
}

.drawer-floating img {
  display: block;
  max-width: 100%;
  max-height: 340px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 20px 16px rgba(0, 0, 0, .55));
}

.drawer-carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: -.5rem;
}

.drawer-carousel-arrow {
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 .14em;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 50%;
  background: transparent;
  color: #f4eee3;
  font: 700 1.8rem/1 var(--font-sans);
}

.drawer-carousel-arrow:active,
.drawer-carousel-arrow:hover {
  background: #f4eee3;
  color: #17130f;
}

.drawer-scroll-track {
  position: relative;
  width: min(360px, 50vw);
  height: 8px;
  border-radius: 999px;
  background: rgba(244, 238, 227, .22);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3);
}

.drawer-scroll-thumb {
  position: absolute;
  left: var(--thumb-position);
  top: 0;
  width: var(--thumb-size);
  height: 8px;
  min-width: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--accent-warm);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-warm) 18%, transparent);
  cursor: grab;
  transition: left .25s var(--ease), width .25s var(--ease);
}

.drawer-scroll-thumb:active {
  cursor: grabbing;
}

.drawer-sheet {
  min-width: 0;
  transform: rotate(calc((var(--sheet-index) - 1) * .7deg));
}

.drawer-spacer {
  visibility: hidden;
  pointer-events: none;
}

.drawer-sheet:nth-child(3n) {
  transform: rotate(-1.1deg);
}

.drawer-sheet:nth-child(4n) {
  transform: rotate(1.5deg);
}

.sheet-paper {
  position: relative;
  min-height: 390px;
  overflow: hidden;
  padding: 1.25rem 1.1rem;
  color: #25272a;
  background: #f2eadc;
  box-shadow: 0 12px 20px rgba(0, 0, 0, .38);
}

.sheet-paper::before {
  content: "";
  position: absolute;
  inset: .6rem;
  border: 1px solid rgba(89, 76, 58, .16);
  pointer-events: none;
}

.sheet-paper::after {
  content: "";
  position: absolute;
  right: 1.2rem;
  top: 2.1rem;
  width: 2.4rem;
  height: 1.8rem;
  border: 2px solid rgba(64, 79, 87, .35);
  border-left: 0;
  border-bottom: 0;
  transform: rotate(14deg);
  pointer-events: none;
}

.paper-style-1 {
  background: #eee2ca;
  transform: rotate(-.8deg);
}

.paper-style-2 {
  background: #e7dbc5;
  min-height: 420px;
}

.paper-style-3 {
  background: #f5eddf;
  clip-path: polygon(0 0, 100% 1%, 99% 97%, 93% 100%, 85% 98%, 76% 100%, 65% 98%, 54% 100%, 42% 98%, 31% 100%, 20% 98%, 8% 100%, 1% 97%);
}

.paper-style-4 {
  background: #e9dfd0;
  transform: rotate(1deg);
}

.paper-style-5 {
  background: #f0e5d1;
  min-height: 365px;
}

.paper-style-1::after {
  width: 3rem;
  height: 1.2rem;
  border: 0;
  background: radial-gradient(ellipse, rgba(111, 75, 42, .18), transparent 68%);
  filter: blur(2px);
  transform: rotate(-12deg);
}

.paper-style-2::after {
  content: "✦";
  border: 0;
  color: #7562ba;
  font: 1.7rem/1 var(--font-mono);
  transform: rotate(-12deg);
}

.paper-style-3::after {
  content: "~  /";
  border: 0;
  color: #477d75;
  font: 1.2rem/1 var(--font-mono);
  transform: rotate(-18deg);
}

.paper-style-4::after {
  width: 2.8rem;
  height: 2rem;
  border: 0;
  background: radial-gradient(circle at 35% 35%, rgba(108, 73, 45, .22), transparent 48%), radial-gradient(circle at 70% 65%, rgba(108, 73, 45, .14), transparent 50%);
  transform: rotate(8deg);
}

.paper-style-5::after {
  content: "☆";
  border: 0;
  color: #ad7154;
  font: 1.8rem/1 var(--font-mono);
  transform: rotate(16deg);
}

.paper-style-0 {
  background-color: #f2eadc;
  background-image: repeating-linear-gradient(to bottom, transparent 0 29px, rgba(91, 112, 121, .12) 30px, transparent 31px);
}

.paper-style-1 {
  background-color: #eee2ca;
  background-image: radial-gradient(ellipse at 82% 15%, rgba(151, 99, 50, .22), transparent 18%), repeating-linear-gradient(0deg, transparent 0 31px, rgba(91, 112, 121, .1) 32px, transparent 33px);
}

.paper-style-2 {
  background: #e7dbc5;
  background-image: radial-gradient(circle at 12% 82%, rgba(113, 72, 39, .18), transparent 16%), radial-gradient(circle at 88% 30%, rgba(113, 72, 39, .12), transparent 13%);
}

.paper-style-2 .sheet-paper img {
  border: 4px solid #d5c6aa;
  transform: rotate(-1.5deg);
  box-shadow: 4px 6px 0 rgba(71, 52, 34, .16);
}

.paper-style-3 {
  background-color: #f5eddf;
  background-image: repeating-linear-gradient(0deg, transparent 0 35px, rgba(91, 112, 121, .09) 36px, transparent 37px);
}

.paper-style-4 {
  background: #263038;
  color: #e9e2d6;
  border: 1px solid #46535b;
}

.paper-style-4 .sheet-category {
  color: #79d7d2;
}

.paper-style-4 h3,
.paper-style-4 p,
.paper-style-4 li {
  color: #e9e2d6;
}

.paper-style-4 img {
  border: 1px solid #61717a;
  filter: saturate(.8) contrast(1.08);
}

.paper-style-4::before {
  border-color: rgba(224, 238, 235, .2);
}

.paper-style-5 {
  background-color: #f0e5d1;
  background-image: radial-gradient(ellipse at 18% 25%, rgba(145, 91, 47, .16), transparent 16%), radial-gradient(ellipse at 76% 76%, rgba(145, 91, 47, .13), transparent 20%);
}

.paper-style-5 .sheet-paper img {
  border-radius: 2px 14px 3px 10px;
}

.paper-style-1::before {
  border-style: dashed;
}

.paper-style-3::before {
  inset: .45rem .8rem .85rem .5rem;
  transform: rotate(-.6deg);
}

.paper-style-4::after {
  content: "[ ]";
  width: auto;
  height: auto;
  border: 0;
  color: #78d8d0;
  font: 1.15rem/1 var(--font-mono);
  transform: rotate(-8deg);
}

.sheet-paper h3 {
  position: relative;
  margin: .35rem 0 .8rem;
  font: 600 1.35rem/1.05 "Segoe Print", "Bradley Hand", cursive;
}

.sheet-paper img {
  position: relative;
  width: 100%;
  aspect-ratio: 1.45;
  object-fit: cover;
  margin-bottom: .85rem;
  filter: saturate(.9) contrast(.95);
}

.sheet-paper ul {
  position: relative;
  margin: .4rem 0 .8rem;
  padding-left: 1.1rem;
  font-size: .74rem;
  line-height: 1.55;
}

.sheet-paper p {
  position: relative;
  margin: .8rem 0 0;
  font: .82rem/1.45 "Segoe Print", "Bradley Hand", cursive;
}

.sheet-category {
  position: relative;
  color: #4e6471;
  font-size: .58rem;
}

.sheet-corner {
  position: absolute;
  right: 1rem;
  bottom: .8rem;
  color: #765eff;
  font: 1.2rem var(--font-mono);
}

.about-copy p {
  color: #4e5358;
}

html[data-theme="dark"] .about-copy p {
  color: #c0c5c9;
}

.hand-notes {
  display: flex;
  justify-content: center;
  gap: .55rem;
  flex-wrap: wrap;
  margin: 1.6rem auto 0;
}

.hand-notes span {
  display: inline-block;
  background: #fffdf6;
  color: #303337;
  padding: .45rem .7rem;
  border-radius: 3px;
  box-shadow: 0 5px 16px rgba(0, 0, 0, .08);
}

.hand-notes .hand-note-1 {
  transform: rotate(-3deg);
}

.hand-notes .hand-note-2 {
  transform: rotate(2.5deg);
  margin-top: -.3rem;
  margin-left: .15rem;
}

.hand-notes .hand-note-3 {
  transform: rotate(-1.5deg);
  margin-top: .45rem;
  margin-left: -.05rem;
}

.interest-list h3 {
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .76rem;
}

.interest-list ul {
  list-style: none;
  padding: 0;
  margin: 1.3rem 0 0;
  display: grid;
  gap: .75rem;
}

.interest-list li {
  display: flex;
  gap: .65rem;
  align-items: center;
  font-size: .86rem;
}

.interest-list li span {
  color: var(--accent);
}

.next-section {
  position: relative;
  overflow: hidden;
  color: #f4f8fb;
  background: var(--gradient);
  padding: clamp(4.5rem, 8vw, 8rem) 0;
}

.next-section[data-section-theme="light"] {
  color: var(--ink);
  background: var(--paper);
}

.next-section[data-section-theme="light"]:before,
.next-section[data-section-theme="light"] .next-landscape {
  display: none;
}

.next-section:before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 75% 20%, rgba(255, 255, 255, .12), transparent 32%);
}

.next-landscape {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -65px;
  height: 420px;
  opacity: .26;
  background: linear-gradient(150deg, transparent 35%, #00152c 35.3% 48%, transparent 48.3%), linear-gradient(25deg, transparent 45%, #00152c 45.3% 59%, transparent 59.3%);
  background-size: 380px 420px, 460px 420px;
  -webkit-mask-image: linear-gradient(to top, black 0%, black 22%, rgba(0, 0, 0, .72) 48%, transparent 100%);
  mask-image: linear-gradient(to top, black 0%, black 22%, rgba(0, 0, 0, .72) 48%, transparent 100%);
}

.next-layout {
  position: relative;
  display: grid;
  grid-template-columns: 1.2fr .7fr;
  gap: 4rem;
  align-items: center;
}

.next-layout h2 {
  color: white;
}

.next-layout p {
  color: #d7e4ed;
}

.inverse-index {
  color: white;
  border-color: rgba(255, 255, 255, .45);
  background: rgba(255, 255, 255, .14);
}

.contact-actions {
  display: grid;
  gap: .7rem;
}

.contact-button {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: .95rem 1.05rem;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 5px;
  font-weight: 800;
  font-size: .84rem;
  transition: .2s ease;
}

.next-section[data-section-theme="light"] .next-layout h2 {
  color: var(--ink);
}

.next-section[data-section-theme="light"] .next-layout p {
  color: var(--muted);
}

.next-section[data-section-theme="light"] .inverse-index {
  color: var(--ink);
  border-color: var(--line);
  background: var(--card);
}

.next-section[data-section-theme="light"] .contact-button {
  border-color: var(--line);
  color: var(--ink);
}

.next-section[data-section-theme="light"] .contact-button:hover {
  background: var(--card);
}

.next-section[data-section-theme="light"] .contact-button-label img {
  filter: none;
  opacity: .82;
}

.contact-button-label {
  display: flex;
  align-items: center;
  gap: .6rem;
}

.contact-button-label img {
  width: 18px;
  height: 18px;
  filter: invert(1);
  opacity: .92;
}

.contact-button:hover {
  background: rgba(255, 255, 255, .1);
  transform: translateX(4px);
}

.needs-update {
  font: 800 .62rem/1 var(--font-mono);
  background: #ffdd5a;
  color: #231e00;
  padding: .25rem .35rem;
  border-radius: 3px;
}

.site-footer {
  height: var(--site-bar-height);
  padding: .8rem var(--site-bar-gutter);
  background: #03070b;
  color: #c6d0d8;
  font-size: .73rem;
}

.footer-layout {
  width: auto;
  height: 100%;
  min-width: 0;
  max-width: none;
  margin-inline: 0;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  transform: translateY(-2px);
}

.footer-layout>div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.footer-layout span {
  color: #75818c
}

.footer-role-line {
  margin-top: .25rem;
}

.footer-role-break {
  display: none;
}

.top-button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2rem;
  padding: .3rem .5rem;
  border: 1px solid currentColor;
  border-radius: 3px;
  background: transparent;
  color: inherit;
  font: 700 .68rem/1 var(--font-mono);
  text-transform: lowercase;
  transition: color .18s var(--ease), border-color .18s var(--ease), background-color .18s var(--ease);
}

.top-button:hover {
  border-color: var(--accent-2);
  background: transparent;
  color: var(--accent-2);
}

/* THINKING PAGE */
.thinking-hero {
  padding: 10rem 0 4.5rem;
  background: linear-gradient(155deg, var(--hero-a), var(--hero-b));
  color: #f6f9fb;
}

.thinking-hero h1 {
  font-size: clamp(4rem, 8vw, 8rem);
  line-height: .9;
  letter-spacing: -.06em;
  margin: .8rem 0 1.5rem;
}

.back-link {
  display: inline-block;
  color: #9bb0c2;
  font-weight: 700;
  font-size: .8rem;
  margin-bottom: 2rem;
}

.article-index {
  display: grid;
}

.article-index-item {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--line);
}

.article-index-number {
  font-family: var(--font-mono);
  color: var(--accent);
}

.article-index-item strong {
  display: block;
  font-size: 1.05rem;
}

.article-index-item small {
  display: block;
  color: var(--muted);
  margin-top: .25rem;
}

.article-index-item b {
  color: var(--accent);
}

.long-article {
  scroll-margin-top: 76px;
  padding: var(--section-pad) 0;
  background: var(--paper);
}

.long-article.article-tint {
  background: var(--soft);
}

.article-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 760px);
  justify-content: center;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}

.article-side {
  position: sticky;
  top: 105px;
}

.article-side img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  margin: 1rem 0;
}

.article-number {
  font: 800 .75rem var(--font-mono);
  color: var(--accent);
}

.article-side a {
  color: var(--accent);
  font-weight: 700;
  font-size: .78rem;
}

.article-copy h2 {
  font-size: clamp(2.4rem, 4vw, 4.5rem);
}

.article-summary {
  font-size: 1.15rem;
  color: var(--muted);
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
}

.article-body p {
  font-size: 1.02rem;
  line-height: 1.8;
  color: color-mix(in srgb, var(--ink) 82%, var(--muted));
}

.article-body p:first-child {
  font-size: 1.25rem;
  color: var(--ink);
}

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

@media (max-width: 1050px) {
  .hero {
    --hero-gutter: clamp(2rem, 7vw, 4rem);
    min-height: calc(760px + var(--header-offset, 0px));
    background-image: url("images/light_trail_medium.png");
  }

  .hero-shell {
    min-height: calc(760px + var(--header-offset, 0px));
  }

  .hero-copy {
    width: min(48%, 500px);
  }

  .work-main {
    min-height: 0;
  }

  .work-copy {
    padding: 1.5rem;
  }

  .work-copy h3 {
    font-size: 2rem;
  }

  .work-duo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1rem;
    row-gap: .65rem;
  }

  .work-duo>div:last-child {
    grid-column: 1 / -1;
    border-left: 0;
    padding-left: 0;
    padding-top: .85rem;
  }

  .work-bottom {
    grid-template-columns: 1fr 1fr;
  }

  .work-bottom>div:last-child {
    grid-column: auto;
  }

  .thinking-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .thinking-card:first-child {
    grid-column: 1/-1;
  }

  .thinking-card:last-child {
    grid-column: auto;
  }

  .lab-rail {
    gap: .5rem;
  }

  .lab-app {
    padding: .8rem;
  }

  .lab-rail {
    gap: .4rem;
  }

  .lab-card {
    padding: .5rem;
  }

  .lab-thumb {
    margin: -.5rem -.5rem .5rem;
  }

  .lab-detail {
    grid-template-columns: 1.15fr 1fr .85fr 1.1fr;
    gap: .65rem;
    margin-top: .7rem;
    padding: .8rem;
  }

  .lab-copy h3 {
    font-size: 1rem;
  }

  .lab-copy p,
  .lab-facts p,
  .lab-status strong {
    font-size: .66rem;
  }

  .lab-media {
    display: flex;
  }

  .lab-media>img {
    min-height: 70px;
  }

  .about-layout {
    grid-template-columns: .8fr 1.2fr;
  }

  #about::before {
    display: none;
  }

  .interest-list {
    grid-column: 1/-1;
    margin-top: 1rem;
    text-align: center;
  }

  .interest-list ul {
    width: max-content;
    max-width: 100%;
    margin-inline: auto;
    grid-template-columns: repeat(3, max-content);
    column-gap: clamp(1.25rem, 5vw, 3.5rem);
    justify-items: start;
  }

  .drawer-sheets {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 781px) {

  .drawer-sheet,
  .sheet-paper.paper-style-1,
  .sheet-paper.paper-style-4 {
    transform: none;
  }

  .ctrack-viewport {
    min-height: 365px;
  }
}

@media (min-width: 781px) and (max-width: 1099px) {
  .drawer-top {
    padding: 1.5rem 0 1.2rem;
  }

  .drawer-top-inner {
    align-items: center;
  }

  .drawer-top h2 {
    font-size: 2.1rem;
  }

  .drawer-close {
    flex: 0 0 2.5rem;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    overflow: hidden;
    font-size: 0;
    border-radius: 50%;
  }

  .drawer-close::before {
    content: "×";
    font-size: 1.65rem;
    line-height: 1;
  }

  .drawer-categories {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    white-space: nowrap;
    padding-bottom: .35rem;
    margin-bottom: 1rem;
  }

  .drawer-categories::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  .drawer-category {
    flex: 0 0 auto;
  }

  .drawer-shuffle {
    margin-left: .35rem;
  }
}

@media (min-width: 1100px) and (max-width: 1399px) {
  .drawer-sheets {
    grid-auto-columns: calc((100% - 4rem) / 4);
  }
}

@media (min-width: 820px) and (max-width: 1099px) {
  .drawer-sheets {
    grid-auto-columns: calc((100% - 3rem) / 3);
  }
}

@media (min-width: 600px) and (max-width: 819px) {
  .drawer-sheets {
    grid-auto-columns: calc((100% - 1rem) / 2);
  }
}

@media (min-width: 781px) and (max-width: 1050px) {
  .lab-card {
    flex: 1 0 calc((100% - 3rem) / 5);
  }
}

@media (min-width: 781px) and (max-width: 900px) {
  .lab-card {
    flex-basis: calc((100% - 2.25rem) / 4);
  }
}

@media (max-width: 780px) {
  :root {
    --section-pad: 4.5rem;
    --site-bar-height: 84px;
  }

  .site-header,
  .site-footer {
    padding-inline: var(--site-bar-gutter);
  }

  .site-footer {
    padding-left: var(--site-bar-gutter);
    padding-right: var(--site-bar-gutter);
  }

  .container,
  .container.narrow {
    width: min(calc(100% - 2rem), var(--max));
  }

  .footer-role-break {
    display: block;
  }

  .site-header {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .site-header .brand {
    min-width: 0;
    align-items: flex-start;
    justify-self: start;
  }

  .brand-role,
  .footer-role-line {
    display: none;
  }

  .nav-toggle {
    display: block;
    color: var(--ink);
  }

  .top-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 68px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    color: var(--ink);
    border-bottom: 1px solid var(--line);
    padding: .6rem 1rem 1rem;
  }

  .top-nav a {
    padding: .9rem .5rem;
    border-bottom: 1px solid var(--line);
  }

  .nav-open .top-nav {
    display: flex;
  }

  .theme-tools {
    justify-self: end;
  }

  .hero {
    min-height: 860px;
  }

  .hero {
    --hero-gutter: 1rem;
    min-height: calc(760px + var(--header-offset, 0px));
    padding: 0;
    background-image: url("images/light_trail_small.png");
  }

  .hero-shell {
    width: min(calc(100% - 2rem), var(--max));
    min-height: calc(760px + var(--header-offset, 0px));
  }

  .hero-copy {
    width: 100%;
  }

  .hero-copy h1 {
    max-width: 280px;
    font-size: 3rem;
  }

  .hero-copy .hero-intro {
    max-width: 290px;
    font-size: .9rem;
  }

  .hero-copy .button-row {
    margin-top: 1.5rem;
  }

  .hero h1 {
    max-width: 280px;
    font-size: 3rem;
  }

  .hero-intro {
    max-width: 275px;
    font-size: .82rem;
  }

  .intro-layout,
  .next-layout,
  .about-layout,
  .article-layout {
    grid-template-columns: 1fr;
  }

  .sketch-panel {
    max-width: 520px;
  }

  .thinking-grid {
    grid-template-columns: 1fr;
  }

  .work-section .section-heading {
    gap: 1rem;
  }

  .work-app {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .work-main {
    height: var(--work-main-height, auto);
  }

  .work-visual {
    flex: 0 0 auto;
    height: auto;
    aspect-ratio: 1.6;
  }

  .work-copy {
    flex: 0 0 auto;
    overflow: hidden;
  }

  .work-copy {
    padding: 1.25rem;
  }

  .work-copy {
    padding-bottom: 1.25rem;
  }

  .work-copy h3 {
    min-height: 1.3em;
    max-height: 1.3em;
    padding: 0;
    font-size: 1.65rem;
    line-height: 1.3;
  }

  .work-detail {
    min-height: 4.2em;
    max-height: 4.2em;
    font-size: .86rem;
    -webkit-line-clamp: 3;
  }

  .work-duo {
    min-height: 0;
    margin-top: .75rem;
    padding-top: 0;
    gap: 1rem;
  }

  .work-duo>div+div {
    padding-left: 0;
  }

  .work-duo>div:last-child {
    padding-left: 0;
  }

  .work-duo p {
    min-height: 5.8em;
    max-height: 5.8em;
    font-size: .74rem;
    -webkit-line-clamp: 4;
  }

  .work-proof-detail {
    font-size: .74rem;
  }

  .work-bottom {
    min-height: 0;
    gap: 1rem;
    margin-top: 1.2rem;
    padding-top: 0;
  }

  .work-selected {
    margin-top: 1.1rem;
    padding-top: 0;
  }

  .work-copy {
    padding-bottom: 1rem;
  }

  .work-index {
    grid-template-columns: repeat(var(--active-work-count, 4), minmax(0, 1fr));
  }

  .work-index button {
    padding: .75rem .65rem;
  }

  .work-index button strong {
    overflow: hidden;
    font-size: .7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .thinking-card:last-child {
    grid-column: auto;
    grid-row: auto;
  }

  .thinking-card>div {
    padding: 1rem;
  }

  .thinking-card h3 {
    font-size: 1rem;
  }

  .thinking-card p {
    font-size: .76rem;
  }

  .ctrack-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .ctrack-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: .25rem;
  }

  .ctrack-chips::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  .ctrack-chip {
    flex: 0 0 auto;
  }

  .ctrack-zoom {
    justify-content: space-between;
  }

  .ctrack-zoom-range {
    flex: 1 1 auto;
    width: auto;
  }

  .ctrack-footer {
    flex-direction: column;
    gap: .5rem;
  }

  .ctrack-detail {
    gap: .8rem;
  }

  .ctrack-detail-image {
    max-width: 4.5rem;
    max-height: 4rem;
  }

  .island-lab .section-heading {
    gap: 1rem;
  }

  .lab-app {
    height: min(540px, calc(100svh - 160px));
    min-height: 480px;
    padding: .7rem;
  }

  .lab-rail {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: .15rem .2rem .55rem;
    margin: 0 -.2rem;
  }

  .lab-rail::-webkit-scrollbar {
    display: none;
  }

  .lab-card {
    flex: 0 0 72vw;
    height: 138px;
    scroll-snap-align: start;
  }

  .lab-thumb {
    height: 76px;
    aspect-ratio: auto;
  }

  .lab-detail {
    grid-template-columns: 1fr 1fr;
    height: calc(100% - 160px);
    gap: .55rem;
    margin-top: .65rem;
    padding: .8rem;
    overflow: hidden;
  }

  .lab-copy {
    grid-column: 1/-1;
  }

  .lab-status {
    grid-column: 1/-1;
  }

  .lab-media {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .65rem;
  }

  .lab-media {
    align-items: center;
  }

  .lab-media>img {
    min-height: 0;
    height: 64px;
  }

  .lab-action {
    align-self: center;
  }

  .interest-list {
    text-align: center;
  }

  .interest-list ul {
    width: max-content;
    max-width: 100%;
    margin-inline: auto;
    grid-template-columns: repeat(2, max-content);
    column-gap: 1.25rem;
    justify-items: start;
  }

  .section-heading {
    align-items: start;
    flex-direction: column;
  }

  .drawer-top-inner {
    align-items: center;
    flex-direction: row;
    gap: 1rem;
  }

  .drawer-top {
    padding: 1.25rem 0 1rem;
  }

  .drawer-top-inner>div {
    min-width: 0;
  }

  .drawer-top h2 {
    font-size: 1.8rem;
  }

  .drawer-close {
    flex: 0 0 2.5rem;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    overflow: hidden;
    font-size: 0;
    border-radius: 50%;
  }

  .drawer-close::before {
    content: "×";
    font-size: 1.65rem;
    line-height: 1;
  }

  .drawer-categories {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    white-space: nowrap;
    padding-bottom: .35rem;
    margin-bottom: 1rem;
  }

  .drawer-categories::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  .drawer-category {
    flex: 0 0 auto;
  }

  .drawer-sheets {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0 .5rem 1.5rem;
    margin-inline: -.5rem;
  }

  .drawer-sheets::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  .drawer-sheet {
    flex: 0 0 calc(100% - 1rem);
    scroll-snap-align: center;
  }

  .drawer-spacer {
    display: none;
  }

  .drawer-scroll-track {
    width: min(220px, 58vw);
  }

  .drawer-category {
    font-size: .7rem;
  }

  .drawer-shuffle {
    margin-left: .35rem;
  }

  .color-reference-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .article-side {
    position: relative;
    top: 0;
    display: grid;
    grid-template-columns: 60px 1fr;
    align-items: center;
  }

  .article-side img {
    grid-column: 1/-1;
  }

  .article-side a {
    grid-column: 1/-1
  }
}

@media (max-width: 520px) {
  .theme-tools .palette-toggle {
    display: none;
  }

  .intro-layout {
    display: grid;
    row-gap: .85rem;
  }

  .intro-layout .section-copy {
    display: contents;
  }

  .intro-layout .section-copy.reveal {
    opacity: 1;
    transform: none;
  }

  .intro-layout .sketch-panel {
    order: 2;
  }

  .intro-layout .capability-grid {
    order: 3;
    margin-top: .55rem;
  }

  #about::before {
    top: .75rem;
    right: .75rem;
    width: 150px;
    opacity: .55;
  }

  #intro .section-index {
    margin-bottom: .6rem;
  }

  #intro h2 {
    margin-bottom: .2rem;
  }

  #intro .lead {
    margin-top: 0;
  }

  .hero h1 {
    font-size: 3rem;
  }

  .capability-grid {
    grid-template-columns: 1fr;
  }

  .interest-list {
    margin-top: 1rem;
    text-align: center;
  }

  .interest-list ul {
    justify-items: center;
  }

  .interest-list li {
    justify-content: center;
  }

  .work-app {
    gap: .75rem;
  }

  .work-copy {
    padding: 1rem;
    padding-bottom: .9rem;
  }

  .work-copy h3 {
    min-height: 1.3em;
    max-height: 1.3em;
    padding: 0;
    font-size: 1.45rem;
    line-height: 1.3;
  }

  .work-detail {
    min-height: 4.2em;
    max-height: 4.2em;
    font-size: .8rem;
    -webkit-line-clamp: 3;
  }

  .work-detail-full {
    display: none !important;
  }

  .work-detail-small {
    display: -webkit-box !important;
  }

  .work-duo {
    grid-template-columns: 1fr 1fr;
    min-height: 0;
    gap: .55rem;
  }

  .work-duo>div+div {
    padding-left: 0;
  }

  .work-duo>div:last-child {
    padding-left: 0;
    padding-top: .8rem;
  }

  .work-duo p {
    min-height: 5.8em;
    max-height: 5.8em;
    font-size: .68rem;
    -webkit-line-clamp: 4;
  }

  .work-proof-detail {
    font-size: .68rem;
  }

  .work-bottom {
    grid-template-columns: 1fr 1fr;
    min-height: 0;
  }

  .work-selected-grid {
    gap: .25rem;
  }

  .work-selected-item img {
    width: 1.4rem;
    height: 1.4rem;
  }

  .work-selected-item span {
    font-size: .58rem;
  }

  .work-bottom>div:last-child {
    min-width: 0;
  }

  .work-proof,
  .work-proof-detail {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .work-index button {
    padding: .65rem .45rem;
  }

  .lab-card {
    flex-basis: 82vw;
  }

  .lab-detail {
    min-height: 0;
  }

  .lab-detail {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    grid-template-rows: auto 1fr;
    align-items: start;
  }

  .lab-copy {
    grid-column: 1/-1;
  }

  .lab-facts {
    grid-column: 1;
    grid-row: 2;
  }

  .lab-status {
    grid-column: 1;
    grid-row: 3;
  }

  .lab-facts {
    gap: .6rem;
  }

  .lab-media {
    grid-column: 2;
    grid-row: 2 / span 2;
    display: flex;
    align-self: end;
    gap: .45rem;
  }

  .interest-list ul {
    width: max-content;
    max-width: 100%;
    margin-inline: auto;
    grid-template-columns: repeat(2, max-content);
    column-gap: 1.25rem;
    justify-items: start;
  }

  .interest-list li {
    justify-content: flex-start;
  }

  .color-reference-grid {
    grid-template-columns: 1fr;
  }

  .footer-layout {
    width: 100%;
    flex-direction: row;
    align-items: center;
  }

  .footer-layout > div {
    min-width: 0;
  }

  .top-button {
    flex: 0 0 auto;
    margin-left: auto;
  }

}

@media (min-width: 781px) and (max-width: 1099px) {
  .top-button {
    margin-right: 0;
  }
}

@media (max-width: 1099px) {
  .lab-detail {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-rows: auto;
  }

  .lab-detail .lab-media {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-self: stretch;
  }

  .lab-detail .lab-copy {
    grid-column: 2;
    grid-row: 1;
  }

  .lab-detail .lab-media > img {
    height: auto;
    min-height: 180px;
    aspect-ratio: 1.35;
  }
}

@media (max-width: 780px) {
  .lab-rail {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
  }

  .lab-card {
    flex: none;
    width: auto;
    height: auto;
  }

  .lab-detail {
    grid-template-columns: 1fr;
    height: auto;
    overflow: visible;
  }

  .lab-detail .lab-media,
  .lab-detail .lab-copy {
    grid-column: 1;
  }

  .lab-detail .lab-media {
    grid-row: 1;
  }

  .lab-detail .lab-copy {
    grid-row: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* Lab banner composition */
.lab-detail .lab-copy {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.lab-detail .lab-copy h3 {
  margin-bottom: .4rem;
}

.lab-detail .lab-copy .lab-fact {
  margin-top: .55rem;
}

.lab-detail .lab-copy .lab-fact-label {
  margin-top: 0;
  margin-bottom: .25rem;
}

.lab-detail .lab-copy .lab-fact p,
.lab-detail .lab-copy .lab-description {
  margin: 0;
  color: #c3ced4;
  font-size: .72rem;
  line-height: 1.45;
}

.lab-detail .lab-copy .lab-description {
  margin-top: .6rem;
}

.lab-status-summary strong {
  display: flex;
  align-items: center;
  gap: .4rem;
  color: #eef5f8;
  font-size: .72rem;
}

.lab-status-summary strong i {
  width: .58rem;
  height: .58rem;
  flex: 0 0 .58rem;
  border-radius: 50%;
  background: #55e0b5;
  box-shadow: 0 0 8px rgba(85, 224, 181, .55);
}

.lab-detail .lab-made-with p {
  color: #c3ced4;
}

.lab-detail .lab-media > img {
  min-height: 220px;
  aspect-ratio: 1.55;
}

@media (max-width: 1099px) {
  .lab-detail {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }

  .lab-detail .lab-media {
    grid-column: 1;
    grid-row: 1;
  }

  .lab-detail .lab-copy {
    grid-column: 1;
    grid-row: 2;
  }

  .lab-detail .lab-media > img {
    width: 100%;
    min-height: 0;
    aspect-ratio: 1.85;
  }
}

@media (max-width: 780px) {
  .lab-app {
    min-height: 0;
    height: auto;
  }

  .lab-detail {
    gap: .7rem;
    padding: .7rem;
  }

  .lab-detail .lab-copy h3 {
    font-size: 1rem;
  }

  .lab-detail .lab-copy .lab-fact p,
  .lab-detail .lab-copy .lab-description,
  .lab-status-summary strong,
  .lab-detail .lab-made-with p {
    font-size: .68rem;
  }

  .lab-detail .lab-media > img {
    aspect-ratio: 1.8;
  }
}

.lab-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1rem;
}

.lab-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 2.2rem;
  padding: .5rem .8rem;
  border: 1px solid transparent;
  border-radius: 5px;
  color: #eef5f8;
  font: 700 .64rem/1 var(--font-mono);
  cursor: pointer;
  transition: background .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}

.lab-cta:hover {
  transform: translateY(-1px);
}

.lab-cta span {
  font-size: .95rem;
  line-height: 0;
}

.lab-cta-primary {
  background: var(--accent);
  border-color: var(--accent);
}

.lab-cta-primary:hover {
  background: color-mix(in srgb, var(--accent) 82%, white);
}

.lab-cta-secondary {
  background: transparent;
  border-color: rgba(22, 201, 216, .55);
  color: #dcebef;
}

.lab-cta-secondary:hover {
  border-color: var(--accent-2);
  background: rgba(22, 201, 216, .08);
}

@media (max-width: 780px) {
  .lab-actions {
    margin-top: .8rem;
  }

  .lab-cta {
    min-height: 2rem;
    padding-inline: .7rem;
    font-size: .58rem;
  }
}

/* Keep the experiment navigation between its image and details. */
.lab-app {
  display: block;
}

.lab-detail {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  gap: 0;
  margin-top: 0;
  padding: 0;
  overflow: hidden;
}

.lab-detail .lab-media,
.lab-detail .lab-rail,
.lab-detail .lab-copy {
  grid-column: 1;
}

.lab-detail .lab-media {
  grid-row: 1;
  align-self: auto;
}

.lab-detail .lab-media > img {
  display: block;
  width: 100%;
  min-height: 0;
  aspect-ratio: 1.78;
  border: 0;
  border-radius: 0;
}

.lab-detail .lab-rail {
  grid-row: 2;
  display: flex;
  justify-content: stretch;
  gap: .45rem;
  overflow-x: auto;
  padding: .65rem .7rem;
  margin: 0;
  background: rgba(3, 9, 15, .72);
  scroll-snap-type: x mandatory;
}

.lab-detail .lab-card {
  flex: 1 1 0;
  min-width: 0;
  height: auto;
  padding: .65rem .8rem;
  border-color: rgba(22, 201, 216, .35);
  border-radius: 5px;
  background: rgba(3, 14, 25, .82);
  text-align: center;
  white-space: normal;
}

.lab-detail .lab-bench {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  color: #eef5f8;
}

.lab-detail .lab-bench-icon {
  display: grid;
  flex: 0 0 1.35rem;
  grid-template-columns: repeat(2, .42rem);
  gap: .18rem;
}

.lab-detail .lab-bench-icon i {
  width: .42rem;
  height: .42rem;
  border: 1.5px solid #eef5f8;
  border-radius: 2px;
}

.lab-detail .lab-card.is-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 0 18px rgba(103, 87, 255, .28);
}

.lab-detail .lab-number {
  position: static;
  display: inline;
  margin-right: .55rem;
  color: var(--accent-2);
  font-size: .72rem;
}

.lab-detail .lab-card strong {
  display: inline;
  overflow: visible;
  color: #eef5f8;
  font-size: .76rem;
  line-height: 1;
  white-space: nowrap;
}

.lab-detail .lab-copy {
  grid-row: 3;
  padding: 1.25rem;
}

@media (max-width: 780px) {
  .lab-detail .lab-rail {
    display: flex;
    padding: .5rem;
  }

  .lab-detail .lab-card {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    min-height: 3.5rem;
    padding: .4rem .3rem;
    font-size: .58rem;
  }

  .lab-detail .lab-bench {
    flex: 1 1 0;
    gap: .2rem;
  }

  .lab-detail .lab-number {
    margin-right: 0;
    font-size: .58rem;
  }

  .lab-detail .lab-card strong {
    display: block;
    max-width: 100%;
    font-size: .58rem;
    line-height: 1.15;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .lab-detail .lab-bench strong {
    display: block;
    min-width: 0;
  }

  .lab-detail .lab-bench-icon {
    flex: 0 0 auto;
    grid-template-columns: repeat(2, .34rem);
    gap: .14rem;
  }

  .lab-detail .lab-bench-icon i {
    width: .34rem;
    height: .34rem;
  }

}


.lab-detail-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .2rem;
  margin-top: 1.25rem;
  border-bottom: 1px solid rgba(22, 201, 216, .35);
}

.lab-detail-tab {
  position: relative;
  min-width: 0;
  padding: .55rem .35rem .65rem;
  border: 0;
  background: transparent;
  color: #dce8ed;
  font: 600 .66rem/1.15 var(--font-sans);
  cursor: pointer;
}

.lab-detail-tab::before {
  display: block;
  min-height: 1.15rem;
  margin-bottom: .3rem;
  color: #eef5f8;
  font: 700 1rem/1 var(--font-mono);
  content: "◉";
}

.lab-detail-tab[data-lab-detail-tab="status"]::before { content: "▥"; }
.lab-detail-tab[data-lab-detail-tab="focus"]::before { content: "◎"; }
.lab-detail-tab[data-lab-detail-tab="made-with"]::before { content: "≋"; }

.lab-detail-tab::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  background: transparent;
  content: "";
}

.lab-detail-tab.is-active {
  color: #ffffff;
}

.lab-detail-tab.is-active::before {
  color: var(--accent);
}

.lab-detail-tab.is-active::after {
  background: var(--accent);
  box-shadow: 0 0 12px rgba(103, 87, 255, .7);
}

.lab-detail-panels {
  min-height: 8rem;
  padding-top: 1rem;
}

.lab-detail-panel[hidden] {
  display: none;
}

.lab-detail-panel p {
  max-width: 42rem;
  margin: 0;
  color: #d1dce1;
  font-size: .86rem;
  line-height: 1.5;
}

.lab-detail-tabs {
  border-top: 1px solid rgba(100, 130, 155, .45);
}

.lab-detail-tab + .lab-detail-tab {
  border-left: 1px solid rgba(100, 130, 155, .3);
}

.lab-detail-panel .tag-row {
  margin: 0;
}

.lab-status-value {
  display: flex;
  align-items: center;
  gap: .45rem;
  color: #eef5f8;
  font-size: .82rem;
}

.lab-status-value i {
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  background: #55e0b5;
  box-shadow: 0 0 8px rgba(85, 224, 181, .55);
}

.lab-detail-panel .lab-status-text {
  margin: .6rem 0 0;
  color: #c3ced4;
  font-size: .7rem;
  line-height: 1.45;
}

.lab-quote {
  display: none;
  margin: 1rem 0 0;
  padding: 1rem 0 0 1.25rem;
  border-left: 1px solid rgba(22, 201, 216, .45);
}

.lab-quote > span {
  display: block;
  float: left;
  width: 3.15rem;
  margin: .15rem .7rem .2rem 0;
  color: var(--accent);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 4.6rem;
  font-weight: 900;
  line-height: .68;
  letter-spacing: -.08em;
  text-shadow: 0 0 16px rgba(103, 87, 255, .55);
}

.lab-quote p {
  margin: 0;
  color: #dce8ed;
  font-size: .9rem;
  font-style: italic;
  line-height: 1.5;
}

@media (min-width: 1100px) {
  .lab-detail {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
  }

  .lab-detail .lab-media {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .lab-detail .lab-rail {
    grid-column: 2;
    grid-row: 1;
  }

  .lab-detail .lab-copy {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
  }

  .lab-detail .lab-media > img {
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
  }

  .lab-quote {
    display: flow-root;
    float: right;
    width: 25%;
    margin-left: 2rem;
  }

  .lab-quote > span {
    float: none;
    margin: .15rem 0 .1125rem;
    line-height: .34;
  }

  .lab-detail-panels {
    width: 68%;
  }
}

@media (max-width: 1099px) {
  .lab-detail-tab {
    padding-inline: .2rem;
    font-size: 0;
  }

  .lab-detail-tab::before {
    min-height: 1rem;
    margin: 0;
    font-size: .82rem;
  }
}

@media (max-width: 780px) {
  .lab-detail-tab {
    font-size: 0;
  }

  .lab-detail-tabs {
    gap: 0;
    margin-top: 1rem;
  }

  .lab-detail-tab {
    padding-inline: .15rem;
    font-size: 0;
  }

  .lab-detail-tab::before {
    min-height: .9rem;
    font-size: .78rem;
  }

  .lab-detail-panels {
    min-height: 6rem;
    padding-top: .75rem;
  }

  .lab-detail-panel p {
    font-size: .68rem;
  }
}

@media (min-width: 1100px) {
  .lab-detail {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    border: 1px solid rgba(22, 201, 216, .3);
    border-radius: 8px;
    background: rgba(2, 13, 23, .78);
  }

  .lab-detail .lab-media {
    grid-column: 1;
    grid-row: 1;
  }

  .lab-detail .lab-media > img {
    width: 100%;
    height: auto;
    aspect-ratio: 2.65;
    object-fit: cover;
  }

  .lab-detail .lab-rail {
    grid-column: 1;
    grid-row: 2;
    padding: .65rem .7rem;
  }

  .lab-detail .lab-copy {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.55fr) minmax(9rem, .72fr);
    align-items: start;
    column-gap: 1.35rem;
    grid-column: 1;
    grid-row: 3;
    padding: 1.25rem;
    border-top: 1px solid rgba(22, 201, 216, .3);
  }

  .lab-copy-intro,
  .lab-copy-details,
  .lab-quote {
    min-width: 0;
  }

  .lab-copy-intro {
    grid-column: 1;
  }

  .lab-copy-details {
    grid-column: 2;
    min-width: 0;
    align-self: stretch;
    padding-left: 1.35rem;
    border-left: 1px solid rgba(22, 201, 216, .45);
  }

  .lab-copy-details .lab-detail-tabs {
    margin-top: 0;
  }

  .lab-detail-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .55rem .35rem .65rem;
    white-space: nowrap;
  }

  .lab-detail-tab::before {
    display: none;
  }

  .lab-detail-panels {
    min-height: 0;
    padding-top: 1rem;
  }

  .lab-detail-panel p {
    font-size: .78rem;
  }

  .lab-quote {
    display: block;
    grid-column: 3;
    align-self: stretch;
    width: auto;
    margin: 0;
    padding: 1rem 0 0 1.25rem;
  }
}

/* Font Awesome supplies the Lab iconography; keep the older pseudo-icon rules inert. */
.lab-detail-tab::before {
  display: none;
}

.lab-detail-tab > i {
  color: #eef5f8;
  font-size: .95rem;
  line-height: 1;
}

.lab-detail-tab.is-active > i {
  color: var(--accent);
}

.lab-detail .lab-bench-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1rem;
  flex: 0 0 1.35rem;
}

.lab-detail .lab-bench-icon i {
  width: auto;
  height: auto;
  border: 0;
  color: #eef5f8;
  font-size: 1rem;
  line-height: 1;
}

.lab-detail .lab-bench {
  cursor: default;
  transition: none;
}

.lab-detail .lab-bench:hover {
  border-color: rgba(22, 201, 216, .35);
  transform: none;
}

.lab-detail .lab-bench.is-selected,
.lab-detail .lab-bench.is-selected:hover {
  border-color: var(--accent);
  transform: none;
}

.lab-bench-panel {
  display: grid;
  grid-template-columns: minmax(15rem, .85fr) minmax(0, 1.5fr);
  gap: 1rem;
  margin: 0 .7rem .7rem;
  padding: 1rem;
  border: 1px solid rgba(22, 201, 216, .3);
  border-radius: 6px;
  background: rgba(2, 13, 23, .78);
}

.lab-bench-intro h3 {
  margin: .3rem 0 .65rem;
  color: #eef5f8;
  font-size: 1.08rem;
  line-height: 1.12;
}

.lab-bench-intro p,
.lab-bench-item p {
  margin: 0;
  color: #c3ced4;
  font-size: .7rem;
  line-height: 1.4;
}

.lab-bench-items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
}

.lab-bench-item {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  align-items: center;
  gap: .7rem;
  min-width: 0;
  padding: .65rem;
  border: 1px solid rgba(22, 201, 216, .3);
  border-radius: 6px;
  background: rgba(3, 14, 25, .82);
}

.lab-bench-item-icon {
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  border: 1px solid var(--accent);
  border-radius: 5px;
  color: var(--accent-2);
  font-size: 1.25rem;
  box-shadow: inset 0 0 14px rgba(103, 87, 255, .15);
}

.lab-bench-item.is-highlight {
  position: relative;
  isolation: isolate;
  border-color: #ff3bd4;
  background: linear-gradient(135deg, rgba(255, 59, 212, .34), rgba(29, 7, 48, .88));
  box-shadow: 0 0 0 1px rgba(255, 59, 212, .62), 0 0 22px rgba(255, 59, 212, .48), inset 0 0 26px rgba(255, 59, 212, .22);
}

@keyframes lab-bench-frame-pulse {
  to {
    --lab-frame-angle: 360deg;
  }
}

@property --lab-frame-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.lab-bench-item.is-highlight::before {
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from var(--lab-frame-angle), transparent 0 68%, #d8f24a 78%, #ff3bd4 84%, transparent 94% 100%);
  content: "";
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: lab-bench-frame-pulse 3.8s linear infinite;
}

.lab-bench-item.is-highlight > * {
  position: relative;
  z-index: 1;
}

.lab-bench-item.is-highlight .lab-bench-item-icon {
  border-color: #d8f24a;
  color: var(--accent-2);
  box-shadow: inset 0 0 16px rgba(216, 242, 74, .28), 0 0 7px rgba(216, 242, 74, .65), 0 0 18px rgba(216, 242, 74, .42);
}

.lab-bench-item.is-highlight h4 {
  color: #fff;
}

.lab-bench-item h4 {
  margin: 0 0 .25rem;
  color: #eef5f8;
  font-size: .72rem;
  line-height: 1.15;
}

@media (min-width: 781px) and (max-width: 1050px) {
  .lab-bench-items {
    margin-top: .75rem;
  }
}

@media (max-width: 780px) {
  .lab-bench-panel {
    grid-template-columns: 1fr;
    margin-inline: .5rem;
    padding: .7rem;
  }

  .lab-bench-intro h3 {
    font-size: .95rem;
  }

  .lab-bench-items {
    grid-template-columns: 1fr;
    margin-top: .75rem;
  }

  .lab-bench-item {
    grid-template-columns: 2.3rem minmax(0, 1fr);
    gap: .55rem;
    padding: .5rem;
  }

  .lab-bench-item-icon {
    width: 2.1rem;
    height: 2.1rem;
    font-size: 1rem;
  }
}

@media (max-width: 1099px) {
  .lab-media-rotator {
    aspect-ratio: 1.78;
  }

  .lab-media-rotator .lab-media-visual {
    transition: opacity var(--lab-transition-speed, .55s) var(--ease), transform var(--lab-transition-speed, .55s) var(--ease);
  }

  .lab-media-rotator.is-crossfade .lab-media-visual.is-next {
    opacity: 0;
  }

  .lab-media-rotator.is-slide .lab-media-visual.is-next {
    transform: translateX(100%);
  }

  .lab-media-rotator.is-slide .lab-media-visual.is-next.is-exiting {
    transform: translateX(-100%);
  }

  .lab-detail .lab-media-visual {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1.78;
    object-fit: cover;
  }

  .lab-quote {
    display: flow-root;
    width: 100%;
    box-sizing: border-box;
    margin-top: 1rem;
    padding: 1rem 0 0;
    border-top: 1px solid rgba(22, 201, 216, .45);
    border-left: 0;
  }
}

@media (min-width: 1100px) {
  .lab-media-rotator {
    aspect-ratio: 2.65;
  }

  .lab-media-rotator .lab-media-visual {
    transition: opacity var(--lab-transition-speed, .55s) var(--ease), transform var(--lab-transition-speed, .55s) var(--ease);
  }

  .lab-media-rotator.is-crossfade .lab-media-visual.is-next {
    opacity: 0;
  }

  .lab-media-rotator.is-slide .lab-media-visual.is-next {
    transform: translateX(100%);
  }

  .lab-media-rotator.is-slide .lab-media-visual.is-next.is-exiting {
    transform: translateX(-100%);
  }

  .lab-detail .lab-media-visual {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2.65;
    object-fit: cover;
  }

  .lab-quote {
    display: flow-root;
  }
}