@font-face {
  font-family: "JGS7";
  src: url("/assets/gen/jgs7.bcfc718a.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

:root,
[data-theme='light'] {
  font-family: 'IBM Plex Sans', Helvetica, Arial, sans-serif;
  line-height: 1.6;
  font-weight: 400;
  color: #1a1a1a;
  background-color: #ffffff;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}



a {
  
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

body {
  margin: 0;
  
  
  
}

* {
  box-sizing: border-box;
}

button {
  font-family: inherit;
}





.scrollbar-styled {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border, #c8c8c8) transparent;
}

.scrollbar-styled::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.scrollbar-styled::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 0;
}

.scrollbar-styled::-webkit-scrollbar-thumb {
  background: var(--color-border, #c8c8c8);
  border-radius: 0;
  transition: background 0.2s ease;
}

.scrollbar-styled::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted, #5c5c5c);
}

.scrollbar-styled::-webkit-scrollbar-corner {
  background: transparent;
}

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
:root,
[data-theme='light'] {
  color-scheme: light;

  --color-bg-deep: #ffffff;
  --color-bg-2: #ebebeb;
  --color-text: #1a1a1a;
  --color-text-muted: #5c5c5c;
  --color-text-dim: #888888;
  --color-border: #c8c8c8;
  --color-border-strong: #1a1a1a;
  --color-border-edge: transparent;
  --color-accent: #1a1a1a;
  --color-accent-alt: #006600;

  /* Retro stroke — chunkier than modern 1px hairlines */
  --retro-stroke: 2px;
  --retro-stroke-heavy: 3px;

  --font-display: 'IBM Plex Sans', Helvetica, Arial, sans-serif;
  --font-mono: 'Courier New', Courier, monospace;

  /* Legacy aliases — map old forge tokens to terminal palette */
  --color-gold: var(--color-accent);
  --color-gold-bright: var(--color-accent-alt);
  --color-gold-deep: var(--color-text);
  --color-sapphire-bright: var(--color-accent-alt);
}

[data-theme='dark'] {
  

  --color-bg-deep: #0a0a0a;
  --color-bg-2: #1a1a1a;
  --color-text: #e8e8e8;
  --color-text-muted: #aaaaaa;
  --color-text-dim: #777777;
  --color-border: #333333;
  --color-border-strong: #e8e8e8;
  --color-border-edge: transparent;
  --color-accent: #e8e8e8;
  --color-accent-alt: #39ff14;
}

/* :where(:not(...)) keeps this out of the MineCart subtree without raising
   specificity above a bare element — single-class rules must still win. */
:is(h1, h2, h3):where(:not(.minecart-site *, .ck-screen *)),
.page-title,
.card-title,
.quick-link-heading,
.leader-name,
.leadership-title,
.display-heading,
.hero-heading,
.vision-label,
.video-hero__headline {
  
  
  letter-spacing: 0.03em;
}











.brand-button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 6px;
  border-radius: 0;
}









.mobile-nav-toggle:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
}

.mobile-nav-toggle:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 4px;
}





/* Staggered Closed State (Matching your Image 1) */






/* X Open State (Centered) */
















.mobile-nav-link:hover {
  transform: none;
  border-color: var(--color-border-strong);
  background: var(--color-bg-deep);
}

.mobile-nav-link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}





.nav-indicator {
  position: absolute;
  width: 96px;
  height: 70px;
  /* Subtle 2-stop brass — gentle top-left highlight to bottom-right shadow,
     no bright specular band. Reads as warm metal without feeling shiny. */
  background: linear-gradient(
    135deg,
    var(--color-gold) 0%,
    var(--color-gold-deep) 100%
  );
  mask-image: url("/assets/gen/notch.352f8823.svg");
  mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  -webkit-mask-image: url("/assets/gen/notch.352f8823.svg");
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  pointer-events: none;
  filter: drop-shadow(0 6px 14px rgba(141, 107, 47, 0.3));
  transition: transform 260ms ease, opacity 160ms ease, filter 260ms ease;
  opacity: 0;
}



.nav-link:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 6px;
}





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



/* External link styling — WeaveCast pill button (sapphire gemstone) */




.nav-link--external:hover {
  background: var(--color-bg-deep);
  border-color: var(--color-accent-alt);
  box-shadow: none;
  transform: none;
}

.nav-link--external:hover .nav-label {
  color: var(--color-accent-alt);
}

.nav-link--external:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}



.nav-link--external:hover .external-icon {
  opacity: 1;
  color: var(--color-text);
}

/* Mobile WeaveCast pill button styling (sapphire) */


.mobile-nav-link--external:hover {
  background: var(--color-bg-deep);
  border-color: var(--color-accent-alt);
  box-shadow: none;
  transform: none;
  color: var(--color-accent-alt);
}

.mobile-nav-link--external:focus-visible {
  outline: 2px solid var(--color-sapphire-bright);
  outline-offset: 3px;
}



.mobile-nav-link--external:hover .external-icon {
  opacity: 1;
  color: var(--color-text);
}



/* ============================================
   FOOTER STYLES
   ============================================ */






/* Brand Column */




.footer-logo-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
  border-radius: 0;
}











.footer-social-link:hover {
  background: var(--color-bg-2);
  border-color: var(--color-border-strong);
  color: var(--color-accent-alt);
  transform: none;
  text-decoration: none;
}

.footer-social-link:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

/* Navigation Columns */








.footer-link:hover {
  color: var(--color-text);
  text-decoration: none;
}

.footer-link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 0;
}

/* Investor CTA Column (sapphire) */






.footer-investor-cta:hover {
  background: var(--color-bg-deep);
  border-color: var(--color-accent-alt);
  box-shadow: none;
  transform: none;
  text-decoration: none;
  color: var(--color-accent-alt);
}

.footer-investor-cta:focus-visible {
  outline: 2px solid var(--color-sapphire-bright);
  outline-offset: 2px;
}





.footer-investor-cta:hover .footer-investor-cta-arrow {
  transform: translateX(3px);
}



.footer-contact-btn:hover {
  background: var(--color-bg-deep);
  border-color: var(--color-accent-alt);
  color: var(--color-accent-alt);
  transform: none;
}

.footer-contact-btn:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

/* Footer Bottom Bar */










.footer-legal-link:hover {
  color: var(--color-text);
  text-decoration: none;
}



.footer-inline-link {
  
  
  transition: color 180ms ease;
}

.footer-inline-link:hover {
  color: var(--color-gold);
  text-decoration: none;
}

/* Footer Responsive Styles */





.investor-cta .cta-button.secondary:hover {
  background: linear-gradient(135deg, rgba(61, 111, 168, 0.32), rgba(94, 143, 199, 0.32));
  border-color: rgba(94, 143, 199, 0.7);
  transform: translateY(-2px);
}

.page {
  
  display: flex;
  flex-direction: column;
  
}























.cta-button.primary:hover {
  transform: none;
  background: var(--color-accent-alt);
  color: var(--color-bg-deep);
  box-shadow: none;
}



.cta-button.secondary:hover {
  background: var(--color-bg-2);
  border-color: var(--color-border-strong);
  transform: none;
}







































/* WeaveCast CTA Link — sapphire gemstone */


.weavecast-cta-link:hover {
  background: var(--color-bg-2);
  border-color: var(--color-accent-alt);
  box-shadow: none;
  color: var(--color-accent-alt);
  transform: none;
}

.weavecast-cta-link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}



.weavecast-cta-link:hover svg {
  transform: translate(2px, -2px);
}







.dl-orbit {
  transform-origin: 120px 118px;
  animation: dl-rotate 16s linear infinite;
}

.dl-nodes circle {
  transform-origin: center;
  animation: dl-pulse 2.6s ease-in-out infinite;
}









@keyframes dl-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes dl-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.9;
  }
  50% {
    transform: scale(1.25);
    opacity: 0.65;
  }
}

@media (max-width: 900px) {
  

  /* Mobile-only ordering: WeaveCast text → WeaveCast animation → DeepLoom animation → DeepLoom text */
  

  

  

  
}

@media (prefers-reduced-motion: reduce) {
  .dl-orbit,
  .dl-nodes circle,
  .wc-dot--one,
  .wc-dot--two,
  .wc-spark,
  .wc-pulse {
    animation: none !important;
  }
}

