/* ==========================================================================
   mrxx.info — design tokens carried over 1:1 from the Webflow site
   ========================================================================== */
:root {
  /* core palette (Webflow :root variables) */
  --main: #121212;
  --paragraphs: #595959;
  --border: #dbdbdb;
  --background: #f4f4f4;
  --white: #fff;
  --background-dark: #1e1e1e;
  --paragraphs-dark: #898989;
  --border-dark: #353535;
  /* case-study palette */
  --indigo: #22212e;
  --accent: #b663fe;
  --lavender: #e9d0ff;
  --mist: #f2f2f2;
  --ink: #212121;
  /* cover colours */
  --teal: #1dc0a3;
  --violet: #9879d0;
  --cobalt: #1438b3;
  --butter: #f1d95f;
  /* motion: same easing + durations as the original */
  --ease: cubic-bezier(.25, .46, .45, .94);
  --t: .3s;
  --sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --type: "Special Elite", "Courier Prime", "Courier New", monospace;
  --serif: Vollkorn, Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.6;
  color: var(--paragraphs);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img, video, iframe { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.skip {
  position: absolute; left: 16px; top: -60px; z-index: 2000;
  background: var(--white); color: var(--main); padding: 10px 16px; border-radius: 5px;
  font-weight: 600; text-decoration: none; transition: top var(--t) var(--ease);
}
.skip:focus { top: 12px; }

/* ---------- reveal on load / scroll (fade + rise, like the Webflow interaction) */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* ---------- navigation */
.nav {
  position: absolute; inset: 0 0 auto 0; z-index: 999;
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 7%;
}
.nav--fixed { position: fixed; }
.nav__logo img { height: 36px; width: auto; }
.nav__menu { display: flex; align-items: center; }
.nav__link {
  opacity: .6; color: var(--main); text-decoration: none;
  border-radius: 5px; margin: 0 3px; padding: 10px 18px;
  font-size: 16px; font-weight: 600; line-height: 1.3;
  transition: background-color var(--t) var(--ease), opacity var(--t) var(--ease);
}
.nav__link:hover, .nav__link[aria-current="page"] { opacity: 1; }
.nav__link:hover { background: var(--background); }
.nav--dark .nav__link { color: var(--white); }
.nav--dark .nav__link:hover { background: var(--background-dark); }
.nav__toggle { display: none; background: none; border: 0; padding: 10px; cursor: pointer; border-radius: 5px; }
.nav__toggle span { display: block; width: 24px; height: 2px; margin: 5px 0; background: var(--main); transition: transform var(--t) var(--ease), opacity var(--t) var(--ease); }
.nav--dark .nav__toggle span { background: var(--white); }

/* ---------- footer */
.footer { background: var(--main); color: var(--paragraphs-dark); padding: 35px 5%; text-align: center; font-size: 15px; }
.footer img { height: 21px; margin: 0 auto 10px; }
.footer a { opacity: .55; text-decoration: none; padding: 6px 10px; border-radius: 5px; transition: opacity var(--t) var(--ease), background-color var(--t) var(--ease); }
.footer a:hover { opacity: 1; background: var(--background-dark); }
.footer--light { background: var(--white); border-top: 1px solid var(--border); }
.footer--light a:hover { background: var(--background); }

/* ==========================================================================
   HOME — black / white split
   ========================================================================== */
.splash { background: var(--main); }
/* --sx: divider position in the viewport. --cx: the same line, measured from the column's left edge.
   Both default to the middle and are driven by js/site.js on pointer devices. */
.splash__stage { --sx: 50vw; position: relative; min-height: 100vh; padding: 10px 0 20px; overflow: hidden; }
.splash__stage::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--sx); background: var(--white); }
.splash__col { --cx: 50%; position: relative; width: min(90%, 1050px); margin: 0 auto; padding-bottom: 110px; }

