/* Generated by tooling/bundle_css.py; edit the source styles. */
/* css/fonts.css */
/* Existing fonts, locally hosted. SIL Open Font Licenses: assets/fonts/. */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:300 600;font-display:swap;src:url("../assets/fonts/fraunces-latin.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:300 600;font-display:swap;src:url("../assets/fonts/inter-latin.woff2") format("woff2")}
/* css/styles.css */
:root {
  --bg: #07080c;
  --bg-soft: #0d0f16;
  --ink: #eef0f4;
  --ink-muted: #9aa0ad;
  --ink-faint: #5c6270;
  --gold: #c9a86a;
  --gold-bright: #e3c98f;
  --buy: #3fbfa3;
  --buy-bright: #5fd8bd;
  --portal: #9b8cff;
  --portal-bright: #b6abff;
  --line: rgba(255, 255, 255, 0.08);
  --serif: "Fraunces", Georgia, serif;
  --sans: "Inter", -apple-system, "Segoe UI", sans-serif;
  --wrap: 1080px;
}

* {
  box-sizing: border-box;
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---- animated background canvas ---- */

#mesh {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.55;
  pointer-events: none;
}

/* The browser toolbar can resize the visible viewport during a touch scroll.
   Keep the drawing surface fixed at the largest viewport to avoid stretching. */
@media (hover: none) and (pointer: coarse) {
  #mesh {
    height: 100lvh;
  }
}

.site-header,
main,
.site-footer {
  position: relative;
  z-index: 1;
}

/* ---- header ---- */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

.monogram {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: 0.08em;
  color: var(--gold);
  text-decoration: none;
  border: 1px solid var(--line);
  padding: 0.35rem 0.7rem;
  border-radius: 4px;
  transition: border-color 0.3s;
}

.monogram:hover {
  border-color: var(--gold);
}

.site-header nav a {
  color: var(--ink-muted);
  text-decoration: none;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-left: 2.25rem;
  transition: color 0.3s;
}

.site-header nav a:hover {
  color: var(--gold-bright);
}

/* ---- shared ---- */

section {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 6rem 1.5rem;
}

.kicker {
  font-weight: 300;
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.75rem;
}

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: #0a0a0f;
  background: var(--gold);
  padding: 0.85rem 1.9rem;
  border-radius: 3px;
  border: 1px solid var(--gold);
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}

.btn:hover {
  background: var(--gold-bright);
  border-color: var(--gold-bright);
}

.btn.ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}

.btn.ghost:hover {
  border-color: var(--gold);
  color: var(--gold-bright);
  background: transparent;
}

.btn-playbook {
  background: var(--buy);
  border-color: var(--buy);
  color: #04120e;
}

.btn-playbook:hover {
  background: var(--buy-bright);
  border-color: var(--buy-bright);
  color: #04120e;
}

.btn-portal {
  background: var(--portal);
  border-color: var(--portal);
  color: #0a0a12;
}

.btn-portal:hover {
  background: var(--portal-bright);
  border-color: var(--portal-bright);
  color: #0a0a12;
}

/* ---- hero ---- */

.hero {
  min-height: 70vh;
  min-height: 70svh;
  padding-top: 3rem;
}

.hero-inner {
  position: relative;
  isolation: isolate;
  min-height: clamp(620px, 56vw, 730px);
  display: flex;
  align-items: center;
}

.hero-copy {
  position: relative;
  z-index: 2;
  width: 60%;
  min-width: 0;
  padding-block: 3rem;
  text-shadow: 0 1px 3px #07080c;
}

.binary-portrait {
  position: absolute;
  z-index: 1;
  top: -1rem;
  right: -40px;
  width: clamp(580px, 65vw, 780px);
  aspect-ratio: 1;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  touch-action: pan-y;
  /* Fade the shoulder beneath the copy and dissolve the lower edge into the page. */
  -webkit-mask-image: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.15) 24%, rgba(0, 0, 0, 0.65) 48%, #000 68%), linear-gradient(to bottom, #000 76%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.15) 24%, rgba(0, 0, 0, 0.65) 48%, #000 68%), linear-gradient(to bottom, #000 76%, transparent 100%);
  mask-composite: intersect;
}

.binary-portrait-fallback,
#binary-portrait-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.binary-portrait-fallback {
  object-fit: cover;
}

#binary-portrait-canvas {
  opacity: 0;
}

#binary-portrait[data-portrait-ready="true"] .binary-portrait-fallback {
  opacity: 0;
  visibility: hidden;
}

#binary-portrait[data-portrait-ready="true"] #binary-portrait-canvas {
  opacity: 1;
}

.binary-portrait:focus {
  outline: none;
}

.binary-portrait:focus-visible {
  outline: 2px dotted rgba(201, 168, 106, 0.65);
  outline-offset: 6px;
}

.hero h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(3.4rem, 8.5vw, 7.25rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
}

.hero h1 .line {
  display: block;
}

.hero h1 .line:last-child {
  color: transparent;
  -webkit-text-stroke: 1px rgba(238, 240, 244, 0.55);
}

.lede {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  color: var(--gold-bright);
  margin-top: 2.25rem;
  letter-spacing: 0.04em;
}

.hero-sub {
  max-width: 34rem;
  color: var(--ink-muted);
  margin-top: 1.25rem;
  font-size: 1.02rem;
}

.hero-cta {
  text-shadow: none;
  margin-top: 2.75rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

@media (max-width: 820px) {
  .hero {
    overflow: hidden;
    overflow: clip;
  }

  .hero-inner {
    min-height: 0;
    display: block;
  }

  .hero-copy {
    width: 100%;
    padding-block: 0;
    text-shadow: 0 1px 3px #07080c, 0 0 14px #07080c;
  }

  .binary-portrait {
    top: -1.5rem;
    right: calc(-1.5rem - min(30vw, 7.5rem));
    width: min(100%, 520px);
    /* Keep the face behind the opening copy, with a soft fade under the lede. */
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 20%, rgba(0, 0, 0, 0.3) 62%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 20%, rgba(0, 0, 0, 0.3) 62%, transparent 100%);
  }
}

@media (max-width: 420px) {
  .hero {
    padding-top: 2rem;
  }

  .hero-inner {
    min-height: 0;
    gap: 3rem;
  }

  .hero h1 {
    font-size: clamp(2.85rem, 15vw, 3.75rem);
  }

  .lede {
    font-size: 1.05rem;
  }

  .hero-cta {
  text-shadow: none;
    margin-top: 2.25rem;
  }

  .hero-cta .btn {
    width: 100%;
    padding-inline: 1rem;
    text-align: center;
  }
}

/* reveal animation */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

.reveal:nth-child(1) { animation-delay: 0.05s; }
.reveal:nth-child(2) { animation-delay: 0.18s; }
.reveal:nth-child(3) { animation-delay: 0.34s; }
.reveal:nth-child(4) { animation-delay: 0.48s; }
.reveal:nth-child(5) { animation-delay: 0.62s; }
.reveal:nth-child(6) { animation-delay: 0.76s; }

@keyframes rise {
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    animation: none;
    opacity: 1;
    transform: none;
  }
  html {
    scroll-behavior: auto;
  }
}

/* scroll-triggered reveal for content below the fold */

.scroll-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.scroll-reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-reveal {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

/* ---- pillars ---- */

.pillars {
  border-top: 1px solid var(--line);
}

.pillar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

.pillar {
  display: block;
  width: 100%;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.005));
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 2.25rem 2rem;
  font-family: var(--sans);
  text-align: left;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.35s, transform 0.35s;
}

.pillar:hover {
  border-color: rgba(201, 168, 106, 0.45);
  transform: translateY(-4px);
}

.pillar-num {
  font-family: var(--serif);
  color: var(--gold);
  font-size: 0.95rem;
  letter-spacing: 0.15em;
}

.pillar h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.7rem;
  margin: 0.9rem 0 1rem;
}

.pillar p {
  color: var(--ink-muted);
  font-size: 0.96rem;
  margin-bottom: 1.25rem;
}

.pillar-link {
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}

.principle-trigger {
  display: block;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--sans);
  text-align: left;
  color: var(--ink);
  cursor: pointer;
}

.principle-trigger:hover h3 {
  color: var(--gold-bright);
}

.principle-trigger .pillar-link {
  display: inline-block;
  margin-top: 1rem;
}

/* ---- philosophy ---- */

.philosophy {
  border-top: 1px solid var(--line);
}

.principles {
  list-style: none;
  padding: 0;
  counter-reset: principle;
  max-width: 46rem;
}

.principles li {
  counter-increment: principle;
  padding: 2.5rem 0;
  border-bottom: 1px solid var(--line);
  position: relative;
  padding-left: 4.5rem;
}

.principles li:last-child {
  border-bottom: none;
}

.principles li::before {
  content: counter(principle, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 2.65rem;
  font-family: var(--serif);
  color: var(--gold);
  font-size: 1rem;
  letter-spacing: 0.15em;
}

.principles h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  margin-bottom: 0.75rem;
}

.principles p {
  color: var(--ink-muted);
  max-width: 38rem;
}

/* ---- quote band ---- */

.quote-band {
  text-align: center;
  padding-top: 7rem;
  padding-bottom: 2rem;
}

.quote-band p {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.5rem, 3.6vw, 2.5rem);
  line-height: 1.35;
  max-width: 20em;
  margin: 0 auto;
  color: var(--ink);
}

.quote-band cite {
  display: block;
  margin-top: 1.75rem;
  font-style: normal;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---- stats band ---- */

.stats-band {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 2.25rem 1.5rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: space-between;
}

.stat {
  flex: 1;
  min-width: 130px;
  text-align: center;
}

.stat-num {
  display: block;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  color: var(--gold-bright);
  line-height: 1;
}

.stat-label {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---- playbook moment ---- */

.playbook {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 4.5rem 1.5rem;
}

.playbook-inner {
  position: relative;
  border: 1px solid rgba(63, 191, 163, 0.35);
  border-radius: 12px;
  padding: 3rem 2.75rem;
  background:
    radial-gradient(ellipse at 15% 0%, rgba(63, 191, 163, 0.12), transparent 55%),
    linear-gradient(160deg, rgba(63, 191, 163, 0.05), rgba(255, 255, 255, 0.005));
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr minmax(320px, 460px);
  gap: 3.25rem;
  align-items: center;
}

/* Key phrases in the suite copy pop bright against the muted body text. */
.playbook-text strong {
  color: var(--ink);
  font-weight: 600;
}

/* Floating book cover that gently flips through the cover + five sample pages
   (crossfade), mirroring the Gumroad landing page. */
.playbook-cover {
  perspective: 1200px;
}
.pb-cover-stack {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 560 / 724;
  border-radius: 10px;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 34px 70px -26px rgba(0, 0, 0, 0.72), 0 0 0 1px rgba(255, 255, 255, 0.04);
  background: rgba(255, 255, 255, 0.02);
  cursor: zoom-in;
  animation: pb-float 6s ease-in-out infinite;
}
.pb-cover-stack:hover {
  transform: translateY(-4px) scale(1.012);
}
.pb-zoom-hint {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 2;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 5px 11px;
  border-radius: 8px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.22s ease, transform 0.22s ease;
  pointer-events: none;
}
.pb-cover-stack:hover .pb-zoom-hint,
.pb-cover-stack:focus-visible .pb-zoom-hint {
  opacity: 1;
  transform: none;
}

/* Zoom lightbox for the sample pages. */
.pb-zoom {
  border: 0;
  padding: 0;
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  background: rgba(0, 0, 0, 0.9);
  place-items: center;
}
.pb-zoom[open] {
  display: grid;
}
.pb-zoom::backdrop {
  background: rgba(0, 0, 0, 0.6);
}
.pb-zoom img {
  max-width: 92vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
}
.pb-zoom-close {
  position: fixed;
  top: 16px;
  right: 22px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease;
}
.pb-zoom-close:hover {
  background: rgba(255, 255, 255, 0.24);
}
.pb-zoom-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.2s ease;
}
.pb-zoom-nav:hover {
  background: rgba(255, 255, 255, 0.24);
}
.pb-zoom-prev {
  left: 20px;
}
.pb-zoom-next {
  right: 20px;
}
@media (max-width: 560px) {
  .pb-zoom-nav {
    width: 42px;
    height: 42px;
    font-size: 1.6rem;
  }
  .pb-zoom-prev {
    left: 8px;
  }
  .pb-zoom-next {
    right: 8px;
  }
}
.pb-cf {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.pb-cf.on {
  opacity: 1;
}
@keyframes pb-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -9px; }
}
@media (prefers-reduced-motion: reduce) {
  .pb-cover-stack { animation: none; }
  .pb-cf { transition: none; }
}
@media (max-width: 720px) {
  .playbook-inner {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }
  .playbook-cover {
    order: -1;
    max-width: 300px;
    margin: 0 auto;
  }
}

