:root {
   /* Color Story: Paper bag / Kraft (#BFA384) */
   --ground: #bfa384;
   --ground-elevated: #cbb194;
   --ground-sunken: #b09272;
   --ground-raw: 191, 163, 132;
   --ink: #14100c;
   --ink-muted: #3d3328;
   --ink-faint: #6a5b4c;
   --accent: #8e160a;
   --accent-hover: #6e1007;
   --accent-contrast: #ffffff;
   --rule: #735c45;
   --rule-light: #8e7760;
   --focus-ring: #a82619;
   --error: #9b1c1c;
   --error-bg: #eac9c6;
   --success: #2e5c38;
   --success-bg: #cbe3d1;


   /* Typography */
   --biju-2fb: "Oswald", "Impact", "Arial Narrow", sans-serif;
   --biju-1fd: "Bitter", Georgia, "Times New Roman", serif;
   --biju-655: "Space Mono", Consolas, "Courier New", monospace;


   /* Fluid typography scale (min 320px to max 1440px) */
   --text-xs: clamp(0.72rem, 0.68rem + 0.2vw, 0.8125rem);
   --text-sm: clamp(0.8125rem, 0.77rem + 0.25vw, 0.9375rem);
   --text-base: clamp(1rem, 0.94rem + 0.3vw, 1.125rem);
   --text-md: clamp(1.125rem, 1.05rem + 0.4vw, 1.28rem);
   --text-lg: clamp(1.3rem, 1.18rem + 0.65vw, 1.625rem);
   --text-xl: clamp(1.6rem, 1.4rem + 1.1vw, 2.125rem);
   --text-2xl: clamp(2rem, 1.7rem + 1.8vw, 3rem);
   --text-3xl: clamp(2.5rem, 2.1rem + 2.8vw, 4.25rem);
   --text-display: clamp(3rem, 2.4rem + 4.5vw, 6rem);


   /* Leading */
   --leading-tight: 1.08;
   --leading-snug: 1.25;
   --leading-normal: 1.55;
   --leading-loose: 1.75;


   /* Tracking */
   --tracking-tight: -0.02em;
   --tracking-normal: 0em;
   --tracking-wide: 0.06em;
   --tracking-stamp: 0.12em;


   /* Layout geometry: Centered editorial column & spec ledgers */
   --container-max: 76rem;
   --measure-narrow: 46rem;
   --measure-spec: 58rem;
   --gutter: clamp(1rem, 0.75rem + 1.25vw, 2.5rem);


   --space-2xs: 0.25rem;
   --space-xs: 0.5rem;
   --space-sm: 0.875rem;
   --space-md: 1.25rem;
   --space-lg: 2rem;
   --space-xl: 3.25rem;
   --space-2xl: 5rem;
   --space-3xl: 7.5rem;


   /* Elevation / Hard borders (no soft SaaS cards, letterpress stamp feel) */
   --border-width: 1px;
   --border-thick: 2px;
   --border-stamp: 3px;
   --border-rule: 1px solid var(--rule);
   --border-ink: 1px solid var(--ink);
   --border-ink-thick: 2px solid var(--ink);


   /* Motion Tokens */
   --ease-letterpress: cubic-bezier(0.16, 1, 0.3, 1);
   --ease-snap: cubic-bezier(0.25, 1, 0.5, 1);
   --dur-fast: 140ms;
   --dur-base: 220ms;
   --dur-reveal: 600ms;
   --dur-duotone: 800ms;
}


/* Hard CSS Reset */
*, *::before, *::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}


html {
   font-size: 100%;
   -webkit-text-size-adjust: 100%;
   scroll-behavior: smooth;
   background-color: var(--ground);
   color: var(--ink);
}


body {
   min-height: 100vh;
   font-family: var(--biju-1fd);
   font-size: var(--text-base);
   line-height: var(--leading-normal);
   background-color: var(--ground);
   color: var(--ink);
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   overflow-x: hidden;
   position: relative;
}


body::before {
   content: "";
   position: fixed;
   inset: 0;
   pointer-events: none;
   z-index: 999;
   opacity: 0.035;
   background-image: radial-gradient(var(--ink) 1px, transparent 1px);
   background-size: 4px 4px;
}


/* Headings & Display: Oswald condensed gothic, uppercase, letterpress weight */
h1, h2, h3, h4, h5, h6 {
   font-family: var(--biju-2fb);

   font-weight: 700;
   line-height: var(--leading-tight);
   color: var(--ink);
   text-transform: uppercase;
   letter-spacing: var(--tracking-wide);
   overflow-wrap: break-word;
   hyphens: manual;
}


h1 {
   font-size: var(--text-3xl);
   margin-bottom: var(--space-md);
}


h2 {
   font-size: var(--text-2xl);
   margin-bottom: var(--space-sm);
}