.quick-link-card {
  position: relative;
  background: rgba(35, 32, 27, 0.85);
  border: none;
  border-radius: 0;
  padding: 1.5rem 2rem 2rem;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
  text-align: center;
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease, filter 200ms ease;
  mask-image: url("/assets/gen/notch.352f8823.svg");
  mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  -webkit-mask-image: url("/assets/gen/notch.352f8823.svg");
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  overflow: hidden;
}

.quick-link-card:hover {
  transform: translateY(-6px);
  filter: drop-shadow(0 10px 20px rgba(20, 17, 13, 0.5));
}

.quick-link-card::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Subtle brass crest border revealed on hover — matches the softer
     active-nav gradient. */
  background: linear-gradient(
    135deg,
    var(--color-gold) 0%,
    var(--color-gold-deep) 100%
  );
  mask-image: url("/assets/gen/notch.352f8823.svg"), url("/assets/gen/notch.352f8823.svg");
  mask-size: contain, 98% 98%;
  mask-position: center, center;
  mask-repeat: no-repeat, no-repeat;
  mask-composite: exclude;
  -webkit-mask-image: url("/assets/gen/notch.352f8823.svg"), url("/assets/gen/notch.352f8823.svg");
  -webkit-mask-size: contain, 98% 98%;
  -webkit-mask-position: center, center;
  -webkit-mask-repeat: no-repeat, no-repeat;
  -webkit-mask-composite: xor;
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
  z-index: 0;
}

.quick-link-card:hover::after {
  opacity: 1;
}









.quick-link-action:hover {
  background: none;
  color: var(--color-accent-alt);
  transform: none;
}

.quick-link-action:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
  border-radius: 0;
}



.text-link-button:hover {
  color: var(--color-gold);
  text-decoration: underline;
  text-decoration-color: rgba(200, 162, 89, 0.6);
}

.text-link-button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
  border-radius: 0;
}







.card:hover {
  transform: translateY(-4px);
  border-color: rgba(200, 162, 89, 0.45);
  box-shadow:
    0 18px 38px rgba(20, 17, 13, 0.45),
    0 0 18px rgba(200, 162, 89, 0.1),
    inset 0 1px 0 rgba(255, 240, 210, 0.08);
}











.card.card--static:hover {
  transform: none;
  border-color: var(--color-border);
  box-shadow:
    inset 0 1px 0 var(--color-border-edge),
    0 1px 0 rgba(20, 17, 13, 0.4);
}



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













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



/* Contact Page - Investor Card Redesign (sapphire gemstone) */

















.contact-investor-cta:hover {
  background: linear-gradient(135deg, rgba(61, 111, 168, 0.4), rgba(94, 143, 199, 0.4));
  border-color: rgba(94, 143, 199, 0.8);
  box-shadow:
    0 0 25px rgba(61, 111, 168, 0.4),
    0 8px 20px rgba(20, 17, 13, 0.4);
  transform: translateY(-2px);
  text-decoration: none;
  color: var(--color-text);
}

.contact-investor-cta:focus-visible {
  outline: 2px solid var(--color-sapphire-bright);
  outline-offset: 3px;
}



.contact-investor-cta:hover .contact-investor-arrow {
  transform: translateX(4px);
}

@media (max-width: 720px) {
  

  

  .nav-indicator {
    display: none;
  }

  

  

  

  

  

  

  

  

  

  

  

  

  
}



















.video-hero__scroll-nudge:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 4px;
  border-radius: 4px;
}

@media (max-width: 1024px) {
  

  

  .quick-link-card {
    padding: 1.4rem 1.8rem 1.8rem;
    min-height: 200px;
    mask-size: contain;
    -webkit-mask-size: contain;
  }

  
}

@media (max-width: 640px) {
  

  

  .quick-link-card {
    padding: 1.3rem 1.5rem 1.5rem;
    min-height: 180px;
    mask-size: contain;
    -webkit-mask-size: contain;
  }

  
}

@media (max-width: 720px) {
  .quick-link-card {
    min-height: 0;
    padding: 1.2rem 1.4rem 1.4rem;
  }

  

  
}

@media (max-width: 520px) {
  

  

  .content {
    padding: 2.4rem 5vw;
  }

  

  

  

  

  

  

  

  
}

@media (max-width: 720px) and (max-height: 560px) {
  .video-hero {
    height: min(calc(100vw * 9 / 16), 65vh);
    min-height: 45vh;
  }
}

/* ── Brand Callout ────────────────────────────────────────────
   Shared treatment for emphasized inline blocks (About "Our Belief",
   Showcase "From Mission to Vision", and similar). Replaces duplicated
   inline styles in JSX with one tokenized class. */














/* Helpers for the previously-inline patterns on About and Showcase cards. */
/* 80s terminal aesthetic overrides — loaded after App.css base rules */







/* ── Navbar ─────────────────────────────────────────────── */




.brand-button:focus-visible,
.mobile-nav-toggle:focus-visible,
.nav-link:focus-visible,
.theme-toggle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 0;
}



.mobile-nav-toggle:hover {
  background: var(--color-bg-deep);
  border-color: var(--color-border-strong);
}



.nav-indicator {
  display: none !important;
}





.nav-link:hover {
  transform: none;
}





.nav-link:hover .nav-label {
  color: var(--color-text);
}







.nav-link--external:hover {
  background: var(--color-bg-2);
  border-color: var(--color-border-strong);
  box-shadow: none;
  transform: none;
}

.nav-link--external:hover .nav-label,
.nav-link--external:hover .external-icon {
  color: var(--color-accent-alt);
}







.theme-toggle:hover {
  border-color: var(--color-border-strong);
  background: var(--color-bg-deep);
}







.mobile-nav-link:hover {
  transform: none;
  background: var(--color-bg-deep);
  border-color: var(--color-border-strong);
}





.mobile-nav-link--external:hover {
  background: var(--color-bg-2);
  box-shadow: none;
  transform: none;
  color: var(--color-accent-alt);
}





/* ── Footer ─────────────────────────────────────────────── */










.footer-investor-cta:hover,
.footer-contact-btn:hover {
  background: var(--color-bg-2);
  box-shadow: none;
  transform: none;
}



.footer-social-link:hover {
  background: var(--color-bg-2);
}

/* ── Cards & pages ──────────────────────────────────────── */


.card:hover {
  transform: none;
  border-color: var(--color-border-strong);
  box-shadow: none;
}

.card.card--static:hover {
  border-color: var(--color-border);
}











.cta-button:hover {
  background: var(--color-accent-alt);
  color: var(--color-bg-deep);
  box-shadow: none;
  transform: none;
}



.text-link-button:hover,
.inline-link:hover,
.quick-link-action:hover,
.weavecast-cta-link:hover {
  color: var(--color-accent-alt);
  text-decoration-color: var(--color-accent-alt);
}



.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--color-border-strong);
  box-shadow: none;
}







.contact-investor-cta:hover {
  background: var(--color-bg-deep);
  box-shadow: none;
  transform: none;
}



/* ── Home page ──────────────────────────────────────────── */





/* ── Hero video ─────────────────────────────────────────── */


/* Light mode: inverted treatment, softer contrast */


/* Dark mode: regular grayscale, lightly lifted */


















.video-hero__scroll-nudge:focus-visible {
  outline: 2px solid var(--color-accent);
  border-radius: 0;
}





/* ── Other main-site pages ──────────────────────────────── */




.footer-link,
.footer-legal-link,
.footer-inline-link {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  
}

.footer-link:hover,
.footer-legal-link:hover,
.footer-inline-link:hover {
  color: var(--color-accent-alt);
}







.footer-legal-link:hover {
  color: var(--color-text);
}





/* :not(.minecart-site *) keeps these off the MineCart legal pages, which
   have their own .legal-content styling in pages/minecart/minecart.css. */

/* Cassette-futurist printer the page feeds out of: a beige slab with side
   vents, a status LED, and a dark slot the paper emerges from. */