.card {
  position: relative; display: block; aspect-ratio: 16 / 9;
  margin: 96px 0 0; border-radius: 3px; overflow: hidden;
  box-shadow: 0 20px 50px -13px #1212122e;
  background: #000; color: var(--white); text-decoration: none;
  container-type: inline-size;
}
.card:first-child { margin-top: 130px; }
.card__dark, .card__light { position: absolute; inset: 0; }
.card__dark img, .card__light img { width: 100%; height: 100%; object-fit: cover; }
/* the light layer is the full card, clipped at the divider */
.card__light { z-index: 2; clip-path: inset(0 calc(100% - var(--cx)) 0 0); }
.card__glow {
  position: absolute; inset: 0; z-index: 3; opacity: 0; pointer-events: none;
  background-image: linear-gradient(210deg, #fff0, #ffffff30);
  transition: opacity var(--t) var(--ease);
}
a.card:hover .card__glow, a.card:focus-visible .card__glow { opacity: 1; }

/* hero: identical text on both layers; black-on-white left of the line, white-on-black right of it */
.card--hero .card__light { background: var(--white); }
.card--hero .card__mask { position: absolute; inset: 0 50% 0 0; background: #000; }
.hero-type { position: absolute; left: 6cqw; top: 50%; transform: translateY(-50%); width: 36cqw; font-family: var(--type); color: var(--main); }
.card__mask .hero-type { color: var(--white); }
.hero-type h1, .hero-type .h { font-size: 2.05cqw; font-weight: 400; letter-spacing: .06em; margin-bottom: 1.4cqw; line-height: 1.6; }
.hero-type h1 i, .hero-type .h i { font-style: normal; }
.hero-type p:not(.h) { font-size: 1.55cqw; line-height: 1.95; max-width: 30ch; }
.hero-type .status { display: inline-flex; align-items: center; gap: .8cqw; margin-top: 1.6cqw; font-size: 1.3cqw; }
.hero-type .status::before { content: ""; width: .9cqw; height: .9cqw; border-radius: 50%; background: var(--teal); animation: pulse 2.4s var(--ease) infinite; }
@keyframes pulse { 50% { opacity: .25; } }

/* cards built in HTML, same geometry as the image covers */
.card__copy { position: absolute; inset: 0 50% 0 0; display: flex; flex-direction: column; justify-content: space-between; padding: 8.2cqw 4cqw 6cqw 6.2cqw; }
.card__copy .t { font-size: 3.7cqw; font-weight: 600; line-height: 1.32; letter-spacing: -.005em; max-width: 13ch; margin: 0; color: inherit; }
.card__copy .tag { font-size: 1.5cqw; font-weight: 600; letter-spacing: .02em; opacity: .9; }
.card--forest .card__light { background: #1f4d3f; }
.card__wire { position: absolute; inset: 0 0 0 50%; display: grid; place-items: center; }
.card__wire svg { width: 74%; height: auto; }
.card__caption { display: none; }

/* in progress: one quiet row that straddles the line */
.upnext { position: relative; display: grid; grid-template-columns: var(--cx) 1fr; margin-top: 96px; align-items: start; }
.upnext__label { font-family: var(--type); font-size: 15px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--main); margin: 4px 0 0; }
.upnext__list { list-style: none; margin: 0; padding: 0 0 0 clamp(20px, 4vw, 48px); }
.upnext__list li { padding: 0 0 18px; margin-bottom: 18px; border-bottom: 1px solid var(--border-dark); }
.upnext__list li:last-child { border: 0; margin: 0; }
.upnext__list b { display: block; color: var(--white); font-size: 18px; font-weight: 600; line-height: 1.35; }
.upnext__list span { font-size: 14px; color: var(--paragraphs-dark); }

/* nav on the home page inverts against whatever is behind it, so it survives the moving line */
@media (min-width: 768px) {
  .splash .nav--fixed { mix-blend-mode: difference; }
  .splash .nav--fixed .nav__logo img { filter: invert(1); }
  .splash .nav--fixed .nav__link:hover { background: transparent; }
}

/* ==========================================================================
   CASE STUDY
   ========================================================================== */
.cs { background: var(--white); }
.wrap { width: min(88%, 780px); margin: 0 auto; }
.wrap--wide { width: min(92%, 1050px); }
.band { padding: 96px 0; }
.band--indigo { background: var(--indigo); color: #d9d8e3; }
.band--black { background: #000; color: #cfcfcf; }
.band--mist { background: var(--mist); }
.cs .band--indigo h2, .cs .band--indigo h3, .cs .band--black h2, .cs .band--black h3 { color: var(--white); }

.cs-hero { background: var(--indigo); color: var(--white); padding: 150px 0 90px; }
.cs-hero .eyebrow { color: var(--accent); }
.cs-hero h1 { font-size: clamp(34px, 5vw, 48px); font-weight: 700; line-height: 1.18; letter-spacing: -.01em; }
.cs-hero .lede { margin-top: 18px; font-size: 20px; color: #c9c8d6; max-width: 46ch; }
.cs-hero figure { margin-top: 48px; border-radius: 20px; overflow: hidden; background: var(--white); }
.meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 64px; }
.cs .meta h2 { font-size: 20px; font-weight: 700; color: var(--accent); margin-bottom: 10px; }
.meta p, .meta li { font-size: 16px; line-height: 1.55; color: #e4e3ee; }
.meta ul { list-style: none; padding: 0; }
.meta li span { display: block; color: #a3a2b4; font-size: 14px; margin-bottom: 8px; }

.eyebrow { font-size: 16px; font-weight: 700; letter-spacing: .02em; color: var(--accent); margin-bottom: 10px; }
.cs h2 { font-size: clamp(28px, 3.6vw, 36px); font-weight: 700; line-height: 1.22; color: var(--ink); letter-spacing: -.01em; }
.cs h3 { font-size: 24px; font-weight: 700; line-height: 1.3; color: var(--ink); margin-top: 48px; }
.cs p { margin-top: 18px; }
.cs p.big { font-size: clamp(22px, 2.6vw, 28px); line-height: 1.45; font-weight: 600; color: var(--white); }
.cs p.big em { font-style: normal; color: #c89bf5; }
.cs .aside { font-family: var(--serif); font-style: italic; color: var(--accent); font-size: 19px; }
.cs ul.plain, .cs ol.plain { padding-left: 1.2em; margin-top: 18px; }
.cs ul.plain li, .cs ol.plain li { margin-top: 8px; }
.cs strong { color: var(--ink); font-weight: 600; }
.band--indigo strong, .band--black strong { color: var(--white); }
.cs a.inline { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--t) var(--ease); }
.cs a.inline:hover { color: var(--main); }

/* three-up summary in the black band */
.tldr { display: grid; gap: 56px; }
.cs .tldr h2 { font-size: 20px; font-weight: 500; color: var(--white); }

/* figures */
.fig { margin-top: 40px; }
.fig__frame { border-radius: 20px; overflow: hidden; background: #000; }
.fig__frame--light { background: var(--mist); border: 1px solid var(--border); }
.fig__frame img { width: 100%; height: auto; }
.fig figcaption { margin-top: 12px; font-size: 15px; color: #828282; }
.band--indigo .fig figcaption, .band--black .fig figcaption { color: #a3a2b4; }
.fig-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 40px; }
.fig-grid .fig { margin-top: 0; }
.embed { position: relative; aspect-ratio: 16 / 10; border-radius: 20px; overflow: hidden; background: #000; margin-top: 40px; }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* cards + grids */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 36px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px; }
.tile { background: var(--lavender); border-radius: 12.5px; padding: 26px 26px 28px; color: #4f4f4f; }
.cs .tile h3 { margin: 0 0 8px; font-size: 22px; color: var(--accent); }
.tile p { margin: 0; font-size: 16px; line-height: 1.5; }
.tile--plain { background: var(--white); border: 1px solid var(--border); }
.cs .tile--plain h3 { color: var(--ink); font-size: 19px; }
.tile--dark { background: #2d2c3c; color: #d9d8e3; }
.cs .tile--dark h3 { color: var(--white); font-size: 19px; }
.num { font-size: 32px; font-weight: 700; color: var(--accent); line-height: 1; margin-bottom: 12px; }
.rank { list-style: none; padding: 28px 32px; margin-top: 36px; background: var(--indigo); border-radius: 20px; color: var(--white); font-size: 20px; counter-reset: r; }
.rank li { counter-increment: r; padding: 6px 0; }
.rank li::before { content: "0" counter(r); color: var(--accent); margin-right: 14px; font-variant-numeric: tabular-nums; }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px; }
.stat b { display: block; font-size: 44px; font-weight: 700; line-height: 1.1; color: var(--ink); letter-spacing: -.02em; }
.band--indigo .stat b { color: var(--white); }
.stat span { font-size: 15px; }

/* AI / human routing diagram */
.route { margin-top: 40px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px 18px; align-items: stretch; font-size: 15px; }
.route__node { border: 1px solid var(--border-dark); border-radius: 12.5px; padding: 18px; background: #2d2c3c; }
.route__node b { display: block; color: var(--white); font-size: 17px; margin-bottom: 4px; }
.route__node .pct { font-size: 34px; font-weight: 700; line-height: 1; color: var(--teal); display: block; margin-bottom: 8px; }
.route__node .pct--warn { color: #ff7a7a; }
.route__arrow { align-self: center; color: var(--accent); font-size: 22px; }
.route__bar { grid-column: 1 / -1; height: 10px; border-radius: 99px; background: linear-gradient(90deg, var(--teal) 0 96%, #ff7a7a 96% 100%); }

/* decision table */
.table { width: 100%; border-collapse: collapse; margin-top: 36px; font-size: 16px; }
.table th, .table td { text-align: left; vertical-align: top; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--border); }
.table th { font-size: 14px; font-weight: 600; color: #828282; letter-spacing: .02em; }
.table td:first-child { color: var(--ink); font-weight: 600; width: 34%; }
.table-scroll { overflow-x: auto; }

.option { margin-top: 72px; }
.option:first-of-type { margin-top: 48px; }
.option h3 { font-size: 32px; margin-top: 0; }
.verdict { display: inline-block; margin-top: 16px; padding: 5px 12px; border-radius: 99px; font-size: 14px; font-weight: 600; background: var(--mist); color: var(--paragraphs); }
.verdict--yes { background: var(--lavender); color: #7a2fc4; }

.quote { margin-top: 40px; padding: 36px 40px; border-radius: 20px; background: var(--lavender); color: #3b2a4d; }
.quote p { margin: 0; font-size: 24px; line-height: 1.45; font-weight: 500; }
.quote footer { margin-top: 16px; font-size: 15px; color: #6f5a85; }

.next { display: block; background: var(--main); color: var(--white); text-decoration: none; padding: 80px 0; transition: background-color var(--t) var(--ease); }
.next:hover { background: var(--background-dark); }
.next small { display: block; color: var(--paragraphs-dark); font-size: 16px; margin-bottom: 8px; }
.next b { font-size: clamp(26px, 4vw, 40px); font-weight: 700; line-height: 1.2; }
.next b::after { content: " →"; display: inline-block; transition: transform var(--t) var(--ease); }
.next:hover b::after { transform: translateX(6px); }

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about { padding: 160px 0 110px; }
.about__grid { display: grid; grid-template-columns: 320px 1fr; gap: 64px; align-items: start; }
.about__img { width: 100%; border-radius: 3px; box-shadow: 0 20px 50px -13px #1212122e; }
.about h1 { font-size: clamp(34px, 5vw, 48px); font-weight: 700; color: var(--main); line-height: 1.15; letter-spacing: -.01em; }
.about h2 { font-size: 24px; font-weight: 700; color: var(--main); margin-top: 48px; }
.about p { margin-top: 18px; max-width: 60ch; }
.about ul { margin-top: 14px; padding-left: 1.2em; }
.about li { margin-top: 6px; }
.pill { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px; padding: 6px 14px; border-radius: 99px; background: var(--background); color: var(--main); font-size: 15px; font-weight: 600; }
.pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); animation: pulse 2.4s var(--ease) infinite; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.button {
  display: inline-block; background: var(--main); color: var(--white); text-decoration: none;
  border-radius: 5px; padding: 18px 34px; font-size: 18px; font-weight: 600; line-height: 1.3;
  transition: color .25s var(--ease), background-color .25s var(--ease);
}
.button:hover { background: var(--background); color: var(--main); }
.button--ghost { background: var(--background); color: var(--main); }
.button--ghost:hover { background: var(--main); color: var(--white); }

/* ==========================================================================
   RESPONSIVE (same breakpoints as Webflow: 991 / 767 / 479)
   ========================================================================== */
@media (max-width: 991px) {
  .nav { padding: 10px 5%; }
  .meta { grid-template-columns: repeat(2, 1fr); }
  .about__grid { grid-template-columns: 1fr; gap: 40px; }
  .about__img { max-width: 320px; }
}
@media (max-width: 767px) {
  body { font-size: 17px; }
  .nav__toggle { display: block; }
  .nav__menu {
    position: absolute; inset: 100% 0 auto 0; flex-direction: column; align-items: flex-start;
    padding: 10px 5% 30px; background: var(--white); box-shadow: 0 20px 20px #5959591f;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility var(--t);
  }
  .nav--dark .nav__menu { background: var(--main); box-shadow: 0 20px 20px #12121240; }
  .nav.open .nav__menu { opacity: 1; visibility: visible; transform: none; }
  .nav.open .nav__toggle span:first-child { transform: translateY(7px) rotate(45deg); }
  .nav.open .nav__toggle span:nth-child(2) { opacity: 0; }
  .nav.open .nav__toggle span:last-child { transform: translateY(-7px) rotate(-45deg); }
  .nav__link { opacity: 1; margin: 0; font-size: 20px; display: block; width: 100%; }
  .card { margin: 64px 0 0; }
  .card:first-child { margin-top: 90px; }
  .card__caption { display: block; position: relative; margin: 0; padding: 14px 16px 16px; background: var(--background-dark); border-radius: 0 0 3px 3px; font-size: 15px; line-height: 1.45; color: var(--paragraphs-dark); }
  .card__caption b { display: block; color: var(--white); font-size: 17px; margin-bottom: 2px; }
  .splash__col { padding-bottom: 80px; }
  .card--hero { aspect-ratio: 4 / 5; }
  .card--hero .card__light { clip-path: none; inset: 0 0 50% 0; }
  .card--hero .card__dark { inset: 50% 0 0 0; overflow: hidden; }
  .card--hero .card__dark img { width: 200%; max-width: none; margin-left: -100%; }
  .card--hero .card__mask { display: none; }
  .hero-type { left: 9%; width: 82%; }
  .hero-type h1 { font-size: 5cqw; margin-bottom: 3cqw; }
  .hero-type p:not(.h) { font-size: 4cqw; line-height: 1.7; max-width: none; }
  .hero-type .status { font-size: 3.4cqw; gap: 2cqw; margin-top: 3.5cqw; }
  .hero-type .status::before { width: 2.2cqw; height: 2.2cqw; }
  .upnext { grid-template-columns: 1fr; margin-top: 64px; background: var(--main); padding: 22px 18px; border-radius: 3px; }
  .upnext__label { color: var(--paragraphs-dark); margin-bottom: 16px; }
  .upnext__list { padding: 0; }
  .band { padding: 72px 0; }
  .cs-hero { padding: 120px 0 64px; }
  .grid-2, .grid-3, .fig-grid, .stats { grid-template-columns: 1fr; }
  .route { grid-template-columns: 1fr; }
  .route__arrow { transform: rotate(90deg); justify-self: center; }
  .quote { padding: 28px 24px; }
  .quote p { font-size: 20px; }
  .about { padding: 120px 0 80px; }
}
@media (max-width: 479px) {
  .meta { grid-template-columns: 1fr; gap: 24px; }
  .button { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   CLAIM TASK HELPER — live recreation of the panel
   ========================================================================== */
.card--forest .card__light { background: #1f4d3f; }
.demo { display: grid; grid-template-columns: 1fr 380px; gap: 0; margin-top: 40px; border-radius: 20px; overflow: hidden; border: 1px solid var(--border); background: #f7f7f7; font-size: 14px; line-height: 1.45; color: #4f4f4f; }
.demo__claim { padding: 26px; min-width: 0; }
.demo__claim h4 { font-size: 20px; font-weight: 500; color: #212121; margin: 0 0 4px; }
.demo__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 18px; }
.demo__chips span { background: #ececec; border-radius: 4px; padding: 3px 8px; font-size: 12px; }
.demo__box { background: #fff; border-radius: 6px; padding: 18px; margin-top: 12px; box-shadow: 0 1px 2px #0000000d; }
.demo__box dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 16px; margin: 12px 0 0; }
.demo__box dt { font-size: 12px; color: #828282; }
.demo__box dd { margin: 2px 0 0; color: #212121; }
.demo__box .name { font-size: 20px; color: #1f5c4a; border-bottom: 1px dotted #1f5c4a; display: inline-block; }
.demo__box mark { background: #fff1c2; color: inherit; padding: 0 3px; border-radius: 3px; }
.helper { background: #fff; padding: 22px; border-left: 1px solid var(--border); box-shadow: -12px 0 30px -18px #00000030; }
.helper__title { font-size: 16px; font-weight: 600; color: #212121; margin: 0 0 14px; }
.helper__reject { border: 1px solid #e6e6e6; border-radius: 6px; padding: 16px; color: #212121; font-weight: 500; }
.helper__reject small { display: block; margin-top: 6px; font-weight: 400; color: #9a9a9a; font-size: 12px; }
.helper__label { margin: 18px 0 8px; font-weight: 600; color: #212121; }
.helper__why { background: #f2f2f2; border-radius: 6px 6px 0 0; padding: 18px; }
.helper__why b { display: block; border-left: 3px solid #1f5c4a; padding-left: 10px; font-size: 16px; color: #212121; line-height: 1.3; }
.helper__why p { margin: 10px 0 0; font-size: 13px; color: #828282; }
.step { border: 1px solid #e6e6e6; border-top: 0; padding: 16px 18px; transition: opacity var(--t) var(--ease); }
.step:last-of-type { border-radius: 0 0 6px 6px; }
.step__head { display: flex; align-items: center; gap: 10px; color: #212121; font-weight: 500; }
.step__dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #c9c9c9; flex: none; display: grid; place-items: center; transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease); }
.step__dot::after { content: ""; width: 8px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translateY(-1px); opacity: 0; }
.step.done .step__dot { background: #1f5c4a; border-color: #1f5c4a; }
.step.done .step__dot::after { opacity: 1; }
.step p { margin: 8px 0 12px; font-size: 13px; color: #828282; }
.step button { font: inherit; font-weight: 600; border: 0; border-radius: 4px; padding: 8px 14px; background: #1f5c4a; color: #fff; cursor: pointer; transition: background-color var(--t) var(--ease), opacity var(--t) var(--ease); }
.step button:hover { background: #17463a; }
.step.done button, .step.locked button { background: #c4c4c4; cursor: default; }
.step.locked { opacity: .55; }
.helper__status { margin-top: 14px; font-size: 13px; color: #1f5c4a; font-weight: 600; min-height: 20px; }
.helper__reset { background: none; border: 0; padding: 0; margin-top: 6px; font: inherit; font-size: 13px; color: #828282; text-decoration: underline; cursor: pointer; }
@media (max-width: 900px) { .demo { grid-template-columns: 1fr; } .helper { border-left: 0; border-top: 1px solid var(--border); } }

/* ==========================================================================
   HOME — version B: black index with a live preview
   ========================================================================== */
.hb { background: var(--main); color: var(--paragraphs-dark); }
.hb-main { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 5vw; width: min(92%, 1320px); margin: 0 auto; padding: 150px 0 110px; min-height: 100vh; }
.hb-kicker { font-family: var(--type); font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
.hb-open { color: var(--teal); }
.hb-h1 { margin: 22px 0 64px; font-size: clamp(34px, 4.3vw, 62px); font-weight: 700; line-height: 1.08; letter-spacing: -.025em; color: var(--white); max-width: 15ch; }
.hb-h1 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent); letter-spacing: 0; }
.hb-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border-dark); }
.hb-row { display: grid; grid-template-columns: 44px 1fr auto 28px; gap: 12px; align-items: baseline; padding: 24px 14px; margin: 0 -14px; border-bottom: 1px solid var(--border-dark); color: var(--white); text-decoration: none; border-radius: 3px; transition: background-color var(--t) var(--ease), color var(--t) var(--ease), padding var(--t) var(--ease), opacity .7s var(--ease), transform .7s var(--ease); }
.hb-n { font-family: var(--type); font-size: 14px; color: var(--paragraphs-dark); transition: color var(--t) var(--ease); }
.hb-t { font-size: clamp(19px, 1.7vw, 24px); font-weight: 600; line-height: 1.3; }
.hb-t small { display: block; margin-top: 4px; font-size: 15px; font-weight: 400; color: var(--paragraphs-dark); transition: color var(--t) var(--ease); }
.hb-m { font-size: 14px; color: var(--paragraphs-dark); transition: color var(--t) var(--ease); }
.hb-a { font-size: 20px; opacity: 0; transform: translateX(-8px); transition: opacity var(--t) var(--ease), transform var(--t) var(--ease); }
.hb-row:hover, .hb-row:focus-visible { padding-left: 24px; }
.hb-row:hover .hb-a, .hb-row:focus-visible .hb-a { opacity: 1; transform: none; }
.hb-row--teal:hover, .hb-row--teal:focus-visible { background: var(--teal); }
.hb-row--violet:hover, .hb-row--violet:focus-visible { background: var(--violet); }
.hb-row--forest:hover, .hb-row--forest:focus-visible { background: #1f4d3f; }
.hb-row:hover .hb-n, .hb-row:hover .hb-t small, .hb-row:hover .hb-m, .hb-row:focus-visible .hb-n, .hb-row:focus-visible .hb-t small, .hb-row:focus-visible .hb-m { color: #ffffffd9; }
.hb-next { margin-top: 44px; font-size: 15px; }
.hb-next span { font-family: var(--type); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; display: block; margin-bottom: 10px; }
.hb-next p { margin: 4px 0 0; color: #cfcfcf; }
.hb-next i { font-style: normal; color: var(--paragraphs-dark); }
.hb-right { position: relative; }
.hb-frame { position: sticky; top: 150px; aspect-ratio: 4 / 5; border-radius: 3px; overflow: hidden; background: #000; box-shadow: 0 30px 60px -20px #000; }
.hb-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 78% 50%; opacity: 0; transform: scale(1.04); transition: opacity .5s var(--ease), transform .9s var(--ease); }
.hb-shot.on { opacity: 1; transform: none; }
.hb-shot--wire { display: grid; place-items: center; background: #0c0c0c; }
.hb-shot--wire svg { width: 82%; height: auto; }
@media (max-width: 900px) {
  .hb-main { grid-template-columns: 1fr; padding: 110px 0 70px; }
  .hb-right { display: none; }
  .hb-h1 { margin-bottom: 40px; }
  .hb-row { grid-template-columns: 34px 1fr; margin: 0; padding: 20px 0; }
  .hb-row:hover, .hb-row:focus-visible { padding-left: 10px; padding-right: 10px; }
  .hb-m, .hb-a { display: none; }
}

/* ==========================================================================
   HOME — version C: white dictionary entry with a sideways gallery
   ========================================================================== */
.hc { background: var(--white); color: var(--main); }
.hc-main { padding: 150px 0 60px; }
.hc-entry { width: min(88%, 1050px); margin: 0 auto; font-family: var(--type); }
.hc-entry h1 { font-size: clamp(38px, 6.4vw, 92px); font-weight: 400; line-height: 1.05; letter-spacing: -.01em; }
.hc-entry h1 span { font-size: .2em; letter-spacing: .08em; text-transform: uppercase; color: var(--paragraphs); vertical-align: .9em; margin-left: .6em; }
.hc-entry ol { margin: 36px 0 0; padding-left: 1.6em; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.75; max-width: 46ch; }
.hc-entry li { padding-left: .4em; margin-top: 8px; }
.hc-entry mark { background: none; color: inherit; box-shadow: inset 0 -.55em 0 #1dc0a355; }
.hc-see { margin-top: 26px; font-size: 16px; color: var(--paragraphs); }
.hc-see a { color: var(--main); text-underline-offset: 4px; text-decoration-thickness: 1px; transition: color var(--t) var(--ease); }
.hc-see a:hover { color: var(--accent); }
.hc-work { margin-top: 84px; }
.hc-label { width: min(88%, 1050px); margin: 0 auto 18px; font-family: var(--type); font-size: 16px; color: var(--paragraphs); display: flex; justify-content: space-between; }
.hc-hint { font-size: 14px; }
.hc-rail { display: flex; gap: 28px; overflow-x: auto; scroll-snap-type: x proximity; padding: 8px max(6vw, calc((100vw - 1050px) / 2)) 44px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.hc-card { flex: 0 0 min(78vw, 760px); scroll-snap-align: center; color: var(--main); text-decoration: none; }
.hc-card > img, .hc-wire, .hc-soon { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 3px; box-shadow: 0 20px 50px -13px #1212122e; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
a.hc-card:hover > img, a.hc-card:hover .hc-wire { transform: translateY(-8px); box-shadow: 0 34px 60px -18px #12121240; }
.hc-wire { background: #1f4d3f; display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 0 5%; container-type: inline-size; }
.hc-wire p { margin: 0; color: var(--white); font-family: var(--sans); font-weight: 600; font-size: 3.7cqw; line-height: 1.32; max-width: 12ch; }
.hc-wire svg { width: 100%; height: auto; }
.hc-cap { display: block; margin-top: 18px; font-family: var(--type); font-size: 15px; line-height: 1.6; color: var(--paragraphs); max-width: 52ch; }
.hc-cap b { display: block; font-weight: 400; font-size: 18px; color: var(--main); }
.hc-card--next { flex-basis: min(60vw, 420px); }
.hc-soon { background: var(--background); box-shadow: none; display: flex; flex-direction: column; justify-content: center; padding: 8%; font-family: var(--type); }
.hc-soon span { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--paragraphs); margin-bottom: 10px; }
.hc-soon p { margin: 8px 0 0; font-size: 16px; line-height: 1.5; }
@media (max-width: 767px) { .hc-main { padding-top: 110px; } .hc-work { margin-top: 56px; } .hc-card { flex-basis: 84vw; } .hc-hint { display: none; } }

/* ==========================================================================
   POETRY — index (the original big-title list with a moving texture on hover)
   ========================================================================== */
.po, .pr, .pc { background: var(--main); color: var(--white); }
.po .nav--dark, .pr .nav--dark, .pc .nav--dark { position: absolute; }
.po-stage { position: relative; width: min(86%, 1180px); margin: 70px auto 60px; padding: 100px 0 120px; background: #000; overflow: hidden; isolation: isolate; }
/* orbit: the original looping GIF sits on top; the CSS rings show until it is downloaded */
.po-orbit { position: absolute; left: 50%; top: 40px; width: min(50vw, 560px); aspect-ratio: 1; transform: translateX(-50%); z-index: -1; background: url("../assets/poetry/orbit.gif") 50% 0 / contain no-repeat; }
.po-orbit i { position: absolute; inset: 0; margin: auto; border: 1px solid #ffffff3d; border-radius: 50%; z-index: -1; animation: orbit 14s linear infinite; }
.po-orbit i:nth-child(1) { width: 52%; height: 52%; transform-origin: 46% 54%; }
.po-orbit i:nth-child(2) { width: 56%; height: 56%; transform-origin: 54% 47%; animation-duration: 19s; animation-direction: reverse; }
.po-orbit i:nth-child(3) { width: 48%; height: 48%; transform-origin: 50% 44%; animation-duration: 23s; border-color: #ffffff24; }
@keyframes orbit { to { transform: rotate(360deg); } }
.po-head { text-align: center; }
.po-mark { width: min(30%, 220px); margin: 0 auto; }
.po-title { margin-top: 28px; font-family: "Special Elite", "Courier Prime", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif; font-size: 22px; font-weight: 400; letter-spacing: .5em; text-indent: .5em; color: #ffffffd9; }
.po-sub { margin-top: 10px; font-family: var(--type); font-size: 13px; letter-spacing: .08em; color: var(--paragraphs-dark); }
.po-list { list-style: none; margin: 90px 0 0; padding: 0; display: flex; flex-direction: column; align-items: center; }
.po-list li { margin-bottom: 14px; }
.po-item { position: relative; display: flex; flex-direction: column; align-items: center; padding: 8px 22px 12px; border-radius: 5px; color: var(--white); text-decoration: none; overflow: hidden; isolation: isolate; }
/* hover: liquid, colour-shifting metal. A conic "chrome" gradient is warped by the #liquid SVG filter
   (defined in poetry.html) while its hue and position drift. */
.po-item::before { content: ""; position: absolute; inset: -40px; z-index: -1; opacity: 0; transition: opacity .45s var(--ease);
  background:
    radial-gradient(40% 70% at 22% 25%, #ffffffb3 0, #fff0 55%),
    radial-gradient(35% 60% at 78% 75%, #ffffff66 0, #fff0 55%),
    conic-gradient(from 20deg at 38% 55%, #141722, #c9d1e3, #6a55ff, #12cfc0, #f4f6fd, #232842, #ff6fc4, #ffcf70, #e6eaf5, #3a3f5c, #9fe8ff, #141722);
  background-size: 180% 180%, 160% 160%, 240% 240%;
  filter: url(#liquid) saturate(1.35) contrast(1.15);
  animation: metal 9s ease-in-out infinite alternate, sheen 14s linear infinite; animation-play-state: paused; }
@keyframes metal { from { background-position: 0% 0%, 100% 100%, 0% 30%; } to { background-position: 100% 60%, 0% 20%, 100% 70%; } }
@keyframes sheen { to { filter: url(#liquid) saturate(1.35) contrast(1.15) hue-rotate(360deg); } }
.po-item:hover::before, .po-item:focus-visible::before, .po-item:active::before { opacity: 1; animation-play-state: running; }
.po-item .po-zh, .po-item .po-en { transition: color .45s var(--ease), text-shadow .45s var(--ease), max-height var(--t) var(--ease), opacity var(--t) var(--ease), margin var(--t) var(--ease); }
/* the title inverts whatever metal is behind it, so it stays readable as the colours move */
.po-item:hover .po-zh, .po-item:focus-visible .po-zh, .po-item:hover .po-en, .po-item:focus-visible .po-en { mix-blend-mode: difference; text-shadow: none; }
.po-zh { font-size: clamp(38px, 6.6vw, 85px); font-weight: 600; line-height: 1.07; letter-spacing: 0; text-shadow: 0 2px 18px #00000059; }
.po-en { max-height: 0; opacity: 0; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; transition: max-height var(--t) var(--ease), opacity var(--t) var(--ease), margin var(--t) var(--ease); text-shadow: 0 1px 8px #000000a6; }
.po-item:hover .po-en, .po-item:focus-visible .po-en { max-height: 24px; opacity: 1; margin-top: 8px; }

/* ==========================================================================
   POETRY — reader
   ========================================================================== */
.pr { --serif-zh: "Special Elite", "Courier Prime", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif; }
.pr-bar { position: fixed; inset: 0 0 auto 0; z-index: 998; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 7%; background: #121212eb; backdrop-filter: blur(8px); font-size: 14px; transform: translateY(-100%); transition: transform var(--t) var(--ease); }
.pr-bar.on { transform: none; }
.pr-back { color: var(--paragraphs-dark); text-decoration: none; transition: color var(--t) var(--ease); }
.pr-back:hover { color: var(--white); }
.pr-where { font-family: var(--serif-zh); letter-spacing: .2em; }
.pr-prog { position: absolute; inset: auto 0 0 0; height: 1px; background: var(--border-dark); }
.pr-prog i { display: block; height: 100%; background: var(--white); transform-origin: 0 50%; transform: scaleX(0); }
.pr-main { width: min(88%, 640px); margin: 0 auto; padding: 0 0 120px; }
.pr-cover { min-height: 92vh; display: flex; flex-direction: column; justify-content: center; padding: 130px 0 60px; }
.pr-count { font-family: var(--serif-zh); font-size: 13px; letter-spacing: .14em; color: var(--paragraphs-dark); }
.pr-h1 { margin-top: 22px; font-family: var(--serif-zh); font-size: clamp(40px, 8vw, 76px); font-weight: 500; line-height: 1.2; letter-spacing: .04em; }
.pr-en { margin-top: 14px; font-family: var(--serif-zh); font-size: 19px; color: var(--paragraphs-dark); }
.pr-toc { margin-top: 56px; display: flex; flex-wrap: wrap; gap: 6px 22px; font-family: var(--serif-zh); font-size: 15px; line-height: 1.9; }
.pr-toc a { color: #ffffff8c; text-decoration: none; border-bottom: 1px solid transparent; transition: color var(--t) var(--ease), border-color var(--t) var(--ease); }
.pr-toc a:hover { color: var(--white); border-color: var(--white); }
.pr-poem { padding: 18vh 0; border-top: 1px solid var(--border-dark); scroll-margin-top: 30px; opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.pr-poem.in { opacity: 1; transform: none; }
.no-js .pr-poem { opacity: 1; transform: none; }
.pr-no { font-family: var(--serif-zh); font-size: 13px; letter-spacing: .2em; color: var(--paragraphs-dark); font-variant-numeric: tabular-nums; }
.pr-t { margin-top: 14px; font-family: var(--serif-zh); font-size: clamp(24px, 3.4vw, 32px); font-weight: 600; line-height: 1.4; letter-spacing: .06em; }
.pr-b { margin-top: 44px; font-family: var(--serif-zh); font-size: clamp(17px, 2vw, 20px); line-height: 2.25; letter-spacing: .05em; color: #ffffffd6; }
.pr-b p { margin: 0; }
.pr-b p.gap { line-height: 1.2; }
.pr-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-top: 60px; border-top: 1px solid var(--border-dark); }
.pr-page { display: block; padding: 22px 0; color: var(--white); text-decoration: none; }
.pr-page--next { text-align: right; grid-column: 2; }
.pr-page small { display: block; font-size: 12px; letter-spacing: .14em; color: var(--paragraphs-dark); margin-bottom: 8px; }
.pr-page b { font-family: var(--serif-zh); font-size: clamp(20px, 3vw, 28px); font-weight: 600; border-bottom: 1px solid transparent; transition: border-color var(--t) var(--ease); }
.pr-page:hover b { border-color: var(--white); }

/* ==========================================================================
   PODCAST + CONTACT
   ========================================================================== */
.pc-main { width: min(88%, 900px); margin: 0 auto; padding: 150px 0 110px; }
.pc-head { display: grid; grid-template-columns: 240px 1fr; gap: 48px; align-items: center; }
.pc-art { width: 100%; border-radius: 3px; box-shadow: 0 30px 60px -20px #000; }
.pc-kicker { font-family: var(--type); font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--paragraphs-dark); }
.pc-h1 { margin-top: 10px; font-size: clamp(44px, 7vw, 85px); font-weight: 600; line-height: 1.07; }
.pc-en { margin-top: 8px; font-size: 24px; font-weight: 600; color: #ffffffb3; }
.pc-tag { margin-top: 18px; font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--accent); }
.pc-links { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px; }
.pc-links a { padding: 10px 18px; border-radius: 5px; background: var(--background-dark); color: var(--white); text-decoration: none; font-size: 15px; font-weight: 600; transition: background-color var(--t) var(--ease), color var(--t) var(--ease); }
.pc-links a:hover { background: var(--white); color: var(--main); }
.pc-players { margin-top: 72px; display: grid; gap: 28px; }
.pc-frame { border-radius: 12.5px; overflow: hidden; background: var(--background-dark); }
.pc-frame iframe { width: 100%; border: 0; display: block; }
.ct { padding: 190px 0 140px; }
.ct h1 { font-size: clamp(38px, 6vw, 64px); font-weight: 700; color: var(--main); line-height: 1.1; letter-spacing: -.02em; }
.ct p { margin-top: 20px; max-width: 48ch; }
.ct-mail a { font-size: clamp(22px, 3.4vw, 34px); font-weight: 600; color: var(--main); text-decoration-thickness: 2px; text-underline-offset: 6px; transition: color var(--t) var(--ease); }
.ct-mail a:hover { color: var(--accent); }
@media (max-width: 767px) {
  .po-stage { width: 100%; margin-top: 0; padding-top: 120px; }
  .po-list { margin-top: 60px; }
  .po-en { max-height: 24px; opacity: .6; margin-top: 4px; font-size: 11px; }
  .pr-poem { padding: 12vh 0; }
  .pc-head { grid-template-columns: 1fr; gap: 28px; }
  .pc-art { max-width: 200px; }
  .pc-main { padding-top: 110px; }
  .ct { padding: 130px 0 90px; }
}