@property --mesh-x {
   syntax:"<percentage>";
   inherits:false;
   initial-value:20%;
}

@property --mesh-y {
   syntax:"<percentage>";
   inherits:false;
   initial-value:30%;
}

@property --mesh-angle {
   syntax:'<angle>';
   inherits:false;
   initial-value:45deg;
}

:root {
   --ground:#e4eae3;
   --ink:#142018;
   --pine:#1b3829;
   --moss:#3a5444;
   --mist:#d6e0d5;
   --accent:#7a3912;
   --accent-hover:#5e2a0b;
   --accent-soft:rgba(200, 109, 59, 0.12);
   --white:#ffffff;
   --paper-card:#eceeea;
   --border-line:rgba(26, 46, 34, 0.16);
   --border-strong:rgba(26, 46, 34, 0.32);
   --border-light:rgba(26, 46, 34, 0.08);

   --nude-a70:'Oswald', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   --nude-259:'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   --nude-3b4:"Space Mono", SFMono-Regular, Menlo, Monaco, Consolas, monospace;

   --fs-hero:clamp(2.75rem, 7vw + 1rem, 6.25rem);
   --fs-figure:clamp(3.2rem, 9vw + 0.5rem, 7.5rem);
   --fs-h1:clamp(2.2rem, 5vw + 0.75rem, 4.25rem);
   --fs-h2:clamp(1.85rem, 3.8vw + 0.5rem, 3.25rem);
   --fs-h3:clamp(1.35rem, 2.2vw + 0.4rem, 2.15rem);
   --fs-h4:clamp(1.15rem, 1.4vw + 0.3rem, 1.45rem);
   --fs-body:clamp(1rem, 0.25vw + 0.95rem, 1.125rem);
   --fs-lead:clamp(1.15rem, 0.6vw + 1rem, 1.35rem);
   --fs-caption:0.875rem;
   --fs-meta:0.8125rem;
   --fs-tag:0.75rem;

   --lh-tight:1.05;
   --lh-heading:1.18;
   --lh-snug:1.35;
   --lh-body:1.62;

   --tracking-tight:-0.025em;
   --tracking-wide:0.08em;
   --tracking-caps:0.12em;

   --space-3xs:0.25rem;
   --space-2xs:0.5rem;
   --space-xs:0.75rem;
   --space-sm:1rem;
   --space-md:1.5rem;
   --space-lg:2.25rem;
   --space-xl:3.5rem;
   --space-2xl:5rem;
   --space-3xl:7.5rem;

   --sidebar-w:320px;
   --content-max:1320px;
   --measure-prose:68ch;

   --radius-xs:2px;
   --radius-sm:4px;
   --radius-md:8px;
   --radius-lg:14px;
   --radius-pill:999px;

   --shadow-sm:0 1px 3px rgba(26, 46, 34, 0.06), 0 2px 6px rgba(26, 46, 34, 0.04);
   --shadow-md:0 4px 14px rgba(26, 46, 34, 0.08), 0 1px 3px rgba(26, 46, 34, 0.05);
   --shadow-lg:0 12px 32px rgba(26, 46, 34, 0.12), 0 2px 8px rgba(26, 46, 34, 0.06);

   --dur-fast:140ms;
   --dur-base:220ms;
   --dur-slow:420ms;
   --ease-standard:cubic-bezier(0.2, 0, 0, 1);
   --ease-snappy:cubic-bezier(0.16, 1, 0.3, 1);
}

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

* {
   margin:0;
   padding:0;
}

html {
   font-size:16px;
   line-height:var(--lh-body);
   -webkit-text-size-adjust:100%;
   text-rendering:optimizeLegibility;
   -webkit-font-smoothing:antialiased;
   -moz-osx-font-smoothing:grayscale;
   background-color:var(--ground);
   color:var(--ink);
   scroll-behavior:smooth;
}

body {
   min-height:100vh;
   font-family:var(--nude-259);
   font-size:var(--fs-body);
   font-weight:400;
   color:var(--ink);
   background-color:var(--ground);
   overflow-x:hidden;
}

img, picture, svg, video {
   display:block;
   max-width:100%;
   height:auto;
}

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

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

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

a {
   color:inherit;
   text-decoration:none;
}

ul, ol {
   list-style:none;
}