/* "back" key on the faceplate, echoing the nav cluster */
.paper-return {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.paper-return__label {
  font-size: 0.72rem;
  
  text-transform: uppercase;
}

/* full width of the section, same span as the CRT screens */
.paper-printer {
  position: relative;
  
  
  padding: 0.8rem 1.4rem 1rem;
  background: linear-gradient(#ece6d8, #c9c2b0);
  /* the .ck-frame treatment: 10px radius, shadow-ring border, inset bevel */
  border-radius: 10px 10px 0 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(0, 0, 0, 0.1),
    0 6px 18px rgba(0, 0, 0, 0.3);
  font-family: 'IBM Plex Mono', 'Courier New', Courier, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  color: #7a7364;
}
.paper-printer::before {
  /* cooling vents */
  content: '';
  position: absolute;
  top: 0.7rem;
  right: 3rem;
  width: 6.5rem;
  height: 0.8rem;
  background: repeating-linear-gradient(90deg, #a49c8a 0 3px, transparent 3px 9px);
}
.paper-printer__name {
  position: absolute;
  right: 1.4rem;
  bottom: 0.7rem;
}
.paper-printer::after {
  /* paper slot set into the bottom edge; the sheet tucks up into it, so the
     paper paints over the slot's lower half but never over the beige body */
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  /* slightly wider than the 56rem sheet feeding out of it */
  width: min(calc(100% - 3rem), 58rem);
  height: 8px;
  background: #2a2620;
  border-radius: 3px;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.8);
}
/* placement only — the LED itself is the nav's StatusLed (.ck-led) */
.paper-printer__led {
  position: absolute;
  top: 0.55rem;
  right: 1.2rem;
}

/* Printed technical document: a blog post renders as a typewritten page —
   IBM Plex Mono, black ink on white paper. Self-contained: every blog-post
   class is styled here and nowhere else. */
.paper-doc {
  font-family: 'IBM Plex Mono', 'Courier New', Courier, monospace;
  color: #111;
  background: #fff;
  max-width: 56rem;
  /* pulled up into the printer's slot; relative so the sheet paints over it */
  position: relative;
  margin: -5px auto 0;
  padding: clamp(1.6rem, 5vw, 3.2rem) clamp(1.1rem, 5vw, 3.6rem);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

/* App.css points h1-h3 at the sans display font — keep headings on the page font */




/* Document header closed by a double rule, typewriter style. */
.paper-doc .blog-post-header {
  border-bottom: 4px double #111;
  margin-bottom: 2.2rem;
  padding-bottom: 1.4rem;
}
.paper-doc .blog-post-title {
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  
  
  line-height: 1.2;
  margin: 0 0 1.5rem;
}
.paper-doc .blog-post-meta {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #444;
}

/* Banner image: fit the column, never taller than most of the viewport. */
.paper-doc .blog-post-banner {
  display: block;
  width: 100%;
  max-height: 60vh;
  object-fit: contain;
  margin: 0 auto 2.2rem;
}

/* Body copy */
.paper-doc .blog-post-content {
  font-size: 0.98rem;
  line-height: 1.8;
}
.paper-doc .blog-post-content .lead {
  font-size: 1.02rem;
  line-height: 1.7;
  
  color: #111;
}
.paper-doc .blog-post-content p,
.paper-doc .blog-post-content ul,
.paper-doc .blog-post-content ol {
  color: #444;
}
.paper-doc .blog-post-content p { margin-bottom: 1.5rem; }
/* re-enable markers the SPA's Tailwind preflight stripped */
.paper-doc .blog-post-content ul,
.paper-doc .blog-post-content ol {
  margin: 1.5rem 0;
  padding-left: 2rem;
}


.paper-doc .blog-post-content li {
  margin-bottom: 0.75rem;
  line-height: 1.7;
}
.paper-doc .blog-post-content li strong,
.paper-doc .blog-post-content blockquote strong {
  color: #111;
  font-style: normal;
}
.paper-doc .blog-post-content a {
  color: #111;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.paper-doc .blog-post-content a:hover { color: #000; }

/* Section heads: uppercase, hairline-underlined, mono-bold. */
.paper-doc .blog-post-content h2 {
  font-size: 1.15rem;
  
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid #999;
  padding-bottom: 0.35rem;
  margin: 2.5rem 0 1rem;
  line-height: 1.3;
}
.paper-doc .blog-post-content h3 {
  font-size: 1.02rem;
  
  margin: 2rem 0 1rem;
}

/* Quotes, code, rules */
.paper-doc .blog-post-content blockquote {
  margin: 2rem 0;
  padding: 1.5rem 2rem;
  border-left: 3px solid #111;
  background: #f2f2f2;
  font-style: italic;
  
}
/* the SPA's Tailwind preflight gave code/pre its own mono stack — keep the page font */
.paper-doc .blog-post-content code,
.paper-doc .blog-post-content pre {
  font-family: inherit;
}
.paper-doc .blog-post-content code {
  font-size: 0.9em;
  padding: 0.2em 0.4em;
  background: #f2f2f2;
  border: 1px solid #999;
}
.paper-doc .blog-post-content pre {
  margin: 1.5rem 0;
  overflow-x: auto;
  padding: 1.25rem 1.5rem;
  background: #f2f2f2;
  border: 1px solid #999;
  border-left: 3px solid #111;
  font-size: 0.88rem;
  line-height: 1.65;
}
.paper-doc .blog-post-content pre code {
  display: block;
  padding: 0;
  
  border: none;
}
.paper-doc .blog-post-content hr {
  margin: 2rem 0;
  border: none;
  border-top: 1px dashed #999;
}


/* In-document boxes (TL;DR, author bio): the TUI rectangle — 1px rule with
   the label set into the border between ┤ ├ brackets; a white patch behind
   the label fakes the border gap. */
.paper-doc .tldr-block,
.paper-doc .author-bio {
  position: relative;
  border: 1px solid #111;
  padding: 1.3rem 1.25rem 1rem;
}
.paper-doc .tldr-block { margin-bottom: 2rem; }
.paper-doc .tldr-text {
  margin: 0;
  line-height: 1.7;
}
.paper-doc .tldr-label,
.paper-doc .author-bio__label {
  position: absolute;
  top: -0.7em;
  left: 10px;
  margin: 0;
  padding: 0 0.6ch;
  background: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
  
}
.paper-doc :is(.tldr-label, .author-bio__label)::before { content: '┤ '; }
.paper-doc :is(.tldr-label, .author-bio__label)::after { content: ' ├'; }

.paper-doc .author-bio {
  display: flex;
  gap: 1.25rem;
  
  margin-top: 2.5rem;
}
.paper-doc .author-bio__photo {
  width: 72px;
  height: 72px;
  
  flex-shrink: 0;
  border: 1px solid #999;
}

.paper-doc .author-bio__name {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 0.15rem;
}
.paper-doc .author-bio__title,
.paper-doc .author-bio__text {
  font-size: 0.9rem;
  
  
}
.paper-doc .author-bio__text { line-height: 1.6; }
.paper-doc .author-bio__link {
  font-size: 0.85rem;
  
  
  
}

@media (max-width: 720px) {
  .paper-doc { padding: 1.4rem 1rem; }
  .paper-doc .blog-post-content ul,
  .paper-doc .blog-post-content ol { padding-left: 1.5rem; }
  .paper-doc .blog-post-content blockquote { padding: 1rem 1.5rem; }
}
@media (max-width: 520px) {
  .paper-doc .author-bio {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}
/* Retro line treatment — chunky strokes, dashed rules, double frames */



/* ── Shell chrome (inset dashed rules — not edge-to-edge) ── */














/* ── Controls & nav ─────────────────────────────────────── */






/* ── Cards & panels (single-line frames) ────────────────── */


.app .card:hover {
  border-color: var(--color-border-strong);
}

.app .card.card--static:hover {
  border-color: var(--color-border);
}

/* ── Team & misc pages ──────────────────────────────────── */


.app .leader-card:hover {
  border-color: var(--color-border-strong);
}
/* ============================================================================
   CONSOLE KIT — the terminal site's visual language as a reusable design
   system for the standard site. Own namespace (ck-*); material recipes are
   duplicated from the terminal's CSS — the four chrome stylesheets, merged
   verbatim into terminal-device.css — rather than imported: the terminal's CSS
   assumes full-viewport device geometry and must not be disturbed. Assets are
   shared (assets/).

   One fixed physical look: cream plastic chassis, dark CRT screens, grey-green
   LCDs. No light/dark theme — hardware doesn't have a dark mode.
   ========================================================================== */

@font-face {
  font-family: 'JGS7';
  src: url("/assets/gen/jgs7.bcfc718a.ttf") format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'DS-Digital';
  src: url("/assets/gen/DS-DIGIB.db992dcd.TTF") format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Aulendur Brand';
  src: url("/assets/gen/aulegothic.5f7a5877.otf") format('opentype');
  font-display: swap;
}
@font-face {
  /* in-universe runic keycap glyphs (mirrors the terminal keyboard) */
  font-family: 'Starforge Runic';
  src: url("/assets/gen/StarforgeRunic-Regular.b3bd480c.ttf") format('truetype');
  font-display: swap;
}

/* ── Tokens ────────────────────────────────────────────────────────────── */
.ck-chassis {
  /* phosphor palette (mirrors .device-terminal) */
  --ck-bg: #0b0d0b;
  --ck-fg: #80ce8b;
  --ck-dim: color-mix(in srgb, var(--ck-fg) 80%, var(--ck-bg));
  --ck-bright: color-mix(in srgb, var(--ck-fg) 55%, white);   /* emphasis: phosphor driven toward white */
  --ck-accent: #ffb648;
  /* screens/art/chrome use the pixel font; long-form body reads in a smooth mono */
  --ck-font-screen: 'JGS7', 'Courier New', Courier, monospace;
  --ck-font-body: 'Iosevka Term Slab', monospace;
  /* engraved-into-plastic text (labels on the chassis) */
  --ck-engrave: #5a5340;
  --ck-label: #3a3527;   /* chassis print: the nav's logo mark + wordmark */
  /* LCD (mirrors the lcd bank / macro pad) */
  --ck-lcd-glass: #8a927e;
  --ck-lcd-glass-2: #767d68;
  --ck-lcd-seg: #171b11;
  --ck-lcd-ghost: rgba(23, 27, 17, 0.11);
  /* keys */
  --ck-key: 46px;
  --ck-key-shadow: 0 3px 3px rgba(0, 0, 0, 0.5);
  --ck-keycap: url("/assets/gen/key_a.f1b38f01.svg");
  /* the screen recess ring: sunk into the chassis. All external — the screen
     is too dark for interior shadows to read. Crisp top seam · shaded band
     where the plastic curves down into the cutout · lit bottom lip with a
     soft glare bloom on the chassis below (so no dark seam at the bottom,
     where the lip catches light). */
  --ck-recess:
    0 -1px 0 rgba(0, 0, 0, 0.35),
    0 -4px 6px -3px rgba(0, 0, 0, 0.55),
    -3px 0 5px -3px rgba(0, 0, 0, 0.3),
    3px 0 5px -3px rgba(0, 0, 0, 0.3),
    0 1px 0 rgba(255, 255, 255, 0.35),
    0 4px 6px -3px rgba(255, 255, 255, 0.45);
  /* ◀ THE spacing knob between page sections (the only one — legacy .page gap
     and .ck-section margins are both neutralized to defer to it) */
  --ck-section-gap: clamp(0.8rem, 1.6vw, 1.2rem);
  /* simulated 90s-beige-computer plastic: very fine generated speckle */
  /* one uniform plastic: flat tone + film-fine grain (strength baked into the
     tile so every consumer — chassis, label cuts — matches exactly) */
  --ck-plastic: #dfd9c9;
  --ck-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)' opacity='0.9'/%3E%3C/svg%3E");
}

/* ── Chassis: the page IS the plastic ──────────────────────────────────── */
.ck-chassis {
  position: relative;
  
  
  /* cooler, near-uniform bone plastic (the terminal's warm cream read too
     yellow at page scale); flat so the label text-cuts match it anywhere */
  background: var(--ck-plastic);
  /* the plastic runs to the bottom of the window even when the page is short */
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--ck-font-body);
}
.ck-chassis::before {
  content: '';
  position: absolute;
  inset: 0;
  
  
  background: var(--ck-grain);
  mix-blend-mode: overlay;
}
/* everything composed on the chassis floats above its texture layers */
.ck-chassis > * { position: relative; z-index: 1; }

/* ── Bezel: the molded frame a screen is installed in ──────────────────────
   Same recipe as .ck-frame around the nav keys: a faint face, a lit top edge,
   a shaded bottom edge, and a hairline outline. It is drawn just outside the
   screen, so page layout is unchanged; a one-cell grid so the screen still
   stretches to its row's height when screens sit side by side. */
.ck-bezel {
  /* ◀ bezel knobs */
  --ck-bezel-gap: 6px;           /* how far the frame sits outside the screen */
  --ck-bezel-outline: 0.1;       /* the hairline around the frame */
  --ck-bezel-lit: 0.35;          /* the lit top edge */
  --ck-bezel-shade: 0.18;        /* the shaded bottom edge */

  position: relative;
  display: grid;
}
.ck-bezel::before {
  content: '';
  position: absolute;
  inset: calc(-1 * var(--ck-bezel-gap));
  border-radius: calc(12px + var(--ck-bezel-gap));   /* concentric with the screen's 12px */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.05));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / var(--ck-bezel-lit)),
    inset 0 -1px 0 rgb(0 0 0 / var(--ck-bezel-shade)),
    0 0 0 1px rgb(0 0 0 / var(--ck-bezel-outline));
  pointer-events: none;
}