.playbook-kicker {
  color: var(--buy-bright);
}

.playbook h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2rem, 5vw, 3rem);
  margin-bottom: 1rem;
}

.playbook-lead {
  color: var(--ink-muted);
  max-width: 42rem;
  font-size: 1.05rem;
  margin-bottom: 1.75rem;
}

.playbook-features {
  list-style: none;
  padding: 0;
  margin: 0 0 2.25rem;
  max-width: 44rem;
}

.playbook-features li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 0.85rem;
  color: var(--ink);
  font-size: 0.96rem;
}

.playbook-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--buy);
  box-shadow: 0 0 0 4px rgba(63, 191, 163, 0.15);
}

/* Stacked, not side by side: the "last updated" line sits directly above the
   download button so the date reads as a property of the file you're about to
   get, not as a separate note beside it. */
.playbook-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}

.playbook-updated {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0;
}

.playbook-cta .btn-playbook {
  font-size: 0.95rem;
  padding: 1rem 2.2rem;
}

/* Sits below the offer box, not inside it: someone holding a platform
   certification is the most likely qualified reader to bounce, and the answer
   belongs after they've seen what's on offer rather than interrupting it.
   Deliberately names no exam codes. Vendors retire and renumber them, and a
   stale code on this page would undercut the exact thing being sold. */
.pb-certs {
  margin-top: 2.5rem;
  padding: 1.75rem 2rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(63, 191, 163, 0.035);
}

/* The heading answers straight into the comparison, so it carries the full gap
   itself. It used to lean on the lead paragraph's bottom margin for this. */
.pb-certs h3 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 1.4rem;
  margin: 0 0 1.5rem;
}

/* Currently unused: the lead paragraph was removed 2026-08-28. Kept so
   restoring it is a markup-only change, same call as the credentials modal
   in v1.36.1. */
.pb-certs-lead {
  color: var(--ink-muted);
  font-size: 0.96rem;
  margin: 0 0 1.6rem;
  max-width: 46rem;
}

.pb-certs-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem;
  margin-bottom: 1.6rem;
}

.pb-certs-grid h3 {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--buy-bright);
  margin: 0 0 0.55rem;
}

.pb-certs-grid p,
.pb-certs-limit {
  margin: 0;
  font-size: 0.92rem;
  color: var(--ink-muted);
}

.pb-certs-limit {
  padding-top: 1.35rem;
  border-top: 1px solid var(--line);
}

.pb-certs-limit strong {
  color: var(--ink);
  font-weight: 600;
}

@media (max-width: 620px) {
  .playbook-inner {
    padding: 2.25rem 1.5rem;
  }

  .pb-certs {
    padding: 1.5rem 1.25rem;
  }

  .pb-certs-grid {
    grid-template-columns: 1fr;
    gap: 1.35rem;
  }
}

/* ---- projects ---- */

.projects {
  border-top: 1px solid var(--line);
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.project-card {
  display: block;
  width: 100%;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.005));
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 2rem 1.9rem;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--sans);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.35s, transform 0.35s;
}

.project-card:hover {
  border-color: rgba(201, 168, 106, 0.45);
  transform: translateY(-4px);
  text-decoration: none;
}

.project-status {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: 3px;
  margin-bottom: 1rem;
}

.project-status.done {
  color: var(--gold-bright);
  border: 1px solid rgba(201, 168, 106, 0.4);
}

.project-status.progress {
  color: #8fb3a8;
  border: 1px solid rgba(143, 179, 168, 0.4);
}

.project-card h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.35rem;
  margin-bottom: 0.75rem;
}

.project-card p {
  color: var(--ink-muted);
  font-size: 0.92rem;
  margin-bottom: 1.25rem;
}

.project-link {
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ---- project subpage ---- */

.project-hero {
  padding-top: 4rem;
}

.back-link {
  display: inline-block;
  color: var(--ink-faint);
  font-size: 0.85rem;
  text-decoration: none;
  margin-bottom: 2.5rem;
}

.back-link:hover {
  color: var(--gold-bright);
}

.project-hero h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  line-height: 1.1;
  max-width: 20em;
  margin: 1.25rem 0 1.5rem;
}

.project-hero .project-tagline {
  color: var(--ink-muted);
  font-size: 1.1rem;
  max-width: 38rem;
}

.project-body {
  max-width: 42rem;
  padding-top: 1rem;
}

.project-body h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.5rem;
  margin: 3rem 0 1rem;
}

.project-body h2:first-child {
  margin-top: 0;
}

.project-body p {
  color: var(--ink-muted);
}

.project-body p + p {
  margin-top: 1rem;
}

.project-body ul {
  margin-top: 1rem;
  padding-left: 1.25rem;
  color: var(--ink-muted);
}

.project-body li {
  margin-bottom: 0.6rem;
}

.project-body li::marker {
  color: var(--gold);
}

.project-footer {
  border-top: 1px solid var(--line);
  margin-top: 4rem;
  padding-top: 3rem;
  padding-bottom: 5rem;
}

/* ---- about ---- */

.about {
  border-top: 1px solid var(--line);
}

.about-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 4rem;
}

.about-lead {
  font-family: var(--serif);
  font-size: 1.45rem;
  line-height: 1.5;
  margin-bottom: 1.5rem;
}

.about-text p + p {
  margin-top: 1.25rem;
  color: var(--ink-muted);
}

.credentials {
  border-left: 1px solid var(--line);
  padding-left: 2.5rem;
  align-self: start;
}

.credentials h3 {
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: 1.25rem;
}

.credentials ul {
  list-style: none;
  padding: 0;
}

.credentials li {
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-muted);
  font-size: 0.92rem;
}

.credentials li:last-child {
  border-bottom: none;
}

@media (max-width: 760px) {
  .about-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .credentials {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--line);
    padding-top: 2rem;
  }
}

.about-more {
  margin-top: 2.5rem;
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.about-more .btn {
  cursor: pointer;
}

/* ---- connect ---- */

.connect {
  border-top: 1px solid var(--line);
  text-align: center;
  padding-bottom: 7rem;
}

.connect h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2rem, 5vw, 3.4rem);
  max-width: 16em;
  margin: 0 auto;
}

.connect-sub {
  color: var(--ink-muted);
  margin-top: 1.25rem;
}

.connect-links {
  margin-top: 2.5rem;
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---- contact form ---- */

.contact-form {
  max-width: 34rem;
  margin: 2.75rem auto 0;
  text-align: left;
}

.hidden-field {
  display: none;
}

.contact-form label {
  display: block;
  margin-bottom: 1.25rem;
}

.contact-form label span {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.5rem;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.95rem;
  padding: 0.8rem 1rem;
  transition: border-color 0.3s;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--gold);
}

.contact-form textarea {
  resize: vertical;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

@media (max-width: 560px) {
  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

.form-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.form-actions .btn {
  cursor: pointer;
}

/* ---- credentials modal ---- */

.creds-more {
  margin-top: 1.5rem;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--gold);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.7rem 1.2rem;
  cursor: pointer;
  transition: border-color 0.3s, color 0.3s;
}

.creds-more:hover {
  border-color: var(--gold);
  color: var(--gold-bright);
}

#game-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  background: var(--bg-soft);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.5rem 1.75rem 1.75rem;
  width: calc(100vw - 1.5rem);
  max-height: 92vh;
  overflow: hidden;
}

#share-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  background: var(--bg-soft);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.5rem 1.75rem 1.9rem;
  max-width: 560px;
  width: calc(100vw - 3rem);
  max-height: 92vh;
  overflow-y: auto;
}

#share-modal::backdrop {
  background: rgba(4, 5, 8, 0.85);
  backdrop-filter: blur(3px);
}

.share-card {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  margin: 0.75rem 0 1.25rem;
}

.share-field {
  margin-bottom: 1.25rem;
}

.share-field label {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.5rem;
}

.share-field input {
  width: 100%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.95rem;
  padding: 0.7rem 0.9rem;
  transition: border-color 0.3s;
}

.share-field input:focus {
  outline: none;
  border-color: var(--gold);
}

.share-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.share-actions .btn {
  cursor: pointer;
  flex: 1;
  min-width: 130px;
  text-align: center;
}

#game-modal::backdrop {
  background: rgba(4, 5, 8, 0.8);
  backdrop-filter: blur(3px);
}

.game-wrap {
  position: relative;
  margin-top: 0.75rem;
}

#game-canvas {
  display: block;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(201, 168, 106, 0.05), transparent 60%),
    #07080c;
  cursor: pointer;
  touch-action: none;
}

.game-hud {
  position: absolute;
  top: 0.9rem;
  left: 1.1rem;
  right: 1.1rem;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.game-hud strong {
  color: var(--gold-bright);
  font-weight: 600;
  margin-left: 0.35rem;
}

.game-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: rgba(7, 8, 12, 0.82);
  border-radius: 8px;
  padding: 1.5rem;
}

.game-overlay.game-hidden {
  display: none;
}

.game-hidden {
  display: none !important;
}

.game-overlay h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin-bottom: 0.5rem;
}

.game-tag {
  color: var(--gold-bright);
  font-family: var(--serif);
  font-size: 1.05rem;
  margin-bottom: 1rem;
}

.game-instructions {
  color: var(--ink-muted);
  font-size: 0.92rem;
  line-height: 1.7;
  margin-bottom: 1.75rem;
  max-width: 30rem;
}

.game-result {
  color: var(--ink-muted);
  margin-bottom: 0.5rem;
}

.game-result strong {
  color: var(--gold-bright);
}

.game-best-line {
  color: var(--gold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.8rem;
  display: none;
}

.game-over-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.25rem;
}

.game-over-actions .btn {
  cursor: pointer;
}

@media (max-width: 640px) {
  /* Full-screen on mobile: the floating-card treatment (rounded corners,
     backdrop margin) reads as cramped at phone width, and every pixel of
     screen matters for an arcade game played with a thumb. env() insets
     keep the header clear of a notch/dynamic island and the actions clear
     of the home-indicator area. */
  /* [open] matters here, not just as a hook: an ID selector's specificity
     beats the UA stylesheet's dialog:not([open]) { display: none }, so a
     bare #game-modal { display: flex } rule would force the dialog to
     render full-screen even while closed -- visible on page load, and
     stuck on screen (with the backdrop gone) after close(). Scoping every
     property to #game-modal[open] means this block only ever applies while
     the dialog is genuinely open, so the browser's native hide-when-closed
     behavior is never overridden. */
  #game-modal[open] {
    top: 0;
    left: 0;
    transform: none;
    width: 100vw;
    height: 100vh;
    height: 100dvh; /* falls back to the line above on browsers without dvh */
    max-width: none;
    max-height: none;
    border: none;
    border-radius: 0;
    padding: calc(1rem + env(safe-area-inset-top, 0px))
      calc(1rem + env(safe-area-inset-right, 0px))
      calc(1rem + env(safe-area-inset-bottom, 0px))
      calc(1rem + env(safe-area-inset-left, 0px));
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }

  /* The canvas locks to an 860:480 ratio, so at phone widths it renders too
     short to hold the start/end overlay text without overflowing into the
     modal header above. Decouple the canvas from the wrap's flow height so
     the wrap can be tall enough for the overlay on its own. flex: 1 lets the
     wrap (and the centered canvas inside it) claim the full screen instead
     of just its min-height. */
  .game-wrap {
    flex: 1;
    min-height: 22rem;
  }

  #game-canvas {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }

  .game-overlay {
    padding: 1rem;
  }

  .game-overlay h2 {
    font-size: 1.6rem;
  }

  .game-tag {
    font-size: 0.92rem;
    margin-bottom: 0.6rem;
  }

  .game-instructions {
    font-size: 0.8rem;
    line-height: 1.5;
    margin-bottom: 1rem;
  }
}