h1, h2, h3, h4, h5, h6 {
   font-family:var(--nude-a70);
   font-weight:600;
   line-height:var(--lh-tight);
   letter-spacing:var(--tracking-tight);
   text-transform:uppercase;
   color:var(--ink);
   text-wrap:balance;
   overflow-wrap:break-word;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p {
   line-height:var(--lh-body);
   max-width:var(--measure-prose);
   overflow-wrap:break-word;
}

p + p {
   margin-top:var(--space-sm);
}

strong, b {
   font-weight:700;
   color:var(--ink);
}

small {
   font-size:var(--fs-caption);
   line-height:var(--lh-snug);
}

code, kbd, samp, pre {
   font-family:var(--nude-3b4);
   font-size:0.9em;
}

.figure-lead {
   display:block;
   font-family:var(--nude-a70);
   font-size:var(--fs-figure);
   font-weight:700;
   line-height:0.95;
   letter-spacing:-0.03em;
   color:var(--ink);
   text-transform:uppercase;
   margin-bottom:var(--space-xs);
}

.figure-unit {
   font-family:var(--nude-3b4);
   font-size:clamp(1rem, 2vw + 0.5rem, 1.85rem);
   font-weight:700;
   letter-spacing:0.02em;
   color:var(--accent);
   vertical-align:baseline;
   margin-left:0.35rem;
}

.figure-meaning {
   font-size:var(--fs-lead);
   font-weight:600;
   line-height:var(--lh-snug);
   color:var(--ink);
   max-width:58ch;
   margin-bottom:var(--space-md);
}

.prose {
   font-size:var(--fs-body);
   line-height:var(--lh-body);
   color:var(--ink);
}

.prose > * + * {
   margin-top:var(--space-sm);
}

.prose ul {
   list-style:disc;
   padding-left:1.35rem;

}

.prose ol {
   list-style:decimal;
   padding-left:1.35rem;

}

.prose li + li {
   margin-top:var(--space-2xs);
}

.prose a {
   text-decoration:underline;
   text-decoration-thickness:1.5px;
   text-underline-offset:3px;
   color:var(--accent);
}

.prose a:hover {
   color:var(--accent-hover);
}

.prose blockquote {
   border-left:4px solid var(--accent);
   padding-left:var(--space-md);
   margin:var(--space-md) 0;
   font-style:italic;
   color:var(--pine);
}

.site-shell {
   display:flex;
   min-height:100vh;
   width:100%;
}

.site-main {
   flex:1 1 0%;
   min-width:0;
   background-color:var(--ground);
   display:flex;
   flex-direction:column;
}

.content-wrap {
   width:100%;
   max-width:var(--content-max);
   margin-left:auto;
   margin-right:auto;
   padding-left:clamp(1.25rem, 3.5vw, 3.5rem);
   padding-right:clamp(1.25rem, 3.5vw, 3.5rem);
}

.site-main > .content-wrap,
main > .content-wrap,
.site-main {
   width:100%;
   max-width:100%;
}

.content-narrow {
   width:100%;
   max-width:860px;
   margin-left:auto;
   margin-right:auto;
   padding-left:clamp(1.25rem, 3.5vw, 3rem);
   padding-right:clamp(1.25rem, 3.5vw, 3rem);
}

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

.skip-link {
   position:fixed;
   top:1rem;
   left:1rem;
   z-index:1000;
   padding:0.75rem 1.25rem;

   background:var(--ink);
   color:var(--white);
   font-weight:700;
   font-size:var(--fs-caption);
   border-radius:var(--radius-sm);
   transform:translateY(-200%);
   transition:transform var(--dur-fast) var(--ease-snappy);
}

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

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

.badge-status {
   display:inline-flex;
   align-items:center;
   gap:0.4rem;
   font-family:var(--nude-3b4);
   font-size:var(--fs-tag);
   font-weight:700;
   text-transform:uppercase;
   letter-spacing:var(--tracking-wide);
   padding:0.35rem 0.65rem;
   border-radius:var(--radius-xs);
   background-color:var(--white);
   color:var(--ink);
   border:1px solid var(--pine);
   min-height:28px;
   position:relative;
   z-index:1;
   margin-bottom:var(--space-xs);
}

.badge-status::before {
   content:"";
   display:inline-block;
   width:7px;
   height:7px;
   border-radius:50%;
   background-color:var(--accent);
}

@keyframes meshShift {
   0% {
      --mesh-x:18%;
      --mesh-y:26%;
      --mesh-angle:35deg;
   }
   33% {
      --mesh-x:72%;
      --mesh-y:68%;
      --mesh-angle:140deg;
   }
   66% {
      --mesh-x:35%;
      --mesh-y:82%;
      --mesh-angle:260deg;
   }
   100% {
      --mesh-x:18%;
      --mesh-y:26%;
      --mesh-angle:35deg;
   }
}

.has-gradient-mesh {
   position:relative;
   background-color:#f3f6f3;
   background-image:
      radial-gradient(circle at var(--mesh-x) var(--mesh-y), rgba(240, 245, 240, 0.9) 0%, rgba(243, 246, 243, 0) 55%),
      conic-gradient(from var(--mesh-angle) at 60% 45%, rgba(243, 246, 243, 0.9) 0deg, rgba(200, 109, 59, 0.04) 120deg, rgba(235, 242, 236, 0.9) 240deg, rgba(243, 246, 243, 0.9) 360deg);
   animation:meshShift 28s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
   *, *::before, *::after {
      animation-duration:0.001ms !important;
      animation-iteration-count:1 !important;
      transition-duration:0.001ms !important;
   }
   html {
      scroll-behavior:auto;
   }
   .has-gradient-mesh {
      animation:none;
      background-image:
         radial-gradient(circle at 35% 35%, rgba(184, 204, 185, 0.65) 0%, rgba(228, 234, 227, 0) 60%),
         conic-gradient(from 45deg at 60% 45%, rgba(214, 224, 213, 0.8) 0deg, rgba(200, 109, 59, 0.08) 120deg, rgba(184, 204, 185, 0.7) 240deg, rgba(214, 224, 213, 0.8) 360deg);
   }
}