/* ── CRT screen: recessed dark panel with scanlines + vignette ─────────── */
.ck-screen {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  --ck-vignette: 0.75;
  /* layers, top to bottom: bulged-glass bloom (the tube's center sits closest
     to the viewer), in-glass vignette, phosphor-dark base. The vignette is a
     gradient rather than an inset shadow so the bloom always paints above it. */
  background:
    radial-gradient(ellipse at 50% 42%, color-mix(in srgb, var(--ck-bright) 6.5%, transparent), transparent 72%),
    radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, var(--ck-vignette))),
    var(--ck-bg);
  color: var(--ck-fg);
  font-family: var(--ck-font-screen);
  --ck-font-body: var(--ck-font-screen);   /* on-screen text is all phosphor — no mixed faces */
  box-shadow: var(--ck-recess);
  padding: clamp(0.4rem, 1vw, 0.7rem) clamp(0.8rem, 2vw, 1.4rem) clamp(0.8rem, 2vw, 1.4rem);
  font-size: clamp(0.9rem, 1.6vw, 1.05rem);
  
  /* phosphor halo: tight glow + wide falloff, in each run's own color */
  text-shadow:
    0 0 4px color-mix(in srgb, currentcolor 35%, transparent),
    0 0 13px color-mix(in srgb, currentcolor 18%, transparent);
}
/* semantic defaults for on-screen markup: prose is dim, <strong> is the
   accent lead-in, <em> is bright phosphor. :where() keeps specificity at
   class level so utility classes and component rules below still win. */
.ck-screen :where(h1, h2, h3) { font-size: inherit; }
.ck-screen :where(p) { margin: 0 0 0.7rem; color: var(--ck-dim); }
.ck-screen :where(p:last-child) { margin-bottom: 0; }
.ck-screen :where(strong) { color: var(--ck-accent); font-weight: normal; }

.ck-screen::before {
  /* scanlines */
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  border-radius: inherit;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.16) 3px
  );
  mix-blend-mode: multiply;
  opacity: 0.55;
}
/* long-form variant: same material, gentler effects, comfier reading */
.ck-screen--soft::before { opacity: 0.28; }
.ck-screen--soft { --ck-vignette: 0.5; }
/* one-shot power-on flicker — hero screens only (.ck-screen--boot) */
@keyframes ck-power-on {
  0% { opacity: 0; }
  8% { opacity: 0.55; }
  13% { opacity: 0.28; }
  22% { opacity: 1; }
  100% { opacity: 1; }
}
.ck-screen--boot { animation: ck-power-on 0.85s ease-out both; }

.ck-screen ::selection { background: var(--ck-fg); color: var(--ck-bg); }

/* on-screen ASCII art (figlet banners etc.) */
.ck-ascii-art {
  margin: 0 0 0.7rem;
  font-family: 'Courier New', Courier, monospace;
  font-size: clamp(6px, 1vw, 9px);
  line-height: 1;   /* █ rows must tile — leading shows as stripes when inverted */
  color: var(--ck-accent);
  
}