.hero-cta .btn {
  cursor: pointer;
}

#essay-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  background: var(--bg-soft);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 2rem 2.5rem 2.75rem;
  max-width: 700px;
  width: calc(100vw - 3rem);
  max-height: 85vh;
  overflow-y: auto;
}

#essay-modal::backdrop {
  background: rgba(4, 5, 8, 0.75);
  backdrop-filter: blur(3px);
}

#essay-modal-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  margin: 0.5rem 0 1.5rem;
}

.essay-body {
  max-width: 60ch;
  margin: 0 auto;
}

.essay-body p {
  color: var(--ink-muted);
  line-height: 1.75;
  margin-bottom: 1.3rem;
}

.essay-body h3 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--ink);
  font-size: 1.3rem;
  margin: 2.25rem 0 1rem;
}

.essay-body h3:first-of-type {
  margin-top: 1.5rem;
}

#concept-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  background: var(--bg-soft);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 2rem 2.25rem 2.5rem;
  max-width: 560px;
  width: calc(100vw - 3rem);
  max-height: 85vh;
  overflow-y: auto;
}

#concept-modal::backdrop {
  background: rgba(4, 5, 8, 0.75);
  backdrop-filter: blur(3px);
}

.concept-modal-num {
  font-family: var(--serif);
  color: var(--gold);
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.concept-canvas {
  display: block;
  width: 100%;
  height: 170px;
  margin: 0.5rem 0 1.5rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.02), transparent 70%);
}

#concept-modal-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.6rem, 4vw, 2rem);
  margin: 0 0 1rem;
}

#concept-modal .project-body {
  max-width: none;
  padding-top: 0;
}

#project-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  background: var(--bg-soft);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 2rem 2.25rem 2.5rem;
  max-width: 680px;
  width: calc(100vw - 3rem);
  max-height: 85vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(201, 168, 106, 0.52) rgba(255, 255, 255, 0.035);
  scrollbar-gutter: stable;
}

#project-modal::-webkit-scrollbar {
  width: 9px;
}

#project-modal::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.035);
  border-radius: 999px;
}

#project-modal::-webkit-scrollbar-thumb {
  background: rgba(201, 168, 106, 0.52);
  border: 2px solid var(--bg-soft);
  border-radius: 999px;
}

#project-modal::-webkit-scrollbar-thumb:hover {
  background: rgba(227, 201, 143, 0.78);
}

#project-modal::-webkit-scrollbar-corner {
  background: transparent;
}

#project-modal::backdrop {
  background: rgba(4, 5, 8, 0.75);
  backdrop-filter: blur(3px);
}

#project-modal .modal-head {
  margin-bottom: 0.5rem;
}

#project-modal-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  line-height: 1.15;
  margin: 0.5rem 0 0.75rem;
}

#project-modal .project-tagline {
  color: var(--ink-muted);
  font-size: 1rem;
  margin-bottom: 0;
}

#project-modal .project-body {
  max-width: none;
  padding-top: 0;
}

.architecture-flow {
  margin-top: 2rem;
}

.architecture-flow-head {
  margin-bottom: 0.85rem;
}

.architecture-flow-head span {
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.architecture-flow-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.architecture-step {
  position: relative;
  min-height: 8.25rem;
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.005));
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1rem 0.9rem;
}

.architecture-step:not(:last-child)::after {
  content: "\2192";
  position: absolute;
  top: 50%;
  right: -0.69rem;
  z-index: 1;
  width: 0.6rem;
  transform: translateY(-50%);
  color: var(--gold);
  font-size: 0.85rem;
  line-height: 1;
  text-align: center;
}

.architecture-step-num {
  color: var(--gold);
  font-family: var(--serif);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
}

.architecture-step strong {
  display: block;
  margin-top: 0.65rem;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 0.98rem;
  font-weight: 400;
  line-height: 1.25;
}

.architecture-step small {
  display: block;
  margin-top: auto;
  padding-top: 0.7rem;
  color: var(--ink-muted);
  font-size: 0.7rem;
  line-height: 1.45;
}

@media (max-width: 740px) {
  .architecture-flow-grid {
    grid-template-columns: 1fr;
  }

  .architecture-step {
    min-height: 0;
  }

  .architecture-step small {
    margin-top: 0.55rem;
    padding-top: 0;
  }

  .architecture-step:not(:last-child)::after {
    content: "\2193";
    top: auto;
    right: auto;
    bottom: -0.7rem;
    left: 50%;
    transform: translateX(-50%);
  }
}

#creds-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  background: var(--bg-soft);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 2rem 2.25rem;
  max-width: 620px;
  width: calc(100vw - 3rem);
  max-height: 80vh;
  overflow-y: auto;
}

#creds-modal::backdrop {
  background: rgba(4, 5, 8, 0.75);
  backdrop-filter: blur(3px);
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.modal-head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.6rem;
}

.modal-close {
  background: none;
  border: none;
  color: var(--ink-muted);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
}

.modal-close:hover {
  color: var(--ink);
}

.cert-list {
  list-style: none;
  padding: 0;
}

.cert-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}

.cert-list li:last-child {
  border-bottom: none;
}

.cert-list strong {
  display: block;
  font-weight: 500;
  font-size: 0.98rem;
}

.cert-list span {
  display: block;
  color: var(--ink-faint);
  font-size: 0.85rem;
  margin-top: 0.15rem;
}

.cert-list .cred-id {
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  opacity: 0.7;
  margin-top: 0.25rem;
}

.cert-list a {
  color: var(--gold);
  text-decoration: none;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0.45rem 0.9rem;
  white-space: nowrap;
  transition: border-color 0.3s, color 0.3s;
}

.cert-list a:hover {
  border-color: var(--gold);
  color: var(--gold-bright);
}

/* ---- footer ---- */

.site-footer {
  border-top: 1px solid var(--line);
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 2rem 1.5rem 3rem;
  display: flex;
  justify-content: space-between;
  color: var(--ink-faint);
  font-size: 0.85rem;
}

