
:root {
   --bg-ground:#A8503C;
   --bg-deep:#853625;
   --bg-soot:#201614;
   --bg-surface:#261A18;
   --bg-card:rgba(32, 22, 20, 0.78);
   --bg-card-solid:#2B1D1B;
   --bg-plate:rgba(133, 54, 37, 0.88);
   --bg-sage-tint:rgba(159, 184, 160, 0.12);
   --bg-overlay:rgba(32, 22, 20, 0.88);

   --text-bone:#F6EFE9;
   --text-muted:#DDCFC6;
   --text-dim:#BDA99D;
   --text-dark:#201614;

   --accent-sage:#D5E5D4;
   --accent-sage-dark:#A5C2A4;
   --accent-sage-light:#F0F7F0;
   --accent-sage-hover:#AFD0B0;
   --accent-rust:#D9694E;
   --accent-gold:#D8A563;

   --border-ledger:rgba(246, 239, 233, 0.22);
   --border-subtle:rgba(246, 239, 233, 0.12);
   --border-strong:rgba(246, 239, 233, 0.40);
   --border-sage:rgba(159, 184, 160, 0.42);
   --border-soot:rgba(32, 22, 20, 0.6);

   --bedu-047:"DM Serif Display", Georgia, serif;
   --bedu-e87:"Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   --bedu-9f0:"JetBrains Mono", Consolas, "Liberation Mono", Menlo, monospace;

   --step--2:clamp(0.72rem, 0.18vw + 0.68rem, 0.82rem);
   --step--1:clamp(0.85rem, 0.28vw + 0.79rem, 0.98rem);
   --bedu-fc5:clamp(1.00rem, 0.42vw + 0.91rem, 1.18rem);
   --bedu-c98:clamp(1.18rem, 0.62vw + 1.04rem, 1.45rem);
   --bedu-4ea:clamp(1.39rem, 0.92vw + 1.19rem, 1.82rem);
   --bedu-aac:clamp(1.64rem, 1.34vw + 1.35rem, 2.28rem);
   --bedu-0ca:clamp(1.93rem, 1.95vw + 1.51rem, 2.85rem);
   --bedu-524:clamp(2.28rem, 2.81vw + 1.68rem, 3.56rem);
   --step-hero:clamp(2.35rem, 4.6vw + 1.35rem, 4.35rem);

   --space-3xs:0.25rem;
   --space-2xs:0.5rem;
   --space-xs:0.75rem;
   --space-sm:1rem;
   --space-md:1.5rem;
   --space-lg:2rem;
   --space-xl:3rem;
   --space-2xl:4.5rem;
   --space-3xl:6rem;

   --duration-fast:150ms;
   --duration-mid:260ms;
   --duration-slow:440ms;
   --ease-out:cubic-bezier(0.22, 1, 0.36, 1);
   --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
   --ease-press:cubic-bezier(0.4, 0, 0.2, 1);

   --radius-xs:2px;
   --radius-sm:4px;
   --radius-md:6px;
   --radius-lg:8px;

   --shadow-sm:0 2px 8px rgba(20, 14, 13, 0.35);
   --shadow-md:0 6px 20px rgba(20, 14, 13, 0.45);
   --shadow-lg:0 12px 36px rgba(20, 14, 13, 0.55);
   --shadow-ledger:inset 0 1px 0 rgba(246, 239, 233, 0.16), 0 4px 18px rgba(20, 14, 13, 0.4);

   --container-max:1240px;
   --container-wide:1380px;
   --container-narrow:860px;
   --container-pad:clamp(1rem, 3vw, 2.25rem);

   --utility-height:2.25rem;
   --masthead-height:4.5rem;
   --banner-height:0px;
}

*, *::before, *::after {
   box-sizing:border-box;
}

html {
   -webkit-text-size-adjust:100%;
   tab-size:4;
   scroll-behavior:smooth;
   background-color:var(--bg-ground);

   color:var(--text-bone);
}