/* phosphor text helpers */

.ck-accent { color: var(--ck-accent); }




/* ── Links: the terminal's token language ──────────────────────────────── */
.ck-link,
.ck-prose a {
  /* inline-block: <a> and <button> tokens get identical highlight boxes */
  display: inline-block;
  
  
  color: var(--ck-accent);
  
  
  
  padding: 0 2px;
  
  
     /* button UA centering shears wrapped pre art */
}
.ck-link:hover,
.ck-link:focus-visible,
.ck-prose a:hover,
.ck-prose a:focus-visible {
  color: var(--ck-bg);
  background: var(--ck-accent);
  outline: none;
  text-decoration: none;   /* the global a:hover underline must not win */
  text-shadow: none;       /* inverted ink doesn't glow — only lit phosphor does */
}
.ck-link--plain { color: var(--ck-fg); }
.ck-link--plain:hover,
.ck-link--plain:focus-visible { background: var(--ck-fg); color: var(--ck-bg); }
/* art links: hover shows a `<` selector beside the banner instead of a
   highlight slab — the art stays lit phosphor throughout */
.ck-link--art {
  display: inline-flex;
  align-items: center;
  
}
.ck-link--art:hover,
.ck-link--art:focus-visible {
  color: var(--ck-accent);
  background: transparent;
  text-shadow: inherit;
}
.ck-art-cursor { visibility: hidden; }   /* not display — the art must not shift on hover */
.ck-link--art:hover .ck-art-cursor,
.ck-link--art:focus-visible .ck-art-cursor { visibility: visible; }
.ck-link .ck-ascii-art { margin-bottom: 0; }
.ck-link:has(.ck-ascii-art) { margin-bottom: 0.7rem; }

/* ── TUI box: bordered panel with the title set into the border ────────── */
.ck-box {
  position: relative;
     /* fieldsets default to min-content and refuse to shrink in grids */
  border: 1px solid var(--ck-dim);
  padding: 0.5rem 1.1rem 0.9rem;
  margin: 0;
}
.ck-box__title {
  /* legend: sits in a real gap in the border — the glass shows through */
  padding: 0 0.6ch;
  margin-left: 10px;
  color: var(--ck-dim);
  letter-spacing: 0.08em;
  line-height: 1.2;
  
}
/* literal stack, not --ck-font-body: JGS7's box-drawing glyphs are slanted */
.ck-box__title::before { content: '┤ '; font-family: 'Courier New', Courier, monospace; }
.ck-box__title::after { content: ' ├'; font-family: 'Courier New', Courier, monospace; }
.ck-box--accent { border-color: var(--ck-accent); }
.ck-box--accent > .ck-box__title { color: var(--ck-accent); }

/* a blog list entry: its text, and the post's banner as a blocky thumbnail at
   the box's right edge, as tall as the entry (the box's padding is the cell of
   space around it). A post without a banner has no thumbnail and no reserved
   space — the text runs the full width. */
.ck-post-entry {
  /* ◀ thumbnail knobs */
  --ck-thumb-max: 140px;   /* largest the thumbnail grows, and the text column's reserve */
  --ck-thumb-gap: 1.2rem;  /* space between the text and the thumbnail */
  position: relative;
}
.ck-post-entry--thumb > .ck-post-entry__text {
  padding-right: calc(var(--ck-thumb-max) + var(--ck-thumb-gap));
}
.ck-post-entry__thumb {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  max-height: var(--ck-thumb-max);
  aspect-ratio: 1;
  /* a 32-pixel source scaled up with hard edges, like the leadership
     portraits' block art; framed like their portrait slot */
  image-rendering: pixelated;
  padding: 3px;
  border: 1px solid var(--ck-dim);
  border-radius: 3px;
  background: var(--ck-bg);
}
@media (max-width: 560px) {
  .ck-post-entry { --ck-thumb-max: 84px; --ck-thumb-gap: 0.9rem; }
}


/* an h2 leading a box is the box's headline, not a screen-level heading */


/* ── Embossing: raised forms in a pressed-in panel ─────────────────────────
   Molded like a maker's badge on a case: a shallow rounded panel sunk into the
   plastic (.ck-emboss) with forms standing up from its floor
   (.ck-emboss__raised), read through light and shadow. Walls facing the light
   catch a highlight; walls facing away fall into shadow. Used by the section
   labels and the nav's brand panel; each sets its own depths. */
.ck-emboss {
  /* ◀ emboss knobs, shared by every embossed panel (alphas 0–1) */
  --ck-emboss-shadow: 10 5 5;        /* shadow color, as space-separated R G B */
  --ck-emboss-light-x: 0;            /* which way shadows fall: 1 right, -1 left, 0 neither; */
  --ck-emboss-light-y: 1;            /* 1 down, -1 up. Highlights take the opposite side */
  --ck-emboss-floor: 0.03;           /* the panel floor's darkening (it sits lower, in less light) */
  --ck-emboss-recess: 0.28;          /* shadow the panel's walls cast onto the floor */
  --ck-emboss-wall-lit: 0.55;        /* the panel walls catching the light */
  --ck-emboss-rim: 0.5;              /* highlight on the panel's outer edge, light side */
  --ck-emboss-raised-lit: 0.7;       /* the raised forms' lit edges */
  --ck-emboss-raised-shadow: 0.4;    /* the shadow the raised forms cast onto the floor */
  /* depths — em defaults scale with the section labels; the nav sets px */
  --ck-emboss-recess-depth: 0.035em; /* how far the panel's wall shadow reaches */
  --ck-emboss-raise: 0.03em;         /* how far raised forms stand up (their shadow's reach) */

  /* shadow and highlight offsets: shadows fall along the light direction,
     highlights sit on the side facing the light */
  --ck-emboss-sx: var(--ck-emboss-light-x);
  --ck-emboss-sy: var(--ck-emboss-light-y);
  /* the floor: the chassis itself (its grain shows through), a touch darker */
  background: rgb(var(--ck-emboss-shadow) / var(--ck-emboss-floor));
  box-shadow:
    /* inside the panel: walls facing away from the light shade the floor,
       walls facing it are lit */
    inset calc(var(--ck-emboss-recess-depth) * var(--ck-emboss-sx)) calc(var(--ck-emboss-recess-depth) * var(--ck-emboss-sy)) calc(var(--ck-emboss-recess-depth) * 1.4) rgb(var(--ck-emboss-shadow) / var(--ck-emboss-recess)),
    inset calc(-1px * var(--ck-emboss-sx)) calc(-1px * var(--ck-emboss-sy)) 0 rgb(255 255 255 / var(--ck-emboss-wall-lit)),
    /* on the case: the panel's rim on the light side catches the light */
    calc(-1px * var(--ck-emboss-sx)) calc(-1px * var(--ck-emboss-sy)) 0 rgb(255 255 255 / var(--ck-emboss-rim));
}
.ck-emboss__raised {
  /* lit edges on the light side, then the shadow cast away from the light
     onto the floor: a crisp contact line where each wall meets the floor, and
     a soft falloff */
  filter:
    drop-shadow(calc(-1px * var(--ck-emboss-sx)) calc(-1px * var(--ck-emboss-sy)) 0 rgb(255 255 255 / var(--ck-emboss-raised-lit)))
    drop-shadow(calc(var(--ck-emboss-raise) * 0.5 * var(--ck-emboss-sx)) calc(var(--ck-emboss-raise) * 0.5 * var(--ck-emboss-sy)) 0 rgb(var(--ck-emboss-shadow) / calc(var(--ck-emboss-raised-shadow) * 0.6)))
    drop-shadow(calc(var(--ck-emboss-raise) * var(--ck-emboss-sx)) calc(var(--ck-emboss-raise) * var(--ck-emboss-sy)) var(--ck-emboss-raise) rgb(var(--ck-emboss-shadow) / var(--ck-emboss-raised-shadow)));
}

/* ── Section label: an enamel name plate screwed to the chassis ───────────
   Control-room tagging: a white enamel plate standing just off the case, sized
   to its lettering and centered over the section, held by a slotted screw at
   each end, with bold black lettering embossed shallow into it. Light comes
   from above. */