.site-footer a {
  color: var(--ink-faint);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--gold-bright);
}
/* css/workspace.css */
/* Featured project and its interactive architectural explanation. */
.feature-heading{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.feature-heading>span{font-size:.72rem;color:var(--ink-muted)}
.workspace-feature{position:relative;display:grid;grid-template-columns:1.08fr 1fr;width:100%;padding:0;overflow:hidden;text-align:left;color:var(--ink);font-family:var(--sans);background:linear-gradient(120deg,#14151a,#0a0d11 70%);border:1px solid #414037;border-radius:2px;cursor:pointer;transition:border-color .25s,box-shadow .25s}
.workspace-feature:hover{border-color:var(--gold);box-shadow:0 16px 60px #0004}
.workspace-feature:focus-visible,.workspace-modal button:focus-visible,.workspace-panel:focus-visible{outline:2px solid var(--gold-bright);outline-offset:5px}
.feature-copy{display:flex;flex-direction:column;align-items:flex-start;padding:3rem 0 3rem 3rem;z-index:1}
.feature-eyebrow{display:flex;align-items:center;gap:.6rem;color:#b6cbbf;text-transform:uppercase;letter-spacing:.12em;font-size:.65rem;line-height:1.6}
.status-dot{display:inline-block;flex:none;width:6px;height:6px;border-radius:50%;background:#a8cbbb;box-shadow:0 0 10px #8fb3a830}
.feature-title{display:block;font-family:var(--serif);font-size:clamp(2.6rem,5vw,4.2rem);font-weight:300;line-height:1.07;letter-spacing:-.035em;margin:1.65rem 0 1.35rem}
.feature-period{color:var(--gold-bright)}
.feature-deck{font-size:1.05rem;color:var(--gold-bright);line-height:1.5;margin-bottom:.6rem}
.feature-description{display:block;font-size:.92rem;line-height:1.8;color:#adb1bc;max-width:355px}
.feature-action{display:flex;align-items:center;gap:2rem;margin-top:2rem;font-size:.8rem;font-weight:500;color:var(--ink);border-bottom:1px solid #897b5c;padding-bottom:.65rem}
.feature-action>span{font-size:1.4rem;line-height:1;transition:transform .25s}
.workspace-feature:hover .feature-action>span{transform:translate(3px,-3px)}
.feature-map{display:flex;align-items:center;padding:1rem 1rem 0 0;min-width:0}
.feature-map svg{display:block;width:100%;height:auto;overflow:visible}
.map-center{fill:var(--ink);font:24px var(--serif)}
.map-small{fill:#a7a89f;font:9px var(--sans);letter-spacing:1.8px}
.map-label{fill:#bfcac2;font:13px var(--sans)}
.feature-trace{stroke-dashoffset:0;opacity:.6}
.workspace-feature:hover .feature-trace,.workspace-feature:focus-visible .feature-trace{animation:feature-trace 3s ease-out 1 both}
@keyframes feature-trace{to{stroke-dashoffset:-100}}
.feature-footer{grid-column:1/-1;display:flex;justify-content:space-between;gap:1rem;padding:1rem 2.5rem;border-top:1px solid #ffffff12;color:#acaea8;font-size:.66rem;letter-spacing:.06em}
.feature-footer>span:last-child{color:var(--gold-bright)}
.feature-footer>span:last-child span{margin-left:1.5rem;font-size:1rem}
html.workspace-is-open{overflow:hidden;scrollbar-gutter:stable}
#project-modal.workspace-modal{width:min(1120px,calc(100vw - 3rem));max-width:1120px;max-height:calc(100dvh - 3rem);padding:0;border:1px solid #494739;border-radius:4px;background:#0c0f13;scrollbar-gutter:stable;overscroll-behavior:contain;scroll-behavior:auto}
#project-modal.workspace-modal::backdrop{background:#020406d9;backdrop-filter:blur(9px)}
.workspace-topbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:.65rem 2rem;background:#0c0f13f5;border-bottom:1px solid #ffffff12}
.workspace-wordmark{font-size:.67rem;text-transform:uppercase;letter-spacing:.16em;color:#b7b9bb}
.workspace-wordmark span{color:var(--gold);margin:0 .65rem}
.workspace-topbar .modal-close{display:grid;place-items:center;flex:none;width:44px;height:44px;border:1px solid #ffffff22;border-radius:50%;font-size:1.6rem;color:#d5c5a4;background:transparent;cursor:pointer}
.workspace-topbar .modal-close:hover{background:#ffffff0b;color:#fff}
.workspace-intro{display:grid;grid-template-columns:.95fr 1fr;gap:3rem;align-items:center;padding:2.25rem 2.5rem 2rem}
.workspace-kicker{display:block;font-size:.65rem;text-transform:uppercase;letter-spacing:.15em;color:#c8ae7e;line-height:1.7}
#project-modal.workspace-modal #project-modal-title{font-size:clamp(2.5rem,5vw,4rem);letter-spacing:-.045em;line-height:1.1;margin:.45rem 0 0;color:#f0e8d9}
.workspace-intro>p{font-size:.9rem;color:#b9bdc5;line-height:1.85;max-width:490px}
.workspace-tabs{display:flex;gap:1.6rem;padding:0 2.5rem;border-bottom:1px solid #ffffff18}
.workspace-tabs button{appearance:none;background:none;border:0;border-bottom:2px solid transparent;padding:.9rem 0;min-height:48px;font:500 .77rem var(--sans);color:#aeb5bf;cursor:pointer;white-space:nowrap}
.workspace-tabs button[aria-selected="true"]{color:var(--gold-bright);border-bottom-color:var(--gold-bright)}
.workspace-tabs button:hover{color:#f0e8d9}
.workspace-panel{padding:1.75rem 2.5rem 2.25rem}
.workspace-panel[hidden]{display:none}
.workspace-panel h3{font-family:var(--serif);font-weight:300;color:#f0e8d9;line-height:1.3;font-size:1.5rem}
.system-heading{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem}
.system-heading p{font-size:.75rem;color:#aab2ba;margin-top:.4rem}
.diagram-label{font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:#b0b9b8;white-space:nowrap}
.system-explorer{display:grid;grid-template-columns:1fr 245px;border:1px solid #ffffff19;min-height:352px;background:radial-gradient(ellipse at 38% 55%,#a58a4b09,transparent 62%)}
.system-map{position:relative;min-height:352px;background-image:radial-gradient(#ffffff12 .65px,transparent .65px);background-size:18px 18px;isolation:isolate}
.system-connections{position:absolute;inset:0;width:100%;height:100%;overflow:visible;color:#737c6f;stroke:currentColor;stroke-width:1.4;pointer-events:none}
.system-connections path[data-edge]{transition:stroke .2s,opacity .2s}
.system-connections path.is-active{color:var(--gold-bright);stroke:var(--gold-bright);stroke-width:2.2;filter:drop-shadow(0 0 3px #e3c98f60)}
.system-connections path.is-tracing{animation:trace-in .65s ease-out both}
.system-connections path.is-tracing:not([stroke-dasharray]){stroke-dasharray:1;animation:draw-connection .65s ease-out both}
@keyframes trace-in{from{opacity:.1}to{opacity:1}}
@keyframes draw-connection{from{stroke-dashoffset:1;opacity:.2}to{stroke-dashoffset:0;opacity:1}}
.system-center{position:absolute;top:45%;left:50%;transform:translate(-50%,-15%);text-align:center;width:165px;pointer-events:none}
.system-center span{font-size:.7rem;color:#b0b8b1}
.system-center strong{display:block;font:300 1.1rem var(--serif);color:#d6c7a8}
.system-node{position:absolute;transform:translate(-50%,-50%);width:126px;min-height:78px;padding:.65rem .6rem;border:1px solid #4d5853;border-radius:3px;background:#101619;cursor:pointer;font-family:var(--sans);color:#e1e9e3;transition:background .2s,border-color .2s,box-shadow .2s}
.system-node>span{position:absolute;top:7px;left:8px;font-size:.5rem;color:#9caaa1}
.system-node strong{display:block;font-size:.78rem;font-weight:500}
.system-node small{display:block;margin-top:.3rem;font-size:.6rem;color:#b4bcb7}
.system-node:hover{border-color:#b6ccb8;background:#172022}
.system-node[aria-pressed="true"]{background:#27251b;border-color:var(--gold-bright);box-shadow:0 0 25px #c9a86a13;color:#f9e8c4}
.node-idea{left:18%;top:31%}.node-context{left:50%;top:13%}.node-tools{left:82%;top:31%}.node-checks{left:77%;top:79%}.node-work{left:23%;top:79%}
.node-detail{border-left:1px solid #ffffff16;padding:1.65rem 1.35rem;display:flex;flex-direction:column;background:#11161980}
.detail-number{font-size:.64rem;letter-spacing:.12em;color:#c8ae7e}
.node-detail h4{font-family:var(--serif);font-size:1.3rem;font-weight:300;line-height:1.4;margin:1rem 0 .75rem;color:#eee5d5}
.node-detail p{font-size:.77rem;line-height:1.85;color:#b9c1c8}
.node-detail .node-principle{padding-top:1rem;margin-top:auto;color:#bdcdbf;font-size:.7rem}
.walkthrough{margin-top:1.3rem}
.walkthrough-top{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.walkthrough-top p{font-size:.76rem;color:#adb5bf;margin-top:.2rem}
.scenario-controls{display:flex;gap:.25rem;flex-wrap:wrap}
.scenario-controls button{background:transparent;color:#bdc4cc;border:1px solid #ffffff22;padding:.5rem .7rem;min-height:44px;font:400 .7rem var(--sans);cursor:pointer;border-radius:2px}
.scenario-controls button[aria-pressed="true"]{background:#202a29;border-color:#8fb3a8;color:#d4e9df}
.scenario-controls button:hover{border-color:#b7c3bd}
.walkthrough-story{display:flex;align-items:center;justify-content:space-between;gap:2rem;min-height:139px;margin-top:1rem;padding:1.1rem 1.4rem;background:#14181d;border-left:2px solid #8fb3a8}
#step-count{font-size:.62rem;letter-spacing:.12em;color:#9ab9ad}
.walkthrough-story h4{font-size:.93rem;font-weight:500;margin:.3rem 0}
.walkthrough-story p{font-size:.8rem;line-height:1.75;color:#b6bec8;max-width:620px}
#walkthrough-next{flex:none;display:flex;align-items:center;gap:1.5rem;min-height:44px;padding:.65rem .8rem;background:transparent;border:1px solid #7c7563;color:#e3c98f;font:500 .73rem var(--sans);cursor:pointer}
#walkthrough-next:hover{background:#e3c98f12}
.walkthrough-track{display:flex;gap:5px;margin-top:8px}
.walkthrough-track span{height:2px;flex:1;background:#ffffff14}
.walkthrough-track .is-current{background:#a4c6b7}
.example-note{font-size:.64rem;color:#a1a9b2;line-height:1.8;margin-top:.85rem;max-width:820px}
.purpose-layout{display:grid;grid-template-columns:1.5fr 1fr;gap:3rem;padding:1rem 0 2rem}
.purpose-main h3{font-size:2.15rem;max-width:480px;margin:.5rem 0 1.35rem}
.purpose-main>p:not(.workspace-kicker){font-size:.9rem;line-height:1.9;color:#b9bec6;margin-top:1rem}
.purpose-aside{align-self:start;padding:1.75rem;border-top:1px solid #8d7c58;border-bottom:1px solid #ffffff20;background:#c9a86a07}
.purpose-aside h4{font:300 1.65rem/1.45 var(--serif);color:#e3c98f;margin:.65rem 0 1rem}
.purpose-aside>p{font-size:.8rem;color:#b9bec6;line-height:1.85}
.principle-rows>div{display:grid;grid-template-columns:32px 1fr 1.8fr;gap:1.2rem;padding:1.2rem 0;border-top:1px solid #ffffff17;align-items:baseline}
.principle-rows>div>span{font-size:.7rem;color:var(--gold)}
.principle-rows h4{font-size:.9rem;font-weight:400;color:#e3e0d7}
.principle-rows p{font-size:.8rem;line-height:1.85;color:#b9bec6}
.progress-intro{display:flex;justify-content:space-between;align-items:end;gap:2rem;margin:.5rem 0 2rem}
.progress-intro h3{font-size:1.9rem}
.progress-intro p{font-size:.68rem;color:#a9b1bb}
.progress-intro time{display:block;color:#d7c9aa}
.workspace-timeline{padding:0;list-style:none}
.workspace-timeline li{position:relative;display:grid;grid-template-columns:155px 1fr;gap:1.5rem;padding:0 0 1.9rem 2rem;border-left:1px solid #596355;margin-left:5px}
.timeline-dot{position:absolute;width:11px;height:11px;background:#a9cbbb;border:3px solid #0c0f13;outline:1px solid #a9cbbb;border-radius:50%;left:-6px;top:6px}
.workspace-timeline li:nth-child(n+3) .timeline-dot{background:#0c0f13;outline-color:#c9a86a}
.timeline-stage{font-size:.67rem;text-transform:uppercase;letter-spacing:.08em;color:#a9cbbb;padding-top:3px}
.workspace-timeline li:nth-child(n+3) .timeline-stage{color:#d8bd89}
.workspace-timeline h4{font:300 1.25rem/1.4 var(--serif);color:#ebe3d3;margin-bottom:.45rem}
.workspace-timeline p{font-size:.82rem;color:#b9bec6;line-height:1.85}
.progress-footnote{padding:1.25rem 1.5rem;background:#15191e;border:1px solid #ffffff13}
.progress-footnote strong{font-size:.8rem;font-weight:500;color:#ddd2bb}
.progress-footnote p{font-size:.8rem;color:#b9bec6;line-height:1.8;margin-top:.4rem}
.workspace-bottom{display:flex;justify-content:space-between;gap:1rem;padding:1.25rem 2.5rem;border-top:1px solid #ffffff16;color:#a6aea9;font-size:.63rem}
@media(max-width:900px){.system-explorer{grid-template-columns:1fr 210px}.node-detail{padding:1.2rem}.system-node{width:108px}.system-map{min-height:340px}.workspace-intro{gap:1.5rem}.walkthrough-top{align-items:start;flex-direction:column}.purpose-layout{gap:1.5rem}}
@media(max-width:680px){.feature-heading>span{display:none}.workspace-feature{grid-template-columns:1fr}.feature-copy{padding:2rem 1.6rem 0}.feature-title{font-size:3.1rem;margin:1.3rem 0 1rem}.feature-description{max-width:100%}.feature-action{margin-top:1.2rem}.feature-map{padding:0;justify-content:center;margin:-.2rem 0 -1rem}.feature-map svg{width:min(100%,380px)}.feature-footer{padding:1rem 1.5rem;font-size:.6rem}.feature-footer>span:first-child{max-width:165px}.feature-footer>span:last-child{align-self:center;white-space:nowrap}.feature-footer>span:last-child span{margin-left:.4rem}#project-modal.workspace-modal{width:calc(100vw - 1rem);max-height:calc(100dvh - 1rem)}.workspace-topbar{padding:.5rem 1rem}.workspace-intro{grid-template-columns:1fr;padding:1.5rem 1.2rem;gap:1rem}.workspace-intro>p{font-size:.85rem}.workspace-tabs{padding:0 1.2rem;gap:1.25rem}.workspace-tabs button{font-size:.7rem}.workspace-panel{padding:1.4rem 1.2rem 1.5rem}.system-heading{align-items:start;flex-direction:column;gap:.5rem}.system-heading h3{font-size:1.3rem}.system-explorer{grid-template-columns:1fr}.system-map{min-height:320px}.system-node{width:96px;min-height:72px;padding:.8rem .3rem .6rem}.system-node>span{font-size:.45rem;top:5px}.system-node strong{font-size:.68rem}.system-node small{font-size:.53rem}.node-detail{border-left:0;border-top:1px solid #ffffff16;padding:1.2rem;min-height:218px}.node-detail h4{margin:.5rem 0;font-size:1.3rem}.node-detail .node-principle{padding-top:.7rem}.system-center{width:138px}.system-center strong{font-size:1rem}.walkthrough-story{align-items:start;flex-direction:column;gap:1rem;min-height:235px;padding:1rem}.walkthrough-story p{font-size:.78rem}#walkthrough-next{align-self:flex-end}.scenario-controls{gap:.3rem}.scenario-controls button{font-size:.63rem;padding:.45rem .55rem}.purpose-layout{grid-template-columns:1fr;gap:1.5rem;padding-top:.3rem}.purpose-main h3{font-size:1.8rem}.purpose-aside{padding:1.2rem}.principle-rows>div{grid-template-columns:25px 1fr;gap:.6rem}.principle-rows p{grid-column:2}.progress-intro{align-items:start;flex-direction:column;gap:1rem}.progress-intro h3{font-size:1.7rem}.workspace-timeline li{grid-template-columns:1fr;gap:.35rem;padding-left:1.4rem}.workspace-bottom{padding:1rem 1.2rem;flex-direction:column;gap:.4rem}}
@media(max-width:360px){.workspace-tabs{gap:.85rem}.workspace-tabs button{font-size:.64rem}.system-node{width:82px}.system-node small{font-size:.48rem}.system-center{width:110px}.system-center strong{font-size:.85rem}.feature-title{font-size:2.75rem}.feature-footer{padding:1rem}.scenario-controls button{font-size:.59rem;padding:.45rem}.workspace-panel{padding-left:1rem;padding-right:1rem}}
@media(prefers-reduced-motion:reduce){.workspace-feature,.workspace-feature *,.workspace-modal *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Certification context belongs with the guide's download action. */
.playbook-action-row{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.pb-cert-info{display:inline-flex;align-items:center;gap:.5rem;min-width:44px;min-height:44px;padding:0;background:transparent;border:0;color:#b4c8c1;font:400 .72rem var(--sans);cursor:pointer}
.pb-help-icon{display:grid;place-items:center;flex:none;width:38px;height:38px;border:1px solid #7f9a90;border-radius:50%;color:#b8dfd2;font-size:1.05rem;font-weight:500}
.pb-cert-info:hover{color:#e5f5ef}.pb-cert-info:hover .pb-help-icon{border-color:#b8dfd2;background:#3fbfa312}
.pb-cert-info:focus-visible,.pb-certs-modal button:focus-visible{outline:2px solid #9de3d0;outline-offset:4px}
html.cert-info-is-open{overflow:hidden;scrollbar-gutter:stable}
.pb-certs-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;width:min(760px,calc(100vw - 2rem));max-width:760px;max-height:calc(100dvh - 2rem);padding:0;border:1px solid #4d8c7c;border-radius:12px;background:#0d1416;color:var(--ink);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#64877a #0d1416}
.pb-certs-modal::backdrop{background:#020609d9;backdrop-filter:blur(7px)}
.pb-certs-header{position:sticky;top:0;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.65rem 1.5rem;border-bottom:1px solid #ffffff15;background:#0d1416}
.pb-certs-header>span{font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;color:#abd2c6}
.pb-certs-header .modal-close{display:grid;place-items:center;flex:none;width:44px;height:44px;background:transparent;border:1px solid #668b7f;border-radius:50%;color:#c6e2d8;cursor:pointer;font-size:1.5rem}
.pb-certs-content{padding:1.75rem 2rem 2rem}
#pb-certs-title{font:300 clamp(1.7rem,4vw,2.3rem)/1.25 var(--serif);letter-spacing:-.02em;margin-bottom:1.75rem;color:#e3ede6}
.pb-certs-modal .pb-certs-grid p,.pb-certs-modal .pb-certs-limit{color:#b7c1c8;line-height:1.85}
@media(max-width:1000px){.pb-help-label{display:none}.pb-cert-info{justify-content:center;flex:none}.playbook-action-row{flex-wrap:nowrap}.playbook-action-row .btn-playbook{padding:.85rem 1rem;font-size:.82rem}}
@media(min-width:721px) and (max-width:900px){.playbook-inner{grid-template-columns:1fr;gap:2.25rem}.playbook-cover{order:-1;width:100%;max-width:300px;margin:0 auto}}
@media(max-width:620px){.playbook-action-row{gap:.65rem}.playbook-action-row .btn-playbook{padding:.85rem 1rem;font-size:.82rem}.pb-certs-header{padding:.6rem 1rem}.pb-certs-content{padding:1.4rem 1.25rem 1.5rem}.pb-certs-header>span{max-width:190px}.pb-certs-modal .pb-certs-grid p,.pb-certs-modal .pb-certs-limit{font-size:.86rem}}

/* One circular coordinate system, with motion following the actual flow. */
.system-map{min-height:450px;background-image:radial-gradient(#c9a86a0b .7px,transparent .7px);background-size:20px 20px}
.system-explorer{background:radial-gradient(ellipse at 35% 50%,#bd965b0b,transparent 65%)}
.orbit-ring{stroke:#b5a078;stroke-width:1}.orbit-ring-inner{opacity:.2;stroke-dasharray:2 8}.orbit-ring-outer{opacity:.12}.orbit-ring-main{opacity:.1}
.system-connections{color:#9ba58f;stroke-width:1.5}
.system-connections path.is-active{stroke:#f1d598;stroke-width:2;filter:drop-shadow(0 0 5px #d9b97888)}
.flow-particles{opacity:0;pointer-events:none}.flow-particles.is-visible{opacity:1}.flow-aura{fill:#edc879;opacity:.16;stroke:none;filter:blur(2px)}.flow-spark{fill:#fff2c7;stroke:none;filter:drop-shadow(0 0 5px #ffdaa0)}
.system-center{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;top:50%;left:50%;transform:translate(-50%,-50%);width:148px;height:148px;border:1px solid #99835a70;border-radius:50%;background:radial-gradient(circle,#a8802922,#141716 65%,#0c0f13);font-family:var(--sans);cursor:pointer;pointer-events:auto;box-shadow:0 0 40px #c9a86a0a,inset 0 0 25px #c9a86a0a;transition:border-color .2s,box-shadow .2s}
.system-center:hover{border-color:#e3c98f;box-shadow:0 0 35px #c9a86a22,inset 0 0 22px #c9a86a16}
.system-center .flow-symbol{font-size:1rem;color:#ecd5a5;line-height:1.5}.system-center strong{font:400 .82rem var(--sans);color:#efdfbf}.system-center small{font-size:.6rem;color:#b9bdae}
.flow-playing .system-center{border-color:#d9bf88;box-shadow:0 0 45px #c9a86a20}
.flow-playing .flow-symbol{font-size:0}.flow-playing .flow-symbol:after{content:'Ⅱ';font-size:1.15rem}
.system-node{box-shadow:0 8px 22px #0002;background:#11181b}
.system-node[aria-pressed="true"]{box-shadow:0 0 24px #dbbb7130,inset 0 0 18px #e3c98f0a;background:#2c291d;border-color:#efd69e}
#project-modal[open].workspace-modal{animation:workspace-arrive .42s cubic-bezier(.2,.8,.2,1) both}
#project-modal[open] .system-node{animation:node-arrive .55s ease-out both;animation-delay:calc(var(--node-order,0)*85ms + 100ms)}
#project-modal[open] .orbit-ring-outer{animation:orbit-arrive 1.1s ease-out both}
#project-modal[open] .workspace-intro{animation:copy-arrive .55s ease-out both}
@keyframes workspace-arrive{from{opacity:0;translate:0 15px}to{opacity:1;translate:0 0}}
@keyframes node-arrive{from{opacity:0;filter:blur(5px)}to{opacity:1;filter:blur(0)}}
@keyframes orbit-arrive{from{opacity:0;stroke-dasharray:1 12}to{opacity:.12;stroke-dasharray:1 0}}
@keyframes copy-arrive{from{opacity:.1}to{opacity:1}}
@media(max-width:900px){.system-center{width:126px;height:126px}.system-center strong{font-size:.75rem}.system-node{min-height:76px}}
@media(max-width:680px){.system-map{min-height:370px}.system-center{width:102px;height:102px}.system-center strong{font-size:.65rem}.system-center small{font-size:.5rem}.system-node{min-height:68px}.node-detail{min-height:218px}.system-center .flow-symbol{font-size:.85rem}}
@media(max-width:360px){.system-center{width:76px;height:76px;gap:.2rem}.system-center strong{font-size:.52rem}.system-center small{font-size:.42rem}.system-node{width:78px;min-height:64px}.system-node strong{font-size:.64rem}.system-node small{font-size:.46rem}}
@media(prefers-reduced-motion:reduce){#project-modal[open].workspace-modal,#project-modal[open] .system-node,#project-modal[open] .orbit-ring-outer,#project-modal[open] .workspace-intro{animation:none!important}.flow-particles{display:none}.system-center{transition:none!important}}

/* The three views share a palette, but each explains the work in its own way. */
.workspace-top-actions{display:flex;align-items:center;gap:1rem}
#project-modal[data-view="purpose"] .workspace-intro,#project-modal[data-view="progress"] .workspace-intro{grid-template-columns:1fr;padding:1.2rem 2.5rem;gap:0}
#project-modal[data-view="purpose"] .workspace-intro>p,#project-modal[data-view="progress"] .workspace-intro>p{display:none}
#project-modal[data-view="purpose"] #project-modal-title,#project-modal[data-view="progress"] #project-modal-title{font-size:2rem;margin-top:.3rem}
.motion-setting{display:flex;align-items:center;justify-content:center;gap:.45rem;min-height:44px;padding:.4rem .5rem;border:0;background:transparent;color:#b9c1ba;font:400 .62rem var(--sans);cursor:pointer}
.motion-setting>span:first-child{width:5px;height:5px;border-radius:50%;background:#737b75}
.motion-setting[aria-pressed="true"]>span:first-child{background:#b8d8c1;box-shadow:0 0 9px #b8d8c177}
.motion-setting:disabled{cursor:default;color:#a1aaa4}
.system-center{cursor:default;pointer-events:none;gap:.2rem}
.system-center .core-symbol{width:30px;height:30px;fill:#e9cf94;margin-bottom:.4rem;filter:drop-shadow(0 0 10px #e9cf9450)}
.system-center strong{font:300 1.16rem var(--serif)}
.system-center>span{font-size:.65rem;color:#b7c4b8}
.flow-tail{fill:#e6ca8d;opacity:.4;stroke:none}
.flow-running .system-center{box-shadow:0 0 45px #c9a86a1c,inset 0 0 30px #c9a86a0e}
.system-node.is-passing{border-color:#ddc68f;box-shadow:0 0 22px #ddc68f33}
.workspace-panel:not([hidden]){animation:panel-arrive .45s ease-out both}
@keyframes panel-arrive{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
.purpose-hero{display:grid;grid-template-columns:.95fr 1.15fr;gap:2.5rem;align-items:center;padding:.75rem 0 2rem}
.purpose-story h3{font-size:clamp(1.8rem,3vw,2.65rem);line-height:1.2;letter-spacing:-.025em;margin:.8rem 0 1.35rem}
.workspace-panel h3 em,.purpose-goal h4 em,.next-horizon h4 em{font-weight:300;color:#d9bf88}
.purpose-story>p:last-child{font-size:.86rem;color:#b9bec6;line-height:1.9}
.continuity-demo{border:1px solid #8b79523d;background:radial-gradient(ellipse at 55% 48%,#ac834b15,transparent 70%),#101419;overflow:hidden;border-radius:6px}
.continuity-toolbar{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.6rem 1rem;border-bottom:1px solid #ffffff12}
.continuity-toolbar>span{color:#a9b4af;font-size:.64rem}
.continuity-toolbar>div{display:flex;gap:.25rem}
.continuity-toolbar button{min-height:44px;border:0;border-radius:3px;padding:.5rem .65rem;background:transparent;color:#b6bcb9;font:400 .65rem var(--sans);cursor:pointer}
.continuity-toolbar button[aria-pressed="true"]{background:#b8d3bc16;color:#deebdb}
.continuity-scene{position:relative;height:300px;isolation:isolate;background-image:radial-gradient(#a1baa019 .65px,transparent .65px);background-size:18px 18px}
.continuity-lines{position:absolute;inset:0;width:100%;height:100%;stroke:#b9d2b1;stroke-width:1;fill:#b9d2b1;opacity:0;transition:opacity .6s .15s}
.continuity-lines path{fill:none;stroke-dasharray:220;stroke-dashoffset:220;transition:stroke-dashoffset .7s .1s}
.fragment{position:absolute;display:flex;flex-direction:column;align-items:start;justify-content:center;width:132px;height:82px;padding:.7rem .85rem;border:1px solid #777465;border-radius:4px;background:linear-gradient(130deg,#20262a,#151c21);box-shadow:0 8px 24px #0004;transition:left .75s cubic-bezier(.2,.8,.2,1),top .75s cubic-bezier(.2,.8,.2,1),transform .75s cubic-bezier(.2,.8,.2,1),border-color .6s,background .6s}
.fragment-icon{position:absolute;right:10px;top:7px;font-size:1rem;color:#a9946c}
.fragment strong{font:400 .77rem var(--sans);color:#e3e7df;margin-top:.6rem}
.fragment small{font-size:.55rem;color:#aab6b0;margin-top:.4rem}
.fragment-notes{left:21%;top:24%;transform:translate(-50%,-50%) rotate(-10deg)}
.fragment-sources{left:72%;top:21%;transform:translate(-50%,-50%) rotate(9deg)}
.fragment-decisions{left:27%;top:74%;transform:translate(-50%,-50%) rotate(7deg)}
.fragment-next{left:76%;top:77%;transform:translate(-50%,-50%) rotate(-7deg)}
.continuity-question{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font:300 1.3rem var(--serif);color:#b4ada0;white-space:nowrap;transition:opacity .25s}
[data-state="connected"] .continuity-question{opacity:0}
[data-state="connected"] .continuity-lines{opacity:.7}
[data-state="connected"] .continuity-lines path{stroke-dashoffset:0}
[data-state="connected"] .fragment{transform:translate(-50%,-50%);border-color:#9bb79c;background:linear-gradient(130deg,#263630,#16251f)}
[data-state="connected"] .fragment-notes{left:25%;top:27%}
[data-state="connected"] .fragment-sources{left:75%;top:27%}
[data-state="connected"] .fragment-decisions{left:25%;top:72%}
[data-state="connected"] .fragment-next{left:75%;top:72%}
.continuity-caption{padding:1rem 1.25rem 0;min-height:107px;border-top:1px solid #ffffff12}
.continuity-caption strong{font-size:.8rem;font-weight:400;color:#d6dfd3;line-height:1.5}
.continuity-caption p{font-size:.7rem;line-height:1.8;color:#aeb9b4;margin-top:.35rem}
.visual-note{display:block;padding:.6rem 1.25rem 1rem;font-size:.57rem;letter-spacing:.08em;text-transform:uppercase;color:#a5b4a8}
.purpose-goal{position:relative;display:grid;grid-template-columns:1.15fr 1fr;gap:.75rem 3rem;align-items:center;padding:2.5rem 2rem;margin:1rem 0 2rem;border-top:1px solid #c4b58f70;border-bottom:1px solid #c4b58f25;background:radial-gradient(ellipse at 10% 50%,#c9a86a0c,transparent 70%)}
.purpose-goal>.workspace-kicker{grid-column:1/-1}
.purpose-goal h4,.next-horizon h4{font:300 clamp(1.6rem,2.8vw,2.15rem)/1.25 var(--serif);letter-spacing:-.025em;color:#e9e4d9}
.purpose-goal>p,.next-horizon>p{font-size:.82rem;line-height:1.9;color:#b9c1c4}
.principle-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.principle-cards article{position:relative;padding:1.7rem 1.3rem;border:1px solid #ffffff1b;border-radius:4px;background:linear-gradient(145deg,#1d222566,transparent);overflow:hidden;transition:border-color .25s,transform .25s}
.principle-cards article:hover{border-color:#bba77475;transform:translateY(-4px)}
.principle-glyph{display:block;font-size:2.4rem;line-height:1;margin-bottom:1.6rem;color:#d2bf96;font-weight:300}
.principle-cards h4{font:300 1.3rem var(--serif);color:#e9e1d0;margin:.7rem 0}
.principle-cards p{font-size:.76rem;line-height:1.85;color:#b4bdc2}
.progress-intro{margin:.75rem 0 2rem;align-items:center}
.progress-intro h3{font-size:clamp(1.8rem,3.2vw,2.75rem);line-height:1.2;letter-spacing:-.025em;margin-top:.7rem}
.progress-intro>p{padding-left:1rem;border-left:1px solid #c9a86a60;line-height:1.8;flex:none}
.development-map{border:1px solid #b8c9a830;border-radius:6px;overflow:hidden;background:#11161b}
.development-stages{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid #b8c9a820}
.development-stages button{position:relative;display:flex;align-items:start;flex-direction:column;padding:1.2rem 1.35rem;min-height:105px;gap:.4rem;border:0;border-right:1px solid #ffffff13;background:transparent;text-align:left;cursor:pointer;color:#b4c2bd;transition:background .25s}
.development-stages button:last-child{border-right:0}
.development-stages button:after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;transform:scaleX(0);transform-origin:left;background:#c8dabb;transition:transform .35s}
.development-stages button[aria-pressed="true"]{background:linear-gradient(145deg,#abc9a51e,#abc9a506)}
.development-stages button[aria-pressed="true"]:after{transform:scaleX(1)}
.development-stages button>span{font-size:.65rem;color:#b4a98d;letter-spacing:.1em}
.development-stages button strong{font:400 .86rem var(--sans);color:#e0e8db}
.development-stages button small{font:400 .61rem var(--sans);color:#aebcaf}
.development-body{display:grid;grid-template-columns:1fr 1.12fr;align-items:stretch}
.build-visual{position:relative;min-height:400px;overflow:hidden;perspective:850px;background:radial-gradient(ellipse at 50% 55%,#93b38d1e,transparent 68%)}
.build-grid{position:absolute;inset:0;background-image:linear-gradient(#a7c49d0c 1px,transparent 1px),linear-gradient(90deg,#a7c49d0c 1px,transparent 1px);background-size:32px 32px;transform:perspective(400px) rotateX(45deg) scale(1.3);mask-image:radial-gradient(ellipse,#000,transparent 70%)}
.build-layer{position:absolute;left:50%;width:210px;height:135px;border:1px solid #91a48665;border-radius:7px;background:linear-gradient(130deg,#29332cbb,#142019ee);transform:translateX(-50%) rotateX(53deg) rotateZ(-32deg);box-shadow:-6px 12px 0 #0b111299,-7px 13px 0 #8ba17930;transition:transform .65s cubic-bezier(.2,.8,.2,1),background .45s,border-color .45s,box-shadow .45s;opacity:.75}
.build-layer span{position:absolute;left:18px;bottom:18px;color:#ced8c2;font:400 .75rem var(--sans);letter-spacing:.04em}
.layer-foundation{top:223px;z-index:1}.layer-continuity{top:165px;z-index:2}.layer-portability{top:107px;z-index:3;border-style:dashed}.layer-exploration{top:49px;z-index:4;border-style:dashed}
[data-active-stage="foundation"] .layer-foundation,[data-active-stage="continuity"] .layer-continuity,[data-active-stage="portability"] .layer-portability,[data-active-stage="exploration"] .layer-exploration{transform:translateX(-50%) translateY(-8px) rotateX(53deg) rotateZ(-32deg);border-color:#d6c18e;background:linear-gradient(135deg,#7e7248dd,#45432bef);box-shadow:-6px 14px 0 #111611,-7px 15px 0 #d6c18e80,0 0 45px #d6c18e20;opacity:1}
.build-caption{position:absolute;left:0;right:0;bottom:1.4rem;text-align:center;color:#a8b7aa;font-size:.62rem}
.development-detail{padding:2.5rem 2.1rem;display:flex;flex-direction:column;justify-content:center;border-left:1px solid #ffffff12;min-height:400px}
.development-status{align-self:start;font-size:.64rem;text-transform:uppercase;letter-spacing:.1em;color:#cad6b9;padding:.4rem .6rem;background:#b2c69f13;border:1px solid #b2c69f40;border-radius:3px}
.development-detail h4{font:300 2rem/1.22 var(--serif);color:#e8e2d3;margin:1.2rem 0 .8rem;letter-spacing:-.02em}
.development-detail>p{font-size:.83rem;line-height:1.9;color:#b7c1c4}
.development-proof{margin-top:1.4rem;padding-top:1rem;border-top:1px solid #c9a86a30}
.development-proof>span{color:#d1bc91;font-size:.61rem;text-transform:uppercase;letter-spacing:.1em}
.development-proof p{font-size:.73rem;line-height:1.8;color:#b2bdb8;margin-top:.45rem}
.next-horizon{display:grid;grid-template-columns:1.1fr 1fr;gap:3rem;align-items:center;padding:2.5rem 0;margin-bottom:.5rem}
.next-horizon h4{margin-top:.75rem}
.progress-footnote{background:transparent;border-left:2px solid #aa9974;border-top:0;border-right:0;border-bottom:0;padding:.5rem 1.3rem}
.workspace-modal.motion-off,.motion-off *,.motion-off *:before,.motion-off *:after{animation:none!important;transition:none!important}
@media(max-width:900px){.purpose-hero{grid-template-columns:1fr;gap:1.5rem}.purpose-story{max-width:620px}.purpose-story h3{font-size:2.4rem}.continuity-scene{height:300px}.fragment{width:150px;height:88px}.purpose-goal{gap:.75rem 1.5rem;padding:2rem 1.4rem}.principle-cards{gap:.65rem}.principle-cards article{padding:1.4rem 1rem}.principle-cards h4{font-size:1.2rem}.development-stages button{padding:1rem .8rem}.development-stages button strong{font-size:.77rem}.development-detail{padding:1.5rem}.development-detail h4{font-size:1.65rem}.build-layer{width:174px;height:118px}.next-horizon{gap:1.5rem}}
@media(max-width:680px){.workspace-top-actions{gap:.3rem}.motion-setting{font-size:.55rem;padding:.3rem}.workspace-wordmark{font-size:.57rem;letter-spacing:.1em}.workspace-wordmark span{margin:0 .35rem}.system-center .core-symbol{width:22px;height:22px;margin-bottom:.2rem}.system-center strong{font-size:.86rem}.system-center>span{font-size:.53rem}.purpose-story h3{font-size:2rem}.purpose-hero{padding-top:.3rem}.purpose-story>p:last-child{font-size:.82rem}.continuity-toolbar{padding:.5rem .6rem;gap:.25rem}.continuity-toolbar>span{font-size:.58rem}.continuity-toolbar button{font-size:.6rem;padding:.4rem .5rem}.continuity-scene{height:280px}.fragment{width:112px;height:78px;padding:.6rem}.fragment strong{font-size:.68rem}.fragment small{font-size:.5rem;line-height:1.4}.fragment-icon{font-size:.8rem}.fragment-notes{left:23%}.fragment-sources{left:73%}.fragment-decisions{left:25%}.fragment-next{left:74%}.continuity-question{font-size:1.1rem}.continuity-caption{min-height:134px;padding:.8rem 1rem 0}.visual-note{padding-left:1rem}.purpose-goal{grid-template-columns:1fr;gap:1rem;padding:1.6rem 1rem;margin-top:.2rem}.purpose-goal>.workspace-kicker{grid-column:auto}.principle-cards{grid-template-columns:1fr;gap:.8rem}.principle-cards article{padding:1.5rem}.principle-glyph{float:right;font-size:2rem;margin:0 0 1rem 1rem}.principle-cards h4{font-size:1.4rem}.principle-cards p{font-size:.8rem}.progress-intro{gap:1.2rem}.progress-intro h3{font-size:2rem}.development-stages{grid-template-columns:repeat(2,1fr)}.development-stages button{min-height:96px;padding:1rem}.development-stages button:nth-child(2){border-right:0}.development-stages button:nth-child(-n+2){border-bottom:1px solid #ffffff13}.development-body{grid-template-columns:1fr}.build-visual{min-height:290px}.build-layer{width:178px;height:105px}.layer-foundation{top:153px}.layer-continuity{top:110px}.layer-portability{top:67px}.layer-exploration{top:24px}.build-caption{bottom:.8rem}.development-detail{border-left:0;border-top:1px solid #ffffff12;min-height:365px;padding:1.5rem}.development-detail h4{font-size:1.8rem}.next-horizon{grid-template-columns:1fr;gap:1.25rem;padding:2rem 0}.next-horizon h4{font-size:1.85rem}}
@media(max-width:360px){.system-center .core-symbol{width:18px;height:18px}.system-center strong{font-size:.68rem}.system-center>span{font-size:.44rem}.fragment{width:98px;height:74px}.fragment strong{font-size:.61rem}.fragment small{font-size:.46rem}.continuity-toolbar>span{max-width:45px}.motion-setting{font-size:.49rem}.workspace-wordmark{font-size:.49rem}.purpose-story h3,.progress-intro h3{font-size:1.8rem}.development-stages button{padding:.85rem .7rem}}
@media(prefers-reduced-motion:reduce){.workspace-panel,.continuity-demo *,.principle-cards article,.development-map *{animation:none!important;transition:none!important}}
@media(max-width:680px){#project-modal[data-view="purpose"] .workspace-intro,#project-modal[data-view="progress"] .workspace-intro{padding:.8rem 1.2rem}#project-modal[data-view="purpose"] #project-modal-title,#project-modal[data-view="progress"] #project-modal-title{font-size:1.7rem}}
/* vendor/lenis/lenis.css */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}
/* css/polish.css */
/* Let the illustration and its caption occupy separate, predictable space. */
.build-visual{display:flex;flex-direction:column;justify-content:center;min-height:430px;perspective:none}
.build-stack{position:relative;flex:none;min-height:410px;width:100%;perspective:850px;isolation:isolate}
.build-caption{position:relative;inset:auto;flex:none;display:block;padding:12px 18px 22px;line-height:1.6;min-height:50px;font-size:.68rem;color:#c1cdbd}
.build-layer span{right:14px;line-height:1.5;font-size:.76rem;text-wrap:balance}
.workspace-topbar{background:#0c0f13;box-shadow:0 8px 22px #0002}
.system-node strong,.system-node small{line-height:1.4}
.fragment strong{line-height:1.4}
.fragment small{line-height:1.5}
.development-stages button strong,.development-stages button small{line-height:1.45}
.development-detail,.purpose-story,.purpose-goal>p,.next-horizon>p{min-width:0;overflow-wrap:break-word}

/* A light follows the pointer; the content and hit targets stay still. */
.surface-light{position:relative;isolation:isolate}
.surface-light:before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:radial-gradient(420px circle at var(--light-x,50%) var(--light-y,50%),rgb(var(--surface-rgb,218 193 142) / .15),transparent 68%);opacity:0;transition:opacity .35s}
.surface-light.is-lit:before,.surface-light:focus-visible:before{opacity:1}
.playbook-inner.surface-light{--surface-rgb:101 213 181}
.continuity-demo.surface-light,.contact-form.surface-light{--surface-rgb:164 203 184}
.pillar:nth-child(2){--surface-rgb:143 190 170}
.pillar:nth-child(3){--surface-rgb:146 177 215}
.pillar{border-color:#ffffff20;box-shadow:0 10px 30px #0002;transition:border-color .3s,box-shadow .3s,transform .3s}
.pillar:hover,.pillar:focus-visible{border-color:rgb(var(--surface-rgb,218 193 142) / .7);box-shadow:0 20px 50px #0005;transform:translateY(-5px)}
.pillar-num{display:inline-flex;align-items:center;gap:1rem}
.pillar-num:after{content:"";width:30px;height:1px;background:currentColor;opacity:.55;transition:width .3s}
.pillar:hover .pillar-num:after,.pillar:focus-visible .pillar-num:after{width:65px}
.pillar-link{display:inline-flex;align-items:center;gap:.7rem;transition:letter-spacing .25s,color .25s}
.pillar:hover .pillar-link,.principle-trigger:hover .pillar-link{letter-spacing:.16em;color:#f0d9a6}
.pillar:focus-visible,.principle-trigger:focus-visible,.btn:focus-visible,.site-header a:focus-visible{outline:2px solid #e3c98f;outline-offset:5px}
main>section>.kicker,.feature-heading>.kicker{display:flex;align-items:center;gap:1rem;line-height:1.65}
main>section>.kicker:before,.feature-heading>.kicker:before{content:"";display:block;width:24px;height:1px;flex:none;background:linear-gradient(90deg,#dbc48e,#dbc48e22)}
.connect>.kicker{justify-content:flex-start;text-align:left}
.hero h1 .line:last-child{background:linear-gradient(105deg,#f3e7cc 5%,#d3b77e 60%,#ac956b);background-clip:text;-webkit-background-clip:text;color:transparent}
.hero-cta .btn:hover{box-shadow:0 8px 30px #cfb17520}
.hero-cta .btn-playbook:hover{box-shadow:0 8px 30px #62d2b522}
.hero{overflow:hidden;overflow:clip}
.site-header nav{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:.5rem 2.25rem;min-width:0;margin-left:1.5rem}
.site-header nav a{position:relative;padding:.4rem 0;margin-left:0;white-space:nowrap}
@media(max-width:680px){.site-header nav{gap:.1rem .85rem;margin-left:1rem}.site-header nav a{font-size:.68rem;letter-spacing:.07em;line-height:1.5;min-height:32px}}
.site-header nav a:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:#d6bd85;transform:scaleX(0);transform-origin:left;transition:transform .25s}
.site-header nav a:hover:after,.site-header nav a:focus-visible:after{transform:scaleX(1)}
.monogram{background:linear-gradient(135deg,#c9a86a0c,transparent);border-color:#c9a86a35;box-shadow:inset 0 0 16px #c9a86a05}
.stats-band{background:linear-gradient(110deg,#c9a86a08,transparent 50%,#94b9aa08);border-color:#c9a86a25}
.stat{position:relative;padding:.5rem 0}
.stat-num{line-height:1.2}
.stat-label{color:#a2adba;line-height:1.65}
.stat:after{content:"";display:block;width:22px;height:2px;margin:.9rem auto 0;background:#bba27380;transition:width .3s,background .3s}
.stat:hover:after{width:52px;background:#e3c98f}
.playbook-inner{box-shadow:0 18px 70px #0004}
.playbook-help-row{position:absolute;right:1.25rem;top:1rem;display:flex;justify-content:flex-end;margin:0}
.playbook-inner{padding-top:5rem}
.playbook-help-row .pb-help-label{display:inline}
.playbook-help-row .pb-cert-info{gap:.65rem}
.hero-cta.hero-action-stack{display:grid;grid-template-columns:1fr;gap:12px;width:min(100%,320px);position:relative;isolation:isolate}
@media(max-width:820px){.hero-cta.hero-action-stack{margin-inline:auto}}
.hero-action-stack .btn{display:flex;align-items:center;justify-content:center;position:relative;width:100%;min-height:50px;font-size:.7rem;font-weight:500;letter-spacing:.035em;line-height:1.4;padding:.9rem .75rem;text-align:center;box-shadow:0 5px 18px #0003;transition:transform .38s cubic-bezier(.2,.8,.2,1),background .2s,border-color .2s,box-shadow .2s}
.hero-action-stack .btn:nth-child(1){z-index:3}
.hero-action-stack .btn:nth-child(2){z-index:2}
.hero-action-stack .btn:nth-child(3){z-index:1}
.hero-action-stack .btn-workspace{background:#c9b783;border-color:#c9b783;color:#111915}
.hero-action-stack .btn-workspace:hover{background:#e2d1a3;border-color:#e2d1a3;box-shadow:0 8px 30px #bba57026}
@media(min-width:821px) and (hover:hover) and (pointer:fine){.hero-action-stack:not(:hover):not(:focus-within) .btn:nth-child(2){transform:translate(12px,-50px)}.hero-action-stack:not(:hover):not(:focus-within) .btn:nth-child(3){transform:translate(24px,-100px)}}
@media(prefers-reduced-motion:reduce){.hero-action-stack .btn{transition:none}}
.playbook-updated{color:#a0aea9}
.pb-help-icon{transition:border-color .2s,background .2s,box-shadow .2s}
.pb-cert-info:hover .pb-help-icon{box-shadow:0 0 20px #8ecab329}
.workspace-feature:hover{box-shadow:0 20px 80px #0006,0 0 30px #c9a86a0d}
.feature-action{padding-right:5px}
.feature-map svg{transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.workspace-feature:hover .feature-map svg,.workspace-feature:focus-visible .feature-map svg{transform:scale(1.035) rotate(1deg)}
.principles{max-width:none}
.principles li{padding-right:1.25rem;border-color:#ffffff20}
.principle-trigger{border-radius:6px;padding:.9rem 1.2rem;margin:-.9rem 0;transition:background .25s}
.principle-trigger:hover,.principle-trigger:focus-visible{background:#cfb78506}
.principles h2{line-height:1.3;transition:color .25s}
.quote-band{position:relative;padding-top:5.5rem;padding-bottom:3.5rem;margin-top:2.5rem;background:radial-gradient(ellipse 50% 50% at 50% 50%,#c9a86a0c 0%,#c9a86a06 55%,transparent 100%)}
.quote-band:before{content:"";position:absolute;left:calc(50% - 35px);top:2.1rem;width:70px;height:1px;background:linear-gradient(90deg,transparent,#c9a86a,transparent)}
.quote-band cite{color:#9eabb6;line-height:1.8;font-size:.73rem;letter-spacing:.1em}
.credentials{border:1px solid #c9a86a35;border-radius:8px;padding:1.6rem 1.5rem;background:linear-gradient(135deg,#c9a86a0b,#0b1013);box-shadow:0 15px 40px #0003}
.credentials h3{letter-spacing:.15em;line-height:1.8}
.credentials li{color:#bac4ca;line-height:1.75;padding:.75rem 0;transition:color .2s}
.credentials li:hover{color:#edddba}
.about-lead{color:#e6dfd0;line-height:1.6}
.contact-form{max-width:38rem;padding:1.8rem;border:1px solid #96b5a538;border-radius:8px;background:linear-gradient(145deg,#16201c66,#0c1116);box-shadow:0 20px 70px #0004}
.contact-form label span{color:#b4bdbd;transition:color .2s}
.contact-form label:focus-within span{color:#e5cf9c}
.contact-form input,.contact-form textarea{background:#03070a77;border-color:#a2b8ac35;transition:border-color .2s,box-shadow .2s,background .2s}
.contact-form input:focus,.contact-form textarea:focus{border-color:#d9c18b;box-shadow:0 0 0 3px #d9c18b12;background:#0c1314}
.site-footer{color:#9aa5b1}
.site-footer a{color:#9aa5b1}
#concept-modal,#essay-modal{border-color:#baaa754d;box-shadow:0 30px 130px #0008;background:radial-gradient(ellipse at 80% 5%,#c9a86a0a,transparent 55%),#0c0f13}
#concept-modal::backdrop,#essay-modal::backdrop{background:#020509d4;backdrop-filter:blur(8px)}
@media(max-width:900px){.build-stack{min-height:390px}.build-visual{min-height:450px}.credentials{padding:1.3rem}}
@media(max-width:680px){.build-stack{min-height:285px}.build-visual{min-height:350px}.build-caption{padding:8px 14px 20px;font-size:.65rem}.build-layer span{font-size:.7rem;left:14px;bottom:14px;right:12px}.contact-form{padding:1.25rem}.principle-trigger{padding:.8rem .6rem}.principles li{padding-left:2.5rem;padding-right:0}.quote-band{padding-top:4rem}.quote-band cite{font-size:.65rem;padding:0 .5rem}.pillar{padding:1.9rem 1.6rem}}
@media(max-width:360px){.build-layer{width:162px}.build-layer span{font-size:.66rem}.build-stack{min-height:280px}.credentials{padding:1.2rem}.contact-form{padding:1rem}.contact-form .btn{padding:.85rem 1.2rem}}
@media(prefers-reduced-motion:reduce){.surface-light:before,.pillar,.pillar-num:after,.pillar-link,.site-header nav a:after,.stat:after,.feature-map svg,.principle-trigger,.credentials li,.contact-form label span,.contact-form input,.contact-form textarea{transition:none!important}.pillar:hover,.workspace-feature:hover .feature-map svg,.workspace-feature:focus-visible .feature-map svg{transform:none}}

/* A single set of working principles, directly within About. */
.about-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;margin-top:3.5rem;scroll-margin-top:2rem}
.about-cards .pillar{display:flex;flex-direction:column;padding:2rem 1.7rem;min-width:0}
.approach-label{display:block;margin:1.5rem 0 .25rem;font-size:.6rem;line-height:1.6;letter-spacing:.12em;text-transform:uppercase;color:#bcb198}
.about-cards .pillar h3{font:400 1.8rem/1.25 var(--serif);letter-spacing:-.025em;margin:.3rem 0 1rem}
.about-cards .pillar p{font-size:.89rem;line-height:1.85;color:#b3bfc4;margin-bottom:1.7rem}
.about-cards .pillar-link{margin-top:auto;font-size:.68rem}
@media(max-width:900px){.about-cards{gap:.8rem}.about-cards .pillar{padding:1.5rem 1.2rem}.about-cards .pillar h3{font-size:1.55rem}}
@media(max-width:680px){.about-cards{grid-template-columns:1fr;margin-top:2.5rem;gap:1rem}.about-cards .pillar{padding:1.7rem}.about-cards .pillar h3{font-size:1.8rem}.approach-label{margin-top:1rem}}

/* Vector surfaces keep their edges and lettering sharp at every scale. */
.build-stack{width:100%;max-width:440px;min-height:0;aspect-ratio:440/390;margin:auto;perspective:none}
.build-vector{display:block;width:100%;height:auto;overflow:visible}
.build-slab{transition:transform .6s cubic-bezier(.2,.8,.2,1),filter .6s}
.build-slab path{vector-effect:non-scaling-stroke}
.slab-label{fill:#d8e3d5;font:500 16px var(--sans);letter-spacing:.01em}
.slab-number{fill:#9fb6a3;font:400 10px var(--sans);letter-spacing:.1em}
[data-active-stage="foundation"] .slab-foundation,[data-active-stage="continuity"] .slab-continuity,[data-active-stage="portability"] .slab-portability,[data-active-stage="exploration"] .slab-exploration{transform:translateY(-9px);filter:drop-shadow(0 0 12px #d5ba7233)}
[data-active-stage="foundation"] .slab-foundation .slab-face,[data-active-stage="continuity"] .slab-continuity .slab-face,[data-active-stage="portability"] .slab-portability .slab-face,[data-active-stage="exploration"] .slab-exploration .slab-face{fill:url(#slab-selected);stroke:#f2e2b2;stroke-width:1.1px}
[data-active-stage="foundation"] .slab-foundation .slab-edge,[data-active-stage="continuity"] .slab-continuity .slab-edge,[data-active-stage="portability"] .slab-portability .slab-edge,[data-active-stage="exploration"] .slab-exploration .slab-edge{fill:#393923;stroke:#cfb975}
[data-active-stage="foundation"] .slab-foundation text,[data-active-stage="continuity"] .slab-continuity text,[data-active-stage="portability"] .slab-portability text,[data-active-stage="exploration"] .slab-exploration text{fill:#242a21}
.build-caption{padding-top:6px}
@media(max-width:680px){.slab-label{font-size:19px}.slab-number{font-size:12px}.build-visual{min-height:320px}}
@media(prefers-reduced-motion:reduce){.build-slab{transition:none}}

/* Native scrollbar, with a slim rounded thumb and no heavy track. */
html{scrollbar-width:thin;scrollbar-color:#8f8269 transparent}
html:hover{scrollbar-color:#c7b58d transparent}
html::-webkit-scrollbar{width:6px;height:6px}
html::-webkit-scrollbar-track{background:transparent}
html::-webkit-scrollbar-button{display:none}
html::-webkit-scrollbar-thumb{background:#8f8269;border-radius:999px;min-height:32px}
html::-webkit-scrollbar-thumb:hover{background:#d8c59b}
html.lenis{scroll-behavior:auto}
dialog,textarea{overscroll-behavior:contain}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}}
/* css/architecture.css */
.architecture-view-controls{display:flex;gap:.5rem;margin:1rem 0 1.4rem;flex-wrap:wrap}
.architecture-view-controls button{min-height:44px;padding:.65rem 1rem;background:#131b1b;border:1px solid #68746766;border-radius:5px;color:#bac8c3;font:400 .72rem var(--sans);cursor:pointer}
.architecture-view-controls button[aria-pressed="true"]{color:#ecdbb4;border-color:#c6aa70;background:#c6aa7012}
.architecture-view-controls button span{margin-left:.7rem;color:#e3c98f}
.architecture-overview[hidden],.architecture-deep-view[hidden]{display:none}
.deep-intro{display:grid;grid-template-columns:1.2fr 1fr;align-items:end;gap:2rem;padding:.7rem 0 1.5rem}
.deep-intro h3{font:300 clamp(1.8rem,3.2vw,2.5rem)/1.2 var(--serif);letter-spacing:-.03em;color:#e8dfcb;margin-top:.75rem}
.deep-intro>p{font-size:.8rem;line-height:1.8;color:#b1bfba;max-width:420px}
.deep-routes{display:flex;gap:.45rem;flex-wrap:wrap;padding:1rem 0;border-top:1px solid #a0b8a32b}
.deep-routes button{min-height:44px;padding:.6rem .85rem;border:1px solid #8faa9860;border-radius:5px;background:#101b18;color:#b5c6bd;font:400 .68rem var(--sans);cursor:pointer;transition:border-color .2s,background .2s}
.deep-routes button:hover{border-color:#dfca91}
.deep-routes button[aria-pressed="true"]{border-color:#dec98e;background:#c7b07921;color:#f1e0b9}
.deep-route-summary{padding:.9rem 1rem 1rem;border-left:2px solid #d0b678;background:linear-gradient(90deg,#b39c6320,transparent);min-height:103px}
.deep-route-summary strong{font:400 .85rem var(--sans);color:#e4d6b2}
.deep-route-summary p{font-size:.76rem;line-height:1.8;color:#b5c3bd;margin-top:.35rem;max-width:840px}
.deep-legend{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding:1.15rem .1rem .85rem;color:#c5cec4;font-size:.57rem;letter-spacing:.03em}
.deep-legend>span{display:flex;align-items:center;gap:.4rem}
.deep-legend>span:before{content:"";width:6px;height:6px;background:#94c4ac;border-radius:50%}
.deep-legend>[data-status="tested"]:before{background:#d5bd81}
.deep-legend>[data-status="development"]:before{background:#a89cce}
.deep-legend>[data-status="prototype"]:before{background:#8daec4}
.deep-pan-hint{margin-left:auto;color:#afbdc0;font-size:.57rem}
.deep-map-viewport{overflow:auto;border:1px solid #738c734f;border-radius:8px;scrollbar-width:thin;scrollbar-color:#b4a373 #10181c;background:radial-gradient(ellipse at 45% 20%,#7b9a7e17,transparent 65%),#0d1519;overscroll-behavior:contain}
.deep-map-viewport:focus-visible{outline:2px solid #e3c98f;outline-offset:4px}
.deep-map{position:relative;min-width:960px;padding:1.25rem 1.2rem 2.5rem;background-image:radial-gradient(#abc0af18 .7px,transparent .7px);background-size:16px 16px}
.deep-lanes{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1rem;position:relative;z-index:1}
.deep-lane{min-width:0;display:flex;flex-direction:column;gap:1rem}
.deep-lane h4{font:400 .66rem/1.45 var(--sans);color:#cbd5c7;min-height:45px;display:flex;align-items:start;gap:.45rem}
.deep-lane h4>span{font-size:.55rem;color:#a89776;padding-top:.1rem}
.deep-node{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:.55rem;width:100%;min-height:76px;padding:.8rem .7rem;border:1px solid #749a844d;border-radius:5px;background:linear-gradient(150deg,#21332ce8,#101c18);color:#d9e5da;text-align:left;cursor:pointer;box-shadow:0 5px 13px #0004;transition:opacity .3s,border-color .2s,box-shadow .2s}
.deep-node strong{font:500 .67rem/1.45 var(--sans)}
.deep-node small{font:400 .48rem/1.4 var(--sans);color:#abc6b4;letter-spacing:.025em}
.deep-node[data-status="tested"]{border-color:#b6a16b55;background:linear-gradient(150deg,#302c20f5,#191c18)}
.deep-node[data-status="tested"] small{color:#d3c191}
.deep-node[data-status="development"]{border-style:dashed;border-color:#a296bf65;background:linear-gradient(150deg,#292938f5,#151a21)}
.deep-node[data-status="development"] small{color:#c0b6dc}
.deep-node[data-status="prototype"]{border-style:dotted;border-color:#96b2c580;background:linear-gradient(150deg,#223039f5,#121b20)}
.deep-node[data-status="prototype"] small{color:#adc9db}
.deep-node.outside-route{border-color:#64716540;box-shadow:none}
.deep-node.in-route{border-color:#dbc286;box-shadow:0 0 17px #bca1651c}
.deep-node[aria-pressed="true"],.deep-node:hover,.deep-node:focus-visible{opacity:1;border-color:#f2d99d;box-shadow:0 0 0 2px #bda77348,0 7px 25px #0006}
.deep-connections{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;color:#a8bba0}
.deep-connections>path{fill:none;stroke:#a1b993;stroke-width:.85;opacity:.22;transition:opacity .3s,stroke .3s}
.deep-connections>path.in-route{stroke:#dbc184;stroke-width:1.4;opacity:.85}
.deep-connections>path.at-node{stroke:#dceacb;opacity:.7}
.trace-active .deep-connections>path.in-route{stroke-dasharray:5 8;animation:deep-signal 1.1s linear 3}
@keyframes deep-signal{to{stroke-dashoffset:-39}}
.deep-detail{display:grid;grid-template-columns:1.1fr 1fr;gap:2.5rem;padding:1.6rem 1.5rem;border:1px solid #6b806b50;border-radius:8px;background:radial-gradient(ellipse at 10% 0,#abc69d0e,transparent 70%),#0e1619;margin-top:1rem;min-height:248px}
.deep-status{display:inline-block;font-size:.56rem;letter-spacing:.08em;text-transform:uppercase;color:#c4d1b9;border-bottom:1px solid #899c704d;padding-bottom:.35rem}
.deep-detail h4{font:400 1.7rem/1.2 var(--serif);color:#ece3cf;margin:.8rem 0 .75rem;letter-spacing:-.025em}
.deep-detail p{font-size:.76rem;line-height:1.9;color:#bdc7bf}
.deep-benefit{border-left:1px solid #c5af722b;padding-left:2rem;display:flex;flex-direction:column;justify-content:center}
.deep-benefit>.workspace-kicker{font-size:.55rem}
.deep-benefit>p{margin:.65rem 0 1rem;color:#e0d6bd;font-size:.84rem}
.deep-neighbors{border-top:1px solid #bac5ad20;padding-top:.7rem}
.deep-neighbors>span{font-size:.55rem;color:#a7bcb0}
.deep-neighbors p{font-size:.63rem;margin-top:.3rem;color:#b5c5b7}
.deep-footnote{font-size:.64rem;line-height:1.8;color:#a4b1ad;margin-top:.9rem}
@media(max-width:680px){.architecture-view-controls{gap:.35rem}.architecture-view-controls button{font-size:.63rem;padding:.65rem .7rem}.deep-intro{grid-template-columns:1fr;gap:.8rem}.deep-intro h3{font-size:1.9rem}.deep-intro>p{font-size:.76rem}.deep-routes{gap:.3rem}.deep-routes button{font-size:.61rem;padding:.5rem .6rem}.deep-route-summary{min-height:143px;padding:.85rem}.deep-legend{gap:.65rem;font-size:.52rem}.deep-pan-hint{margin-left:0;width:100%}.deep-detail{grid-template-columns:1fr;gap:1rem;padding:1.3rem 1.1rem}.deep-benefit{border-left:0;border-top:1px solid #c5af7233;padding:1rem 0 0}.deep-detail h4{font-size:1.6rem}}
@media(prefers-reduced-motion:reduce){.deep-node,.deep-connections>path,.deep-routes button{transition:none}.trace-active .deep-connections>path.in-route{animation:none}}