body {
   margin:0;
   padding:0;
   font-family:var(--bedu-e87);
   font-size:var(--bedu-fc5);
   line-height:1.62;
   font-weight:400;
   color:var(--text-bone);
   background-color:var(--bg-ground);
   background-image: 
      linear-gradient(rgba(246, 239, 233, 0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(246, 239, 233, 0.035) 1px, transparent 1px);
   background-size:48px 48px;

   min-height:100vh;
   overflow-x:hidden;
   text-rendering:optimizeLegibility;
   -webkit-font-smoothing:antialiased;
   -moz-osx-font-smoothing:grayscale;
}

input, button, select, textarea, optgroup {
   font:inherit;
   color:inherit;
}

img, svg, video, canvas, audio, iframe, embed, object {
   display:block;
   max-width:100%;
}

img {
   height:auto;
}

h1, h2, h3, h4, h5, h6 {
   font-family:var(--bedu-047);
   font-weight:400;
   line-height:1.15;
   color:var(--text-bone);
   margin-top:0;
   margin-bottom:var(--space-xs);
   overflow-wrap:break-word;
   word-break:normal;
}

h1 {
   font-size:var(--bedu-0ca);
   letter-spacing:-0.015em;
}

h2 {
   font-size:var(--bedu-aac);
   letter-spacing:-0.01em;

}

h3 {
   font-size:var(--bedu-4ea);
   letter-spacing:-0.005em;
}

h4 {
   font-size:var(--bedu-c98);
}

h5 {
   font-size:var(--bedu-fc5);
   font-family:var(--bedu-e87);
   font-weight:700;
   text-transform:uppercase;
   letter-spacing:0.06em;
}

h6 {
   font-size:var(--step--1);
   font-family:var(--bedu-9f0);
   font-weight:600;
   letter-spacing:0.08em;
   text-transform:uppercase;
}

p {
   margin-top:0;
   margin-bottom:var(--space-sm);
   color:var(--text-bone);
}

p.lede {
   font-size:var(--bedu-c98);
   line-height:1.5;
   color:var(--text-muted);
   max-width:68ch;
}

p.small, small {
   font-size:var(--step--1);
   color:var(--text-muted);
}

a {
   color:var(--text-bone);
   text-decoration-thickness:1px;
   text-underline-offset:3px;
   transition:color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}

a:hover {
   color:var(--accent-sage-light);
}

strong, b {
   font-weight:700;
   color:#FFFFFF;
}

em, i {
   font-style:italic;
}

hr {
   border:0;
   height:1px;
   background-color:var(--border-ledger);
   margin:var(--space-xl) 0;
}

ul, ol {
   margin-top:0;
   margin-bottom:var(--space-md);
   padding-left:1.4rem;
}

li {
   margin-bottom:var(--space-2xs);
}

li::marker {
   color:var(--accent-sage);
}

blockquote {
   margin:var(--space-lg) 0;
   padding:var(--space-md) var(--space-lg);
   border-left:3px solid var(--accent-sage);
   background:var(--bg-card);
   font-family:var(--bedu-047);
   font-size:var(--bedu-c98);
   color:var(--text-bone);
}

code, kbd, samp, pre {
   font-family:var(--bedu-9f0);
   font-size:0.9em;
}

code {
   background-color:var(--bg-soot);
   color:var(--accent-sage-light);
   padding:0.15em 0.35em;
   border-radius:var(--radius-xs);
   border:1px solid var(--border-subtle);
}

pre {
   display:block;
   padding:var(--space-md);
   background-color:var(--bg-soot);
   color:var(--text-bone);
   overflow-x:auto;
   border:1px solid var(--border-ledger);
   border-radius:var(--radius-sm);
   margin-bottom:var(--space-md);
}

pre code {
   background:transparent;
   padding:0;
   border:0;
}

table {
   width:100%;
   border-collapse:collapse;
   margin-bottom:var(--space-lg);
   text-align:left;
}

th, td {
   padding:var(--space-xs) var(--space-sm);
   border-bottom:1px solid var(--border-ledger);
   vertical-align:top;
}

th {
   font-family:var(--bedu-9f0);
   font-size:var(--step--1);
   font-weight:600;
   text-transform:uppercase;
   letter-spacing:0.05em;
   color:var(--text-muted);
   background-color:var(--bg-deep);
}

.table-responsive {
   width:100%;
   overflow-x:auto;
   -webkit-overflow-scrolling:touch;
   margin-bottom:var(--space-lg);
   border:1px solid var(--border-ledger);
}

.skip-link {
   position:absolute;
   top:-100px;
   left:1rem;
   z-index:10000;
   padding:0.75rem 1.25rem;
   background-color:var(--bg-soot);
   color:var(--text-bone);
   border:2px solid var(--accent-sage);
   border-radius:var(--radius-sm);
   font-family:var(--bedu-9f0);
   font-size:var(--step--1);
   text-decoration:none;
   font-weight:700;
   transition:top var(--duration-fast) var(--ease-out);
}

.skip-link:focus {
   top:1rem;
   outline:2px solid var(--accent-sage-light);
   outline-offset:2px;
}

.container {
   width:100%;
   max-width:var(--container-max);
   margin-left:auto;
   margin-right:auto;
   padding-left:var(--container-pad);
   padding-right:var(--container-pad);
}

.container-wide {
   width:100%;
   max-width:var(--container-wide);
   margin-left:auto;
   margin-right:auto;
   padding-left:var(--container-pad);
   padding-right:var(--container-pad);
}

.container-narrow {
   width:100%;
   max-width:var(--container-narrow);
   margin-left:auto;
   margin-right:auto;
   padding-left:var(--container-pad);
   padding-right:var(--container-pad);
}

.grid {
   display:grid;
   gap:var(--space-md);
}

.grid-2 {
   display:grid;
   grid-template-columns:1fr;
   gap:var(--space-lg);
}

@media (min-width: 768px) {
   .grid-2 {
      grid-template-columns:repeat(2, minmax(0, 1fr));
   }
}

.grid-3 {
   display:grid;
   grid-template-columns:1fr;
   gap:var(--space-md);
}

@media (min-width: 640px) {
   .grid-3 {
      grid-template-columns:repeat(2, minmax(0, 1fr));
   }
}

@media (min-width: 1024px) {
   .grid-3 {
      grid-template-columns:repeat(3, minmax(0, 1fr));
   }
}

.grid-4 {
   display:grid;
   grid-template-columns:1fr;
   gap:var(--space-md);
}

@media (min-width: 600px) {
   .grid-4 {
      grid-template-columns:repeat(2, minmax(0, 1fr));
   }
}

@media (min-width: 1024px) {
   .grid-4 {
      grid-template-columns:repeat(4, minmax(0, 1fr));
   }
}

.grid > *, .grid-2 > *, .grid-3 > *, .grid-4 > *, .flex-row > * {
   min-width:0;
}

.flex-row {
   display:flex;
   flex-direction:row;
   flex-wrap:wrap;
   gap:var(--space-sm);
}

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

.flex-between {
   display:flex;
   align-items:center;
   justify-content:space-between;
   flex-wrap:wrap;
   gap:var(--space-sm);
}

.flex-align-center {
   display:flex;
   align-items:center;
   gap:var(--space-sm);
}

.stack > * + * {
   margin-top:var(--space-md);
}

.cluster {
   display:flex;
   flex-wrap:wrap;
   gap:var(--space-xs);
   align-items:center;
}

.ledger-rule {
   width:100%;
   height:1px;
   background-color:var(--border-ledger);
   position:relative;
   margin:var(--space-lg) 0;
}

.ledger-rule::after {
   content:'';
   position:absolute;
   right:0;
   top:-3px;
   width:7px;
   height:7px;
   background-color:var(--accent-sage);
   border-radius:50%;
}

.ledger-rule-double {
   width:100%;
   height:4px;
   border-top:1px solid var(--border-ledger);
   border-bottom:1px solid var(--border-ledger);
   margin:var(--space-md) 0;
}

.ledger-tick {
   display:inline-block;
   font-family:var(--bedu-9f0);
   font-size:var(--step--2);
   color:var(--accent-sage);
   letter-spacing:0.08em;
   text-transform:uppercase;
}

.sr-only, .visually-hidden {
   position:absolute !important;
   width:1px !important;
   height:1px !important;
   padding:0 !important;
   margin:-1px !important;
   overflow:hidden !important;
   clip:rect(0, 0, 0, 0) !important;
   white-space:nowrap !important;
   border:0 !important;
}

.icon {
   width:1.15em;
   height:1.15em;
   display:inline-block;
   vertical-align:-0.18em;
   fill:currentColor;
   flex-shrink:0;
}

.icon-sm {
   width:0.95em;
   height:0.95em;
}

.icon-lg {
   width:1.45em;
   height:1.45em;
}

.generative-depth-canvas {
   position:fixed;
   inset:0;
   width:100vw;
   height:100vh;
   pointer-events:none;
   z-index:-1;
   opacity:0.45;
}

.drawn-line-system {
   position:relative;
   padding-left:var(--space-xl);
}

@media (max-width: 640px) {
   .drawn-line-system {
      padding-left:var(--space-lg);
   }
}

.drawn-line-system::before {
   content:'';
   position:absolute;
   left:9px;
   top:0;
   bottom:0;
   width:2px;
   background:linear-gradient(to bottom, var(--accent-sage), var(--border-ledger) 85%, transparent);
}

.stage-marker {
   position:absolute;
   left:0;
   top:0.25rem;
   width:20px;
   height:20px;
   border-radius:50%;
   background-color:var(--bg-soot);
   border:2px solid var(--accent-sage);
   box-shadow:0 0 0 4px rgba(168, 80, 60, 0.7);
   display:flex;
   align-items:center;
   justify-content:center;
}

.stage-marker::after {
   content:'';
   width:6px;
   height:6px;
   border-radius:50%;
   background-color:var(--accent-sage);
}

@media (prefers-reduced-motion: reduce) {
   *, *::before, *::after {
      animation-duration:0.01ms !important;
      animation-iteration-count:1 !important;
      transition-duration:0.01ms !important;
      scroll-behavior:auto !important;
   }
  
   .generative-depth-canvas {
      display:none !important;
   }
  
   .marquee-track {
      animation:none !important;
      transform:none !important;
   }
}