.ck-plate {
  /* ◀ label knobs (lengths scale with the label's font size) */
  --ck-plate-pad-y: 0.16em;          /* plate showing above and below the letters */
  --ck-plate-pad-x: 0.6;             /* plate past each end of the lettering, in em — a
                                        bare number: the fit formula below adds it; keep
                                        it past the screws (inset + half their size) */
  --ck-plate-radius: 1px;            /* corner rounding — sharp, like cut sheet */
  --ck-plate-enamel: #f3f1ea;        /* the plate's white */
  --ck-plate-gloss: 0.55;            /* the enamel's sheen across its top */
  --ck-plate-lift: 0.03em;           /* how far the plate stands off the case (its shadow) */
  --ck-plate-ink: #141414;           /* letter color */
  --ck-plate-ink-lit: 30%;           /* how much the letters' top edges catch the light */
  --ck-plate-ink-raise: 0.012em;     /* how far the letters stand off the plate */
  --ck-plate-rivet: 0.3em;           /* screw head diameter */
  --ck-plate-rivet-inset: 0.3em;     /* screw centre from each end of the plate */
  --ck-plate-slot-angle: 90deg;      /* screw slot: 90deg vertical, 0deg horizontal */

  position: relative;
  /* Full size where it fits; on narrow screens, shrink to exactly the
     section's width. --ck-plate-text is the label's text width in em, summed
     from measured glyph advances by the section_head macro (see
     PLATE_ADVANCES in sitegen/config.py), plus the two side paddings, which
     also hold the screws. Kerning is off so that sum is exact. */
  font-size: min(4em, 100cqi / (var(--ck-plate-text, 12) + 2 * var(--ck-plate-pad-x)));
  font-kerning: none;
  font-family: 'Aulendur Brand', 'IBM Plex Sans', Helvetica, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0.2em;   /* PLATE_LETTER_SPACING in sitegen/config.py */
  text-box: trim-both cap alphabetic;   /* padding measures from the cap height */
  white-space: nowrap;
  text-transform: uppercase;
  /* the plate hugs its lettering, centered over the section; a label too long
     to fit shrinks until the plate spans the section exactly */
  margin-inline: auto;
  padding: var(--ck-plate-pad-y) calc(var(--ck-plate-pad-x) * 1em);
  border-radius: var(--ck-plate-radius);
  /* layers, top to bottom: the enamel's sheen, a faint falloff toward the
     bottom edge, the enamel */
  background:
    linear-gradient(180deg, rgb(255 255 255 / var(--ck-plate-gloss)), rgb(255 255 255 / 0) 45%),
    linear-gradient(0deg, rgb(0 0 0 / 0.05), rgb(0 0 0 / 0) 40%),
    var(--ck-plate-enamel);
  box-shadow:
    /* the cut edge: lit along the top, shaded along the bottom */
    inset 0 1px 0 rgb(255 255 255 / 0.95),
    inset 0 -1px 0 rgb(0 0 0 / 0.12),
    /* a hairline where the plate meets the case, and its shadow on the case */
    0 0 0 1px rgb(0 0 0 / 0.16),
    0 var(--ck-plate-lift) calc(var(--ck-plate-lift) * 1.5) rgb(0 0 0 / 0.28);
}
/* the screws: domed silver heads, lit from above, each cut with a slot (dark,
   its far wall catching the light) and sitting in its own small shadow on the
   enamel */
.ck-plate::before,
.ck-plate::after {
  content: '';
  position: absolute;
  top: 50%;
  width: var(--ck-plate-rivet);
  height: var(--ck-plate-rivet);
  margin-top: calc(var(--ck-plate-rivet) / -2);
  border-radius: 50%;
  background:
    linear-gradient(var(--ck-plate-slot-angle),
      transparent 43%, rgb(30 32 35 / 0.65) 43% 55%, rgb(255 255 255 / 0.55) 55% 60%, transparent 60%),
    radial-gradient(circle at 38% 30%, #fff 0%, #e6e8ea 16%, #b3b7bc 48%, #7b8085 80%, #575b60 100%);
  box-shadow:
    0 0.012em 0.02em rgb(0 0 0 / 0.45),
    0 0 0 0.006em rgb(0 0 0 / 0.3);
}
.ck-plate::before { left: calc(var(--ck-plate-rivet-inset) - var(--ck-plate-rivet) / 2); }
.ck-plate::after { right: calc(var(--ck-plate-rivet-inset) - var(--ck-plate-rivet) / 2); }
.ck-plate__text {
  /* black lettering, its top edges catching a little light */
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--ck-plate-ink), white var(--ck-plate-ink-lit)) 0%,
    var(--ck-plate-ink) 28%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-right: -0.2em;   /* trailing letter-spacing gap */
  /* embossed shallow: a fine shadow just below each stroke */
  filter: drop-shadow(0 var(--ck-plate-ink-raise) calc(var(--ck-plate-ink-raise) * 0.8) rgb(0 0 0 / 0.3));
}

/* ── Molded plastic frame (groups controls; mirrors .dv-plastic-frame) ─── */
.ck-frame {
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.05));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(0, 0, 0, 0.1);
}

/* ── Console key: keycap + mini LCD function label (mirrors macro pad) ─── */
.ck-key {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.ck-key__cap {
  
  width: var(--ck-key);
  height: var(--ck-key);
  background: var(--ck-keycap) center / contain no-repeat;
  filter: drop-shadow(var(--ck-key-shadow));
  transition: filter 0.05s ease, transform 0.05s ease;
  container-type: size;   /* cqh sizes the printed glyphs with the cap */
}
/* Cap printing — the terminal keyboard's language: the char as a crimson rune
   (primary, in-universe) + a small Latin reference legend beneath it. */
.ck-key__rune {
  position: absolute;
  left: 35%;
  top: 35%;
  transform: translate(-50%, -50%);
  font-family: 'Starforge Runic', serif;
  font-size: 54cqh;
  
  color: #8b0a1e;
  
}
.ck-key__legend {
  position: absolute;
  left: 70%;
  top: 65%;
  transform: translate(-50%, -50%);
  font-family: 'Iosevka Term Slab', 'Courier New', Courier, monospace;
  font-style: italic;
  font-weight: 700;
  font-size: 18cqh;
  
  text-transform: uppercase;
  color: #3a0a0a;
  mix-blend-mode: color-burn;
  
}
.ck-key:hover .ck-key__cap { filter: brightness(1.08) drop-shadow(var(--ck-key-shadow)); }
.ck-key:active .ck-key__cap,
.ck-key.is-down .ck-key__cap {
  transform: translateY(2px);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}
.ck-key__lcd {
  position: relative;
  width: var(--ck-key);
  height: 17px;
  
  display: grid;
  place-items: center;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--ck-lcd-glass), var(--ck-lcd-glass-2));
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.35),
    inset 0 0 0 1px rgba(0, 0, 0, 0.28),
    0 1px 0 rgba(255, 255, 255, 0.4);
  font-family: 'DS-Digital', 'Courier New', monospace;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 1px;
}
.ck-key__ghost { color: var(--ck-lcd-ghost); }
.ck-key__lit {
  position: absolute;
  
  
  
  color: var(--ck-lcd-seg);
}

/* ── Knob (filmstrip; mirrors .dv-knob) ────────────────────────────────── */
.ck-knob {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: ns-resize;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
}
.ck-knob__frames {
  width: 100%;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
}


/* ── Power/activity LED (mirrors .dv-led) ──────────────────────────────── */
.ck-led {
  
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #b6ffce, #46e07a 55%, #1faf57 100%);
  /* glow · dome highlight · cutout: seam ring + lit bottom lip (matches --ck-recess) */
  box-shadow:
    0 0 10px 2px rgba(70, 224, 122, 0.8),
    inset 0 1px 2px rgba(255, 255, 255, 0.6),
    0 0 0 1px rgba(0, 0, 0, 0.3),
    0 1px 0 rgba(255, 255, 255, 0.35);
  animation: ck-led-pulse 3.2s ease-in-out infinite;
}

@keyframes ck-led-pulse { 0%, 100% { opacity: 0.82; } 50% { opacity: 1; } }