h3 {
   font-size: var(--text-xl);
   margin-bottom: var(--space-xs);
}


h4 {
   font-size: var(--text-lg);
   margin-bottom: var(--space-xs);
}


p {
   margin-bottom: var(--space-md);
   max-width: 70ch;
}


p.lede {
   font-size: var(--text-lg);
   line-height: var(--leading-snug);
   font-weight: 500;
   color: var(--ink);
   max-width: var(--measure-narrow);

}


p.standfirst {
   font-family: var(--biju-1fd);
   font-size: var(--text-md);
   font-style: italic;
   color: var(--ink-muted);
   margin-bottom: var(--space-md);
}


small, .text-sm {
   font-size: var(--text-sm);
   line-height: var(--leading-normal);
}


.text-xs {
   font-size: var(--text-xs);
   letter-spacing: var(--tracking-wide);
}


.mono {
   font-family: var(--biju-655);
   letter-spacing: 0.02em;
}


/* Links */
a {
   color: var(--ink);
   text-decoration: underline;
   text-underline-offset: 3px;
   text-decoration-thickness: 1px;
   transition: color var(--dur-fast) ease, text-decoration-color var(--dur-fast) ease;
}


a:hover {
   color: var(--accent);
   text-decoration-color: var(--accent);
}


/* Images & Media */
img, svg, picture {
   display: block;
   max-width: 100%;
   height: auto;
}


/* Inherit only for interactive form elements */
button, input, select, textarea { font: inherit; }


button {
   cursor: pointer;
   background: none;
   border: none;
}


table {
   border-collapse: collapse;
   width: 100%;
}


ul, ol { list-style: none; }


hr {
   border: 0;
   border-top: 1px solid var(--rule);
   margin: var(--space-lg) 0;
}


/* Accessibility & Focus States */
:focus-visible {
   outline: 2px solid var(--focus-ring);
   outline-offset: 3px;
}


.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;
}


.skip-link {
   position: absolute;
   top: var(--space-xs);
   left: var(--space-xs);
   padding: var(--space-xs) var(--space-md);
   background-color: var(--ink);
   color: var(--ground);
   font-family: var(--biju-655);
   font-size: var(--text-sm);
   font-weight: 700;
   text-decoration: none;
   z-index: 10000;
   transform: translateY(-150%);
   transition: transform var(--dur-fast) ease;
}


.skip-link:focus {
   transform: translateY(0);
   outline: 2px solid var(--accent);
}


/* Layout Primitives */
.wrapper {
   width: 100%;
   max-width: var(--container-max);
   margin-left: auto;
   margin-right: auto;
   padding-left: var(--gutter);
   padding-right: var(--gutter);
}


.editorial-col {
   width: 100%;
   max-width: var(--measure-narrow);

   margin-left: auto;
   margin-right: auto;
}


.spec-col {
   width: 100%;
   max-width: var(--measure-spec);
   margin-left: auto;
   margin-right: auto;
}


.section-flow {
   padding-top: var(--space-2xl);
   padding-bottom: var(--space-2xl);
}


.section-flow-tight {
   padding-top: var(--space-xl);
   padding-bottom: var(--space-xl);
}


/* Icon Primitive */
.icon {
   display: inline-block;
   width: 1.125em;
   height: 1.125em;
   stroke-width: 0;
   stroke: currentColor;
   fill: currentColor;
   vertical-align: -0.15em;
   flex-shrink: 0;
}


.tag-stamp {
   display: inline-flex;
   align-items: center;
   gap: var(--space-2xs);
   font-family: var(--biju-655);
   font-size: var(--text-xs);
   text-transform: uppercase;
   letter-spacing: var(--tracking-stamp);
   padding: 0.2rem 0.55rem;
   border: 1px solid var(--ink);
   background-color: var(--ground-elevated);
   color: var(--ink);
   line-height: 1;
}


.tag-stamp-accent {
   border-color: #7a1005;
   color: #7a1005;
   background-color: transparent;
}


/* CSS Scroll-Driven Scene Fallback & Definition */
@supports (animation-timeline: view()) {
   .scroll-scene-rule {
      transform-origin: left center;
      animation: drawRule linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 30%;
   }


   .scroll-scene-gauge {
      transform-origin: bottom center;
      animation: fanStamp linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 35%;
   }


   @keyframes drawRule {
      from {
         transform: scaleX(0);
         opacity: 0.2;
      }
      to {
         transform: scaleX(1);
         opacity: 1;
      }
   }


   @keyframes fanStamp {
      from {
         opacity: 0.3;
         transform: translateY(18px);
      }
      to {
         opacity: 1;
         transform: translateY(0);
      }
   }
}


/* Reduced Motion Safety */
@media (prefers-reduced-motion: reduce) {
   html { scroll-behavior: auto; }
   *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
   }
}