/* ── ASCII banner (typed row-by-row when in view) ──────────────────────── */
/* Sizing avoids container units: the terminal's min(1em, 100cqi/…) formula
   resolved differently across engines (WebKit picked the uncapped branch and
   blew the art up ~1.6×, garbling it). Viewport units resolve the same
   everywhere, so the art shrinks to the viewport instead: full size where it
   fits, else the width left after the page and screen gutters — measured at
   about 64px + 11.5vw on narrow screens, taken as 80px + 11.5vw for headroom
   (a desktop scrollbar counts in 100vw) — divided by the art's width in em
   (--art-em, set by the banner macro: 0.5em per column). */
/* Not `ck-banner`: Fanboy's Annoyance List carries a generic `##.ck-banner`
   cosmetic filter (a cookie-consent library claims that class), so uBlock
   Origin hid the wordmark on the live domain. Keep `banner` out of the root
   class token. */
.ck-ascii-banner { overflow: hidden; }
.ck-ascii-banner__art {
  font-size: min(1em, (88.5vw - 80px) / var(--art-em, 33.5));
  margin: 0 auto;
  color: var(--ck-accent);
  
  line-height: 1.05;
  
}
/* Rows are fixed-height rails; glyph runs are absolutely placed on the 0.5em
   column grid (see AsciiBanner.jsx — nothing here is text-measured). */
.ck-ascii-banner__row {
  position: relative;
  height: 1.05em;
  
}
.ck-ascii-banner__run {
  position: absolute;
  
  
}
.ck-ascii-banner.is-live .ck-ascii-banner__row {
  animation: ck-row-in 0.26s ease-out both;
  animation-delay: calc(var(--i) * 42ms);
}
@keyframes ck-row-in {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: none; }
}

/* ── TUI accordion (FAQ) ───────────────────────────────────────────────── */
.ck-acc { border: 1px solid var(--ck-dim); border-radius: 3px; }
.ck-acc + .ck-acc { margin-top: 0.55rem; }
.ck-acc__q {
  display: block;
  width: 100%;
  padding: 0.55rem 0.9rem;
  cursor: pointer;
  color: var(--ck-fg);
  font: inherit;
  list-style: none;
  -webkit-user-select: none;
  user-select: none;
}
.ck-acc__q::-webkit-details-marker { display: none; }
.ck-acc__q::before { content: '▸ '; color: var(--ck-accent); }
.ck-acc[open] > .ck-acc__q::before { content: '▾ '; }
.ck-acc__q:hover { background: rgba(200, 242, 192, 0.07); }
.ck-acc__a {
  margin: 0 0.9rem 0.8rem 1.2rem;
  padding-left: 0.9rem;
  border-left: 1px solid var(--ck-dim);
  
  
}

/* ── TUI form fields ───────────────────────────────────────────────────── */
.ck-field { display: block; margin-bottom: 0.9rem; }
.ck-field__label { display: block; color: var(--ck-dim); margin-bottom: 0.25rem; }
.ck-field__label::before { content: '· '; color: var(--ck-accent); }
.ck-input {
  width: 100%;
  
  padding: 0.45rem 0.7rem;
  background: rgba(200, 242, 192, 0.05);
  border: 1px solid var(--ck-dim);
  border-radius: 3px;
  color: var(--ck-fg);
  font-family: var(--ck-font-body);
}
.ck-input:focus {
  outline: none;
  border-color: var(--ck-accent);
  box-shadow: 0 0 0 1px var(--ck-accent);
}
.ck-input--area { min-height: 7.5em; resize: vertical; }
.ck-input::placeholder { color: color-mix(in srgb, var(--ck-dim) 60%, transparent);  }
/* browser autofill would otherwise paint the field opaque white inside the CRT */
.ck-input:-webkit-autofill,
.ck-input:-webkit-autofill:hover,
.ck-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ck-fg);
  -webkit-box-shadow: 0 0 0 1000px #10140f inset;
  caret-color: var(--ck-fg);
}

/* TUI action button — the link token language with the weight of a key */
.ck-btn {
  
  background: transparent;
  border: 1px solid var(--ck-accent);
  border-radius: 3px;
  color: var(--ck-accent);
  font-family: var(--ck-font-screen);
  font-size: 1em;
  letter-spacing: 0.05em;
  padding: 0.42rem 0.9rem;
  cursor: pointer;
}
.ck-btn::before { content: '[ '; }
.ck-btn::after { content: ' ]'; }
.ck-btn:hover,
.ck-btn:focus-visible {
  background: var(--ck-accent);
  color: var(--ck-bg);
  outline: none;
}
.ck-btn:active { transform: translateY(1px); }

/* form submit acknowledgement line */
.ck-form__status { margin: 0.9rem 0 0; color: var(--ck-fg); }
.ck-form__status::before { content: '✓ '; color: var(--ck-accent); }

/* ── Page scaffolding ──────────────────────────────────────────────────── */
.ck-main {
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(1rem, 3vw, 2rem) clamp(0.9rem, 3vw, 1.6rem) 3rem;
}
/* Legacy App.css gives .page `gap: 2.75rem`, which was stacking with section
   margins. Sections carry NO margin; the flex gap (--ck-section-gap) is the
   single source of rhythm. */
.ck-main.page { gap: var(--ck-section-gap);  }

.ck-section__head {
  container-type: inline-size;   /* the section label sizes itself to this width */
  display: flex;
  
  
  margin-bottom: 0.7rem;
}

/* ── Nav bar: brand + key row (the site's "macro pad") ─────────────────── */
.ck-nav {
  
  
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 10px clamp(0.9rem, 3vw, 1.6rem) 6px;
  flex-wrap: wrap;
}
/* the brand panel: logo and power LED embossed together, stretching from the
   logo to just past the LED, beside the key frame */
.ck-nav__badge {
  /* ◀ nav panel depths (the shared look comes from the .ck-emboss knobs) */
  --ck-emboss-recess-depth: 2px;
  --ck-emboss-raise: 2px;
  flex: 1;
  align-self: stretch;   /* as tall as the key frame beside it, top and bottom */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 12px 8px 14px;
  border-radius: 10px;
}
.ck-nav__brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ck-nav__mark {
  /* logo-black.svg drawn as a mask so its fill tracks the wordmark engrave color */
  height: 64px;
  aspect-ratio: 600 / 264;
  background-color: var(--ck-label);
  -webkit-mask: var(--brand-mark) center / contain no-repeat;
  mask: var(--brand-mark) center / contain no-repeat;
}
.ck-nav__word {
  display: flex;
  flex-direction: column;
  
  font-family: 'Aulendur Brand', 'IBM Plex Sans', Helvetica, Arial, sans-serif;
  color: var(--ck-label);   /* raised by .ck-emboss__raised on the brand link */
  line-height: 1;
  
}
.ck-nav__word strong { font-size: 34px;  letter-spacing: 0.15em; }
.ck-nav__word span { font-size: 15px; letter-spacing: 0.46em; margin-top: 5px; opacity: 0.75; }
.ck-nav__cluster { display: flex; align-items: center; }
.ck-nav__led { width: 17px; height: 17px; }
@media (max-width: 900px) {
  .ck-nav__mark { height: 46px; }
  .ck-nav__word strong { font-size: 24px; }
  .ck-nav__word span { font-size: 11px; }
}
.ck-nav__keys {
  display: flex;
  
  gap: 8px;
  padding: 7px 9px 6px;
}
/* latched key = the page you're on (physically pressed in) */
.ck-nav__keys .ck-key.is-down { cursor: default; }

@media (max-width: 760px) {
  .ck-chassis { --ck-key: 38px; }
  .ck-nav { justify-content: center; }
  .ck-nav__keys { flex-wrap: wrap; justify-content: center; }
}

/* ── Content + footer scaffolding around legacy pages ──────────────────── */
.ck-content {
  
  padding-bottom: 0.8rem;   /* the legacy .content padding-bottom is dead space here */
}
.ck-footer-wrap {
  
  
  max-width: 1160px;
  /* auto cross-axis margins disable flex stretch — width:100% above restores it */
  margin: 0 auto;
  padding: 0 clamp(0.9rem, 3vw, 1.6rem) 2.2rem;
}
.ck-footer__grid {
  /* content-sized columns: the long nav list gets the room it needs */
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
}
.ck-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  
  /* one line when it fits, wrapping when it doesn't */
  display: flex;
  flex-wrap: wrap;
  column-gap: 1.2ch;
}
.ck-footer__list li { margin: 0.32rem 0; }
.ck-footer__list li + li::before { content: '· '; color: var(--ck-dim); }
.ck-footer__legal {
  /* stamped below the screen, straight on the plastic — not phosphor text.
     font-family: inherits var(--ck-font-body) from .ck-chassis. */
  margin: 1rem 0 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgb(0 0 0 / 85%);   /* black, translucent so it reads with the plastic grain under it */
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);   /* incised */
  text-align: center;
}


/* ── Layout helpers (home + section grids) ─────────────────────────────── */
.ck-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.1rem;
}

.ck-split {
  display: grid;
  grid-template-columns: minmax(280px, 5fr) minmax(320px, 7fr);
  gap: 1.4rem;
  align-items: start;   /* screens keep their natural height — no stretching */
}

@media (max-width: 900px) {
  .ck-split, .ck-split--flip { grid-template-columns: 1fr; }
}
/* grid items default to min-width:auto — one long unbreakable token (command
   output, cascade chains) would then hold the track open and overflow the
   page on phones. Let tracks shrink; overflow-wrap handles the text. */

.ck-hero { text-align: center; }
.ck-hero__title {
  margin: 1.1rem 0 0.4rem;
  font-size: clamp(1.1rem, 2.6vw, 1.6rem);
  font-weight: 400;
  letter-spacing: 0.06em;   /* snake_case syntax — keep it tight and code-like */
  
}
.ck-screen :is(h1, h2, h3) { margin-top: 1lh; }   /* one blank terminal line */
.ck-screen :is(h1, h2, h3):first-child { margin-top: 0; }
.ck-screen :is(h1, h2)::before { content: 'aulendur:~$ '; color: var(--ck-dim); }
.ck-screen .ck-box :is(h1, h2)::before { content: none; }   /* box headlines aren't shell prompts */

.ck-hero__mission {
  max-width: 62ch;
  margin: 0 auto 0.5rem;
  
  
}

.ck-caret {
  
  animation: ck-caret-blink 1.05s steps(1) infinite;
}
@keyframes ck-caret-blink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}
/* tree leaves (mission domains) */
.ck-tree { list-style: none; margin: 0.4rem 0 0; padding: 0;  }
.ck-tree li { margin: 0.22rem 0;  }
.ck-tree li::before { content: '├─ '; color: var(--ck-dim); font-family: 'Courier New', Courier, monospace; }
.ck-tree li:last-child::before { content: '└─ '; }

/* ── AsciiGlobe ────────────────────────────────────────────────────────── */
.ck-globe {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  container-type: inline-size;
}
.ck-globe__stage {
  position: relative;
  line-height: 0;
  /* Both layers have 120 columns; the land layer is absolutely positioned. */
  width: 120ch;
  max-width: 100%;
  font-family: var(--ck-font-screen);
  font-size: clamp(3px, 0.75vw, 9.5px);
  font-size: clamp(3px, 1.25cqi, 9.5px);
}
.ck-globe__ocean,
.ck-globe__land {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: 1.06;
  letter-spacing: 0;
  white-space: pre;
}
.ck-globe__ocean { color: color-mix(in srgb, var(--ck-dim) 45%, transparent); }
.ck-globe__land {
  position: absolute;
  inset: 0;
  color: var(--ck-accent);
  text-shadow: 0 0 3px rgba(255, 182, 72, 0.28);
}
.ck-globe .ck-tui-keys { flex-wrap: wrap; justify-content: center; }
.ck-globe .ck-tui-key,
.ck-globe [data-globe-meter] { flex: 0 0 auto; white-space: nowrap; }
/* ── WeavecastTerm ─────────────────────────────────────────────────────── */
.ck-wterm__out {
  height: 15.4em;       /* FIXED — the screen can never grow; output scrolls */
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--ck-dim) rgba(0, 0, 0, 0.4);
  line-height: 1.5;
}
/* square TUI scrollbar: block thumb on a dark rail */
.ck-wterm__out::-webkit-scrollbar { width: 10px; }
.ck-wterm__out::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.4); }
.ck-wterm__out::-webkit-scrollbar-thumb {
  background: var(--ck-dim);
  border-radius: 0;
  border: 2px solid rgba(0, 0, 0, 0.55);
}
.ck-wterm__out::-webkit-scrollbar-thumb:hover { background: var(--ck-fg); }
/* anywhere (not break-word): long tokens must also shrink min-content */
.ck-wterm__line { white-space: pre-wrap; overflow-wrap: anywhere; }
.ck-wterm__line.is-dim { color: var(--ck-dim); }
.ck-wterm__line.is-accent { color: var(--ck-accent); }

.ck-wterm__caret.is-idle { opacity: 0.3;  }
/* ASCII mode keys: plain glyph buttons, lit when selected */
.ck-tui-keys { display: flex; gap: 1.5ch; margin-top: 0.4rem; }
.ck-tui-key {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--ck-dim);
  cursor: pointer;
}
.ck-tui-key:hover { color: var(--ck-fg); }
.ck-tui-key.is-down { color: var(--ck-accent); }
.ck-tui-key:disabled { opacity: 0.35; cursor: default; }
.ck-tui-key:disabled:hover { color: var(--ck-dim); }

/* ── Interior pages (showcase / about / blog) ──────────────────────────── */

.ck-quote {  font-style: italic; max-width: 76ch; line-height: 1.75; }

/* Leadership: portrait slot (awaiting ANSI art) + bio. */
.ck-leader { display: flex; gap: 1.1rem; align-items: flex-start; }
@media (max-width: 560px) { .ck-leader { flex-direction: column; } }
.ck-portrait {
  flex: 0 0 auto;
  
  
  display: grid;
  
  border: 1px solid var(--ck-dim);
  border-radius: 3px;
  
}

/* live feed: the slot wraps the art instead of centering the ghost */
.ck-portrait--live {
  width: 172px;
  
  
  padding: 4px;
  background: var(--ck-bg);
}
.ck-ansi-art {
  
  width: 100%;
  
  image-rendering: pixelated;
  border-radius: 2px;
}

/* ── Reduced motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ck-screen--boot { animation: none; }
  .ck-ascii-banner__row,
  .ck-ascii-banner.is-live .ck-ascii-banner__row { animation: none;  }
  .ck-led { animation: none; }
  .ck-caret, .ck-wterm__caret { animation: none; }
}
/* Long-form Markdown prose on a console screen. The generator emits plain
   h2/p/a inside a .ck-prose wrapper; these rules give them the console look
   (links are covered by the .ck-prose a selectors beside .ck-link in
   console.css, so hover/focus behavior stays defined in one place). */
.ck-prose h2 {
  color: var(--ck-accent);
  margin: 1.4rem 0 0.4rem;
  
  
}
.ck-prose p {
  
  
  margin: 0 0 0.4rem;
  max-width: 78ch;
}
/* Console widget rules — the two things console.css cannot know about the
   generated markup for AsciiBanner and AsciiGlobe. Everything else the widget
   partials need (the globe grid, the wterm transcript, the portrait canvas)
   already lives in console.css; these exist so each widget reads correctly
   before — or entirely without — the scripts. */

/* AsciiBanner rows are hidden by console.css until the script latches
   `.is-live` to play the typed reveal. Without JavaScript nothing ever
   latches, so the wordmark would stay invisible: keep it visible until the
   reveal starts. (With `is-live` this rule no longer matches, and the
   animation's own fill takes over.) */
.ck-ascii-banner:not(.is-live) .ck-ascii-banner__row { opacity: 1; }

/* The globe stage is a fixed 68-column grid — the script's COLS. The ocean pre
   is the in-flow box; the land pre is absolutely overlaid on it, so both must
   be the full grid width. The generated rows are right-trimmed (a blank row
   would otherwise collapse the stage and pull the land layer off-centre). */
.ck-globe__ocean,
.ck-globe__land { width: 68ch; }

/* AnsiPortrait's static fallback: the author photo fills the portrait slot
   until the script swaps in the canvas — and is the slot's only content when
   the script never runs. The slot itself carries `.author-bio__photo`, so it is
   already the sized flex item (or `.ck-portrait` on the About page). */